From d4e99566b8c61178c9a6fbbb1887d06adbf46f48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Thu, 5 Jan 2023 09:47:58 +0100
Subject: [PATCH] feat: notifications settings page (#782)

---
 components/common/CommonCheckbox.vue          |  5 +-
 components/common/CommonRadio.vue             |  4 +-
 ...ificationEnablePushNotification.client.vue | 28 +++---
 .../NotificationPreferences.client.vue        | 73 ++++++++--------
 ...ficationSubscribePushNotificationError.vue |  6 +-
 components/settings/SettingsItem.vue          |  4 +
 locales/ar-EG.json                            | 73 +++++++++-------
 locales/en-GB.json                            | 85 +++++++++---------
 locales/en-US.json                            | 85 +++++++++---------
 locales/es-ES.json                            | 86 ++++++++++---------
 locales/fr-FR.json                            | 85 +++++++++---------
 locales/nl-NL.json                            | 85 +++++++++---------
 locales/zh-CN.json                            | 76 +++++++++-------
 locales/zh-TW.json                            | 73 +++++++++-------
 pages/notifications.vue                       | 19 ++--
 pages/settings.vue                            |  7 ++
 pages/settings/notifications/index.vue        | 35 ++++++++
 .../settings/notifications/notifications.vue  | 27 ++++++
 .../notifications/push-notifications.vue      | 25 ++++++
 19 files changed, 519 insertions(+), 362 deletions(-)
 create mode 100644 pages/settings/notifications/index.vue
 create mode 100644 pages/settings/notifications/notifications.vue
 create mode 100644 pages/settings/notifications/push-notifications.vue

diff --git a/components/common/CommonCheckbox.vue b/components/common/CommonCheckbox.vue
index a7ebd035..11150bbc 100644
--- a/components/common/CommonCheckbox.vue
+++ b/components/common/CommonCheckbox.vue
@@ -11,11 +11,13 @@ const { modelValue } = defineModel<{
 <template>
   <label
     class="common-checkbox flex items-center cursor-pointer py-1 text-md w-full gap-y-1"
-    :class="hover ? 'hover:bg-active ms--2 ps-4' : null"
+    :class="hover ? 'hover:bg-active ms--2 px-4 py-2' : null"
     @click.prevent="modelValue = !modelValue"
   >
+    <span flex-1 ms-2 pointer-events-none>{{ label }}</span>
     <span
       :class="modelValue ? 'i-ri:checkbox-line' : 'i-ri:checkbox-blank-line'"
+      text-lg
       aria-hidden="true"
     />
     <input
@@ -23,7 +25,6 @@ const { modelValue } = defineModel<{
       type="checkbox"
       sr-only
     >
-    <span ms-2 pointer-events-none>{{ label }}</span>
   </label>
 </template>
 
diff --git a/components/common/CommonRadio.vue b/components/common/CommonRadio.vue
index 05b0dd57..5f0c175a 100644
--- a/components/common/CommonRadio.vue
+++ b/components/common/CommonRadio.vue
@@ -12,9 +12,10 @@ const { modelValue } = defineModel<{
 <template>
   <label
     class="common-radio flex items-center cursor-pointer py-1 text-md w-full gap-y-1"
-    :class="hover ? 'hover:bg-active ms--2 ps-4' : null"
+    :class="hover ? 'hover:bg-active ms--2 px-4 py-2' : null"
     @click.prevent="modelValue = value"
   >
+    <span flex-1 ms-2 pointer-events-none>{{ label }}</span>
     <span
       :class="modelValue === value ? 'i-ri:radio-button-line' : 'i-ri:checkbox-blank-circle-line'"
       aria-hidden="true"
@@ -25,7 +26,6 @@ const { modelValue } = defineModel<{
       :value="value"
       sr-only
     >
-    <span ms-2 pointer-events-none>{{ label }}</span>
   </label>
 </template>
 
diff --git a/components/notification/NotificationEnablePushNotification.client.vue b/components/notification/NotificationEnablePushNotification.client.vue
index 4bedd0b9..175b33d7 100644
--- a/components/notification/NotificationEnablePushNotification.client.vue
+++ b/components/notification/NotificationEnablePushNotification.client.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 defineProps<{
-  showReAuthMessage: boolean
-  withHeader?: boolean
+  closeableHeader?: boolean
   busy?: boolean
   animate?: boolean
 }>()
@@ -16,15 +15,22 @@ const isLegacyAccount = computed(() => !currentUser.value?.vapidKey)
 </script>
 
 <template>
-  <div flex="~ col" gap-y-2 role="alert" aria-labelledby="notifications-warning" :class="withHeader ? 'border-b border-base' : null">
-    <header v-if="withHeader" flex items-center pb-2>
+  <div
+    flex="~ col"
+    gap-y-2
+    role="alert"
+    aria-labelledby="notifications-warning"
+    :class="closeableHeader ? 'border-b border-base' : 'px6 px4'"
+  >
+    <header flex items-center pb-2>
       <h2 id="notifications-warning" text-md font-bold w-full>
-        {{ $t('notification.settings.warning.enable_title') }}
+        {{ $t('settings.notifications.push_notifications.warning.enable_title') }}
       </h2>
       <button
+        v-if="closeableHeader"
         flex rounded-4
         type="button"
-        :title="$t('notification.settings.warning.enable_close')"
+        :title="$t('settings.notifications.push_notifications.warning.enable_close')"
         hover:bg-active cursor-pointer transition-100
         :disabled="busy"
         @click="$emit('hide')"
@@ -33,10 +39,10 @@ const isLegacyAccount = computed(() => !currentUser.value?.vapidKey)
       </button>
     </header>
     <p>
-      {{ $t(withHeader ? 'notification.settings.warning.enable_description' : 'notification.settings.warning.enable_description_short') }}
+      {{ $t(`settings.notifications.push_notifications.warning.enable_description${closeableHeader ? '' : '_settings'}`) }}
     </p>
-    <p v-if="isLegacyAccount && showReAuthMessage">
-      {{ $t('notification.settings.warning.re_auth') }}
+    <p v-if="isLegacyAccount">
+      {{ $t('settings.notifications.push_notifications.warning.re_auth') }}
     </p>
     <button
       btn-outline rounded-full font-bold py4 flex="~ gap2 center" m5
@@ -46,8 +52,8 @@ const isLegacyAccount = computed(() => !currentUser.value?.vapidKey)
       @click="$emit('subscribe')"
     >
       <span aria-hidden="true" :class="busy && animate ? 'i-ri:loader-2-fill animate-spin' : 'i-ri:check-line'" />
-      {{ $t('notification.settings.warning.enable_desktop') }}
+      {{ $t('settings.notifications.push_notifications.warning.enable_desktop') }}
     </button>
-    <slot v-if="showReAuthMessage" name="error" />
+    <slot name="error" />
   </div>
 </template>
diff --git a/components/notification/NotificationPreferences.client.vue b/components/notification/NotificationPreferences.client.vue
index c608bc35..0210e7d0 100644
--- a/components/notification/NotificationPreferences.client.vue
+++ b/components/notification/NotificationPreferences.client.vue
@@ -2,7 +2,7 @@
 import NotificationSubscribePushNotificationError
   from '~/components/notification/NotificationSubscribePushNotificationError.vue'
 
-defineProps<{ show: boolean }>()
+defineProps<{ show?: boolean }>()
 
 const {
   pushNotificationData,
@@ -71,12 +71,12 @@ const doSubscribe = async () => {
   try {
     const result = await subscribe()
     if (result !== 'subscribed') {
-      subscribeError = t(`notification.settings.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
+      subscribeError = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
       showSubscribeError = true
     }
   }
   catch {
-    subscribeError = t('notification.settings.subscription_error.request_error')
+    subscribeError = t('settings.notifications.push_notifications.subscription_error.request_error')
     showSubscribeError = true
   }
   finally {
@@ -103,40 +103,41 @@ onActivated(() => (busy = false))
 </script>
 
 <template>
-  <div v-if="pwaEnabled && (showWarning || show)">
+  <section v-if="pwaEnabled && (showWarning || show)" aria-labelledby="pn-s">
     <Transition name="slide-down">
-      <div v-if="show" flex="~ col" border="b base" px5 py4>
-        <header flex items-center pb-2>
-          <h2 id="notifications-title" text-md font-bold w-full>
-            {{ $t('notification.settings.title') }}
-          </h2>
-        </header>
+      <div v-if="show" flex="~ col" border="b base">
+        <h3 id="pn-settings" px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
+          {{ $t('settings.notifications.push_notifications.label') }}
+        </h3>
         <template v-if="isSupported">
           <div v-if="isSubscribed" flex="~ col">
-            <form flex="~ col" gap-y-2 @submit.prevent="saveSettings">
+            <form flex="~ col" gap-y-2 px6 pb4 @submit.prevent="saveSettings">
+              <p id="pn-instructions" text-sm pb2 aria-hidden="true">
+                {{ $t('settings.notifications.push_notifications.instructions') }}
+              </p>
               <fieldset flex="~ col" gap-y-1 py-1>
-                <legend>{{ $t('notification.settings.alerts.title') }}</legend>
-                <CommonCheckbox v-model="pushNotificationData.follow" hover :label="$t('notification.settings.alerts.follow')" />
-                <CommonCheckbox v-model="pushNotificationData.favourite" hover :label="$t('notification.settings.alerts.favourite')" />
-                <CommonCheckbox v-model="pushNotificationData.reblog" hover :label="$t('notification.settings.alerts.reblog')" />
-                <CommonCheckbox v-model="pushNotificationData.mention" hover :label="$t('notification.settings.alerts.mention')" />
-                <CommonCheckbox v-model="pushNotificationData.poll" hover :label="$t('notification.settings.alerts.poll')" />
+                <legend>{{ $t('settings.notifications.push_notifications.alerts.title') }}</legend>
+                <CommonCheckbox v-model="pushNotificationData.follow" hover :label="$t('settings.notifications.push_notifications.alerts.follow')" />
+                <CommonCheckbox v-model="pushNotificationData.favourite" hover :label="$t('settings.notifications.push_notifications.alerts.favourite')" />
+                <CommonCheckbox v-model="pushNotificationData.reblog" hover :label="$t('settings.notifications.push_notifications.alerts.reblog')" />
+                <CommonCheckbox v-model="pushNotificationData.mention" hover :label="$t('settings.notifications.push_notifications.alerts.mention')" />
+                <CommonCheckbox v-model="pushNotificationData.poll" hover :label="$t('settings.notifications.push_notifications.alerts.poll')" />
               </fieldset>
               <fieldset flex="~ col" gap-y-1 py-1>
-                <legend>{{ $t('notification.settings.policy.title') }}</legend>
-                <CommonRadio v-model="pushNotificationData.policy" hover value="all" :label="$t('notification.settings.policy.all')" />
-                <CommonRadio v-model="pushNotificationData.policy" hover value="followed" :label="$t('notification.settings.policy.followed')" />
-                <CommonRadio v-model="pushNotificationData.policy" hover value="follower" :label="$t('notification.settings.policy.follower')" />
-                <CommonRadio v-model="pushNotificationData.policy" hover value="none" :label="$t('notification.settings.policy.none')" />
+                <legend>{{ $t('settings.notifications.push_notifications.policy.title') }}</legend>
+                <CommonRadio v-model="pushNotificationData.policy" hover value="all" :label="$t('settings.notifications.push_notifications.policy.all')" />
+                <CommonRadio v-model="pushNotificationData.policy" hover value="followed" :label="$t('settings.notifications.push_notifications.policy.followed')" />
+                <CommonRadio v-model="pushNotificationData.policy" hover value="follower" :label="$t('settings.notifications.push_notifications.policy.follower')" />
+                <CommonRadio v-model="pushNotificationData.policy" hover value="none" :label="$t('settings.notifications.push_notifications.policy.none')" />
               </fieldset>
-              <div flex="~ col" gap-y-4 py-1 sm="~ justify-between flex-row">
+              <div flex="~ col" gap-y-4 gap-x-2 py-1 sm="~ justify-between flex-row">
                 <button
                   btn-solid font-bold py2 full-w sm-wa flex="~ gap2 center"
                   :class="busy || !saveEnabled ? 'border-transparent' : null"
                   :disabled="busy || !saveEnabled"
                 >
                   <span :class="busy && animateSave ? 'i-ri:loader-2-fill animate-spin' : 'i-ri:save-2-fill'" />
-                  {{ $t('notification.settings.save_settings') }}
+                  {{ $t('settings.notifications.push_notifications.save_settings') }}
                 </button>
                 <button
                   btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
@@ -146,7 +147,7 @@ onActivated(() => (busy = false))
                   @click="undoChanges"
                 >
                   <span aria-hidden="true" class="i-material-symbols:undo-rounded" />
-                  {{ $t('notification.settings.undo_settings') }}
+                  {{ $t('settings.notifications.push_notifications.undo_settings') }}
                 </button>
               </div>
             </form>
@@ -158,19 +159,14 @@ onActivated(() => (busy = false))
                 :disabled="busy"
               >
                 <span aria-hidden="true" :class="busy && animateRemoveSubscription ? 'i-ri:loader-2-fill animate-spin' : 'i-material-symbols:cancel-rounded'" />
-                {{ $t('notification.settings.unsubscribe') }}
+                {{ $t('settings.notifications.push_notifications.unsubscribe') }}
               </button>
             </form>
           </div>
           <template v-else>
-            <p v-if="showWarning" role="alert" aria-labelledby="notifications-title">
-              {{ $t('notification.settings.unsubscribed_with_warning') }}
-            </p>
             <NotificationEnablePushNotification
-              v-else
               :animate="animateSubscription"
               :busy="busy"
-              :show-re-auth-message="!showWarning"
               @hide="hideNotification"
               @subscribe="doSubscribe"
             >
@@ -185,15 +181,16 @@ onActivated(() => (busy = false))
             </NotificationEnablePushNotification>
           </template>
         </template>
-        <p v-else role="alert" aria-labelledby="notifications-unsupported">
-          {{ $t('notification.settings.unsupported') }}
-        </p>
+        <div v-else px6 pb4 role="alert" aria-labelledby="n-unsupported">
+          <p id="n-unsupported">
+            {{ $t('settings.notifications.push_notifications.unsupported') }}
+          </p>
+        </div>
       </div>
     </Transition>
     <NotificationEnablePushNotification
-      v-if="showWarning"
-      show-re-auth-message
-      with-header
+      v-if="showWarning && !show"
+      closeable-header
       px5
       py4
       :animate="animateSubscription"
@@ -210,5 +207,5 @@ onActivated(() => (busy = false))
         </Transition>
       </template>
     </NotificationEnablePushNotification>
-  </div>
+  </section>
 </template>
diff --git a/components/notification/NotificationSubscribePushNotificationError.vue b/components/notification/NotificationSubscribePushNotificationError.vue
index e7118fe3..367c2b99 100644
--- a/components/notification/NotificationSubscribePushNotificationError.vue
+++ b/components/notification/NotificationSubscribePushNotificationError.vue
@@ -22,13 +22,13 @@ const { modelValue } = defineModel<{
     <head id="notification-failed" flex justify-between>
       <div flex items-center gap-x-2 font-bold>
         <div aria-hidden="true" i-ri:error-warning-fill />
-        <p>{{ title ?? $t('notification.settings.subscription_error.title') }}</p>
+        <p>{{ title ?? $t('settings.notifications.push_notifications.subscription_error.title') }}</p>
       </div>
-      <CommonTooltip placement="bottom" :content="$t('notification.settings.subscription_error.clear_error')">
+      <CommonTooltip placement="bottom" :content="$t('settings.notifications.push_notifications.subscription_error.clear_error')">
         <button
           flex rounded-4 p1
           hover:bg-active cursor-pointer transition-100
-          :aria-label="$t('notification.settings.subscription_error.clear_error')"
+          :aria-label="$t('settings.notifications.push_notifications.subscription_error.clear_error')"
           @click="modelValue = false"
         >
           <span aria-hidden="true" w-1.75em h-1.75em i-ri:close-line />
diff --git a/components/settings/SettingsItem.vue b/components/settings/SettingsItem.vue
index 58620101..4de5d113 100644
--- a/components/settings/SettingsItem.vue
+++ b/components/settings/SettingsItem.vue
@@ -6,6 +6,7 @@ const props = defineProps<{
   icon?: string
   to?: string | Record<string, string>
   command?: boolean
+  disabled?: boolean
   external?: true
 }>()
 
@@ -33,10 +34,13 @@ useCommand({
 
 <template>
   <NuxtLink
+    :disabled="disabled"
     :to="to"
     :external="external"
     exact-active-class="text-primary"
+    :class="disabled ? 'op25 pointer-events-none ' : ''"
     block w-full group focus:outline-none
+    :tabindex="disabled ? -1 : null"
     @click="to ? $scrollToTop() : undefined"
   >
     <div
diff --git a/locales/ar-EG.json b/locales/ar-EG.json
index ff7d25be..2ea0294b 100644
--- a/locales/ar-EG.json
+++ b/locales/ar-EG.json
@@ -158,39 +158,6 @@
     "missing_type": "MISSING notification.type:",
     "reblogged_post": "اعاد نشر منشورك",
     "request_to_follow": "طلب(ت) متابعتك",
-    "settings": {
-      "alerts": {
-        "favourite": "المفضلة",
-        "follow": "متابعين جدد",
-        "mention": "المنشورات التي تذكرني",
-        "poll": "استطلاعات الرأي",
-        "reblog": "إعادة نشر منشورك",
-        "title": "ما هي التنبيهات التي تريد تلقيها؟"
-      },
-      "close_btn": "أغلق إعدادات التنبيهات",
-      "policy": {
-        "all": "من اي شخص",
-        "followed": "من الناس الذين أتابعهم",
-        "follower": "من الناس الذين يتبعونني",
-        "none": "من لا أحد",
-        "title": "من الذي يمكنني تلقي التنبيهات منه؟"
-      },
-      "save_settings": "حفظ التغييرات الإعدادات",
-      "show_btn": "إظهار إعدادات التنبيهات",
-      "title": "إعدادات التنبيهات",
-      "undo_settings": "تراجع عن تغييرات الإعدادات",
-      "unsubscribe": "تعطيل التنبيهات",
-      "unsubscribed_with_warning": "مكّن الإشعارات لتلقي التنبيهات من هذا الحساب بالنقر فوق الزر \"@:notification.settings.warning.enable_desktop{'\"'}",
-      "unsupported": "متصفحك لا يدعم التنبيهات",
-      "warning": {
-        "enable_close": "أغلق",
-        "enable_description": "لتلقي التنبيهات عندما لا يكون Elk مفتوحًا، قم بتمكين تنبيهات النظام. يمكنك التحكم بدقة في أنواع التفاعلات التي تنشئ تنبيهات النظام عبر الزر \"Show Settings\" أعلاه.",
-        "enable_description_short": "لتغيير إعدادات تنبيهات النظام عندما لا يكون Elk مفتوحًا، يجب أولاً تمكين تنبيهات النظام.",
-        "enable_desktop": "تفعيل تنبيهات النظام",
-        "enable_title": "لا تفوت عليك أي شيء",
-        "re_auth": "يبدو أن الخادم الخاص بك لا يدعم دفع التنبيهات. حاول تسجيل الخروج ثم تسجيل الدخول مرة أخرى ، إذا استمرت هذه الرسالة في الظهور ، فاتصل بمسؤول الخادم."
-      }
-    },
     "signed_up": "تسجل",
     "update_status": "قام(ت) بتحديث حالته(ا)"
   },
@@ -232,6 +199,46 @@
       "display_language": "اللغة المعروضة",
       "label": "اللغة"
     },
+    "notifications": {
+      "label": "Notifications",
+      "notifications": {
+        "label": "Notifications settings"
+      },
+      "push_notifications": {
+        "alerts": {
+          "favourite": "المفضلة",
+          "follow": "متابعين جدد",
+          "mention": "المنشورات التي تذكرني",
+          "poll": "استطلاعات الرأي",
+          "reblog": "إعادة نشر منشورك",
+          "title": "ما هي التنبيهات التي تريد تلقيها؟"
+        },
+        "description": "Receive notifications even when you are not using Elk.",
+        "instructions": "Don't forget to save your changes using @:settings.notifications.push_notifications.save_settings button!",
+        "label": "Push notifications settings",
+        "policy": {
+          "all": "من اي شخص",
+          "followed": "من الناس الذين أتابعهم",
+          "follower": "من الناس الذين يتبعونني",
+          "none": "من لا أحد",
+          "title": "من الذي يمكنني تلقي التنبيهات منه؟"
+        },
+        "save_settings": "حفظ التغييرات الإعدادات",
+        "undo_settings": "تراجع عن تغييرات الإعدادات",
+        "unsubscribe": "تعطيل التنبيهات",
+        "unsupported": "متصفحك لا يدعم التنبيهات",
+        "warning": {
+          "enable_close": "أغلق",
+          "enable_description": "لتلقي التنبيهات عندما لا يكون Elk مفتوحًا، قم بتمكين تنبيهات النظام. يمكنك التحكم بدقة في أنواع التفاعلات التي تنشئ تنبيهات النظام عبر الزر \"Show Settings\" أعلاه.",
+          "enable_description_settings": "To receive notifications when Elk is not open, enable push notifications. You will be able to control precisely what types of interactions generate push notifications on this same screen once you enable them.",
+          "enable_desktop": "تفعيل تنبيهات النظام",
+          "enable_title": "لا تفوت عليك أي شيء",
+          "re_auth": "يبدو أن الخادم الخاص بك لا يدعم دفع التنبيهات. حاول تسجيل الخروج ثم تسجيل الدخول مرة أخرى ، إذا استمرت هذه الرسالة في الظهور ، فاتصل بمسؤول الخادم."
+        }
+      },
+      "show_btn": "Go to notifications settings"
+    },
+    "notifications_settings": "Notifications",
     "preferences": {
       "label": "التفضيلات"
     },
diff --git a/locales/en-GB.json b/locales/en-GB.json
index 824c01eb..bd672d5c 100644
--- a/locales/en-GB.json
+++ b/locales/en-GB.json
@@ -162,45 +162,6 @@
     "missing_type": "MISSING notification.type:",
     "reblogged_post": "reblogged your post",
     "request_to_follow": "requested to follow you",
-    "settings": {
-      "alerts": {
-        "favourite": "Favourites",
-        "follow": "New followers",
-        "mention": "Mentions",
-        "poll": "Polls",
-        "reblog": "Reblog your post",
-        "title": "What notifications to receive?"
-      },
-      "close_btn": "Close push notifications settings",
-      "policy": {
-        "all": "From anyone",
-        "followed": "Of people I follow",
-        "follower": "Of people who follow me",
-        "none": "From no one",
-        "title": "Who can I receive notifications from?"
-      },
-      "save_settings": "Save settings changes",
-      "show_btn": "Show push notifications settings",
-      "subscription_error": {
-        "clear_error": "Clear error",
-        "permission_denied": "Permission denied: enable notifications in your browser.",
-        "request_error": "An error occurred while requesting the subscription, try again and if the error persists, please report the issue to the Elk repository.",
-        "title": "Could not subscribe to push notifications"
-      },
-      "title": "Push notifications settings",
-      "undo_settings": "Undo settings changes",
-      "unsubscribe": "Disable push notifications",
-      "unsubscribed_with_warning": "Enable notifications to receive notifications from this account by clicking \"@:notification.settings.warning.enable_desktop{'\"'} button.",
-      "unsupported": "Your browser does not support push notifications.",
-      "warning": {
-        "enable_close": "Close",
-        "enable_description": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications via the \"@:notification.settings.show_btn{'\"'} button above once enabled.",
-        "enable_description_short": "To change push notifications settings when Elk is not open, you must first enable push notifications.",
-        "enable_desktop": "Enable push notifications",
-        "enable_title": "Never miss anything",
-        "re_auth": "It seems that your server does not support push notifications. Try sign out and sign in again, if this message still appears contact your server administrator."
-      }
-    },
     "signed_up": "signed up",
     "update_status": "updated their post"
   },
@@ -242,6 +203,52 @@
       "display_language": "Display Language",
       "label": "Language"
     },
+    "notifications": {
+      "label": "Notifications",
+      "notifications": {
+        "label": "Notifications settings"
+      },
+      "push_notifications": {
+        "alerts": {
+          "favourite": "Favorites",
+          "follow": "New followers",
+          "mention": "Mentions",
+          "poll": "Polls",
+          "reblog": "Reblog your post",
+          "title": "What notifications to receive?"
+        },
+        "description": "Receive notifications even when you are not using Elk.",
+        "instructions": "Don't forget to save your changes using @:settings.notifications.push_notifications.save_settings button!",
+        "label": "Push notifications settings",
+        "policy": {
+          "all": "From anyone",
+          "followed": "Of people I follow",
+          "follower": "Of people who follow me",
+          "none": "From no one",
+          "title": "Who can I receive notifications from?"
+        },
+        "save_settings": "Save settings",
+        "subscription_error": {
+          "clear_error": "Clear error",
+          "permission_denied": "Permission denied: enable notifications in your browser.",
+          "request_error": "An error occurred while requesting the subscription, try again and if the error persists, please report the issue to the Elk repository.",
+          "title": "Could not subscribe to push notifications"
+        },
+        "undo_settings": "Undo changes",
+        "unsubscribe": "Disable push notifications",
+        "unsupported": "Your browser does not support push notifications.",
+        "warning": {
+          "enable_close": "Close",
+          "enable_description": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications via the \"@:settings.notifications.show_btn{'\"'} button above once enabled.",
+          "enable_description_settings": "To receive notifications when Elk is not open, enable push notifications. You will be able to control precisely what types of interactions generate push notifications on this same screen once you enable them.",
+          "enable_desktop": "Enable push notifications",
+          "enable_title": "Never miss anything",
+          "re_auth": "It seems that your server does not support push notifications. Try sign out and sign in again, if this message still appears contact your server administrator."
+        }
+      },
+      "show_btn": "Go to notifications settings"
+    },
+    "notifications_settings": "Notifications",
     "preferences": {
       "label": "Preferences"
     },
diff --git a/locales/en-US.json b/locales/en-US.json
index 7b8f0785..fcd79765 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -173,45 +173,6 @@
     "missing_type": "MISSING notification.type:",
     "reblogged_post": "reblogged your post",
     "request_to_follow": "requested to follow you",
-    "settings": {
-      "alerts": {
-        "favourite": "Favorites",
-        "follow": "New followers",
-        "mention": "Mentions",
-        "poll": "Polls",
-        "reblog": "Reblog your post",
-        "title": "What notifications to receive?"
-      },
-      "close_btn": "Close push notifications settings",
-      "policy": {
-        "all": "From anyone",
-        "followed": "Of people I follow",
-        "follower": "Of people who follow me",
-        "none": "From no one",
-        "title": "Who can I receive notifications from?"
-      },
-      "save_settings": "Save settings changes",
-      "show_btn": "Show push notifications settings",
-      "subscription_error": {
-        "clear_error": "Clear error",
-        "permission_denied": "Permission denied: enable notifications in your browser.",
-        "request_error": "An error occurred while requesting the subscription, try again and if the error persists, please report the issue to the Elk repository.",
-        "title": "Could not subscribe to push notifications"
-      },
-      "title": "Push notifications settings",
-      "undo_settings": "Undo settings changes",
-      "unsubscribe": "Disable push notifications",
-      "unsubscribed_with_warning": "Enable notifications to receive notifications from this account by clicking \"@:notification.settings.warning.enable_desktop{'\"'} button.",
-      "unsupported": "Your browser does not support push notifications.",
-      "warning": {
-        "enable_close": "Close",
-        "enable_description": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications via the \"@:notification.settings.show_btn{'\"'} button above once enabled.",
-        "enable_description_short": "To change push notifications settings when Elk is not open, you must first enable push notifications.",
-        "enable_desktop": "Enable push notifications",
-        "enable_title": "Never miss anything",
-        "re_auth": "It seems that your server does not support push notifications. Try sign out and sign in again, if this message still appears contact your server administrator."
-      }
-    },
     "signed_up": "signed up",
     "update_status": "updated their post"
   },
@@ -261,6 +222,52 @@
       "display_language": "Display Language",
       "label": "Language"
     },
+    "notifications": {
+      "label": "Notifications",
+      "notifications": {
+        "label": "Notifications settings"
+      },
+      "push_notifications": {
+        "alerts": {
+          "favourite": "Favorites",
+          "follow": "New followers",
+          "mention": "Mentions",
+          "poll": "Polls",
+          "reblog": "Reblog your post",
+          "title": "What notifications to receive?"
+        },
+        "description": "Receive notifications even when you are not using Elk.",
+        "instructions": "Don't forget to save your changes using @:settings.notifications.push_notifications.save_settings button!",
+        "label": "Push notifications settings",
+        "policy": {
+          "all": "From anyone",
+          "followed": "Of people I follow",
+          "follower": "Of people who follow me",
+          "none": "From no one",
+          "title": "Who can I receive notifications from?"
+        },
+        "save_settings": "Save settings",
+        "subscription_error": {
+          "clear_error": "Clear error",
+          "permission_denied": "Permission denied: enable notifications in your browser.",
+          "request_error": "An error occurred while requesting the subscription, try again and if the error persists, please report the issue to the Elk repository.",
+          "title": "Could not subscribe to push notifications"
+        },
+        "undo_settings": "Undo changes",
+        "unsubscribe": "Disable push notifications",
+        "unsupported": "Your browser does not support push notifications.",
+        "warning": {
+          "enable_close": "Close",
+          "enable_description": "To receive notifications when Elk is not open, enable push notifications. You can control precisely what types of interactions generate push notifications via the \"@:settings.notifications.show_btn{'\"'} button above once enabled.",
+          "enable_description_settings": "To receive notifications when Elk is not open, enable push notifications. You will be able to control precisely what types of interactions generate push notifications on this same screen once you enable them.",
+          "enable_desktop": "Enable push notifications",
+          "enable_title": "Never miss anything",
+          "re_auth": "It seems that your server does not support push notifications. Try sign out and sign in again, if this message still appears contact your server administrator."
+        }
+      },
+      "show_btn": "Go to notifications settings"
+    },
+    "notifications_settings": "Notifications",
     "preferences": {
       "label": "Preferences"
     },
diff --git a/locales/es-ES.json b/locales/es-ES.json
index fdcf745d..231099c0 100644
--- a/locales/es-ES.json
+++ b/locales/es-ES.json
@@ -158,45 +158,6 @@
     "missing_type": "MISSING notification.type:",
     "reblogged_post": "retooteó tu publicación",
     "request_to_follow": "ha solicitado seguirte",
-    "settings": {
-      "alerts": {
-        "favourite": "Favoritos",
-        "follow": "Nuevos seguidores",
-        "mention": "Menciones",
-        "poll": "Encuestas",
-        "reblog": "Retooteo de tus publicaciones",
-        "title": "¿Qué notificaciones recibir?"
-      },
-      "close_btn": "Cerrar ajustes de las notificaciones push",
-      "policy": {
-        "all": "De cualquier persona",
-        "followed": "De personas que sigo",
-        "follower": "De personas que me siguen",
-        "none": "De nadie",
-        "title": "¿De quién puedo recibir notificaciones?"
-      },
-      "save_settings": "Guardar cambios",
-      "show_btn": "Mostrar ajustes de las notificaciones push",
-      "subscription_error": {
-        "clear_error": "Limpiar error",
-        "permission_denied": "Permiso denegado: habilite las notificaciones en su navegador.",
-        "request_error": "Se produjo un error al solicitar la suscripción, inténtalo de nuevo y si el error persiste, notifique la incidencia en el repositorio de Elk.",
-        "title": "No se pudo suscribir a las notificaciones push"
-      },
-      "title": "Ajustes de notificaciones push",
-      "undo_settings": "Deshacer cambios",
-      "unsubscribe": "Cancelar notificaciones push",
-      "unsubscribed_with_warning": "Habilite las notificaciones push para recibir notificaciones de esta cuenta haciendo clic en el botón \"@:notification.settings.warning.enable_desktop{'\"'}.",
-      "unsupported": "Tu navegador no soporta notificaciones push.",
-      "warning": {
-        "enable_close": "Cerrar",
-        "enable_description": "Para recibir notificaciones cuando Elk no esté abierto, habilite las notificaciones push. Puedes controlar con precisión qué tipos de interacciones generan notificaciones push a través del botón \"@:notification.settings.show_btn{'\"'} de arriba una vez que estén habilitadas.",
-        "enable_description_short": "Para cambiar los ajustes de las notificaciones push cuando Elk no esté abierto, debe habilitar antes las notificaciones push.",
-        "enable_desktop": "Habilitar notificaciones push",
-        "enable_title": "Nunca te pierdas nada",
-        "re_auth": "Parace que su servidor no soporta notificaciones push. Pruebe a cerrar la sesión y volver a iniciarla, si este mensaje sigue apareciendo contacte con el administrador de su servidor."
-      }
-    },
     "update_status": "ha actualizado su estado"
   },
   "placeholder": {
@@ -234,6 +195,53 @@
       "display_language": "Idioma de la pantalla",
       "label": "Idioma"
     },
+    "notifications": {
+      "label": "Notificaciones",
+      "notifications": {
+        "label": "Ajustes de las notificaciones"
+      },
+      "push_notifications": {
+        "alerts": {
+          "favourite": "Favoritos",
+          "follow": "Nuevos seguidores",
+          "mention": "Menciones",
+          "poll": "Encuestas",
+          "reblog": "Retooteo de tus publicaciones",
+          "title": "¿Qué notificaciones recibir?"
+        },
+        "description": "Reciba notificaciones incluso cuando no esté utilizando Elk.",
+        "instructions": "¡No olvide guardar los cambios utilizando el botón @:settings.notifications.push_notifications.save_settings{'!'}",
+        "label": "Ajustes de las notificaciones push",
+        "policy": {
+          "all": "De cualquier persona",
+          "followed": "De personas que sigo",
+          "follower": "De personas que me siguen",
+          "none": "De nadie",
+          "title": "¿De quién puedo recibir notificaciones?"
+        },
+        "save_settings": "Guardar cambios",
+        "subscription_error": {
+          "clear_error": "Limpiar error",
+          "permission_denied": "Permiso denegado: habilite las notificaciones en su navegador.",
+          "request_error": "Se produjo un error al solicitar la suscripción, inténtalo de nuevo y si el error persiste, notifique la incidencia en el repositorio de Elk.",
+          "title": "No se pudo suscribir a las notificaciones push"
+        },
+        "title": "Ajustes de notificaciones push",
+        "undo_settings": "Deshacer cambios",
+        "unsubscribe": "Cancelar notificaciones push",
+        "unsupported": "Tu navegador no soporta notificaciones push.",
+        "warning": {
+          "enable_close": "Cerrar",
+          "enable_description": "Para recibir notificaciones cuando Elk no esté abierto, habilite las notificaciones push. Puedes controlar con precisión qué tipos de interacciones generan notificaciones push a través del botón \"@:settings.notifications.show_btn{'\"'} de arriba una vez que estén habilitadas.",
+          "enable_description_settings": "Para recibir notificaciones cuando Elk no esté abierto, habilite las notificaciones push. Podrás controlar con precisión qué tipos de interacciones generan notificaciones push en esta misma pantalla una vez las habilite.",
+          "enable_desktop": "Habilitar notificaciones push",
+          "enable_title": "Nunca te pierdas nada",
+          "re_auth": "Parace que su servidor no soporta notificaciones push. Pruebe a cerrar la sesión y volver a iniciarla, si este mensaje sigue apareciendo contacte con el administrador de su servidor."
+        }
+      },
+      "show_btn": "Ir a ajustes de las notificaciones"
+    },
+    "notifications_settings": "Notificaciones",
     "preferences": {
       "label": "Preferencias"
     },
diff --git a/locales/fr-FR.json b/locales/fr-FR.json
index d5752bdc..40b05544 100644
--- a/locales/fr-FR.json
+++ b/locales/fr-FR.json
@@ -161,45 +161,6 @@
     "missing_type": "MISSING notification.type:",
     "reblogged_post": "a relayé votre message",
     "request_to_follow": "vous demande de le suivre",
-    "settings": {
-      "alerts": {
-        "favourite": "Favoris",
-        "follow": "Nouveaux abonné·e·s",
-        "mention": "Mentions",
-        "poll": "Sondages",
-        "reblog": "A republié votre message",
-        "title": "Quelles notifications recevoir ?"
-      },
-      "close_btn": "Fermer les paramètres des notifications push",
-      "policy": {
-        "all": "De n'importe qui",
-        "followed": "Des personnes que je suis",
-        "follower": "Des personnes qui me suivent",
-        "none": "De personne",
-        "title": "De que je peux recevoir des notifications ?"
-      },
-      "save_settings": "Enregistrer les paramètres",
-      "show_btn": "Montrer les paramètres de notification push",
-      "subscription_error": {
-        "clear_error": "Effacer l'erreur",
-        "permission_denied": "Autorisation refusée : activez les notifications dans votre navigateur.",
-        "request_error": "Une erreur s'est produite lors de la demande d'abonnement, réessayez et si l'erreur persiste, veuillez signaler le problème auprès du dépôt Elk.",
-        "title": "Impossible de s'abonner aux notifications push"
-      },
-      "title": "Paramètres des notifications push",
-      "undo_settings": "Annuler les changements de paramètres",
-      "unsubscribe": "Désactiver les notifications push",
-      "unsubscribed_with_warning": "Activez les notifications pour recevoir des notifications de ce compte en cliquant sur le bouton \"@:notification.settings.warning.enable_desktop{'\"'}.",
-      "unsupported": "Votre navigateur ne prend pas en charge les notifications push.",
-      "warning": {
-        "enable_close": "Fermer",
-        "enable_description": "Pour recevoir des notifications lorsque Elk n'est pas ouvert, activez les notifications push. \nVous pouvez contrôler précisément quels types d'interactions génèrent des notifications push via le bouton \"@:notification.settings.show_btn{'\"'} ci-dessus une fois activé.",
-        "enable_description_short": "Pour modifier les paramètres des notifications push lorsque Elk n'est pas ouvert, vous devez d'abord activer les notifications push.",
-        "enable_desktop": "Activer les notifications push",
-        "enable_title": "Ne manquez jamais rien",
-        "re_auth": "Il semble que votre serveur ne supporte pas les notifications push. \nEssayez de vous déconnecter et de vous reconnecter, si ce message persiste, contactez l'administrateur de votre serveur."
-      }
-    },
     "signed_up": "s'est inscrit·e",
     "update_status": "a posté un nouveau message"
   },
@@ -241,6 +202,52 @@
       "display_language": "Langue d'affichage",
       "label": "Langue"
     },
+    "notifications": {
+      "label": "Notifications",
+      "notifications": {
+        "label": "Notifications settings"
+      },
+      "push_notifications": {
+        "alerts": {
+          "favourite": "Favoris",
+          "follow": "Nouveaux abonné·e·s",
+          "mention": "Mentions",
+          "poll": "Sondages",
+          "reblog": "A republié votre message",
+          "title": "Quelles notifications recevoir ?"
+        },
+        "description": "Receive notifications even when you are not using Elk.",
+        "instructions": "Don't forget to save your changes using @:settings.notifications.push_notifications.save_settings button!",
+        "label": "Push notifications settings",
+        "policy": {
+          "all": "De n'importe qui",
+          "followed": "Des personnes que je suis",
+          "follower": "Des personnes qui me suivent",
+          "none": "De personne",
+          "title": "De que je peux recevoir des notifications ?"
+        },
+        "save_settings": "Enregistrer les paramètres",
+        "subscription_error": {
+          "clear_error": "Effacer l'erreur",
+          "permission_denied": "Autorisation refusée : activez les notifications dans votre navigateur.",
+          "request_error": "Une erreur s'est produite lors de la demande d'abonnement, réessayez et si l'erreur persiste, veuillez signaler le problème auprès du dépôt Elk.",
+          "title": "Impossible de s'abonner aux notifications push"
+        },
+        "undo_settings": "Annuler les changements de paramètres",
+        "unsubscribe": "Désactiver les notifications push",
+        "unsupported": "Votre navigateur ne prend pas en charge les notifications push.",
+        "warning": {
+          "enable_close": "Fermer",
+          "enable_description": "Pour recevoir des notifications lorsque Elk n'est pas ouvert, activez les notifications push. \nVous pouvez contrôler précisément quels types d'interactions génèrent des notifications push via le bouton \"@:settings.notifications.show_btn{'\"'} ci-dessus une fois activé.",
+          "enable_description_settings": "To receive notifications when Elk is not open, enable push notifications. You will be able to control precisely what types of interactions generate push notifications on this same screen once you enable them.",
+          "enable_desktop": "Activer les notifications push",
+          "enable_title": "Ne manquez jamais rien",
+          "re_auth": "Il semble que votre serveur ne supporte pas les notifications push. \nEssayez de vous déconnecter et de vous reconnecter, si ce message persiste, contactez l'administrateur de votre serveur."
+        }
+      },
+      "show_btn": "Go to notifications settings"
+    },
+    "notifications_settings": "Notifications settings",
     "preferences": {
       "label": "Préférences"
     },
diff --git a/locales/nl-NL.json b/locales/nl-NL.json
index 31b71fc1..b894d1ff 100644
--- a/locales/nl-NL.json
+++ b/locales/nl-NL.json
@@ -170,45 +170,6 @@
     "missing_type": "MISSEND notificatie.type:",
     "reblogged_post": "herblogd je post",
     "request_to_follow": "vraagt om jou te volgen",
-    "settings": {
-      "alerts": {
-        "favourite": "Favorieten",
-        "follow": "Nieuwe volgers",
-        "mention": " Vermeldingen",
-        "poll": "Peilingen",
-        "reblog": "Herblogd jou post",
-        "title": "Welke notificaties wil je krijgen?"
-      },
-      "close_btn": "Sluit push notificaties instellingen",
-      "policy": {
-        "all": "Van iedereen",
-        "followed": "Van mensen die ik volg",
-        "follower": "Van mensen die mij volgen",
-        "none": "Van niemand",
-        "title": "Van wie kan ik notificaties krijgen?"
-      },
-      "save_settings": "Instellingen aanpassingen opslaan",
-      "show_btn": "Laat push notificaties instellingen zien",
-      "subscription_error": {
-        "clear_error": "Wis error",
-        "permission_denied": "Geen toestemming: zet notificaties aan in je browser.",
-        "request_error": "Er is een error tijdens het ophalen van de subscriptie, probeer opnieuw en als de error blijft, raporteer het probleem naar de Elk repository.",
-        "title": "Kon niet subscriben aan push notificaties"
-      },
-      "title": "Push notificaties instellingen",
-      "undo_settings": "Undo veranderden instellingen",
-      "unsubscribe": "Zet push notificaties uit",
-      "unsubscribed_with_warning": "Zet notificaties aan om notificaties te krijgen van dit account, klik deze \"@:notification.settings.warning.enable_desktop{'\"'} knop.",
-      "unsupported": "Je browser ondersteunt geen push notificaties.",
-      "warning": {
-        "enable_close": "Sluit",
-        "enable_description": "Om notificaties te krijgen terwijl Elk niet open is, zet push notificaties aan. Je kan precies instellen wat voor typen interacties push notificaties genereren via de \"@:notification.settings.show_btn{'\"'} knop hierboven wanneer ze aan staan.",
-        "enable_description_short": "Om push notificatie instellingen te veranderen terwijl Elk niet open is, moet je eerst push notificaties aan zetten.",
-        "enable_desktop": "Zet push notificaties aan",
-        "enable_title": "Mis niets",
-        "re_auth": "It seems that your server does not support push notifications. Try sign out and sign in again, if this message still appears contact your server administrator."
-      }
-    },
     "signed_up": "signed up",
     "update_status": "heeft hun post aangepast"
   },
@@ -250,6 +211,52 @@
       "display_language": "Display Taal",
       "label": "Taal"
     },
+    "notifications": {
+      "label": "Notifications",
+      "notifications": {
+        "label": "Notifications settings"
+      },
+      "push_notifications": {
+        "alerts": {
+          "favourite": "Favorieten",
+          "follow": "Nieuwe volgers",
+          "mention": " Vermeldingen",
+          "poll": "Peilingen",
+          "reblog": "Herblogd jou post",
+          "title": "Welke notificaties wil je krijgen?"
+        },
+        "description": "Receive notifications even when you are not using Elk.",
+        "instructions": "Don't forget to save your changes using @:settings.notifications.push_notifications.save_settings button!",
+        "label": "Push notifications settings",
+        "policy": {
+          "all": "Van iedereen",
+          "followed": "Van mensen die ik volg",
+          "follower": "Van mensen die mij volgen",
+          "none": "Van niemand",
+          "title": "Van wie kan ik notificaties krijgen?"
+        },
+        "save_settings": "Instellingen aanpassingen opslaan",
+        "subscription_error": {
+          "clear_error": "Wis error",
+          "permission_denied": "Geen toestemming: zet notificaties aan in je browser.",
+          "request_error": "Er is een error tijdens het ophalen van de subscriptie, probeer opnieuw en als de error blijft, raporteer het probleem naar de Elk repository.",
+          "title": "Kon niet subscriben aan push notificaties"
+        },
+        "undo_settings": "Undo veranderden instellingen",
+        "unsubscribe": "Zet push notificaties uit",
+        "unsupported": "Je browser ondersteunt geen push notificaties.",
+        "warning": {
+          "enable_close": "Sluit",
+          "enable_description": "Om notificaties te krijgen terwijl Elk niet open is, zet push notificaties aan. Je kan precies instellen wat voor typen interacties push notificaties genereren via de \"@:notification.settings.show_btn{'\"'} knop hierboven wanneer ze aan staan.",
+          "enable_description_settings": "To receive notifications when Elk is not open, enable push notifications. You will be able to control precisely what types of interactions generate push notifications on this same screen once you enable them.",
+          "enable_desktop": "Zet push notificaties aan",
+          "enable_title": "Mis niets",
+          "re_auth": "It seems that your server does not support push notifications. Try sign out and sign in again, if this message still appears contact your server administrator."
+        }
+      },
+      "show_btn": "Go to notifications settings"
+    },
+    "notifications_settings": "Notifications",
     "preferences": {
       "label": "Voorkeuren"
     },
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index cc7cb34f..28912e1c 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -164,39 +164,6 @@
     "missing_type": "未知的通知类型：",
     "reblogged_post": "转发了你的帖文",
     "request_to_follow": "请求关注你",
-    "settings": {
-      "alerts": {
-        "favourite": "喜欢的",
-        "follow": "新的关注者",
-        "mention": "提及",
-        "poll": "投票",
-        "reblog": "转发了你的帖文",
-        "title": "接收了什么通知？"
-      },
-      "close_btn": "关闭桌面通知设置",
-      "policy": {
-        "all": "任何人",
-        "followed": "我关注的人",
-        "follower": "关注我的人",
-        "none": "无人",
-        "title": "我可以从谁那里接收通知？"
-      },
-      "save_settings": "保存设置改动",
-      "show_btn": "打开桌面通知设置",
-      "title": "桌面通知设置",
-      "undo_settings": "撤销设置改动",
-      "unsubscribe": "禁用桌面通知",
-      "unsubscribed_with_warning": "通过点击“@:{'notification.settings.warning.enable_desktop'}”按钮来启用接收此账号的通知。",
-      "unsupported": "你的浏览器不支持桌面通知",
-      "warning": {
-        "enable_close": "关闭",
-        "enable_description": "若想在鹿鸣没有打开时接收通知，请启用桌面通知功能。一旦启动，你可以通过上面的“打开设置”按钮来 精确控制哪种类型的互动可以产生桌面通知。",
-        "enable_description_short": "若想在鹿鸣没有打开时修改桌面通知设置，请启用桌面通知功能。",
-        "enable_desktop": "启用桌面通知功能",
-        "enable_title": "不错过任何事",
-        "re_auth": "您的服务器似乎不支持推送通知。尝试退出用户并重新登录。如果此消息仍然出现，请联系您服务器的管理员。"
-      }
-    },
     "signed_up": "注册了",
     "update_status": "更新了他们的状态"
   },
@@ -246,6 +213,49 @@
       "display_language": "首选语言",
       "label": "语言"
     },
+    "notification_settings": "通知设置",
+    "notifications": {
+      "label": "通知",
+      "notifications": {
+        "label": "Notifications",
+        "notifications": {
+          "label": "Notifications settings"
+        }
+      },
+      "push_notifications": {
+        "alerts": {
+          "favourite": "喜欢的",
+          "follow": "新的关注者",
+          "mention": "提及",
+          "poll": "投票",
+          "reblog": "转发了你的帖文",
+          "title": "接收了什么通知？"
+        },
+        "description": "Receive notifications even when you are not using Elk.",
+        "instructions": "Don't forget to save your changes using @:settings.notifications.push_notifications.save_settings button!",
+        "label": "Push notifications settings",
+        "policy": {
+          "all": "任何人",
+          "followed": "我关注的人",
+          "follower": "关注我的人",
+          "none": "无人",
+          "title": "我可以从谁那里接收通知？"
+        },
+        "save_settings": "保存设置改动",
+        "undo_settings": "撤销设置改动",
+        "unsubscribe": "禁用桌面通知",
+        "unsupported": "你的浏览器不支持桌面通知",
+        "warning": {
+          "enable_close": "关闭",
+          "enable_description": "若想在鹿鸣没有打开时接收通知，请启用桌面通知功能。一旦启动，你可以通过上面的“打开设置”按钮来 精确控制哪种类型的互动可以产生桌面通知。",
+          "enable_description_settings": "To receive notifications when Elk is not open, enable push notifications. You will be able to control precisely what types of interactions generate push notifications on this same screen once you enable them.",
+          "enable_desktop": "启用桌面通知功能",
+          "enable_title": "不错过任何事",
+          "re_auth": "您的服务器似乎不支持推送通知。尝试退出用户并重新登录。如果此消息仍然出现，请联系您服务器的管理员。"
+        }
+      },
+      "show_btn": "Go to notifications settings"
+    },
     "preferences": {
       "label": "首选项"
     },
diff --git a/locales/zh-TW.json b/locales/zh-TW.json
index 5e128d9a..383a32cf 100644
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -161,39 +161,6 @@
     "missing_type": "未知的通知類型：",
     "reblogged_post": "轉發了你的帖文",
     "request_to_follow": "請求關注你",
-    "settings": {
-      "alerts": {
-        "favourite": "喜歡的",
-        "follow": "新的關注者",
-        "mention": "提及",
-        "poll": "投票",
-        "reblog": "轉發了你的帖文",
-        "title": "接收了什麼通知？"
-      },
-      "close_btn": "關閉桌面通知設置",
-      "policy": {
-        "all": "任何人",
-        "followed": "我關注的人",
-        "follower": "關注我的人",
-        "none": "無人",
-        "title": "我可以從誰那裡接收通知？"
-      },
-      "save_settings": "保存設置改動",
-      "show_btn": "打開桌面通知設置",
-      "title": "桌面通知設置",
-      "undo_settings": "撤銷設置改動",
-      "unsubscribe": "禁用桌面通知",
-      "unsubscribed_with_warning": "通過點擊“@:{'notification.settings.warning.enable_desktop'}”按鈕來啟用接收此賬號的通知。",
-      "unsupported": "你的瀏覽器不支持桌面通知",
-      "warning": {
-        "enable_close": "關閉",
-        "enable_description": "若想在鹿鳴沒有打開時接收通知，請啟用桌面通知功能。一旦啟動，你可以通過上面的“打開設置”按鈕來 精確控制哪種類型的互動可以產生桌面通知。",
-        "enable_description_short": "若想在鹿鳴沒有打開時修改桌面通知設置，請啟用桌面通知功能。",
-        "enable_desktop": "啟用桌面通知功能",
-        "enable_title": "不錯過任何事",
-        "re_auth": "您的服務器似乎不支持推送通知。嘗試退出用戶並重新登錄。如果此消息仍然出現，請聯繫您服務器的管理員。"
-      }
-    },
     "signed_up": "註冊了",
     "update_status": "更新了他們的狀態"
   },
@@ -235,6 +202,46 @@
       "display_language": "首選語言",
       "label": "語言"
     },
+    "notifications": {
+      "label": "Notifications",
+      "notifications": {
+        "label": "Notifications settings"
+      },
+      "push_notifications": {
+        "alerts": {
+          "favourite": "喜歡的",
+          "follow": "新的關注者",
+          "mention": "提及",
+          "poll": "投票",
+          "reblog": "轉發了你的帖文",
+          "title": "接收了什麼通知？"
+        },
+        "description": "Receive notifications even when you are not using Elk.",
+        "instructions": "Don't forget to save your changes using @:settings.notifications.push_notifications.save_settings button!",
+        "label": "Push notifications settings",
+        "policy": {
+          "all": "任何人",
+          "followed": "我關注的人",
+          "follower": "關注我的人",
+          "none": "無人",
+          "title": "我可以從誰那裡接收通知？"
+        },
+        "save_settings": "保存設置改動",
+        "undo_settings": "撤銷設置改動",
+        "unsubscribe": "禁用桌面通知",
+        "unsupported": "你的瀏覽器不支持桌面通知",
+        "warning": {
+          "enable_close": "關閉",
+          "enable_description": "若想在鹿鳴沒有打開時接收通知，請啟用桌面通知功能。一旦啟動，你可以通過上面的“打開設置”按鈕來 精確控制哪種類型的互動可以產生桌面通知。",
+          "enable_description_settings": "To receive notifications when Elk is not open, enable push notifications. You will be able to control precisely what types of interactions generate push notifications on this same screen once you enable them.",
+          "enable_desktop": "啟用桌面通知功能",
+          "enable_title": "不錯過任何事",
+          "re_auth": "您的服務器似乎不支持推送通知。嘗試退出用戶並重新登錄。如果此消息仍然出現，請聯繫您服務器的管理員。"
+        }
+      },
+      "show_btn": "Go to notifications settings"
+    },
+    "notifications_settings": "Notifications",
     "preferences": {
       "label": "首選項"
     },
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 30e367f7..4f581165 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -4,7 +4,6 @@ definePageMeta({
 })
 
 const { t } = useI18n()
-const showSettings = ref(false)
 const pwaEnabled = useRuntimeConfig().public.pwaEnabled
 
 const tabs = $computed(() => [
@@ -19,10 +18,6 @@ const tabs = $computed(() => [
     display: t('tab.notifications_mention'),
   },
 ] as const)
-
-onActivated(() => {
-  showSettings.value = false
-})
 </script>
 
 <template>
@@ -34,15 +29,15 @@ onActivated(() => {
       </NuxtLink>
     </template>
 
-    <template v-if="pwaEnabled" #actions>
-      <button
+    <template #actions>
+      <NuxtLink
         flex rounded-4 p1
         hover:bg-active cursor-pointer transition-100
-        :title="showSettings ? t('notification.settings.close_btn') : t('notification.settings.show_btn')"
-        @click="showSettings = !showSettings"
+        :title="t('settings.notifications.show_btn')"
+        to="/settings/notifications"
       >
-        <span aria-hidden="true" :class="showSettings ? 'i-ri:close-line' : 'i-ri:settings-line'" />
-      </button>
+        <span aria-hidden="true" i-ri:notification-badge-line />
+      </NuxtLink>
     </template>
 
     <template #header>
@@ -51,7 +46,7 @@ onActivated(() => {
 
     <slot>
       <template v-if="pwaEnabled">
-        <NotificationPreferences :show="showSettings" />
+        <NotificationPreferences />
       </template>
 
       <NuxtPage />
diff --git a/pages/settings.vue b/pages/settings.vue
index a89ada64..c846992f 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -39,6 +39,13 @@ const isRootPath = computedEager(() => route.name === 'settings')
               :text="$t('settings.interface.label')"
               to="/settings/interface"
             />
+            <SettingsItem
+              v-if="isHydrated && currentUser"
+              command
+              icon="i-ri:notification-badge-line"
+              :text="$t('settings.notifications_settings')"
+              to="/settings/notifications"
+            />
             <SettingsItem
               v-if="isHydrated && currentUser"
               command
diff --git a/pages/settings/notifications/index.vue b/pages/settings/notifications/index.vue
new file mode 100644
index 00000000..fc010710
--- /dev/null
+++ b/pages/settings/notifications/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+})
+
+const { t } = useI18n()
+const pwaEnabled = useRuntimeConfig().public.pwaEnabled
+
+useHeadFixed({
+  title: () => `${t('settings.notifications.notifications.label')} | ${t('nav.settings')}`,
+})
+</script>
+
+<template>
+  <MainContent back-on-small-screen>
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.notifications.notifications.label') }}</span>
+      </div>
+    </template>
+
+    <SettingsItem
+      command
+      :text="$t('settings.notifications.notifications.label')"
+      to="/settings/notifications/notifications"
+    />
+    <SettingsItem
+      command
+      :disabled="!pwaEnabled"
+      :text="$t('settings.notifications.push_notifications.label')"
+      :description="$t('settings.notifications.push_notifications.description')"
+      to="/settings/notifications/push-notifications"
+    />
+  </MainContent>
+</template>
diff --git a/pages/settings/notifications/notifications.vue b/pages/settings/notifications/notifications.vue
new file mode 100644
index 00000000..cbba942e
--- /dev/null
+++ b/pages/settings/notifications/notifications.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: 'auth',
+})
+
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${t('settings.notifications.notifications.label')} | ${t('settings.notifications.label')} | ${t('nav.settings')}`,
+})
+</script>
+
+<template>
+  <MainContent back>
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.notifications.notifications.label') }}</span>
+      </div>
+    </template>
+    <h3 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
+      {{ $t('settings.notifications.notifications.label') }}
+    </h3>
+    <p text-4xl text-center>
+      <span sr-only>Under construction</span> 🚧
+    </p>
+  </MainContent>
+</template>
diff --git a/pages/settings/notifications/push-notifications.vue b/pages/settings/notifications/push-notifications.vue
new file mode 100644
index 00000000..df447711
--- /dev/null
+++ b/pages/settings/notifications/push-notifications.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+definePageMeta({
+  middleware: ['auth', () => {
+    if (!useRuntimeConfig().public.pwaEnabled)
+      return navigateTo('/settings/notifications')
+  }],
+})
+
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${t('settings.notifications.push_notifications.label')} | ${t('settings.notifications.label')} | ${t('nav.settings')}`,
+})
+</script>
+
+<template>
+  <MainContent back>
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.notifications.push_notifications.label') }}</span>
+      </div>
+    </template>
+    <NotificationPreferences show />
+  </MainContent>
+</template>