chore(deps): update dependency eslint to ^9.39.0 (#3409)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -17,12 +17,14 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
-      - run: corepack enable
+      # workaround for npm registry key change
-      - uses: actions/setup-node@v4
+      # ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
+      # - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
+      - run: npm i -g corepack@latest && corepack enable
+      - uses: actions/setup-node@v6.0.0
         with:
-          node-version: 20
+          node-version-file: .nvmrc
-          cache: pnpm
 
       - name: 📦 Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/docker.yml

@@ -16,7 +16,7 @@ jobs:
       packages: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
       - name: Docker meta
         id: metal
         uses: docker/metadata-action@v5

.github/workflows/provenance.yml

@@ -0,0 +1,22 @@
+name: ci
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+permissions:
+  contents: read
+jobs:
+  check-provenance:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+      - name: Check provenance downgrades
+        uses: danielroe/provenance-action@41bcc969e579d9e29af08ba44fcbfdf95cee6e6c # v0.1.1
+        with:
+          fail-on-provenance-change: true

.github/workflows/release.yml

@@ -12,14 +12,14 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           fetch-depth: 0
 
       - name: Set node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: 18
+          node-version-file: .nvmrc
 
       - run: npx changelogithub
         env:

.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.5.3
+        uses: amannn/action-semantic-pull-request@v6.1.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -4,6 +4,7 @@ dist
 .output
 .pnpm-store
 .nuxt
+.data
 .env
 .DS_Store
 .idea/

.npmrc

@@ -1,4 +0,0 @@
-shamefully-hoist=true
-shell-emulator=true
-ignore-workspace-root-check=true
-package-manager-strict=false

.nvmrc

@@ -1 +1 @@
-20
+22

CONTRIBUTING.md

@@ -6,19 +6,13 @@ Refer also to https://github.com/antfu/contribute.
 
 For guidelines on contributing to the documentation, refer to the [docs README](./docs/README.md).
 
-### Online
-
-You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
-
-[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
-
 ### Local Setup
 
 To develop and test the Elk package:
 
 1. Fork the Elk repository to your own GitHub account and then clone it to your local device.
 
-2. Ensure using the latest Node.js (20.x).
+2. Ensure using the LTS version of Node.js.
 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/) v9. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 20+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
@@ -90,9 +84,9 @@ We've added some `UnoCSS` utilities styles to help you with that:
 
 ## Internationalization
 
-We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://v8.i18n.nuxtjs.org/) to handle internationalization.
+We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://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 the current [translation status](https://docs.elk.zone/guide/contributing#translation-status): more instructions on the 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`

Dockerfile

@@ -6,7 +6,10 @@ WORKDIR /elk
 FROM base AS builder
 
 # Prepare pnpm https://pnpm.io/installation#using-corepack
-RUN corepack enable
+# workaround for npm registry key change
+# ref. `pnpm@10.1.0` / `pnpm@9.15.4` cannot be installed due to key id mismatch · Issue #612 · nodejs/corepack
+# - https://github.com/nodejs/corepack/issues/612#issuecomment-2629496091
+RUN npm i -g corepack@latest && corepack enable
 
 # Prepare deps
 RUN apk update
@@ -14,13 +17,12 @@ 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
 
 # Copy all source files
 COPY . ./
+RUN pnpm nuxt prepare
 
 # Run full install with every postinstall script ( This needs project file )
 RUN pnpm i --frozen-lockfile

README.md

@@ -13,7 +13,6 @@ A nimble Mastodon web client
 <br/>
 <p align="center">
   <a href="https://chat.elk.zone"><img src="https://img.shields.io/badge/chat-discord-blue?style=flat&logo=discord" alt="discord chat"></a>
-  <a href="https://pr.new/elk-zone/elk"><img src="https://developer.stackblitz.com/img/start_pr_dark_small.svg" alt="Start new PR in StackBlitz Codeflow"></a>
   <a href="https://volta.net/elk-zone/elk?utm_source=elk_readme"><img src="https://user-images.githubusercontent.com/904724/209143798-32345f6c-3cf8-4e06-9659-f4ace4a6acde.svg" alt="Open board on Volta"></a>
 </p>
 <br/>
@@ -44,10 +43,9 @@ One could put Elk behind popular reverse proxies with SSL Handling like Traefik,
 
 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```
+1. start container: ```docker compose up --build -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.
@@ -57,6 +55,7 @@ One could put Elk behind popular reverse proxies with SSL Handling like Traefik,
 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.mastodon.com.pl](https://elk.mastodon.com.pl) - Use Elk for the `mastodon.com.pl` Server
 - [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
@@ -105,12 +104,6 @@ We would also appreciate sponsoring other contributors to the Elk project. If so
 
 We're really excited that you're interested in contributing to Elk! Before submitting your contribution, please read through the following guide.
 
-### Online
-
-You can use [StackBlitz Codeflow](https://stackblitz.com/codeflow) to fix bugs or implement features. You'll also see a Codeflow button on PRs to review them without a local setup. Once the elk repo has been cloned in Codeflow, the dev server will start automatically and print the URL to open the App. You should receive a prompt in the bottom-right suggesting to open it in the Editor or in another Tab. To learn more, check out the [Codeflow docs](https://developer.stackblitz.com/codeflow/what-is-codeflow).
-
-[![Open in Codeflow](https://developer.stackblitz.com/img/open_in_codeflow.svg)](https://pr.new/elk-zone/elk)
-
 ### Local Setup
 
 Clone the repository and run on the root folder:

app/augments.d.ts

@@ -0,0 +1,19 @@
+export {}
+
+declare module '#app' {
+  interface PageMeta {
+    wideLayout?: boolean
+  }
+
+  interface RuntimeNuxtHooks {
+    'elk-logo:click': () => void
+  }
+}
+
+declare global {
+  namespace NodeJS {
+    interface Process {
+      mock?: Record<string, any>
+    }
+  }
+}

app/components/account/AccountAvatar.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-defineProps<{
+const { account } = defineProps<{
   account: mastodon.v1.Account
   square?: boolean
 }>()
 
 const loaded = ref(false)
 const error = ref(false)
+
+const preferredMotion = usePreferredReducedMotion()
+const accountAvatarSrc = computed(() => {
+  return preferredMotion.value === 'reduce' ? (account?.avatarStatic ?? account.avatar) : account.avatar
+})
 </script>
 
 <template>
@@ -16,10 +21,10 @@ const error = ref(false)
     width="400"
     height="400"
     select-none
-    :src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
+    :src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : accountAvatarSrc"
     :alt="$t('account.avatar_description', [account.username])"
     loading="lazy"
-    class="account-avatar"
+    class="account-avatar object-cover"
     :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
     :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
     v-bind="$attrs"

app/components/account/AccountDisplayName.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { account, hideEmojis = false } = defineProps<{
+const { hideEmojis = false } = defineProps<{
   account: mastodon.v1.Account
   hideEmojis?: boolean
 }>()

app/components/account/AccountFollowButton.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
-import { toggleFollowAccount, useRelationship } from '~~/composables/masto/relationship'
+import { toggleFollowAccount, useRelationship } from '~/composables/masto/relationship'
 
-const { account, command, context, ...props } = defineProps<{
+const { account, context, command, ...props } = defineProps<{
   account: mastodon.v1.Account
   relationship?: mastodon.v1.Relationship
   context?: 'followedBy' | 'following'

app/components/account/AccountHoverCard.vue

@@ -12,7 +12,7 @@ const relationship = useRelationship(account)
   <div v-show="relationship" flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
     <div flex="~ gap2" items-center>
       <NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pe5 me-a>
-        <AccountInfo :account="account" :hover-card="true" />
+        <AccountInfo :account="account" :hover-card="false" />
       </NuxtLink>
       <AccountFollowButton text-sm :account="account" :relationship="relationship" />
     </div>

app/components/account/AccountInfo.vue

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

app/components/account/AccountMoreButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
-import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~~/composables/masto/relationship'
+import { toggleBlockAccount, toggleBlockDomain, toggleMuteAccount } from '~/composables/masto/relationship'
 
 const { account } = defineProps<{
   account: mastodon.v1.Account
@@ -71,6 +71,7 @@ async function removeUserNote() {
         />
       </NuxtLink>
       <CommonDropdownItem
+        is="button"
         v-if="isShareSupported"
         :text="$t('menu.share_account', [`@${account.acct}`])"
         icon="i-ri:share-line"
@@ -81,12 +82,14 @@ async function removeUserNote() {
       <template v-if="currentUser">
         <template v-if="!isSelf">
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.mention_account', [`@${account.acct}`])"
             icon="i-ri:at-line"
             :command="command"
             @click="mentionUser(account)"
           />
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.direct_message_account', [`@${account.acct}`])"
             icon="i-ri:message-3-line"
             :command="command"
@@ -94,6 +97,7 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.showingReblogs"
             icon="i-ri:repeat-line"
             :text="$t('menu.show_reblogs', [`@${account.acct}`])"
@@ -101,6 +105,7 @@ async function removeUserNote() {
             @click="toggleReblogs()"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.hide_reblogs', [`@${account.acct}`])"
             icon="i-ri:repeat-line"
@@ -109,6 +114,7 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.note || relationship?.note?.length === 0"
             :text="$t('menu.add_personal_note', [`@${account.acct}`])"
             icon="i-ri-edit-2-line"
@@ -116,6 +122,7 @@ async function removeUserNote() {
             @click="addUserNote()"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.remove_personal_note', [`@${account.acct}`])"
             icon="i-ri-edit-2-line"
@@ -124,6 +131,7 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.muting"
             :text="$t('menu.mute_account', [`@${account.acct}`])"
             icon="i-ri:volume-mute-line"
@@ -131,6 +139,7 @@ async function removeUserNote() {
             @click="toggleMuteAccount (relationship!, account)"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.unmute_account', [`@${account.acct}`])"
             icon="i-ri:volume-up-fill"
@@ -139,6 +148,7 @@ async function removeUserNote() {
           />
 
           <CommonDropdownItem
+            is="button"
             v-if="!relationship?.blocking"
             :text="$t('menu.block_account', [`@${account.acct}`])"
             icon="i-ri:forbid-2-line"
@@ -146,6 +156,7 @@ async function removeUserNote() {
             @click="toggleBlockAccount (relationship!, account)"
           />
           <CommonDropdownItem
+            is="button"
             v-else
             :text="$t('menu.unblock_account', [`@${account.acct}`])"
             icon="i-ri:checkbox-circle-line"
@@ -155,6 +166,7 @@ async function removeUserNote() {
 
           <template v-if="getServerName(account) !== currentServer">
             <CommonDropdownItem
+              is="button"
               v-if="!relationship?.domainBlocking"
               :text="$t('menu.block_domain', [getServerName(account)])"
               icon="i-ri:shut-down-line"
@@ -162,6 +174,7 @@ async function removeUserNote() {
               @click="toggleBlockDomain(relationship!, account)"
             />
             <CommonDropdownItem
+              is="button"
               v-else
               :text="$t('menu.unblock_domain', [getServerName(account)])"
               icon="i-ri:restart-line"
@@ -171,6 +184,7 @@ async function removeUserNote() {
           </template>
 
           <CommonDropdownItem
+            is="button"
             :text="$t('menu.report_account', [`@${account.acct}`])"
             icon="i-ri:flag-2-line"
             :command="command"

app/components/account/AccountPaginator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { paginator, account, context } = defineProps<{
+const { account, context } = defineProps<{
   paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
   context?: 'following' | 'followers'
   account?: mastodon.v1.Account

app/components/account/AccountTabs.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CommonRouteTabOption } from '~/types'
+import type { CommonRouteTabOption } from '#shared/types'
 
 const { t } = useI18n()
 const route = useRoute()

app/components/account/TagHoverWrapper.vue

@@ -5,7 +5,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const { tagName, disabled } = defineProps<{
+const { tagName } = defineProps<{
   tagName?: string
   disabled?: boolean
 }>()

app/components/aria/AriaLog.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
 import type { AriaLive } from '~/composables/aria'
 
-// tsc complaining when using $defineProps
+const {
-withDefaults(defineProps<{
+  ariaLive = 'polite',
-  title: string
+  heading = 'h2',
+  messageKey = (message: any) => message,
+} = defineProps<{
   ariaLive?: AriaLive
-  messageKey?: (message: any) => any
   heading?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-}>(), {
+  title: string
-  heading: 'h2',
+  messageKey?: (message: any) => any
-  messageKey: (message: any) => message,
+}>()
-  ariaLive: 'polite',
-})
 
 const { announceLogs, appendLogs, clearLogs, logs } = useAriaLog()
 

app/components/aria/AriaStatus.vue

@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import type { AriaLive } from '~/composables/aria'
 
-// tsc complaining when using $defineProps
+const { ariaLive = 'polite' } = defineProps<{
-withDefaults(defineProps<{
   ariaLive?: AriaLive
-}>(), {
+}>()
-  ariaLive: 'polite',
-})
 
 const { announceStatus, clearStatus, status } = useAriaStatus()
 

app/components/command/CommandItem.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import type { ResolvedCommand } from '~/composables/command'
 
-const {
+const { active = false } = defineProps<{
-  cmd,
-  index,
-  active = false,
-} = defineProps<{
   cmd: ResolvedCommand
   index: number
   active?: boolean

app/components/command/CommandKey.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-const props = defineProps<{
+const { name } = defineProps<{
   name: string
 }>()
 
 const isMac = useIsMac()
 
-const keys = computed(() => props.name.toLowerCase().split('+'))
+const keys = computed(() => name.toLowerCase().split('+'))
 </script>
 
 <template>

app/components/command/CommandPanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { SearchResult as SearchResultType } from '~/composables/masto/search'
 import type { CommandScope, QueryResult, QueryResultItem } from '~/composables/command'
+import type { SearchResult as SearchResultType } from '~/composables/masto/search'
 
 const emit = defineEmits<{
   (event: 'close'): void

app/components/common/CommonBlurhash.vue

@@ -3,7 +3,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const { blurhash = '', src, srcset, shouldLoadImage = true } = defineProps<{
+const { blurhash = '', shouldLoadImage = true } = defineProps<{
   blurhash?: string
   src: string
   srcset?: string

app/components/common/CommonCropImage.vue

@@ -3,25 +3,18 @@ import type { Boundaries } from 'vue-advanced-cropper'
 import { Cropper } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
 
-export interface Props {
+const { stencilAspectRatio = 1 / 1, stencilSizePercentage = 0.9 } = defineProps<{
   /** Crop frame aspect ratio (width/height), default 1/1 */
   stencilAspectRatio?: number
   /** The ratio of the longest edge of the cut box to the length of the cut screen, default 0.9, not more than 1 */
   stencilSizePercentage?: number
-}
+}>()
-const props = withDefaults(defineProps<Props>(), {
-  stencilAspectRatio: 1 / 1,
-  stencilSizePercentage: 0.9,
-})
 
 const file = defineModel<File | null>()
 
 const cropperDialog = ref(false)
-
 const cropper = ref<InstanceType<typeof Cropper>>()
-
 const cropperFlag = ref(false)
-
 const cropperImage = reactive({
   src: '',
   type: 'image/jpg',
@@ -29,8 +22,8 @@ const cropperImage = reactive({
 
 function stencilSize({ boundaries }: { boundaries: Boundaries }) {
   return {
-    width: boundaries.width * props.stencilSizePercentage,
+    width: boundaries.width * stencilSizePercentage,
-    height: boundaries.height * props.stencilSizePercentage,
+    height: boundaries.height * stencilSizePercentage,
   }
 }
 
@@ -82,7 +75,7 @@ function cropImage() {
           }"
           :stencil-size="stencilSize"
           :stencil-props="{
-            aspectRatio: props.stencilAspectRatio,
+            aspectRatio: stencilAspectRatio,
             movable: false,
             resizable: false,
             handlers: {},

app/components/common/CommonInputImage.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
-import { fileOpen } from 'browser-fs-access'
 import type { FileWithHandle } from 'browser-fs-access'
+import { fileOpen } from 'browser-fs-access'
 
-const props = withDefaults(defineProps<{
+const {
+  original,
+  allowedFileTypes = ['image/jpeg', 'image/png'],
+  allowedFileSize = 1024 * 1024 * 5, // 5 MB
+} = defineProps<{
   /** The image src before change */
   original?: string
   /** Allowed file types */
   allowedFileTypes?: string[]
   /** Allowed file size */
   allowedFileSize?: number
-
   imgClass?: string
-
   loading?: boolean
-}>(), {
+}>()
-  allowedFileTypes: () => ['image/jpeg', 'image/png'],
+
-  allowedFileSize: 1024 * 1024 * 5, // 5 MB
-})
 const emit = defineEmits<{
   (event: 'pick', value: FileWithHandle): void
   (event: 'error', code: number, message: string): void
@@ -26,7 +26,7 @@ const file = defineModel<FileWithHandle | null>()
 
 const { t } = useI18n()
 
-const defaultImage = computed(() => props.original || '')
+const defaultImage = computed(() => original || '')
 /** Preview of selected images */
 const previewImage = ref('')
 /** The current images on display */
@@ -37,14 +37,14 @@ async function pickImage() {
     return
   const image = await fileOpen({
     description: 'Image',
-    mimeTypes: props.allowedFileTypes,
+    mimeTypes: allowedFileTypes,
   })
 
-  if (!props.allowedFileTypes.includes(image.type)) {
+  if (!allowedFileTypes.includes(image.type)) {
     emit('error', 1, t('error.unsupported_file_format'))
     return
   }
-  else if (image.size > props.allowedFileSize) {
+  else if (image.size > allowedFileSize) {
     emit('error', 2, t('error.file_size_cannot_exceed_n_mb', [5]))
     return
   }

app/components/common/CommonMask.vue

@@ -2,7 +2,7 @@
 const {
   zIndex = 100,
   background = 'transparent',
-} = $defineProps<{
+} = defineProps<{
   zIndex?: number
   background?: string
 }>()

app/components/common/CommonPaginator.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts" generic="T, O, U = T">
+import type { mastodon } from 'masto'
 // @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'
 
 const {
   paginator,
-  stream,
-  eventType,
   keyProp = 'id',
   virtualScroller = false,
+  stream,
+  eventType,
   preprocess,
   endMessage = true,
 } = defineProps<{

app/components/common/CommonRouteTabs.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '~/types'
+import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '#shared/types'
 
-const { options, command, replace, preventScrollTop = false, moreOptions } = defineProps<{
+const { options, command, preventScrollTop = false } = defineProps<{
   options: CommonRouteTabOption[]
   moreOptions?: CommonRouteTabMoreOption
   command?: boolean
@@ -14,11 +14,11 @@ const router = useRouter()
 
 useCommands(() => command
   ? options.map(tab => ({
-    scope: 'Tabs',
+      scope: 'Tabs',
-    name: tab.display,
+      name: tab.display,
-    icon: tab.icon ?? 'i-ri:file-list-2-line',
+      icon: tab.icon ?? 'i-ri:file-list-2-line',
-    onActivate: () => router.replace(tab.to),
+      onActivate: () => router.replace(tab.to),
-  }))
+    }))
   : [])
 </script>
 

app/components/common/CommonScrollIntoView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { as = 'div', active } = defineProps<{
-  as: any
+  as?: string
   active: boolean
 }>()
 

app/components/common/CommonTabs.vue

@@ -25,13 +25,13 @@ function toValidName(option: string) {
 
 useCommands(() => command
   ? tabs.value.map(tab => ({
-    scope: 'Tabs',
+      scope: 'Tabs',
 
-    name: tab.display,
+      name: tab.display,
-    icon: tab.icon ?? 'i-ri:file-list-2-line',
+      icon: tab.icon ?? 'i-ri:file-list-2-line',
 
-    onActivate: () => modelValue.value = tab.name,
+      onActivate: () => modelValue.value = tab.name,
-  }))
+    }))
   : [])
 </script>
 

app/components/common/LocalizedNumber.vue

@@ -3,16 +3,16 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = defineProps<{
+const { count } = defineProps<{
   count: number
   keypath: string
 }>()
 
 const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
 
-const useSR = computed(() => forSR(props.count))
+const useSR = computed(() => forSR(count))
-const rawNumber = computed(() => formatNumber(props.count))
+const rawNumber = computed(() => formatNumber(count))
-const humanReadableNumber = computed(() => formatHumanReadableNumber(props.count))
+const humanReadableNumber = computed(() => formatHumanReadableNumber(count))
 </script>
 
 <template>

app/components/common/dropdown/DropdownItem.vue

@@ -1,16 +1,23 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
+const {
+  is = 'div',
+  text,
+  description,
+  icon,
+  command,
+} = defineProps<{
   is?: string
   text?: string
   description?: string
   icon?: string
   checked?: boolean
   command?: boolean
-}>(), {
+}>()
-  is: 'div',
+
-})
 const emit = defineEmits(['click'])
 
+const type = computed(() => is === 'button' ? 'button' : null)
+
 const { hide } = useDropdownContext() || {}
 
 const el = ref<HTMLDivElement>()
@@ -24,11 +31,11 @@ useCommand({
   scope: 'Actions',
 
   order: -1,
-  visible: () => props.command && props.text,
+  visible: () => command && text,
 
-  name: () => props.text!,
+  name: () => text!,
-  icon: () => props.icon ?? 'i-ri:question-line',
+  icon: () => icon ?? 'i-ri:question-line',
-  description: () => props.description,
+  description: () => description,
 
   onActivate() {
     const clickEvent = new MouseEvent('click', {
@@ -46,6 +53,7 @@ useCommand({
     v-bind="$attrs"
     :is="is"
     ref="el"
+    :type="type"
     w-full
     flex gap-3 items-center cursor-pointer px4 py3
     select-none

app/components/content/ContentCode.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-const props = defineProps<{
+const { code, lang } = defineProps<{
   code: string
   lang?: string
 }>()
 
-const raw = computed(() => decodeURIComponent(props.code).replace(/&#39;/g, '\''))
+const raw = computed(() => decodeURIComponent(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 lang ? highlightCode(raw.value, (langMap[lang] || lang) as any) : raw
 })
 </script>
 

app/components/conversation/ConversationPaginator.vue

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

app/components/emoji/Emoji.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { as, alt, dataEmojiId } = defineProps<{
+const { alt, dataEmojiId } = defineProps<{
   as: string
   alt?: string
   dataEmojiId?: string

app/components/list/Account.vue

@@ -44,6 +44,7 @@ async function edit() {
         <button
           text-sm p2 border-1 transition-colors
           border-dark
+          bg-base
           btn-action-icon
           @click="edit"
         >

app/components/list/AccountSearchResult.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { SearchResult } from '~/composables/masto/search'
+
+defineProps<{
+  result: SearchResult
+  active: boolean
+}>()
+</script>
+
+<template>
+  <CommonScrollIntoView
+    as="div"
+    :active="active"
+    py2 block px2
+    :aria-selected="active"
+    :class="{ 'bg-active': active }"
+  >
+    <AccountInfo
+      v-if="result.type === 'account'"
+      :account="result.data"
+    />
+  </CommonScrollIntoView>
+</template>

app/components/main/MainContent.vue

@@ -30,21 +30,21 @@ const containerClass = computed(() => {
       sticky top-0 z-20
       pt="[env(safe-area-inset-top,0)]"
       bg="[rgba(var(--rgb-bg-base),0.7)]"
-      class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
       :class="{
         'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
       }"
     >
-      <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
+      <div flex justify-between gap-2 min-h-53px px5 py1 :class="{ 'xl:hidden': $route.name !== 'tag' }" border="b base">
-        <div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>
+        <div flex gap-2 items-center :overflow-hidden="!noOverflowHidden ? '' : false" w-full>
-          <NuxtLink
+          <button
-            v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0 xl:hidden
+            v-if="backOnSmallScreen || back"
+            btn-text flex items-center ms="-3" p-3 xl:hidden
             :aria-label="$t('nav.back')"
             @click="$router.go(-1)"
           >
-            <div i-ri:arrow-left-line class="rtl-flip" />
+            <div text-lg i-ri:arrow-left-line class="rtl-flip" />
-          </NuxtLink>
+          </button>
-          <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 class="native-mac:justify-start native-mac:text-center">
             <slot name="title" />
           </div>
           <div sm:hidden h-7 w-1px />

app/components/modal/DurationPicker.vue

@@ -13,7 +13,7 @@ watchEffect(() => {
   }
 
   const duration
-      = days.value * 24 * 60 * 60
+    = days.value * 24 * 60 * 60
       + hours.value * 60 * 60
       + minutes.value * 60
 

app/components/modal/ModalConfirm.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ConfirmDialogChoice, ConfirmDialogOptions } from '~/types'
+import type { ConfirmDialogChoice, ConfirmDialogOptions } from '#shared/types'
 
-const props = defineProps<ConfirmDialogOptions>()
+const { extraOptionType } = defineProps<ConfirmDialogOptions>()
 
 const emit = defineEmits<{
   (evt: 'choice', choice: ConfirmDialogChoice): void
@@ -11,7 +11,7 @@ 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')
+const isMute = computed(() => extraOptionType === 'mute')
 
 function handleChoice(choice: ConfirmDialogChoice['choice']) {
   const dialogChoice = {
@@ -40,7 +40,7 @@ function handleChoice(choice: ConfirmDialogChoice['choice']) {
     </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" />
+      <ModalDurationPicker 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>
 

app/components/modal/ModalContainer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import type { ConfirmDialogChoice } from '#shared/types'
 import type { mastodon } from 'masto'
-import type { ConfirmDialogChoice } from '~/types'
 import {
   isCommandPanelOpen,
   isConfirmDialogOpen,
@@ -82,7 +82,7 @@ function handleFavouritedBoostedByClose() {
     >
       <ModalMediaPreview v-if="isMediaPreviewOpen" @close="closeMediaPreview()" />
     </ModalDialog>
-    <ModalDialog v-model="isEditHistoryDialogOpen" max-w-125>
+    <ModalDialog v-model="isEditHistoryDialogOpen" :focus-first-element="false" max-w-125>
       <StatusEditPreview v-if="statusEdit" :edit="statusEdit" />
     </ModalDialog>
     <ModalDialog v-model="isCommandPanelOpen" max-w-fit flex>

app/components/modal/ModalDialog.vue

@@ -1,51 +1,30 @@
 <script setup lang="ts">
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
 
-export interface Props {
-  /**
-   * level of depth
-   *
-   * @default 100
-   */
-  zIndex?: number
-
-  /**
-   * whether to allow close dialog by clicking mask layer
-   *
-   * @default true
-   */
-  closeByMask?: boolean
-
-  /**
-   * use v-if, destroy all the internal elements after closed
-   *
-   * @default true
-   */
-  useVIf?: boolean
-
-  /**
-   * keep the dialog opened even when in other views
-   *
-   * @default false
-   */
-  keepAlive?: boolean
-
-  /**
-   * The aria-labelledby id for the dialog.
-   */
-  dialogLabelledBy?: string
-}
-
 defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<Props>(), {
+const {
-  zIndex: 100,
+  zIndex = 100,
-  closeByMask: true,
+  closeByMask = true,
-  useVIf: true,
+  useVIf = true,
-  keepAlive: false,
+  keepAlive = false,
-})
+  focusFirstElement = true,
+} = defineProps<{
+  // level of depth
+  zIndex?: number
+  // whether to allow close dialog by clicking mask layer
+  closeByMask?: boolean
+  // use v-if, destroy all the internal elements after closed
+  useVIf?: boolean
+  // keep the dialog opened even when in other views
+  keepAlive?: boolean
+  // The aria-labelledby id for the dialog.
+  dialogLabelledBy?: string
+  // Whether to focus on the first element when the modal opens.
+  focusFirstElement?: boolean
+}>()
 
 const emit = defineEmits<{
   /** v-model dialog visibility */
@@ -69,6 +48,7 @@ const { activate } = useFocusTrap(elDialogRoot, {
   escapeDeactivates: true,
   preventScroll: true,
   returnFocusOnDeactivate: true,
+  initialFocus: focusFirstElement ? undefined : false,
 })
 
 defineExpose({
@@ -85,7 +65,7 @@ function close() {
 }
 
 function clickMask() {
-  if (props.closeByMask)
+  if (closeByMask)
     close()
 }
 
@@ -97,7 +77,7 @@ watch(visible, (value) => {
 
 const notInCurrentPage = computed(() => deactivated.value || routePath.value !== route.path)
 watch(notInCurrentPage, (value) => {
-  if (props.keepAlive)
+  if (keepAlive)
     return
   if (value)
     close()
@@ -106,7 +86,7 @@ watch(notInCurrentPage, (value) => {
 // controls the state of v-if.
 // when useVIf is toggled, v-if has the same state as modelValue, otherwise v-if is true
 const isVIf = computed(() => {
-  return props.useVIf
+  return useVIf
     ? visible.value
     : true
 })
@@ -114,7 +94,7 @@ const isVIf = computed(() => {
 // controls the state of v-show.
 // when useVIf is toggled, v-show is true, otherwise it has the same state as modelValue
 const isVShow = computed(() => {
-  return !props.useVIf
+  return !useVIf
     ? visible.value
     : true
 })

app/components/modal/ModalError.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ErrorDialogData } from '~/types'
+import type { ErrorDialogData } from '#shared/types'
 
 defineProps<ErrorDialogData>()
 </script>

app/components/modal/ModalMediaPreviewCarousel.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { Vector2 } from '@vueuse/gesture'
+import type { mastodon } from 'masto'
 import { useGesture } from '@vueuse/gesture'
 import { useReducedMotion } from '@vueuse/motion'
-import type { mastodon } from 'masto'
 
 const { media = [] } = defineProps<{
   media?: mastodon.v1.MediaAttachment[]

app/components/nav/NavBottom.vue

@@ -2,9 +2,23 @@
 import type { Component } from 'vue'
 import type { NavButtonName } from '../../composables/settings'
 
-import { STORAGE_KEY_BOTTOM_NAV_BUTTONS } from '~/constants'
+import {
+  NavButtonBookmark,
+  NavButtonCompose,
+  NavButtonExplore,
+  NavButtonFavorite,
+  NavButtonFederated,
+  NavButtonHashtag,
+  NavButtonHome,
+  NavButtonList,
+  NavButtonLocal,
+  NavButtonMention,
+  NavButtonMoreMenu,
+  NavButtonNotification,
+  NavButtonSearch,
+} from '#components'
 
-import { NavButtonExplore, NavButtonFederated, NavButtonHome, NavButtonLocal, NavButtonMention, NavButtonMoreMenu, NavButtonNotification, NavButtonSearch } from '#components'
+import { STORAGE_KEY_BOTTOM_NAV_BUTTONS } from '~/constants'
 
 interface NavButton {
   name: string
@@ -16,9 +30,14 @@ const navButtons: NavButton[] = [
   { name: 'search', component: NavButtonSearch },
   { name: 'notification', component: NavButtonNotification },
   { name: 'mention', component: NavButtonMention },
+  { name: 'favorite', component: NavButtonFavorite },
+  { name: 'bookmark', component: NavButtonBookmark },
+  { name: 'compose', component: NavButtonCompose },
   { name: 'explore', component: NavButtonExplore },
   { name: 'local', component: NavButtonLocal },
   { name: 'federated', component: NavButtonFederated },
+  { name: 'list', component: NavButtonList },
+  { name: 'hashtag', component: NavButtonHashtag },
   { name: 'moreMenu', component: NavButtonMoreMenu },
 ]
 

app/components/nav/NavLogo.vue

@@ -1,3 +1,6 @@
+<script setup lang="ts">
+</script>
+
 <template>
   <span shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip"><svg
     xmlns="http://www.w3.org/2000/svg" w-full

app/components/nav/NavSide.vue

@@ -1,13 +1,38 @@
 <script setup lang="ts">
 import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
 
-const { command } = defineProps<{
+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, '')
+
+const notificationsLink = computed(() => {
+  const hydrated = isHydrated.value
+  const user = currentUser.value
+  const lastRoute = lastAccessedNotificationRoute.value
+  if (!hydrated || !user || !lastRoute) {
+    return '/notifications'
+  }
+
+  return `/notifications/${lastRoute}`
+})
+const exploreLink = computed(() => {
+  const hydrated = isHydrated.value
+  const server = currentServer.value
+  let lastRoute = lastAccessedExploreRoute.value
+  if (!hydrated) {
+    return '/explore'
+  }
+
+  if (lastRoute.length) {
+    lastRoute = `/${lastRoute}`
+  }
+
+  return server ? `/${server}/explore${lastRoute}` : `/explore${lastRoute}`
+})
 </script>
 
 <template>
@@ -16,7 +41,7 @@ const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLO
 
     <div class="spacer" shrink xl:hidden />
     <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
-    <NavSideItem :text="$t('nav.notifications')" :to="`/notifications/${lastAccessedNotificationRoute}`" icon="i-ri:notification-4-line" user-only :command="command">
+    <NavSideItem :text="$t('nav.notifications')" :to="notificationsLink" icon="i-ri:notification-4-line" user-only :command="command">
       <template #icon>
         <div flex relative>
           <div class="i-ri:notification-4-line" text-xl />
@@ -34,7 +59,7 @@ const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLO
     <NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
 
     <div class="spacer" shrink hidden sm:block />
-    <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore/${lastAccessedExploreRoute}` : `/explore/${lastAccessedExploreRoute}`" icon="i-ri:compass-3-line" :command="command" />
+    <NavSideItem :text="$t('nav.explore')" :to="exploreLink" icon="i-ri:compass-3-line" :command="command" />
     <NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />
     <NavSideItem :text="$t('nav.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
     <NavSideItem :text="$t('nav.lists')" :to="isHydrated ? `/${currentServer}/lists` : '/lists'" icon="i-ri:list-check" user-only :command="command" />

app/components/nav/NavSideItem.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-const props = withDefaults(defineProps<{
+const { text, icon, to, userOnly = false, command } = defineProps<{
   text?: string
   icon: string
   to: string | Record<string, string>
   userOnly?: boolean
   command?: boolean
-}>(), {
+}>()
-  userOnly: false,
-})
 
 defineSlots<{
   icon: (props: object) => void
@@ -19,12 +17,12 @@ const router = useRouter()
 useCommand({
   scope: 'Navigation',
 
-  name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name),
+  name: () => text ?? (typeof to === 'string' ? to as string : to.name),
-  icon: () => props.icon,
+  icon: () => icon,
-  visible: () => props.command,
+  visible: () => command,
 
   onActivate() {
-    router.push(props.to)
+    router.push(to)
   },
 })
 
@@ -39,8 +37,8 @@ onHydrated(async () => {
 
 // Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items
 // when we know there is no user.
-const noUserDisable = computed(() => !isHydrated.value || (props.userOnly && !currentUser.value))
+const noUserDisable = computed(() => !isHydrated.value || (userOnly && !currentUser.value))
-const noUserVisual = computed(() => isHydrated.value && props.userOnly && !currentUser.value)
+const noUserVisual = computed(() => isHydrated.value && userOnly && !currentUser.value)
 </script>
 
 <template>

app/components/nav/NavTitle.vue

@@ -18,7 +18,7 @@ router.afterEach(() => {
 </script>
 
 <template>
-  <div flex justify-between sticky top-0 bg-base z-1 py-4 native:py-7 data-tauri-drag-region>
+  <div flex justify-between sticky top-0 bg-base z-1 py-4>
     <NuxtLink
       flex items-end gap-3
       py2 px-5
@@ -33,17 +33,16 @@ router.afterEach(() => {
         {{ $t('app_name') }} <sup text-sm italic mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
       </div>
     </NuxtLink>
-    <div
+    <div hidden xl:flex items-center me-6 mt-2 gap-1>
-      hidden xl:flex items-center me-8 mt-2 gap-1
+      <CommonTooltip :content="$t('nav.back')" :distance="0">
-    >
+        <button
-      <CommonTooltip :content="$t('nav.back')">
+          type="button"
-        <NuxtLink
           :aria-label="$t('nav.back')"
-          :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
+          btn-text p-3 :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
           @click="$router.go(-1)"
         >
-          <div text-xl i-ri:arrow-left-line class="rtl-flip" btn-text />
+          <div text-xl i-ri:arrow-left-line class="rtl-flip" />
-        </NuxtLink>
+        </button>
       </CommonTooltip>
     </div>
   </div>

app/components/nav/button/Bookmark.vue

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

app/components/nav/button/Compose.vue

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

app/components/nav/button/Favorite.vue

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

app/components/nav/button/Hashtag.vue

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