chore: bump version to 4.11.138 [skip ci]

FileSaver fails in Capacitor WebView, so save via MediaStore; clear tray notifications when sync reports rooms as read on another device, and improve collapsed notification avatars with conversation shortcuts.

.gitea/workflows/build.yml

@@ -15,30 +15,34 @@ jobs:
     outputs:
       version: ${{ steps.bump.outputs.VERSION }}
       should_build: ${{ steps.bump.outputs.SHOULD_BUILD }}
-
+    
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
           fetch-depth: 0
           token: ${{ secrets.GITHUB_TOKEN }}
-
+      
       - name: Bump patch version
         id: bump
         run: |
           CURRENT=$(grep -Po '"version":\s*"\K[^"]+' package.json | head -1)
           echo "Current version: $CURRENT"
+          
           MAJOR=$(echo $CURRENT | cut -d. -f1)
           MINOR=$(echo $CURRENT | cut -d. -f2)
           PATCH=$(echo $CURRENT | cut -d. -f3)
           NEW_PATCH=$((PATCH + 1))
           NEW_VERSION="${MAJOR}.${MINOR}.${NEW_PATCH}"
           echo "New version: $NEW_VERSION"
+          
           sed -i "s/\"version\": \"${CURRENT}\"/\"version\": \"${NEW_VERSION}\"/" package.json
+          
           grep '"version"' package.json | head -1
+          
           echo "VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
           echo "SHOULD_BUILD=true" >> $GITHUB_OUTPUT
-
+      
       - name: Commit and push version bump
         run: |
           git config user.name "GitHub Actions"
@@ -51,69 +55,54 @@ jobs:
     runs-on: ubuntu-latest
     needs: increment-version
     if: always() && (needs.increment-version.outputs.should_build == 'true' || needs.increment-version.result == 'skipped')
-
+    
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
         with:
           submodules: false
           ref: ${{ github.ref_name }}
-
+      
       - name: Checkout submodules manually
         run: git submodule update --init --recursive
-
+      
       - name: Pull latest (after version bump)
         if: github.ref == 'refs/heads/master'
         run: git pull origin master
-
+      
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
           node-version: '22'
-
+      
       - name: Setup Java
         uses: actions/setup-java@v4
         with:
           distribution: temurin
           java-version: '21'
-
+      
       - name: Setup Android SDK
         uses: android-actions/setup-android@v3
-
+      
       - name: Install dependencies (root)
+        run: npm ci --prefer-offline
+      
+      - name: Apply overlay
+        run: npm run apply-overlay
+      
+      - name: Install dependencies (cinny)
+        working-directory: ./cinny
         run: npm install --prefer-offline
-
+      
-      - name: Clean previous cinny dist
+      - name: Clean previous builds
         run: rm -rf cinny/dist
-
+      
       - name: Make gradlew executable
         run: chmod +x android/gradlew
-
+      
-      - name: Apply overlay and build Android APK
+      - name: Build Android APK
         run: npm run android:apk:linux
 
-      - name: Upload APK
-        uses: actions/upload-artifact@v3
-        with:
-          name: Paarrot-Android-debug.apk
-          path: android/app/build/outputs/apk/debug/app-debug.apk
-
-  create-release:
-    runs-on: ubuntu-latest
-    needs: [increment-version, build-android]
-    if: always() && needs.build-android.result == 'success'
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: ${{ github.ref_name }}
-
-      - name: Pull latest (after version bump)
-        if: github.ref == 'refs/heads/master'
-        run: git pull origin master
-
       - name: Get version
         id: version
         run: |
@@ -125,13 +114,22 @@ jobs:
           echo "VERSION=$VERSION" >> $GITHUB_OUTPUT
           echo "Version: $VERSION"
 
+      - name: Prepare release files
+        run: |
+          mkdir -p release-files
+          find android/app/build/outputs/apk/debug -type f -name "Paarrot-*.apk" -exec cp {} release-files/ \;
+          ls -la release-files/
+          test -n "$(ls -A release-files/*.apk 2>/dev/null)"
+
       - name: Check if tag exists
         id: tag_check
         run: |
           VERSION="${{ steps.version.outputs.VERSION }}"
           if git rev-parse "v$VERSION" >/dev/null 2>&1; then
+            echo "Tag v$VERSION already exists"
             echo "exists=true" >> $GITHUB_OUTPUT
           else
+            echo "Tag v$VERSION does not exist"
             echo "exists=false" >> $GITHUB_OUTPUT
           fi
 
@@ -143,22 +141,9 @@ jobs:
           git tag -a "v${{ steps.version.outputs.VERSION }}" -m "Release v${{ steps.version.outputs.VERSION }}"
           git push origin "v${{ steps.version.outputs.VERSION }}"
 
-      - name: Download all artifacts
+      # Upload via the internal Gitea API. actions/upload-artifact times out against
-        uses: actions/download-artifact@v3
+      # git.ruv.wtf:443 from this runner; synbox:8418 is reachable on the LAN.
-        with:
+      - name: Create or Update Gitea Release
-          path: artifacts
-
-      - name: Prepare release files
-        run: |
-          mkdir -p release-files
-          find artifacts -type f \( -name "*.exe" -o -name "*.AppImage" -o -name "*.nupkg" -o -name "RELEASES*" \) -exec cp {} release-files/ \;
-          APK=$(find artifacts -type f -name "*.apk" | head -1)
-          if [ -n "$APK" ]; then
-            cp "$APK" "release-files/Paarrot.apk"
-          fi
-          ls -la release-files/
-
-      - name: Create or Update Release
         env:
           GITEA_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
@@ -179,10 +164,12 @@ jobs:
               "${API_BASE}/repos/${REPO}/releases" | jq -r '.id')
             echo "Created release with ID: ${RELEASE_ID}"
           else
-            echo "Release exists with ID: ${RELEASE_ID}, deleting existing assets..."
+            echo "Release exists with ID: ${RELEASE_ID}"
+            echo "Deleting existing assets..."
             ASSETS=$(curl -s -H "Authorization: token ${GITEA_TOKEN}" \
               "${API_BASE}/repos/${REPO}/releases/${RELEASE_ID}/assets" | jq -r '.[].id')
             for ASSET_ID in $ASSETS; do
+              echo "Deleting asset ${ASSET_ID}..."
               curl -s -X DELETE -H "Authorization: token ${GITEA_TOKEN}" \
                 "${API_BASE}/repos/${REPO}/releases/${RELEASE_ID}/assets/${ASSET_ID}"
             done
@@ -190,7 +177,7 @@ jobs:
 
           echo "Uploading assets..."
           for FILE in release-files/*; do
-            FILENAME=$(basename "$FILE")
+            FILENAME="Paarrot-${VERSION}.apk"
             echo "Uploading ${FILENAME}..."
             curl -s -X POST \
               -H "Authorization: token ${GITEA_TOKEN}" \
@@ -200,4 +187,44 @@ jobs:
             echo ""
           done
 
-          echo "Release complete!"
+          echo "Gitea release complete!"
+
+      - name: Create GitHub Release
+        env:
+          GH_TOKEN: ${{ secrets.GHTOKEN }}
+        run: |
+          VERSION="${{ steps.version.outputs.VERSION }}"
+          TAG_NAME="v${VERSION}"
+          GITHUB_REPO="Paarrot/Paarrot-Mobile"
+
+          RELEASE_ID=$(curl -s -H "Authorization: token ${GH_TOKEN}" \
+            "https://api.github.com/repos/${GITHUB_REPO}/releases/tags/${TAG_NAME}" | jq -r '.id // empty')
+
+          if [ -z "$RELEASE_ID" ]; then
+            echo "Creating new GitHub release for ${TAG_NAME}..."
+            RELEASE_ID=$(curl -s -X POST \
+              -H "Authorization: token ${GH_TOKEN}" \
+              -H "Content-Type: application/json" \
+              -d "{\"tag_name\": \"${TAG_NAME}\", \"name\": \"Release ${TAG_NAME}\", \"body\": \"Release ${VERSION}\", \"draft\": false, \"prerelease\": false}" \
+              "https://api.github.com/repos/${GITHUB_REPO}/releases" | jq -r '.id')
+            echo "Created GitHub release with ID: ${RELEASE_ID}"
+          else
+            echo "GitHub release exists with ID: ${RELEASE_ID}"
+          fi
+
+          echo "Uploading assets to GitHub..."
+          UPLOAD_URL=$(curl -s -H "Authorization: token ${GH_TOKEN}" \
+            "https://api.github.com/repos/${GITHUB_REPO}/releases/${RELEASE_ID}" | jq -r '.upload_url' | sed 's/{?name,label}//')
+
+          for FILE in release-files/*; do
+            FILENAME="Paarrot-${VERSION}.apk"
+            echo "Uploading ${FILENAME} to GitHub..."
+            curl -s -X POST \
+              -H "Authorization: token ${GH_TOKEN}" \
+              -H "Content-Type: application/octet-stream" \
+              --data-binary "@${FILE}" \
+              "${UPLOAD_URL}?name=${FILENAME}"
+            echo ""
+          done
+
+          echo "GitHub release complete!"

.gitea/workflows/clean.yml

@@ -0,0 +1,30 @@
+name: Clean
+
+on:
+  workflow_dispatch:
+
+jobs:
+  clean:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: false
+
+      - name: Clean build artifacts
+        run: |
+          echo "Cleaning cinny dist..."
+          rm -rf cinny/dist
+
+          echo "Cleaning Android build outputs..."
+          rm -rf android/app/build
+
+          echo "Cleaning root node_modules..."
+          rm -rf node_modules
+
+          echo "Cleaning cinny node_modules..."
+          rm -rf cinny/node_modules
+
+          echo "Done."

.github/FUNDING.yml

@@ -1,3 +0,0 @@
-github: ajbura
-liberapay: ajbura
-open_collective: cinny

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,58 +0,0 @@
-name: 🐞 Bug Report
-description: Report a bug
-labels: 'type: bug'
-
-body:
-  - type: markdown
-    attributes:
-      value: |
-        ## First of all
-        1. Please search for [existing issues](https://github.com/cinnyapp/cinny-desktop/issues?q=is%3Aissue) about this problem first.
-        2. Make sure Cinny is up to date.
-        3. Make sure it's an issue with Cinny and not something else you are using.
-        4. Remember to be friendly.
-
-  - type: textarea
-    id: description
-    attributes:
-      label: Describe the bug
-      description: A clear description of what the bug is. Include screenshots if applicable.
-      placeholder: Bug description
-    validations:
-      required: true
-
-  - type: textarea
-    id: reproduction
-    attributes:
-      label: Reproduction
-      description: Steps to reproduce the behavior.
-      placeholder: |
-        1. Go to ...
-        2. Click on ...
-        3. See error
-
-  - type: textarea
-    id: expected-behavior
-    attributes:
-      label: Expected behavior
-      description: A clear description of what you expected to happen.
-
-  - type: textarea
-    id: info
-    attributes:
-      label: Platform and versions
-      description: "Provide OS, browser and Cinny version with your Homeserver."
-      placeholder: |
-       1. OS: [e.g. Windows 10, MacOS]
-       2. Cinny version: [e.g. 1.8.1]
-       3. Matrix homeserver: [e.g. matrix.org]
-       4. Downloaded from: [e.g. GitHub, Flatpak]
-      render: shell
-    validations:
-      required: true
-
-  - type: textarea
-    id: context
-    attributes:
-      label: Additional context
-      description: Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,4 +0,0 @@
-contact_links:
-  - name: 💬 Matrix Chat
-    url: https://matrix.to/#/#cinny:matrix.org
-    about: Ask questions and talk to other Cinny users and the maintainers

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,34 +0,0 @@
-name: 💡 Feature Request
-description: Suggest an idea
-labels: 'type: feature'
-
-body:
-  - type: textarea
-    id: problem
-    attributes:
-      label: Describe the problem
-      description: A clear description of the problem this feature would solve
-      placeholder: "I'm always frustrated when..."
-    validations:
-      required: true
-
-  - type: textarea
-    id: solution
-    attributes:
-      label: "Describe the solution you'd like"
-      description: A clear description of what change you would like
-      placeholder: "I would like to..."
-    validations:
-      required: true
-
-  - type: textarea
-    id: alternatives
-    attributes:
-      label: Alternatives considered
-      description: "Any alternative solutions you've considered"
-
-  - type: textarea
-    id: context
-    attributes:
-      label: Additional context
-      description: Add any other context about the problem here.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,22 +0,0 @@
-<!-- Please read https://github.com/cinnyapp/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->
-
-### Description
-<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
-
-
-Fixes #
-
-#### Type of change
-
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] This change requires a documentation update
-
-### Checklist:
-
-- [ ] My code follows the style guidelines of this project
-- [ ] I have performed a self-review of my own code
-- [ ] I have commented my code, particularly in hard-to-understand areas
-- [ ] I have made corresponding changes to the documentation
-- [ ] My changes generate no new warnings

.github/SECURITY.md

@@ -1,3 +0,0 @@
-# Reporting a Vulnerability
-
-**If you've found a security vulnerability, please report it to cinnyapp@gmail.com**

.github/dependabot.yml

@@ -1,30 +0,0 @@
-# Docs: <https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/customizing-dependency-updates>
-
-version: 2
-updates:
-#   - package-ecosystem: npm
-#     directory: /
-#     schedule:
-#       interval: weekly
-#       day: "tuesday"
-#       time: "01:00"
-#       timezone: "Asia/Kolkata"
-#     open-pull-requests-limit: 15
-
-  - package-ecosystem: github-actions
-    directory: /
-    schedule:
-      interval: weekly
-      day: "tuesday"
-      time: "01:00"
-      timezone: "Asia/Kolkata"
-    open-pull-requests-limit: 5
-
-#   - package-ecosystem: cargo
-#     directory: /src-tauri/
-#     schedule:
-#       interval: weekly
-#       day: "tuesday"
-#       time: "01:00"
-#       timezone: "Asia/Kolkata"
-#     open-pull-requests-limit: 5

.github/renovate.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended",
-    ":dependencyDashboardApproval"
-  ],
-  "labels": [
-    "Dependencies"
-  ],
-  "packageRules": [
-    {
-      "matchUpdateTypes": [
-        "lockFileMaintenance"
-      ]
-    }
-  ],
-  "lockFileMaintenance": {
-    "enabled": true
-  },
-  "dependencyDashboard": true
-}

.github/workflows/archive.yml

@@ -1,22 +0,0 @@
-name: "Upload zip-archive"
-on:
-  release:
-    types: [published]
-
-jobs:
-  zip-archive:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4.2.0
-        with:
-          submodules: true
-      - name: Create zip including submodules
-        run: |
-          cd ..
-          zip ${{ github.event.repository.name }}/${{ github.event.repository.name }}-${{ github.ref_name }}.zip ${{ github.event.repository.name }} -r
-      - name: Upload zip to release
-        uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836
-        with:
-          files: |
-            ${{ github.event.repository.name }}-${{ github.ref_name }}.zip

.github/workflows/cla.yml

@@ -1,36 +0,0 @@
-name: 'CLA Assistant'
-on:
-  issue_comment:
-    types: [created]
-  pull_request_target:
-    types: [opened, closed, synchronize]
-
-jobs:
-  CLAssistant:
-    runs-on: ubuntu-latest
-    steps:
-      - name: 'CLA Assistant'
-        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
-        # Beta Release
-        uses: cla-assistant/github-action@v2.6.1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          # the below token should have repo scope and must be manually added by you in the repository's secret
-          PERSONAL_ACCESS_TOKEN: ${{ secrets.CLA_PAT }}
-        with:
-          path-to-signatures: 'signatures.json'
-          path-to-document: 'https://github.com/cinnyapp/cla/blob/main/cla.md' # e.g. a CLA or a DCO document
-          # branch should not be protected
-          branch: 'main'
-          allowlist: ajbura,bot*
-
-          #below are the optional inputs - If the optional inputs are not given, then default values will be taken
-          remote-organization-name: cinnyapp
-          remote-repository-name: cla
-          #create-file-commit-message: 'For example: Creating file for storing CLA Signatures'
-          #signed-commit-message: 'For example: $contributorName has signed the CLA in #$pullRequestNo'
-          #custom-notsigned-prcomment: 'pull request comment with Introductory message to ask new contributors to sign'
-          #custom-pr-sign-comment: 'The signature to be committed in order to sign the CLA'
-          #custom-allsigned-prcomment: 'pull request comment when all contributors has signed, defaults to **CLA Assistant Lite bot** All Contributors have signed the CLA.'
-          #lock-pullrequest-aftermerge: false - if you don't want this bot to automatically lock the pull request after merging (default - true)
-          #use-dco-flag: true - If you are using DCO instead of CLA

.github/workflows/lockfile.yml

@@ -1,26 +0,0 @@
-name: NPM Lockfile Changes
-
-on:
-  pull_request:
-    paths:
-      - 'package-lock.json'
-
-jobs:
-  lockfile_changes:
-    runs-on: ubuntu-latest
-    # Permission overwrite is required for Dependabot PRs, see "Common issues" below.
-    permissions:
-      contents: read
-      pull-requests: write
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4.2.0
-      - name: NPM Lockfile Changes
-        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          # Optional inputs, can be deleted safely if you are happy with default values.
-          collapsibleThreshold: 25
-          failOnDowngrade: false
-          path: package-lock.json
-          updateComment: true

.github/workflows/test.yml

@@ -1,40 +0,0 @@
-name: "Build pull request"
-on:
-  #pull_request:
-    #types: ['opened', 'synchronize']
-
-jobs:
-  publish-tauri:
-    strategy:
-      fail-fast: false
-      matrix:
-        platform: [macos-latest, ubuntu-20.04, windows-latest]
-
-    runs-on: ${{ matrix.platform }}
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4.2.0
-      with: 
-        submodules: true
-    - name: Setup node
-      uses: actions/setup-node@v4.4.0
-      with:
-        node-version: 20.12.2
-        cache: 'npm'
-    - name: Install Rust stable
-      uses: actions-rs/toolchain@v1.0.7
-      with:
-        toolchain: stable
-    - name: Install dependencies (ubuntu only)
-      if: matrix.platform == 'ubuntu-20.04'
-      run: |
-        sudo apt-get update
-        sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf
-    - name: Install cinny dependencies
-      run: cd cinny && npm ci
-    - name: Install tauri dependencies
-      run: npm ci
-    - name: Build desktop app with Tauri
-      uses: tauri-apps/tauri-action@v0.5.14
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitmodules

@@ -1,3 +1,3 @@
 [submodule "cinny"]
 	path = cinny
-	url = http://synbox.ruv.wtf:8418/litruv/cinny.git
+	url = ../cinny.git

README.md

@@ -1,7 +1,7 @@
-# Paarrot
+# Paarrot 
 
 Paarrot is a Matrix client focusing primarily on simple, elegant and secure interface. The desktop app is built with Electron and based on Cinny.
- 
+
 ## Download
 
 Installers for Windows and Linux can be downloaded from [releases](http://synbox.ruv.wtf:8418/litruv/cinny-desktop/releases).

android/.gitignore

@@ -53,9 +53,7 @@ captures/
 .idea/navEditor.xml
 
 # Keystore files
-# Uncomment the following lines if you do not want to check your keystore files in.
+*.jks
-#*.jks
-#*.keystore
 
 # External native build folder generated in Android Studio 2.2 and later
 .externalNativeBuild

android/SIGNING_SETUP.md

@@ -0,0 +1,61 @@
+# Android App Signing Setup
+ 
+## Why This Matters
+Android requires apps to be signed with the same key for updates to work. Without proper signing, users cannot update your app - they must uninstall and reinstall, losing all data.
+
+## Setup Instructions
+
+### 1. Create a Keystore (if you don't have one)
+
+Run this command in the `android/` directory:
+
+```bash
+keytool -genkey -v -keystore paarrot-release.keystore -alias paarrot -keyalg RSA -keysize 2048 -validity 10000
+```
+
+You'll be asked for:
+- Keystore password (remember this!)
+- Key password (remember this!)  
+- Your name, organization, etc.
+
+**IMPORTANT**: Back up this keystore file and remember the passwords! If you lose either, you cannot update your app.
+
+### 2. Create keystore.properties
+
+Copy the example file:
+
+```bash
+cp keystore.properties.example keystore.properties
+```
+
+Then edit `keystore.properties` and fill in:
+- `storeFile`: path to your keystore (e.g., `paarrot-release.keystore`)
+- `storePassword`: the keystore password you set
+- `keyAlias`: the alias (e.g., `paarrot`)
+- `keyPassword`: the key password you set
+
+### 3. Verify
+
+The file `keystore.properties` should be gitignored (check `.gitignore`).
+
+### 4. Build
+
+Now your release builds will be properly signed:
+
+```bash
+cd android
+./gradlew assembleRelease
+```
+
+The signed APK will be in: `app/build/outputs/apk/release/`
+
+## Troubleshooting
+
+### "Updates not installing"
+- You're using a different keystore than the original APK
+- Solution: Use the same keystore that was used for the first release
+
+### "keystore.properties not found"
+- Normal for debug builds
+- Only needed for release builds
+- Create the file following step 2 above

android/app/build.gradle

@@ -1,25 +1,61 @@
 apply plugin: 'com.android.application'
+apply plugin: 'kotlin-android'
+
+// Load keystore properties
+def keystorePropertiesFile = rootProject.file("keystore.properties")
+def keystoreProperties = new Properties()
+if (keystorePropertiesFile.exists()) {
+    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
+}
 
 android {
     namespace = "com.paarrot.app"
     compileSdk = rootProject.ext.compileSdkVersion
+    
+    signingConfigs {
+        release {
+            if (keystorePropertiesFile.exists()) {
+                storeFile file(keystoreProperties['storeFile'])
+                storePassword keystoreProperties['storePassword']
+                keyAlias keystoreProperties['keyAlias']
+                keyPassword keystoreProperties['keyPassword']
+            }
+        }
+    }
+    
     defaultConfig {
         applicationId "com.paarrot.app"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
+        versionCode 1783582912
-        versionName "1.0"
+        versionName "2026-07-09.074152.772"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
              // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
             ignoreAssetsPattern = '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
         }
+        if (keystorePropertiesFile.exists()) {
+            signingConfig signingConfigs.release
+        }
     }
     buildTypes {
+        debug {
+            if (keystorePropertiesFile.exists()) {
+                signingConfig signingConfigs.release
+            }
+        }
         release {
             minifyEnabled false
             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+            if (keystorePropertiesFile.exists()) {
+                signingConfig signingConfigs.release
+            }
+        }
+    }
+    applicationVariants.all { variant ->
+        variant.outputs.all { output ->
+            outputFileName = "Paarrot-${variant.versionName}.apk"
         }
     }
 }
@@ -36,6 +72,8 @@ dependencies {
     implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
     implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
     implementation project(':capacitor-android')
+    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3'
+    implementation 'org.unifiedpush.android:connector:3.3.2'
     testImplementation "junit:junit:$junitVersion"
     androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
     androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"

android/app/src/main/AndroidManifest.xml

@@ -22,6 +22,24 @@
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
 
+            <intent-filter>
+                <action android:name="android.intent.action.SEND" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <data android:mimeType="text/*" />
+            </intent-filter>
+
+            <intent-filter>
+                <action android:name="android.intent.action.SEND" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <data android:mimeType="*/*" />
+            </intent-filter>
+
+            <intent-filter>
+                <action android:name="android.intent.action.SEND_MULTIPLE" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <data android:mimeType="*/*" />
+            </intent-filter>
+
         </activity>
 
         <provider
@@ -33,11 +51,37 @@
                 android:name="android.support.FILE_PROVIDER_PATHS"
                 android:resource="@xml/file_paths"></meta-data>
         </provider>
+
+        <service
+            android:name=".MatrixSyncService"
+            android:foregroundServiceType="dataSync"
+            android:exported="false"
+            android:stopWithTask="false" />
+
+        <service
+            android:name=".UnifiedPushService"
+            android:exported="false">
+            <intent-filter>
+                <action android:name="org.unifiedpush.android.connector.PUSH_EVENT" />
+            </intent-filter>
+        </service>
+
+        <receiver
+            android:name=".BootReceiver"
+            android:exported="true">
+            <intent-filter>
+                <action android:name="android.intent.action.BOOT_COMPLETED" />
+            </intent-filter>
+        </receiver>
     </application>
 
     <!-- Permissions -->
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_DATA_SYNC" />
+    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
     <uses-permission android:name="android.permission.RECORD_AUDIO" />
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

android/app/src/main/java/com/paarrot/app/BootReceiver.kt

@@ -0,0 +1,21 @@
+package com.paarrot.app
+
+import android.content.BroadcastReceiver
+import android.content.Context
+import android.content.Intent
+
+/**
+ * Re-registers UnifiedPush after boot when credentials still exist.
+ */
+class BootReceiver : BroadcastReceiver() {
+
+    override fun onReceive(context: Context, intent: Intent) {
+        if (intent.action != Intent.ACTION_BOOT_COMPLETED) return
+
+        val prefs = context.getSharedPreferences(SyncServicePlugin.PREFS, Context.MODE_PRIVATE)
+        prefs.getString(MatrixSyncService.EXTRA_HOMESERVER, null) ?: return
+        prefs.getString(MatrixSyncService.EXTRA_TOKEN, null) ?: return
+
+        UnifiedPushManager.register(context, activity = null)
+    }
+}

android/app/src/main/java/com/paarrot/app/ImageKeyboardContentReceiver.kt

