i18n: allow localizing "Pinned post"

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

components/list/ListEntry.vue

@@ -32,9 +32,9 @@ async function prepareEdit() {
 async function cancelEdit() {
   isEditing.value = false
   actionError.value = undefined
-  reset()
 
   await nextTick()
+  reset()
   editBtn.value?.focus()
 }
 

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/nav/NavBottom.vue

@@ -1,60 +1,45 @@
 <script setup lang="ts">
+import type { Component } from 'vue'
+import type { NavButtonName } from '../../composables/settings'
+
+import { STORAGE_KEY_BOTTOM_NAV_BUTTONS } from '~/constants'
+
+import { NavButtonExplore, NavButtonFederated, NavButtonHome, NavButtonLocal, NavButtonMention, NavButtonMoreMenu, NavButtonNotification, NavButtonSearch } from '#components'
+
+interface NavButton {
+  name: string
+  component: Component
+}
+
+const navButtons: NavButton[] = [
+  { name: 'home', component: NavButtonHome },
+  { name: 'search', component: NavButtonSearch },
+  { name: 'notification', component: NavButtonNotification },
+  { name: 'mention', component: NavButtonMention },
+  { name: 'explore', component: NavButtonExplore },
+  { name: 'local', component: NavButtonLocal },
+  { name: 'federated', component: NavButtonFederated },
+  { name: 'moreMenu', component: NavButtonMoreMenu },
+]
+
+const defaultSelectedNavButtonNames: NavButtonName[] = currentUser.value
+  ? ['home', 'search', 'notification', 'mention', 'moreMenu']
+  : ['explore', 'local', 'federated', 'moreMenu']
+const selectedNavButtonNames = useLocalStorage<NavButtonName[]>(STORAGE_KEY_BOTTOM_NAV_BUTTONS, defaultSelectedNavButtonNames)
+
+const selectedNavButtons = computed(() => selectedNavButtonNames.value.map(name => navButtons.find(navButton => navButton.name === name)))
+
 // only one icon can be lit up at the same time
-import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
-
 const moreMenuVisible = ref(false)
-
-const { notifications } = useNotifications()
-const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
-const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
 </script>
 
 <template>
+  <!-- This weird styles above are used for scroll locking, don't change it unless you know exactly what you're doing. -->
   <nav
     h-14 border="t base" flex flex-row text-xl
     of-y-scroll scrollbar-hide overscroll-none
     class="after-content-empty after:(h-[calc(100%+0.5px)] w-0.1px pointer-events-none)"
   >
-    <!-- These weird styles above are used for scroll locking, don't change it unless you know exactly what you're doing. -->
-    <template v-if="currentUser">
-      <NuxtLink to="/home" :aria-label="$t('nav.home')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-        <div i-ri:home-5-line />
-      </NuxtLink>
-      <NuxtLink to="/search" :aria-label="$t('nav.search')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-        <div i-ri:search-line />
-      </NuxtLink>
-      <NuxtLink :to="`/notifications/${lastAccessedNotificationRoute}`" :aria-label="$t('nav.notifications')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-        <div flex relative>
-          <div class="i-ri:notification-4-line" text-xl />
-          <div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
-            {{ notifications < 10 ? notifications : '•' }}
-          </div>
-        </div>
-      </NuxtLink>
-      <NuxtLink to="/conversations" :aria-label="$t('nav.conversations')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-        <div i-ri:at-line />
-      </NuxtLink>
-    </template>
-    <template v-else>
-      <NuxtLink :to="`/${currentServer}/explore/${lastAccessedExploreRoute}`" :aria-label="$t('nav.explore')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-        <div i-ri:compass-3-line />
-      </NuxtLink>
-      <NuxtLink group :to="`/${currentServer}/public/local`" :aria-label="$t('nav.local')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-        <div i-ri:group-2-line />
-      </NuxtLink>
-      <NuxtLink :to="`/${currentServer}/public`" :aria-label="$t('nav.federated')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-        <div i-ri:earth-line />
-      </NuxtLink>
-    </template>
-    <NavBottomMoreMenu v-slot="{ toggleVisible, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer>
-      <button
-        flex items-center place-content-center h-full flex-1 class="select-none"
-        :class="show ? '!text-primary' : ''"
-        aria-label="More menu"
-        @click="toggleVisible"
-      >
-        <span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
-      </button>
-    </NavBottomMoreMenu>
+    <Component :is="navButton!.component" v-for="navButton in selectedNavButtons" :key="navButton!.name" :active-class="moreMenuVisible ? '' : 'text-primary'" />
   </nav>
 </template>

components/nav/button/Explore.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE } from '~/constants'
+
+defineProps<{
+  activeClass: string
+}>()
+
+const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
+</script>
+
+<template>
+  <NuxtLink :to="`/${currentServer}/explore/${lastAccessedExploreRoute}`" :aria-label="$t('nav.explore')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+    <div i-ri:compass-3-line />
+  </NuxtLink>
+</template>

components/nav/button/Federated.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  activeClass: string
+}>()
+</script>
+
+<template>
+  <NuxtLink :to="`/${currentServer}/public`" :aria-label="$t('nav.federated')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+    <div i-ri:earth-line />
+  </NuxtLink>
+</template>

