Merge branch 'main' into ft/i18n-fr

.dockerignore

@@ -0,0 +1,19 @@
+# Modified from .gitignore
+node_modules
+*.log
+dist
+.output
+.nuxt
+#.env # Not ignoring this file because it can contain build-related settings.
+.DS_Store
+.idea/
+.vite-inspect
+.netlify/
+.eslintcache
+
+public/shiki
+public/emojis
+
+*~
+*swp
+*swo

.env.example

@@ -1,5 +1,7 @@
 NUXT_PUBLIC_TRANSLATE_API=
 NUXT_PUBLIC_DEFAULT_SERVER=
+NUXT_PUBLIC_SINGLE_INSTANCE=
+NUXT_PUBLIC_PRIVACY_POLICY_URL=
 
 # Production only
 NUXT_CLOUDFLARE_ACCOUNT_ID=
@@ -10,6 +12,8 @@ NUXT_CLOUDFLARE_API_TOKEN=
 NUXT_STORAGE_DRIVER=
 NUXT_STORAGE_FS_BASE=
 
+NUXT_ADMIN_KEY=
+
 NUXT_PUBLIC_DISABLE_VERSION_CHECK=
 
 NUXT_GITHUB_CLIENT_ID=

.eslintignore

@@ -3,5 +3,13 @@
 *.ico
 *.toml
 *.patch
+*.txt
+Dockerfile
+public/
+public-dev/
+public-staging/
 https-dev-config/localhost.crt
 https-dev-config/localhost.key
+Dockerfile
+elk-translation-status.json
+docs/translation-status.json

.eslintrc

@@ -13,6 +13,7 @@
     "vue/no-restricted-syntax":["error", {
       "selector": "VElement[name='a']",
       "message": "Use NuxtLink instead."
-    }]
+    }],
+    "n/prefer-global/process": "off"
   }
 }

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,5 @@
+---
+name: 🐞 Bug report
+about: Report an issue
+labels: ['s: pending triage', 'c: bug']
+---

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,56 +0,0 @@
-name: 🐞 Bug report
-description: Report an issue
-labels: ['s: pending triage', 'c: bug']
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Thanks for taking the time to fill out this bug report!
-
-        If you are unsure whether your problem is a bug or not, you can check the following:
-
-        - use our [Discord community](https://chat.elk.zone)
-        - open a new [discussion](https://github.com/elk-zone/elk/discussions) and ask your question there
-
-  - type: checkboxes
-    id: checkboxes
-    attributes:
-      label: Pre-Checks
-      description: Before submitting the issue, please make sure you do the following
-      options:
-        # - label: Follow our [Code of Conduct](https://github.com/elk-zone/elk/blob/main/CODE_OF_CONDUCT.md).
-        #   required: true
-        # - label: Read the [Contributing Guidelines](https://github.com/elk-zone/elk/blob/main/CONTRIBUTING.md).
-        #   required: true
-        - label: Check that there isn't [already an issue](https://github.com/elk-zone/elk/issues) that reports the same bug to avoid creating a duplicate.
-          required: true
-        - label: Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/elk-zone/elk/discussions) or join our [Discord Chat Server](https://chat.elk.zone).
-          required: true
-        - label: Providing a screenshot or video to reproduce the issue or show visually what was meant.
-          required: true
-        - label: I am willing to provide a PR.
-
-  - type: textarea
-    id: bug-description
-    attributes:
-      label: Describe the bug
-      description: A clear and concise description of what the bug is.
-      placeholder: I am doing ... What I expect is ... What actually happening is ...
-    validations:
-      required: true
-
-  - type: textarea
-    id: reproduction
-    attributes:
-      label: Reproduction video or screenshot
-      description: |
-        A video or screenshot that visually shows the issue.
-        **Tip:** You can attach images or recordings files by clicking this area to highlight it and then dragging files in.
-
-  - type: textarea
-    id: additional-context
-    attributes:
-      label: Additional Context
-      description: |
-        Anything else relevant? Please tell us here, e.g. your used web browser and/or you are on desktop or mobile.
-        **Tip:** You can attach images or recordings files by clicking this area to highlight it and then dragging files in.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,5 @@
+---
+name: 🚀 New feature proposal
+about: Propose a new feature
+labels: 's: pending triage'
+---

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,35 +0,0 @@
-name: 🚀 New feature proposal
-description: Propose a new feature
-labels: ['s: pending triage'] # This will automatically assign the 's: pending triage' label
-body:
-  - type: markdown
-    attributes:
-      value: Thanks for your interest in the project and taking the time to fill out this feature report!
-
-  - type: textarea
-    id: feature-description
-    attributes:
-      label: Clear and concise description of the problem
-      description: 'As a user I want [goal / wish] so that [benefit]. If you intend to submit a PR for this issue, tell us in the description. Thanks!'
-    validations:
-      required: true
-
-  - type: textarea
-    id: suggested-solution
-    attributes:
-      label: Suggested solution
-      description: 'In section [xy] we could provide following feature...'
-    validations:
-      required: true
-
-  - type: textarea
-    id: alternative
-    attributes:
-      label: Alternative
-      description: Clear and concise description of any alternative solutions or features you've considered.
-
-  - type: textarea
-    id: additional-context
-    attributes:
-      label: Additional context
-      description: Any other context about the feature request here.

.github/ISSUE_TEMPLATE/freestyle.md

@@ -1,5 +0,0 @@
----
-name: Freestyle Report
-about: Create a report to help us improve
-labels: 'pending triage' # This will automatically assign the 'pending triage' label
----

.github/renovate.json5

@@ -3,6 +3,14 @@
   "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",
@@ -56,6 +64,10 @@
     {
       "groupName": "typescript",
       "matchPackageNames": ["typescript"]
+    },
+    {
+      "matchDatasources": ["node-version"],
+      "enabled": false
     }
   ],
   "vulnerabilityAlerts": {

.github/workflows/ci.yml

@@ -10,6 +10,7 @@ on:
     branches:
       - main
   workflow_dispatch: {}
+  merge_group: {}
 
 jobs:
   ci:
@@ -30,7 +31,7 @@ jobs:
         run: pnpm nuxi prepare
 
       - name: 🧪 Test project
-        run: pnpm test
+        run: pnpm test tests/unit
 
       - name: 📝 Lint
         run: pnpm lint

.github/workflows/docker.yml

@@ -0,0 +1,46 @@
+name: build & push docker container
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - '*'
+  pull_request:
+    branches:
+      - main
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Docker meta
+        id: metal
+        uses: docker/metadata-action@v4
+        with:
+          images: |
+            ghcr.io/${{ github.repository }}
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+      - name: Login to GitHub Container Registry
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ github.token }}
+      - name: Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          platforms: linux/amd64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.metal.outputs.tags }}
+          labels: ${{ steps.metal.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

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

.gitignore

@@ -9,6 +9,7 @@ dist
 .vite-inspect
 .netlify/
 .eslintcache
+elk-translation-status.json
 
 public/shiki
 public/emojis

.npmrc

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

.nvmrc

@@ -0,0 +1 @@
+18

.vscode/settings.json

@@ -22,7 +22,7 @@
   ],
   "i18n-ally.preferredDelimiter": "_",
   "i18n-ally.sortKeys": true,
-  "i18n-ally.sourceLanguage": "en-US",
+  "i18n-ally.sourceLanguage": "en",
   "prettier.enable": false,
   "volar.completion.preferredTagNameCase": "pascal",
   "volar.completion.preferredAttrNameCase": "kebab"

CODE_OF_CONDUCT.md

@@ -0,0 +1,45 @@
+# Code Of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, political party, or sexual identity and orientation. Note, however, that religion, political party, or other ideological affiliation provide no exemptions for the behavior we outline as unacceptable in this Code of Conduct.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team by DM at [the Elk Discord](https://chat.elk.zone). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org

CONTRIBUTING.md

@@ -1,9 +1,11 @@
 # Contributing 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.
+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.
 
 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). 
@@ -16,7 +18,9 @@ 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 (16.x)
+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)
 
@@ -50,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 following checkboxes:
+- Go to `Application > Storage`, you should check the 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 the current `service worker` is missing or has the state `deleted` or `redundant`
+- Go to `Application > Service Workers` and check if the current `service worker` is missing or has the state `deleted` or `redundant`
 
 ## CI errors
 
@@ -78,30 +82,45 @@ 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`. Same rules applies for 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`. The same rules apply to margin.
 - Do not use `rtl-` classes, such as `rtl-left-0`.
-- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception from rule above. For icons inside 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 the rule above. For icons inside the timeline, it might not work as expected.
 - For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`.
-- If you need to change 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 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 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 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`.
 
 ## Internationalization
 