@@ -0,0 +1,32 @@
+package com.paarrot.app
+
+import android.net.Uri
+import android.view.View
+import androidx.core.view.ContentInfoCompat
+import androidx.core.view.OnReceiveContentListener
+
+/**
+ * Receives rich content from the IME (Gboard GIF), clipboard paste, and drag-drop,
+ * then forwards file URIs through [ShareIntentStore] so JS can attach them in-room.
+ */
+class ImageKeyboardContentReceiver : OnReceiveContentListener {
+
+    override fun onReceiveContent(view: View, payload: ContentInfoCompat): ContentInfoCompat? {
+        val split = payload.partition { item -> item.uri != null }
+        val uriContent = split.first
+        val remaining = split.second
+
+        if (uriContent != null) {
+            val uris = mutableListOf<Uri>()
+            val clip = uriContent.clip
+            for (i in 0 until clip.itemCount) {
+                clip.getItemAt(i).uri?.let { uris.add(it) }
+            }
+            if (uris.isNotEmpty()) {
+                ShareIntentStore.handleContentUris(view.context, uris)
+            }
+        }
+
+        return remaining
+    }
+}

android/app/src/main/java/com/paarrot/app/ImageKeyboardWebView.kt

@@ -0,0 +1,38 @@
+package com.paarrot.app
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.inputmethod.EditorInfo
+import android.view.inputmethod.InputConnection
+import androidx.core.view.inputmethod.EditorInfoCompat
+import androidx.core.view.inputmethod.InputConnectionCompat
+import com.getcapacitor.CapacitorWebView
+
+/**
+ * Capacitor WebView that advertises image/video MIME types to the IME
+ * (Gboard GIF/sticker keyboard) and routes commit-content through
+ * [androidx.core.view.ViewCompat.setOnReceiveContentListener].
+ */
+class ImageKeyboardWebView(
+    context: Context,
+    attrs: AttributeSet?,
+) : CapacitorWebView(context, attrs) {
+
+    override fun onCreateInputConnection(outAttrs: EditorInfo): InputConnection? {
+        val inputConnection = super.onCreateInputConnection(outAttrs) ?: return null
+        EditorInfoCompat.setContentMimeTypes(outAttrs, MIME_TYPES)
+        return InputConnectionCompat.createWrapper(this, inputConnection, outAttrs)
+    }
+
+    companion object {
+        @JvmField
+        val MIME_TYPES: Array<String> = arrayOf(
+            "image/*",
+            "image/png",
+            "image/gif",
+            "image/jpeg",
+            "image/webp",
+            "video/*",
+        )
+    }
+}

android/app/src/main/java/com/paarrot/app/MainActivity.java

@@ -1,5 +1,42 @@
 package com.paarrot.app;
 
+import android.os.Bundle;
+import android.webkit.WebView;
+import androidx.core.view.ViewCompat;
 import com.getcapacitor.BridgeActivity;
 
-public class MainActivity extends BridgeActivity {}
+public class MainActivity extends BridgeActivity {
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        registerPlugin(SyncServicePlugin.class);
+        registerPlugin(ShareHandlerPlugin.class);
+        registerPlugin(PluginStoragePlugin.class);
+        super.onCreate(savedInstanceState);
+        setupImageKeyboardSupport();
+    }
+
+    @Override
+    public void onResume() {
+        super.onResume();
+        // Keep native sync suppression in sync with the real Activity lifecycle.
+        MatrixSyncService.appInForeground = true;
+    }
+
+    @Override
+    public void onPause() {
+        MatrixSyncService.appInForeground = false;
+        super.onPause();
+    }
+
+    /** Advertise image MIME types and receive Gboard / paste / drag-drop media. */
+    private void setupImageKeyboardSupport() {
+        if (bridge == null) return;
+        WebView webView = bridge.getWebView();
+        if (webView == null) return;
+        ViewCompat.setOnReceiveContentListener(
+            webView,
+            ImageKeyboardWebView.MIME_TYPES,
+            new ImageKeyboardContentReceiver()
+        );
+    }
+}

android/app/src/main/java/com/paarrot/app/NotificationNavStore.kt

@@ -0,0 +1,42 @@
+package com.paarrot.app
+
+import android.content.Intent
+
+/**
+ * Bridges notification tap intents into the Capacitor JS layer so we can
+ * navigate to the correct room when a tray notification is opened.
+ */
+object NotificationNavStore {
+    const val EXTRA_NAV_PATH = "paarrot_nav_path"
+    const val ACTION_OPEN_NOTIFICATION = "com.paarrot.app.OPEN_NOTIFICATION"
+
+    @Volatile
+    var pendingPath: String? = null
+
+    @Volatile
+    var pendingRoomId: String? = null
+
+    @Volatile
+    var plugin: SyncServicePlugin? = null
+
+    /** Read navigation extras from a notification tap [intent] and notify JS. */
+    fun handleIntent(intent: Intent?) {
+        if (intent == null) return
+        val path = intent.getStringExtra(EXTRA_NAV_PATH)?.takeIf { it.isNotBlank() }
+        val roomId = intent.getStringExtra(MatrixSyncService.EXTRA_ROOM_ID)?.takeIf { it.isNotBlank() }
+        if (path == null && roomId == null) return
+
+        pendingPath = path
+        pendingRoomId = roomId
+        plugin?.emitNotificationOpened(path, roomId)
+    }
+
+    /** Consume and clear the pending navigation target. */
+    fun consume(): Pair<String?, String?> {
+        val path = pendingPath
+        val roomId = pendingRoomId
+        pendingPath = null
+        pendingRoomId = null
+        return path to roomId
+    }
+}

android/app/src/main/java/com/paarrot/app/PluginStoragePlugin.kt

@@ -0,0 +1,250 @@
+package com.paarrot.app
+
+import com.getcapacitor.JSArray
+import com.getcapacitor.JSObject
+import com.getcapacitor.Plugin
+import com.getcapacitor.PluginCall
+import com.getcapacitor.PluginMethod
+import com.getcapacitor.annotation.CapacitorPlugin
+import org.json.JSONArray
+import org.json.JSONObject
+import java.io.File
+import java.io.FileOutputStream
+import java.net.HttpURLConnection
+import java.net.URL
+import java.text.SimpleDateFormat
+import java.util.Date
+import java.util.Locale
+import java.util.zip.ZipInputStream
+
+/** Capacitor plugin that stores and manages user extension plugins on Android. */
+@CapacitorPlugin(name = "PluginStorage")
+class PluginStoragePlugin : Plugin() {
+
+    private fun pluginsDir(): File {
+        val dir = File(context.filesDir, "plugins")
+        dir.mkdirs()
+        return dir
+    }
+
+    @PluginMethod
+    fun getPath(call: PluginCall) {
+        val result = JSObject()
+        result.put("success", true)
+        result.put("data", pluginsDir().absolutePath)
+        call.resolve(result)
+    }
+
+    @PluginMethod
+    fun list(call: PluginCall) {
+        try {
+            val plugins = pluginsDir().listFiles()?.filter { it.isDirectory } ?: emptyList()
+            val array = JSArray()
+
+            for (dir in plugins) {
+                val metadata = readMetadata(dir)
+                val obj = JSObject()
+                obj.put("id", dir.name)
+                obj.put("name", metadata?.optString("name", dir.name) ?: dir.name)
+                obj.put("version", metadata?.optString("version", "") ?: "")
+                obj.put("description", metadata?.optString("description", "") ?: "")
+                obj.put("author", metadata?.optString("author", "") ?: "")
+                obj.put("repository", metadata?.optString("repository", "") ?: "")
+                obj.put("thumbnail", metadata?.optString("thumbnail", "") ?: "")
+                obj.put("homepage", metadata?.optString("homepage", "") ?: "")
+                obj.put("tags", metadataTagsToJsArray(metadata))
+                obj.put("installedDate", formatInstalledDate(dir.lastModified()))
+                obj.put("path", dir.absolutePath)
+                array.put(obj)
+            }
+
+            val result = JSObject()
+            result.put("success", true)
+            result.put("data", array)
+            call.resolve(result)
+        } catch (e: Exception) {
+            val result = JSObject()
+            result.put("success", false)
+            result.put("error", e.message ?: "Failed to list plugins")
+            call.resolve(result)
+        }
+    }
+
+    @PluginMethod
+    fun download(call: PluginCall) {
+        val pluginId = call.getString("pluginId")
+            ?: return call.reject("pluginId required")
+        val downloadUrl = call.getString("downloadUrl")
+            ?: return call.reject("downloadUrl required")
+        val name = call.getString("name") ?: pluginId
+
+        Thread {
+            try {
+                val destDir = File(pluginsDir(), pluginId)
+                if (destDir.exists()) {
+                    destDir.deleteRecursively()
+                }
+                destDir.mkdirs()
+
+                val tempZip = File(context.cacheDir, "plugin-download-$pluginId.zip")
+                downloadFile(downloadUrl, tempZip)
+                extractZip(tempZip, destDir)
+                tempZip.delete()
+
+                normalisePluginLayout(destDir)
+
+                if (!File(destDir, "index.js").exists()) {
+                    val result = JSObject()
+                    result.put("success", false)
+                    result.put("error", "Downloaded plugin is missing index.js")
+                    call.resolve(result)
+                    return@Thread
+                }
+
+                val result = JSObject()
+                result.put("success", true)
+                val data = JSObject()
+                data.put("path", destDir.absolutePath)
+                result.put("data", data)
+                call.resolve(result)
+            } catch (e: Exception) {
+                val result = JSObject()
+                result.put("success", false)
+                result.put("error", e.message ?: "Failed to download plugin: $name")
+                call.resolve(result)
+            }
+        }.start()
+    }
+
+    @PluginMethod
+    fun uninstall(call: PluginCall) {
+        val pluginId = call.getString("pluginId")
+            ?: return call.reject("pluginId required")
+
+        try {
+            val destDir = File(pluginsDir(), pluginId)
+            if (destDir.exists()) {
+                destDir.deleteRecursively()
+            }
+
+            val result = JSObject()
+            result.put("success", true)
+            call.resolve(result)
+        } catch (e: Exception) {
+            val result = JSObject()
+            result.put("success", false)
+            result.put("error", e.message ?: "Failed to uninstall plugin")
+            call.resolve(result)
+        }
+    }
+
+    @PluginMethod
+    fun readPluginCode(call: PluginCall) {
+        val pluginId = call.getString("pluginId")
+            ?: return call.reject("pluginId required")
+
+        val indexFile = File(pluginsDir(), "$pluginId/index.js")
+        if (!indexFile.exists()) {
+            val result = JSObject()
+            result.put("success", false)
+            result.put("error", "Plugin not found: $pluginId")
+            call.resolve(result)
+            return
+        }
+
+        val result = JSObject()
+        result.put("success", true)
+        result.put("data", indexFile.readText())
+        call.resolve(result)
+    }
+
+    private fun readMetadata(pluginDir: File): JSONObject? {
+        val metadataFile = File(pluginDir, "plugin-metadata.json")
+        if (!metadataFile.exists()) return null
+
+        return try {
+            JSONObject(metadataFile.readText())
+        } catch (_: Exception) {
+            null
+        }
+    }
+
+    private fun metadataTagsToJsArray(metadata: JSONObject?): JSArray {
+        val tags = JSArray()
+        val jsonTags = metadata?.optJSONArray("tags") ?: return tags
+        for (i in 0 until jsonTags.length()) {
+            tags.put(jsonTags.optString(i))
+        }
+        return tags
+    }
+
+    private fun formatInstalledDate(timestamp: Long): String {
+        val formatter = SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", Locale.US)
+        return formatter.format(Date(timestamp))
+    }
+
+    private fun downloadFile(downloadUrl: String, destFile: File) {
+        val connection = (URL(downloadUrl).openConnection() as HttpURLConnection).apply {
+            connectTimeout = 30_000
+            readTimeout = 60_000
+            instanceFollowRedirects = true
+            requestMethod = "GET"
+        }
+
+        try {
+            connection.connect()
+            if (connection.responseCode !in 200..299) {
+                throw IllegalStateException("HTTP ${connection.responseCode}")
+            }
+
+            connection.inputStream.use { input ->
+                FileOutputStream(destFile).use { output ->
+                    input.copyTo(output)
+                }
+            }
+        } finally {
+            connection.disconnect()
+        }
+    }
+
+    private fun extractZip(zipFile: File, destDir: File) {
+        destDir.mkdirs()
+        val destPath = destDir.canonicalPath + File.separator
+
+        ZipInputStream(zipFile.inputStream()).use { zipInput ->
+            var entry = zipInput.nextEntry
+            while (entry != null) {
+                val outFile = File(destDir, entry.name)
+                if (!outFile.canonicalPath.startsWith(destPath)) {
+                    throw SecurityException("Zip entry outside target directory")
+                }
+
+                if (entry.isDirectory) {
+                    outFile.mkdirs()
+                } else {
+                    outFile.parentFile?.mkdirs()
+                    FileOutputStream(outFile).use { output ->
+                        zipInput.copyTo(output)
+                    }
+                }
+
+                zipInput.closeEntry()
+                entry = zipInput.nextEntry
+            }
+        }
+    }
+
+    /** Flatten single-root zip layouts so index.js ends up directly under the plugin dir. */
+    private fun normalisePluginLayout(destDir: File) {
+        if (File(destDir, "index.js").exists()) return
+
+        val children = destDir.listFiles()?.filter { it.isDirectory } ?: return
+        if (children.size != 1) return
+
+        val nested = children[0]
+        nested.listFiles()?.forEach { child ->
+            child.renameTo(File(destDir, child.name))
+        }
+        nested.deleteRecursively()
+    }
+}

android/app/src/main/java/com/paarrot/app/ShareHandlerPlugin.kt

@@ -0,0 +1,384 @@
+package com.paarrot.app
+
+import android.content.ContentValues
+import android.content.Context
+import android.content.Intent
+import android.net.Uri
+import android.os.Build
+import android.provider.MediaStore
+import android.util.Base64
+import android.webkit.MimeTypeMap
+import androidx.core.content.FileProvider
+import com.getcapacitor.JSArray
+import com.getcapacitor.JSObject
+import com.getcapacitor.Plugin
+import com.getcapacitor.PluginCall
+import com.getcapacitor.PluginMethod
+import com.getcapacitor.annotation.CapacitorPlugin
+import java.io.File
+import java.io.FileOutputStream
+
+/** Payload for a single shared file. */
+data class SharedFilePayload(
+    val path: String,
+    val name: String,
+    val mimeType: String,
+    val size: Long,
+)
+
+/** Full payload delivered to JS when a share intent is received. */
+data class SharePayload(
+    val text: String?,
+    val subject: String?,
+    val files: List<SharedFilePayload>,
+    val receivedAt: Long,
+) {
+    /** Serialize to a [JSObject] for the Capacitor bridge. */
+    fun toJsObject(): JSObject {
+        val obj = JSObject()
+        obj.put("text", text)
+        obj.put("subject", subject)
+
+        val filesArray = JSArray()
+        for (f in files) {
+            val fileObj = JSObject()
+            fileObj.put("path", f.path)
+            fileObj.put("name", f.name)
+            fileObj.put("mimeType", f.mimeType)
+            fileObj.put("size", f.size)
+            filesArray.put(fileObj)
+        }
+        obj.put("files", filesArray)
+        obj.put("receivedAt", receivedAt)
+        return obj
+    }
+}
+
+/** Singleton that bridges between Android activity lifecycle and the Capacitor plugin. */
+object ShareIntentStore {
+    var plugin: ShareHandlerPlugin? = null
+    var pendingShare: SharePayload? = null
+
+    /** Parse [intent] and, if it is a share action, store the payload and notify JS. */
+    fun handleIntent(context: Context, intent: Intent?) {
+        if (intent == null) return
+        val action = intent.action ?: return
+
+        if (action != Intent.ACTION_SEND && action != Intent.ACTION_SEND_MULTIPLE) return
+
+        val text = intent.getStringExtra(Intent.EXTRA_TEXT)
+        val subject = intent.getStringExtra(Intent.EXTRA_SUBJECT)
+
+        val uris = mutableListOf<Uri>()
+        if (action == Intent.ACTION_SEND_MULTIPLE) {
+            @Suppress("UNCHECKED_CAST")
+            val list = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+                intent.getParcelableArrayListExtra(Intent.EXTRA_STREAM, Uri::class.java)
+            } else {
+                @Suppress("DEPRECATION")
+                intent.getParcelableArrayListExtra(Intent.EXTRA_STREAM)
+            }
+            list?.let { uris.addAll(it) }
+        } else {
+            val uri = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+                intent.getParcelableExtra(Intent.EXTRA_STREAM, Uri::class.java)
+            } else {
+                @Suppress("DEPRECATION")
+                intent.getParcelableExtra(Intent.EXTRA_STREAM)
+            }
+            uri?.let { uris.add(it) }
+        }
+
+        deliverShare(context, uris, text, subject)
+    }
+
+    /**
+     * Deliver content URIs from the IME (Gboard GIF), clipboard paste, or drag-drop
+     * into the same share pipeline used by ACTION_SEND.
+     */
+    fun handleContentUris(context: Context, uris: List<Uri>) {
+        if (uris.isEmpty()) return
+        deliverShare(context, uris, text = null, subject = null)
+    }
+
+    private fun deliverShare(
+        context: Context,
+        uris: List<Uri>,
+        text: String?,
+        subject: String?,
+    ) {
+        val receivedAt = System.currentTimeMillis()
+        val copiedFiles = uris.mapNotNull { copySharedUri(context, it, receivedAt) }
+
+        if (copiedFiles.isEmpty() && text.isNullOrBlank() && subject.isNullOrBlank()) return
+
+        val payload = SharePayload(
+            text = text,
+            subject = subject,
+            files = copiedFiles,
+            receivedAt = receivedAt,
+        )
+
+        pendingShare = payload
+        plugin?.emitShare(payload)
+    }
+
+    private fun copySharedUri(context: Context, uri: Uri, receivedAt: Long): SharedFilePayload? {
+        return try {
+            val resolver = context.contentResolver
+            val mimeType = resolver.getType(uri) ?: "application/octet-stream"
+
+            val originalName = resolver.query(uri, arrayOf("_display_name"), null, null, null)
+                ?.use { cursor ->
+                    if (cursor.moveToFirst()) cursor.getString(0) else null
+                } ?: uri.lastPathSegment ?: "shared_file"
+
+            val safeName = sanitizeFileName(originalName)
+            val destDir = File(context.cacheDir, "shared-intents/$receivedAt")
+            destDir.mkdirs()
+
+            var destFile = File(destDir, safeName)
+            var counter = 1
+            while (destFile.exists()) {
+                val dot = safeName.lastIndexOf('.')
+                val base = if (dot >= 0) safeName.substring(0, dot) else safeName
+                val ext = if (dot >= 0) safeName.substring(dot) else ""
+                destFile = File(destDir, "${base}_$counter$ext")
+                counter++
+            }
+
+            resolver.openInputStream(uri)?.use { input ->
+                FileOutputStream(destFile).use { output -> input.copyTo(output) }
+            }
+
+            SharedFilePayload(
+                path = destFile.absolutePath,
+                name = destFile.name,
+                mimeType = mimeType,
+                size = destFile.length(),
+            )
+        } catch (e: Exception) {
+            android.util.Log.e("ShareHandlerPlugin", "Failed to copy shared URI: $uri", e)
+            null
+        }
+    }
+
+    private fun sanitizeFileName(name: String): String {
+        return name.replace(Regex("[^a-zA-Z0-9._\\-]"), "_").take(128).ifEmpty { "file" }
+    }
+
+    /** Remove cached files from a previous share and clear the stored payload. */
+    fun clearIntent(receivedAt: Long?) {
+        if (receivedAt != null) {
+            val dir = plugin?.context?.let { File(it.cacheDir, "shared-intents/$receivedAt") }
+            dir?.deleteRecursively()
+        }
+        pendingShare = null
+    }
+}
+
+/** Capacitor plugin that exposes Android share intents to JavaScript. */
+@CapacitorPlugin(name = "AndroidShareHandler")
+class ShareHandlerPlugin : Plugin() {
+
+    override fun load() {
+        ShareIntentStore.plugin = this
+        ShareIntentStore.handleIntent(context, activity.intent)
+    }
+
+    override fun handleOnNewIntent(intent: Intent?) {
+        super.handleOnNewIntent(intent)
+        ShareIntentStore.handleIntent(context, intent)
+    }
+
+    /** Fire the `shareReceived` event toward the JS layer. */
+    fun emitShare(payload: SharePayload) {
+        notifyListeners("shareReceived", payload.toJsObject())
+    }
+
+    /** Returns the pending share payload (if any) as a JS object. */
+    @PluginMethod
+    fun getPendingShare(call: PluginCall) {
+        val pending = ShareIntentStore.pendingShare
+        if (pending == null) {
+            val result = JSObject()
+            result.put("share", JSObject.NULL)
+            call.resolve(result)
+        } else {
+            val result = JSObject()
+            result.put("share", pending.toJsObject())
+            call.resolve(result)
+        }
+    }
+
+    /** Clears the pending share and removes any copied temp files. */
+    @PluginMethod
+    fun clearPendingShare(call: PluginCall) {
+        ShareIntentStore.clearIntent(ShareIntentStore.pendingShare?.receivedAt)
+        call.resolve()
+    }
+
+    /**
+     * Save a base64-encoded file to the device gallery / Downloads.
+     * Capacitor WebView cannot use FileSaver / `<a download>`, so downloads go through MediaStore.
+     * Images → Pictures/Paarrot, videos → Movies/Paarrot, other → Download/Paarrot (API 29+).
+     * On older APIs or MediaStore failure, falls back to the system share sheet.
+     */
+    @PluginMethod
+    fun saveFile(call: PluginCall) {
+        val filename = call.getString("filename") ?: run {
+            call.reject("filename required")
+            return
+        }
+        val mimeType = call.getString("mimeType")
+            ?: guessMime(filename)
+            ?: "application/octet-stream"
+        val base64 = call.getString("base64") ?: run {
+            call.reject("base64 required")
+            return
+        }
+
+        try {
+            val cleaned = base64.substringAfter("base64,", base64).trim()
+            val bytes = Base64.decode(cleaned, Base64.DEFAULT)
+            if (bytes.isEmpty()) {
+                call.reject("empty file data")
+                return
+            }
+
+            val uri = saveBytes(bytes, filename, mimeType)
+            if (uri != null) {
+                android.widget.Toast.makeText(
+                    context,
+                    "Saved $filename",
+                    android.widget.Toast.LENGTH_SHORT
+                ).show()
+                call.resolve(
+                    JSObject()
+                        .put("saved", true)
+                        .put("uri", uri.toString())
+                )
+            } else {
+                shareBytes(bytes, filename, mimeType)
+                call.resolve(JSObject().put("saved", false).put("shared", true))
+            }
+        } catch (e: Exception) {
+            android.util.Log.e(TAG, "saveFile failed", e)
+            call.reject("Failed to save file: ${e.message}", e)
+        }
+    }
+
+    /**
+     * Open the system share sheet for a base64 file (Save to Files, Drive, etc.).
+     */
+    @PluginMethod
+    fun shareFile(call: PluginCall) {
+        val filename = call.getString("filename") ?: run {
+            call.reject("filename required")
+            return
+        }
+        val mimeType = call.getString("mimeType")
+            ?: guessMime(filename)
+            ?: "application/octet-stream"
+        val base64 = call.getString("base64") ?: run {
+            call.reject("base64 required")
+            return
+        }
+
+        try {
+            val cleaned = base64.substringAfter("base64,", base64).trim()
+            val bytes = Base64.decode(cleaned, Base64.DEFAULT)
+            shareBytes(bytes, filename, mimeType)
+            call.resolve(JSObject().put("shared", true))
+        } catch (e: Exception) {
+            android.util.Log.e(TAG, "shareFile failed", e)
+            call.reject("Failed to share file: ${e.message}", e)
+        }
+    }
+
+    private fun saveBytes(bytes: ByteArray, filename: String, mimeType: String): Uri? {
+        return when {
+            mimeType.startsWith("image/") ->
+                insertMedia(bytes, filename, mimeType, MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "Pictures/Paarrot")
+            mimeType.startsWith("video/") ->
+                insertMedia(bytes, filename, mimeType, MediaStore.Video.Media.EXTERNAL_CONTENT_URI, "Movies/Paarrot")
+            mimeType.startsWith("audio/") ->
+                insertMedia(bytes, filename, mimeType, MediaStore.Audio.Media.EXTERNAL_CONTENT_URI, "Music/Paarrot")
+            Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q ->
+                insertMedia(bytes, filename, mimeType, MediaStore.Downloads.EXTERNAL_CONTENT_URI, "Download/Paarrot")
+            else -> null // share-sheet fallback (avoids WRITE_EXTERNAL_STORAGE on API < 29)
+        }
+    }
+
+    private fun insertMedia(
+        bytes: ByteArray,
+        filename: String,
+        mimeType: String,
+        collection: Uri,
+        relativePath: String
+    ): Uri? {
+        val values = ContentValues().apply {
+            put(MediaStore.MediaColumns.DISPLAY_NAME, filename)
+            put(MediaStore.MediaColumns.MIME_TYPE, mimeType)
+            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+                put(MediaStore.MediaColumns.RELATIVE_PATH, relativePath)
+                put(MediaStore.MediaColumns.IS_PENDING, 1)
+            }
+        }
+
+        val resolver = context.contentResolver
+        val uri = resolver.insert(collection, values) ?: return null
+        try {
+            resolver.openOutputStream(uri)?.use { it.write(bytes) }
+                ?: run {
+                    resolver.delete(uri, null, null)
+                    return null
+                }
+        } catch (e: Exception) {
+            resolver.delete(uri, null, null)
+            throw e
+        }
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
+            values.clear()
+            values.put(MediaStore.MediaColumns.IS_PENDING, 0)
+            resolver.update(uri, values, null, null)
+        }
+        return uri
+    }
+
+    private fun shareBytes(bytes: ByteArray, filename: String, mimeType: String) {
+        val cacheDir = File(context.cacheDir, "shares").apply { mkdirs() }
+        val safeName = filename.replace(Regex("[^a-zA-Z0-9._\\-]"), "_").take(128).ifEmpty { "file" }
+        val file = File(cacheDir, safeName)
+        FileOutputStream(file).use { it.write(bytes) }
+
+        val uri = FileProvider.getUriForFile(
+            context,
+            "${context.packageName}.fileprovider",
+            file
+        )
+
+        val intent = Intent(Intent.ACTION_SEND).apply {
+            type = mimeType
+            putExtra(Intent.EXTRA_STREAM, uri)
+            putExtra(Intent.EXTRA_SUBJECT, filename)
+            addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION)
+        }
+
+        val chooser = Intent.createChooser(intent, "Save or share").apply {
+            addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
+        }
+        context.startActivity(chooser)
+    }
+
+    private fun guessMime(filename: String): String? {
+        val ext = filename.substringAfterLast('.', "").lowercase()
+        if (ext.isEmpty()) return null
+        return MimeTypeMap.getSingleton().getMimeTypeFromExtension(ext)
+    }
+
+    companion object {
+        private const val TAG = "ShareHandlerPlugin"
+    }
+}