components/nav/button/Home.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  activeClass: string
+}>()
+</script>
+
+<template>
+  <NuxtLink to="/home" :aria-label="$t('nav.home')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+    <div i-ri:home-5-line />
+  </NuxtLink>
+</template>

components/nav/button/Local.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  activeClass: string
+}>()
+</script>
+
+<template>
+  <NuxtLink group :to="`/${currentServer}/public/local`" :aria-label="$t('nav.local')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+    <div i-ri:group-2-line />
+  </NuxtLink>
+</template>

components/nav/button/Mention.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+  activeClass: string
+}>()
+</script>
+
+<template>
+  <NuxtLink
+    to="/conversations" :aria-label="$t('nav.conversations')"
+    :active-class="activeClass" flex flex-row items-center place-content-center h-full
+    flex-1 class="coarse-pointer:select-none" @click="$scrollToTop"
+  >
+    <div i-ri:at-line />
+  </NuxtLink>
+</template>

components/nav/button/MoreMenu.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineModel<boolean>()
+</script>
+
+<template>
+  <NavBottomMoreMenu
+    v-slot="{ toggleVisible, show }" v-model="modelValue!" flex flex-row items-center
+    place-content-center h-full flex-1 cursor-pointer
+  >
+    <button
+      flex items-center place-content-center h-full flex-1 class="select-none"
+      :class="show ? '!text-primary' : ''"
+      aria-label="More menu"
+      @click="toggleVisible"
+    >
+      <span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
+    </button>
+  </NavBottomMoreMenu>
+</template>

components/nav/button/Notification.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
+
+defineProps<{
+  activeClass: string
+}>()
+const { notifications } = useNotifications()
+const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
+</script>
+
+<template>
+  <NuxtLink :to="`/notifications/${lastAccessedNotificationRoute}`" :aria-label="$t('nav.notifications')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+    <div flex relative>
+      <div class="i-ri:notification-4-line" text-xl />
+      <div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
+        {{ notifications < 10 ? notifications : '•' }}
+      </div>
+    </div>
+  </NuxtLink>
+</template>

components/nav/button/Search.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  activeClass: string
+}>()
+</script>
+
+<template>
+  <NuxtLink to="/search" :aria-label="$t('nav.search')" :active-class="activeClass" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+    <div i-ri:search-line />
+  </NuxtLink>
+</template>

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')
 
