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: #88
Co-authored-by: Matt Lorentz <mplorentz@noreply.coracle.social>
Co-committed-by: Matt Lorentz <mplorentz@noreply.coracle.social>

.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

.gitignore

@@ -1,5 +1,6 @@
 # Env
 .env
+.env.local
 
 # Vite
 vite.config.js.timestamp-*

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

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.

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 = 31;
+				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 = 31;
+				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 = "";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flotilla",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "private": true,
   "scripts": {
     "dev": "vite dev",
@@ -11,7 +11,7 @@
     "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": "./check.sh",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check src && eslint src",
     "format": "git diff head --name-only --diff-filter d | grep -E '(js|ts|svelte|css)$' | xargs -r prettier --write",
     "format:all": "prettier --write src",
@@ -57,7 +57,7 @@
     "@getalby/lightning-tools": "^6.1.0",
     "@getalby/sdk": "^5.1.2",
     "@noble/curves": "^1.9.7",
-    "@pomade/core": "^0.1.1",
+    "@pomade/core": "^0.2.1",
     "@poppanator/sveltekit-svg": "^4.2.1",
     "@sveltejs/adapter-static": "^3.0.10",
     "@tiptap/core": "^2.27.2",
@@ -65,16 +65,16 @@
     "@types/throttle-debounce": "^5.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.8",
-    "@welshman/app": "^0.8.7",
-    "@welshman/content": "^0.8.7",
-    "@welshman/editor": "^0.8.7",
-    "@welshman/feeds": "^0.8.7",
-    "@welshman/lib": "^0.8.7",
-    "@welshman/net": "^0.8.7",
-    "@welshman/router": "^0.8.7",
-    "@welshman/signer": "^0.8.7",
-    "@welshman/store": "^0.8.7",
-    "@welshman/util": "^0.8.7",
+    "@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",

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({

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) {
@@ -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/NoteContentClassified.svelte

@@ -22,8 +22,8 @@
   {#if props.event.content}
     <Content {...props} />
   {/if}
-  <div class="grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-9">
-    {#each images as image (image)}
+  <div class="grid grid-cols-3 sm:grid-cols-5 lg:grid-cols-9 gap-2">
+    {#each images as image, i (i + image)}
       <ContentLinkBlock event={props.event} value={{url: image}} />
     {/each}
   </div>

src/app/components/PasswordReset.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import {Client} from "@pomade/core"
+  import type {SessionPomade} from "@welshman/app"
+  import {session} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
+  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 StringMultiInput from "@lib/components/StringMultiInput.svelte"
+  import PasswordResetConfirm from "@app/components/PasswordResetConfirm.svelte"
+  import {pushToast} from "@app/util/toast"
+  import {pushModal} from "@app/util/modal"
+  import {getPomadeClient} from "@app/util/pomade"
+
+  type Props = {
+    peersByPrefix: Map<string, string>
+  }
+
+  const {peersByPrefix}: Props = $props()
+
+  const {email} = $session as SessionPomade
+
+  const confirmRecovery = async () => {
+    const request = await Client.recoverWithChallenge(email, peersByPrefix, otps)
+
+    if (!request.ok) {
+      console.log(request.messages)
+
+      return pushToast({
+        theme: "error",
+        message: `Failed to validate email ownership: ${request.messages[0]?.res?.message.toLowerCase()}`,
+      })
+    }
+
+    const client = await getPomadeClient()
+
+    if (!client) {
+      throw new Error("Unable to get client during password reset flow")
+    }
+
+    const result = await Client.selectRecovery(
+      request.clientSecret,
+      await client.getPubkey(),
+      client.peers,
+    )
+
+    if (!result.ok) {
+      console.log(result.messages)
+
+      return pushToast({
+        theme: "error",
+        message: `Failed to validate email ownership: ${result.messages[0]?.res?.message.toLowerCase()}`,
+      })
+    }
+
+    pushModal(PasswordResetConfirm, {userSecret: result.userSecret})
+  }
+
+  const submit = async () => {
+    loading = true
+
+    try {
+      await confirmRecovery()
+    } finally {
+      loading = false
+    }
+  }
+
+  const back = () => history.back()
+
+  let loading = $state(false)
+  let otps = $state<string[]>([])
+</script>
+
+<Modal tag="form" onsubmit={preventDefault(submit)}>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Update your Password</ModalTitle>
+      <ModalSubtitle>Confirm your Email</ModalSubtitle>
+    </ModalHeader>
+    <p>Let's start by confirming your email.</p>
+    <p>
+      For security reasons, you may receive three or more emails with confirmation codes in them.
+      Please paste <strong>all</strong> confirmation codes into the text box below, on separate lines.
+    </p>
+    <StringMultiInput bind:value={otps} placeholder="Enter your confirmation 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 || otps.length < 2}>
+      <Spinner {loading}>Continue</Spinner>
+      <Icon icon={AltArrowRight} />
+    </Button>
+  </ModalFooter>
+</Modal>

src/app/components/PasswordResetConfirm.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import {Client} from "@pomade/core"
+  import {session} from "@welshman/app"
+  import type {SessionPomade} from "@welshman/app"
+  import {preventDefault} from "@lib/html"
+  import Key from "@assets/icons/key.svg?dataurl"
+  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 FieldInline from "@lib/components/FieldInline.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import Button from "@lib/components/Button.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 {loginWithPomade, deleteCurrentPomadeSession} from "@app/util/pomade"
+  import {clearModals} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
+
+  type Props = {
+    userSecret: string
+  }
+
+  const {userSecret}: Props = $props()
+
+  const {email} = $session as SessionPomade
+
+  const back = () => history.back()
+
+  const onSubmit = async () => {
+    if (password.trim().length < 12) {
+      return pushToast({
+        theme: "error",
+        message: "Password must be at least 12 characters long.",
+      })
+    }
+
+    loading = true
+
+    try {
+      pushToast({
+        timeout: 60_000,
+        message: "Registering your new password, please wait...",
+      })
+
+      const {clientOptions, ...registerRes} = await Client.register(2, 3, userSecret)
+
+      if (!registerRes.ok) {
+        return pushToast({
+          theme: "error",
+          message: "Failed to register your new password! Please try again.",
+        })
+      }
+
+      const setupRes = await new Client(clientOptions).setupRecovery(email, password)
+
+      if (!setupRes.ok) {
+        const message = setupRes.messages[0]?.res?.message || "Please try again."
+
+        return pushToast({
+          theme: "error",
+          message: `Failed to register your new password! ${message}.`,
+        })
+      }
+
+      await deleteCurrentPomadeSession()
+
+      pushToast({message: "Your password has been updated!"})
+      loginWithPomade(clientOptions, email)
+      clearModals()
+    } catch (e) {
+      console.error(e)
+
+      pushToast({
+        theme: "error",
+        message: "Failed to register your new password! Please try again.",
+      })
+    } finally {
+      loading = false
+    }
+  }
+
+  let password = $state("")
+  let loading = $state(false)
+</script>
+
+<Modal tag="form" onsubmit={preventDefault(onSubmit)}>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Update your Password</ModalTitle>
+      <ModalSubtitle>Please provide your new password.</ModalSubtitle>
+    </ModalHeader>
+    <FieldInline>
+      {#snippet label()}
+        <p>New Password*</p>
+      {/snippet}
+      {#snippet input()}
+        <label class="input input-bordered flex w-full items-center gap-2">
+          <Icon icon={Key} />
+          <input type="password" bind:value={password} />
+        </label>
+      {/snippet}
+    </FieldInline>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" type="submit" disabled={loading || !password}>
+      <Spinner {loading}>Continue</Spinner>
+      <Icon icon={AltArrowRight} />
+    </Button>
+  </ModalFooter>
+</Modal>

src/app/components/PomadeSessions.svelte

@@ -1,51 +1,30 @@
 <script lang="ts">
+  import {onMount} from "svelte"
   import {Client} from "@pomade/core"
-  import type {SessionItem} from "@pomade/core"
   import {session, isPomadeSession} from "@welshman/app"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
+  import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Popover from "@lib/components/Popover.svelte"
   import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import {pushToast} from "@app/util/toast"
-  import {onMount} from "svelte"
+  import {loadOtherPomadeSessions} from "@app/util/pomade"
+  import type {PomadeSessionWithPeers} from "@app/util/pomade"
 
-  type SessionWithPeers = SessionItem & {peers: string[]}
-
-  let sessions = $state<SessionWithPeers[]>([])
-  let deletingSession = $state<string | null>(null)
-
-  const loadSessions = async () => {
-    if (!isPomadeSession($session)) return
-
-    const client = new Client($session.clientOptions)
-    const result = await client.listSessions()
-    const pubkey = await client.getPubkey()
-
-    if (result.ok) {
-      // Group sessions by client pubkey and collect peers
-      const sessionMap = new Map<string, SessionWithPeers>()
-
-      for (const message of result.messages) {
-        if (!message.res?.items) continue
-
-        for (const item of message.res.items) {
-          const existing = sessionMap.get(item.client)
-
-          if (existing) {
-            existing.peers.push(message.url)
-          } else if (item.client !== pubkey) {
-            sessionMap.set(item.client, {...item, peers: [message.url]})
-          }
-        }
-      }
-
-      sessions = Array.from(sessionMap.values())
-    }
+  const toggleMenu = (client: string) => {
+    menuClient = menuClient === client ? "" : client
   }
 
-  const deleteSession = async (sessionItem: SessionWithPeers) => {
-    if (!isPomadeSession($session)) return
+  const closeMenu = () => {
+    menuClient = ""
+  }
 
-    deletingSession = sessionItem.client
+  let menuClient = $state("")
+  let sessions = $state<PomadeSessionWithPeers[]>([])
+
+  const deleteSession = async (sessionItem: PomadeSessionWithPeers) => {
+    if (!isPomadeSession($session)) return
 
     try {
       const client = new Client($session.clientOptions)
@@ -70,8 +49,6 @@
         theme: "error",
         message: "Failed to delete session",
       })
-    } finally {
-      deletingSession = null
     }
   }
 
@@ -85,7 +62,9 @@
   }
 
   onMount(() => {
-    loadSessions()
+    loadOtherPomadeSessions().then(_sessions => {
+      sessions = _sessions || []
+    })
   })
 </script>
 
@@ -93,28 +72,46 @@
   <div class="flex flex-col gap-4 border-t border-solid border-base-100 pt-4">
     <strong>Other Sessions</strong>
     {#each sessions as sessionItem (sessionItem.client)}
-      <div class="flex justify-between text-sm">
-        <div class="flex flex-col gap-1">
-          <span>{sessionItem.client.slice(0, 8)}</span>
-          <div class="flex gap-1">
-            <div class="badge badge-neutral">
-              Created {formatDate(sessionItem.created_at)}
-            </div>
-            <div class="badge badge-neutral">
-              Last active: {formatDate(sessionItem.last_activity)}
-            </div>
+      <div class="flex flex-col gap-2">
+        <div class="flex justify-between items-center">
+          <div class="flex gap-3 items-center text-sm">
+            <span>Session {sessionItem.client.slice(0, 8)}</span>
+            <span class="opacity-75">
+              {#if sessionItem.deactivated_at}
+                Deactivated
+              {/if}
+            </span>
+          </div>
+          <div class="relative">
+            <Button
+              class="btn btn-circle btn-ghost btn-sm"
+              onclick={() => toggleMenu(sessionItem.client)}>
+              <Icon icon={MenuDots} />
+            </Button>
+            {#if menuClient === sessionItem.client}
+              <Popover hideOnClick onClose={closeMenu}>
+                <ul
+                  transition:fly
+                  class="menu absolute right-0 z-popover mt-2 w-48 gap-1 rounded-box bg-base-100 p-2 shadow-md">
+                  <li>
+                    <Button onclick={() => deleteSession(sessionItem)}>
+                      <Icon icon={TrashBin2} />
+                      Delete Session
+                    </Button>
+                  </li>
+                </ul>
+              </Popover>
+            {/if}
+          </div>
+        </div>
+        <div class="flex gap-1">
+          <div class="badge badge-neutral">
+            Created {formatDate(sessionItem.created_at)}
+          </div>
+          <div class="badge badge-neutral">
+            Active {formatDate(sessionItem.last_activity)}
           </div>
         </div>
-        <Button
-          class="btn btn-error btn-sm"
-          disabled={deletingSession !== null}
-          onclick={() => deleteSession(sessionItem)}>
-          {#if deletingSession === sessionItem.client}
-            <span class="loading loading-spinner"></span>
-          {:else}
-            <Icon icon={TrashBin2} />
-          {/if}
-        </Button>
       </div>
     {/each}
   </div>

src/app/components/ProfileDelete.svelte

@@ -23,9 +23,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import {INDEXER_RELAYS, PLATFORM_NAME, userSpaceUrls} from "@app/core/state"
-  import {kv, db} from "@app/core/storage"
   import {pushToast} from "@app/util/toast"
-  import {Push} from "@app/util/notifications"
+  import {logout} from "@app/util/logout"
 
   let progress: number | undefined = $state(undefined)
   let confirmText = $state("")
@@ -88,13 +87,7 @@
     await sleep(2000)
 
     // Goodbye forever!
-    await Push.disable()
-    await kv.clear()
-    await db.clear()
-
-    localStorage.clear()
-
-    window.location.href = "/"
+    await logout()
   }
 
   const confirm = async () => {

src/app/components/ProfileEdit.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
   import type {Profile} from "@welshman/util"
   import {getTag, makeProfile} from "@welshman/util"
-  import {pubkey, profilesByPubkey} from "@welshman/app"
+  import {pubkey, profilesByPubkey, waitForThunkError} from "@welshman/app"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import {errorMessage} from "@lib/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
   import {clearModals} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
@@ -17,11 +19,33 @@
 
   const back = () => history.back()
 
-  const onsubmit = ({profile, shouldBroadcast}: {profile: Profile; shouldBroadcast: boolean}) => {
-    updateProfile({profile, shouldBroadcast})
-    pushToast({message: "Your profile has been updated!"})
-    clearModals()
+  const onsubmit = async ({
+    profile,
+    shouldBroadcast,
+  }: {
+    profile: Profile
+    shouldBroadcast: boolean
+  }) => {
+    loading = true
+
+    try {
+      const error = await waitForThunkError(updateProfile({profile, shouldBroadcast}))
+
+      if (error) {
+        pushToast({
+          theme: "error",
+          message: `Failed to update your profile: ${errorMessage(error)}`,
+        })
+      } else {
+        pushToast({message: "Your profile has been updated!"})
+        clearModals()
+      }
+    } finally {
+      loading = false
+    }
   }
+
+  let loading = $state(false)
 </script>
 
 <ProfileEditForm {initialValues} {onsubmit}>
@@ -30,6 +54,9 @@
       <Icon icon={AltArrowLeft} />
       Go Back
     </Button>
-    <Button type="submit" class="btn btn-primary">Save Changes</Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading} />
+      Save Changes
+    </Button>
   {/snippet}
 </ProfileEditForm>

src/app/components/SignUp.svelte

@@ -1,15 +1,8 @@
 <script lang="ts">
   import type {ClientOptions} from "@pomade/core"
   import type {Profile} from "@welshman/util"
-  import {
-    makeProfile,
-    makeSecret,
-    getPubkey,
-    RELAYS,
-    MESSAGING_RELAYS,
-    makeEvent,
-  } from "@welshman/util"
-  import {loginWithNip01, loginWithPomade, publishThunk} from "@welshman/app"
+  import {makeProfile, makeSecret, RELAYS, MESSAGING_RELAYS, makeEvent} from "@welshman/util"
+  import {loginWithNip01, publishThunk} from "@welshman/app"
   import Key from "@assets/icons/key-minimalistic.svg?dataurl"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import {getKey, setKey} from "@lib/implicit"
@@ -23,8 +16,6 @@
   import SignUpEmail from "@app/components/SignUpEmail.svelte"
   import SignUpProfile from "@app/components/SignUpProfile.svelte"
   import SignUpComplete from "@app/components/SignUpComplete.svelte"
-  import {setChecked} from "@app/util/notifications"
-  import {pushModal, clearModals} from "@app/util/modal"
   import {initProfile} from "@app/core/commands"
   import {
     POMADE_SIGNERS,
@@ -33,6 +24,9 @@
     DEFAULT_RELAYS,
     DEFAULT_MESSAGING_RELAYS,
   } from "@app/core/state"
+  import {setChecked} from "@app/util/notifications"
+  import {loginWithPomade} from "@app/util/pomade"
+  import {pushModal, clearModals} from "@app/util/modal"
 
   setKey("signup.email", "")
   setKey("signup.secret", makeSecret())
@@ -73,10 +67,9 @@
       complete: () => pushModal(SignUpComplete, {next: flows.email.finalize}),
       finalize: () => {
         const email = getKey<string>("signup.email")!
-        const secret = getKey<string>("signup.secret")!
         const clientOptions = getKey<ClientOptions>("signup.clientOptions")!
 
-        loginWithPomade(getPubkey(secret), email, clientOptions)
+        loginWithPomade(clientOptions, email)
         completeSignup()
       },
     },

src/app/components/SignUpEmail.svelte

@@ -18,7 +18,7 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SignUpEmailConfirm from "@app/components/SignUpEmailConfirm.svelte"
-  import {pushToast} from "@app/util/toast"
+  import {pushToast, popToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
 
   type Props = {
@@ -40,6 +40,11 @@
     loading = true
 
     try {
+      const toastId = pushToast({
+        timeout: 60_000,
+        message: "Creating your account, please wait...",
+      })
+
       const secret = getKey<string>("signup.secret")!
       const {clientOptions, ...registerRes} = await Client.register(2, 3, secret)
 
@@ -54,7 +59,8 @@
       const setupRes = await client.setupRecovery(email, password)
 
       if (!setupRes.ok) {
-        const message = setupRes.messages[0]?.res?.message || "Please try again."
+        const message =
+          setupRes.messages.find(m => m.res && !m.res?.ok)?.res?.message || "Please try again."
 
         return pushToast({
           theme: "error",
@@ -74,6 +80,7 @@
       setKey("signup.email", email)
       setKey("signup.clientOptions", clientOptions)
 
+      popToast(toastId)
       pushModal(SignUpEmailConfirm, {next})
     } catch (e) {
       console.error(e)

src/app/components/SpaceMenu.svelte

@@ -256,7 +256,7 @@
           <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
         {/if}
         {#each $userRooms as h, i (h)}
-          <SpaceMenuRoomItem {replaceState} {url} {h} />
+          <SpaceMenuRoomItem notify {replaceState} {url} {h} />
         {/each}
         {#if $otherRooms.length > 0}
           <div class="h-2"></div>

src/app/components/SpaceMenuButton.svelte

@@ -3,11 +3,15 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import SpaceMenu from "@app/components/SpaceMenu.svelte"
+  import {notifications} from "@app/util/notifications"
+  import {makeSpacePath} from "@app/util/routes"
   import {pushDrawer} from "@app/util/modal"
   import {deriveSocketStatus} from "@app/core/state"
 
   const {url} = $props()
 
+  const path = makeSpacePath(url) + ":mobile"
+
   const status = deriveSocketStatus(url)
 
   const openMenu = () => pushDrawer(SpaceMenu, {url})
@@ -17,5 +21,7 @@
   <Icon icon={MenuDots} />
   {#if $status.theme !== "success"}
     <div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-{$status.theme}"></div>
+  {:else if $notifications.has(path)}
+    <div class="absolute right-0 top-0 -mr-1 -mt-1 h-2 w-2 rounded-full bg-primary"></div>
   {/if}
 </Button>

src/app/components/SpaceMenuRoomItem.svelte

@@ -4,16 +4,18 @@
   import Icon from "@lib/components/Icon.svelte"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
+  import {notifications} from "@app/util/notifications"
   import {makeRoomPath} from "@app/util/routes"
   import {deriveShouldNotify} from "@app/core/state"
 
   interface Props {
     url: any
     h: any
+    notify?: boolean
     replaceState?: boolean
   }
 
-  const {url, h, replaceState = false}: Props = $props()
+  const {url, h, notify = false, replaceState = false}: Props = $props()
 
   const path = makeRoomPath(url, h)
   const shouldNotifyForSpace = deriveShouldNotify(url)
@@ -21,7 +23,10 @@
   const showDifferenceIcon = $derived($shouldNotifyForRoom !== $shouldNotifyForSpace)
 </script>
 
-<SecondaryNavItem href={path} {replaceState}>
+<SecondaryNavItem
+  href={path}
+  {replaceState}
+  notification={notify ? $notifications.has(path) : false}>
   <RoomNameWithImage {url} {h} />
   {#if showDifferenceIcon}
     <Icon icon={$shouldNotifyForRoom ? VolumeLoud : VolumeCross} size={4} class="opacity-50" />

src/app/components/WalletAsReceivingAddress.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+  import {makeProfile} from "@welshman/util"
   import {getWalletAddress} from "@welshman/util"
+  import {userProfile, waitForThunkError, session} from "@welshman/app"
+  import {errorMessage} from "@lib/util"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Modal from "@lib/components/Modal.svelte"
@@ -9,8 +12,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {updateProfile} from "@app/core/commands"
   import {clearModals} from "@app/util/modal"
-  import {userProfile, session} from "@welshman/app"
-  import {makeProfile} from "@welshman/util"
+  import {pushToast} from "@app/util/toast"
 
   const lud16 = getWalletAddress($session!.wallet!)
 
@@ -20,9 +22,13 @@
     loading = true
 
     try {
-      await updateProfile({profile: {...profile, lud16}})
+      const error = await waitForThunkError(updateProfile({profile: {...profile, lud16}}))
 
-      clearModals()
+      if (error) {
+        pushToast({theme: "error", message: `Failed to update profile: ${errorMessage(error)}`})
+      } else {
+        clearModals()
+      }
     } finally {
       loading = false
     }

src/app/components/WalletUpdateReceivingAddress.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {getWalletAddress} from "@welshman/util"
-  import {session, userProfile} from "@welshman/app"
+  import {session, waitForThunkError, userProfile} from "@welshman/app"
+  import {errorMessage} from "@lib/util"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
@@ -17,7 +18,7 @@
   const back = () => history.back()
 
   let address = $state($userProfile?.lud16 || "")
-  let isLoading = $state(false)
+  let loading = $state(false)
 
   const walletLud16 = $derived($session?.wallet ? getWalletAddress($session.wallet) : undefined)
 
@@ -28,20 +29,28 @@
   }
 
   const save = async () => {
-    isLoading = true
+    loading = true
+
     try {
-      await updateProfile({
-        profile: {
-          ...$userProfile,
-          lud06: undefined,
-          lud16: address.trim() || undefined,
-        },
-      })
-      back()
+      const error = await waitForThunkError(
+        updateProfile({
+          profile: {
+            ...$userProfile,
+            lud06: undefined,
+            lud16: address.trim() || undefined,
+          },
+        }),
+      )
+
+      if (error) {
+        pushToast({theme: "error", message: `Failed to update profile: ${errorMessage(error)}`})
+      } else {
+        back()
+      }
     } catch (error) {
       pushToast({theme: "error", message: "Failed to update profile"})
     } finally {
-      isLoading = false
+      loading = false
     }
   }
 </script>
@@ -61,7 +70,7 @@
           placeholder="user@domain.com"
           bind:value={address}
           class="input input-bordered flex w-full"
-          disabled={isLoading} />
+          disabled={loading} />
         <p class="text-xs opacity-75">
           You can enter one manually or use your connected wallet's address (if available). Leave
           empty to remove your lightning address
@@ -78,7 +87,7 @@
               </div>
               <p class="text-xs opacity-75">{walletLud16}</p>
             </div>
-            <Button class="btn btn-outline btn-sm" onclick={useWalletAddress} disabled={isLoading}>
+            <Button class="btn btn-outline btn-sm" onclick={useWalletAddress} disabled={loading}>
               Use This
             </Button>
           </div>
@@ -87,9 +96,9 @@
     </div>
   </ModalBody>
   <ModalFooter>
-    <Button class="btn btn-neutral" onclick={back} disabled={isLoading}>Cancel</Button>
-    <Button class="btn btn-primary" onclick={save} disabled={isLoading}>
-      {#if isLoading}
+    <Button class="btn btn-neutral" onclick={back} disabled={loading}>Cancel</Button>
+    <Button class="btn btn-primary" onclick={save} disabled={loading}>
+      {#if loading}
         <span class="loading loading-spinner loading-sm"></span>
       {:else}
         <Icon icon={CheckCircle} />

src/app/core/commands.ts

@@ -676,7 +676,7 @@ export const initProfile = (profile: Profile) => {
   return publishThunk({event, relays: []})
 }
 
-export const updateProfile = async ({
+export const updateProfile = ({
   profile,
   shouldBroadcast = !getTag(PROTECTED, profile.event?.tags || []),
 }: {
@@ -697,5 +697,5 @@ export const updateProfile = async ({
   const event = makeEvent(template.kind, template)
   const relays = router.merge(scenarios).getUrls()
 
-  await publishThunk({event, relays}).complete
+  return publishThunk({event, relays})
 }

src/app/util/logout.ts

@@ -0,0 +1,14 @@
+import {kv, db} from "@app/core/storage"
+import {Push} from "@app/util/notifications"
+import {deactivateCurrentPomadeSession} from "@app/util/pomade"
+
+export const logout = async () => {
+  await deactivateCurrentPomadeSession()
+  await Push.disable()
+  await kv.clear()
+  await db.clear()
+
+  localStorage.clear()
+
+  window.location.href = "/"
+}

src/app/util/notifications.ts

@@ -12,12 +12,14 @@ import {
   repository,
   publishThunk,
   loadRelay,
+  relaysByUrl,
   waitForThunkError,
   userMessagingRelayList,
 } from "@welshman/app"
 import {
   on,
   call,
+  find,
   assoc,
   poll,
   prop,
@@ -44,7 +46,14 @@ import {
   Address,
 } from "@welshman/util"
 import {buildUrl} from "@lib/util"
-import {makeSpacePath, makeChatPath, getEventPath, goToEvent} from "@app/util/routes"
+import {
+  makeSpacePath,
+  makeRoomPath,
+  makeSpaceChatPath,
+  makeChatPath,
+  getEventPath,
+  goToEvent,
+} from "@app/util/routes"
 import {
   DM_KINDS,
   CONTENT_KINDS,
@@ -57,9 +66,11 @@ import {
   userSettingsValues,
   userGroupList,
   getSpaceUrlsFromGroupList,
+  getSpaceRoomsFromGroupList,
   makeCommentFilter,
   userSpaceUrls,
   shouldNotify,
+  hasNip29,
   device,
 } from "@app/core/state"
 import {kv} from "@app/core/storage"
@@ -125,6 +136,7 @@ export const allNotifications = derived(
         pubkey,
         checked,
         chatsById,
+        relaysByUrl,
         userGroupList,
         deriveEventsByIdByUrl({
           tracker,
@@ -135,7 +147,7 @@ export const allNotifications = derived(
       identity,
     ),
   ),
-  ([$pubkey, $checked, $chatsById, $userGroupList, eventsByIdByUrl]) => {
+  ([$pubkey, $checked, $chatsById, $relaysByUrl, $userGroupList, eventsByIdByUrl]) => {
     const hasNotification = (path: string, latestEvent?: TrustedEvent) => {
       if (!latestEvent || latestEvent.pubkey === $pubkey) {
         return false
@@ -168,12 +180,34 @@ export const allNotifications = derived(
 
     for (const url of getSpaceUrlsFromGroupList($userGroupList)) {
       const spacePath = makeSpacePath(url)
+      const spacePathMobile = spacePath + ":mobile"
       const eventsById = eventsByIdByUrl.get(url) || new Map()
       const latestEvent = first(sortEventsDesc(eventsById.values()))
 
       if (hasNotification(spacePath, latestEvent)) {
         paths.add(spacePath)
       }
+
+      if (hasNip29($relaysByUrl.get(url))) {
+        for (const h of getSpaceRoomsFromGroupList(url, $userGroupList)) {
+          const roomPath = makeRoomPath(url, h)
+          const latestEvent = find(e => e.tags.some(spec(["h", h])), eventsById.values())
+
+          if (hasNotification(roomPath, latestEvent)) {
+            paths.add(spacePathMobile)
+            paths.add(spacePath)
+            paths.add(roomPath)
+          }
+        }
+      } else {
+        const messagesPath = makeSpaceChatPath(url)
+
+        if (hasNotification(messagesPath, first(eventsById.values()))) {
+          paths.add(spacePathMobile)
+          paths.add(spacePath)
+          paths.add(messagesPath)
+        }
+      }
     }
 
     return paths
@@ -268,7 +302,7 @@ class CapacitorNotifications implements IPushAdapter {
   async request(prompt = true) {
     let status = await PushNotifications.checkPermissions()
 
-    if (prompt && status.receive === "prompt") {
+    if (prompt && ["prompt", "prompt-with-rationale"].includes(status.receive)) {
       status = await PushNotifications.requestPermissions()
     }
 

src/app/util/pomade.ts

@@ -0,0 +1,78 @@
+import {get} from "svelte/store"
+import {Client, type SessionItem, type ClientOptions} from "@pomade/core"
+import {ifLet, reject, spec} from "@welshman/lib"
+import {session, isPomadeSession, loginWithPomade as _loginWithPomade} from "@welshman/app"
+
+export const getPomadeClient = async () => {
+  const $session = get(session)
+
+  if (isPomadeSession($session)) {
+    return new Client($session.clientOptions)
+  }
+}
+
+export type PomadeSessionWithPeers = SessionItem & {peers: string[]}
+
+export const loadPomadeSessions = async () => {
+  const sessionMap = new Map<string, PomadeSessionWithPeers>()
+  const client = await getPomadeClient()
+
+  if (client) {
+    const result = await client.listSessions()
+
+    for (const message of result.messages) {
+      if (!message.res?.items) continue
+
+      for (const item of message.res.items) {
+        const existing = sessionMap.get(item.client)
+
+        if (existing) {
+          existing.peers.push(message.url)
+        } else {
+          sessionMap.set(item.client, {...item, peers: [message.url]})
+        }
+      }
+    }
+  }
+
+  return Array.from(sessionMap.values())
+}
+
+export const loadOtherPomadeSessions = async () => {
+  const client = await getPomadeClient()
+
+  if (!client) {
+    return []
+  }
+
+  return reject(spec({client: await client.getPubkey()}), await loadPomadeSessions())
+}
+
+export const deletePomadeSession = async (clientPubkey: string, peers: string[]) =>
+  ifLet(await getPomadeClient(), client => client.deleteSession(clientPubkey, peers))
+
+export const deactivatePomadeSession = async (clientPubkey: string, peers: string[]) =>
+  ifLet(await getPomadeClient(), client => client.deactivateSession(clientPubkey, peers))
+
+export const deleteCurrentPomadeSession = async () =>
+  ifLet(await getPomadeClient(), async client =>
+    client.deleteSession(await client.getPubkey(), client.peers),
+  )
+
+export const deactivateCurrentPomadeSession = async () =>
+  ifLet(await getPomadeClient(), async client =>
+    client.deactivateSession(await client.getPubkey(), client.peers),
+  )
+
+export const deleteDeactivatedPomadeSessions = async () => {
+  const sessions = await loadOtherPomadeSessions()
+
+  for (const item of sessions || []) {
+    if (item.deactivated_at) {
+      await deletePomadeSession(item.client, item.peers)
+    }
+  }
+}
+
+export const loginWithPomade = (clientOptions: ClientOptions, email: string) =>
+  _loginWithPomade(clientOptions.group.group_pk.slice(2), email, clientOptions)

src/lib/components/SecondaryNavItem.svelte

@@ -38,7 +38,7 @@
     class:text-base-content={active}
     class:bg-base-100={active}>
     {@render children?.()}
-    {#if !active && notification}
+    {#if notification}
       <div class="absolute right-2 top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
     {/if}
   </a>
@@ -48,7 +48,7 @@
     class="{restProps.class} relative flex w-full items-center gap-3 text-left transition-all hover:bg-base-100 hover:text-base-content"
     class:text-base-content={active}
     class:bg-base-100={active}>
-    {#if !active && notification}
+    {#if notification}
       <div class="absolute right-2 top-5 h-2 w-2 rounded-full bg-primary" transition:fade></div>
     {/if}
     {@render children?.()}

src/lib/components/StringMultiInput.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import {writable} from "svelte/store"
+  import type {Writable} from "svelte/store"
+  import {remove, uniq} from "@welshman/lib"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+
+  interface Props {
+    value: string[]
+    term?: Writable<string>
+    placeholder?: string
+  }
+
+  let {value = $bindable(), term = writable(""), placeholder = ""}: Props = $props()
+
+  const normalizeItem = (text: string) => text.trim()
+
+  const addItems = (text: string) => {
+    const items = text.split(/[\n,]/).map(normalizeItem).filter(Boolean)
+
+    if (items.length > 0) {
+      value = uniq([...value, ...items])
+    }
+
+    term.set("")
+  }
+
+  const removeItem = (item: string) => {
+    value = remove(item, value)
+  }
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Enter" && $term) {
+      e.preventDefault()
+      addItems($term)
+    }
+  }
+
+  const onPaste = (e: ClipboardEvent) => {
+    const text = e.clipboardData?.getData("text")
+
+    if (text) {
+      e.preventDefault()
+      addItems(text)
+    }
+  }
+
+  const onBlur = () => {
+    if ($term.trim()) {
+      addItems($term)
+    }
+  }
+</script>
+
+<div class="flex flex-col gap-2">
+  <div>
+    {#each value as item (item)}
+      <div class="flex-inline badge badge-neutral mr-1 gap-1">
+        <Button class="flex items-center" onclick={() => removeItem(item)}>
+          <Icon icon={CloseCircle} size={4} class="-ml-1 mt-px" />
+        </Button>
+        <span>{item}</span>
+      </div>
+    {/each}
+  </div>
+  <label class="input input-bordered flex w-full items-center gap-2">
+    <input
+      bind:value={$term}
+      class="grow"
+      type="text"
+      {placeholder}
+      onkeydown={onKeyDown}
+      onpaste={onPaste}
+      onblur={onBlur} />
+  </label>
+</div>

src/routes/settings/profile/+page.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import * as nip19 from "nostr-tools/nip19"
+  import {Client} from "@pomade/core"
   import {hexToBytes} from "@welshman/lib"
   import {displayPubkey, displayProfile} from "@welshman/util"
-  import {pubkey, session, displayNip05, deriveProfile} from "@welshman/app"
+  import {pubkey, session, SessionMethod, displayNip05, deriveProfile} from "@welshman/app"
   import {slideAndFade} from "@lib/transition"
   import PenNewSquare from "@assets/icons/pen-new-square.svg?dataurl"
   import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Key from "@assets/icons/key-minimalistic.svg?dataurl"
+  import Letter from "@assets/icons/letter.svg?dataurl"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Copy from "@assets/icons/copy.svg?dataurl"
   import Settings from "@assets/icons/settings.svg?dataurl"
@@ -16,15 +18,16 @@
   import Icon from "@lib/components/Icon.svelte"
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ContentMinimal from "@app/components/ContentMinimal.svelte"
   import ProfileEdit from "@app/components/ProfileEdit.svelte"
   import ProfileDelete from "@app/components/ProfileDelete.svelte"
   import SignerStatus from "@app/components/SignerStatus.svelte"
+  import PasswordReset from "@app/components/PasswordReset.svelte"
   import InfoKeys from "@app/components/InfoKeys.svelte"
-  import {PLATFORM_NAME} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
-  import {clip} from "@app/util/toast"
+  import {clip, pushToast} from "@app/util/toast"
 
   const npub = nip19.npubEncode($pubkey!)
   const profile = deriveProfile($pubkey!)
@@ -38,9 +41,29 @@
 
   const startDelete = () => pushModal(ProfileDelete)
 
+  const startPasswordReset = async () => {
+    loading = true
+
+    try {
+      const {ok, peersByPrefix} = await Client.requestChallenge($session!.email)
+
+      if (!ok) {
+        pushToast({
+          theme: "error",
+          message: "Failed to initiate password reset!",
+        })
+      }
+
+      pushModal(PasswordReset, {peersByPrefix})
+    } finally {
+      loading = false
+    }
+  }
+
   const startRecovery = () => pushModal(InfoKeys)
 
-  let showAdvanced = false
+  let loading = $state(false)
+  let showAdvanced = $state(false)
 </script>
 
 <div class="content column gap-4">
@@ -69,10 +92,11 @@
       <ContentMinimal event={{content: $profile?.about || "", tags: []}} />
     {/key}
   </div>
-  {#if $session?.email}
-    <div class="card2 bg-alt col-4 shadow-md">
+  <div class="card2 bg-alt col-4 shadow-md">
+    {#if $session?.method === SessionMethod.Pomade}
       <FieldInline>
         {#snippet label()}
+          <Icon icon={Letter} />
           <p>Email Address</p>
         {/snippet}
         {#snippet input()}
@@ -81,16 +105,8 @@
             <input readonly value={$session.email} class="grow" />
           </label>
         {/snippet}
-        {#snippet info()}
-          <p>
-            Your email and password can only be used to log into {PLATFORM_NAME}.
-            <Button class="link" onclick={startRecovery}>Start holding your own keys</Button>
-          </p>
-        {/snippet}
       </FieldInline>
-    </div>
-  {/if}
-  <div class="card2 bg-alt col-4 shadow-md">
+    {/if}
     <FieldInline>
       {#snippet label()}
         <p class="flex items-center gap-3">
@@ -139,6 +155,14 @@
       </FieldInline>
     {/if}
     <SignerStatus />
+    {#if $session?.method === SessionMethod.Pomade}
+      <div class="flex gap-2 justify-end">
+        <Button class="btn" onclick={startPasswordReset}>
+          <Spinner {loading}>Update your password</Spinner>
+        </Button>
+        <Button class="btn btn-primary" onclick={startRecovery}>Start holding your own keys</Button>
+      </div>
+    {/if}
   </div>
   <div class="card2 bg-alt shadow-md">
     <div class="flex items-center justify-between">

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -337,7 +337,7 @@
   }
 
   const onEditPrevious = () => {
-    const prev = $events.find(e => e.pubkey === $pubkey)
+    const prev = $events.toReversed().find(e => e.pubkey === $pubkey)
 
     if (prev && canEditEvent(prev)) {
       onEditEvent(prev)

src/routes/spaces/[relay]/chat/+page.svelte

@@ -273,7 +273,7 @@
   }
 
   const onEditPrevious = () => {
-    const prev = $events.find(e => e.pubkey === $pubkey)
+    const prev = $events.toReversed().find(e => e.pubkey === $pubkey)
 
     if (prev && canEditEvent(prev)) {
       onEditEvent(prev)

tailwind.config.js

@@ -2,7 +2,7 @@ import {config} from "dotenv"
 import daisyui from "daisyui"
 import themes from "daisyui/src/theming/themes"
 
-config({path: ".env"})
+config({path: ".env.local"})
 config({path: ".env.template"})
 
 /** @type {import('tailwindcss').Config} */

vite.config.ts

@@ -4,7 +4,7 @@ import {SvelteKitPWA} from "@vite-pwa/sveltekit"
 import {sveltekit} from "@sveltejs/kit/vite"
 import svg from "@poppanator/sveltekit-svg"
 
-config({path: ".env"})
+config({path: ".env.local"})
 config({path: ".env.template"})
 
 export default defineConfig({