android/app/src/main/java/com/paarrot/app/SyncServicePlugin.kt

@@ -0,0 +1,200 @@
+package com.paarrot.app
+
+import android.content.Context
+import android.content.Intent
+import com.getcapacitor.JSObject
+import com.getcapacitor.Plugin
+import com.getcapacitor.PluginCall
+import com.getcapacitor.PluginMethod
+import com.getcapacitor.annotation.CapacitorPlugin
+
+/**
+ * Capacitor plugin that controls [MatrixSyncService] from JS.
+ *
+ * JS API:
+ * - `start({ homeserverUrl, accessToken, userId, deviceId })` — persist credentials and register UnifiedPush
+ * - `triggerPing({ reason })` — force a one-shot fetch (for testing/manual wake)
+ * - `stop()` — clear persisted credentials and unregister UnifiedPush
+ * - `setAppForeground({ foreground })` — tell the service whether the app UI is visible
+ * - `getStatus()` — returns current fetch and UnifiedPush state
+ * - `clearRoomNotifications({ roomId })` — dismiss native tray notifs for a room
+ * - `setNotificationGroups({ rooms })` — persist space/DM grouping for tray nesting
+ * - `showNotification({ title, body, roomId, groupId, groupName, kind, largeIconBase64 })`
+ */
+@CapacitorPlugin(name = "MatrixBackgroundSync")
+class SyncServicePlugin : Plugin() {
+
+    fun emitUnifiedPushEvent(eventName: String, payload: JSObject) {
+        notifyListeners(eventName, payload, true)
+    }
+
+    override fun load() {
+        super.load()
+        UnifiedPushManager.setPlugin(this)
+        NotificationNavStore.plugin = this
+        NotificationNavStore.handleIntent(activity?.intent)
+    }
+
+    override fun handleOnNewIntent(intent: Intent?) {
+        super.handleOnNewIntent(intent)
+        if (intent != null) {
+            activity?.intent = intent
+        }
+        NotificationNavStore.handleIntent(intent)
+    }
+
+    override fun handleOnDestroy() {
+        UnifiedPushManager.clearPlugin(this)
+        if (NotificationNavStore.plugin === this) {
+            NotificationNavStore.plugin = null
+        }
+        super.handleOnDestroy()
+    }
+
+    /** Emit a notificationOpened event toward the JS layer. */
+    fun emitNotificationOpened(path: String?, roomId: String?) {
+        val payload = JSObject()
+        if (path != null) payload.put("path", path)
+        if (roomId != null) payload.put("roomId", roomId)
+        notifyListeners("notificationOpened", payload, true)
+    }
+
+    /** Returns any pending notification navigation target from a tray tap. */
+    @PluginMethod
+    fun getPendingNotificationNav(call: PluginCall) {
+        val (path, roomId) = NotificationNavStore.consume()
+        val result = JSObject()
+        result.put("path", path)
+        result.put("roomId", roomId)
+        call.resolve(result)
+    }
+
+    /** Persists Matrix credentials and starts UnifiedPush registration. */
+    @PluginMethod
+    fun start(call: PluginCall) {
+        val homeserver = call.getString("homeserverUrl")
+            ?: return call.reject("homeserverUrl required")
+        val token = call.getString("accessToken")
+            ?: return call.reject("accessToken required")
+        val userId = call.getString("userId") ?: ""
+        val deviceId = call.getString("deviceId") ?: ""
+
+        context.getSharedPreferences(PREFS, Context.MODE_PRIVATE).edit()
+            .putString(MatrixSyncService.EXTRA_HOMESERVER, homeserver)
+            .putString(MatrixSyncService.EXTRA_TOKEN, token)
+            .putString(MatrixSyncService.EXTRA_USER_ID, userId)
+            .putString(MatrixSyncService.EXTRA_DEVICE_ID, deviceId)
+            .apply()
+
+        UnifiedPushManager.register(context, activity)
+
+        call.resolve()
+    }
+
+    /** Manually triggers a one-shot sync fetch (mainly for diagnostics/testing). */
+    @PluginMethod
+    fun triggerPing(call: PluginCall) {
+        val reason = call.getString("reason") ?: "manual_plugin_ping"
+        MatrixSyncService.requestSyncFetch(context, reason)
+        call.resolve()
+    }
+
+    /** Stops the sync service and erases persisted credentials. */
+    @PluginMethod
+    fun stop(call: PluginCall) {
+        context.getSharedPreferences(PREFS, Context.MODE_PRIVATE).edit().clear().apply()
+        context.stopService(Intent(context, MatrixSyncService::class.java))
+        UnifiedPushManager.unregister(context)
+        call.resolve()
+    }
+
+    /**
+     * Notifies the service whether the Capacitor WebView UI is currently visible.
+     * When `foreground == true` the service skips firing notifications because
+     * the JS layer handles them directly via LocalNotifications.
+     */
+    @PluginMethod
+    fun setAppForeground(call: PluginCall) {
+        MatrixSyncService.appInForeground = call.getBoolean("foreground", false) ?: false
+        call.resolve()
+    }
+
+    /** Returns whether the sync service is currently running. */
+    @PluginMethod
+    fun getStatus(call: PluginCall) {
+        val am = context.getSystemService(Context.ACTIVITY_SERVICE)
+            as android.app.ActivityManager
+        @Suppress("DEPRECATION")
+        val running = am.getRunningServices(Int.MAX_VALUE)
+            .any { it.service.className == MatrixSyncService::class.java.name }
+        val result = UnifiedPushManager.getStatus(context).apply { put("running", running) }
+        call.resolve(result)
+    }
+
+    /**
+     * Cancels native tray notifications for a Matrix room after it has been marked as read.
+     */
+    @PluginMethod
+    fun clearRoomNotifications(call: PluginCall) {
+        val roomId = call.getString("roomId")
+            ?: return call.reject("roomId required")
+        MatrixSyncService.clearRoomNotifications(context, roomId)
+        call.resolve(JSObject().put("cleared", true))
+    }
+
+    /**
+     * Persists room → space/group metadata from the JS layer so background
+     * notifications can nest under Direct messages / Space name / Home.
+     */
+    @PluginMethod
+    fun setNotificationGroups(call: PluginCall) {
+        val rooms = call.getObject("rooms")
+            ?: return call.reject("rooms required")
+        context.getSharedPreferences(PREFS, Context.MODE_PRIVATE).edit()
+            .putString(MatrixSyncService.KEY_NOTIFICATION_GROUPS, rooms.toString())
+            .apply()
+        call.resolve(JSObject().put("success", true))
+    }
+
+    /**
+     * Shows a message notification from the JS layer (supports dynamic avatar icons).
+     * Capacitor LocalNotifications cannot load authenticated/dynamic large icons, so
+     * we post through the same native NotificationManager path as background sync.
+     */
+    @PluginMethod
+    fun showNotification(call: PluginCall) {
+        val roomId = call.getString("roomId") ?: return call.reject("roomId required")
+        val groupId = call.getString("groupId") ?: "paarrot_home"
+        val groupName = call.getString("groupName") ?: "Home"
+        val kind = call.getString("kind") ?: "home"
+        val senderName = call.getString("senderName")
+            ?: call.getString("title")
+            ?: "Someone"
+        val messageText = call.getString("messageText")
+            ?: call.getString("body")
+            ?: "New message"
+        val conversationTitle = call.getString("conversationTitle")
+        val path = call.getString("path")
+        val largeIconBase64 = call.getString("largeIconBase64")
+        val bigPictureBase64 = call.getString("bigPictureBase64")
+
+        MatrixSyncService.postMessageNotification(
+            context = context,
+            roomId = roomId,
+            senderName = senderName,
+            messageText = messageText,
+            conversationTitle = conversationTitle,
+            groupId = groupId,
+            groupName = groupName,
+            kind = kind,
+            largeIcon = MatrixSyncService.decodeBase64Bitmap(largeIconBase64),
+            inlineImage = MatrixSyncService.decodeBase64Bitmap(bigPictureBase64),
+            path = path,
+        )
+        call.resolve(JSObject().put("shown", true))
+    }
+
+    companion object {
+        const val PREFS = "sync_service_prefs"
+    }
+}

android/app/src/main/java/com/paarrot/app/UnifiedPushManager.kt

@@ -0,0 +1,149 @@
+package com.paarrot.app
+
+import android.app.Activity
+import android.content.Context
+import android.util.Log
+import com.getcapacitor.JSObject
+import org.unifiedpush.android.connector.FailedReason
+import org.unifiedpush.android.connector.INSTANCE_DEFAULT
+import org.unifiedpush.android.connector.UnifiedPush
+
+/** Coordinates UnifiedPush registration state and bridges events back to JS. */
+object UnifiedPushManager {
+    private const val TAG = "UnifiedPushManager"
+    private const val PREFS = "unifiedpush_prefs"
+    private const val KEY_ENDPOINT = "endpoint"
+    private const val KEY_INSTANCE = "instance"
+    private const val EVENT_NEW_ENDPOINT = "unifiedPushNewEndpoint"
+    private const val EVENT_UNREGISTERED = "unifiedPushUnregistered"
+    private const val EVENT_REGISTRATION_FAILED = "unifiedPushRegistrationFailed"
+    private const val DEFAULT_MESSAGE = "Paarrot notifications"
+
+    @Volatile
+    private var plugin: SyncServicePlugin? = null
+
+    fun setPlugin(plugin: SyncServicePlugin) {
+        this.plugin = plugin
+    }
+
+    fun clearPlugin(plugin: SyncServicePlugin) {
+        if (this.plugin === plugin) {
+            this.plugin = null
+        }
+    }
+
+    fun register(context: Context, activity: Activity?) {
+        val savedDistributor = runCatching { UnifiedPush.getSavedDistributor(context) }.getOrNull().orEmpty()
+        if (savedDistributor.isNotBlank()) {
+            requestRegistration(context)
+            return
+        }
+
+        if (activity == null) {
+            dispatchRegistrationFailed(FailedReason.ACTION_REQUIRED.name, INSTANCE_DEFAULT)
+            return
+        }
+
+        UnifiedPush.tryUseCurrentOrDefaultDistributor(activity) { success ->
+            if (success) {
+                requestRegistration(context)
+            } else {
+                dispatchRegistrationFailed(FailedReason.ACTION_REQUIRED.name, INSTANCE_DEFAULT)
+            }
+        }
+    }
+
+    fun unregister(context: Context) {
+        runCatching {
+            UnifiedPush.unregister(context, INSTANCE_DEFAULT)
+        }.onFailure {
+            Log.w(TAG, "Failed to unregister UnifiedPush: ${it.message}")
+        }
+        val previousEndpoint = getEndpoint(context)
+        clearEndpoint(context)
+        dispatchUnregistered(previousEndpoint, INSTANCE_DEFAULT)
+    }
+
+    fun getStatus(context: Context): JSObject {
+        val status = JSObject()
+        status.put("endpoint", getEndpoint(context) ?: "")
+        status.put("instance", getInstance(context) ?: INSTANCE_DEFAULT)
+        status.put("registered", !getEndpoint(context).isNullOrBlank())
+        status.put("distributor", runCatching { UnifiedPush.getSavedDistributor(context) }.getOrDefault(""))
+        status.put(
+            "distributors",
+            runCatching { UnifiedPush.getDistributors(context) }.getOrDefault(emptyList<String>())
+        )
+        return status
+    }
+
+    fun onNewEndpoint(context: Context, endpoint: String, instance: String) {
+        val previousEndpoint = getEndpoint(context)
+        persistEndpoint(context, endpoint, instance)
+        val payload = JSObject().apply {
+            put("endpoint", endpoint)
+            put("instance", instance)
+            put("previousEndpoint", previousEndpoint ?: "")
+        }
+        dispatch(EVENT_NEW_ENDPOINT, payload)
+    }
+
+    fun onRegistrationFailed(reason: String, instance: String) {
+        dispatchRegistrationFailed(reason, instance)
+    }
+
+    fun onUnregistered(context: Context, instance: String) {
+        val previousEndpoint = getEndpoint(context)
+        clearEndpoint(context)
+        dispatchUnregistered(previousEndpoint, instance)
+    }
+
+    private fun requestRegistration(context: Context) {
+        runCatching {
+            UnifiedPush.register(context, INSTANCE_DEFAULT, DEFAULT_MESSAGE, null)
+        }.onFailure {
+            Log.w(TAG, "UnifiedPush register failed: ${it.message}")
+            dispatchRegistrationFailed(FailedReason.INTERNAL_ERROR.name, INSTANCE_DEFAULT)
+        }
+    }
+
+    private fun dispatchUnregistered(previousEndpoint: String?, instance: String) {
+        val payload = JSObject().apply {
+            put("previousEndpoint", previousEndpoint ?: "")
+            put("instance", instance)
+        }
+        dispatch(EVENT_UNREGISTERED, payload)
+    }
+
+    private fun dispatchRegistrationFailed(reason: String, instance: String) {
+        val payload = JSObject().apply {
+            put("reason", reason)
+            put("instance", instance)
+        }
+        dispatch(EVENT_REGISTRATION_FAILED, payload)
+    }
+
+    private fun dispatch(eventName: String, payload: JSObject) {
+        plugin?.emitUnifiedPushEvent(eventName, payload)
+    }
+
+    private fun persistEndpoint(context: Context, endpoint: String, instance: String) {
+        context.getSharedPreferences(PREFS, Context.MODE_PRIVATE).edit()
+            .putString(KEY_ENDPOINT, endpoint)
+            .putString(KEY_INSTANCE, instance)
+            .apply()
+    }
+
+    private fun clearEndpoint(context: Context) {
+        context.getSharedPreferences(PREFS, Context.MODE_PRIVATE).edit()
+            .remove(KEY_ENDPOINT)
+            .remove(KEY_INSTANCE)
+            .apply()
+    }
+
+    private fun getEndpoint(context: Context): String? =
+        context.getSharedPreferences(PREFS, Context.MODE_PRIVATE).getString(KEY_ENDPOINT, null)
+
+    private fun getInstance(context: Context): String? =
+        context.getSharedPreferences(PREFS, Context.MODE_PRIVATE).getString(KEY_INSTANCE, null)
+}

android/app/src/main/java/com/paarrot/app/UnifiedPushService.kt

@@ -0,0 +1,35 @@
+package com.paarrot.app
+
+import android.util.Log
+import org.unifiedpush.android.connector.FailedReason
+import org.unifiedpush.android.connector.PushService
+import org.unifiedpush.android.connector.data.PushEndpoint
+import org.unifiedpush.android.connector.data.PushMessage
+
+/** Receives UnifiedPush events and turns push messages into Matrix fetch wakes. */
+class UnifiedPushService : PushService() {
+
+    override fun onNewEndpoint(endpoint: PushEndpoint, instance: String) {
+        Log.i(TAG, "UnifiedPush endpoint updated for instance=$instance")
+        UnifiedPushManager.onNewEndpoint(applicationContext, endpoint.url, instance)
+    }
+
+    override fun onMessage(message: PushMessage, instance: String) {
+        Log.d(TAG, "UnifiedPush wake ping received for instance=$instance, bytes=${message.content.size}")
+        MatrixSyncService.requestSyncFetch(applicationContext, "unifiedpush_message")
+    }
+
+    override fun onRegistrationFailed(reason: FailedReason, instance: String) {
+        Log.w(TAG, "UnifiedPush registration failed: $reason")
+        UnifiedPushManager.onRegistrationFailed(reason.name, instance)
+    }
+
+    override fun onUnregistered(instance: String) {
+        Log.i(TAG, "UnifiedPush unregistered for instance=$instance")
+        UnifiedPushManager.onUnregistered(applicationContext, instance)
+    }
+
+    private companion object {
+        const val TAG = "UnifiedPushService"
+    }
+}

android/app/src/main/res/drawable/ic_stat_paarrot.xml

@@ -2,15 +2,30 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
-    android:viewportWidth="24"
+    android:viewportWidth="18"
-    android:viewportHeight="24">
+    android:viewportHeight="18">
-    <path
+    <!--
-        android:fillColor="#FFFFFFFF"
+        Converted from public/res/svg/notification.svg.
-        android:pathData="M2,9.1C3.8,5.7 7.2,4 11.6,4c4.4,0 7.8,1.7 10.4,5.1l-2,1.6c-1.7,-1.5 -3.8,-2.4 -6.4,-2.7c-0.2,1.6 -1.6,2.9 -3.3,2.9c-1.7,0 -3.1,-1.2 -3.3,-2.8C5.1,8.5 3.5,9.1 2,10z" />
+        Transforms flattened: outer(1.05922,0,0,1.05922,-0.5628,-0.4805)
-    <path
+                            x inner(1.6762,0,0,1.6762,-4.5071,-10.7901)
-        android:fillColor="#FFFFFFFF"
+                            = scale 1.7754, translate(-5.337,-11.908)
-        android:pathData="M8.7,11.5c-2.8,0 -5.1,2.3 -5.1,5.1c0,3 2.4,5.4 5.5,5.4c2.9,0 5.4,-1.3 7,-3.7c-0.5,0.1 -0.9,0.2 -1.4,0.2c-3.5,0 -6.4,-2.8 -6.4,-6.3c0,-0.2 0,-0.4 0,-0.7z" />
+    -->
-    <path
+    <group
-        android:fillColor="#FFFFFFFF"
+        android:scaleX="1.7754"
-        android:pathData="M14.7,12.3c3,0.1 5.3,1.6 7.3,4.2c-1.8,1.5 -4.1,2.4 -6.9,2.8c1,-1 1.6,-2.3 1.6,-3.8c0,-1.2 -0.3,-2.3 -0.9,-3.2z" />
+        android:scaleY="1.7754"
+        android:translateX="-5.337"
+        android:translateY="-11.908">
+        <path
+            android:fillColor="#FFFFFFFF"
+            android:fillType="evenOdd"
+            android:pathData="M4.624,14.382C4.624,14.382 1.358,10.79 5.108,8.336C5.501,8.316 7.14,8.899 7.18,10.368C7.22,11.836 5.641,11.172 5.108,11.856C4.575,12.54 4.454,14.121 4.624,14.382Z" />
+        <path
+            android:fillColor="#FFFFFFFF"
+            android:fillType="evenOdd"
+            android:pathData="M5.08,13.547C5.08,13.547 7.28,14.842 7.291,10.74C7.592,10.971 8.588,12.107 7.713,13.777C6.838,15.446 5.392,14.322 5.08,13.547Z" />
+        <path
+            android:fillColor="#FFFFFFFF"
+            android:fillType="evenOdd"
+            android:pathData="M5.921,14.763C5.584,14.449 6.374,15.403 6.704,16.642C6.873,16.232 8.282,17.562 11.166,14.247C12.324,12.581 13.244,11.279 11.249,8.874C9.254,6.469 6.507,6.615 5.469,7.581C4.431,8.546 5.35,7.566 6.653,8.667C7.52,9.399 7.444,10.431 7.444,10.431C7.774,10.551 9.12,12.332 7.935,14.099C7.205,15.187 6.259,15.076 5.921,14.763Z" />
+    </group>
 </vector>

android/app/src/main/res/layout/capacitor_bridge_layout_main.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context="com.getcapacitor.BridgeActivity">
+
+    <com.paarrot.app.ImageKeyboardWebView
+        android:id="@+id/webview"
+        android:layout_width="fill_parent"
+        android:layout_height="fill_parent" />
+
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#FFFFFF</color>
+    <color name="ic_launcher_background">#00000000</color>
 </resources>

android/build.gradle