@@ -295,7 +295,7 @@ function stopQuestionMarkPropagation(e: KeyboardEvent) {
               </ol>
             </CommonErrorMessage>
 
-            <div relative flex-1 flex flex-col min-h-30>
+            <div relative flex-1 flex flex-col :class="shouldExpanded ? 'min-h-30' : ''">
               <EditorContent
                 :editor="editor" flex max-w-full
                 :class="{

components/settings/SettingsBottomNav.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { NavButtonName } from '~/composables/settings'
+import { STORAGE_KEY_BOTTOM_NAV_BUTTONS } from '~/constants'
+
+interface NavButton {
+  name: NavButtonName
+  label: string
+  icon: string
+}
+
+const availableNavButtons: NavButton[] = [
+  { name: 'home', label: 'nav.home', icon: 'i-ri:home-5-line' },
+  { name: 'search', label: 'nav.search', icon: 'i-ri:search-line' },
+  { name: 'notification', label: 'nav.notifications', icon: 'i-ri:notification-4-line' },
+  { name: 'mention', label: 'nav.conversations', icon: 'i-ri:at-line' },
+  { name: 'explore', label: 'nav.explore', icon: 'i-ri:compass-3-line' },
+  { name: 'local', label: 'nav.local', icon: 'i-ri:group-2-line' },
+  { name: 'federated', label: 'nav.federated', icon: 'i-ri:earth-line' },
+  { name: 'moreMenu', label: 'nav.more_menu', icon: 'i-ri:more-fill' },
+] as const
+
+const defaultSelectedNavButtonNames = computed<NavButtonName[]>(() =>
+  currentUser.value
+    ? ['home', 'search', 'notification', 'mention', 'moreMenu']
+    : ['explore', 'local', 'federated', 'moreMenu'],
+)
+const navButtonNamesSetting = useLocalStorage<NavButtonName[]>(STORAGE_KEY_BOTTOM_NAV_BUTTONS, defaultSelectedNavButtonNames.value)
+const selectedNavButtonNames = ref<NavButtonName[]>([])
+
+const selectedNavButtons = computed<NavButton[]>(() =>
+  selectedNavButtonNames.value.map(name =>
+    availableNavButtons.find(navButton => navButton.name === name)!,
+  ),
+)
+
+const canSave = computed(() =>
+  selectedNavButtonNames.value.length > 0
+  && selectedNavButtonNames.value.includes('moreMenu')
+  && JSON.stringify(selectedNavButtonNames.value) !== JSON.stringify(navButtonNamesSetting.value),
+)
+
+function isAdded(name: NavButtonName) {
+  return selectedNavButtonNames.value.includes(name)
+}
+
+function append(navButtonName: NavButtonName) {
+  const maxButtonNumber = 5
+  if (selectedNavButtonNames.value.length < maxButtonNumber)
+    selectedNavButtonNames.value = [...selectedNavButtonNames.value, navButtonName]
+}
+
+function remove(navButtonName: NavButtonName) {
+  selectedNavButtonNames.value = selectedNavButtonNames.value.filter(name => name !== navButtonName)
+}
+
+function clear() {
+  selectedNavButtonNames.value = []
+}
+
+function reset() {
+  selectedNavButtonNames.value = defaultSelectedNavButtonNames.value
+}
+
+function save() {
+  navButtonNamesSetting.value = selectedNavButtonNames.value
+}
+</script>
+
+<template>
+  <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>
+
+      <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,17 +27,23 @@ const modes = [
 </script>
 
 <template>
-  <div flex="~ gap4 wrap" w-full>
-    <button
-      v-for="{ icon, label, mode } in modes"
-      :key="mode"
-      btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
-      :tabindex="colorMode.preference === mode ? 0 : -1"
-      :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,45 +13,63 @@ 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
-        :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"
-          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>
+  input:focus + div .container-marker:has(> div)::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 2rem;
+    height: 2rem;
+    border: 2px solid var(--c-primary);
+    border-radius: 50%;
+  }
   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,18 +12,25 @@ function updateTheme(theme: ThemeColors) {
 </script>
 
 <template>
-  <div flex="~ gap4 wrap" p2>
-    <button
-      v-for="[key, theme] in themes" :key="key"
-      :style="{
-        'background': key,
-        '--local-ring-color': key,
-      }"
-      :class="currentTheme === theme['--theme-color-name'] ? 'ring-2' : 'scale-90'"
-      :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/StatusCard.vue

@@ -62,6 +62,7 @@ const timeago = useTimeAgo(() => status.value.createdAt, timeAgoOptions)
 const isSelfReply = computed(() => status.value.inReplyToAccountId === status.value.account.id)
 const collapseRebloggedBy = computed(() => rebloggedBy.value?.id === status.value.account.id)
 const isDM = computed(() => status.value.visibility === 'direct')
+const isPinned = computed(() => status.value.pinned)
 
 const showUpperBorder = computed(() => props.newer && !directReply.value)
 const showReplyTo = computed(() => !replyToMain.value && !directReply.value)
@@ -75,6 +76,19 @@ const forceShow = ref(false)
     <div :h="showUpperBorder ? '1px' : '0'" w-auto bg-border mb-1 />
 
     <slot name="meta">
+      <!-- Pinned status -->
+      <div flex="~ col" justify-between>
+        <div
+          v-if="isPinned"
+          flex="~ gap2" items-center h-auto text-sm text-orange
+          m="is-5" p="t-1 is-5"
+          relative text-secondary ws-nowrap
+        >
+          <div i-ri:pushpin-line />
+          <span>{{ $t('status.pinned') }}</span>
+        </div>
+      </div>
+
       <!-- Line connecting to previous status -->
       <template v-if="status.inReplyToAccountId">
         <StatusReplyingTo

components/status/StatusMedia.vue

@@ -6,10 +6,20 @@ const { status, isPreview = false } = defineProps<{
   fullSize?: boolean
   isPreview?: boolean
 }>()
+
+const gridColumnNumber = computed(() => {
+  const num = status.mediaAttachments.length
+  if (num <= 1)
+    return 1
+  else if (num <= 4)
+    return 2
+  else
+    return 3
+})
 </script>
 
 <template>
-  <div class="status-media-container" :class="`status-media-container-${status.mediaAttachments.length}`">
+  <div class="status-media-container">
     <template v-for="attachment of status.mediaAttachments" :key="attachment.id">
       <StatusAttachment
         :attachment="attachment"
@@ -25,25 +35,12 @@ const { status, isPreview = false } = defineProps<{
 
 <style lang="postcss">
 .status-media-container {
+  --grid-cols: v-bind(gridColumnNumber);
+  display: grid;
+  grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
   --at-apply: gap-2;
   position: relative;
   width: 100%;
   overflow: hidden;
 }
-.status-media-container-1 {
-  display: grid;
-  grid-template-columns: 1fr;
-}
-.status-media-container-2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-.status-media-container-3 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-.status-media-container-4 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
 </style>

composables/settings/definition.ts

@@ -7,6 +7,8 @@ export type OldFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
 export type ColorMode = 'light' | 'dark' | 'system'
 
+export type NavButtonName = 'home' | 'search' | 'notification' | 'mention' | 'explore' | 'local' | 'federated' | 'moreMenu'
+
 export interface PreferencesSettings {
   hideAltIndicatorOnPosts: boolean
   hideGifIndicatorOnPosts: boolean

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: [

constants/index.ts

@@ -24,6 +24,7 @@ export const STORAGE_KEY_NOTIFICATION_POLICY = 'elk-notification-policy'
 export const STORAGE_KEY_PWA_HIDE_INSTALL = 'elk-pwa-hide-install'
 export const STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE = 'elk-last-accessed-notification-route'
 export const STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE = 'elk-last-accessed-explore-route'
+export const STORAGE_KEY_BOTTOM_NAV_BUTTONS = 'elk-bottom-nav-buttons'
 
 export const HANDLED_MASTO_URLS = /^(https?:\/\/)?([\w\d-]+\.)+\w+\/(@[@\w\d-\.]+)(\/objects)?(\/\d+)?$/
 

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

@@ -1,11 +1,23 @@
 {
   "account": {
+    "authorize": "Authorise to follow",
+    "authorized": "You have Authorised the request",
     "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"
   },
@@ -15,7 +27,41 @@
   "notification": {
     "favourited_post": "favourited your post"
   },
+  "report": {
+    "forward_question": "Do you want to send an anonymised copy of this report to that server as well?"
+  },
+  "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",
+      "optimize_for_low_performance_device": "Optimise for low performance device",
+      "use_star_favorite_icon": "Use star favourite icon"
+    }
+  },
+  "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.",
+    "explore_tags_intro": "These hashtags are gaining traction among people on this and other servers of the decentralised network right now."
+  },
   "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."
+    "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.json

@@ -58,6 +58,7 @@
     "boost": "Boost",
     "boost_count": "{0}",
     "boosted": "Boosted",
+    "clear": "Clear",
     "clear_publish_failed": "Clear publish errors",
     "clear_save_failed": "Clear save errors",
     "clear_upload_failed": "Clear file upload errors",
@@ -221,6 +222,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"
@@ -316,6 +318,7 @@
     "list": "List",
     "lists": "Lists",
     "local": "Local",
+    "more_menu": "More menu",
     "muted_users": "Muted users",
     "notifications": "Notifications",
     "privacy": "Privacy",
@@ -450,6 +453,8 @@
       "label": "Account settings"
     },
     "interface": {
+      "bottom_nav": "Bottom Navigation",
+      "bottom_nav_instructions": "Choose your favorite navigation buttons up to five for the bottom navigation. Must include the \"More menu\" button.",
       "color_mode": "Color Mode",
       "dark_mode": "Dark",
       "default": " (default)",
@@ -627,6 +632,7 @@
       "dismiss": "Dismiss",
       "read": "Read {0} description"
     },
+    "pinned": "Pinned post",
     "poll": {
       "count": "{0} votes|{0} vote|{0} votes",
       "ends": "ends {0}",
@@ -657,7 +663,7 @@
       "sign_up": "Sign-Up"
     },
     "notifications_all": "All",
-    "notifications_favourite": "Favourite",
+    "notifications_favourite": "Favorite",
     "notifications_follow": "Follow",
     "notifications_follow_request": "Follow request",
     "notifications_mention": "Mentions",

locales/es.json

@@ -58,6 +58,7 @@
     "boost": "Retootear",
     "boost_count": "{0}",
     "boosted": "Retooteado",
+    "clear": "Limpiar",
     "clear_publish_failed": "Limpiar errores de publicación",
     "clear_save_failed": "Limpiar errores al guardar",
     "clear_upload_failed": "Limpiar errores de subida de archivos",
@@ -74,6 +75,7 @@
     "next": "Siguiente",
     "prev": "Anterior",
     "publish": "Publicar",
+    "publish_thread": "Publicar hilo",
     "reply": "Responder",
     "reply_count": "{0}",
     "reset": "Reestablecer",
@@ -215,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"
@@ -315,6 +318,7 @@
     "list": "Lista",
     "lists": "Listas",
     "local": "Local",
+    "more_menu": "Más opciones",
     "muted_users": "Usuarios silenciados",
     "notifications": "Notificaciones",
     "privacy": "Privacidad",
@@ -449,6 +453,8 @@
       "label": "Ajustes de cuenta"
     },
     "interface": {
+      "bottom_nav": "Navegación inferior",
+      "bottom_nav_instructions": "Elige tus botones de navegación favoritos, hasta cinco para la navegación inferior. Debes incluir el botón \"Más opciones\".",
       "color_mode": "Modos de color",
       "dark_mode": "Modo oscuro",
       "default": " (por defecto)",
@@ -718,6 +724,7 @@
     "add_emojis": "Agregar emojis",
     "add_media": "Añadir imágenes, vídeo o audio",
     "add_publishable_content": "Publicar contenido",
+    "add_thread_item": "Agregar publicación al hilo",
     "change_content_visibility": "Cambiar visibilidad de contenido",
     "change_language": "Cambiar idioma",
     "emoji": "Emoji",
@@ -727,6 +734,8 @@
     "open_editor_tools": "Herramientas de edición",
     "pick_an_icon": "Selecciona un icono",
     "publish_failed": "Cierra los mensajes fallidos en la parte superior del editor para volver a publicar",
+    "remove_thread_item": "Eliminar publicación del hilo",
+    "start_thread": "Iniciar hilo",
     "toggle_bold": "Cambiar a negrita",
     "toggle_code_block": "Cambiar a bloque de código",
     "toggle_italic": "Cambiar a cursiva"

locales/eu-ES.json

@@ -58,6 +58,7 @@
     "boost": "Bultzatu",
     "boost_count": "{0}",
     "boosted": "Bultzatuta",
+    "clear": "Garbitu",
     "clear_publish_failed": "Garbitu argitalpen erroreak",
     "clear_save_failed": "Garbitu gordetzerakoan gertatutako erroreak",
     "clear_upload_failed": "Garbitu fitxategi-igoeren erroreak",
@@ -74,6 +75,7 @@
     "next": "Hurrengoa",
     "prev": "Aurrekoa",
     "publish": "Argitaratu",
+    "publish_thread": "Argitaratu haria",
     "reply": "Erantzun",
     "reply_count": "{0}",
     "reset": "Berrezarri",
@@ -220,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"
@@ -306,6 +309,7 @@
     "built_at": "Biltze-data: {0}",
     "compose": "Idatzi",
     "conversations": "Elkarrizketak",
+    "docs": "Dokumentazioa",
     "explore": "Arakatu",
     "favourites": "Gogokoak",
     "federated": "Federatua",
@@ -314,6 +318,7 @@
     "list": "Zerrenda",
     "lists": "Zerrendak",
     "local": "Lokala",
+    "more_menu": "Hobespen gehiago",
     "muted_users": "Mutututako erabiltzaileak",
     "notifications": "Jakinarazpenak",
     "privacy": "Pribatutasuna",
@@ -448,6 +453,8 @@
       "label": "Kontuaren ezarpenak"
     },
     "interface": {
+      "bottom_nav": "Beheko nabigazioa",
+      "bottom_nav_instructions": "Aukeratu botoi gogokoenak, bost gehienez, beheko nabigaziorako. \"Hobespen gehiago\" botoia barne izan behar du.",
       "color_mode": "Kolorea",
       "dark_mode": "Iluna",
       "default": " (defektuzkoa)",
@@ -541,6 +548,7 @@
       "hide_boost_count": "Ezkutatu bultzaden kopurua",
       "hide_favorite_count": "Ezkutatu gogokoen kopurua",
       "hide_follower_count": "Ezkutatu jarraitzaile kopurua",
+      "hide_gif_indi_on_posts": "Ezkutatu GIF adierazlea bidalketetan",
       "hide_news": "Ezkutatu berriak",
       "hide_reply_count": "Ezkutatu erantzunen kopurua",
       "hide_tag_hover_card": "Ezkutatu traolen aurrebista-txartelak sagua gainetik pasatzean",
@@ -592,7 +600,11 @@
   },
   "state": {
     "attachments_exceed_server_limit": "Erantsitakoen kopuruak bidalketaren muga gainditu du.",
+    "attachments_limit_audio_error": "Audioaren gehieneko neurria gainditu da: {0}",
     "attachments_limit_error": "Bidalketaren muga gainditu da",
+    "attachments_limit_image_error": "Irudiaren gehieneko neurria gainditu da: {0}",
+    "attachments_limit_unknown_error": "Fitxategiaren gehieneko neurria gainditu da: {0}",
+    "attachments_limit_video_error": "Bideoaren gehieneko neurria gainditu da: {0}",
     "edited": "(Editatua)",
     "editing": "Editatzen",
     "loading": "Kargatzen…",
@@ -613,6 +625,7 @@
     "favourited_by": "Gogoko egin dute:",
     "filter_hidden_phrase": "Iragazia:",
     "filter_show_anyway": "Erakutsi edonola ere",
+    "gif": "GIF",
     "img_alt": {
       "ALT": "ALT",
       "desc": "Deskribapena",
@@ -695,7 +708,7 @@
     "short_year_past": "{n}u",
     "week_future": "0 astetan|datorren astean|datozen {n} asteetan",
     "week_past": "duela 0 aste|aurreko astean|duela {n} aste",
-    "year_future": "0 urtetan|datorren urtean|datozen {n} urteetan",
+    "year_future": "0 urtetan|geurtz|datozen {n} urteetan",
     "year_past": "duela 0 urte|aurreko urtean|duela {n} urte"
   },
   "timeline": {
@@ -711,6 +724,7 @@
     "add_emojis": "Gehitu emojiak",
     "add_media": "Gehitu irudiak, bideoak edo audio fitxategi bat",
     "add_publishable_content": "Gehitu argitaratzeko edukia",
+    "add_thread_item": "Gehitu elementua harira",
     "change_content_visibility": "Aldatu edukiaren ikusgaitasuna",
     "change_language": "Aldatu hizkuntza",
     "emoji": "Emojia",
@@ -720,6 +734,8 @@
     "open_editor_tools": "Editatzeko tresnak",
     "pick_an_icon": "Hautatu ikonoa",
     "publish_failed": "Itxi editorearen goikaldeko huts-egiteen mezuak bidalketa berrargitaratzeko",
+    "remove_thread_item": "Kendu elementua haritik",
+    "start_thread": "Hasi haria",
     "toggle_bold": "Lodia",
     "toggle_code_block": "Kodea",
     "toggle_italic": "Etzana"

locales/hu-HU.json

@@ -45,7 +45,7 @@
     "request_follow": "Követés kérése",
     "requested": "{0} kérte, hogy kövessen",
     "unblock": "Ne legyen blokkolva",
-    "unfollow": "Nem követem tovább",
+    "unfollow": "Nem követem",
     "unmute": "Némítás megszűntetve",
     "view_other_followers": "A másik instancekról származó követések nem feltétlenül lesznek megjelenítve.",
     "view_other_following": "A másik instancekról származó követők nem feltétlenül lesznek megjelenítve.",
@@ -58,7 +58,8 @@
     "boost": "Kiemel",
     "boost_count": "{0}",
     "boosted": "Kiemelt",
-    "clear_publish_failed": "Publikálási hibák tisztítása",
+    "clear": "Tisztítás",
+    "clear_publish_failed": "Közzétételi hibák tisztítása",
     "clear_save_failed": "Mentési hibák tisztítása",
     "clear_upload_failed": "Fájl feltöltési hibák tisztítása",
     "close": "Bezár",
@@ -73,7 +74,8 @@
     "more": "Tovább",
     "next": "Következő",
     "prev": "Előző",
-    "publish": "Publikál",
+    "publish": "Közzététel",
+    "publish_thread": "Szál közzététele",
     "reply": "Válaszol",
     "reply_count": "{0}",
     "reset": "Visszaállít",
@@ -165,9 +167,9 @@
     },
     "unfollow": {
       "cancel": "Mégsem",
-      "confirm": "Követés leállítása",
+      "confirm": "Nem követem",
       "description": "Biztosan leállítod a követését?",
-      "title": "Követés leállítása"
+      "title": "Nem követem"
     }
   },
   "conversation": {
@@ -203,7 +205,7 @@
     "desc_para5": "elér minket a GitHub-on",
     "desc_para6": "és legyen elkötelezett.",
     "footer_team": "Az Elk csapat",
-    "title": "Az Elk Előzetes változata"
+    "title": "Üdvözöl az Elk!"
   },
   "language": {
     "search": "Keresés"
@@ -220,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"
@@ -315,6 +318,7 @@
     "list": "Lista",
     "lists": "Listák",
     "local": "Helyi",
+    "more_menu": "Továbbiak",
     "muted_users": "Némított felhasználók",
     "notifications": "Értesítések",
     "privacy": "Adatvédelem",
@@ -449,6 +453,8 @@
       "label": "Fiók beállítások"
     },
     "interface": {
+      "bottom_nav": "Alsó navigáció",
+      "bottom_nav_instructions": "Válaszd ki a kedvenc navigációs gombodjaid, maximum öt darabot az alsó navigációhoz. Mindenképpen tartalmaznia kell a \"Továbbiak\" gombot.",
       "color_mode": "Szín mód",
       "dark_mode": "Sötét",
       "default": " (alapértelmezett)",
@@ -602,8 +608,8 @@
     "edited": "(Szerkesztve)",
     "editing": "Szerkesztés",
     "loading": "Betöltés...",
-    "publish_failed": "A pubikálás sikertelen",
-    "publishing": "Publikálás",
+    "publish_failed": "A közzététel sikertelen",
+    "publishing": "Közzétesz",
     "save_failed": "Elmentés sikertelen",
     "upload_failed": "Fetöltés sikertelen",
     "uploading": "Fetöltés..."
@@ -632,13 +638,13 @@
       "finished": "véget ért {0}"
     },
     "replying_to": "Válasz {0}-nak",
