Merge ac208d375a into bd8cfc7b57

Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>

components/account/AccountMoreButton.vue

@@ -56,7 +56,7 @@ async function removeUserNote() {
 
 <template>
   <CommonDropdown :eager-mount="command">
-    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
+    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group :aria-label="t('actions.more')">
       <div rounded-5 p2 elk-group-hover="bg-purple/10">
         <div i-ri:more-2-fill />
       </div>

components/help/HelpPreview.vue

@@ -8,7 +8,7 @@ const vAutoFocus = (el: HTMLElement) => el.focus()
 
 <template>
   <div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative>
-    <button v-auto-focus type="button" btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
+    <button v-auto-focus type="button" btn-action-icon absolute top--8 right-0 m1 :aria-label="$t('action.close')" @click="emit('close')">
       <span i-ri:close-line />
     </button>
 

components/list/Lists.vue

@@ -30,7 +30,7 @@ async function edit(listId: string) {
 </script>
 
 <template>
-  <CommonPaginator :end-message="false" :paginator="paginator">
+  <CommonPaginator :paginator="paginator">
     <template #default="{ item }">
       <div p4 hover:bg-active block w="100%" flex justify-between items-center gap-4>
         <p>{{ item.title }}</p>
@@ -49,5 +49,13 @@ async function edit(listId: string) {
         </CommonTooltip>
       </div>
     </template>
+    <template #done>
+      <NuxtLink
+        p4 hover:bg-active block w="100%" flex justify-between items-center gap-4
+        to="/lists"
+      >
+        <p>{{ $t('list.manage') }}</p>
+      </NuxtLink>
+    </template>
   </CommonPaginator>
 </template>

components/modal/ModalMediaPreview.vue

@@ -39,14 +39,14 @@ onUnmounted(() => locked.value = false)
 <template>
   <div relative h-full w-full flex pt-12 @click="onClick">
     <button
-      v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
+      v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.next')"
       hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5
       :title="$t('action.next')" @click="next"
     >
       <div i-ri:arrow-right-s-line text-white />
     </button>
     <button
-      v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" aria-label="action.next"
+      v-if="hasPrev" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.prev')"
       hover:bg="black/40" dark:bg="white/30" dark:hover-bg="white/20" absolute top="1/2" left-1 z5
       :title="$t('action.prev')" @click="prev"
     >
@@ -71,7 +71,7 @@ onUnmounted(() => locked.value = false)
 
     <div absolute top-0 w-full flex justify-end>
       <button
-        btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
+        btn-action-icon bg="black/30" :aria-label="$t('action.close')" hover:bg="black/40" dark:bg="white/30"
         dark:hover-bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
       >
         <div i-ri:close-line text-white />

components/nav/button/MoreMenu.vue

@@ -10,7 +10,7 @@ defineModel<boolean>()
     <button
       flex items-center place-content-center h-full flex-1 class="select-none"
       :class="show ? '!text-primary' : ''"
-      aria-label="More menu"
+      :aria-label="$t('nav.more_menu')"
       @click="toggleVisible"
     >
       <span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />

components/publish/PublishWidget.vue

@@ -167,7 +167,7 @@ const isExceedingCharacterLimit = computed(() => {
   return characterCount.value > characterLimit.value
 })
 
-const postLanguageDisplay = computed(() => languagesNameList.find(i => i.code === (draft.value.params.language || preferredLanguage))?.nativeName)
+const postLanguageDisplay = computed(() => languagesNameList.find(i => i.code === (draft.value.params.language || preferredLanguage.value))?.nativeName)
 
 const isDM = computed(() => draft.value.params.visibility === 'direct')
 

components/report/ReportModal.vue

@@ -97,7 +97,7 @@ function resetModal() {
         <b text-primary>@{{ account.acct }}</b>
       </i18n-t>
     </h2>
-    <button ref="dismissButton" btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
+    <button ref="dismissButton" btn-action-icon absolute top--8 right-0 m1 :aria-label="$t('action.close')" @click="emit('close')">
       <div i-ri:close-line />
     </button>
 

components/settings/SettingsBottomNav.vue

@@ -67,61 +67,69 @@ function save() {
 </script>
 
 <template>
-  <form aria-labelledby="interface-bn" aria-describedby="interface-bn-desc" @submit.prevent="save">
-    <!-- preview -->
-    <div aria-hidden="true" flex="~ gap4 wrap" items-center select-settings h-14 p0>
-      <nav
-        v-for="availableNavButton in selectedNavButtons" :key="availableNavButton.name"
-        flex="~ 1" items-center justify-center text-xl
-        scrollbar-hide overscroll-none
-      >
-        <button btn-base :class="availableNavButton.icon" mx-4 tabindex="-1" />
-      </nav>
-    </div>
+  <section space-y-2>
+    <h2 id="interface-bn" font-medium>
+      {{ $t('settings.interface.bottom_nav') }}
+    </h2>
+    <form aria-labelledby="interface-bn" aria-describedby="interface-bn-desc" @submit.prevent="save">
+      <p id="interface-bn-desc" pb-2>
+        {{ $t('settings.interface.bottom_nav_instructions') }}
+      </p>
+      <!-- preview -->
+      <div aria-hidden="true" flex="~ gap4 wrap" items-center select-settings h-14 p0>
+        <nav
+          v-for="availableNavButton in selectedNavButtons" :key="availableNavButton.name"
+          flex="~ 1" items-center justify-center text-xl
+          scrollbar-hide overscroll-none
+        >
+          <button btn-base :class="availableNavButton.icon" mx-4 tabindex="-1" />
+        </nav>
+      </div>
 
-    <!-- button selection -->
-    <div flex="~ gap4 wrap" py4>
-      <button
-        v-for="{ name, label, icon } in availableNavButtons"
-        :key="name"
-        btn-text flex="~ gap-2" items-center p2 border="~ base rounded" bg-base ws-nowrap
-        :class="isAdded(name) ? 'text-secondary hover:text-second bg-auto' : ''"
-        type="button"
-        role="switch"
-        :aria-checked="isAdded(name)"
-        @click="isAdded(name) ? remove(name) : append(name)"
-      >
-        <span :class="icon" />
-        {{ label ? $t(label) : 'More menu' }}
-      </button>
-    </div>
+      <!-- button selection -->
+      <div flex="~ gap4 wrap" py4>
+        <button
+          v-for="{ name, label, icon } in availableNavButtons"
+          :key="name"
+          btn-text flex="~ gap-2" items-center p2 border="~ base rounded" bg-base ws-nowrap
+          :class="isAdded(name) ? 'text-secondary hover:text-second bg-auto' : ''"
+          type="button"
+          role="switch"
+          :aria-checked="isAdded(name)"
+          @click="isAdded(name) ? remove(name) : append(name)"
+        >
+          <span :class="icon" />
+          {{ label ? $t(label) : 'More menu' }}
+        </button>
+      </div>
 
-    <div flex="~ col" gap-y-4 gap-x-2 py-1 sm="~ justify-end flex-row">
-      <button
-        btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
-        type="button"
-        :disabled="selectedNavButtonNames.length === 0"
-        :class="selectedNavButtonNames.length === 0 ? 'border-none' : undefined"
-        @click="clear"
-      >
-        <span aria-hidden="true" class="block i-ri:delete-bin-line" />
-        {{ $t('action.clear') }}
-      </button>
-      <button
-        btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
-        type="reset"
-        @click="reset"
-      >
-        <span aria-hidden="true" class="block i-ri:repeat-line" />
-        {{ $t('action.reset') }}
-      </button>
-      <button
-        btn-solid font-bold py2 full-w sm-wa flex="~ gap2 center"
-        :disabled="!canSave"
-      >
-        <span aria-hidden="true" i-ri:save-2-fill />
-        {{ $t('action.save') }}
-      </button>
-    </div>
-  </form>
+      <div flex="~ col" gap-y-4 gap-x-2 py-1 sm="~ justify-end flex-row">
+        <button
+          btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
+          type="button"
+          :disabled="selectedNavButtonNames.length === 0"
+          :class="selectedNavButtonNames.length === 0 ? 'border-none' : undefined"
+          @click="clear"
+        >
+          <span aria-hidden="true" class="block i-ri:delete-bin-line" />
+          {{ $t('action.clear') }}
+        </button>
+        <button
+          btn-outline font-bold py2 full-w sm-wa flex="~ gap2 center"
+          type="reset"
+          @click="reset"
+        >
+          <span aria-hidden="true" class="block i-ri:repeat-line" />
+          {{ $t('action.reset') }}
+        </button>
+        <button
+          btn-solid font-bold py2 full-w sm-wa flex="~ gap2 center"
+          :disabled="!canSave"
+        >
+          <span aria-hidden="true" i-ri:save-2-fill />
+          {{ $t('action.save') }}
+        </button>
+      </div>
+    </form>
+  </section>
 </template>

components/settings/SettingsColorMode.vue

@@ -27,18 +27,23 @@ const modes = [
 </script>
 
 <template>
-  <div flex="~ gap4 wrap" w-full role="group" aria-labelledby="interface-cm">
-    <button
-      v-for="{ icon, label, mode } in modes"
-      :key="mode"
-      type="button"
-      btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
-      :aria-pressed="colorMode.preference === mode ? 'true' : 'false'"
-      :class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"
-      @click="setColorMode(mode)"
-    >
-      <span :class="`${icon}`" />
-      {{ $t(label) }}
-    </button>
-  </div>
+  <section space-y-2>
+    <h2 id="interface-cm" font-medium>
+      {{ $t('settings.interface.color_mode') }}
+    </h2>
+    <div flex="~ gap4 wrap" w-full role="group" aria-labelledby="interface-cm">
+      <button
+        v-for="{ icon, label, mode } in modes"
+        :key="mode"
+        type="button"
+        btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
+        :aria-pressed="colorMode.preference === mode ? 'true' : 'false'"
+        :class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"
+        @click="setColorMode(mode)"
+      >
+        <span :class="`${icon}`" />
+        {{ $t(label) }}
+      </button>
+    </div>
+  </section>
 </template>

components/settings/SettingsFontSize.vue

@@ -13,40 +13,45 @@ function setFontSize(e: Event) {
 </script>
 
 <template>
-  <div flex items-center space-x-4>
-    <span text-xs text-secondary>Aa</span>
-    <div flex-1 relative flex items-center>
-      <input
-        aria-labelledby="interface-fs"
-        :value="sizes.indexOf(userSettings.fontSize)"
-        :aria-valuetext="`${userSettings.fontSize}${userSettings.fontSize === DEFAULT_FONT_SIZE ? ` ${$t('settings.interface.default')}` : ''}`"
-        :min="0"
-        :max="sizes.length - 1"
-        :step="1"
-        type="range"
-        focus:outline-none
-        appearance-none bg-transparent
-        w-full cursor-pointer
-        @change="setFontSize"
-      >
-      <div flex items-center justify-between absolute w-full pointer-events-none>
-        <div
-          v-for="i in sizes.length" :key="i"
-          class="container-marker"
-          h-3 w-3
-          rounded-full bg-secondary-light
-          relative
+  <section space-y-2>
+    <h2 id="interface-fs" font-medium>
+      {{ $t('settings.interface.font_size') }}
+    </h2>
+    <div flex items-center space-x-4 select-settings>
+      <span text-xs text-secondary>Aa</span>
+      <div flex-1 relative flex items-center>
+        <input
+          aria-labelledby="interface-fs"
+          :value="sizes.indexOf(userSettings.fontSize)"
+          :aria-valuetext="`${userSettings.fontSize}${userSettings.fontSize === DEFAULT_FONT_SIZE ? ` ${$t('settings.interface.default')}` : ''}`"
+          :min="0"
+          :max="sizes.length - 1"
+          :step="1"
+          type="range"
+          focus:outline-none
+          appearance-none bg-transparent
+          w-full cursor-pointer
+          @change="setFontSize"
         >
+        <div flex items-center justify-between absolute w-full pointer-events-none>
           <div
-            v-if="(sizes.indexOf(userSettings.fontSize)) === i - 1"
-            absolute rounded-full class="-top-1 -left-1"
-            bg-primary h-5 w-5
-          />
+            v-for="i in sizes.length" :key="i"
+            class="container-marker"
+            h-3 w-3
+            rounded-full bg-secondary-light
+            relative
+          >
+            <div
+              v-if="(sizes.indexOf(userSettings.fontSize)) === i - 1"
+              absolute rounded-full class="-top-1 -left-1"
+              bg-primary h-5 w-5
+            />
+          </div>
         </div>
       </div>
+      <span text-xl text-secondary>Aa</span>
     </div>
-    <span text-xl text-secondary>Aa</span>
-  </div>
+  </section>
 </template>
 
 <style>
@@ -64,7 +69,7 @@ function setFontSize(e: Event) {
   input[type=range]::-webkit-slider-runnable-track {
     --at-apply: bg-secondary-light rounded-full h1 op60;
   }
-  input[type=range]:focus:-webkit-slider-runnable-track {
+  input[type=range]:focus::-webkit-slider-runnable-track {
     --at-apply: outline-2 outline-red;
   }
   input[type=range]::-webkit-slider-thumb {

components/settings/SettingsThemeColors.vue

@@ -12,20 +12,25 @@ function updateTheme(theme: ThemeColors) {
 </script>
 
 <template>
-  <div flex="~ gap4 wrap" p2 role="group" aria-labelledby="interface-tc">
-    <button
-      v-for="[key, theme] in themes" :key="key"
-      :style="{
-        'background': key,
-        '--local-ring-color': key,
-      }"
-      type="button"
-      :class="currentTheme === theme['--theme-color-name'] ? 'ring-2' : 'scale-90'"
-      :aria-pressed="currentTheme === theme['--theme-color-name'] ? 'true' : 'false'"
-      :title="theme['--theme-color-name']"
-      w-8 h-8 rounded-full transition-all
-      ring="$local-ring-color offset-3 offset-$c-bg-base"
-      @click="updateTheme(theme)"
-    />
-  </div>
+  <section space-y-2>
+    <h2 id="interface-tc" font-medium>
+      {{ $t('settings.interface.theme_color') }}
+    </h2>
+    <div flex="~ gap4 wrap" p2 role="group" aria-labelledby="interface-tc">
+      <button
+        v-for="[key, theme] in themes" :key="key"
+        :style="{
+          'background': key,
+          '--local-ring-color': key,
+        }"
+        type="button"
+        :class="currentTheme === theme['--theme-color-name'] ? 'ring-2' : 'scale-90'"
+        :aria-pressed="currentTheme === theme['--theme-color-name'] ? 'true' : 'false'"
+        :title="theme['--theme-color-name']"
+        w-8 h-8 rounded-full transition-all
+        ring="$local-ring-color offset-3 offset-$c-bg-base"
+        @click="updateTheme(theme)"
+      />
+    </div>
+  </section>
 </template>

components/status/StatusAttachment.vue

@@ -211,7 +211,7 @@ watch(shouldLoadAttachment, () => {
         rounded-lg
         h-full
         w-full
-        aria-label="Open image preview dialog"
+        :aria-label="$t('action.open_image_preview_dialog')"
         relative
         @click="!shouldLoadAttachment ? loadAttachment() : openMediaPreview(attachments ? attachments : [attachment], attachments?.indexOf(attachment) || 0)"
       >

components/status/StatusContent.vue

@@ -44,7 +44,9 @@ const allowEmbeddedMedia = computed(() => status.card?.html && embeddedMediaPref
     <StatusBody v-if="(!isFiltered && isSensitiveNonSpoiler) || hideAllMedia" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
     <StatusSpoiler :enabled="hasSpoilerOrSensitiveMedia || isFiltered" :filter="isFiltered" :sensitive-non-spoiler="isSensitiveNonSpoiler || hideAllMedia" :is-d-m="isDM">
       <template v-if="spoilerTextPresent" #spoiler>
-        <p>{{ status.spoilerText }}</p>
+        <p>
+          <ContentRich :content="status.spoilerText" :emojis="status.emojis" :markdown="false" />
+        </p>
       </template>
       <template v-else-if="filterPhrase" #spoiler>
         <p>{{ `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>

components/user/UserPicker.vue

@@ -20,7 +20,7 @@ function clickUser(user: UserLogin) {
           <button
             flex rounded
             cursor-pointer
-            aria-label="Switch user"
+            :aria-label="$t('action.switch_account')"
             :class="user.account.acct === currentUser?.account.acct ? '' : 'op25 grayscale'"
             hover="filter-none op100"
             @click="clickUser(user)"

components/user/UserSwitcher.vue

@@ -36,7 +36,7 @@ function processSignIn() {
       <button
         flex rounded px4 py3 text-left
         hover:bg-active cursor-pointer transition-100
-        aria-label="Switch user"
+        :aria-label="$t('action.switch_account')"
         @click="clickUser(user)"
       >
         <AccountInfo :account="user.account" :hover-card="false" square />

composables/content-parse.ts

@@ -582,6 +582,11 @@ function transformCollapseMentions(status?: mastodon.v1.Status, inReplyToStatus?
         if (child.type === TEXT_NODE) {
           trimContentStart = () => {
             child.value = child.value.trimStart()
+            // remove the comma after the collapsed mention.
+            if (child.value.at(0) === ',') {
+              child.value = child.value.slice(1)
+              child.value = child.value.trimStart()
+            }
           }
         }
         // remove <br> after mention

config/i18n.ts

@@ -31,6 +31,7 @@ export const countryLocaleVariants: Record<string, (LocaleObjectData & { country
   en: [
     // en.json contains en-US translations
     { country: true, code: 'en-US', name: 'English (US)' },
+    { code: 'en-CA', name: 'English (Canada)' },
     { code: 'en-GB', name: 'English (UK)' },
   ],
   ca: [

locales/en-CA.json

@@ -0,0 +1,56 @@
+{
+  "account": {
+    "favourites": "Favourites"
+  },
+  "action": {
+    "favourite": "Favourite",
+    "favourited": "Favourited"
+  },
+  "magic_keys": {
+    "groups": {
+      "actions": {
+        "favourite": "Favourite"
+      },
+      "navigation": {
+        "go_to_favourites": "Favourites"
+      }
+    }
+  },
+  "menu": {
+    "show_favourited_and_boosted_by": "Show who favourited and boosted"
+  },
+  "nav": {
+    "favourites": "Favourites"
+  },
+  "notification": {
+    "favourited_post": "favourited your post"
+  },
+  "settings": {
+    "interface": {
+      "bottom_nav_instructions": "Choose your favourite navigation buttons up to five for the bottom navigation. Must include the \"More menu\" button.",
+      "color_mode": "Colour Mode",
+      "theme_color": "Theme Colour"
+    },
+    "notifications": {
+      "push_notifications": {
+        "alerts": {
+          "favourite": "Favourites"
+        }
+      }
+    },
+    "preferences": {
+      "hide_favorite_count": "Hide favourite count",
+      "use_star_favorite_icon": "Use star favourite icon"
+    }
+  },
+  "status": {
+    "favourited_by": "Favourited By"
+  },
+  "tab": {
+    "notifications_favourite": "Favourite"
+  },
+  "user": {
+    "sign_in_desc": "Sign in to follow profiles or hashtags, favourite, share and reply to posts, or interact from your account on a different server.",
+    "single_instance_sign_in_desc": "Sign in to follow profiles or hashtags, favourite, share and reply to posts."
+  }
+}

locales/en-GB.json

@@ -52,6 +52,9 @@
   "status": {
     "favourited_by": "Favourited By"
   },
+  "tab": {
+    "notifications_favourite": "Favourite"
+  },
   "tooltip": {
     "explore_links_intro": "These news stories are being talked about by people on this and other servers of the decentralised network right now.",
     "explore_posts_intro": "These posts from this and other servers in the decentralised network are gaining traction on this server right now.",

locales/en.json

@@ -73,6 +73,7 @@
     "favourited": "Favorited",
     "more": "More",
     "next": "Next",
+    "open_image_preview_dialog": "Open image preview dialog",
     "prev": "Prev",
     "publish": "Publish",
     "publish_thread": "Publish thread",
@@ -222,6 +223,7 @@
     "error": "There was an error while creating the list",
     "error_prefix": "Error: ",
     "list_title_placeholder": "List title",
+    "manage": "Manage lists",
     "modify_account": "Modify lists with account",
     "remove_account": "Remove account from list",
     "save": "Save changes"

locales/es.json

@@ -217,11 +217,12 @@
     "create": "Crear",
     "delete": "Eliminar esta lista",
     "delete_error": "Se produjo un error eliminando la lista",
-    "edit": "Ediar esta lista",
+    "edit": "Editar esta lista",
     "edit_error": "Se produjo un error modificando la lista",
     "error": "Se produjo un error creando la lista",
     "error_prefix": "Error: ",
     "list_title_placeholder": "Título de la lista",
+    "manage": "Administrar listas",
     "modify_account": "Modificar listas con cuenta",
     "remove_account": "Eliminar cuenta de la lista",
     "save": "Guardar"

locales/eu-ES.json

@@ -222,6 +222,7 @@
     "error": "Errorea gertatu da zerrenda sortzerakoan",
     "error_prefix": "Errorea: ",
     "list_title_placeholder": "Zerrendaren izena",
+    "manage": "Kudeatu zerrendak",
     "modify_account": "Aldatu honako kontua duten zerrendak:",
     "remove_account": "Kendu kontua zerrendatik",
     "save": "Gorde aldaketak"

locales/hu-HU.json

@@ -222,6 +222,7 @@
     "error": "Hiba történt a lista létrehozása közben",
     "error_prefix": "Hiba: ",
     "list_title_placeholder": "Lista címe",
+    "manage": "Listák kezelése",
     "modify_account": "Listák módosítása fiókkal",
     "remove_account": "Fiók eltávolítása a listáról",
     "save": "Változtatások mentése"

locales/it-IT.json

@@ -222,6 +222,7 @@
     "error": "C'è stato un errore nella creazione della lista",
     "error_prefix": "Errore: ",
     "list_title_placeholder": "Titolo lista",
+    "manage": "Gestisci liste",
     "modify_account": "Modifica liste con account",
     "remove_account": "Rimuovi account dalla lista",
     "save": "Salva modifiche"
@@ -660,7 +661,7 @@
       "report": "Segnalazione",
       "sign_up": "Iscrizione"
     },
-    "notifications_all": "Tutti",
+    "notifications_all": "Tutte",
     "notifications_favourite": "Apprezzamento",
     "notifications_follow": "Nuovo seguace",
     "notifications_follow_request": "Richiesta di seguire",

locales/pt.json

@@ -222,6 +222,7 @@
     "error": "Ocorreu um erro ao criar a lista",
     "error_prefix": "Erro: ",
     "list_title_placeholder": "Título da lista",
+    "manage": "Gerir listas",
     "modify_account": "Modificar listas com a conta",
     "remove_account": "Remover conta da lista",
     "save": "Salvar alterações"

locales/vi-VN.json

@@ -58,6 +58,7 @@
     "boost": "Đăng lại",
     "boost_count": "{0}",
     "boosted": "Đã đăng lại",
+    "clear": "Xóa",
     "clear_publish_failed": "Xóa lỗi khi đăng tút",
     "clear_save_failed": "Xóa lỗi khi lưu tút",
     "clear_upload_failed": "Xóa lỗi khi xóa file",
@@ -196,7 +197,7 @@
       "desc3": "Đừng đăng nhập bằng tài khoản chính.",
       "title": "Bản dựng"
     },
-    "desc_highlight": "Sẽ có một số lỗi và tính năng bị thiếu ở đây.",
+    "desc_highlight": "Sẽ có lỗi và một số tính năng bị thiếu.",
     "desc_para1": "Elk là một ứng dụng web Mastodon nhanh nhẹn. Sử dụng để đăng nhập Mastodon và tương tác với Fediverse.",
     "desc_para2": "Elk là Mã Nguồn Mở và chúng tôi cải tiến nó như một dự án cộng đồng. Hãy tham gia và cùng xây dựng!",
     "desc_para3": "Để thúc đẩy sự phát triển, bạn có thể tài trợ cho Nhóm thông qua GitHub Sponsors. Chúng tôi hy vọng bạn thích Elk!",
@@ -221,6 +222,7 @@
     "error": "Xảy ra lỗi khi tạo danh sách",
     "error_prefix": "Lỗi: ",
     "list_title_placeholder": "Tên danh sách",
+    "manage": "Quản lý danh sách",
     "modify_account": "Sửa danh sách có người này",
     "remove_account": "Xóa người ra khỏi danh sách",
     "save": "Lưu thay đổi"
@@ -316,6 +318,7 @@
     "list": "Danh sách",
     "lists": "Danh sách",
     "local": "Máy chủ",
+    "more_menu": "Thêm",
     "muted_users": "Người đã ẩn",
     "notifications": "Thông báo",
     "privacy": "Bảo mật",
@@ -450,6 +453,8 @@
       "label": "Cài đặt tài khoản"
     },
     "interface": {
+      "bottom_nav": "Menu dưới màn hình",
+      "bottom_nav_instructions": "Chọn tối đa năm nút điều hướng yêu thích của bạn. Bao gồm nút \"Thêm\" ",
       "color_mode": "Chủ đề",
       "dark_mode": "Tối",
       "default": " (mặc định)",
@@ -488,14 +493,14 @@
           "title": "Bạn muốn nhận những kiểu thông báo nào?"
         },
         "description": "Nhận thông báo kể cả khi bạn không sử dụng Elk.",
-        "instructions": "Đừng quên lưu các thay đổi của bạn bằng cách @:settings.notifications.push_notifications.save_settings button!",
+        "instructions": "Nhớ lưu các thay đổi của bạn bằng cách nhấn @:settings.notifications.push_notifications.save_settings !",
         "label": "Cài đặt thông báo đẩy",
         "policy": {
           "all": "Từ bất kỳ ai",
-          "followed": "Từ người tôi theo dõi",
-          "follower": "Từ người theo dõi tôi",
+          "followed": "Từ người bạn theo dõi",
+          "follower": "Từ người theo dõi bạn",
           "none": "Không ai cả",
-          "title": "Tôi sẽ nhận thông báo từ ai?"
+          "title": "Bạn muốn nhận thông báo từ ai?"
         },
         "save_settings": "Lưu cài đặt",
         "subscription_error": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elk-zone/elk",
   "type": "module",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "packageManager": "pnpm@8.15.5",
   "license": "MIT",
   "homepage": "https://elk.zone/",

pages/settings/interface/index.vue

@@ -13,34 +13,11 @@ useHydratedHead({
         <span>{{ $t('settings.interface.label') }}</span>
       </div>
     </template>
-    <div p6 flex="~ col gap6">
-      <div space-y-2>
-        <p id="interface-fs" font-medium>
-          {{ $t('settings.interface.font_size') }}
-        </p>
-        <SettingsFontSize select-settings />
-      </div>
-      <div space-y-2>
-        <p id="interface-cm" font-medium>
-          {{ $t('settings.interface.color_mode') }}
-        </p>
-        <SettingsColorMode />
-      </div>
-      <div space-y-2>
-        <p id="interface-tc" font-medium>
-          {{ $t('settings.interface.theme_color') }}
-        </p>
-        <SettingsThemeColors />
-      </div>
-      <div space-y-2>
-        <p id="interface-bn" font-medium>
-          {{ $t('settings.interface.bottom_nav') }}
-        </p>
-        <p id="interface-bn-desc">
-          {{ $t('settings.interface.bottom_nav_instructions') }}
-        </p>
-        <SettingsBottomNav />
-      </div>
+    <div px-6 pt-3 pb-6 flex="~ col gap6">
+      <SettingsFontSize />
+      <SettingsColorMode />
+      <SettingsThemeColors />
+      <SettingsBottomNav />
     </div>
   </MainContent>
 </template>

pages/settings/preferences/index.vue

@@ -15,162 +15,172 @@ const userSettings = useUserSettings()
         {{ $t('settings.preferences.label') }}
       </h1>
     </template>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideAltIndicatorOnPosts')"
-      @click="togglePreferences('hideAltIndicatorOnPosts')"
-    >
-      {{ $t('settings.preferences.hide_alt_indi_on_posts') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideGifIndicatorOnPosts')"
-      @click="togglePreferences('hideGifIndicatorOnPosts')"
-    >
-      {{ $t('settings.preferences.hide_gif_indi_on_posts') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideAccountHoverCard')"
-      @click="togglePreferences('hideAccountHoverCard')"
-    >
-      {{ $t('settings.preferences.hide_account_hover_card') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideTagHoverCard')"
-      @click="togglePreferences('hideTagHoverCard')"
-    >
-      {{ $t('settings.preferences.hide_tag_hover_card') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'enableAutoplay')"
-      :disabled="getPreferences(userSettings, 'enableDataSaving')"
-      @click="togglePreferences('enableAutoplay')"
-    >
-      {{ $t('settings.preferences.enable_autoplay') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'optimizeForLowPerformanceDevice')"
-      @click="togglePreferences('optimizeForLowPerformanceDevice')"
-    >
-      {{ $t('settings.preferences.optimize_for_low_performance_device') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'enableDataSaving')"
-      @click="togglePreferences('enableDataSaving')"
-    >
-      {{ $t("settings.preferences.enable_data_saving") }}
-      <template #description>
-        {{ $t("settings.preferences.enable_data_saving_description") }}
-      </template>
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'enablePinchToZoom')"
-      @click="togglePreferences('enablePinchToZoom')"
-    >
-      {{ $t('settings.preferences.enable_pinch_to_zoom') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'useStarFavoriteIcon')"
-      @click="togglePreferences('useStarFavoriteIcon')"
-    >
-      {{ $t('settings.preferences.use_star_favorite_icon') }}
-    </SettingsToggleItem>
-    <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
-      <div i-ri-hearts-line />
-      {{ $t('settings.preferences.wellbeing') }}
-    </h2>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'grayscaleMode')"
-      @click="togglePreferences('grayscaleMode')"
-    >
-      {{ $t('settings.preferences.grayscale_mode') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideBoostCount')"
-      @click="togglePreferences('hideBoostCount')"
-    >
-      {{ $t('settings.preferences.hide_boost_count') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideFavoriteCount')"
-      @click="togglePreferences('hideFavoriteCount')"
-    >
-      {{ $t('settings.preferences.hide_favorite_count') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideReplyCount')"
-      @click="togglePreferences('hideReplyCount')"
-    >
-      {{ $t('settings.preferences.hide_reply_count') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideFollowerCount')"
-      @click="togglePreferences('hideFollowerCount')"
-    >
-      {{ $t('settings.preferences.hide_follower_count') }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideUsernameEmojis')"
-      @click="togglePreferences('hideUsernameEmojis')"
-    >
-      {{ $t("settings.preferences.hide_username_emojis") }}
-      <template #description>
-        {{ $t('settings.preferences.hide_username_emojis_description') }}
-      </template>
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'hideNews')"
-      @click="togglePreferences('hideNews')"
-    >
-      {{ $t("settings.preferences.hide_news") }}
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'zenMode')"
-      @click="togglePreferences('zenMode')"
-    >
-      {{ $t("settings.preferences.zen_mode") }}
-      <template #description>
-        {{ $t('settings.preferences.zen_mode_description') }}
-      </template>
-    </SettingsToggleItem>
-    <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
-      <div i-ri-flask-line />
-      {{ $t('settings.preferences.title') }}
-    </h2>
-    <!-- Embedded Media -->
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'experimentalEmbeddedMedia')"
-      @click="togglePreferences('experimentalEmbeddedMedia')"
-    >
-      {{ $t('settings.preferences.embedded_media') }}
-      <template #description>
-        {{ $t('settings.preferences.embedded_media_description') }}
-      </template>
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'experimentalVirtualScroller')"
-      @click="togglePreferences('experimentalVirtualScroller')"
-    >
-      {{ $t('settings.preferences.virtual_scroll') }}
-      <template #description>
-        {{ $t('settings.preferences.virtual_scroll_description') }}
-      </template>
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'experimentalGitHubCards')"
-      @click="togglePreferences('experimentalGitHubCards')"
-    >
-      {{ $t('settings.preferences.github_cards') }}
-      <template #description>
-        {{ $t('settings.preferences.github_cards_description') }}
-      </template>
-    </SettingsToggleItem>
-    <SettingsToggleItem
-      :checked="getPreferences(userSettings, 'experimentalUserPicker')"
-      @click="togglePreferences('experimentalUserPicker')"
-    >
-      {{ $t('settings.preferences.user_picker') }}
-      <template #description>
-        {{ $t('settings.preferences.user_picker_description') }}
-      </template>
-    </SettingsToggleItem>
+    <section>
+      <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center sr-only>
+        <span aria-hidden="true" block i-ri-equalizer-line />
+        {{ $t('settings.preferences.label') }}
+      </h2>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideAltIndicatorOnPosts')"
+        @click="togglePreferences('hideAltIndicatorOnPosts')"
+      >
+        {{ $t('settings.preferences.hide_alt_indi_on_posts') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideGifIndicatorOnPosts')"
+        @click="togglePreferences('hideGifIndicatorOnPosts')"
+      >
+        {{ $t('settings.preferences.hide_gif_indi_on_posts') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideAccountHoverCard')"
+        @click="togglePreferences('hideAccountHoverCard')"
+      >
+        {{ $t('settings.preferences.hide_account_hover_card') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideTagHoverCard')"
+        @click="togglePreferences('hideTagHoverCard')"
+      >
+        {{ $t('settings.preferences.hide_tag_hover_card') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'enableAutoplay')"
+        :disabled="getPreferences(userSettings, 'enableDataSaving')"
+        @click="togglePreferences('enableAutoplay')"
+      >
+        {{ $t('settings.preferences.enable_autoplay') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'optimizeForLowPerformanceDevice')"
+        @click="togglePreferences('optimizeForLowPerformanceDevice')"
+      >
+        {{ $t('settings.preferences.optimize_for_low_performance_device') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'enableDataSaving')"
+        @click="togglePreferences('enableDataSaving')"
+      >
+        {{ $t("settings.preferences.enable_data_saving") }}
+        <template #description>
+          {{ $t("settings.preferences.enable_data_saving_description") }}
+        </template>
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'enablePinchToZoom')"
+        @click="togglePreferences('enablePinchToZoom')"
+      >
+        {{ $t('settings.preferences.enable_pinch_to_zoom') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'useStarFavoriteIcon')"
+        @click="togglePreferences('useStarFavoriteIcon')"
+      >
+        {{ $t('settings.preferences.use_star_favorite_icon') }}
+      </SettingsToggleItem>
+    </section>
+    <section>
+      <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
+        <span aria-hidden="true" block i-ri-hearts-line />
+        {{ $t('settings.preferences.wellbeing') }}
+      </h2>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'grayscaleMode')"
+        @click="togglePreferences('grayscaleMode')"
+      >
+        {{ $t('settings.preferences.grayscale_mode') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideBoostCount')"
+        @click="togglePreferences('hideBoostCount')"
+      >
+        {{ $t('settings.preferences.hide_boost_count') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideFavoriteCount')"
+        @click="togglePreferences('hideFavoriteCount')"
+      >
+        {{ $t('settings.preferences.hide_favorite_count') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideReplyCount')"
+        @click="togglePreferences('hideReplyCount')"
+      >
+        {{ $t('settings.preferences.hide_reply_count') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideFollowerCount')"
+        @click="togglePreferences('hideFollowerCount')"
+      >
+        {{ $t('settings.preferences.hide_follower_count') }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideUsernameEmojis')"
+        @click="togglePreferences('hideUsernameEmojis')"
+      >
+        {{ $t("settings.preferences.hide_username_emojis") }}
+        <template #description>
+          {{ $t('settings.preferences.hide_username_emojis_description') }}
+        </template>
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'hideNews')"
+        @click="togglePreferences('hideNews')"
+      >
+        {{ $t("settings.preferences.hide_news") }}
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'zenMode')"
+        @click="togglePreferences('zenMode')"
+      >
+        {{ $t("settings.preferences.zen_mode") }}
+        <template #description>
+          {{ $t('settings.preferences.zen_mode_description') }}
+        </template>
+      </SettingsToggleItem>
+    </section>
+    <section>
+      <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
+        <span aria-hidden="true" block i-ri-flask-line />
+        {{ $t('settings.preferences.title') }}
+      </h2>
+      <!-- Embedded Media -->
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'experimentalEmbeddedMedia')"
+        @click="togglePreferences('experimentalEmbeddedMedia')"
+      >
+        {{ $t('settings.preferences.embedded_media') }}
+        <template #description>
+          {{ $t('settings.preferences.embedded_media_description') }}
+        </template>
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'experimentalVirtualScroller')"
+        @click="togglePreferences('experimentalVirtualScroller')"
+      >
+        {{ $t('settings.preferences.virtual_scroll') }}
+        <template #description>
+          {{ $t('settings.preferences.virtual_scroll_description') }}
+        </template>
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'experimentalGitHubCards')"
+        @click="togglePreferences('experimentalGitHubCards')"
+      >
+        {{ $t('settings.preferences.github_cards') }}
+        <template #description>
+          {{ $t('settings.preferences.github_cards_description') }}
+        </template>
+      </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'experimentalUserPicker')"
+        @click="togglePreferences('experimentalUserPicker')"
+      >
+        {{ $t('settings.preferences.user_picker') }}
+        <template #description>
+          {{ $t('settings.preferences.user_picker_description') }}
+        </template>
+      </SettingsToggleItem>
+    </section>
   </MainContent>
 </template>