@@ -1,7 +1,10 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
-    
+    ext {
+        kotlin_version = '2.3.0'
+    }
+
     repositories {
         google()
         mavenCentral()
@@ -9,6 +12,7 @@ buildscript {
     dependencies {
         classpath 'com.android.tools.build:gradle:8.13.0'
         classpath 'com.google.gms:google-services:4.4.4'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

android/keystore.properties

@@ -0,0 +1,4 @@
+storeFile=../paarrot-release.keystore
+storePassword=paarrot2026
+keyAlias=paarrot
+keyPassword=paarrot2026

android/keystore.properties.example

@@ -0,0 +1,14 @@
+# Copy this file to keystore.properties and fill in your actual values
+# NEVER commit keystore.properties to git!
+
+# Path to your keystore file (relative to android/ directory)
+storeFile=paarrot-release.keystore
+
+# Keystore password
+storePassword=your_keystore_password_here
+
+# Key alias
+keyAlias=paarrot
+
+# Key password
+keyPassword=your_key_password_here

obtainium.json

@@ -3,5 +3,6 @@
   "url": "http://synbox.ruv.wtf:8418/litruv/cinny-mobile",
   "author": "litruv",
   "name": "Paarrot",
+  "overrideSource": "Forgejo (Codeberg)",
   "additionalSettings": "{\"apkFilterRegEx\":\"Paarrot\\\\.apk\",\"invertAPKFilter\":false,\"autoApkFilterByArch\":true,\"releaseIdSkipPatterns\":[],\"sortMethodChoice\":0}"
 }

overlay/package-additions.json

@@ -1,8 +1,5 @@
 {
   "dependencies": {
-    "@capacitor/android": "8.3.0",
+    "@capacitor/status-bar": "8.0.1"
-    "@capacitor/cli": "8.3.0",
-    "@capacitor/core": "8.3.0",
-    "@capacitor/local-notifications": "8.0.2"
   }
 }

overlay/src/app/components/AnimatedOutlet.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
+import { useCompactNav, useIsCompactListRoute } from '../hooks/useCompactNav';
+import { MobileSwipeGestureHost } from './mobile/MobileSwipeGestureHost';
+
+/**
+ * Outlet wrapper for route remounts + compact swipe-back chrome.
+ *
+ * On compact list routes the parent PageRoot already omits children. If this
+ * outlet is still mounted (stale stack / empty SpaceIndexRedirect), render
+ * nothing so an empty swipe shell cannot sit above the channel list and eat taps.
+ */
+export function AnimatedOutlet() {
+  const location = useLocation();
+  const compact = useCompactNav();
+  const isListRoute = useIsCompactListRoute();
+
+  if (compact && isListRoute) {
+    return null;
+  }
+
+  return (
+    <MobileSwipeGestureHost>
+      <div
+        key={location.pathname}
+        {...(!compact && { 'data-route-transition': 'true' })}
+        style={{
+          flex: 1,
+          minWidth: 0,
+          minHeight: 0,
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Outlet />
+      </div>
+    </MobileSwipeGestureHost>
+  );
+}

overlay/src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -0,0 +1,251 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import React, { FormEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Box, Button, Chip, Header, IconButton, Input, Menu, PopOut, RectCords, Scroll, Spinner, Text, as, config } from 'folds';
+import { Icon, Icons } from '../icons';
+import FocusTrap from 'focus-trap-react';
+import { saveMediaBlob } from '../../utils/saveMedia';
+import * as css from './PdfViewer.css';
+import { AsyncStatus } from '../../hooks/useAsyncCallback';
+import { useZoom } from '../../hooks/useZoom';
+import { createPage, usePdfDocumentLoader, usePdfJSLoader } from '../../plugins/pdfjs-dist';
+import { stopPropagation } from '../../utils/keyboard';
+
+export type PdfViewerProps = {
+  name: string;
+  src: string;
+  requestClose: () => void;
+};
+
+export const PdfViewer = as<'div', PdfViewerProps>(
+  ({ className, name, src, requestClose, ...props }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const scrollRef = useRef<HTMLDivElement>(null);
+    const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
+
+    const [pdfJSState, loadPdfJS] = usePdfJSLoader();
+    const [docState, loadPdfDocument] = usePdfDocumentLoader(
+      pdfJSState.status === AsyncStatus.Success ? pdfJSState.data : undefined,
+      src
+    );
+    const isLoading =
+      pdfJSState.status === AsyncStatus.Loading || docState.status === AsyncStatus.Loading;
+    const isError =
+      pdfJSState.status === AsyncStatus.Error || docState.status === AsyncStatus.Error;
+    const [pageNo, setPageNo] = useState(1);
+    const [jumpAnchor, setJumpAnchor] = useState<RectCords>();
+
+    useEffect(() => {
+      loadPdfJS();
+    }, [loadPdfJS]);
+    useEffect(() => {
+      if (pdfJSState.status === AsyncStatus.Success) {
+        loadPdfDocument();
+      }
+    }, [pdfJSState, loadPdfDocument]);
+
+    useEffect(() => {
+      if (docState.status === AsyncStatus.Success) {
+        const doc = docState.data;
+        if (pageNo < 0 || pageNo > doc.numPages) return;
+        createPage(doc, pageNo, { scale: zoom }).then((canvas) => {
+          const container = containerRef.current;
+          if (!container) return;
+          container.textContent = '';
+          container.append(canvas);
+          scrollRef.current?.scrollTo({
+            top: 0,
+          });
+        });
+      }
+    }, [docState, pageNo, zoom]);
+
+    const handleDownload = async () => {
+      try {
+        const res = await fetch(src);
+        if (!res.ok) throw new Error('Failed to fetch PDF');
+        await saveMediaBlob(await res.blob(), name);
+      } catch (error) {
+        console.warn('[PdfViewer] Failed to download:', error);
+      }
+    };
+
+    const handleJumpSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+      evt.preventDefault();
+      if (docState.status !== AsyncStatus.Success) return;
+      const jumpInput = evt.currentTarget.jumpInput as HTMLInputElement;
+      if (!jumpInput) return;
+      const jumpTo = parseInt(jumpInput.value, 10);
+      setPageNo(Math.max(1, Math.min(docState.data.numPages, jumpTo)));
+      setJumpAnchor(undefined);
+    };
+
+    const handlePrevPage = () => {
+      setPageNo((n) => Math.max(n - 1, 1));
+    };
+
+    const handleNextPage = () => {
+      if (docState.status !== AsyncStatus.Success) return;
+      setPageNo((n) => Math.min(n + 1, docState.data.numPages));
+    };
+
+    const handleOpenJump: MouseEventHandler<HTMLButtonElement> = (evt) => {
+      setJumpAnchor(evt.currentTarget.getBoundingClientRect());
+    };
+
+    return (
+      <Box className={classNames(css.PdfViewer, className)} direction="Column" {...props} ref={ref}>
+        <Header className={css.PdfViewerHeader} size="400">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <IconButton size="300" radii="300" onClick={requestClose}>
+              <Icon size="50" src={Icons.ArrowLeft} />
+            </IconButton>
+            <Text size="T300" truncate>
+              {name}
+            </Text>
+          </Box>
+          <Box shrink="No" alignItems="Center" gap="200">
+            <IconButton
+              variant={zoom < 1 ? 'Success' : 'SurfaceVariant'}
+              outlined={zoom < 1}
+              size="300"
+              radii="Pill"
+              onClick={zoomOut}
+              aria-label="Zoom Out"
+            >
+              <Icon size="50" src={Icons.Minus} />
+            </IconButton>
+            <Chip variant="SurfaceVariant" radii="Pill" onClick={() => setZoom(zoom === 1 ? 2 : 1)}>
+              <Text size="B300">{Math.round(zoom * 100)}%</Text>
+            </Chip>
+            <IconButton
+              variant={zoom > 1 ? 'Success' : 'SurfaceVariant'}
+              outlined={zoom > 1}
+              size="300"
+              radii="Pill"
+              onClick={zoomIn}
+              aria-label="Zoom In"
+            >
+              <Icon size="50" src={Icons.Plus} />
+            </IconButton>
+            <Chip
+              variant="Primary"
+              onClick={handleDownload}
+              radii="300"
+              before={<Icon size="50" src={Icons.Download} />}
+            >
+              <Text size="B300">Download</Text>
+            </Chip>
+          </Box>
+        </Header>
+        <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="200">
+          {isLoading && <Spinner variant="Secondary" size="600" />}
+          {isError && (
+            <>
+              <Text>Failed to load PDF</Text>
+              <Button
+                variant="Critical"
+                fill="Soft"
+                size="300"
+                radii="300"
+                before={<Icon src={Icons.Warning} size="50" />}
+                onClick={loadPdfJS}
+              >
+                <Text size="B300">Retry</Text>
+              </Button>
+            </>
+          )}
+          {docState.status === AsyncStatus.Success && (
+            <Scroll
+              ref={scrollRef}
+              size="300"
+              direction="Both"
+              variant="Surface"
+              visibility="Hover"
+            >
+              <Box>
+                <div className={css.PdfViewerContent} ref={containerRef} />
+              </Box>
+            </Scroll>
+          )}
+        </Box>
+        {docState.status === AsyncStatus.Success && (
+          <Header as="footer" className={css.PdfViewerFooter} size="400">
+            <Chip
+              variant="Secondary"
+              radii="300"
+              before={<Icon size="50" src={Icons.ChevronLeft} />}
+              onClick={handlePrevPage}
+              aria-disabled={pageNo <= 1}
+            >
+              <Text size="B300">Previous</Text>
+            </Chip>
+            <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
+              <PopOut
+                anchor={jumpAnchor}
+                align="Center"
+                position="Top"
+                content={
+                  <FocusTrap
+                    focusTrapOptions={{
+                      initialFocus: false,
+                      onDeactivate: () => setJumpAnchor(undefined),
+                      clickOutsideDeactivates: true,
+                      escapeDeactivates: stopPropagation,
+                    }}
+                  >
+                    <Menu variant="Surface">
+                      <Box
+                        as="form"
+                        onSubmit={handleJumpSubmit}
+                        style={{ padding: config.space.S200 }}
+                        direction="Column"
+                        gap="200"
+                      >
+                        <Input
+                          name="jumpInput"
+                          size="300"
+                          variant="Background"
+                          defaultValue={pageNo}
+                          min={1}
+                          max={docState.data.numPages}
+                          step={1}
+                          outlined
+                          type="number"
+                          radii="300"
+                          aria-label="Page Number"
+                        />
+                        <Button type="submit" size="300" variant="Primary" radii="300">
+                          <Text size="B300">Jump To Page</Text>
+                        </Button>
+                      </Box>
+                    </Menu>
+                  </FocusTrap>
+                }
+              >
+                <Chip
+                  onClick={handleOpenJump}
+                  variant="SurfaceVariant"
+                  radii="300"
+                  aria-pressed={jumpAnchor !== undefined}
+                >
+                  <Text size="B300">{`${pageNo}/${docState.data.numPages}`}</Text>
+                </Chip>
+              </PopOut>
+            </Box>
+            <Chip
+              variant="Primary"
+              radii="300"
+              after={<Icon size="50" src={Icons.ChevronRight} />}
+              onClick={handleNextPage}
+              aria-disabled={pageNo >= docState.data.numPages}
+            >
+              <Text size="B300">Next</Text>
+            </Chip>
+          </Header>
+        )}
+      </Box>
+    );
+  }
+);

overlay/src/app/components/editor/Editor.css.ts

@@ -0,0 +1,79 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, DefaultReset, toRem } from 'folds';
+
+export const Editor = style([
+  DefaultReset,
+  {
+    backgroundColor: color.SurfaceVariant.Container,
+    color: color.SurfaceVariant.OnContainer,
+    boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
+    borderRadius: config.radii.R400,
+    overflow: 'hidden',
+    selectors: {
+      // Keyboard-flush dock: only a top edge so the input can sit on the IME.
+      '[data-composer-flush="true"] &': {
+        borderRadius: 0,
+        boxShadow: `inset 0 ${config.borderWidth.B300} 0 0 ${color.SurfaceVariant.ContainerLine}`,
+      },
+    },
+  },
+]);
+
+export const EditorOptions = style([
+  DefaultReset,
+  {
+    padding: config.space.S200,
+  },
+]);
+
+export const EditorTextareaScroll = style({});
+
+export const EditorTextarea = style([
+  DefaultReset,
+  {
+    flexGrow: 1,
+    height: '100%',
+    padding: `${toRem(13)} ${toRem(1)}`,
+    selectors: {
+      [`${EditorTextareaScroll}:first-child &`]: {
+        paddingLeft: toRem(13),
+      },
+      [`${EditorTextareaScroll}:last-child &`]: {
+        paddingRight: toRem(13),
+      },
+      '&:focus': {
+        outline: 'none',
+      },
+    },
+  },
+]);
+
+export const EditorPlaceholderContainer = style([
+  DefaultReset,
+  {
+    opacity: config.opacity.Placeholder,
+    pointerEvents: 'none',
+    userSelect: 'none',
+  },
+]);
+
+export const EditorPlaceholderTextVisual = style([
+  DefaultReset,
+  {
+    display: 'block',
+    paddingTop: toRem(13),
+    paddingLeft: toRem(1),
+  },
+]);
+
+export const EditorToolbarBase = style({
+  padding: `0 ${config.borderWidth.B300}`,
+});
+
+export const EditorToolbar = style({
+  padding: config.space.S100,
+});
+
+export const MarkdownBtnBox = style({
+  paddingRight: config.space.S100,
+});

overlay/src/app/components/editor/Editor.tsx

@@ -0,0 +1,287 @@
+/* eslint-disable no-param-reassign */
+import React, {
+  ClipboardEventHandler,
+  KeyboardEventHandler,
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useState,
+  useEffect,
+  useRef,
+} from 'react';
+import { Box, Scroll, Text } from 'folds';
+import { Descendant, Editor, createEditor, Transforms, Range, Element as SlateElement, Text as SlateText, Point } from 'slate';
+import {
+  Slate,
+  Editable,
+  withReact,
+  RenderLeafProps,
+  RenderElementProps,
+  RenderPlaceholderProps,
+  ReactEditor,
+} from 'slate-react';
+import { withHistory } from 'slate-history';
+import { BlockType } from './types';
+import { RenderElement, RenderLeaf } from './Elements';
+import { CustomElement } from './slate';
+import * as css from './Editor.css';
+import { toggleKeyboardShortcut } from './keyboard';
+import { createCommandElement } from './utils';
+
+const initialValue: CustomElement[] = [
+  {
+    type: BlockType.Paragraph,
+    children: [{ text: '' }],
+  },
+];
+
+const withInline = (editor: Editor): Editor => {
+  const { isInline } = editor;
+
+  editor.isInline = (element) =>
+    [BlockType.Mention, BlockType.Emoticon, BlockType.Link, BlockType.Command].includes(
+      element.type
+    ) || isInline(element);
+
+  return editor;
+};
+
+const withVoid = (editor: Editor): Editor => {
+  const { isVoid } = editor;
+
+  editor.isVoid = (element) =>
+    [BlockType.Mention, BlockType.Emoticon, BlockType.Command].includes(element.type) ||
+    isVoid(element);
+
+  return editor;
+};
+
+type CommandValidatorFn = (commandName: string) => boolean;
+
+let commandValidator: CommandValidatorFn | null = null;
+
+export const setCommandValidator = (validator: CommandValidatorFn) => {
+  commandValidator = validator;
+};
+
+const withCommandAutoConvert = (editor: Editor): Editor => {
+  // Removed auto-conversion on space to prevent focus issues
+  // Commands are now highlighted visually via decorations
+  // and executed when Enter is pressed
+  return editor;
+};
+
+export const useEditor = (): Editor => {
+  const [editor] = useState(() => 
+    withCommandAutoConvert(withInline(withVoid(withReact(withHistory(createEditor())))))
+  );
+  return editor;
+};
+
+export type EditorChangeHandler = (value: Descendant[]) => void;
+type CustomEditorProps = {
+  editableName?: string;
+  top?: ReactNode;
+  bottom?: ReactNode;
+  before?: ReactNode;
+  after?: ReactNode;
+  maxHeight?: string;
+  editor: Editor;
+  placeholder?: string;
+  onKeyDown?: KeyboardEventHandler;
+  onKeyUp?: KeyboardEventHandler;
+  onChange?: EditorChangeHandler;
+  onPaste?: ClipboardEventHandler;
+};
+export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
+  (
+    {
+      editableName,
+      top,
+      bottom,
+      before,
+      after,
+      maxHeight = '50vh',
+      editor,
+      placeholder,
+      onKeyDown,
+      onKeyUp,
+      onChange,
+      onPaste,
+    },
+    ref
+  ) => {
+    const renderElement = useCallback(
+      (props: RenderElementProps) => <RenderElement {...props} />,
+      []
+    );
+
+    const renderLeaf = useCallback((props: RenderLeafProps) => <RenderLeaf {...props} />, []);
+
+    const decorate = useCallback(([node, path]: [any, number[]]) => {
+      const ranges: any[] = [];
+      
+      // Only decorate text nodes in the first paragraph
+      if (
+        path.length === 2 &&
+        path[0] === 0 &&
+        path[1] === 0 &&
+        SlateText.isText(node)
+      ) {
+        const firstChild = editor.children[0];
+        
+        if (SlateElement.isElement(firstChild) && firstChild.type === BlockType.Paragraph) {
+          const [firstInline, secondInline] = firstChild.children;
+          
+          // Don't decorate if we already have a CommandElement
+          if (SlateElement.isElement(secondInline) && secondInline.type === BlockType.Command) {
+            return ranges;
+          }
+          
+          // Check if the text matches /command pattern
+          const text = node.text;
+          const match = text.match(/^(\s*\/\w+)/);
+          
+          if (match && commandValidator) {
+            const commandText = match[1].trim();
+            const commandName = commandText.substring(1);
+            
+            if (commandValidator(commandName)) {
+              // Create decoration for the command text
+              ranges.push({
+                anchor: { path, offset: 0 },
+                focus: { path, offset: match[1].length },
+                pendingCommand: true,
+              });
+            }
+          }
+        }
+      }
+      
+      return ranges;
+    }, [editor]);
+
+    const handleKeydown: KeyboardEventHandler = useCallback(
+      (evt) => {
+        onKeyDown?.(evt);
+        const shortcutToggled = toggleKeyboardShortcut(editor, evt);
+        if (shortcutToggled) evt.preventDefault();
+      },
+      [editor, onKeyDown]
+    );
+
+    const handleBeforeInput = useCallback(
+      (event: Event) => {
+        const inputEvent = event as InputEvent;
+
+        // Handle mobile autocorrect replacement that causes text duplication in Slate
+        if (inputEvent.inputType === 'insertReplacementText') {
+          const data = inputEvent.data || inputEvent.dataTransfer?.getData('text/plain');
+          if (!data) return;
+
+          event.preventDefault();
+
+          const domRanges = inputEvent.getTargetRanges?.() ?? [];
+          if (domRanges.length > 0) {
+            const slateRange = ReactEditor.toSlateRange(editor, domRanges[0], {
+              exactMatch: false,
+              suppressThrow: true,
+            });
+
+            if (slateRange) {
+              Transforms.select(editor, slateRange);
+              Transforms.delete(editor);
+              editor.insertText(data);
+              return;
+            }
+          }
+
+          const { selection } = editor;
+          if (!selection) return;
+
+          if (!Range.isCollapsed(selection)) {
+            Transforms.delete(editor, { at: selection });
+          } else {
+            const wordBefore = Editor.before(editor, selection.anchor, { unit: 'word' });
+            if (wordBefore) {
+              const wordRange = { anchor: wordBefore, focus: selection.anchor };
+              Transforms.select(editor, wordRange);
+              Transforms.delete(editor);
+            }
+          }
+
+          editor.insertText(data);
+        }
+      },
+      [editor]
+    );
+
+    const editableRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+      const editableElement = editableRef.current?.querySelector('[data-slate-editor="true"]');
+      if (!editableElement) return;
+
+      editableElement.addEventListener('beforeinput', handleBeforeInput, { capture: true });
+      
+      return () => {
+        editableElement.removeEventListener('beforeinput', handleBeforeInput, { capture: true });
+      };
+    }, [handleBeforeInput]);
+
+    const renderPlaceholder = useCallback(
+      ({ attributes, children }: RenderPlaceholderProps) => (
+        <span {...attributes} className={css.EditorPlaceholderContainer}>
+          {/* Inner component to style the actual text position and appearance */}
+          <Text as="span" className={css.EditorPlaceholderTextVisual} truncate>
+            {children}
+          </Text>
+        </span>
+      ),
+      []
+    );
+
+    return (
+      <div className={css.Editor} ref={ref}>
+        <Slate editor={editor} initialValue={initialValue} onChange={onChange}>
+          {top}
+          <Box alignItems="Start">
+            {before && (
+              <Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
+                {before}
+              </Box>
+            )}
+            <Scroll
+              className={css.EditorTextareaScroll}
+              variant="SurfaceVariant"
+              style={{ maxHeight }}
+              size="300"
+              visibility="Hover"
+              hideTrack
+              ref={editableRef}
+            >
+              <Editable
+                data-editable-name={editableName}
+                className={css.EditorTextarea}
+                placeholder={placeholder}
+                renderPlaceholder={renderPlaceholder}
+                renderElement={renderElement}
+                renderLeaf={renderLeaf}
+                decorate={decorate}
+                onKeyDown={handleKeydown}
+                onKeyUp={onKeyUp}
+                onPaste={onPaste}
+              />
+            </Scroll>
+            {after && (
+              <Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
+                {after}
+              </Box>
+            )}
+          </Box>
+          {bottom}
+        </Slate>
+      </div>
+    );
+  }
+);

overlay/src/app/components/image-viewer/ImageViewer.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import React from 'react';
+import classNames from 'classnames';
+import { Box, Chip, Header, IconButton, Text, as } from 'folds';
+import { Icon, Icons } from '../icons';
+import * as css from './ImageViewer.css';
+import { useZoom } from '../../hooks/useZoom';
+import { usePan } from '../../hooks/usePan';
+import { downloadAndSaveMedia } from '../../utils/saveMedia';
+import { getCurrentAccessToken } from '../../utils/auth';
+
+export type ImageViewerProps = {
+  alt: string;
+  src: string;
+  requestClose: () => void;
+};
+
+export const ImageViewer = as<'div', ImageViewerProps>(
+  ({ className, alt, src, requestClose, ...props }, ref) => {
+    const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
+    const { pan, cursor, onMouseDown } = usePan(zoom !== 1);
+
+    const handleDownload = async () => {
+      try {
+        await downloadAndSaveMedia(src, alt, getCurrentAccessToken());
+      } catch (error) {
+        console.warn('[ImageViewer] Failed to download media:', error);
+        try {
+          window.open(src, '_blank');
+        } catch {
+          // ignore
+        }
+      }
+    };
+
+    return (
+      <Box
+        className={classNames(css.ImageViewer, className)}
+        direction="Column"
+        {...props}
+        ref={ref}
+      >
+        <Header className={css.ImageViewerHeader} size="400">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <IconButton size="300" radii="300" onClick={requestClose}>
+              <Icon size="50" src={Icons.ArrowLeft} />
+            </IconButton>
+            <Text size="T300" truncate>
+              {alt}
+            </Text>
+          </Box>
+          <Box shrink="No" alignItems="Center" gap="200">
+            <IconButton
+              variant={zoom < 1 ? 'Success' : 'SurfaceVariant'}
+              outlined={zoom < 1}
+              size="300"
+              radii="Pill"
+              onClick={zoomOut}
+              aria-label="Zoom Out"
+            >
+              <Icon size="50" src={Icons.Minus} />
+            </IconButton>
+            <Chip variant="SurfaceVariant" radii="Pill" onClick={() => setZoom(zoom === 1 ? 2 : 1)}>
+              <Text size="B300">{Math.round(zoom * 100)}%</Text>
+            </Chip>
+            <IconButton
+              variant={zoom > 1 ? 'Success' : 'SurfaceVariant'}
+              outlined={zoom > 1}
+              size="300"
+              radii="Pill"
+              onClick={zoomIn}
+              aria-label="Zoom In"
+            >
+              <Icon size="50" src={Icons.Plus} />
+            </IconButton>
+            <Chip
+              variant="Primary"
+              onClick={handleDownload}
+              radii="300"
+              before={<Icon size="50" src={Icons.Download} />}
+            >
+              <Text size="B300">Download</Text>
+            </Chip>
+          </Box>
+        </Header>
+        <Box
+          grow="Yes"
+          className={css.ImageViewerContent}
+          justifyContent="Center"
+          alignItems="Center"
+        >
+          <img
+            className={css.ImageViewerImg}
+            style={{
+              cursor,
+              transform: `scale(${zoom}) translate(${pan.translateX}px, ${pan.translateY}px)`,
+            }}
+            src={src}
+            alt={alt}
+            draggable={false}
+            onMouseDown={onMouseDown}
+          />
+        </Box>
+      </Box>
+    );
+  }
+);

overlay/src/app/components/message/FileHeader.tsx

@@ -0,0 +1,84 @@
+import { Badge, Box, IconButton, Spinner, Text, as, toRem } from 'folds';
+import { Icon, Icons } from '../icons';
+import React, { ReactNode, useCallback } from 'react';
+import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
+import { mimeTypeToExt } from '../../utils/mimeTypes';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import {
+  decryptFile,
+  downloadEncryptedMedia,
+  downloadMedia,
+  mxcUrlToHttp,
+} from '../../utils/matrix';
+import { getCurrentAccessToken } from '../../utils/auth';
+import { saveMediaBlob } from '../../utils/saveMedia';
+
+const badgeStyles = { maxWidth: toRem(100) };
+
+type FileDownloadButtonProps = {
+  filename: string;
+  url: string;
+  mimeType: string;
+  encInfo?: EncryptedAttachmentInfo;
+};
+export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDownloadButtonProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+
+  const [downloadState, download] = useAsyncCallback(
+    useCallback(async () => {
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      // Always use current session's token to avoid stale tokens during account switches
+      const accessToken = getCurrentAccessToken();
+      const fileContent = encInfo
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo), accessToken)
+        : await downloadMedia(mediaUrl, accessToken);
+
+      await saveMediaBlob(fileContent, filename);
+      return true;
+    }, [mx, url, useAuthentication, mimeType, encInfo, filename])
+  );
+
+  const downloading = downloadState.status === AsyncStatus.Loading;
+  const hasError = downloadState.status === AsyncStatus.Error;
+  return (
+    <IconButton
+      disabled={downloading}
+      onClick={download}
+      variant={hasError ? 'Critical' : 'SurfaceVariant'}
+      size="300"
+      radii="300"
+    >
+      {downloading ? (
+        <Spinner size="100" variant={hasError ? 'Critical' : 'Secondary'} />
+      ) : (
+        <Icon size="100" src={Icons.Download} />
+      )}
+    </IconButton>
+  );
+}
+
+export type FileHeaderProps = {
+  body: string;
+  mimeType: string;
+  after?: ReactNode;
+};
+export const FileHeader = as<'div', FileHeaderProps>(({ body, mimeType, after, ...props }, ref) => (
+  <Box alignItems="Center" gap="200" grow="Yes" {...props} ref={ref}>
+    <Box shrink="No">
+      <Badge style={badgeStyles} variant="Secondary" radii="Pill">
+        <Text size="O400" truncate>
+          {mimeTypeToExt(mimeType)}
+        </Text>
+      </Badge>
+    </Box>
+    <Box grow="Yes">
+      <Text size="T300" truncate>
+        {body}
+      </Text>
+    </Box>
+    {after}
+  </Box>
+));

overlay/src/app/components/message/content/FileContent.tsx

