Upgrade deps

Use getTextInfo()

.env

@@ -1,4 +1,5 @@
 PHANPY_CLIENT_NAME=Phanpy
 PHANPY_WEBSITE=https://phanpy.social
 PHANPY_LINGVA_INSTANCES="lingva.phanpy.social lingva.lunar.icu lingva.garudalinux.org translate.plausibility.cloud"
-PHANPY_PRIVACY_POLICY_URL="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"
+PHANPY_PRIVACY_POLICY_URL="https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD"
+PHANPY_TRANSLANG_INSTANCES="translang.phanpy.social"

.gitattributes

@@ -0,0 +1,5 @@
+*.po linguist-generated
+readme-assets/** linguist-documentation
+
+# Diff PO file, ignore line number changes, reduce diff noise
+src/locales/en.po diff=po-filter

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,40 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-- Which site: [e.g. dev.phanpy.social OR phanpy.social]
-- Which instance: [e.g. mastodon.social]
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,81 @@
+name: "Bug report"
+description: "Create a report to help us improve"
+
+labels:
+- "bug"
+
+body:
+- type: input
+  id: "site"
+  attributes:
+    label: "Site"
+    description: |-
+      What site(s) did you encounter this bug on?
+    placeholder: |-
+      phanpy.social
+
+- type: input
+  id: "version"
+  attributes:
+    label: "Version"
+    description: |-
+      Which Phanpy version(s) did you encounter this bug on?
+      You can see and copy your current version by opening the Settings menu and scrolling down to the About section.
+    placeholder: |-
+      2024.10.08.0a176e2
+
+- type: input
+  id: "instance"
+  attributes:
+    label: "Instance"
+    description: |-
+      Which instance(s) did you encounter this bug on?
+    placeholder: |-
+      mastodon.social
+      
+- type: textarea
+  id: "Browser"
+  attributes:
+    label: "Browser"
+    description: |-
+      Which browser(s) did you encounter this bug on?
+    placeholder: |-
+      - Firefox 132.0b5 on Windows 11
+      - Safari 18 on iOS 18 on iPhone 16 Pro Max
+
+- type: textarea
+  id: "description"
+  attributes:
+    label: "Bug description"
+    description: |-
+      A concise description of what the bug is.
+      If applicable, add screenshots to help explain your problem.
+      You can paste screenshots here and GitHub will convert them to Markdown for you.
+
+- type: textarea
+  id: "steps"
+  attributes:
+    label: "To reproduce"
+    description: |-
+      A list of steps that can be performed to make the bug happen again.
+      If possible, add screenshots to help demonstrate the steps.
+      You can paste screenshots here and GitHub will convert them to Markdown for you.
+    placeholder: |-
+      1. Go to '...'
+      2. Click on '...'
+      3. Scroll down to '...'
+      4. See error
+
+- type: textarea
+  id: "behavior"
+  attributes:
+    label: "Expected behavior"
+    description: |-
+      A concise description of what you expected to happen.
+
+- type: textarea
+  id: "other"
+  attributes:
+    label: "Other"
+    description: |-
+      Anything you want to add?

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: true

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: 'enhancement'
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,37 @@
+name: "Feature request"
+description: "Suggest an idea for this project"
+
+labels:
+- "enhancement"
+
+
+body:
+- type: textarea
+  id: "problem"
+  attributes:
+    label: "Problem I have"
+    description: |-
+      If your request is related to a problem, please provide a clear and concise description of what the problem is.
+    placeholder: |-
+      I'm always frustrated when [...]
+
+- type: textarea
+  id: "solution"
+  attributes:
+    label: "Solution I'd like"
+    description: |-
+      A clear and concise description of what you want to happen.
+
+- type: textarea
+  id: "alternatives"
+  attributes:
+    label: "Alternatives considered"
+    description: |-
+      A clear and concise description of any alternative solutions or features you've considered.
+
+- type: textarea
+  id: "other"
+  attributes:
+    label: "Other"
+    description: |-
+      Anything you want to add?

.github/release.yml

@@ -0,0 +1,4 @@
+changelog:
+  exclude:
+    labels:
+      - 'i18n'

.github/workflows/custom-build.yml

@@ -0,0 +1,79 @@
+name: Custom Build
+permissions:
+  contents: read
+
+on:
+  repository_dispatch:
+    types: [custom-build]
+  workflow_dispatch:
+    inputs:
+      config:
+        description: 'Environment variables (one per line, KEY=VALUE format). See README.md for available variables.'
+        required: true
+        type: string
+
+concurrency:
+  group: custom-build
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      with:
+        ref: production
+        fetch-depth: 1
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '22'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Prepare build
+      id: prepare
+      run: |
+        if [ "${{ github.event_name }}" = "repository_dispatch" ]; then
+          CONFIG="${{ github.event.client_payload.config }}"
+        else
+          CONFIG="${{ github.event.inputs.config }}"
+        fi
+
+        echo "$CONFIG" > .env.local
+        echo "✅ Created .env.local"
+
+        TIMESTAMP=$(date +%Y%m%d-%H%M%S)
+        ARTIFACT_NAME="phanpy-dist-${{ github.sha }}-${TIMESTAMP}"
+        echo "name=$ARTIFACT_NAME" >> $GITHUB_OUTPUT
+        echo "📦 Artifact name: $ARTIFACT_NAME"
+
+    - name: Build project
+      run: npm run build
+
+    - name: Upload build artifacts
+      id: artifact-upload
+      uses: actions/upload-artifact@v4
+      with:
+        name: ${{ steps.prepare.outputs.name }}
+        path: dist/
+        retention-days: 7
+
+    - name: Build completed
+      run: |
+        echo "✅ Build completed successfully!"
+        echo "📦 Artifact: ${{ steps.prepare.outputs.name }}"
+
+        cat >> $GITHUB_STEP_SUMMARY <<EOF
+        ## ✅ Build Completed
+
+        **Artifact:** \`${{ steps.prepare.outputs.name }}\`
+
+        **Download:** [${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})
+        EOF

.github/workflows/format-check.yml

@@ -0,0 +1,16 @@
+name: Code formatting check on pull requests
+
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  format-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm run formatting-check

.github/workflows/i18n-automerge.yml

@@ -0,0 +1,72 @@
+name: i18n PR auto-merge
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, labeled]
+    branches:
+      - main
+
+jobs:
+  run-and-merge:
+    if: github.repository == 'cheeaun/phanpy' &&
+      contains(github.event.pull_request.labels.*.name, 'i18n') &&
+      github.event.pull_request.base.ref == 'main' &&
+      github.event.pull_request.head.ref == 'l10n_main'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - run: sleep 15
+
+      - name: Check if the branch is dirty
+        run: |
+          git fetch origin ${{ github.event.pull_request.head.ref }}
+          if [ $(git rev-parse HEAD) != $(git rev-parse origin/${{ github.event.pull_request.head.ref }}) ]; then
+            echo "Branch is dirty. Exiting..."
+            exit 0
+          fi
+
+      - name: Check auto-merge conditions
+        run: |
+          BASE_SHA="${{ github.event.pull_request.base.sha }}"
+          HEAD_SHA="${{ github.event.pull_request.head.sha }}"
+
+          # Debug: Show the base and head SHA
+          echo "Base SHA: $BASE_SHA"
+          echo "Head SHA: $HEAD_SHA"
+
+          # Check if the commits exist
+          if ! git cat-file -e $BASE_SHA || ! git cat-file -e $HEAD_SHA; then
+            echo "ERROR: One or both of the commits are not available."
+            exit 1
+          fi
+
+          # Calculate the total number of lines changed (added, removed, or modified)
+          LINES_CHANGED=$(git diff --shortstat $BASE_SHA $HEAD_SHA | awk '{print $4 + $6 + $8}')
+
+          if [ -z "$LINES_CHANGED" ]; then
+            LINES_CHANGED=0
+          fi
+
+          echo "Total lines changed: $LINES_CHANGED"
+
+          # Check if the number of lines changed is more than 50
+          if [ "$LINES_CHANGED" -le 50 ]; then
+            exit 0
+          else
+            echo "More than 50 lines have been changed. Merging pull request."
+
+            # List of locales changed
+            LOCALES_CHANGED=$(git diff --name-only $BASE_SHA $HEAD_SHA | grep '\.po$' | awk -F '/' '{print $NF}' | sed 's/\.po$//' | tr '\n' ',' | sed 's/,$//')
+
+            # Better subject
+            # "i18n updates ([LOCALES_CHANGED])"
+            PR_NUMBER=$(echo ${{ github.event.pull_request.number }})
+            SUBJECT="i18n updates ($LOCALES_CHANGED) (#$PR_NUMBER)"
+
+            gh pr merge $PR_NUMBER --squash --subject "$SUBJECT" || true
+          fi
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/i18n-update-readme.yml

@@ -0,0 +1,35 @@
+name: Update README with list of i18n volunteers
+
+on:
+  schedule:
+    # Every week
+    - cron: '0 0 * * 0'
+  workflow_dispatch:
+
+jobs:
+  update-readme:
+    if: github.repository == 'cheeaun/phanpy'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: |
+          npm run fetch-i18n-volunteers
+          npm run readme:i18n-volunteers
+
+          # Commit & push if there are changes
+          if git diff --quiet README.md; then
+            echo "No changes to README.md"
+          else
+            echo "Changes to README.md"
+            git config --global user.email "github-actions[bot]@users.noreply.github.com"
+            git config --global user.name "github-actions[bot]"
+            git add README.md
+            git commit -m "Update README.md"
+            git push
+          fi
+        env:
+          CROWDIN_ACCESS_TOKEN: ${{ secrets.CROWDIN_ACCESS_TOKEN }}

.github/workflows/main2prod.yml

@@ -1,12 +1,17 @@
-name: Pull Request to `main` from `production`
+name: Pull Request into `production` from `main`
 
 on:
   push:
     branches:
       - main
+  pull_request:
+    types: [closed]
+    branches:
+      - main
 
 jobs:
   auto-pull-request:
+    if: github.repository == 'cheeaun/phanpy'
     runs-on: ubuntu-latest
     steps:
       - uses: vsoch/pull-request-action@master

.github/workflows/playwright.yml

@@ -0,0 +1,25 @@
+name: Playwright Tests
+permissions:
+  contents: read
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: macos-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps webkit --only-shell
+      - name: Run Playwright tests
+        run: npm run test

.github/workflows/prodtag.yml

@@ -7,6 +7,7 @@ on:
 
 jobs:
   tag:
+    if: github.repository == 'cheeaun/phanpy'
     runs-on: ubuntu-latest
     permissions:
       contents: write
@@ -18,7 +19,7 @@ jobs:
       # - run: git push --tags
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - run: npm ci && npm run build
       - run: cd dist && zip -r ../phanpy-dist.zip . && tar -czf ../phanpy-dist.tar.gz . && cd ..
       - id: tag_name

.github/workflows/update-catalogs.yml

@@ -0,0 +1,33 @@
+name: Update Catalogs
+
+on:
+  push:
+    branches:
+      - l10n_main
+  workflow_dispatch:
+
+jobs:
+  update-catalogs:
+    if: github.repository == 'cheeaun/phanpy'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: l10n_main
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - name: Update catalogs.json
+        run: |
+          node scripts/catalogs.js
+          if git diff --quiet src/data/catalogs.json; then
+            echo "No changes to catalogs.json"
+          else
+            echo "Changes to catalogs.json"
+            git config --global user.email "github-actions[bot]@users.noreply.github.com"
+            git config --global user.name "github-actions[bot]"
+            git add src/data/catalogs.json
+            git commit -m "Update catalogs.json"
+            git push origin HEAD:l10n_main || true
+          fi

.gitignore

@@ -25,6 +25,16 @@ dist-ssr
 
 # Custom
 .env.dev
-src/data/instances-full.json
 phanpy-dist.zip
-phanpy-dist.tar.gz
+phanpy-dist.tar.gz
+sonda-report.html
+.sonda
+
+# Compiled locale files
+src/locales/*.js
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.prettierrc

@@ -1,19 +0,0 @@
-{
-  "tabWidth": 2,
-  "useTabs": false,
-  "singleQuote": true,
-  "trailingComma": "all",
-  "importOrder": [
-    "^[^.].*.css$",
-    "index.css$",
-    ".css$",
-    "<THIRD_PARTY_MODULES>",
-    "/assets/",
-    "^../",
-    "^[./]"
-  ],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "importOrderGroupNamespaceSpecifiers": true,
-  "importOrderCaseInsensitive": true
-}

CHANGELOG.md

@@ -0,0 +1,373 @@
+# Changelog
+
+- Dates are in Singapore time zone (UTC+8)
+- Doesn't include small & quick fixes
+
+## December 15, 2022
+
+📢 https://mastodon.social/@cheeaun/109515757404630583
+
+- Initial launch
+
+## December 16, 2022
+
+📢 https://mastodon.social/@cheeaun/109540685870427959
+
+- 📖 "Read more" for long-form posts
+- 🤘 Profile metadata in Account sheet
+- 💬 "Only mentions" filter in Notifications
+- 🛗 Nested comments + pagination + collapsible comments
+
+## December 24, 2022
+
+📢 https://mastodon.social/@cheeaun/109569389041297558
+
+- 🍰 :shortcode: expander in Compose field
+- ⏲️ character count indicator same as Mastodon's front-end (including twitter-text's URL regex)
+- 🙈 "Invisible Ink" effect for spoilers
+
+## December 28, 2022
+
+📢 https://mastodon.social/@cheeaun/109591442248622453
+
+- 🔠 Language selector in Compose field
+- 🐛 Bug fixes
+
+## January 1, 2023
+
+📢 https://mastodon.social/@cheeaun/109613657018189874
+
+- ⌨️ Small list of keyboard shortcuts (j, k, o, meta+enter, esc)
+- 🐛 Bug fixes
+
+## January 6, 2023
+
+📢 https://mastodon.social/@cheeaun/109642981521972938
+
+- 🙈 Auto-hide header
+- 💅 Small UI changes
+- 🐛 Bug fixes
+
+## January 17, 2023
+
+📢 https://mastodon.social/users/cheeaun/statuses/109704010841850370
+
+- 🔢 Thread count indicator
+- 🔐 Handle accept/reject follow requests for locked accounts
+- 📬 Unsent draft recovery
+- 🎠 Boosts Carousel™️
+- 🐛 Bug fixes
+
+## February 1, 2023
+
+📢 https://mastodon.social/@cheeaun/109785026971372208
+
+- 🔰 ALT badge inside media modals
+- 👀 "Show all sensitive content" menu option for threads
+- 🧵 Improved Threads UI; smarter collapsing, expand/collapse button with avatars, nesting up to level 4
+- 🪟 Media modal appears beside the Detail page for large screens
+- 🐛 Bug fixes
+
+## February 19, 2023
+
+📢 https://mastodon.social/@cheeaun/109892084130563955
+
+- 🍰 New menu + pages: Lists, Followed Hashtags, Bookmarks, Favourites, Search, Local, Federated
+- 📝 Support edit media description for posted statuses (Mastodon v4.1.0)
+- ⚡ Shortcuts™️ (beta) — quick jumping between configured shortcuts
+- 🏛️ Experimental multi-column mode, derived from Shortcuts™️
+- 🐛 Bug fixes
+
+## March 2, 2023
+
+📢 https://mastodon.social/@cheeaun/109954214422731984
+
+- 🔗 Handle mastodon post links
+- #️⃣ Multi-hashtag timeline (5 max)
+- 🥞 Context menu for posts in timeline (tap on timestamp)
+- 📑 New tab/menu-bar UI for Shortcuts™️
+- 🐛 Bug fixes
+
+## March 15, 2023
+
+📢 https://mastodon.social/@cheeaun/110027507724432132
+
+- 👥 Grouped favourites AND boosts notifications
+- 🔤 Configurable text size
+- 💱 Translation
+  - Works for spoiler/CW text, post content, poll text AND image description.
+  - Changeable "source" language selector for intricate cases like multilingual sentences.
+- ✨ Beautiful profile sheets and pages
+- 🚸 Additional prompt when posting or boosting statuses with media that has no description.
+- 🐛 Bug fixes
+
+## March 31, 2023
+
+📢 https://mastodon.social/@cheeaun/110118589616753266
+
+- ❌ Delete post
+- 🙅 Mention, Mute, Block account
+- 🪣 (Partial) Filtered posts UI
+- 👥 Posts context grouping in timelines
+- 👥 Boosts deduplication (beta)
+- 😉 Custom emoji picker
+- 🤏 Pinch-zoom for images. Ctrl/Cmd+scroll for pointers.
+- 🙈 Setting to hide "Translate" button for specific languages
+- 💱 Translate bio, including profile metadata
+- 🎚️ Comments thread UI now nest to ∞ levels
+- 🐛 Bug fixes
+
+## April 7, 2023
+
+📢 https://mastodon.social/@cheeaun/110157897526115895
+
+- 🪣 Filter bar for profile page statuses with these filters:
+  - Include replies
+  - Exclude boosts
+  - Media only
+  - Featured hashtags
+- 🛒 Lists CRUD and Add/Remove accounts in Lists
+- 📑 Sort Followed hashtags
+- 📈 New "Trending" timeline page
+- ＠ New "Mentions" page
+- ✉️ Show "Private mention" badge
+- ⚛️ Boosted/favourited by… accounts list
+- 🐛 Bug fixes
+
+## April 25, 2023
+
+📢 https://mastodon.social/@cheeaun/110260144082803624
+
+- #️⃣ Allow hashtag timeline from other instances
+- ✏️ Edit Shortcuts
+- 🔇 Mute conversation
+- 👀 "Full" & "Side peek" views for Status page
+- 📶 Slight redesign for multi-column UI
+- 🔗 Handle quick post URLs e.g. phanpy.social/#/https://[POST_URL] - a feature from #Elk
+- 🧸 Experimental hashtag stuffing collapsing
+- 🚀 Quote posts rendering
+- 🪄 Experimental cloak mode
+- 🐛 Bug fixes
+
+New matrix chat room: https://matrix.to/#/%23phanpy:matrix.org
+
+## May 11, 2023
+
+📢 https://mastodon.social/@cheeaun/110350569225129255
+
+- 🔔 Notification popover, for larger viewports
+- ✨ New experiment: auto-refresh timeline posts
+- 🔐 "Private" tab, for Private Mentions, in Mentions page
+- 🫴 "Follow requests" section in Notifications page
+- 📢 "Announcements" section in Notifications page
+- 🐛 Bug fixes
+
+## October 2, 2023
+
+📢 https://mastodon.social/@cheeaun/111166122069800214
+
+- 🔔 Web Push notifications (still beta! feedback welcomed 🙏)
+- ⌨️ More keyboard shortcuts
+- 👀 Profile followers and following list
+- 📊 Profile posting stats, shown for accounts that you're not following
+- 💁‍♂️ Alt badge — but will conditionally show as inline captions
+- 👤 Handle memorial and moved accounts
+- 📜 Muted and blocked users list
+- 🐛 Bug fixes
+
+## October 26, 2023
+
+📢 https://mastodon.social/@cheeaun/111301339529679119
+
+- 🗓️ Experimental month filter for posts on profile page
+- 🗞️ Trending news carousel
+- 🫰 Replace "Favourite" with "Like"
+- 🐛 Bug fixes
+
+## November 6, 2023
+
+📢 https://mastodon.social/@cheeaun/111363831401633676
+
+- 🏟️ Media gallery layout for hashtag page and profile page (media-only filter)
+- 🫰 Small UI touches
+- 🐛 Bug fixes
+
+## December 22, 2023
+
+📢 https://mastodon.social/@cheeaun/111624848853096639
+
+- #️⃣ Followed hashtag indicators for non-following posts
+- ↔️ Following/followed-by/mutual states in accounts list
+- 🔙 Adopt `CloseWatcher` for handling back gesture/button on Chrome Android v120+ https://chromestatus.com/feature/4722261258928128
+- 🗣️ "Speak" menu item for supported browsers
+- 🔎 Allow add "Search" in Shortcuts/Columns
+- 🛰️ Community deployments https://github.com/cheeaun/phanpy?tab=readme-ov-file#community-deployments
+- 🐛 Bug fixes
+
+## February 25, 2024
+
+📢 https://mastodon.social/@cheeaun/111992491212397964
+
+- 👀 Show lists containing account in the menu
+- 🍽️ Redesigned context menu
+- 🐛 Bug fixes
+
+## March 6, 2024
+
+📢 https://mastodon.social/@cheeaun/112048317932964165
+
+- ⏱️ Catch-up (beta) ✨🆕✨
+- 🚩 Report post/account
+- ⛏️ Static HTML embed code for posts
+- 🐛 Bug fixes
+
+## March 26, 2024
+
+📢 https://mastodon.social/@cheeaun/112162530547628273
+
+- 🌪️ Keyword filters UI
+- 📝 Allow 'Lists' in Shortcuts (except multi-column view)
+- 🖋️ Edit Profile (only name, bio & extra fields)
+- 🐛 Bug fixes
+
+For upcoming Mastodon v4.3+:
+- 🪣 Filtered notifications https://github.com/mastodon/mastodon/pull/29433
+- 💔 Handle "severed relationships" notifications https://github.com/mastodon/mastodon/pull/27511 + https://github.com/mastodon/mastodon/pull/29706
+
+For non-Mastodon servers:
+- 😉 Best-effort render emoji reactions and notifications (not the reacting part)
+
+## April 17, 2024
+
+📢 https://mastodon.social/@cheeaun/112286757479031305
+
+- 📸 Media-first UI experience
+  - Only for @Pixelfed accounts, for now.
+  - Still buggy, so need more feedback.
+- 🎁 GIF picker (disabled by default)
+- 🐛 Bug fixes
+
+## May 6, 2024
+
+📢 https://mastodon.social/@cheeaun/112394549895936563
+
+- 👾 Custom emoji search. Hoverable & keyboard-accessible tooltips of shortcodes, with fuzzy search.
+- 🐛 Bug fixes
+
+## June 3, 2024
+
+📢 https://mastodon.social/@cheeaun/112552481684496462
+
+- ⬇️ Allow minimize composer https://mastodon.social/@cheeaun/112502500959822353
+- ⚠️ Subtle warning if media file size or dimensions are too large https://mastodon.social/@cheeaun/112512838876542558
+- 🗣️ Experimental client-side language detection for unspecified-language posts and composer. 80 to ~95% accuracy, 24 languages, trained dataset from Tatoeba & UDHR, 34KB gzip, powered by TinyLD (light) https://github.com/komodojp/tinyld
+- 🐛 Bug fixes
+
+## June 23, 2024
+
+📢 https://mastodon.social/@cheeaun/112665474700277373
+
+- 🏞️ Non-grid layout for media on post pages https://mastodon.social/@cheeaun/112592781655285124
+- 🔗 Posts timeline for trending link (upcoming Mastodon v4.3) https://mastodon.social/@cheeaun/112621183860142350
+- 🐛 Bug fixes
+
+## July 22, 2024
+
+📢 https://mastodon.social/@cheeaun/112830006096769732
+
+- 🔔 Experimental opt-in server-side grouped notifications (for upcoming Mastodon v4.3, announced here https://oisaur.com/@renchap/112812306472121018) — it's a bit of a "downgrade" but worth testing. Described as "Potentially improved grouping window but basic grouping logic".
+- 🪣 Grouped filtered posts inside boosts carousel
+- 🐛 Bug fixes
+
+## August 31, 2024
+
+📢 https://mastodon.social/@cheeaun/113056969576068031
+
+- 💬 Internationalization https://mastodon.social/@cheeaun/112932794480750449
+  - 15 languages with >50% translated: Basque, Catalan, Chinese (Simplified), Czech, Finnish, French, Galician, German, Kabyle, Korean, Persian, Portuguese, Portuguese (Brazil), Russian, Spanish
+  - Volunteer translations: https://crowdin.com/project/phanpy
+- 🔔 V2 Notifications policy API https://mastodon.social/@cheeaun/112960426880369332
+- 🔐 Initial OAuth PKCE implementation https://mastodon.social/@cheeaun/113032467744616699
+- 🐛 Bug fixes
+
+## October 9, 2024
+
+📢 https://mastodon.social/@cheeaun/113272683452140213
+
+- 💬 5 new languages: Dutch, Esperanto, Galician, Italian, Japanese
+- 🐛 Bug fixes
+
+Recap: Mastodon v4.3 features (https://github.com/mastodon/mastodon/releases/tag/v4.3.0) already supported on Phanpy:
+- Server-side notification grouping (opt-in)
+- Filtered notifications
+- Severed relationships notifications
+- Timeline of public posts about a trending link
+- Author highlight for news articles
+
+## November 13, 2024
+
+📢 https://mastodon.social/@cheeaun/113475224009500738
+
+- 💬 3 new languages: Lithuanian, Norwegian Bokmål, Ukrainian
+- 🐛 Bug fixes
+
+## March 12, 2025
+
+📢 https://mastodon.social/@cheeaun/114149642985452634
+
+- 🎏 Change profile header and avatar
+- 🗓️ Scheduled posts
+- 🗣️ Experimental implementation of Translator & Language Detector APIs (only Chrome 131 - 137) https://webmachinelearning.github.io/translation-api/
+  - The code: https://github.com/cheeaun/phanpy/blob/0759e6431f4572a1d0f10b8eeda0b46b9f14bc0b/src/utils/browser-translator.js
+- 🧵 'Add to thread' menu when right-clicking/long-pressing compose button
+- 📸 Camera button on composer, if supported (Mobile Safari opens camera, Chrome Android requires one extra step)
+- 🐛 Bug fixes
+
+## April 26, 2025
+
+📢 https://mastodon.social/@cheeaun/114404023673367245
+
+- 🗣️ Migrated to a new API for translations.
+  - Improved support from 133 to 249 languages
+- ⌨️ Keyboard-layout-dependent shortcuts
+- 🙈 Handle Mastodon's upcoming `blur` filter https://mastodon.social/@cheeaun/114301571477875063
+- 🐛 Bug fixes
+
+## June 8, 2025
+
+📢 https://mastodon.social/@cheeaun/114647753143423772
+
+- 🌟 Featured profiles (for upcoming Mastodon v4.4)
+- 🔑 Revoke access token when logging out
+- 📸 Respect server's media description character limit
+- 🪣 Add indicator for exclusive lists
+- 🧪 Sandbox https://mastodon.social/@cheeaun/114494995294330803
+- 🐛 Bug fixes
+
+## July 18, 2025
+
+📢 https://mastodon.social/@cheeaun/114874317126202331
+
+- 💬 Better display support for Mastodon v4.4's native quote posts
+- 🧮 Math formatting for LaTeX
+- 🐛 Bug fixes
+
+## September 17, 2025
+
+- 📝 Composer relayout
+- 🔍 Recent searches
+- 🏛️ Edit History Snapshots
+- 🔰 Show role badges with profile usernames
+- ⌛ "X months/years later" hint between list of threads or comments
+- 🔗 "Open link?" prompt when clicking links that don't show domain
+- 🔬 Larger-than-rendered custom emojis opens up in media modal when clicked.
+- 🔭 Zoom in/out buttons in Custom Emojis picker
+- 🐛 Bug fixes
+
+<!--
+
+## Next
+
+- 🐛 Bug fixes
+
+-->

PRIVACY.MD

@@ -8,7 +8,7 @@ Phanpy is hosted on [Cloudflare Pages](https://pages.cloudflare.com/) as a stati
 
 ## Translations
 
-Phanpy uses [Lingva API](https://github.com/cheeaun/lingva-api) and [Lingva Translate](https://github.com/thedaviddelta/lingva-translate) as fallbacks for translating post content, profile bio and media description.
+Phanpy uses [TransLang API](https://github.com/cheeaun/translang-api) for translating post content, profile bio and media description. Read more about [TransLang API's privacy policy](https://github.com/cheeaun/translang-api/blob/main/PRIVACY.md).
 
 ## Error logging
 

README.md

@@ -49,15 +49,21 @@ Everything is designed and engineered following my taste and vision. This is a p
 
 ## Subtle UI implementations
 
-### User name display
+<details>
+<summary>
+<b>User name display</b>
+</summary>
 
 ![User name display](readme-assets/user-name-display.jpg)
 
 - On the timeline, the user name is displayed as `[NAME] @[username]`.
 - For the `@[username]`, always exclude the instance domain name.
 - If the `[NAME]` *looks the same* as the `@[username]`, then the `@[username]` is excluded as well.
-
-### Boosts Carousel
+</details>
+<details>
+<summary>
+<b>Boosts Carousel</b>
+</summary>
 
 ![Boosts Carousel](readme-assets/boosts-carousel.jpg)
 
@@ -65,7 +71,12 @@ Everything is designed and engineered following my taste and vision. This is a p
 - If number of boosts are more than 3 quarters of total posts, boosts carousel UI will be slotted at the end of total posts fetched (per "page").
 - Else, boosts carousel UI will be slotted in between the posts.
 
-### Thread number badge (e.g. Thread 1/X)
+</details>
+
+<details>
+<summary>
+<b>Thread number badge (e.g. Thread 1/X)</b>
+</summary>
 
 ![Thread number badge](readme-assets/thread-number-badge.jpg)
 
@@ -73,8 +84,12 @@ Everything is designed and engineered following my taste and vision. This is a p
 - If root post is found, badge will show the index number of the post in the thread.
 - Limit up to 3 API requests as the root post may be very old or the thread is super long.
 - If index number couldn't be found, badge will fallback to showing `Thread` without the number.
+</details>
 
-### Hashtag stuffing collapsing
+<details>
+<summary>
+<b>Hashtag stuffing collapsing</b>
+</summary>
 
 ![Hashtag stuffing collapsing](readme-assets/hashtag-stuffing-collapsing.jpg)
 
@@ -85,8 +100,12 @@ Everything is designed and engineered following my taste and vision. This is a p
 - Collapsed hashtags will be appended with `...` at the end.
 - They are also slightly faded out to reduce visual noise.
 - Opening the post view will reveal the hashtags uncollapsed.
+</details>
 
-### Filtered posts
+<details>
+<summary>
+<b>Filtered posts</b>
+</summary>
 
 - "Hide completely"-filtered posts will be hidden, with no UI to reveal it.
 - "Hide with a warning"-filtered posts will be partially hidden, showing the filter name and author name.
@@ -94,18 +113,20 @@ Everything is designed and engineered following my taste and vision. This is a p
   - Clicking it will open the Post page.
   - Long-pressing or right-clicking it will "peek" the post with a bottom sheet UI.
   - On boosts carousel, they are sorted to the end of the carousel.
+</details>
 
 ## Development
 
-Prerequisites: Node.js 18+
+Prerequisites: Node.js 20+
 
 - `npm install` - Install dependencies
-- `npm run dev` - Start development server
+- `npm run dev` - Start development server and `messages:extract` (`clean` + `watch`) in parallel
 - `npm run build` - Build for production
 - `npm run preview` - Preview the production build
-- `npm run fetch-instances` - Fetch instances list from [instances.social](https://instances.social/), save it to `src/data/instances.json`
-  - requires `.env.dev` file with `INSTANCES_SOCIAL_SECRET_TOKEN` variable set
+- `npm run fetch-instances` - Fetch instances list from [joinmastodon.org/servers](https://joinmastodon.org/servers), save it to `src/data/instances.json`
 - `npm run sourcemap` - Run `source-map-explorer` on the production build
+- `npm run messages:extract` - Extract messages from source files and update the locale message catalogs
+- `npm run git:po-filter` - Configure `git` to use `po-filter` for diffing `.po` files
 
 ## Tech stack
 
@@ -116,10 +137,67 @@ Prerequisites: Node.js 18+
 - [masto.js](https://github.com/neet/masto.js/) - Mastodon API client
 - [Iconify](https://iconify.design/) - Icon library
   - [MingCute icons](https://www.mingcute.com/)
+- [Lingui](https://lingui.dev/) - Internationalization
 - Vanilla CSS - _Yes, I'm old school._
 
 Some of these may change in the future. The front-end world is ever-changing.
 
+## Internationalization
+
+All translations are available as [gettext](https://en.wikipedia.org/wiki/Gettext) `.po` files in the `src/locales` folder. The default language is English (`en`). [CLDR Plural Rules](https://cldr.unicode.org/index/cldr-spec/plural-rules) are used for pluralization. RTL (right-to-left) languages are also supported with proper text direction, icon rendering and layout.
+
+On page load, default language is detected via these methods, in order (first match is used):
+
+1. URL parameter `lang` e.g. `/?lang=zh-Hant`
+2. `localStorage` key `lang`
+3. Browser's `navigator.language`
+
+Users can change the language in the settings, which sets the `localStorage` key `lang`.
+
+### Guide for translators
+
+*Inspired by [Translate WordPress Handbook](https://make.wordpress.org/polyglots/handbook/):
+
+- [Don’t translate literally, translate organically](https://make.wordpress.org/polyglots/handbook/translating/expectations/#dont-translate-literally-translate-organically).
+- [Try to keep the same level of formality (or informality)](https://make.wordpress.org/polyglots/handbook/translating/expectations/#try-to-keep-the-same-level-of-formality-or-informality)
+- [Don’t use slang or audience-specific terms](https://make.wordpress.org/polyglots/handbook/translating/expectations/#try-to-keep-the-same-level-of-formality-or-informality)
+- Be attentive to placeholders for variables. Many strings have placesholders e.g. `{account}` (variable), `<0>{name}</0>` (tag with variable) and `#` (number placeholder).
+- [Ellipsis](https://en.wikipedia.org/wiki/Ellipsis) (…) is intentional. Don't remove it.
+  - Nielsen Norman Group: ["Include Ellipses in Command Text to Indicate When More Information Is Required"](https://www.nngroup.com/articles/ui-copy/)
+  - Apple Human Interface Guidelines: ["Append an ellipsis to a menu item’s label when the action requires more information before it can complete. The ellipsis character (…) signals that people need to input information or make additional choices, typically within another view."](https://developer.apple.com/design/human-interface-guidelines/menus)
+  - Windows App Development: ["Ellipses mean incompleteness."](https://learn.microsoft.com/en-us/windows/win32/uxguide/text-ui)
+- Date timestamps, date ranges, numbers, language names and text segmentation are handled by the [ECMAScript Internationalization API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl).
+  - [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) - e.g. "8 Aug", "08/08/2024"
+  - [`Intl.RelativeTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat) - e.g. "2 days ago", "in 2 days"
+  - [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) - e.g. "1,000", "10K"
+  - [`Intl.DisplayNames`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames) - e.g. "English" (`en`) in Traditional Chinese (`zh-Hant`) is "英文"
+  - [`Intl.Locale`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) (with polyfill for older browsers)
+  - [`Intl.Segmenter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter) (with polyfill for older browsers)
+
+### Technical notes
+
+- IDs for strings are auto-generated instead of explicitly defined. Some of the [benefits](https://lingui.dev/tutorials/explicit-vs-generated-ids#benefits-of-generated-ids) are avoiding the "naming things" problem and avoiding duplicates.
+  - Explicit IDs might be introduced in the future when requirements and priorities change. The library (Lingui) allows both.
+  - Please report issues if certain strings are translated differently based on context, culture or region.
+- There are no strings for push notifications. The language is set on the instance server.
+- Native HTML date pickers, e.g. `<input type="month">` will always follow the system's locale and not the user's set locale.
+- "ALT" in ALT badge is not translated. It serves as a a recognizable standard across languages.
+- Custom emoji names are not localized, therefore searches don't work for non-English languages.
+- GIPHY API supports [a list of languages for searches](https://developers.giphy.com/docs/optional-settings/#language-support).
+- Unicode Right-to-left mark (RLM) (`U+200F`, `&rlm;`) may need to be used for mixed RTL/LTR text, especially for [`<title>` element](https://www.w3.org/International/questions/qa-html-dir.en.html#title_element) (`document.title`).
+- On development, there's an additional `pseudo-LOCALE` locale, used for [pseudolocalization](https://en.wikipedia.org/wiki/Pseudolocalization). It's for testing and won't show up on production.
+- When building for production, English (`en`) catalog messages are not bundled separatedly. Other locales are bundled as separate files and loaded on demand. This ensures that `en` is always available as fallback.
+
+### Volunteer translations
+
+[![Crowdin](https://badges.crowdin.net/phanpy/localized.svg)](https://crowdin.com/project/phanpy)
+
+[![Languages chart](https://badges.awesome-crowdin.com/translation-14836566-703337.png)](https://crowdin.com/project/phanpy)
+
+Translations are managed on [Crowdin](https://crowdin.com/project/phanpy). You can help by volunteering translations.
+
+Read the [intro documentation](https://support.crowdin.com/for-volunteer-translators/) to get started.
+
 ## Self-hosting
 
 This is a **pure static web app**. You can host it anywhere you want.
@@ -130,16 +208,22 @@ Two ways (choose one):
 
 Go to [Releases](https://github.com/cheeaun/phanpy/releases) and download the latest `phanpy-dist.zip` or `phanpy-dist.tar.gz`. It's pre-built so don't need to run any install/build commands. Extract it. Serve the folder of extracted files.
 
+> [!IMPORTANT]
+> Text translations connect to an **external service** (`translang.phanpy.social`).
+
 ### Custom-build way
 
 Requires [Node.js](https://nodejs.org/).
 
 Download or `git clone` this repository. Use `production` branch for *stable* releases, `main` for *latest*. Build it by running `npm run build` (after `npm install`). Serve the `dist` folder.
 
+> [!IMPORTANT]
+> Text translations connect to an **external service** (`translang.phanpy.social`). This can be configured with environment variables if you want to [self-host your own instance](#translang-api-hosting).
+
 Customization can be done by passing environment variables to the build command. Examples:
 
 ```bash
-PHANPY_APP_TITLE="Phanpy Dev" \
+PHANPY_CLIENT_NAME="Phanpy Dev" \
     PHANPY_WEBSITE="https://dev.phanpy.social" \
     npm run build
 ```
@@ -175,11 +259,32 @@ Available variables:
 - `PHANPY_PRIVACY_POLICY_URL` (optional, default to official instance's privacy policy):
   - URL of the privacy policy page
   - May specify the instance's own privacy policy
-- `PHANPY_LINGVA_INSTANCES` (optional, space-separated list, default: `lingva.phanpy.social [...hard-coded list of fallback instances]`):
+- `PHANPY_DEFAULT_LANG` (optional):
+  - Default language is English (`en`) if not specified.
+  - Fallback language after multiple detection methods (`lang` query parameter, `lang` key in `localStorage` and `navigator.language`)
+- `PHANPY_REFERRER_POLICY` (optional, default: `origin`):
+  - Referrer policy for the site. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy).
+  - This is applied with the `<meta>` tag on the client-side.
+  - The policy can also be set with `Referrer-Policy` header configured on the server-side (not this variable).
+  - Note that since Phanpy uses hash-based URLs, the referrer does not include the hash part.
+- `PHANPY_LINGVA_INSTANCES` (**DEPRECATED**, optional, space-separated list, default: `lingva.phanpy.social [...hard-coded list of fallback instances]`):
   - Specify a space-separated list of instances. First will be used as default before falling back to the subsequent instances. If there's only 1 instance, means no fallback.
   - May specify a self-hosted Lingva instance, powered by either [lingva-translate](https://github.com/thedaviddelta/lingva-translate) or [lingva-api](https://github.com/cheeaun/lingva-api)
   - List of fallback instances hard-coded in `/.env`
   - [↗️ List of lingva-translate instances](https://github.com/thedaviddelta/lingva-translate?tab=readme-ov-file#instances)
+- `PHANPY_TRANSLANG_INSTANCES` (optional, space-separated list, default: `translang.phanpy.social`):
+  - Specify a space-separated list of instances. First will be used as default before falling back to the subsequent instances. If there's only 1 instance, means no fallback.
+  - May specify a self-hosted Translating instance, powered by [translang-api](https://github.com/cheeaun/translang-api).
+  - List of instances hard-coded in `/.env`
+- `PHANPY_IMG_ALT_API_URL` (optional, no defaults):
+  - API endpoint for self-hosted instance of [img-alt-api](https://github.com/cheeaun/img-alt-api).
+  - If provided, a setting will appear for users to enable the image description generator in the composer. Disabled by default.
+- `PHANPY_GIPHY_API_KEY` (optional, no defaults):
+  - API key for [GIPHY](https://developers.giphy.com/). See [API docs](https://developers.giphy.com/docs/api/).
+  - If provided, a setting will appear for users to enable the GIF picker in the composer. Disabled by default.
+  - This is not self-hosted.
+- `PHANPY_DISALLOW_ROBOTS` (optional, default: not set):
+  - Set to any value (`true`, `1`, etc) to override the robots.txt file and disallow all web crawlers from indexing the site
 
 ### Static site hosting
 
@@ -187,18 +292,32 @@ Try online search for "how to self-host static sites" as there are many ways to
 
 #### Lingva-translate or lingva-api hosting
 
-See documentation for [lingva-translate](https://github.com/thedaviddelta/lingva-translate) or [lingva-api](https://github.com/cheeaun/lingva-api).
+⚠️ **DEPRECATED**. See documentation for [lingva-translate](https://github.com/thedaviddelta/lingva-translate) or [lingva-api](https://github.com/cheeaun/lingva-api).
+
+#### Translang API hosting
+
+See documentation for [translang-api](https://github.com/cheeaun/translang-api).
 
 ## Community deployments
 
 These are self-hosted by other wonderful folks.
 
-- [ferengi.one](https://ferengi.one/) by [@david@collantes.social](https://collantes.social/@david)
-- [phanpy.blaede.family](https://phanpy.blaede.family/) by [@cassidy@blaede.family](https://mastodon.blaede.family/@cassidy)
-- [phanpy.mstdn.mx](https://phanpy.mstdn.mx/) by [@maop@mstdn.mx](https://mstdn.mx/@maop)
-- [phanpy.vmst.io](https://phanpy.vmst.io/) by [@vmstan@vmst.io](https://vmst.io/@vmstan)
-- [phanpy.gotosocial.social](https://phanpy.gotosocial.social/) by [@admin@gotosocial.social](https://gotosocial.social/@admin)
+- [ferengi.one](https://m.ferengi.one/) by [@david@weaknotes.com](https://weaknotes.com/@david)
+- [halo.mookiesplace.com](https://halo.mookiesplace.com) by [@mookie@suigow.xyz](https://suigow.xyz/@mookie)
+- [phanpy.app](https://phanpy.app) by [@bumble@ibe.social](https://ibe.social/@bumble)
 - [phanpy.bauxite.tech](https://phanpy.bauxite.tech) by [@b4ux1t3@hachyderm.io](https://hachyderm.io/@b4ux1t3)
+- [phanpy.blaede.family](https://phanpy.blaede.family/) by [@cassidy@blaede.family](https://mastodon.blaede.family/@cassidy)
+- [phanpy.crmbl.uk](https://phanpy.crmbl.uk) by [@snail@crmbl.uk](https://mstdn.crmbl.uk/@snail)
+- [phanpy.cz](https://phanpy.cz) by [@zdendys@mamutovo.cz](https://mamutovo.cz/@zdendys)
+- [phanpy.fulda.social](https://phanpy.fulda.social) by [@Ganneff@fulda.social](https://fulda.social/@Ganneff)
+- [phanpy.gotosocial.social](https://phanpy.gotosocial.social/) by [@admin@gotosocial.social](https://gotosocial.social/@admin)
+- [phanpy.hear-me.social](https://phanpy.hear-me.social) by [@admin@hear-me.social](https://hear-me.social/@admin)
+- [phanpy.mastodon.world](https://phanpy.mastodon.world) by [@ruud@mastodon.world](https://mastodon.world/@ruud)
+- [phanpy.mstdn.mx](https://phanpy.mstdn.mx/) by [@maop@mstdn.mx](https://mstdn.mx/@maop)
+- [phanpy.social.tchncs.de](https://phanpy.social.tchncs.de) by [@milan@social.tchncs.de](https://social.tchncs.de/@milan)
+- [phanpy.tilde.zone](https://phanpy.tilde.zone) by [@ben@tilde.zone](https://tilde.zone/@ben)
+- [phanpy.vmst.io](https://phanpy.vmst.io/) by [@vmstan@vmst.io](https://vmst.io/@vmstan)
+- [phanpy.linuxusers.in](https://phanpy.linuxusers.in) by [@dharmik@linuxusers.in](https://linuxusers.in/dharmik)
 
 > Note: Add yours by creating a pull request.
 
@@ -220,6 +339,90 @@ Costs involved in running and developing this web app:
 
 [![Contributors](https://contrib.rocks/image?repo=cheeaun/phanpy)](https://github.com/cheeaun/phanpy/graphs/contributors)
 
+### Translation volunteers
+
+<!-- i18n volunteers start -->
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16945821/medium/3da66a1dde4951ad34c33ca23241b864_default.png" alt="" width="16" height="16" /> A.Mason (Polish)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/12571163/medium/9f3ea938f4243f5ffe2a43f814ddc9e8_default.png" alt="" width="16" height="16" /> alidsds11 (Arabic)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16180744/medium/5b04ae975b23895635130d7a176515cb_default.png" alt="" width="16" height="16" /> alternative (Korean)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16848873/medium/d8773fdb621f4c9c1b08d2c641fa519a.jpeg" alt="" width="16" height="16" /> AmaseCocoa (Japanese)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/13170041/medium/603136896af17fc005fd592ce3f48717_default.png" alt="" width="16" height="16" /> BoFFire (Arabic, French, Kabyle)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/12898464/medium/d3758a76b894bade4bf271c9b32ea69b.png" alt="" width="16" height="16" /> Brawaru (Russian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15460040/medium/1cfcfe5f5511b783b5d9f2b968bad819.png" alt="" width="16" height="16" /> cbasje (Dutch)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15525631/medium/51293156034d0236f1a1020c10f7d539_default.png" alt="" width="16" height="16" /> cbo92 (French)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15910131/medium/67fab7eeab5551853450e76e2ef19e59.jpeg" alt="" width="16" height="16" /> CDN (Chinese Simplified)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/12513809/medium/b56324e44ae26da6db7793bc467a70e2.png" alt="" width="16" height="16" /> codl (French)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16556801/medium/ed5e501ca1f3cc6525d2da28db646346.jpeg" alt="" width="16" height="16" /> dannypsnl (Chinese Traditional)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/3711/medium/c97239bb54623a50eb43cc6b801bb156.jpg" alt="" width="16" height="16" /> databio (Catalan)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16533843/medium/ac7af8776858a992d992cf6702d1aaae.jpg" alt="" width="16" height="16" /> Dizro (Italian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16574625/medium/f2ac3a4f32f104a3a6d4085d4bcb3924_default.png" alt="" width="16" height="16" /> Drift6944 (Czech)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/12618120/medium/ccb11bd042bbf4c7189033f7af2dbd32_default.png" alt="" width="16" height="16" /> drydenwu (Chinese Traditional)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/13557465/medium/8feebf3677fa80c01e8c54c4fbe097e0_default.png" alt="" width="16" height="16" /> elissarc (French)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16528627/medium/9036f6eced0257f4e1ea4c5bd499de2d_default.png" alt="" width="16" height="16" /> ElPamplina (Spanish)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15592209/medium/28f10212dce24e74c25e27ea6d0e9126.png" alt="" width="16" height="16" /> filipesmedeiros (Portuguese)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/14277386/medium/29b30d2c73a214000e3941c9978f49e4_default.png" alt="" width="16" height="16" /> Fitik (Esperanto, Hebrew)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/14444512/medium/99d0e7a3076deccbdfe0aa0b0612308c.jpeg" alt="" width="16" height="16" /> Freeesia (Japanese)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15777621/medium/9e3409aac9c20973984440aa1542b260_default.png" alt="" width="16" height="16" /> gflorian (German)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/12617257/medium/7a0122f352a94d95be10780bb83f63ef.jpg" alt="" width="16" height="16" /> ghose (Galician)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15248754/medium/0dac6334ea0f4e8d4194a605c0a5594a.jpeg" alt="" width="16" height="16" /> hongminhee (Korean)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16529833/medium/2122d0c5d61c00786ab6d5e5672d4098.png" alt="" width="16" height="16" /> Hugoglyph (Esperanto, Spanish)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/13454728/medium/1f78b7124b3c962bc4ae55e8d701fc91_default.png" alt="" width="16" height="16" /> isard (Catalan)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16646485/medium/5d76c44212a4048a815ab437fb170856_default.png" alt="" width="16" height="16" /> kaliuwu (Polish)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16532403/medium/4cefb19623bcc44d7cdb9e25aebf5250.jpeg" alt="" width="16" height="16" /> karlafej (Czech)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15791971/medium/1790a2101ceb13f61816b8fe6fbe6d90.jpeg" alt="" width="16" height="16" /> katullo11 (Italian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/14677260/medium/e9f17e62ab69ed6212a16c94d779e7f3.png" alt="" width="16" height="16" /> Kytta (German)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16529521/medium/ae6add93a901b0fefa2d9b1077920d73.png" alt="" width="16" height="16" /> llun (Thai)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16291756/medium/a662122faa4f9a71b259b0e561f923b4.png" alt="" width="16" height="16" /> lucsdev24 (Occitan, Portuguese, Portuguese, Brazilian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16640089/medium/4b7d8d275d7a7bff564adde51e09b473_default.png" alt="" width="16" height="16" /> LukeHong (Chinese Traditional)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/17345822/medium/3013b04d3a49336637e51dba33ab1a3d.jpeg" alt="" width="16" height="16" /> mahefa.randimbisoa (French)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/12822971/medium/4ecbe6d1248536084902925beb0b63e4.png" alt="" width="16" height="16" /> Mannivu (Italian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/13990351/medium/86942d51f67a5f5366c5d6385ea59b77_default.png" alt="" width="16" height="16" /> manuelviens (French)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16537713/medium/825f0bf1a14fc545a76891a52839d86e_default.png" alt="" width="16" height="16" /> marcin.kozinski (Polish)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16812323/medium/72bffbdf4a331845f23400eafa0b3d48.jpeg" alt="" width="16" height="16" /> martinmodrak (Czech)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/13044/medium/bfa55b9a0569a9e382fd694c91d3db1b_default.png" alt="" width="16" height="16" /> misk (Polish)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/13521465/medium/76cb9aa6b753ce900a70478bff7fcea0.png" alt="" width="16" height="16" /> mkljczkk (Polish)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/12882812/medium/77744d8db46e9a3e09030e1a02b7a572.jpeg" alt="" width="16" height="16" /> mojosoeun (Korean)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/13613969/medium/c7834ddc0ada84a79671697a944bb274.png" alt="" width="16" height="16" /> moreal (Korean)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/14158861/medium/ba1ff31dc5743b067ea6685f735229a5_default.png" alt="" width="16" height="16" /> MrWillCom (Chinese Simplified)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15652333/medium/7f36f289f9e2fe41d89ad534a1047f0e.png" alt="" width="16" height="16" /> nclm (French)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15000639/medium/ebbf0bb7d5027a1903d11b7f5f34f65b.jpeg" alt="" width="16" height="16" /> nycterent (Lithuanian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16539461/medium/2f41b9f0b802c1d200a6ab62167a7229_default.png" alt="" width="16" height="16" /> pazpi (Italian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/13954917/medium/56a2cba267eb1b5d122bf62ddc0dd732_default.png" alt="" width="16" height="16" /> PPNplus (Thai)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15106977/medium/54bf93b19af8bbfdee579ea51685bafa.jpeg" alt="" width="16" height="16" /> punkrockgirl (Basque)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16536247/medium/f010c8e718a36229733a8b58f6bad2a4_default.png" alt="" width="16" height="16" /> radecos (French)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16538917/medium/092ec03f56f9dd1cbce94379fa4d4d38.png" alt="" width="16" height="16" /> Razem (Czech)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/14345134/medium/89a299239890c79a1d791d08ec3951dc.png" alt="" width="16" height="16" /> realpixelcode (German)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16527325/medium/37ebb27e7a50f7f85ae93beafc7028a2.jpg" alt="" width="16" height="16" /> rezahosseinzadeh (Persian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/13422319/medium/66632a98d73d48e36753d94ebcec9d4f.png" alt="" width="16" height="16" /> rwmpelstilzchen (Esperanto, Hebrew)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16538605/medium/bcdb6e3286b7d6237923f3a9383eed29.png" alt="" width="16" height="16" /> SadmL (Russian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16539171/medium/0ce95ef6b3b0566136191fbedc1563d0.png" alt="" width="16" height="16" /> SadmL_AI (Russian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16121928/medium/b1dd34dc3e93b64b93b94aedca0c5b7d.jpg" alt="" width="16" height="16" /> Schishka71 (Russian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/17206524/medium/1b0a8f9eafe7326be6968c6aed14c872.png" alt="" width="16" height="16" /> seizeheures (Esperanto)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/12381015/medium/35e3557fd61d85f9a5b84545d9e3feb4.png" alt="" width="16" height="16" /> shuuji3 (Japanese)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/14565190/medium/79100599131b7776e9803e4b696915a3_default.png" alt="" width="16" height="16" /> Sky_NiniKo (French)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/17237304/medium/7954dfd36547e9d1f13266a52e9aa1b5_default.png" alt="" width="16" height="16" /> StasZin4 (Ukrainian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/13143526/medium/30871da23d51d7e41bb02f3c92d7f104.png" alt="" width="16" height="16" /> Steffo99 (Italian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16532441/medium/1a47e8d80c95636e02d2260f6e233ca5.png" alt="" width="16" height="16" /> Su5hicz (Czech)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/12579488/medium/699394d1acfe986a31532007534c7656.jpg" alt="" width="16" height="16" /> svetlemodry (Czech)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16530049/medium/683f3581620c6b4a5c753b416ed695a7.jpeg" alt="" width="16" height="16" /> tferrermo (Spanish)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15752199/medium/7e9efd828c4691368d063b19d19eb894.png" alt="" width="16" height="16" /> tkbremnes (Norwegian Bokmal)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16527851/medium/649e5a9a8a8cc61ced670d89e9cca082.png" alt="" width="16" height="16" /> tux93 (German)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16236470/medium/315b1ebbd38e0f7e41d44bee752afa33.jpg" alt="" width="16" height="16" /> Usia (Ukrainian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16791511/medium/321c72613cd27efc3005e7c3bf383578.jpeg" alt="" width="16" height="16" /> uzaylul (Turkish)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/14427566/medium/ab733b5044c21867fc5a9d1b22cd2c03.png" alt="" width="16" height="16" /> Vac31. (Lithuanian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16026914/medium/4f2a96210b76cbc330584cfdd01fabc4_default.png" alt="" width="16" height="16" /> valtlai (Finnish)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16608515/medium/85506c21dce8df07843ca11908ee3951.jpeg" alt="" width="16" height="16" /> vasiriri (Polish)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16355626/medium/a10a29f0016c6beb94e8219d50e8b8d7.jpeg" alt="" width="16" height="16" /> voitech (Polish)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16563757/medium/af4556c13862d1fd593b51084a159b75_default.png" alt="" width="16" height="16" /> voyagercy (Chinese Traditional)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15982109/medium/9c03062bdc1d3c6d384dbfead97c26ba.jpeg" alt="" width="16" height="16" /> xabi_itzultzaile (Basque)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16556017/medium/216e0f7a0c35b079920366939a3aaca7_default.png" alt="" width="16" height="16" /> xen4n (Ukrainian)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16532657/medium/f309f319266e1ff95f3070eab0c9a9d9_default.png" alt="" width="16" height="16" /> xqueralt (Catalan)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/15583431/medium/14973556de7721e642701bf74d6fb053.png" alt="" width="16" height="16" /> Yukaii (Chinese Traditional)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/14360216/medium/7e48473691456fce95e1be687045377c.jpeg" alt="" width="16" height="16" /> Zet24 (Arabic)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/14041603/medium/6ab77a0467b06aeb49927c6d9c409f89.jpg" alt="" width="16" height="16" /> ZiriSut (Kabyle)
+- <img src="https://crowdin-static.cf-downloads.crowdin.com/avatar/16530601/medium/e1b6d5c24953b6405405c1ab33c0fa46.jpeg" alt="" width="16" height="16" /> zkreml (Czech)
+<!-- i18n volunteers end -->
+
 ## Backstory
 
 I am one of the earliest users of Twitter. Twitter was launched on [15 July 2006](https://en.wikipedia.org/wiki/Twitter). I joined on December 2006 and my [first tweet](https://twitter.com/cheeaun/status/1298723) was posted on 18 December 2006.
@@ -234,21 +437,29 @@ And here I am. Building a Mastodon web client.
 
 ## Alternative web clients
 
+- Phanpy forks ↓
+  - [Agora](https://agorasocial.app/)
 - [Pinafore](https://pinafore.social/) ([retired](https://nolanlawson.com/2023/01/09/retiring-pinafore/)) - forks ↓
-  - [Semaphore](https://semaphore.social/)
+  - [Semaphore](https://semaphore.social/) ([archived](https://github.com/NickColley/semaphore))
   - [Enafore](https://enafore.social/)
-- [Cuckoo+](https://www.cuckoo.social/)
+- [Cuckoo+](https://www.cuckoo.social/) (down)
 - [Sengi](https://nicolasconstant.github.io/sengi/)
 - [Soapbox](https://fe.soapbox.pub/)
 - [Elk](https://elk.zone/) - forks ↓
-  - [elk.fedified.com](https://elk.fedified.com/)
+  - [elk.fedified.com](https://elk.fedified.com/) (gone, redirects to elk.zone)
+  - [crab](https://github.com/maybeanerd/crab)
+  - [Glowrea](https://github.com/s414june/glowrea)
 - [Mastodeck](https://mastodeck.com/)
 - [Trunks](https://trunks.social/)
 - [Tooty](https://github.com/n1k0/tooty)
 - [Litterbox](https://litterbox.koyu.space/)
 - [Statuzer](https://statuzer.com/)
-- [Tusked](https://tusked.app/)
-- [Mastodon Glitch Edition (standalone frontend)](https://iceshrimp.dev/iceshrimp/masto-fe-standalone)
+- [Tusked](https://tusked.app/) ([archived](https://github.com/raikasdev/tusked))
+- [Mastodon Glitch Edition (standalone frontend)](https://iceshrimp.dev/iceshrimp/masto-fe-standalone) - forks ↓
+  - [Masto-FE (🦥 flavour)](https://masto-fe.superseriousbusiness.org)
+- [pl-fe](https://pl.mkljczk.pl)
+- [Mangane](https://github.com/BDX-town/Mangane)
+- [TheDesk](https://github.com/cutls/TheDesk) (archived)
 - [More...](https://github.com/hueyy/awesome-mastodon/#clients)
 
 ## 💁‍♂️ Notice to all other social media client developers

SECURITY.md

@@ -0,0 +1,40 @@
+# Security Policy
+
+## Supported Versions
+Only the **latest production release** of Phanpy receives security updates. Always update to the newest production version for the best protection.
+
+## Reporting a Vulnerability
+
+**Please don’t discuss security issues in public GitHub issues.** Instead:
+
+1. **GitHub Private Reporting** (preferred):
+   - Click ["Report a vulnerability"](https://github.com/cheeaun/phanpy/security/advisories/new) under the **Security** tab.
+2. **Email**:
+   - Reach out to me directly at cheeaun@gmail.com
+
+**Include**:
+- Steps to reproduce the issue
+- Which parts of Phanpy are affected
+- How severe you think the impact could be
+
+## Disclosure Policy
+
+**Heads up:** I’m a solo maintainer working on Phanpy in my free time. While I take security seriously, I can’t promise enterprise-grade response times. Here’s how I’ll handle reports:
+
+1. **Confirmation**: I’ll acknowledge reports when possible, but this might take weeks due to limited availability.
+2. **Fixing**: Critical bugs will be prioritized, but fixes may take significant time. If it’s urgent, feel free to follow up.
+3. **Public Disclosure**: Patched vulnerabilities will be disclosed once the fix is confirmed stable and most users have updated.
+
+## Security Practices
+
+### For Users
+
+- Use Phanpy with a Mastodon instance that enforces **HTTPS**.
+- Treat OAuth tokens like passwords – don’t share them!
+
+### For Developers
+
+- **Dependencies**: GitHub Dependabot alerts are enabled for vulnerability monitoring.
+- **Code**:
+  - Basic input sanitization to prevent XSS.
+  - *Planned*: Improvements to client-side storage security (contributions welcome!).

biome.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "includes": [
+      "src/**/*.{js,jsx,ts,tsx,css}",
+      "*.{js,jsx,ts,tsx,json,jsonc}",
+      "scripts/**/*.js",
+      "!wrangler.jsonc",
+      "!i18n-volunteers.json"
+    ]
+  },
+  "formatter": {
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": false
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "css": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": {
+          "level": "on",
+          "options": {
+            "groups": [
+              "**/*.css",
+              ":BLANK_LINE:",
+              "./polyfills",
+              ":BLANK_LINE:",
+              [":NODE:", ":BUN:"],
+              ":BLANK_LINE:",
+              [":PACKAGE:", ":PACKAGE_WITH_PROTOCOL:"],
+              ":BLANK_LINE:",
+              "**/assets/**",
+              ":BLANK_LINE:",
+              "../**",
+              ":BLANK_LINE:",
+              ["./**", "./"]
+            ]
+          }
+        }
+      }
+    }
+  }
+}