-We are using [vue-i18n](https://vue-i18n.intlify.dev/) via [nuxt-i18n](https://i18n.nuxtjs.org/) to handle 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.
+
+If you are updating a translation in your local environment, you can run the following commands to check the status:
+- from root folder: `nr prepare-translation-status`
+- change to `docs` folder and run docs dev server `nr dev`
+- open `http://localhost:3000/docs/guide/contributing#translation-status` in your browser
 
 ### Adding a new language
 
 1. Add a new file in [locales](./locales) folder with the language code as the filename.
-2. Copy [en-US](./locales/en-US.json) and translate the strings.
+2. Copy [en](./locales/en.json) and translate the strings.
-3. Add the language to the `locales` array in [config/i18n.ts](./config/i18n.ts#L12), below `en` variants and `ar-EG`.
+3. Add the language to the `locales` array in [config/i18n.ts](./config/i18n.ts#L61), below `en` and `ar`:
-4. If the language is `right-to-left`, add `dir` option with `rtl` value, for example, for [ar-EG](./config/i18n.ts#L27)
+   - 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)
-5. If the language requires special pluralization rules, add `pluralRule` callback option, for example, for [ar-EG](./config/i18n.ts#L27)
+      - 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
+      - Later, when anyone wants to add the corresponding translations for the country variant, just override any entry in the corresponding file: you can see an example with `en` variants.
+   - If the generic language already exists:
+      - If the translation doesn't differ from the generic language, then add the corresponding translations in the corresponding file
+      - If the translation differs from the generic language, then add the corresponding translations in the corresponding file and remove it from the country variants entry
+4. If the language is `right-to-left`, add `dir` option with `rtl` value, for example, for [ar](./config/i18n.ts#L71)
+5. If the language requires special pluralization rules, add `pluralRule` callback option, for example, for [ar](./config/i18n.ts#L72)
 
 Check [Pluralization rule callback](https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization) for more info.
 
 ### Messages interpolation
 
-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.
+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.
 
 We're using these types of interpolation:
 - [List interpolation](https://vue-i18n.intlify.dev/guide/essentials/syntax.html#list-interpolation)
@@ -123,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 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 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.
 
 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

@@ -0,0 +1,57 @@
+FROM docker.io/library/node:lts-alpine AS base
+
+# Prepare work directory
+WORKDIR /elk
+
+FROM base AS builder
+
+# Prepare pnpm https://pnpm.io/installation#using-corepack
+RUN corepack enable
+
+# Prepare deps
+RUN apk update
+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 full install with every postinstall script ( This needs project file )
+RUN pnpm i --frozen-lockfile
+
+# Build
+RUN pnpm build
+
+FROM base AS runner
+
+ARG UID=911
+ARG GID=911
+
+# Create a dedicated user and group
+RUN set -eux; \
+    addgroup -g $GID elk; \
+    adduser -u $UID -D -G elk elk;
+
+USER elk
+
+ENV NODE_ENV=production
+
+COPY --from=builder /elk/.output ./.output
+
+EXPOSE 5314/tcp
+
+ENV PORT=5314
+
+# Specify container only environment variables ( can be overwritten by runtime env )
+ENV NUXT_STORAGE_FS_BASE='/elk/data'
+
+# Persistent storage data
+VOLUME [ "/elk/data" ]
+
+CMD ["node", ".output/server/index.mjs"]

README.md

@@ -28,11 +28,48 @@ A nimble Mastodon web client
 
 It is already quite usable, but it isn't ready for wide adoption yet. We recommend you use it if you would like to help us build it. We appreciate your feedback and contributions. Check out the [Open Issues](https://github.com/elk-zone/elk/issues) and jump in the action. Join the [Elk discord server](https://chat.elk.zone) to chat with us and learn more about the project.
 
-The client is deployed on:
+## Deployment
+
+### Official Deployment
+
+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.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.
+
 ## 💖 Sponsors
 
 We are grateful for the generous sponsorship and help of:
@@ -99,6 +136,10 @@ Elk uses [Vitest](https://vitest.dev). You can run the test suite with:
 nr test
 ```
 
+## 📲 PWA
+
+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
 
 - [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling
@@ -111,7 +152,13 @@ nr test
 - [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format
 - [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript
 - [shiki](https://shiki.matsu.io/) - A beautiful Syntax Highlighter
-- [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update and push notifications
+- [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API
+
+## 👨‍💻 Contributors
+
+<a href="https://github.com/elk-zone/elk/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=elk-zone/elk" />   
+</a>    
 
 ## 📄 License
 

components/account/AccountAvatar.vue

@@ -15,9 +15,11 @@ const error = $ref(false)
     :key="account.avatar"
     width="400"
     height="400"
+    select-none
     :src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
     :alt="$t('account.avatar_description', [account.username])"
     loading="lazy"
+    class="account-avatar"
     :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
     :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
     v-bind="$attrs"

components/account/AccountBigCard.vue

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

components/account/AccountBotIndicator.vue

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

components/account/AccountDisplayName.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-defineProps<{
+const { account, hideEmojis = false } = defineProps<{
   account: mastodon.v1.Account
+  hideEmojis?: boolean
 }>()
 </script>
 
@@ -10,6 +11,7 @@ defineProps<{
   <ContentRich
     :content="getDisplayName(account, { rich: true })"
     :emojis="account.emojis"
+    :hide-emojis="hideEmojis"
     :markdown="false"
   />
 </template>

components/account/AccountFollowButton.vue

@@ -1,5 +1,6 @@
 <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
@@ -8,28 +9,17 @@ const { account, command, context, ...props } = defineProps<{
   command?: boolean
 }>()
 
+const { t } = useI18n()
 const isSelf = $(useSelfAccount(() => account))
 const enable = $computed(() => !isSelf && currentUser.value)
 const relationship = $computed(() => props.relationship || useRelationship(account).value)
 
-const masto = useMasto()
+const { client } = $(useMasto())
-async function toggleFollow() {
-  relationship!.following = !relationship!.following
-  try {
-    const newRel = await masto.v1.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
-    Object.assign(relationship!, newRel)
-  }
-  catch (err) {
-    console.error(err)
-    // TODO error handling
-    relationship!.following = !relationship!.following
-  }
-}
 
 async function unblock() {
   relationship!.blocking = false
   try {
-    const newRel = await masto.v1.accounts.unblock(account.id)
+    const newRel = await client.v1.accounts.unblock(account.id)
     Object.assign(relationship!, newRel)
   }
   catch (err) {
@@ -42,7 +32,7 @@ async function unblock() {
 async function unmute() {
   relationship!.muting = false
   try {
-    const newRel = await masto.v1.accounts.unmute(account.id)
+    const newRel = await client.v1.accounts.unmute(account.id)
     Object.assign(relationship!, newRel)
   }
   catch (err) {
@@ -52,15 +42,13 @@ async function unmute() {
   }
 }
 
-const { t } = useI18n()
-
 useCommand({
   scope: 'Actions',
   order: -2,
   visible: () => command && enable,
   name: () => `${relationship?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
   icon: 'i-ri:star-line',
-  onActivate: () => toggleFollow(),
+  onActivate: () => toggleFollowAccount(relationship!, account),
 })
 
 const buttonStyle = $computed(() => {
@@ -83,34 +71,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() : toggleFollow()"
+    @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollowAccount(relationship!, account)"
   >
     <template v-if="relationship?.blocking">
-      <span group-hover="hidden">{{ $t('account.blocking') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.unblock') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
     </template>
     <template v-if="relationship?.muting">
-      <span group-hover="hidden">{{ $t('account.muting') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.unmute') }}</span>
+      <span hidden elk-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 elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
     </template>
     <template v-else-if="relationship?.requested">
-      <span>{{ $t('account.follow_requested') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
+      <span hidden elk-group-hover="inline">Withdraw follow request</span>
     </template>
     <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
-      <span group-hover="hidden">{{ $t('account.follows_you') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
+      <span hidden elk-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
     </template>
     <template v-else>
-      <span>{{ $t('account.follow') }}</span>
+      <span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
     </template>
   </button>
 </template>

components/account/AccountHandle.vue

@@ -9,7 +9,7 @@ const serverName = $computed(() => getServerName(account))
 </script>
 
 <template>
-  <p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light dir="ltr">
+  <p line-clamp-1 whitespace-pre-wrap break-all text-secondary-light leading-tight dir="ltr">
     <!-- fix: #274 only line-clamp-1 can be used here, using text-ellipsis is not valid -->
     <span text-secondary>{{ getShortHandle(account) }}</span>
     <span v-if="serverName" text-secondary-light>@{{ serverName }}</span>

components/account/AccountHeader.vue

@@ -6,7 +6,7 @@ const { account } = defineProps<{
   command?: boolean
 }>()
 
-const masto = useMasto()
+const { client } = $(useMasto())
 
 const { t } = useI18n()
 
@@ -20,11 +20,17 @@ 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'))
 
 function getFieldIconTitle(fieldName: string) {
   return fieldName === 'Joined' ? t('account.joined') : fieldName
 }
 
+function getNotificationIconTitle() {
+  return relationship?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
+}
+
 function previewHeader() {
   openMediaPreview([{
     id: `${account.acct}:header`,
@@ -43,15 +49,15 @@ function previewAvatar() {
   }])
 }
 
-async function toggleNotify() {
+async function toggleNotifications() {
-  relationship!.notifying = !relationship!.notifying
+  relationship!.notifying = !relationship?.notifying
   try {
-    const newRel = await masto.v1.accounts.follow(account.id, { notify: relationship!.notifying })
+    const newRel = await client.v1.accounts.follow(account.id, { notify: relationship?.notifying })
     Object.assign(relationship!, newRel)
   }
   catch {
     // TODO error handling
-    relationship!.notifying = !relationship!.notifying
+    relationship!.notifying = !relationship?.notifying
   }
 }
 
@@ -75,70 +81,164 @@ watchEffect(() => {
   iconFields.value = icons
 })
 
+const personalNoteDraft = ref(relationship?.note ?? '')
+watch($$(relationship), (relationship, oldValue) => {
+  if (!oldValue && relationship)
+    personalNoteDraft.value = relationship.note ?? ''
+})
+
+async function editNote(event: Event) {
+  if (!event.target || !('value' in event.target) || !relationship)
+    return
+
+  const newNote = event.target?.value as string
+
+  if (relationship.note?.trim() === newNote.trim())
+    return
+
+  const newNoteApiResult = await client.v1.accounts.createNote(account.id, { comment: newNote })
+  relationship.note = newNoteApiResult.note
+  personalNoteDraft.value = relationship.note ?? ''
+}
+
 const isSelf = $(useSelfAccount(() => account))
+const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
+
+const personalNoteMaxLength = 2000
 </script>
 
 <template>
   <div flex flex-col>
-    <button border="b base" z-1>
+    <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])" @click="previewHeader">
+      <img h-50 height="200" w-full object-cover :src="account.header" :alt="t('account.profile_description', [account.username])">
-    </button>
+    </component>
     <div p4 mt--18 flex flex-col gap-4>
       <div relative>
-        <div flex="~ col gap-2 1">
+        <div flex justify-between>
-          <button :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" w-30 h-30 p1 bg-base border-bg-base z-2 @click="previewAvatar">
+          <button shrink-0 :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" p1 bg-base border-bg-base z-2 @click="previewAvatar">
-            <AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity />
+            <AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity w-28 h-28 />
           </button>
-          <div flex="~ col gap1">
+          <div inset-ie-0 flex="~ wrap row-reverse" gap-2 items-center pt18 justify-start>
-            <div flex justify-between>
+            <!-- Edit profile -->
-              <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
+            <NuxtLink
-              <AccountBotIndicator v-if="account.bot" show-label />
+              v-if="isSelf"
-            </div>
+              to="/settings/profile/appearance"
-            <AccountHandle :account="account" />
+              gap-1 items-center border="1" rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
+              hover="border-primary text-primary bg-active"
+            >
+              {{ $t('settings.profile.appearance.title') }}
+            </NuxtLink>
+            <AccountFollowButton :account="account" :command="command" />
+            <span inset-ie-0 flex gap-2 items-center>
+              <AccountMoreButton
+                :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"
+                  :aria-label="t('account.notifications_on_post_enable', { username: `@${account.username}` })"
+                  rounded-full text-sm p2 border-1 transition-colors
+                  :class="isNotifiedOnPost ? 'text-primary border-primary hover:bg-red/20 hover:text-red hover:border-red' : 'border-base hover:text-primary'"
+                  @click="toggleNotifications"
+                >
+                  <span v-if="isNotifiedOnPost" i-ri:notification-4-fill block text-current />
+                  <span v-else i-ri-notification-4-line block text-current />
+                </button>
+              </CommonTooltip>
+              <CommonTooltip :content="$t('list.modify_account')">
+                <VDropdown v-if="!isSelf && relationship?.following">
+                  <button
+                    :aria-label="$t('list.modify_account')"
+                    rounded-full text-sm p2 border-1 transition-colors
+                    border-base hover:text-primary
+                  >
+                    <span i-ri:play-list-add-fill block text-current />
+                  </button>
+                  <template #popper>
+                    <ListLists :user-id="account.id" />
+                  </template>
+                </VDropdown>
+              </CommonTooltip>
+            </span>
           </div>
         </div>
-        <div absolute top-18 inset-ie-0 flex gap-2 items-center>
+        <div flex="~ col gap1" pt2>
-          <AccountMoreButton :account="account" :command="command" />
+          <div flex gap2 items-center flex-wrap>
-
+            <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
-          <button v-if="!isSelf && relationship?.following" flex gap-1 items-center w-full rounded op75 hover="op100 text-pink" group @click="toggleNotify()">
+            <AccountRolesIndicator :account="account" />
-            <div rounded-full p2 group-hover="bg-pink/10">
+            <AccountLockIndicator v-if="account.locked" show-label />
-              <div v-if="relationship?.notifying" i-ri:bell-fill />
+            <AccountBotIndicator v-if="account.bot" show-label />
-              <div v-else i-ri-bell-line />
+          </div>
-            </div>
+          <AccountHandle :account="account" overflow-unset line-clamp-unset />
-          </button>
-
-          <AccountFollowButton :account="account" :command="command" />
-          <!-- Edit profile -->
-          <NuxtLink
-            v-if="isSelf"
-            to="/settings/profile/appearance"
-            gap-1 items-center border="1" rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
-            hover="border-primary text-primary bg-active"
-          >
-            {{ $t('settings.profile.appearance.title') }}
-          </NuxtLink>
         </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 text-secondary uppercase text-xs font-bold>
+          <div mt="0.5" text-secondary uppercase text-xs font-bold>
-            {{ field.name }} |
+            <ContentRich :content="field.name" :emojis="account.emojis" />
           </div>
+          <span text-secondary text-xs font-bold>|</span>
           <ContentRich :content="field.value" :emojis="account.emojis" />
         </div>
       </div>
-      <div v-if="iconFields.length" flex="~ wrap gap-4">
+      <div v-if="iconFields.length" flex="~ wrap gap-2">
-        <div v-for="field in iconFields" :key="field.name" flex="~ gap-1" items-center>
+        <div v-for="field in iconFields" :key="field.name" flex="~ gap-1" px1 items-center :class="`${field.verifiedAt ? 'border-1 rounded-full border-dark' : ''}`">
           <CommonTooltip :content="getFieldIconTitle(field.name)">
             <div text-secondary :class="getAccountFieldIcon(field.name)" :title="getFieldIconTitle(field.name)" />
           </CommonTooltip>
-          <ContentRich text-sm filter-saturate-0 :content="field.value" :emojis="account.emojis" />
+          <ContentRich text-sm :content="field.value" :emojis="account.emojis" />
         </div>
       </div>
       <AccountPostsFollowers :account="account" />
     </div>
   </div>
 </template>
+
+<style>
+.trailing-newline::after {
+  content: '\a';
+}
+</style>

components/account/AccountHoverCard.vue

@@ -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" />
+    <AccountPostsFollowers text-sm :account="account" :is-hover-card="true" />
   </div>
 </template>

components/account/AccountHoverWrapper.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = defineProps<{
   account?: mastodon.v1.Account
   handle?: string
   disabled?: boolean
 }>()
 
-const account = props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined)
+const account = computed(() => props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined))
-defineOptions({
+const userSettings = useUserSettings()
-  inheritAttrs: false,
-})
 </script>
 
 <template>
-  <VMenu v-if="!disabled && account" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
+  <VMenu v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false">
     <slot />
     <template #popper>
       <AccountHoverCard v-if="account" :account="account" />

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 -->
@@ -20,9 +20,11 @@ defineOptions({
     <AccountHoverWrapper :disabled="!hoverCard" :account="account">
       <AccountBigAvatar :account="account" shrink-0 :square="square" />
     </AccountHoverWrapper>
-    <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none>
+    <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 :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

@@ -6,17 +6,26 @@ const { link = true, avatar = true } = defineProps<{
   link?: boolean
   avatar?: boolean
 }>()
+
+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.8rem pl-1.8rem rtl-(ml0 pl-0.5rem -mr-1.8rem pr-1.8rem)' : ''"
+      :class="link ? 'text-link-rounded -ml-1.5rem pl-1.5rem rtl-(ml0 pl-0.5rem -mr-1.5rem pr-1.5rem)' : ''"
+      v-bind="$attrs"
       min-w-0 flex gap-2 items-center
     >
       <AccountAvatar v-if="avatar" :account="account" w-5 h-5 />
-      <AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all />
+      <AccountDisplayName :account="account" :hide-emojis="getPreferences(userSettings, 'hideUsernameEmojis')" line-clamp-1 ws-pre-wrap break-all />
     </NuxtLink>
   </AccountHoverWrapper>
 </template>

components/account/AccountLockIndicator.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  showLabel?: boolean
+}>()
+</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">
+      Lock
+    </div>
+  </div>
+</template>

components/account/AccountMoreButton.vue

@@ -1,52 +1,59 @@
 <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<{
+  (evt: 'addNote'): void
+  (evt: 'removeNote'): void
+}>()
+
 let relationship = $(useRelationship(account))
 
 const isSelf = $(useSelfAccount(() => account))
 
-const masto = useMasto()
+const { t } = useI18n()
-const toggleMute = async () => {
+const { client } = $(useMasto())
-  // TODO: Add confirmation
+const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
+const { share, isSupported: isShareSupported } = useShare()
 
-  relationship!.muting = !relationship!.muting
+function shareAccount() {
-  relationship = relationship!.muting
+  share({ url: location.href })
-    ? await masto.v1.accounts.mute(account.id, {
-      // TODO support more options
-    })
-    : await masto.v1.accounts.unmute(account.id)
 }
 
-const toggleBlockUser = async () => {
+async function toggleReblogs() {
-  // TODO: Add confirmation
+  if (!relationship!.showingReblogs && await openConfirmDialog({
-
+    title: t('confirm.show_reblogs.title', [account.acct]),
-  relationship!.blocking = !relationship!.blocking
+    confirm: t('confirm.show_reblogs.confirm'),
-  relationship = await masto.v1.accounts[relationship!.blocking ? 'block' : 'unblock'](account.id)
+    cancel: t('confirm.show_reblogs.cancel'),
-}
+  }) !== 'confirm')
-
+    return
-const toggleBlockDomain = async () => {
-  // TODO: Add confirmation
-
-  relationship!.domainBlocking = !relationship!.domainBlocking
-  await masto.v1.domainBlocks[relationship!.domainBlocking ? 'block' : 'unblock'](getServerName(account))
-}
-
-const toggleReblogs = async () => {
-  // TODO: Add confirmation
 
   const showingReblogs = !relationship?.showingReblogs
-  relationship = await masto.v1.accounts.follow(account.id, { reblogs: showingReblogs })
+  relationship = await client.v1.accounts.follow(account.id, { reblogs: showingReblogs })
+}
+
+async function addUserNote() {
+  emit('addNote')
+}
+
+async function removeUserNote() {
+  if (!relationship!.note || relationship!.note.length === 0)
+    return
+
+  const newNote = await client.v1.accounts.createNote(account.id, { comment: '' })
+  relationship!.note = newNote.note
+  emit('removeNote')
 }
 </script>
 
 <template>
   <CommonDropdown :eager-mount="command">
     <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
-      <div rounded-5 p2 group-hover="bg-purple/10">
+      <div rounded-5 p2 elk-group-hover="bg-purple/10">
         <div i-ri:more-2-fill />
       </div>
     </button>
@@ -59,6 +66,13 @@ const toggleReblogs = async () => {
           :command="command"
         />
       </NuxtLink>
+      <CommonDropdownItem
+        v-if="isShareSupported"
+        :text="`Share @${account.acct}`"
+        icon="i-ri:share-line"
+        :command="command"
+        @click="shareAccount()"
+      />
 
       <template v-if="currentUser">
         <template v-if="!isSelf">
@@ -80,29 +94,44 @@ const toggleReblogs = async () => {
             icon="i-ri:repeat-line"
             :text="$t('menu.show_reblogs', [`@${account.acct}`])"
             :command="command"
-            @click="toggleReblogs"
+            @click="toggleReblogs()"
           />
           <CommonDropdownItem
             v-else
             :text="$t('menu.hide_reblogs', [`@${account.acct}`])"
             icon="i-ri:repeat-line"
             :command="command"
-            @click="toggleReblogs"
+            @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-up-fill"
+            icon="i-ri:volume-mute-line"
             :command="command"
-            @click="toggleMute"
+            @click="toggleMuteAccount (relationship!, account)"
           />
           <CommonDropdownItem
             v-else
             :text="$t('menu.unmute_account', [`@${account.acct}`])"
-            icon="i-ri:volume-mute-line"
+            icon="i-ri:volume-up-fill"
             :command="command"
-            @click="toggleMute"
+            @click="toggleMuteAccount (relationship!, account)"
           />
 
           <CommonDropdownItem
@@ -110,14 +139,14 @@ const toggleReblogs = async () => {
             :text="$t('menu.block_account', [`@${account.acct}`])"
             icon="i-ri:forbid-2-line"
             :command="command"
-            @click="toggleBlockUser"
+            @click="toggleBlockAccount (relationship!, account)"
           />
           <CommonDropdownItem
             v-else
             :text="$t('menu.unblock_account', [`@${account.acct}`])"
             icon="i-ri:checkbox-circle-line"
             :command="command"
-            @click="toggleBlockUser"
+            @click="toggleBlockAccount (relationship!, account)"
           />
 
           <template v-if="getServerName(account) !== currentServer">
@@ -126,16 +155,23 @@ const toggleReblogs = async () => {
               :text="$t('menu.block_domain', [getServerName(account)])"
               icon="i-ri:shut-down-line"
               :command="command"
-              @click="toggleBlockDomain"
+              @click="toggleBlockDomain(relationship!, account)"
             />
             <CommonDropdownItem
               v-else
               :text="$t('menu.unblock_domain', [getServerName(account)])"
               icon="i-ri:restart-line"
               :command="command"
-              @click="toggleBlockDomain"
+              @click="toggleBlockDomain(relationship!, account)"
             />
           </template>
+
+          <CommonDropdownItem
+            :text="$t('menu.report_account', [`@${account.acct}`])"
+            icon="i-ri:flag-2-line"
+            :command="command"
+            @click="openReportDialog(account)"
+          />
         </template>
 
         <template v-else>
@@ -143,7 +179,7 @@ const toggleReblogs = async () => {
             <CommonDropdownItem :text="$t('account.pinned')" icon="i-ri:pushpin-line" :command="command" />
           </NuxtLink>
           <NuxtLink to="/favourites">
-            <CommonDropdownItem :text="$t('account.favourites')" icon="i-ri:heart-3-line" :command="command" />
+            <CommonDropdownItem :text="$t('account.favourites')" :icon="useStarFavoriteIcon ? 'i-ri:star-line' : '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/AccountMoved.vue

@@ -19,10 +19,8 @@ defineProps<{
       </NuxtLink>
       <div flex-auto />
       <div flex items-center>
-        <NuxtLink :to="getAccountRoute(account.moved as any)">
+        <NuxtLink :to="getAccountRoute(account.moved as any)" btn-solid inline-block h-fit>
-          <button btn-solid h-fit>
+          {{ $t('account.go_to_profile') }}
-            {{ $t('account.go_to_profile') }}
-          </button>
         </NuxtLink>
       </div>
     </div>

components/account/AccountPostsFollowers.vue

@@ -3,6 +3,7 @@ import type { mastodon } from 'masto'
 
 defineProps<{
   account: mastodon.v1.Account
+  isHoverCard?: boolean
 }>()
 
 const userSettings = useUserSettings()
@@ -26,32 +27,51 @@ 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 }">
-        <CommonLocalizedNumber
+        <template
-          keypath="account.following_count"
+          v-if="!getPreferences(userSettings, 'hideFollowerCount')"
-          :count="account.followingCount"
+        >
-          font-bold
+          <CommonLocalizedNumber
-          :class="isExactActive ? 'text-primary' : 'text-base'"
+            v-if="account.followingCount >= 0"
-        />
+            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="!getWellnessSetting(userSettings, 'hideFollowerCount')"
+      v-if="!(isHoverCard && getPreferences(userSettings, 'hideFollowerCount'))"
       :to="getAccountFollowersRoute(account)"
       replace text-secondary
       exact-active-class="text-primary"
     >
       <template #default="{ isExactActive }">
-        <CommonLocalizedNumber
+        <template v-if="!getPreferences(userSettings, 'hideFollowerCount')">
-          keypath="account.followers_count"
+          <CommonLocalizedNumber
-          :count="account.followersCount"
+            v-if="account.followersCount >= 0"
-          font-bold
+            keypath="account.followers_count"
-          :class="isExactActive ? 'text-primary' : 'text-base'"
+            :count="account.followersCount"
-        />
+            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/AccountRoleIndicator.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Role {
+  name: string
+  color: string
+}
+
+defineProps<{
+  role: Role
+}>()
+</script>
+
+<template>
+  <div
+    flex="~ gap1" items-center
+    class="border border-base rounded-md px-1"
+    text-secondary-light
+  >
+    <slot name="prepend" />
+    <div :style="`color: ${role.color}; border-color: ${role.color}`">
+      {{ role.name }}
+    </div>
+  </div>
+</template>

components/account/AccountRolesIndicator.vue

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

components/aria/AriaAnnouncer.vue

@@ -14,7 +14,7 @@ const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
 let ariaLive = $ref<AriaLive>('polite')
 let ariaMessage = $ref<string>('')
 
-const onMessage = (event: AriaAnnounceType, message?: string) => {
+function onMessage(event: AriaAnnounceType, message?: string) {
   if (event === 'announce')
     ariaMessage = message!
   else if (event === 'mute')

components/command/CommandPanel.vue

@@ -26,12 +26,14 @@ const query = $computed(() => commandMode ? '' : input.trim())
 
 const { accounts, hashtags, loading } = useSearch($$(query))
 
-const toSearchQueryResultItem = (search: SearchResultType): QueryResultItem => ({
+function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
-  index: 0,
+  return {
-  type: 'search',
+    index: 0,
-  search,
+    type: 'search',
-  onActivate: () => router.push(search.to),
+    search,
-})
+    onActivate: () => router.push(search.to),
+  }
+}
 
 const searchResult = $computed<QueryResult>(() => {
   if (query.length === 0 || loading.value)
@@ -64,15 +66,19 @@ const result = $computed<QueryResult>(() => commandMode
   : searchResult,
 )
 
+const isMac = useIsMac()
+const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl')
+
 let active = $ref(0)
 watch($$(result), (n, o) => {
   if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx]))
     active = 0
 })
 
-const findItemEl = (index: number) =>
+function findItemEl(index: number) {
-  resultEl?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
+  return resultEl?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
-const onCommandActivate = (item: QueryResultItem) => {
+}
+function onCommandActivate(item: QueryResultItem) {
   if (item.onActivate) {
     item.onActivate()
     emit('close')
@@ -82,7 +88,7 @@ const onCommandActivate = (item: QueryResultItem) => {
     input = '> '
   }
 }
-const onCommandComplete = (item: QueryResultItem) => {
+function onCommandComplete(item: QueryResultItem) {
   if (item.onComplete) {
     scopes.push(item.onComplete())
     input = '> '
@@ -92,7 +98,7 @@ const onCommandComplete = (item: QueryResultItem) => {
     emit('close')
   }
 }
-const intoView = (index: number) => {
+function intoView(index: number) {
   const el = findItemEl(index)
   if (el)
     el.scrollIntoView({ block: 'nearest' })
@@ -104,7 +110,7 @@ function setActive(index: number) {
   intoView(active)
 }
 
-const onKeyDown = (e: KeyboardEvent) => {
+function onKeyDown(e: KeyboardEvent) {
   switch (e.key) {
     case 'p':
     case 'ArrowUp': {
@@ -233,8 +239,8 @@ const onKeyDown = (e: KeyboardEvent) => {
     <!-- Footer -->
     <div class="flex items-center px-3 py-1 text-xs">
       <div i-ri:lightbulb-flash-line /> Tip: Use
-      <CommandKey name="Ctrl+K" /> to search,
+      <CommandKey :name="`${modifierKeyName}+K`" /> to search,
-      <CommandKey name="Ctrl+/" /> to activate command mode.
+      <CommandKey :name="`${modifierKeyName}+/`" /> to activate command mode.
     </div>
   </div>
 </template>

components/common/CommonAlert.vue

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

components/common/CommonBlurhash.vue

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

components/common/CommonCheckbox.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts">
 defineProps<{
-  label: string
+  label?: string
   hover?: boolean
+  iconChecked?: string
+  iconUnchecked?: string
 }>()
-const { modelValue } = defineModel<{
+const modelValue = defineModel<boolean | null>()
-  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 flex-1 ms-2 pointer-events-none>{{ label }}</span>
+    <span v-if="label" flex-1 ms-2 pointer-events-none>{{ label }}</span>
     <span
-      :class="modelValue ? 'i-ri:checkbox-line' : 'i-ri:checkbox-blank-line'"
+      :class="modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line')"
       text-lg
       aria-hidden="true"
     />

components/common/CommonCropImage.vue

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

components/common/CommonErrorMessage.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{ describedBy: string }>()
+</script>
+
+<template>
+  <div
+    role="alert"
+    aria-live="polite"
+    :aria-describedby="describedBy"
+    flex="~ col"
+    gap-1 text-sm
+    pt-1 ps-2 pe-1 pb-2
+    text-red-600 dark:text-red-400
+    border="~ base rounded red-600 dark:red-400"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

components/common/CommonInputImage.vue

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

components/common/CommonMask.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const {
+  zIndex = 100,
+  background = 'transparent',
+} = $defineProps<{
+  zIndex?: number
+  background?: string
+}>()
+</script>
+
+<template>
+  <div fixed top-0 bottom-0 left-0 right-0 :style="{ background, zIndex }" />
+</template>

components/common/CommonPaginator.vue

@@ -3,6 +3,7 @@
 import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import type { Paginator, WsEvents } from 'masto'
+import type { UnwrapRef } from 'vue'
 
 const {
   paginator,
@@ -11,6 +12,7 @@ const {
   virtualScroller = false,
   eventType = 'update',
   preprocess,
+  endMessage = true,
 } = defineProps<{
   paginator: Paginator<T[], O>
   keyProp?: keyof T
@@ -18,31 +20,55 @@ const {
   stream?: Promise<WsEvents>
   eventType?: 'notification' | 'update'
   preprocess?: (items: (U | T)[]) => U[]
+  endMessage?: boolean | string
 }>()
 
 defineSlots<{
-  default: {
+  default: (props: {
     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: {
+  items: (props: {
-    items: U[]
+    items: UnwrapRef<U[]>
-  }
+  }) => void
-  updater: {
+  updater: (props: {
     number: number
     update: () => void
-  }
+  }) => void
-  loading: {}
+  loading: (props: object) => void
-  done: {}
+  done: (props: { items: U[] }) => void
 }>()
 
 const { t } = useI18n()
+const nuxtApp = useNuxtApp()
 
-const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType, preprocess)
+const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, $$(stream), eventType, preprocess)
+
+nuxtApp.hook('elk-logo:click', () => {
+  update()
+  nuxtApp.$scrollToTop()
+})
+
+function createEntry(item: any) {
+  items.value = [...items.value, preprocess?.([item]) ?? item]
+}
+
+function updateEntry(item: any) {
+  const id = item[keyProp]
+  const index = items.value.findIndex(i => (i as any)[keyProp] === id)
+  if (index > -1)
+    items.value = [...items.value.slice(0, index), preprocess?.([item]) ?? item, ...items.value.slice(index + 1)]
+}
+
+function removeEntry(entryId: any) {
+  items.value = items.value.filter(i => (i as any)[keyProp] !== entryId)
+}
+
+defineExpose({ createEntry, removeEntry, updateEntry })
 </script>
 
 <template>
@@ -58,25 +84,25 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
           page-mode
         >
           <slot
-            :key="item[keyProp]"
+            v-bind="{ key: item[keyProp] }"
             :item="item"
             :active="active"
-            :older="items[index + 1]"
+            :older="items[index + 1] as U"
-            :newer="items[index - 1]"
+            :newer="items[index - 1] as U"
             :index="index"
-            :items="items"
+            :items="items as U[]"
           />
         </DynamicScroller>
       </template>
       <template v-else>
         <slot
           v-for="item, index of items"
-          :key="(item as any)[keyProp]"
+          v-bind="{ key: item[keyProp as keyof U] }"
-          :item="item"
+          :item="item as U"
-          :older="items[index + 1]"
+          :older="items[index + 1] as U"
-          :newer="items[index - 1]"
+          :newer="items[index - 1] as U"
           :index="index"
-          :items="items"
+          :items="items as U[]"
         />
       </template>
     </slot>
@@ -84,9 +110,9 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
     <slot v-if="state === 'loading'" name="loading">
       <TimelineSkeleton />
     </slot>
-    <slot v-else-if="state === 'done'" name="done">
+    <slot v-else-if="state === 'done' && endMessage !== false" name="done" :items="items as U[]">
       <div p5 text-secondary italic text-center>
-        {{ t('common.end_of_list') }}
+        {{ t(typeof endMessage === 'string' ? endMessage : 'common.end_of_list') }}
       </div>
     </slot>
     <div v-else-if="state === 'error'" p5 text-secondary>

components/common/CommonPreviewPrompt.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const build = useBuildInfo()
+</script>
+
+<template>
+  <div
+    m-2 p5 bg-rose:10 relative
+    rounded-lg of-hidden
+    flex="~ col gap-3"
+  >
+    <h2 font-bold text-rose>
+      {{ $t('help.build_preview.title') }}
+    </h2>
+    <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>
+        </NuxtLink>
+      </i18n-t>
+    </p>
+    <p>{{ $t('help.build_preview.desc2') }}</p>
+    <p font-bold>
+      {{ $t('help.build_preview.desc3') }}
+    </p>
+    <div i-ri-git-pull-request-line absolute text-10em bottom--10 inset-ie--10 text-rose op10 class="-z-1" />
+  </div>
+</template>

components/common/CommonRadio.vue

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

components/common/CommonRouteTabs.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
 
+export interface CommonRouteTabOption {
+  to: RouteLocationRaw
+  display: string
+  disabled?: boolean
+  name?: string
+  icon?: string
+  hide?: boolean
+}
 const { options, command, replace, preventScrollTop = false } = $defineProps<{
-  options: {
+  options: CommonRouteTabOption[]
-    to: RouteLocationRaw
-    display: string
-    disabled?: boolean
-    name?: string
-    icon?: string
-  }[]
   command?: boolean
   replace?: boolean
   preventScrollTop?: boolean
@@ -28,9 +30,9 @@ useCommands(() => command
 </script>
 
 <template>
-  <div flex w-full items-center lg:text-lg of-x-auto scrollbar-hide>
+  <div flex w-full items-center lg:text-lg of-x-auto scrollbar-hide border="b base">
     <template
-      v-for="(option, index) in options"
+      v-for="(option, index) in options.filter(item => !item.hide)"
       :key="option?.name || index"
     >
       <NuxtLink

components/common/CommonTabs.vue

@@ -8,9 +8,7 @@ const { options, command } = defineProps<{
   command?: boolean
 }>()
 
-const { modelValue } = defineModel<{
+const modelValue = defineModel<string>({ required: true })
-  modelValue: string
-}>()
 
 const tabs = $computed(() => {
   return options.map((option) => {

components/common/CommonTooltip.vue

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

components/common/LocalizedNumber.vue

@@ -1,13 +1,13 @@
 <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))

components/common/dropdown/Dropdown.vue

@@ -9,7 +9,9 @@ defineProps<{
 const dropdown = $ref<any>()
 const colorMode = useColorMode()
 
-const hide = () => dropdown.hide()
+function hide() {
+  return dropdown.hide()
+}
 provide(InjectionKeyDropdownContext, {
   hide,
 })

components/common/dropdown/DropdownItem.vue

@@ -1,18 +1,21 @@
 <script setup lang="ts">
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+  is?: string
   text?: string
   description?: string
   icon?: string
   checked?: boolean
   command?: boolean
-}>()
+}>(), {
+  is: 'div',
+})
 const emit = defineEmits(['click'])
 
 const { hide } = useDropdownContext() || {}
 
 const el = ref<HTMLDivElement>()
 
-const handleClick = (evt: MouseEvent) => {
+function handleClick(evt: MouseEvent) {
   hide?.()
   emit('click', evt)
 }
@@ -39,9 +42,13 @@ useCommand({
 </script>
 
 <template>
-  <div
+  <component
-    v-bind="$attrs" ref="el"
+    v-bind="$attrs"
+    :is="is"
+    ref="el"
+    w-full
     flex gap-3 items-center cursor-pointer px4 py3
+    select-none
     hover-bg-active
     :aria-label="text"
     @click="handleClick"
@@ -66,5 +73,5 @@ useCommand({
 
     <div v-if="checked" i-ri:check-line />
     <slot name="actions" />
-  </div>
+  </component>
 </template>

components/content/ContentCode.vue

@@ -18,5 +18,6 @@ const highlighted = computed(() => {
 </script>
 
 <template>
-  <pre class="code-block" v-html="highlighted" />
+  <pre v-if="lang" class="code-block" v-html="highlighted" />
+  <pre v-else class="code-block">{{ raw }}</pre>
 </template>

components/content/ContentMentionGroup.vue

@@ -1,5 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  replying?: boolean
+}>()
+</script>
+
 <template>
-  <p flex="~ gap-1" items-center text-sm class="zen-none">
+  <p flex="~ gap-1 wrap" items-center text-sm :class="{ 'zen-none': !replying }">
     <span i-ri-arrow-right-line ml--1 text-secondary-light /><slot />
   </p>
 </template>

components/content/ContentRich.setup.ts

@@ -7,10 +7,12 @@ defineOptions({
 const {
   content,
   emojis,
+  hideEmojis = false,
   markdown = true,
 } = defineProps<{
   content: string
   emojis?: mastodon.v1.CustomEmoji[]
+  hideEmojis?: boolean
   markdown?: boolean
 }>()
 
@@ -21,6 +23,7 @@ export default () => h(
   { class: 'content-rich', dir: 'auto' },
   contentToVNode(content, {
     emojis: emojisObject.value,
+    hideEmojis,
     markdown,
   }),
 )

components/conversation/ConversationPaginator.vue

@@ -4,10 +4,17 @@ import type { Paginator, mastodon } from 'masto'
 const { paginator } = defineProps<{
   paginator: Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
 }>()
+
+function preprocess(items: mastodon.v1.Conversation[]): mastodon.v1.Conversation[] {
+  const isAuthored = (conversation: mastodon.v1.Conversation) => conversation.lastStatus ? conversation.lastStatus.account.id === currentUser.value?.account.id : false
+  return items.filter(item => isAuthored(item) || !item.lastStatus?.filtered?.find(
+    filter => filter.filter.filterAction === 'hide' && filter.filter.context.includes('thread'),
+  ))
+}
 </script>
 
 <template>
-  <CommonPaginator :paginator="paginator">
+  <CommonPaginator :paginator="paginator" :preprocess="preprocess">
     <template #default="{ item }">
       <ConversationCard
         :conversation="item"

components/help/HelpPreview.vue

@@ -10,7 +10,7 @@ const emit = defineEmits<{
       <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">
+    <img :alt="$t('app_logo')" :src="`/${''}logo.svg`" w-20 h-20 height="80" width="80" mxa class="rtl-flip">
     <h1 mxa text-4xl mb4>
       {{ $t('help.title') }}
     </h1>
@@ -30,7 +30,7 @@ const emit = defineEmits<{
     </p>
     {{ $t('help.desc_para3') }}
     <p flex="~ gap-2 wrap" mxa>
-      <template v-for="team of teams" :key="team.github">
+      <template v-for="team of elkTeamMembers" :key="team.github">
         <NuxtLink :href="`https://github.com/sponsors/${team.github}`" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
           <img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
         </NuxtLink>
@@ -38,7 +38,7 @@ const emit = defineEmits<{
     </p>
     <p italic flex justify-center w-full>
       <NuxtLink href="https://github.com/sponsors/elk-zone" target="_blank">
-        <span text-xl font-script hover:text-primary transition duration-300>The Elk Team</span>
+        <span text-xl font-script hover:text-primary transition duration-300>{{ $t('help.footer_team') }}</span>
       </NuxtLink>
     </p>
 

components/list/Account.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const { account, list } = defineProps<{
+  account: mastodon.v1.Account
+  hoverCard?: boolean
+  list: string
+}>()
+
+cacheAccount(account)
+
+const client = useMastoClient()
+
+const isRemoved = ref(false)
+
+async function edit() {
+  try {
+    isRemoved.value
+      ? await client.v1.lists.addAccount(list, { accountIds: [account.id] })
+      : await client.v1.lists.removeAccount(list, { accountIds: [account.id] })
+    isRemoved.value = !isRemoved.value
+  }
+  catch (err) {
+    console.error(err)
+  }
+}
+</script>
+
+<template>
+  <div flex justify-between hover:bg-active transition-100 items-center>
+    <AccountInfo
+      :account="account" hover p1 as="router-link"
+      :hover-card="hoverCard"
+      shrink
+      overflow-hidden
+      :to="getAccountRoute(account)"
+    />
+    <div>
+      <CommonTooltip
+        :content="isRemoved ? $t('list.add_account') : $t('list.remove_account')"
+        :hover="isRemoved ? 'text-green' : 'text-red'"
+        no-auto-focus
+      >
+        <button
+          text-sm p2 border-1 transition-colors
+          border-dark
+          btn-action-icon
+          @click="edit"
+        >
+          <span :class="isRemoved ? 'i-ri:user-add-line' : 'i-ri:user-unfollow-line'" />
+        </button>
+      </CommonTooltip>
+    </div>
+  </div>
+</template>

components/list/ListEntry.vue

@@ -0,0 +1,210 @@
+<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 { t } = useI18n()
+const client = useMastoClient()
+
+const { form, isDirty, submitter, reset } = useForm({
+  form: () => ({ ...list.value }),
+})
+
+let isEditing = $ref<boolean>(false)
+let deleting = $ref<boolean>(false)
+let actionError = $ref<string | undefined>(undefined)
+
+const input = ref<HTMLInputElement>()
+const editBtn = ref<HTMLButtonElement>()
+const deleteBtn = ref<HTMLButtonElement>()
+
+async function prepareEdit() {
+  isEditing = true
+  actionError = undefined
+  await nextTick()
+  input.value?.focus()
+}
+async function cancelEdit() {
+  isEditing = false
+  actionError = undefined
+  reset()
+
+  await nextTick()
+  editBtn.value?.focus()
+}
+
+const { submit, submitting } = submitter(async () => {
+  try {
+    list.value = await client.v1.lists.update(form.id, {
+      title: form.title,
+    })
+    cancelEdit()
+  }
+  catch (err) {
+    console.error(err)
+    actionError = (err as Error).message
+    await nextTick()
+    input.value?.focus()
+  }
+})
+
+async function removeList() {
+  if (deleting)
+    return
+
+  const confirmDelete = await openConfirmDialog({
+    title: t('confirm.delete_list.title', [list.value.title]),
+    confirm: t('confirm.delete_list.confirm'),
+    cancel: t('confirm.delete_list.cancel'),
+  })
+
+  deleting = true
+  actionError = undefined
+  await nextTick()
+
+  if (confirmDelete === 'confirm') {
+    await nextTick()
+    try {
+      await client.v1.lists.remove(list.value.id)
+      emit('listRemoved', list.value.id)
+    }
+    catch (err) {
+      console.error(err)
+      actionError = (err as Error).message
+      await nextTick()
+      deleteBtn.value?.focus()
+    }
+    finally {
+      deleting = false
+    }
+  }
+  else {
+    deleting = false
+  }
+}
+
+async function clearError() {
+  actionError = undefined
+  await nextTick()
+  if (isEditing)
+    input.value?.focus()
+  else
+    deleteBtn.value?.focus()
+}
+
+onDeactivated(cancelEdit)
+</script>
+
+<template>
+  <form
+    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"
+  >
+    <div
+      v-if="isEditing"
+      bg-base border="~ base" h10 m2 ps-1 pe-4 rounded-3 w-full flex="~ row"
+      items-center relative focus-within:box-shadow-outline gap-3
+    >
+      <CommonTooltip v-if="isEditing" :content="$t('list.cancel_edit')" no-auto-focus>
+        <button
+          type="button"
+          rounded-full text-sm p2 transition-colors
+          hover:text-primary
+          @click="cancelEdit()"
+        >
+          <span block text-current i-ri:close-fill />
+        </button>
+      </CommonTooltip>
+      <input
+        ref="input"
+        v-model="form.title"
+        rounded-3 w-full 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 }}
+    </NuxtLink>
+    <div mr4 flex gap2>
+      <CommonTooltip v-if="isEditing" :content="$t('list.save')" no-auto-focus>
+        <button
+          type="submit"
+          text-sm p2 border-1 transition-colors
+          border-dark hover:text-primary
+          btn-action-icon
+          :disabled="deleting || !isDirty || submitting"
+        >
+          <template v-if="isEditing">
+            <span v-if="submitting" 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" />
+          </template>
+        </button>
+      </CommonTooltip>
+      <CommonTooltip v-else :content="$t('list.edit')" no-auto-focus>
+        <button
+          ref="editBtn"
+          type="button"
+          text-sm p2 border-1 transition-colors
+          border-dark hover:text-primary
+          btn-action-icon
+          @click.prevent="prepareEdit"
+        >
+          <span block text-current i-ri:edit-2-line class="rtl-flip" />
+        </button>
+      </CommonTooltip>
+      <CommonTooltip :content="$t('list.delete')" no-auto-focus>
+        <button
+          type="button"
+          text-sm p2 border-1 transition-colors
+          border-dark hover:text-primary
+          btn-action-icon
+          :disabled="isEditing"
+          @click.prevent="removeList"
+        >
+          <span v-if="deleting" 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" />
+        </button>
+      </CommonTooltip>
+    </div>
+  </form>
+  <CommonErrorMessage
+    v-if="actionError"
+    :id="`action-list-error-${list.id}`"
+    :described-by="`action-list-failed-${list.id}`"
+    class="rounded-bs-is-0 rounded-bs-ie-0 border-t-dashed m-b-2"
+  >
+    <header :id="`action-list-failed-${list.id}`" flex justify-between>
+      <div flex items-center gap-x-2 font-bold>
+        <div aria-hidden="true" i-ri:error-warning-fill />
+        <p>{{ $t(`list.${isEditing ? 'edit_error' : 'delete_error'}`) }}</p>
+      </div>
+      <CommonTooltip placement="bottom" :content="$t('list.clear_error')" no-auto-focus>
+        <button
+          flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
+          @click="clearError"
+        >
+          <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
+        </button>
+      </CommonTooltip>
+    </header>
+    <ol ps-2 sm:ps-1>
+      <li flex="~ col sm:row" gap-y-1 sm:gap-x-2>
+        <strong sr-only>{{ $t('list.error_prefix') }}</strong>
+        <span>{{ actionError }}</span>
+      </li>
+    </ol>
+  </CommonErrorMessage>
+</template>

components/list/Lists.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+const { userId } = defineProps<{
+  userId: string
+}>()
+
+const { client } = $(useMasto())
+const paginator = client.v1.lists.list()
+const listsWithUser = ref((await client.v1.accounts.listLists(userId)).map(list => list.id))
+
+function indexOfUserInList(listId: string) {
+  return listsWithUser.value.indexOf(listId)
+}
+
+async function edit(listId: string) {
+  try {
+    const index = indexOfUserInList(listId)
+    if (index === -1) {
+      await client.v1.lists.addAccount(listId, { accountIds: [userId] })
+      listsWithUser.value.push(listId)
+    }
+    else {
+      await client.v1.lists.removeAccount(listId, { accountIds: [userId] })
+      listsWithUser.value = listsWithUser.value.filter(id => id !== listId)
+    }
+  }
+  catch (err) {
+    console.error(err)
+  }
+}
+</script>
+
+<template>
+  <CommonPaginator :end-message="false" :paginator="paginator">
+    <template #default="{ item }">
+      <div p4 hover:bg-active block w="100%" flex justify-between items-center gap-4>
+        <p>{{ item.title }}</p>
+        <CommonTooltip
+          :content="indexOfUserInList(item.id) === -1 ? $t('list.add_account') : $t('list.remove_account')"
+          :hover="indexOfUserInList(item.id) === -1 ? 'text-green' : 'text-red'"
+        >
+          <button
+            text-sm p2 border-1 transition-colors
+            border-dark
+            btn-action-icon
+            @click="() => edit(item.id)"
+          >
+            <span :class="indexOfUserInList(item.id) === -1 ? 'i-ri:user-add-line' : 'i-ri:user-unfollow-line'" />
+          </button>
+        </CommonTooltip>
+      </div>
+    </template>
+  </CommonPaginator>
+</template>

components/magickeys/MagickeysKeyboardShortcuts.vue

@@ -0,0 +1,118 @@
+<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: 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_home'),
+        shortcut: { keys: ['g', 'h'], isSequence: true },
+      },
+      {
+        description: t('magic_keys.groups.navigation.go_to_notifications'),
+        shortcut: { keys: ['g', 'n'], isSequence: true },
+      },
+    ],
+  },
+  {
+    name: t('magic_keys.groups.actions.title'),
+    items: [
+      {
+        description: t('magic_keys.groups.actions.command_mode'),
+        shortcut: { keys: [modifierKeyName, '/'], isSequence: false },
+      },
+      {
+        description: t('magic_keys.groups.actions.compose'),
+        shortcut: { keys: ['c'], 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

@@ -4,18 +4,35 @@ defineProps<{
   backOnSmallScreen?: boolean
   /** Show the back button on both small and big screens */
   back?: boolean
+  /** Do not applying overflow hidden to let use floatable components in title */
+  noOverflowHidden?: boolean
 }>()
+
+const container = ref()
+const route = useRoute()
+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>
+  <div ref="container" :class="containerClass">
     <div
       sticky top-0 z10 backdrop-blur
       pt="[env(safe-area-inset-top,0)]"
-      border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
+      bg="[rgba(var(--rgb-bg-base),0.7)]"
+      class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
     >
-      <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }">
+      <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
-        <div flex gap-3 items-center overflow-hidden py2>
+        <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
             :aria-label="$t('nav.back')"
@@ -23,21 +40,26 @@ defineProps<{
           >
             <div i-ri:arrow-left-line class="rtl-flip" />
           </NuxtLink>
-          <div truncate>
+          <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 h-7 w-1px />
+          <div sm:hidden h-7 w-1px />
         </div>
         <div flex items-center flex-shrink-0 gap-x-2>
           <slot name="actions" />
-          <PwaBadge lg:hidden />
+          <PwaBadge xl:hidden />
-          <NavUser v-if="isMastoInitialised" />
+          <NavUser v-if="isHydrated" />
           <NavUserSkeleton v-else />
         </div>
       </div>
-      <slot name="header" />
+      <slot name="header">
+        <div hidden />
+      </slot>
+    </div>
+    <PwaInstallPrompt xl: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 :class="{ 'xl:block': $route.name !== 'tag' }" hidden h-6 />
-    <slot />
   </div>
 </template>

components/modal/ModalConfirm.vue

@@ -18,10 +18,10 @@ const emit = defineEmits<{
     </div>
     <div flex justify-end gap-2>
       <button btn-text @click="emit('choice', 'cancel')">
-        {{ cancel || $t('common.confirm_dialog.cancel') }}
+        {{ cancel || $t('confirm.common.cancel') }}
       </button>
       <button btn-solid @click="emit('choice', 'confirm')">
-        {{ confirm || $t('common.confirm_dialog.confirm') }}
+        {{ confirm || $t('confirm.common.confirm') }}
       </button>
     </div>
   </div>

components/modal/ModalContainer.vue

@@ -5,10 +5,13 @@ import {
   isCommandPanelOpen,
   isConfirmDialogOpen,
   isEditHistoryDialogOpen,
+  isErrorDialogOpen,
   isFavouritedBoostedByDialogOpen,
+  isKeyboardShortcutsDialogOpen,
   isMediaPreviewOpen,
   isPreviewHelpOpen,
   isPublishDialogOpen,
+  isReportDialogOpen,
   isSigninDialogOpen,
 } from '~/composables/dialog'
 
@@ -31,27 +34,27 @@ useEventListener('keydown', (e: KeyboardEvent) => {
   }
 })
 
-const handlePublished = (status: mastodon.v1.Status) => {
+function handlePublished(status: mastodon.v1.Status) {
   lastPublishDialogStatus.value = status
   isPublishDialogOpen.value = false
 }
 
-const handlePublishClose = () => {
+function handlePublishClose() {
   lastPublishDialogStatus.value = null
 }
 
-const handleConfirmChoice = (choice: ConfirmDialogChoice) => {
+function handleConfirmChoice(choice: ConfirmDialogChoice) {
   confirmDialogChoice.value = choice
   isConfirmDialogOpen.value = false
 }
 
-const handleFavouritedBoostedByClose = () => {
+function handleFavouritedBoostedByClose() {
   isFavouritedBoostedByDialogOpen.value = false
 }
 </script>
 
 <template>
-  <template v-if="isMastoInitialised">
+  <template v-if="isHydrated">
     <ModalDialog v-model="isSigninDialogOpen" py-4 px-8 max-w-125>
       <UserSignIn />
     </ModalDialog>
@@ -87,6 +90,9 @@ const handleFavouritedBoostedByClose = () => {
     <ModalDialog v-model="isConfirmDialogOpen" py-4 px-8 max-w-125>
       <ModalConfirm v-if="confirmDialogLabel" v-bind="confirmDialogLabel" @choice="handleConfirmChoice" />
     </ModalDialog>
+    <ModalDialog v-model="isErrorDialogOpen" py-4 px-8 max-w-125>
+      <ModalError v-if="errorDialogData" v-bind="errorDialogData" />
+    </ModalDialog>
     <ModalDialog
       v-model="isFavouritedBoostedByDialogOpen"
       max-w-180
@@ -94,5 +100,11 @@ const 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,6 +36,10 @@ export interface Props {
   dialogLabelledBy?: string
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const props = withDefaults(defineProps<Props>(), {
   zIndex: 100,
   closeByMask: true,
@@ -45,13 +49,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   /** v-model dialog visibility */
-  (event: 'close',): void
+  (event: 'close'): void
 }>()
 
-const { modelValue: visible } = defineModel<{
+const visible = defineModel<boolean>({ required: true })
-  /** v-model dislog visibility */
-  modelValue: boolean
-}>()
 
 const deactivated = useDeactivated()
 const route = useRoute()
@@ -76,6 +77,8 @@ defineExpose({
 
 /** close the dialog */
 function close() {
+  if (!visible.value)
+    return
   visible.value = false
   emit('close')
 }
@@ -115,9 +118,11 @@ const isVShow = computed(() => {
     : true
 })
 
-const bindTypeToAny = ($attrs: any) => $attrs as any
+function bindTypeToAny($attrs: any) {
+  return $attrs as any
+}
 
-const trapFocusDialog = () => {
+function trapFocusDialog() {
   if (isVShow.value)
     nextTick().then(() => activate())
 }
@@ -132,12 +137,6 @@ useEventListener('keydown', (e: KeyboardEvent) => {
 })
 </script>
 
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
-</script>
-
 <template>
   <Teleport to="body">
     <!-- Dialog component -->

components/modal/ModalError.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ErrorDialogData } from '~/types'
+
+defineProps<ErrorDialogData>()
+</script>
+
+<template>
+  <div flex="~ col" gap-6>
+    <div font-bold text-lg text-center>
+      {{ title }}
+    </div>
+    <div
+      flex="~ col"
+      gap-1 text-sm
+      pt-1 ps-2 pe-1 pb-2
+      text-red-600 dark:text-red-400
+      border="~ base rounded red-600 dark:red-400"
+    >
+      <ol ps-2 sm:ps-1>
+        <li v-for="(message, i) in messages" :key="i" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
+          {{ message }}
+        </li>
+      </ol>
+    </div>
+    <div flex justify-end gap-2>
+      <button btn-text @click="closeErrorDialog()">
+        {{ close }}
+      </button>
+    </div>
+  </div>
+</template>

components/modal/ModalMediaPreview.vue

@@ -53,28 +53,29 @@ onUnmounted(() => locked.value = false)
       <div i-ri:arrow-left-s-line text-white />
     </button>
 
-    <div flex flex-row items-center mxa>
+    <div flex="~ col center" h-full w-full>
       <ModalMediaPreviewCarousel v-model="index" :media="mediaPreviewList" @close="emit('close')" />
-    </div>
 
-    <div absolute top-0 w-full flex justify-between>
+      <div bg="black/30" dark:bg="white/10" mb-6 mt-4 text-white rounded-full flex="~ center shrink-0" overflow-hidden>
-      <button
+        <div v-if="mediaPreviewList.length > 1" p="y-1 x-3" rounded-r-0 shrink-0>
-        btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
-        dark:hover-bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
-      >
-        <div i-ri:close-line text-white />
-      </button>
-      <div bg="black/30" dark:bg="white/10" ms-4 my-auto text-white rounded-full flex="~ center" overflow-hidden>
-        <div v-if="mediaPreviewList.length > 1" p="y-1 x-2" rounded-r-0 shrink-0>
           {{ index + 1 }} / {{ mediaPreviewList.length }}
         </div>
         <p
-          v-if="current.description" bg="dark/30" dark:bg="white/10" p="y-1 x-2" rounded-ie-full line-clamp-1
+          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>
+
+    <div absolute top-0 w-full flex justify-end>
+      <button
+        btn-action-icon bg="black/30" aria-label="action.close" hover:bg="black/40" dark:bg="white/30"
+        dark:hover-bg="white/20" pointer-events-auto shrink-0 @click="emit('close')"
+      >
+        <div i-ri:close-line text-white />
+      </button>
+    </div>
   </div>
 </template>

components/modal/ModalMediaPreviewCarousel.vue

@@ -1,70 +1,279 @@
 <script setup lang="ts">
-import { SwipeDirection } from '@vueuse/core'
+import type { Vector2 } from '@vueuse/gesture'
+import { useGesture } from '@vueuse/gesture'
 import { useReducedMotion } from '@vueuse/motion'
 import type { mastodon } from 'masto'
 
-const { media = [], threshold = 20 } = defineProps<{
+const { media = [] } = defineProps<{
   media?: mastodon.v1.MediaAttachment[]
-  threshold?: number
 }>()
 
 const emit = defineEmits<{
   (event: 'close'): void
 }>()
 
-const { modelValue } = defineModel<{
+const modelValue = defineModel<number>({ required: true })
-  modelValue: number
-}>()
 
-const target = ref()
+const slideGap = 20
+const doubleTapTreshold = 250
 
-const animateTimeout = useTimeout(10)
+const view = ref()
-const reduceMotion = useReducedMotion()
+const slider = ref()
+const slide = ref()
+const image = ref()
 
-const canAnimate = computed(() => !reduceMotion.value && animateTimeout.value)
+const reduceMotion = process.server ? ref(false) : useReducedMotion()
+const isInitialScrollDone = useTimeout(350)
+const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value)
 
-const { width, height } = useElementSize(target)
+const scale = ref(1)
-const { isSwiping, lengthX, lengthY, direction } = useSwipe(target, {
+const x = ref(0)
-  threshold: 5,
+const y = ref(0)
-  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)
 
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+const isDragging = ref(false)
-    if (direction === SwipeDirection.LEFT && Math.abs(distanceX.value) > threshold)
+const isPinching = ref(false)
-      modelValue.value = Math.min(media.length - 1, modelValue.value + 1)
 
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+const maxZoomOut = ref(1)
-    if (direction === SwipeDirection.UP && Math.abs(distanceY.value) > threshold)
+const isZoomedIn = computed(() => scale.value > 1)
-      emit('close')
+
+function goToFocusedSlide() {
+  scale.value = 1
+  x.value = slide.value[modelValue.value].offsetLeft * scale.value
+  y.value = 0
+}
+
+onMounted(() => {
+  const slideGapAsScale = slideGap / view.value.clientWidth
+  maxZoomOut.value = 1 - slideGapAsScale
+
+  goToFocusedSlide()
+})
+watch(modelValue, goToFocusedSlide)
+
+let lastOrigin = [0, 0]
+let initialScale = 0
+useGesture({
+  onPinch({ first, initial: [initialDistance], movement: [deltaDistance], da: [distance], origin, touches }) {
+    isPinching.value = true
+
+    if (first) {
+      initialScale = scale.value
+    }
+    else {
+      if (touches === 0)
+        handleMouseWheelZoom(initialScale, deltaDistance, origin)
+      else
+        handlePinchZoom(initialScale, initialDistance, distance, origin)
+    }
+
+    lastOrigin = origin
+  },
+  onPinchEnd() {
+    isPinching.value = false
+    isDragging.value = false
+
+    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,
+  eventOptions: {
+    passive: false,
   },
 })
 
-const distanceX = computed(() => {
+const shiftRestrictions = computed(() => {
-  if (width.value === 0)
+  const focusedImage = image.value[modelValue.value]
-    return 0
+  const focusedSlide = slide.value[modelValue.value]
 
-  if (!isSwiping.value || (direction.value !== SwipeDirection.LEFT && direction.value !== SwipeDirection.RIGHT))
+  const scaledImageWidth = focusedImage.offsetWidth * scale.value
-    return modelValue.value * 100 * -1
+  const scaledHorizontalOverflow = scaledImageWidth / 2 - view.value.clientWidth / 2 + slideGap
+  const horizontalOverflow = Math.max(0, scaledHorizontalOverflow / scale.value)
 
-  return (lengthX.value / width.value) * 100 * -1 + (modelValue.value * 100) * -1
+  const scaledImageHeight = focusedImage.offsetHeight * scale.value
+  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,
+  }
 })
 
-const distanceY = computed(() => {
+function handlePinchZoom(initialScale: number, initialDistance: number, distance: number, [originX, originY]: Vector2) {
-  if (height.value === 0 || !isSwiping.value || direction.value !== SwipeDirection.UP)
+  scale.value = initialScale * (distance / initialDistance)
-    return 0
+  scale.value = Math.max(maxZoomOut.value, scale.value)
 
-  return (lengthY.value / height.value) * 100 * -1
+  const deltaCenterX = originX - lastOrigin[0]
+  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 < doubleTapTreshold
+  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 then 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="target" flex flex-row max-h-full max-w-full overflow-hidden>
+  <div ref="view" flex flex-row h-full w-full overflow-hidden>
-    <div flex :style="{ transform: `translateX(${distanceX}%) translateY(${distanceY}%)`, transition: isSwiping ? 'none' : canAnimate ? 'all 0.5s ease' : 'none' }">
+    <div ref="slider" :style="sliderStyle" w-full h-full flex items-center>
-      <div v-for="item in media" :key="item.id" p4 select-none w-full flex-shrink-0 flex flex-col place-items-center>
+      <div
-        <img max-h-full max-w-full :draggable="false" select-none :src="item.url || item.previewUrl" :alt="item.description || ''">
+        v-for="item in media"
+        :key="item.id"
+        ref="slide"
+        flex-shrink-0
+        w-full
+        h-full
+        flex
+        items-center
+        justify-center
+      >
+        <img
+          ref="image"
+          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,6 +1,8 @@
 <script setup lang="ts">
 // only one icon can be lit up at the same time
 const moreMenuVisible = ref(false)
+
+const { notifications } = useNotifications()
 </script>
 
 <template>
@@ -10,43 +12,45 @@ const moreMenuVisible = ref(false)
     class="after-content-empty after:(h-[calc(100%+0.5px)] w-0.1px pointer-events-none)"
   >
     <!-- These weird styles above are used for scroll locking, don't change it unless you know exactly what you're doing. -->
-    <template v-if="isMastoInitialised && currentUser">
+    <template v-if="currentUser">
-      <NuxtLink to="/home" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink to="/home" :aria-label="$t('nav.home')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div i-ri:home-5-line />
       </NuxtLink>
-      <NuxtLink to="/search" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink to="/search" :aria-label="$t('nav.search')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div i-ri:search-line />
       </NuxtLink>
-      <NuxtLink to="/notifications" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink to="/notifications" :aria-label="$t('nav.notifications')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-        <div i-ri:notification-4-line />
+        <div flex relative>
+          <div class="i-ri:notification-4-line" text-xl />
+          <div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
+            {{ notifications < 10 ? notifications : '•' }}
+          </div>
+        </div>
       </NuxtLink>
-      <NuxtLink to="/conversations" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink to="/conversations" :aria-label="$t('nav.conversations')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div i-ri:at-line />
       </NuxtLink>
     </template>
-    <template v-if="isMastoInitialised && !currentUser">
+    <template v-else>
-      <NuxtLink :to="`/${currentServer}/explore`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink :to="`/${currentServer}/explore`" :aria-label="$t('nav.explore')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div i-ri:hashtag />
       </NuxtLink>
-      <NuxtLink to="/search" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink group :to="`/${currentServer}/public/local`" :aria-label="$t('nav.local')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
-        <div i-ri:search-line />
-      </NuxtLink>
-      <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`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink :to="`/${currentServer}/public`" :aria-label="$t('nav.federated')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div i-ri:earth-line />
       </NuxtLink>
     </template>
     <NavBottomMoreMenu v-slot="{ toggleVisible, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer>
-      <label
+      <button
         flex items-center place-content-center h-full flex-1 class="select-none"
         :class="show ? '!text-primary' : ''"
+        aria-label="More menu"
+        @click="toggleVisible"
       >
-        <input type="checkbox" z="-1" absolute inset-0 opacity-0 @click="toggleVisible">
+        <span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
-        <span v-show="show" i-ri:close-fill />
+      </button>
-        <span v-show="!show" i-ri:more-fill />
-      </label>
     </NavBottomMoreMenu>
   </nav>
 </template>

components/nav/NavBottomMoreMenu.vue

@@ -1,22 +1,24 @@
 <script lang="ts" setup>
-let { modelValue } = $defineModel<{
+import { invoke } from '@vueuse/core'
-  modelValue: boolean
+
-}>()
+const modelValue = defineModel<boolean>({ required: true })
 const colorMode = useColorMode()
 
 const userSettings = useUserSettings()
 
+const drawerEl = ref<HTMLDivElement>()
+
 function toggleVisible() {
-  modelValue = !modelValue
+  modelValue.value = !modelValue.value
 }
 
 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 */
 function clickEvent(mouse: MouseEvent) {
   if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) {
-    if (modelValue) {
+    if (modelValue.value) {
       document.removeEventListener('click', clickEvent)
-      modelValue = false
+      modelValue.value = false
     }
   }
 }
@@ -25,7 +27,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)
 })
@@ -33,6 +35,80 @@ 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>
@@ -41,12 +117,12 @@ onBeforeUnmount(() => {
 
     <!-- Drawer -->
     <Transition
-      enter-active-class="transition duration-250 ease-out children:(transition duration-250 ease-out)"
+      enter-active-class="transition duration-250 ease-out"
-      enter-from-class="opacity-0 children:(transform translate-y-full)"
+      enter-from-class="opacity-0 children:(translate-y-full)"
-      enter-to-class="opacity-100 children:(transform translate-y-0)"
+      enter-to-class="opacity-100 children:(translate-y-0)"
-      leave-active-class="transition duration-250 ease-in  children:(transition duration-250 ease-in)"
+      leave-active-class="transition duration-250 ease-in"
-      leave-from-class="opacity-100 children:(transform translate-y-0)"
+      leave-from-class="opacity-100 children:(translate-y-0)"
-      leave-to-class="opacity-0 children:(transform translate-y-full)"
+      leave-to-class="opacity-0 children:(translate-y-full)"
     >
       <div
         v-show="modelValue"
@@ -58,7 +134,15 @@ onBeforeUnmount(() => {
         <!-- 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,
+          }"
+          transition="transform ease-in"
           flex-1 min-w-48 py-6 mb="-1px"
           of-y-auto scrollbar-hide overscroll-none max-h="[calc(100vh-200px)]"
           rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter backdrop-blur-md
@@ -93,9 +177,9 @@ onBeforeUnmount(() => {
               transition-colors duration-200 transform
               hover="bg-gray-100 dark:(bg-gray-700 text-white)"
               :aria-label="$t('nav.zen_mode')"
-              @click="userSettings.zenMode = !userSettings.zenMode"
+              @click="togglePreferences('zenMode')"
             >
-              <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" />
+              <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" />
               {{ $t('nav.zen_mode') }}
             </button>
           </div>

components/nav/NavFooter.vue

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

components/nav/NavLogo.vue

@@ -0,0 +1,54 @@
+<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
+    aspect="1/1" sm:h-8 xl:h-10 sm:w-8 xl:w-10 viewBox="0 0 250 250" fill="none"
+  >
+    <mask
+      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
+      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"
+      />
+      <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"
+      />
+      <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"
+      />
+    </g>
+  </svg>
+
+  </span>
+</template>
+
+<style scoped>
+svg path.wood {
+    fill: var(--c-primary);
+}
+svg path.body {
+    fill: var(--c-text-secondary);
+}
+</style>

components/nav/NavSide.vue

@@ -3,20 +3,19 @@ const { command } = defineProps<{
   command?: boolean
 }>()
 const { notifications } = useNotifications()
+const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 </script>
 
 <template>
-  <nav sm:px3 flex="~ col gap2" shrink text-size-base leading-normal md:text-lg>
+  <nav sm:px3 flex="~ col gap2" shrink text-size-base leading-normal md:text-lg h-full mt-1 overflow-y-auto>
-    <div shrink hidden sm:block mt-4 />
-    <SearchWidget lg:ms-1 lg:me-5 hidden xl:block />
     <NavSideItem :text="$t('nav.search')" to="/search" icon="i-ri:search-line" xl:hidden :command="command" />
 
-    <div shrink hidden sm:block mt-4 />
+    <div class="spacer" shrink xl:hidden />
     <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
     <NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command">
       <template #icon>
         <div flex relative>
-          <div class="i-ri:notification-4-line" md:text-size-inherit text-xl />
+          <div class="i-ri:notification-4-line" text-xl />
           <div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
             {{ notifications < 10 ? notifications : '•' }}
           </div>
@@ -24,16 +23,30 @@ const { notifications } = useNotifications()
       </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="i-ri:heart-3-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.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 shrink hidden sm:block mt-4 />
+    <div class="spacer" shrink hidden sm:block />
-    <NavSideItem :text="$t('nav.explore')" :to="isMastoInitialised ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" />
+    <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" />
-    <NavSideItem :text="$t('nav.local')" :to="isMastoInitialised ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-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="isMastoInitialised ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-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" />
 
-    <div shrink hidden sm:block mt-4 />
+    <div class="spacer" shrink hidden sm:block />
     <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: {}
+  icon: (props: object) => void
-  default: {}
+  default: (props: object) => void
 }>()
 
 const router = useRouter()
@@ -29,7 +29,7 @@ useCommand({
 })
 
 let activeClass = $ref('text-primary')
-onMastoInit(async () => {
+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 = ''
@@ -39,8 +39,8 @@ onMastoInit(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(() => !isMastoInitialised.value || (props.userOnly && !currentUser.value))
+const noUserDisable = computed(() => !isHydrated.value || (props.userOnly && !currentUser.value))
-const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly && !currentUser.value)
+const noUserVisual = computed(() => isHydrated.value && props.userOnly && !currentUser.value)
 </script>
 
 <template>
@@ -53,22 +53,48 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
     :tabindex="noUserDisable ? -1 : null"
     @click="$scrollToTop"
   >
-    <CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
+    <CommonTooltip :disabled="!isMediumOrLargeScreen" :content="text" placement="right">
       <div
+        class="item"
         flex items-center gap4
         w-fit rounded-3
-        px2 py2 mx3 sm:mxa
+        px2 mx3 sm:mxa
         xl="ml0 mr5 px5 w-auto"
         transition-100
-        group-hover="bg-active" group-focus-visible:ring="2 current"
+        elk-group-hover="bg-active" group-focus-visible:ring="2 current"
       >
         <slot name="icon">
           <div :class="icon" text-xl />
         </slot>
         <slot>
-          <span block sm:hidden xl:block>{{ isHydrated ? text : '&nbsp;' }}</span>
+          <span block sm:hidden xl:block select-none>{{ isHydrated ? text : '&nbsp;' }}</span>
         </slot>
       </div>
     </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

@@ -2,6 +2,13 @@
 const { env } = useBuildInfo()
 const router = useRouter()
 const back = ref<any>('')
+
+const nuxtApp = useNuxtApp()
+
+function onClickLogo() {
+  nuxtApp.hooks.callHook('elk-logo:click')
+}
+
 onMounted(() => {
   back.value = router.options.history.state.back
 })
@@ -11,31 +18,33 @@ router.afterEach(() => {
 </script>
 
 <template>
-  <!-- Use external to force refresh page and jump to top of timeline -->
+  <div flex justify-between sticky top-0 bg-base z-1 py-4 native:py-7 data-tauri-drag-region>
-  <div flex justify-between>
     <NuxtLink
-      flex items-end gap-4
+      flex items-end gap-3
       py2 px-5
       text-2xl
+      select-none
       focus-visible:ring="2 current"
-      to="/"
+      to="/home"
-      external
+      @click.prevent="onClickLogo"
     >
-      <img :alt="$t('app_logo')" src="/logo.svg" shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip">
+      <NavLogo shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip" />
-      <div hidden xl:block>
+      <div v-show="isHydrated" hidden xl:block text-secondary>
-        {{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
+        {{ $t('app_name') }} <sup text-sm italic mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
       </div>
     </NuxtLink>
     <div
-      hidden xl:flex items-center me-8 mt-2
+      hidden xl:flex items-center me-8 mt-2 gap-1
-      :class="{ 'pointer-events-none op40': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
     >
-      <NuxtLink
+      <CommonTooltip :content="$t('nav.back')">
-        :aria-label="$t('nav.back')"
+        <NuxtLink
-        @click="$router.go(-1)"
+          :aria-label="$t('nav.back')"
-      >
+          :class="{ 'pointer-events-none op0': !back || back === '/', 'xl:flex': $route.name !== 'tag' }"
-        <div i-ri:arrow-left-line class="rtl-flip" btn-text />
+          @click="$router.go(-1)"
-      </NuxtLink>
+        >
+          <div text-xl i-ri:arrow-left-line class="rtl-flip" btn-text />
+        </NuxtLink>
+      </CommonTooltip>
     </div>
   </div>
 </template>

components/nav/NavUser.vue

@@ -1,8 +1,11 @@
+<script setup>
+const { busy, oauth, singleInstanceServer } = useSignIn()
+</script>
+
 <template>
-  <VDropdown v-if="isMastoInitialised && currentUser" sm:hidden>
+  <VDropdown v-if="isHydrated && currentUser" sm:hidden>
     <div style="-webkit-touch-callout: none;">
       <AccountAvatar
-        ref="avatar"
         :account="currentUser.account"
         h-8
         w-8
@@ -12,10 +15,27 @@
     </div>
 
     <template #popper="{ hide }">
-      <UserSwitcher ref="switcher" @click="hide()" />
+      <UserSwitcher @click="hide()" />
     </template>
   </VDropdown>
-  <button v-else btn-solid text-sm px-2 py-1 text-center xl:hidden @click="openSigninDialog()">
+  <template v-else>
-    {{ $t('action.sign_in') }}
+    <button
-  </button>
+      v-if="singleInstanceServer"
+      flex="~ row"
+      gap-x-1 items-center justify-center btn-solid text-sm px-2 py-1 xl:hidden
+      :disabled="busy"
+      @click="oauth()"
+    >
+      <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 aria-hidden="true" block i-ri:login-circle-line class="rtl-flip" />
+      <i18n-t keypath="action.sign_in_to">
+        <strong>{{ currentServer }}</strong>
+      </i18n-t>
+    </button>
+    <button v-else btn-solid text-sm px-2 py-1 text-center xl:hidden @click="openSigninDialog()">
+      {{ $t('action.sign_in') }}
+    </button>
+  </template>
 </template>

components/notification/NotificationCard.vue

@@ -39,6 +39,23 @@ const { notification } = defineProps<{
         <span>{{ $t("notification.signed_up") }}</span>
       </div>
     </template>
+    <template v-else-if="notification.type === 'admin.report'">
+      <NuxtLink :to="getReportRoute(notification.report?.id!)">
+        <div flex p3 items-center bg-shaded>
+          <div i-ri:flag-fill me-1 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 ms-4 items-center class="-top-2.5" absolute inset-ie-2 px-2>
         <div i-ri:user-follow-fill text-xl me-1 />
@@ -47,28 +64,8 @@ const { notification } = defineProps<{
       <!-- 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!" :faded="true">
+      <StatusCard :status="notification.status!" :in-notification="true" :actions="false">
         <template #meta>
           <div flex="~" gap-1 items-center mt1>
             <div i-ri:edit-2-fill text-xl me-1 text-secondary />
@@ -84,6 +81,7 @@ const { notification } = defineProps<{
       <StatusCard :status="notification.status!" />
     </template>
     <template v-else>
+      <!-- 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: {}
+  error: (props: object) => void
 }>()
 
 const xl = useMediaQuery('(min-width: 1280px)')

components/notification/NotificationGroupedFollow.vue

@@ -8,7 +8,7 @@ const { items } = defineProps<{
 const count = $computed(() => items.items.length)
 const isExpanded = ref(false)
 const lang = $computed(() => {
-  return count > 1 || count === 0 ? undefined : items.items[0].status?.language
+  return (count > 1 || count === 0) ? undefined : items.items[0].status?.language
 })
 </script>
 

components/notification/NotificationGroupedLikes.vue

@@ -4,21 +4,59 @@ 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>
-    <StatusCard :status="group.status!" :faded="true">
+    <StatusLink :status="group.status!" pb2 pt3>
-      <template #meta>
+      <div flex flex-col gap-2>
-        <div flex flex-col gap-1 mt-1>
+        <div v-if="reblogs.length" flex="~ gap-1">
-          <div v-for="like of group.likes" :key="like.account.id" flex>
+          <div i-ri:repeat-fill text-xl me-1 color-green />
-            <div v-if="like.reblog" i-ri:repeat-fill text-xl me-2 color-green />
+          <template v-for="i, idx of reblogs" :key="idx">
-            <div v-if="like.favourite && !like.reblog" i-ri:heart-fill text-xl me-2 color-red />
+            <AccountHoverWrapper :account="i.account">
-            <AccountInlineInfo text-primary font-bold :account="like.account" me2 />
+              <NuxtLink :to="getAccountRoute(i.account)">
-            <div v-if="like.favourite && like.reblog" i-ri:heart-fill text-xl me-2 color-red />
+                <AccountAvatar text-primary font-bold :account="i.account" class="h-1.5em w-1.5em" />
+              </NuxtLink>
+            </AccountHoverWrapper>
+          </template>
+          <div ml1>
+            {{ $t('notification.reblogged_post') }}
           </div>
         </div>
-      </template>
+        <div v-if="likes.length" flex="~ gap-1">
-    </StatusCard>
+          <div :class="useStarFavoriteIcon ? 'i-ri:star-fill color-yellow' : 'i-ri:heart-fill color-red'" text-xl me-1 />
+          <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 ml1>
+            {{ $t('notification.favourited_post') }}
+          </div>
+        </div>
+      </div>
+      <div pl8 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

@@ -14,7 +14,7 @@ const virtualScroller = false // TODO: fix flickering issue with virtual scroll
 const groupCapacity = Number.MAX_VALUE // No limit
 
 // Group by type (and status when applicable)
-const groupId = (item: mastodon.v1.Notification): string => {
+function groupId(item: mastodon.v1.Notification): string {
   // If the update is related to an status, group notifications from the same account (boost + favorite the same status)
   const id = item.status
     ? {
@@ -27,6 +27,10 @@ const groupId = (item: mastodon.v1.Notification): string => {
   return JSON.stringify(id)
 }
 
+function hasHeader(account: mastodon.v1.Account) {
+  return !account.header.endsWith('/original/missing.png')
+}
+
 function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
   const results: NotificationSlot[] = []
 
@@ -44,36 +48,39 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
     // This normally happens when you transfer an account, if not, show
     // a big profile card for each follow
     if (group[0].type === 'follow') {
-      let groups: mastodon.v1.Notification[] = []
+      // Order group by followers count
+      const processedGroup = [...group]
+      processedGroup.sort((a, b) => {
+        const aHasHeader = hasHeader(a.account)
+        const bHasHeader = hasHeader(b.account)
+        if (bHasHeader && !aHasHeader)
+          return 1
+        if (aHasHeader && !bHasHeader)
+          return -1
+        return b.account.followersCount - a.account.followersCount
+      })
 
-      function newGroup() {
+      if (processedGroup.length > 0 && hasHeader(processedGroup[0].account))
-        if (groups.length > 0) {
+        results.push(processedGroup.shift()!)
-          results.push({
+
-            id: `grouped-${id++}`,
+      if (processedGroup.length === 1 && hasHeader(processedGroup[0].account))
-            type: 'grouped-follow',
+        results.push(processedGroup.shift()!)
-            items: groups,
+
-          })
+      if (processedGroup.length > 0) {
-          groups = []
+        results.push({
-        }
+          id: `grouped-${id++}`,
+          type: 'grouped-follow',
+          items: processedGroup,
+        })
       }
-
-      for (const item of group) {
-        const hasHeader = !item.account.header.endsWith('/original/missing.png')
-        if (hasHeader && (item.account.followersCount > 250 || (group.length === 1 && item.account.followersCount > 25))) {
-          newGroup()
-          results.push(item)
-        }
-        else {
-          groups.push(item)
-        }
-      }
-
-      newGroup()
       return
     }
-
+    else if (group.length && (group[0].type === 'reblog' || group[0].type === 'favourite')) {
-    const { status } = group[0]
+      if (!group[0].status) {
-    if (status && group.length > 1 && (group[0].type === 'reblog' || group[0].type === 'favourite')) {
+        // Ignore favourite or reblog if status is null, sometimes the API is sending these
+        // notifications
+        return
+      }
       // All notifications in these group are reblogs or favourites of the same status
       const likes: GroupedAccountLike[] = []
       for (const notification of group) {
@@ -84,11 +91,15 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
         }
         like[notification.type === 'reblog' ? 'reblog' : 'favourite'] = notification
       }
-      likes.sort((a, b) => a.reblog ? !b.reblog || (a.favourite && !b.favourite) ? -1 : 0 : 0)
+      likes.sort((a, b) => a.reblog
+        ? (!b.reblog || (a.favourite && !b.favourite))
+            ? -1
+            : 0
+        : 0)
       results.push({
         id: `grouped-${id++}`,
         type: 'grouped-reblogs-and-favourites',
-        status,
+        status: group[0].status,
         likes,
       })
       return
@@ -112,6 +123,12 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
   return results
 }
 
+function removeFiltered(items: mastodon.v1.Notification[]): mastodon.v1.Notification[] {
+  return items.filter(item => !item.status?.filtered?.find(
+    filter => filter.filter.filterAction === 'hide' && filter.filter.context.includes('notifications'),
+  ))
+}
+
 function preprocess(items: NotificationSlot[]): NotificationSlot[] {
   const flattenedNotifications: mastodon.v1.Notification[] = []
   for (const item of items) {
@@ -131,21 +148,21 @@ function preprocess(items: NotificationSlot[]): NotificationSlot[] {
       flattenedNotifications.push(item)
     }
   }
-  return groupItems(flattenedNotifications)
+  return groupItems(removeFiltered(flattenedNotifications))
 }
 
 const { clearNotifications } = useNotifications()
 const { formatNumber } = useHumanReadableNumber()
 </script>
 
+<!-- eslint-disable vue/attribute-hyphenation -->
 <template>
   <CommonPaginator
     :paginator="paginator"
     :preprocess="preprocess"
     :stream="stream"
-    :eager="3"
+    :virtualScroller="virtualScroller"
-    :virtual-scroller="virtualScroller"
+    eventType="notification"
-    event-type="notification"
   >
     <template #updater="{ number, update }">
       <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">

components/notification/NotificationPreferences.client.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { PushSubscriptionError } from '~/composables/push-notifications/types'
-
 defineProps<{ show?: boolean }>()
 
 const {
@@ -17,7 +15,7 @@ const {
 } = usePushManager()
 const { t } = useI18n()
 
-const pwaEnabled = useRuntimeConfig().public.pwaEnabled
+const pwaEnabled = useAppConfig().pwaEnabled
 
 let busy = $ref<boolean>(false)
 let animateSave = $ref<boolean>(false)
@@ -26,7 +24,7 @@ let animateRemoveSubscription = $ref<boolean>(false)
 let subscribeError = $ref<string>('')
 let showSubscribeError = $ref<boolean>(false)
 
-const hideNotification = () => {
+function hideNotification() {
   const key = currentUser.value?.account?.acct
   if (key)
     hiddenNotification.value[key] = true
@@ -41,7 +39,7 @@ const showWarning = $computed(() => {
       && !(hiddenNotification.value[currentUser.value?.account?.acct ?? ''] === true)
 })
 
-const saveSettings = async () => {
+async function saveSettings() {
   if (busy)
     return
 
@@ -50,7 +48,7 @@ const saveSettings = async () => {
   animateSave = true
 
   try {
-    const subscription = await updateSubscription()
+    await updateSubscription()
   }
   catch (err) {
     // todo: handle error
@@ -62,7 +60,7 @@ const saveSettings = async () => {
   }
 }
 
-const doSubscribe = async () => {
+async function doSubscribe() {
   if (busy)
     return
 
@@ -92,7 +90,7 @@ const doSubscribe = async () => {
     animateSubscription = false
   }
 }
-const removeSubscription = async () => {
+async function removeSubscription() {
   if (busy)
     return
 

components/notification/NotificationSubscribePushNotificationError.vue

@@ -3,9 +3,7 @@ defineProps<{
   title?: string
   message: string
 }>()
-const { modelValue } = defineModel<{
+const modelValue = defineModel<boolean>({ required: true })
-  modelValue: boolean
-}>()
 </script>
 
 <template>
@@ -36,5 +34,19 @@ const { modelValue } = defineModel<{
       </CommonTooltip>
     </head>
     <p>{{ message }}</p>
+    <p py-2>
+      <i18n-t keypath="settings.notifications.push_notifications.subscription_error.error_hint">
+        <NuxtLink font-bold href="https://docs.elk.zone/pwa#faq" target="_blank" inline-flex="~ row" items-center gap-x-2>
+          https://docs.elk.zone/pwa#faq
+          <span inline-block aria-hidden="true" i-ri:external-link-line class="rtl-flip" />
+        </NuxtLink>
+      </i18n-t>
+    </p>
+    <p py-2>
+      <NuxtLink font-bold text-primary href="https://github.com/elk-zone/elk" target="_blank" flex="~ row" items-center gap-x-2>
+        {{ $t('settings.notifications.push_notifications.subscription_error.repo_link') }}
+        <span inline-block aria-hidden="true" i-ri:external-link-line class="rtl-flip" />
+      </NuxtLink>
+    </p>
   </div>
 </template>

components/publish/PublishAttachment.vue

@@ -15,9 +15,12 @@ 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', unref(description))
 }
@@ -25,17 +28,16 @@ const toggleApply = () => {
 
 <template>
   <div relative group>
-    <StatusAttachment :attachment="attachment" w-full />
+    <StatusAttachment :attachment="attachment" w-full is-preview />
     <div absolute right-2 top-2>
       <div
         v-if="removable"
         :aria-label="$t('attachment.remove_label')"
-        hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer
+        class="bg-black/75 hover:bg-red/75"
-        :class="[isHydrated && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
+        text-white px2 py2 rounded-full cursor-pointer
-        mix-blend-difference
         @click="$emit('remove')"
       >
-        <div i-ri:close-line text-3 :class="[isHydrated && isSmallScreen ? 'text-6' : 'text-3']" />
+        <div i-ri:close-line text-3 text-6 md:text-3 />
       </div>
     </div>
     <div absolute right-2 bottom-2>
@@ -56,7 +58,10 @@ const 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 />
-            <button btn-outline @click="toggleApply">
+            <div flex flex-row-reverse>
+              <PublishCharacterCounter :length="description.length" :max="maxDescriptionLength" />
+            </div>
+            <button btn-outline :disabled="description.length > maxDescriptionLength" @click="toggleApply">
               {{ $t('action.apply') }}
             </button>
           </div>
@@ -64,7 +69,7 @@ const toggleApply = () => {
             {{ $t('action.close') }}
           </button>
         </div>
-        <StatusAttachment :attachment="attachment" w-full />
+        <StatusAttachment :attachment="attachment" w-full is-preview />
       </div>
     </ModalDialog>
   </div>

components/publish/PublishButton.vue

@@ -1,22 +0,0 @@
-<script setup>
-const disabled = computed(() => !isMastoInitialised.value || !currentUser.value)
-const disabledVisual = computed(() => isMastoInitialised.value && !currentUser.value)
-</script>
-
-<template>
-  <button
-    flex="~ gap2 center"
-    w-9 h-9 py2
-    xl="w-auto h-auto"
-    rounded-3
-    cursor-pointer disabled:pointer-events-none
-    text-primary
-    border-1 border-primary
-    :class="disabledVisual ? 'op25' : 'hover:bg-primary hover:text-inverted'"
-    :disabled="disabled"
-    @click="openPublishDialog()"
-  >
-    <div i-ri:quill-pen-line />
-    <span hidden xl:block>{{ $t('action.compose') }}</span>
-  </button>
-</template>

components/publish/PublishCharacterCounter.vue

@@ -0,0 +1,12 @@
+<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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Editor } from '@tiptap/core'
+
+const { editor } = defineProps<{
+  editor: Editor
+}>()
+</script>
+
+<template>
+  <CommonTooltip placement="top" :content="$t('tooltip.open_editor_tools')">
+    <VDropdown v-if="editor" placement="top">
+      <button
+        btn-action-icon
+      >
+        <div i-ri:font-size-2 />
+      </button>
+      <template #popper>
+        <div flex gap-1>
+          <CommonTooltip placement="top" :content="$t('tooltip.toggle_code_block')">
+            <button
+              btn-action-icon
+              :aria-label="$t('tooltip.toggle_code_block')"
+              :class="editor.isActive('codeBlock') ? 'text-primary' : ''"
+              @click="editor?.chain().focus().toggleCodeBlock().run()"
+            >
+              <div i-ri:code-s-slash-line />
+            </button>
+          </CommonTooltip>
+          <CommonTooltip placement="top" :content="$t('tooltip.toggle_bold')">
+            <button
+              btn-action-icon
+              :aria-label="$t('tooltip.toggle_bold')"
+              :class="editor.isActive('bold') ? 'text-primary' : ''"
+              @click="editor?.chain().focus().toggleBold().run()"
+            >
+              <div i-ri:bold />
+            </button>
+          </CommonTooltip>
+          <CommonTooltip placement="top" :content="$t('tooltip.toggle_italic')">
+            <button
+              btn-action-icon
+              :aria-label="$t('tooltip.toggle_italic')"
+              :class="editor.isActive('italic') ? 'text-primary' : ''"
+              @click="editor?.chain().focus().toggleItalic().run()"
+            >
+              <div i-ri:italic />
+            </button>
+          </CommonTooltip>
+        </div>
+      </template>
+    </VDropdown>
+  </CommonTooltip>
+</template>

components/publish/PublishEmojiPicker.client.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import importEmojiLang from 'virtual:emoji-mart-lang-importer'
 import type { Picker } from 'emoji-mart'
 
 const emit = defineEmits<{
@@ -6,12 +7,15 @@ const emit = defineEmits<{
   (e: 'selectCustom', image: any): void
 }>()
 
+const { locale } = useI18n()
+
 const el = $ref<HTMLElement>()
 let picker = $ref<Picker>()
 const colorMode = useColorMode()
 
 async function openEmojiPicker() {
   await updateCustomEmojis()
+
   if (picker) {
     picker.update({
       theme: colorMode.value,
@@ -19,17 +23,23 @@ async function openEmojiPicker() {
     })
   }
   else {
-    const promise = import('@emoji-mart/data').then(r => r.default)
+    const [Picker, dataPromise, i18n] = await Promise.all([
-    const { Picker } = await import('emoji-mart')
+      import('emoji-mart').then(({ Picker }) => Picker),
+      import('@emoji-mart/data/sets/14/twitter.json').then((r: any) => r.default).catch(() => {}),
+      importEmojiLang(locale.value.split('-')[0]),
+    ])
+
     picker = new Picker({
-      data: () => promise,
+      data: () => dataPromise,
       onEmojiSelect({ native, src, alt, name }: any) {
         native
           ? emit('select', native)
           : emit('selectCustom', { src, alt, 'data-emoji-id': name })
       },
+      set: 'twitter',
       theme: colorMode.value,
       custom: customEmojisData.value,
+      i18n,
     })
   }
   await nextTick()
@@ -37,7 +47,7 @@ async function openEmojiPicker() {
   el?.appendChild(picker as any as HTMLElement)
 }
 
-const hideEmojiPicker = () => {
+function hideEmojiPicker() {
   if (picker)
     el?.removeChild(picker as any as HTMLElement)
 }

components/publish/PublishLanguagePicker.vue

@@ -1,26 +1,14 @@
 <script setup lang="ts">
-import ISO6391 from 'iso-639-1'
 import Fuse from 'fuse.js'
 
-let { modelValue } = $defineModel<{
+const modelValue = defineModel<string>({ required: true })
-  modelValue: string
-}>()
 
 const { t } = useI18n()
+const userSettings = useUserSettings()
 
 const languageKeyword = $ref('')
 
-const languageList: {
+const fuse = new Fuse(languagesNameList, {
-  code: string
-  nativeName: string
-  name: string
-}[] = ISO6391.getAllCodes().map(code => ({
-  code,
-  nativeName: ISO6391.getNativeName(code),
-  name: ISO6391.getName(code),
-}))
-
-const fuse = new Fuse(languageList, {
   keys: ['code', 'nativeName', 'name'],
   shouldSort: true,
 })
@@ -28,25 +16,56 @@ const fuse = new Fuse(languageList, {
 const languages = $computed(() =>
   languageKeyword.trim()
     ? fuse.search(languageKeyword).map(r => r.item)
-    : [...languageList].sort(({ code: a }, { code: b }) => {
+    : [...languagesNameList].filter(entry => !userSettings.value.disabledTranslationLanguages.includes(entry.code))
-        return a === modelValue ? -1 : b === modelValue ? 1 : a.localeCompare(b)
+        .sort(({ code: a }, { code: b }) => {
-      }),
+          // Put English on the top
+          if (a === 'en')
+            return -1
+
+          return a === modelValue.value ? -1 : b === modelValue.value ? 1 : a.localeCompare(b)
+        }),
+)
+
+const preferredLanguages = computed(() => {
+  const result = []
+  for (const langCode of userSettings.value.disabledTranslationLanguages) {
+    const completeLang = languagesNameList.find(listEntry => listEntry.code === langCode)
+    if (completeLang)
+      result.push(completeLang)
+  }
+  return result
+},
+
 )
 
 function chooseLanguage(language: string) {
-  modelValue = language
+  modelValue.value = language
 }
 </script>
 
 <template>
-  <div>
+  <div relative of-x-hidden>
-    <input
+    <div p2>
-      v-model="languageKeyword"
+      <input
-      :placeholder="t('language.search')"
+        v-model="languageKeyword"
-      p2 mb2 border-rounded w-full bg-transparent
+        :placeholder="t('language.search')"
-      outline-none border="~ base"
+        p2 border-rounded w-full bg-transparent
-    >
+        outline-none border="~ base"
+      >
+    </div>
     <div max-h-40vh overflow-auto>
+      <template v-if="!languageKeyword.trim()">
+        <CommonDropdownItem
+          v-for="{ code, nativeName, name } in preferredLanguages"
+          :key="code"
+          :text="nativeName"
+          :description="name"
+          :checked="code === modelValue"
+          @click="chooseLanguage(code)"
+        />
+        <hr class="border-base ">
+      </template>
+
       <CommonDropdownItem
         v-for="{ code, nativeName, name } in languages"
         :key="code"

components/publish/PublishVisibilityPicker.vue

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

components/publish/PublishWidget.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { EditorContent } from '@tiptap/vue-3'
+import stringLength from 'string-length'
 import type { mastodon } from 'masto'
-import type { Ref } from 'vue'
 import type { Draft } from '~/types'
 
 const {
   draftKey,
-  initial = getDefaultDraft() as never /* Bug of vue-core */,
+  initial = getDefaultDraft,
   expanded = false,
   placeholder,
   dialogLabelledBy,
@@ -35,7 +35,7 @@ const {
   dropZoneRef,
 } = $(useUploadMediaAttachment($$(draft)))
 
-let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft } = $(usePublish(
+let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = $(usePublish(
   {
     draftState,
     ...$$({ expanded, isUploading, initialDraft: initial }),
@@ -62,7 +62,92 @@ const { editor } = useTiptap({
   },
   onPaste: handlePaste,
 })
-const characterCount = $computed(() => htmlToText(editor.value?.getHTML() || '').length)
+
+function trimPollOptions() {
+  const indexLastNonEmpty = draft.params.poll!.options.findLastIndex(option => option.trim().length > 0)
+  const trimmedOptions = draft.params.poll!.options.slice(0, indexLastNonEmpty + 1)
+
+  if (currentInstance.value?.configuration
+      && trimmedOptions.length >= currentInstance.value?.configuration?.polls.maxOptions)
+    draft.params.poll!.options = trimmedOptions
+  else
+    draft.params.poll!.options = [...trimmedOptions, '']
+}
+
+function editPollOptionDraft(event: Event, index: number) {
+  draft.params.poll!.options[index] = (event.target as HTMLInputElement).value
+  trimPollOptions()
+}
+
+function deletePollOption(index: number) {
+  draft.params.poll!.options.splice(index, 1)
+  trimPollOptions()
+}
+
+const expiresInOptions = [
+  {
+    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)
+
+  // 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
+
+  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))
+    length -= fullMatch.length - (before + username).length - 1 // - 1 for the @
+
+  if (draft.mentions) {
+    // + 1 is needed as mentions always need a space seperator at the end
+    length += draft.mentions.map((mention) => {
+      const [handle] = mention.split('@')
+      return `@${handle}`
+    }).join(' ').length + 1
+  }
+
+  length += stringLength(publishSpoilerText)
+
+  return length
+})
+
+const isExceedingCharacterLimit = $computed(() => {
+  return characterCount > characterLimit.value
+})
+
+const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.params.language || preferredLanguage))?.nativeName)
 
 async function handlePaste(evt: ClipboardEvent) {
   const files = evt.clipboardData?.files
@@ -90,23 +175,47 @@ async function publish() {
     emit('published', status)
 }
 
+useWebShareTarget(async ({ data: { data, action } }: any) => {
+  if (action !== 'compose-with-shared-data')
+    return
+
+  editor.value?.commands.focus('end')
+
+  for (const text of data.textParts) {
+    for (const line of text.split('\n')) {
+      editor.value?.commands.insertContent({
+        type: 'paragraph',
+        content: [{ type: 'text', text: line }],
+      })
+    }
+  }
+
+  if (data.files.length !== 0)
+    await uploadAttachments(data.files)
+})
+
 defineExpose({
   focusEditor: () => {
     editor.value?.commands?.focus?.()
   },
 })
+
+function stopQuestionMarkPropagation(e: KeyboardEvent) {
+  if (e.key === '?')
+    e.stopImmediatePropagation()
+}
+
+onDeactivated(() => {
+  clearEmptyDrafts()
+})
 </script>
 
 <template>
-  <div v-if="isMastoInitialised && currentUser" flex="~ col gap-4" py3 px2 sm:px4>
+  <div v-if="isHydrated && currentUser" flex="~ col gap-4" py3 px2 sm:px4 aria-roledescription="publish-widget">
     <template v-if="draft.editingStatus">
-      <div flex="~ col gap-1">
+      <div id="state-editing" text-secondary self-center>
-        <div id="state-editing" text-secondary self-center>
+        {{ $t('state.editing') }}
-          {{ $t('state.editing') }}
-        </div>
-        <StatusCard :status="draft.editingStatus" :actions="false" :hover="false" px-0 />
       </div>
-      <div border="b dashed gray/40" />
     </template>
 
     <div flex gap-3 flex-1>
@@ -120,15 +229,15 @@ defineExpose({
         border="2 dashed transparent"
         :class="[isSending ? 'pointer-events-none' : '', isOverDropZone ? '!border-primary' : '']"
       >
-        <ContentMentionGroup v-if="draft.mentions?.length && shouldExpanded">
+        <ContentMentionGroup v-if="draft.mentions?.length && shouldExpanded" replying>
-          <div v-for="m of draft.mentions" :key="m" text-primary>
+          <button v-for="m, i of draft.mentions" :key="m" text-primary hover:color-red @click="draft.mentions?.splice(i, 1)">
-            @{{ m }}
+            {{ accountToShortHandle(m) }}
-          </div>
+          </button>
         </ContentMentionGroup>
 
         <div v-if="draft.params.sensitive">
           <input
-            v-model="draft.params.spoilerText"
+            v-model="publishSpoilerText"
             type="text"
             :placeholder="$t('placeholder.content_warning')"
             p2 border-rounded w-full bg-transparent
@@ -136,11 +245,35 @@ defineExpose({
           >
         </div>
 
+        <CommonErrorMessage v-if="failedMessages.length > 0" described-by="publish-failed">
+          <header id="publish-failed" flex justify-between>
+            <div flex items-center gap-x-2 font-bold>
+              <div aria-hidden="true" i-ri:error-warning-fill />
+              <p>{{ $t('state.publish_failed') }}</p>
+            </div>
+            <CommonTooltip placement="bottom" :content="$t('action.clear_publish_failed')">
+              <button
+                flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('action.clear_publish_failed')"
+                @click="failedMessages = []"
+              >
+                <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
+              </button>
+            </CommonTooltip>
+          </header>
+          <ol ps-2 sm:ps-1>
+            <li v-for="(error, i) in failedMessages" :key="i" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
+              <strong>{{ i + 1 }}.</strong>
+              <span>{{ error }}</span>
+            </li>
+          </ol>
+        </CommonErrorMessage>
+
         <div relative flex-1 flex flex-col>
           <EditorContent
             :editor="editor"
             flex max-w-full
             :class="shouldExpanded ? 'min-h-30 md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain' : ''"
+            @keydown="stopQuestionMarkPropagation"
           />
         </div>
 
@@ -150,32 +283,24 @@ defineExpose({
           </div>
           {{ $t('state.uploading') }}
         </div>
-        <div
+        <CommonErrorMessage
           v-else-if="failedAttachments.length > 0"
-          role="alert"
+          :described-by="isExceedingAttachmentLimit ? 'upload-failed uploads-per-post' : 'upload-failed'"
-          :aria-describedby="isExceedingAttachmentLimit ? 'upload-failed uploads-per-post' : 'upload-failed'"
-          flex="~ col"
-          gap-1 text-sm
-          pt-1 ps-2 pe-1 pb-2
-          text-red-600 dark:text-red-400
-          border="~ base rounded red-600 dark:red-400"
         >
-          <head id="upload-failed" flex justify-between>
+          <header id="upload-failed" flex justify-between>
             <div flex items-center gap-x-2 font-bold>
               <div aria-hidden="true" i-ri:error-warning-fill />
               <p>{{ $t('state.upload_failed') }}</p>
             </div>
             <CommonTooltip placement="bottom" :content="$t('action.clear_upload_failed')">
               <button
-                flex rounded-4 p1
+                flex rounded-4 p1 hover:bg-active cursor-pointer transition-100
-                hover:bg-active cursor-pointer transition-100
+                :aria-label="$t('action.clear_upload_failed')" @click="failedAttachments = []"
-                :aria-label="$t('action.clear_upload_failed')"
-                @click="failedAttachments = []"
               >
                 <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
               </button>
             </CommonTooltip>
-          </head>
+          </header>
           <div v-if="isExceedingAttachmentLimit" id="uploads-per-post" ps-2 sm:ps-1 text-small>
             {{ $t('state.attachments_exceed_server_limit') }}
           </div>
@@ -185,7 +310,7 @@ defineExpose({
               <span>{{ error[0] }}</span>
             </li>
           </ol>
-        </div>
+        </CommonErrorMessage>
 
         <div v-if="draft.attachments.length" flex="~ col gap-2" overflow-auto>
           <PublishAttachment
@@ -200,90 +325,175 @@ defineExpose({
     </div>
     <div flex gap-4>
       <div w-12 h-full sm:block hidden />
-      <div
+      <div flex="~ col 1" max-w-full>
-        v-if="shouldExpanded" flex="~ gap-1 1 wrap" m="s--1" pt-2 justify="between" max-w-full
+        <form v-if="isExpanded && draft.params.poll" my-4 flex="~ 1 col" gap-3 m="s--1">
-        border="t base"
+          <div
-      >
+            v-for="(option, index) in draft.params.poll.options"
-        <PublishEmojiPicker
+            :key="index"
-          @select="insertEmoji"
+            flex="~ row"
-          @select-custom="insertCustomEmoji"
+            gap-3
-        >
+          >
-          <button btn-action-icon :title="$t('tooltip.emoji')">
+            <input
-            <div i-ri:emotion-line />
+              :value="option"
-          </button>
+              bg-base
-        </PublishEmojiPicker>
+              border="~ base" flex-1 h10 pe-4 rounded-2 w-full flex="~ row"
-
+              items-center relative focus-within:box-shadow-outline gap-3
-        <CommonTooltip placement="top" :content="$t('tooltip.add_media')">
+              px-4 py-2
-          <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
+              :placeholder="$t('polls.option_placeholder', { current: index + 1, max: currentInstance?.configuration?.polls.maxOptions })"
-            <div i-ri:image-add-line />
+              class="option-input"
-          </button>
+              @input="editPollOptionDraft($event, index)"
-        </CommonTooltip>
-
-        <template v-if="editor">
-          <CommonTooltip placement="top" :content="$t('tooltip.toggle_code_block')">
-            <button
-              btn-action-icon
-              :aria-label="$t('tooltip.toggle_code_block')"
-              :class="editor.isActive('codeBlock') ? 'text-primary' : ''"
-              @click="editor?.chain().focus().toggleCodeBlock().run()"
             >
-              <div i-ri:code-s-slash-line />
+            <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
+            @select="insertEmoji"
+            @select-custom="insertCustomEmoji"
+          >
+            <button btn-action-icon :title="$t('tooltip.emoji')">
+              <div i-ri:emotion-line />
+            </button>
+          </PublishEmojiPicker>
+
+          <CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')" no-auto-focus>
+            <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
+              <div i-ri:image-add-line />
             </button>
           </CommonTooltip>
-        </template>
 
-        <div flex-auto />
+          <template v-if="draft.attachments.length === 0">
-
+            <CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')" no-auto-focus>
-        <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 }">
+              <button btn-action-icon :aria-label="$t('polls.create')" @click="draft.params.poll = { options: [''], expiresIn: expiresInOptions[expiresInDefaultOptionIndex].seconds }">
-          {{ characterCount ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
+                <div i-ri:chat-poll-line />
-        </div>
+              </button>
-
+            </CommonTooltip>
-        <CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
+            <div v-else rounded-full b-1 border-dark flex="~ row" gap-1>
-          <button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
+              <CommonTooltip placement="top" :content="$t('polls.cancel')" no-auto-focus>
-            <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
+                <button btn-action-icon b-r border-dark :aria-label="$t('polls.cancel')" @click="draft.params.poll = undefined">
-            <div v-else i-ri:alarm-warning-line />
+                  <div i-ri:close-line />
-          </button>
+                </button>
-        </CommonTooltip>
+              </CommonTooltip>
-
+              <CommonDropdown placement="top">
-        <CommonTooltip placement="top" :content="$t('tooltip.change_language')">
+                <CommonTooltip placement="top" :content="$t('polls.settings')" no-auto-focus>
-          <CommonDropdown placement="bottom" auto-boundary-max-size>
+                  <button :aria-label="$t('polls.settings')" btn-action-icon w-12>
-            <button btn-action-icon :aria-label="$t('tooltip.change_language')" w-12 mr--1>
+                    <div i-ri:list-settings-line />
-              <div i-ri:translate-2 />
+                    <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
-              <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
+                  </button>
-            </button>
+                </CommonTooltip>
-
+                <template #popper>
-            <template #popper>
+                  <div flex="~ col" gap-1 p-2>
-              <PublishLanguagePicker v-model="draft.params.language" min-w-80 p3 />
+                    <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" />
-            </template>
+                    <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" />
-          </CommonDropdown>
+                  </div>
-        </CommonTooltip>
+                </template>
-
+              </CommonDropdown>
-        <PublishVisibilityPicker v-model="draft.params.visibility" :editing="!!draft.editingStatus">
+              <CommonDropdown placement="bottom">
-          <template #default="{ visibility }">
+                <CommonTooltip placement="top" :content="$t('polls.expiration')" no-auto-focus>
-            <button :disabled="!!draft.editingStatus" :aria-label="$t('tooltip.change_content_visibility')" btn-action-icon :class="{ 'w-12': !draft.editingStatus }">
+                  <button :aria-label="$t('polls.expiration')" btn-action-icon w-12>
-              <div :class="visibility.icon" />
+                    <div i-ri:hourglass-line />
-              <div v-if="!draft.editingStatus" i-ri:arrow-down-s-line text-sm text-secondary me--1 />
+                    <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
-            </button>
+                  </button>
+                </CommonTooltip>
+                <template #popper>
+                  <CommonDropdownItem
+                    v-for="expiresInOption in expiresInOptions"
+                    :key="expiresInOption.seconds"
+                    :text="expiresInOption.label"
+                    :checked="draft.params.poll!.expiresIn === expiresInOption.seconds"
+                    @click="draft.params.poll!.expiresIn = expiresInOption.seconds"
+                  />
+                </template>
+              </CommonDropdown>
+            </div>
           </template>
-        </PublishVisibilityPicker>
 
-        <CommonTooltip id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!isPublishDisabled">
+          <PublishEditorTools v-if="editor" :editor="editor" />
-          <button
+
-            btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
+          <div flex-auto />
-            md:w-fit
+
-            class="publish-button"
+          <PublishCharacterCounter :max="characterLimit" :length="characterCount" />
-            :aria-disabled="isPublishDisabled"
+
-            aria-describedby="publish-tooltip"
+          <CommonTooltip placement="top" :content="$t('tooltip.change_language')" no-auto-focus>
-            @click="publish"
+            <CommonDropdown placement="bottom" auto-boundary-max-size>
-          >
+              <button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
-            <span v-if="isSending" block animate-spin preserve-3d>
+                <span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
-              <div block i-ri:loader-2-fill />
+                <div v-else i-ri:translate-2 />
-            </span>
+                <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
-            <span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>
+              </button>
-            <span v-else-if="draft.params.inReplyToId">{{ $t('action.reply') }}</span>
+
-            <span v-else>{{ !isSending ? $t('action.publish') : $t('state.publishing') }}</span>
+              <template #popper>
-          </button>
+                <PublishLanguagePicker v-model="draft.params.language" min-w-80 />
-        </CommonTooltip>
+              </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>
       </div>
     </div>
   </div>
@@ -299,4 +509,18 @@ defineExpose({
     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

@@ -17,14 +17,14 @@ watchEffect(() => {
   draftKey = route.query.draft?.toString() || 'home'
 })
 
-onMounted(() => {
+onDeactivated(() => {
   clearEmptyDrafts()
 })
 </script>
 
 <template>
   <div flex="~ col" pt-6 h-screen>
-    <div text-right h-8>
+    <div inline-flex justify-end h-8>
       <VDropdown v-if="nonEmptyDrafts.length" placement="bottom-end">
         <button btn-text flex="inline center">
           {{ $t('compose.drafts', nonEmptyDrafts.length, { named: { v: formatNumber(nonEmptyDrafts.length) } }) }}&#160;<div aria-hidden="true" i-ri:arrow-down-s-line />

components/pwa/PwaBadge.client.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     v-if="$pwa?.needRefresh"
-    bg="fade" relative rounded
+    bg="primary-fade" relative rounded
     flex="~ gap-1 center" px3 py1 text-primary
     @click="$pwa.updateServiceWorker()"
   >

components/pwa/PwaInstallPrompt.client.vue

@@ -0,0 +1,22 @@
+<template>
+  <div
+    v-if="$pwa?.showInstallPrompt && !$pwa?.needRefresh"
+    m-2 p5 bg="primary-fade" relative
+    rounded-lg of-hidden
+    flex="~ col gap-3"
+    v-bind="$attrs"
+  >
+    <h2 flex="~ gap-2" items-center>
+      {{ $t('pwa.install_title') }}
+    </h2>
+    <div flex="~ gap-1">
+      <button type="button" btn-solid px-4 py-1 text-center text-sm @click="$pwa.install()">
+        {{ $t('pwa.install') }}
+      </button>
+      <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.cancelInstall()">
+        {{ $t('pwa.dismiss') }}
+      </button>
+    </div>
+    <div i-material-symbols:install-desktop-rounded absolute text-6em bottom--2 inset-ie--2 text-primary dark:text-white op10 class="-z-1 rtl-flip" />
+  </div>
+</template>

components/pwa/PwaPrompt.client.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="$pwa?.needRefresh"
-    m-2 p5 bg="fade" relative
+    m-2 p5 bg="primary-fade" relative
     rounded-lg of-hidden
     flex="~ col gap-3"
   >
@@ -16,6 +16,6 @@
         {{ $t('pwa.dismiss') }}
       </button>
     </div>
-    <div i-ri-arrow-down-circle-line absolute text-8em bottom--10 inset-ie--10 text-primary op10 class="-z-1" />
+    <div i-ri-arrow-down-circle-line absolute text-8em bottom--10 inset-ie--10 text-primary dark:text-white op10 class="-z-1" />
   </div>
 </template>