@@ -0,0 +1,303 @@
+import React, { ReactNode, useCallback, useState } from 'react';
+import { Box, Button, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
+import { Icon, Icons } from '../../icons';
+import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
+import { saveMediaBlob } from '../../../utils/saveMedia';
+import FocusTrap from 'focus-trap-react';
+import { IFileInfo } from '../../../../types/matrix/common';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { bytesToSize } from '../../../utils/common';
+import {
+  READABLE_EXT_TO_MIME_TYPE,
+  READABLE_TEXT_MIME_TYPES,
+  getFileNameExt,
+  mimeTypeToExt,
+} from '../../../utils/mimeTypes';
+import { stopPropagation } from '../../../utils/keyboard';
+import {
+  decryptFile,
+  downloadEncryptedMedia,
+  downloadMedia,
+  mxcUrlToHttp,
+} from '../../../utils/matrix';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { getCurrentAccessToken } from '../../../utils/auth';
+import { ModalWide } from '../../../styles/Modal.css';
+
+const renderErrorButton = (retry: () => void, text: string) => (
+  <TooltipProvider
+    tooltip={
+      <Tooltip variant="Critical">
+        <Text>Failed to load file!</Text>
+      </Tooltip>
+    }
+    position="Top"
+    align="Center"
+  >
+    {(triggerRef) => (
+      <Button
+        ref={triggerRef}
+        size="400"
+        variant="Critical"
+        fill="Soft"
+        outlined
+        radii="300"
+        onClick={retry}
+        before={<Icon size="100" src={Icons.Warning} filled />}
+      >
+        <Text size="B400" truncate>
+          {text}
+        </Text>
+      </Button>
+    )}
+  </TooltipProvider>
+);
+
+type RenderTextViewerProps = {
+  name: string;
+  text: string;
+  langName: string;
+  requestClose: () => void;
+};
+type ReadTextFileProps = {
+  body: string;
+  mimeType: string;
+  url: string;
+  encInfo?: EncryptedAttachmentInfo;
+  renderViewer: (props: RenderTextViewerProps) => ReactNode;
+};
+export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: ReadTextFileProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const [textViewer, setTextViewer] = useState(false);
+
+  const [textState, loadText] = useAsyncCallback(
+    useCallback(async () => {
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      // Always use current session's token to avoid stale tokens during account switches
+      const accessToken = getCurrentAccessToken();
+      const fileContent = encInfo
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo), accessToken)
+        : await downloadMedia(mediaUrl, accessToken);
+
+      const text = fileContent.text();
+      setTextViewer(true);
+      return text;
+    }, [mx, useAuthentication, mimeType, encInfo, url])
+  );
+
+  return (
+    <>
+      {textState.status === AsyncStatus.Success && (
+        <Overlay open={textViewer} backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: () => setTextViewer(false),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Modal
+                className={ModalWide}
+                size="500"
+                onContextMenu={(evt: any) => evt.stopPropagation()}
+              >
+                {renderViewer({
+                  name: body,
+                  text: textState.data,
+                  langName: READABLE_TEXT_MIME_TYPES.includes(mimeType)
+                    ? mimeTypeToExt(mimeType)
+                    : mimeTypeToExt(READABLE_EXT_TO_MIME_TYPE[getFileNameExt(body)] ?? mimeType),
+                  requestClose: () => setTextViewer(false),
+                })}
+              </Modal>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+      {textState.status === AsyncStatus.Error ? (
+        renderErrorButton(loadText, 'Open File')
+      ) : (
+        <Button
+          variant="Secondary"
+          fill="Solid"
+          radii="300"
+          size="400"
+          onClick={() =>
+            textState.status === AsyncStatus.Success ? setTextViewer(true) : loadText()
+          }
+          disabled={textState.status === AsyncStatus.Loading}
+          before={
+            textState.status === AsyncStatus.Loading ? (
+              <Spinner fill="Solid" size="100" variant="Secondary" />
+            ) : (
+              <Icon size="100" src={Icons.ArrowRight} filled />
+            )
+          }
+        >
+          <Text size="B400" truncate>
+            Open File
+          </Text>
+        </Button>
+      )}
+    </>
+  );
+}
+
+type RenderPdfViewerProps = {
+  name: string;
+  src: string;
+  requestClose: () => void;
+};
+export type ReadPdfFileProps = {
+  body: string;
+  mimeType: string;
+  url: string;
+  encInfo?: EncryptedAttachmentInfo;
+  renderViewer: (props: RenderPdfViewerProps) => ReactNode;
+};
+export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: ReadPdfFileProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const [pdfViewer, setPdfViewer] = useState(false);
+
+  const [pdfState, loadPdf] = useAsyncCallback(
+    useCallback(async () => {
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      // Always use current session's token to avoid stale tokens during account switches
+      const accessToken = getCurrentAccessToken();
+      const fileContent = encInfo
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo), accessToken)
+        : await downloadMedia(mediaUrl, accessToken);
+      setPdfViewer(true);
+      return URL.createObjectURL(fileContent);
+    }, [mx, url, useAuthentication, mimeType, encInfo])
+  );
+
+  return (
+    <>
+      {pdfState.status === AsyncStatus.Success && (
+        <Overlay open={pdfViewer} backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: () => setPdfViewer(false),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Modal
+                className={ModalWide}
+                size="500"
+                onContextMenu={(evt: any) => evt.stopPropagation()}
+              >
+                {renderViewer({
+                  name: body,
+                  src: pdfState.data,
+                  requestClose: () => setPdfViewer(false),
+                })}
+              </Modal>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+      {pdfState.status === AsyncStatus.Error ? (
+        renderErrorButton(loadPdf, 'Open PDF')
+      ) : (
+        <Button
+          variant="Secondary"
+          fill="Solid"
+          radii="300"
+          size="400"
+          onClick={() => (pdfState.status === AsyncStatus.Success ? setPdfViewer(true) : loadPdf())}
+          disabled={pdfState.status === AsyncStatus.Loading}
+          before={
+            pdfState.status === AsyncStatus.Loading ? (
+              <Spinner fill="Solid" size="100" variant="Secondary" />
+            ) : (
+              <Icon size="100" src={Icons.ArrowRight} filled />
+            )
+          }
+        >
+          <Text size="B400" truncate>
+            Open PDF
+          </Text>
+        </Button>
+      )}
+    </>
+  );
+}
+
+export type DownloadFileProps = {
+  body: string;
+  mimeType: string;
+  url: string;
+  info: IFileInfo;
+  encInfo?: EncryptedAttachmentInfo;
+};
+export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFileProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+
+  const [downloadState, download] = useAsyncCallback(
+    useCallback(async () => {
+      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      // Always use current session's token to avoid stale tokens during account switches
+      const accessToken = getCurrentAccessToken();
+      const fileContent = encInfo
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo), accessToken)
+        : await downloadMedia(mediaUrl, accessToken);
+
+      await saveMediaBlob(fileContent, body);
+      return fileContent;
+    }, [mx, url, useAuthentication, mimeType, encInfo, body])
+  );
+
+  return downloadState.status === AsyncStatus.Error ? (
+    renderErrorButton(download, `Retry Download (${bytesToSize(info.size ?? 0)})`)
+  ) : (
+    <Button
+      variant="Secondary"
+      fill="Soft"
+      radii="300"
+      size="400"
+      onClick={() =>
+        downloadState.status === AsyncStatus.Success
+          ? saveMediaBlob(downloadState.data, body)
+          : download()
+      }
+      disabled={downloadState.status === AsyncStatus.Loading}
+      before={
+        downloadState.status === AsyncStatus.Loading ? (
+          <Spinner fill="Soft" size="100" variant="Secondary" />
+        ) : (
+          <Icon size="100" src={Icons.Download} filled />
+        )
+      }
+    >
+      <Text size="B400" truncate>{`Download (${bytesToSize(info.size ?? 0)})`}</Text>
+    </Button>
+  );
+}
+
+type FileContentProps = {
+  body: string;
+  mimeType: string;
+  renderAsTextFile: () => ReactNode;
+  renderAsPdfFile: () => ReactNode;
+};
+export const FileContent = as<'div', FileContentProps>(
+  ({ body, mimeType, renderAsTextFile, renderAsPdfFile, children, ...props }, ref) => (
+    <Box direction="Column" gap="300" {...props} ref={ref}>
+      {(READABLE_TEXT_MIME_TYPES.includes(mimeType) ||
+        READABLE_EXT_TO_MIME_TYPE[getFileNameExt(body)]) &&
+        renderAsTextFile()}
+      {mimeType === 'application/pdf' && renderAsPdfFile()}
+      {children}
+    </Box>
+  )
+);

overlay/src/app/components/mobile/MobileSwipeGestureHost.tsx

@@ -0,0 +1,367 @@
+import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useCompactNav } from '../../hooks/useCompactNav';
+import { useBackRoute } from '../../hooks/useBackRoute';
+import { startReplyToEvent } from '../../features/room/replyToMessage';
+import { mobileSwipeReplyBridgeRef } from './mobileSwipeReplyBridge';
+import * as css from './mobile-gestures.css';
+
+const EDGE_WIDTH = 28;
+const BACK_COMMIT_RATIO = 0.25;
+const BACK_COMMIT_MIN = 56;
+const REPLY_THRESHOLD = 48;
+const REPLY_MAX = 96;
+const AXIS_LOCK_PX = 10;
+const AXIS_DOMINANCE = 1.2;
+const MAX_START_Y_RATIO = 0.88;
+
+type GesturePhase = 'idle' | 'pending' | 'back' | 'reply';
+
+type GestureState = {
+  phase: GesturePhase;
+  touchId: number;
+  startX: number;
+  startY: number;
+  messageEl: HTMLElement | null;
+  transformEl: HTMLElement | null;
+  messageId: string | null;
+  edgeBack: boolean;
+  offset: number;
+};
+
+const IDLE_STATE: GestureState = {
+  phase: 'idle',
+  touchId: -1,
+  startX: 0,
+  startY: 0,
+  messageEl: null,
+  transformEl: null,
+  messageId: null,
+  edgeBack: false,
+  offset: 0,
+};
+
+type MobileSwipeGestureHostProps = {
+  children: ReactNode;
+};
+
+const shouldIgnoreBackTarget = (target: EventTarget | null): boolean => {
+  if (!(target instanceof Element)) return true;
+  return Boolean(
+    target.closest(
+      'input, textarea, [contenteditable="true"], [data-allow-text-selection="true"], [data-carousel-scroller], [data-disable-swipe-back="true"]'
+    )
+  );
+};
+
+const shouldIgnoreReplyTarget = (target: EventTarget | null): boolean => {
+  if (!(target instanceof Element)) return true;
+  return Boolean(
+    target.closest(
+      'input, textarea, [contenteditable="true"], [data-allow-text-selection="true"], [data-carousel-scroller], [data-disable-swipe-reply="true"]'
+    )
+  );
+};
+
+const findMessageElement = (target: EventTarget | null): HTMLElement | null => {
+  if (!(target instanceof Element)) return null;
+  return target.closest('[data-message-id]') as HTMLElement | null;
+};
+
+const findReplyTransformTarget = (messageEl: HTMLElement): HTMLElement => {
+  const content = messageEl.querySelector('[data-swipe-reply-content]');
+  if (content instanceof HTMLElement) return content;
+  return messageEl;
+};
+
+const applyBackOffset = (dx: number, width: number): number => {
+  const positive = Math.max(0, dx);
+  if (positive <= width) return positive;
+  return width + (positive - width) * 0.22;
+};
+
+const setElementTransform = (el: HTMLElement | null, px: number) => {
+  if (!el) return;
+  el.style.transition = 'none';
+  el.style.transform = `translateX(${px}px)`;
+};
+
+const resetElementTransform = (el: HTMLElement | null) => {
+  if (!el) return;
+  el.style.transition = 'none';
+  el.style.transform = '';
+};
+
+export function MobileSwipeGestureHost({ children }: MobileSwipeGestureHostProps) {
+  const compact = useCompactNav();
+  const { pathname } = useLocation();
+  const { canGoBack, goBack } = useBackRoute();
+  const backEnabled = compact && canGoBack;
+  const replyEnabled = compact;
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const gestureRef = useRef<GestureState>({ ...IDLE_STATE });
+  const scrollLockRef = useRef<HTMLElement | null>(null);
+
+  const unlockScroll = useCallback(() => {
+    if (scrollLockRef.current) {
+      scrollLockRef.current.style.overflow = '';
+      scrollLockRef.current = null;
+    }
+  }, []);
+
+  const lockScroll = useCallback((anchor: HTMLElement) => {
+    unlockScroll();
+    let el: HTMLElement | null = anchor;
+    while (el && el !== document.body) {
+      const style = window.getComputedStyle(el);
+      if (
+        (style.overflowY === 'auto' || style.overflowY === 'scroll') &&
+        el.scrollHeight > el.clientHeight + 1
+      ) {
+        scrollLockRef.current = el;
+        el.style.overflow = 'hidden';
+        return;
+      }
+      el = el.parentElement;
+    }
+  }, [unlockScroll]);
+
+  const resetBackTransform = useCallback(() => {
+    resetElementTransform(contentRef.current);
+    document.documentElement.classList.remove('mobile-gesture-lock');
+  }, []);
+
+  const resetReplyTransform = useCallback((transformEl?: HTMLElement | null) => {
+    const bridge = mobileSwipeReplyBridgeRef.current;
+    const el = transformEl ?? gestureRef.current.transformEl;
+    resetElementTransform(el);
+    bridge?.setIndicator(null, false);
+    document.documentElement.classList.remove('mobile-gesture-lock');
+  }, []);
+
+  const resetGesture = useCallback(
+    (transformEl?: HTMLElement | null) => {
+      resetBackTransform();
+      resetReplyTransform(transformEl);
+      unlockScroll();
+      gestureRef.current = { ...IDLE_STATE };
+    },
+    [resetBackTransform, resetReplyTransform, unlockScroll]
+  );
+
+  const updateReplyIndicator = useCallback((messageEl: HTMLElement, offset: number) => {
+    const bridge = mobileSwipeReplyBridgeRef.current;
+    if (!bridge?.layerEl) return;
+    const messageRect = messageEl.getBoundingClientRect();
+    const layerRect = bridge.layerEl.getBoundingClientRect();
+    const top = messageRect.top - layerRect.top + messageRect.height / 2 - 18;
+    bridge.setIndicator(top, Math.abs(offset) >= REPLY_THRESHOLD * 0.6);
+  }, []);
+
+  const applyReplyTransform = useCallback(
+    (transformEl: HTMLElement, messageEl: HTMLElement, offset: number) => {
+      setElementTransform(transformEl, offset);
+      updateReplyIndicator(messageEl, offset);
+    },
+    [updateReplyIndicator]
+  );
+
+  const lockGesture = useCallback(
+    (phase: 'back' | 'reply', scrollAnchor?: HTMLElement | null) => {
+      gestureRef.current.phase = phase;
+      document.documentElement.classList.add('mobile-gesture-lock');
+      if (scrollAnchor) {
+        lockScroll(scrollAnchor);
+      }
+    },
+    [lockScroll]
+  );
+
+  const finishGesture = useCallback(() => {
+    const gesture = gestureRef.current;
+    if (gesture.phase === 'idle' || gesture.phase === 'pending') {
+      resetGesture();
+      return;
+    }
+
+    if (gesture.phase === 'back') {
+      const width = rootRef.current?.clientWidth ?? window.innerWidth;
+      const shouldCommit =
+        gesture.offset >= Math.max(width * BACK_COMMIT_RATIO, BACK_COMMIT_MIN);
+
+      resetGesture();
+      if (shouldCommit) {
+        goBack();
+      }
+      return;
+    }
+
+    if (gesture.phase === 'reply' && gesture.messageEl && gesture.messageId) {
+      const bridge = mobileSwipeReplyBridgeRef.current;
+      const shouldReply = Math.abs(gesture.offset) >= REPLY_THRESHOLD;
+      const { messageEl, messageId, transformEl } = gesture;
+
+      resetGesture(transformEl);
+
+      if (shouldReply && bridge) {
+        startReplyToEvent(bridge.room, messageId, bridge.setReplyDraft, bridge.editor);
+      }
+    }
+  }, [goBack, resetGesture]);
+
+  useEffect(() => {
+    if (!compact) return;
+
+    const getActiveTouch = (evt: TouchEvent, touchId: number) =>
+      Array.from(evt.touches).find((touch) => touch.identifier === touchId);
+
+    const getEndedTouch = (evt: TouchEvent, touchId: number) =>
+      Array.from(evt.changedTouches).find((touch) => touch.identifier === touchId);
+
+    const isInsideSwipeHost = (target: EventTarget | null): boolean => {
+      const root = rootRef.current;
+      if (!root || !(target instanceof Node)) return false;
+      return root.contains(target);
+    };
+
+    const handleTouchStart = (evt: TouchEvent) => {
+      if (gestureRef.current.phase !== 'idle') return;
+
+      const touch = evt.changedTouches[0];
+      if (!touch) return;
+
+      const target = evt.target;
+      if (touch.clientY > window.innerHeight * MAX_START_Y_RATIO) return;
+
+      const messageEl = findMessageElement(target);
+      const messageId = messageEl?.getAttribute('data-message-id') ?? null;
+
+      // Only steal touches that start inside the detail/swipe host. Document-level
+      // listeners otherwise fight the always-visible sidebar (space icons sit in the
+      // former screen-left EDGE_WIDTH zone and lost clicks to preventDefault).
+      const insideHost = isInsideSwipeHost(target);
+      const canStartBack =
+        backEnabled && insideHost && !shouldIgnoreBackTarget(target);
+      const canStartReply =
+        replyEnabled &&
+        messageEl &&
+        messageId &&
+        !shouldIgnoreReplyTarget(target) &&
+        mobileSwipeReplyBridgeRef.current;
+
+      if (!canStartBack && !canStartReply) return;
+
+      const contentLeft = rootRef.current?.getBoundingClientRect().left ?? 0;
+      const nearContentLeftEdge =
+        touch.clientX >= contentLeft && touch.clientX <= contentLeft + EDGE_WIDTH;
+
+      // Prefer pending over immediate back+preventDefault so a tap still clicks.
+      gestureRef.current = {
+        phase: 'pending',
+        touchId: touch.identifier,
+        startX: touch.clientX,
+        startY: touch.clientY,
+        messageEl: canStartReply ? messageEl : null,
+        transformEl: canStartReply && messageEl ? findReplyTransformTarget(messageEl) : null,
+        messageId: canStartReply ? messageId : null,
+        edgeBack: nearContentLeftEdge && canStartBack,
+        offset: 0,
+      };
+    };
+
+    const handleTouchMove = (evt: TouchEvent) => {
+      const gesture = gestureRef.current;
+      if (gesture.phase === 'idle') return;
+
+      const touch = getActiveTouch(evt, gesture.touchId);
+      if (!touch) return;
+
+      const deltaX = touch.clientX - gesture.startX;
+      const deltaY = touch.clientY - gesture.startY;
+
+      if (gesture.phase === 'pending') {
+        if (Math.abs(deltaX) < AXIS_LOCK_PX && Math.abs(deltaY) < AXIS_LOCK_PX) return;
+
+        const horizontal = Math.abs(deltaX) >= Math.abs(deltaY) * AXIS_DOMINANCE;
+        const vertical = Math.abs(deltaY) >= Math.abs(deltaX) * AXIS_DOMINANCE;
+
+        if (vertical) {
+          resetGesture();
+          return;
+        }
+
+        if (!horizontal) return;
+
+        if (deltaX > 0 && backEnabled) {
+          lockGesture('back', contentRef.current);
+        } else if (deltaX < 0 && gesture.messageEl && gesture.messageId && gesture.transformEl) {
+          lockGesture('reply', gesture.messageEl);
+        } else {
+          resetGesture();
+          return;
+        }
+      }
+
+      if (gesture.phase === 'back') {
+        if (!evt.cancelable) return;
+        evt.preventDefault();
+
+        const width = rootRef.current?.clientWidth ?? window.innerWidth;
+        const offset = applyBackOffset(deltaX, width);
+        gesture.offset = offset;
+        setElementTransform(contentRef.current, offset);
+        return;
+      }
+
+      if (gesture.phase === 'reply' && gesture.transformEl && gesture.messageEl) {
+        if (!evt.cancelable) return;
+        evt.preventDefault();
+
+        const offset = Math.max(deltaX, -REPLY_MAX);
+        gesture.offset = offset;
+        applyReplyTransform(gesture.transformEl, gesture.messageEl, offset);
+      }
+    };
+
+    const handleTouchEnd = (evt: TouchEvent) => {
+      const gesture = gestureRef.current;
+      if (gesture.phase === 'idle') return;
+
+      const touch = getEndedTouch(evt, gesture.touchId);
+      if (!touch) return;
+
+      finishGesture();
+    };
+
+    document.addEventListener('touchstart', handleTouchStart, { capture: true, passive: false });
+    document.addEventListener('touchmove', handleTouchMove, { capture: true, passive: false });
+    document.addEventListener('touchend', handleTouchEnd, { capture: true });
+    document.addEventListener('touchcancel', handleTouchEnd, { capture: true });
+
+    return () => {
+      document.removeEventListener('touchstart', handleTouchStart, { capture: true });
+      document.removeEventListener('touchmove', handleTouchMove, { capture: true });
+      document.removeEventListener('touchend', handleTouchEnd, { capture: true });
+      document.removeEventListener('touchcancel', handleTouchEnd, { capture: true });
+      resetGesture();
+    };
+  }, [backEnabled, compact, finishGesture, lockGesture, replyEnabled, resetGesture, applyReplyTransform]);
+
+  useEffect(() => {
+    resetGesture();
+  }, [canGoBack, pathname, resetGesture]);
+
+  if (!compact) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div ref={rootRef} className={css.SwipeBackRoot}>
+      <div ref={contentRef} className={css.SwipeBackContent}>
+        {children}
+      </div>
+    </div>
+  );
+}

overlay/src/app/components/mobile/MobileSwipeToReplyLayer.tsx

@@ -0,0 +1,67 @@
+import React, { ReactNode, useLayoutEffect, useRef, useState } from 'react';
+import { Room } from 'matrix-js-sdk';
+import { Editor } from 'slate';
+import { useSetAtom } from 'jotai';
+import { Icon, Icons } from '../icons';
+import { useCompactNav } from '../../hooks/useCompactNav';
+import { roomIdToReplyDraftAtomFamily } from '../../state/room/roomInputDrafts';
+import { mobileSwipeReplyBridgeRef } from './mobileSwipeReplyBridge';
+import * as css from './mobile-gestures.css';
+
+type MobileSwipeToReplyLayerProps = {
+  room: Room;
+  editor: Editor;
+  children: ReactNode;
+};
+
+export function MobileSwipeToReplyLayer({ room, editor, children }: MobileSwipeToReplyLayerProps) {
+  const compact = useCompactNav();
+  const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId));
+  const layerRef = useRef<HTMLDivElement>(null);
+  const [indicatorTop, setIndicatorTop] = useState<number | null>(null);
+  const [indicatorActive, setIndicatorActive] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!compact) return;
+
+    mobileSwipeReplyBridgeRef.current = {
+      room,
+      editor,
+      setReplyDraft,
+      layerEl: layerRef.current,
+      setIndicator: (top, active) => {
+        setIndicatorTop(top);
+        setIndicatorActive(active);
+      },
+    };
+
+    return () => {
+      if (mobileSwipeReplyBridgeRef.current?.room.roomId === room.roomId) {
+        mobileSwipeReplyBridgeRef.current = null;
+      }
+      setIndicatorTop(null);
+      setIndicatorActive(false);
+    };
+  }, [compact, editor, room, setReplyDraft]);
+
+  if (!compact) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div ref={layerRef} className={css.SwipeToReplyLayer}>
+      {children}
+      {indicatorTop !== null && (
+        <div
+          className={`${css.SwipeToReplyIndicator} ${
+            indicatorActive ? css.SwipeToReplyIndicatorActive : ''
+          }`}
+          style={{ top: indicatorTop }}
+          aria-hidden
+        >
+          <Icon src={Icons.ReplyArrow} size="200" />
+        </div>
+      )}
+    </div>
+  );
+}

overlay/src/app/components/mobile/mobile-gestures.css.ts

