feat(i18n): added greek translation (#2831)

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

.dockerignore

@@ -11,7 +11,6 @@ dist
 .netlify/
 .eslintcache
 
-public/shiki
 public/emojis
 
 *~

.env.example

@@ -8,7 +8,7 @@ NUXT_CLOUDFLARE_ACCOUNT_ID=
 NUXT_CLOUDFLARE_NAMESPACE_ID=
 NUXT_CLOUDFLARE_API_TOKEN=
 
-# 'cloudflare' | 'fs'
+# 'cloudflare' | 'vercel' | 'fs'
 NUXT_STORAGE_DRIVER=
 NUXT_STORAGE_FS_BASE=
 

.eslintignore

@@ -1,15 +0,0 @@
-*.css
-*.png
-*.ico
-*.toml
-*.patch
-*.txt
-Dockerfile
-public/
-public-dev/
-public-staging/
-https-dev-config/localhost.crt
-https-dev-config/localhost.key
-Dockerfile
-elk-translation-status.json
-docs/translation-status.json

.eslintrc

@@ -1,19 +0,0 @@
-{
-  "extends": "@antfu",
-  "ignorePatterns": ["!pages/public"],
-  "overrides": [
-    {
-      "files": ["locales/**.json"],
-      "rules": {
-        "jsonc/sort-keys": "error"
-      }
-    }
-  ],
-  "rules": {
-    "vue/no-restricted-syntax":["error", {
-      "selector": "VElement[name='a']",
-      "message": "Use NuxtLink instead."
-    }],
-    "n/prefer-global/process": "off"
-  }
-}

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/ISSUE_TEMPLATE/feature_request.md

@@ -2,4 +2,4 @@
 name: 🚀 New feature proposal
 about: Propose a new feature
 labels: 's: pending triage'
----
+---

.github/workflows/ci.yml

@@ -17,11 +17,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - run: corepack enable
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: pnpm
 
       - name: 📦 Install dependencies
@@ -31,7 +31,8 @@ jobs:
         run: pnpm nuxi prepare
 
       - name: 🧪 Test project
-        run: pnpm test tests/unit
+        run: pnpm test:ci
+        timeout-minutes: 10
 
       - name: 📝 Lint
         run: pnpm lint

.github/workflows/docker.yml

@@ -16,29 +16,29 @@ jobs:
       packages: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Docker meta
         id: metal
-        uses: docker/metadata-action@v4
+        uses: docker/metadata-action@v5
         with:
           images: |
             ghcr.io/${{ github.repository }}
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
       - name: Login to GitHub Container Registry
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ github.token }}
       - name: Build and push
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v5
         with:
           context: .
-          platforms: linux/amd64
+          platforms: linux/amd64,linux/arm64
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.metal.outputs.tags }}
           labels: ${{ steps.metal.outputs.labels }}

.github/workflows/release.yml

@@ -12,12 +12,12 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - name: Set node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 18
 

.github/workflows/semantic-pull-request.yml

@@ -19,6 +19,6 @@ jobs:
     name: Semantic Pull Request
     steps:
       - name: Validate PR title
-        uses: amannn/action-semantic-pull-request@v5.2.0
+        uses: amannn/action-semantic-pull-request@v5.4.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -2,6 +2,7 @@ node_modules
 *.log
 dist
 .output
+.pnpm-store
 .nuxt
 .env
 .DS_Store
@@ -11,7 +12,6 @@ dist
 .eslintcache
 elk-translation-status.json
 
-public/shiki
 public/emojis
 
 *~

.nvmrc

@@ -1 +1 @@
-18
+20

.vscode/settings.json

@@ -5,10 +5,6 @@
     "unmute",
     "unstorage"
   ],
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "editor.formatOnSave": false,
   "files.associations": {
     "*.css": "postcss"
   },
@@ -23,7 +19,44 @@
   "i18n-ally.preferredDelimiter": "_",
   "i18n-ally.sortKeys": true,
   "i18n-ally.sourceLanguage": "en",
+
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
   "prettier.enable": false,
-  "volar.completion.preferredTagNameCase": "pascal",
-  "volar.completion.preferredAttrNameCase": "kebab"
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
 }

CONTRIBUTING.md

@@ -8,7 +8,7 @@ For guidelines on contributing to the documentation, refer to the [docs README](
 
 ### Online
 
-You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow). 
+You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
 
 [![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
 
@@ -21,7 +21,6 @@ To develop and test the Elk package:
 2. Ensure using the latest Node.js (16.x).
 If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version.
 
-
 3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v7. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 16+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
 
 4. Check out a branch where you can work and commit your changes:
@@ -84,7 +83,7 @@ Simple approach used by most websites of relying on direction set in HTML elemen
 We've added some `UnoCSS` utilities styles to help you with that:
 - Do not use `left/right` padding and margin: for example `pl-1`. Use `padding-inline-start/end` instead. So `pl-1` should be `ps-1`, `pr-1` should be `pe-1`. The same rules apply to margin.
 - Do not use `rtl-` classes, such as `rtl-left-0`.
-- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception from the rule above. For icons inside the timeline, it might not work as expected.
+- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception to the rule above. For icons inside the timeline, it might not work as expected.
 - For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`.
 - If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`.
 - If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`.
@@ -98,7 +97,7 @@ You can check the current [translation status](https://docs.elk.zone/docs/guide/
 If you are updating a translation in your local environment, you can run the following commands to check the status:
 - from root folder: `nr prepare-translation-status`
 - change to `docs` folder and run docs dev server `nr dev`
-- open `http://localhost:3000/docs/guide/contributing#translation-status` in your browser
+- open `http://localhost:3000/guide/contributing#translation-status` in your browser
 
 ### Adding a new language
 

README.md

@@ -39,8 +39,8 @@ The Elk team maintains a deployment at:
 
 ### Self-Host Docker Deployment
 
-In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself. 
-One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc. 
+In order to host Elk yourself you can use the provided Dockerfile to build a container with elk. Be aware, that Elk only loads properly if the connection is done via SSL/TLS. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself.
+One could put Elk behind popular reverse proxies with SSL Handling like Traefik, NGINX etc.
 
 1. checkout source ```git clone https://github.com/elk-zone/elk.git```
 1. got into new source dir: ```cd elk```
@@ -49,8 +49,8 @@ One could put Elk behind popular reverse proxies with SSL Handling like Traefik,
 1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage```
 1. start container: ```docker-compose up -d```
 
-Note: The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
-
+> [!NOTE]
+> The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
 
 ### Ecosystem
 
@@ -106,7 +106,7 @@ We're really excited that you're interested in contributing to Elk! Before submi
 
 ### Online
 
-You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow). 
+You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
 
 [![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
 
@@ -151,14 +151,14 @@ You can consult the [PWA documentation](https://docs.elk.zone/pwa) to learn more
 - [UnoCSS](https://uno.antfu.me/) - The instant on-demand atomic CSS engine
 - [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format
 - [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript
-- [shiki](https://shiki.matsu.io/) - A beautiful Syntax Highlighter
+- [shiki](https://shiki.style/) - A beautiful yet powerful syntax highlighter
 - [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API
 
 ## 👨‍💻 Contributors
 
 <a href="https://github.com/elk-zone/elk/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=elk-zone/elk" />   
-</a>    
+  <img src="https://contrib.rocks/image?repo=elk-zone/elk" />
+</a>
 
 ## 📄 License
 

app.vue

@@ -4,10 +4,12 @@ provideGlobalCommands()
 
 const route = useRoute()
 
-if (process.server && !route.path.startsWith('/settings')) {
+if (import.meta.server && !route.path.startsWith('/settings')) {
+  const url = useRequestURL()
+
   useHead({
     meta: [
-      { property: 'og:url', content: `https://elk.zone${route.path}` },
+      { property: 'og:url', content: `${url.origin}${route.path}` },
     ],
   })
 }

components/account/AccountAvatar.vue

@@ -6,8 +6,8 @@ defineProps<{
   square?: boolean
 }>()
 
-const loaded = $ref(false)
-const error = $ref(false)
+const loaded = ref(false)
+const error = ref(false)
 </script>
 
 <template>

components/account/AccountBigCard.vue

