Update version

The Docker build wasn't making use of docker's cache because the .git directory was being copied into the build context. This means that even if the app did not change, if anything in git changed then docker would rebuild the entire app.

This excludes the .git folder from the docker build, instead relying on the user to pass in the build hash at build time. Which is annoying but I don't think there's a better way around it.

This was annoying me because I am deploying a self-hosted version of flotilla from a git branch via ansible and it was rebuilding flotilla every time.

Co-authored-by: mplorentz <mplorentz@noreply.gitea.coracle.social>
Reviewed-on: coracle/flotilla#88
Co-authored-by: Matt Lorentz <mplorentz@noreply.coracle.social>
Co-committed-by: Matt Lorentz <mplorentz@noreply.coracle.social>

.ackrc

@@ -1,5 +1,6 @@
 --ignore-dir=.svelte-kit
 --ignore-dir=android
+--ignore-dir=target
 --ignore-dir=build
 --ignore-dir=ios/DerivedData
 --ignore-dir=ios/App/App/public

.dockerignore

@@ -2,3 +2,11 @@ node_modules
 android
 ios
 build
+
+# Git
+.git
+.gitignore
+
+# Env files (keep .env for build; exclude local overrides)
+.env.local
+.env.*.local

.fdignore

@@ -1,4 +1,5 @@
 src/assets
+target
 build
 .idea
 .gradle

.gitea/workflows/docker-publish.yml

@@ -2,7 +2,7 @@ name: Docker
 
 on:
   push:
-    branches: ['master']
+    branches: [master]
 
 env:
   REGISTRY: ghcr.io
@@ -14,8 +14,6 @@ jobs:
     permissions:
       contents: read
       packages: write
-      attestations: write
-      id-token: write
 
     steps:
       - name: Checkout repository
@@ -25,8 +23,8 @@ jobs:
         uses: docker/login-action@v3
         with:
           registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
 
       - name: Extract metadata (tags, labels) for Docker
         id: meta
@@ -50,10 +48,3 @@ jobs:
           platforms: linux/amd64,linux/arm64
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
-
-      - name: Generate artifact attestation
-        uses: actions/attest-build-provenance@v2
-        with:
-          subject-name: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME}}
-          subject-digest: ${{ steps.push.outputs.digest }}
-          push-to-registry: true

.gitignore

@@ -1,5 +1,6 @@
 # Env
 .env
+.env.local
 
 # Vite
 vite.config.js.timestamp-*
@@ -27,6 +28,10 @@ node_modules/
 build/
 .svelte-kit/
 
+# Rust/Tauri
+*target/
+src-tauri/binaries/
+
 # iOS
 ios/App/App/public
 ios/DerivedData

AGENTS.md

@@ -157,7 +157,7 @@ src/
 - Derive all other data inside the component from identifiers
 - Example: Don't pass `members` prop, derive it from `h` inside component
 
-**Code Style:**
+**CRITICAL Code Style Guidelines:**
 
 - **No `null`** - only use `undefined`
 - Svelte 5 runes (`$state`, `$derived`, `$effect`) only in UI components
@@ -168,6 +168,16 @@ src/
 - When dynamically building classes, use `cx` from `classnames` rather than embedded ternaries or svelte 4's old `class:` syntax.
 - When creating forms, use `FieldInline` or `Field` instead of custom elements/tailwindcss
 - Do not define svelte event handlers inline, instead name them and put them in the script section of templates
+- Avoid using `as`, except where necessary. Instead, annotate function parameters, and ensure upstream values are typed correctly.
+
+**Human-First Simplicity (Jon Staab Style):**
+
+- Prefer direct, readable code over layered abstractions.
+- Do not add indirection (extra helpers, wrappers, stores, or derived state) unless it removes real repeated complexity.
+- Reuse existing Welshman and Flotilla primitives before introducing new utilities or dependencies.
+- Favor linear control flow and explicit naming over clever patterns.
+- Remove defensive checks that do not apply in this runtime model.
+- When two approaches work, pick the one that feels more human and easier to maintain.
 
 ## Common Tasks
 

CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+# 1.6.5
+
+* Attempt to fix permission grant for notifications
+* Make sync logic more robust
+* Add unban/unallow support
+* Improve support for downloading/opening protected images
+* Add manual send/receive to wallet
+* Show wallet status when wallet is unreachable
+* Update nostr signer capacitor plugin
+* Fix some safe area insets
+* Update NIP 55 signer plugin (fixes Primal login)
+* Refine space join dialogs and discover page
+* Reopen the last DM that was open when navigating back to chat
+* Get rid of ChatEnable interstitial
+* Enable auth for relays we're publishing to
+* Drag and drop space icons
+* Add better muting support
+* Add back button to settings menu
+* Add page titles
+* Improve scroll to event behavior
+* Add in-memory search to rooms
+* Fix editing messages with html tags
+* Fix DM media detection
+* Clean up reporting dialogs
+* Improve room detail
+
 # 1.6.4
 
 * Clean up modal design

Dockerfile

@@ -1,24 +1,31 @@
-FROM node:20-slim
+# Stage 1: Build
+# Uses .env from build context for config (logo, branding, etc.)
+# Optional: docker build --build-arg VITE_BUILD_HASH=$(git rev-parse --short HEAD) -t flotilla .
+
+FROM node:20-bookworm AS builder
 
