chore: update nuxt-docus

.dockerignore

@@ -11,6 +11,7 @@ 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' | 'vercel' | 'fs'
+# 'cloudflare' | 'fs'
 NUXT_STORAGE_DRIVER=
 NUXT_STORAGE_FS_BASE=
 

.eslintignore

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

.eslintrc

@@ -0,0 +1,18 @@
+{
+  "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."
+    }]
+  }
+}

.gitattributes

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

.github/renovate.json5

@@ -3,14 +3,6 @@
   "extends": ["config:base", "schedule:weekly", "group:allNonMajor"],
   "labels": ["c: dependencies"],
   "rangeStrategy": "bump",
-  "ignoreDeps": [
-    "vue",
-    "vue-tsc",
-    "typescript",
-
-    // Intl.Segmenter is not supported in Firefox
-    "string-length"
-  ],
   "packageRules": [
     {
       "groupName": "devDependencies",
@@ -64,10 +56,6 @@
     {
       "groupName": "typescript",
       "matchPackageNames": ["typescript"]
-    },
-    {
-      "matchDatasources": ["node-version"],
-      "enabled": false
     }
   ],
   "vulnerabilityAlerts": {

.github/workflows/ci.yml

@@ -10,18 +10,17 @@ on:
     branches:
       - main
   workflow_dispatch: {}
-  merge_group: {}
 
 jobs:
   ci:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v3
       - run: corepack enable
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 18
           cache: pnpm
 
       - name: 📦 Install dependencies
@@ -31,8 +30,7 @@ jobs:
         run: pnpm nuxi prepare
 
       - name: 🧪 Test project
-        run: pnpm test:ci
+        run: pnpm test
-        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@v4
+        uses: actions/checkout@v3
       - name: Docker meta
         id: metal
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v4
         with:
           images: |
-            ghcr.io/${{ github.repository }}
+            ghcr.io/elk-zone/elk
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v2
       - name: Login to GitHub Container Registry
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@v3
+        uses: docker/login-action@v2
         with:
           registry: ghcr.io
-          username: ${{ github.actor }}
+          username: ${{ github.repository_owner }}
-          password: ${{ github.token }}
+          password: ${{ secrets.GITHUB_TOKEN }}
       - name: Build and push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v3
         with:
           context: .
-          platforms: linux/amd64,linux/arm64
+          platforms: linux/amd64
           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@v4
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
       - name: Set node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v3
         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.4.0
+        uses: amannn/action-semantic-pull-request@v5.0.2
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

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

.npmrc

@@ -1,3 +1,4 @@
 shamefully-hoist=true
+strict-peer-dependencies=false
 shell-emulator=true
 ignore-workspace-root-check=true

.nvmrc

@@ -1 +1 @@
-20
+v18

.vscode/settings.json

@@ -5,6 +5,10 @@
     "unmute",
     "unstorage"
   ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "editor.formatOnSave": false,
   "files.associations": {
     "*.css": "postcss"
   },
@@ -18,45 +22,8 @@
   ],
   "i18n-ally.preferredDelimiter": "_",
   "i18n-ally.sortKeys": true,
-  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.sourceLanguage": "en-US",
-
-  // Enable the ESlint flat config support
-  "eslint.experimental.useFlatConfig": true,
-
-  // Disable the default formatter, use eslint instead
   "prettier.enable": false,
-  "editor.formatOnSave": false,
+  "volar.completion.preferredTagNameCase": "pascal",
-
+  "volar.completion.preferredAttrNameCase": "kebab"
-  // 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"
-  ]
 }

.woodpecker.yml

@@ -1,22 +0,0 @@
-steps:
-  - name: build docker
-    image: docker:25-cli
-    secrets: [user, pass]
-    commands:
-      - apk add git
-      - REPO=$(echo "$CI_REPO" | tr '[:upper:]' '[:lower:]')
-      - REGISTRY="dev.cat-enby.club"
-      - MAJOR=$(echo ${CI_COMMIT_TAG} | cut -d '.' -f 1 | tr -d 'v')
-      - MINOR=$(echo ${CI_COMMIT_TAG} | cut -d '.' -f 2)
-      - PATCH=$(echo ${CI_COMMIT_TAG} | cut -d '.' -f 3 | cut -d '-' -f 1)
-      - docker buildx build -t $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR:-0}.$${PATCH-0} -t $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR} -t $${REGISTRY}/$$REPO:v$${MAJOR:-0} -t $${REGISTRY}/$$REPO:latest .
-      - docker login --username $USER --password $PASS $${REGISTRY}
-      - docker push $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR:-0}.$${PATCH-0}
-      - docker push $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR}
-      - docker push $${REGISTRY}/$${REPO}:v$${MAJOR:-0}
-      - docker push $${REGISTRY}/$${REPO}:latest
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-    when:
-      - repo: nikurasu:elk-test-ci
-      - event: tag

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing Guide
 
-Hi! We are excited that you are interested in contributing to Elk. Before submitting your contribution, please make sure to take a moment and read through the following guide.
+Hi! We are really excited that you are interested in contributing to Elk. Before submitting your contribution, please make sure to take a moment and read through the following guide.
 
 Refer also to https://github.com/antfu/contribute.
 
@@ -21,6 +21,7 @@ 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:
@@ -53,16 +54,16 @@ nr test
 
 In order to run Elk with PWA enabled, run `pnpm dev:pwa` in Elk's root folder to start dev server or `pnpm dev:mocked:pwa` to start dev server with `@elkdev@universeodon.com` user.
 
-You should test the Elk PWA application on private browsing mode on any Chromium-based browser: will not work on Firefox and Safari.
+You should test the Elk PWA application on private browsing mode on any Chromium based browser: will not work on Firefox and Safari.
 
 If not using private browsing mode, you will need to uninstall the PWA application from your browser once you finish testing:
 - Open `Dev Tools` (`Option + ⌘ + J` on macOS, `Shift + CTRL + J` on Windows/Linux)
-- Go to `Application > Storage`, you should check the following checkboxes:
+- Go to `Application > Storage`, you should check following checkboxes:
     - Application: [x] Unregister service worker
     - Storage: [x] IndexedDB and [x] Local and session storage
     - Cache: [x] Cache storage and [x] Application cache
 - Click on `Clear site data` button
-- Go to `Application > Service Workers` and check if the current `service worker` is missing or has the state `deleted` or `redundant`
+- Go to `Application > Service Workers` and check the current `service worker` is missing or has the state `deleted` or `redundant`
 
 ## CI errors
 
@@ -81,18 +82,18 @@ Elk supports `right-to-left` languages, we need to make sure that the UI is work
 Simple approach used by most websites of relying on direction set in HTML element does not work because direction for various items, such as timeline, does not always match direction set in HTML.
 
 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 `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`. Same rules applies for 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 to 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 from rule above. For icons inside 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 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`.
+- If you need to change 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`.
 
 ## Internationalization
 
 We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://v8.i18n.nuxtjs.org/) to handle internationalization.
 