@@ -5,7 +5,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const { account, as = 'div' } = $defineProps<{
+const { account, as = 'div' } = defineProps<{
   account: mastodon.v1.Account
   as?: string
 }>()

components/account/AccountBotIndicator.vue

@@ -11,7 +11,7 @@ defineProps<{
     text-secondary-light
   >
     <slot name="prepend" />
-    <CommonTooltip no-auto-focus :content="$t('account.bot')" :disabled="showLabel">
+    <CommonTooltip :content="$t('account.bot')" :disabled="showLabel">
       <div i-mdi:robot-outline />
     </CommonTooltip>
     <div v-if="showLabel">

components/account/AccountFollowButton.vue

@@ -10,35 +10,36 @@ const { account, command, context, ...props } = defineProps<{
 }>()
 
 const { t } = useI18n()
-const isSelf = $(useSelfAccount(() => account))
-const enable = $computed(() => !isSelf && currentUser.value)
-const relationship = $computed(() => props.relationship || useRelationship(account).value)
+const isSelf = useSelfAccount(() => account)
+const enable = computed(() => !isSelf.value && currentUser.value)
+const relationship = computed(() => props.relationship || useRelationship(account).value)
+const isLoading = computed(() => relationship.value === undefined)
 
-const { client } = $(useMasto())
+const { client } = useMasto()
 
 async function unblock() {
-  relationship!.blocking = false
+  relationship.value!.blocking = false
   try {
-    const newRel = await client.v1.accounts.unblock(account.id)
+    const newRel = await client.value.v1.accounts.$select(account.id).unblock()
     Object.assign(relationship!, newRel)
   }
   catch (err) {
     console.error(err)
     // TODO error handling
-    relationship!.blocking = true
+    relationship.value!.blocking = true
   }
 }
 
 async function unmute() {
-  relationship!.muting = false
+  relationship.value!.muting = false
   try {
-    const newRel = await client.v1.accounts.unmute(account.id)
+    const newRel = await client.value.v1.accounts.$select(account.id).unmute()
     Object.assign(relationship!, newRel)
   }
   catch (err) {
     console.error(err)
     // TODO error handling
-    relationship!.muting = true
+    relationship.value!.muting = true
   }
 }
 
@@ -46,21 +47,25 @@ useCommand({
   scope: 'Actions',
   order: -2,
   visible: () => command && enable,
-  name: () => `${relationship?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
+  name: () => `${relationship.value?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
   icon: 'i-ri:star-line',
-  onActivate: () => toggleFollowAccount(relationship!, account),
+  onActivate: () => toggleFollowAccount(relationship.value!, account),
 })
 
-const buttonStyle = $computed(() => {
-  if (relationship?.blocking)
+const buttonStyle = computed(() => {
+  if (relationship.value?.blocking)
     return 'text-inverted bg-red border-red'
 
-  if (relationship?.muting)
+  if (relationship.value?.muting)
     return 'text-base bg-card border-base'
 
   // If following, use a label style with a strong border for Mutuals
-  if (relationship ? relationship.following : context === 'following')
-    return `text-base ${relationship?.followedBy ? 'border-strong' : 'border-base'}`
+  if (relationship.value ? relationship.value.following : context === 'following')
+    return `text-base ${relationship.value?.followedBy ? 'border-strong' : 'border-base'}`
+
+  // If loading, use a plain style
+  if (isLoading.value)
+    return 'text-base border-base'
 
   // If not following, use a button style
   return 'text-inverted bg-primary border-primary'
@@ -77,28 +82,33 @@ const buttonStyle = $computed(() => {
     :hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
     @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollowAccount(relationship!, account)"
   >
-    <template v-if="relationship?.blocking">
-      <span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
-      <span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
-    </template>
-    <template v-if="relationship?.muting">
-      <span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
-      <span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
-    </template>
-    <template v-else-if="relationship ? relationship.following : context === 'following'">
-      <span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
-      <span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
-    </template>
-    <template v-else-if="relationship?.requested">
-      <span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
-      <span hidden elk-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
-    </template>
-    <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
-      <span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
-      <span hidden elk-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
+    <template v-if="isLoading">
+      <span i-svg-spinners-180-ring-with-bg />
     </template>
     <template v-else>
-      <span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
+      <template v-if="relationship?.blocking">
+        <span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
+        <span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
+      </template>
+      <template v-if="relationship?.muting">
+        <span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
+        <span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
+      </template>
+      <template v-else-if="relationship ? relationship.following : context === 'following'">
+        <span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
+        <span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
+      </template>
+      <template v-else-if="relationship?.requested">
+        <span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
+        <span hidden elk-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
+      </template>
+      <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
+        <span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
+        <span hidden elk-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
+      </template>
+      <template v-else>
+        <span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
+      </template>
     </template>
   </button>
 </template>

components/account/AccountFollowRequestButton.vue

@@ -5,32 +5,32 @@ const { account, ...props } = defineProps<{
   account: mastodon.v1.Account
   relationship?: mastodon.v1.Relationship
 }>()
-const relationship = $computed(() => props.relationship || useRelationship(account).value)
-const { client } = $(useMasto())
+const relationship = computed(() => props.relationship || useRelationship(account).value)
+const { client } = useMasto()
 
 async function authorizeFollowRequest() {
-  relationship!.requestedBy = false
-  relationship!.followedBy = true
+  relationship.value!.requestedBy = false
+  relationship.value!.followedBy = true
   try {
-    const newRel = await client.v1.followRequests.authorize(account.id)
+    const newRel = await client.value.v1.followRequests.$select(account.id).authorize()
     Object.assign(relationship!, newRel)
   }
   catch (err) {
     console.error(err)
-    relationship!.requestedBy = true
-    relationship!.followedBy = false
+    relationship.value!.requestedBy = true
+    relationship.value!.followedBy = false
   }
 }
 
 async function rejectFollowRequest() {
-  relationship!.requestedBy = false
+  relationship.value!.requestedBy = false
   try {
-    const newRel = await client.v1.followRequests.reject(account.id)
+    const newRel = await client.value.v1.followRequests.$select(account.id).reject()
     Object.assign(relationship!, newRel)
   }
   catch (err) {
     console.error(err)
-    relationship!.requestedBy = true
+    relationship.value!.requestedBy = true
   }
 }
 </script>
@@ -38,7 +38,7 @@ async function rejectFollowRequest() {
 <template>
   <div flex gap-4>
     <template v-if="relationship?.requestedBy">
-      <CommonTooltip :content="$t('account.authorize')" no-auto-focus>
+      <CommonTooltip :content="$t('account.authorize')">
         <button
           type="button"
           rounded-full text-sm p2 border-1
@@ -48,7 +48,7 @@ async function rejectFollowRequest() {
           <span block text-current i-ri:check-fill />
         </button>
       </CommonTooltip>
-      <CommonTooltip :content="$t('account.reject')" no-auto-focus>
+      <CommonTooltip :content="$t('account.reject')">
         <button
           type="button"
           rounded-full text-sm p2 border-1

components/account/AccountHandle.vue

@@ -5,7 +5,7 @@ const { account } = defineProps<{
   account: mastodon.v1.Account
 }>()
 
-const serverName = $computed(() => getServerName(account))
+const serverName = computed(() => getServerName(account))
 </script>
 
 <template>

components/account/AccountHeader.vue

@@ -6,29 +6,30 @@ const { account } = defineProps<{
   command?: boolean
 }>()
 
-const { client } = $(useMasto())
+const { client } = useMasto()
 
 const { t } = useI18n()
 
-const createdAt = $(useFormattedDateTime(() => account.createdAt, {
+const createdAt = useFormattedDateTime(() => account.createdAt, {
   month: 'long',
   day: 'numeric',
   year: 'numeric',
-}))
+})
 
-const relationship = $(useRelationship(account))
+const relationship = useRelationship(account)
 
 const namedFields = ref<mastodon.v1.AccountField[]>([])
 const iconFields = ref<mastodon.v1.AccountField[]>([])
 const isEditingPersonalNote = ref<boolean>(false)
-const hasHeader = $computed(() => !account.header.endsWith('/original/missing.png'))
+const hasHeader = computed(() => !account.header.endsWith('/original/missing.png'))
+const isCopied = ref<boolean>(false)
 
 function getFieldIconTitle(fieldName: string) {
   return fieldName === 'Joined' ? t('account.joined') : fieldName
 }
 
 function getNotificationIconTitle() {
-  return relationship?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
+  return relationship.value?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
 }
 
 function previewHeader() {
@@ -50,14 +51,14 @@ function previewAvatar() {
 }
 
 async function toggleNotifications() {
-  relationship!.notifying = !relationship?.notifying
+  relationship.value!.notifying = !relationship.value?.notifying
   try {
-    const newRel = await client.v1.accounts.follow(account.id, { notify: relationship?.notifying })
+    const newRel = await client.value.v1.accounts.$select(account.id).follow({ notify: relationship.value?.notifying })
     Object.assign(relationship!, newRel)
   }
   catch {
     // TODO error handling
-    relationship!.notifying = !relationship?.notifying
+    relationship.value!.notifying = !relationship.value?.notifying
   }
 }
 
@@ -74,37 +75,54 @@ watchEffect(() => {
   })
   icons.push({
     name: 'Joined',
-    value: createdAt,
+    value: createdAt.value,
   })
 
   namedFields.value = named
   iconFields.value = icons
 })
 
-const personalNoteDraft = ref(relationship?.note ?? '')
-watch($$(relationship), (relationship, oldValue) => {
+const personalNoteDraft = ref(relationship.value?.note ?? '')
+watch(relationship, (relationship, oldValue) => {
   if (!oldValue && relationship)
     personalNoteDraft.value = relationship.note ?? ''
 })
 
 async function editNote(event: Event) {
-  if (!event.target || !('value' in event.target) || !relationship)
+  if (!event.target || !('value' in event.target) || !relationship.value)
     return
 
   const newNote = event.target?.value as string
 
-  if (relationship.note?.trim() === newNote.trim())
+  if (relationship.value.note?.trim() === newNote.trim())
     return
 
-  const newNoteApiResult = await client.v1.accounts.createNote(account.id, { comment: newNote })
-  relationship.note = newNoteApiResult.note
-  personalNoteDraft.value = relationship.note ?? ''
+  const newNoteApiResult = await client.value.v1.accounts.$select(account.id).note.create({ comment: newNote })
+  relationship.value.note = newNoteApiResult.note
+  personalNoteDraft.value = relationship.value.note ?? ''
 }
 
-const isSelf = $(useSelfAccount(() => account))
-const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
+const isSelf = useSelfAccount(() => account)
+const isNotifiedOnPost = computed(() => !!relationship.value?.notifying)
 
 const personalNoteMaxLength = 2000
+
+async function copyAccountName() {
+  try {
+    const shortHandle = getShortHandle(account)
+    const serverName = getServerName(account)
+    const accountName = `${shortHandle}@${serverName}`
+    await navigator.clipboard.writeText(accountName)
+  }
+  catch (err) {
+    console.error('Failed to copy account name:', err)
+  }
+
+  isCopied.value = true
+  setTimeout(() => {
+    isCopied.value = false
+  }, 2000)
+}
 </script>
 
 <template>
@@ -175,7 +193,15 @@ const personalNoteMaxLength = 2000
             <AccountLockIndicator v-if="account.locked" show-label />
             <AccountBotIndicator v-if="account.bot" show-label />
           </div>
-          <AccountHandle :account="account" overflow-unset line-clamp-unset />
+
+          <div flex items-center gap-1>
+            <AccountHandle :account="account" overflow-unset line-clamp-unset />
+            <CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" flex>
+              <button text-secondary-light text-sm :class="isCopied ? 'i-ri:check-fill text-green' : 'i-ri:file-copy-line'" @click="copyAccountName">
+                <span sr-only>{{ $t('account.copy_account_name') }}</span>
+              </button>
+            </CommonTooltip>
+          </div>
         </div>
       </div>
       <label

components/account/AccountHoverCard.vue

@@ -5,7 +5,7 @@ const { account } = defineProps<{
   account: mastodon.v1.Account
 }>()
 
-const relationship = $(useRelationship(account))
+const relationship = useRelationship(account)
 </script>
 
 <template>

components/account/AccountHoverWrapper.vue

@@ -1,26 +1,70 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
+import { fetchAccountByHandle } from '~/composables/cache'
+
+type WatcherType = [acc?: mastodon.v1.Account | null, h?: string, v?: boolean]
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = defineProps<{
-  account?: mastodon.v1.Account
+  account?: mastodon.v1.Account | null
   handle?: string
   disabled?: boolean
 }>()
 
-const account = computed(() => props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined))
+const accountHover = ref()
+const hovered = useElementHover(accountHover)
+const account = ref<mastodon.v1.Account | null | undefined>(props.account)
+
+watch(
+  () => [props.account, props.handle, hovered.value] satisfies WatcherType,
+  ([newAccount, newHandle, newVisible], oldProps) => {
+    if (!newVisible || process.test)
+      return
+
+    if (newAccount) {
+      account.value = newAccount
+      return
+    }
+
+    if (newHandle) {
+      const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false]
+      if (!oldHandle || newHandle !== oldHandle || !account.value) {
+        // new handle can be wrong: using server instead of webDomain
+        fetchAccountByHandle(newHandle).then((acc) => {
+          if (newHandle === props.handle)
+            account.value = acc
+        })
+      }
+
+      return
+    }
+
+    account.value = undefined
+  },
+  { immediate: true, flush: 'post' },
+)
+
 const userSettings = useUserSettings()
 </script>
 
 <template>
-  <VMenu v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
-    <slot />
-    <template #popper>
-      <AccountHoverCard v-if="account" :account="account" />
-    </template>
-  </VMenu>
-  <slot v-else />
+  <span ref="accountHover">
+    <VMenu
+      v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')"
+      placement="bottom-start"
+      :delay="{ show: 500, hide: 100 }"
+      v-bind="$attrs"
+      :close-on-content-click="false"
+      no-auto-focus
+    >
+      <slot />
+      <template #popper>
+        <AccountHoverCard v-if="account" :account="account" />
+      </template>
+    </VMenu>
+    <slot v-else />
+  </span>
 </template>

components/account/AccountLockIndicator.vue

@@ -2,6 +2,8 @@
 defineProps<{
   showLabel?: boolean
 }>()
+
+const { t } = useI18n()
 </script>
 
 <template>
@@ -11,11 +13,11 @@ defineProps<{
     text-secondary-light
   >
     <slot name="prepend" />
-    <CommonTooltip no-auto-focus content="Lock" :disabled="showLabel">
+    <CommonTooltip content="Lock" :disabled="showLabel">
       <div i-ri:lock-line />
     </CommonTooltip>
     <div v-if="showLabel">
-      Lock
+      {{ t('account.lock') }}
     </div>
   </div>
 </template>

components/account/AccountMoreButton.vue

@@ -11,12 +11,12 @@ const emit = defineEmits<{
   (evt: 'removeNote'): void
 }>()
 
-let relationship = $(useRelationship(account))
+const relationship = useRelationship(account)
 
-const isSelf = $(useSelfAccount(() => account))
+const isSelf = useSelfAccount(() => account)
 
 const { t } = useI18n()
-const { client } = $(useMasto())
+const { client } = useMasto()
 const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 const { share, isSupported: isShareSupported } = useShare()
 
@@ -25,15 +25,19 @@ function shareAccount() {
 }
 
 async function toggleReblogs() {
-  if (!relationship!.showingReblogs && await openConfirmDialog({
-    title: t('confirm.show_reblogs.title', [account.acct]),
-    confirm: t('confirm.show_reblogs.confirm'),
-    cancel: t('confirm.show_reblogs.cancel'),
-  }) !== 'confirm')
-    return
+  if (!relationship.value!.showingReblogs) {
+    const dialogChoice = await openConfirmDialog({
+      title: t('confirm.show_reblogs.title'),
+      description: t('confirm.show_reblogs.description', [account.acct]),
+      confirm: t('confirm.show_reblogs.confirm'),
+      cancel: t('confirm.show_reblogs.cancel'),
+    })
+    if (dialogChoice.choice !== 'confirm')
+      return
+  }
 
-  const showingReblogs = !relationship?.showingReblogs
-  relationship = await client.v1.accounts.follow(account.id, { reblogs: showingReblogs })
+  const showingReblogs = !relationship.value?.showingReblogs
+  relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
 }
 
 async function addUserNote() {
@@ -41,18 +45,18 @@ async function addUserNote() {
 }
 
 async function removeUserNote() {
-  if (!relationship!.note || relationship!.note.length === 0)
+  if (!relationship.value!.note || relationship.value!.note.length === 0)
     return
 
-  const newNote = await client.v1.accounts.createNote(account.id, { comment: '' })
-  relationship!.note = newNote.note
+  const newNote = await client.value.v1.accounts.$select(account.id).note.create({ comment: '' })
+  relationship.value!.note = newNote.note
   emit('removeNote')
 }
 </script>
 
 <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/account/AccountPaginator.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { Paginator, mastodon } from 'masto'
+import type { mastodon } from 'masto'
 
 const { paginator, account, context } = defineProps<{
-  paginator: Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams>
+  paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
   context?: 'following' | 'followers'
   account?: mastodon.v1.Account
   relationshipContext?: 'followedBy' | 'following'
 }>()
 
-const fallbackContext = $computed(() => {
+const fallbackContext = computed(() => {
   return ['following', 'followers'].includes(context!)
 })
-const showOriginSite = $computed(() =>
+const showOriginSite = computed(() =>
   account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
 )
 </script>

components/account/AccountTabs.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import type { CommonRouteTabOption } from '../common/CommonRouteTabs.vue'
+import type { CommonRouteTabOption } from '~/types'
 
 const { t } = useI18n()
 const route = useRoute()
 
-const server = $(computedEager(() => route.params.server as string))
-const account = $(computedEager(() => route.params.account as string))
+const server = computed(() => route.params.server as string)
+const account = computed(() => route.params.account as string)
 
-const tabs = $computed<CommonRouteTabOption[]>(() => [
+const tabs = computed<CommonRouteTabOption[]>(() => [
   {
     name: 'account-index',
     to: {
       name: 'account-index',
-      params: { server, account },
+      params: { server: server.value, account: account.value },
     },
     display: t('tab.posts'),
     icon: 'i-ri:file-list-2-line',
@@ -21,7 +21,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
     name: 'account-replies',
     to: {
       name: 'account-replies',
-      params: { server, account },
+      params: { server: server.value, account: account.value },
     },
     display: t('tab.posts_with_replies'),
     icon: 'i-ri:chat-1-line',
@@ -30,7 +30,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
     name: 'account-media',
     to: {
       name: 'account-media',
-      params: { server, account },
+      params: { server: server.value, account: account.value },
     },
     display: t('tab.media'),
     icon: 'i-ri:camera-2-line',

components/account/TagHoverWrapper.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const { tagName, disabled } = defineProps<{
+  tagName?: string
+  disabled?: boolean
+}>()
+
+const tag = ref<mastodon.v1.Tag>()
+const tagHover = ref()
+const hovered = useElementHover(tagHover)
+
+watch(hovered, (newHovered) => {
+  if (newHovered && tagName) {
+    fetchTag(tagName).then((t) => {
+      tag.value = t
+    })
+  }
+})
+
+const userSettings = useUserSettings()
+</script>
+
+<template>
+  <span ref="tagHover">
+    <VMenu
+      v-if="!disabled && !getPreferences(userSettings, 'hideTagHoverCard')"
+      placement="bottom-start"
+      :delay="{ show: 500, hide: 100 }"
+      v-bind="$attrs"
+      :close-on-content-click="false"
+      no-auto-focus
+    >
+      <slot />
+      <template #popper>
+        <TagCardSkeleton v-if="!tag" />
+        <TagCard v-else :tag="tag" />
+      </template>
+    </VMenu>
+    <slot v-else />
+  </span>
+</template>

components/aria/AriaAnnouncer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import type { LocaleObject } from '@nuxtjs/i18n'
 import type { AriaAnnounceType, AriaLive } from '~/composables/aria'
-import type { LocaleObject } from '#i18n'
 
 const router = useRouter()
 const { t, locale, locales } = useI18n()
@@ -11,16 +11,16 @@ const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
   return acc
 }, {} as Record<string, string>)
 
-let ariaLive = $ref<AriaLive>('polite')
-let ariaMessage = $ref<string>('')
+const ariaLive = ref<AriaLive>('polite')
+const ariaMessage = ref<string>('')
 
 function onMessage(event: AriaAnnounceType, message?: string) {
   if (event === 'announce')
-    ariaMessage = message!
+    ariaMessage.value = message!
   else if (event === 'mute')
-    ariaLive = 'off'
+    ariaLive.value = 'off'
   else
-    ariaLive = 'polite'
+    ariaLive.value = 'polite'
 }
 
 watch(locale, (l, ol) => {

components/command/CommandItem.vue

@@ -1,19 +1,19 @@
 <script lang="ts" setup>
 import type { ResolvedCommand } from '~/composables/command'
 
-const emit = defineEmits<{
-  (event: 'activate'): void
-}>()
-
 const {
   cmd,
   index,
   active = false,
-} = $defineProps<{
+} = defineProps<{
   cmd: ResolvedCommand
   index: number
   active?: boolean
 }>()
+
+const emit = defineEmits<{
+  (event: 'activate'): void
+}>()
 </script>
 
 <template>

components/command/CommandKey.vue

@@ -5,7 +5,7 @@ const props = defineProps<{
 
 const isMac = useIsMac()
 
-const keys = $computed(() => props.name.toLowerCase().split('+'))
+const keys = computed(() => props.name.toLowerCase().split('+'))
 </script>
 
 <template>

components/command/CommandPanel.vue

@@ -10,21 +10,21 @@ const registry = useCommandRegistry()
 
 const router = useRouter()
 
-const inputEl = $ref<HTMLInputElement>()
-const resultEl = $ref<HTMLDivElement>()
+const inputEl = ref<HTMLInputElement>()
+const resultEl = ref<HTMLDivElement>()
 
-const scopes = $ref<CommandScope[]>([])
-let input = $(commandPanelInput)
+const scopes = ref<CommandScope[]>([])
+const input = commandPanelInput
 
 onMounted(() => {
-  inputEl?.focus()
+  inputEl.value?.focus()
 })
 
-const commandMode = $computed(() => input.startsWith('>'))
+const commandMode = computed(() => input.value.startsWith('>'))
 
-const query = $computed(() => commandMode ? '' : input.trim())
+const query = computed(() => commandMode.value ? '' : input.value.trim())
 
-const { accounts, hashtags, loading } = useSearch($$(query))
+const { accounts, hashtags, loading } = useSearch(query)
 
 function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
   return {
@@ -35,8 +35,8 @@ function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
   }
 }
 
-const searchResult = $computed<QueryResult>(() => {
-  if (query.length === 0 || loading.value)
+const searchResult = computed<QueryResult>(() => {
+  if (query.value.length === 0 || loading.value)
     return { length: 0, items: [], grouped: {} as any }
 
   // TODO extract this scope
@@ -61,22 +61,22 @@ const searchResult = $computed<QueryResult>(() => {
   }
 })
 
-const result = $computed<QueryResult>(() => commandMode
-  ? registry.query(scopes.map(s => s.id).join('.'), input.slice(1).trim())
-  : searchResult,
+const result = computed<QueryResult>(() => commandMode.value
+  ? registry.query(scopes.value.map(s => s.id).join('.'), input.value.slice(1).trim())
+  : searchResult.value,
 )
 
 const isMac = useIsMac()
-const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl')
+const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
 
-let active = $ref(0)
-watch($$(result), (n, o) => {
+const active = ref(0)
+watch(result, (n, o) => {
   if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx]))
-    active = 0
+    active.value = 0
 })
 
 function findItemEl(index: number) {
-  return resultEl?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
+  return resultEl.value?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
 }
 function onCommandActivate(item: QueryResultItem) {
   if (item.onActivate) {
@@ -84,14 +84,14 @@ function onCommandActivate(item: QueryResultItem) {
     emit('close')
   }
   else if (item.onComplete) {
-    scopes.push(item.onComplete())
-    input = '> '
+    scopes.value.push(item.onComplete())
+    input.value = '> '
   }
 }
 function onCommandComplete(item: QueryResultItem) {
   if (item.onComplete) {
-    scopes.push(item.onComplete())
-    input = '> '
+    scopes.value.push(item.onComplete())
+    input.value = '> '
   }
   else if (item.onActivate) {
     item.onActivate()
@@ -105,9 +105,9 @@ function intoView(index: number) {
 }
 
 function setActive(index: number) {
-  const len = result.length
-  active = (index + len) % len
-  intoView(active)
+  const len = result.value.length
+  active.value = (index + len) % len
+  intoView(active.value)
 }
 
 function onKeyDown(e: KeyboardEvent) {
@@ -118,7 +118,7 @@ function onKeyDown(e: KeyboardEvent) {
         break
       e.preventDefault()
 
-      setActive(active - 1)
+      setActive(active.value - 1)
 
       break
     }
@@ -128,7 +128,7 @@ function onKeyDown(e: KeyboardEvent) {
         break
       e.preventDefault()
 
-      setActive(active + 1)
+      setActive(active.value + 1)
 
       break
     }
@@ -136,9 +136,9 @@ function onKeyDown(e: KeyboardEvent) {
     case 'Home': {
       e.preventDefault()
 
-      active = 0
+      active.value = 0
 
-      intoView(active)
+      intoView(active.value)
 
       break
     }
@@ -146,7 +146,7 @@ function onKeyDown(e: KeyboardEvent) {
     case 'End': {
       e.preventDefault()
 
-      setActive(result.length - 1)
+      setActive(result.value.length - 1)
 
       break
     }
@@ -154,7 +154,7 @@ function onKeyDown(e: KeyboardEvent) {
     case 'Enter': {
       e.preventDefault()
 
-      const cmd = result.items[active]
+      const cmd = result.value.items[active.value]
       if (cmd)
         onCommandActivate(cmd)
 
@@ -164,7 +164,7 @@ function onKeyDown(e: KeyboardEvent) {
     case 'Tab': {
       e.preventDefault()
 
-      const cmd = result.items[active]
+      const cmd = result.value.items[active.value]
       if (cmd)
         onCommandComplete(cmd)
 
@@ -172,9 +172,9 @@ function onKeyDown(e: KeyboardEvent) {
     }
 
     case 'Backspace': {
-      if (input === '>' && scopes.length) {
+      if (input.value === '>' && scopes.value.length) {
         e.preventDefault()
-        scopes.pop()
+        scopes.value.pop()
       }
       break
     }

components/common/CommonCheckbox.vue

@@ -4,6 +4,8 @@ defineProps<{
   hover?: boolean
   iconChecked?: string
   iconUnchecked?: string
+  checkedIconColor?: string
+  prependCheckbox?: boolean
 }>()
 const modelValue = defineModel<boolean | null>()
 </script>
@@ -15,9 +17,12 @@ const modelValue = defineModel<boolean | null>()
     v-bind="$attrs"
     @click.prevent="modelValue = !modelValue"
   >
-    <span v-if="label" flex-1 ms-2 pointer-events-none>{{ label }}</span>
+    <span v-if="label && !prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
     <span
-      :class="modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line')"
+      :class="[
+        modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line'),
+        modelValue && checkedIconColor,
+      ]"
       text-lg
       aria-hidden="true"
     />
@@ -26,6 +31,7 @@ const modelValue = defineModel<boolean | null>()
       type="checkbox"
       sr-only
     >
+    <span v-if="label && prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
   </label>
 </template>
 

components/common/CommonInputImage.vue

@@ -33,7 +33,7 @@ const previewImage = ref('')
 const imageSrc = computed<string>(() => previewImage.value || defaultImage.value)
 
 async function pickImage() {
-  if (process.server)
+  if (import.meta.server)
     return
   const image = await fileOpen({
     description: 'Image',

components/common/CommonPaginator.vue

@@ -2,23 +2,23 @@
 // @ts-expect-error missing types
 import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-import type { Paginator, WsEvents } from 'masto'
+import type { mastodon } from 'masto'
 import type { UnwrapRef } from 'vue'
 
 const {
   paginator,
   stream,
+  eventType,
   keyProp = 'id',
   virtualScroller = false,
-  eventType = 'update',
   preprocess,
   endMessage = true,
 } = defineProps<{
-  paginator: Paginator<T[], O>
+  paginator: mastodon.Paginator<T[], O>
   keyProp?: keyof T
   virtualScroller?: boolean
-  stream?: Promise<WsEvents>
-  eventType?: 'notification' | 'update'
+  stream?: mastodon.streaming.Subscription
+  eventType?: 'update' | 'notification'
   preprocess?: (items: (U | T)[]) => U[]
   endMessage?: boolean | string
 }>()
@@ -46,7 +46,7 @@ defineSlots<{
 const { t } = useI18n()
 const nuxtApp = useNuxtApp()
 
-const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, $$(stream), eventType, preprocess)
+const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), eventType, preprocess)
 
 nuxtApp.hook('elk-logo:click', () => {
   update()
@@ -96,8 +96,8 @@ defineExpose({ createEntry, removeEntry, updateEntry })
       </template>
       <template v-else>
         <slot
-          v-for="item, index of items"
-          v-bind="{ key: item[keyProp as keyof U] }"
+          v-for="(item, index) of items"
+          v-bind="{ key: (item as U)[keyProp as keyof U] }"
           :item="item as U"
           :older="items[index + 1] as U"
           :newer="items[index - 1] as U"

components/common/CommonRouteTabs.vue

@@ -1,24 +1,7 @@
 <script setup lang="ts">
-import type { RouteLocationRaw } from 'vue-router'
+import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '~/types'
 
-const { t } = useI18n()
-
-export interface CommonRouteTabOption {
-  to: RouteLocationRaw
-  display: string
-  disabled?: boolean
-  name?: string
-  icon?: string
-  hide?: boolean
-  match?: boolean
-}
-export interface CommonRouteTabMoreOption {
-  options: CommonRouteTabOption[]
-  icon?: string
-  tooltip?: string
-  match?: boolean
-}
-const { options, command, replace, preventScrollTop = false, moreOptions } = $defineProps<{
+const { options, command, replace, preventScrollTop = false, moreOptions } = defineProps<{
   options: CommonRouteTabOption[]
   moreOptions?: CommonRouteTabMoreOption
   command?: boolean
@@ -26,6 +9,7 @@ const { options, command, replace, preventScrollTop = false, moreOptions } = $de
   preventScrollTop?: boolean
 }>()
 
+const { t } = useI18n()
 const router = useRouter()
 
 useCommands(() => command
@@ -49,7 +33,7 @@ useCommands(() => command
         :to="option.to"
         :replace="replace"
         relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
-        tabindex="1"
+        tabindex="0"
         hover:bg-active transition-100
         exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
         @click="!preventScrollTop && $scrollToTop()"
@@ -60,7 +44,7 @@ useCommands(() => command
         <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
       </div>
     </template>
-    <template v-if="moreOptions?.options?.length">
+    <template v-if="isHydrated && moreOptions?.options?.length">
       <CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
         <CommonTooltip placement="top" :content="moreOptions.tooltip || t('action.more')">
           <button

components/common/CommonScrollIntoView.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-const { as = 'div', active } = defineProps<{ as: any; active: boolean }>()
+const { as = 'div', active } = defineProps<{
+  as: any
+  active: boolean
+}>()
+
 const el = ref()
 
 watch(() => active, (active) => {

components/common/CommonTabs.vue

@@ -10,7 +10,7 @@ const { options, command } = defineProps<{
 
 const modelValue = defineModel<string>({ required: true })
 
-const tabs = $computed(() => {
+const tabs = computed(() => {
   return options.map((option) => {
     if (typeof option === 'string')
       return { name: option, display: option }
@@ -19,12 +19,12 @@ const tabs = $computed(() => {
   })
 })
 
-function toValidName(otpion: string) {
-  return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
+function toValidName(option: string) {
+  return option.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
 }
 
 useCommands(() => command
-  ? tabs.map(tab => ({
+  ? tabs.value.map(tab => ({
     scope: 'Tabs',
 
     name: tab.display,
@@ -49,7 +49,7 @@ useCommands(() => command
       ><label
         flex flex-auto cursor-pointer px3 m1 rounded transition-all
         :for="`tab-${toValidName(option.name)}`"
-        tabindex="1"
+        tabindex="0"
         hover:bg-active transition-100
         @keypress.enter="modelValue = option.name"
       ><span

components/common/CommonTooltip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Popper as VTooltipType } from 'floating-vue/dist'
+import type { Popper as VTooltipType } from 'floating-vue'
 
 export interface Props extends Partial<typeof VTooltipType> {
   content?: string
@@ -10,8 +10,10 @@ defineProps<Props>()
 
 <template>
   <VTooltip
+    v-if="isHydrated"
     v-bind="$attrs"
     auto-hide
+    no-auto-focus
   >
     <slot />
     <template #popper>

components/common/CommonTrending.vue

@@ -4,15 +4,15 @@ import type { mastodon } from 'masto'
 const {
   history,
   maxDay = 2,
-} = $defineProps<{
+} = defineProps<{
   history: mastodon.v1.TagHistory[]
   maxDay?: number
 }>()
 
-const ongoingHot = $computed(() => history.slice(0, maxDay))
+const ongoingHot = computed(() => history.slice(0, maxDay))
 
-const people = $computed(() =>
-  ongoingHot.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
+const people = computed(() =>
+  ongoingHot.value.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
 )
 </script>
 

components/common/CommonTrendingCharts.vue

@@ -6,22 +6,22 @@ const {
   history,
   width = 60,
   height = 40,
-} = $defineProps<{
+} = defineProps<{
   history?: mastodon.v1.TagHistory[]
   width?: number
   height?: number
 }>()
 
-const historyNum = $computed(() => {
+const historyNum = computed(() => {
   if (!history)
     return [1, 1, 1, 1, 1, 1, 1]
   return [...history].reverse().map(item => Number(item.accounts) || 0)
 })
 
-const sparklineEl = $ref<SVGSVGElement>()
+const sparklineEl = ref<SVGSVGElement>()
 const sparklineFn = typeof sparkline !== 'function' ? (sparkline as any).default : sparkline
 
-watch([$$(historyNum), $$(sparklineEl)], ([historyNum, sparklineEl]) => {
+watch([historyNum, sparklineEl], ([historyNum, sparklineEl]) => {
   if (!sparklineEl)
     return
   sparklineFn(sparklineEl, historyNum)

components/common/LocalizedNumber.vue

@@ -10,9 +10,9 @@ const props = defineProps<{
 
 const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
 
-const useSR = $computed(() => forSR(props.count))
-const rawNumber = $computed(() => formatNumber(props.count))
-const humanReadableNumber = $computed(() => formatHumanReadableNumber(props.count))
+const useSR = computed(() => forSR(props.count))
+const rawNumber = computed(() => formatNumber(props.count))
+const humanReadableNumber = computed(() => formatHumanReadableNumber(props.count))
 </script>
 
 <template>

components/common/dropdown/Dropdown.vue

@@ -6,11 +6,11 @@ defineProps<{
   autoBoundaryMaxSize?: boolean
 }>()
 
-const dropdown = $ref<any>()
+const dropdown = ref<any>()
 const colorMode = useColorMode()
 
 function hide() {
-  return dropdown.hide()
+  return dropdown.value.hide()
 }
 provide(InjectionKeyDropdownContext, {
   hide,

components/content/ContentCode.vue

@@ -4,7 +4,7 @@ const props = defineProps<{
   lang?: string
 }>()
 
-const raw = $computed(() => decodeURIComponent(props.code).replace(/&#39;/g, '\''))
+const raw = computed(() => decodeURIComponent(props.code).replace(/&#39;/g, '\''))
 
 const langMap: Record<string, string> = {
   js: 'javascript',
@@ -13,7 +13,7 @@ const langMap: Record<string, string> = {
 }
 
 const highlighted = computed(() => {
-  return props.lang ? highlightCode(raw, (langMap[props.lang] || props.lang) as any) : raw
+  return props.lang ? highlightCode(raw.value, (langMap[props.lang] || props.lang) as any) : raw
 })
 </script>
 

components/conversation/ConversationCard.vue

@@ -5,7 +5,7 @@ const { conversation } = defineProps<{
   conversation: mastodon.v1.Conversation
 }>()
 
-const withAccounts = $computed(() =>
+const withAccounts = computed(() =>
   conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id),
 )
 </script>

components/conversation/ConversationPaginator.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { Paginator, mastodon } from 'masto'
+import type { mastodon } from 'masto'
 
 const { paginator } = defineProps<{
-  paginator: Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
+  paginator: mastodon.Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
 }>()
 
 function preprocess(items: mastodon.v1.Conversation[]): mastodon.v1.Conversation[] {

components/emoji/Emoji.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const { as, alt, dataEmojiId } = defineProps<{
+  as: string
+  alt?: string
+  dataEmojiId?: string
+}>()
+
+const title = ref<string | undefined>()
+
+if (alt) {
+  if (alt.startsWith(':')) {
+    title.value = alt.replace(/:/g, '')
+  }
+  else {
+    import('node-emoji').then(({ find }) => {
+      title.value = find(alt)?.key.replace(/_/g, ' ')
+    })
+  }
+}
+
+// if it has a data-emoji-id, use that as the title instead
+if (dataEmojiId)
+  title.value = dataEmojiId
+</script>
+
+<template>
+  <component :is="as" v-bind="$attrs" :alt="alt" :data-emoji-id="dataEmojiId" :title="title">
+    <slot />
+  </component>
+</template>

components/help/HelpPreview.vue

@@ -2,12 +2,14 @@
 const emit = defineEmits<{
   (event: 'close'): void
 }>()
+
+const vAutoFocus = (el: HTMLElement) => el.focus()
 </script>
 
 <template>
   <div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative>
-    <button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
-      <div i-ri:close-line />
+    <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>
 
     <img :alt="$t('app_logo')" :src="`/${''}logo.svg`" w-20 h-20 height="80" width="80" mxa class="rtl-flip">
@@ -28,10 +30,12 @@ const emit = defineEmits<{
       </NuxtLink>
       {{ $t('help.desc_para6') }}
     </p>
-    {{ $t('help.desc_para3') }}
-    <p flex="~ gap-2 wrap" mxa>
+    <NuxtLink hover:text-primary href="https://github.com/sponsors/elk-zone" target="_blank">
+      {{ $t('help.desc_para3') }}
+    </NuxtLink>
+    <p flex="~ gap-2 wrap justify-center" mxa>
       <template v-for="team of elkTeamMembers" :key="team.github">
-        <NuxtLink :href="`https://github.com/sponsors/${team.github}`" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
+        <NuxtLink :href="team.link" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
           <img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
         </NuxtLink>
       </template>
@@ -42,7 +46,7 @@ const emit = defineEmits<{
       </NuxtLink>
     </p>
 
-    <button btn-solid mxa tabindex="2" @click="emit('close')">
+    <button type="button" btn-solid mxa @click="emit('close')">
       {{ $t('action.enter_app') }}
     </button>
   </div>

components/list/Account.vue

@@ -16,8 +16,8 @@ const isRemoved = ref(false)
 async function edit() {
   try {
     isRemoved.value
-      ? await client.v1.lists.addAccount(list, { accountIds: [account.id] })
-      : await client.v1.lists.removeAccount(list, { accountIds: [account.id] })
+      ? await client.v1.lists.$select(list).accounts.create({ accountIds: [account.id] })
+      : await client.v1.lists.$select(list).accounts.remove({ accountIds: [account.id] })
     isRemoved.value = !isRemoved.value
   }
   catch (err) {
@@ -39,7 +39,6 @@ async function edit() {
       <CommonTooltip
         :content="isRemoved ? $t('list.add_account') : $t('list.remove_account')"
         :hover="isRemoved ? 'text-green' : 'text-red'"
-        no-auto-focus
       >
         <button
           text-sm p2 border-1 transition-colors

components/list/ListEntry.vue

@@ -15,83 +15,84 @@ const { form, isDirty, submitter, reset } = useForm({
   form: () => ({ ...list.value }),
 })
 
-let isEditing = $ref<boolean>(false)
-let deleting = $ref<boolean>(false)
-let actionError = $ref<string | undefined>(undefined)
+const isEditing = ref<boolean>(false)
+const deleting = ref<boolean>(false)
+const actionError = ref<string | undefined>(undefined)
 
 const input = ref<HTMLInputElement>()
 const editBtn = ref<HTMLButtonElement>()
 const deleteBtn = ref<HTMLButtonElement>()
 
 async function prepareEdit() {
-  isEditing = true
-  actionError = undefined
+  isEditing.value = true
+  actionError.value = undefined
   await nextTick()
   input.value?.focus()
 }
 async function cancelEdit() {
-  isEditing = false
-  actionError = undefined
-  reset()
+  isEditing.value = false
+  actionError.value = undefined
 
   await nextTick()
+  reset()
   editBtn.value?.focus()
 }
 
 const { submit, submitting } = submitter(async () => {
   try {
-    list.value = await client.v1.lists.update(form.id, {
+    list.value = await client.v1.lists.$select(form.id).update({
       title: form.title,
     })
     cancelEdit()
   }
   catch (err) {
     console.error(err)
-    actionError = (err as Error).message
+    actionError.value = (err as Error).message
     await nextTick()
     input.value?.focus()
   }
 })
 
 async function removeList() {
-  if (deleting)
+  if (deleting.value)
     return
 
   const confirmDelete = await openConfirmDialog({
-    title: t('confirm.delete_list.title', [list.value.title]),
+    title: t('confirm.delete_list.title'),
+    description: t('confirm.delete_list.description', [list.value.title]),
     confirm: t('confirm.delete_list.confirm'),
     cancel: t('confirm.delete_list.cancel'),
   })
 
-  deleting = true
-  actionError = undefined
+  deleting.value = true
+  actionError.value = undefined
   await nextTick()
 
-  if (confirmDelete === 'confirm') {
+  if (confirmDelete.choice === 'confirm') {
     await nextTick()
     try {
-      await client.v1.lists.remove(list.value.id)
+      await client.v1.lists.$select(list.value.id).remove()
       emit('listRemoved', list.value.id)
     }
     catch (err) {
       console.error(err)
-      actionError = (err as Error).message
+      actionError.value = (err as Error).message
       await nextTick()
       deleteBtn.value?.focus()
     }
     finally {
-      deleting = false
+      deleting.value = false
     }
   }
   else {
-    deleting = false
+    deleting.value = false
   }
 }
 
 async function clearError() {
-  actionError = undefined
+  actionError.value = undefined
   await nextTick()
-  if (isEditing)
+  if (isEditing.value)
     input.value?.focus()
   else
     deleteBtn.value?.focus()
@@ -112,7 +113,7 @@ onDeactivated(cancelEdit)
       bg-base border="~ base" h10 m2 ps-1 pe-4 rounded-3 w-full flex="~ row"
       items-center relative focus-within:box-shadow-outline gap-3
     >
-      <CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')" no-auto-focus>
+      <CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')">
         <button
           type="button"
           rounded-full text-sm p2 transition-colors
@@ -135,7 +136,7 @@ onDeactivated(cancelEdit)
       {{ form.title }}
     </NuxtLink>
     <div mr4 flex gap2>
-      <CommonTooltip v-if="isEditing" :content="$t('list.save')" no-auto-focus>
+      <CommonTooltip v-if="isEditing" :content="$t('list.save')">
         <button
           type="submit"
           text-sm p2 border-1 transition-colors
@@ -151,7 +152,7 @@ onDeactivated(cancelEdit)
           </template>
         </button>
       </CommonTooltip>
-      <CommonTooltip v-else :content="$t('list.edit')" no-auto-focus>
+      <CommonTooltip v-else :content="$t('list.edit')">
         <button
           ref="editBtn"
           type="button"
@@ -163,7 +164,7 @@ onDeactivated(cancelEdit)
           <span block text-current i-ri:edit-2-line class="rtl-flip" />
         </button>
       </CommonTooltip>
-      <CommonTooltip :content="$t('list.delete')" no-auto-focus>
+      <CommonTooltip :content="$t('list.delete')">
         <button
           type="button"
           text-sm p2 border-1 transition-colors
@@ -191,7 +192,7 @@ onDeactivated(cancelEdit)
         <div aria-hidden="true" i-ri:error-warning-fill />
         <p>{{ $t(`list.${isEditing ? 'edit_error' : 'delete_error'}`) }}</p>
       </div>
-      <CommonTooltip placement="bottom" :content="$t('list.clear_error')" no-auto-focus>
+      <CommonTooltip placement="bottom" :content="$t('list.clear_error')">
         <button
           flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
           @click="clearError"

components/list/Lists.vue

@@ -3,9 +3,9 @@ const { userId } = defineProps<{
   userId: string
 }>()
 
-const { client } = $(useMasto())
-const paginator = client.v1.lists.list()
-const listsWithUser = ref((await client.v1.accounts.listLists(userId)).map(list => list.id))
+const { client } = useMasto()
+const paginator = client.value.v1.lists.list()
+const listsWithUser = ref((await client.value.v1.accounts.$select(userId).lists.list()).map(list => list.id))
 
 function indexOfUserInList(listId: string) {
   return listsWithUser.value.indexOf(listId)
@@ -15,11 +15,11 @@ async function edit(listId: string) {
   try {
     const index = indexOfUserInList(listId)
     if (index === -1) {
-      await client.v1.lists.addAccount(listId, { accountIds: [userId] })
+      await client.value.v1.lists.$select(listId).accounts.create({ accountIds: [userId] })
       listsWithUser.value.push(listId)
     }
     else {
-      await client.v1.lists.removeAccount(listId, { accountIds: [userId] })
+      await client.value.v1.lists.$select(listId).accounts.remove({ accountIds: [userId] })
       listsWithUser.value = listsWithUser.value.filter(id => id !== listId)
     }
   }
@@ -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/magickeys/MagickeysKeyboardShortcuts.vue

@@ -22,9 +22,9 @@ interface ShortcutItemGroup {
 }
 
 const isMac = useIsMac()
-const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl')
+const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
 
-const shortcutItemGroups: ShortcutItemGroup[] = [
+const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
   {
     name: t('magic_keys.groups.navigation.title'),
     items: [
@@ -40,6 +40,10 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
       //   description: t('magic_keys.groups.navigation.previous_status'),
       //   shortcut: { keys: ['k'], isSequence: false },
       // },
+      {
+        description: t('magic_keys.groups.navigation.go_to_search'),
+        shortcut: { keys: ['/'], isSequence: false },
+      },
       {
         description: t('magic_keys.groups.navigation.go_to_home'),
         shortcut: { keys: ['g', 'h'], isSequence: true },
@@ -48,6 +52,42 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
         description: t('magic_keys.groups.navigation.go_to_notifications'),
         shortcut: { keys: ['g', 'n'], isSequence: true },
       },
+      {
+        description: t('magic_keys.groups.navigation.go_to_conversations'),
+        shortcut: { keys: ['g', 'c'], isSequence: true },
+      },
+      {
+        description: t('magic_keys.groups.navigation.go_to_favourites'),
+        shortcut: { keys: ['g', 'f'], isSequence: true },
+      },
+      {
+        description: t('magic_keys.groups.navigation.go_to_bookmarks'),
+        shortcut: { keys: ['g', 'b'], isSequence: true },
+      },
+      {
+        description: t('magic_keys.groups.navigation.go_to_explore'),
+        shortcut: { keys: ['g', 'e'], isSequence: true },
+      },
+      {
+        description: t('magic_keys.groups.navigation.go_to_local'),
+        shortcut: { keys: ['g', 'l'], isSequence: true },
+      },
+      {
+        description: t('magic_keys.groups.navigation.go_to_federated'),
+        shortcut: { keys: ['g', 't'], isSequence: true },
+      },
+      {
+        description: t('magic_keys.groups.navigation.go_to_lists'),
+        shortcut: { keys: ['g', 'i'], isSequence: true },
+      },
+      {
+        description: t('magic_keys.groups.navigation.go_to_settings'),
+        shortcut: { keys: ['g', 's'], isSequence: true },
+      },
+      {
+        description: t('magic_keys.groups.navigation.go_to_profile'),
+        shortcut: { keys: ['g', 'p'], isSequence: true },
+      },
     ],
   },
   {
@@ -55,16 +95,20 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
     items: [
       {
         description: t('magic_keys.groups.actions.search'),
-        shortcut: { keys: [modifierKeyName, 'k'], isSequence: false },
+        shortcut: { keys: [modifierKeyName.value, 'k'], isSequence: false },
       },
       {
         description: t('magic_keys.groups.actions.command_mode'),
-        shortcut: { keys: [modifierKeyName, '/'], isSequence: false },
+        shortcut: { keys: [modifierKeyName.value, '/'], isSequence: false },
       },
       {
         description: t('magic_keys.groups.actions.compose'),
         shortcut: { keys: ['c'], isSequence: false },
       },
+      {
+        description: t('magic_keys.groups.actions.show_new_items'),
+        shortcut: { keys: ['.'], isSequence: false },
+      },
       {
         description: t('magic_keys.groups.actions.favourite'),
         shortcut: { keys: ['f'], isSequence: false },
@@ -79,7 +123,7 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
     name: t('magic_keys.groups.media.title'),
     items: [],
   },
-]
+])
 </script>
 
 <template>

components/main/MainContent.vue

@@ -10,6 +10,7 @@ defineProps<{
 
 const container = ref()
 const route = useRoute()
+const userSettings = useUserSettings()
 const { height: windowHeight } = useWindowSize()
 const { height: containerHeight } = useElementBounding(container)
 const wideLayout = computed(() => route.meta.wideLayout ?? false)
@@ -26,10 +27,13 @@ const containerClass = computed(() => {
 <template>
   <div ref="container" :class="containerClass">
     <div
-      sticky top-0 z10 backdrop-blur
+      sticky top-0 z10
       pt="[env(safe-area-inset-top,0)]"
       bg="[rgba(var(--rgb-bg-base),0.7)]"
       class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
+      :class="{
+        'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
+      }"
     >
       <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
         <div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>

components/modal/DurationPicker.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const model = defineModel<number>()
+const isValid = defineModel<boolean>('isValid')
+
+const days = ref<number | ''>(0)
+const hours = ref<number | ''>(1)
+const minutes = ref<number | ''>(0)
+
+watchEffect(() => {
+  if (days.value === '' || hours.value === '' || minutes.value === '') {
+    isValid.value = false
+    return
+  }
+
+  const duration
+      = days.value * 24 * 60 * 60
+      + hours.value * 60 * 60
+      + minutes.value * 60
+
+  if (duration <= 0) {
+    isValid.value = false
+    return
+  }
+
+  isValid.value = true
+  model.value = duration
+})
+</script>
+
+<template>
+  <div flex flex-grow-0 gap-2>
+    <label flex items-center gap-2>
+      <input v-model="days" type="number" min="0" max="1999" input-base :class="!isValid ? 'input-error' : null">
+      {{ $t('confirm.mute_account.days', days === '' ? 0 : days) }}
+    </label>
+    <label flex items-center gap-2>
+      <input v-model="hours" type="number" min="0" max="24" input-base :class="!isValid ? 'input-error' : null">
+      {{ $t('confirm.mute_account.hours', hours === '' ? 0 : hours) }}
+    </label>
+    <label flex items-center gap-2>
+      <input v-model="minutes" type="number" min="0" max="59" step="5" input-base :class="!isValid ? 'input-error' : null">
+      {{ $t('confirm.mute_account.minute', minutes === '' ? 0 : minutes) }}
+    </label>
+  </div>
+</template>

components/modal/ModalConfirm.vue

@@ -1,26 +1,55 @@
 <script setup lang="ts">
-import type { ConfirmDialogChoice, ConfirmDialogLabel } from '~/types'
+import type { ConfirmDialogChoice, ConfirmDialogOptions } from '~/types'
+import DurationPicker from '~/components/modal/DurationPicker.vue'
 
-defineProps<ConfirmDialogLabel>()
+const props = defineProps<ConfirmDialogOptions>()
 
 const emit = defineEmits<{
   (evt: 'choice', choice: ConfirmDialogChoice): void
 }>()
+
+const hasDuration = ref(false)
+const isValidDuration = ref(true)
+const duration = ref(60 * 60) // default to 1 hour
+const shouldMuteNotifications = ref(true)
+const isMute = computed(() => props.extraOptionType === 'mute')
+
+function handleChoice(choice: ConfirmDialogChoice['choice']) {
+  const dialogChoice = {
+    choice,
+    ...isMute.value && {
+      extraOptions: {
+        mute: {
+          duration: hasDuration.value ? duration.value : 0,
+          notifications: shouldMuteNotifications.value,
+        },
+      },
+    },
+  }
+
+  emit('choice', dialogChoice)
+}
 </script>
 
 <template>
   <div flex="~ col" gap-6>
-    <div font-bold text-lg text-center>
+    <div font-bold text-lg>
       {{ title }}
     </div>
     <div v-if="description">
       {{ description }}
     </div>
+    <div v-if="isMute" flex-col flex gap-4>
+      <CommonCheckbox v-model="hasDuration" :label="$t('confirm.mute_account.specify_duration')" prepend-checkbox checked-icon-color="text-primary" />
+      <DurationPicker v-if="hasDuration" v-model="duration" v-model:is-valid="isValidDuration" />
+      <CommonCheckbox v-model="shouldMuteNotifications" :label="$t('confirm.mute_account.notifications')" prepend-checkbox checked-icon-color="text-primary" />
+    </div>
+
     <div flex justify-end gap-2>
-      <button btn-text @click="emit('choice', 'cancel')">
+      <button btn-text @click="handleChoice('cancel')">
         {{ cancel || $t('confirm.common.cancel') }}
       </button>
-      <button btn-solid @click="emit('choice', 'confirm')">
+      <button btn-solid :disabled="!isValidDuration" @click="handleChoice('confirm')">
         {{ confirm || $t('confirm.common.confirm') }}
       </button>
     </div>

components/modal/ModalContainer.vue

@@ -63,11 +63,11 @@ function handleFavouritedBoostedByClose() {
     </ModalDialog>
     <ModalDialog
       v-model="isPublishDialogOpen"
-      max-w-180 flex
+      max-w-180 flex flex-col
       @close="handlePublishClose"
     >
       <!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
-      <PublishWidget
+      <PublishWidgetList
         v-if="dialogDraftKey"
         :draft-key="dialogDraftKey" expanded flex-1 w-0
         @published="handlePublished"

components/modal/ModalDialog.vue

@@ -56,6 +56,7 @@ const visible = defineModel<boolean>({ required: true })
 
 const deactivated = useDeactivated()
 const route = useRoute()
+const userSettings = useUserSettings()
 
 /** scrollable HTML element */
 const elDialogMain = ref<HTMLDivElement>()
@@ -156,7 +157,13 @@ useEventListener('keydown', (e: KeyboardEvent) => {
         <!-- corresponding to issue: #106, so please don't remove it. -->
 
         <!-- Mask layer: blur -->
-        <div class="dialog-mask" absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter backdrop-blur-sm touch-none />
+        <div
+          class="dialog-mask"
+          :class="{
+            'backdrop-blur-sm': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
+          }"
+          absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter touch-none
+        />
         <!-- Mask layer: dimming -->
         <div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
         <!-- Dialog container -->

components/modal/ModalMediaPreview.vue

@@ -37,16 +37,16 @@ onUnmounted(() => locked.value = false)
 </script>
 
 <template>
-  <div relative h-full w-full flex pt-12 w-100vh @click="onClick">
+  <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/modal/ModalMediaPreviewCarousel.vue

@@ -15,14 +15,14 @@ const emit = defineEmits<{
 const modelValue = defineModel<number>({ required: true })
 
 const slideGap = 20
-const doubleTapTreshold = 250
+const doubleTapThreshold = 250
 
 const view = ref()
 const slider = ref()
 const slide = ref()
 const image = ref()
 
-const reduceMotion = process.server ? ref(false) : useReducedMotion()
+const reduceMotion = import.meta.server ? ref(false) : useReducedMotion()
 const isInitialScrollDone = useTimeout(350)
 const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value)
 
@@ -36,6 +36,8 @@ const isPinching = ref(false)
 const maxZoomOut = ref(1)
 const isZoomedIn = computed(() => scale.value > 1)
 
+const enableAutoplay = usePreferences('enableAutoplay')
+
 function goToFocusedSlide() {
   scale.value = 1
   x.value = slide.value[modelValue.value].offsetLeft * scale.value
@@ -147,7 +149,7 @@ function handleLastDrag(tap: boolean, swipe: Vector2, movement: Vector2, positio
 let lastTapAt = 0
 function handleTap([positionX, positionY]: Vector2) {
   const now = Date.now()
-  const isDoubleTap = now - lastTapAt < doubleTapTreshold
+  const isDoubleTap = now - lastTapAt < doubleTapThreshold
   lastTapAt = now
 
   if (!isDoubleTap)
@@ -218,7 +220,7 @@ function handleZoomDrag([deltaX, deltaY]: Vector2) {
 function handleSlideDrag([movementX, movementY]: Vector2) {
   goToFocusedSlide()
 
-  if (Math.abs(movementY) > Math.abs(movementX)) // vertical movement is more then horizontal
+  if (Math.abs(movementY) > Math.abs(movementX)) // vertical movement is more than horizontal
     y.value -= movementY / scale.value
   else
     x.value -= movementX / scale.value
@@ -264,8 +266,12 @@ const imageStyle = computed(() => ({
         items-center
         justify-center
       >
-        <img
+        <component
+          :is="item.type === 'gifv' ? 'video' : 'img'"
           ref="image"
+          :autoplay="enableAutoplay"
+          controls
+          loop
           select-none
           max-w-full
           max-h-full
@@ -273,7 +279,7 @@ const imageStyle = computed(() => ({
           :draggable="false"
           :src="item.url || item.previewUrl"
           :alt="item.description || ''"
-        >
+        />
       </div>
     </div>
   </div>

components/nav/NavBottom.vue

@@ -1,56 +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
 const moreMenuVisible = ref(false)
-
-const { notifications } = useNotifications()
 </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" :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`" :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:hashtag />
-      </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/NavBottomMoreMenu.vue

@@ -13,7 +13,10 @@ function toggleVisible() {
 }
 
 const buttonEl = ref<HTMLDivElement>()
-/** Close the drop-down menu if the mouse click is not on the drop-down menu button when the drop-down menu is opened */
+/**
+ * Close the drop-down menu if the mouse click is not on the drop-down menu button when the drop-down menu is opened
+ * @param mouse
+ */
 function clickEvent(mouse: MouseEvent) {
   if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) {
     if (modelValue.value) {
@@ -141,11 +144,12 @@ const { dragging, dragDistance } = invoke(() => {
           :class="{
             'duration-0': dragging,
             'duration-250': !dragging,
+            'backdrop-blur-md': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
           }"
           transition="transform ease-in"
           flex-1 min-w-48 py-6 mb="-1px"
           of-y-auto scrollbar-hide overscroll-none max-h="[calc(100vh-200px)]"
-          rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter backdrop-blur-md
+          rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter
           border-t-1 border-base
         >
           <!-- Nav -->

components/nav/NavSide.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
+
 const { command } = defineProps<{
   command?: boolean
 }>()
 const { notifications } = useNotifications()
 const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
+const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
+const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
 </script>
 
 <template>
@@ -12,7 +16,7 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 
     <div class="spacer" shrink xl:hidden />
     <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
-    <NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command">
+    <NavSideItem :text="$t('nav.notifications')" :to="`/notifications/${lastAccessedNotificationRoute}`" icon="i-ri:notification-4-line" user-only :command="command">
       <template #icon>
         <div flex relative>
           <div class="i-ri:notification-4-line" text-xl />
@@ -30,10 +34,11 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
     <NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
 
     <div class="spacer" shrink hidden sm:block />
-    <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" />
+    <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore/${lastAccessedExploreRoute}` : `/explore/${lastAccessedExploreRoute}`" icon="i-ri:compass-3-line" :command="command" />
     <NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />
     <NavSideItem :text="$t('nav.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
     <NavSideItem :text="$t('nav.lists')" :to="isHydrated ? `/${currentServer}/lists` : '/lists'" icon="i-ri:list-check" user-only :command="command" />
+    <NavSideItem :text="$t('nav.hashtags')" to="/hashtags" icon="i-ri:hashtag" user-only :command="command" />
 
     <div class="spacer" shrink hidden sm:block />
     <NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />

components/nav/NavSideItem.vue

@@ -28,13 +28,13 @@ useCommand({
   },
 })
 
-let activeClass = $ref('text-primary')
+const activeClass = ref('text-primary')
 onHydrated(async () => {
   // TODO: force NuxtLink to reevaluate, we now we are in this route though, so we should force it to active
   // we don't have currentServer defined until later
-  activeClass = ''
+  activeClass.value = ''
   await nextTick()
-  activeClass = 'text-primary'
+  activeClass.value = 'text-primary'
 })
 
 // Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items
@@ -57,11 +57,21 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
       <div
         class="item"
         flex items-center gap4
-        w-fit rounded-3
-        px2 mx3 sm:mxa
         xl="ml0 mr5 px5 w-auto"
-        transition-100
-        elk-group-hover="bg-active" group-focus-visible:ring="2 current"
+        :class="isSmallScreen
+          ? `
+            w-full
+            px5 sm:mxa
+            transition-colors duration-200 transform
+            hover-bg-gray-100 hover-dark:(bg-gray-700 text-white)
+          ` : `
+            w-fit rounded-3
+            px2 mx3 sm:mxa
+            transition-100
+            elk-group-hover-bg-active
+            group-focus-visible:ring-2
+            group-focus-visible:ring-current
+          `"
       >
         <slot name="icon">
           <div :class="icon" text-xl />

components/nav/NavUser.vue

@@ -34,7 +34,13 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
         <strong>{{ currentServer }}</strong>
       </i18n-t>
     </button>
-    <button v-else btn-solid text-sm px-2 py-1 text-center xl:hidden @click="openSigninDialog()">
+    <button
+      v-else
+      flex="~ row"
+      gap-x-1 items-center justify-center btn-solid text-sm px-2 py-1 xl:hidden
+      @click="openSigninDialog()"
+    >
+      <span aria-hidden="true" block i-ri:login-circle-line class="rtl-flip" />
       {{ $t('action.sign_in') }}
     </button>
   </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="$t('nav.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/notification/NotificationCard.vue

@@ -4,6 +4,13 @@ import type { mastodon } from 'masto'
 const { notification } = defineProps<{
   notification: mastodon.v1.Notification
 }>()
+
+const { t } = useI18n()
+
+// well-known emoji reactions types Elk does not support yet
+const unsupportedEmojiReactionTypes = ['pleroma:emoji_reaction', 'reaction']
+if (unsupportedEmojiReactionTypes.includes(notification.type))
+  console.warn(`[DEV] ${t('notification.missing_type')} '${notification.type}' (notification.id: ${notification.id})`)
 </script>
 
 <template>
@@ -15,7 +22,6 @@ const { notification } = defineProps<{
           ps-3 pe-4 inset-is-0
           rounded-ie-be-3
           py-3 bg-base top-0
-          :lang="notification.status?.language ?? undefined"
         >
           <div i-ri-user-3-line text-xl me-3 color-blue />
           <AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
@@ -26,7 +32,6 @@ const { notification } = defineProps<{
         <AccountBigCard
           ms10
           :account="notification.account"
-          :lang="notification.status?.language ?? undefined"
         />
       </NuxtLink>
     </template>
@@ -90,7 +95,8 @@ const { notification } = defineProps<{
     <template v-else-if="notification.type === 'mention' || notification.type === 'poll' || notification.type === 'status'">
       <StatusCard :status="notification.status!" />
     </template>
-    <template v-else>
+    <template v-else-if="!unsupportedEmojiReactionTypes.includes(notification.type)">
+      <!-- prevent showing errors for dev for known emoji reaction types -->
       <!-- type 'favourite' and 'reblog' should always rendered by NotificationGroupedLikes -->
       <div text-red font-bold>
         [DEV] {{ $t('notification.missing_type') }} '{{ notification.type }}'

components/notification/NotificationGroupedFollow.vue

@@ -5,10 +5,10 @@ const { items } = defineProps<{
   items: GroupedNotifications
 }>()
 
-const count = $computed(() => items.items.length)
+const count = computed(() => items.items.length)
 const isExpanded = ref(false)
-const lang = $computed(() => {
-  return (count > 1 || count === 0) ? undefined : items.items[0].status?.language
+const lang = computed(() => {
+  return (count.value > 1 || count.value === 0) ? undefined : items.items[0].status?.language
 })
 </script>
 
@@ -22,11 +22,13 @@ const lang = $computed(() => {
           :count="count"
         />
       </template>
-      <template v-else>
-        <AccountDisplayName
-          :account="items.items[0]?.account"
-          text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
-        />
+      <template v-else-if="count === 1">
+        <NuxtLink :to="getAccountRoute(items.items[0].account)">
+          <AccountDisplayName
+            :account="items.items[0].account"
+            text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
+          />
+        </NuxtLink>
         <span me-1 ws-nowrap>
           {{ $t('notification.followed_you') }}
         </span>

components/notification/NotificationGroupedLikes.vue

@@ -6,8 +6,8 @@ const { group } = defineProps<{
 }>()
 const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 
-const reblogs = $computed(() => group.likes.filter(i => i.reblog))
-const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
+const reblogs = computed(() => group.likes.filter(i => i.reblog))
+const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
 </script>
 
 <template>

components/notification/NotificationPaginator.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 // @ts-expect-error missing types
 import { DynamicScrollerItem } from 'vue-virtual-scroller'
-import type { Paginator, WsEvents, mastodon } from 'masto'
+import type { mastodon } from 'masto'
 import type { GroupedAccountLike, NotificationSlot } from '~/types'
 
 const { paginator, stream } = defineProps<{
-  paginator: Paginator<mastodon.v1.Notification[], mastodon.v1.ListNotificationsParams>
-  stream?: Promise<WsEvents>
+  paginator: mastodon.Paginator<mastodon.v1.Notification[], mastodon.rest.v1.ListNotificationsParams>
+  stream?: mastodon.streaming.Subscription
 }>()
 
 const virtualScroller = false // TODO: fix flickering issue with virtual scroll
@@ -25,7 +25,7 @@ function includeNotificationsForStatusCard({ type, status }: mastodon.v1.Notific
 
 // Group by type (and status when applicable)
 function groupId(item: mastodon.v1.Notification): string {
-  // If the update is related to an status, group notifications from the same account (boost + favorite the same status)
+  // If the update is related to a status, group notifications from the same account (boost + favorite the same status)
   const id = item.status
     ? {
         status: item.status?.id,
@@ -171,11 +171,11 @@ const { formatNumber } = useHumanReadableNumber()
     :paginator="paginator"
     :preprocess="preprocess"
     :stream="stream"
-    :virtualScroller="virtualScroller"
     eventType="notification"
+    :virtualScroller="virtualScroller"
   >
     <template #updater="{ number, update }">
-      <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
+      <button id="elk_show_new_items" py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
         {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
       </button>
     </template>

components/notification/NotificationPreferences.client.vue

@@ -17,12 +17,12 @@ const { t } = useI18n()
 
 const pwaEnabled = useAppConfig().pwaEnabled
 
-let busy = $ref<boolean>(false)
-let animateSave = $ref<boolean>(false)
-let animateSubscription = $ref<boolean>(false)
-let animateRemoveSubscription = $ref<boolean>(false)
-let subscribeError = $ref<string>('')
-let showSubscribeError = $ref<boolean>(false)
+const busy = ref<boolean>(false)
+const animateSave = ref<boolean>(false)
+const animateSubscription = ref<boolean>(false)
+const animateRemoveSubscription = ref<boolean>(false)
+const subscribeError = ref<string>('')
+const showSubscribeError = ref<boolean>(false)
 
 function hideNotification() {
   const key = currentUser.value?.account?.acct
@@ -30,22 +30,22 @@ function hideNotification() {
     hiddenNotification.value[key] = true
 }
 
-const showWarning = $computed(() => {
+const showWarning = computed(() => {
   if (!pwaEnabled)
     return false
 
   return isSupported
-      && (!isSubscribed.value || !notificationPermission.value || notificationPermission.value === 'prompt')
-      && !(hiddenNotification.value[currentUser.value?.account?.acct ?? ''] === true)
+    && (!isSubscribed.value || !notificationPermission.value || notificationPermission.value === 'prompt')
+    && !(hiddenNotification.value[currentUser.value?.account?.acct ?? ''])
 })
 
 async function saveSettings() {
-  if (busy)
+  if (busy.value)
     return
 
-  busy = true
+  busy.value = true
   await nextTick()
-  animateSave = true
+  animateSave.value = true
 
   try {
     await updateSubscription()
@@ -55,48 +55,48 @@ async function saveSettings() {
     console.error(err)
   }
   finally {
-    busy = false
-    animateSave = false
+    busy.value = false
+    animateSave.value = false
   }
 }
 
 async function doSubscribe() {
-  if (busy)
+  if (busy.value)
     return
 
-  busy = true
+  busy.value = true
   await nextTick()
-  animateSubscription = true
+  animateSubscription.value = true
 
   try {
     const result = await subscribe()
     if (result !== 'subscribed') {
-      subscribeError = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
-      showSubscribeError = true
+      subscribeError.value = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
+      showSubscribeError.value = true
     }
   }
   catch (err) {
     if (err instanceof PushSubscriptionError) {
-      subscribeError = t(`settings.notifications.push_notifications.subscription_error.${err.code}`)
+      subscribeError.value = t(`settings.notifications.push_notifications.subscription_error.${err.code}`)
     }
     else {
       console.error(err)
-      subscribeError = t('settings.notifications.push_notifications.subscription_error.request_error')
+      subscribeError.value = t('settings.notifications.push_notifications.subscription_error.request_error')
     }
-    showSubscribeError = true
+    showSubscribeError.value = true
   }
   finally {
-    busy = false
-    animateSubscription = false
+    busy.value = false
+    animateSubscription.value = false
   }
 }
 async function removeSubscription() {
-  if (busy)
+  if (busy.value)
     return
 
-  busy = true
+  busy.value = true
   await nextTick()
-  animateRemoveSubscription = true
+  animateRemoveSubscription.value = true
   try {
     await unsubscribe()
   }
@@ -104,11 +104,11 @@ async function removeSubscription() {
     console.error(err)
   }
   finally {
-    busy = false
-    animateRemoveSubscription = false
+    busy.value = false
+    animateRemoveSubscription.value = false
   }
 }
-onActivated(() => (busy = false))
+onActivated(() => (busy.value = false))
 </script>
 
 <template>

components/publish/PublishAttachment.vue

@@ -20,9 +20,10 @@ const maxDescriptionLength = 1500
 
 const isEditDialogOpen = ref(false)
 const description = ref(props.attachment.description ?? '')
+
 function toggleApply() {
   isEditDialogOpen.value = false
-  emit('setDescription', unref(description))
+  emit('setDescription', description.value)
 }
 </script>
 

components/publish/PublishEditorTools.vue

@@ -8,7 +8,7 @@ const { editor } = defineProps<{
 
 <template>
   <CommonTooltip placement="top" :content="$t('tooltip.open_editor_tools')">
-    <VDropdown v-if="editor" placement="top">
+    <VDropdown v-if="editor" placement="bottom">
       <button
         btn-action-icon
         :aria-label="$t('tooltip.open_editor_tools')"

components/publish/PublishEmojiPicker.client.vue

@@ -9,16 +9,16 @@ const emit = defineEmits<{
 
 const { locale } = useI18n()
 
-const el = $ref<HTMLElement>()
-let picker = $ref<Picker>()
+const el = ref<HTMLElement>()
+const picker = ref<Picker>()
 const colorMode = useColorMode()
 
 async function openEmojiPicker() {
   await updateCustomEmojis()
 
-  if (picker) {
-    picker.update({
-      theme: colorMode.value,
+  if (picker.value) {
+    picker.value.update({
+      theme: colorMode,
       custom: customEmojisData.value,
     })
   }
@@ -29,7 +29,7 @@ async function openEmojiPicker() {
       importEmojiLang(locale.value.split('-')[0]),
     ])
 
-    picker = new Picker({
+    picker.value = new Picker({
       data: () => dataPromise,
       onEmojiSelect({ native, src, alt, name }: any) {
         native
@@ -37,19 +37,19 @@ async function openEmojiPicker() {
           : emit('selectCustom', { src, alt, 'data-emoji-id': name })
       },
       set: 'twitter',
-      theme: colorMode.value,
+      theme: colorMode,
       custom: customEmojisData.value,
       i18n,
     })
   }
   await nextTick()
   // TODO: custom picker
-  el?.appendChild(picker as any as HTMLElement)
+  el.value?.appendChild(picker.value as any as HTMLElement)
 }
 
 function hideEmojiPicker() {
-  if (picker)
-    el?.removeChild(picker as any as HTMLElement)
+  if (picker.value)
+    el.value?.removeChild(picker.value as any as HTMLElement)
 }
 </script>
 

components/publish/PublishLanguagePicker.vue

@@ -6,16 +6,16 @@ const modelValue = defineModel<string>({ required: true })
 const { t } = useI18n()
 const userSettings = useUserSettings()
 
-const languageKeyword = $ref('')
+const languageKeyword = ref('')
 
 const fuse = new Fuse(languagesNameList, {
   keys: ['code', 'nativeName', 'name'],
   shouldSort: true,
 })
 
-const languages = $computed(() =>
-  languageKeyword.trim()
-    ? fuse.search(languageKeyword).map(r => r.item)
+const languages = computed(() =>
+  languageKeyword.value.trim()
+    ? fuse.search(languageKeyword.value).map(r => r.item)
     : [...languagesNameList].filter(entry => !userSettings.value.disabledTranslationLanguages.includes(entry.code))
         .sort(({ code: a }, { code: b }) => {
           // Put English on the top

components/publish/PublishThreadTools.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const props = defineProps<{
+  draftKey: string
+  draftItemIndex: number
+}>()
+
+const { threadIsActive, addThreadItem, threadItems, removeThreadItem } = useThreadComposer(props.draftKey)
+
+const isRemovableItem = computed(() => threadIsActive.value && props.draftItemIndex < threadItems.value.length - 1)
+
+function addOrRemoveItem() {
+  if (isRemovableItem.value)
+    removeThreadItem(props.draftItemIndex)
+
+  else
+    addThreadItem()
+}
+
+const { t } = useI18n()
+
+const label = computed(() => {
+  if (!isRemovableItem.value && props.draftItemIndex === 0)
+    return t('tooltip.start_thread')
+
+  return isRemovableItem.value ? t('tooltip.remove_thread_item') : t('tooltip.add_thread_item')
+})
+</script>
+
+<template>
+  <div flex flex-row rounded-3 :class="{ 'bg-border': threadIsActive }">
+    <div
+      v-if="threadIsActive" dir="ltr" pointer-events-none pe-1 pt-2 pl-2 text-sm tabular-nums text-secondary flex
+      gap="0.5"
+    >
+      {{ draftItemIndex + 1 }}<span text-secondary-light>/</span><span text-secondary-light>{{ threadItems.length
+      }}</span>
+    </div>
+    <CommonTooltip placement="top" :content="label">
+      <button btn-action-icon :aria-label="label" @click="addOrRemoveItem">
+        <div v-if="isRemovableItem" i-ri:chat-delete-line />
+        <div v-else i-ri:chat-new-line />
+      </button>
+    </CommonTooltip>
+  </div>
+</template>

components/publish/PublishVisibilityPicker.vue

@@ -7,7 +7,7 @@ const modelValue = defineModel<string>({
   required: true,
 })
 
-const currentVisibility = $computed(() =>
+const currentVisibility = computed(() =>
   statusVisibilities.find(v => v.value === modelValue.value) || statusVisibilities[0],
 )
 

components/publish/PublishWidget.vue

@@ -2,17 +2,19 @@
 import { EditorContent } from '@tiptap/vue-3'
 import stringLength from 'string-length'
 import type { mastodon } from 'masto'
-import type { Draft } from '~/types'
+import type { DraftItem } from '~/types'
 
 const {
   draftKey,
-  initial = getDefaultDraft,
+  draftItemIndex,
   expanded = false,
   placeholder,
   dialogLabelledBy,
+  initial = getDefaultDraftItem,
 } = defineProps<{
-  draftKey?: string
-  initial?: () => Draft
+  draftKey: string
+  draftItemIndex: number
+  initial?: () => DraftItem
   placeholder?: string
   inReplyToId?: string
   inReplyToVisibility?: mastodon.v1.StatusVisibility
@@ -26,90 +28,108 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
-const draftState = useDraft(draftKey, initial)
-const { draft } = $(draftState)
+const { threadItems, threadIsActive, publishThread } = useThreadComposer(draftKey)
+
+const draft = computed({
+  get: () => threadItems.value[draftItemIndex],
+  set: (updatedDraft: DraftItem) => {
+    threadItems.value[draftItemIndex] = updatedDraft
+  },
+},
+)
+
+const isFinalItemOfThread = computed(() => draftItemIndex === threadItems.value.length - 1)
 
 const {
-  isExceedingAttachmentLimit, isUploading, failedAttachments, isOverDropZone,
-  uploadAttachments, pickAttachments, setDescription, removeAttachment,
+  isExceedingAttachmentLimit,
+  isUploading,
+  failedAttachments,
+  isOverDropZone,
+  uploadAttachments,
+  pickAttachments,
+  setDescription,
+  removeAttachment,
   dropZoneRef,
-} = $(useUploadMediaAttachment($$(draft)))
+} = useUploadMediaAttachment(draft)
 
-let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = $(usePublish(
+const { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = usePublish(
   {
-    draftState,
-    ...$$({ expanded, isUploading, initialDraft: initial }),
+    draftItem: draft,
+    ...{ expanded: toRef(() => expanded), isUploading, initialDraft: initial, isPartOfThread: false },
   },
-))
+)
 
 const { editor } = useTiptap({
   content: computed({
-    get: () => draft.params.status,
+    get: () => draft.value.params.status,
     set: (newVal) => {
-      draft.params.status = newVal
-      draft.lastUpdated = Date.now()
+      draft.value.params.status = newVal
+      draft.value.lastUpdated = Date.now()
     },
   }),
-  placeholder: computed(() => placeholder ?? draft.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
-  autofocus: shouldExpanded,
+  placeholder: computed(() => placeholder ?? draft.value.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
+  autofocus: shouldExpanded.value,
   onSubmit: publish,
   onFocus() {
-    if (!isExpanded && draft.initialText) {
-      editor.value?.chain().insertContent(`${draft.initialText} `).focus('end').run()
-      draft.initialText = ''
+    if (!isExpanded && draft.value.initialText) {
+      editor.value?.chain().insertContent(`${draft.value.initialText} `).focus('end').run()
+      draft.value.initialText = ''
     }
-    isExpanded = true
+    isExpanded.value = true
   },
   onPaste: handlePaste,
 })
 
 function trimPollOptions() {
-  const indexLastNonEmpty = draft.params.poll!.options.findLastIndex(option => option.trim().length > 0)
-  const trimmedOptions = draft.params.poll!.options.slice(0, indexLastNonEmpty + 1)
+  const indexLastNonEmpty = draft.value.params.poll!.options.findLastIndex(option => option.trim().length > 0)
+  const trimmedOptions = draft.value.params.poll!.options.slice(0, indexLastNonEmpty + 1)
 
   if (currentInstance.value?.configuration
-      && trimmedOptions.length >= currentInstance.value?.configuration?.polls.maxOptions)
-    draft.params.poll!.options = trimmedOptions
+    && trimmedOptions.length >= currentInstance.value?.configuration?.polls.maxOptions)
+    draft.value.params.poll!.options = trimmedOptions
   else
-    draft.params.poll!.options = [...trimmedOptions, '']
+    draft.value.params.poll!.options = [...trimmedOptions, '']
 }
 
 function editPollOptionDraft(event: Event, index: number) {
-  draft.params.poll!.options[index] = (event.target as HTMLInputElement).value
+  draft.value.params.poll!.options = Object.assign(draft.value.params.poll!.options.slice(), { [index]: (event.target as HTMLInputElement).value })
+
   trimPollOptions()
 }
 
 function deletePollOption(index: number) {
-  draft.params.poll!.options.splice(index, 1)
+  const newPollOptions = draft.value.params.poll!.options.slice()
+  newPollOptions.splice(index, 1)
+  draft.value.params.poll!.options = newPollOptions
   trimPollOptions()
 }
 
 const expiresInOptions = computed(() => [
   {
     seconds: 1 * 60 * 60,
-    label: isHydrated.value ? t('time_ago_options.hour_future', 1) : '',
+    label: t('time_ago_options.hour_future', 1),
   },
   {
     seconds: 2 * 60 * 60,
-    label: isHydrated.value ? t('time_ago_options.hour_future', 2) : '',
+    label: t('time_ago_options.hour_future', 2),
   },
   {
     seconds: 1 * 24 * 60 * 60,
-    label: isHydrated.value ? t('time_ago_options.day_future', 1) : '',
+    label: t('time_ago_options.day_future', 1),
   },
   {
     seconds: 2 * 24 * 60 * 60,
-    label: isHydrated.value ? t('time_ago_options.day_future', 2) : '',
+    label: t('time_ago_options.day_future', 2),
   },
   {
     seconds: 7 * 24 * 60 * 60,
-    label: isHydrated.value ? t('time_ago_options.day_future', 7) : '',
+    label: t('time_ago_options.day_future', 7),
   },
 ])
 
 const expiresInDefaultOptionIndex = 2
 
-const characterCount = $computed(() => {
+const characterCount = computed(() => {
   const text = htmlToText(editor.value?.getHTML() || '')
 
   let length = stringLength(text)
@@ -130,24 +150,26 @@ const characterCount = $computed(() => {
   for (const [fullMatch, before, _handle, username] of text.matchAll(countableMentionRegex))
     length -= fullMatch.length - (before + username).length - 1 // - 1 for the @
 
-  if (draft.mentions) {
-    // + 1 is needed as mentions always need a space seperator at the end
-    length += draft.mentions.map((mention) => {
+  if (draft.value.mentions) {
+    // + 1 is needed as mentions always need a space separator at the end
+    length += draft.value.mentions.map((mention) => {
       const [handle] = mention.split('@')
       return `@${handle}`
     }).join(' ').length + 1
   }
 
-  length += stringLength(publishSpoilerText)
+  length += stringLength(publishSpoilerText.value)
 
   return length
 })
 
-const isExceedingCharacterLimit = $computed(() => {
-  return characterCount > characterLimit.value
+const isExceedingCharacterLimit = computed(() => {
+  return characterCount.value > characterLimit.value
 })
 
-const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.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')
 
 async function handlePaste(evt: ClipboardEvent) {
   const files = evt.clipboardData?.files
@@ -166,13 +188,17 @@ function insertCustomEmoji(image: any) {
 }
 
 async function toggleSensitive() {
-  draft.params.sensitive = !draft.params.sensitive
+  draft.value.params.sensitive = !draft.value.params.sensitive
 }
 
 async function publish() {
-  const status = await publishDraft()
-  if (status)
-    emit('published', status)
+  const publishResult = await (threadIsActive.value ? publishThread() : publishDraft())
+  if (publishResult) {
+    if (Array.isArray(publishResult))
+      failedMessages.value = publishResult
+    else
+      emit('published', publishResult)
+  }
 }
 
 useWebShareTarget(async ({ data: { data, action } }: any) => {
@@ -204,10 +230,6 @@ function stopQuestionMarkPropagation(e: KeyboardEvent) {
   if (e.key === '?')
     e.stopImmediatePropagation()
 }
-
-onDeactivated(() => {
-  clearEmptyDrafts()
-})
 </script>
 
 <template>
@@ -217,282 +239,304 @@ onDeactivated(() => {
         {{ $t('state.editing') }}
       </div>
     </template>
-
     <div flex gap-3 flex-1>
-      <NuxtLink self-start :to="getAccountRoute(currentUser.account)">
-        <AccountBigAvatar :account="currentUser.account" square />
-      </NuxtLink>
-      <!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
-      <div
-        ref="dropZoneRef"
-        flex w-0 flex-col gap-3 flex-1
-        border="2 dashed transparent"
-        :class="[isSending ? 'pointer-events-none' : '', isOverDropZone ? '!border-primary' : '']"
-      >
-        <ContentMentionGroup v-if="draft.mentions?.length && shouldExpanded" replying>
-          <button v-for="m, i of draft.mentions" :key="m" text-primary hover:color-red @click="draft.mentions?.splice(i, 1)">
-            {{ accountToShortHandle(m) }}
-          </button>
-        </ContentMentionGroup>
-
-        <div v-if="draft.params.sensitive">
-          <input
-            v-model="publishSpoilerText"
-            type="text"
-            :placeholder="$t('placeholder.content_warning')"
-            p2 border-rounded w-full bg-transparent
-            outline-none border="~ base"
-          >
-        </div>
-
-        <CommonErrorMessage v-if="failedMessages.length > 0" described-by="publish-failed">
-          <header id="publish-failed" flex justify-between>
-            <div flex items-center gap-x-2 font-bold>
-              <div aria-hidden="true" i-ri:error-warning-fill />
-              <p>{{ $t('state.publish_failed') }}</p>
-            </div>
-            <CommonTooltip placement="bottom" :content="$t('action.clear_publish_failed')">
-              <button
-                flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('action.clear_publish_failed')"
-                @click="failedMessages = []"
-              >
-                <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
-              </button>
-            </CommonTooltip>
-          </header>
-          <ol ps-2 sm:ps-1>
-            <li v-for="(error, i) in failedMessages" :key="i" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
-              <strong>{{ i + 1 }}.</strong>
-              <span>{{ error }}</span>
-            </li>
-          </ol>
-        </CommonErrorMessage>
-
-        <div relative flex-1 flex flex-col>
-          <EditorContent
-            :editor="editor"
-            flex max-w-full
-            :class="shouldExpanded ? 'min-h-30 md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain' : ''"
-            @keydown="stopQuestionMarkPropagation"
-          />
-        </div>
-
-        <div v-if="isUploading" flex gap-1 items-center text-sm p1 text-primary>
-          <div animate-spin preserve-3d>
-            <div i-ri:loader-2-fill />
-          </div>
-          {{ $t('state.uploading') }}
-        </div>
-        <CommonErrorMessage
-          v-else-if="failedAttachments.length > 0"
-          :described-by="isExceedingAttachmentLimit ? 'upload-failed uploads-per-post' : 'upload-failed'"
-        >
-          <header id="upload-failed" flex justify-between>
-            <div flex items-center gap-x-2 font-bold>
-              <div aria-hidden="true" i-ri:error-warning-fill />
-              <p>{{ $t('state.upload_failed') }}</p>
-            </div>
-            <CommonTooltip placement="bottom" :content="$t('action.clear_upload_failed')">
-              <button
-                flex rounded-4 p1 hover:bg-active cursor-pointer transition-100
-                :aria-label="$t('action.clear_upload_failed')" @click="failedAttachments = []"
-              >
-                <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
-              </button>
-            </CommonTooltip>
-          </header>
-          <div v-if="isExceedingAttachmentLimit" id="uploads-per-post" ps-2 sm:ps-1 text-small>
-            {{ $t('state.attachments_exceed_server_limit') }}
-          </div>
-          <ol ps-2 sm:ps-1>
-            <li v-for="error in failedAttachments" :key="error[0]" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
-              <strong>{{ error[1] }}:</strong>
-              <span>{{ error[0] }}</span>
-            </li>
-          </ol>
-        </CommonErrorMessage>
-
-        <div v-if="draft.attachments.length" flex="~ col gap-2" overflow-auto>
-          <PublishAttachment
-            v-for="(att, idx) in draft.attachments" :key="att.id"
-            :attachment="att"
-            :dialog-labelled-by="dialogLabelledBy ?? (draft.editingStatus ? 'state-editing' : undefined)"
-            @remove="removeAttachment(idx)"
-            @set-description="setDescription(att, $event)"
-          />
+      <div>
+        <NuxtLink self-start :to="getAccountRoute(currentUser.account)">
+          <AccountBigAvatar :account="currentUser.account" square />
+        </NuxtLink>
+        <div v-if="!isFinalItemOfThread" w-full h-full flex mt--3px justify-center>
+          <div w-1px border="x base" mb-6 />
         </div>
       </div>
-    </div>
-    <div flex gap-4>
-      <div w-12 h-full sm:block hidden />
-      <div flex="~ col 1" max-w-full>
-        <form v-if="isExpanded && draft.params.poll" my-4 flex="~ 1 col" gap-3 m="s--1">
+
+      <div w-full>
+        <div flex gap-3 flex-1>
+          <!-- This `w-0` style is used to avoid overflow problems in flex layouts，so don't remove it unless you know what you're doing -->
           <div
-            v-for="(option, index) in draft.params.poll.options"
-            :key="index"
-            flex="~ row"
-            gap-3
+            ref="dropZoneRef" flex w-0 flex-col gap-3 flex-1 border="2 dashed transparent"
+            :class="[isSending ? 'pointer-events-none' : '', isOverDropZone ? '!border-primary' : '']"
           >
-            <input
-              :value="option"
-              bg-base
-              border="~ base" flex-1 h10 pe-4 rounded-2 w-full flex="~ row"
-              items-center relative focus-within:box-shadow-outline gap-3
-              px-4 py-2
-              :placeholder="$t('polls.option_placeholder', { current: index + 1, max: currentInstance?.configuration?.polls.maxOptions })"
-              class="option-input"
-              @input="editPollOptionDraft($event, index)"
-            >
-            <CommonTooltip placement="top" :content="$t('polls.remove_option')" class="delete-button">
+            <ContentMentionGroup v-if="draft.mentions?.length && shouldExpanded" replying>
               <button
-                btn-action-icon class="hover:bg-red/75"
-                :disabled="index === draft.params.poll!.options.length - 1 && (index + 1 !== currentInstance?.configuration?.polls.maxOptions || draft.params.poll!.options[index].length === 0)"
-                @click.prevent="deletePollOption(index)"
+                v-for="m, i of draft.mentions" :key="m" text-primary hover:color-red
+                @click="draft.mentions?.splice(i, 1)"
               >
-                <div i-ri:delete-bin-line />
+                {{ accountToShortHandle(m) }}
               </button>
-            </CommonTooltip>
-            <span
-              v-if="currentInstance?.configuration?.polls.maxCharactersPerOption"
-              class="char-limit-radial"
-              aspect-ratio-1
-              h-10
-              :style="{ background: `radial-gradient(closest-side, rgba(var(--rgb-bg-base)) 79%, transparent 80% 100%), conic-gradient(${draft.params.poll!.options[index].length / currentInstance?.configuration?.polls.maxCharactersPerOption > 1 ? 'var(--c-danger)' : 'var(--c-primary)'} ${draft.params.poll!.options[index].length / currentInstance?.configuration?.polls.maxCharactersPerOption * 100}%, var(--c-primary-fade) 0)` }"
-            >{{ draft.params.poll!.options[index].length }}</span>
+            </ContentMentionGroup>
+
+            <div v-if="draft.params.sensitive">
+              <input
+                v-model="publishSpoilerText" type="text" :placeholder="$t('placeholder.content_warning')" p2
+                border-rounded w-full bg-transparent outline-none border="~ base"
+              >
+            </div>
+
+            <CommonErrorMessage v-if="failedMessages.length > 0" described-by="publish-failed">
+              <header id="publish-failed" flex justify-between>
+                <div flex items-center gap-x-2 font-bold>
+                  <div aria-hidden="true" i-ri:error-warning-fill />
+                  <p>{{ $t('state.publish_failed') }}</p>
+                </div>
+                <CommonTooltip placement="bottom" :content="$t('action.clear_publish_failed')">
+                  <button
+                    flex rounded-4 p1 hover:bg-active cursor-pointer transition-100
+                    :aria-label="$t('action.clear_publish_failed')" @click="failedMessages = []"
+                  >
+                    <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
+                  </button>
+                </CommonTooltip>
+              </header>
+              <ol ps-2 sm:ps-1>
+                <li v-for="(error, i) in failedMessages" :key="i" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
+                  <strong>{{ i + 1 }}.</strong>
+                  <span>{{ error }}</span>
+                </li>
+              </ol>
+            </CommonErrorMessage>
+
+            <div relative flex-1 flex flex-col :class="shouldExpanded ? 'min-h-30' : ''">
+              <EditorContent
+                :editor="editor" flex max-w-full
+                :class="{
+                  'md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain': shouldExpanded,
+                  'py2 px3.5 bg-dm rounded-4 me--1 ms--1 mt--1': isDM,
+                }"
+                @keydown="stopQuestionMarkPropagation"
+                @keydown.esc.prevent="editor?.commands.blur()"
+              />
+            </div>
+
+            <div v-if="isUploading" flex gap-1 items-center text-sm p1 text-primary>
+              <div animate-spin preserve-3d>
+                <div i-ri:loader-2-fill />
+              </div>
+              {{ $t('state.uploading') }}
+            </div>
+            <CommonErrorMessage
+              v-else-if="failedAttachments.length > 0"
+              :described-by="isExceedingAttachmentLimit ? 'upload-failed uploads-per-post' : 'upload-failed'"
+            >
+              <header id="upload-failed" flex justify-between>
+                <div flex items-center gap-x-2 font-bold>
+                  <div aria-hidden="true" i-ri:error-warning-fill />
+                  <p>{{ $t('state.upload_failed') }}</p>
+                </div>
+                <CommonTooltip placement="bottom" :content="$t('action.clear_upload_failed')">
+                  <button
+                    flex rounded-4 p1 hover:bg-active cursor-pointer transition-100
+                    :aria-label="$t('action.clear_upload_failed')" @click="failedAttachments = []"
+                  >
+                    <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
+                  </button>
+                </CommonTooltip>
+              </header>
+              <div v-if="isExceedingAttachmentLimit" id="uploads-per-post" ps-2 sm:ps-1 text-small>
+                {{ $t('state.attachments_exceed_server_limit') }}
+              </div>
+              <ol ps-2 sm:ps-1>
+                <li v-for="error in failedAttachments" :key="error[0]" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
+                  <strong>{{ error[1] }}:</strong>
+                  <span>{{ error[0] }}</span>
+                </li>
+              </ol>
+            </CommonErrorMessage>
+
+            <div v-if="draft.attachments.length" flex="~ col gap-2" overflow-auto>
+              <PublishAttachment
+                v-for="(att, idx) in draft.attachments" :key="att.id" :attachment="att"
+                :dialog-labelled-by="dialogLabelledBy ?? (draft.editingStatus ? 'state-editing' : undefined)"
+                @remove="removeAttachment(idx)" @set-description="setDescription(att, $event)"
+              />
+            </div>
           </div>
-        </form>
-        <div
-          v-if="shouldExpanded" flex="~ gap-1 1 wrap" m="s--1" pt-2 justify="end" max-w-full
-          border="t base"
-        >
-          <PublishEmojiPicker
-            @select="insertEmoji"
-            @select-custom="insertCustomEmoji"
-          >
-            <button btn-action-icon :title="$t('tooltip.emojis')" :aria-label="$t('tooltip.add_emojis')">
-              <div i-ri:emotion-line />
-            </button>
-          </PublishEmojiPicker>
+        </div>
 
-          <CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')" no-auto-focus>
-            <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
-              <div i-ri:image-add-line />
-            </button>
-          </CommonTooltip>
-
-          <template v-if="draft.attachments.length === 0">
-            <CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')" no-auto-focus>
-              <button btn-action-icon :aria-label="$t('polls.create')" @click="draft.params.poll = { options: [''], expiresIn: expiresInOptions[expiresInDefaultOptionIndex].seconds }">
-                <div i-ri:chat-poll-line />
-              </button>
-            </CommonTooltip>
-            <div v-else rounded-full b-1 border-dark flex="~ row" gap-1>
-              <CommonTooltip placement="top" :content="$t('polls.cancel')" no-auto-focus>
-                <button btn-action-icon b-r border-dark :aria-label="$t('polls.cancel')" @click="draft.params.poll = undefined">
-                  <div i-ri:close-line />
+        <div flex="~ col 1" max-w-full>
+          <form v-if="isExpanded && draft.params.poll" my-4 flex="~ 1 col" gap-3 m="s--1">
+            <div v-for="(option, index) in draft.params.poll.options" :key="index" flex="~ row" gap-3>
+              <input
+                :value="option" bg-base border="~ base" flex-1 h10 pe-4 rounded-2 w-full flex="~ row" items-center
+                relative focus-within:box-shadow-outline gap-3 px-4 py-2
+                :placeholder="$t('polls.option_placeholder', { current: index + 1, max: currentInstance?.configuration?.polls.maxOptions })"
+                class="option-input" @input="editPollOptionDraft($event, index)"
+              >
+              <CommonTooltip placement="top" :content="$t('polls.remove_option')" class="delete-button">
+                <button
+                  btn-action-icon class="hover:bg-red/75"
+                  :disabled="index === draft.params.poll!.options.length - 1 && (index + 1 !== currentInstance?.configuration?.polls.maxOptions || draft.params.poll!.options[index].length === 0)"
+                  @click.prevent="deletePollOption(index)"
+                >
+                  <div i-ri:delete-bin-line />
                 </button>
               </CommonTooltip>
-              <CommonDropdown placement="top">
-                <CommonTooltip placement="top" :content="$t('polls.settings')" no-auto-focus>
-                  <button :aria-label="$t('polls.settings')" btn-action-icon w-12>
-                    <div i-ri:list-settings-line />
-                    <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
-                  </button>
-                </CommonTooltip>
-                <template #popper>
-                  <div flex="~ col" gap-1 p-2>
-                    <CommonCheckbox v-model="draft.params.poll.multiple" :label="draft.params.poll.multiple ? $t('polls.disallow_multiple') : $t('polls.allow_multiple')" px-2 gap-3 h-9 flex justify-center hover:bg-active rounded-full icon-checked="i-ri:checkbox-multiple-blank-line" icon-unchecked="i-ri:checkbox-blank-circle-line" />
-                    <CommonCheckbox v-model="draft.params.poll.hideTotals" :label="draft.params.poll.hideTotals ? $t('polls.show_votes') : $t('polls.hide_votes')" px-2 gap-3 h-9 flex justify-center hover:bg-active rounded-full icon-checked="i-ri:eye-close-line" icon-unchecked="i-ri:eye-line" />
-                  </div>
-                </template>
-              </CommonDropdown>
-              <CommonDropdown placement="bottom">
-                <CommonTooltip placement="top" :content="$t('polls.expiration')" no-auto-focus>
-                  <button :aria-label="$t('polls.expiration')" btn-action-icon w-12>
-                    <div i-ri:hourglass-line />
-                    <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
-                  </button>
-                </CommonTooltip>
-                <template #popper>
-                  <CommonDropdownItem
-                    v-for="expiresInOption in expiresInOptions"
-                    :key="expiresInOption.seconds"
-                    :text="expiresInOption.label"
-                    :checked="draft.params.poll!.expiresIn === expiresInOption.seconds"
-                    @click="draft.params.poll!.expiresIn = expiresInOption.seconds"
-                  />
-                </template>
-              </CommonDropdown>
+              <span
+                v-if="currentInstance?.configuration?.polls.maxCharactersPerOption" class="char-limit-radial"
+                aspect-ratio-1 h-10
+                :style="{ background: `radial-gradient(closest-side, rgba(var(--rgb-bg-base)) 79%, transparent 80% 100%), conic-gradient(${draft.params.poll!.options[index].length / currentInstance?.configuration?.polls.maxCharactersPerOption > 1 ? 'var(--c-danger)' : 'var(--c-primary)'} ${draft.params.poll!.options[index].length / currentInstance?.configuration?.polls.maxCharactersPerOption * 100}%, var(--c-primary-fade) 0)` }"
+              >{{
+                draft.params.poll!.options[index].length }}</span>
             </div>
-          </template>
-
-          <PublishEditorTools v-if="editor" :editor="editor" />
-
-          <div flex-auto />
-
-          <PublishCharacterCounter :max="characterLimit" :length="characterCount" />
-
-          <CommonTooltip placement="top" :content="$t('tooltip.change_language')" no-auto-focus>
-            <CommonDropdown placement="bottom" auto-boundary-max-size>
-              <button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
-                <span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
-                <div v-else i-ri:translate-2 />
-                <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
+          </form>
+          <div v-if="shouldExpanded" flex="~ gap-1 1 wrap" m="s--1" pt-2 justify="end" max-w-full border="t base">
+            <PublishEmojiPicker @select="insertEmoji" @select-custom="insertCustomEmoji">
+              <button btn-action-icon :title="$t('tooltip.emojis')" :aria-label="$t('tooltip.add_emojis')">
+                <div i-ri:emotion-line />
               </button>
+            </PublishEmojiPicker>
 
-              <template #popper>
-                <PublishLanguagePicker v-model="draft.params.language" min-w-80 />
-              </template>
-            </CommonDropdown>
-          </CommonTooltip>
-
-          <CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')" no-auto-focus>
-            <button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
-              <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
-              <div v-else i-ri:alarm-warning-line />
-            </button>
-          </CommonTooltip>
-
-          <PublishVisibilityPicker v-model="draft.params.visibility" :editing="!!draft.editingStatus">
-            <template #default="{ visibility }">
-              <button :disabled="!!draft.editingStatus" :aria-label="$t('tooltip.change_content_visibility')" btn-action-icon :class="{ 'w-12': !draft.editingStatus }">
-                <div :class="visibility.icon" />
-                <div v-if="!draft.editingStatus" i-ri:arrow-down-s-line text-sm text-secondary me--1 />
+            <CommonTooltip
+              v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')"
+            >
+              <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
+                <div i-ri:image-add-line />
               </button>
+            </CommonTooltip>
+
+            <template v-if="draft.attachments.length === 0">
+              <CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')">
+                <button
+                  btn-action-icon :aria-label="$t('polls.create')"
+                  @click="draft.params.poll = { options: [''], expiresIn: expiresInOptions[expiresInDefaultOptionIndex].seconds }"
+                >
+                  <div i-ri:chat-poll-line />
+                </button>
+              </CommonTooltip>
+              <div v-else rounded-full b-1 border-dark flex="~ row" gap-1>
+                <CommonTooltip placement="top" :content="$t('polls.cancel')">
+                  <button
+                    btn-action-icon b-r border-dark :aria-label="$t('polls.cancel')"
+                    @click="draft.params.poll = undefined"
+                  >
+                    <div i-ri:close-line />
+                  </button>
+                </CommonTooltip>
+                <CommonDropdown placement="top">
+                  <CommonTooltip placement="top" :content="$t('polls.settings')">
+                    <button :aria-label="$t('polls.settings')" btn-action-icon w-12>
+                      <div i-ri:list-settings-line />
+                      <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
+                    </button>
+                  </CommonTooltip>
+                  <template #popper>
+                    <div flex="~ col" gap-1 p-2>
+                      <CommonCheckbox
+                        v-model="draft.params.poll.multiple"
+                        :label="draft.params.poll.multiple ? $t('polls.disallow_multiple') : $t('polls.allow_multiple')"
+                        px-2 gap-3 h-9 flex justify-center hover:bg-active rounded-full
+                        icon-checked="i-ri:checkbox-multiple-blank-line"
+                        icon-unchecked="i-ri:checkbox-blank-circle-line"
+                      />
+                      <CommonCheckbox
+                        v-model="draft.params.poll.hideTotals"
+                        :label="draft.params.poll.hideTotals ? $t('polls.show_votes') : $t('polls.hide_votes')" px-2 gap-3
+                        h-9 flex justify-center hover:bg-active rounded-full icon-checked="i-ri:eye-close-line"
+                        icon-unchecked="i-ri:eye-line"
+                      />
+                    </div>
+                  </template>
+                </CommonDropdown>
+                <CommonDropdown placement="bottom">
+                  <CommonTooltip placement="top" :content="$t('polls.expiration')">
+                    <button :aria-label="$t('polls.expiration')" btn-action-icon w-12>
+                      <div i-ri:hourglass-line />
+                      <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
+                    </button>
+                  </CommonTooltip>
+                  <template #popper>
+                    <CommonDropdownItem
+                      v-for="expiresInOption in expiresInOptions" :key="expiresInOption.seconds"
+                      :text="expiresInOption.label" :checked="draft.params.poll!.expiresIn === expiresInOption.seconds"
+                      @click="draft.params.poll!.expiresIn = expiresInOption.seconds"
+                    />
+                  </template>
+                </CommonDropdown>
+              </div>
             </template>
-          </PublishVisibilityPicker>
 
-          <CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')" no-auto-focus>
-            <button
-              btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit aria-describedby="publish-failed-tooltip"
-            >
-              <span block>
-                <div block i-carbon:face-dizzy-filled />
-              </span>
-              <span>{{ $t('state.publish_failed') }}</span>
-            </button>
-          </CommonTooltip>
+            <PublishEditorTools v-if="editor" :editor="editor" />
 
-          <CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)" no-auto-focus>
-            <button
-              btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
-              md:w-fit
-              class="publish-button"
-              :aria-disabled="isPublishDisabled || isExceedingCharacterLimit"
-              aria-describedby="publish-tooltip"
-              @click="publish"
+            <div flex-auto />
+
+            <PublishCharacterCounter :max="characterLimit" :length="characterCount" />
+
+            <CommonTooltip placement="top" :content="$t('tooltip.change_language')">
+              <CommonDropdown placement="bottom" auto-boundary-max-size>
+                <button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
+                  <span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
+                  <div v-else i-ri:translate-2 />
+                  <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
+                </button>
+
+                <template #popper>
+                  <PublishLanguagePicker v-model="draft.params.language" min-w-80 />
+                </template>
+              </CommonDropdown>
+            </CommonTooltip>
+
+            <CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
+              <button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
+                <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
+                <div v-else i-ri:alarm-warning-line />
+              </button>
+            </CommonTooltip>
+
+            <PublishVisibilityPicker v-model="draft.params.visibility" :editing="!!draft.editingStatus">
+              <template #default="{ visibility }">
+                <button
+                  :disabled="!!draft.editingStatus" :aria-label="$t('tooltip.change_content_visibility')"
+                  btn-action-icon :class="{ 'w-12': !draft.editingStatus }"
+                >
+                  <div :class="visibility.icon" />
+                  <div v-if="!draft.editingStatus" i-ri:arrow-down-s-line text-sm text-secondary me--1 />
+                </button>
+              </template>
+            </PublishVisibilityPicker>
+
+            <PublishThreadTools :draft-item-index="draftItemIndex" :draft-key="draftKey" />
+
+            <CommonTooltip
+              v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top"
+              :content="$t('tooltip.publish_failed')"
             >
-              <span v-if="isSending" block animate-spin preserve-3d>
-                <div block i-ri:loader-2-fill />
-              </span>
-              <span v-if="failedMessages.length" block>
-                <div block i-carbon:face-dizzy-filled />
-              </span>
-              <span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>
-              <span v-else-if="draft.params.inReplyToId">{{ $t('action.reply') }}</span>
-              <span v-else>{{ !isSending ? $t('action.publish') : $t('state.publishing') }}</span>
-            </button>
-          </CommonTooltip>
+              <button
+                btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit
+                aria-describedby="publish-failed-tooltip"
+              >
+                <span block>
+                  <div block i-carbon:face-dizzy-filled />
+                </span>
+                <span>{{ $t('state.publish_failed') }}</span>
+              </button>
+            </CommonTooltip>
+
+            <CommonTooltip
+              v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')"
+              :disabled="!(isPublishDisabled || isExceedingCharacterLimit)"
+            >
+              <button
+                v-if="!threadIsActive || isFinalItemOfThread"
+                btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit class="publish-button"
+                :aria-disabled="isPublishDisabled || isExceedingCharacterLimit" aria-describedby="publish-tooltip"
+                @click="publish"
+              >
+                <span v-if="isSending" block animate-spin preserve-3d>
+                  <div block i-ri:loader-2-fill />
+                </span>
+                <span v-if="failedMessages.length" block>
+                  <div block i-carbon:face-dizzy-filled />
+                </span>
+                <template v-if="threadIsActive">
+                  <span>{{ $t('action.publish_thread') }} </span>
+                </template>
+                <template v-else>
+                  <span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>
+                  <span v-else-if="draft.params.inReplyToId">{{ $t('action.reply') }}</span>
+                  <span v-else>{{ !isSending ? $t('action.publish') : $t('state.publishing') }}</span>
+                </template>
+              </button>
+            </CommonTooltip>
+          </div>
         </div>
       </div>
     </div>
@@ -500,27 +544,29 @@ onDeactivated(() => {
 </template>
 
 <style scoped>
-  .publish-button[aria-disabled=true] {
-    cursor: not-allowed;
-    background-color: var(--c-bg-btn-disabled);
-    color: var(--c-text-btn-disabled);
-  }
-  .publish-button[aria-disabled=true]:hover {
-    background-color: var(--c-bg-btn-disabled);
-    color: var(--c-text-btn-disabled);
-  }
-  .option-input:focus + .delete-button {
-    display: none;
-  }
+.publish-button[aria-disabled=true] {
+  cursor: not-allowed;
+  background-color: var(--c-bg-btn-disabled);
+  color: var(--c-text-btn-disabled);
+}
 
-  .option-input:not(:focus) + .delete-button + .char-limit-radial {
-    display: none;
-  }
+.publish-button[aria-disabled=true]:hover {
+  background-color: var(--c-bg-btn-disabled);
+  color: var(--c-text-btn-disabled);
+}
 
-  .char-limit-radial {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-  }
+.option-input:focus+.delete-button {
+  display: none;
+}
+
+.option-input:not(:focus)+.delete-button+.char-limit-radial {
+  display: none;
+}
+
+.char-limit-radial {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+}
 </style>

components/publish/PublishWidgetFull.client.vue

@@ -1,54 +1,59 @@
 <script setup lang="ts">
 import { formatTimeAgo } from '@vueuse/core'
+import type { DraftItem } from '~/types'
 
 const route = useRoute()
 const { formatNumber } = useHumanReadableNumber()
 const timeAgoOptions = useTimeAgoOptions()
 
-let draftKey = $ref('home')
+const draftKey = ref('home')
 
-const draftKeys = $computed(() => Object.keys(currentUserDrafts.value))
-const nonEmptyDrafts = $computed(() => draftKeys
-  .filter(i => i !== draftKey && !isEmptyDraft(currentUserDrafts.value[i]))
+const draftKeys = computed(() => Object.keys(currentUserDrafts.value))
+const nonEmptyDrafts = computed(() => draftKeys.value
+  .filter(i => i !== draftKey.value && !isEmptyDraft(currentUserDrafts.value[i]))
   .map(i => [i, currentUserDrafts.value[i]] as const),
 )
 
 watchEffect(() => {
-  draftKey = route.query.draft?.toString() || 'home'
+  draftKey.value = route.query.draft?.toString() || 'home'
 })
 
 onDeactivated(() => {
   clearEmptyDrafts()
 })
+
+function firstDraftItemOf(drafts: DraftItem | Array<DraftItem>): DraftItem {
+  if (Array.isArray(drafts))
+    return drafts[0]
+  return drafts
+}
 </script>
 
 <template>
-  <div flex="~ col" pt-6 h-screen>
+  <div flex="~ col" pb-6>
     <div inline-flex justify-end h-8>
       <VDropdown v-if="nonEmptyDrafts.length" placement="bottom-end">
         <button btn-text flex="inline center">
-          {{ $t('compose.drafts', nonEmptyDrafts.length, { named: { v: formatNumber(nonEmptyDrafts.length) } }) }}&#160;<div aria-hidden="true" i-ri:arrow-down-s-line />
+          {{ $t('compose.drafts', nonEmptyDrafts.length, { named: { v: formatNumber(nonEmptyDrafts.length) } }) }}&#160;
+          <div aria-hidden="true" i-ri:arrow-down-s-line />
         </button>
         <template #popper="{ hide }">
           <div flex="~ col">
             <NuxtLink
-              v-for="[key, draft] of nonEmptyDrafts" :key="key"
-              border="b base" text-left py2 px4 hover:bg-active
-              :replace="true"
-              :to="`/compose?draft=${encodeURIComponent(key)}`"
-              @click="hide()"
+              v-for="[key, drafts] of nonEmptyDrafts" :key="key" border="b base" text-left py2 px4
+              hover:bg-active :replace="true" :to="`/compose?draft=${encodeURIComponent(key)}`" @click="hide()"
             >
               <div>
                 <div flex="~ gap-1" items-center>
                   <i18n-t keypath="compose.draft_title">
                     <code>{{ key }}</code>
                   </i18n-t>
-                  <span v-if="draft.lastUpdated" text-secondary text-sm>
-                    &middot; {{ formatTimeAgo(new Date(draft.lastUpdated), timeAgoOptions) }}
+                  <span v-if="firstDraftItemOf(drafts).lastUpdated" text-secondary text-sm>
+                    &middot; {{ formatTimeAgo(new Date(firstDraftItemOf(drafts).lastUpdated), timeAgoOptions) }}
                   </span>
                 </div>
                 <div text-secondary>
-                  {{ htmlToText(draft.params.status).slice(0, 50) }}
+                  {{ htmlToText(firstDraftItemOf(drafts).params.status).slice(0, 50) }}
                 </div>
               </div>
             </NuxtLink>
@@ -57,7 +62,7 @@ onDeactivated(() => {
       </VDropdown>
     </div>
     <div>
-      <PublishWidget :key="draftKey" expanded class="min-h-100!" :draft-key="draftKey" />
+      <PublishWidgetList expanded class="min-h-100!" :draft-key="draftKey" />
     </div>
   </div>
 </template>

components/publish/PublishWidgetList.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+import type { DraftItem } from '~/types'
+
+const {
+  draftKey,
+  initial = getDefaultDraftItem,
+  expanded = false,
+  placeholder,
+  dialogLabelledBy,
+  inReplyToId,
+  inReplyToVisibility,
+} = defineProps<{
+  draftKey: string
+  initial?: () => DraftItem
+  placeholder?: string
+  inReplyToId?: string
+  inReplyToVisibility?: mastodon.v1.StatusVisibility
+  expanded?: boolean
+  dialogLabelledBy?: string
+}>()
+
+const threadItems = computed(() =>
+  useThreadComposer(draftKey, initial).threadItems.value,
+)
+
+onDeactivated(() => {
+  clearEmptyDrafts()
+})
+
+function isFirstItem(index: number) {
+  return index === 0
+}
+</script>
+
+<template>
+  <template v-if="isHydrated && currentUser">
+    <PublishWidget
+      v-for="(_, index) in threadItems" :key="`${draftKey}-${index}`"
+      :draft-key="draftKey"
+      :draft-item-index="index"
+      :expanded="isFirstItem(index) ? expanded : true"
+      :placeholder="placeholder"
+      :dialog-labelled-by="dialogLabelledBy"
+      :in-reply-to-id="isFirstItem(index) ? inReplyToId : undefined"
+      :in-reply-to-visibility="inReplyToVisibility"
+    />
+  </template>
+</template>

components/pwa/PwaBadge.client.vue

@@ -1,9 +1,9 @@
 <template>
   <button
-    v-if="$pwa?.needRefresh"
+    v-if="useNuxtApp().$pwa?.needRefresh"
     bg="primary-fade" relative rounded
     flex="~ gap-1 center" px3 py1 text-primary
-    @click="$pwa.updateServiceWorker()"
+    @click="useNuxtApp().$pwa?.updateServiceWorker()"
   >
     <div i-ri-download-cloud-2-line />
     <h2 flex="~ gap-2" items-center>

components/pwa/PwaInstallPrompt.client.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="$pwa?.showInstallPrompt && !$pwa?.needRefresh"
+    v-if="useNuxtApp().$pwa?.showInstallPrompt && !useNuxtApp().$pwa?.needRefresh"
     m-2 p5 bg="primary-fade" relative
     rounded-lg of-hidden
     flex="~ col gap-3"
@@ -10,10 +10,10 @@
       {{ $t('pwa.install_title') }}
     </h2>
     <div flex="~ gap-1">
-      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="$pwa.install()">
+      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.install()">
         {{ $t('pwa.install') }}
       </button>
-      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.cancelInstall()">
+      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.cancelInstall()">
         {{ $t('pwa.dismiss') }}
       </button>
     </div>

components/pwa/PwaPrompt.client.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="$pwa?.needRefresh"
+    v-if="useNuxtApp().$pwa?.needRefresh"
     m-2 p5 bg="primary-fade" relative
     rounded-lg of-hidden
     flex="~ col gap-3"
@@ -9,10 +9,10 @@
       {{ $t('pwa.title') }}
     </h2>
     <div flex="~ gap-1">
-      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="$pwa.updateServiceWorker()">
+      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.updateServiceWorker()">
         {{ $t('pwa.update') }}
       </button>
-      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.close()">
+      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.close()">
         {{ $t('pwa.dismiss') }}
       </button>
     </div>

components/report/ReportModal.vue

@@ -34,11 +34,11 @@ function categoryChosen() {
 async function loadStatuses() {
   if (status) {
     // Load the 5 statuses before and after the reported status
-    const prevStatuses = await client.value.v1.accounts.listStatuses(account.id, {
+    const prevStatuses = await client.value.v1.accounts.$select(account.id).statuses.list({
       maxId: status.id,
       limit: 5,
     })
-    const nextStatuses = await client.value.v1.accounts.listStatuses(account.id, {
+    const nextStatuses = await client.value.v1.accounts.$select(account.id).statuses.list({
       minId: status.id,
       limit: 5,
     })
@@ -48,7 +48,7 @@ async function loadStatuses() {
   else {
     // Reporting an account directly
     // Load the 10 most recent statuses
-    const mostRecentStatuses = await client.value.v1.accounts.listStatuses(account.id, {
+    const mostRecentStatuses = await client.value.v1.accounts.$select(account.id).statuses.list({
       limit: 10,
     })
     availableStatuses.value = mostRecentStatuses
@@ -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/search/SearchHashtagInfo.vue

@@ -5,7 +5,7 @@ const { hashtag } = defineProps<{
   hashtag: mastodon.v1.Tag
 }>()
 
-const totalTrend = $computed(() =>
+const totalTrend = computed(() =>
   hashtag.history?.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
 )
 </script>

components/search/SearchWidget.vue

@@ -77,11 +77,12 @@ function activate() {
         ps-3
         pe-1
         ml-1
-        :placeholder="isHydrated ? t('nav.search') : ''"
+        :placeholder="t('nav.search')"
         pb="1px"
         placeholder-text-secondary
         @keydown.down.prevent="shift(1)"
         @keydown.up.prevent="shift(-1)"
+        @keydown.esc.prevent="input?.blur()"
         @keypress.enter="activate"
       >
       <button v-if="query.length" btn-action-icon text-secondary @click="query = ''; input?.focus()">

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/SettingsItem.vue

@@ -10,20 +10,22 @@ const props = defineProps<{
   external?: true
   large?: true
   match?: boolean
+  target?: string
 }>()
 
 const router = useRouter()
+const scrollOnClick = computed(() => props.to && !(props.target === '_blank' || props.external))
 
 useCommand({
   scope: 'Settings',
 
   name: () => props.text
-    ?? (props.to
-      ? typeof props.to === 'string'
-        ? props.to
-        : props.to.name
-      : ''
-    ),
+  ?? (props.to
+    ? typeof props.to === 'string'
+      ? props.to
+      : props.to.name
+    : ''
+  ),
   description: () => props.description,
   icon: () => props.icon || '',
   visible: () => props.command && props.to,
@@ -39,14 +41,15 @@ useCommand({
     :disabled="disabled"
     :to="to"
     :external="external"
+    :target="target"
     exact-active-class="text-primary"
     :class="disabled ? 'op25 pointer-events-none ' : match ? 'text-primary' : ''"
     block w-full group focus:outline-none
     :tabindex="disabled ? -1 : null"
-    @click="to ? $scrollToTop() : undefined"
+    @click="scrollOnClick ? $scrollToTop() : undefined"
   >
     <div
-      w-full flex w-fit px5 py3 md:gap2 gap4 items-center
+      w-full flex px5 py3 md:gap2 gap4 items-center
       transition-250 group-hover:bg-active
       group-focus-visible:ring="2 current"
     >

components/settings/SettingsLanguage.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { ComputedRef } from 'vue'
-import type { LocaleObject } from '#i18n'
+import type { LocaleObject } from '@nuxtjs/i18n'
 
 const userSettings = useUserSettings()
 

components/settings/SettingsProfileMetadata.vue

@@ -2,17 +2,16 @@
 import type { mastodon } from 'masto'
 
 const form = defineModel<{
-  fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']>
+  fieldsAttributes: NonNullable<mastodon.rest.v1.UpdateCredentialsParams['fieldsAttributes']>
 }>({ required: true })
-const dropdown = $ref<any>()
+const dropdown = ref<any>()
 
 const fieldIcons = computed(() =>
   Array.from({ length: maxAccountFieldCount.value }, (_, i) =>
-    getAccountFieldIcon(form.value.fieldsAttributes[i].name),
-  ),
+    getAccountFieldIcon(form.value.fieldsAttributes[i].name)),
 )
 
-const fieldCount = $computed(() => {
+const fieldCount = computed(() => {
   // find last non-empty field
   const idx = [...form.value.fieldsAttributes].reverse().findIndex(f => f.name || f.value)
   if (idx === -1)
@@ -25,7 +24,7 @@ const fieldCount = $computed(() => {
 
 function chooseIcon(i: number, text: string) {
   form.value.fieldsAttributes[i].name = text
-  dropdown[i]?.hide()
+  dropdown.value[i]?.hide()
 }
 </script>