-    "show_full_thread": "Teljes beszélgetés megjelenítése",
+    "show_full_thread": "Teljes szál megjelenítése",
     "someone": "valaki",
     "spoiler_media_hidden": "Média elrejtve",
     "spoiler_show_less": "Mutass kevesebbet",
     "spoiler_show_more": "Mutass többet",
     "thread": "Szál",
-    "try_original_site": "Próbálja az eredeti weblapon"
+    "try_original_site": "Próbálja az eredeti webhelyen"
   },
   "status_history": {
     "created": "létrehozva {0}",
@@ -718,6 +724,7 @@
     "add_emojis": "Emoji hozzáadása",
     "add_media": "Képek hozzáadása, egy videó, vagy egy audió fájl",
     "add_publishable_content": "Tartalom hozzáadása publikáláshoz",
+    "add_thread_item": "Tartalom hozzáadása a szálhoz",
     "change_content_visibility": "Tartalom láthatóságának megváltoztatása",
     "change_language": "nyelv megváltoztatása",
     "emoji": "Emoji",
@@ -727,6 +734,8 @@
     "open_editor_tools": "Szerkesztő eszközök",
     "pick_an_icon": "Ikon választása",
     "publish_failed": "A bejegyzések újbóli közzétételéhez zárja be a sikertelen üzeneteket a szerkesztő tetején",
+    "remove_thread_item": "Elem eltávolítása a szálból",
+    "start_thread": "Szál megkezdése",
     "toggle_bold": "Váltás félkövérre",
     "toggle_code_block": "Kódblokk váltása",
     "toggle_italic": "Váltás dőltbetűssé"

locales/it-IT.json

@@ -58,6 +58,7 @@
     "boost": "Potenzia",
     "boost_count": "{0}",
     "boosted": "Potenziato",
+    "clear": "Cancella",
     "clear_publish_failed": "Cancella errori di pubblicazione",
     "clear_save_failed": "Cancella errori di salvataggio",
     "clear_upload_failed": "Cancella errori di caricamento file",
@@ -74,6 +75,7 @@
     "next": "Successivo",
     "prev": "Precedente",
     "publish": "Pubblica",
+    "publish_thread": "Pubblica discussione",
     "reply": "Rispondi",
     "reply_count": "{0}",
     "reset": "Reset",
@@ -220,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"
@@ -315,6 +318,7 @@
     "list": "Lista",
     "lists": "Liste",
     "local": "Locale",
+    "more_menu": "Altro",
     "muted_users": "Utenti silenziati",
     "notifications": "Notifiche",
     "privacy": "Privacy",
@@ -449,6 +453,8 @@
       "label": "Impostazioni account"
     },
     "interface": {
+      "bottom_nav": "Barra di navigazione",
+      "bottom_nav_instructions": "Scegli non più di cinque tasti per la barra di navigazione. Il tasto \"Altro\" è obbligatorio.",
       "color_mode": "Aspetto",
       "dark_mode": "Scuro",
       "default": " (default)",
@@ -655,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",
@@ -718,6 +724,7 @@
     "add_emojis": "Aggiungi emoji",
     "add_media": "Aggiungi immagini, un video o un file audio",
     "add_publishable_content": "Aggiungi contenuto da pubblicare",
+    "add_thread_item": "Aggiungi elemento alla discussione",
     "change_content_visibility": "Cambia visibilità contenuto",
     "change_language": "Cambia lingua",
     "emoji": "Emoji",
@@ -727,6 +734,8 @@
     "open_editor_tools": "Formattazione testo",
     "pick_an_icon": "Scegli un'icona",
     "publish_failed": "Chiudi i messaggi falliti in cima all'editor per ripubblicare i post",
+    "remove_thread_item": "Rimuovi elemento dalla discussione",
+    "start_thread": "Avvia discussione",
     "toggle_bold": "Grassetto",
     "toggle_code_block": "Blocco di codice",
     "toggle_italic": "Corsivo"

locales/pt.json

@@ -58,6 +58,7 @@
     "boost": "Partilhar",
     "boost_count": "{0}",
     "boosted": "Partilhado",
+    "clear": "Limpar",
     "clear_publish_failed": "Limpar erros de publicação",
     "clear_save_failed": "Limpar erros ocorridos ao tentar guardar",
     "clear_upload_failed": "Limpar erros de carregamento de ficheiro",
@@ -74,6 +75,7 @@
     "next": "Próximo",
     "prev": "Anterior",
     "publish": "Publicar",
+    "publish_thread": "Publicar sequência",
     "reply": "Responder",
     "reply_count": "{0}",
     "reset": "Repor",
@@ -220,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"
@@ -315,6 +318,7 @@
     "list": "Lista",
     "lists": "Listas",
     "local": "Local",
+    "more_menu": "Mais opções",
     "muted_users": "Utilizadores silenciados",
     "notifications": "Notificações",
     "privacy": "Privacidade",
@@ -449,7 +453,9 @@
       "label": "Configurações da conta"
     },
     "interface": {
-      "color_mode": "Modo de cores",
+      "bottom_nav": "Barra de Navegação",
+      "bottom_nav_instructions": "Escolha as suas opções favoritas, até cinco, para a barra de navegação. Deve incluir o botão \"Mais opções\".",
+      "color_mode": "Modo de Cores",
       "dark_mode": "Modo Escuro",
       "default": " (padrão)",
       "font_size": "Tamanho da fonte",
@@ -718,6 +724,7 @@
     "add_emojis": "Adicionar emojis",
     "add_media": "Adicionar imagens, um video ou um ficheiro audio",
     "add_publishable_content": "Adicionar conteúdo a publicar",
+    "add_thread_item": "Adicionar item à sequência",
     "change_content_visibility": "Alterar visibilidade do conteúdo",
     "change_language": "Alterar idioma",
     "emoji": "Emoji",
@@ -727,6 +734,8 @@
     "open_editor_tools": "Ferramentas de edição",
     "pick_an_icon": "Escolher um ícone",
     "publish_failed": "Fechar mensagens de falha no topo do editor para republicar publicações",
+    "remove_thread_item": "Remover item da sequência",
+    "start_thread": "Iniciar sequência",
     "toggle_bold": "Alternar negrito",
     "toggle_code_block": "Alternar bloco de código",
     "toggle_italic": "Alternar itálico"

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",
@@ -74,6 +75,7 @@
     "next": "Kế tiếp",
     "prev": "Trước đó",
     "publish": "Đăng",
+    "publish_thread": "Đăng chuỗi tút",
     "reply": "Trả lời",
     "reply_count": "{0}",
     "reset": "Đặt lại",
@@ -195,15 +197,15 @@
       "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_para1": "Cảm ơn bạn đã quan tâm đến việc dùng thử Elk, ứng dụng web Mastodon đang được triển khai của chúng tôi!",
-    "desc_para2": "Chúng tôi đang nỗ lực phát triển và cải thiện nó.",
+    "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!",
-    "desc_para4": "Elk là Mã Nguồn Mở. Nếu bạn muốn thử nghiệm, đưa ra phản hồi hoặc đóng góp,",
+    "desc_para4": "Nếu bạn muốn thử nghiệm, đưa ra phản hồi hoặc đóng góp,",
     "desc_para5": "liên hệ trên GitHub",
     "desc_para6": "và tham gia.",
     "footer_team": "Elk Team",
-    "title": "Elk đang Thử Nghiệm!"
+    "title": "Elk xin chào!"
   },
   "language": {
     "search": "Tìm kiếm"
@@ -220,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"
@@ -306,6 +309,7 @@
     "built_at": "Bản dựng {0}",
     "compose": "Soạn tút",
     "conversations": "Nhắn riêng",
+    "docs": "Tài liệu",
     "explore": "Khám phá",
     "favourites": "Lượt thích",
     "federated": "Liên hợp",
@@ -314,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",
@@ -448,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)",
@@ -459,6 +466,7 @@
     },
     "language": {
       "display_language": "Ngôn ngữ giao diện",
+      "how_to_contribute": "Giúp một tay?",
       "label": "Ngôn ngữ",
       "post_language": "Ngôn ngữ đăng tút",
       "status": "Tình trạng dịch: {0}/{1} ({2}%)",
@@ -485,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": {
@@ -540,6 +548,7 @@
       "hide_boost_count": "Ẩn số lượt đăng lại",
       "hide_favorite_count": "Ẩn số lượt thích",
       "hide_follower_count": "Ẩn số lượt người theo dõi/đang theo dõi",
+      "hide_gif_indi_on_posts": "Ẩn biểu tượng GIF trên tút",
       "hide_news": "Ẩn tin tức",
       "hide_reply_count": "Ẩn số lượt trả lời",
       "hide_tag_hover_card": "Ẩn xem trước hashtag",
@@ -591,7 +600,11 @@
   },
   "state": {
     "attachments_exceed_server_limit": "Vượt quá giới hạn số lượng file đính kèm.",
+    "attachments_limit_audio_error": "Dung lượng âm thanh tối đa: {0}",
     "attachments_limit_error": "Đã vượt quá giới hạn cho mỗi tút",
+    "attachments_limit_image_error": "Dung lượng ảnh tối đa: {0}",
+    "attachments_limit_unknown_error": "Dung lượng tập tin tối đa: {0}",
+    "attachments_limit_video_error": "Dung lượng video tối đa: {0}",
     "edited": "(Đã sửa)",
     "editing": "Sửa",
     "loading": "Đang tải...",
@@ -612,6 +625,7 @@
     "favourited_by": "Thích bởi",
     "filter_hidden_phrase": "Lọc theo",
     "filter_show_anyway": "Vẫn cứ hiện",
+    "gif": "GIF",
     "img_alt": {
       "ALT": "ALT",
       "desc": "Mô tả",
@@ -710,6 +724,7 @@
     "add_emojis": "Chèn emoji",
     "add_media": "Thêm ảnh, video hoặc âm thanh",
     "add_publishable_content": "Thêm nội dung đăng",
+    "add_thread_item": "Thêm tút vào chuỗi",
     "change_content_visibility": "Chọn kiểu tút",
     "change_language": "Đổi ngôn ngữ",
     "emoji": "Emoji",
@@ -719,6 +734,8 @@
     "open_editor_tools": "Công cụ soạn thảo",
     "pick_an_icon": "Chọn biểu tượng",
     "publish_failed": "Đóng các thông báo không thành công để đăng lại tút",
+    "remove_thread_item": "Xóa tút khỏi chuỗi",
+    "start_thread": "Bắt đầu chuỗi tút",
     "toggle_bold": "In đậm",
     "toggle_code_block": "Đoạn mã",
     "toggle_italic": "In nghiêng"

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/[[server]]/@[account]/index/index.vue

@@ -10,11 +10,21 @@ const { t } = useI18n()
 
 const account = await fetchAccountByHandle(handle.value)
 
+// we need to ensure `pinned === true` on status
+// because this prop is appeared only on current account's posts
+function applyPinned(statuses: mastodon.v1.Status[]) {
+  return statuses.map((status) => {
+    status.pinned = true
+    return status
+  })
+}
+
 function reorderAndFilter(items: mastodon.v1.Status[]) {
   return reorderedTimeline(items, 'account')
 }
 
-const paginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ limit: 30, excludeReplies: true })
+const pinnedPaginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ pinned: true })
+const accountPaginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ limit: 30, excludeReplies: true })
 
 if (account) {
   useHydratedHead({
@@ -26,6 +36,9 @@ if (account) {
 <template>
   <div>
     <AccountTabs />
-    <TimelinePaginator :paginator="paginator" :preprocess="reorderAndFilter" context="account" :account="account" />
+    <TimelinePaginator :paginator="pinnedPaginator" :preprocess="applyPinned" context="account" :account="account" :end-message="false" />
+    <!-- Upper border -->
+    <div h="1px" w-auto bg-border mb-1 />
+    <TimelinePaginator :paginator="accountPaginator" :preprocess="reorderAndFilter" context="account" :account="account" />
   </div>
 </template>

pages/settings/interface/index.vue

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