-# Install pnpm
 RUN npm install -g pnpm@latest
 
-# Set working directory
 WORKDIR /app
 
-# Copy package files
 COPY package.json pnpm-lock.yaml ./
-
-# Install dependencies
 RUN pnpm i
 
-# Copy the rest of the application
+# Copy everything (including .env when present) - build.sh will source it
 COPY . .
 
-# Build the application
+ARG VITE_BUILD_HASH
+ENV VITE_BUILD_HASH=${VITE_BUILD_HASH}
+
 ENV NODE_OPTIONS=--max_old_space_size=16384
 RUN pnpm run build
 
-# Default to serving the build directory
-CMD ["npx", "serve", "build"]
+# Stage 2: Runtime
+FROM node:20-alpine
 
+WORKDIR /app
+
+# Copy only the built output - no source, no .env, no dev deps
+COPY --from=builder /app/build ./build
+
+CMD ["npx", "serve", "build"]

README.md

@@ -11,7 +11,7 @@ You can also optionally create an `.env` file and populate it with the following
 - `VITE_DEFAULT_PUBKEYS` - A comma-separated list of hex pubkeys for bootstrapping web of trust
 - `VITE_PLATFORM_URL` - The url where the app will be hosted
 - `VITE_PLATFORM_NAME` - The name of the app
-- `VITE_PLATFORM_LOGO` - A logo url for the app
+- `VITE_PLATFORM_LOGO` - A logo url for the app. Can be a local path or https link. Must be a PNG file.
 - `VITE_PLATFORM_RELAYS` - A list of comma-separated relay urls that will make flotilla operate in "platform mode". Disables all space browse/add/select functionality and makes the first platform relay the home page.
 - `VITE_PLATFORM_ACCENT` - A hex color for the app's accent color
 - `VITE_PLATFORM_DESCRIPTION` - A description of the app
@@ -20,7 +20,7 @@ If you're deploying a custom version of flotilla, be sure to remove the `plausib
 
 ## Development
 
-See [./CONTRIBUTING.md](CONTRIBUTING.md).
+See [CONTRIBUTING.md](AGENTS.md).
 
 ## Deployment
 

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "social.flotilla"
         minSdk rootProject.ext.minSdkVersion
         targetSdk rootProject.ext.targetSdkVersion
-        versionCode 40
-        versionName "1.6.4"
+        versionCode 41
+        versionName "1.6.5"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

android/capacitor.settings.gradle

@@ -27,4 +27,4 @@ include ':capawesome-capacitor-badge'
 project(':capawesome-capacitor-badge').projectDir = new File('../node_modules/.pnpm/@capawesome+capacitor-badge@8.0.0_@capacitor+core@8.0.1/node_modules/@capawesome/capacitor-badge/android')
 
 include ':nostr-signer-capacitor-plugin'
-project(':nostr-signer-capacitor-plugin').projectDir = new File('../node_modules/.pnpm/nostr-signer-capacitor-plugin@0.0.4_@capacitor+core@8.0.1/node_modules/nostr-signer-capacitor-plugin/android')
+project(':nostr-signer-capacitor-plugin').projectDir = new File('../node_modules/.pnpm/nostr-signer-capacitor-plugin@https+++codeload.github.com+coracle-social+nostr-signer-c_2704ecccfd05fcfb1ad8852744422b7c/node_modules/nostr-signer-capacitor-plugin/android')

build.sh

@@ -5,6 +5,9 @@ temp_env=$(declare -p -x)
 if [ -f .env.template ]; then
   source .env.template
 fi
+if [ -f .env.local ]; then
+  source .env.local
+fi
 
 # Avoid overwriting env vars provided directly
 # https://stackoverflow.com/a/69127685/1467342
@@ -14,12 +17,13 @@ if [[ -z $VITE_BUILD_HASH ]]; then
   export VITE_BUILD_HASH=$(git rev-parse --short HEAD)
 fi
 