@@ -0,0 +1,95 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+export const SwipeBackRoot = style({
+  position: 'relative',
+  flex: 1,
+  minWidth: 0,
+  minHeight: 0,
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const SwipeBackContent = style({
+  position: 'relative',
+  flex: 1,
+  minWidth: 0,
+  minHeight: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: color.Background.Container,
+  boxShadow: '-4px 0 16px rgba(0, 0, 0, 0.28)',
+  willChange: 'transform',
+  touchAction: 'pan-y',
+});
+
+export const CompactDetailRoot = style({
+  position: 'relative',
+  minWidth: 0,
+  overflow: 'hidden',
+});
+
+export const CompactNavUnderlay = style({
+  position: 'absolute',
+  inset: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  zIndex: 0,
+  // Keep underlay tappable if the detail layer is empty/transparent
+  // (e.g. space index after leaving DMs). Opaque detail content still
+  // sits above and receives taps first.
+  pointerEvents: 'auto',
+});
+
+export const CompactDetailLayer = style({
+  position: 'relative',
+  zIndex: 1,
+  minWidth: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  // Pass through taps when outlet content is null/empty; real pages
+  // re-enable pointer events on their root via the child rule below.
+  pointerEvents: 'none',
+});
+
+globalStyle(`${CompactDetailLayer} > *`, {
+  pointerEvents: 'auto',
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: color.Background.Container,
+});
+
+export const SwipeToReplyLayer = style({
+  position: 'relative',
+  flex: 1,
+  minHeight: 0,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const SwipeToReplyIndicator = style({
+  position: 'absolute',
+  right: config.space.S300,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: toRem(36),
+  height: toRem(36),
+  borderRadius: config.radii.Pill,
+  backgroundColor: color.Primary.Container,
+  color: color.Primary.OnContainer,
+  pointerEvents: 'none',
+  zIndex: 2,
+  opacity: 0,
+  transform: 'scale(0.85)',
+  transition: 'opacity 0.12s ease, transform 0.12s ease',
+});
+
+export const SwipeToReplyIndicatorActive = style({
+  opacity: 1,
+  transform: 'scale(1)',
+});

overlay/src/app/components/mobile/mobileSwipeReplyBridge.ts

@@ -0,0 +1,15 @@
+import { Room } from 'matrix-js-sdk';
+import { Editor } from 'slate';
+import { IReplyDraft } from '../../state/room/roomInputDrafts';
+
+export type MobileSwipeReplyBridge = {
+  room: Room;
+  editor: Editor;
+  setReplyDraft: (draft: IReplyDraft | undefined) => void;
+  layerEl: HTMLElement | null;
+  setIndicator: (top: number | null, active: boolean) => void;
+};
+
+export const mobileSwipeReplyBridgeRef: { current: MobileSwipeReplyBridge | null } = {
+  current: null,
+};

overlay/src/app/components/page/Page.tsx

@@ -0,0 +1,214 @@
+import React, { ComponentProps, MutableRefObject, ReactNode } from 'react';
+import { Box, Header, Line, Scroll, Text, as } from 'folds';
+import classNames from 'classnames';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import * as css from './style.css';
+import * as swipeCss from '../mobile/mobile-gestures.css';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { SidebarDockedCallPanel } from '../../features/call/SidebarDockedCallPanel';
+import { useShowCompactMasterView } from '../../hooks/useCompactNav';
+import { isStationeryTheme, useTheme } from '../../hooks/useTheme';
+
+type PageRootProps = {
+  nav: ReactNode;
+  children: ReactNode;
+};
+
+export function PageRoot({ nav, children }: PageRootProps) {
+  const screenSize = useScreenSizeContext();
+  const showCompactMaster = useShowCompactMasterView();
+  const compact = screenSize === ScreenSize.Mobile;
+
+  // Master list routes: only the channel/space list is interactive.
+  // Never mount the detail/underlay stack here — an empty detail layer would
+  // sit above the list with pointer-events and freeze taps (DM → space bug).
+  if (compact && showCompactMaster) {
+    return (
+      <Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>
+        {nav}
+      </Box>
+    );
+  }
+
+  if (compact && !showCompactMaster) {
+    return (
+      <Box
+        grow="Yes"
+        className={classNames(ContainerColor({ variant: 'Background' }), swipeCss.CompactDetailRoot)}
+      >
+        {nav && (
+          <Box className={swipeCss.CompactNavUnderlay} aria-hidden>
+            {nav}
+          </Box>
+        )}
+        <Box grow="Yes" className={swipeCss.CompactDetailLayer}>
+          {children}
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>
+      {nav}
+      {screenSize !== ScreenSize.Mobile && (
+        <Line variant="Background" size="300" direction="Vertical" />
+      )}
+      {children}
+    </Box>
+  );
+}
+
+type ClientDrawerLayoutProps = {
+  children: ReactNode;
+};
+export function PageNav({
+  size,
+  children,
+  className,
+}: ClientDrawerLayoutProps & css.PageNavVariants & { className?: string }) {
+  const screenSize = useScreenSizeContext();
+  const isMobile = screenSize === ScreenSize.Mobile;
+
+  return (
+    <Box
+      grow={isMobile ? 'Yes' : undefined}
+      className={classNames(css.PageNav({ size }), className)}
+      shrink={isMobile ? 'Yes' : 'No'}
+      data-page-nav=""
+    >
+      <Box grow="Yes" direction="Column">
+        {children}
+        <SidebarDockedCallPanel />
+      </Box>
+    </Box>
+  );
+}
+
+export const PageNavHeader = as<'header', css.PageNavHeaderVariants>(
+  ({ className, outlined, ...props }, ref) => (
+    <Header
+      className={classNames(css.PageNavHeader({ outlined }), className)}
+      variant="Background"
+      size="600"
+      data-folder-tab="nav"
+      {...props}
+      ref={ref}
+    />
+  )
+);
+
+export function PageNavContent({
+  scrollRef,
+  scrollProps,
+  children,
+}: {
+  children: ReactNode;
+  scrollRef?: MutableRefObject<HTMLDivElement | null>;
+  scrollProps?: React.ComponentProps<typeof Scroll>;
+}) {
+  const theme = useTheme();
+  const hideScrollbar = isStationeryTheme(theme);
+
+  return (
+    <Box grow="Yes" direction="Column">
+      <Scroll
+        ref={scrollRef}
+        variant="Background"
+        direction="Vertical"
+        size={hideScrollbar ? '0' : '300'}
+        hideTrack
+        visibility="Hover"
+        {...scrollProps}
+      >
+        <div className={css.PageNavContent}>{children}</div>
+      </Scroll>
+    </Box>
+  );
+}
+
+export const Page = as<'div'>(({ className, ...props }, ref) => (
+  <Box
+    grow="Yes"
+    direction="Column"
+    className={classNames(ContainerColor({ variant: 'Surface' }), className)}
+    data-page=""
+    {...props}
+    ref={ref}
+  />
+));
+
+export const PageHeader = as<'div', css.PageHeaderVariants>(
+  ({ className, outlined, balance, ...props }, ref) => (
+    <Header
+      as="header"
+      size="600"
+      className={classNames(css.PageHeader({ balance, outlined }), className)}
+      data-folder-tab-bar=""
+      {...props}
+      ref={ref}
+    />
+  )
+);
+
+export const PageContent = as<'div'>(({ className, ...props }, ref) => (
+  <div className={classNames(css.PageContent, className)} {...props} ref={ref} />
+));
+
+export function PageHeroEmpty({ children }: { children: ReactNode }) {
+  return (
+    <Box
+      className={classNames(ContainerColor({ variant: 'SurfaceVariant' }), css.PageHeroEmpty)}
+      direction="Column"
+      alignItems="Center"
+      justifyContent="Center"
+      gap="200"
+    >
+      {children}
+    </Box>
+  );
+}
+
+export const PageHeroSection = as<'div', ComponentProps<typeof Box>>(
+  ({ className, ...props }, ref) => (
+    <Box
+      direction="Column"
+      className={classNames(css.PageHeroSection, className)}
+      {...props}
+      ref={ref}
+    />
+  )
+);
+
+export function PageHero({
+  icon,
+  title,
+  subTitle,
+  children,
+}: {
+  icon: ReactNode;
+  title: ReactNode;
+  subTitle: ReactNode;
+  children?: ReactNode;
+}) {
+  return (
+    <Box direction="Column" gap="400">
+      <Box direction="Column" alignItems="Center" gap="200">
+        {icon}
+      </Box>
+      <Box as="h2" direction="Column" gap="200" alignItems="Center">
+        <Text align="Center" size="H2">
+          {title}
+        </Text>
+        <Text align="Center" priority="400">
+          {subTitle}
+        </Text>
+      </Box>
+      {children}
+    </Box>
+  );
+}
+
+export const PageContentCenter = as<'div'>(({ className, ...props }, ref) => (
+  <div className={classNames(css.PageContentCenter, className)} {...props} ref={ref} />
+));

overlay/src/app/components/video-viewer/VideoViewer.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Box, Chip, Header, IconButton, Text, as } from 'folds';
+import { Icon, Icons } from '../icons';
+import * as css from './VideoViewer.css';
+import { downloadAndSaveMedia } from '../../utils/saveMedia';
+import { getCurrentAccessToken } from '../../utils/auth';
+
+export type VideoViewerProps = {
+  alt: string;
+  src: string;
+  requestClose: () => void;
+};
+
+export const VideoViewer = as<'div', VideoViewerProps>(
+  ({ className, alt, src, requestClose, ...props }, ref) => {
+    const handleDownload = async () => {
+      try {
+        await downloadAndSaveMedia(src, alt, getCurrentAccessToken());
+      } catch (error) {
+        console.warn('[VideoViewer] Failed to download media:', error);
+        try {
+          window.open(src, '_blank');
+        } catch {
+          // ignore
+        }
+      }
+    };
+
+    return (
+      <Box
+        className={classNames(css.VideoViewer, className)}
+        direction="Column"
+        {...props}
+        ref={ref}
+      >
+        <Header className={css.VideoViewerHeader} size="400">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <IconButton size="300" radii="300" onClick={requestClose}>
+              <Icon size="50" src={Icons.ArrowLeft} />
+            </IconButton>
+            <Text size="T300" truncate>
+              {alt}
+            </Text>
+          </Box>
+          <Box shrink="No" alignItems="Center" gap="200">
+            <Chip
+              variant="Primary"
+              onClick={handleDownload}
+              radii="300"
+              before={<Icon size="50" src={Icons.Download} />}
+            >
+              <Text size="B300">Download</Text>
+            </Chip>
+          </Box>
+        </Header>
+        <Box
+          grow="Yes"
+          className={css.VideoViewerContent}
+          justifyContent="Center"
+          alignItems="Center"
+        >
+          <video
+            className={css.VideoViewerVideo}
+            src={src}
+            title={alt}
+            controls
+            autoPlay
+          />
+        </Box>
+      </Box>
+    );
+  }
+);

overlay/src/app/features/ShareRoomPicker.tsx

@@ -0,0 +1,316 @@
+import { useAtomValue } from 'jotai';
+import React, { ChangeEventHandler, useCallback, useMemo, useRef, useState } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import FocusTrap from 'focus-trap-react';
+import {
+  Avatar,
+  Box,
+  Button,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  MenuItem,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Text,
+  config,
+} from 'folds';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
+import { allRoomsAtom } from '../state/room-list/roomList';
+import { mDirectAtom } from '../state/mDirectList';
+import { useDirects, useRooms } from '../state/hooks/roomList';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../utils/room';
+import { RoomAvatar, RoomIcon } from '../components/room-avatar';
+import { nameInitials } from '../utils/common';
+import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
+import { factoryRoomIdByActivity } from '../utils/sort';
+import {
+  SearchItemStrGetter,
+  useAsyncSearch,
+  UseAsyncSearchOptions,
+} from '../hooks/useAsyncSearch';
+import { VirtualTile } from '../components/virtualizer';
+import { AndroidSharePayload } from '../utils/androidShare';
+import { stopPropagation } from '../utils/keyboard';
+
+const SEARCH_OPTS: UseAsyncSearchOptions = {
+  limit: 200,
+  matchOptions: {
+    contain: true,
+  },
+};
+
+type ShareRoomPickerProps = {
+  /** The pending share payload to display a preview of. */
+  share: AndroidSharePayload;
+  /** Called when the user picks a room. */
+  onPick: (roomId: string) => void;
+  /** Called when the user dismisses without picking. */
+  onDismiss: () => void;
+};
+
+/**
+ * Full-screen modal that lets the user pick a room to send
+ * an incoming Android share intent into.
+ */
+export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [confirmRoomId, setConfirmRoomId] = useState<string | null>(null);
+
+  const mDirects = useAtomValue(mDirectAtom);
+  const allRoomsSet = useAllJoinedRoomsSet();
+  const getRoom = useGetRoom(allRoomsSet);
+  const rooms = useRooms(mx, allRoomsAtom, mDirects);
+  const directs = useDirects(mx, allRoomsAtom, mDirects);
+
+  const allItems = useMemo(
+    () => [...rooms, ...directs].sort(factoryRoomIdByActivity(mx)),
+    [mx, rooms, directs]
+  );
+
+  const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
+    (rId) => getRoom(rId)?.name ?? rId,
+    [getRoom]
+  );
+
+  const [searchResult, searchRoom, resetSearch] = useAsyncSearch(
+    allItems,
+    getRoomNameStr,
+    SEARCH_OPTS
+  );
+
+  const items = searchResult ? searchResult.items : allItems;
+
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 48,
+    overscan: 8,
+  });
+  const vItems = virtualizer.getVirtualItems();
+
+  const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const value = evt.currentTarget.value.trim();
+    if (!value) {
+      resetSearch();
+      return;
+    }
+    searchRoom(value);
+  };
+
+  const handleRoomClick: React.MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const roomId = evt.currentTarget.getAttribute('data-room-id');
+    if (roomId) {
+      setConfirmRoomId(roomId);
+    }
+  };
+
+  const handleConfirm = useCallback(() => {
+    if (confirmRoomId) {
+      onPick(confirmRoomId);
+    }
+  }, [confirmRoomId, onPick]);
+
+  const handleCancelConfirm = useCallback(() => {
+    setConfirmRoomId(null);
+  }, []);
+
+  const previewText = share.text?.slice(0, 80) ?? share.subject?.slice(0, 80);
+  const fileCount = share.files.length;
+
+  return (
+    <>
+      <Overlay open>
+      <FocusTrap
+        focusTrapOptions={{
+          initialFocus: false,
+          clickOutsideDeactivates: true,
+          onDeactivate: onDismiss,
+          escapeDeactivates: stopPropagation,
+        }}
+      >
+        <Box
+          grow="Yes"
+          direction="Column"
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 999,
+            backgroundColor: '#1a1d23',
+            paddingTop: '60px',
+          }}
+        >
+          <Header
+            size="500"
+            style={{ padding: config.space.S400 }}
+          >
+            <Box grow="Yes" direction="Column" gap="100" style={{ minWidth: 0, maxWidth: '80%' }}>
+              <Text size="H4">Share to Room</Text>
+              {(previewText || fileCount > 0) && (
+                <Text size="T200" priority="300" style={{ opacity: 0.7, wordBreak: 'break-word', whiteSpace: 'normal' }}>
+                  {previewText
+                    ? `"${previewText}${(share.text?.length ?? 0) > 80 ? '…' : ''}"`
+                    : `${fileCount} file${fileCount !== 1 ? 's' : ''}`}
+                </Text>
+              )}
+            </Box>
+            <Box shrink="No">
+              <IconButton size="300" radii="300" onClick={onDismiss}>
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Box>
+          </Header>
+
+          <Box
+            style={{
+              padding: config.space.S200,
+              paddingTop: config.space.S300,
+            }}
+          >
+            <Input
+              onChange={handleSearchChange}
+              before={<Icon size="200" src={Icons.Search} />}
+              placeholder="Search rooms…"
+              size="400"
+              variant="Background"
+              outlined
+              autoFocus
+              style={{ width: '100%' }}
+            />
+          </Box>
+
+          <Scroll ref={scrollRef} size="300" hideTrack style={{ flex: 1, minHeight: 0 }}>
+            <Box style={{ padding: config.space.S300 }} direction="Column">
+              {vItems.length === 0 && (
+                <Box
+                  style={{ padding: `${config.space.S700} 0` }}
+                  alignItems="Center"
+                  justifyContent="Center"
+                  direction="Column"
+                  gap="100"
+                >
+                  <Text size="H6" align="Center">
+                    {searchResult ? 'No Match Found' : 'No Rooms'}
+                  </Text>
+                  <Text size="T200" align="Center" priority="300">
+                    {searchResult
+                      ? `No rooms found for "${searchResult.query}".`
+                      : 'You have no rooms to share into.'}
+                  </Text>
+                </Box>
+              )}
+              <Box style={{ position: 'relative', height: virtualizer.getTotalSize() }}>
+                {vItems.map((vItem) => {
+                  const roomId = items[vItem.index];
+                  const room = getRoom(roomId);
+                  if (!room) return null;
+                  const isDm = mDirects.has(roomId);
+
+                  const avatarSrc = isDm
+                    ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                    : getRoomAvatarUrl(mx, room, 96, useAuthentication);
+
+                  return (
+                    <VirtualTile
+                      virtualItem={vItem}
+                      style={{ paddingBottom: config.space.S100 }}
+                      ref={virtualizer.measureElement}
+                      key={roomId}
+                    >
+                      <MenuItem
+                        data-room-id={roomId}
+                        onClick={handleRoomClick}
+                        variant="Surface"
+                        size="400"
+                        radii="400"
+                        before={
+                          <Avatar size="300" radii={isDm ? '400' : '300'}>
+                            {avatarSrc ? (
+                              <RoomAvatar
+                                roomId={roomId}
+                                src={avatarSrc}
+                                alt={room.name}
+                                renderFallback={() => (
+                                  <Text as="span" size="H6">
+                                    {nameInitials(room.name)}
+                                  </Text>
+                                )}
+                              />
+                            ) : (
+                              <RoomIcon room={room} size="200" filled />
+                            )}
+                          </Avatar>
+                        }
+                      >
+                        <Box grow="Yes" direction="Column">
+                          <Text size="B400" truncate>
+                            {room.name}
+                          </Text>
+                        </Box>
+                      </MenuItem>
+                    </VirtualTile>
+                  );
+                })}
+              </Box>
+            </Box>
+          </Scroll>
+        </Box>
+      </FocusTrap>
+    </Overlay>
+
+    {confirmRoomId && (() => {
+      const room = getRoom(confirmRoomId);
+      const roomName = room?.name ?? confirmRoomId;
+      const isDm = mDirects.has(confirmRoomId);
+      return (
+        <Overlay open backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: handleCancelConfirm,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Modal style={{ maxWidth: '280px' }}>
+                <Box direction="Column" gap="100" style={{ padding: config.space.S300 }}>
+                  <Box direction="Column" gap="100">
+                    <Text size="H4">Share to {isDm ? 'Person' : 'Room'}?</Text>
+                    <Text size="T300" priority="300">
+                      Send to <strong>{roomName}</strong>?
+                    </Text>
+                  </Box>
+                  <Box gap="200" justifyContent="End">
+                    <Button
+                      onClick={handleCancelConfirm}
+                      variant="Secondary"
+                      size="400"
+                    >
+                      <Text size="B400">Cancel</Text>
+                    </Button>
+                    <Button
+                      onClick={handleConfirm}
+                      variant="Primary"
+                      size="400"
+                    >
+                      <Text size="B400">Share</Text>
+                    </Button>
+                  </Box>
+                </Box>
+              </Modal>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      );
+    })()}
+    </>
+  );
+}

overlay/src/app/features/forum/ForumBoardDetail.tsx

@@ -0,0 +1,136 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Scroll, Text, color } from 'folds';
+import { Icon, Icons } from '../../components/icons';
+import classNames from 'classnames';
+import { useSetAtom } from 'jotai';
+import { useNavigate } from 'react-router-dom';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useCompactNav } from '../../hooks/useCompactNav';
+import { Page, PageContent } from '../../components/page';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { activeThreadIdAtomFamily } from '../../state/activeThread';
+import { getCanonicalAliasOrRoomId } from '../../utils/matrix';
+import { getSpacePath } from '../../pages/pathUtils';
+import { useForumBoardContext } from './ForumBoardContext';
+import { ForumThreadDetail } from './ForumThreadDetail';
+import type { ForumPost } from './types';
+import * as theme from './forumTheme.css';
+
+/** Thread detail in the main pane; post list lives in ForumFeedSidebar. */
+export function ForumBoardDetail() {
+  const mx = useMatrixClient();
+  const navigate = useNavigate();
+  const compact = useCompactNav();
+  const [optimisticPost, setOptimisticPost] = useState<ForumPost | null>(null);
+
+  const {
+    forumSpace,
+    query,
+    error,
+    selectedPostId,
+    activeTopicRoomId,
+    threads,
+    recordThreadReply,
+  } = useForumBoardContext();
+
+  // Compact: /feed/ without a selected post has no detail content — return to the list
+  // so an empty detail layer cannot cover the forum sidebar.
+  useEffect(() => {
+    if (!compact || selectedPostId) return;
+    navigate(getSpacePath(getCanonicalAliasOrRoomId(mx, forumSpace.roomId)), { replace: true });
+  }, [compact, selectedPostId, navigate, mx, forumSpace.roomId]);
+
+  const activeTopicRoom = activeTopicRoomId ? mx.getRoom(activeTopicRoomId) : null;
+  const topicSelected = Boolean(query.topic);
+
+  const setActiveThreadId = useSetAtom(
+    activeThreadIdAtomFamily(activeTopicRoomId ?? forumSpace.roomId)
+  );
+
+  useEffect(() => {
+    if (selectedPostId && activeTopicRoomId) {
+      setActiveThreadId(selectedPostId);
+      return () => setActiveThreadId(undefined);
+    }
+    setActiveThreadId(undefined);
+    return undefined;
+  }, [selectedPostId, activeTopicRoomId, setActiveThreadId]);
+
+  useEffect(() => {
+    if (optimisticPost && optimisticPost.eventId !== selectedPostId) {
+      setOptimisticPost(null);
+    }
+  }, [optimisticPost, selectedPostId]);
+
+  const selectedThread = useMemo(
+    () => threads.find((t) => t.eventId === selectedPostId),
+    [threads, selectedPostId]
+  );
+
+  const handleReplySent = useCallback(
+    (_reply: ForumPost) => {
+      if (selectedPostId) {
+        recordThreadReply(selectedPostId);
+      }
+    },
+    [recordThreadReply, selectedPostId]
+  );
+
+  const showThread = Boolean(selectedPostId && activeTopicRoom);
+  const threadInitialPost =
+    optimisticPost?.eventId === selectedPostId ? optimisticPost : null;
+  const detailDropRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <Page className={classNames(ContainerColor({ variant: 'Background' }), theme.ForumAppRoot)}>
+      <PageContent className={theme.ForumPageContent}>
+        {error && (
+          <Text as="p" style={{ color: color.Critical.Main, padding: '0.5rem 1rem' }}>
+            {error}
+          </Text>
+        )}
+        <aside className={theme.ForumDetailPane}>
+          {showThread && activeTopicRoom ? (
+            <div ref={detailDropRef} className={theme.ForumTopicPostDetailThreadLayout}>
+              <ForumThreadDetail
+                roomId={activeTopicRoom.roomId}
+                rootEventId={selectedPostId!}
+                titleHint={selectedThread?.title}
+                initialPost={threadInitialPost}
+                fileDropContainerRef={detailDropRef}
+                onReplySent={handleReplySent}
+              />
+            </div>
+          ) : (
+            <Scroll
+              id="topicPostDetail"
+              className={theme.ForumTopicPostDetailScroll}
+              variant="Surface"
+              direction="Vertical"
+              size="300"
+              hideTrack
+              visibility="Hover"
+            >
+              <div className={theme.ForumTopicPostDetailInner}>
+                <Box
+                  className={theme.ForumEmptyDetail}
+                  direction="Column"
+                  alignItems="Center"
+                  justifyContent="Center"
+                  gap="300"
+                >
+                  <Icon src={Icons.Thread} size="600" />
+                  <Text size="T300" priority="300">
+                    {topicSelected
+                      ? 'Select a post to read the thread'
+                      : 'Pick a category and topic, then choose a post'}
+                  </Text>
+                </Box>
+              </div>
+            </Scroll>
+          )}
+        </aside>
+      </PageContent>
+    </Page>
+  );
+}

overlay/src/app/features/forum/useForumBoard.ts