-You can check the current [translation status](https://docs.elk.zone/docs/guide/contributing#translation-status): more instructions on the table caption.
+You can check current [translation status](https://docs.elk.zone/docs/guide/contributing#translation-status): more instructions on table caption.
 
 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`
@@ -102,9 +103,9 @@ If you are updating a translation in your local environment, you can run the fol
 ### Adding a new language
 
 1. Add a new file in [locales](./locales) folder with the language code as the filename.
-2. Copy [en](./locales/en.json) and translate the strings.
+2. Copy [en-US](./locales/en-US.json) and translate the strings.
 3. Add the language to the `locales` array in [config/i18n.ts](./config/i18n.ts#L61), below `en` and `ar`:
-   - If your language has multiple country variants, add the generic one for language only (only if there are a lot of common entries, you can always add it as a new one)
+   - If your language have multiple country variants, add the generic one for language only (only if there are a lot of common entries, you can always add it as a new one)
       - Add all country variants in [country variants object](./config/i18n.ts#L12)
       - Add all country variants files with empty `messages` object: `{}`
       - Translate the strings in the generic language file
@@ -119,7 +120,7 @@ Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essential
 
 ### Messages interpolation
 
-Most of the messages used in Elk do not require any interpolation, however, some messages require interpolation: check [Message Format Syntax](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) for more info.
+Most of the messages used in Elk do not require any interpolation, however, there are some messages that require interpolation: check [Message Format Syntax](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) for more info.
 
 We're using these types of interpolation:
 - [List interpolation](https://vue-i18n.intlify.dev/guide/essentials/syntax.html#list-interpolation)
@@ -141,7 +142,7 @@ Check [Custom Plural Number Formatting Entries](#custom-plural-number-formatting
 
 When using plural number formatting, we'll have always `{n}` available in the message, for example, `You have {n} new notifications|You have {n} new notification|You have {n} new notifications` or `You have no new notifications|You have 1 new notification|You have {n} new notifications`.
 
-We've included `v` named parameter, it will be used to pass the formatted number using [Intl.NumberFormat::format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format): will be the number with separators symbols. The exception to the previous rule is when we're using `plural` **with** `i18n-t` component, in this case, we'll need to use `{0}` instead `{v}` to access the number.
+We've included `v` named parameter, it will be used to pass the formatted number using [Intl.NumberFormat::format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format): will be the number with separators symbols. The exception to previous rule is when we're using `plural` **with** `i18n-t` component, in this case, we'll need to use `{0}` instead `{v}` to access the number.
 
 Additionally, Elk will use [compact notation for numbers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#parameters) for some entries, check `notation` and `compactDisplay` options: for example, `1K` for `1000`, `1M` for `1000000`, `1B` for `1000000000` and so on. That entry will be available in the message using `{v}` named parameter (or `{0}` if using the message **with** `i18n-t` component).
 

Dockerfile

@@ -14,7 +14,6 @@ RUN apk add git --no-cache
 
 # Prepare build deps ( ignore postinstall scripts for now )
 COPY package.json ./
-COPY .npmrc ./
 COPY pnpm-lock.yaml ./
 COPY patches ./patches
 RUN pnpm i --frozen-lockfile --ignore-scripts
@@ -35,8 +34,8 @@ ARG GID=911
 
 # Create a dedicated user and group
 RUN set -eux; \
-    addgroup -g $GID elk; \
+    addgroup -g $UID elk; \
-    adduser -u $UID -D -G elk elk;
+    adduser -u $GID -D -G elk elk;
 
 USER elk
 

README.md

@@ -37,36 +37,17 @@ The Elk team maintains a deployment at:
 - 🦌 Production: [elk.zone](https://elk.zone)
 - 🐙 Canary: [main.elk.zone](https://main.elk.zone) (deploys on every commit to `main` branch)
 
-### 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.
-
-1. checkout source ```git clone https://github.com/elk-zone/elk.git```
-1. got into new source dir: ```cd elk```
-1. build Docker image: ```docker build .```
-1. create local storage directory for settings: ```mkdir elk-storage```
-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.
-
 ### Ecosystem
 
 These are known deployments using Elk as an alternative Web client for Mastodon servers or as a base for other projects in the fediverse:
 
-- [elk.fedified.com](https://elk.fedified.com) - Use Elk to log into any compatible instance
-- [elk.me.uk](https://elk.me.uk) - Use Elk to log into any compatible instance, hosted on Google Cloud Run with no Cloudflare proxy
 - [elk.h4.io](https://elk.h4.io) - Use Elk for the `h4.io` Server
 - [elk.universeodon.com](https://elk.universeodon.com) - Use Elk for the Universeodon Server
 - [elk.vmst.io](https://elk.vmst.io) - Use Elk for the `vmst.io` Server
 - [elk.hostux.social](https://elk.hostux.social) - Use Elk for the `hostux.social` Server
+- [elk.freelancers.online](https://elk.freelancers.online) - Use Elk for the `freelancers.online` Server
 - [elk.cupoftea.social](https://elk.cupoftea.social) - Use Elk for the `cupoftea.social` Server
 - [elk.aus.social](https://elk.aus.social) - Use Elk for the `aus.social` Server
-- [elk.mstdn.ca](https://elk.mstdn.ca) - Use Elk for the `mstdn.ca` Server
-- [elk.mastodonapp.uk](https://elk.mastodonapp.uk) - Use Elk for the `mastodonapp.uk` Server
-- [elk.bolha.us](https://elk.bolha.us) - Use Elk for the `bolha.us` Server
 
 > **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them.
 
@@ -138,7 +119,7 @@ nr test
 
 ## 📲 PWA
 
-You can consult the [PWA documentation](https://docs.elk.zone/pwa) to learn more about the PWA capabilities on Elk, how to install Elk PWA in your desktop or mobile device and some hints about PWA stuff on Elk.
+You can consult the [PWA documentation](https://docs.elk.zone/docs/pwa) to learn more about the PWA capabilities on Elk, how to install Elk PWA in your desktop or mobile device and some hints about PWA stuff on Elk.
 
 ## 🦄 Stack
 
@@ -151,7 +132,7 @@ 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.style/) - A beautiful yet powerful syntax highlighter
+- [shiki](https://shiki.matsu.io/) - A beautiful 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

app.vue

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

components/account/AccountAvatar.vue

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

components/account/AccountBigCard.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
 import type { mastodon } from 'masto'
 
-defineOptions({
+const { account, as = 'div' } = $defineProps<{
-  inheritAttrs: false,
-})
-
-const { account, as = 'div' } = defineProps<{
   account: mastodon.v1.Account
   as?: string
 }>()
 
 cacheAccount(account)
+
+defineOptions({
+  inheritAttrs: false,
+})
 </script>
 
 <template>

components/account/AccountCard.vue

@@ -19,10 +19,8 @@ cacheAccount(account)
       overflow-hidden
       :to="getAccountRoute(account)"
     />
-    <slot>
+    <div h-full p1 shrink-0>
-      <div h-full p1 shrink-0>
+      <AccountFollowButton :account="account" :context="relationshipContext" />
-        <AccountFollowButton :account="account" :context="relationshipContext" />
+    </div>
-      </div>
-    </slot>
   </div>
 </template>

components/account/AccountFollowButton.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
-import { toggleFollowAccount, useRelationship } from '~~/composables/masto/relationship'
 
 const { account, command, context, ...props } = defineProps<{
   account: mastodon.v1.Account
@@ -10,36 +9,55 @@ const { account, command, context, ...props } = defineProps<{
 }>()
 
 const { t } = useI18n()
-const isSelf = useSelfAccount(() => account)
+const isSelf = $(useSelfAccount(() => account))
-const enable = computed(() => !isSelf.value && currentUser.value)
+const enable = $computed(() => !isSelf && currentUser.value)
-const relationship = computed(() => props.relationship || useRelationship(account).value)
+const relationship = $computed(() => props.relationship || useRelationship(account).value)
-const isLoading = computed(() => relationship.value === undefined)
 
-const { client } = useMasto()
+const { client } = $(useMasto())
-
+async function toggleFollow() {
-async function unblock() {
+  if (relationship!.following) {
-  relationship.value!.blocking = false
+    if (await openConfirmDialog({
+      title: t('confirm.unfollow.title'),
+      confirm: t('confirm.unfollow.confirm'),
+      cancel: t('confirm.unfollow.cancel'),
+    }) !== 'confirm')
+      return
+  }
+  relationship!.following = !relationship!.following
   try {
-    const newRel = await client.value.v1.accounts.$select(account.id).unblock()
+    const newRel = await client.v1.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
     Object.assign(relationship!, newRel)
   }
   catch (err) {
     console.error(err)
     // TODO error handling
-    relationship.value!.blocking = true
+    relationship!.following = !relationship!.following
+  }
+}
+
+async function unblock() {
+  relationship!.blocking = false
+  try {
+    const newRel = await client.v1.accounts.unblock(account.id)
+    Object.assign(relationship!, newRel)
+  }
+  catch (err) {
+    console.error(err)
+    // TODO error handling
+    relationship!.blocking = true
   }
 }
 
 async function unmute() {
-  relationship.value!.muting = false
+  relationship!.muting = false
   try {
-    const newRel = await client.value.v1.accounts.$select(account.id).unmute()
+    const newRel = await client.v1.accounts.unmute(account.id)
     Object.assign(relationship!, newRel)
   }
   catch (err) {
     console.error(err)
     // TODO error handling
-    relationship.value!.muting = true
+    relationship!.muting = true
   }
 }
 
@@ -47,25 +65,21 @@ useCommand({
   scope: 'Actions',
   order: -2,
   visible: () => command && enable,
-  name: () => `${relationship.value?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
+  name: () => `${relationship?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
   icon: 'i-ri:star-line',
-  onActivate: () => toggleFollowAccount(relationship.value!, account),
+  onActivate: () => toggleFollow(),
 })
 
-const buttonStyle = computed(() => {
+const buttonStyle = $computed(() => {
-  if (relationship.value?.blocking)
+  if (relationship?.blocking)
     return 'text-inverted bg-red border-red'
 
-  if (relationship.value?.muting)
+  if (relationship?.muting)
     return 'text-base bg-card border-base'
 
   // If following, use a label style with a strong border for Mutuals
-  if (relationship.value ? relationship.value.following : context === 'following')
+  if (relationship ? relationship.following : context === 'following')
-    return `text-base ${relationship.value?.followedBy ? 'border-strong' : 'border-base'}`
+    return `text-base ${relationship?.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'
@@ -76,39 +90,34 @@ const buttonStyle = computed(() => {
   <button
     v-if="enable"
     gap-1 items-center group
+    :disabled="relationship?.requested"
     border-1
     rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
     :class="buttonStyle"
     :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)"
+    @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollow()"
   >
-    <template v-if="isLoading">
+    <template v-if="relationship?.blocking">
-      <span i-svg-spinners-180-ring-with-bg />
+      <span group-hover="hidden">{{ $t('account.blocking') }}</span>
+      <span hidden group-hover="inline">{{ $t('account.unblock') }}</span>
+    </template>
+    <template v-if="relationship?.muting">
+      <span group-hover="hidden">{{ $t('account.muting') }}</span>
+      <span hidden group-hover="inline">{{ $t('account.unmute') }}</span>
+    </template>
+    <template v-else-if="relationship ? relationship.following : context === 'following'">
+      <span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
+      <span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
+    </template>
+    <template v-else-if="relationship?.requested">
+      <span>{{ $t('account.follow_requested') }}</span>
+    </template>
+    <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
+      <span group-hover="hidden">{{ $t('account.follows_you') }}</span>
+      <span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
     </template>
     <template v-else>
-      <template v-if="relationship?.blocking">
+      <span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
-        <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

@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import type { mastodon } from 'masto'
-
-const { account, ...props } = defineProps<{
-  account: mastodon.v1.Account
-  relationship?: mastodon.v1.Relationship
-}>()
-const relationship = computed(() => props.relationship || useRelationship(account).value)
-const { client } = useMasto()
-
-async function authorizeFollowRequest() {
-  relationship.value!.requestedBy = false
-  relationship.value!.followedBy = true
-  try {
-    const newRel = await client.value.v1.followRequests.$select(account.id).authorize()
-    Object.assign(relationship!, newRel)
-  }
-  catch (err) {
-    console.error(err)
-    relationship.value!.requestedBy = true
-    relationship.value!.followedBy = false
-  }
-}
-
-async function rejectFollowRequest() {
-  relationship.value!.requestedBy = false
-  try {
-    const newRel = await client.value.v1.followRequests.$select(account.id).reject()
-    Object.assign(relationship!, newRel)
-  }
-  catch (err) {
-    console.error(err)
-    relationship.value!.requestedBy = true
-  }
-}
-</script>
-
-<template>
-  <div flex gap-4>
-    <template v-if="relationship?.requestedBy">
-      <CommonTooltip :content="$t('account.authorize')" no-auto-focus>
-        <button
-          type="button"
-          rounded-full text-sm p2 border-1
-          hover:text-green transition-colors
-          @click="authorizeFollowRequest"
-        >
-          <span block text-current i-ri:check-fill />
-        </button>
-      </CommonTooltip>
-      <CommonTooltip :content="$t('account.reject')" no-auto-focus>
-        <button
-          type="button"
-          rounded-full text-sm p2 border-1
-          hover:text-red transition-colors
-          @click="rejectFollowRequest"
-        >
-          <span block text-current i-ri:close-fill />
-        </button>
-      </CommonTooltip>
-    </template>
-    <template v-else>
-      <span text-secondary>
-        {{ relationship?.followedBy ? $t('account.authorized') : $t('account.rejected') }}
-      </span>
-    </template>
-  </div>
-</template>

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,30 +6,28 @@ 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.value?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
+  return relationship?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
 }
 
 function previewHeader() {
@@ -51,14 +49,14 @@ function previewAvatar() {
 }
 
 async function toggleNotifications() {
-  relationship.value!.notifying = !relationship.value?.notifying
+  relationship!.notifying = !relationship?.notifying
   try {
-    const newRel = await client.value.v1.accounts.$select(account.id).follow({ notify: relationship.value?.notifying })
+    const newRel = await client.v1.accounts.follow(account.id, { notify: relationship?.notifying })
     Object.assign(relationship!, newRel)
   }
   catch {
     // TODO error handling
-    relationship.value!.notifying = !relationship.value?.notifying
+    relationship!.notifying = !relationship?.notifying
   }
 }
 
@@ -75,70 +73,27 @@ watchEffect(() => {
   })
   icons.push({
     name: 'Joined',
-    value: createdAt.value,
+    value: createdAt,
   })
 
   namedFields.value = named
   iconFields.value = icons
 })
 
-const personalNoteDraft = ref(relationship.value?.note ?? '')
+const isSelf = $(useSelfAccount(() => account))
-watch(relationship, (relationship, oldValue) => {
+const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
-  if (!oldValue && relationship)
-    personalNoteDraft.value = relationship.note ?? ''
-})
-
-async function editNote(event: Event) {
-  if (!event.target || !('value' in event.target) || !relationship.value)
-    return
-
-  const newNote = event.target?.value as string
-
-  if (relationship.value.note?.trim() === newNote.trim())
-    return
-
-  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.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>
   <div flex flex-col>
-    <div v-if="relationship?.requestedBy" p-4 flex justify-between items-center bg-card>
-      <span text-primary font-bold>{{ $t('account.requested', [account.displayName]) }}</span>
-      <AccountFollowRequestButton :account="account" :relationship="relationship" />
-    </div>
     <component :is="hasHeader ? 'button' : 'div'" border="b base" z-1 @click="hasHeader ? previewHeader() : undefined">
       <img h-50 height="200" w-full object-cover :src="account.header" :alt="t('account.profile_description', [account.username])">
     </component>
     <div p4 mt--18 flex flex-col gap-4>
       <div relative>
         <div flex justify-between>
-          <button shrink-0 h-full :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" p1 bg-base border-bg-base z-2 @click="previewAvatar">
+          <button shrink-0 :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" w-30 h-30 p1 bg-base border-bg-base z-2 @click="previewAvatar">
-            <AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity w-28 h-28 />
+            <AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity />
           </button>
           <div inset-ie-0 flex="~ wrap row-reverse" gap-2 items-center pt18 justify-start>
             <!-- Edit profile -->
@@ -152,11 +107,7 @@ async function copyAccountName() {
             </NuxtLink>
             <AccountFollowButton :account="account" :command="command" />
             <span inset-ie-0 flex gap-2 items-center>
-              <AccountMoreButton
+              <AccountMoreButton :account="account" :command="command" />
-                :account="account" :command="command"
-                @add-note="isEditingPersonalNote = true"
-                @remove-note="() => { isEditingPersonalNote = false; personalNoteDraft = '' }"
-              />
               <CommonTooltip v-if="!isSelf && relationship?.following" :content="getNotificationIconTitle()">
                 <button
                   :aria-pressed="isNotifiedOnPost"
@@ -187,70 +138,21 @@ async function copyAccountName() {
           </div>
         </div>
         <div flex="~ col gap1" pt2>
-          <div flex gap2 items-center flex-wrap>
+          <div flex justify-between>
             <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
-            <AccountRolesIndicator v-if="account.roles?.length" :account="account" />
-            <AccountLockIndicator v-if="account.locked" show-label />
             <AccountBotIndicator v-if="account.bot" show-label />
           </div>
-
+          <AccountHandle :account="account" />
-          <div flex items-center gap-1>
-            <AccountHandle :account="account" overflow-unset line-clamp-unset />
-            <CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" no-auto-focus 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
-        v-if="isEditingPersonalNote || (relationship?.note && relationship.note.length > 0)"
-        space-y-2
-        pb-4
-        block
-        border="b base"
-      >
-        <div flex flex-row space-x-2 flex-v-center>
-          <div i-ri-edit-2-line />
-          <p font-medium>
-            {{ $t('account.profile_personal_note') }}
-          </p>
-          <p text-secondary text-sm :class="{ 'text-orange': personalNoteDraft.length > (personalNoteMaxLength - 100) }">
-            {{ personalNoteDraft.length }} / {{ personalNoteMaxLength }}
-          </p>
-        </div>
-        <div position-relative>
-          <div
-            input-base
-            min-h-10ex
-            whitespace-pre-wrap
-            opacity-0
-            :class="{ 'trailing-newline': personalNoteDraft.endsWith('\n') }"
-          >
-            {{ personalNoteDraft }}
-          </div>
-          <textarea
-            v-model="personalNoteDraft"
-            input-base
-            position-absolute
-            style="height: 100%"
-            top-0
-            resize-none
-            :maxlength="personalNoteMaxLength"
-            @change="editNote"
-          />
-        </div>
-      </label>
       <div v-if="account.note" max-h-100 overflow-y-auto>
         <ContentRich text-4 text-base :content="account.note" :emojis="account.emojis" />
       </div>
       <div v-if="namedFields.length" flex="~ col wrap gap1">
         <div v-for="field in namedFields" :key="field.name" flex="~ gap-1" items-center>
-          <div mt="0.5" text-secondary uppercase text-xs font-bold>
+          <div text-secondary uppercase text-xs font-bold>
-            <ContentRich :content="field.name" :emojis="account.emojis" />
+            {{ field.name }} |
           </div>
-          <span text-secondary text-xs font-bold>|</span>
           <ContentRich :content="field.value" :emojis="account.emojis" />
         </div>
       </div>
@@ -266,9 +168,3 @@ async function copyAccountName() {
     </div>
   </div>
 </template>
-
-<style>
-.trailing-newline::after {
-  content: '\a';
-}
-</style>

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>
@@ -19,6 +19,6 @@ const relationship = useRelationship(account)
     <div v-if="account.note" max-h-100 overflow-y-auto>
       <ContentRich text-4 text-secondary :content="account.note" :emojis="account.emojis" />
     </div>
-    <AccountPostsFollowers text-sm :account="account" :is-hover-card="true" />
+    <AccountPostsFollowers text-sm :account="account" />
   </div>
 </template>

components/account/AccountHoverWrapper.vue

@@ -1,69 +1,26 @@
 <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 | null
+  account?: mastodon.v1.Account
   handle?: string
   disabled?: boolean
 }>()
 
-const accountHover = ref()
+const account = props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined)
-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()
+
+defineOptions({
+  inheritAttrs: false,
+})
 </script>
 
 <template>
-  <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">
-    <VMenu
+    <slot />
-      v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')"
+    <template #popper>
-      placement="bottom-start"
+      <AccountHoverCard v-if="account" :account="account" />
-      :delay="{ show: 500, hide: 100 }"
+    </template>
-      v-bind="$attrs"
+  </VMenu>
-      :close-on-content-click="false"
+  <slot v-else />
-    >
-      <slot />
-      <template #popper>
-        <AccountHoverCard v-if="account" :account="account" />
-      </template>
-    </VMenu>
-    <slot v-else />
-  </span>
 </template>

components/account/AccountInfo.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-defineOptions({
-  inheritAttrs: false,
-})
-
 const { account, as = 'div' } = defineProps<{
   account: mastodon.v1.Account
   as?: string
   hoverCard?: boolean
   square?: boolean
 }>()
+
+defineOptions({
+  inheritAttrs: false,
+})
 </script>
 
 <!-- TODO: Make this work for both buttons and links -->
@@ -23,8 +23,6 @@ const { account, as = 'div' } = defineProps<{
     <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
       <div flex="~" gap-2>
         <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
-        <AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
-        <AccountLockIndicator v-if="account.locked" text-xs />
         <AccountBotIndicator v-if="account.bot" text-xs />
       </div>
       <AccountHandle :account="account" text-secondary-light />

components/account/AccountInlineInfo.vue

@@ -10,18 +10,11 @@ const { link = true, avatar = true } = defineProps<{
 const userSettings = useUserSettings()
 </script>
 
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
 <template>
   <AccountHoverWrapper :account="account">
     <NuxtLink
       :to="link ? getAccountRoute(account) : undefined"
-      :class="link ? 'text-link-rounded -ml-1.5rem pl-1.5rem rtl-(ml0 pl-0.5rem -mr-1.5rem pr-1.5rem)' : ''"
+      :class="link ? 'text-link-rounded -ml-1.8rem pl-1.8rem rtl-(ml0 pl-0.5rem -mr-1.8rem pr-1.8rem)' : ''"
-      v-bind="$attrs"
       min-w-0 flex gap-2 items-center
     >
       <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />

components/account/AccountLockIndicator.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  showLabel?: boolean
-}>()
-
-const { t } = useI18n()
-</script>
-
-<template>
-  <div
-    flex="~ gap1" items-center
-    :class="{ 'border border-base rounded-md px-1': showLabel }"
-    text-secondary-light
-  >
-    <slot name="prepend" />
-    <CommonTooltip no-auto-focus content="Lock" :disabled="showLabel">
-      <div i-ri:lock-line />
-    </CommonTooltip>
-    <div v-if="showLabel">
-      {{ t('account.lock') }}
-    </div>
-  </div>
-</template>

components/account/AccountMoreButton.vue

@@ -1,63 +1,74 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
-import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~~/composables/masto/relationship'
 
 const { account } = defineProps<{
   account: mastodon.v1.Account
   command?: boolean
 }>()
-const emit = defineEmits<{
+let relationship = $(useRelationship(account))
-  (evt: 'addNote'): void
-  (evt: 'removeNote'): void
-}>()
 
-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()
 
-function shareAccount() {
+const toggleMute = async () => {
-  share({ url: location.href })
+  if (!relationship!.muting && await openConfirmDialog({
-}
+    title: t('confirm.mute_account.title', [account.acct]),
-
+    confirm: t('confirm.mute_account.confirm'),
-async function toggleReblogs() {
+    cancel: t('confirm.mute_account.cancel'),
-  if (!relationship.value!.showingReblogs) {
+  }) !== 'confirm')
-    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.value?.showingReblogs
-  relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
-}
-
-async function addUserNote() {
-  emit('addNote')
-}
-
-async function removeUserNote() {
-  if (!relationship.value!.note || relationship.value!.note.length === 0)
     return
 
-  const newNote = await client.value.v1.accounts.$select(account.id).note.create({ comment: '' })
+  relationship!.muting = !relationship!.muting
-  relationship.value!.note = newNote.note
+  relationship = relationship!.muting
-  emit('removeNote')
+    ? await client.v1.accounts.mute(account.id, {
+      // TODO support more options
+    })
+    : await client.v1.accounts.unmute(account.id)
+}
+
+const toggleBlockUser = async () => {
+  if (!relationship!.blocking && await openConfirmDialog({
+    title: t('confirm.block_account.title', [account.acct]),
+    confirm: t('confirm.block_account.confirm'),
+    cancel: t('confirm.block_account.cancel'),
+  }) !== 'confirm')
+    return
+
+  relationship!.blocking = !relationship!.blocking
+  relationship = await client.v1.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
+}
+
+const toggleBlockDomain = async () => {
+  if (!relationship!.domainBlocking && await openConfirmDialog({
+    title: t('confirm.block_domain.title', [getServerName(account)]),
+    confirm: t('confirm.block_domain.confirm'),
+    cancel: t('confirm.block_domain.cancel'),
+  }) !== 'confirm')
+    return
+
+  relationship!.domainBlocking = !relationship!.domainBlocking
+  await client.v1.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
+}
+
+const toggleReblogs = async () => {
+  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
+
+  const showingReblogs = !relationship?.showingReblogs
+  relationship = await client.v1.accounts.follow(account.id, { reblogs: showingReblogs })
 }
 </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">
-      <div rounded-5 p2 elk-group-hover="bg-purple/10">
+      <div rounded-5 p2 group-hover="bg-purple/10">
         <div i-ri:more-2-fill />
       </div>
     </button>
@@ -70,13 +81,6 @@ async function removeUserNote() {
           :command="command"
         />
       </NuxtLink>
-      <CommonDropdownItem
-        v-if="isShareSupported"
-        :text="$t('menu.share_account', [`@${account.acct}`])"
-        icon="i-ri:share-line"
-        :command="command"
-        @click="shareAccount()"
-      />
 
       <template v-if="currentUser">
         <template v-if="!isSelf">
@@ -108,34 +112,19 @@ async function removeUserNote() {
             @click="toggleReblogs()"
           />
 
-          <CommonDropdownItem
-            v-if="!relationship?.note || relationship?.note?.length === 0"
-            :text="$t('menu.add_personal_note', [`@${account.acct}`])"
-            icon="i-ri-edit-2-line"
-            :command="command"
-            @click="addUserNote()"
-          />
-          <CommonDropdownItem
-            v-else
-            :text="$t('menu.remove_personal_note', [`@${account.acct}`])"
-            icon="i-ri-edit-2-line"
-            :command="command"
-            @click="removeUserNote()"
-          />
-
           <CommonDropdownItem
             v-if="!relationship?.muting"
             :text="$t('menu.mute_account', [`@${account.acct}`])"
-            icon="i-ri:volume-mute-line"
+            icon="i-ri:volume-up-fill"
             :command="command"
-            @click="toggleMuteAccount (relationship!, account)"
+            @click="toggleMute()"
           />
           <CommonDropdownItem
             v-else
             :text="$t('menu.unmute_account', [`@${account.acct}`])"
-            icon="i-ri:volume-up-fill"
+            icon="i-ri:volume-mute-line"
             :command="command"
-            @click="toggleMuteAccount (relationship!, account)"
+            @click="toggleMute()"
           />
 
           <CommonDropdownItem
@@ -143,14 +132,14 @@ async function removeUserNote() {
             :text="$t('menu.block_account', [`@${account.acct}`])"
             icon="i-ri:forbid-2-line"
             :command="command"
-            @click="toggleBlockAccount (relationship!, account)"
+            @click="toggleBlockUser()"
           />
           <CommonDropdownItem
             v-else
             :text="$t('menu.unblock_account', [`@${account.acct}`])"
             icon="i-ri:checkbox-circle-line"
             :command="command"
-            @click="toggleBlockAccount (relationship!, account)"
+            @click="toggleBlockUser()"
           />
 
           <template v-if="getServerName(account) !== currentServer">
@@ -159,23 +148,16 @@ async function removeUserNote() {
               :text="$t('menu.block_domain', [getServerName(account)])"
               icon="i-ri:shut-down-line"
               :command="command"
-              @click="toggleBlockDomain(relationship!, account)"
+              @click="toggleBlockDomain()"
             />
             <CommonDropdownItem
               v-else
               :text="$t('menu.unblock_domain', [getServerName(account)])"
               icon="i-ri:restart-line"
               :command="command"
-              @click="toggleBlockDomain(relationship!, account)"
+              @click="toggleBlockDomain()"
             />
           </template>
-
-          <CommonDropdownItem
-            :text="$t('menu.report_account', [`@${account.acct}`])"
-            icon="i-ri:flag-2-line"
-            :command="command"
-            @click="openReportDialog(account)"
-          />
         </template>
 
         <template v-else>
@@ -183,7 +165,7 @@ async function removeUserNote() {
             <CommonDropdownItem :text="$t('account.pinned')" icon="i-ri:pushpin-line" :command="command" />
           </NuxtLink>
           <NuxtLink to="/favourites">
-            <CommonDropdownItem :text="$t('account.favourites')" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" :command="command" />
+            <CommonDropdownItem :text="$t('account.favourites')" icon="i-ri:heart-3-line" :command="command" />
           </NuxtLink>
           <NuxtLink to="/mutes">
             <CommonDropdownItem :text="$t('account.muted_users')" icon="i-ri:volume-mute-line" :command="command" />

components/account/AccountPaginator.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { mastodon } from 'masto'
+import type { Paginator, mastodon } from 'masto'
 
 const { paginator, account, context } = defineProps<{
-  paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
+  paginator: Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams>
   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/AccountPostsFollowers.vue

@@ -3,7 +3,6 @@ import type { mastodon } from 'masto'
 
 defineProps<{
   account: mastodon.v1.Account
-  isHoverCard?: boolean
 }>()
 
 const userSettings = useUserSettings()
@@ -27,51 +26,32 @@ const userSettings = useUserSettings()
       </template>
     </NuxtLink>
     <NuxtLink
-      v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
       :to="getAccountFollowingRoute(account)"
       replace
       text-secondary exact-active-class="text-primary"
     >
       <template #default="{ isExactActive }">
-        <template
+        <CommonLocalizedNumber
-          v-if="!getPreferences(userSettings, 'hideFollowerCount')"
+          keypath="account.following_count"
-        >
+          :count="account.followingCount"
-          <CommonLocalizedNumber
+          font-bold
-            v-if="account.followingCount >= 0"
+          :class="isExactActive ? 'text-primary' : 'text-base'"
-            keypath="account.following_count"
+        />
-            :count="account.followingCount"
-            font-bold
-            :class="isExactActive ? 'text-primary' : 'text-base'"
-          />
-          <div v-else flex gap-x-1>
-            <span font-bold text-base>Hidden</span>
-            <span>{{ $t('account.following') }}</span>
-          </div>
-        </template>
-        <span v-else>{{ $t('account.following') }}</span>
       </template>
     </NuxtLink>
     <NuxtLink
-      v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
+      v-if="!getPreferences(userSettings, 'hideFollowerCount')"
       :to="getAccountFollowersRoute(account)"
       replace text-secondary
       exact-active-class="text-primary"
     >
       <template #default="{ isExactActive }">
-        <template v-if="!getPreferences(userSettings, 'hideFollowerCount')">
+        <CommonLocalizedNumber
-          <CommonLocalizedNumber
+          keypath="account.followers_count"
-            v-if="account.followersCount >= 0"
+          :count="account.followersCount"
-            keypath="account.followers_count"
+          font-bold
-            :count="account.followersCount"
+          :class="isExactActive ? 'text-primary' : 'text-base'"
-            font-bold
+        />
-            :class="isExactActive ? 'text-primary' : 'text-base'"
-          />
-          <div v-else flex gap-x-1>
-            <span font-bold text-base>Hidden</span>
-            <span>{{ $t('account.followers') }}</span>
-          </div>
-        </template>
-        <span v-else>{{ $t('account.followers') }}</span>
       </template>
     </NuxtLink>
   </div>

components/account/AccountRolesIndicator.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { mastodon } from 'masto'
-
-defineProps<{
-  account: mastodon.v1.Account
-  limit?: number
-}>()
-</script>
-
-<template>
-  <div
-    flex="~ gap1" items-center
-    class="border border-base rounded-md px-1"
-    text-secondary-light
-  >
-    <slot name="prepend" />
-    <div v-for="role in account.roles?.slice(0, limit)" :key="role.id" flex>
-      <div :style="`color: ${role.color}; border-color: ${role.color}`">
-        {{ role.name }}
-      </div>
-    </div>
-  </div>
-  <div
-    v-if="limit && account.roles?.length > limit"
-    flex="~ gap1" items-center
-    class="border border-base rounded-md px-1"
-    text-secondary-light
-  >
-    +{{ account.roles?.length - limit }}
-  </div>
-</template>

components/account/AccountTabs.vue

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

components/account/TagHoverWrapper.vue

@@ -1,45 +0,0 @@
-<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"
-    >
-      <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>)
 
-const ariaLive = ref<AriaLive>('polite')
+let ariaLive = $ref<AriaLive>('polite')
-const ariaMessage = ref<string>('')
+let ariaMessage = $ref<string>('')
 
-function onMessage(event: AriaAnnounceType, message?: string) {
+const onMessage = (event: AriaAnnounceType, message?: string) => {
   if (event === 'announce')
-    ariaMessage.value = message!
+    ariaMessage = message!
   else if (event === 'mute')
-    ariaLive.value = 'off'
+    ariaLive = 'off'
   else
-    ariaLive.value = 'polite'
+    ariaLive = '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,33 +10,31 @@ const registry = useCommandRegistry()
 
 const router = useRouter()
 
-const inputEl = ref<HTMLInputElement>()
+const inputEl = $ref<HTMLInputElement>()
-const resultEl = ref<HTMLDivElement>()
+const resultEl = $ref<HTMLDivElement>()
 
-const scopes = ref<CommandScope[]>([])
+const scopes = $ref<CommandScope[]>([])
-const input = commandPanelInput
+let input = $(commandPanelInput)
 
 onMounted(() => {
-  inputEl.value?.focus()
+  inputEl?.focus()
 })
 
-const commandMode = computed(() => input.value.startsWith('>'))
+const commandMode = $computed(() => input.startsWith('>'))
 
-const query = computed(() => commandMode.value ? '' : input.value.trim())
+const query = $computed(() => commandMode ? '' : input.trim())
 
-const { accounts, hashtags, loading } = useSearch(query)
+const { accounts, hashtags, loading } = useSearch($$(query))
 
-function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
+const toSearchQueryResultItem = (search: SearchResultType): QueryResultItem => ({
-  return {
+  index: 0,
-    index: 0,
+  type: 'search',
-    type: 'search',
+  search,
-    search,
+  onActivate: () => router.push(search.to),
-    onActivate: () => router.push(search.to),
+})
-  }
-}
 
-const searchResult = computed<QueryResult>(() => {
+const searchResult = $computed<QueryResult>(() => {
-  if (query.value.length === 0 || loading.value)
+  if (query.length === 0 || loading.value)
     return { length: 0, items: [], grouped: {} as any }
 
   // TODO extract this scope
@@ -61,56 +59,55 @@ const searchResult = computed<QueryResult>(() => {
   }
 })
 
-const result = computed<QueryResult>(() => commandMode.value
+const result = $computed<QueryResult>(() => commandMode
-  ? registry.query(scopes.value.map(s => s.id).join('.'), input.value.slice(1).trim())
+  ? registry.query(scopes.map(s => s.id).join('.'), input.slice(1).trim())
-  : searchResult.value,
+  : searchResult,
 )
 
 const isMac = useIsMac()
-const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
+const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl')
 
-const active = ref(0)
+let active = $ref(0)
-watch(result, (n, o) => {
+watch($$(result), (n, o) => {
   if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx]))
-    active.value = 0
+    active = 0
 })
 
-function findItemEl(index: number) {
+const findItemEl = (index: number) =>
-  return resultEl.value?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
+  resultEl?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
-}
+const onCommandActivate = (item: QueryResultItem) => {
-function onCommandActivate(item: QueryResultItem) {
   if (item.onActivate) {
     item.onActivate()
     emit('close')
   }
   else if (item.onComplete) {
-    scopes.value.push(item.onComplete())
+    scopes.push(item.onComplete())
-    input.value = '> '
+    input = '> '
   }
 }
-function onCommandComplete(item: QueryResultItem) {
+const onCommandComplete = (item: QueryResultItem) => {
   if (item.onComplete) {
-    scopes.value.push(item.onComplete())
+    scopes.push(item.onComplete())
-    input.value = '> '
+    input = '> '
   }
   else if (item.onActivate) {
     item.onActivate()
     emit('close')
   }
 }
-function intoView(index: number) {
+const intoView = (index: number) => {
   const el = findItemEl(index)
   if (el)
     el.scrollIntoView({ block: 'nearest' })
 }
 
 function setActive(index: number) {
-  const len = result.value.length
+  const len = result.length
-  active.value = (index + len) % len
+  active = (index + len) % len
-  intoView(active.value)
+  intoView(active)
 }
 
-function onKeyDown(e: KeyboardEvent) {
+const onKeyDown = (e: KeyboardEvent) => {
   switch (e.key) {
     case 'p':
     case 'ArrowUp': {
@@ -118,7 +115,7 @@ function onKeyDown(e: KeyboardEvent) {
         break
       e.preventDefault()
 
-      setActive(active.value - 1)
+      setActive(active - 1)
 
       break
     }
@@ -128,7 +125,7 @@ function onKeyDown(e: KeyboardEvent) {
         break
       e.preventDefault()
 
-      setActive(active.value + 1)
+      setActive(active + 1)
 
       break
     }
@@ -136,9 +133,9 @@ function onKeyDown(e: KeyboardEvent) {
     case 'Home': {
       e.preventDefault()
 
-      active.value = 0
+      active = 0
 
-      intoView(active.value)
+      intoView(active)
 
       break
     }
@@ -146,7 +143,7 @@ function onKeyDown(e: KeyboardEvent) {
     case 'End': {
       e.preventDefault()
 
-      setActive(result.value.length - 1)
+      setActive(result.length - 1)
 
       break
     }
@@ -154,7 +151,7 @@ function onKeyDown(e: KeyboardEvent) {
     case 'Enter': {
       e.preventDefault()
 
-      const cmd = result.value.items[active.value]
+      const cmd = result.items[active]
       if (cmd)
         onCommandActivate(cmd)
 
@@ -164,7 +161,7 @@ function onKeyDown(e: KeyboardEvent) {
     case 'Tab': {
       e.preventDefault()
 
-      const cmd = result.value.items[active.value]
+      const cmd = result.items[active]
       if (cmd)
         onCommandComplete(cmd)
 
@@ -172,9 +169,9 @@ function onKeyDown(e: KeyboardEvent) {
     }
 
     case 'Backspace': {
-      if (input.value === '>' && scopes.value.length) {
+      if (input === '>' && scopes.length) {
         e.preventDefault()
-        scopes.value.pop()
+        scopes.pop()
       }
       break
     }

components/common/CommonAlert.vue

@@ -2,7 +2,9 @@
 const emit = defineEmits<{
   (event: 'close'): void
 }>()
-const visible = defineModel<boolean>()
+const { modelValue: visible } = defineModel<{
+  modelValue?: boolean
+}>()
 
 function close() {
   emit('close')

components/common/CommonBlurhash.vue

@@ -1,16 +1,54 @@
 <script setup lang="ts">
-defineOptions({
+import { decode } from 'blurhash'
-  inheritAttrs: false,
-})
 
-const { blurhash = '', src, srcset, shouldLoadImage = true } = defineProps<{
+const { blurhash, src, srcset, shouldLoadImage = true } = defineProps<{
-  blurhash?: string
+  blurhash?: string | null | undefined
   src: string
   srcset?: string
   shouldLoadImage?: boolean
 }>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const isLoaded = ref(false)
+const placeholderSrc = $computed(() => {
+  if (!blurhash)
+    return ''
+  const pixels = decode(blurhash, 32, 32)
+  return getDataUrlFromArr(pixels, 32, 32)
+})
+
+function loadImage() {
+  const img = document.createElement('img')
+
+  img.onload = () => {
+    isLoaded.value = true
+  }
+
+  img.src = src
+
+  if (srcset)
+    img.srcset = srcset
+
+  setTimeout(() => {
+    isLoaded.value = true
+  }, 3_000)
+}
+
+onMounted(() => {
+  if (shouldLoadImage)
+    loadImage()
+})
+
+watch(() => shouldLoadImage, () => {
+  if (shouldLoadImage)
+    loadImage()
+})
 </script>
 
 <template>
-  <UnLazyImage v-bind="$attrs" :blurhash="blurhash" :src="src" :src-set="srcset" :lazy-load="shouldLoadImage" auto-sizes />
+  <img v-if="isLoaded || !placeholderSrc" v-bind="$attrs" :src="src" :srcset="srcset">
+  <img v-else v-bind="$attrs" :src="placeholderSrc">
 </template>

components/common/CommonCheckbox.vue

@@ -1,28 +1,22 @@
 <script setup lang="ts">
 defineProps<{
-  label?: string
+  label: string
   hover?: boolean
-  iconChecked?: string
-  iconUnchecked?: string
-  checkedIconColor?: string
-  prependCheckbox?: boolean
 }>()
-const modelValue = defineModel<boolean | null>()
+const { modelValue } = defineModel<{
+  modelValue: boolean
+}>()
 </script>
 
 <template>
   <label
     class="common-checkbox flex items-center cursor-pointer py-1 text-md w-full gap-y-1"
     :class="hover ? 'hover:bg-active ms--2 px-4 py-2' : null"
-    v-bind="$attrs"
     @click.prevent="modelValue = !modelValue"
   >
-    <span v-if="label && !prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
+    <span flex-1 ms-2 pointer-events-none>{{ label }}</span>
     <span
-      :class="[
+      :class="modelValue ? 'i-ri:checkbox-line' : 'i-ri:checkbox-blank-line'"
-        modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line'),
-        modelValue && checkedIconColor,
-      ]"
       text-lg
       aria-hidden="true"
     />
@@ -31,7 +25,6 @@ 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/CommonCropImage.vue

@@ -14,7 +14,10 @@ const props = withDefaults(defineProps<Props>(), {
   stencilSizePercentage: 0.9,
 })
 
-const file = defineModel<File | null>()
+const { modelValue: file } = defineModel<{
+  /** Images to be cropped */
+  modelValue: File | null
+}>()
 
 const cropperDialog = ref(false)
 
@@ -27,7 +30,7 @@ const cropperImage = reactive({
   type: 'image/jpg',
 })
 
-function stencilSize({ boundaries }: { boundaries: Boundaries }) {
+const stencilSize = ({ boundaries }: { boundaries: Boundaries }) => {
   return {
     width: boundaries.width * props.stencilSizePercentage,
     height: boundaries.height * props.stencilSizePercentage,
@@ -52,7 +55,7 @@ watch(file, (file, _, onCleanup) => {
   cropperFlag.value = false
 })
 
-function cropImage() {
+const cropImage = () => {
   if (cropper.value && file.value) {
     cropperFlag.value = true
     cropperDialog.value = false

components/common/CommonInputImage.vue

@@ -22,7 +22,9 @@ const emit = defineEmits<{
   (event: 'error', code: number, message: string): void
 }>()
 
-const file = defineModel<FileWithHandle | null>()
+const { modelValue: file } = defineModel<{
+  modelValue: FileWithHandle | null
+}>()
 
 const { t } = useI18n()
 
@@ -32,8 +34,8 @@ const previewImage = ref('')
 /** The current images on display */
 const imageSrc = computed<string>(() => previewImage.value || defaultImage.value)
 
-async function pickImage() {
+const pickImage = async () => {
-  if (import.meta.server)
+  if (process.server)
     return
   const image = await fileOpen({
     description: 'Image',

components/common/CommonPaginator.vue

@@ -2,51 +2,50 @@
 // @ts-expect-error missing types
 import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-import type { mastodon } from 'masto'
+import type { Paginator, WsEvents } from 'masto'
-import type { UnwrapRef } from 'vue'
 
 const {
   paginator,
   stream,
-  eventType,
   keyProp = 'id',
   virtualScroller = false,
+  eventType = 'update',
   preprocess,
-  endMessage = true,
+  noEndMessage = false,
 } = defineProps<{
-  paginator: mastodon.Paginator<T[], O>
+  paginator: Paginator<T[], O>
   keyProp?: keyof T
   virtualScroller?: boolean
-  stream?: mastodon.streaming.Subscription
+  stream?: Promise<WsEvents>
-  eventType?: 'update' | 'notification'
+  eventType?: 'notification' | 'update'
   preprocess?: (items: (U | T)[]) => U[]
-  endMessage?: boolean | string
+  noEndMessage?: boolean
 }>()
 
 defineSlots<{
-  default: (props: {
+  default: {
     items: U[]
     item: U
     index: number
     active?: boolean
-    older: U
+    older?: U
-    newer: U // newer is undefined when index === 0
+    newer?: U // newer is undefined when index === 0
-  }) => void
+  }
-  items: (props: {
+  items: {
-    items: UnwrapRef<U[]>
+    items: U[]
-  }) => void
+  }
-  updater: (props: {
+  updater: {
     number: number
     update: () => void
-  }) => void
+  }
-  loading: (props: object) => void
+  loading: {}
-  done: (props: { items: U[] }) => void
+  done: {}
 }>()
 
 const { t } = useI18n()
 const nuxtApp = useNuxtApp()
 
-const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), eventType, preprocess)
+const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, $$(stream), eventType, preprocess)
 
 nuxtApp.hook('elk-logo:click', () => {
   update()
@@ -84,25 +83,25 @@ defineExpose({ createEntry, removeEntry, updateEntry })
           page-mode
         >
           <slot
-            v-bind="{ key: item[keyProp] }"
+            :key="item[keyProp]"
             :item="item"
             :active="active"
-            :older="items[index + 1] as U"
+            :older="items[index + 1]"
-            :newer="items[index - 1] as U"
+            :newer="items[index - 1]"
             :index="index"
-            :items="items as U[]"
+            :items="items"
           />
         </DynamicScroller>
       </template>
       <template v-else>
         <slot
-          v-for="(item, index) of items"
+          v-for="item, index of items"
-          v-bind="{ key: (item as U)[keyProp as keyof U] }"
+          :key="(item as any)[keyProp]"
-          :item="item as U"
+          :item="item"
-          :older="items[index + 1] as U"
+          :older="items[index + 1]"
-          :newer="items[index - 1] as U"
+          :newer="items[index - 1]"
           :index="index"
-          :items="items as U[]"
+          :items="items"
         />
       </template>
     </slot>
@@ -110,9 +109,9 @@ defineExpose({ createEntry, removeEntry, updateEntry })
     <slot v-if="state === 'loading'" name="loading">
       <TimelineSkeleton />
     </slot>
-    <slot v-else-if="state === 'done' && endMessage !== false" name="done" :items="items as U[]">
+    <slot v-else-if="state === 'done' && !noEndMessage" name="done">
       <div p5 text-secondary italic text-center>
-        {{ t(typeof endMessage === 'string' && items.length <= 0 ? endMessage : 'common.end_of_list') }}
+        {{ t('common.end_of_list') }}
       </div>
     </slot>
     <div v-else-if="state === 'error'" p5 text-secondary>

components/common/CommonPreviewPrompt.vue

@@ -14,7 +14,7 @@ const build = useBuildInfo()
     <p>
       <i18n-t keypath="help.build_preview.desc1">
         <NuxtLink :href="`https://github.com/elk-zone/elk/commit/${build.commit}`" target="_blank" text-rose hover:underline>
-          <code>{{ build.shortCommit }}</code>
+          <code>{{ build.commit.slice(0, 7) }}</code>
         </NuxtLink>
       </i18n-t>
     </p>

components/common/CommonRadio.vue

@@ -4,7 +4,9 @@ defineProps<{
   value: any
   hover?: boolean
 }>()
-const modelValue = defineModel()
+const { modelValue } = defineModel<{
+  modelValue: any
+}>()
 </script>
 
 <template>

components/common/CommonRouteTabs.vue

@@ -1,20 +1,26 @@
 <script setup lang="ts">
-import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '~/types'
+import type { RouteLocationRaw } from 'vue-router'
 
-const { options, command, replace, preventScrollTop = false, moreOptions } = defineProps<{
+export interface CommonRouteTabOption {
+  to: RouteLocationRaw
+  display: string
+  disabled?: boolean
+  name?: string
+  icon?: string
+}
+const { options, command, replace, preventScrollTop = false } = $defineProps<{
   options: CommonRouteTabOption[]
-  moreOptions?: CommonRouteTabMoreOption
   command?: boolean
   replace?: boolean
   preventScrollTop?: boolean
 }>()
 
-const { t } = useI18n()
 const router = useRouter()
 
 useCommands(() => command
   ? options.map(tab => ({
     scope: 'Tabs',
+
     name: tab.display,
     icon: tab.icon ?? 'i-ri:file-list-2-line',
     onActivate: () => router.replace(tab.to),
@@ -23,9 +29,9 @@ useCommands(() => command
 </script>
 
 <template>
-  <div flex w-full items-center lg:text-lg of-x-auto scrollbar-hide border="b base">
+  <div flex w-full items-center lg:text-lg of-x-auto scrollbar-hide>
     <template
-      v-for="(option, index) in options.filter(item => !item.hide)"
+      v-for="(option, index) in options"
       :key="option?.name || index"
     >
       <NuxtLink
@@ -33,7 +39,7 @@ useCommands(() => command
         :to="option.to"
         :replace="replace"
         relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
-        tabindex="0"
+        tabindex="1"
         hover:bg-active transition-100
         exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
         @click="!preventScrollTop && $scrollToTop()"
@@ -44,43 +50,5 @@ 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="isHydrated && moreOptions?.options?.length">
-      <CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
-        <CommonTooltip placement="top" no-auto-focus :content="moreOptions.tooltip || t('action.more')">
-          <button
-            cursor-pointer
-            flex
-            gap-1
-            w-12
-            rounded
-            hover:bg-active
-            btn-action-icon
-            op75
-            px4
-            group
-            :aria-label="t('action.more')"
-            :class="moreOptions.match ? 'text-primary' : 'text-secondary'"
-          >
-            <span v-if="moreOptions.icon" :class="moreOptions.icon" text-sm me--1 block />
-            <span i-ri:arrow-down-s-line text-sm me--1 block />
-          </button>
-        </CommonTooltip>
-        <template #popper>
-          <NuxtLink
-            v-for="(option, index) in moreOptions.options.filter(item => !item.hide)"
-            :key="option?.name || index"
-            :to="option.to"
-          >
-            <CommonDropdownItem>
-              <span flex="~ row" gap-x-4 items-center :class="option.match ? 'text-primary' : ''">
-                <span v-if="option.icon" :class="[option.icon, option.match ? 'text-primary' : 'text.secondary']" text-md me--1 block />
-                <span v-else block>&#160;</span>
-                <span>{{ option.display }}</span>
-              </span>
-            </CommonDropdownItem>
-          </NuxtLink>
-        </template>
-      </commondropdown>
-    </template>
   </div>
 </template>

components/common/CommonScrollIntoView.vue

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

components/common/CommonTabs.vue

@@ -8,9 +8,11 @@ const { options, command } = defineProps<{
   command?: boolean
 }>()
 
-const modelValue = defineModel<string>({ required: true })
+const { modelValue } = defineModel<{
+  modelValue: string
+}>()
 
-const tabs = computed(() => {
+const tabs = $computed(() => {
   return options.map((option) => {
     if (typeof option === 'string')
       return { name: option, display: option }
@@ -19,12 +21,12 @@ const tabs = computed(() => {
   })
 })
 
-function toValidName(option: string) {
+function toValidName(otpion: string) {
-  return option.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
+  return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
 }
 
 useCommands(() => command
-  ? tabs.value.map(tab => ({
+  ? tabs.map(tab => ({
     scope: 'Tabs',
 
     name: tab.display,
@@ -49,7 +51,7 @@ useCommands(() => command
       ><label
         flex flex-auto cursor-pointer px3 m1 rounded transition-all
         :for="`tab-${toValidName(option.name)}`"
-        tabindex="0"
+        tabindex="1"
         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'
+import type { Popper as VTooltipType } from 'floating-vue/dist'
 
 export interface Props extends Partial<typeof VTooltipType> {
   content?: string
@@ -10,7 +10,6 @@ defineProps<Props>()
 
 <template>
   <VTooltip
-    v-if="isHydrated"
     v-bind="$attrs"
     auto-hide
   >

components/common/CommonTrending.vue

@@ -4,20 +4,20 @@ 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(() =>
+const people = $computed(() =>
-  ongoingHot.value.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
+  ongoingHot.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
 )
 </script>
 
 <template>
   <p>
-    {{ $t('command.n_people_in_the_past_n_days', [people, maxDay]) }}
+    {{ $t('command.n-people-in-the-past-n-days', [people, maxDay]) }}
   </p>
 </template>

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

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-defineOptions({
-  inheritAttrs: false,
-})
-
 const props = defineProps<{
   count: number
   keypath: string
 }>()
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
 
-const useSR = computed(() => forSR(props.count))
+const useSR = $computed(() => forSR(props.count))
-const rawNumber = computed(() => formatNumber(props.count))
+const rawNumber = $computed(() => formatNumber(props.count))
-const humanReadableNumber = computed(() => formatHumanReadableNumber(props.count))
+const humanReadableNumber = $computed(() => formatHumanReadableNumber(props.count))
 </script>
 
 <template>

components/common/dropdown/Dropdown.vue

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

components/common/dropdown/DropdownItem.vue

@@ -15,7 +15,7 @@ const { hide } = useDropdownContext() || {}
 
 const el = ref<HTMLDivElement>()
 
-function handleClick(evt: MouseEvent) {
+const handleClick = (evt: MouseEvent) => {
   hide?.()
   emit('click', evt)
 }

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.value, (langMap[props.lang] || props.lang) as any) : raw
+  return props.lang ? highlightCode(raw, (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 { mastodon } from 'masto'
+import type { Paginator, mastodon } from 'masto'
 
 const { paginator } = defineProps<{
-  paginator: mastodon.Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
+  paginator: Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
 }>()
 
 function preprocess(items: mastodon.v1.Conversation[]): mastodon.v1.Conversation[] {

components/emoji/Emoji.vue

@@ -1,30 +0,0 @@
-<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,14 +2,12 @@
 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 v-auto-focus type="button" btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
+    <button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
-      <span i-ri:close-line />
+      <div 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">
@@ -30,12 +28,10 @@ const vAutoFocus = (el: HTMLElement) => el.focus()
       </NuxtLink>
       {{ $t('help.desc_para6') }}
     </p>
-    <NuxtLink hover:text-primary href="https://github.com/sponsors/elk-zone" target="_blank">
+    {{ $t('help.desc_para3') }}
-      {{ $t('help.desc_para3') }}
+    <p flex="~ gap-2 wrap" mxa>
-    </NuxtLink>
-    <p flex="~ gap-2 wrap justify-center" mxa>
       <template v-for="team of elkTeamMembers" :key="team.github">
-        <NuxtLink :href="team.link" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
+        <NuxtLink :href="`https://github.com/sponsors/${team.github}`" 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>
@@ -46,7 +42,7 @@ const vAutoFocus = (el: HTMLElement) => el.focus()
       </NuxtLink>
     </p>
 
-    <button type="button" btn-solid mxa @click="emit('close')">
+    <button btn-solid mxa tabindex="2" @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.$select(list).accounts.create({ accountIds: [account.id] })
+      ? await client.v1.lists.addAccount(list, { accountIds: [account.id] })
-      : await client.v1.lists.$select(list).accounts.remove({ accountIds: [account.id] })
+      : await client.v1.lists.removeAccount(list, { accountIds: [account.id] })
     isRemoved.value = !isRemoved.value
   }
   catch (err) {

components/list/ListEntry.vue

@@ -1,101 +1,117 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
-import { useForm } from 'slimeform'
 
 const emit = defineEmits<{
   (e: 'listUpdated', list: mastodon.v1.List): void
   (e: 'listRemoved', id: string): void
 }>()
-const list = defineModel<mastodon.v1.List>({ required: true })
+const { list } = $defineProps<{
+  list: mastodon.v1.List
+}>()
+const { modelValue } = defineModel<{
+  modelValue: string
+}>()
+modelValue.value = list.title
 
 const { t } = useI18n()
 const client = useMastoClient()
 
-const { form, isDirty, submitter, reset } = useForm({
+let isEditing = $ref<boolean>(false)
-  form: () => ({ ...list.value }),
+let busy = $ref<boolean>(false)
-})
+let deleteBusy = $ref<boolean>(false)
+let actionError = $ref<string | undefined>(undefined)
 
-const isEditing = ref<boolean>(false)
+const enableSaveButton = computed(() => list.title !== modelValue.value)
-const deleting = ref<boolean>(false)
-const actionError = ref<string | undefined>(undefined)
 
-const input = ref<HTMLInputElement>()
+const edit = ref()
-const editBtn = ref<HTMLButtonElement>()
+const deleteBtn = ref()
-const deleteBtn = ref<HTMLButtonElement>()
+const input = ref()
 
-async function prepareEdit() {
+const prepareEdit = () => {
-  isEditing.value = true
+  isEditing = true
-  actionError.value = undefined
+  actionError = undefined
-  await nextTick()
+  nextTick(() => {
-  input.value?.focus()
+    input.value?.focus()
+  })
 }
-async function cancelEdit() {
+const cancelEdit = () => {
-  isEditing.value = false
+  isEditing = false
-  actionError.value = undefined
+  actionError = undefined
-  reset()
+  modelValue.value = list.title
 
-  await nextTick()
+  nextTick(() => {
-  editBtn.value?.focus()
+    edit.value?.focus()
+  })
 }
+async function finishEditing() {
+  if (busy || !isEditing || !enableSaveButton.value)
+    return
 
-const { submit, submitting } = submitter(async () => {
+  busy = true
+  actionError = undefined
+  await nextTick()
   try {
-    list.value = await client.v1.lists.$select(form.id).update({
+    const updateList = await client.v1.lists.update(list.id, {
-      title: form.title,
+      title: modelValue.value,
     })
     cancelEdit()
+    emit('listUpdated', updateList)
   }
   catch (err) {
     console.error(err)
-    actionError.value = (err as Error).message
+    actionError = (err as Error).message
-    await nextTick()
+    nextTick(() => {
-    input.value?.focus()
+      input.value?.focus()
+    })
   }
-})
+  finally {
-
+    busy = false
+  }
+}
 async function removeList() {
-  if (deleting.value)
+  if (deleteBusy)
     return
 
+  deleteBusy = true
+  actionError = undefined
+  await nextTick()
+
   const confirmDelete = await openConfirmDialog({
-    title: t('confirm.delete_list.title'),
+    title: t('confirm.delete_list.title', [list.title]),
-    description: t('confirm.delete_list.description', [list.value.title]),
     confirm: t('confirm.delete_list.confirm'),
     cancel: t('confirm.delete_list.cancel'),
   })
 
-  deleting.value = true
+  if (confirmDelete === 'confirm') {
-  actionError.value = undefined
-  await nextTick()
-
-  if (confirmDelete.choice === 'confirm') {
     await nextTick()
     try {
-      await client.v1.lists.$select(list.value.id).remove()
+      await client.v1.lists.remove(list.id)
-      emit('listRemoved', list.value.id)
+      emit('listRemoved', list.id)
     }
     catch (err) {
       console.error(err)
-      actionError.value = (err as Error).message
+      actionError = (err as Error).message
-      await nextTick()
+      nextTick(() => {
-      deleteBtn.value?.focus()
+        deleteBtn.value?.focus()
+      })
     }
     finally {
-      deleting.value = false
+      deleteBusy = false
     }
   }
   else {
-    deleting.value = false
+    deleteBusy = false
   }
 }
 
-async function clearError() {
+function clearError() {
-  actionError.value = undefined
+  actionError = undefined
-  await nextTick()
+  nextTick(() => {
-  if (isEditing.value)
+    if (isEditing)
-    input.value?.focus()
+      input.value?.focus()
-  else
+    else
-    deleteBtn.value?.focus()
+      deleteBtn.value?.focus()
+  })
 }
 
 onDeactivated(cancelEdit)
@@ -106,7 +122,7 @@ onDeactivated(cancelEdit)
     hover:bg-active flex justify-between items-center gap-x-2
     :aria-describedby="actionError ? `action-list-error-${list.id}` : undefined"
     :class="actionError ? 'border border-base border-rounded rounded-be-is-0 rounded-be-ie-0 border-b-unset border-$c-danger-active' : null"
-    @submit.prevent="submit"
+    @submit.prevent="finishEditing"
   >
     <div
       v-if="isEditing"
@@ -125,15 +141,20 @@ onDeactivated(cancelEdit)
       </CommonTooltip>
       <input
         ref="input"
-        v-model="form.title"
+        v-model="modelValue"
-        rounded-3 w-full bg-transparent
+        rounded-3
-        outline="focus:none" pe-4 pb="1px"
+        w-full
-        flex-1 placeholder-text-secondary
+        bg-transparent
+        outline="focus:none"
+        pe-4
+        pb="1px"
+        flex-1
+        placeholder-text-secondary
         @keydown.esc="cancelEdit()"
       >
     </div>
     <NuxtLink v-else :to="`list/${list.id}`" block grow p4>
-      {{ form.title }}
+      {{ list.title }}
     </NuxtLink>
     <div mr4 flex gap2>
       <CommonTooltip v-if="isEditing" :content="$t('list.save')" no-auto-focus>
@@ -142,10 +163,10 @@ onDeactivated(cancelEdit)
           text-sm p2 border-1 transition-colors
           border-dark hover:text-primary
           btn-action-icon
-          :disabled="deleting || !isDirty || submitting"
+          :disabled="deleteBusy || !enableSaveButton || busy"
         >
           <template v-if="isEditing">
-            <span v-if="submitting" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
+            <span v-if="busy" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
               <span block i-ri:loader-2-fill aria-hidden="true" />
             </span>
             <span v-else block text-current i-ri:save-2-fill class="rtl-flip" />
@@ -154,7 +175,7 @@ onDeactivated(cancelEdit)
       </CommonTooltip>
       <CommonTooltip v-else :content="$t('list.edit')" no-auto-focus>
         <button
-          ref="editBtn"
+          ref="edit"
           type="button"
           text-sm p2 border-1 transition-colors
           border-dark hover:text-primary
@@ -166,6 +187,7 @@ onDeactivated(cancelEdit)
       </CommonTooltip>
       <CommonTooltip :content="$t('list.delete')" no-auto-focus>
         <button
+          ref="delete"
           type="button"
           text-sm p2 border-1 transition-colors
           border-dark hover:text-primary
@@ -173,7 +195,7 @@ onDeactivated(cancelEdit)
           :disabled="isEditing"
           @click.prevent="removeList"
         >
-          <span v-if="deleting" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
+          <span v-if="deleteBusy" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
             <span block i-ri:loader-2-fill aria-hidden="true" />
           </span>
           <span v-else block text-current i-ri:delete-bin-2-line class="rtl-flip" />

components/list/Lists.vue

@@ -3,9 +3,9 @@ const { userId } = defineProps<{
   userId: string
 }>()
 
-const { client } = useMasto()
+const { client } = $(useMasto())
-const paginator = client.value.v1.lists.list()
+const paginator = client.v1.lists.list()
-const listsWithUser = ref((await client.value.v1.accounts.$select(userId).lists.list()).map(list => list.id))
+const listsWithUser = ref((await client.v1.accounts.listLists(userId)).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.value.v1.lists.$select(listId).accounts.create({ accountIds: [userId] })
+      await client.v1.lists.addAccount(listId, { accountIds: [userId] })
       listsWithUser.value.push(listId)
     }
     else {
-      await client.value.v1.lists.$select(listId).accounts.remove({ accountIds: [userId] })
+      await client.v1.lists.removeAccount(listId, { 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 no-end-message :paginator="paginator">
     <template #default="{ item }">
       <div p4 hover:bg-active block w="100%" flex justify-between items-center gap-4>
         <p>{{ item.title }}</p>

components/magickeys/MagickeysKeyboardShortcuts.vue

@@ -1,166 +0,0 @@
-<script setup lang="ts">
-const emit = defineEmits(['close'])
-const { t } = useI18n()
-
-/* TODOs:
- * - I18n
- */
-
-interface ShortcutDef {
-  keys: string[]
-  isSequence: boolean
-}
-
-interface ShortcutItem {
-  description: string
-  shortcut: ShortcutDef
-}
-
-interface ShortcutItemGroup {
-  name: string
-  items: ShortcutItem[]
-}
-
-const isMac = useIsMac()
-const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
-
-const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
-  {
-    name: t('magic_keys.groups.navigation.title'),
-    items: [
-      {
-        description: t('magic_keys.groups.navigation.shortcut_help'),
-        shortcut: { keys: ['?'], isSequence: false },
-      },
-      // {
-      //   description: t('magic_keys.groups.navigation.next_status'),
-      //   shortcut: { keys: ['j'], isSequence: false },
-      // },
-      // {
-      //   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 },
-      },
-      {
-        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 },
-      },
-    ],
-  },
-  {
-    name: t('magic_keys.groups.actions.title'),
-    items: [
-      {
-        description: t('magic_keys.groups.actions.search'),
-        shortcut: { keys: [modifierKeyName.value, 'k'], isSequence: false },
-      },
-      {
-        description: t('magic_keys.groups.actions.command_mode'),
-        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 },
-      },
-      {
-        description: t('magic_keys.groups.actions.boost'),
-        shortcut: { keys: ['b'], isSequence: false },
-      },
-    ],
-  },
-  {
-    name: t('magic_keys.groups.media.title'),
-    items: [],
-  },
-])
-</script>
-
-<template>
-  <div px-3 sm:px-5 py-2 sm:py-4 max-w-220 relative max-h-screen>
-    <button btn-action-icon absolute top-1 sm:top-2 right-1 sm:right-2 m1 :aria-label="$t('modals.aria_label_close')" @click="emit('close')">
-      <div i-ri:close-fill />
-    </button>
-    <h2 text-xl font-700 mb3>
-      {{ $t('magic_keys.dialog_header') }}
-    </h2>
-    <div mb2 grid grid-cols-1 md:grid-cols-3 gap-y- md:gap-x-6 lg:gap-x-8>
-      <div
-        v-for="group in shortcutItemGroups"
-        :key="group.name"
-      >
-        <h3 font-700 my-2 text-lg>
-          {{ group.name }}
-        </h3>
-        <div
-          v-for="item in group.items"
-          :key="item.description"
-          flex my-1 lg:my-2 justify-between place-items-center max-w-full text-base
-        >
-          <div mr-2 break-words overflow-hidden leading-4 h-full inline-block align-middle>
-            {{ item.description }}
-          </div>
-          <div>
-            <template
-              v-for="(key, idx) in item.shortcut.keys"
-              :key="idx"
-            >
-              <span v-if="idx !== 0" mx1 text-sm op80>{{ item.shortcut.isSequence ? $t('magic_keys.sequence_then') : '+' }}</span>
-              <code class="px2 md:px1.5 lg:px2 lg:px2 py0 lg:py-0.5" rounded bg-code border="px $c-border-code" shadow-sm my1 font-mono font-600>{{ key }}</code>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

components/main/MainContent.vue

@@ -8,34 +8,19 @@ defineProps<{
   noOverflowHidden?: boolean
 }>()
 
-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)
-const sticky = computed(() => route.path?.startsWith('/settings/'))
-const containerClass = computed(() => {
-  // we keep original behavior when not in settings page and when the window height is smaller than the container height
-  if (!isHydrated.value || !sticky.value || (windowHeight.value < containerHeight.value))
-    return null
-
-  return 'lg:sticky lg:top-0'
-})
 </script>
 
 <template>
-  <div ref="container" :class="containerClass">
+  <div>
     <div
-      sticky top-0 z10
+      sticky top-0 z10 backdrop-blur
       pt="[env(safe-area-inset-top,0)]"
-      bg="[rgba(var(--rgb-bg-base),0.7)]"
+      border="b base" 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 justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex">
         <div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>
           <NuxtLink
             v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
@@ -44,25 +29,23 @@ const containerClass = computed(() => {
           >
             <div i-ri:arrow-left-line class="rtl-flip" />
           </NuxtLink>
-          <div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-start native-mac:text-center">
+          <div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-center native-mac:text-center native-mac:sm:justify-start">
             <slot name="title" />
           </div>
           <div sm:hidden h-7 w-1px />
         </div>
         <div flex items-center flex-shrink-0 gap-x-2>
           <slot name="actions" />
-          <PwaBadge xl:hidden />
+          <PwaBadge lg:hidden />
           <NavUser v-if="isHydrated" />
           <NavUserSkeleton v-else />
         </div>
       </div>
-      <slot name="header">
+      <slot name="header" />
-        <div hidden />
-      </slot>
     </div>
-    <PwaInstallPrompt xl:hidden />
+    <div :class="{ 'xl:block': $route.name !== 'tag' }" hidden h-6 />
+    <PwaInstallPrompt lg:hidden />
     <div :class="isHydrated && wideLayout ? 'xl:w-full sm:max-w-600px' : 'sm:max-w-600px md:shrink-0'" m-auto>
-      <div hidden :class="{ 'xl:block': $route.name !== 'tag' && !$slots.header }" h-6 />
       <slot />
     </div>
   </div>

components/modal/DurationPicker.vue

@@ -1,45 +0,0 @@
-<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,55 +1,26 @@
 <script setup lang="ts">
-import type { ConfirmDialogChoice, ConfirmDialogOptions } from '~/types'
+import type { ConfirmDialogChoice, ConfirmDialogLabel } from '~/types'
-import DurationPicker from '~/components/modal/DurationPicker.vue'
 
-const props = defineProps<ConfirmDialogOptions>()
+defineProps<ConfirmDialogLabel>()
 
 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>
+    <div font-bold text-lg text-center>
       {{ 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="handleChoice('cancel')">
+      <button btn-text @click="emit('choice', 'cancel')">
         {{ cancel || $t('confirm.common.cancel') }}
       </button>
-      <button btn-solid :disabled="!isValidDuration" @click="handleChoice('confirm')">
+      <button btn-solid @click="emit('choice', 'confirm')">
         {{ confirm || $t('confirm.common.confirm') }}
       </button>
     </div>

components/modal/ModalContainer.vue

@@ -7,11 +7,9 @@ import {
   isEditHistoryDialogOpen,
   isErrorDialogOpen,
   isFavouritedBoostedByDialogOpen,
-  isKeyboardShortcutsDialogOpen,
   isMediaPreviewOpen,
   isPreviewHelpOpen,
   isPublishDialogOpen,
-  isReportDialogOpen,
   isSigninDialogOpen,
 } from '~/composables/dialog'
 
@@ -34,21 +32,21 @@ useEventListener('keydown', (e: KeyboardEvent) => {
   }
 })
 
-function handlePublished(status: mastodon.v1.Status) {
+const handlePublished = (status: mastodon.v1.Status) => {
   lastPublishDialogStatus.value = status
   isPublishDialogOpen.value = false
 }
 
-function handlePublishClose() {
+const handlePublishClose = () => {
   lastPublishDialogStatus.value = null
 }
 
-function handleConfirmChoice(choice: ConfirmDialogChoice) {
+const handleConfirmChoice = (choice: ConfirmDialogChoice) => {
   confirmDialogChoice.value = choice
   isConfirmDialogOpen.value = false
 }
 
-function handleFavouritedBoostedByClose() {
+const handleFavouritedBoostedByClose = () => {
   isFavouritedBoostedByDialogOpen.value = false
 }
 </script>
@@ -100,11 +98,5 @@ function handleFavouritedBoostedByClose() {
     >
       <StatusFavouritedBoostedBy />
     </ModalDialog>
-    <ModalDialog v-model="isKeyboardShortcutsDialogOpen" max-w-full sm:max-w-140 md:max-w-170 lg:max-w-220 md:min-w-160>
-      <MagickeysKeyboardShortcuts @close="closeKeyboardShortcuts()" />
-    </ModalDialog>
-    <ModalDialog v-model="isReportDialogOpen" keep-alive max-w-175>
-      <ReportModal v-if="reportAccount" :account="reportAccount" :status="reportStatus" @close="closeReportDialog()" />
-    </ModalDialog>
   </template>
 </template>

components/modal/ModalDialog.vue

@@ -36,10 +36,6 @@ export interface Props {
   dialogLabelledBy?: string
 }
 
-defineOptions({
-  inheritAttrs: false,
-})
-
 const props = withDefaults(defineProps<Props>(), {
   zIndex: 100,
   closeByMask: true,
@@ -49,14 +45,20 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   /** v-model dialog visibility */
-  (event: 'close'): void
+  (event: 'close',): void
 }>()
 
-const visible = defineModel<boolean>({ required: true })
+const { modelValue: visible } = defineModel<{
+  /** v-model dislog visibility */
+  modelValue: boolean
+}>()
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const deactivated = useDeactivated()
 const route = useRoute()
-const userSettings = useUserSettings()
 
 /** scrollable HTML element */
 const elDialogMain = ref<HTMLDivElement>()
@@ -78,8 +80,6 @@ defineExpose({
 
 /** close the dialog */
 function close() {
-  if (!visible.value)
-    return
   visible.value = false
   emit('close')
 }
@@ -119,11 +119,9 @@ const isVShow = computed(() => {
     : true
 })
 
-function bindTypeToAny($attrs: any) {
+const bindTypeToAny = ($attrs: any) => $attrs as any
-  return $attrs as any
-}
 
-function trapFocusDialog() {
+const trapFocusDialog = () => {
   if (isVShow.value)
     nextTick().then(() => activate())
 }
@@ -157,13 +155,7 @@ useEventListener('keydown', (e: KeyboardEvent) => {
         <!-- corresponding to issue: #106, so please don't remove it. -->
 
         <!-- Mask layer: blur -->
-        <div
+        <div class="dialog-mask" absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter backdrop-blur-sm touch-none />
-          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,7 +37,7 @@ onUnmounted(() => locked.value = false)
 </script>
 
 <template>
-  <div relative h-full w-full flex pt-12 @click="onClick">
+  <div relative h-full w-full flex pt-12 w-100vh @click="onClick">
     <button
       v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
       hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5
@@ -53,19 +53,21 @@ onUnmounted(() => locked.value = false)
       <div i-ri:arrow-left-s-line text-white />
     </button>
 
-    <div flex="~ col center" h-full w-full>
+    <div flex flex-row items-center mxa>
-      <ModalMediaPreviewCarousel v-model="index" :media="mediaPreviewList" @close="emit('close')" />
+      <div flex="~ col center" max-h-full max-w-full>
+        <ModalMediaPreviewCarousel v-model="index" :media="mediaPreviewList" @close="emit('close')" />
 
-      <div bg="black/30" dark:bg="white/10" mb-6 mt-4 text-white rounded-full flex="~ center shrink-0" overflow-hidden>
+        <div bg="black/30" dark:bg="white/10" ms-4 mb-6 mt-4 text-white rounded-full flex="~ center shrink-0" overflow-hidden>
-        <div v-if="mediaPreviewList.length > 1" p="y-1 x-3" rounded-r-0 shrink-0>
+          <div v-if="mediaPreviewList.length > 1" p="y-1 x-3" rounded-r-0 shrink-0>
-          {{ index + 1 }} / {{ mediaPreviewList.length }}
+            {{ index + 1 }} / {{ mediaPreviewList.length }}
+          </div>
+          <p
+            v-if="current.description" bg="dark/30" dark:bg="white/10" p="y-1 x-3" rounded-ie-full line-clamp-1
+            ws-pre-wrap break-all :title="current.description" w-full
+          >
+            {{ current.description }}
+          </p>
         </div>
-        <p
-          v-if="current.description" bg="dark/30" dark:bg="white/10" p="y-1 x-3" rounded-ie-full line-clamp-1
-          ws-pre-wrap break-all :title="current.description" w-full
-        >
-          {{ current.description }}
-        </p>
       </div>
     </div>
 

components/modal/ModalMediaPreviewCarousel.vue

@@ -1,285 +1,105 @@
 <script setup lang="ts">
-import type { Vector2 } from '@vueuse/gesture'
+import { SwipeDirection } from '@vueuse/core'
 import { useGesture } from '@vueuse/gesture'
+import type { PermissiveMotionProperties } from '@vueuse/motion'
 import { useReducedMotion } from '@vueuse/motion'
 import type { mastodon } from 'masto'
 
-const { media = [] } = defineProps<{
+const { media = [], threshold = 20 } = defineProps<{
   media?: mastodon.v1.MediaAttachment[]
+  threshold?: number
 }>()
 
 const emit = defineEmits<{
   (event: 'close'): void
 }>()
 
-const modelValue = defineModel<number>({ required: true })
+const { modelValue } = defineModel<{
+  modelValue: number
+}>()
 
-const slideGap = 20
+const target = ref()
-const doubleTapThreshold = 250
 
-const view = ref()
+const animateTimeout = useTimeout(10)
-const slider = ref()
+const reduceMotion = process.server ? ref(false) : useReducedMotion()
-const slide = ref()
-const image = ref()
 
-const reduceMotion = import.meta.server ? ref(false) : useReducedMotion()
+const canAnimate = computed(() => !reduceMotion.value && animateTimeout.value)
-const isInitialScrollDone = useTimeout(350)
-const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value)
 
-const scale = ref(1)
+const { motionProperties } = useMotionProperties(target, {
-const x = ref(0)
+  cursor: 'grab',
-const y = ref(0)
+  scale: 1,
+  x: 0,
+  y: 0,
+})
+const { set } = useSpring(motionProperties as Partial<PermissiveMotionProperties>)
 
-const isDragging = ref(false)
+function resetZoom() {
-const isPinching = ref(false)
+  set({ scale: 1 })
-
-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
-  y.value = 0
 }
 
-onMounted(() => {
+watch(modelValue, resetZoom)
-  const slideGapAsScale = slideGap / view.value.clientWidth
-  maxZoomOut.value = 1 - slideGapAsScale
 
-  goToFocusedSlide()
+const { width, height } = useElementSize(target)
+const { isSwiping, lengthX, lengthY, direction } = useSwipe(target, {
+  threshold: 5,
+  passive: false,
+  onSwipeEnd(e, direction) {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    if (direction === SwipeDirection.RIGHT && Math.abs(distanceX.value) > threshold) {
+      modelValue.value = Math.max(0, modelValue.value - 1)
+      resetZoom()
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    if (direction === SwipeDirection.LEFT && Math.abs(distanceX.value) > threshold) {
+      modelValue.value = Math.min(media.length - 1, modelValue.value + 1)
+      resetZoom()
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    if (direction === SwipeDirection.UP && Math.abs(distanceY.value) > threshold)
+      emit('close')
+  },
 })
-watch(modelValue, goToFocusedSlide)
 
-let lastOrigin = [0, 0]
-let initialScale = 0
 useGesture({
-  onPinch({ first, initial: [initialDistance], movement: [deltaDistance], da: [distance], origin, touches }) {
+  onPinch({ offset: [distance, angle] }) {
-    isPinching.value = true
+    set({ scale: Math.max(0.5, 1 + distance / 200) })
-
-    if (first) {
-      initialScale = scale.value
-    }
-    else {
-      if (touches === 0)
-        handleMouseWheelZoom(initialScale, deltaDistance, origin)
-      else
-        handlePinchZoom(initialScale, initialDistance, distance, origin)
-    }
-
-    lastOrigin = origin
   },
-  onPinchEnd() {
+  onMove({ movement: [x, y], dragging, pinching }) {
-    isPinching.value = false
+    if (dragging && !pinching)
-    isDragging.value = false
+      set({ x, y })
-
-    if (!isZoomedIn.value)
-      goToFocusedSlide()
-  },
-  onDrag({ movement, delta, pinching, tap, last, swipe, event, xy }) {
-    event.preventDefault()
-
-    if (pinching)
-      return
-
-    if (last)
-      handleLastDrag(tap, swipe, movement, xy)
-    else
-      handleDrag(delta, movement)
   },
 }, {
-  domTarget: view,
+  domTarget: target,
   eventOptions: {
-    passive: false,
+    passive: true,
   },
 })
 
-const shiftRestrictions = computed(() => {
+const distanceX = computed(() => {
-  const focusedImage = image.value[modelValue.value]
+  if (width.value === 0)
-  const focusedSlide = slide.value[modelValue.value]
+    return 0
 
-  const scaledImageWidth = focusedImage.offsetWidth * scale.value
+  if (!isSwiping.value || (direction.value !== SwipeDirection.LEFT && direction.value !== SwipeDirection.RIGHT))
-  const scaledHorizontalOverflow = scaledImageWidth / 2 - view.value.clientWidth / 2 + slideGap
+    return modelValue.value * 100 * -1
-  const horizontalOverflow = Math.max(0, scaledHorizontalOverflow / scale.value)
 
-  const scaledImageHeight = focusedImage.offsetHeight * scale.value
+  return (lengthX.value / width.value) * 100 * -1 + (modelValue.value * 100) * -1
-  const scaledVerticalOverflow = scaledImageHeight / 2 - view.value.clientHeight / 2 + slideGap
-  const verticalOverflow = Math.max(0, scaledVerticalOverflow / scale.value)
-
-  return {
-    left: focusedSlide.offsetLeft - horizontalOverflow,
-    right: focusedSlide.offsetLeft + horizontalOverflow,
-    top: focusedSlide.offsetTop - verticalOverflow,
-    bottom: focusedSlide.offsetTop + verticalOverflow,
-  }
 })
 
-function handlePinchZoom(initialScale: number, initialDistance: number, distance: number, [originX, originY]: Vector2) {
+const distanceY = computed(() => {
-  scale.value = initialScale * (distance / initialDistance)
+  if (height.value === 0 || !isSwiping.value || direction.value !== SwipeDirection.UP)
-  scale.value = Math.max(maxZoomOut.value, scale.value)
+    return 0
 
-  const deltaCenterX = originX - lastOrigin[0]
+  return (lengthY.value / height.value) * 100 * -1
-  const deltaCenterY = originY - lastOrigin[1]
-
-  handleZoomDrag([deltaCenterX, deltaCenterY])
-}
-
-function handleMouseWheelZoom(initialScale: number, deltaDistance: number, [originX, originY]: Vector2) {
-  scale.value = initialScale + (deltaDistance / 1000)
-  scale.value = Math.max(maxZoomOut.value, scale.value)
-
-  const deltaCenterX = lastOrigin[0] - originX
-  const deltaCenterY = lastOrigin[1] - originY
-
-  handleZoomDrag([deltaCenterX, deltaCenterY])
-}
-
-function handleLastDrag(tap: boolean, swipe: Vector2, movement: Vector2, position: Vector2) {
-  isDragging.value = false
-
-  if (tap)
-    handleTap(position)
-  else if (swipe[0] || swipe[1])
-    handleSwipe(swipe, movement)
-  else if (!isZoomedIn.value)
-    slideToClosestSlide()
-}
-
-let lastTapAt = 0
-function handleTap([positionX, positionY]: Vector2) {
-  const now = Date.now()
-  const isDoubleTap = now - lastTapAt < doubleTapThreshold
-  lastTapAt = now
-
-  if (!isDoubleTap)
-    return
-
-  if (isZoomedIn.value) {
-    goToFocusedSlide()
-  }
-  else {
-    const focusedSlideBounding = slide.value[modelValue.value].getBoundingClientRect()
-    const slideCenterX = focusedSlideBounding.left + focusedSlideBounding.width / 2
-    const slideCenterY = focusedSlideBounding.top + focusedSlideBounding.height / 2
-
-    scale.value = 3
-    x.value += positionX - slideCenterX
-    y.value += positionY - slideCenterY
-    restrictShiftToInsideSlide()
-  }
-}
-
-function handleSwipe([horiz, vert]: Vector2, [movementX, movementY]: Vector2) {
-  if (isZoomedIn.value || isPinching.value)
-    return
-
-  const isHorizontalDrag = Math.abs(movementX) >= Math.abs(movementY)
-
-  if (isHorizontalDrag) {
-    if (horiz === 1) // left
-      modelValue.value = Math.max(0, modelValue.value - 1)
-    if (horiz === -1) // right
-      modelValue.value = Math.min(media.length - 1, modelValue.value + 1)
-  }
-  else if (vert === 1 || vert === -1) {
-    emit('close')
-  }
-
-  goToFocusedSlide()
-}
-
-function slideToClosestSlide() {
-  const startOfFocusedSlide = slide.value[modelValue.value].offsetLeft * scale.value
-  const slideWidth = slide.value[modelValue.value].offsetWidth * scale.value
-
-  if (x.value > startOfFocusedSlide + slideWidth / 2)
-    modelValue.value = Math.min(media.length - 1, modelValue.value + 1)
-  else if (x.value < startOfFocusedSlide - slideWidth / 2)
-    modelValue.value = Math.max(0, modelValue.value - 1)
-
-  goToFocusedSlide()
-}
-
-function handleDrag(delta: Vector2, movement: Vector2) {
-  isDragging.value = true
-
-  if (isZoomedIn.value)
-    handleZoomDrag(delta)
-  else
-    handleSlideDrag(movement)
-}
-
-function handleZoomDrag([deltaX, deltaY]: Vector2) {
-  x.value -= deltaX / scale.value
-  y.value -= deltaY / scale.value
-
-  restrictShiftToInsideSlide()
-}
-
-function handleSlideDrag([movementX, movementY]: Vector2) {
-  goToFocusedSlide()
-
-  if (Math.abs(movementY) > Math.abs(movementX)) // vertical movement is more than horizontal
-    y.value -= movementY / scale.value
-  else
-    x.value -= movementX / scale.value
-
-  if (media.length === 1)
-    x.value = 0
-}
-
-function restrictShiftToInsideSlide() {
-  x.value = Math.min(shiftRestrictions.value.right, Math.max(shiftRestrictions.value.left, x.value))
-  y.value = Math.min(shiftRestrictions.value.bottom, Math.max(shiftRestrictions.value.top, y.value))
-}
-
-const sliderStyle = computed(() => {
-  const style = {
-    transform: `scale(${scale.value}) translate(${-x.value}px, ${-y.value}px)`,
-    transition: 'none',
-    gap: `${slideGap}px`,
-  }
-
-  if (canAnimate.value && !isDragging.value && !isPinching.value)
-    style.transition = 'all 0.3s ease'
-
-  return style
 })
-
-const imageStyle = computed(() => ({
-  cursor: isDragging.value ? 'grabbing' : 'grab',
-}))
 </script>
 
 <template>
-  <div ref="view" flex flex-row h-full w-full overflow-hidden>
+  <div ref="target" flex flex-row max-h-full max-w-full overflow-hidden>
-    <div ref="slider" :style="sliderStyle" w-full h-full flex items-center>
+    <div flex :style="{ transform: `translateX(${distanceX}%) translateY(${distanceY}%)`, transition: isSwiping ? 'none' : canAnimate ? 'all 0.5s ease' : 'none' }">
-      <div
+      <div v-for="item in media" :key="item.id" p4 select-none w-full flex-shrink-0 flex flex-col place-items-center>
-        v-for="item in media"
+        <img max-h-full max-w-full :draggable="false" select-none :src="item.url || item.previewUrl" :alt="item.description || ''">
-        :key="item.id"
-        ref="slide"
-        flex-shrink-0
-        w-full
-        h-full
-        flex
-        items-center
-        justify-center
-      >
-        <component
-          :is="item.type === 'gifv' ? 'video' : 'img'"
-          ref="image"
-          :autoplay="enableAutoplay"
-          controls
-          loop
-          select-none
-          max-w-full
-          max-h-full
-          :style="imageStyle"
-          :draggable="false"
-          :src="item.url || item.previewUrl"
-          :alt="item.description || ''"
-        />
       </div>
     </div>
   </div>

components/nav/NavBottom.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
 // only one icon can be lit up at the same time
-import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
-
 const moreMenuVisible = ref(false)
 
 const { notifications } = useNotifications()
-const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
-const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
 </script>
 
 <template>
@@ -17,13 +13,13 @@ const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLO
   >
     <!-- 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">
+      <NuxtLink to="/home" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @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">
+      <NuxtLink :to="isHydrated ? `/${currentServer}/explore` : '/explore'" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:search-line />
       </NuxtLink>
-      <NuxtLink :to="`/notifications/${lastAccessedNotificationRoute}`" :aria-label="$t('nav.notifications')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+      <NuxtLink to="/notifications" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @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>
@@ -31,30 +27,30 @@ const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLO
           </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">
+      <NuxtLink to="/conversations" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:at-line />
       </NuxtLink>
     </template>
     <template v-else>
-      <NuxtLink :to="`/${currentServer}/explore/${lastAccessedExploreRoute}`" :aria-label="$t('nav.explore')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
+      <NuxtLink :to="`/${currentServer}/explore`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
-        <div i-ri:compass-3-line />
+        <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">
+      <NuxtLink group :to="`/${currentServer}/public/local`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @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">
+      <NuxtLink :to="`/${currentServer}/public`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @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
+      <label
         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'" />
+        <input type="checkbox" z="-1" absolute inset-0 opacity-0 @click="toggleVisible">
-      </button>
+        <span v-show="show" i-ri:close-fill />
+        <span v-show="!show" i-ri:more-fill />
+      </label>
     </NavBottomMoreMenu>
   </nav>
 </template>

components/nav/NavBottomMoreMenu.vue

@@ -1,27 +1,22 @@
 <script lang="ts" setup>
-import { invoke } from '@vueuse/core'
+let { modelValue } = $defineModel<{
-
+  modelValue: boolean
-const modelValue = defineModel<boolean>({ required: true })
+}>()
 const colorMode = useColorMode()
 
 const userSettings = useUserSettings()
 
-const drawerEl = ref<HTMLDivElement>()
-
 function toggleVisible() {
-  modelValue.value = !modelValue.value
+  modelValue = !modelValue
 }
 
 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) {
+    if (modelValue) {
       document.removeEventListener('click', clickEvent)
-      modelValue.value = false
+      modelValue = false
     }
   }
 }
@@ -30,7 +25,7 @@ function toggleDark() {
   colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
 }
 
-watch(modelValue, (val) => {
+watch($$(modelValue), (val) => {
   if (val && typeof document !== 'undefined')
     document.addEventListener('click', clickEvent)
 })
@@ -38,80 +33,6 @@ watch(modelValue, (val) => {
 onBeforeUnmount(() => {
   document.removeEventListener('click', clickEvent)
 })
-
-// Pull down to close
-const { dragging, dragDistance } = invoke(() => {
-  const triggerDistance = 120
-
-  let scrollTop = 0
-  let beforeTouchPointY = 0
-
-  const dragDistance = ref(0)
-  const dragging = ref(false)
-
-  useEventListener(drawerEl, 'scroll', (e: Event) => {
-    scrollTop = (e.target as HTMLDivElement).scrollTop
-
-    // Prevent the page from scrolling when the drawer is being dragged.
-    if (dragDistance.value > 0)
-      (e.target as HTMLDivElement).scrollTop = 0
-  }, { passive: true })
-
-  useEventListener(drawerEl, 'touchstart', (e: TouchEvent) => {
-    if (!modelValue.value)
-      return
-
-    beforeTouchPointY = e.touches[0].pageY
-    dragDistance.value = 0
-  }, { passive: true })
-
-  useEventListener(drawerEl, 'touchmove', (e: TouchEvent) => {
-    if (!modelValue.value)
-      return
-
-    // Do not move the entire drawer when its contents are not scrolled to the top.
-    if (scrollTop > 0 && dragDistance.value <= 0) {
-      dragging.value = false
-      beforeTouchPointY = e.touches[0].pageY
-      return
-    }
-
-    const { pageY } = e.touches[0]
-
-    // Calculate the drag distance.
-    dragDistance.value += pageY - beforeTouchPointY
-    if (dragDistance.value < 0)
-      dragDistance.value = 0
-    beforeTouchPointY = pageY
-
-    // Marked as dragging.
-    if (dragDistance.value > 1)
-      dragging.value = true
-
-    // Prevent the page from scrolling when the drawer is being dragged.
-    if (dragDistance.value > 0) {
-      if (e?.cancelable && e?.preventDefault)
-        e.preventDefault()
-      e?.stopPropagation()
-    }
-  }, { passive: true })
-
-  useEventListener(drawerEl, 'touchend', () => {
-    if (!modelValue.value)
-      return
-
-    if (dragDistance.value >= triggerDistance)
-      modelValue.value = false
-
-    dragging.value = false
-    // code
-  }, { passive: true })
-
-  return {
-    dragDistance,
-    dragging,
-  }
-})
 </script>
 
 <template>
@@ -120,12 +41,12 @@ const { dragging, dragDistance } = invoke(() => {
 
     <!-- Drawer -->
     <Transition
-      enter-active-class="transition duration-250 ease-out"
+      enter-active-class="transition duration-250 ease-out children:(transition duration-250 ease-out)"
-      enter-from-class="opacity-0 children:(translate-y-full)"
+      enter-from-class="opacity-0 children:(transform translate-y-full)"
-      enter-to-class="opacity-100 children:(translate-y-0)"
+      enter-to-class="opacity-100 children:(transform translate-y-0)"
-      leave-active-class="transition duration-250 ease-in"
+      leave-active-class="transition duration-250 ease-in  children:(transition duration-250 ease-in)"
-      leave-from-class="opacity-100 children:(translate-y-0)"
+      leave-from-class="opacity-100 children:(transform translate-y-0)"
-      leave-to-class="opacity-0 children:(translate-y-full)"
+      leave-to-class="opacity-0 children:(transform translate-y-full)"
     >
       <div
         v-show="modelValue"
@@ -137,19 +58,10 @@ const { dragging, dragDistance } = invoke(() => {
         <!-- corresponding to issue: #106, so please don't remove it. -->
         <div absolute inset-0 opacity-0 h="[calc(100vh+0.5px)]" />
         <div
-          ref="drawerEl"
+
-          :style="{
-            transform: dragging ? `translateY(${dragDistance}px)` : '',
-          }"
-          :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
+          rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter backdrop-blur-md
           border-t-1 border-base
         >
           <!-- Nav -->
@@ -181,9 +93,9 @@ const { dragging, dragDistance } = invoke(() => {
               transition-colors duration-200 transform
               hover="bg-gray-100 dark:(bg-gray-700 text-white)"
               :aria-label="$t('nav.zen_mode')"
-              @click="togglePreferences('zenMode')"
+              @click="userSettings.zenMode = !userSettings.zenMode"
             >
-              <span :class="getPreferences(userSettings, 'zenMode') ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'" class="flex-shrink-0 text-xl me-4 !align-middle" />
+              <span :class="userSettings.zenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'" class="flex-shrink-0 text-xl me-4 !align-middle" />
               {{ $t('nav.zen_mode') }}
             </button>
           </div>

components/nav/NavFooter.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-const buildInfo = useBuildInfo()
+const buildInfo = useAppConfig().buildInfo
 const timeAgoOptions = useTimeAgoOptions()
-const config = useRuntimeConfig()
+
 const userSettings = useUserSettings()
 
 const buildTimeDate = new Date(buildInfo.time)
@@ -23,14 +23,11 @@ function toggleDark() {
         <button
           flex
           text-lg
-          :class="getPreferences(userSettings, 'zenMode') ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
+          :class="userSettings.zenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
           :aria-label="$t('nav.zen_mode')"
-          @click="togglePreferences('zenMode')"
+          @click="userSettings.zenMode = !userSettings.zenMode"
         />
       </CommonTooltip>
-      <CommonTooltip :content="$t('magic_keys.dialog_header')">
-        <button flex i-ri:keyboard-box-line dark-i-ri:keyboard-box-line text-lg :aria-label="$t('magic_keys.dialog_header')" @click="toggleKeyboardShortcuts" />
-      </CommonTooltip>
       <CommonTooltip :content="$t('settings.about.sponsor_action')">
         <NuxtLink
           flex
@@ -68,7 +65,7 @@ function toggleDark() {
           target="_blank"
           font-mono
         >
-          {{ buildInfo.shortCommit }}
+          {{ buildInfo.commit.slice(0, 7) }}
         </NuxtLink>
       </template>
     </div>
@@ -76,9 +73,9 @@ function toggleDark() {
       <NuxtLink cursor-pointer hover:underline to="/settings/about">
         {{ $t('settings.about.label') }}
       </NuxtLink>
-      <template v-if="config.public.privacyPolicyUrl">
+      <template v-if="$config.public.privacyPolicyUrl">
         &middot;
-        <NuxtLink cursor-pointer hover:underline :to="config.public.privacyPolicyUrl">
+        <NuxtLink cursor-pointer hover:underline :to="$config.public.privacyPolicyUrl">
           {{ $t('nav.privacy') }}
         </NuxtLink>
       </template>

components/nav/NavLogo.vue

@@ -3,44 +3,27 @@
     xmlns="http://www.w3.org/2000/svg" w-full
     aspect="1/1" sm:h-8 xl:h-10 sm:w-8 xl:w-10 viewBox="0 0 250 250" fill="none"
   >
-    <mask
+    <mask id="a" width="240" height="234" x="4" y="1" maskUnits="userSpaceOnUse" style="mask-type:alpha">
-      id="a"
-      width="240"
-      height="234"
-      x="4"
-      y="1"
-      maskUnits="userSpaceOnUse"
-      style="mask-type:alpha"
-    >
       <path
-        id="path19"
         fill="#D9D9D9"
         d="M244 123c0 64.617-38.383 112-103 112-64.617 0-103-30.883-103-95.5C38 111.194-8.729 36.236 8 16 29.46-9.959 88.689 6 125 6c64.617 0 119 52.383 119 117Z"
       />
     </mask>
-    <g
+    <g mask="url(#a)">
-      id="g28"
-      mask="url(#a)"
-      transform="matrix(0.90923731,0,0,1.0049564,13.520015,-3.1040835)"
-    >
       <path
-        id="path22"
         class="body"
-        d="m 116.94,88.1 c -13.344,1.552 -20.436,-2.019 -24.706,10.71 0,0 14.336,21.655 52.54,21.112 -2.135,8.848 -1.144,15.368 -1.144,23.207 0,26.079 -20.589,48.821 -65.961,48.821 -23.03,0 -51.015,4.191 -72.367,15.911 -15.175,8.305 -27.048,20.336 -32.302,37.023 l 5.956,8.461 11.4,0.155 v 47.889 l -13.91,21.966 3.998,63.645 H -6.364 L -5.22,335.773 C 1.338,331.892 16.36,321.802 29.171,306.279 46.557,285.4 59.902,255.052 44.193,217.486 l 11.744,-5.045 c 12.887,30.814 8.388,57.514 -2.898,79.013 21.58,-0.698 40.11,-2.095 55.819,-4.734 l -3.584,-43.698 12.659,-1.087 L 129.98,387 h 13.116 l 2.212,-94.459 c 10.447,-4.502 34.239,-21.034 45.372,-78.47 1.372,-6.986 2.135,-12.885 2.516,-17.93 1.754,-12.806 2.745,-27.243 3.051,-43.698 l -18.683,-5.976 h 57.42 l 5.567,-12.807 c -5.414,0.233 -11.896,-2.639 -11.896,-2.639 l 1.297,-6.209 H 242 L 176.801,90.428 c -7.244,2.794 -14.87,6.442 -20.208,10.866 -4.27,-3.105 -19.063,-12.807 -39.653,-13.195 z"
+        d="M116.94 88.1c-13.344 1.552-20.436-2.019-24.706 10.71 0 0 14.336 21.655 52.54 21.112-2.135 8.848-1.144 15.368-1.144 23.207 0 26.079-20.589 48.821-65.961 48.821-23.03 0-51.015 4.191-72.367 15.911-15.175 8.305-27.048 20.336-32.302 37.023l5.956 8.461 11.4.155v47.889l-13.91 21.966L-19.556 387h13.192l1.144-51.227c6.558-3.881 21.58-13.971 34.391-29.494 17.386-20.879 30.731-51.227 15.022-88.793l11.744-5.045c12.887 30.814 8.388 57.514-2.898 79.013 21.58-.698 40.11-2.095 55.819-4.734l-3.584-43.698 12.659-1.087L129.98 387h13.116l2.212-94.459c10.447-4.502 34.239-21.034 45.372-78.47 1.372-6.986 2.135-12.885 2.516-17.93 1.754-12.806 2.745-27.243 3.051-43.698l-18.683-5.976h57.42l5.567-12.807c-5.414.233-11.896-2.639-11.896-2.639l1.297-6.209H242l-65.199-34.384c-7.244 2.794-14.87 6.442-20.208 10.866-4.27-3.105-19.063-12.807-39.653-13.195Z"
       />
       <path
-        id="path24"
         class="wood"
-        d="M 6.217,24.493 18.494,21 c 5.948,21.577 13.345,33.375 22.648,39.352 8.388,5.099 19.75,5.239 31.799,4.579 C 69.433,63.767 66.154,62.137 63.104,59.886 56.317,54.841 50.522,46.458 46.175,31.246 l 12.201,-3.649 c 3.279,11.488 7.092,18.085 12.201,21.888 5.11,3.726 11.286,4.657 18.606,5.433 13.726,1.553 30.884,2.174 52.312,12.264 2.898,1.086 5.872,2.483 8.769,4.036 -0.381,-0.776 -0.762,-1.553 -1.296,-2.406 -3.66,-5.822 -10.828,-11.953 -24.097,-16.92 l 4.27,-12.109 c 21.581,7.917 30.121,19.171 33.553,28.097 3.965,10.168 1.525,18.124 1.525,18.124 -3.05,1.009 -6.1,2.406 -9.608,3.492 -6.634,-4.579 -12.887,-8.033 -18.835,-10.75 C 113.814,70.442 92.31,76.108 73.246,77.893 58.91,79.213 45.794,78.591 34.432,71.295 23.222,64.155 13.385,50.495 6.217,24.493 Z"
+        d="M6.217 24.493 18.494 21c5.948 21.577 13.345 33.375 22.648 39.352 8.388 5.099 19.75 5.239 31.799 4.579-3.508-1.164-6.787-2.794-9.837-5.045-6.787-5.045-12.582-13.428-16.929-28.64l12.201-3.649c3.279 11.488 7.092 18.085 12.201 21.888 5.11 3.726 11.286 4.657 18.606 5.433 13.726 1.553 30.884 2.174 52.312 12.264 2.898 1.086 5.872 2.483 8.769 4.036-.381-.776-.762-1.553-1.296-2.406-3.66-5.822-10.828-11.953-24.097-16.92l4.27-12.109c21.581 7.917 30.121 19.171 33.553 28.097 3.965 10.168 1.525 18.124 1.525 18.124-3.05 1.009-6.1 2.406-9.608 3.492-6.634-4.579-12.887-8.033-18.835-10.75-21.962-8.304-43.466-2.638-62.53-.853-14.336 1.32-27.452.698-38.814-6.598-11.21-7.14-21.047-20.8-28.215-46.802Z"
       />
       <path
-        id="path26"
         class="wood"
-        d="M 90.098,45.294 C 87.582,39.55 86.057,32.487 86.743,23.794 l 12.659,0.932 c -0.763,10.555 2.897,17.696 7.015,22.353 -5.338,-0.931 -10.447,-1.04 -16.319,-1.785 z m 80.069,-1.32 8.312,-9.702 c 21.58,19.094 8.159,46.415 8.159,46.415 l -11.819,-1.32 c -0.382,-6.24 -1.144,-17.836 -6.635,-24.371 3.584,1.84 6.635,3.865 9.99,6.908 0,-5.666 -1.754,-12.341 -8.007,-17.93 z"
+        d="M90.098 45.294c-2.516-5.744-4.041-12.807-3.355-21.5l12.659.932c-.763 10.555 2.897 17.696 7.015 22.353-5.338-.931-10.447-1.04-16.319-1.785ZM170.167 43.974l8.312-9.702c21.58 19.094 8.159 46.415 8.159 46.415l-11.819-1.32c-.382-6.24-1.144-17.836-6.635-24.371 3.584 1.84 6.635 3.865 9.99 6.908 0-5.666-1.754-12.341-8.007-17.93Z"
       />
     </g>
   </svg>
-
   </span>
 </template>
 

components/nav/NavSide.vue

@@ -1,22 +1,18 @@
 <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>
-  <nav sm:px3 flex="~ col gap2" shrink text-size-base leading-normal md:text-lg h-full mt-1 overflow-y-auto>
+  <nav sm:px3 flex="~ col gap2" shrink text-size-base leading-normal md:text-lg h-full mt-1>
-    <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" xl:hidden :command="command" />
+    <SearchWidget lg:ms-1 lg:me-5 hidden xl:block />
+    <NavSideItem :text="$t('nav.search')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" hidden sm:block xl:hidden :command="command" />
 
-    <div class="spacer" shrink xl:hidden />
+    <div shrink hidden sm:block mt-2 />
     <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
-    <NavSideItem :text="$t('nav.notifications')" :to="`/notifications/${lastAccessedNotificationRoute}`" icon="i-ri:notification-4-line" user-only :command="command">
+    <NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command">
       <template #icon>
         <div flex relative>
           <div class="i-ri:notification-4-line" text-xl />
@@ -27,31 +23,17 @@ const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLO
       </template>
     </NavSideItem>
     <NavSideItem :text="$t('nav.conversations')" to="/conversations" icon="i-ri:at-line" user-only :command="command" />
-    <NavSideItem :text="$t('nav.favourites')" to="/favourites" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" user-only :command="command" />
+    <NavSideItem :text="$t('nav.favourites')" to="/favourites" icon="i-ri:heart-3-line" user-only :command="command" />
     <NavSideItem :text="$t('nav.bookmarks')" to="/bookmarks" icon="i-ri:bookmark-line" user-only :command="command" />
-
-    <div class="spacer" shrink hidden sm:block />
     <NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
 
-    <div class="spacer" shrink hidden sm:block />
+    <div shrink hidden sm:block mt-4 />
-    <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore/${lastAccessedExploreRoute}` : `/explore/${lastAccessedExploreRoute}`" icon="i-ri:compass-3-line" :command="command" />
+    <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" xs:hidden sm:hidden xl:block />
     <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 />
+    <div shrink hidden sm:block mt-4 />
     <NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />
   </nav>
 </template>
-
-<style scoped>
-  .spacer {
-    margin-top: 0.5em;
-  }
-  @media screen and ( max-height: 920px ) and ( min-width: 640px ) {
-    .spacer {
-      margin-top: 0;
-    }
-  }
-</style>

components/nav/NavSideItem.vue

@@ -10,8 +10,8 @@ const props = withDefaults(defineProps<{
 })
 
 defineSlots<{
-  icon: (props: object) => void
+  icon: {}
-  default: (props: object) => void
+  default: {}
 }>()
 
 const router = useRouter()
@@ -28,13 +28,13 @@ useCommand({
   },
 })
 
-const activeClass = ref('text-primary')
+let 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.value = ''
+  activeClass = ''
   await nextTick()
-  activeClass.value = 'text-primary'
+  activeClass = 'text-primary'
 })
 
 // Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items
@@ -55,23 +55,12 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
   >
     <CommonTooltip :disabled="!isMediumOrLargeScreen" :content="text" placement="right">
       <div
-        class="item"
         flex items-center gap4
+        w-fit rounded-3
+        px2 py2 mx3 sm:mxa
         xl="ml0 mr5 px5 w-auto"
-        :class="isSmallScreen
+        transition-100
-          ? `
+        group-hover="bg-active" group-focus-visible:ring="2 current"
-            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 />
@@ -83,28 +72,3 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
     </CommonTooltip>
   </NuxtLink>
 </template>
-
-<style scoped>
-  .item {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-  @media screen and ( max-height: 820px ) and ( min-width: 1280px ) {
-    .item {
-      padding-top: 0.25rem;
-      padding-bottom: 0.25rem;
-    }
-  }
-  @media screen and ( max-height: 780px ) and ( min-width: 640px ) {
-    .item {
-      padding-top: 0.35rem;
-      padding-bottom: 0.35rem;
-    }
-  }
-  @media screen and ( max-height: 780px ) and ( min-width: 1280px ) {
-    .item {
-      padding-top: 0.05rem;
-      padding-bottom: 0.05rem;
-    }
-  }
-</style>

components/nav/NavTitle.vue

@@ -5,7 +5,7 @@ const back = ref<any>('')
 
 const nuxtApp = useNuxtApp()
 
-function onClickLogo() {
+const onClickLogo = () => {
   nuxtApp.hooks.callHook('elk-logo:click')
 }
 
@@ -34,17 +34,15 @@ router.afterEach(() => {
       </div>
     </NuxtLink>
     <div
-      hidden xl:flex items-center me-8 mt-2 gap-1
+      hidden xl:flex items-center me-8 mt-2
+      :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
     >
-      <CommonTooltip :content="$t('nav.back')">
+      <NuxtLink
-        <NuxtLink
+        :aria-label="$t('nav.back')"
-          :aria-label="$t('nav.back')"
+        @click="$router.go(-1)"
-          :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
+      >
-          @click="$router.go(-1)"
+        <div i-ri:arrow-left-line class="rtl-flip" btn-text />
-        >
+      </NuxtLink>
-          <div text-xl i-ri:arrow-left-line class="rtl-flip" btn-text />
-        </NuxtLink>
-      </CommonTooltip>
     </div>
   </div>
 </template>

components/nav/NavUser.vue

@@ -6,6 +6,7 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
   <VDropdown v-if="isHydrated && currentUser" sm:hidden>
     <div style="-webkit-touch-callout: none;">
       <AccountAvatar
+        ref="avatar"
         :account="currentUser.account"
         h-8
         w-8
@@ -15,7 +16,7 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
     </div>
 
     <template #popper="{ hide }">
-      <UserSwitcher @click="hide()" />
+      <UserSwitcher ref="switcher" @click="hide()" />
     </template>
   </VDropdown>
   <template v-else>
@@ -34,13 +35,7 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
         <strong>{{ currentServer }}</strong>
       </i18n-t>
     </button>
-    <button
+    <button v-else btn-solid text-sm px-2 py-1 text-center xl:hidden @click="openSigninDialog()">
-      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/notification/NotificationCard.vue

@@ -4,13 +4,6 @@ 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>
@@ -22,65 +15,60 @@ if (unsupportedEmojiReactionTypes.includes(notification.type))
           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 />
+          <div i-ri:user-follow-fill me-1 color-primary />
           <AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
           <span ws-nowrap>
             {{ $t('notification.followed_you') }}
           </span>
         </div>
         <AccountBigCard
-          ms10
           :account="notification.account"
+          :lang="notification.status?.language ?? undefined"
         />
       </NuxtLink>
     </template>
     <template v-else-if="notification.type === 'admin.sign_up'">
-      <NuxtLink :to="getAccountRoute(notification.account)">
+      <div flex p3 items-center bg-shaded>
-        <div flex p4 items-center bg-shaded>
+        <div i-ri:admin-fill me-1 color-purple />
-          <div i-ri:user-add-line text-xl me-2 color-purple />
-          <AccountDisplayName
-            :account="notification.account"
-            text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
-          />
-          <span>{{ $t("notification.signed_up") }}</span>
-        </div>
-      </NuxtLink>
-    </template>
-    <template v-else-if="notification.type === 'admin.report'">
-      <NuxtLink :to="getReportRoute(notification.report?.id!)">
-        <div flex p4 items-center bg-shaded>
-          <div i-ri:flag-line text-xl me-2 color-purple />
-          <i18n-t keypath="notification.reported">
-            <AccountDisplayName
-              :account="notification.account"
-              text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
-            />
-            <AccountDisplayName
-              :account="notification.report?.targetAccount!"
-              text-purple ms-1 font-bold line-clamp-1 ws-pre-wrap break-all
-            />
-          </i18n-t>
-        </div>
-      </NuxtLink>
-    </template>
-    <template v-else-if="notification.type === 'follow_request'">
-      <div flex px-3 py-2>
-        <div i-ri-user-shared-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
+          text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
         />
-        <span me-1 ws-nowrap>
+        <span>{{ $t("notification.signed_up") }}</span>
-          {{ $t('notification.request_to_follow') }}
-        </span>
       </div>
-      <AccountCard p="s-2 e-4 b-2" hover-card :account="notification.account">
+    </template>
-        <AccountFollowRequestButton :account="notification.account" />
+    <template v-else-if="notification.type === 'follow_request'">
-      </AccountCard>
+      <div flex ms-4 items-center class="-top-2.5" absolute inset-ie-2 px-2>
+        <div i-ri:user-follow-fill text-xl me-1 />
+        <AccountInlineInfo :account="notification.account" me1 />
+      </div>
+      <!-- TODO: accept request -->
+      <AccountCard :account="notification.account" />
+    </template>
+    <template v-else-if="notification.type === 'favourite'">
+      <StatusCard :status="notification.status!" :faded="true">
+        <template #meta>
+          <div flex="~" gap-1 items-center mt1>
+            <div i-ri:heart-fill text-xl me-1 color-red />
+            <AccountInlineInfo text-primary font-bold :account="notification.account" me1 />
+          </div>
+        </template>
+      </StatusCard>
+    </template>
+    <template v-else-if="notification.type === 'reblog'">
+      <StatusCard :status="notification.status!" :faded="true">
+        <template #meta>
+          <div flex="~" gap-1 items-center mt1>
+            <div i-ri:repeat-fill text-xl me-1 color-green />
+            <AccountInlineInfo text-primary font-bold :account="notification.account" me1 />
+          </div>
+        </template>
+      </StatusCard>
     </template>
     <template v-else-if="notification.type === 'update'">
-      <StatusCard :status="notification.status!" :in-notification="true" :actions="false">
+      <StatusCard :status="notification.status!" :faded="true">
         <template #meta>
           <div flex="~" gap-1 items-center mt1>
             <div i-ri:edit-2-fill text-xl me-1 text-secondary />
@@ -95,9 +83,7 @@ if (unsupportedEmojiReactionTypes.includes(notification.type))
     <template v-else-if="notification.type === 'mention' || notification.type === 'poll' || notification.type === 'status'">
       <StatusCard :status="notification.status!" />
     </template>
-    <template v-else-if="!unsupportedEmojiReactionTypes.includes(notification.type)">
+    <template v-else>
-      <!-- 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 }}'
       </div>

components/notification/NotificationEnablePushNotification.client.vue

@@ -10,7 +10,7 @@ defineProps<{
 defineEmits(['hide', 'subscribe'])
 
 defineSlots<{
-  error: (props: object) => void
+  error: {}
 }>()
 
 const xl = useMediaQuery('(min-width: 1280px)')

components/notification/NotificationGroupedFollow.vue

@@ -5,17 +5,17 @@ const { items } = defineProps<{
   items: GroupedNotifications
 }>()
 
-const count = computed(() => items.items.length)
+const count = $computed(() => items.items.length)
 const isExpanded = ref(false)
-const lang = computed(() => {
+const lang = $computed(() => {
-  return (count.value > 1 || count.value === 0) ? undefined : items.items[0].status?.language
+  return count > 1 || count === 0 ? undefined : items.items[0].status?.language
 })
 </script>
 
 <template>
   <article flex flex-col relative :lang="lang ?? undefined">
     <div flex items-center top-0 left-2 pt-2 px-3>
-      <div :class="count > 1 ? 'i-ri-group-line' : 'i-ri-user-3-line'" me-3 color-blue text-xl aria-hidden="true" />
+      <div i-ri:user-follow-fill me-3 color-primary aria-hidden="true" />
       <template v-if="count > 1">
         <CommonLocalizedNumber
           keypath="notification.followed_you_count"
@@ -32,7 +32,7 @@ const lang = computed(() => {
         </span>
       </template>
     </div>
-    <div pb-2 ps8>
+    <div pb-2>
       <div v-if="isExpanded">
         <AccountCard
           v-for="item in items.items"

components/notification/NotificationGroupedLikes.vue

@@ -4,59 +4,21 @@ import type { GroupedLikeNotifications } from '~/types'
 const { group } = defineProps<{
   group: GroupedLikeNotifications
 }>()
-const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
-
-const reblogs = computed(() => group.likes.filter(i => i.reblog))
-const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
 </script>
 
 <template>
   <article flex flex-col relative>
-    <StatusLink :status="group.status!" pb4 pt5>
+    <StatusCard :status="group.status!" :faded="true">
-      <div flex flex-col gap-3>
+      <template #meta>
-        <div v-if="reblogs.length" flex="~ gap-1">
+        <div flex flex-col gap-1 mt-1>
-          <div i-ri:repeat-fill text-xl me-2 color-green />
+          <div v-for="like of group.likes" :key="like.account.id" flex>
-          <template v-for="i, idx of reblogs" :key="idx">
+            <div v-if="like.reblog" i-ri:repeat-fill text-xl me-2 color-green />
-            <AccountHoverWrapper :account="i.account">
+            <div v-if="like.favourite && !like.reblog" i-ri:heart-fill text-xl me-2 color-red />
-              <NuxtLink :to="getAccountRoute(i.account)">
+            <AccountInlineInfo text-primary font-bold :account="like.account" me2 />
-                <AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
+            <div v-if="like.favourite && like.reblog" i-ri:heart-fill text-xl me-2 color-red />
-              </NuxtLink>
-            </AccountHoverWrapper>
-          </template>
-          <div ml1>
-            {{ $t('notification.reblogged_post') }}
           </div>
         </div>
-        <div v-if="likes.length" flex="~ gap-1">
+      </template>
-          <div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
+    </StatusCard>
-          <template v-for="i, idx of likes" :key="idx">
-            <AccountHoverWrapper :account="i.account">
-              <NuxtLink :to="getAccountRoute(i.account)">
-                <AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
-              </NuxtLink>
-            </AccountHoverWrapper>
-          </template>
-          <div ms1>
-            {{ $t('notification.favourited_post') }}
-          </div>
-        </div>
-      </div>
-      <div ps9 mt-1>
-        <StatusBody :status="group.status!" text-secondary />
-        <!-- When no text content is presented, we show media instead -->
-        <template v-if="!group.status!.content">
-          <StatusMedia
-            v-if="group.status!.mediaAttachments?.length"
-            :status="group.status!"
-            :is-preview="false"
-            pointer-events-none
-          />
-          <StatusPoll
-            v-else-if="group.status!.poll"
-            :status="group.status!"
-          />
-        </template>
-      </div>
-    </StatusLink>
   </article>
 </template>

components/notification/NotificationPaginator.vue

@@ -1,31 +1,21 @@
 <script setup lang="ts">
 // @ts-expect-error missing types
 import { DynamicScrollerItem } from 'vue-virtual-scroller'
-import type { mastodon } from 'masto'
+import type { Paginator, WsEvents, mastodon } from 'masto'
 import type { GroupedAccountLike, NotificationSlot } from '~/types'
 
 const { paginator, stream } = defineProps<{
-  paginator: mastodon.Paginator<mastodon.v1.Notification[], mastodon.rest.v1.ListNotificationsParams>
+  paginator: Paginator<mastodon.v1.Notification[], mastodon.v1.ListNotificationsParams>
-  stream?: mastodon.streaming.Subscription
+  stream?: Promise<WsEvents>
 }>()
 
 const virtualScroller = false // TODO: fix flickering issue with virtual scroll
 
 const groupCapacity = Number.MAX_VALUE // No limit
 
-const includeNotificationTypes: mastodon.v1.NotificationType[] = ['update', 'mention', 'poll', 'status']
-
-function includeNotificationsForStatusCard({ type, status }: mastodon.v1.Notification) {
-  // Exclude update, mention, pool and status notifications without the status entry:
-  // no makes sense to include them
-  // Those notifications will be shown using StatusCard SFC:
-  // check NotificationCard SFC L68 and L81 => :status="notification.status!"
-  return status || !includeNotificationTypes.includes(type)
-}
-
 // Group by type (and status when applicable)
-function groupId(item: mastodon.v1.Notification): string {
+const groupId = (item: mastodon.v1.Notification): string => {
-  // If the update is related to a status, group notifications from the same account (boost + favorite the same status)
+  // If the update is related to an status, group notifications from the same account (boost + favorite the same status)
   const id = item.status
     ? {
         status: item.status?.id,
@@ -85,12 +75,9 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
       }
       return
     }
-    else if (group.length && (group[0].type === 'reblog' || group[0].type === 'favourite')) {
+
-      if (!group[0].status) {
+    const { status } = group[0]
-        // Ignore favourite or reblog if status is null, sometimes the API is sending these
+    if (status && group.length > 1 && (group[0].type === 'reblog' || group[0].type === 'favourite')) {
-        // notifications
-        return
-      }
       // All notifications in these group are reblogs or favourites of the same status
       const likes: GroupedAccountLike[] = []
       for (const notification of group) {
@@ -101,15 +88,11 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
         }
         like[notification.type === 'reblog' ? 'reblog' : 'favourite'] = notification
       }
-      likes.sort((a, b) => a.reblog
+      likes.sort((a, b) => a.reblog ? !b.reblog || (a.favourite && !b.favourite) ? -1 : 0 : 0)
-        ? (!b.reblog || (a.favourite && !b.favourite))
-            ? -1
-            : 0
-        : 0)
       results.push({
         id: `grouped-${id++}`,
         type: 'grouped-reblogs-and-favourites',
-        status: group[0].status,
+        status,
         likes,
       })
       return
@@ -118,9 +101,9 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
     results.push(...group)
   }
 
-  for (const item of items.filter(includeNotificationsForStatusCard)) {
+  for (const item of items) {
     const itemId = groupId(item)
-    // Finalize the group if it already has too many notifications
+    // Finalize group if it already has too many notifications
     if (currentGroupId !== itemId || currentGroup.length >= groupCapacity)
       processGroup()
 
@@ -165,17 +148,17 @@ const { clearNotifications } = useNotifications()
 const { formatNumber } = useHumanReadableNumber()
 </script>
 
-<!-- eslint-disable vue/attribute-hyphenation -->
 <template>
   <CommonPaginator
     :paginator="paginator"
     :preprocess="preprocess"
     :stream="stream"
-    eventType="notification"
+    :eager="3"
-    :virtualScroller="virtualScroller"
+    :virtual-scroller="virtualScroller"
+    event-type="notification"
   >
     <template #updater="{ number, update }">
-      <button id="elk_show_new_items" py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
+      <button 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,86 +17,86 @@ const { t } = useI18n()
 
 const pwaEnabled = useAppConfig().pwaEnabled
 
-const busy = ref<boolean>(false)
+let busy = $ref<boolean>(false)
-const animateSave = ref<boolean>(false)
+let animateSave = $ref<boolean>(false)
-const animateSubscription = ref<boolean>(false)
+let animateSubscription = $ref<boolean>(false)
-const animateRemoveSubscription = ref<boolean>(false)
+let animateRemoveSubscription = $ref<boolean>(false)
-const subscribeError = ref<string>('')
+let subscribeError = $ref<string>('')
-const showSubscribeError = ref<boolean>(false)
+let showSubscribeError = $ref<boolean>(false)
 
-function hideNotification() {
+const hideNotification = () => {
   const key = currentUser.value?.account?.acct
   if (key)
     hiddenNotification.value[key] = true
 }
 
-const showWarning = computed(() => {
+const showWarning = $computed(() => {
   if (!pwaEnabled)
     return false
 
   return isSupported
-    && (!isSubscribed.value || !notificationPermission.value || notificationPermission.value === 'prompt')
+      && (!isSubscribed.value || !notificationPermission.value || notificationPermission.value === 'prompt')
-    && !(hiddenNotification.value[currentUser.value?.account?.acct ?? ''])
+      && !(hiddenNotification.value[currentUser.value?.account?.acct ?? ''] === true)
 })
 
-async function saveSettings() {
+const saveSettings = async () => {
-  if (busy.value)
+  if (busy)
     return
 
-  busy.value = true
+  busy = true
   await nextTick()
-  animateSave.value = true
+  animateSave = true
 
   try {
-    await updateSubscription()
+    const subscription = await updateSubscription()
   }
   catch (err) {
     // todo: handle error
     console.error(err)
   }
   finally {
-    busy.value = false
+    busy = false
-    animateSave.value = false
+    animateSave = false
   }
 }
 
-async function doSubscribe() {
+const doSubscribe = async () => {
-  if (busy.value)
+  if (busy)
     return
 
-  busy.value = true
+  busy = true
   await nextTick()
-  animateSubscription.value = true
+  animateSubscription = true
 
   try {
     const result = await subscribe()
     if (result !== 'subscribed') {
-      subscribeError.value = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
+      subscribeError = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
-      showSubscribeError.value = true
+      showSubscribeError = true
     }
   }
   catch (err) {
     if (err instanceof PushSubscriptionError) {
-      subscribeError.value = t(`settings.notifications.push_notifications.subscription_error.${err.code}`)
+      subscribeError = t(`settings.notifications.push_notifications.subscription_error.${err.code}`)
     }
     else {
       console.error(err)
-      subscribeError.value = t('settings.notifications.push_notifications.subscription_error.request_error')
+      subscribeError = t('settings.notifications.push_notifications.subscription_error.request_error')
     }
-    showSubscribeError.value = true
+    showSubscribeError = true
   }
   finally {
-    busy.value = false
+    busy = false
-    animateSubscription.value = false
+    animateSubscription = false
   }
 }
-async function removeSubscription() {
+const removeSubscription = async () => {
-  if (busy.value)
+  if (busy)
     return
 
-  busy.value = true
+  busy = true
   await nextTick()
-  animateRemoveSubscription.value = true
+  animateRemoveSubscription = true
   try {
     await unsubscribe()
   }
@@ -104,11 +104,11 @@ async function removeSubscription() {
     console.error(err)
   }
   finally {
-    busy.value = false
+    busy = false
-    animateRemoveSubscription.value = false
+    animateRemoveSubscription = false
   }
 }
-onActivated(() => (busy.value = false))
+onActivated(() => (busy = false))
 </script>
 
 <template>

components/notification/NotificationSubscribePushNotificationError.vue

@@ -3,7 +3,9 @@ defineProps<{
   title?: string
   message: string
 }>()
-const modelValue = defineModel<boolean>({ required: true })
+const { modelValue } = defineModel<{
+  modelValue: boolean
+}>()
 </script>
 
 <template>

components/publish/PublishAttachment.vue

@@ -15,15 +15,11 @@ const emit = defineEmits<{
   (evt: 'setDescription', description: string): void
 }>()
 
-// from https://github.com/mastodon/mastodon/blob/dfa984/app/models/media_attachment.rb#L40
-const maxDescriptionLength = 1500
-
 const isEditDialogOpen = ref(false)
 const description = ref(props.attachment.description ?? '')
-
+const toggleApply = () => {
-function toggleApply() {
   isEditDialogOpen.value = false
-  emit('setDescription', description.value)
+  emit('setDescription', unref(description))
 }
 </script>
 
@@ -59,10 +55,7 @@ function toggleApply() {
           </h1>
           <div flex flex-col gap-2>
             <textarea v-model="description" p-3 h-50 bg-base rounded-2 border-strong border-1 md:w-100 />
-            <div flex flex-row-reverse>
+            <button btn-outline @click="toggleApply">
-              <PublishCharacterCounter :length="description.length" :max="maxDescriptionLength" />
-            </div>
-            <button btn-outline :disabled="description.length > maxDescriptionLength" @click="toggleApply">
               {{ $t('action.apply') }}
             </button>
           </div>

components/publish/PublishCharacterCounter.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  max: number
-  length: number
-}>()
-</script>
-
-<template>
-  <div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap="0.5" :class="{ 'text-rose-500': length > max }">
-    {{ length ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ max }}</span>
-  </div>
-</template>

components/publish/PublishEditorTools.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Editor } from '@tiptap/core'
-
 const { editor } = defineProps<{
   editor: Editor
 }>()
@@ -8,10 +7,9 @@ const { editor } = defineProps<{
 
 <template>
   <CommonTooltip placement="top" :content="$t('tooltip.open_editor_tools')">
-    <VDropdown v-if="editor" placement="bottom">
+    <VDropdown v-if="editor" placement="top">
       <button
         btn-action-icon
-        :aria-label="$t('tooltip.open_editor_tools')"
       >
         <div i-ri:font-size-2 />
       </button>

components/publish/PublishEmojiPicker.client.vue

@@ -9,16 +9,16 @@ const emit = defineEmits<{
 
 const { locale } = useI18n()
 
-const el = ref<HTMLElement>()
+const el = $ref<HTMLElement>()
-const picker = ref<Picker>()
+let picker = $ref<Picker>()
 const colorMode = useColorMode()
 
 async function openEmojiPicker() {
   await updateCustomEmojis()
 
-  if (picker.value) {
+  if (picker) {
-    picker.value.update({
+    picker.update({
-      theme: colorMode,
+      theme: colorMode.value,
       custom: customEmojisData.value,
     })
   }
@@ -29,7 +29,7 @@ async function openEmojiPicker() {
       importEmojiLang(locale.value.split('-')[0]),
     ])
 
-    picker.value = new Picker({
+    picker = 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,
+      theme: colorMode.value,
       custom: customEmojisData.value,
       i18n,
     })
   }
   await nextTick()
   // TODO: custom picker
-  el.value?.appendChild(picker.value as any as HTMLElement)
+  el?.appendChild(picker as any as HTMLElement)
 }
 
-function hideEmojiPicker() {
+const hideEmojiPicker = () => {
-  if (picker.value)
+  if (picker)
-    el.value?.removeChild(picker.value as any as HTMLElement)
+    el?.removeChild(picker as any as HTMLElement)
 }
 </script>
 

components/publish/PublishLanguagePicker.vue

@@ -1,28 +1,26 @@
 <script setup lang="ts">
 import Fuse from 'fuse.js'
 
-const modelValue = defineModel<string>({ required: true })
+let { modelValue } = $defineModel<{
+  modelValue: string
+}>()
 
 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(() =>
+const languages = $computed(() =>
-  languageKeyword.value.trim()
+  languageKeyword.trim()
-    ? fuse.search(languageKeyword.value).map(r => r.item)
+    ? fuse.search(languageKeyword).map(r => r.item)
     : [...languagesNameList].filter(entry => !userSettings.value.disabledTranslationLanguages.includes(entry.code))
         .sort(({ code: a }, { code: b }) => {
-          // Put English on the top
+          return a === modelValue ? -1 : b === modelValue ? 1 : a.localeCompare(b)
-          if (a === 'en')
-            return -1
-
-          return a === modelValue.value ? -1 : b === modelValue.value ? 1 : a.localeCompare(b)
         }),
 )
 
@@ -39,7 +37,7 @@ const preferredLanguages = computed(() => {
 )
 
 function chooseLanguage(language: string) {
-  modelValue.value = language
+  modelValue = language
 }
 </script>
 

components/publish/PublishVisibilityPicker.vue

@@ -3,16 +3,16 @@ const { editing } = defineProps<{
   editing?: boolean
 }>()
 
-const modelValue = defineModel<string>({
+let { modelValue } = $defineModel<{
-  required: true,
+  modelValue: string
-})
+}>()
 
-const currentVisibility = computed(() =>
+const currentVisibility = $computed(() =>
-  statusVisibilities.find(v => v.value === modelValue.value) || statusVisibilities[0],
+  statusVisibilities.find(v => v.value === modelValue) || statusVisibilities[0],
 )
 
-function chooseVisibility(visibility: string) {
+const chooseVisibility = (visibility: string) => {
-  modelValue.value = visibility
+  modelValue = visibility
 }
 </script>
 

components/publish/PublishWidget.vue

@@ -27,98 +27,43 @@ const emit = defineEmits<{
 const { t } = useI18n()
 
 const draftState = useDraft(draftKey, initial)
-const { draft } = draftState
+const { draft } = $(draftState)
 
 const {
-  isExceedingAttachmentLimit,
+  isExceedingAttachmentLimit, isUploading, failedAttachments, isOverDropZone,
-  isUploading,
+  uploadAttachments, pickAttachments, setDescription, removeAttachment,
-  failedAttachments,
-  isOverDropZone,
-  uploadAttachments,
-  pickAttachments,
-  setDescription,
-  removeAttachment,
   dropZoneRef,
-} = useUploadMediaAttachment(draft)
+} = $(useUploadMediaAttachment($$(draft)))
 
-const { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = usePublish(
+let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = $(usePublish(
   {
     draftState,
-    ...{ expanded: toRef(() => expanded), isUploading, initialDraft: toRef(() => initial) },
+    ...$$({ expanded, isUploading, initialDraft: initial }),
   },
-)
+))
 
 const { editor } = useTiptap({
   content: computed({
-    get: () => draft.value.params.status,
+    get: () => draft.params.status,
     set: (newVal) => {
-      draft.value.params.status = newVal
+      draft.params.status = newVal
-      draft.value.lastUpdated = Date.now()
+      draft.lastUpdated = Date.now()
     },
   }),
-  placeholder: computed(() => placeholder ?? draft.value.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
+  placeholder: computed(() => placeholder ?? draft.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
-  autofocus: shouldExpanded.value,
+  autofocus: shouldExpanded,
   onSubmit: publish,
   onFocus() {
-    if (!isExpanded && draft.value.initialText) {
+    if (!isExpanded && draft.initialText) {
-      editor.value?.chain().insertContent(`${draft.value.initialText} `).focus('end').run()
+      editor.value?.chain().insertContent(`${draft.initialText} `).focus('end').run()
-      draft.value.initialText = ''
+      draft.initialText = ''
     }
-    isExpanded.value = true
+    isExpanded = true
   },
   onPaste: handlePaste,
 })
 
-function trimPollOptions() {
+const characterCount = $computed(() => {
-  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.value.params.poll!.options = trimmedOptions
-  else
-    draft.value.params.poll!.options = [...trimmedOptions, '']
-}
-
-function editPollOptionDraft(event: Event, index: number) {
-  draft.value.params.poll!.options = Object.assign(draft.value.params.poll!.options.slice(), { [index]: (event.target as HTMLInputElement).value })
-
-  trimPollOptions()
-}
-
-function deletePollOption(index: number) {
-  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: t('time_ago_options.hour_future', 1),
-  },
-  {
-    seconds: 2 * 60 * 60,
-    label: t('time_ago_options.hour_future', 2),
-  },
-  {
-    seconds: 1 * 24 * 60 * 60,
-    label: t('time_ago_options.day_future', 1),
-  },
-  {
-    seconds: 2 * 24 * 60 * 60,
-    label: t('time_ago_options.day_future', 2),
-  },
-  {
-    seconds: 7 * 24 * 60 * 60,
-    label: t('time_ago_options.day_future', 7),
-  },
-])
-
-const expiresInDefaultOptionIndex = 2
-
-const characterCount = computed(() => {
   const text = htmlToText(editor.value?.getHTML() || '')
 
   let length = stringLength(text)
@@ -126,9 +71,6 @@ const characterCount = computed(() => {
   // taken from https://github.com/mastodon/mastodon/blob/07f8b4d1b19f734d04e69daeb4c3421ef9767aac/app/lib/text_formatter.rb
   const linkRegex = /(https?:\/\/(www\.)?|xmpp:)\S+/g
 
-  // taken from https://github.com/mastodon/mastodon/blob/af578e/app/javascript/mastodon/features/compose/util/counter.js
-  const countableMentionRegex = /(^|[^/\w])@(([a-z0-9_]+)@[a-z0-9.-]+[a-z0-9]+)/ig
-
   // maximum of 23 chars per link
   // https://github.com/elk-zone/elk/issues/1651
   const maxLength = 23
@@ -136,29 +78,20 @@ const characterCount = computed(() => {
   for (const [fullMatch] of text.matchAll(linkRegex))
     length -= fullMatch.length - Math.min(maxLength, fullMatch.length)
 
-  for (const [fullMatch, before, _handle, username] of text.matchAll(countableMentionRegex))
+  if (draft.mentions) {
-    length -= fullMatch.length - (before + username).length - 1 // - 1 for the @
+    // + 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.value)
+  length += stringLength(publishSpoilerText)
 
   return length
 })
 
-const isExceedingCharacterLimit = computed(() => {
+const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.params.language || preferredLanguage))?.nativeName)
-  return characterCount.value > characterLimit.value
-})
-
-const postLanguageDisplay = computed(() => languagesNameList.find(i => i.code === (draft.value.params.language || preferredLanguage))?.nativeName)
-
-const isDM = computed(() => draft.value.params.visibility === 'direct')
 
 async function handlePaste(evt: ClipboardEvent) {
   const files = evt.clipboardData?.files
@@ -177,7 +110,7 @@ function insertCustomEmoji(image: any) {
 }
 
 async function toggleSensitive() {
-  draft.value.params.sensitive = !draft.value.params.sensitive
+  draft.params.sensitive = !draft.params.sensitive
 }
 
 async function publish() {
@@ -210,27 +143,22 @@ defineExpose({
     editor.value?.commands?.focus?.()
   },
 })
-
-function stopQuestionMarkPropagation(e: KeyboardEvent) {
-  if (e.key === '?')
-    e.stopImmediatePropagation()
-}
-
-onDeactivated(() => {
-  clearEmptyDrafts()
-})
 </script>
 
 <template>
-  <div v-if="isHydrated && currentUser" flex="~ col gap-4" py3 px2 sm:px4 aria-roledescription="publish-widget">
+  <div v-if="isHydrated && currentUser" flex="~ col gap-4" py3 px2 sm:px4>
     <template v-if="draft.editingStatus">
-      <div id="state-editing" text-secondary self-center>
+      <div flex="~ col gap-1">
-        {{ $t('state.editing') }}
+        <div id="state-editing" text-secondary self-center>
+          {{ $t('state.editing') }}
+        </div>
+        <StatusCard :status="draft.editingStatus" :actions="false" :hover="false" is-preview px-0 />
       </div>
+      <div border="b dashed gray/40" />
     </template>
 
     <div flex gap-3 flex-1>
-      <NuxtLink self-start :to="getAccountRoute(currentUser.account)">
+      <NuxtLink :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 -->
@@ -279,16 +207,11 @@ onDeactivated(() => {
           </ol>
         </CommonErrorMessage>
 
-        <div relative flex-1 flex flex-col min-h-30>
+        <div relative flex-1 flex flex-col>
           <EditorContent
             :editor="editor"
             flex max-w-full
-            :class="{
+            :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' : ''"
-              '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>
 
@@ -340,175 +263,94 @@ onDeactivated(() => {
     </div>
     <div flex gap-4>
       <div w-12 h-full sm:block hidden />
-      <div flex="~ col 1" max-w-full>
+      <div
-        <form v-if="isExpanded && draft.params.poll" my-4 flex="~ 1 col" gap-3 m="s--1">
+        v-if="shouldExpanded" flex="~ gap-1 1 wrap" m="s--1" pt-2 justify="end" max-w-full
-          <div
+        border="t base"
-            v-for="(option, index) in draft.params.poll.options"
+      >
-            :key="index"
+        <PublishEmojiPicker
-            flex="~ row"
+          @select="insertEmoji"
-            gap-3
+          @select-custom="insertCustomEmoji"
-          >
-            <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>
-            <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>
-        </form>
-        <div
-          v-if="shouldExpanded" flex="~ gap-1 1 wrap" m="s--1" pt-2 justify="end" max-w-full
-          border="t base"
         >
-          <PublishEmojiPicker
+          <button btn-action-icon :title="$t('tooltip.emoji')">
-            @select="insertEmoji"
+            <div i-ri:emotion-line />
-            @select-custom="insertCustomEmoji"
+          </button>
-          >
+        </PublishEmojiPicker>
-            <button btn-action-icon :title="$t('tooltip.emojis')" :aria-label="$t('tooltip.add_emojis')">
-              <div i-ri:emotion-line />
-            </button>
-          </PublishEmojiPicker>
 
-          <CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')" no-auto-focus>
+        <CommonTooltip placement="top" :content="$t('tooltip.add_media')">
-            <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
+          <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
-              <div i-ri:image-add-line />
+            <div i-ri:image-add-line />
-            </button>
+          </button>
-          </CommonTooltip>
+        </CommonTooltip>
 
-          <template v-if="draft.attachments.length === 0">
+        <PublishEditorTools v-if="editor" :editor="editor" />
-            <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 />
-                </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>
-            </div>
-          </template>
 
-          <PublishEditorTools v-if="editor" :editor="editor" />
+        <div flex-auto />
 
-          <div flex-auto />
+        <div dir="ltr" pointer-events-none pe-1 pt-2 text-sm tabular-nums text-secondary flex gap="0.5" :class="{ 'text-rose-500': characterCount > characterLimit }">
-
+          {{ characterCount ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
-          <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 />
-              </button>
-
-              <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 />
-              </button>
-            </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>
-
-          <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"
-            >
-              <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>
         </div>
+
+        <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>
+
+        <CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')">
+          <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">
+          <button
+            btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
+            md:w-fit
+            class="publish-button"
+            :aria-disabled="isPublishDisabled"
+            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>
+            <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>
       </div>
     </div>
   </div>
@@ -524,18 +366,4 @@ onDeactivated(() => {
     background-color: var(--c-bg-btn-disabled);
     color: var(--c-text-btn-disabled);
   }
-  .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

@@ -5,19 +5,19 @@ const route = useRoute()
 const { formatNumber } = useHumanReadableNumber()
 const timeAgoOptions = useTimeAgoOptions()
 
-const draftKey = ref('home')
+let draftKey = $ref('home')
 
-const draftKeys = computed(() => Object.keys(currentUserDrafts.value))
+const draftKeys = $computed(() => Object.keys(currentUserDrafts.value))
-const nonEmptyDrafts = computed(() => draftKeys.value
+const nonEmptyDrafts = $computed(() => draftKeys
-  .filter(i => i !== draftKey.value && !isEmptyDraft(currentUserDrafts.value[i]))
+  .filter(i => i !== draftKey && !isEmptyDraft(currentUserDrafts.value[i]))
   .map(i => [i, currentUserDrafts.value[i]] as const),
 )
 
 watchEffect(() => {
-  draftKey.value = route.query.draft?.toString() || 'home'
+  draftKey = route.query.draft?.toString() || 'home'
 })
 
-onDeactivated(() => {
+onMounted(() => {
   clearEmptyDrafts()
 })
 </script>

components/pwa/PwaBadge.client.vue

@@ -1,9 +1,9 @@
 <template>
   <button
-    v-if="useNuxtApp().$pwa?.needRefresh"
+    v-if="$pwa?.needRefresh"
     bg="primary-fade" relative rounded
     flex="~ gap-1 center" px3 py1 text-primary
-    @click="useNuxtApp().$pwa?.updateServiceWorker()"
+    @click="$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="useNuxtApp().$pwa?.showInstallPrompt && !useNuxtApp().$pwa?.needRefresh"
+    v-if="$pwa?.showInstallPrompt && !$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="useNuxtApp().$pwa?.install()">
+      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="$pwa.install()">
         {{ $t('pwa.install') }}
       </button>
-      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.cancelInstall()">
+      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.cancelInstall()">
         {{ $t('pwa.dismiss') }}
       </button>
     </div>

components/pwa/PwaPrompt.client.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="useNuxtApp().$pwa?.needRefresh"
+    v-if="$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="useNuxtApp().$pwa?.updateServiceWorker()">
+      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="$pwa.updateServiceWorker()">
         {{ $t('pwa.update') }}
       </button>
-      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.close()">
+      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.close()">
         {{ $t('pwa.dismiss') }}
       </button>
     </div>