-if [[ $VITE_PLATFORM_LOGO =~ ^https://* ]]; then
-  curl $VITE_PLATFORM_LOGO > static/logo.png
+if [[ $VITE_PLATFORM_LOGO =~ ^https:// ]]; then
+  curl -fSL "$VITE_PLATFORM_LOGO" -o static/logo.png
   export VITE_PLATFORM_LOGO=static/logo.png
 fi
 
-npx pwa-assets-generator
+# Ensure generator uses local path (dotenv may have loaded URL from .env)
+VITE_PLATFORM_LOGO="${VITE_PLATFORM_LOGO}" npx pwa-assets-generator
 npx vite build
 
 # Replace index.html variables with stuff from our env

ios/App/App.xcodeproj/project.pbxproj

@@ -358,14 +358,14 @@
 				CODE_SIGN_ENTITLEMENTS = "Flotilla Chat.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 30;
+				CURRENT_PROJECT_VERSION = 32;
 				DEVELOPMENT_TEAM = S26U9DYW3A;
 				INFOPLIST_FILE = App/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "Flotilla Chat";
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.6.4;
+				MARKETING_VERSION = 1.6.5;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -385,14 +385,14 @@
 				CODE_SIGN_ENTITLEMENTS = "Flotilla Chat.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 30;
+				CURRENT_PROJECT_VERSION = 32;
 				DEVELOPMENT_TEAM = S26U9DYW3A;
 				INFOPLIST_FILE = App/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "Flotilla Chat";
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.6.4;
+				MARKETING_VERSION = 1.6.5;
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

ios/App/Podfile

@@ -18,7 +18,7 @@ def capacitor_pods
   pod 'CapacitorPreferences', :path => '../../node_modules/.pnpm/@capacitor+preferences@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/preferences'
   pod 'CapacitorPushNotifications', :path => '../../node_modules/.pnpm/@capacitor+push-notifications@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/push-notifications'
   pod 'CapawesomeCapacitorBadge', :path => '../../node_modules/.pnpm/@capawesome+capacitor-badge@8.0.0_@capacitor+core@8.0.1/node_modules/@capawesome/capacitor-badge'
-  pod 'NostrSignerCapacitorPlugin', :path => '../../node_modules/.pnpm/nostr-signer-capacitor-plugin@0.0.4_@capacitor+core@8.0.1/node_modules/nostr-signer-capacitor-plugin'
+  pod 'NostrSignerCapacitorPlugin', :path => '../../node_modules/.pnpm/nostr-signer-capacitor-plugin@https+++codeload.github.com+coracle-social+nostr-signer-c_2704ecccfd05fcfb1ad8852744422b7c/node_modules/nostr-signer-capacitor-plugin'
 end
 
 target 'Flotilla Chat' do

link_deps

@@ -1,11 +1,12 @@
 #!/usr/bin/env node
 
 import fs from 'fs'
-import path from 'path'
 import { execSync } from 'child_process'
 
-if (execSync('git status --porcelain', { encoding: 'utf8' }).trim()) {
-  console.error('Error: Git working tree is dirty. Please commit or stash your changes first.')
+const force = process.argv.includes('--force')
+
+if (execSync('git status --porcelain', { encoding: 'utf8' }).trim() && !force) {
+  console.error('Error: Git working tree is dirty. Please commit or stash your changes first, or re-run with --force.')
   process.exit(1)
 }
 
@@ -22,7 +23,9 @@ pkg.pnpm.overrides["@welshman/router"] = "link:../welshman/packages/router"
 pkg.pnpm.overrides["@welshman/signer"] = "link:../welshman/packages/signer"
 pkg.pnpm.overrides["@welshman/store"] = "link:../welshman/packages/store"
 pkg.pnpm.overrides["@welshman/util"] = "link:../welshman/packages/util"
+// pkg.pnpm.overrides["nostr-editor"] = "link:../nostr-editor"
 // pkg.pnpm.overrides["@pomade/core"] = "link:../pomade/packages/core"
+// pkg.pnpm.overrides["nostr-signer-capacitor-plugin"] = "link:../nostr-signer-capacitor-plugin"
 
 fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2) + '\n')
 

package.json

@@ -1,11 +1,15 @@
 {
   "name": "flotilla",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "private": true,
   "scripts": {
     "dev": "vite dev",
     "build": "./build.sh",
     "release:android": "./build.sh && cap build android --androidreleasetype APK --signing-type apksigner",
+    "tauri:dev": "tauri dev",
+    "tauri:build": "tauri build",
+    "tauri:info": "tauri info",
+    "tauri:icons": "tauri icon assets/logo.png --output src-tauri/icons",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check src && eslint src",
@@ -18,6 +22,7 @@
     "@eslint/js": "^9.39.2",
     "@sveltejs/kit": "^2.50.1",
     "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@tauri-apps/cli": "^2.9.6",
     "@types/eslint": "^9.6.1",
     "autoprefixer": "^10.4.23",
     "classnames": "^2.5.1",
@@ -52,7 +57,7 @@
     "@getalby/lightning-tools": "^6.1.0",
     "@getalby/sdk": "^5.1.2",
     "@noble/curves": "^1.9.7",
-    "@pomade/core": "^0.0.12",
+    "@pomade/core": "^0.2.1",
     "@poppanator/sveltekit-svg": "^4.2.1",
     "@sveltejs/adapter-static": "^3.0.10",
     "@tiptap/core": "^2.27.2",
@@ -60,17 +65,17 @@
     "@types/throttle-debounce": "^5.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.8",
-    "@welshman/app": "^0.8.4",
-    "@welshman/content": "^0.8.4",
-    "@welshman/editor": "^0.8.4",
-    "@welshman/feeds": "^0.8.4",
-    "@welshman/lib": "^0.8.4",
-    "@welshman/net": "^0.8.4",
-    "@welshman/router": "^0.8.4",
-    "@welshman/signer": "^0.8.4",
-    "@welshman/store": "^0.8.4",
-    "@welshman/util": "^0.8.4",
-    "compressorjs": "^1.2.1",
+    "@welshman/app": "^0.8.8",
+    "@welshman/content": "^0.8.8",
+    "@welshman/editor": "^0.8.8",
+    "@welshman/feeds": "^0.8.8",
+    "@welshman/lib": "^0.8.8",
+    "@welshman/net": "^0.8.8",
+    "@welshman/router": "^0.8.8",
+    "@welshman/signer": "^0.8.8",
+    "@welshman/store": "^0.8.8",
+    "@welshman/util": "^0.8.8",
+    "compressorjs-next": "^1.1.2",
     "daisyui": "^4.12.24",
     "date-picker-svelte": "^2.17.0",
     "dotenv": "^16.6.1",
@@ -78,7 +83,7 @@
     "fuse.js": "^7.1.0",
     "husky": "^9.1.7",
     "idb": "^8.0.3",
-    "nostr-signer-capacitor-plugin": "^0.0.4",
+    "nostr-signer-capacitor-plugin": "github:coracle-social/nostr-signer-capacitor-plugin#main",
     "nostr-tools": "^2.19.4",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "qr-scanner": "^1.4.2",
@@ -91,7 +96,8 @@
       "esbuild"
     ],
     "onlyBuiltDependencies": [
-      "sharp"
+      "sharp",
+      "nostr-signer-capacitor-plugin"
     ],
     "overrides": {
       "sharp": "0.35.0-rc.0"

pwa-assets.config.js

@@ -1,7 +1,7 @@
 import dotenv from "dotenv"
 import {defineConfig, minimalPreset as preset} from "@vite-pwa/assets-generator/config"
 
-dotenv.config({path: ".env"})
+dotenv.config({path: ".env.local"})
 dotenv.config({path: ".env.template"})
 
 export default defineConfig({

rust-toolchain.toml

@@ -0,0 +1,2 @@
+[toolchain]
+channel = "1.92.0"

src-tauri/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "flotilla"
+version = "0.1.0"
+edition = "2021"
+
+[lib]
+name = "flotilla_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2.5.3", features = [] }
+
+[dependencies]
+tauri = { version = "2.9.5", features = [] }
+
+[features]
+default = ["custom-protocol"]
+custom-protocol = ["tauri/custom-protocol"]

src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

src-tauri/capabilities/default.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Default desktop capability for the main window",
+  "windows": ["main"],
+  "permissions": ["core:default"]
+}

src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>

src-tauri/icons/android/values/ic_launcher_background.xml

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

src-tauri/rust-toolchain.toml

@@ -0,0 +1,2 @@
+[toolchain]
+channel = "1.92.0"

src-tauri/src/lib.rs

@@ -0,0 +1,6 @@
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    tauri::Builder::default()
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}

src-tauri/src/main.rs

@@ -0,0 +1,6 @@
+// Prevents additional console window on Windows in release, DO NOT REMOVE!!
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    flotilla_lib::run();
+}

src-tauri/tauri.conf.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
+  "productName": "Flotilla",
+  "mainBinaryName": "flotilla",
+  "identifier": "social.flotilla.app",
+  "build": {
+    "beforeDevCommand": "pnpm dev",
+    "beforeBuildCommand": "pnpm build",
+    "devUrl": "http://localhost:1847",
+    "frontendDist": "../build"
+  },
+  "app": {
+    "security": {
+      "capabilities": ["default"]
+    },
+    "windows": [
+      {
+        "label": "main",
+        "title": "Flotilla",
+        "width": 1240,
+        "height": 775,
+        "resizable": true
+      }
+    ]
+  },
+  "bundle": {
+    "active": false,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}

src/app.css

@@ -274,7 +274,7 @@
 .input-editor,
 .chat-editor,
 .note-editor {
-  @apply -m-1 min-h-12 p-1 text-sm;
+  @apply -m-1 p-1;
 }
 
 .tiptap {
@@ -300,7 +300,7 @@
 }
 
 .tiptap {
-  @apply max-h-[350px] overflow-y-auto p-2 px-4;
+  @apply max-h-[350px] min-h-10 overflow-y-auto p-2 px-4;
 }
 
 .tiptap p.is-editor-empty:first-child::before {
@@ -402,6 +402,10 @@ progress[value]::-webkit-progress-value {
   @apply md:bottom-sai bottom-[calc(var(--saib)+3.5rem)];
 }
 
+.ct {
+  @apply top-[calc(var(--sait)+5rem)] md:top-[calc(var(--sait)+3rem)];
+}
+
 /* Keyboard open state adjustments */
 
 body.keyboard-open .cb {
@@ -419,5 +423,11 @@ body.keyboard-open .hide-on-keyboard {
 }
 
 .chat__scroll-down {
-  @apply fixed bottom-28 right-4 z-feature md:bottom-16;
+  @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
+}
+
+/* content visibility */
+
+.cv {
+  content-visibility: auto;
 }

src/app/components/CalendarEventItem.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <Link
-  class="col-3 card2 bg-alt w-full cursor-pointer shadow-md"
+  class="cv col-3 card2 bg-alt w-full cursor-pointer shadow-md"
   href={makeCalendarPath(url, getAddress(event))}>
   <CalendarEventHeader {event} />
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">

src/app/components/ChatEnable.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-  import {goto} from "$app/navigation"
-  import {preventDefault} from "@lib/html"
-  import {shouldUnwrap} from "@welshman/app"
-  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
-  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components/ModalBody.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalTitle from "@lib/components/ModalTitle.svelte"
-  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {PLATFORM_NAME} from "@app/core/state"
-  import {clearModals} from "@app/util/modal"
-
-  const {next} = $props()
-
-  const nextUrl = $state.snapshot(next)
-
-  let loading = $state(false)
-
-  const submit = async () => {
-    loading = true
-
-    try {
-      shouldUnwrap.set(true)
-      clearModals()
-      goto(nextUrl)
-    } finally {
-      loading = false
-    }
-  }
-
-  const back = () => history.back()
-</script>
-
-<Modal tag="form" onsubmit={preventDefault(submit)}>
-  <ModalBody>
-    <ModalHeader>
-      <ModalTitle>Enable Messages</ModalTitle>
-      <ModalSubtitle>Do you want to enable direct messages?</ModalSubtitle>
-    </ModalHeader>
-    <p>
-      By default, direct messages are disabled, since loading them requires
-      {PLATFORM_NAME} to download and decrypt a lot of data.
-    </p>
-    <p>
-      If you'd like to enable them, please make sure your signer is set up to to auto-approve
-      requests to decrypt data.
-    </p>
-  </ModalBody>
-  <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
-      <Icon icon={AltArrowLeft} />
-      Go back
-    </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
-      <Spinner {loading}>Enable Messages</Spinner>
-      <Icon icon={AltArrowRight} />
-    </Button>
-  </ModalFooter>
-</Modal>

src/app/components/ClassifiedActions.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import {uniq} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {getTagValue, getAddress} from "@welshman/util"
+  import {getTagValue, getTagValues, getAddress} from "@welshman/util"
   import {pubkey} from "@welshman/app"
   import Pen2 from "@assets/icons/pen-2.svg?dataurl"
+  import {normalizeTopic} from "@lib/util"
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -27,6 +29,7 @@
   const {url, event, showRoom, showActivity}: Props = $props()
 
   const h = getTagValue("h", event.tags)
+  const topics = getTagValues("t", event.tags)
   const path = makeClassifiedPath(url, getAddress(event))
   const shouldProtect = canEnforceNip70(url)
 
@@ -45,6 +48,13 @@
       Posted in #<RoomName {h} {url} />
     </Link>
   {/if}
+  <div class="flex min-w-0 flex-wrap gap-2">
+    {#each uniq(topics) as topic (topic)}
+      <button type="button" class="btn btn-xs rounded-full font-normal">
+        #{normalizeTopic(topic)}
+      </button>
+    {/each}
+  </div>
   <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
   <ThunkStatusOrDeleted {event}>
     <ClassifiedStatus {event} />

src/app/components/ClassifiedEdit.svelte

@@ -18,7 +18,8 @@
   const {d, title, status} = fromPairs(event.tags)
   const [_, price = 0, currency = "SAT"] = getTag("price", event.tags) || []
   const images = getTagValues("image", event.tags)
-  const initialValues = {d, title, status, content, price: Number(price), currency, images}
+  const topics = getTagValues("t", event.tags)
+  const initialValues = {d, title, status, content, price: Number(price), currency, images, topics}
 </script>
 
 <ClassifiedForm {url} {initialValues}>

src/app/components/ClassifiedForm.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
-  import {randomId} from "@welshman/lib"
+  import {removeUndefined, randomId, uniq} from "@welshman/lib"
   import {makeEvent, CLASSIFIED} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
   import {isMobile, preventDefault} from "@lib/html"
+  import {normalizeTopic} from "@lib/util"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
@@ -14,6 +15,7 @@
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ImagesInput from "@lib/components/ImagesInput.svelte"
   import CurrencyInput from "@app/components/CurrencyInput.svelte"
+  import TopicMultiSelect from "@app/components/TopicMultiSelect.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {pushToast} from "@app/util/toast"
   import {PROTECTED} from "@app/core/state"
@@ -32,6 +34,7 @@
       currency?: string
       images?: string[]
       status?: string
+      topics?: string[]
     }
   }
 
@@ -71,6 +74,10 @@
         ...ed.storage.nostr.getEditorTags(),
       ]
 
+      for (const topic of topics) {
+        tags.push(["t", topic])
+      }
+
       if (await shouldProtect) {
         tags.push(PROTECTED)
       }
@@ -118,6 +125,7 @@
   let price = $state(Number(initialValues?.price || 0))
   let currency = $state(initialValues?.currency || "SAT")
   let images = $state<(string | File)[]>(initialValues?.images || [])
+  let topics = $state(uniq(removeUndefined((initialValues?.topics || []).map(normalizeTopic))))
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(submit)}>
@@ -150,6 +158,14 @@
           </div>
         {/snippet}
       </Field>
+      <Field>
+        {#snippet label()}
+          <p>Topics</p>
+        {/snippet}
+        {#snippet input()}
+          <TopicMultiSelect bind:value={topics} />
+        {/snippet}
+      </Field>
       <Field>
         {#snippet label()}
           <p>Price*</p>

src/app/components/ClassifiedItem.svelte

@@ -25,7 +25,7 @@
 </script>
 
 <Link
-  class="col-2 card2 bg-alt w-full cursor-pointer shadow-xl"
+  class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-xl"
   href={makeClassifiedPath(url, getAddress(event))}>
   {#if title}
     <div class="flex w-full items-center justify-between gap-2">

src/app/components/ContentLinkBlock.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
-  import {isRelayUrl} from "@welshman/util"
+  import {isRelayUrl, getTagValue} from "@welshman/util"
   import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
   import {pushModal} from "@app/util/modal"
-  import {dufflepud, PLATFORM_URL} from "@app/core/state"
+  import {dufflepud, PLATFORM_URL, IMAGE_CONTENT_TYPES, VIDEO_CONTENT_TYPES} from "@app/core/state"
   import {makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
@@ -14,6 +14,7 @@
   let hideImage = $state(false)
 
   const url = value.url.toString()
+  const fileType = getTagValue("file-type", event.tags) || ""
   const [href, external] = call(() => {
     if (isRelayUrl(url)) return [makeSpacePath(url), false]
     if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
@@ -40,11 +41,11 @@
 
 <Link {external} {href} class="my-2 block">
   <div class="overflow-hidden rounded-box">
-    {#if url.match(/\.(mov|webm|mp4)$/)}
+    {#if url.match(/\.(mov|webm|mp4)$/) || VIDEO_CONTENT_TYPES.includes(fileType)}
       <video controls src={url} class="max-h-96 rounded-box object-contain object-center">
         <track kind="captions" />
       </video>
-    {:else if url.match(/\.(jpe?g|png|gif|webp)$/)}
+    {:else if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
       <button type="button" onclick={stopPropagation(preventDefault(expand))}>
         <ContentLinkBlockImage {value} {event} class="m-auto max-h-96 rounded-box" />
       </button>

src/app/components/ContentLinkBlockImage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {onMount, onDestroy} from "svelte"
-  import {displayUrl} from "@welshman/lib"
+  import {displayUrl, once} from "@welshman/lib"
   import {
     getTags,
     getBlob,
@@ -26,8 +26,24 @@
   const key = getTagValue("decryption-key", meta)
   const nonce = getTagValue("decryption-nonce", meta)
   const algorithm = getTagValue("encryption-algorithm", meta)
+  const mime = getTagValue("m", meta)
+  const fileName =
+    getTagValue("filename", meta) ||
+    getTagValue("name", meta) ||
+    decodeURIComponent(new URL(url).pathname.split("/").filter(Boolean).at(-1) || "image")
 
-  const onError = async () => {
+  const revokeSrc = () => {
+    if (src.startsWith("blob:")) {
+      URL.revokeObjectURL(src)
+    }
+  }
+
+  const setBlobSrc = (data: Blob | Uint8Array<ArrayBuffer>, type?: string) => {
+    revokeSrc()
+    src = URL.createObjectURL(new File([data], fileName, type ? {type} : undefined))
+  }
+
+  const onError = once(async () => {
     // If the image failed to load, try authenticating
     if (hash && $signer) {
       const server = new URL(url).origin
@@ -36,14 +52,15 @@
       const res = await getBlob(server, hash, {authEvent})
 
       if (res.status === 200) {
-        src = URL.createObjectURL(await res.blob())
+        const blob = await res.blob()
+        setBlobSrc(blob, blob.type || undefined)
       } else {
         hasError = true
       }
     } else {
       hasError = true
     }
-  }
+  })
 
   let hasError = $state(false)
   let src = $state("")
@@ -57,7 +74,7 @@
         const ciphertext = new Uint8Array(await response.arrayBuffer())
         const decryptedData = await decryptFile({ciphertext, key, nonce, algorithm})
 
-        src = URL.createObjectURL(new Blob([new Uint8Array(decryptedData)]))
+        setBlobSrc(new Uint8Array(decryptedData), mime)
       }
     } else {
       src = url
@@ -65,7 +82,7 @@
   })
 
   onDestroy(() => {
-    URL.revokeObjectURL(src)
+    revokeSrc()
   })
 </script>
 

src/app/components/ContentLinkInline.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
   import {call, displayUrl} from "@welshman/lib"
-  import {isRelayUrl} from "@welshman/util"
+  import {isRelayUrl, getTagValue} from "@welshman/util"
   import {preventDefault, stopPropagation} from "@lib/html"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import {pushModal} from "@app/util/modal"
-  import {PLATFORM_URL} from "@app/core/state"
+  import {PLATFORM_URL, IMAGE_CONTENT_TYPES} from "@app/core/state"
   import {makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
 
   const url = value.url.toString()
+  const fileType = getTagValue("file-type", event.tags) || ""
   const [href, external] = call(() => {
     if (isRelayUrl(url)) return [makeSpacePath(url), false]
     if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
@@ -23,7 +24,7 @@
   const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
 </script>
 
-{#if url.match(/\.(jpe?g|png|gif|webp)$/)}
+{#if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
   <!-- Use a real link so people can copy the href -->
   <a
     href={url}

src/app/components/CurrencyInput.svelte

@@ -96,6 +96,10 @@
     params={{
       trigger: "manual",
       interactive: true,
+      placement: "bottom",
       getReferenceClientRect: () => wrapper!.getBoundingClientRect(),
+      onShow: (instance: Instance) => {
+        instance.popper.style.width = `${wrapper!.getBoundingClientRect().width + 8}px`
+      },
     }} />
 </button>

src/app/components/EventActivity.svelte

@@ -26,7 +26,7 @@
   <Icon icon={Reply} />
   <span>{$replies.length} {$replies.length === 1 ? "reply" : "replies"}</span>
 </div>
-<div class="btn btn-neutral btn-xs relative hidden rounded-full sm:flex">
+<div class="btn btn-neutral btn-xs relative rounded-full">
   {#if gt(lastActive, $checked)}
     <div class="h-2 w-2 rounded-full bg-primary"></div>
   {/if}

src/app/components/GoalItem.svelte

@@ -20,7 +20,9 @@
   const h = getTagValue("h", event.tags)
 </script>
 
-<Link class="col-2 card2 bg-alt w-full cursor-pointer shadow-md" href={makeGoalPath(url, event.id)}>
+<Link
+  class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-md"
+  href={makeGoalPath(url, event.id)}>
   <p class="text-2xl">{event.content}</p>
   <Content
     event={{content: summary, tags: event.tags}}

src/app/components/KeyRecoveryConfirm.svelte

@@ -15,10 +15,10 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import StringMultiInput from "@lib/components/StringMultiInput.svelte"
   import KeyDownload from "@app/components/KeyDownload.svelte"
   import {pushToast} from "@app/util/toast"
   import {pushModal, clearModals} from "@app/util/modal"
-  import {POMADE_SIGNERS} from "@app/core/state"
 
   type Props = {
     peersByPrefix: Map<string, string>
@@ -32,18 +32,6 @@
   } = $session as SessionPomade
 
   const confirmRecovery = async () => {
-    const otps = input
-      .split(/\n/)
-      .map(x => x.trim())
-      .filter(x => x.match(/^[0-9]{8}$/))
-
-    if (otps.length < 2) {
-      return pushToast({
-        theme: "error",
-        message: "Failed to recover, not enough valid recovery codes were provided.",
-      })
-    }
-
     const request = await Client.recoverWithChallenge(email, peersByPrefix, otps)
 
     if (!request.ok) {
@@ -51,7 +39,7 @@
 
       return pushToast({
         theme: "error",
-        message: `Failed to recover: ${request.messages[0]?.payload.message.toLowerCase()}`,
+        message: `Failed to recover: ${request.messages[0]?.res?.message.toLowerCase()}`,
       })
     }
 
@@ -62,7 +50,7 @@
 
       return pushToast({
         theme: "error",
-        message: `Failed to recover: ${result.messages[0]?.payload.message.toLowerCase()}`,
+        message: `Failed to recover: ${result.messages[0]?.res?.message.toLowerCase()}`,
       })
     }
 
@@ -82,7 +70,7 @@
   const back = () => history.back()
 
   let loading = $state(false)
-  let input = $state("")
+  let otps = $state<string[]>([])
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(submit)}>
@@ -96,17 +84,14 @@
       For security reasons, you may receive three or more emails with recovery codes in them. Please
       paste <strong>all</strong> recovery codes into the text box below, on separate lines.
     </p>
-    <textarea
-      rows={POMADE_SIGNERS.length + 1}
-      class="textarea textarea-bordered leading-4"
-      bind:value={input}></textarea>
+    <StringMultiInput bind:value={otps} placeholder="Enter your recovery codes..." />
   </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || otps.length < 2}>
       <Spinner {loading}>Confirm recovery</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/LogIn.svelte

@@ -34,7 +34,6 @@
 
   const onSuccess = async (session: Session) => {
     addSession(session)
-    pushToast({message: "Successfully logged in!"})
     setChecked("*")
     clearModals()
   }

src/app/components/LogInEmail.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+  import {uniq} from "@welshman/lib"
   import {Client} from "@pomade/core"
-  import {loginWithPomade} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -17,6 +17,8 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import LogInOTP from "@app/components/LogInOTP.svelte"
+  import LogInSelect from "@app/components/LogInSelect.svelte"
+  import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
   import {pushModal, clearModals} from "@app/util/modal"
   import {setChecked} from "@app/util/notifications"
   import {pushToast} from "@app/util/toast"
@@ -37,7 +39,7 @@
     try {
       const {ok, options, messages, clientSecret} = await Client.loginWithPassword(email, password)
 
-      if (!ok) {
+      if (!ok || options.length === 0) {
         console.error(messages)
 
         return pushToast({
@@ -46,21 +48,25 @@
         })
       }
 
-      const [client, peers] = options[0]!
-      const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
-
-      if (res.ok && clientOptions) {
-        loginWithPomade(clientOptions.group.group_pk.slice(2), email, clientOptions)
-        pushToast({message: "Successfully logged in!"})
-        setChecked("*")
-        clearModals()
+      if (uniq(options.map(o => o.pubkey)).length > 1) {
+        pushModal(LogInSelect, {email, options, clientSecret})
       } else {
-        console.error(res.messages)
+        const {client, peers} = options[0]
+        const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
 
-        pushToast({
-          theme: "error",
-          message: "Sorry, we were unable to log you in.",
-        })
+        if (res.ok && clientOptions) {
+          loginWithPomade(clientOptions, email)
+          deleteDeactivatedPomadeSessions()
+          setChecked("*")
+          clearModals()
+        } else {
+          console.error(res.messages)
+
+          pushToast({
+            theme: "error",
+            message: "Sorry, we were unable to log you in.",
+          })
+        }
       }
     } finally {
       loading = false

src/app/components/LogInKey.svelte

@@ -57,7 +57,6 @@
       }
 
       loginWithNip01(secret)
-      pushToast({message: "Successfully logged in!"})
       setChecked("*")
       clearModals()
     } catch (e) {

src/app/components/LogInOTPConfirm.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+  import {uniq} from "@welshman/lib"
   import {Client} from "@pomade/core"
-  import {loginWithPomade} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -13,10 +13,12 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {clearModals} from "@app/util/modal"
-  import {setChecked} from "@app/util/notifications"
+  import StringMultiInput from "@lib/components/StringMultiInput.svelte"
+  import LogInSelect from "@app/components/LogInSelect.svelte"
   import {pushToast} from "@app/util/toast"
-  import {POMADE_SIGNERS} from "@app/core/state"
+  import {setChecked} from "@app/util/notifications"
+  import {pushModal, clearModals} from "@app/util/modal"
+  import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
 
   type Props = {
     email: string
@@ -28,18 +30,6 @@
   const back = () => history.back()
 
   const onSubmit = async () => {
-    const otps = input
-      .split(/\n/)
-      .map(x => x.trim())
-      .filter(x => x.match(/^[0-9]{8}$/))
-
-    if (otps.length < 2) {
-      return pushToast({
-        theme: "error",
-        message: "Failed to recover, not enough valid recovery codes were provided.",
-      })
-    }
-
     loading = true
 
     try {
@@ -49,7 +39,7 @@
         otps,
       )
 
-      if (!ok) {
+      if (!ok || options.length === 0) {
         console.error(messages)
 
         return pushToast({
@@ -58,28 +48,32 @@
         })
       }
 
-      const [client, peers] = options[0]!
-      const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
-
-      if (res.ok && clientOptions) {
-        loginWithPomade(clientOptions.group.group_pk.slice(2), email, clientOptions)
-        pushToast({message: "Successfully logged in!"})
-        setChecked("*")
-        clearModals()
+      if (uniq(options.map(o => o.pubkey)).length > 1) {
+        pushModal(LogInSelect, {email, options, clientSecret})
       } else {
-        console.error(res.messages)
+        const {client, peers} = options[0]
+        const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
 
-        pushToast({
-          theme: "error",
-          message: "Sorry, we were unable to log you in.",
-        })
+        if (res.ok && clientOptions) {
+          loginWithPomade(clientOptions, email)
+          deleteDeactivatedPomadeSessions()
+          setChecked("*")
+          clearModals()
+        } else {
+          console.error(res.messages)
+
+          pushToast({
+            theme: "error",
+            message: "Sorry, we were unable to log you in.",
+          })
+        }
       }
     } finally {
       loading = false
     }
   }
 
-  let input = $state("")
+  let otps = $state<string[]>([])
   let loading = $state(false)
 </script>
 
@@ -94,17 +88,14 @@
       For security reasons, you may receive three or more emails with login codes in them. Please
       paste <strong>all</strong> login codes into the text box below, on separate lines.
     </p>
-    <textarea
-      rows={POMADE_SIGNERS.length + 1}
-      class="textarea textarea-bordered leading-4"
-      bind:value={input}></textarea>
+    <StringMultiInput bind:value={otps} placeholder="Enter your login codes..." />
   </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={loading || otps.length < 3}>
       <Spinner {loading}>Log In</Spinner>
       <Icon icon={AltArrowRight} />
     </Button>

src/app/components/LogInSelect.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type {AccountOption} from "@pomade/core"
+  import {Client} from "@pomade/core"
+  import {uniqBy} from "@welshman/lib"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import Profile from "@app/components/Profile.svelte"
+  import {deleteDeactivatedPomadeSessions, loginWithPomade} from "@app/util/pomade"
+  import {setChecked} from "@app/util/notifications"
+  import {clearModals} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
+
+  interface Props {
+    email: string
+    options: AccountOption[]
+    clientSecret: string
+  }
+
+  const {email, options, clientSecret}: Props = $props()
+
+  let loading = $state(false)
+
+  const back = () => history.back()
+
+  const selectAccount = async ({client, peers}: AccountOption) => {
+    loading = true
+
+    try {
+      const {clientOptions, ...res} = await Client.selectLogin(clientSecret, client, peers)
+
+      if (res.ok && clientOptions) {
+        loginWithPomade(clientOptions, email)
+        deleteDeactivatedPomadeSessions()
+        setChecked("*")
+        clearModals()
+      } else {
+        console.error(res.messages)
+
+        pushToast({
+          theme: "error",
+          message: "Sorry, we were unable to log you in.",
+        })
+      }
+    } finally {
+      loading = false
+    }
+  }
+</script>
+
+<Modal>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Select Account</ModalTitle>
+      <ModalSubtitle
+        >Multiple accounts are associated with {email}. Please select one to continue.</ModalSubtitle>
+    </ModalHeader>
+    <div class="flex flex-col gap-2">
+      {#each uniqBy(o => o.pubkey, options) as option (option.pubkey)}
+        <Button
+          onclick={() => selectAccount(option)}
+          disabled={loading}
+          class="card2 bg-alt flex w-full items-center p-3 text-left">
+          <Profile pubkey={option.pubkey} />
+        </Button>
+      {/each}
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back} disabled={loading}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Spinner {loading} />
+  </ModalFooter>
+</Modal>

src/app/components/LogOut.svelte

@@ -9,8 +9,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {Push} from "@app/util/notifications"
-  import {kv, db} from "@app/core/storage"
+  import {logout} from "@app/util/logout"
 
   const back = () => history.back()
 
@@ -18,13 +17,7 @@
     loading = true
 
     try {
-      await Push.disable()
-      await kv.clear()
-      await db.clear()
-
-      localStorage.clear()
-
-      window.location.href = "/"
+      await logout()
     } catch (e) {
       console.error(e)
       loading = false

src/app/components/MenuOtherSpaces.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import MenuSpacesItem from "@app/components/MenuSpacesItem.svelte"
-
-  type Props = {
-    urls: string[]
-  }
-
-  const {urls}: Props = $props()
-</script>
-
-<div class="column menu gap-2">
-  {#each urls as url (url)}
-    <MenuSpacesItem {url} />
-  {/each}
-</div>