@@ -0,0 +1,431 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { MatrixEvent, Room, RoomStateEvent } from 'matrix-js-sdk';
+import { useAtomValue } from 'jotai';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
+import { useCompactNav } from '../../hooks/useCompactNav';
+import { getCanonicalAliasOrRoomId } from '../../utils/matrix';
+import { getSpaceFeedPath, getSpaceLobbyPath, getSpacePath } from '../../pages/pathUtils';
+import { createRoomModalAtom } from '../../state/createRoomModal';
+import { createSpaceModalAtom } from '../../state/createSpaceModal';
+import { StateEvent } from '../../../types/matrix/room';
+import {
+  buildForumSections,
+  buildTopicThreads,
+  buildThreadSummaries,
+} from './forumTopicHelpers';
+import { applyTopicStatusSort } from './topicSearch';
+import {
+  createForumPostFromPayload,
+  listForumTopics,
+  listTopicFeedPosts,
+  loadAggregatedTopicFeed,
+} from './forumFeed';
+import type {
+  ForumBoardQuery,
+  ForumPost,
+  ForumPublishedPost,
+  ForumSection,
+  ForumThreadSummary,
+} from './types';
+import { useForumRoomLiveUpdates } from './useForumRoomLiveUpdates';
+
+export type ForumBoardScope = {
+  forumSpaceId: string;
+  /** When set, only show posts from this topic room. */
+  topicRoomId?: string;
+};
+
+function scopesFromSelection(
+  sections: ForumSection[],
+  category?: string,
+  topic?: string
+): Array<{ roomId: string; sectionTitle?: string; topicName?: string }> {
+  if (topic) {
+    for (const section of sections) {
+      const match = section.topics.find((t) => t.roomId === topic);
+      if (match) {
+        return [{ roomId: match.roomId, sectionTitle: section.title, topicName: match.name }];
+      }
+    }
+    return [{ roomId: topic }];
+  }
+
+  if (category) {
+    const section = sections.find((s) => s.title === category);
+    if (!section) return [];
+    return section.topics.map((t) => ({
+      roomId: t.roomId,
+      sectionTitle: section.title,
+      topicName: t.name,
+    }));
+  }
+
+  return sections.flatMap((section) =>
+    section.topics.map((t) => ({
+      roomId: t.roomId,
+      sectionTitle: section.title,
+      topicName: t.name,
+    }))
+  );
+}
+
+export function useForumBoard(scope: ForumBoardScope, forumSpace: Room) {
+  const mx = useMatrixClient();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const selectedRoomId = useSelectedRoom();
+  const compact = useCompactNav();
+
+  const searchParams = useMemo(
+    () => new URLSearchParams(location.search),
+    [location.search]
+  );
+
+  const filterQuery: ForumBoardQuery = useMemo(
+    () => ({
+      category: searchParams.get('category') || undefined,
+      topic: searchParams.get('topic') || undefined,
+      q: searchParams.get('q') || undefined,
+      status: (searchParams.get('status') as ForumBoardQuery['status']) || 'all',
+      sort: (searchParams.get('sort') as ForumBoardQuery['sort']) || 'hot',
+    }),
+    [searchParams]
+  );
+
+  const query: ForumBoardQuery = useMemo(
+    () => ({
+      ...filterQuery,
+      post: searchParams.get('post') || undefined,
+      postRoom: searchParams.get('postRoom') || undefined,
+    }),
+    [filterQuery, searchParams]
+  );
+
+  const [sections, setSections] = useState<ForumSection[]>([]);
+  const [threads, setThreads] = useState<ForumThreadSummary[]>([]);
+  const [loadingSections, setLoadingSections] = useState(true);
+  const [loadingThreads, setLoadingThreads] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [postsNextBatch, setPostsNextBatch] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const applyForumSearchParams = useCallback(
+    (mutate: (next: URLSearchParams) => void) => {
+      const next = new URLSearchParams(location.search);
+      mutate(next);
+      const search = next.toString();
+      const spaceIdOrAlias = getCanonicalAliasOrRoomId(mx, forumSpace.roomId);
+
+      const onTopicRoomRoute =
+        Boolean(selectedRoomId) && selectedRoomId !== forumSpace.roomId;
+
+      // Compact master view only mounts the post list on /:spaceId/. Opening a post
+      // must switch to /feed/ so ForumFeedPage mounts as the detail pane.
+      let pathname = location.pathname;
+      if (onTopicRoomRoute) {
+        pathname = getSpaceLobbyPath(spaceIdOrAlias);
+      } else if (next.get('post')) {
+        pathname = getSpaceFeedPath(spaceIdOrAlias);
+      } else if (compact) {
+        pathname = getSpacePath(spaceIdOrAlias);
+      }
+
+      navigate(
+        {
+          pathname,
+          search: search ? `?${search}` : '',
+        },
+        { replace: true }
+      );
+    },
+    [
+      location.pathname,
+      location.search,
+      navigate,
+      mx,
+      forumSpace.roomId,
+      selectedRoomId,
+      compact,
+    ]
+  );
+
+  const setQueryParam = useCallback(
+    (key: string, value: string | null) => {
+      applyForumSearchParams((next) => {
+        if (!value) next.delete(key);
+        else next.set(key, value);
+        if (key !== 'post') {
+          next.delete('post');
+          next.delete('postRoom');
+        }
+      });
+    },
+    [applyForumSearchParams]
+  );
+
+  const setCategory = useCallback(
+    (category: string | null) => {
+      applyForumSearchParams((next) => {
+        if (!category) next.delete('category');
+        else next.set('category', category);
+        next.delete('topic');
+        next.delete('post');
+        next.delete('postRoom');
+      });
+    },
+    [applyForumSearchParams]
+  );
+
+  const loadSections = useCallback(async () => {
+    setLoadingSections(true);
+    setError(null);
+    try {
+      const topics = await listForumTopics(mx, scope.forumSpaceId);
+      setSections(buildForumSections(topics));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load forum categories');
+    } finally {
+      setLoadingSections(false);
+    }
+  }, [mx, scope.forumSpaceId]);
+
+  const refreshThreads = useCallback(async (options?: { silent?: boolean }) => {
+    if (!options?.silent) setLoadingThreads(true);
+    setError(null);
+    try {
+      const roomScopes = scopesFromSelection(sections, filterQuery.category, filterQuery.topic);
+      if (roomScopes.length === 0) {
+        setThreads([]);
+        return;
+      }
+
+      let posts;
+      if (roomScopes.length === 1) {
+        const result = await listTopicFeedPosts(mx, roomScopes[0].roomId);
+        posts = result.posts;
+        setPostsNextBatch(result.nextBatch);
+        const scopeMeta = roomScopes[0];
+        posts.forEach((post) => {
+          post.topicRoomId = scopeMeta.roomId;
+          if (scopeMeta.sectionTitle) post.sectionTitle = scopeMeta.sectionTitle;
+          if (scopeMeta.topicName) post.topicName = scopeMeta.topicName;
+        });
+      } else {
+        posts = await loadAggregatedTopicFeed(mx, roomScopes);
+        setPostsNextBatch(null);
+      }
+
+      setThreads(buildTopicThreads(posts, filterQuery));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load forum posts');
+    } finally {
+      if (!options?.silent) setLoadingThreads(false);
+    }
+  }, [mx, sections, filterQuery]);
+
+  useEffect(() => {
+    loadSections();
+  }, [loadSections]);
+
+  useEffect(() => {
+    const handleSpaceChild = (event: MatrixEvent) => {
+      if (event.getType() !== StateEvent.SpaceChild) return;
+      const roomId = event.getRoomId();
+      if (!roomId) return;
+      if (
+        roomId === forumSpace.roomId ||
+        sections.some((section) => section.spaceId === roomId)
+      ) {
+        loadSections();
+      }
+    };
+    mx.on(RoomStateEvent.Events, handleSpaceChild);
+    return () => {
+      mx.removeListener(RoomStateEvent.Events, handleSpaceChild);
+    };
+  }, [mx, forumSpace.roomId, sections, loadSections]);
+
+  const createSpaceModal = useAtomValue(createSpaceModalAtom);
+  const createRoomModal = useAtomValue(createRoomModalAtom);
+  const prevCreateSpaceModal = useRef(createSpaceModal);
+  const prevCreateRoomModal = useRef(createRoomModal);
+  useEffect(() => {
+    if (prevCreateSpaceModal.current && !createSpaceModal) {
+      loadSections();
+    }
+    if (prevCreateRoomModal.current && !createRoomModal) {
+      loadSections();
+    }
+    prevCreateSpaceModal.current = createSpaceModal;
+    prevCreateRoomModal.current = createRoomModal;
+  }, [createSpaceModal, createRoomModal, loadSections]);
+
+  useEffect(() => {
+    if (loadingSections) return;
+    void refreshThreads();
+  }, [
+    loadingSections,
+    refreshThreads,
+    filterQuery.category,
+    filterQuery.topic,
+    filterQuery.q,
+    filterQuery.status,
+    filterQuery.sort,
+  ]);
+
+  const scopedRooms = useMemo(() => {
+    if (loadingSections) return [];
+    const roomScopes = scopesFromSelection(sections, filterQuery.category, filterQuery.topic);
+    return roomScopes
+      .map((scope) => mx.getRoom(scope.roomId))
+      .filter((room): room is Room => room !== null);
+  }, [loadingSections, sections, filterQuery.category, filterQuery.topic, mx]);
+
+  useForumRoomLiveUpdates(scopedRooms, () => {
+    void refreshThreads({ silent: true });
+  });
+
+  const selectedPostId = query.post ?? null;
+  const selectedThread = threads.find((t) => t.eventId === selectedPostId);
+  const activeTopicRoomId =
+    query.postRoom || selectedThread?.topicRoomId || query.topic || scope.topicRoomId || null;
+
+  const selectPost = useCallback(
+    (eventId: string | null, topicRoomId?: string) => {
+      applyForumSearchParams((next) => {
+        if (!eventId) {
+          next.delete('post');
+          next.delete('postRoom');
+        } else {
+          next.set('post', eventId);
+          if (topicRoomId) next.set('postRoom', topicRoomId);
+          else next.delete('postRoom');
+        }
+      });
+    },
+    [applyForumSearchParams]
+  );
+
+  const insertThreadFromNewPost = useCallback(
+    (published: ForumPublishedPost): ForumPost | null => {
+      const roomScopes = scopesFromSelection(sections, filterQuery.category, filterQuery.topic);
+      const inScope =
+        filterQuery.topic === published.topicRoomId ||
+        (!filterQuery.topic &&
+          (filterQuery.category
+            ? roomScopes.some((s) => s.roomId === published.topicRoomId)
+            : true));
+
+      const scopeMeta = roomScopes.find((s) => s.roomId === published.topicRoomId);
+      const post = createForumPostFromPayload(
+        mx,
+        published.topicRoomId,
+        published.eventId,
+        {
+          title: published.title,
+          plainText: published.plainText,
+          formattedHtml: published.formattedHtml,
+        },
+        {
+          topicRoomId: published.topicRoomId,
+          sectionTitle: scopeMeta?.sectionTitle,
+          topicName: scopeMeta?.topicName,
+        }
+      );
+
+      if (inScope) {
+        const [summary] = buildThreadSummaries([post]);
+        if (summary) {
+          setThreads((prev) => {
+            const without = prev.filter((t) => t.eventId !== summary.eventId);
+            const merged = [summary, ...without];
+            return applyTopicStatusSort(merged, filterQuery.status || 'all', filterQuery.sort || 'hot');
+          });
+        }
+      }
+
+      return post;
+    },
+    [mx, sections, filterQuery]
+  );
+
+  const recordThreadReply = useCallback((rootEventId: string) => {
+    setThreads((prev) =>
+      prev.map((t) =>
+        t.eventId === rootEventId
+          ? {
+              ...t,
+              totalReplies: t.totalReplies + 1,
+              lastActivityTs: Date.now(),
+            }
+          : t
+      )
+    );
+  }, []);
+
+  const loadMorePosts = useCallback(async () => {
+    if (!postsNextBatch || loadingMore) return;
+    const roomScopes = scopesFromSelection(sections, filterQuery.category, filterQuery.topic);
+    if (roomScopes.length !== 1) return;
+
+    setLoadingMore(true);
+    setError(null);
+    try {
+      const scopeMeta = roomScopes[0];
+      const result = await listTopicFeedPosts(mx, scopeMeta.roomId, {
+        from: postsNextBatch,
+        minRoots: 1,
+      });
+      setPostsNextBatch(result.nextBatch);
+      result.posts.forEach((post) => {
+        post.topicRoomId = scopeMeta.roomId;
+        if (scopeMeta.sectionTitle) post.sectionTitle = scopeMeta.sectionTitle;
+        if (scopeMeta.topicName) post.topicName = scopeMeta.topicName;
+      });
+      setThreads((prev) => {
+        const existingIds = new Set(prev.map((t) => t.eventId));
+        const added = buildTopicThreads(result.posts, filterQuery).filter(
+          (t) => !existingIds.has(t.eventId)
+        );
+        const merged = [...prev, ...added];
+        const sort = filterQuery.sort || 'hot';
+        merged.sort((a, b) => {
+          if (sort === 'new') return b.timestamp - a.timestamp;
+          if (sort === 'top') return b.totalReplies - a.totalReplies;
+          const hotA = a.totalReplies * 4 + Math.floor((a.lastActivityTs - a.timestamp) / 3600000);
+          const hotB = b.totalReplies * 4 + Math.floor((b.lastActivityTs - b.timestamp) / 3600000);
+          return hotB - hotA;
+        });
+        return merged;
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load older posts');
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [postsNextBatch, loadingMore, sections, filterQuery, mx]);
+
+  return {
+    forumSpace,
+    sections,
+    threads,
+    query,
+    loadingSections,
+    loadingThreads,
+    error,
+    selectedPostId,
+    selectedThread,
+    activeTopicRoomId,
+    setQueryParam,
+    setCategory,
+    selectPost,
+    refreshThreads,
+    insertThreadFromNewPost,
+    recordThreadReply,
+    loadMorePosts,
+    hasMorePosts: Boolean(postsNextBatch),
+    loadingMore,
+  };
+}

overlay/src/app/features/room/RoomView.tsx

@@ -0,0 +1,185 @@
+import React, { useCallback, useRef } from 'react';
+import { Box, Text, config } from 'folds';
+import { EventType, Room } from 'matrix-js-sdk';
+import { ReactEditor } from 'slate-react';
+import { isKeyHotkey } from 'is-hotkey';
+import { useAtomValue } from 'jotai';
+import { useStateEvent } from '../../hooks/useStateEvent';
+import { StateEvent } from '../../../types/matrix/room';
+import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useEditor } from '../../components/editor';
+import { RoomInputPlaceholder } from './RoomInputPlaceholder';
+import { RoomTimeline } from './RoomTimeline';
+import { RoomViewTyping } from './RoomViewTyping';
+import { RoomTombstone } from './RoomTombstone';
+import { RoomInput } from './RoomInput';
+import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
+import { Page } from '../../components/page';
+import { RoomViewHeader } from './RoomViewHeader';
+import { useKeyDown } from '../../hooks/useKeyDown';
+import { editableActiveElement } from '../../utils/dom';
+import { settingsAtom } from '../../state/settings';
+import { useSetting } from '../../state/hooks/settings';
+import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { activeThreadIdAtomFamily } from '../../state/activeThread';
+import { ThreadView } from './ThreadView';
+import { MobileSwipeToReplyLayer } from '../../components/mobile/MobileSwipeToReplyLayer';
+import { useMobileKeyboardLayout } from '../../hooks/useMobileKeyboardLayout';
+import * as composerCss from './room-composer-mobile.css';
+
+const FN_KEYS_REGEX = /^F\d+$/;
+const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
+  const { code } = evt;
+  if (evt.metaKey || evt.altKey || evt.ctrlKey) {
+    return false;
+  }
+
+  if (FN_KEYS_REGEX.test(code)) return false;
+
+  if (
+    code.startsWith('OS') ||
+    code.startsWith('Meta') ||
+    code.startsWith('Shift') ||
+    code.startsWith('Alt') ||
+    code.startsWith('Control') ||
+    code.startsWith('Arrow') ||
+    code.startsWith('Page') ||
+    code.startsWith('End') ||
+    code.startsWith('Home') ||
+    code === 'Tab' ||
+    code === 'Space' ||
+    code === 'Enter' ||
+    code === 'NumLock' ||
+    code === 'ScrollLock'
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
+  const roomInputRef = useRef<HTMLDivElement>(null);
+  const roomViewRef = useRef<HTMLDivElement>(null);
+
+  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const { immersive } = useMobileKeyboardLayout();
+
+  const { roomId } = room;
+  const editor = useEditor();
+
+  const mx = useMatrixClient();
+
+  const tombstoneEvent = useStateEvent(room, StateEvent.RoomTombstone);
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(room);
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canMessage = permissions.event(EventType.RoomMessage, mx.getSafeUserId());
+
+  const activeThreadId = useAtomValue(activeThreadIdAtomFamily(roomId));
+
+  useKeyDown(
+    window,
+    useCallback(
+      (evt) => {
+        if (editableActiveElement()) return;
+        const portalContainer = document.getElementById('portalContainer');
+        if (portalContainer && portalContainer.children.length > 0) {
+          return;
+        }
+        if (shouldFocusMessageField(evt)) {
+          evt.preventDefault();
+          ReactEditor.focus(editor);
+          if (evt.key.length === 1) {
+            editor.insertText(evt.key);
+          }
+        } else if (isKeyHotkey('mod+v', evt)) {
+          ReactEditor.focus(editor);
+        }
+      },
+      [editor]
+    )
+  );
+
+  const flushComposer = immersive;
+  const composerPadding = flushComposer ? '0' : `0 ${config.space.S400}`;
+  const showHeader = !immersive;
+
+  return (
+    <Page ref={roomViewRef}>
+      {showHeader && <RoomViewHeader />}
+      {activeThreadId ? (
+        <ThreadView room={room} threadRootId={activeThreadId} />
+      ) : (
+        <>
+          <MobileSwipeToReplyLayer room={room} editor={editor}>
+            <Box grow="Yes" direction="Column">
+              <RoomTimeline
+                key={roomId}
+                room={room}
+                eventId={eventId}
+                roomInputRef={roomInputRef}
+                editor={editor}
+              />
+              <RoomViewTyping room={room} />
+            </Box>
+          </MobileSwipeToReplyLayer>
+          <Box
+            shrink="No"
+            direction="Column"
+            data-disable-swipe-back="true"
+            data-composer-flush={flushComposer ? 'true' : undefined}
+            className={composerCss.ComposerDock}
+          >
+            {immersive && !hideActivity && (
+              <div className={composerCss.FollowingFloat}>
+                <div className={composerCss.FollowingFloatHit}>
+                  <RoomViewFollowing room={room} />
+                </div>
+              </div>
+            )}
+            <div style={{ padding: composerPadding }}>
+              {tombstoneEvent ? (
+                <RoomTombstone
+                  roomId={roomId}
+                  body={tombstoneEvent.getContent().body}
+                  replacementRoomId={tombstoneEvent.getContent().replacement_room}
+                />
+              ) : (
+                <>
+                  {canMessage && (
+                    <RoomInput
+                      room={room}
+                      editor={editor}
+                      roomId={roomId}
+                      fileDropContainerRef={roomViewRef}
+                      ref={roomInputRef}
+                    />
+                  )}
+                  {!canMessage && (
+                    <RoomInputPlaceholder
+                      style={{ padding: config.space.S200 }}
+                      alignItems="Center"
+                      justifyContent="Center"
+                    >
+                      <Text align="Center">You do not have permission to post in this room</Text>
+                    </RoomInputPlaceholder>
+                  )}
+                </>
+              )}
+            </div>
+            {!immersive &&
+              (hideActivity ? (
+                <RoomViewFollowingPlaceholder />
+              ) : (
+                <RoomViewFollowing room={room} />
+              ))}
+          </Box>
+        </>
+      )}
+    </Page>
+  );
+}

overlay/src/app/features/room/RoomViewFollowing.css.ts

@@ -0,0 +1,49 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { DefaultReset, color, config, toRem } from 'folds';
+
+export const RoomViewFollowingPlaceholder = style([
+  DefaultReset,
+  {
+    height: toRem(28),
+  },
+]);
+
+export const RoomViewFollowing = recipe({
+  base: [
+    DefaultReset,
+    {
+      minHeight: toRem(28),
+      padding: `0 ${config.space.S400}`,
+      width: '100%',
+      backgroundColor: color.Surface.Container,
+      color: color.Surface.OnContainer,
+      outline: 'none',
+      selectors: {
+        // Compact floating chip while the keyboard is open.
+        '[data-composer-flush="true"] &': {
+          minHeight: 0,
+          width: 'auto',
+          maxWidth: '100%',
+          padding: `${config.space.S100} ${config.space.S200}`,
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+  ],
+  variants: {
+    clickable: {
+      true: {
+        cursor: 'pointer',
+        selectors: {
+          '&:hover, &:focus-visible': {
+            color: color.Primary.Main,
+          },
+          '&:active': {
+            color: color.Primary.Main,
+          },
+        },
+      },
+    },
+  },
+});

overlay/src/app/features/room/replyToMessage.ts

@@ -0,0 +1,41 @@
+import { RelationType, Room } from 'matrix-js-sdk';
+import { Editor } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { getEditedEvent } from '../../utils/room';
+import { IReplyDraft } from '../../state/room/roomInputDrafts';
+
+export const startReplyToEvent = (
+  room: Room,
+  eventId: string,
+  setReplyDraft: (draft: IReplyDraft | undefined) => void,
+  editor?: Editor,
+  startThread = false
+): boolean => {
+  const replyEvt = room.findEventById(eventId);
+  if (!replyEvt || replyEvt.isRedacted()) return false;
+
+  const editedReply = getEditedEvent(eventId, replyEvt, room.getUnfilteredTimelineSet());
+  const content = editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent();
+  const { body, formatted_body: formattedBody } = content;
+  const senderId = replyEvt.getSender();
+
+  if (!senderId || typeof body !== 'string') return false;
+
+  const relation = startThread
+    ? { rel_type: RelationType.Thread, event_id: eventId }
+    : replyEvt.getWireContent()['m.relates_to'];
+
+  setReplyDraft({
+    userId: senderId,
+    eventId,
+    body,
+    formattedBody,
+    relation,
+  });
+
+  if (editor) {
+    setTimeout(() => ReactEditor.focus(editor), 100);
+  }
+
+  return true;
+};

overlay/src/app/features/room/room-composer-mobile.css.ts

@@ -0,0 +1,63 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { DefaultReset, color, config } from 'folds';
+
+export const ComposerDock = style({
+  position: 'relative',
+});
+
+/** Read receipts float above the input so they don't reserve layout height. */
+export const FollowingFloat = style({
+  position: 'absolute',
+  bottom: '100%',
+  left: 0,
+  right: 0,
+  zIndex: 2,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  pointerEvents: 'none',
+  padding: `0 ${config.space.S200}`,
+});
+
+export const FollowingFloatHit = style({
+  pointerEvents: 'auto',
+  maxWidth: '100%',
+});
+
+export const RoomViewFollowingPlaceholder = style([
+  DefaultReset,
+  {
+    display: 'none',
+    height: 0,
+  },
+]);
+
+export const RoomViewFollowing = recipe({
+  base: [
+    DefaultReset,
+    {
+      minHeight: 0,
+      padding: `${config.space.S100} ${config.space.S200}`,
+      width: 'auto',
+      maxWidth: '100%',
+      backgroundColor: 'transparent',
+      color: color.Surface.OnContainer,
+      outline: 'none',
+    },
+  ],
+  variants: {
+    clickable: {
+      true: {
+        cursor: 'pointer',
+        selectors: {
+          '&:hover, &:focus-visible': {
+            color: color.Primary.Main,
+          },
+          '&:active': {
+            color: color.Primary.Main,
+          },
+        },
+      },
+    },
+  },
+});

overlay/src/app/features/settings/notifications/SystemNotification.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Box, Text, Switch, Button, color, Spinner } from 'folds';
 import { IPusherRequest } from 'matrix-js-sdk';
 import { SequenceCard } from '../../../components/sequence-card';
@@ -11,6 +11,12 @@ import { useEmailNotifications } from '../../../hooks/useEmailNotifications';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { isCapacitorNative, requestSystemNotificationPermission } from '../../../utils/tauri';
+import {
+  isBackgroundSyncSupported,
+  getBackgroundSyncStatus,
+  requestResetPushRegistration,
+  triggerBackgroundSyncPing,
+} from '../../../utils/backgroundSync';
 
 function EmailNotification() {
   const mx = useMatrixClient();
@@ -147,6 +153,7 @@ export function SystemNotification() {
           after={<Switch value={isNotificationSounds} onChange={setIsNotificationSounds} />}
         />
       </SequenceCard>
+      {isBackgroundSyncSupported() && <AndroidPushNotifications />}
       <SequenceCard
         className={SequenceCardStyle}
         variant="SurfaceVariant"
@@ -158,3 +165,126 @@ export function SystemNotification() {
     </Box>
   );
 }
+
+type PushStatus = {
+  registered: boolean;
+  distributor: string;
+  endpoint: string;
+};
+
+/** Android-only section showing UnifiedPush registration status and controls. */
+function AndroidPushNotifications() {
+  const [status, setStatus] = useState<PushStatus | undefined>(undefined);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    const s = await getBackgroundSyncStatus();
+    setStatus(
+      s
+        ? {
+            registered: s.registered,
+            distributor: s.distributor || '',
+            endpoint: s.endpoint || '',
+          }
+        : undefined
+    );
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const [resetState, reset] = useAsyncCallback(
+    useCallback(async () => {
+      await requestResetPushRegistration();
+      await refresh();
+    }, [refresh])
+  );
+
+  const [pingState, ping] = useAsyncCallback(
+    useCallback(async () => {
+      await triggerBackgroundSyncPing('manual-test');
+    }, [])
+  );
+
+  const isBusy =
+    loading ||
+    resetState.status === AsyncStatus.Loading ||
+    pingState.status === AsyncStatus.Loading;
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Android Push (UnifiedPush)</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title="Background Notifications"
+          description={
+            loading ? (
+              'Loading status…'
+            ) : status === undefined ? (
+              <Text as="span" style={{ color: color.Critical.Main }} size="T200">
+                Failed to read push status.
+              </Text>
+            ) : status.registered ? (
+              <>
+                <Text as="span" size="T200">
+                  {`Distributor: ${status.distributor || 'unknown'}`}
+                </Text>
+              </>
+            ) : (
+              <Text as="span" style={{ color: color.Warning?.Main ?? color.Critical.Main }} size="T200">
+                Not registered. Tap &quot;Reset&quot; to choose a distributor app.
+              </Text>
+            )
+          }
+          after={loading ? <Spinner variant="Secondary" /> : undefined}
+        />
+        <SettingTile
+          title="Change Distributor"
+          description="Re-open the UnifiedPush distributor selection dialog."
+          after={
+            <Button
+              size="300"
+              radii="300"
+              variant="Secondary"
+              disabled={isBusy}
+              onClick={() => void reset()}
+            >
+              {resetState.status === AsyncStatus.Loading ? (
+                <Spinner variant="Secondary" size="200" />
+              ) : (
+                <Text size="B300">Reset</Text>
+              )}
+            </Button>
+          }
+        />
+        <SettingTile
+          title="Test Notification"
+          description="Trigger a test push ping to verify the pipeline works."
+          after={
+            <Button
+              size="300"
+              radii="300"
+              variant="Secondary"
+              disabled={isBusy}
+              onClick={() => void ping()}
+            >
+              {pingState.status === AsyncStatus.Loading ? (
+                <Spinner variant="Secondary" size="200" />
+              ) : (
+                <Text size="B300">Send Test</Text>
+              )}
+            </Button>
+          }
+        />
+      </SequenceCard>
+    </Box>
+  );
+}

overlay/src/app/features/settings/plugins/PluginAPI.ts

@@ -0,0 +1,149 @@
+/**
+ * Re-exports the full @paarrot/plugin-manager API and creates the shared
+ * singleton PluginRegistry instance for this application.
+ *
+ * All other modules in this folder should import from here rather than
+ * directly from the package so the singleton is guaranteed to be shared.
+ */
+export {
+  PluginMarketplaceClient,
+  PluginMarketplaceManager,
+  PluginRegistry,
+  createPluginContext,
+  generateThemeCSS,
+  MemoryStorage,
+} from '@paarrot/plugin-manager';
+
+export type {
+  IPluginStorage,
+  IPluginEventClient,
+  PluginMarketplaceClientOptions,
+  PluginMarketplaceHostAdapter,
+  PluginMarketplaceInstalledRecord,
+  PluginMarketplaceManagerOptions,
+  PluginRegistryOptions,
+  PluginContextOptions,
+  PluginMetadata,
+  InstalledPlugin,
+  PluginIndex,
+  ThemeColorGroup,
+  ThemePaletteGroup,
+  PluginThemeColors,
+  PluginTheme,
+  CommandArg,
+  PluginCommand,
+  MessageInterceptor,
+  MessageContext,
+  CustomRenderer,
+  SettingDefinition,
+  SettingsSchema,
+  NotificationOptions,
+  PluginContext,
+  PluginSettingsSection,
+  UILocation,
+  UIButtonDefinition,
+  UIButtonPosition,
+  Plugin,
+  PluginLogEntry,
+} from '@paarrot/plugin-manager';
+
+export { PluginTab } from '@paarrot/plugin-manager';
+
+import {
+  PluginMarketplaceClient,
+  PluginMarketplaceManager,
+  PluginRegistry,
+} from '@paarrot/plugin-manager';
+import { getPluginHost } from '../../../utils/pluginHost';
+
+const PLUGIN_INDEX_URL =
+  import.meta.env.VITE_PLUGIN_INDEX_URL ||
+  `https://raw.githubusercontent.com/Paarrot/Plugin-Directory/refs/heads/main/plugins/index.json?cache_burst=${(Math.random()*256).toString()}`;
+const PLUGIN_BASE_URL =
+  import.meta.env.VITE_PLUGIN_BASE_URL ||
+  'https://raw.githubusercontent.com/Paarrot/Plugin-Directory/refs/heads/main/plugins/';
+
+function injectThemeStyle(styleId: string, css: string): void {
+  let el = document.getElementById(styleId) as HTMLStyleElement | null;
+  if (!el) {
+    el = document.createElement('style');
+    el.id = styleId;
+    document.head.appendChild(el);
+  }
+  el.textContent = css;
+}
+
+function removeThemeStyle(styleId: string): void {
+  document.getElementById(styleId)?.remove();
+}
+
+/** Shared singleton registry for the entire application. */
+export const pluginRegistry = new PluginRegistry({
+  storage: localStorage,
+  onThemeRegistered: (themeId, _className, css) =>
+    injectThemeStyle(`plugin-theme-${themeId}`, css),
+  onThemeUnregistered: (themeId) => removeThemeStyle(`plugin-theme-${themeId}`),
+});
+
+/** Shared marketplace client for remote plugin directory reads. */
+export const pluginMarketplaceClient = new PluginMarketplaceClient({
+  indexUrl: PLUGIN_INDEX_URL,
+  baseUrl: PLUGIN_BASE_URL,
+});
+
+/**
+ * Shared marketplace manager for install state, directory fetch, and enable flags.
+ */
+export const pluginMarketplaceManager = new PluginMarketplaceManager({
+  client: pluginMarketplaceClient,
+  storage: localStorage,
+  registry: pluginRegistry,
+  host: {
+    listInstalledPlugins: async () => {
+      const host = getPluginHost();
+      if (!host) {
+        return [];
+      }
+
+      const result = await host.list();
+      if (!result.success || !result.data) {
+        throw new Error(result.error ?? 'Failed to list installed plugins');
+      }
+
+      return result.data.map((plugin) => ({
+        id: plugin.id,
+        name: plugin.name,
+        version: plugin.version,
+        description: plugin.description,
+        author: plugin.author,
+        repository: plugin.repository,
+        thumbnail: plugin.thumbnail,
+        homepage: plugin.homepage,
+        tags: plugin.tags,
+        installedDate: plugin.installedDate,
+      }));
+    },
+    installPlugin: async (plugin) => {
+      const host = getPluginHost();
+      if (!host) {
+        return;
+      }
+
+      const result = await host.download(plugin.id, plugin.downloadUrl, plugin.name);
+      if (!result.success) {
+        throw new Error(result.error ?? 'Failed to install plugin');
+      }
+    },
+    uninstallPlugin: async (pluginId) => {
+      const host = getPluginHost();
+      if (!host) {
+        return;
+      }
+
+      const result = await host.uninstall(pluginId);
+      if (!result.success) {
+        throw new Error(result.error ?? 'Failed to uninstall plugin');
+      }
+    },
+  },
+});

overlay/src/app/features/settings/plugins/PluginLoader.tsx

@@ -0,0 +1,190 @@
+import React, { useEffect } from 'react';
+import { MatrixClient } from 'matrix-js-sdk';
+import { Plugin, createPluginContext } from '@paarrot/plugin-manager';
+import { pluginMarketplaceManager, pluginRegistry } from './PluginAPI';
+import { sendNotification } from '../../../utils/tauri';
+import { getPluginHost } from '../../../utils/pluginHost';
+import { dispatchPluginButtonsChanged } from './PluginButtonSlot';
+
+interface PluginLoaderProps {
+  matrixClient: MatrixClient;
+  children: React.ReactNode;
+}
+
+/**
+ * Component that loads and initializes enabled plugins.
+ * Should be placed high in the component tree after MatrixClient is available.
+ */
+export function PluginLoader({ matrixClient, children }: PluginLoaderProps) {
+  console.log('[PluginLoader] Component rendering, matrixClient:', !!matrixClient);
+
+  useEffect(() => {
+    const loadPlugins = async () => {
+      try {
+        const pluginHost = getPluginHost();
+        console.log('[PluginLoader] Loading plugins...');
+        console.log('[PluginLoader] plugin host available:', !!pluginHost);
+
+        if (!pluginHost) {
+          console.log('[PluginLoader] Running in web mode, plugins not supported');
+          return;
+        }
+
+        const pluginsToLoad = await pluginMarketplaceManager.listEnabledPlugins();
+
+        console.log('[PluginLoader] Plugins to load:', pluginsToLoad.length);
+        console.log('[PluginLoader] Plugin list:', pluginsToLoad.map((p) => p.id));
+
+        for (const installedPlugin of pluginsToLoad) {
+          try {
+            console.log(`[PluginLoader] Loading plugin: ${installedPlugin.id}`);
+
+            const pluginModule = await loadPluginModule(installedPlugin.id);
+            const plugin = normalisePlugin(pluginModule);
+
+            if (!plugin || typeof plugin !== 'object') {
+              console.error(
+                `[PluginLoader] Plugin ${installedPlugin.id} does not export a valid plugin object`
+              );
+              continue;
+            }
+
+            if (typeof plugin.onLoad !== 'function') {
+              console.error(
+                `[PluginLoader] Plugin ${installedPlugin.id} does not have an onLoad function`
+              );
+              continue;
+            }
+
+            const context = createPluginContext(
+              {
+                pluginId: installedPlugin.id,
+                eventClient: matrixClient as any,
+                onNotify: async (opts) => {
+                  await sendNotification({
+                    title: opts.title,
+                    body: opts.body,
+                    path: undefined,
+                  });
+                },
+              },
+              pluginRegistry
+            );
+
+            const compatContext = Object.assign(context as Record<string, unknown>, {
+              matrixClient,
+              matrix: {
+                on: (eventType: string, handler: (...args: unknown[]) => void) =>
+                  matrixClient.on(eventType as any, handler as any),
+                off: (eventType: string, handler: (...args: unknown[]) => void) =>
+                  matrixClient.off(eventType as any, handler as any),
+              },
+              React,
+            });
+
+            console.log('[PluginLoader] compatContext.React:', !!compatContext.React);
+            console.log('[PluginLoader] compatContext.ui:', !!compatContext.ui);
+            console.log('[PluginLoader] About to register plugin and call onLoad...');
+
+            pluginRegistry.registerPlugin(installedPlugin.id, plugin, context);
+            await plugin.onLoad(compatContext as any);
+            console.log(`[PluginLoader] Successfully loaded plugin: ${installedPlugin.id}`);
+            dispatchPluginButtonsChanged();
+          } catch (error) {
+            console.error(`[PluginLoader] Failed to load plugin ${installedPlugin.id}:`, error);
+            pluginRegistry.addLog(installedPlugin.id, 'error', ['Failed to load:', error]);
+          }
+        }
+      } catch (error) {
+        console.error('[PluginLoader] Error loading plugins:', error);
+      }
+    };
+
+    loadPlugins();
+
+    return () => {
+      console.log('[PluginLoader] Cleaning up plugins');
+      pluginRegistry.clear();
+      dispatchPluginButtonsChanged();
+    };
+  }, [matrixClient]);
+
+  return <>{children}</>;
+}
+
+/**
+ * Reads and evaluates a plugin's JS module from the native filesystem host.
+ * Supports both CommonJS and ESM-style exports.
+ */
+async function loadPluginModule(pluginId: string): Promise<any> {
+  const pluginHost = getPluginHost();
+  if (!pluginHost) {
+    throw new Error('Plugins are only supported in the desktop or Android app');
+  }
+
+  const response = await pluginHost.readPluginCode(pluginId);
+  if (!response.success || !response.data) {
+    throw new Error(response.error ?? 'Failed to read plugin code');
+  }
+
+  const pluginExports: any = {};
+  const mod = { exports: pluginExports };
+
+  try {
+    // eslint-disable-next-line no-new-func
+    const pluginFunction = new Function('module', 'exports', response.data);
+    pluginFunction(mod, pluginExports);
+  } catch (error) {
+    if (!(error instanceof SyntaxError)) {
+      throw error;
+    }
+
+    const dataUrl = `data:text/javascript;charset=utf-8,${encodeURIComponent(response.data)}`;
+    const importedModule = await import(/* @vite-ignore */ dataUrl);
+    return importedModule;
+  }
+
+  return mod.exports;
+}
+
+/**
+ * Normalizes raw plugin exports to current plugin interface.
+ * Supports native `onLoad` and legacy `activate` / `deactivate` plugins.
+ */
+function normalisePlugin(raw: Record<string, unknown>): Plugin {
+  if (typeof raw.onLoad === 'function') {
+    return raw as unknown as Plugin;
+  }
+
+  if (typeof raw.activate === 'function') {
+    const activate = raw.activate as (ctx: unknown) => void | Promise<void>;
+    const deactivate = raw.deactivate as ((ctx?: unknown) => void | Promise<void>) | undefined;
+
+    return {
+      name: typeof raw.name === 'string' ? raw.name : undefined,
+      version: typeof raw.version === 'string' ? raw.version : undefined,
+      onLoad: async (ctx) => {
+        const legacyCtx = Object.assign(Object.create(ctx as object), {
+          registerHook: (name: string) =>
+            ctx.log(`[compat] registerHook("${name}") - not supported`),
+          runHook: (name: string) => {
+            ctx.log(`[compat] runHook("${name}")`);
+            return Promise.resolve([]);
+          },
+          getConfig: (key: string) => ctx.settings.get(key),
+          on: (event: string, handler: (...args: unknown[]) => void) =>
+            ctx.events.on(event, handler),
+        });
+
+        await activate(legacyCtx);
+      },
+      onUnload: deactivate
+        ? async () => {
+            await deactivate();
+          }
+        : undefined,
+    };
+  }
+
+  return raw as unknown as Plugin;
+}

overlay/src/app/hooks/useCompactNav.ts

@@ -0,0 +1,30 @@
+import { matchPath, useLocation } from 'react-router-dom';
+import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from '../pages/paths';
+import { ScreenSize, useScreenSizeContext } from './useScreenSize';
+
+/** Skinny window layout (≤750px): master-detail instead of 3-column desktop. */
+export const useCompactNav = (): boolean => {
+  const screenSize = useScreenSizeContext();
+  return screenSize === ScreenSize.Mobile;
+};
+
+const LIST_ROUTE_PATHS = [HOME_PATH, DIRECT_PATH, SPACE_PATH, EXPLORE_PATH, INBOX_PATH] as const;
+
+/**
+ * Routes where sidebar + channel list are shown together (no room/content pane).
+ * Uses matchPath on the current pathname so trailing-slash / encoding quirks
+ * after DM → space navigations still count as master list routes.
+ */
+export const useIsCompactListRoute = (): boolean => {
+  const { pathname } = useLocation();
+
+  return LIST_ROUTE_PATHS.some(
+    (path) => matchPath({ path, caseSensitive: true, end: true }, pathname) != null
+  );
+};
+
+export const useShowCompactMasterView = (): boolean => {
+  const compact = useCompactNav();
+  const isListRoute = useIsCompactListRoute();
+  return compact && isListRoute;
+};

overlay/src/app/hooks/useFilePasteHandler.ts

@@ -0,0 +1,111 @@
+import { useCallback, ClipboardEventHandler } from 'react';
+import { getDataTransferFiles } from '../utils/dom';
+import { readClipboardImage, isTauri, isLinux, isCapacitorNative } from '../utils/tauri';
+
+const filesFromClipboardItems = (data: DataTransfer | null): File[] => {
+  if (!data?.items) return [];
+
+  const files: File[] = [];
+  for (let i = 0; i < data.items.length; i += 1) {
+    const item = data.items[i];
+    if (item.kind !== 'file') continue;
+    const file = item.getAsFile();
+    if (file) files.push(file);
+  }
+  return files;
+};
+
+const filesFromHtmlImage = (data: DataTransfer | null): File[] => {
+  const html = data?.getData('text/html');
+  if (!html) return [];
+
+  const match = html.match(/<img[^>]+src=["'](data:image\/[a-zA-Z+]+;base64,[^"']+)["']/i);
+  if (!match?.[1]) return [];
+
+  try {
+    const dataUrl = match[1];
+    const [meta, base64] = dataUrl.split(',');
+    const mime = meta.match(/data:(image\/[a-zA-Z+]+);base64/i)?.[1] ?? 'image/png';
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i += 1) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    const ext = mime.split('/')[1]?.replace('+xml', '') || 'png';
+    return [new File([bytes], `clipboard-image.${ext}`, { type: mime })];
+  } catch {
+    return [];
+  }
+};
+
+const getClipboardFiles = (data: DataTransfer | null): File[] => {
+  if (!data) return [];
+
+  const fromFiles = getDataTransferFiles(data);
+  if (fromFiles && fromFiles.length > 0) return fromFiles;
+
+  const fromItems = filesFromClipboardItems(data);
+  if (fromItems.length > 0) return fromItems;
+
+  return filesFromHtmlImage(data);
+};
+
+/** Async Clipboard API fallback (when paste event has no file payload). */
+const filesFromClipboardApi = async (): Promise<File[]> => {
+  if (!navigator.clipboard?.read) return [];
+  try {
+    const items = await navigator.clipboard.read();
+    const files: File[] = [];
+    for (const item of items) {
+      for (const type of item.types) {
+        if (!type.startsWith('image/')) continue;
+        const blob = await item.getType(type);
+        const ext = type.split('/')[1]?.replace('+xml', '') || 'png';
+        files.push(new File([blob], `clipboard-image.${ext}`, { type }));
+      }
+    }
+    return files;
+  } catch {
+    return [];
+  }
+};
+
+/**
+ * Paste handler for RoomInput. Supports clipboard images via files, DataTransferItem
+ * list, HTML data-URL fallbacks, and Clipboard API (common on mobile WebViews).
+ * On Capacitor Android, native OnReceiveContent also routes images into the share pipeline.
+ */
+export const useFilePasteHandler = (onPaste: (file: File[]) => void): ClipboardEventHandler =>
+  useCallback(
+    async (evt) => {
+      const files = getClipboardFiles(evt.clipboardData);
+      if (files.length > 0) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        onPaste(files);
+        return;
+      }
+
+      // On Linux with Tauri, browser clipboard API doesn't work for images.
+      if (isTauri() && isLinux()) {
+        const clipboardImage = await readClipboardImage();
+        if (clipboardImage) {
+          evt.preventDefault();
+          evt.stopPropagation();
+          onPaste([clipboardImage]);
+          return;
+        }
+      }
+
+      // Mobile WebView / Capacitor: paste events often omit file payloads.
+      if (isCapacitorNative()) {
+        const apiFiles = await filesFromClipboardApi();
+        if (apiFiles.length > 0) {
+          evt.preventDefault();
+          evt.stopPropagation();
+          onPaste(apiFiles);
+        }
+      }
+    },
+    [onPaste]
+  );

overlay/src/app/hooks/useMobileKeyboardLayout.ts

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { isCapacitorNative } from '../utils/tauri';
+
+const KEYBOARD_HEIGHT_THRESHOLD_PX = 120;
+const IMMERSIVE_CLASS = 'immersive-landscape-keyboard';
+
+const getIsLandscape = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  if (window.matchMedia?.('(orientation: landscape)').matches) return true;
+  return window.innerWidth > window.innerHeight;
+};
+
+const getKeyboardOpen = (): boolean => {
+  if (typeof window === 'undefined') return false;
+
+  const viewport = window.visualViewport;
+  if (viewport) {
+    const obscured = window.innerHeight - viewport.height - viewport.offsetTop;
+    if (obscured > KEYBOARD_HEIGHT_THRESHOLD_PX) return true;
+  }
+
+  const active = document.activeElement;
+  if (!(active instanceof HTMLElement)) return false;
+  if (active.isContentEditable) return true;
+  const tag = active.tagName;
+  return tag === 'INPUT' || tag === 'TEXTAREA';
+};
+
+const setNativeStatusBarHidden = async (hidden: boolean) => {
+  if (!isCapacitorNative()) return;
+  try {
+    const { StatusBar } = await import('@capacitor/status-bar');
+    if (hidden) {
+      await StatusBar.hide();
+    } else {
+      await StatusBar.show();
+    }
+  } catch {
+    // Plugin may be missing in some builds; CSS safe-area collapse still applies.
+  }
+};
+
+export type MobileKeyboardLayout = {
+  isLandscape: boolean;
+  keyboardOpen: boolean;
+  /** Landscape + keyboard: compact immersive room chrome. */
+  immersive: boolean;
+};
+
+/**
+ * Landscape + soft-keyboard layout signals for compact room chrome.
+ * Uses visualViewport when available (Capacitor/Android WebView).
+ */
+export const useMobileKeyboardLayout = (): MobileKeyboardLayout => {
+  const [isLandscape, setIsLandscape] = useState(getIsLandscape);
+  const [keyboardOpen, setKeyboardOpen] = useState(getKeyboardOpen);
+
+  const immersive = isLandscape && keyboardOpen;
+
+  useEffect(() => {
+    const sync = () => {
+      setIsLandscape(getIsLandscape());
+      setKeyboardOpen(getKeyboardOpen());
+    };
+
+    sync();
+
+    const orientationQuery = window.matchMedia?.('(orientation: landscape)');
+    orientationQuery?.addEventListener?.('change', sync);
+    window.addEventListener('resize', sync);
+    window.visualViewport?.addEventListener('resize', sync);
+    window.visualViewport?.addEventListener('scroll', sync);
+    window.addEventListener('focusin', sync);
+    window.addEventListener('focusout', sync);
+
+    return () => {
+      orientationQuery?.removeEventListener?.('change', sync);
+      window.removeEventListener('resize', sync);
+      window.visualViewport?.removeEventListener('resize', sync);
+      window.visualViewport?.removeEventListener('scroll', sync);
+      window.removeEventListener('focusin', sync);
+      window.removeEventListener('focusout', sync);
+    };
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle(IMMERSIVE_CLASS, immersive);
+    void setNativeStatusBarHidden(immersive);
+
+    return () => {
+      document.documentElement.classList.remove(IMMERSIVE_CLASS);
+      void setNativeStatusBarHidden(false);
+    };
+  }, [immersive]);
+
+  return { isLandscape, keyboardOpen, immersive };
+};

overlay/src/app/hooks/useViewTransitions.ts

@@ -0,0 +1,57 @@
+import { useCallback, useEffect } from 'react';
+import { useLocation, useNavigate, NavigateOptions } from 'react-router-dom';
+import { supportsViewTransitions, withViewTransition } from '../utils/viewTransitions';
+
+export const useViewTransitions = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!supportsViewTransitions()) {
+      return;
+    }
+
+    document.documentElement.classList.add('view-transitions-enabled');
+
+    return () => {
+      document.documentElement.classList.remove('view-transitions-enabled');
+    };
+  }, []);
+
+  useEffect(() => {
+    // Route changed
+  }, [location]);
+
+  return {
+    supportsViewTransitions: supportsViewTransitions(),
+  };
+};
+
+/**
+ * Navigate helper. On Capacitor / coarse-pointer, View Transitions are disabled
+ * so DM ↔ space switches cannot leave a stuck hit-blocking overlay.
+ */
+export const useNavigateWithTransition = () => {
+  const navigate = useNavigate();
+
+  return useCallback(
+    (to: string | number, options?: NavigateOptions) => {
+      if (!supportsViewTransitions()) {
+        if (typeof to === 'number') {
+          navigate(to);
+        } else {
+          navigate(to, options);
+        }
+        return;
+      }
+
+      withViewTransition(() => {
+        if (typeof to === 'number') {
+          navigate(to);
+        } else {
+          navigate(to, options);
+        }
+      });
+    },
+    [navigate]
+  );
+};