compose/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Compose / %PHANPY_CLIENT_NAME%</title>
-    <meta name="color-scheme" content="dark light" />
+    <meta name="color-scheme" content="light dark" />
     <meta name="google" content="notranslate" />
   </head>
   <body>

crowdin.yml

@@ -0,0 +1,7 @@
+pull_request_labels:
+  - i18n
+commit_message: New translations (%language%)
+append_commit_message: false
+files:
+  - source: /src/locales/en.po
+    translation: /src/locales/%locale%.po

design/logo-bw-4.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 64 64">
+  <path fill="none" d="M0 0h63.99v63.99H0z"/>
+  <clipPath id="a">
+    <path d="M0 0h63.99v63.99H0z"/>
+  </clipPath>
+  <g clip-path="url(#a)">
+    <path d="M0 0h64.25v63.99H0z"/>
+    <path fill="#fff" d="M37.77 11.47c14.64 3.75 19.04 16.56 15.9 31.3a12.55 12.55 0 0 1-6.36 8.7c-3.2 1.71-8.07 2.53-15.34.55l-9.64-2.4c-10.68-2.63-13.95-10.89-12.3-17.8 3.62-15.2 15.54-23.48 27.74-20.35Z"/>
+    <path d="M36.76 15.43c12.29 3.15 15.55 14.11 12.9 26.5-.94 4.43-4.93 9.36-16.66 6.13l-9.68-2.41c-7.85-1.93-10.53-7.8-9.32-12.88 3.02-12.64 12.61-19.94 22.76-17.34Z"/>
+    <path fill="#fff" d="M27.47 25c-1.46-.7-7.23 3.2-7.66 8.92-.18 2.39 4.55 3.23 5.07-.17.72-4.74 3.71-8.22 2.6-8.76Zm10.75 2c-2.09.32-.39 5.9-.6 10.72-.12 2.8 4.39 3.47 4.7 2.01 1.1-5.07-2.06-13.05-4.1-12.73Z"/>
+  </g>
+</svg>

design/logo-wb-4.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 64 64">
+  <path fill="none" d="M0 0h63.99v63.99H0z"/>
+  <clipPath id="a">
+    <path d="M0 0h63.99v63.99H0z"/>
+  </clipPath>
+  <g clip-path="url(#a)">
+    <path fill="#fff" d="M0 0h64.25v63.99H0z"/>
+    <path d="M37.77 11.47c14.64 3.75 19.04 16.56 15.9 31.3a12.55 12.55 0 0 1-6.36 8.7c-3.2 1.71-8.07 2.53-15.34.55l-9.64-2.4c-10.68-2.63-13.95-10.89-12.3-17.8 3.62-15.2 15.54-23.48 27.74-20.35Z"/>
+    <path fill="#fff" d="M36.76 15.43c12.29 3.15 15.55 14.11 12.9 26.5-.94 4.43-4.93 9.36-16.66 6.13l-9.68-2.41c-7.85-1.93-10.53-7.8-9.32-12.88 3.02-12.64 12.61-19.94 22.76-17.34Z"/>
+    <path d="M27.47 25c-1.46-.7-7.23 3.2-7.66 8.92-.18 2.39 4.55 3.23 5.07-.17.72-4.74 3.71-8.22 2.6-8.76Zm10.75 2c-2.09.32-.39 5.9-.6 10.72-.12 2.8 4.39 3.47 4.7 2.01 1.1-5.07-2.06-13.05-4.1-12.73Z"/>
+  </g>
+</svg>

env.schema.json

@@ -0,0 +1,89 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "type": "object",
+  "required": ["PHANPY_WEBSITE", "PHANPY_CLIENT_NAME"],
+  "properties": {
+    "PHANPY_CLIENT_NAME": {
+      "type": "string",
+      "default": "Phanpy",
+      "minLength": 1,
+      "maxLength": 100,
+      "examples": ["Phanpy Dev", "Donphan"],
+      "description": "Client name that affects web page title, app title, OpenGraph card title, and client name for authentication"
+    },
+    "PHANPY_WEBSITE": {
+      "type": "string",
+      "default": "https://phanpy.social",
+      "format": "uri",
+      "description": "Canonical URL of the website, affects OpenGraph card URL and client URL for authentication"
+    },
+    "PHANPY_PRIVACY_POLICY_URL": {
+      "type": "string",
+      "default": "https://github.com/cheeaun/phanpy/blob/main/PRIVACY.MD",
+      "format": "uri",
+      "examples": ["https://mastodon.social/privacy-policy"],
+      "description": "URL of the privacy policy page"
+    },
+    "PHANPY_TRANSLANG_INSTANCES": {
+      "type": "string",
+      "separator": " ",
+      "default": "translang.phanpy.social",
+      "description": "Space-separated list of Translang instances for translation"
+    },
+    "PHANPY_DEFAULT_LANG": {
+      "type": "string",
+      "default": "en",
+      "examples": ["en-US", "zh-CN"],
+      "description": "Default language fallback after multiple detection methods"
+    },
+    "PHANPY_DEFAULT_INSTANCE": {
+      "type": "string",
+      "pattern": "^(?!https?://).*$",
+      "format": "hostname",
+      "examples": ["mastodon.social", "hachyderm.io"],
+      "description": "Default instance for log-in (Exclude https://)"
+    },
+    "PHANPY_DEFAULT_INSTANCE_REGISTRATION_URL": {
+      "type": "string",
+      "format": "uri",
+      "examples": ["https://mastodon.social/auth/sign_up"],
+      "description": "URL of the instance registration page"
+    },
+    "PHANPY_REFERRER_POLICY": {
+      "type": "string",
+      "default": "origin",
+      "enum": [
+        "no-referrer",
+        "no-referrer-when-downgrade",
+        "origin",
+        "origin-when-cross-origin",
+        "same-origin",
+        "strict-origin",
+        "strict-origin-when-cross-origin",
+        "unsafe-url"
+      ],
+      "description": "Referrer policy for the site, applied with meta tag on client-side"
+    },
+    "PHANPY_IMG_ALT_API_URL": {
+      "type": "string",
+      "format": "uri",
+      "description": "API endpoint for self-hosted img-alt-api instance"
+    },
+    "PHANPY_GIPHY_API_KEY": {
+      "type": "string",
+      "description": "API key for GIPHY integration"
+    },
+    "PHANPY_DISALLOW_ROBOTS": {
+      "type": ["string", "boolean"],
+      "examples": ["true", "1"],
+      "description": "Set to any value to disallow all web crawlers from indexing the site"
+    },
+    "PHANPY_LINGVA_INSTANCES": {
+      "type": "string",
+      "separator": " ",
+      "deprecated": true,
+      "description": "DEPRECATED: Space-separated list of Lingva instances for translation"
+    }
+  },
+  "additionalProperties": false
+}

i18n-volunteers.json