overlay/src/app/pages/MobileFriendly.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+
+type MobileFriendlyClientNavProps = {
+  children: ReactNode;
+};
+
+/** Server sidebar stays mounted on compact detail routes for swipe-back reveal. */
+export function MobileFriendlyClientNav({ children }: MobileFriendlyClientNavProps) {
+  return children;
+}
+
+type MobileFriendlyPageNavProps = {
+  path: string;
+  children: ReactNode;
+};
+
+/** Channel list stays mounted on compact detail routes for swipe-back reveal. */
+export function MobileFriendlyPageNav({ path: _path, children }: MobileFriendlyPageNavProps) {
+  return children;
+}

overlay/src/app/pages/auth/ServerPicker.tsx

@@ -0,0 +1,159 @@
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Text,
+  config,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+
+import { useDebounce } from '../../hooks/useDebounce';
+import { stopPropagation } from '../../utils/keyboard';
+
+export function ServerPicker({
+  server,
+  serverList,
+  allowCustomServer,
+  onServerChange,
+}: {
+  server: string;
+  serverList: string[];
+  allowCustomServer?: boolean;
+  onServerChange: (server: string) => void;
+}) {
+  const [serverMenuAnchor, setServerMenuAnchor] = useState<RectCords>();
+  const serverInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    // Only sync input when server changes externally (e.g., from menu selection)
+    // and input is not focused to avoid cursor jumping during typing
+    if (
+      serverInputRef.current &&
+      serverInputRef.current.value !== server &&
+      document.activeElement !== serverInputRef.current
+    ) {
+      serverInputRef.current.value = server;
+    }
+  }, [server]);
+
+  const debounceServerSelect = useDebounce(onServerChange, { wait: 700 });
+
+  const handleServerChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const inputServer = evt.target.value.trim();
+    if (inputServer) debounceServerSelect(inputServer);
+  };
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = (evt) => {
+    const inputServer = evt.target.value.trim();
+    if (inputServer && inputServer !== server) {
+      onServerChange(inputServer);
+    }
+  };
+
+  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {
+    if (evt.key === 'ArrowDown') {
+      evt.preventDefault();
+      setServerMenuAnchor(undefined);
+    }
+    if (evt.key === 'Enter') {
+      evt.preventDefault();
+      const inputServer = evt.currentTarget.value.trim();
+      if (inputServer) onServerChange(inputServer);
+    }
+  };
+
+  const handleServerSelect: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const selectedServer = evt.currentTarget.getAttribute('data-server');
+    if (selectedServer) {
+      onServerChange(selectedServer);
+    }
+    setServerMenuAnchor(undefined);
+  };
+
+  const handleOpenServerMenu: MouseEventHandler<HTMLElement> = (evt) => {
+    const target = evt.currentTarget.parentElement ?? evt.currentTarget;
+    setServerMenuAnchor(target.getBoundingClientRect());
+  };
+
+  return (
+    <Input
+      ref={serverInputRef}
+      style={{ paddingRight: config.space.S200 }}
+      variant={allowCustomServer ? 'Background' : 'Surface'}
+      outlined
+      defaultValue={server}
+      onChange={handleServerChange}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      size="500"
+      readOnly={!allowCustomServer}
+      onClick={allowCustomServer ? undefined : handleOpenServerMenu}
+      after={
+        serverList.length === 0 || (serverList.length === 1 && !allowCustomServer) ? undefined : (
+          <PopOut
+            anchor={serverMenuAnchor}
+            position="Bottom"
+            align="End"
+            offset={4}
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  onDeactivate: () => setServerMenuAnchor(undefined),
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Menu>
+                  <Header size="300" style={{ padding: `0 ${config.space.S200}` }}>
+                    <Text size="L400">Homeserver List</Text>
+                  </Header>
+                  <div style={{ padding: config.space.S100, paddingTop: 0 }}>
+                    {serverList?.map((serverName) => (
+                      <MenuItem
+                        key={serverName}
+                        radii="300"
+                        aria-pressed={serverName === server}
+                        data-server={serverName}
+                        onClick={handleServerSelect}
+                      >
+                        <Text>{serverName}</Text>
+                      </MenuItem>
+                    ))}
+                  </div>
+                </Menu>
+              </FocusTrap>
+            }
+          >
+            <IconButton
+              onClick={handleOpenServerMenu}
+              variant={allowCustomServer ? 'Background' : 'Surface'}
+              size="300"
+              aria-pressed={!!serverMenuAnchor}
+              radii="300"
+            >
+              <Icon src={Icons.ChevronBottom} />
+            </IconButton>
+          </PopOut>
+        )
+      }
+    />
+  );
+}

overlay/src/app/pages/client/ClientLayout.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { Box } from 'folds';
+import { DockedCallPanel } from '../../features/call/DockedCallPanel';
+import { useMobileKeyboardLayout } from '../../hooks/useMobileKeyboardLayout';
+
+type ClientLayoutProps = {
+  nav: ReactNode;
+  children: ReactNode;
+};
+
+export function ClientLayout({ nav, children }: ClientLayoutProps) {
+  const { immersive } = useMobileKeyboardLayout();
+
+  return (
+    <Box grow="Yes">
+      {!immersive && <Box shrink="No">{nav}</Box>}
+      <Box grow="Yes">{children}</Box>
+      <DockedCallPanel />
+    </Box>
+  );
+}