@@ -0,0 +1,345 @@
+[
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/12571163/medium/9f3ea938f4243f5ffe2a43f814ddc9e8_default.png",
+		"username": "alidsds11",
+		"languages": [
+			"Arabic"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/13170041/medium/603136896af17fc005fd592ce3f48717_default.png",
+		"username": "BoFFire",
+		"languages": [
+			"Arabic",
+			"French",
+			"Kabyle"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/12898464/medium/d3758a76b894bade4bf271c9b32ea69b.png",
+		"username": "Brawaru",
+		"languages": [
+			"Russian"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15460040/medium/1cfcfe5f5511b783b5d9f2b968bad819.png",
+		"username": "cbasje",
+		"languages": [
+			"Dutch"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15525631/medium/51293156034d0236f1a1020c10f7d539_default.png",
+		"username": "cbo92",
+		"languages": [
+			"French"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15910131/medium/67fab7eeab5551853450e76e2ef19e59.jpeg",
+		"username": "CDN",
+		"languages": [
+			"Chinese Simplified"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16556801/medium/ed5e501ca1f3cc6525d2da28db646346.jpeg",
+		"username": "dannypsnl",
+		"languages": [
+			"Chinese Traditional"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/3711/medium/d95ddd44e8dcb3a039f8a3463aed781d_default.png",
+		"username": "databio",
+		"languages": [
+			"Catalan"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/12618120/medium/ccb11bd042bbf4c7189033f7af2dbd32_default.png",
+		"username": "drydenwu",
+		"languages": [
+			"Chinese Traditional"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/13557465/medium/8feebf3677fa80c01e8c54c4fbe097e0_default.png",
+		"username": "elissarc",
+		"languages": [
+			"French"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16528627/medium/9036f6eced0257f4e1ea4c5bd499de2d_default.png",
+		"username": "ElPamplina",
+		"languages": [
+			"Spanish"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/14277386/medium/29b30d2c73a214000e3941c9978f49e4_default.png",
+		"username": "Fitik",
+		"languages": [
+			"Esperanto",
+			"Hebrew"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/14444512/medium/99d0e7a3076deccbdfe0aa0b0612308c.jpeg",
+		"username": "Freeesia",
+		"languages": [
+			"Japanese"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/12617257/medium/a201650da44fed28890b0e0d8477a663.jpg",
+		"username": "ghose",
+		"languages": [
+			"Galician"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15248754/medium/0dac6334ea0f4e8d4194a605c0a5594a.jpeg",
+		"username": "hongminhee",
+		"languages": [
+			"Korean"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/13454728/medium/1f78b7124b3c962bc4ae55e8d701fc91_default.png",
+		"username": "isard",
+		"languages": [
+			"Catalan"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16532403/medium/4cefb19623bcc44d7cdb9e25aebf5250.jpeg",
+		"username": "karlafej",
+		"languages": [
+			"Czech"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15791971/medium/88bdda3090339f16f6083390d32bb434_default.png",
+		"username": "katullo11",
+		"languages": [
+			"Italian"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/14677260/medium/e53420d200961f48602324e18c091bdc.png",
+		"username": "Kytta",
+		"languages": [
+			"German"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16529521/medium/ae6add93a901b0fefa2d9b1077920d73.png",
+		"username": "llun",
+		"languages": [
+			"Thai"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16291756/medium/e1c4210f15537394cc764b8bc2dffe37.jpg",
+		"username": "lucasofchirst",
+		"languages": [
+			"Occitan",
+			"Portuguese",
+			"Portuguese, Brazilian"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16537713/medium/825f0bf1a14fc545a76891a52839d86e_default.png",
+		"username": "marcin.kozinski",
+		"languages": [
+			"Polish"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/12882812/medium/77744d8db46e9a3e09030e1a02b7a572.jpeg",
+		"username": "mojosoeun",
+		"languages": [
+			"Korean"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/13613969/medium/c7834ddc0ada84a79671697a944bb274.png",
+		"username": "moreal",
+		"languages": [
+			"Korean"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/14158861/medium/ba1ff31dc5743b067ea6685f735229a5_default.png",
+		"username": "MrWillCom",
+		"languages": [
+			"Chinese Simplified"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15652333/medium/7f36f289f9e2fe41d89ad534a1047f0e.png",
+		"username": "nclm",
+		"languages": [
+			"French"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16539461/medium/2f41b9f0b802c1d200a6ab62167a7229_default.png",
+		"username": "pazpi",
+		"languages": [
+			"Italian"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15106977/medium/54bf93b19af8bbfdee579ea51685bafa.jpeg",
+		"username": "punkrockgirl",
+		"languages": [
+			"Basque"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16536247/medium/f010c8e718a36229733a8b58f6bad2a4_default.png",
+		"username": "radecos",
+		"languages": [
+			"French"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16538917/medium/092ec03f56f9dd1cbce94379fa4d4d38.png",
+		"username": "Razem",
+		"languages": [
+			"Czech"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/14345134/medium/89a299239890c79a1d791d08ec3951dc.png",
+		"username": "realpixelcode",
+		"languages": [
+			"German"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16527325/medium/37ebb27e7a50f7f85ae93beafc7028a2.jpg",
+		"username": "rezahosseinzadeh",
+		"languages": [
+			"Persian"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/13422319/medium/66632a98d73d48e36753d94ebcec9d4f.png",
+		"username": "rwmpelstilzchen",
+		"languages": [
+			"Esperanto",
+			"Hebrew"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16538605/medium/bcdb6e3286b7d6237923f3a9383eed29.png",
+		"username": "SadmL",
+		"languages": [
+			"Russian"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/14565190/medium/79100599131b7776e9803e4b696915a3_default.png",
+		"username": "Sky_NiniKo",
+		"languages": [
+			"French"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16532441/medium/1a47e8d80c95636e02d2260f6e233ca5.png",
+		"username": "Su5hicz",
+		"languages": [
+			"Czech"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16533843/medium/7314c15492ef90118c33a80a427e6c87_default.png",
+		"username": "Talos00",
+		"languages": [
+			"Italian"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16530049/medium/683f3581620c6b4a5c753b416ed695a7.jpeg",
+		"username": "tferrermo",
+		"languages": [
+			"Spanish"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16527851/medium/649e5a9a8a8cc61ced670d89e9cca082.png",
+		"username": "tux93",
+		"languages": [
+			"German"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16529833/medium/2991a65722acd721849656223014cd49.png",
+		"username": "Urbestro",
+		"languages": [
+			"Esperanto",
+			"Spanish"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16539171/medium/db6fb87481026c72b895adfb94e17d2c_default.png",
+		"username": "UsualUsername",
+		"languages": [
+			"Russian"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/14427566/medium/ab733b5044c21867fc5a9d1b22cd2c03.png",
+		"username": "Vac31.",
+		"languages": [
+			"Lithuanian"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16026914/medium/e3ca187f354a298ef0c9d02a0ed17be7.jpg",
+		"username": "valtlai",
+		"languages": [
+			"Finnish"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/15982109/medium/9c03062bdc1d3c6d384dbfead97c26ba.jpeg",
+		"username": "xabi_itzultzaile",
+		"languages": [
+			"Basque"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16556017/medium/216e0f7a0c35b079920366939a3aaca7_default.png",
+		"username": "xen4n",
+		"languages": [
+			"Ukrainian"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16532657/medium/f309f319266e1ff95f3070eab0c9a9d9_default.png",
+		"username": "xqueralt",
+		"languages": [
+			"Catalan"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/14041603/medium/6ab77a0467b06aeb49927c6d9c409f89.jpg",
+		"username": "ZiriSut",
+		"languages": [
+			"Kabyle"
+		]
+	},
+	{
+		"avatarUrl": "https://crowdin-static.downloads.crowdin.com/avatar/16530601/medium/e1b6d5c24953b6405405c1ab33c0fa46.jpeg",
+		"username": "zkreml",
+		"languages": [
+			"Czech"
+		]
+	}
+]

index.html

@@ -11,7 +11,7 @@
       name="description"
       content="Minimalistic opinionated Mastodon web client"
     />
-    <meta name="color-scheme" content="dark light" />
+    <meta name="color-scheme" content="light dark" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta name="apple-mobile-web-app-title" content="%PHANPY_CLIENT_NAME%" />

lingui.config.js

@@ -0,0 +1,20 @@
+import { ALL_LOCALES } from './src/locales';
+
+const config = {
+  locales: ALL_LOCALES,
+  sourceLocale: 'en',
+  pseudoLocale: 'pseudo-LOCALE',
+  fallbackLocales: {
+    default: 'en',
+  },
+  catalogs: [
+    {
+      path: '<rootDir>/src/locales/{locale}',
+      include: ['src'],
+    },
+  ],
+  // compileNamespace: 'es',
+  orderBy: 'origin',
+};
+
+export default config;

package.json

@@ -6,60 +6,87 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "fetch-instances": "env $(cat .env.dev | grep -v \"#\" | xargs) node scripts/fetch-instances-list.js",
-    "sourcemap": "npx source-map-explorer dist/assets/*.js"
+    "fetch-instances": "node scripts/fetch-instances-list.js",
+    "sourcemap": "npx source-map-explorer dist/assets/*.js",
+    "bundle-visualizer": "npx vite-bundle-visualizer",
+    "messages:extract": "lingui extract",
+    "messages:extract:clean": "lingui extract --locale en --clean",
+    "messages:compile": "lingui compile",
+    "fetch-i18n-volunteers": "env $(cat .env.local | grep -v \"#\" | xargs) node scripts/fetch-i18n-volunteers.js",
+    "readme:i18n-volunteers": "node scripts/update-i18n-volunteers-readme.js",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:headed": "playwright test --headed",
+    "formatting-check": "npx biome check",
+    "git:po-filter": "git config --local diff.po-filter.textconv \"sed 's/:[0-9]*$//'\""
   },
   "dependencies": {
-    "@formatjs/intl-localematcher": "~0.5.2",
-    "@formkit/auto-animate": "~0.8.1",
-    "@github/text-expander-element": "~2.6.1",
+    "@formatjs/intl-localematcher": "~0.6.2",
+    "@formatjs/intl-segmenter": "~11.7.11",
+    "@formkit/auto-animate": "~0.9.0",
+    "@github/text-expander-element": "~2.9.2",
     "@iconify-icons/mingcute": "~1.2.9",
-    "@justinribeiro/lite-youtube": "~1.5.0",
-    "@szhsin/react-menu": "~4.1.0",
-    "@uidotdev/usehooks": "~2.4.1",
-    "compare-versions": "~6.1.0",
-    "dayjs": "~1.11.10",
-    "dayjs-twitter": "~0.5.0",
-    "fast-blurhash": "~1.1.2",
-    "fast-deep-equal": "~3.1.3",
-    "idb-keyval": "~6.2.1",
+    "@justinribeiro/lite-youtube": "~1.8.2",
+    "@lingui/detect-locale": "~5.5.0",
+    "@lingui/macro": "~5.5.0",
+    "@lingui/react": "~5.5.0",
+    "@szhsin/react-menu": "~4.5.0",
+    "chroma-js": "~3.1.2",
+    "compare-versions": "~6.1.1",
+    "fast-blurhash": "~1.1.4",
+    "fast-equals": "~5.3.2",
+    "fuse.js": "~7.1.0",
+    "html-prettify": "~1.0.7",
+    "idb-keyval": "~6.2.2",
+    "intl-locale-textinfo-polyfill": "~3.0.0",
+    "js-cookie": "~3.0.5",
     "just-debounce-it": "~3.2.0",
     "lz-string": "~1.5.0",
-    "masto": "~6.5.1",
+    "masto": "~7.2.0",
     "moize": "~6.1.6",
-    "p-retry": "~6.2.0",
-    "p-throttle": "~6.1.0",
-    "preact": "~10.19.3",
-    "react-hotkeys-hook": "~4.4.1",
-    "react-intersection-observer": "~9.5.3",
+    "p-retry": "~7.0.0",
+    "p-throttle": "~8.0.0",
+    "preact": "10.27.2",
+    "punycode": "~2.3.1",
+    "react-hotkeys-hook": "~5.1.0",
+    "react-intersection-observer": "~9.16.0",
     "react-quick-pinch-zoom": "~5.1.0",
     "react-router-dom": "6.6.2",
-    "runes2": "~1.1.3",
-    "string-length": "5.0.1",
-    "swiped-events": "~1.1.9",
+    "string-length": "6.0.0",
+    "swiped-events": "~1.2.0",
+    "temml": "~0.11.11",
+    "tinyld": "~1.3.4",
     "toastify-js": "~1.12.0",
     "uid": "~2.0.2",
-    "use-debounce": "~10.0.0",
-    "use-long-press": "~3.2.0",
+    "use-debounce": "~10.0.6",
+    "use-long-press": "~3.3.0",
     "use-resize-observer": "~9.1.0",
-    "valtio": "1.9.0"
+    "valtio": "2.1.8"
   },
   "devDependencies": {
-    "@preact/preset-vite": "~2.7.0",
-    "@trivago/prettier-plugin-sort-imports": "~4.3.0",
-    "postcss": "~8.4.32",
-    "postcss-dark-theme-class": "~1.1.0",
-    "postcss-preset-env": "~9.3.0",
+    "@biomejs/biome": "2.2.5",
+    "@lingui/babel-plugin-lingui-macro": "~5.5.0",
+    "@lingui/cli": "~5.5.0",
+    "@lingui/vite-plugin": "~5.5.0",
+    "@playwright/test": "~1.55.1",
+    "@preact/preset-vite": "~2.10.2",
+    "@types/node": "~24.6.2",
+    "postcss": "~8.5.6",
+    "postcss-dark-theme-class": "~2.0.0",
+    "postcss-preset-env": "~10.4.0",
+    "sonda": "~0.9.0",
     "twitter-text": "~3.1.0",
-    "vite": "~5.0.10",
-    "vite-plugin-generate-file": "~0.1.1",
-    "vite-plugin-html-config": "~1.0.11",
-    "vite-plugin-pwa": "~0.17.4",
+    "vite": "~7.1.9",
+    "vite-plugin-generate-file": "~0.3.1",
+    "vite-plugin-html-config": "~2.0.2",
+    "vite-plugin-pwa": "~1.0.3",
     "vite-plugin-remove-console": "~2.2.0",
-    "workbox-cacheable-response": "~7.0.0",
-    "workbox-expiration": "~7.0.0",
-    "workbox-routing": "~7.0.0",
-    "workbox-strategies": "~7.0.0"
+    "vite-plugin-run": "~0.6.1",
+    "workbox-cacheable-response": "~7.3.0",
+    "workbox-expiration": "~7.3.0",
+    "workbox-navigation-preload": "~7.3.0",
+    "workbox-routing": "~7.3.0",
+    "workbox-strategies": "~7.3.0"
   },
   "postcss": {
     "plugins": {
@@ -71,11 +98,6 @@
       }
     }
   },
-  "overrides": {
-    "vite": {
-      "rollup": ">=4.5.1"
-    }
-  },
   "browserslist": [
     "defaults",
     "android >= 4"

playwright.config.js

@@ -0,0 +1,50 @@
+// @ts-check
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: process.env.CI ? 'github' : 'list',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:5173',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 13 Mini'] },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+  },
+});

public/404.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
+    <title>Page not found</title>
+    <meta name="color-scheme" content="light dark" />
+    <style>
+      body {
+        text-align: center;
+        font-family: ui-rounded, -apple-system, BlinkMacSystemFont, Segoe UI,
+          Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+      }
+      h1 {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Page not found</h1>
+    <p><a href="/">Go home</a></p>
+  </body>
+</html>

public/sw.js

@@ -1,5 +1,6 @@
 import { CacheableResponsePlugin } from 'workbox-cacheable-response';
 import { ExpirationPlugin } from 'workbox-expiration';
+import * as navigationPreload from 'workbox-navigation-preload';
 import { RegExpRoute, registerRoute, Route } from 'workbox-routing';
 import {
   CacheFirst,
@@ -7,19 +8,181 @@ import {
   StaleWhileRevalidate,
 } from 'workbox-strategies';
 
+navigationPreload.enable();
+
 self.__WB_DISABLE_DEV_LOGS = true;
 
+// Custom plugin to manage hashed assets
+class AssetHashPlugin {
+  constructor(options = {}) {
+    this.maxHashes = options.maxHashes || 2;
+    this.dbName = 'workbox-expiration';
+    this.storeName = 'cache-entries';
+  }
+
+  // Extract base filename from a hashed URL
+  // e.g., "main-abc123.js" -> "main"
+  _getBaseName(url) {
+    const urlObj = new URL(url);
+    const pathname = urlObj.pathname;
+    const filename = pathname.split('/').pop();
+
+    // Match pattern: basename-hash.extension
+    // Hash uses URL-safe base64 characters (A-Za-z0-9_-), typically 8+ chars
+    const match = filename.match(/^(.+?)-[A-Za-z0-9_-]{8,}\.(js|css)$/);
+    return match ? match[1] : null;
+  }
+
+  // Get timestamps for multiple URLs from Workbox's ExpirationPlugin IndexedDB
+  async _getTimestampsFromDB(cacheName, urls) {
+    try {
+      const db = await new Promise((resolve, reject) => {
+        const request = indexedDB.open(this.dbName);
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+      });
+
+      const tx = db.transaction(this.storeName, 'readonly');
+      const store = tx.objectStore(this.storeName);
+
+      // Batch read all timestamps in a single transaction
+      const timestamps = await Promise.all(
+        urls.map((url) => {
+          // Workbox stores entries with key format: `${cacheName}|${url}`
+          const key = `${cacheName}|${url}`;
+
+          return new Promise((resolve) => {
+            const request = store.get(key);
+            request.onsuccess = () =>
+              resolve(request.result?.timestamp || Date.now());
+            request.onerror = () => resolve(Date.now());
+          });
+        }),
+      );
+
+      db.close();
+
+      return timestamps;
+    } catch (error) {
+      console.warn(
+        `[AssetHashPlugin] Error reading timestamps from IndexedDB:`,
+        error,
+      );
+      // Return current time for all URLs as fallback
+      return urls.map(() => Date.now());
+    }
+  }
+
+  cacheDidUpdate({ cacheName, request }) {
+    // Run cleanup asynchronously without blocking the cache operation
+    this._cleanupOldHashes(cacheName, request.url);
+  }
+
+  async _cleanupOldHashes(cacheName, requestUrl) {
+    try {
+      const baseName = this._getBaseName(requestUrl);
+      if (!baseName) return;
+
+      const cache = await caches.open(cacheName);
+
+      // Find all cached entries with the same base name
+      const cachedRequests = await cache.keys();
+      const matchingRequests = [];
+
+      for (const cachedRequest of cachedRequests) {
+        const cachedBaseName = this._getBaseName(cachedRequest.url);
+        if (cachedBaseName === baseName) {
+          const response = await cache.match(cachedRequest);
+          if (response) {
+            matchingRequests.push(cachedRequest);
+          }
+        }
+      }
+
+      if (matchingRequests.length <= this.maxHashes) return;
+
+      // Batch read all timestamps in a single database transaction
+      const urls = matchingRequests.map((req) => req.url);
+      const timestamps = await this._getTimestampsFromDB(cacheName, urls);
+
+      // Build matching entries with timestamps
+      const matchingEntries = matchingRequests.map((req, index) => ({
+        request: req,
+        url: req.url,
+        timestamp: timestamps[index],
+      }));
+
+      // Sort by timestamp (newest first)
+      matchingEntries.sort((a, b) => b.timestamp - a.timestamp);
+
+      // Keep only the maxHashes most recent, delete the rest
+      const toDelete = matchingEntries.slice(this.maxHashes);
+
+      for (const entry of toDelete) {
+        await cache.delete(entry.request);
+        console.log(`[AssetHashPlugin] Deleted old hash: ${entry.url}`);
+      }
+    } catch (error) {
+      console.warn(`[AssetHashPlugin] Error during cleanup:`, error);
+    }
+  }
+}
+
+const expirationPluginOptions = {
+  purgeOnQuotaError: true,
+  // "CacheFirst image maxEntries not working" https://github.com/GoogleChrome/workbox/issues/2768#issuecomment-793109906
+  matchOptions: {
+    // https://developer.mozilla.org/en-US/docs/Web/API/Cache/delete#Parameters
+    ignoreVary: true,
+  },
+};
+
+const iconsRoute = new Route(
+  ({ request, sameOrigin }) => {
+    const isIcon = request.url.includes('/icons/');
+    return sameOrigin && isIcon;
+  },
+  new CacheFirst({
+    cacheName: 'icons',
+    plugins: [
+      new ExpirationPlugin({
+        // Weirdly high maxEntries number, due to some old icons suddenly disappearing and not rendering
+        // NOTE: Temporary fix
+        maxEntries: 300,
+        maxAgeSeconds: 3 * 24 * 60 * 60, // 3 days
+        ...expirationPluginOptions,
+      }),
+      new CacheableResponsePlugin({
+        statuses: [0, 200],
+      }),
+    ],
+  }),
+);
+registerRoute(iconsRoute);
+
 const assetsRoute = new Route(
   ({ request, sameOrigin }) => {
     const isAsset =
       request.destination === 'style' || request.destination === 'script';
-    const hasHash = /-[0-9a-f]{4,}\./i.test(request.url);
+    const hasHash = /-[0-9a-z-]{4,}\./i.test(request.url);
     return sameOrigin && isAsset && hasHash;
   },
   new NetworkFirst({
     cacheName: 'assets',
     networkTimeoutSeconds: 5,
     plugins: [
+      // Only enable AssetHashPlugin in production
+      ...(import.meta.env.PROD
+        ? [
+            new AssetHashPlugin({
+              maxHashes: 2, // Keep only 2 most recent hashes of each file
+            }),
+          ]
+        : []),
+      new ExpirationPlugin({
+        maxEntries: 40,
+        ...expirationPluginOptions,
+      }),
       new CacheableResponsePlugin({
         statuses: [0, 200],
       }),
@@ -33,16 +196,16 @@ const imageRoute = new Route(
     const isRemote = !sameOrigin;
     const isImage = request.destination === 'image';
     const isAvatar = request.url.includes('/avatars/');
+    const isCustomEmoji = request.url.includes('/custom/_emojis');
     const isEmoji = request.url.includes('/emoji/');
-    return isRemote && isImage && (isAvatar || isEmoji);
+    return isRemote && isImage && (isAvatar || isCustomEmoji || isEmoji);
   },
   new CacheFirst({
     cacheName: 'remote-images',
     plugins: [
       new ExpirationPlugin({
-        maxEntries: 50,
-        maxAgeSeconds: 3 * 24 * 60 * 60, // 3 days
-        purgeOnQuotaError: true,
+        maxEntries: 30,
+        ...expirationPluginOptions,
       }),
       new CacheableResponsePlugin({
         statuses: [0, 200],
@@ -52,40 +215,18 @@ const imageRoute = new Route(
 );
 registerRoute(imageRoute);
 
-const iconsRoute = new Route(
-  ({ request, sameOrigin }) => {
-    const isIcon = request.url.includes('/icons/');
-    return sameOrigin && isIcon;
-  },
-  new CacheFirst({
-    cacheName: 'icons',
-    plugins: [
-      new ExpirationPlugin({
-        maxEntries: 50,
-        maxAgeSeconds: 3 * 24 * 60 * 60, // 3 days
-        purgeOnQuotaError: true,
-      }),
-      new CacheableResponsePlugin({
-        statuses: [0, 200],
-      }),
-    ],
-  }),
-);
-registerRoute(iconsRoute);
-
 // 1-day cache for
-// - /api/v1/instance
 // - /api/v1/custom_emojis
-// - /api/v1/preferences
 // - /api/v1/lists/:id
 // - /api/v1/announcements
 const apiExtendedRoute = new RegExpRoute(
-  /^https?:\/\/[^\/]+\/api\/v\d+\/(instance|custom_emojis|preferences|lists\/\d+|announcements)$/,
+  /^https?:\/\/[^\/]+\/api\/v\d+\/(custom_emojis|lists\/\d+|announcements)$/,
   new StaleWhileRevalidate({
     cacheName: 'api-extended',
     plugins: [
       new ExpirationPlugin({
-        maxAgeSeconds: 24 * 60 * 60, // 1 day
+        maxAgeSeconds: 12 * 60 * 60, // 12 hours
+        ...expirationPluginOptions,
       }),
       new CacheableResponsePlugin({
         statuses: [0, 200],
@@ -95,6 +236,28 @@ const apiExtendedRoute = new RegExpRoute(
 );
 registerRoute(apiExtendedRoute);
 
+// Note: expiration is not working as expected
+// https://github.com/GoogleChrome/workbox/issues/3316
+//
+// const apiIntermediateRoute = new RegExpRoute(
+//   // Matches:
+//   // - trends/*
+//   // - timelines/link
+//   /^https?:\/\/[^\/]+\/api\/v\d+\/(trends|timelines\/link)/,
+//   new StaleWhileRevalidate({
+//     cacheName: 'api-intermediate',
+//     plugins: [
+//       new ExpirationPlugin({
+//         maxAgeSeconds: 1 * 60, // 1min
+//       }),
+//       new CacheableResponsePlugin({
+//         statuses: [0, 200],
+//       }),
+//     ],
+//   }),
+// );
+// registerRoute(apiIntermediateRoute);
+
 const apiRoute = new RegExpRoute(
   // Matches:
   // - statuses/:id/context - some contexts are really huge
@@ -104,7 +267,9 @@ const apiRoute = new RegExpRoute(
     networkTimeoutSeconds: 5,
     plugins: [
       new ExpirationPlugin({
+        maxEntries: 30,
         maxAgeSeconds: 5 * 60, // 5 minutes
+        ...expirationPluginOptions,
       }),
       new CacheableResponsePlugin({
         statuses: [0, 200],

rollbar.js

@@ -8,6 +8,8 @@ var _rollbarConfig = {
   payload: {
     environment: isDev ? 'development' : 'production',
   },
+  captureIp: false,
+  scrubTelemetryInputs: true,
 };
 
 // Rollbar Snippet
@@ -72,7 +74,7 @@ var _rollbarConfig = {
     (_rollbarConfig = _rollbarConfig || {}),
       (_rollbarConfig.rollbarJsUrl =
         _rollbarConfig.rollbarJsUrl ||
-        'https://cdn.rollbar.com/rollbarjs/refs/tags/v2.26.0/rollbar.min.js'),
+        'https://cdn.rollbar.com/rollbarjs/refs/tags/v2.26.4/rollbar.min.js'),
       (_rollbarConfig.async =
         void 0 === _rollbarConfig.async || _rollbarConfig.async);
     var a = n.setupShim(window, _rollbarConfig),
@@ -328,7 +330,6 @@ var _rollbarConfig = {
         for (
           var a = e.removeEventListener;
           a._rollbarOldRemove && a.belongsToShim;
-
         )
           a = a._rollbarOldRemove;
         var l = function (r, e, o) {
@@ -405,7 +406,6 @@ var _rollbarConfig = {
               },
               i = 0;
             (o = window._rollbarShims[i++]);
-
           )
             n || (n = o.handler),
               o.handler._swapAndProcessMessages(l, o.messages);

scripts/catalogs.js

@@ -0,0 +1,129 @@
+import fs from 'node:fs';
+
+// Dependency from Lingui, not listed in package.json
+import PO from 'pofile';
+
+let listedLocales = [];
+try {
+  listedLocales = JSON.parse(
+    fs.readFileSync('src/data/listed-locales.json', 'utf8'),
+  );
+} catch (e) {}
+
+const DEFAULT_LANG = 'en';
+const IGNORE_LANGS = [DEFAULT_LANG, 'pseudo-LOCALE'];
+
+const files = fs.readdirSync('src/locales');
+const catalogs = {};
+
+const enCatalog = files.find((file) => file.endsWith('en.po'));
+const enContent = fs.readFileSync(`src/locales/${enCatalog}`, 'utf8');
+const enPo = PO.parse(enContent);
+const total = enPo.items.length;
+console.log('Total strings:', total);
+
+const codeMaps = {
+  'kab-KAB': 'kab',
+};
+
+files.forEach((file) => {
+  if (file.endsWith('.po')) {
+    const code = file.replace(/\.po$/, '');
+    if (IGNORE_LANGS.includes(code)) return;
+    const content = fs.readFileSync(`src/locales/${file}`, 'utf8');
+    const po = PO.parse(content);
+    const { items } = po;
+    // Percentage of translated strings
+    const translated = items.filter(
+      (item) => item.msgstr !== '' && item.msgstr[0] !== '',
+    ).length;
+    const percentage = Math.round((translated / total) * 100);
+    po.percentage = percentage;
+    if (percentage > 0) {
+      // Ignore empty catalogs
+      catalogs[codeMaps[code] || code] = percentage;
+    }
+  }
+});
+
+const regionMaps = {
+  'zh-CN': 'zh-Hans',
+  'zh-TW': 'zh-Hant',
+};
+
+function IDN(inputCode, outputCode) {
+  let result;
+  const regionlessInputCode =
+    regionMaps[inputCode] || inputCode.replace(/-[a-z]+$/i, '');
+  const regionlessOutputCode =
+    regionMaps[outputCode] || outputCode.replace(/-[a-z]+$/i, '');
+  const inputCodes =
+    regionlessInputCode !== inputCode
+      ? [inputCode, regionlessInputCode]
+      : [inputCode];
+  const outputCodes =
+    regionlessOutputCode !== outputCode
+      ? [regionlessOutputCode, outputCode]
+      : [outputCode];
+
+  for (const inputCode of inputCodes) {
+    for (const outputCode of outputCodes) {
+      try {
+        result = new Intl.DisplayNames([inputCode], {
+          type: 'language',
+        }).of(outputCode);
+        break;
+      } catch (e) {}
+    }
+    if (result) break;
+  }
+  return result;
+}
+
+const fullCatalogs = Object.entries(catalogs)
+  // sort by key
+  .sort((a, b) => a[0].localeCompare(b[0]))
+  .map(([code, completion]) => {
+    const nativeName = IDN(code, code);
+    const name = IDN('en', code);
+    return { code, nativeName, name, completion };
+  });
+
+// Set listed: true if completion > PERCENTAGE_THRESHOLD
+const PERCENTAGE_THRESHOLD = 50;
+const listedCatalogs = fullCatalogs.map((catalog) => ({
+  ...catalog,
+  // Once listed, always listed
+  // A locale may exceed percentage threshold today, but not tomorrow
+  // So it should't suddenly become unlisted
+  listed:
+    listedLocales.includes(catalog.code) ||
+    catalog.completion >= PERCENTAGE_THRESHOLD,
+}));
+
+// Sort by completion
+const sortedCatalogs = [...listedCatalogs].sort(
+  (a, b) => b.completion - a.completion,
+);
+
+console.table(sortedCatalogs);
+console.log(
+  `Total listed/unlisted: ${listedCatalogs.filter((c) => c.listed).length}/${
+    listedCatalogs.filter((c) => !c.listed).length
+  }`,
+);
+
+const path = 'src/data/catalogs.json';
+fs.writeFileSync(path, JSON.stringify(listedCatalogs, null, 2));
+console.log('File written:', path);
+
+const path2 = 'src/data/listed-locales.json';
+const codes = listedCatalogs.filter((c) => c.listed).map((c) => c.code);
+if (codes.length >= listedLocales.length) {
+  fs.writeFileSync(path2, JSON.stringify(codes, null, 2));
+  console.log('File written:', path2);
+} else {
+  console.error(
+    `Number of listed locales reduced from ${listedLocales.length} to ${codes.length}.`,
+  );
+}

scripts/extract-url.js

@@ -1,4 +1,5 @@
 import fs from 'fs';
+
 import regexSupplant from 'twitter-text/dist/lib/regexSupplant.js';
 import validDomain from 'twitter-text/dist/regexp/validDomain.js';
 import validPortNumber from 'twitter-text/dist/regexp/validPortNumber.js';

scripts/fetch-i18n-volunteers.js

@@ -0,0 +1,131 @@
+import fs from 'fs';
+
+const { CROWDIN_ACCESS_TOKEN } = process.env;
+
+const PROJECT_ID = '703337';
+
+if (!CROWDIN_ACCESS_TOKEN) {
+  throw new Error('CROWDIN_ACCESS_TOKEN is not set');
+}
+
+// Generate Report
+
+let REPORT_ID = null;
+{
+  const response = await fetch(
+    `https://api.crowdin.com/api/v2/projects/${PROJECT_ID}/reports`,
+    {
+      headers: {
+        Authorization: `Bearer ${CROWDIN_ACCESS_TOKEN}`,
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+      body: JSON.stringify({
+        name: 'top-members',
+        schema: {
+          format: 'json',
+        },
+      }),
+    },
+  );
+  const json = await response.json();
+  console.log(`Report ID: ${json?.data?.identifier}`);
+  REPORT_ID = json?.data?.identifier;
+}
+
+if (!REPORT_ID) {
+  throw new Error('Report ID is not found');
+}
+
+// Check Report Generation Status
+let finished = false;
+{
+  let maxPolls = 10;
+  do {
+    maxPolls--;
+    if (maxPolls < 0) break;
+
+    // Wait for 1 second
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    const status = await fetch(
+      `https://api.crowdin.com/api/v2/projects/${PROJECT_ID}/reports/${REPORT_ID}`,
+      {
+        headers: {
+          Authorization: `Bearer ${CROWDIN_ACCESS_TOKEN}`,
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+    const json = await status.json();
+    const progress = json?.data?.progress;
+    console.log(`Progress: ${progress}% (${maxPolls} retries left)`);
+    finished = json?.data?.status === 'finished';
+  } while (!finished);
+}
+
+if (!finished) {
+  throw new Error('Failed to generate report');
+}
+
+// Download Report
+let reportURL = null;
+{
+  const response = await fetch(
+    `https://api.crowdin.com/api/v2/projects/${PROJECT_ID}/reports/${REPORT_ID}/download`,
+    {
+      headers: {
+        Authorization: `Bearer ${CROWDIN_ACCESS_TOKEN}`,
+        'Content-Type': 'application/json',
+      },
+    },
+  );
+  const json = await response.json();
+  reportURL = json?.data?.url;
+  console.log(`Report URL: ${reportURL}`);
+}
+
+if (!reportURL) {
+  throw new Error('Report URL is not found');
+}
+
+// Actually download the report
+let members = null;
+{
+  const response = await fetch(reportURL);
+  const json = await response.json();
+
+  const { data } = json;
+
+  if (!data?.length) {
+    throw new Error('No data found');
+  }
+
+  // Sort by 'user.fullName'
+  data.sort((a, b) => a.user.username.localeCompare(b.user.username));
+  members = data
+    .filter((item) => {
+      const isMyself = item.user.username === 'cheeaun';
+      const translatedMoreThanZero = item.translated > 0;
+
+      return !isMyself && translatedMoreThanZero;
+    })
+    .map((item) => ({
+      avatarUrl: item.user.avatarUrl,
+      username: item.user.username,
+      languages: item.languages.map((lang) => lang.name),
+    }));
+
+  console.log(members);
+
+  if (members?.length) {
+    fs.writeFileSync(
+      'i18n-volunteers.json',
+      JSON.stringify(members, null, '\t'),
+    );
+  }
+}
+
+if (!members?.length) {
+  throw new Error('No members found');
+}

scripts/fetch-instances-list.js

@@ -1,34 +1,12 @@
 import fs from 'fs';
 
-const { INSTANCES_SOCIAL_SECRET_TOKEN } = process.env;
-
-const params = new URLSearchParams({
-  count: 0,
-  min_users: 500,
-  sort_by: 'active_users',
-  sort_order: 'desc',
-});
-
-const url = `https://instances.social/api/1.0/instances/list?${params.toString()}`;
-const results = await fetch(url, {
-  headers: {
-    Authorization: `Bearer ${INSTANCES_SOCIAL_SECRET_TOKEN}`,
-  },
-});
+const url = 'https://api.joinmastodon.org/servers';
+const results = await fetch(url);
 
 const json = await results.json();
 
-// Filters
-json.instances = json.instances.filter(
-  (instance) => Number(instance.connections) > 20,
-);
-
-const names = json.instances.map((instance) => instance.name);
+const domains = json.map((instance) => instance.domain);
 
 // Write to file
 const path = './src/data/instances.json';
-fs.writeFileSync(path, JSON.stringify(names, null, '\t'), 'utf8');
-
-// Write everything to file, for debugging
-const path2 = './src/data/instances-full.json';
-fs.writeFileSync(path2, JSON.stringify(json, null, '\t'), 'utf8');
+fs.writeFileSync(path, JSON.stringify(domains, null, '\t'), 'utf8');

scripts/fetch-translang-languages.js

@@ -0,0 +1,9 @@
+import fs from 'fs';
+
+fetch('https://translang.phanpy.social/api/v1/languages')
+  .then((response) => response.json())
+  .then((json) => {
+    const file = './src/data/translang-languages.json';
+    console.log(`Writing ${file}...`);
+    fs.writeFileSync(file, JSON.stringify(json, null, '\t'), 'utf8');
+  });

scripts/update-i18n-volunteers-readme.js

@@ -0,0 +1,27 @@
+// Find for <!-- i18n volunteers start --><!-- i18n volunteers end --> and inject list of i18n volunteers in between
+
+import fs from 'fs';
+
+const i18nVolunteers = JSON.parse(fs.readFileSync('i18n-volunteers.json'));
+
+const readme = fs.readFileSync('README.md', 'utf8');
+
+const i18nVolunteersStart = '<!-- i18n volunteers start -->';
+const i18nVolunteersEnd = '<!-- i18n volunteers end -->';
+
+const i18nVolunteersList = i18nVolunteers
+  .map((member) => {
+    return `- <img src="${member.avatarUrl}" alt="" width="16" height="16" /> ${
+      member.username
+    } (${member.languages.join(', ')})`;
+  })
+  .join('\n');
+
+const readmeUpdated = readme.replace(
+  new RegExp(`${i18nVolunteersStart}.*${i18nVolunteersEnd}`, 's'),
+  `${i18nVolunteersStart}\n${i18nVolunteersList}\n${i18nVolunteersEnd}`,
+);
+
+fs.writeFileSync('README.md', readmeUpdated);
+
+console.log('Updated README.md');

src/app.jsx

@@ -1,6 +1,8 @@
 import './app.css';
 
+import { useLingui } from '@lingui/react';
 import debounce from 'just-debounce-it';
+import { lazy, memo, Suspense } from 'preact/compat';
 import {
   useEffect,
   useLayoutEffect,
@@ -9,12 +11,14 @@ import {
   useState,
 } from 'preact/hooks';
 import { matchPath, Route, Routes, useLocation } from 'react-router-dom';
+
 import 'swiped-events';
+
 import { subscribe } from 'valtio';
 
 import BackgroundService from './components/background-service';
 import ComposeButton from './components/compose-button';
-import { ICONS } from './components/icon';
+import { ICONS } from './components/ICONS';
 import KeyboardShortcutsHelp from './components/keyboard-shortcuts-help';
 import Loader from './components/loader';
 import Modals from './components/modals';
@@ -23,8 +27,11 @@ import SearchCommand from './components/search-command';
 import Shortcuts from './components/shortcuts';
 import NotFound from './pages/404';
 import AccountStatuses from './pages/account-statuses';
+import AnnualReport from './pages/annual-report';
 import Bookmarks from './pages/bookmarks';
+import Catchup from './pages/catchup';
 import Favourites from './pages/favourites';
+import Filters from './pages/filters';
 import FollowedHashtags from './pages/followed-hashtags';
 import Following from './pages/following';
 import Hashtag from './pages/hashtag';
@@ -36,12 +43,15 @@ import Login from './pages/login';
 import Mentions from './pages/mentions';
 import Notifications from './pages/notifications';
 import Public from './pages/public';
+import ScheduledPosts from './pages/scheduled-posts';
 import Search from './pages/search';
 import StatusRoute from './pages/status-route';
 import Trending from './pages/trending';
 import Welcome from './pages/welcome';
 import {
   api,
+  hasInstance,
+  hasPreferences,
   initAccount,
   initClient,
   initInstance,
@@ -51,9 +61,22 @@ import { getAccessToken } from './utils/auth';
 import focusDeck from './utils/focus-deck';
 import states, { initStates, statusKey } from './utils/states';
 import store from './utils/store';
-import { getCurrentAccount } from './utils/store-utils';
+import {
+  getAccount,
+  getCredentialApplication,
+  getCurrentAccount,
+  getVapidKey,
+  setCurrentAccountID,
+} from './utils/store-utils';
+
 import './utils/toast-alert';
 
+// Lazy load Sandbox component only in development
+const Sandbox =
+  import.meta.env.DEV || import.meta.env.PHANPY_DEV
+    ? lazy(() => import('./pages/sandbox'))
+    : () => null;
+
 window.__STATES__ = states;
 window.__STATES_STATS__ = () => {
   const keys = [
@@ -85,52 +108,57 @@ window.__STATES_STATS__ = () => {
 // Experimental "garbage collection" for states
 // Every 15 minutes
 // Only posts for now
-setInterval(() => {
-  if (!window.__IDLE__) return;
-  const { statuses, unfurledLinks, notifications } = states;
-  let keysCount = 0;
-  const { instance } = api();
-  for (const key in statuses) {
-    if (!window.__IDLE__) break;
-    try {
-      const $post = document.querySelector(
-        `[data-state-post-id~="${key}"], [data-state-post-ids~="${key}"]`,
-      );
-      const postInNotifications = notifications.some(
-        (n) => key === statusKey(n.status?.id, instance),
-      );
-      if (!$post && !postInNotifications) {
-        delete states.statuses[key];
-        delete states.statusQuotes[key];
-        for (const link in unfurledLinks) {
-          const unfurled = unfurledLinks[link];
-          const sKey = statusKey(unfurled.id, unfurled.instance);
-          if (sKey === key) {
-            delete states.unfurledLinks[link];
-            break;
+setInterval(
+  () => {
+    if (!window.__IDLE__) return;
+    const { statuses, unfurledLinks, notifications } = states;
+    let keysCount = 0;
+    const { instance } = api();
+    for (const key in statuses) {
+      if (!window.__IDLE__) break;
+      try {
+        const $post = document.querySelector(
+          `[data-state-post-id~="${key}"], [data-state-post-ids~="${key}"]`,
+        );
+        const postInNotifications = notifications.some(
+          (n) => key === statusKey(n.status?.id, instance),
+        );
+        if (!$post && !postInNotifications) {
+          delete states.statuses[key];
+          delete states.statusQuotes[key];
+          for (const link in unfurledLinks) {
+            const unfurled = unfurledLinks[link];
+            const sKey = statusKey(unfurled.id, unfurled.instance);
+            if (sKey === key) {
+              delete states.unfurledLinks[link];
+              break;
+            }
           }
+          keysCount++;
         }
-        keysCount++;
-      }
-    } catch (e) {}
-  }
-  if (keysCount) {
-    console.info(`GC: Removed ${keysCount} keys`);
-  }
-}, 15 * 60 * 1000);
+      } catch (e) {}
+    }
+    if (keysCount) {
+      console.info(`GC: Removed ${keysCount} keys`);
+    }
+  },
+  15 * 60 * 1000,
+);
 
 // Preload icons
 // There's probably a better way to do this
 // Related: https://github.com/vitejs/vite/issues/10600
 setTimeout(() => {
   for (const icon in ICONS) {
-    queueMicrotask(() => {
+    setTimeout(() => {
       if (Array.isArray(ICONS[icon])) {
         ICONS[icon][0]?.();
+      } else if (typeof ICONS[icon] === 'object') {
+        ICONS[icon].module?.();
       } else {
         ICONS[icon]?.();
       }
-    });
+    }, 1);
   }
 }, 5000);
 
@@ -195,6 +223,12 @@ const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
 if (isIOS) {
   document.addEventListener('visibilitychange', () => {
     if (document.visibilityState === 'visible') {
+      // Don't reset theme color if media modal is showing
+      // Media modal will set its own theme color based on the media's color
+      const showingMediaModal =
+        document.getElementsByClassName('media-modal-container').length > 0;
+      if (showingMediaModal) return;
+
       const theme = store.local.get('theme');
       let $meta;
       if (theme) {
@@ -244,7 +278,7 @@ if (isIOS) {
     document.documentElement.classList.add(`is-${theme}`);
     document
       .querySelector('meta[name="color-scheme"]')
-      .setAttribute('content', theme || 'dark light');
+      .setAttribute('content', theme || 'light dark');
 
     // Enable manual theme <meta>
     const $manualMeta = document.querySelector(
@@ -289,9 +323,59 @@ subscribe(states, (changes) => {
   }
 });
 
+const BENCHES = new Map();
+window.__BENCH_RESULTS = new Map();
+window.__BENCHMARK = {
+  start(name) {
+    if (!import.meta.env.DEV && !import.meta.env.PHANPY_DEV) return;
+    // If already started, ignore
+    if (BENCHES.has(name)) return;
+    const start = performance.now();
+    BENCHES.set(name, start);
+  },
+  end(name) {
+    if (!import.meta.env.DEV && !import.meta.env.PHANPY_DEV) return;
+    const start = BENCHES.get(name);
+    if (start) {
+      const end = performance.now();
+      const duration = end - start;
+      __BENCH_RESULTS.set(name, duration);
+      BENCHES.delete(name);
+    }
+  },
+};
+
+if (import.meta.env.DEV) {
+  // If press shift down, set --time-scale to 10 in root
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Shift') {
+      document.documentElement.classList.add('slow-mo');
+    }
+  });
+  document.addEventListener('keyup', (e) => {
+    if (e.key === 'Shift') {
+      document.documentElement.classList.remove('slow-mo');
+    }
+  });
+}
+
+{
+  // Temporary Experiments
+  // May be removed in the future
+  document.body.classList.toggle(
+    'exp-tab-bar-v2',
+    store.local.get('experiments-tabBarV2') ?? false,
+  );
+}
+
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [uiState, setUIState] = useState('loading');
+  __BENCHMARK.start('app-init');
+  __BENCHMARK.start('time-to-following');
+  __BENCHMARK.start('time-to-home');
+  __BENCHMARK.start('time-to-isLoggedIn');
+  useLingui();
 
   useEffect(() => {
     const instanceURL = store.local.get('instanceURL');
@@ -308,9 +392,13 @@ function App() {
         window.location.pathname || '/',
       );
 
-      const clientID = store.session.get('clientID');
-      const clientSecret = store.session.get('clientSecret');
-      const vapidKey = store.session.get('vapidKey');
+      const {
+        client_id: clientID,
+        client_secret: clientSecret,
+        vapid_key,
+      } = getCredentialApplication(instanceURL) || {};
+      const vapidKey = getVapidKey(instanceURL) || vapid_key;
+      const verifier = store.sessionCookie.get('codeVerifier');
 
       (async () => {
         setUIState('loading');
@@ -319,43 +407,83 @@ function App() {
           client_id: clientID,
           client_secret: clientSecret,
           code,
+          code_verifier: verifier || undefined,
         });
 
-        const client = initClient({ instance: instanceURL, accessToken });
-        await Promise.allSettled([
-          initInstance(client, instanceURL),
-          initAccount(client, instanceURL, accessToken, vapidKey),
-        ]);
-        initStates();
-        initPreferences(client);
+        if (accessToken) {
+          const client = initClient({ instance: instanceURL, accessToken });
+          await Promise.allSettled([
+            initPreferences(client),
+            initInstance(client, instanceURL),
+            initAccount(client, instanceURL, accessToken, vapidKey),
+          ]);
+          initStates();
+          window.__IGNORE_GET_ACCOUNT_ERROR__ = true;
 
-        setIsLoggedIn(true);
-        setUIState('default');
+          setIsLoggedIn(true);
+          setUIState('default');
+        } else {
+          setUIState('error');
+        }
+        __BENCHMARK.end('app-init');
       })();
     } else {
       window.__IGNORE_GET_ACCOUNT_ERROR__ = true;
-      const account = getCurrentAccount();
+      const searchAccount = decodeURIComponent(
+        (window.location.search.match(/account=([^&]+)/) || [, ''])[1],
+      );
+      let account;
+      if (searchAccount) {
+        account = getAccount(searchAccount);
+        console.log('searchAccount', searchAccount, account);
+        if (account) {
+          setCurrentAccountID(account.info.id);
+          window.history.replaceState(
+            {},
+            document.title,
+            window.location.pathname || '/',
+          );
+        }
+      }
+      if (!account) {
+        account = getCurrentAccount();
+      }
       if (account) {
-        store.session.set('currentAccount', account.info.id);
+        setCurrentAccountID(account.info.id);
         const { client } = api({ account });
         const { instance } = client;
         // console.log('masto', masto);
         initStates();
-        initPreferences(client);
         setUIState('loading');
         (async () => {
           try {
-            await initInstance(client, instance);
+            if (hasPreferences() && hasInstance(instance)) {
+              // Non-blocking
+              initPreferences(client);
+              initInstance(client, instance);
+            } else {
+              await Promise.allSettled([
+                initPreferences(client),
+                initInstance(client, instance),
+              ]);
+            }
           } catch (e) {
           } finally {
             setIsLoggedIn(true);
             setUIState('default');
+            __BENCHMARK.end('app-init');
           }
         })();
       } else {
         setUIState('default');
+        __BENCHMARK.end('app-init');
       }
     }
+
+    // Cleanup
+    store.sessionCookie.del('clientID');
+    store.sessionCookie.del('clientSecret');
+    store.sessionCookie.del('codeVerifier');
   }, []);
 
   let location = useLocation();
@@ -370,52 +498,60 @@ function App() {
     return <HttpRoute />;
   }
 
+  if (uiState === 'loading') {
+    return <Loader id="loader-root" />;
+  }
+
   return (
     <>
-      <PrimaryRoutes isLoggedIn={isLoggedIn} loading={uiState === 'loading'} />
+      <PrimaryRoutes isLoggedIn={isLoggedIn} />
       <SecondaryRoutes isLoggedIn={isLoggedIn} />
-      {uiState === 'default' && (
-        <Routes>
-          <Route path="/:instance?/s/:id" element={<StatusRoute />} />
-        </Routes>
-      )}
+      <Routes>
+        <Route path="/:instance?/s/:id" element={<StatusRoute />} />
+      </Routes>
       {isLoggedIn && <ComposeButton />}
       {isLoggedIn && <Shortcuts />}
       <Modals />
       {isLoggedIn && <NotificationService />}
       <BackgroundService isLoggedIn={isLoggedIn} />
-      {uiState !== 'loading' && <SearchCommand onClose={focusDeck} />}
+      <SearchCommand onClose={focusDeck} />
       <KeyboardShortcutsHelp />
     </>
   );
 }
 
-function PrimaryRoutes({ isLoggedIn, loading }) {
+function Root({ isLoggedIn }) {
+  if (isLoggedIn) {
+    __BENCHMARK.end('time-to-isLoggedIn');
+  }
+  return isLoggedIn ? <Home /> : <Welcome />;
+}
+
+const PrimaryRoutes = memo(({ isLoggedIn }) => {
   const location = useLocation();
   const nonRootLocation = useMemo(() => {
     const { pathname } = location;
-    return !/^\/(login|welcome)/.test(pathname);
+    return !/^\/(login|welcome|_sandbox)/i.test(pathname);
   }, [location]);
 
   return (
     <Routes location={nonRootLocation || location}>
-      <Route
-        path="/"
-        element={
-          isLoggedIn ? (
-            <Home />
-          ) : loading ? (
-            <Loader id="loader-root" />
-          ) : (
-            <Welcome />
-          )
-        }
-      />
+      <Route path="/" element={<Root isLoggedIn={isLoggedIn} />} />
       <Route path="/login" element={<Login />} />
       <Route path="/welcome" element={<Welcome />} />
+      {(import.meta.env.DEV || import.meta.env.PHANPY_DEV) && (
+        <Route
+          path="/_sandbox"
+          element={
+            <Suspense fallback={<Loader id="loader-sandbox" />}>
+              <Sandbox />
+            </Suspense>
+          }
+        />
+      )}
     </Routes>
   );
-}
+});
 
 function getPrevLocation() {
   return states.prevLocation || null;
@@ -456,7 +592,11 @@ function SecondaryRoutes({ isLoggedIn }) {
             <Route index element={<Lists />} />
             <Route path=":id" element={<List />} />
           </Route>
-          <Route path="/ft" element={<FollowedHashtags />} />
+          <Route path="/fh" element={<FollowedHashtags />} />
+          <Route path="/sp" element={<ScheduledPosts />} />
+          <Route path="/ft" element={<Filters />} />
+          <Route path="/catchup" element={<Catchup />} />
+          <Route path="/annual_report/:year" element={<AnnualReport />} />
         </>
       )}
       <Route path="/:instance?/t/:hashtag" element={<Hashtag />} />

src/assets/powered-by-giphy.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 641 223">
+  <path fill="#aaa" d="M86 214c-9-1-17-4-24-8l-6-3-5-5-5-4-4-6-4-6-3-8-2-8v-27l2-9 3-9 4-6 4-6 5-5 5-5 7-3 6-4 7-2 7-2 12-1h12l7 1 8 2 7 4 7 3 5 5 5 4-10 10-10 9-4-3-10-5-5-1H88l-5 2-6 3-3 4-4 4-2 5-2 6v6l-1 7 1 7 2 7 3 5 2 4 4 3 4 3 5 2 6 2h9l10-1 5-2 6-3v-16H91v-27h59v54l-1 3-2 3-5 4-4 4-5 3-5 2-8 2-8 2-10 1H92l-6-1zm266-62V91h34v46h44V91h34v121h-34v-46h-44v46h-34v-61zm-182-1V90h34v121h-34v-60zm59-1V90h35l36 1 5 2c3 0 8 2 10 4l5 2 4 5 5 4 3 7 3 7 1 13v13l-4 6-3 7-4 4-5 5-5 2-5 3-6 2-5 1-18 1h-18v32h-34v-61zm67-2 3-2 2-4 2-5v-5l-2-4-2-4-3-2-3-3h-30v31h30l3-2zm226 39v-24l-8-12-18-28a1751 1751 0 0 0-20-31v-2h39l7 12 12 21 6 9 13-21 13-21h38v2l-41 61-7 10v48h-34v-24zM109 66l-4-1-5-5-5-4-1-5-3-9v-5l1-5c2-7 3-10 8-15l4-4 7-2 7-2h7l6 1 5 2 5 2 3 4 4 3 2 6 2 5v13l-2 5-2 6-4 4-3 3-5 2-4 2-9 1h-9l-5-2zm22-11 4-2 3-4 2-5V34l-2-4-2-4-3-2-4-3-5-1h-6l-4 2-5 2-2 4-3 5-1 3v4l1 5 2 5 2 2 5 3 4 2h10l4-2zM37 39V11h33l3 1 3 2 4 3 3 3 1 5 1 4v5l-1 4-3 4-3 5-4 1-3 2-11 1H49v16H37V39zm31 0 3-2 1-2 1-2v-4l-1-3-3-2-2-2H49v18h15l4-1zm107 25a512 512 0 0 0-19-53h14l4 14 6 19 1 4 1-1 7-19 5-17h9l6 19 7 18v-1l2-6 5-17 4-13h14v1l-4 12-16 41v2h-5l-5-1-6-15-6-15-1 1-3 7-6 15-2 8h-11l-1-3zm74-25V11h42v11h-29v2l-1 5v4h29v11h-28v11h2l15 1h13v11h-43V39zm55 0V11h33l5 3 5 2 2 4 2 5v10l-2 3-1 4-5 3-5 3 5 5 8 10 3 4h-14l-7-9-8-10h-9v19h-12V39zm33-3 2-3v-6l-3-3-2-3h-18v16h1v1h17l2-2zm26 3V11h42v11h-29l-1 6v5h29v11h-28v5l-1 5 1 1v1h30v11h-43V39zm54 0V11h17l18 1 4 2 5 3 2 4 3 4 2 6 1 6v5c-1 6-3 12-6 15l-3 4-5 3-5 2-17 1h-16V39zm33 14 5-5 2-3v-6l-1-6-1-3-1-3-4-3-3-2h-5l-6-1-3 1h-3v34h9l8-1 3-2zm50-14V11h34l5 2 4 2 2 3 2 3v9l-2 2-3 4-1 1 3 3 3 4 1 3 1 4-1 4-1 4-3 3-3 3-5 1-5 1h-31V39zm34 15 2-1v-6l-2-2-2-2h-20v13h20l2-2zm-3-22 4-2v-6l-2-1-2-2h-19v12h16l4-1zm42 24V45l-6-9-11-17-5-8h15l4 8 7 11 2 3 7-11 7-11h14l-11 16-11 17v23h-12V56z"/>
+</svg>

src/cloak-mode.css

@@ -8,27 +8,38 @@ body.cloak,
   .name-text *,
   .status .content-container,
   .status .content-container *,
-  .status .content-compact,
+  .status .content-compact > *,
+  .account-container .actions small,
   .account-container :is(header, main > *:not(.actions)),
   .account-container :is(header, main > *:not(.actions)) *,
-  .header-double-lines,
-  .account-block {
+  .header-double-lines *,
+  .account-block,
+  .catchup-filters .filter-author *,
+  .post-peek-html *,
+  .post-peek-content > *,
+  .request-notifications-account *,
+  .status.compact-thread *,
+  .status .content-compact,
+  .bidi-isolate,
+  .should-cloak {
     text-decoration-thickness: 1.1em;
     text-decoration-line: line-through;
-    text-rendering: optimizeSpeed;
+    /* text-rendering: optimizeSpeed; */
     filter: opacity(0.5);
   }
   .name-text *,
   .status .content-container *,
-  .account-container :is(header, main > *:not(.actions)) * {
+  .account-container :is(header, main > *:not(.actions)) *,
+  .post-peek-content > * {
     filter: none;
   }
 
   .status :is(img, video, audio),
   .media-post .media,
-  .avatar,
+  .avatar *,
   .emoji,
-  .header-banner {
+  .header-banner,
+  .post-peek-media {
     filter: contrast(0) !important;
     background-color: #000 !important;
   }
@@ -37,7 +48,26 @@ body.cloak,
 /* SPECIAL CASES */
 
 @supports (display: -webkit-box) {
-  body.cloak .card :is(.title, .meta) {
-    background-color: var(--text-color) !important;
+  :is(body.cloak, .cloak) .card :is(.title, .meta) {
+    background-color: currentColor !important;
+  }
+}
+
+body.cloak,
+.cloak {
+  .header-double-lines *,
+  .account-container .profile-metadata b,
+  .account-container .actions small,
+  .account-container .stats *,
+  .media-container figcaption,
+  .media-container figcaption > *,
+  .catchup-filters .filter-author *,
+  .request-notifications-account * {
+    color: var(--text-color) !important;
+  }
+
+  .account-container .actions small,
+  .status .content-compact {
+    background-color: currentColor !important;
   }
 }

src/components/ICONS.jsx

@@ -0,0 +1,195 @@
+export const ICONS = {
+  x: () => import('@iconify-icons/mingcute/close-line'),
+  heart: () => import('@iconify-icons/mingcute/heart-line'),
+  bookmark: () => import('@iconify-icons/mingcute/bookmark-line'),
+  'check-circle': () => import('@iconify-icons/mingcute/check-circle-line'),
+  'x-circle': () => import('@iconify-icons/mingcute/close-circle-line'),
+  transfer: () => import('@iconify-icons/mingcute/transfer-4-line'),
+  rocket: () => import('@iconify-icons/mingcute/rocket-line'),
+  'arrow-left': {
+    module: () => import('@iconify-icons/mingcute/arrow-left-line'),
+    rtl: true,
+  },
+  'arrow-right': {
+    module: () => import('@iconify-icons/mingcute/arrow-right-line'),
+    rtl: true,
+  },
+  'arrow-up': () => import('@iconify-icons/mingcute/arrow-up-line'),
+  'arrow-down': () => import('@iconify-icons/mingcute/arrow-down-line'),
+  earth: () => import('@iconify-icons/mingcute/world-2-line'),
+  lock: () => import('@iconify-icons/mingcute/lock-line'),
+  unlock: () => import('@iconify-icons/mingcute/unlock-line'),
+  'eye-close': () => import('@iconify-icons/mingcute/eye-close-line'),
+  'eye-open': () => import('@iconify-icons/mingcute/eye-2-line'),
+  message: () => import('@iconify-icons/mingcute/mail-line'),
+  comment: {
+    module: () => import('@iconify-icons/mingcute/chat-3-line'),
+    rtl: true,
+  },
+  comment2: {
+    module: () => import('@iconify-icons/mingcute/comment-2-line'),
+    rtl: true,
+  },
+  home: () => import('@iconify-icons/mingcute/home-3-line'),
+  notification: () => import('@iconify-icons/mingcute/notification-line'),
+  follow: () => import('@iconify-icons/mingcute/user-follow-line'),
+  'follow-add': () => import('@iconify-icons/mingcute/user-add-line'),
+  poll: [() => import('@iconify-icons/mingcute/chart-bar-line'), '90deg'],
+  pencil: () => import('@iconify-icons/mingcute/pencil-line'),
+  quill: () => import('@iconify-icons/mingcute/quill-pen-line'),
+  at: () => import('@iconify-icons/mingcute/at-line'),
+  attachment: () => import('@iconify-icons/mingcute/attachment-line'),
+  upload: () => import('@iconify-icons/mingcute/upload-3-line'),
+  gear: () => import('@iconify-icons/mingcute/settings-3-line'),
+  more: () => import('@iconify-icons/mingcute/more-3-line'),
+  more2: () => import('@iconify-icons/mingcute/more-1-fill'),
+  external: {
+    module: () => import('@iconify-icons/mingcute/external-link-line'),
+    rtl: true,
+  },
+  popout: {
+    module: () => import('@iconify-icons/mingcute/external-link-line'),
+    rtl: true,
+  },
+  popin: {
+    module: () => import('@iconify-icons/mingcute/external-link-line'),
+    rotate: '180deg',
+    rtl: true,
+  },
+  plus: () => import('@iconify-icons/mingcute/add-circle-line'),
+  'chevron-left': {
+    module: () => import('@iconify-icons/mingcute/left-line'),
+    rtl: true,
+  },
+  'chevron-right': {
+    module: () => import('@iconify-icons/mingcute/right-line'),
+    rtl: true,
+  },
+  'chevron-down': () => import('@iconify-icons/mingcute/down-line'),
+  reply: {
+    module: () => import('@iconify-icons/mingcute/share-forward-line'),
+    rotate: '180deg',
+    flip: 'horizontal',
+    rtl: true,
+  },
+  thread: () => import('@iconify-icons/mingcute/route-line'),
+  group: {
+    module: () => import('@iconify-icons/mingcute/group-line'),
+    rtl: true,
+  },
+  bot: () => import('@iconify-icons/mingcute/android-2-line'),
+  menu: () => import('@iconify-icons/mingcute/rows-4-line'),
+  list: {
+    module: () => import('@iconify-icons/mingcute/list-check-line'),
+    rtl: true,
+  },
+  search: () => import('@iconify-icons/mingcute/search-2-line'),
+  hashtag: () => import('@iconify-icons/mingcute/hashtag-line'),
+  info: () => import('@iconify-icons/mingcute/information-line'),
+  shortcut: () => import('@iconify-icons/mingcute/lightning-line'),
+  user: () => import('@iconify-icons/mingcute/user-4-line'),
+  following: () => import('@iconify-icons/mingcute/walk-line'),
+  pin: () => import('@iconify-icons/mingcute/pin-line'),
+  unpin: [() => import('@iconify-icons/mingcute/pin-line'), '180deg'],
+  bus: () => import('@iconify-icons/mingcute/bus-2-line'),
+  link: () => import('@iconify-icons/mingcute/link-2-line'),
+  history: () => import('@iconify-icons/mingcute/history-line'),
+  share: () => import('@iconify-icons/mingcute/share-2-line'),
+  sparkles: () => import('@iconify-icons/mingcute/sparkles-line'),
+  sparkles2: () => import('@iconify-icons/mingcute/sparkles-2-line'),
+  exit: {
+    module: () => import('@iconify-icons/mingcute/exit-line'),
+    rtl: true,
+  },
+  translate: () => import('@iconify-icons/mingcute/translate-line'),
+  play: () => import('@iconify-icons/mingcute/play-fill'),
+  trash: () => import('@iconify-icons/mingcute/delete-2-line'),
+  mute: {
+    module: () => import('@iconify-icons/mingcute/volume-mute-line'),
+    rtl: true,
+  },
+  unmute: {
+    module: () => import('@iconify-icons/mingcute/volume-line'),
+    rtl: true,
+  },
+  block: () => import('@iconify-icons/mingcute/forbid-circle-line'),
+  unblock: [
+    () => import('@iconify-icons/mingcute/forbid-circle-line'),
+    '180deg',
+  ],
+  flag: () => import('@iconify-icons/mingcute/flag-1-line'),
+  time: () => import('@iconify-icons/mingcute/time-line'),
+  refresh: () => import('@iconify-icons/mingcute/refresh-2-line'),
+  emoji2: () => import('@iconify-icons/mingcute/emoji-2-line'),
+  filter: () => import('@iconify-icons/mingcute/filter-2-line'),
+  filters: () => import('@iconify-icons/mingcute/filter-line'),
+  chart: () => import('@iconify-icons/mingcute/chart-line-line'),
+  react: () => import('@iconify-icons/mingcute/react-line'),
+  layout4: {
+    module: () => import('@iconify-icons/mingcute/layout-4-line'),
+    rtl: true,
+  },
+  layout5: () => import('@iconify-icons/mingcute/layout-5-line'),
+  announce: {
+    module: () => import('@iconify-icons/mingcute/announcement-line'),
+    rtl: true,
+  },
+  alert: () => import('@iconify-icons/mingcute/alert-line'),
+  round: () => import('@iconify-icons/mingcute/round-fill'),
+  'arrow-up-circle': () =>
+    import('@iconify-icons/mingcute/arrow-up-circle-line'),
+  'arrow-down-circle': () =>
+    import('@iconify-icons/mingcute/arrow-down-circle-line'),
+  clipboard: {
+    module: () => import('@iconify-icons/mingcute/clipboard-line'),
+    rtl: true,
+  },
+  'account-edit': () => import('@iconify-icons/mingcute/user-edit-line'),
+  'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
+  'account-add': () => import('@iconify-icons/mingcute/user-add-2-line'),
+  keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
+  cloud: () => import('@iconify-icons/mingcute/cloud-line'),
+  month: {
+    module: () => import('@iconify-icons/mingcute/calendar-month-line'),
+    rtl: true,
+  },
+  media: () => import('@iconify-icons/mingcute/photo-album-line'),
+  speak: () => import('@iconify-icons/mingcute/radar-line'),
+  building: () => import('@iconify-icons/mingcute/building-5-line'),
+  history2: {
+    module: () => import('@iconify-icons/mingcute/history-2-line'),
+    rtl: true,
+  },
+  document: () => import('@iconify-icons/mingcute/document-line'),
+  'arrows-right': {
+    module: () => import('@iconify-icons/mingcute/arrows-right-line'),
+    rtl: true,
+  },
+  code: () => import('@iconify-icons/mingcute/code-line'),
+  copy: () => import('@iconify-icons/mingcute/copy-2-line'),
+  quote: {
+    module: () => import('@iconify-icons/mingcute/quote-left-line'),
+    rtl: true,
+  },
+  quote2: {
+    module: () => import('@iconify-icons/mingcute/blockquote-line'),
+    rtl: true,
+  },
+  settings: () => import('@iconify-icons/mingcute/settings-6-line'),
+  'heart-break': () => import('@iconify-icons/mingcute/heart-crack-line'),
+  'user-x': () => import('@iconify-icons/mingcute/user-x-line'),
+  minimize: () => import('@iconify-icons/mingcute/down-line'),
+  celebrate: () => import('@iconify-icons/mingcute/celebrate-line'),
+  schedule: () => import('@iconify-icons/mingcute/calendar-time-add-line'),
+  day: () => import('@iconify-icons/mingcute/calendar-day-line'),
+  camera: () => import('@iconify-icons/mingcute/camera-line'),
+  endorsement: {
+    module: () => import('@iconify-icons/mingcute/user-star-line'),
+    rtl: true,
+  },
+  formula: () => import('@iconify-icons/mingcute/formula-line'),
+  edit: () => import('@iconify-icons/mingcute/edit-4-line'),
+  'zoom-in': () => import('@iconify-icons/mingcute/zoom-in-line'),
+  'zoom-out': () => import('@iconify-icons/mingcute/zoom-out-line'),
+  'cursor-hand': () => import('@iconify-icons/mingcute/hand-finger-2-line'),
+};

src/components/ScheduledAtField.jsx

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'preact/hooks';
+
+export const MIN_SCHEDULED_AT = 6 * 60 * 1000; // 6 mins
+const MAX_SCHEDULED_AT = 90 * 24 * 60 * 60 * 1000; // 90 days
+
+export default function ScheduledAtField({ scheduledAt, setScheduledAt }) {
+  if (!scheduledAt || !(scheduledAt instanceof Date)) {
+    console.warn('scheduledAt is not a Date:', scheduledAt);
+    return;
+  }
+  const [minStr, setMinStr] = useState();
+  const [maxStr, setMaxStr] = useState();
+  const timezoneOffset = scheduledAt.getTimezoneOffset();
+
+  useEffect(() => {
+    function updateMinStr() {
+      const min = new Date(Date.now() + MIN_SCHEDULED_AT);
+      const str = new Date(min.getTime() - timezoneOffset * 60000)
+        .toISOString()
+        .slice(0, 16);
+      setMinStr(str);
+    }
+    updateMinStr();
+
+    function updateMaxStr() {
+      const max = new Date(Date.now() + MAX_SCHEDULED_AT);
+      const str = new Date(max.getTime() - timezoneOffset * 60000)
+        .toISOString()
+        .slice(0, 16);
+      setMaxStr(str);
+    }
+    updateMaxStr();
+
+    // Update every 10s
+    const intervalId = setInterval(() => {
+      updateMinStr();
+      updateMaxStr();
+    }, 1000 * 10);
+    return () => clearInterval(intervalId);
+  }, []);
+
+  const defaultValue = scheduledAt
+    ? new Date(scheduledAt.getTime() - scheduledAt.getTimezoneOffset() * 60000)
+        .toISOString()
+        .slice(0, 16)
+    : null;
+
+  return (
+    <input
+      type="datetime-local"
+      name="scheduledAt"
+      defaultValue={defaultValue}
+      min={minStr}
+      max={maxStr}
+      required
+      onChange={(e) => {
+        setScheduledAt(new Date(e.target.value));
+      }}
+    />
+  );
+}
+
+export function getLocalTimezoneName() {
+  const date = new Date();
+  const formatter = new Intl.DateTimeFormat(undefined, {
+    timeZoneName: 'long',
+  });
+  const parts = formatter.formatToParts(date);
+  const timezoneName = parts.find(
+    (part) => part.type === 'timeZoneName',
+  )?.value;
+  return timezoneName;
+}

src/components/account-block.css

@@ -29,6 +29,8 @@
     line-clamp: 1;
     text-overflow: ellipsis;
     overflow: hidden;
+    unicode-bidi: isolate;
+    direction: initial;
   }
 
   a {

src/components/account-block.jsx

@@ -1,5 +1,7 @@
 import './account-block.css';
 
+import { Plural, Trans, useLingui } from '@lingui/react/macro';
+
 // import { useNavigate } from 'react-router-dom';
 import enhanceContent from '../utils/enhance-content';
 import niceDateTime from '../utils/nice-date-time';
@@ -9,6 +11,7 @@ import states from '../utils/states';
 import Avatar from './avatar';
 import EmojiText from './emoji-text';
 import Icon from './icon';
+import RolesTags from './roles-tags';
 
 function AccountBlock({
   skeleton,
@@ -26,6 +29,7 @@ function AccountBlock({
   relationship = {},
   excludeRelationshipAttrs = [],
 }) {
+  const { t } = useLingui();
   if (skeleton) {
     return (
       <div class="account-block skeleton">
@@ -33,7 +37,7 @@ function AccountBlock({
         <span>
           <b>████████</b>
           <br />
-          <span class="account-block-acct">@██████</span>
+          <span class="account-block-acct">██████</span>
         </span>
       </div>
     );
@@ -61,6 +65,9 @@ function AccountBlock({
     note,
     group,
     followersCount,
+    createdAt,
+    locked,
+    roles,
   } = account;
   let [_, acct1, acct2] = acct.match(/([^@]+)(@.+)/i) || [, acct];
   if (accountInstance) {
@@ -85,7 +92,7 @@ function AccountBlock({
       class="account-block"
       href={url}
       target={external ? '_blank' : null}
-      title={`@${acct}`}
+      title={acct2 ? acct : `@${acct}`}
       onClick={(e) => {
         if (external) return;
         e.preventDefault();
@@ -101,11 +108,14 @@ function AccountBlock({
         }
       }}
     >
-      <Avatar
-        url={useAvatarStatic ? avatarStatic : avatar || avatarStatic}
-        size={avatarSize}
-        squircle={bot}
-      />
+      <div class="avatar-container">
+        <Avatar
+          url={useAvatarStatic ? avatarStatic : avatar || avatarStatic}
+          staticUrl={useAvatarStatic ? undefined : avatarStatic}
+          size={avatarSize}
+          squircle={bot}
+        />
+      </div>
       <span class="account-block-content">
         {!hideDisplayName && (
           <>
@@ -118,41 +128,49 @@ function AccountBlock({
             )}
           </>
         )}{' '}
-        <span class="account-block-acct">
-          @{acct1}
+        <span class="account-block-acct bidi-isolate">
+          {acct2 ? '' : '@'}
+          {acct1}
           <wbr />
           {acct2}
+          {locked && (
+            <>
+              {' '}
+              <Icon icon="lock" size="s" alt={t`Locked`} />
+            </>
+          )}
         </span>
+        <RolesTags roles={roles} accountUrl={url} />
         {showActivity && (
-          <>
-            <br />
-            <small class="last-status-at insignificant">
-              Posts: {statusesCount}
-              {!!lastStatusAt && (
-                <>
-                  {' '}
-                  &middot; Last posted:{' '}
+          <div class="account-block-stats">
+            <Trans>Posts: {shortenNumber(statusesCount)}</Trans>
+            {!!lastStatusAt && (
+              <>
+                {' '}
+                &middot;{' '}
+                <Trans>
+                  Last posted:{' '}
                   {niceDateTime(lastStatusAt, {
                     hideTime: true,
                   })}
-                </>
-              )}
-            </small>
-          </>
+                </Trans>
+              </>
+            )}
+          </div>
         )}
         {showStats && (
           <div class="account-block-stats">
             {bot && (
               <>
                 <span class="tag collapsed">
-                  <Icon icon="bot" /> Automated
+                  <Icon icon="bot" /> <Trans>Automated</Trans>
                 </span>
               </>
             )}
             {!!group && (
               <>
                 <span class="tag collapsed">
-                  <Icon icon="group" /> Group
+                  <Icon icon="group" /> <Trans>Group</Trans>
                 </span>
               </>
             )}
@@ -161,26 +179,37 @@ function AccountBlock({
                 <div class="shazam-container-inner">
                   {excludedRelationship.following &&
                   excludedRelationship.followedBy ? (
-                    <span class="tag minimal">Mutual</span>
+                    <span class="tag minimal">
+                      <Trans>Mutual</Trans>
+                    </span>
                   ) : excludedRelationship.requested ? (
-                    <span class="tag minimal">Requested</span>
+                    <span class="tag minimal">
+                      <Trans>Requested</Trans>
+                    </span>
                   ) : excludedRelationship.following ? (
-                    <span class="tag minimal">Following</span>
+                    <span class="tag minimal">
+                      <Trans>Following</Trans>
+                    </span>
                   ) : excludedRelationship.followedBy ? (
-                    <span class="tag minimal">Follows you</span>
+                    <span class="tag minimal">
+                      <Trans>Follows you</Trans>
+                    </span>
                   ) : null}
                 </div>
               </div>
             )}
             {!!followersCount && (
               <span class="ib">
-                {shortenNumber(followersCount)}{' '}
-                {followersCount === 1 ? 'follower' : 'followers'}
+                <Plural
+                  value={followersCount}
+                  one="# follower"
+                  other="# followers"
+                />
               </span>
             )}
             {!!verifiedField && (
               <span class="verified-field">
-                <Icon icon="check-circle" size="s" />{' '}
+                <Icon icon="check-circle" size="s" alt={t`Verified`} />{' '}
                 <span
                   dangerouslySetInnerHTML={{
                     __html: enhanceContent(verifiedField.value, { emojis }),
@@ -188,6 +217,23 @@ function AccountBlock({
                 />
               </span>
             )}
+            {!bot &&
+              !group &&
+              !hasRelationship &&
+              !followersCount &&
+              !verifiedField &&
+              !!createdAt && (
+                <span class="created-at">
+                  <Trans>
+                    Joined{' '}
+                    <time datetime={createdAt}>
+                      {niceDateTime(createdAt, {
+                        hideTime: true,
+                      })}
+                    </time>
+                  </Trans>
+                </span>
+              )}
           </div>
         )}
       </span>

src/components/account-handle-info.jsx

@@ -0,0 +1,29 @@
+import { Trans } from '@lingui/react/macro';
+import punycode from 'punycode/';
+
+function AccountHandleInfo({ acct, instance }) {
+  // acct = username or username@server
+  let [username, server] = acct.split('@');
+  if (!server) server = instance;
+  const encodedAcct = punycode.toASCII(acct);
+  return (
+    <div class="handle-info">
+      <span class="handle-handle" title={encodedAcct}>
+        <b class="handle-username">{username}</b>
+        <span class="handle-at">@</span>
+        <b class="handle-server">{server}</b>
+      </span>
+      <div class="handle-legend">
+        <span class="ib">
+          <span class="handle-legend-icon username" /> <Trans>username</Trans>
+        </span>{' '}
+        <span class="ib">
+          <span class="handle-legend-icon server" />{' '}
+          <Trans>server domain name</Trans>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default AccountHandleInfo;

src/components/account-info.css

@@ -9,11 +9,15 @@
   --original-color: var(--link-color);
 
   .note {
-    font-size: 95%;
+    font-size: 0.95em;
     line-height: 1.4;
     text-wrap: pretty;
     margin-bottom: 16px;
 
+    &:empty {
+      display: none;
+    }
+
     > *:first-child {
       margin-top: 0;
       padding-top: 0;
@@ -47,13 +51,14 @@
     border-radius: var(--posting-stats-size);
     overflow: hidden;
     margin: 8px 0;
-    box-shadow: inset 0 0 0 1px var(--outline-color),
+    box-shadow:
+      inset 0 0 0 1px var(--outline-color),
       inset 0 0 0 1.5px var(--bg-blur-color);
     background-color: var(--bg-color);
     background-repeat: no-repeat;
     animation: swoosh-bg-image 0.3s ease-in-out 0.3s both;
     background-image: linear-gradient(
-      to right,
+      var(--to-forward),
       var(--original-color) 0%,
       var(--original-color) calc(var(--originals-percentage) - var(--gap)),
       var(--gap-color) calc(var(--originals-percentage) - var(--gap)),
@@ -62,7 +67,11 @@
       var(--reply-to-color) calc(var(--replies-percentage) - var(--gap)),
       var(--gap-color) calc(var(--replies-percentage) - var(--gap)),
       var(--gap-color) calc(var(--replies-percentage) + var(--gap)),
-      var(--reblog-color) calc(var(--replies-percentage) + var(--gap)),
+      var(--quote-color) calc(var(--replies-percentage) + var(--gap)),
+      var(--quote-color) calc(var(--quotes-percentage, 0%) - var(--gap)),
+      var(--gap-color) calc(var(--quotes-percentage, 0%) - var(--gap)),
+      var(--gap-color) calc(var(--quotes-percentage, 0%) + var(--gap)),
+      var(--reblog-color) calc(var(--quotes-percentage, 0%) + var(--gap)),
       var(--reblog-color) 100%
     );
   }
@@ -81,7 +90,8 @@
     vertical-align: middle;
     margin: 0 4px 2px;
     /* border: 1px solid var(--outline-color); */
-    box-shadow: inset 0 0 0 1px var(--outline-color),
+    box-shadow:
+      inset 0 0 0 1px var(--outline-color),
       inset 0 0 0 1.5px var(--bg-blur-color);
 
     &.posting-stats-legend-item-originals {
@@ -90,6 +100,9 @@
     &.posting-stats-legend-item-replies {
       background-color: var(--reply-to-color);
     }
+    &.posting-stats-legend-item-quotes {
+      background-color: var(--quote-color);
+    }
     &.posting-stats-legend-item-boosts {
       background-color: var(--reblog-color);
     }
@@ -177,8 +190,8 @@
   opacity: 1;
 }
 .sheet .account-container .header-banner {
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+  border-start-start-radius: 16px;
+  border-start-end-radius: 16px;
 }
 .account-container .header-banner.header-is-avatar {
   mask-image: linear-gradient(
@@ -213,13 +226,13 @@
     background-image: none;
   }
 
-  & + header .avatar + * {
+  & + header .avatar-container + * {
     transition: opacity 0.3s ease-in-out;
     opacity: 0 !important;
   }
 
   &,
-  & + header .avatar {
+  & + header .avatar-container {
     transition: filter 0.3s ease-in-out;
     filter: none !important;
   }
@@ -242,20 +255,27 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  text-shadow: -8px 0 12px -6px var(--bg-color), 8px 0 12px -6px var(--bg-color),
+  text-shadow:
+    -8px 0 12px -6px var(--bg-color),
+    8px 0 12px -6px var(--bg-color),
     -8px 0 24px var(--header-color-3, --bg-color),
     8px 0 24px var(--header-color-4, --bg-color);
   animation: fade-in 0.3s both ease-in-out 0.1s;
-}
-.account-container header .avatar {
-  /* box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
+
+  .avatar-container {
+    filter: drop-shadow(-2px 0 4px var(--header-color-3, --bg-color))
+      drop-shadow(2px 0 4px var(--header-color-4, --bg-color));
+  }
+
+  .avatar {
+    /* box-shadow: -8px 0 24px var(--header-color-3, --bg-color),
     8px 0 24px var(--header-color-4, --bg-color); */
-  overflow: initial;
-  filter: drop-shadow(-2px 0 4px var(--header-color-3, --bg-color))
-    drop-shadow(2px 0 4px var(--header-color-4, --bg-color));
-}
-.account-container header .avatar:not(.has-alpha) img {
-  border-radius: inherit;
+    /* overflow: initial; */
+
+    &:not(.has-alpha) img {
+      border-radius: inherit;
+    }
+  }
 }
 
 .account-container main > *:first-child {
@@ -284,10 +304,17 @@
   align-self: center !important;
   /* clip a dog ear on top right */
   clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
+  &:dir(rtl) {
+    /* top left */
+    clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px);
+  }
   /* 4x4px square on top right */
   background-size: 4px 4px;
   background-repeat: no-repeat;
   background-position: top right;
+  &:dir(rtl) {
+    background-position: top left;
+  }
   background-image: linear-gradient(
     to bottom,
     var(--private-note-border-color),
@@ -307,7 +334,7 @@
     box-orient: vertical;
     -webkit-line-clamp: 2;
     line-clamp: 2;
-    text-align: left;
+    text-align: start;
   }
 
   &:hover:not(:active) {
@@ -366,7 +393,8 @@
     animation: appear 1s both ease-in-out;
 
     > *:not(:first-child) {
-      margin: 0 0 0 -4px;
+      margin: 0;
+      margin-inline-start: -4px;
     }
   }
 }
@@ -374,7 +402,6 @@
   flex-wrap: wrap;
 }
 .account-container .stats > * {
-  /* text-align: center; */
   flex-shrink: 0;
   display: flex;
   gap: 0.5em;
@@ -418,15 +445,15 @@
   }
 
   &:has(+ .account-metadata-box) {
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
+    border-end-start-radius: 4px;
+    border-end-end-radius: 4px;
   }
 
   + .account-metadata-box {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border-bottom-left-radius: 16px;
-    border-bottom-right-radius: 16px;
+    border-start-start-radius: 4px;
+    border-start-end-radius: 4px;
+    border-end-start-radius: 16px;
+    border-end-end-radius: 16px;
   }
 }
 
@@ -573,7 +600,7 @@
     margin-top: calc(-1 * var(--banner-overlap));
   }
 
-  @supports (animation-timeline: scroll()) {
+  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
     .header-banner:not(.header-is-avatar):not(:hover):not(:active) {
       animation: bye-banner 1s linear both;
       animation-timeline: view();
@@ -726,11 +753,11 @@
     --shadow-offset: 16px;
     --shadow-blur: 32px;
     --shadow-spread: calc(var(--shadow-blur) * -0.75);
-    box-shadow: calc(var(--shadow-offset) * -1) var(--shadow-offset)
-        var(--shadow-blur) var(--shadow-spread)
-        var(--header-color-1, var(--drop-shadow-color)),
+    box-shadow:
+      calc(var(--shadow-offset) * -1) var(--shadow-offset) var(--shadow-blur)
+      var(--shadow-spread) var(--header-color-1, var(--drop-shadow-color)),
       var(--shadow-offset) var(--shadow-offset) var(--shadow-blur)
-        var(--shadow-spread) var(--header-color-2, var(--drop-shadow-color));
+      var(--shadow-spread) var(--header-color-2, var(--drop-shadow-color));
   }
   /* .timeline-start .account-container .header-banner {
     margin-bottom: -77px;
@@ -742,12 +769,16 @@
     letter-spacing: -0.5px;
     mix-blend-mode: multiply;
     gap: 12px;
-  }
-  .timeline-start .account-container header .account-block .avatar {
-    width: 112px !important;
-    height: 112px !important;
-    filter: drop-shadow(-8px 0 8px var(--header-color-3, --bg-color))
-      drop-shadow(8px 0 8px var(--header-color-4, --bg-color));
+
+    .avatar-container {
+      filter: drop-shadow(-8px 0 8px var(--header-color-3, --bg-color))
+        drop-shadow(8px 0 8px var(--header-color-4, --bg-color));
+    }
+
+    .avatar {
+      width: 112px !important;
+      height: 112px !important;
+    }
   }
 }
 
@@ -777,3 +808,282 @@
     }
   }
 }
+
+#edit-profile-container {
+  p {
+    margin-block: 8px;
+  }
+
+  label {
+    input:not([type='file']),
+    textarea {
+      display: block;
+      width: 100%;
+    }
+
+    textarea {
+      resize: vertical;
+      min-height: 5em;
+      max-height: 50vh;
+    }
+  }
+
+  .edit-profile-media-container {
+    margin-block: 8px;
+  }
+
+  .edit-profile-media-field {
+    display: grid;
+    grid-template-columns: 80px 2em 80px;
+    gap: 8px;
+    margin-top: 8px;
+    align-items: center;
+    justify-items: center;
+
+    .icon {
+      opacity: 0.75;
+    }
+
+    .edit-media {
+      width: 80px;
+      height: 80px;
+      border-radius: 4px;
+      overflow: hidden;
+      border: 1px solid var(--outline-color);
+      /* checkerboard background */
+      background-image:
+        linear-gradient(45deg, var(--img-bg-color) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%);
+      background-size: 10px 10px;
+      background-position:
+        0 0,
+        0 5px,
+        5px -5px,
+        -5px 0px;
+
+      &:hover {
+        box-shadow: 0 0 0 2px var(--link-light-color);
+        cursor: pointer;
+      }
+
+      img {
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+        vertical-align: top;
+      }
+    }
+  }
+
+  table {
+    width: 100%;
+
+    th {
+      text-align: start;
+      color: var(--text-insignificant-color);
+      font-weight: normal;
+      font-size: 0.8em;
+      text-transform: uppercase;
+    }
+
+    tbody tr td:first-child {
+      width: 40%;
+    }
+
+    input {
+      width: 100%;
+    }
+  }
+
+  footer {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+
+    * {
+      vertical-align: middle;
+    }
+  }
+}
+
+.handle-info {
+  .handle-handle {
+    display: inline-block;
+    margin-block: 5px;
+
+    b {
+      font-weight: 600;
+      padding: 2px 4px;
+      border-radius: 4px;
+      display: inline-block;
+      box-shadow: 0 0 0 5px var(--bg-blur-color);
+
+      &.handle-username {
+        color: var(--orange-fg-color);
+        background-color: var(--orange-bg-color);
+      }
+
+      &.handle-server {
+        color: var(--purple-fg-color);
+        background-color: var(--purple-bg-color);
+      }
+    }
+  }
+
+  .handle-at {
+    display: inline-block;
+    margin-inline: -3px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .handle-legend {
+    margin-top: 0.25em;
+  }
+
+  .handle-legend-icon {
+    overflow: hidden;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border: 4px solid transparent;
+    border-radius: 8px;
+    background-clip: padding-box;
+
+    &.username {
+      background-color: var(--orange-fg-color);
+      border-color: var(--orange-bg-color);
+    }
+    &.server {
+      background-color: var(--purple-fg-color);
+      border-color: var(--purple-bg-color);
+    }
+  }
+}
+
+.endorsements-container {
+  padding: 16px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  /* background-image: linear-gradient(
+    to bottom,
+    var(--bg-faded-color),
+    var(--bg-color) calc(16px + 1em)
+  ); */
+  background-image: radial-gradient(
+    ellipse at top center,
+    var(--bg-faded-color),
+    var(--bg-color)
+  );
+  background-size: 100% 32px;
+  background-repeat: no-repeat;
+  mask-image: linear-gradient(
+    var(--to-forward),
+    transparent,
+    black 16px calc(100% - 16px),
+    transparent
+  );
+
+  h3 {
+    margin: 0;
+    padding: 0 0 8px;
+    font-weight: normal;
+    color: var(--text-insignificant-color);
+    font-size: 85%;
+    position: sticky;
+    left: 0;
+    text-transform: uppercase;
+    font-weight: 600;
+
+    > * {
+      vertical-align: text-bottom;
+    }
+  }
+
+  .endorsements {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    /* grid: 2 rows, infinite columns, no wrap */
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: repeat(2, auto);
+    grid-template-columns: repeat(9999, clamp(160px, 90%, 320px));
+    white-space: nowrap;
+    gap: 8px;
+
+    &.expanded {
+      grid-template-rows: repeat(3, auto);
+    }
+
+    > li {
+      display: flex;
+    }
+
+    .account-block {
+      overflow: hidden;
+      flex-grow: 1;
+      padding: 8px 16px;
+      background-color: var(--bg-faded-color);
+      background-image: linear-gradient(
+        15deg,
+        var(--link-bg-color),
+        var(--bg-faded-color) 8px calc(100% - 16px),
+        var(--bg-color)
+      );
+      &:dir(rtl) {
+        background-image: linear-gradient(
+          -15deg,
+          var(--link-bg-color),
+          var(--bg-faded-color) 16px calc(100% - 16px),
+          var(--bg-color)
+        );
+      }
+      /* box-shadow: inset 0 0 0 2px var(--bg-color); */
+      border-radius: 8px;
+      transition: all 0.15s ease-out;
+
+      .avatar {
+        transition: transform 0.15s ease-out;
+      }
+
+      .account-block-content {
+        min-width: 0;
+        mask-image: linear-gradient(
+          var(--to-backward),
+          transparent,
+          black 16px
+        );
+      }
+
+      .account-block-stats {
+        flex-wrap: nowrap;
+
+        > * {
+          flex-shrink: 0;
+        }
+      }
+
+      &:is(:hover, :focus-visible) {
+        background-color: var(--link-bg-hover-color);
+        box-shadow: inset 0 0 0 2px var(--link-light-color);
+
+        .avatar {
+          transform: rotate(15deg);
+        }
+      }
+
+      &:active {
+        transition-duration: 0s;
+        filter: brightness(0.8);
+      }
+
+      .tag.minimal {
+        background-color: var(--bg-color);
+      }
+    }
+  }
+}

src/components/account-sheet.jsx

@@ -1,3 +1,4 @@
+import { useLingui } from '@lingui/react/macro';
 import { useEffect } from 'preact/hooks';
 
 import { api } from '../utils/api';
@@ -8,6 +9,7 @@ import AccountInfo from './account-info';
 import Icon from './icon';
 
 function AccountSheet({ account, instance: propInstance, onClose }) {
+  const { t } = useLingui();
   const { masto, instance, authenticated } = api({ instance: propInstance });
   const isString = typeof account === 'string';
 
@@ -33,7 +35,7 @@ function AccountSheet({ account, instance: propInstance, onClose }) {
     >
       {!!onClose && (
         <button type="button" class="sheet-close outer" onClick={onClose}>
-          <Icon icon="x" />
+          <Icon icon="x" alt={t`Close`} />
         </button>
       )}
       <AccountInfo
@@ -49,25 +51,37 @@ function AccountSheet({ account, instance: propInstance, onClose }) {
               });
               return info;
             } catch (e) {
-              const result = await masto.v2.search.fetch({
+              const result = await masto.v2.search.list({
                 q: account,
                 type: 'accounts',
-                limit: 1,
+                limit: authenticated ? 1 : 11, // Magic number
                 resolve: authenticated,
               });
               if (result.accounts.length) {
-                return result.accounts[0];
-              } else if (/https?:\/\/[^/]+\/@/.test(account)) {
-                const accountURL = new URL(account);
-                const acct = accountURL.pathname.replace(/^\//, '');
-                const result = await masto.v2.search.fetch({
-                  q: acct,
-                  type: 'accounts',
-                  limit: 1,
-                  resolve: authenticated,
-                });
-                if (result.accounts.length) {
-                  return result.accounts[0];
+                const accountWithSameString = result.accounts.find(
+                  (a) => a.url === account || account.startsWith(a.url),
+                );
+                if (accountWithSameString) {
+                  return accountWithSameString;
+                }
+              }
+              if (/^https?:\/\/[^/]+\/@[^/]+$/.test(account)) {
+                const accountURL = URL.parse(account);
+                if (accountURL) {
+                  const { hostname, pathname } = accountURL;
+                  const acct =
+                    pathname.replace(/^\//, '').replace(/\/$/, '') +
+                    '@' +
+                    hostname;
+                  const result = await masto.v2.search.list({
+                    q: acct,
+                    type: 'accounts',
+                    limit: 1,
+                    resolve: authenticated,
+                  });
+                  if (result.accounts.length) {
+                    return result.accounts[0];
+                  }
                 }
               }
             }

src/components/add-remove-lists-sheet.jsx

@@ -0,0 +1,152 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useEffect, useReducer, useState } from 'preact/hooks';
+
+import { api } from '../utils/api';
+import { getLists } from '../utils/lists';
+
+import Icon from './icon';
+import ListAddEdit from './list-add-edit';
+import Loader from './loader';
+import Modal from './modal';
+
+function AddRemoveListsSheet({ accountID, onClose }) {
+  const { t } = useLingui();
+  const { masto } = api();
+  const [uiState, setUIState] = useState('default');
+  const [lists, setLists] = useState([]);
+  const [listsContainingAccount, setListsContainingAccount] = useState([]);
+  const [reloadCount, reload] = useReducer((c) => c + 1, 0);
+
+  useEffect(() => {
+    setUIState('loading');
+    (async () => {
+      try {
+        const lists = await getLists();
+        setLists(lists);
+        const listsContainingAccount = await masto.v1.accounts
+          .$select(accountID)
+          .lists.list();
+        console.log({ lists, listsContainingAccount });
+        setListsContainingAccount(listsContainingAccount);
+        setUIState('default');
+      } catch (e) {
+        console.error(e);
+        setUIState('error');
+      }
+    })();
+  }, [reloadCount]);
+
+  const [showListAddEditModal, setShowListAddEditModal] = useState(false);
+
+  return (
+    <div class="sheet" id="list-add-remove-container">
+      {!!onClose && (
+        <button type="button" class="sheet-close" onClick={onClose}>
+          <Icon icon="x" alt={t`Close`} />
+        </button>
+      )}
+      <header>
+        <h2>
+          <Trans>Add/Remove from Lists</Trans>
+        </h2>
+      </header>
+      <main>
+        {lists.length > 0 ? (
+          <ul class="list-add-remove">
+            {lists.map((list) => {
+              const inList = listsContainingAccount.some(
+                (l) => l.id === list.id,
+              );
+              return (
+                <li>
+                  <button
+                    type="button"
+                    class={`light ${inList ? 'checked' : ''}`}
+                    disabled={uiState === 'loading'}
+                    onClick={() => {
+                      setUIState('loading');
+                      (async () => {
+                        try {
+                          if (inList) {
+                            await masto.v1.lists
+                              .$select(list.id)
+                              .accounts.remove({
+                                accountIds: [accountID],
+                              });
+                          } else {
+                            await masto.v1.lists
+                              .$select(list.id)
+                              .accounts.create({
+                                accountIds: [accountID],
+                              });
+                          }
+                          // setUIState('default');
+                          reload();
+                        } catch (e) {
+                          console.error(e);
+                          setUIState('error');
+                          alert(
+                            inList
+                              ? t`Unable to remove from list.`
+                              : t`Unable to add to list.`,
+                          );
+                        }
+                      })();
+                    }}
+                  >
+                    <Icon icon="check-circle" alt="☑️" />
+                    <span>{list.title}</span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        ) : uiState === 'loading' ? (
+          <p class="ui-state">
+            <Loader abrupt />
+          </p>
+        ) : uiState === 'error' ? (
+          <p class="ui-state">
+            <Trans>Unable to load lists.</Trans>
+          </p>
+        ) : (
+          <p class="ui-state">
+            <Trans>No lists.</Trans>
+          </p>
+        )}
+        <button
+          type="button"
+          class="plain2"
+          onClick={() => setShowListAddEditModal(true)}
+          disabled={uiState !== 'default'}
+        >
+          <Icon icon="plus" size="l" />{' '}
+          <span>
+            <Trans>New list</Trans>
+          </span>
+        </button>
+      </main>
+      {showListAddEditModal && (
+        <Modal
+          onClick={(e) => {
+            if (e.target === e.currentTarget) {
+              setShowListAddEditModal(false);
+            }
+          }}
+        >
+          <ListAddEdit
+            list={showListAddEditModal?.list}
+            onClose={(result) => {
+              if (result.state === 'success') {
+                reload();
+              }
+              setShowListAddEditModal(false);
+            }}
+          />
+        </Modal>
+      )}
+    </div>
+  );
+}
+
+export default AddRemoveListsSheet;

src/components/avatar.css

@@ -1,13 +1,14 @@
 .avatar {
   display: inline-block;
   line-height: 0;
-  aspect-ratio: 1/1;
+  aspect-ratio: 1 / 1;
   border-radius: 50%;
   overflow: hidden;
   background-color: var(--bg-faded-color);
   box-shadow: 0 0 0 1px var(--bg-blur-color);
   flex-shrink: 0;
   vertical-align: middle;
+  dynamic-range-limit: standard; /* Disable HDR */
 
   &.has-alpha {
     border-radius: 0;

src/components/avatar.jsx

@@ -21,13 +21,16 @@ const canvas = window.OffscreenCanvas
 const ctx = canvas.getContext('2d', {
   willReadFrequently: true,
 });
+ctx.imageSmoothingEnabled = false;
 
-function Avatar({ url, size, alt = '', squircle, ...props }) {
+const MISSING_IMAGE_PATH_REGEX = /missing\.png$/;
+
+function Avatar({ url, staticUrl, size, alt = '', squircle, ...props }) {
   size = SIZES[size] || size || SIZES.m;
   const avatarRef = useRef();
-  const isMissing = /missing\.png$/.test(url);
+  const isMissing = MISSING_IMAGE_PATH_REGEX.test(url);
   return (
-    <span
+    <picture
       ref={avatarRef}
       class={`avatar ${squircle ? 'squircle' : ''} ${
         alphaCache[url] ? 'has-alpha' : ''
@@ -39,6 +42,9 @@ function Avatar({ url, size, alt = '', squircle, ...props }) {
       title={alt}
       {...props}
     >
+      {!!staticUrl && (
+        <source srcset={staticUrl} media="(prefers-reduced-motion: reduce)" />
+      )}
       {!!url && (
         <img
           src={url}
@@ -47,6 +53,7 @@ function Avatar({ url, size, alt = '', squircle, ...props }) {
           alt={alt}
           loading="lazy"
           decoding="async"
+          fetchPriority="low"
           crossOrigin={
             alphaCache[url] === undefined && !isMissing
               ? 'anonymous'
@@ -62,7 +69,7 @@ function Avatar({ url, size, alt = '', squircle, ...props }) {
             if (avatarRef.current) avatarRef.current.dataset.loaded = true;
             if (alphaCache[url] !== undefined) return;
             if (isMissing) return;
-            queueMicrotask(() => {
+            setTimeout(() => {
               try {
                 // Check if image has alpha channel
                 const { width, height } = e.target;
@@ -87,11 +94,11 @@ function Avatar({ url, size, alt = '', squircle, ...props }) {
                 // Silent fail
                 alphaCache[url] = false;
               }
-            });
+            }, 1);
           }}
         />
       )}
-    </span>
+    </picture>
   );
 }
 

src/components/background-service.jsx

@@ -1,3 +1,4 @@
+import { useLingui } from '@lingui/react/macro';
 import { memo } from 'preact/compat';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -9,19 +10,34 @@ import useInterval from '../utils/useInterval';
 import usePageVisibility from '../utils/usePageVisibility';
 
 const STREAMING_TIMEOUT = 1000 * 3; // 3 seconds
-const POLL_INTERVAL = 15_000; // 15 seconds
+const POLL_INTERVAL = 20_000; // 20 seconds
 
 export default memo(function BackgroundService({ isLoggedIn }) {
+  const { t } = useLingui();
+
   // Notifications service
   // - WebSocket to receive notifications when page is visible
   const [visible, setVisible] = useState(true);
-  usePageVisibility(setVisible);
+  const visibleTimeout = useRef();
+  usePageVisibility((visible) => {
+    clearTimeout(visibleTimeout.current);
+    if (visible) {
+      setVisible(true);
+    } else {
+      visibleTimeout.current = setTimeout(() => {
+        setVisible(false);
+      }, POLL_INTERVAL);
+    }
+  });
+
   const checkLatestNotification = async (masto, instance, skipCheckMarkers) => {
     if (states.notificationsLast) {
-      const notificationsIterator = masto.v1.notifications.list({
-        limit: 1,
-        sinceId: states.notificationsLast.id,
-      });
+      const notificationsIterator = masto.v1.notifications
+        .list({
+          limit: 1,
+          sinceId: states.notificationsLast.id,
+        })
+        .values();
       const { value: notifications } = await notificationsIterator.next();
       if (notifications?.length) {
         if (skipCheckMarkers) {
@@ -46,6 +62,7 @@ export default memo(function BackgroundService({ isLoggedIn }) {
 
   useEffect(() => {
     let sub;
+    let streamTimeout;
     let pollNotifications;
     if (isLoggedIn && visible) {
       const { masto, streaming, instance } = api();
@@ -56,7 +73,7 @@ export default memo(function BackgroundService({ isLoggedIn }) {
         let hasStreaming = false;
         // 2. Start streaming
         if (streaming) {
-          pollNotifications = setTimeout(() => {
+          streamTimeout = setTimeout(() => {
             (async () => {
               try {
                 hasStreaming = true;
@@ -94,7 +111,7 @@ export default memo(function BackgroundService({ isLoggedIn }) {
     return () => {
       sub?.unsubscribe?.();
       sub = null;
-      clearTimeout(pollNotifications);
+      clearTimeout(streamTimeout);
       clearInterval(pollNotifications);
     };
   }, [visible, isLoggedIn]);
@@ -129,13 +146,23 @@ export default memo(function BackgroundService({ isLoggedIn }) {
   });
 
   // Global keyboard shortcuts "service"
-  useHotkeys('shift+alt+k', () => {
-    const currentCloakMode = states.settings.cloakMode;
-    states.settings.cloakMode = !currentCloakMode;
-    showToast({
-      text: `Cloak mode ${currentCloakMode ? 'disabled' : 'enabled'}`,
-    });
-  });
+  useHotkeys(
+    'shift+alt+k',
+    (e) => {
+      // Need modifers check due to useKey: true
+      if (!e.shiftKey || !e.altKey) return;
+
+      const currentCloakMode = states.settings.cloakMode;
+      states.settings.cloakMode = !currentCloakMode;
+      showToast({
+        text: currentCloakMode ? t`Cloak mode disabled` : t`Cloak mode enabled`,
+      });
+    },
+    {
+      useKey: true,
+      ignoreEventWhen: (e) => e.metaKey || e.ctrlKey,
+    },
+  );
 
   return null;
 });

src/components/byline.jsx

@@ -0,0 +1,26 @@
+import { Trans } from '@lingui/react/macro';
+
+import Icon from './icon';
+import NameText from './name-text';
+
+function Byline({ authors, hidden, children }) {
+  if (hidden) return children;
+  if (!authors?.[0]?.account?.id) return children;
+  const author = authors[0].account;
+
+  return (
+    <div class="card-byline">
+      {children}
+      <div class="card-byline-author">
+        <Icon icon="link" size="s" />{' '}
+        <small>
+          <Trans comment="More from [Author]">
+            More from <NameText account={author} showAvatar />
+          </Trans>
+        </small>
+      </div>
+    </div>
+  );
+}
+
+export default Byline;

src/components/camera-capture-input.jsx

@@ -0,0 +1,52 @@
+const isMobileSafari =
+  /iPad|iPhone|iPod/.test(navigator.userAgent) &&
+  /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+function CameraCaptureInput({
+  hidden,
+  disabled = false,
+  supportedMimeTypes,
+  setMediaAttachments,
+}) {
+  // If not Mobile Safari, only apply image/*
+  // Chrome Android doesn't show the camera if image and video combined
+  // It also can't switch between photo and video mode like iOS/Safari
+  const filteredSupportedMimeTypes = isMobileSafari
+    ? supportedMimeTypes
+    : supportedMimeTypes?.filter((mimeType) => !/^image\//i.test(mimeType));
+
+  return (
+    <input
+      type="file"
+      hidden={hidden}
+      accept={filteredSupportedMimeTypes?.join(',')}
+      capture="environment"
+      disabled={disabled}
+      onChange={(e) => {
+        const files = e.target.files;
+        if (!files) return;
+        const mediaFile = Array.from(files)[0];
+        if (!mediaFile) return;
+        setMediaAttachments((attachments) => [
+          ...attachments,
+          {
+            file: mediaFile,
+            type: mediaFile.type,
+            size: mediaFile.size,
+            url: URL.createObjectURL(mediaFile),
+            id: null, // indicate uploaded state
+            description: null,
+          },
+        ]);
+        e.target.value = null;
+      }}
+    />
+  );
+}
+
+export const supportsCameraCapture = (() => {
+  const input = document.createElement('input');
+  return 'capture' in input;
+})();
+
+export default CameraCaptureInput;

src/components/char-count-meter.jsx

@@ -0,0 +1,38 @@
+import { useSnapshot } from 'valtio';
+
+import states from '../utils/states';
+
+function CharCountMeter({ maxCharacters = 500, hidden }) {
+  const snapStates = useSnapshot(states);
+  const charCount = snapStates.composerCharacterCount;
+  const leftChars = maxCharacters - charCount;
+  if (hidden) {
+    return <span class="char-counter" hidden />;
+  }
+  return (
+    <span
+      class="char-counter"
+      title={`${leftChars}/${maxCharacters}`}
+      style={{
+        '--percentage': (charCount / maxCharacters) * 100,
+      }}
+    >
+      <meter
+        class={`${
+          leftChars <= -10
+            ? 'explode'
+            : leftChars <= 0
+              ? 'danger'
+              : leftChars <= 20
+                ? 'warning'
+                : ''
+        }`}
+        value={charCount}
+        max={maxCharacters}
+      />
+      <span class="counter">{leftChars}</span>
+    </span>
+  );
+}
+
+export default CharCountMeter;

src/components/columns.jsx

@@ -1,3 +1,4 @@
+import { useLingui } from '@lingui/react/macro';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSnapshot } from 'valtio';
 
@@ -11,11 +12,19 @@ import Notifications from '../pages/notifications';
 import Public from '../pages/public';
 import Search from '../pages/search';
 import Trending from '../pages/trending';
+import isRTL from '../utils/is-rtl';
 import states from '../utils/states';
 import useTitle from '../utils/useTitle';
 
+const scrollIntoViewOptions = {
+  block: 'nearest',
+  inline: 'nearest',
+  behavior: 'smooth',
+};
+
 function Columns() {
-  useTitle('Home', '/');
+  const { t } = useLingui();
+  useTitle(t`Home`, '/');
   const snapStates = useSnapshot(states);
   const { shortcuts } = snapStates;
 
@@ -39,19 +48,66 @@ function Columns() {
     if (!Component) return null;
     // Don't show Search column with no query, for now
     if (type === 'search' && !params.query) return null;
+    // Don't show List column with no list, for now
+    if (type === 'list' && !params.id) return null;
     return (
       <Component key={type + JSON.stringify(params)} {...params} columnMode />
     );
   });
 
-  useHotkeys(['1', '2', '3', '4', '5', '6', '7', '8', '9'], (e, handler) => {
-    try {
-      const index = parseInt(handler.keys[0], 10) - 1;
-      document.querySelectorAll('#columns > *')[index].focus();
-    } catch (e) {
-      console.error(e);
-    }
-  });
+  useHotkeys(
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
+    (e) => {
+      try {
+        const index = parseInt(e.key, 10) - 1;
+        const $column = document.querySelectorAll('#columns > *')[index];
+        if ($column) {
+          $column.focus();
+          $column.scrollIntoView(scrollIntoViewOptions);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    },
+    {
+      useKey: true,
+      ignoreEventWhen: (e) => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey,
+    },
+  );
+
+  useHotkeys(
+    ['[', ']'],
+    (e, handler) => {
+      const key = handler.keys[0];
+      const currentFocusedColumn =
+        document.activeElement.closest('#columns > *');
+
+      const rtl = isRTL();
+      const prevColKey = rtl ? ']' : '[';
+      const nextColKey = rtl ? '[' : ']';
+      let $column;
+
+      if (key === prevColKey) {
+        // If [, focus on left of focused column, else first column
+        $column = currentFocusedColumn
+          ? currentFocusedColumn.previousElementSibling
+          : document.querySelectorAll('#columns > *')[0];
+      } else if (key === nextColKey) {
+        // If ], focus on right of focused column, else 2nd column
+        $column = currentFocusedColumn
+          ? currentFocusedColumn.nextElementSibling
+          : document.querySelectorAll('#columns > *')[1];
+      }
+      if ($column) {
+        $column.focus();
+        $column.scrollIntoView(scrollIntoViewOptions);
+      }
+    },
+    {
+      useKey: true,
+      ignoreEventWhen: (e) => e.metaKey || e.ctrlKey || e.altKey || e.shiftKey,
+    },
+  );
 
   return (
     <div
@@ -67,6 +123,18 @@ function Columns() {
           states.showShortcutsSettings = true;
         }
       }}
+      onFocus={() => {
+        // Get current focused column
+        const currentFocusedColumn =
+          document.activeElement.closest('#columns > *');
+        if (currentFocusedColumn) {
+          // Remove focus classes from all columns
+          // Add focus class to current focused column
+          document.querySelectorAll('#columns > *').forEach((column) => {
+            column.classList.toggle('focus', column === currentFocusedColumn);
+          });
+        }
+      }}
     >
       {components}
     </div>

src/components/compose-button.jsx

@@ -1,33 +1,229 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
+import { useLongPress } from 'use-long-press';
+import { useSnapshot } from 'valtio';
 
+import { api } from '../utils/api';
+import niceDateTime from '../utils/nice-date-time';
 import openCompose from '../utils/open-compose';
+import openOSK from '../utils/open-osk';
+import pmem from '../utils/pmem';
+import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
+import showCompose from '../utils/show-compose';
 import states from '../utils/states';
+import statusPeek from '../utils/status-peek';
+import { getCurrentAccountID } from '../utils/store-utils';
 
 import Icon from './icon';
+import Loader from './loader';
+import MenuLink from './menu-link';
+import RelativeTime from './relative-time';
+import SubMenu2 from './submenu2';
+
+// Function to fetch the latest posts from the current user
+// Use pmem to memoize fetch results for 1 minute
+const fetchLatestPostsMemoized = pmem(
+  async (masto, currentAccountID) => {
+    const statusesIterator = masto.v1.accounts
+      .$select(currentAccountID)
+      .statuses.list({
+        limit: 3,
+        exclude_replies: true,
+        exclude_reblogs: true,
+      })
+      .values();
+    const { value } = await statusesIterator.next();
+    return value || [];
+  },
+  { maxAge: 60000 },
+); // 1 minute cache
 
 export default function ComposeButton() {
+  const { t } = useLingui();
+  const snapStates = useSnapshot(states);
+  const { masto } = api();
+
+  // Context menu state
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [latestPosts, setLatestPosts] = useState([]);
+  const [loadingPosts, setLoadingPosts] = useState(false);
+  const buttonRef = useRef(null);
+  const menuRef = useRef(null);
+
+  const columnMode = snapStates.settings.shortcutsViewMode === 'multi-column';
+
   function handleButton(e) {
+    // useKey will even listen to Shift
+    // e.g. press Shift (without c) will trigger this 😱
+    if (e.key && e.key.toLowerCase() !== 'c') return;
+
+    if (snapStates.composerState.minimized) {
+      states.composerState.minimized = false;
+      openOSK();
+      return;
+    }
+
+    const composeDataElements = document.querySelectorAll('data.compose-data');
+    // If there's a lot of them, ignore
+    const opts =
+      !columnMode && composeDataElements.length === 1
+        ? JSON.parse(composeDataElements[0].value)
+        : undefined;
+
     if (e.shiftKey) {
-      const newWin = openCompose();
+      const newWin = openCompose(opts);
 
       if (!newWin) {
-        states.showCompose = true;
+        states.showCompose = opts || true;
       }
     } else {
-      states.showCompose = true;
+      openOSK();
+      states.showCompose = opts || true;
     }
   }
 
   useHotkeys('c, shift+c', handleButton, {
+    useKey: true,
     ignoreEventWhen: (e) => {
       const hasModal = !!document.querySelector('#modal-container > *');
-      return hasModal;
+      return hasModal || e.metaKey || e.ctrlKey || e.altKey;
     },
   });
 
+  // Setup longpress handler to open context menu
+  const bindLongPress = useLongPress(
+    () => {
+      setMenuOpen(true);
+    },
+    {
+      threshold: 600,
+    },
+  );
+
+  const fetchLatestPosts = useCallback(async () => {
+    try {
+      setLoadingPosts(true);
+      const currentAccountID = getCurrentAccountID();
+      if (!currentAccountID) {
+        return;
+      }
+      const posts = await fetchLatestPostsMemoized(masto, currentAccountID);
+      setLatestPosts(posts);
+    } catch (error) {
+    } finally {
+      setLoadingPosts(false);
+    }
+  }, [masto]);
+
+  // Function to handle opening the compose window to reply to a post
+  const handleReplyToPost = useCallback((post) => {
+    showCompose({
+      replyToStatus: post,
+    });
+    setMenuOpen(false);
+  }, []);
+
+  useEffect(() => {
+    if (menuOpen) {
+      fetchLatestPosts();
+    }
+  }, [fetchLatestPosts, menuOpen]);
+
   return (
-    <button type="button" id="compose-button" onClick={handleButton}>
-      <Icon icon="quill" size="xl" alt="Compose" />
-    </button>
+    <>
+      <button
+        ref={buttonRef}
+        type="button"
+        id="compose-button"
+        onClick={handleButton}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          setMenuOpen(true);
+        }}
+        {...bindLongPress()}
+        class={`${snapStates.composerState.minimized ? 'min' : ''} ${
+          snapStates.composerState.publishing ? 'loading' : ''
+        } ${snapStates.composerState.publishingError ? 'error' : ''}`}
+      >
+        <Icon icon="quill" size="xl" alt={t`Compose`} />
+      </button>
+      <ControlledMenu
+        ref={menuRef}
+        state={menuOpen ? 'open' : undefined}
+        anchorRef={buttonRef}
+        onClose={() => setMenuOpen(false)}
+        direction="top"
+        gap={8} // Add gap between menu and button
+        unmountOnClose
+        portal={{
+          target: document.body,
+        }}
+        boundingBoxPadding={safeBoundingBoxPadding()}
+        containerProps={{
+          style: {
+            zIndex: 19,
+          },
+          onClick: () => {
+            menuRef.current?.closeMenu?.();
+          },
+        }}
+        submenuOpenDelay={600}
+      >
+        <MenuLink to="/sp">
+          <Icon icon="schedule" />{' '}
+          <span>
+            <Trans>Scheduled Posts</Trans>
+          </span>
+        </MenuLink>
+        <MenuDivider />
+        <SubMenu2
+          align="end"
+          direction="top"
+          shift={-8}
+          disabled={loadingPosts || latestPosts.length === 0}
+          label={
+            <>
+              <Icon icon="comment" />{' '}
+              <span className="menu-grow">
+                <Trans>Add to thread</Trans>
+              </span>
+              {loadingPosts ? '…' : <Icon icon="chevron-right" />}
+            </>
+          }
+        >
+          {latestPosts.length > 0 &&
+            latestPosts.map((post) => {
+              const createdDate = new Date(post.createdAt);
+              const isWithinDay = Date.now() - createdDate.getTime() < 86400000;
+
+              return (
+                <MenuItem key={post.id} onClick={() => handleReplyToPost(post)}>
+                  <small>
+                    <div class="menu-post-text">{statusPeek(post)}</div>
+                    <span className="more-insignificant">
+                      {/* Show relative time if within a day */}
+                      {isWithinDay && (
+                        <>
+                          <RelativeTime datetime={createdDate} format="micro" />{' '}
+                          ‒{' '}
+                        </>
+                      )}
+                      <time
+                        className="created"
+                        dateTime={createdDate.toISOString()}
+                        title={createdDate.toLocaleString()}
+                      >
+                        {niceDateTime(post.createdAt)}
+                      </time>
+                    </span>
+                  </small>
+                </MenuItem>
+              );
+            })}
+        </SubMenu2>
+      </ControlledMenu>
+    </>
   );
 }

src/components/compose-poll.jsx

@@ -0,0 +1,137 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+
+import i18nDuration from '../utils/i18n-duration';
+
+import Icon from './icon';
+import TextExpander from './text-expander';
+
+export const expiryOptions = {
+  300: i18nDuration(5, 'minute'),
+  1_800: i18nDuration(30, 'minute'),
+  3_600: i18nDuration(1, 'hour'),
+  21_600: i18nDuration(6, 'hour'),
+  86_400: i18nDuration(1, 'day'),
+  259_200: i18nDuration(3, 'day'),
+  604_800: i18nDuration(1, 'week'),
+};
+
+function ComposePoll({
+  lang,
+  poll,
+  disabled,
+  onInput = () => {},
+  maxOptions,
+  maxExpiration,
+  minExpiration,
+  maxCharactersPerOption,
+}) {
+  const { t } = useLingui();
+  const { options, expiresIn, multiple } = poll;
+
+  return (
+    <div class={`poll ${multiple ? 'multiple' : ''}`}>
+      <div class="poll-choices">
+        {options.map((option, i) => (
+          <div class="poll-choice" key={i}>
+            <TextExpander keys=":" class="poll-field-container">
+              <input
+                required
+                type="text"
+                value={option}
+                disabled={disabled}
+                maxlength={maxCharactersPerOption}
+                placeholder={t`Choice ${i + 1}`}
+                lang={lang}
+                spellCheck="true"
+                autocomplete="off"
+                dir="auto"
+                data-allow-custom-emoji="true"
+                onInput={(e) => {
+                  const { value } = e.target;
+                  options[i] = value;
+                  onInput(poll);
+                }}
+              />
+            </TextExpander>
+            <button
+              type="button"
+              class="plain4 poll-button"
+              disabled={disabled || options.length <= 1}
+              onClick={() => {
+                options.splice(i, 1);
+                onInput(poll);
+              }}
+              title={t`Remove`}
+            >
+              −
+            </button>
+          </div>
+        ))}
+      </div>
+      <div class="poll-toolbar">
+        <button
+          type="button"
+          class="plain2 poll-button"
+          disabled={disabled || options.length >= maxOptions}
+          onClick={() => {
+            options.push('');
+            onInput(poll);
+          }}
+          title={t`Add`}
+        >
+          +
+        </button>{' '}
+        <div class="poll-config">
+          <label class="multiple-choices">
+            <input
+              type="checkbox"
+              checked={multiple}
+              disabled={disabled}
+              onChange={(e) => {
+                const { checked } = e.target;
+                poll.multiple = checked;
+                onInput(poll);
+              }}
+            />{' '}
+            <Trans>Multiple choice</Trans>
+          </label>
+          <label class="expires-in">
+            <Trans>Duration</Trans>{' '}
+            <select
+              value={expiresIn}
+              disabled={disabled}
+              onChange={(e) => {
+                const { value } = e.target;
+                poll.expiresIn = value;
+                onInput(poll);
+              }}
+            >
+              {Object.entries(expiryOptions)
+                .filter(([value]) => {
+                  return value >= minExpiration && value <= maxExpiration;
+                })
+                .map(([value, label]) => (
+                  <option value={value} key={value}>
+                    {label()}
+                  </option>
+                ))}
+            </select>
+          </label>
+          <div class="spacer" />
+          <button
+            type="button"
+            class="light danger small"
+            disabled={disabled}
+            onClick={() => {
+              onInput(null);
+            }}
+          >
+            <Trans>Remove poll</Trans>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ComposePoll;

src/components/compose-suspense.jsx

@@ -0,0 +1,48 @@
+import { shouldPolyfill } from '@formatjs/intl-segmenter/should-polyfill';
+import { useEffect, useState } from 'preact/hooks';
+
+import Loader from './loader';
+
+const supportsIntlSegmenter = !shouldPolyfill();
+
+function importIntlSegmenter() {
+  if (!supportsIntlSegmenter) {
+    return import('@formatjs/intl-segmenter/polyfill-force').catch(() => {});
+  }
+}
+
+function importCompose() {
+  return import('./compose');
+}
+
+export async function preload() {
+  try {
+    await importIntlSegmenter();
+    importCompose();
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+export default function ComposeSuspense(props) {
+  const [Compose, setCompose] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (supportsIntlSegmenter) {
+          const component = await importCompose();
+          setCompose(component);
+        } else {
+          await importIntlSegmenter();
+          const component = await importCompose();
+          setCompose(component);
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+  }, []);
+
+  return Compose?.default ? <Compose.default {...props} /> : <Loader />;
+}

src/components/compose-textarea.jsx

@@ -0,0 +1,268 @@
+import { forwardRef } from 'preact/compat';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useDebouncedCallback, useThrottledCallback } from 'use-debounce';
+
+import { langDetector } from '../utils/browser-translator';
+import escapeHTML from '../utils/escape-html';
+import states from '../utils/states';
+import urlRegexObj from '../utils/url-regex';
+import useThrottledResizeObserver from '../utils/useThrottledResizeObserver';
+
+import TextExpander from './text-expander';
+
+// https://github.com/mastodon/mastodon/blob/c03bd2a238741a012aa4b98dc4902d6cf948ab63/app/models/account.rb#L69
+const USERNAME_RE = /[a-z0-9_]+([a-z0-9_.-]+[a-z0-9_]+)?/i;
+const MENTION_RE = new RegExp(
+  `(^|[^=\\/\\w])(@${USERNAME_RE.source}(?:@[\\p{L}\\w.-]+[\\w]+)?)`,
+  'uig',
+);
+
+// AI-generated, all other regexes are too complicated
+const HASHTAG_RE = new RegExp(
+  `(^|[^=\\/\\w])(#[\\p{L}\\p{N}_]+([\\p{L}\\p{N}_.]+[\\p{L}\\p{N}_]+)?)(?![\\/\\w])`,
+  'iug',
+);
+
+// https://github.com/mastodon/mastodon/blob/23e32a4b3031d1da8b911e0145d61b4dd47c4f96/app/models/custom_emoji.rb#L31
+const SHORTCODE_RE_FRAGMENT = '[a-zA-Z0-9_]{2,}';
+const SCAN_RE = new RegExp(
+  `(^|[^=\\/\\w])(:${SHORTCODE_RE_FRAGMENT}:)(?=[^A-Za-z0-9_:]|$)`,
+  'g',
+);
+
+const segmenter = new Intl.Segmenter();
+
+function highlightText(text, { maxCharacters = Infinity }) {
+  // Exceeded characters limit
+  const { composerCharacterCount } = states;
+  if (composerCharacterCount > maxCharacters) {
+    // Highlight exceeded characters
+    let withinLimitHTML = '',
+      exceedLimitHTML = '';
+    const htmlSegments = segmenter.segment(text);
+    for (const { segment, index } of htmlSegments) {
+      if (index < maxCharacters) {
+        withinLimitHTML += segment;
+      } else {
+        exceedLimitHTML += segment;
+      }
+    }
+    if (exceedLimitHTML) {
+      exceedLimitHTML =
+        '<mark class="compose-highlight-exceeded">' +
+        escapeHTML(exceedLimitHTML) +
+        '</mark>';
+    }
+    return escapeHTML(withinLimitHTML) + exceedLimitHTML;
+  }
+
+  return escapeHTML(text)
+    .replace(urlRegexObj, '$2<mark class="compose-highlight-url">$3</mark>') // URLs
+    .replace(MENTION_RE, '$1<mark class="compose-highlight-mention">$2</mark>') // Mentions
+    .replace(HASHTAG_RE, '$1<mark class="compose-highlight-hashtag">$2</mark>') // Hashtags
+    .replace(
+      SCAN_RE,
+      '$1<mark class="compose-highlight-emoji-shortcode">$2</mark>',
+    ); // Emoji shortcodes
+}
+
+function autoResizeTextarea(textarea) {
+  if (!textarea) return;
+  const { value, offsetHeight, scrollHeight, clientHeight } = textarea;
+  if (offsetHeight < window.innerHeight) {
+    // NOTE: This check is needed because the offsetHeight return 50000 (really large number) on first render
+    // No idea why it does that, will re-investigate in far future
+    const offset = offsetHeight - clientHeight;
+    const height = value ? scrollHeight + offset + 'px' : null;
+    textarea.style.height = height;
+  }
+}
+
+const detectLangs = async (text) => {
+  if (langDetector) {
+    const langs = await langDetector.detect(text);
+    if (langs?.length) {
+      return langs.slice(0, 2).map((lang) => lang.detectedLanguage);
+    }
+  }
+  const { detectAll } = await import('tinyld/light');
+  const langs = detectAll(text);
+  if (langs?.length) {
+    // return max 2
+    return langs.slice(0, 2).map((lang) => lang.lang);
+  }
+  return null;
+};
+
+const Textarea = forwardRef((props, ref) => {
+  const [text, setText] = useState(ref.current?.value || '');
+  const { maxCharacters, onTrigger = null, ...textareaProps } = props;
+
+  const textExpanderRef = useRef();
+
+  useThrottledResizeObserver({
+    ref,
+    onResize: () => {
+      // Get height of textarea, set height to textExpander
+      if (textExpanderRef.current && ref.current) {
+        const { height } = ref.current.getBoundingClientRect();
+        if (height) {
+          textExpanderRef.current.setStyle({ minHeight: height + 'px' });
+        }
+      }
+    },
+  });
+
+  const slowHighlightPerf = useRef(0); // increment if slow
+  const composeHighlightRef = useRef();
+  const throttleHighlightText = useThrottledCallback((text) => {
+    if (!composeHighlightRef.current) return;
+    if (slowHighlightPerf.current > 3) {
+      // After 3 times of lag, disable highlighting
+      composeHighlightRef.current.innerHTML = '';
+      composeHighlightRef.current = null; // Destroy the whole thing
+      throttleHighlightText?.cancel?.();
+      return;
+    }
+    let start;
+    let end;
+    if (slowHighlightPerf.current <= 3) start = Date.now();
+    composeHighlightRef.current.innerHTML =
+      highlightText(text, {
+        maxCharacters,
+      }) + '\n';
+    if (slowHighlightPerf.current <= 3) end = Date.now();
+    console.debug('HIGHLIGHT PERF', { start, end, diff: end - start });
+    if (start && end && end - start > 50) {
+      // if slow, increment
+      slowHighlightPerf.current++;
+    }
+    // Newline to prevent multiple line breaks at the end from being collapsed, no idea why
+  }, 500);
+
+  const debouncedAutoDetectLanguage = useDebouncedCallback(() => {
+    // Make use of the highlightRef to get the DOM
+    // Clone the dom
+    const dom = composeHighlightRef.current?.cloneNode(true);
+    if (!dom) return;
+    // Remove mark
+    dom.querySelectorAll('mark').forEach((mark) => {
+      mark.remove();
+    });
+    const text = dom.innerText?.trim();
+    if (!text) return;
+    (async () => {
+      const langs = await detectLangs(text);
+      if (langs?.length) {
+        onTrigger?.({
+          name: 'auto-detect-language',
+          languages: langs,
+        });
+      }
+    })();
+  }, 2000);
+
+  return (
+    <TextExpander
+      ref={textExpanderRef}
+      keys="@ # :"
+      class="compose-field-container"
+      onTrigger={onTrigger}
+    >
+      <textarea
+        class="compose-field"
+        autoCapitalize="sentences"
+        autoComplete="on"
+        autoCorrect="on"
+        spellCheck="true"
+        dir="auto"
+        rows="6"
+        cols="50"
+        {...textareaProps}
+        ref={ref}
+        name="status"
+        value={text}
+        onKeyDown={(e) => {
+          // Get line before cursor position after pressing 'Enter'
+          const { key, target } = e;
+          const hasTextExpander = textExpanderRef.current?.activated();
+          if (
+            key === 'Enter' &&
+            !(e.ctrlKey || e.metaKey || hasTextExpander) &&
+            !e.isComposing
+          ) {
+            try {
+              const { value, selectionStart } = target;
+              const textBeforeCursor = value.slice(0, selectionStart);
+              const lastLine = textBeforeCursor.split('\n').slice(-1)[0];
+              if (lastLine) {
+                // If line starts with "- " or "12. "
+                if (/^\s*(-|\d+\.)\s/.test(lastLine)) {
+                  // insert "- " at cursor position
+                  const [_, preSpaces, bullet, postSpaces, anything] =
+                    lastLine.match(/^(\s*)(-|\d+\.)(\s+)(.+)?/) || [];
+                  if (anything) {
+                    e.preventDefault();
+                    const [number] = bullet.match(/\d+/) || [];
+                    const newBullet = number ? `${+number + 1}.` : '-';
+                    const text = `\n${preSpaces}${newBullet}${postSpaces}`;
+                    target.setRangeText(text, selectionStart, selectionStart);
+                    const pos = selectionStart + text.length;
+                    target.setSelectionRange(pos, pos);
+                  } else {
+                    // trim the line before the cursor, then insert new line
+                    const pos = selectionStart - lastLine.length;
+                    target.setRangeText('', pos, selectionStart);
+                  }
+                  autoResizeTextarea(target);
+                  target.dispatchEvent(new Event('input'));
+                }
+              }
+            } catch (e) {
+              // silent fail
+              console.error(e);
+            }
+          }
+          if (composeHighlightRef.current) {
+            composeHighlightRef.current.scrollTop = target.scrollTop;
+          }
+        }}
+        onInput={(e) => {
+          const { target } = e;
+          const text = target.value;
+          setText(text);
+          autoResizeTextarea(target);
+          props.onInput?.(e);
+          throttleHighlightText(text);
+          debouncedAutoDetectLanguage();
+        }}
+        onScroll={(e) => {
+          if (composeHighlightRef.current) {
+            const { scrollTop } = e.target;
+            composeHighlightRef.current.scrollTop = scrollTop;
+          }
+        }}
+        onPaste={(e) => {
+          try {
+            const pastedText = e.clipboardData.getData('text').trim();
+            if (pastedText) {
+              onTrigger?.({
+                name: 'pasted-link',
+                url: pastedText,
+              });
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }}
+      />
+      <div
+        ref={composeHighlightRef}
+        class="compose-highlight"
+        aria-hidden="true"
+      />
+    </TextExpander>
+  );
+});
+
+export default Textarea;

src/components/custom-emoji.jsx

@@ -0,0 +1,27 @@
+export default function CustomEmoji({ staticUrl, alt, url }) {
+  return (
+    <picture>
+      {staticUrl && (
+        <source srcset={staticUrl} media="(prefers-reduced-motion: reduce)" />
+      )}
+      <img
+        key={alt || url}
+        src={url}
+        alt={alt}
+        class="shortcode-emoji emoji"
+        width="16"
+        height="16"
+        loading="lazy"
+        decoding="async"
+        fetchPriority="low"
+        onLoad={(e) => {
+          try {
+            e.target.dataset.isLarger =
+              e.target.naturalWidth > e.target.width * 2 ||
+              e.target.naturalHeight > e.target.height * 2;
+          } catch (e) {}
+        }}
+      />
+    </picture>
+  );
+}

src/components/custom-emojis-modal.css

@@ -0,0 +1,153 @@
+#custom-emojis-sheet {
+  --custom-emoji-size: 1;
+  --size-bump: 210px;
+  height: min(
+    95vh,
+    calc(50vh + ((var(--custom-emoji-size) - 1) * var(--size-bump)))
+  );
+  max-width: calc(
+    var(--main-width) +
+    ((var(--custom-emoji-size) - 1) * var(--size-bump)) -
+    50px -
+    16px
+  );
+
+  header {
+    .loader-container {
+      margin: 0;
+    }
+
+    form {
+      margin-top: 8px;
+
+      input {
+        width: 100%;
+        min-width: 0;
+      }
+    }
+  }
+
+  main {
+    mask-image: none;
+    /* padding-bottom: 88px; */
+  }
+
+  .size-range {
+    float: var(--forward);
+    position: sticky;
+    bottom: 0;
+    gap: 8px;
+    background-color: var(--bg-color);
+    border: 1px solid var(--outline-color);
+    box-shadow: 0 8px 16px -8px var(--drop-shadow-color);
+    border-radius: 9999px;
+  }
+
+  .custom-emojis-matches {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .custom-emojis-list {
+    .section-container {
+      position: relative;
+      content-visibility: auto;
+      content-intrinsic-size: auto 88px;
+      padding-block: calc(16px * (var(--custom-emoji-size) - 1));
+    }
+    .section-header {
+      font-size: 80%;
+      text-transform: uppercase;
+      color: var(--text-insignificant-color);
+      padding: 8px 0 4px;
+      position: sticky;
+      top: 0;
+      background-color: var(--bg-color);
+      z-index: 1;
+      display: inline-block;
+      padding-inline-end: 8px;
+      pointer-events: none;
+      border-end-end-radius: 8px;
+    }
+    section {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    button {
+      color: var(--text-color);
+      border-radius: 8px;
+      background-image: radial-gradient(
+        closest-side,
+        var(--img-bg-color),
+        transparent
+      );
+      text-shadow: 0 1px 0 var(--bg-color);
+      position: relative;
+      min-width: 44px;
+      min-height: 44px;
+      font-variant-numeric: slashed-zero;
+      font-feature-settings: 'ss01';
+
+      &[data-title]:after {
+        max-width: 50vw;
+        pointer-events: none;
+        position: absolute;
+        content: attr(data-title);
+        left: 50%;
+        top: 0;
+        background-color: var(--bg-color);
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-size: 12px;
+        border: 1px solid var(--text-color);
+        transform: translate(-50%, calc(-110% * var(--custom-emoji-size)));
+        opacity: 0;
+        transition: opacity 0.1s ease-out 0.1s;
+        font-family: var(--monospace-font);
+        line-height: 1;
+      }
+      &.edge-left[data-title]:after {
+        left: 0;
+        transform: translate(0, calc(-110% * var(--custom-emoji-size)));
+      }
+      &.edge-right[data-title]:after {
+        left: 100%;
+        transform: translate(-100%, calc(-110% * var(--custom-emoji-size)));
+      }
+
+      &:is(:hover, :focus) {
+        z-index: 1;
+        filter: none;
+        background-color: var(--bg-faded-color);
+
+        &[data-title]:after {
+          opacity: 1;
+        }
+      }
+
+      img {
+        transition: transform 0.1s ease-out;
+        width: calc(1.2em * var(--custom-emoji-size, 1));
+        height: calc(1.2em * var(--custom-emoji-size, 1));
+      }
+
+      &:is(:hover, :focus) img {
+        transform: scale(2);
+        image-rendering: pixelated;
+      }
+      &.edge-left img {
+        transform-origin: left center;
+      }
+      &.edge-right img {
+        transform-origin: right center;
+      }
+
+      code {
+        font-size: 0.8em;
+      }
+    }
+  }
+}

src/components/custom-emojis-modal.jsx

@@ -0,0 +1,374 @@
+import './custom-emojis-modal.css';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+import { memo } from 'preact/compat';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'preact/hooks';
+
+import getCustomEmojis from '../utils/custom-emojis';
+import store from '../utils/store';
+
+import Icon from './icon';
+import Loader from './loader';
+
+const CUSTOM_EMOJIS_COUNT = 100;
+const EMOJI_SIZE_MIN = 1;
+const EMOJI_SIZE_MAX = 2;
+const EMOJI_SIZE_STEP = 0.5;
+
+const CustomEmojiButton = memo(({ emoji, onClick, showCode }) => {
+  const addEdges = (e) => {
+    // Add edge-left or edge-right class based on self position relative to scrollable parent
+    // If near left edge, add edge-left, if near right edge, add edge-right
+    const buffer = 88;
+    const parent = e.currentTarget.closest('main');
+    if (parent) {
+      const rect = parent.getBoundingClientRect();
+      const selfRect = e.currentTarget.getBoundingClientRect();
+      const targetClassList = e.currentTarget.classList;
+      if (selfRect.left < rect.left + buffer) {
+        targetClassList.add('edge-left');
+        targetClassList.remove('edge-right');
+      } else if (selfRect.right > rect.right - buffer) {
+        targetClassList.add('edge-right');
+        targetClassList.remove('edge-left');
+      } else {
+        targetClassList.remove('edge-left', 'edge-right');
+      }
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      className="plain4"
+      onClick={onClick}
+      data-title={showCode ? undefined : emoji.shortcode}
+      onPointerEnter={addEdges}
+      onFocus={addEdges}
+    >
+      <picture>
+        {!!emoji.staticUrl && (
+          <source
+            srcSet={emoji.staticUrl}
+            media="(prefers-reduced-motion: reduce)"
+          />
+        )}
+        <img
+          className="shortcode-emoji"
+          src={emoji.url || emoji.staticUrl}
+          alt={emoji.shortcode}
+          width="24"
+          height="24"
+          loading="lazy"
+          decoding="async"
+        />
+      </picture>
+      {showCode && (
+        <>
+          {' '}
+          <code>{emoji.shortcode}</code>
+        </>
+      )}
+    </button>
+  );
+});
+
+const CustomEmojisList = memo(({ emojis, onSelect }) => {
+  const { i18n } = useLingui();
+  const [max, setMax] = useState(CUSTOM_EMOJIS_COUNT);
+  const showMore = emojis.length > max;
+  return (
+    <section>
+      {emojis.slice(0, max).map((emoji) => (
+        <CustomEmojiButton
+          key={emoji.shortcode}
+          emoji={emoji}
+          onClick={() => {
+            onSelect(`:${emoji.shortcode}:`);
+          }}
+        />
+      ))}
+      {showMore && (
+        <button
+          type="button"
+          class="plain small"
+          onClick={() => setMax(max + CUSTOM_EMOJIS_COUNT)}
+        >
+          <Trans>{i18n.number(emojis.length - max)} more…</Trans>
+        </button>
+      )}
+    </section>
+  );
+});
+
+const CUSTOM_EMOJI_SIZE = 'composer-customEmojiSize';
+
+function CustomEmojisModal({
+  masto,
+  instance,
+  onClose = () => {},
+  onSelect = () => {},
+  defaultSearchTerm,
+}) {
+  const { t } = useLingui();
+  const [uiState, setUIState] = useState('default');
+  const customEmojisList = useRef([]);
+  const [customEmojis, setCustomEmojis] = useState([]);
+  const recentlyUsedCustomEmojis = useMemo(
+    () => store.account.get('recentlyUsedCustomEmojis') || [],
+  );
+  const searcherRef = useRef();
+  useEffect(() => {
+    setUIState('loading');
+    (async () => {
+      try {
+        const [emojis, searcher] = await getCustomEmojis(instance, masto);
+        console.log('emojis', emojis);
+        searcherRef.current = searcher;
+        setCustomEmojis(emojis);
+        setUIState('default');
+      } catch (e) {
+        setUIState('error');
+        console.error(e);
+      }
+    })();
+  }, []);
+
+  const customEmojisCatList = useMemo(() => {
+    // Group emojis by category
+    const emojisCat = {
+      '--recent--': recentlyUsedCustomEmojis.filter((emoji) =>
+        customEmojis.find((e) => e.shortcode === emoji.shortcode),
+      ),
+    };
+    const othersCat = [];
+    customEmojis.forEach((emoji) => {
+      customEmojisList.current?.push?.(emoji);
+      if (!emoji.category) {
+        othersCat.push(emoji);
+        return;
+      }
+      if (!emojisCat[emoji.category]) {
+        emojisCat[emoji.category] = [];
+      }
+      emojisCat[emoji.category].push(emoji);
+    });
+    if (othersCat.length) {
+      emojisCat['--others--'] = othersCat;
+    }
+    return emojisCat;
+  }, [customEmojis]);
+
+  const scrollableRef = useRef();
+  const [matches, setMatches] = useState(null);
+  const [emojiSize, setEmojiSize] = useState(
+    store.local.get(CUSTOM_EMOJI_SIZE) || EMOJI_SIZE_MIN,
+  );
+  const onEmojiSizeDecrease = useCallback(() => {
+    const newSize = Math.max(EMOJI_SIZE_MIN, emojiSize - EMOJI_SIZE_STEP);
+    setEmojiSize(newSize);
+    if (newSize === EMOJI_SIZE_MIN) {
+      store.local.del(CUSTOM_EMOJI_SIZE);
+    } else {
+      store.local.set(CUSTOM_EMOJI_SIZE, newSize);
+    }
+  }, [emojiSize]);
+
+  const onEmojiSizeIncrease = useCallback(() => {
+    const newSize = Math.min(EMOJI_SIZE_MAX, emojiSize + EMOJI_SIZE_STEP);
+    setEmojiSize(newSize);
+    if (newSize === EMOJI_SIZE_MIN) {
+      store.local.del(CUSTOM_EMOJI_SIZE);
+    } else {
+      store.local.set(CUSTOM_EMOJI_SIZE, newSize);
+    }
+  }, [emojiSize]);
+
+  const onFind = useCallback(
+    (e) => {
+      const { value } = e.target;
+      if (value) {
+        const results = searcherRef.current?.search(value, {
+          limit: CUSTOM_EMOJIS_COUNT,
+        });
+        setMatches(results.map((r) => r.item));
+        scrollableRef.current?.scrollTo?.(0, 0);
+      } else {
+        setMatches(null);
+      }
+    },
+    [customEmojis],
+  );
+  useEffect(() => {
+    if (defaultSearchTerm && customEmojis?.length) {
+      onFind({ target: { value: defaultSearchTerm } });
+    }
+  }, [defaultSearchTerm, onFind, customEmojis]);
+
+  const onSelectEmoji = useCallback(
+    (emoji) => {
+      onSelect?.(emoji);
+      onClose?.();
+
+      queueMicrotask(() => {
+        let recentlyUsedCustomEmojis =
+          store.account.get('recentlyUsedCustomEmojis') || [];
+        const recentlyUsedEmojiIndex = recentlyUsedCustomEmojis.findIndex(
+          (e) => e.shortcode === emoji.shortcode,
+        );
+        if (recentlyUsedEmojiIndex !== -1) {
+          // Move emoji to index 0
+          recentlyUsedCustomEmojis.splice(recentlyUsedEmojiIndex, 1);
+          recentlyUsedCustomEmojis.unshift(emoji);
+        } else {
+          recentlyUsedCustomEmojis.unshift(emoji);
+          // Remove unavailable ones
+          recentlyUsedCustomEmojis = recentlyUsedCustomEmojis.filter((e) =>
+            customEmojisList.current?.find?.(
+              (emoji) => emoji.shortcode === e.shortcode,
+            ),
+          );
+          // Limit to 10
+          recentlyUsedCustomEmojis = recentlyUsedCustomEmojis.slice(0, 10);
+        }
+
+        // Store back
+        store.account.set('recentlyUsedCustomEmojis', recentlyUsedCustomEmojis);
+      });
+    },
+    [onSelect],
+  );
+
+  const inputRef = useRef();
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      // Put cursor at the end
+      if (inputRef.current.value) {
+        inputRef.current.selectionStart = inputRef.current.value.length;
+        inputRef.current.selectionEnd = inputRef.current.value.length;
+      }
+    }
+  }, []);
+
+  return (
+    <div
+      id="custom-emojis-sheet"
+      class="sheet"
+      style={{
+        '--custom-emoji-size': emojiSize,
+      }}
+    >
+      {!!onClose && (
+        <button type="button" class="sheet-close" onClick={onClose}>
+          <Icon icon="x" alt={t`Close`} />
+        </button>
+      )}
+      <header>
+        <div>
+          <b>
+            <Trans>Custom emojis</Trans>
+          </b>{' '}
+          {uiState === 'loading' ? (
+            <Loader />
+          ) : (
+            <small class="insignificant"> • {instance}</small>
+          )}
+        </div>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            const emoji = matches[0];
+            if (emoji) {
+              onSelectEmoji(`:${emoji.shortcode}:`);
+            }
+          }}
+        >
+          <input
+            ref={inputRef}
+            type="search"
+            placeholder={t`Search emoji`}
+            onInput={onFind}
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            spellCheck="false"
+            dir="auto"
+            defaultValue={defaultSearchTerm || ''}
+          />
+        </form>
+      </header>
+      <main ref={scrollableRef}>
+        {matches !== null ? (
+          <ul class="custom-emojis-matches custom-emojis-list">
+            {matches.map((emoji) => (
+              <li key={emoji.shortcode} class="custom-emojis-match">
+                <CustomEmojiButton
+                  emoji={emoji}
+                  onClick={() => {
+                    onSelectEmoji(`:${emoji.shortcode}:`);
+                  }}
+                  showCode
+                />
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div class="custom-emojis-list">
+            {uiState === 'error' && (
+              <div class="ui-state">
+                <p>
+                  <Trans>Error loading custom emojis</Trans>
+                </p>
+              </div>
+            )}
+            {uiState === 'default' &&
+              Object.entries(customEmojisCatList).map(
+                ([category, emojis]) =>
+                  !!emojis?.length && (
+                    <div class="section-container">
+                      <div class="section-header">
+                        {{
+                          '--recent--': t`Recently used`,
+                          '--others--': t`Others`,
+                        }[category] || category}
+                      </div>
+                      <CustomEmojisList
+                        emojis={emojis}
+                        onSelect={onSelectEmoji}
+                      />
+                    </div>
+                  ),
+              )}
+          </div>
+        )}
+        <div class="size-range">
+          <button
+            type="button"
+            class="plain4"
+            onClick={onEmojiSizeDecrease}
+            disabled={emojiSize <= EMOJI_SIZE_MIN}
+          >
+            <Icon icon="zoom-out" size="l" alt={t`Zoom out`} />
+          </button>
+          <button
+            type="button"
+            class="plain4"
+            onClick={onEmojiSizeIncrease}
+            disabled={emojiSize >= EMOJI_SIZE_MAX}
+          >
+            <Icon icon="zoom-in" size="l" alt={t`Zoom in`} />
+          </button>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default CustomEmojisModal;

src/components/drafts.css

@@ -27,7 +27,7 @@ button.draft-item {
   background-color: var(--bg-color);
   color: var(--text-color);
   border: 1px solid var(--link-faded-color);
-  text-align: left;
+  text-align: start;
   padding: 0;
 }
 button.draft-item:is(:hover, :focus) {

src/components/drafts.jsx

@@ -1,5 +1,6 @@
 import './drafts.css';
 
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useEffect, useMemo, useReducer, useState } from 'react';
 
 import { api } from '../utils/api';
@@ -13,6 +14,7 @@ import Loader from './loader';
 import MenuConfirm from './menu-confirm';
 
 function Drafts({ onClose }) {
+  const { t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const [drafts, setDrafts] = useState([]);
@@ -29,9 +31,7 @@ function Drafts({ onClose }) {
           if (ownKeys.length) {
             const drafts = await db.drafts.getMany(ownKeys);
             drafts.sort(
-              (a, b) =>
-                new Date(b.updatedAt).getTime() -
-                new Date(a.updatedAt).getTime(),
+              (a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt),
             );
             setDrafts(drafts);
           } else {
@@ -54,17 +54,20 @@ function Drafts({ onClose }) {
     <div class="sheet">
       {!!onClose && (
         <button type="button" class="sheet-close" onClick={onClose}>
-          <Icon icon="x" />
+          <Icon icon="x" alt={t`Close`} />
         </button>
       )}
       <header>
         <h2>
-          Unsent drafts <Loader abrupt hidden={uiState !== 'loading'} />
+          <Trans>Unsent drafts</Trans>{' '}
+          <Loader abrupt hidden={uiState !== 'loading'} />
         </h2>
         {hasDrafts && (
           <div class="insignificant">
-            Looks like you have unsent drafts. Let's continue where you left
-            off.
+            <Trans>
+              Looks like you have unsent drafts. Let's continue where you left
+              off.
+            </Trans>
           </div>
         )}
       </header>
@@ -73,7 +76,7 @@ function Drafts({ onClose }) {
           <>
             <ul class="drafts-list">
               {drafts.map((draft) => {
-                const { updatedAt, key, draftStatus, replyTo } = draft;
+                const { updatedAt, key, draftStatus, replyTo, quote } = draft;
                 const updatedAtDate = new Date(updatedAt);
                 return (
                   <li key={updatedAt}>
@@ -83,7 +86,9 @@ function Drafts({ onClose }) {
                         <time>
                           {!!replyTo && (
                             <>
-                              @{replyTo.account.acct}
+                              <span class="bidi-isolate">
+                                @{replyTo.account.acct}
+                              </span>
                               <br />
                             </>
                           )}
@@ -91,7 +96,11 @@ function Drafts({ onClose }) {
                         </time>
                       </b>
                       <MenuConfirm
-                        confirmLabel={<span>Delete this draft?</span>}
+                        confirmLabel={
+                          <span>
+                            <Trans>Delete this draft?</Trans>
+                          </span>
+                        }
                         menuItemClassName="danger"
                         align="end"
                         disabled={uiState === 'loading'}
@@ -104,7 +113,7 @@ function Drafts({ onClose }) {
                               reload();
                               // }
                             } catch (e) {
-                              alert('Error deleting draft! Please try again.');
+                              alert(t`Error deleting draft! Please try again.`);
                             }
                           })();
                         }}
@@ -114,7 +123,7 @@ function Drafts({ onClose }) {
                           class="small light"
                           disabled={uiState === 'loading'}
                         >
-                          Delete&hellip;
+                          <Trans>Delete…</Trans>
                         </button>
                       </MenuConfirm>
                     </div>
@@ -125,23 +134,40 @@ function Drafts({ onClose }) {
                       onClick={async () => {
                         // console.log({ draftStatus });
                         let replyToStatus;
-                        if (replyTo) {
+                        let quoteStatus;
+                        if (replyTo?.id || quote?.id) {
                           setUIState('loading');
-                          try {
-                            replyToStatus = await masto.v1.statuses
-                              .$select(replyTo.id)
-                              .fetch();
-                          } catch (e) {
-                            console.error(e);
-                            alert('Error fetching reply-to status!');
-                            setUIState('default');
-                            return;
+                          if (replyTo) {
+                            try {
+                              replyToStatus = await masto.v1.statuses
+                                .$select(replyTo.id)
+                                .fetch();
+                            } catch (e) {
+                              console.error(e);
+                              alert(t`Error fetching reply-to status!`);
+                              setUIState('default');
+                              return;
+                            }
+                          }
+                          if (quote) {
+                            try {
+                              quoteStatus = await masto.v1.statuses
+                                .$select(quote.id)
+                                .fetch();
+                            } catch (e) {
+                              console.error(e);
+                              alert(t`Error fetching quoted status!`);
+                              setUIState('default');
+                              // Don't return. Fail and still allow draft without quote
+                              // return;
+                            }
                           }
                           setUIState('default');
                         }
                         window.__COMPOSE__ = {
                           draftStatus,
                           replyToStatus,
+                          quoteStatus,
                         };
                         states.showCompose = true;
                         states.showDrafts = false;
@@ -156,7 +182,11 @@ function Drafts({ onClose }) {
             {drafts.length > 1 && (
               <p>
                 <MenuConfirm
-                  confirmLabel={<span>Delete all drafts?</span>}
+                  confirmLabel={
+                    <span>
+                      <Trans>Delete all drafts?</Trans>
+                    </span>
+                  }
                   menuItemClassName="danger"
                   disabled={uiState === 'loading'}
                   onClick={() => {
@@ -172,7 +202,7 @@ function Drafts({ onClose }) {
                         reload();
                       } catch (e) {
                         console.error(e);
-                        alert('Error deleting drafts! Please try again.');
+                        alert(t`Error deleting drafts! Please try again.`);
                         setUIState('error');
                       }
                       // }
@@ -184,14 +214,16 @@ function Drafts({ onClose }) {
                     class="light danger"
                     disabled={uiState === 'loading'}
                   >
-                    Delete all&hellip;
+                    <Trans>Delete all…</Trans>
                   </button>
                 </MenuConfirm>
               </p>
             )}
           </>
         ) : (
-          <p>No drafts found.</p>
+          <p>
+            <Trans>No drafts found.</Trans>
+          </p>
         )}
       </main>
     </div>
@@ -199,11 +231,13 @@ function Drafts({ onClose }) {
 }
 
 function MiniDraft({ draft }) {
-  const { draftStatus, replyTo } = draft;
+  const { t } = useLingui();
+  const { draftStatus, replyTo, quote } = draft;
   const { status, spoilerText, poll, mediaAttachments } = draftStatus;
   const hasPoll = poll?.options?.length > 0;
   const hasMedia = mediaAttachments?.length > 0;
-  const hasPollOrMedia = hasPoll || hasMedia;
+  const hasQuote = !!quote?.id;
+  const hasPollOrMedia = hasPoll || hasMedia || hasQuote;
   const firstImageMedia = useMemo(() => {
     if (!hasMedia) return;
     const image = mediaAttachments.find((media) => /image/.test(media.type));
@@ -226,13 +260,14 @@ function MiniDraft({ draft }) {
                 : {}
             }
           >
-            {hasPoll && <Icon icon="poll" />}
+            {hasPoll && <Icon icon="poll" alt={t`Poll`} />}
             {hasMedia && (
               <span>
-                <Icon icon="attachment" />{' '}
+                <Icon icon="attachment" alt={t`Media`} />{' '}
                 <small>{mediaAttachments?.length}</small>
               </span>
             )}
+            {hasQuote && <Icon icon="quote" alt={t`Quote`} />}
           </div>
         )}
         <div class="mini-draft-main">

src/components/edit-history-controls.jsx

@@ -0,0 +1,61 @@
+import { useLingui } from '@lingui/react/macro';
+
+import { useEditHistory } from '../utils/edit-history-context';
+
+import Icon from './icon';
+
+export default function EditHistoryControls() {
+  const { t } = useLingui();
+  const {
+    prevEditedAt,
+    nextEditedAt,
+    editedAtIndex,
+    editHistoryMode,
+    editHistoryRef,
+    exitEditHistory,
+  } = useEditHistory();
+  if (!editHistoryMode) return null;
+  return (
+    <div class="edit-history-controls">
+      <Icon icon="edit" />
+      <b class="edit-history-heading">{t`Edit History Snapshots`}</b>
+      <span class="spacer" />
+      <span class="edit-history-pagination">
+        <button
+          type="button"
+          class="plain4"
+          onClick={() => {
+            prevEditedAt();
+          }}
+          disabled={
+            !editHistoryMode ||
+            editedAtIndex + 1 >= editHistoryRef.current.length
+          }
+        >
+          <Icon icon="chevron-left" alt={t`Previous`} />
+        </button>{' '}
+        {editHistoryRef.current.length - editedAtIndex} /{' '}
+        {editHistoryRef.current.length}{' '}
+        <button
+          type="button"
+          class="plain4"
+          onClick={() => {
+            nextEditedAt();
+          }}
+          disabled={!editHistoryMode || editedAtIndex <= 0}
+        >
+          <Icon icon="chevron-right" alt={t`Next`} />
+        </button>
+      </span>
+      <button
+        type="button"
+        class="plain3"
+        onClick={() => {
+          exitEditHistory();
+        }}
+      >
+        <Icon icon="exit" alt={t`Exit`} />
+      </button>
+    </div>
+  );
+}

src/components/edit-profile-sheet.jsx

@@ -0,0 +1,336 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+import { api } from '../utils/api';
+import states from '../utils/states';
+
+import Icon from './icon';
+import Loader from './loader';
+
+const SUPPORTED_IMAGE_FORMATS = [
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+];
+const SUPPORTED_IMAGE_FORMATS_STR = SUPPORTED_IMAGE_FORMATS.join(',');
+
+function FieldsAttributesRow({ name, value, disabled, index: i }) {
+  const [hasValue, setHasValue] = useState(!!value);
+  return (
+    <tr>
+      <td>
+        <input
+          type="text"
+          name={`fields_attributes[${i}][name]`}
+          defaultValue={name}
+          disabled={disabled}
+          maxLength={255}
+          required={hasValue}
+          dir="auto"
+        />
+      </td>
+      <td>
+        <input
+          type="text"
+          name={`fields_attributes[${i}][value]`}
+          defaultValue={value}
+          disabled={disabled}
+          maxLength={255}
+          onChange={(e) => setHasValue(!!e.currentTarget.value)}
+          dir="auto"
+        />
+      </td>
+    </tr>
+  );
+}
+
+function EditProfileSheet({ onClose = () => {} }) {
+  const { t } = useLingui();
+  const { masto } = api();
+  const [uiState, setUIState] = useState('loading');
+  const [account, setAccount] = useState(null);
+  const [headerPreview, setHeaderPreview] = useState(null);
+  const [avatarPreview, setAvatarPreview] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const acc = await masto.v1.accounts.verifyCredentials();
+        setAccount(acc);
+        setUIState('default');
+      } catch (e) {
+        console.error(e);
+        setUIState('error');
+      }
+    })();
+  }, []);
+
+  console.log('EditProfileSheet', account);
+  const { displayName, source, avatar, header } = account || {};
+  const { note, fields } = source || {};
+  const fieldsAttributesRef = useRef(null);
+
+  const avatarMediaAttachments = [
+    ...(avatar ? [{ type: 'image', url: avatar }] : []),
+    ...(avatarPreview ? [{ type: 'image', url: avatarPreview }] : []),
+  ];
+  const headerMediaAttachments = [
+    ...(header ? [{ type: 'image', url: header }] : []),
+    ...(headerPreview ? [{ type: 'image', url: headerPreview }] : []),
+  ];
+
+  return (
+    <div class="sheet" id="edit-profile-container">
+      {!!onClose && (
+        <button type="button" class="sheet-close" onClick={onClose}>
+          <Icon icon="x" alt={t`Close`} />
+        </button>
+      )}
+      <header>
+        <b>
+          <Trans>Edit profile</Trans>
+        </b>
+      </header>
+      <main>
+        {uiState === 'loading' ? (
+          <p class="ui-state">
+            <Loader abrupt />
+          </p>
+        ) : (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              const formData = new FormData(e.target);
+              const header = formData.get('header');
+              const avatar = formData.get('avatar');
+              const displayName = formData.get('display_name');
+              const note = formData.get('note');
+              const fieldsAttributesFields =
+                fieldsAttributesRef.current.querySelectorAll(
+                  'input[name^="fields_attributes"]',
+                );
+              const fieldsAttributes = [];
+              fieldsAttributesFields.forEach((field) => {
+                const name = field.name;
+                const [_, index, key] =
+                  name.match(/fields_attributes\[(\d+)\]\[(.+)\]/) || [];
+                const value = field.value ? field.value.trim() : '';
+                if (index && key && value) {
+                  if (!fieldsAttributes[index]) fieldsAttributes[index] = {};
+                  fieldsAttributes[index][key] = value;
+                }
+              });
+              // Fill in the blanks
+              fieldsAttributes.forEach((field) => {
+                if (field.name && !field.value) {
+                  field.value = '';
+                }
+              });
+
+              (async () => {
+                try {
+                  const newAccount = await masto.v1.accounts.updateCredentials({
+                    header,
+                    avatar,
+                    displayName,
+                    note,
+                    fieldsAttributes,
+                  });
+                  console.log('updated account', newAccount);
+                  onClose?.({
+                    state: 'success',
+                    account: newAccount,
+                  });
+                } catch (e) {
+                  console.error(e);
+                  alert(e?.message || t`Unable to update profile.`);
+                }
+              })();
+            }}
+          >
+            <div class="edit-profile-media-container">
+              <label>
+                <Trans>Header picture</Trans>{' '}
+                <input
+                  type="file"
+                  name="header"
+                  accept={SUPPORTED_IMAGE_FORMATS_STR}
+                  onChange={(e) => {
+                    const file = e.target.files[0];
+                    if (file) {
+                      const blob = URL.createObjectURL(file);
+                      setHeaderPreview(blob);
+                    }
+                  }}
+                />
+              </label>
+              <div class="edit-profile-media-field">
+                {header ? (
+                  <div
+                    class="edit-media"
+                    tabIndex="0"
+                    onClick={() => {
+                      states.showMediaModal = {
+                        mediaAttachments: headerMediaAttachments,
+                        mediaIndex: 0,
+                      };
+                    }}
+                  >
+                    <img src={header} alt="" />
+                  </div>
+                ) : (
+                  <div class="edit-media"></div>
+                )}
+                {headerPreview && (
+                  <>
+                    <Icon icon="arrow-right" />
+                    <div
+                      class="edit-media"
+                      tabIndex="0"
+                      onClick={() => {
+                        states.showMediaModal = {
+                          mediaAttachments: headerMediaAttachments,
+                          mediaIndex: 1,
+                        };
+                      }}
+                    >
+                      <img src={headerPreview} alt="" />
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+            <div class="edit-profile-media-container">
+              <label>
+                <Trans>Profile picture</Trans>{' '}
+                <input
+                  type="file"
+                  name="avatar"
+                  accept={SUPPORTED_IMAGE_FORMATS_STR}
+                  onChange={(e) => {
+                    const file = e.target.files[0];
+                    if (file) {
+                      const blob = URL.createObjectURL(file);
+                      setAvatarPreview(blob);
+                    }
+                  }}
+                />
+              </label>
+              <div class="edit-profile-media-field">
+                {avatar ? (
+                  <div
+                    class="edit-media"
+                    tabIndex="0"
+                    onClick={() => {
+                      states.showMediaModal = {
+                        mediaAttachments: avatarMediaAttachments,
+                        mediaIndex: 0,
+                      };
+                    }}
+                  >
+                    <img src={avatar} alt="" />
+                  </div>
+                ) : (
+                  <div class="edit-media"></div>
+                )}
+                {avatarPreview && (
+                  <>
+                    <Icon icon="arrow-right" />
+                    <div
+                      class="edit-media"
+                      tabIndex="0"
+                      onClick={() => {
+                        states.showMediaModal = {
+                          mediaAttachments: avatarMediaAttachments,
+                          mediaIndex: 1,
+                        };
+                      }}
+                    >
+                      <img src={avatarPreview} alt="" />
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+            <p>
+              <label>
+                <Trans>Name</Trans>{' '}
+                <input
+                  type="text"
+                  name="display_name"
+                  defaultValue={displayName}
+                  maxLength={30}
+                  disabled={uiState === 'loading'}
+                  dir="auto"
+                />
+              </label>
+            </p>
+            <p>
+              <label>
+                <Trans>Bio</Trans>
+                <textarea
+                  defaultValue={note}
+                  name="note"
+                  maxLength={500}
+                  rows="5"
+                  disabled={uiState === 'loading'}
+                  dir="auto"
+                />
+              </label>
+            </p>
+            {/* Table for fields; name and values are in fields, min 4 rows */}
+            <p>
+              <Trans>Extra fields</Trans>
+            </p>
+            <table ref={fieldsAttributesRef}>
+              <thead>
+                <tr>
+                  <th>
+                    <Trans>Label</Trans>
+                  </th>
+                  <th>
+                    <Trans>Content</Trans>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {Array.from({ length: Math.max(4, fields.length) }).map(
+                  (_, i) => {
+                    const { name = '', value = '' } = fields[i] || {};
+                    return (
+                      <FieldsAttributesRow
+                        key={i}
+                        name={name}
+                        value={value}
+                        index={i}
+                        disabled={uiState === 'loading'}
+                      />
+                    );
+                  },
+                )}
+              </tbody>
+            </table>
+            <footer>
+              <button
+                type="button"
+                class="light"
+                disabled={uiState === 'loading'}
+                onClick={() => {
+                  onClose?.();
+                }}
+              >
+                <Trans>Cancel</Trans>
+              </button>
+              <button type="submit" disabled={uiState === 'loading'}>
+                <Trans>Save</Trans>
+              </button>
+            </footer>
+          </form>
+        )}
+      </main>
+    </div>
+  );
+}
+
+export default EditProfileSheet;

src/components/embed-modal.css

@@ -0,0 +1,31 @@
+.embed-modal-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+
+  .top-controls {
+    padding: 16px;
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+    pointer-events: auto;
+  }
+
+  .embed-content {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    iframe {
+      pointer-events: auto;
+      max-width: 100%;
+      max-height: 100%;
+      width: max(var(--width), var(--main-width));
+      height: auto;
+      aspect-ratio: var(--aspect-ratio);
+    }
+  }
+}

src/components/embed-modal.jsx

@@ -0,0 +1,37 @@
+import './embed-modal.css';
+
+import { Trans, useLingui } from '@lingui/react/macro';
+
+import Icon from './icon';
+
+function EmbedModal({ html, url, width, height, onClose = () => {} }) {
+  const { t } = useLingui();
+  return (
+    <div class="embed-modal-container">
+      <div class="top-controls">
+        <button type="button" class="light" onClick={() => onClose()}>
+          <Icon icon="x" alt={t`Close`} />
+        </button>
+        {url && (
+          <a href={url} target="_blank" rel="noopener" class="button plain">
+            <span>
+              <Trans>Open in new window</Trans>
+            </span>{' '}
+            <Icon icon="external" />
+          </a>
+        )}
+      </div>
+      <div
+        class="embed-content"
+        dangerouslySetInnerHTML={{ __html: html }}
+        style={{
+          '--width': width + 'px',
+          '--height': height + 'px',
+          '--aspect-ratio': `${width}/${height}`,
+        }}
+      />
+    </div>
+  );
+}
+
+export default EmbedModal;

src/components/emoji-text.jsx

@@ -1,29 +1,33 @@
-function EmojiText({ text, emojis }) {
+import { memo } from 'preact/compat';
+
+import mem from '../utils/mem';
+
+import CustomEmoji from './custom-emoji';
+
+const shortcodesRegexp = mem((shortcodes) => {
+  return new RegExp(`:(${shortcodes.join('|')}):`, 'g');
+});
+
+function EmojiText({ text, emojis, staticEmoji }) {
   if (!text) return '';
   if (!emojis?.length) return text;
   if (text.indexOf(':') === -1) return text;
-  const regex = new RegExp(
-    `:(${emojis.map((e) => e.shortcode).join('|')}):`,
-    'g',
-  );
-  const elements = text.split(regex).map((word) => {
+  // const regex = new RegExp(
+  //   `:(${emojis.map((e) => e.shortcode).join('|')}):`,
+  //   'g',
+  // );
+  const regex = shortcodesRegexp(emojis.map((e) => e.shortcode));
+  const elements = text.split(regex).map((word, i) => {
     const emoji = emojis.find((e) => e.shortcode === word);
     if (emoji) {
       const { url, staticUrl } = emoji;
       return (
-        <picture>
-          <source srcset={staticUrl} media="(prefers-reduced-motion: reduce)" />
-          <img
-            key={word}
-            src={url}
-            alt={word}
-            class="shortcode-emoji emoji"
-            width="16"
-            height="16"
-            loading="lazy"
-            decoding="async"
-          />
-        </picture>
+        <CustomEmoji
+          staticUrl={staticEmoji ? undefined : staticUrl}
+          alt={word}
+          url={staticEmoji ? staticUrl || url : url}
+          key={word + '-' + i} // Handle >= 2 same shortcodes
+        />
       );
     }
     return word;
@@ -31,4 +35,11 @@ function EmojiText({ text, emojis }) {
   return elements;
 }
 
-export default EmojiText;
+export default mem(EmojiText);
+
+// export default memo(
+//   EmojiText,
+//   (oldProps, newProps) =>
+//     oldProps.text === newProps.text &&
+//     oldProps.emojis?.length === newProps.emojis?.length,
+// );

src/components/endorsements.jsx

@@ -0,0 +1,107 @@
+import { Trans } from '@lingui/react/macro';
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+import { api } from '../utils/api';
+import { fetchRelationships } from '../utils/relationships';
+import supports from '../utils/supports';
+
+import AccountBlock from './account-block';
+import Loader from './loader';
+
+const ENDORSEMENTS_LIMIT = 80;
+
+function Endorsements({
+  accountID: id,
+  info,
+  open = false,
+  onlyOpenIfHasEndorsements = false,
+}) {
+  const { masto } = api();
+  const endorsementsContainer = useRef();
+  const [endorsementsUIState, setEndorsementsUIState] = useState('default');
+  const [endorsements, setEndorsements] = useState([]);
+  const [relationshipsMap, setRelationshipsMap] = useState({});
+  useEffect(() => {
+    if (!supports('@mastodon/endorsements')) return;
+    if (!open) return;
+    (async () => {
+      setEndorsementsUIState('loading');
+      try {
+        const accounts = await masto.v1.accounts.$select(id).endorsements.list({
+          limit: ENDORSEMENTS_LIMIT,
+        });
+        console.log({ endorsements: accounts });
+        if (!accounts.length) {
+          setEndorsementsUIState('default');
+          return;
+        }
+        setEndorsements(accounts);
+        setEndorsementsUIState('default');
+        setTimeout(() => {
+          endorsementsContainer.current.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+          });
+        }, 300);
+
+        const relationships = await fetchRelationships(
+          accounts,
+          relationshipsMap,
+        );
+        if (relationships) {
+          setRelationshipsMap(relationships);
+        }
+      } catch (e) {
+        console.error(e);
+        setEndorsementsUIState('error');
+      }
+    })();
+  }, [open, id]);
+
+  const reallyOpen = onlyOpenIfHasEndorsements
+    ? open && endorsements.length > 0
+    : open;
+
+  if (!reallyOpen) return null;
+
+  return (
+    <div class="shazam-container">
+      <div class="shazam-container-inner">
+        <div class="endorsements-container" ref={endorsementsContainer}>
+          <h3>
+            <Trans>Profiles featured by @{info.username}</Trans>
+          </h3>
+          {endorsementsUIState === 'loading' ? (
+            <p class="ui-state">
+              <Loader abrupt />
+            </p>
+          ) : endorsements.length > 0 ? (
+            <ul
+              class={`endorsements ${
+                endorsements.length > 10 ? 'expanded' : ''
+              }`}
+            >
+              {endorsements.map((account) => (
+                <li>
+                  <AccountBlock
+                    key={account.id}
+                    account={account}
+                    showStats
+                    avatarSize="xxl"
+                    relationship={relationshipsMap[account.id]}
+                  />
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p class="ui-state insignificant">
+              <Trans>No featured profiles.</Trans>
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Endorsements;

src/components/file-picker-input.jsx

@@ -0,0 +1,55 @@
+import { plural } from '@lingui/core/macro';
+
+function FilePickerInput({
+  hidden,
+  supportedMimeTypes,
+  maxMediaAttachments,
+  mediaAttachments,
+  disabled = false,
+  setMediaAttachments,
+}) {
+  return (
+    <input
+      type="file"
+      hidden={hidden}
+      accept={supportedMimeTypes?.join(',')}
+      multiple={
+        maxMediaAttachments === undefined ||
+        maxMediaAttachments - mediaAttachments >= 2
+      }
+      disabled={disabled}
+      onChange={(e) => {
+        const files = e.target.files;
+        if (!files) return;
+
+        const mediaFiles = Array.from(files).map((file) => ({
+          file,
+          type: file.type,
+          size: file.size,
+          url: URL.createObjectURL(file),
+          id: null, // indicate uploaded state
+          description: null,
+        }));
+        console.log('MEDIA ATTACHMENTS', files, mediaFiles);
+
+        // Validate max media attachments
+        if (mediaAttachments.length + mediaFiles.length > maxMediaAttachments) {
+          alert(
+            plural(maxMediaAttachments, {
+              one: 'You can only attach up to 1 file.',
+              other: 'You can only attach up to # files.',
+            }),
+          );
+        } else {
+          setMediaAttachments((attachments) => {
+            return attachments.concat(mediaFiles);
+          });
+        }
+        // Reset
+        e.target.value = '';
+      }}
+    />
+  );
+}
+
+export default FilePickerInput;

src/components/follow-request-buttons.jsx

@@ -1,3 +1,4 @@
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useState } from 'preact/hooks';
 
 import { api } from '../utils/api';
@@ -6,6 +7,7 @@ import Icon from './icon';
 import Loader from './loader';
 
 function FollowRequestButtons({ accountID, onChange }) {
+  const { t } = useLingui();
   const { masto } = api();
   const [uiState, setUIState] = useState('default');
   const [requestState, setRequestState] = useState(null); // accept, reject
@@ -38,7 +40,7 @@ function FollowRequestButtons({ accountID, onChange }) {
           })();
         }}
       >
-        Accept
+        <Trans>Accept</Trans>
       </button>{' '}
       <button
         type="button"
@@ -64,14 +66,18 @@ function FollowRequestButtons({ accountID, onChange }) {
           })();
         }}
       >
-        Reject
+        <Trans>Reject</Trans>
       </button>
       <span class="follow-request-states">
         {hasRelationship && requestState ? (
           requestState === 'accept' ? (
-            <Icon icon="check-circle" alt="Accepted" class="follow-accepted" />
+            <Icon
+              icon="check-circle"
+              alt={t`Accepted`}
+              class="follow-accepted"
+            />
           ) : (
-            <Icon icon="x-circle" alt="Rejected" class="follow-rejected" />
+            <Icon icon="x-circle" alt={t`Rejected`} class="follow-rejected" />
           )
         ) : (
           <Loader hidden={uiState !== 'loading'} />

src/components/generic-accounts.css

@@ -1,4 +1,39 @@
 #generic-accounts-container {
+  .post-preview {
+    --max-height: 120px;
+    max-height: var(--max-height);
+    overflow: hidden;
+    margin-block: 8px;
+    border: 1px solid var(--outline-color);
+    border-radius: 8px;
+    pointer-events: none;
+
+    .status {
+      font-size: calc(var(--text-size) * 0.9);
+      mask-image: linear-gradient(
+        to bottom,
+        black calc(var(--max-height) / 2),
+        transparent calc(var(--max-height) - 8px)
+      );
+      filter: saturate(0.5);
+    }
+
+    &:is(a) {
+      pointer-events: auto;
+      display: block;
+      text-decoration: none;
+      color: inherit;
+
+      &:hover {
+        border-color: var(--outline-hover-color);
+      }
+
+      > * {
+        pointer-events: none;
+      }
+    }
+  }
+
   .accounts-list {
     --list-gap: 16px;
     list-style: none;
@@ -27,13 +62,13 @@
         border-top: var(--hairline-width) solid var(--divider-color);
         position: absolute;
         bottom: calc(-1 * var(--list-gap) / 2);
-        left: 40px;
-        right: 0;
+        inset-inline-start: 40px;
+        inset-inline-end: 0;
       }
 
       &:has(.reactions-block):before {
         /* avatar + reactions + gap */
-        left: calc(40px + 16px + 8px);
+        inset-inline-start: calc(40px + 16px + 8px);
       }
     }
 

src/components/generic-accounts.jsx

@@ -1,5 +1,6 @@
 import './generic-accounts.css';
 
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { InView } from 'react-intersection-observer';
 import { useSnapshot } from 'valtio';
@@ -11,19 +12,23 @@ import useLocationChange from '../utils/useLocationChange';
 
 import AccountBlock from './account-block';
 import Icon from './icon';
+import Link from './link';
 import Loader from './loader';
+import Status from './status';
 
 export default function GenericAccounts({
   instance,
   excludeRelationshipAttrs = [],
+  postID,
   onClose = () => {},
+  blankCopy,
 }) {
+  const { t } = useLingui();
   const { masto, instance: currentInstance } = api();
   const isCurrentInstance = instance ? instance === currentInstance : true;
   const snapStates = useSnapshot(states);
   ``;
   const [uiState, setUIState] = useState('default');
-  const [accounts, setAccounts] = useState([]);
   const [showMore, setShowMore] = useState(false);
 
   useLocationChange(onClose);
@@ -40,6 +45,10 @@ export default function GenericAccounts({
     showReactions,
   } = snapStates.showGenericAccounts;
 
+  const [accounts, setAccounts] = useState(
+    staticAccounts?.length ? staticAccounts : [],
+  );
+
   const [relationshipsMap, setRelationshipsMap] = useState({});
 
   const loadRelationships = async (accounts) => {
@@ -56,7 +65,7 @@ export default function GenericAccounts({
 
   const loadAccounts = (firstLoad) => {
     if (!fetchAccounts) return;
-    if (firstLoad) setAccounts([]);
+    if (firstLoad && !accounts?.length) setAccounts([]);
     setUIState('loading');
     (async () => {
       try {
@@ -111,14 +120,19 @@ export default function GenericAccounts({
 
   const firstLoad = useRef(true);
   useEffect(() => {
-    if (staticAccounts?.length > 0) {
-      setAccounts(staticAccounts);
-      loadRelationships(staticAccounts);
+    if (accounts?.length > 0) {
+      // setAccounts(staticAccounts);
+      if (fetchAccounts) {
+        loadAccounts(true);
+        firstLoad.current = false;
+      } else {
+        loadRelationships(accounts);
+      }
     } else {
       loadAccounts(true);
       firstLoad.current = false;
     }
-  }, [staticAccounts, fetchAccounts]);
+  }, [fetchAccounts]);
 
   useEffect(() => {
     if (firstLoad.current) return;
@@ -129,15 +143,25 @@ export default function GenericAccounts({
     }
   }, [snapStates.reloadGenericAccounts.counter]);
 
+  const post = states.statuses[postID];
+
   return (
     <div id="generic-accounts-container" class="sheet" tabindex="-1">
       <button type="button" class="sheet-close" onClick={onClose}>
-        <Icon icon="x" />
+        <Icon icon="x" alt={t`Close`} />
       </button>
       <header>
-        <h2>{heading || 'Accounts'}</h2>
+        <h2>{heading || t`Accounts`}</h2>
       </header>
       <main>
+        {post && (
+          <Link
+            to={`/${instance || currentInstance}/s/${post.id}`}
+            class="post-preview"
+          >
+            <Status status={post} size="s" readOnly />
+          </Link>
+        )}
         {accounts.length > 0 ? (
           <>
             <ul class="accounts-list">
@@ -187,11 +211,13 @@ export default function GenericAccounts({
                     class="plain block"
                     onClick={() => loadAccounts()}
                   >
-                    Show more&hellip;
+                    <Trans>Show more…</Trans>
                   </button>
                 </InView>
               ) : (
-                <p class="ui-state insignificant">The end.</p>
+                <p class="ui-state insignificant">
+                  <Trans>The end.</Trans>
+                </p>
               )
             ) : (
               uiState === 'loading' && (
@@ -206,9 +232,13 @@ export default function GenericAccounts({
             <Loader abrupt />
           </p>
         ) : uiState === 'error' ? (
-          <p class="ui-state">Error loading accounts</p>
+          <p class="ui-state">
+            <Trans>Error loading accounts</Trans>
+          </p>
         ) : (
-          <p class="ui-state insignificant">Nothing to show</p>
+          <p class="ui-state insignificant">
+            {blankCopy || t`Nothing to show`}
+          </p>
         )}
       </main>
     </div>

src/components/gif-picker-modal.jsx

@@ -0,0 +1,251 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useDebouncedCallback } from 'use-debounce';
+
+import poweredByGiphyURL from '../assets/powered-by-giphy.svg';
+
+import Icon from './icon';
+import Loader from './loader';
+
+const { PHANPY_GIPHY_API_KEY: GIPHY_API_KEY } = import.meta.env;
+
+const GIFS_PER_PAGE = 20;
+
+function GIFPickerModal({ onClose = () => {}, onSelect = () => {} }) {
+  const { i18n, t } = useLingui();
+  const [uiState, setUIState] = useState('default');
+  const [results, setResults] = useState([]);
+  const formRef = useRef(null);
+  const qRef = useRef(null);
+  const currentOffset = useRef(0);
+  const scrollableRef = useRef(null);
+
+  function fetchGIFs({ offset }) {
+    console.log('fetchGIFs', { offset });
+    if (!qRef.current?.value) return;
+    setUIState('loading');
+    scrollableRef.current?.scrollTo?.({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    });
+    (async () => {
+      try {
+        const query = {
+          api_key: GIPHY_API_KEY,
+          q: qRef.current.value,
+          rating: 'g',
+          limit: GIFS_PER_PAGE,
+          bundle: 'messaging_non_clips',
+          offset,
+          lang: i18n.locale || 'en',
+        };
+        const response = await fetch(
+          'https://api.giphy.com/v1/gifs/search?' + new URLSearchParams(query),
+          {
+            referrerPolicy: 'no-referrer',
+          },
+        ).then((r) => r.json());
+        currentOffset.current = response.pagination?.offset || 0;
+        setResults(response);
+        setUIState('results');
+      } catch (e) {
+        setUIState('error');
+        console.error(e);
+      }
+    })();
+  }
+
+  useEffect(() => {
+    qRef.current?.focus();
+  }, []);
+
+  const debouncedOnInput = useDebouncedCallback(() => {
+    fetchGIFs({ offset: 0 });
+  }, 1000);
+
+  return (
+    <div id="gif-picker-sheet" class="sheet">
+      {!!onClose && (
+        <button type="button" class="sheet-close" onClick={onClose}>
+          <Icon icon="x" alt={t`Close`} />
+        </button>
+      )}
+      <header>
+        <form
+          ref={formRef}
+          onSubmit={(e) => {
+            e.preventDefault();
+            fetchGIFs({ offset: 0 });
+          }}
+        >
+          <input
+            ref={qRef}
+            type="search"
+            name="q"
+            placeholder={t`Search GIFs`}
+            required
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            spellCheck="false"
+            dir="auto"
+            onInput={debouncedOnInput}
+          />
+          <input
+            type="image"
+            class="powered-button"
+            src={poweredByGiphyURL}
+            width="86"
+            height="30"
+            alt={t`Powered by GIPHY`}
+          />
+        </form>
+      </header>
+      <main ref={scrollableRef} class={uiState === 'loading' ? 'loading' : ''}>
+        {uiState === 'default' && (
+          <div class="ui-state">
+            <p class="insignificant">
+              <Trans>Type to search GIFs</Trans>
+            </p>
+          </div>
+        )}
+        {uiState === 'loading' && !results?.data?.length && (
+          <div class="ui-state">
+            <Loader abrupt />
+          </div>
+        )}
+        {results?.data?.length > 0 ? (
+          <>
+            <ul>
+              {results.data.map((gif) => {
+                const { id, images, title, alt_text } = gif;
+                const {
+                  fixed_height_small,
+                  fixed_height_downsampled,
+                  fixed_height,
+                  original,
+                } = images;
+                const theImage = fixed_height_small?.url
+                  ? fixed_height_small
+                  : fixed_height_downsampled?.url
+                    ? fixed_height_downsampled
+                    : fixed_height;
+                let { url, webp, width, height } = theImage;
+                if (+height > 100) {
+                  width = (width / height) * 100;
+                  height = 100;
+                }
+                const urlObj = URL.parse(url);
+                const strippedURL = urlObj.origin + urlObj.pathname;
+                let strippedWebP;
+                if (webp) {
+                  const webpObj = URL.parse(webp);
+                  strippedWebP = webpObj.origin + webpObj.pathname;
+                }
+                return (
+                  <li key={id}>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const { mp4, url } = original;
+                        const theURL = mp4 || url;
+                        const urlObj = URL.parse(theURL);
+                        const strippedURL = urlObj.origin + urlObj.pathname;
+                        onClose();
+                        onSelect({
+                          url: strippedURL,
+                          type: mp4 ? 'video/mp4' : 'image/gif',
+                          alt_text: alt_text || title,
+                        });
+                      }}
+                    >
+                      <figure
+                        style={{
+                          '--figure-width': width + 'px',
+                          // width: width + 'px'
+                        }}
+                      >
+                        <picture>
+                          {strippedWebP && (
+                            <source srcset={strippedWebP} type="image/webp" />
+                          )}
+                          <img
+                            src={strippedURL}
+                            width={width}
+                            height={height}
+                            loading="lazy"
+                            decoding="async"
+                            alt={alt_text}
+                            referrerpolicy="no-referrer"
+                            onLoad={(e) => {
+                              e.target.style.backgroundColor = 'transparent';
+                            }}
+                          />
+                        </picture>
+                        <figcaption>{alt_text || title}</figcaption>
+                      </figure>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+            <p class="pagination">
+              {results.pagination?.offset > 0 && (
+                <button
+                  type="button"
+                  class="light small"
+                  disabled={uiState === 'loading'}
+                  onClick={() => {
+                    fetchGIFs({
+                      offset: results.pagination?.offset - GIFS_PER_PAGE,
+                    });
+                  }}
+                >
+                  <Icon icon="chevron-left" />
+                  <span>
+                    <Trans>Previous</Trans>
+                  </span>
+                </button>
+              )}
+              <span />
+              {results.pagination?.offset + results.pagination?.count <
+                results.pagination?.total_count && (
+                <button
+                  type="button"
+                  class="light small"
+                  disabled={uiState === 'loading'}
+                  onClick={() => {
+                    fetchGIFs({
+                      offset: results.pagination?.offset + GIFS_PER_PAGE,
+                    });
+                  }}
+                >
+                  <span>
+                    <Trans>Next</Trans>
+                  </span>{' '}
+                  <Icon icon="chevron-right" />
+                </button>
+              )}
+            </p>
+          </>
+        ) : (
+          uiState === 'results' && (
+            <div class="ui-state">
+              <p>No results</p>
+            </div>
+          )
+        )}
+        {uiState === 'error' && (
+          <div class="ui-state">
+            <p>
+              <Trans>Error loading GIFs</Trans>
+            </p>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
+
+export default GIFPickerModal;

src/components/icon-sprite-manager.jsx

@@ -0,0 +1,110 @@
+import { createContext } from 'preact';
+import { memo } from 'preact/compat';
+import { useCallback, useContext, useState } from 'preact/hooks';
+
+const IconSpriteContext = createContext();
+
+export const ICON_NAMESPACE = 'sprite-icon';
+
+export function IconSpriteProvider({ children }) {
+  const [loadedIcons, setLoadedIcons] = useState(new Set());
+  const [iconData, setIconData] = useState({});
+
+  const loadIcon = useCallback(
+    async (iconName) => {
+      if (loadedIcons.has(iconName)) {
+        return;
+      }
+
+      try {
+        const { ICONS } = await import('./ICONS');
+        const iconBlock = ICONS[iconName];
+
+        if (!iconBlock) {
+          console.warn(`Icon ${iconName} not found`);
+          return;
+        }
+
+        let iconModule;
+        if (Array.isArray(iconBlock)) {
+          iconModule = iconBlock[0];
+        } else if (typeof iconBlock === 'object') {
+          iconModule = iconBlock.module;
+        } else {
+          iconModule = iconBlock;
+        }
+
+        const iconResult = await iconModule();
+        const iconDataResult = iconResult.default;
+
+        setIconData((prev) => ({ ...prev, [iconName]: iconDataResult }));
+        setLoadedIcons((prev) => new Set([...prev, iconName]));
+      } catch (error) {
+        console.warn(`Failed to load icon ${iconName}:`, error);
+      }
+    },
+    [loadedIcons],
+  );
+
+  const isIconLoaded = useCallback(
+    (iconName) => loadedIcons.has(iconName),
+    [loadedIcons],
+  );
+
+  const contextValue = {
+    loadIcon,
+    isIconLoaded,
+    loadedIcons,
+    iconData,
+  };
+
+  return (
+    <IconSpriteContext.Provider value={contextValue}>
+      {children}
+      <IconSprite />
+    </IconSpriteContext.Provider>
+  );
+}
+
+function IconSprite() {
+  const { loadedIcons, iconData } = useIconSprite();
+
+  if (loadedIcons.size === 0) {
+    return null;
+  }
+
+  return (
+    <svg style={{ display: 'none' }} aria-hidden="true">
+      <defs>
+        {Array.from(loadedIcons).map((iconName) => {
+          const data = iconData[iconName];
+          if (!data) return null;
+          return <Symbol key={iconName} iconName={iconName} data={data} />;
+        })}
+      </defs>
+    </svg>
+  );
+}
+
+const Symbol = memo(
+  function ({ iconName, data }) {
+    return (
+      <symbol
+        id={`${ICON_NAMESPACE}-${iconName}`}
+        viewBox={`0 0 ${data.width} ${data.height}`}
+        dangerouslySetInnerHTML={{ __html: data.body }}
+      />
+    );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.iconName === nextProps.iconName;
+  },
+);
+
+export function useIconSprite() {
+  const context = useContext(IconSpriteContext);
+  if (!context) {
+    throw new Error('useIconSprite must be used within IconSpriteProvider');
+  }
+  return context;
+}

src/components/icon.jsx

@@ -1,6 +1,11 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { memo } from 'preact/compat';
+import { useEffect } from 'preact/hooks';
+
+import { ICONS } from './ICONS';
+import { ICON_NAMESPACE, useIconSprite } from './icon-sprite-manager';
 
 const SIZES = {
+  xs: 8,
   s: 12,
   m: 16,
   l: 20,
@@ -8,107 +13,7 @@ const SIZES = {
   xxl: 32,
 };
 
-export const ICONS = {
-  x: () => import('@iconify-icons/mingcute/close-line'),
-  heart: () => import('@iconify-icons/mingcute/heart-line'),
-  bookmark: () => import('@iconify-icons/mingcute/bookmark-line'),
-  'check-circle': () => import('@iconify-icons/mingcute/check-circle-line'),
-  'x-circle': () => import('@iconify-icons/mingcute/close-circle-line'),
-  transfer: () => import('@iconify-icons/mingcute/transfer-4-line'),
-  rocket: () => import('@iconify-icons/mingcute/rocket-line'),
-  'arrow-left': () => import('@iconify-icons/mingcute/arrow-left-line'),
-  'arrow-right': () => import('@iconify-icons/mingcute/arrow-right-line'),
-  'arrow-up': () => import('@iconify-icons/mingcute/arrow-up-line'),
-  'arrow-down': () => import('@iconify-icons/mingcute/arrow-down-line'),
-  earth: () => import('@iconify-icons/mingcute/earth-line'),
-  lock: () => import('@iconify-icons/mingcute/lock-line'),
-  unlock: () => import('@iconify-icons/mingcute/unlock-line'),
-  'eye-close': () => import('@iconify-icons/mingcute/eye-close-line'),
-  'eye-open': () => import('@iconify-icons/mingcute/eye-2-line'),
-  message: () => import('@iconify-icons/mingcute/mail-line'),
-  comment: () => import('@iconify-icons/mingcute/chat-3-line'),
-  comment2: () => import('@iconify-icons/mingcute/comment-2-line'),
-  home: () => import('@iconify-icons/mingcute/home-3-line'),
-  notification: () => import('@iconify-icons/mingcute/notification-line'),
-  follow: () => import('@iconify-icons/mingcute/user-follow-line'),
-  'follow-add': () => import('@iconify-icons/mingcute/user-add-line'),
-  poll: [() => import('@iconify-icons/mingcute/chart-bar-line'), '90deg'],
-  pencil: () => import('@iconify-icons/mingcute/pencil-line'),
-  quill: () => import('@iconify-icons/mingcute/quill-pen-line'),
-  at: () => import('@iconify-icons/mingcute/at-line'),
-  attachment: () => import('@iconify-icons/mingcute/attachment-line'),
-  upload: () => import('@iconify-icons/mingcute/upload-3-line'),
-  gear: () => import('@iconify-icons/mingcute/settings-3-line'),
-  more: () => import('@iconify-icons/mingcute/more-3-line'),
-  external: () => import('@iconify-icons/mingcute/external-link-line'),
-  popout: () => import('@iconify-icons/mingcute/external-link-line'),
-  popin: [() => import('@iconify-icons/mingcute/external-link-line'), '180deg'],
-  plus: () => import('@iconify-icons/mingcute/add-circle-line'),
-  'chevron-left': () => import('@iconify-icons/mingcute/left-line'),
-  'chevron-right': () => import('@iconify-icons/mingcute/right-line'),
-  'chevron-down': () => import('@iconify-icons/mingcute/down-line'),
-  reply: [
-    () => import('@iconify-icons/mingcute/share-forward-line'),
-    '180deg',
-    'horizontal',
-  ],
-  thread: () => import('@iconify-icons/mingcute/route-line'),
-  group: () => import('@iconify-icons/mingcute/group-line'),
-  bot: () => import('@iconify-icons/mingcute/android-2-line'),
-  menu: () => import('@iconify-icons/mingcute/rows-4-line'),
-  list: () => import('@iconify-icons/mingcute/list-check-line'),
-  search: () => import('@iconify-icons/mingcute/search-2-line'),
-  hashtag: () => import('@iconify-icons/mingcute/hashtag-line'),
-  info: () => import('@iconify-icons/mingcute/information-line'),
-  shortcut: () => import('@iconify-icons/mingcute/lightning-line'),
-  user: () => import('@iconify-icons/mingcute/user-4-line'),
-  following: () => import('@iconify-icons/mingcute/walk-line'),
-  pin: () => import('@iconify-icons/mingcute/pin-line'),
-  bus: () => import('@iconify-icons/mingcute/bus-2-line'),
-  link: () => import('@iconify-icons/mingcute/link-2-line'),
-  history: () => import('@iconify-icons/mingcute/history-line'),
-  share: () => import('@iconify-icons/mingcute/share-2-line'),
-  sparkles: () => import('@iconify-icons/mingcute/sparkles-line'),
-  sparkles2: () => import('@iconify-icons/mingcute/sparkles-2-line'),
-  exit: () => import('@iconify-icons/mingcute/exit-line'),
-  translate: () => import('@iconify-icons/mingcute/translate-line'),
-  play: () => import('@iconify-icons/mingcute/play-fill'),
-  trash: () => import('@iconify-icons/mingcute/delete-2-line'),
-  mute: () => import('@iconify-icons/mingcute/volume-mute-line'),
-  unmute: () => import('@iconify-icons/mingcute/volume-line'),
-  block: () => import('@iconify-icons/mingcute/forbid-circle-line'),
-  unblock: [
-    () => import('@iconify-icons/mingcute/forbid-circle-line'),
-    '180deg',
-  ],
-  flag: () => import('@iconify-icons/mingcute/flag-4-line'),
-  time: () => import('@iconify-icons/mingcute/time-line'),
-  refresh: () => import('@iconify-icons/mingcute/refresh-2-line'),
-  emoji2: () => import('@iconify-icons/mingcute/emoji-2-line'),
-  filter: () => import('@iconify-icons/mingcute/filter-2-line'),
-  chart: () => import('@iconify-icons/mingcute/chart-line-line'),
-  react: () => import('@iconify-icons/mingcute/react-line'),
-  layout4: () => import('@iconify-icons/mingcute/layout-4-line'),
-  layout5: () => import('@iconify-icons/mingcute/layout-5-line'),
-  announce: () => import('@iconify-icons/mingcute/announcement-line'),
-  alert: () => import('@iconify-icons/mingcute/alert-line'),
-  round: () => import('@iconify-icons/mingcute/round-fill'),
-  'arrow-up-circle': () =>
-    import('@iconify-icons/mingcute/arrow-up-circle-line'),
-  'arrow-down-circle': () =>
-    import('@iconify-icons/mingcute/arrow-down-circle-line'),
-  clipboard: () => import('@iconify-icons/mingcute/clipboard-line'),
-  'account-edit': () => import('@iconify-icons/mingcute/user-edit-line'),
-  'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
-  keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
-  cloud: () => import('@iconify-icons/mingcute/cloud-line'),
-  month: () => import('@iconify-icons/mingcute/calendar-month-line'),
-  media: () => import('@iconify-icons/mingcute/photo-album-line'),
-  speak: () => import('@iconify-icons/mingcute/radar-line'),
-  building: () => import('@iconify-icons/mingcute/building-5-line'),
-};
-
-const ICONDATA = {};
+const INVALID_ID_CHARS_REGEX = /[^a-zA-Z0-9]/g;
 
 function Icon({
   icon,
@@ -118,52 +23,74 @@ function Icon({
   class: className = '',
   style = {},
 }) {
+  title = title || alt;
+  const { loadIcon, isIconLoaded } = useIconSprite();
+
   if (!icon) return null;
 
   const iconSize = SIZES[size];
   let iconBlock = ICONS[icon];
-  let rotate, flip;
-  if (Array.isArray(iconBlock)) {
-    [iconBlock, rotate, flip] = iconBlock;
+  if (!iconBlock) {
+    console.warn(`Icon ${icon} not found`);
+    return null;
   }
 
-  const [iconData, setIconData] = useState(ICONDATA[icon]);
-  const currentIcon = useRef(icon);
+  let rotate,
+    flip,
+    rtl = false;
+  if (Array.isArray(iconBlock)) {
+    [iconBlock, rotate, flip] = iconBlock;
+  } else if (typeof iconBlock === 'object') {
+    ({ rotate, flip, rtl } = iconBlock);
+    iconBlock = iconBlock.module;
+  }
+
+  const sanitizedTitle = title?.replace(INVALID_ID_CHARS_REGEX, '-');
+  const titleID = `${ICON_NAMESPACE}-title-${icon}-${sanitizedTitle}`;
+
   useEffect(() => {
-    if (iconData && currentIcon.current === icon) return;
-    (async () => {
-      const iconB = await iconBlock();
-      setIconData(iconB.default);
-      ICONDATA[icon] = iconB.default;
-    })();
-    currentIcon.current = icon;
+    if (!isIconLoaded(icon)) {
+      loadIcon(icon);
+    }
   }, [icon]);
 
+  const loaded = isIconLoaded(icon);
+
   return (
     <span
-      class={`icon ${className}`}
-      title={title || alt}
+      class={`icon ${className} ${rtl ? 'rtl-flip' : ''}`}
       style={{
         width: `${iconSize}px`,
         height: `${iconSize}px`,
         ...style,
       }}
+      data-icon={icon}
+      title={loaded ? undefined : title || undefined}
     >
-      {iconData && (
+      {loaded && (
         <svg
           width={iconSize}
           height={iconSize}
-          viewBox={`0 0 ${iconData.width} ${iconData.height}`}
-          dangerouslySetInnerHTML={{ __html: iconData.body }}
+          role={title ? 'img' : 'presentation'}
+          aria-labelledby={titleID}
           style={{
             transform: `${rotate ? `rotate(${rotate})` : ''} ${
               flip ? `scaleX(-1)` : ''
             }`,
           }}
-        />
+        >
+          {title ? <title id={titleID}>{title}</title> : null}
+          <use href={`#${ICON_NAMESPACE}-${icon}`} />
+        </svg>
       )}
     </span>
   );
 }
 
-export default Icon;
+export default memo(Icon, (prevProps, nextProps) => {
+  return (
+    prevProps.icon === nextProps.icon &&
+    prevProps.title === nextProps.title &&
+    prevProps.alt === nextProps.alt
+  );
+});

src/components/intersection-view.jsx

@@ -0,0 +1,29 @@
+import { useLayoutEffect, useRef, useState } from 'preact/hooks';
+
+const IntersectionView = ({ children, root = null, fallback = null }) => {
+  const ref = useRef();
+  const [show, setShow] = useState(false);
+  useLayoutEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry.isIntersecting) {
+          setShow(true);
+          observer.unobserve(ref.current);
+        }
+      },
+      {
+        root,
+        rootMargin: `${screen.height}px`,
+      },
+    );
+    if (ref.current) observer.observe(ref.current);
+    return () => {
+      if (ref.current) observer.unobserve(ref.current);
+    };
+  }, []);
+
+  return show ? children : <div ref={ref}>{fallback}</div>;
+};
+
+export default IntersectionView;

src/components/intl-segmenter-suspense.jsx

@@ -0,0 +1,36 @@
+import { shouldPolyfill } from '@formatjs/intl-segmenter/should-polyfill';
+import { Suspense } from 'preact/compat';
+import { useEffect, useState } from 'preact/hooks';
+
+import Loader from './loader';
+
+const supportsIntlSegmenter = !shouldPolyfill();
+
+// Preload IntlSegmenter
+setTimeout(() => {
+  queueMicrotask(() => {
+    if (!supportsIntlSegmenter) {
+      import('@formatjs/intl-segmenter/polyfill-force').catch(() => {});
+    }
+  });
+}, 1000);
+
+export default function IntlSegmenterSuspense({ children }) {
+  if (supportsIntlSegmenter) {
+    return <Suspense fallback={<Loader />}>{children}</Suspense>;
+  }
+
+  const [polyfillLoaded, setPolyfillLoaded] = useState(false);
+  useEffect(() => {
+    (async () => {
+      await import('@formatjs/intl-segmenter/polyfill-force');
+      setPolyfillLoaded(true);
+    })();
+  }, []);
+
+  return polyfillLoaded ? (
+    <Suspense fallback={<Loader />}>{children}</Suspense>
+  ) : (
+    <Loader />
+  );
+}

src/components/keyboard-shortcuts-help.css

@@ -30,12 +30,15 @@
       transparent
     );
     text-shadow: 0 1px var(--bg-color);
-    box-shadow: 0 1px var(--drop-shadow-color),
-      0 1px 1px var(--drop-shadow-color), 0 1px 8px var(--drop-shadow-color),
+    box-shadow:
+      0 1px var(--drop-shadow-color),
+      0 1px 1px var(--drop-shadow-color),
+      0 1px 8px var(--drop-shadow-color),
       inset 0 1px var(--bg-blur-color);
 
     &:active {
-      box-shadow: 0 1px 4px var(--drop-shadow-color),
+      box-shadow:
+        0 1px 4px var(--drop-shadow-color),
         inset 0 1px var(--bg-blur-color);
       transform: translateY(1px);
       filter: brightness(0.95);

src/components/keyboard-shortcuts-help.jsx

@@ -1,5 +1,6 @@
 import './keyboard-shortcuts-help.css';
 
+import { Trans, useLingui } from '@lingui/react/macro';
 import { memo } from 'preact/compat';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSnapshot } from 'valtio';
@@ -10,6 +11,7 @@ import Icon from './icon';
 import Modal from './modal';
 
 export default memo(function KeyboardShortcutsHelp() {
+  const { t } = useLingui();
   const snapStates = useSnapshot(states);
 
   function onClose() {
@@ -17,167 +19,190 @@ export default memo(function KeyboardShortcutsHelp() {
   }
 
   useHotkeys(
-    '?, shift+?',
-    (e) => {
+    '?',
+    () => {
       console.log('help');
       states.showKeyboardShortcutsHelp = true;
     },
     {
+      useKey: true,
       ignoreEventWhen: (e) => {
-        const hasModal = !!document.querySelector('#modal-container > *');
-        return hasModal;
+        const isCatchUpPage = /\/catchup/i.test(location.hash);
+        return isCatchUpPage || e.metaKey || e.ctrlKey || e.altKey;
+        // const hasModal = !!document.querySelector('#modal-container > *');
+        // return hasModal;
       },
     },
   );
 
   return (
     !!snapStates.showKeyboardShortcutsHelp && (
-      <Modal class="light" onClose={onClose}>
+      <Modal onClose={onClose}>
         <div id="keyboard-shortcuts-help-container" class="sheet" tabindex="-1">
           <button type="button" class="sheet-close" onClick={onClose}>
-            <Icon icon="x" />
+            <Icon icon="x" alt={t`Close`} />
           </button>
           <header>
-            <h2>Keyboard shortcuts</h2>
+            <h2>
+              <Trans>Keyboard shortcuts</Trans>
+            </h2>
           </header>
           <main>
             <table>
-              {[
-                {
-                  action: 'Keyboard shortcuts help',
-                  keys: <kbd>?</kbd>,
-                },
-                {
-                  action: 'Next post',
-                  keys: <kbd>j</kbd>,
-                },
-                {
-                  action: 'Previous post',
-                  keys: <kbd>k</kbd>,
-                },
-                {
-                  action: 'Skip carousel to next post',
-                  keys: (
-                    <>
-                      <kbd>Shift</kbd> + <kbd>j</kbd>
-                    </>
-                  ),
-                },
-                {
-                  action: 'Skip carousel to previous post',
-                  keys: (
-                    <>
-                      <kbd>Shift</kbd> + <kbd>k</kbd>
-                    </>
-                  ),
-                },
-                {
-                  action: 'Open post details',
-                  keys: (
-                    <>
-                      <kbd>Enter</kbd> or <kbd>o</kbd>
-                    </>
-                  ),
-                },
-                {
-                  action: (
-                    <>
-                      Expand content warning or
-                      <br />
-                      toggle expanded/collapsed thread
-                    </>
-                  ),
-                  keys: <kbd>x</kbd>,
-                },
-                {
-                  action: 'Close post or dialogs',
-                  keys: (
-                    <>
-                      <kbd>Esc</kbd> or <kbd>Backspace</kbd>
-                    </>
-                  ),
-                },
-                {
-                  action: 'Focus column in multi-column mode',
-                  keys: (
-                    <>
-                      <kbd>1</kbd> to <kbd>9</kbd>
-                    </>
-                  ),
-                },
-                {
-                  action: 'Compose new post',
-                  keys: <kbd>c</kbd>,
-                },
-                {
-                  action: 'Compose new post (new window)',
-                  className: 'insignificant',
-                  keys: (
-                    <>
-                      <kbd>Shift</kbd> + <kbd>c</kbd>
-                    </>
-                  ),
-                },
-                {
-                  action: 'Send post',
-                  keys: (
-                    <>
-                      <kbd>Ctrl</kbd> + <kbd>Enter</kbd> or <kbd>⌘</kbd> +{' '}
-                      <kbd>Enter</kbd>
-                    </>
-                  ),
-                },
-                {
-                  action: 'Search',
-                  keys: <kbd>/</kbd>,
-                },
-                {
-                  action: 'Reply',
-                  keys: <kbd>r</kbd>,
-                },
-                {
-                  action: 'Reply (new window)',
-                  className: 'insignificant',
-                  keys: (
-                    <>
-                      <kbd>Shift</kbd> + <kbd>r</kbd>
-                    </>
-                  ),
-                },
-                {
-                  action: 'Like (favourite)',
-                  keys: (
-                    <>
-                      <kbd>l</kbd> or <kbd>f</kbd>
-                    </>
-                  ),
-                },
-                {
-                  action: 'Boost',
-                  keys: (
-                    <>
-                      <kbd>Shift</kbd> + <kbd>b</kbd>
-                    </>
-                  ),
-                },
-                {
-                  action: 'Bookmark',
-                  keys: <kbd>d</kbd>,
-                },
-                {
-                  action: 'Toggle Cloak mode',
-                  keys: (
-                    <>
-                      <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>k</kbd>
-                    </>
-                  ),
-                },
-              ].map(({ action, className, keys }) => (
-                <tr key={action}>
-                  <th class={className}>{action}</th>
-                  <td>{keys}</td>
-                </tr>
-              ))}
+              <tbody>
+                {[
+                  {
+                    action: t`Keyboard shortcuts help`,
+                    keys: <kbd>?</kbd>,
+                  },
+                  {
+                    action: t`Next post`,
+                    keys: <kbd>j</kbd>,
+                  },
+                  {
+                    action: t`Previous post`,
+                    keys: <kbd>k</kbd>,
+                  },
+                  {
+                    action: t`Skip carousel to next post`,
+                    keys: (
+                      <Trans>
+                        <kbd>Shift</kbd> + <kbd>j</kbd>
+                      </Trans>
+                    ),
+                  },
+                  {
+                    action: t`Skip carousel to previous post`,
+                    keys: (
+                      <Trans>
+                        <kbd>Shift</kbd> + <kbd>k</kbd>
+                      </Trans>
+                    ),
+                  },
+                  {
+                    action: t`Load new posts`,
+                    keys: <kbd>.</kbd>,
+                  },
+                  {
+                    action: t`Open post details`,
+                    keys: (
+                      <Trans>
+                        <kbd>Enter</kbd> or <kbd>o</kbd>
+                      </Trans>
+                    ),
+                  },
+                  {
+                    action: (
+                      <Trans>
+                        Expand content warning or
+                        <br />
+                        toggle expanded/collapsed thread
+                      </Trans>
+                    ),
+                    keys: <kbd>x</kbd>,
+                  },
+                  {
+                    action: t`Close post or dialogs`,
+                    keys: (
+                      <Trans>
+                        <kbd>Esc</kbd> or <kbd>Backspace</kbd>
+                      </Trans>
+                    ),
+                  },
+                  {
+                    action: t`Focus column in multi-column mode`,
+                    keys: (
+                      <Trans>
+                        <kbd>1</kbd> to <kbd>9</kbd>
+                      </Trans>
+                    ),
+                  },
+                  {
+                    action: t`Focus next column in multi-column mode`,
+                    keys: <kbd>]</kbd>,
+                  },
+                  {
+                    action: t`Focus previous column in multi-column mode`,
+                    keys: <kbd>[</kbd>,
+                  },
+                  {
+                    action: t`Compose new post`,
+                    keys: <kbd>c</kbd>,
+                  },
+                  {
+                    action: t`Compose new post (new window)`,
+                    className: 'insignificant',
+                    keys: (
+                      <Trans>
+                        <kbd>Shift</kbd> + <kbd>c</kbd>
+                      </Trans>
+                    ),
+                  },
+                  {
+                    action: t`Send post`,
+                    keys: (
+                      <Trans>
+                        <kbd>Ctrl</kbd> + <kbd>Enter</kbd> or <kbd>⌘</kbd> +{' '}
+                        <kbd>Enter</kbd>
+                      </Trans>
+                    ),
+                  },
+                  {
+                    action: t`Search`,
+                    keys: <kbd>/</kbd>,
+                  },
+                  {
+                    action: t`Reply`,
+                    keys: <kbd>r</kbd>,
+                  },
+                  {
+                    action: t`Reply (new window)`,
+                    className: 'insignificant',
+                    keys: (
+                      <Trans>
+                        <kbd>Shift</kbd> + <kbd>r</kbd>
+                      </Trans>
+                    ),
+                  },
+                  {
+                    action: t`Like (favourite)`,
+                    keys: (
+                      <Trans>
+                        <kbd>l</kbd> or <kbd>f</kbd>
+                      </Trans>
+                    ),
+                  },
+                  {
+                    action: t`Boost`,
+                    keys: (
+                      <Trans>
+                        <kbd>Shift</kbd> + <kbd>b</kbd>
+                      </Trans>
+                    ),
+                  },
+                  {
+                    action: t`Quote`,
+                    keys: <kbd>q</kbd>,
+                  },
+                  {
+                    action: t`Bookmark`,
+                    keys: <kbd>d</kbd>,
+                  },
+                  {
+                    action: t`Toggle Cloak mode`,
+                    keys: (
+                      <Trans>
+                        <kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>k</kbd>
+                      </Trans>
+                    ),
+                  },
+                ].map(({ action, className, keys }) => (
+                  <tr key={action}>
+                    <th class={className}>{action}</th>
+                    <td>{keys}</td>
+                  </tr>
+                ))}
+              </tbody>
             </table>
           </main>
         </div>