Bump version

Co-authored-by: Jon Staab <shtaab@gmail.com>

.ackrc

@@ -3,6 +3,7 @@
 --ignore-dir=build
 --ignore-dir=ios/DerivedData
 --ignore-dir=ios/App/App/public
+--ignore-dir=ios/App/Pods
 --ignore-file=match:.svg
 --ignore-file=match:package-lock.json
 

.env.template

@@ -1,18 +1,22 @@
 VITE_DEFAULT_PUBKEYS=06639a386c9c1014217622ccbcf40908c4f1a0c33e23f8d6d68f4abf655f8f71,266815e0c9210dfa324c6cba3573b14bee49da4209a9456f9484e5106cd408a5,391819e2f2f13b90cac7209419eb574ef7c0d1f4e81867fc24c47a3ce5e8a248,3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d,3f770d65d3a764a9c5cb503ae123e62ec7598ad035d836e2a810f3877a745b24,55f04590674f3648f4cdc9dc8ce32da2a282074cd0b020596ee033d12d385185,58c741aa630c2da35a56a77c1d05381908bd10504fdd2d8b43f725efa6d23196,61066504617ee79387021e18c89fb79d1ddbc3e7bff19cf2298f40466f8715e9,6389be6491e7b693e9f368ece88fcd145f07c068d2c1bbae4247b9b5ef439d32,63fe6318dc58583cfe16810f86dd09e18bfd76aabc24a0081ce2856f330504ed,6e75f7972397ca3295e0f4ca0fbc6eb9cc79be85bafdd56bd378220ca8eee74e,76c71aae3a491f1d9eec47cba17e229cda4113a0bbb6e6ae1776d7643e29cafa,7fa56f5d6962ab1e3cd424e758c3002b8665f7b0d8dcee9fe9e288d7751ac194,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,84dee6e676e5bb67b4ad4e042cf70cbd8681155db535942fcc6a0533858a7240,97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322,b676ded7c768d66a757aa3967b1243d90bf57afb09d1044d3219d8d424e4aea0,dace63b00c42e6e017d00dd190a9328386002ff597b841eb5ef91de4f1ce8491,eeb11961b25442b16389fe6c7ebea9adf0ac36dd596816ea7119e521b8821b9e,fe7f6bc6f7338b76bbf80db402ade65953e20b2f23e66e898204b63cc42539a3
-VITE_BURROW_URL=
-VITE_PLATFORM_URL=https://flotilla.social
+VITE_DEFAULT_BLOSSOM_SERVERS=https://blossom.primal.net/
+VITE_POMADE_SIGNERS=
+VITE_PLATFORM_URL=https://app.flotilla.social
 VITE_PLATFORM_TERMS=https://flotilla.social/terms
 VITE_PLATFORM_PRIVACY=https://flotilla.social/privacy
 VITE_PLATFORM_NAME=Flotilla
-VITE_PLATFORM_LOGO=static/flotilla.png
+VITE_PLATFORM_LOGO=static/logo.png
 VITE_PLATFORM_RELAYS=
 VITE_PLATFORM_ACCENT="#7161FF"
 VITE_PLATFORM_SECONDARY="#EB5E28"
 VITE_PLATFORM_DESCRIPTION="Flotilla is nostr — for communities."
-VITE_INDEXER_RELAYS=wss://purplepag.es/,wss://relay.damus.io/,wss://relay.nostr.band/,wss://indexer.coracle.social/
-VITE_SIGNER_RELAYS=wss://relay.nsec.app/,wss://bucket.coracle.social/
-VITE_NOTIFIER_PUBKEY=27b7c2ed89ef78322114225ea3ebf5f72c7767c2528d4d0c1854d039c00085df
-VITE_NOTIFIER_RELAY=wss://anchor.coracle.social/
+VITE_PUSH_SERVER=https://nps.flotilla.social/
+VITE_PUSH_BRIDGE=wss://npb.coracle.social/
+VITE_BLOCKED_RELAYS=brb.io,relay.nostr.band,nostr.mutinywallet.com,feeds.nostr.band,nostr.zbd.gg,wot.utxo.one,blastr.f7z.xyz,relay.current.fyi
+VITE_INDEXER_RELAYS=purplepag.es,relay.damus.io,indexer.coracle.social
+VITE_DEFAULT_RELAYS=relay.damus.io,relay.primal.net,nostr.mom
+VITE_DEFAULT_MESSAGING_RELAYS=auth.nostr1.com
+VITE_SIGNER_RELAYS=relay.nsec.app,ephemeral.snowflare.cc,bucket.coracle.social
 VITE_VAPID_PUBLIC_KEY=BIt2D4BdgdbCowD_0d3Np6GbrIGHxd7aIEUeZNe3hQuRlHz02OhzvDaai0XSFoJYVzSzdMjdyW-QhvW9_yq8j4Y
 VITE_GLITCHTIP_API_KEY=
 GLITCHTIP_AUTH_TOKEN=

.prettierrc

@@ -5,6 +5,6 @@
   "svelteSortOrder": "options-styles-scripts-markup",
   "arrowParens": "avoid",
   "bracketSpacing": false,
-  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-svelte"],
   "overrides": [{"files": "*.svelte", "options": {"parser": "svelte"}}]
 }

AGENTS.md

@@ -0,0 +1,257 @@
+## Project Overview
+
+Flotilla is a Nostr "relays as groups" community chat client. It implements NIP-29 (relay-based groups) to create Discord-like spaces (servers) and rooms (channels).
+
+**Tech Stack:**
+
+- SvelteKit 5.48+ with TypeScript 5.9+
+- Capacitor for cross-platform (Web/PWA, Android, iOS)
+- TailwindCSS + DaisyUI for styling
+- Welshman library suite for Nostr protocol
+- IndexedDB for local storage
+- Vite for building
+
+**Key Concepts:**
+
+- **Spaces** - Relays used as community groups (like Discord servers)
+- **Rooms** - NIP-29 groups within spaces (like Discord channels), identified by `h`
+- **Chats** - Direct message conversations (NIP-04/NIP-44 encrypted)
+
+## Architecture & Dependency Graph
+
+The project follows a **strict acyclic dependency hierarchy**:
+
+```
+routes/                    (top layer - can depend on anything)
+  ↓
+app/components/            (can depend on app/* and lib/*)
+  ↓
+app/core/ & app/util/      (can only depend on lib/*)
+  ↓
+lib/                       (can only depend on external libraries)
+  ↓
+external libraries         (bottom layer)
+```
+
+**Import Ordering Convention (CRITICAL):**
+Always sort imports by dependency level:
+
+1. Third-party libraries first
+2. Then `lib/` imports
+3. Then `app/` imports
+
+Example:
+
+```typescript
+import {derived} from "svelte/store"
+import {throttle} from "throttle-debounce"
+import {Dialog} from "$lib/components"
+import {repository} from "$app/core/state"
+```
+
+## File Structure
+
+```
+src/
+├── lib/                          # Generic reusable code
+│   ├── components/               # 38 UI components (Button, Dialog, etc.)
+│   ├── html.ts                   # DOM utilities
+│   ├── indexeddb.ts              # IndexedDB helpers
+│   └── util.ts                   # Generic utilities
+│
+├── app/
+│   ├── core/
+│   │   ├── state.ts              # State management, stores, constants (687 lines)
+│   │   ├── commands.ts           # Publishing events and other write operations (440+ lines)
+│   │   ├── requests.ts           # Loading data from network (191 lines)
+│   │   ├── sync.ts               # Data synchronization (296 lines)
+│   │   └── storage.ts            # IndexedDB setup
+│   │
+│   ├── util/
+│   │   ├── notifications.ts      # Push notifications (731 lines)
+│   │   ├── policies.ts           # Relay policies
+│   │   ├── routes.ts             # Routing helpers
+│   │   ├── modal.ts              # Modal management
+│   │   ├── toast.ts              # Toast notifications
+│   │   ├── theme.ts              # Theme switching
+│   │   └── keyboard.ts           # Keyboard handling
+│   │
+│   ├── editor/                   # Rich text editor config
+│   │   ├── index.ts              # TipTap setup with Nostr integration
+│   │   ├── EditorContent.svelte
+│   │   └── MentionNodeView.ts
+│   │
+│   └── components/               # 188 app-specific components
+│       ├── Space*.svelte         # Space/relay management
+│       ├── Room*.svelte          # Room/channel management
+│       ├── Chat*.svelte          # Direct messaging
+│       ├── Profile*.svelte       # User profiles
+│       ├── Thread*.svelte        # Threaded posts
+│       └── ...
+│
+├── routes/                       # SvelteKit file-based routing
+│   ├── +layout.svelte            # Root layout (sync logic here)
+│   ├── spaces/                   # Space management
+│   │   └── [relay]/              # Specific space
+│   │       ├── chat/             # Space chat
+│   │       ├── threads/          # Thread posts
+│   │       ├── calendar/         # Events
+│   │       └── [h]/              # Specific room (h = room id)
+│   ├── chat/                     # Direct messages
+│   ├── settings/                 # User settings
+│   └── [bech32]/                 # Bech32 entity viewer
+│
+├── assets/icons/                 # ~1,277 SVG icons
+├── app.html                      # HTML template
+├── app.css                       # Global styles
+└── types.d.ts                    # Type definitions
+```
+
+## State Management
+
+**Core Principles:**
+
+- Use Svelte 4 **stores** for all state (NOT runes outside UI components)
+- Most global state flows through Welshman's `repository` (unidirectional)
+- Query state using `deriveEventsMapped` or `deriveProfile` etc
+- Update state by publishing events via `publishThunk`
+
+**Thunks:**
+
+- Reduce UI latency by handling signatures and sending in background
+- Return status that should be displayed to user
+- Allow cancellation and error handling
+- Immediately publish to local repository for optimistic updates
+
+## Nostr Integration
+
+**Welshman Library Suite:**
+
+- `@welshman/app` - High-level state (pubkey, signer, repository, tracker)
+- `@welshman/net` - Network layer (Pool, Socket, load, pull, request)
+- `@welshman/store` - Svelte integration (deriveEventsMapped, etc.)
+- `@welshman/util` - Event utilities (kinds, tags, validation)
+- `@welshman/signer` - Signing abstraction (NIP-01, NIP-07, NIP-46)
+- `@welshman/router` - Relay routing (inbox/outbox model)
+- `@welshman/editor` - Rich text editor with Nostr
+- `@welshman/content` - Content parsing
+- `@welshman/feeds` - Feed management
+
+**Key NIPs Implemented:**
+
+- NIP-01: Basic protocol
+- NIP-44/59/17: Encrypted DMs
+- NIP-07: Browser extension signing
+- NIP-19: Bech32 encoding
+- NIP-29: Relay-based Groups
+- NIP-42: Relay authentication
+- NIP-43: Relay membership
+- NIP-46: Nostr Connect (remote signing)
+- NIP-57: Lightning Zaps
+
+## Development Conventions
+
+**Component Parameterization:**
+
+- Only pass entity identifiers (`url` for spaces, `h` for rooms)
+- Derive all other data inside the component from identifiers
+- Example: Don't pass `members` prop, derive it from `h` inside component
+
+**Code Style:**
+
+- **No `null`** - only use `undefined`
+- Svelte 5 runes (`$state`, `$derived`, `$effect`) only in UI components
+- TailwindCSS and DaisyUI styling
+- Only add comments for really weird stuff
+- Do not call functions in components unless a parameter is reactive. Instead, use a svelte store or rune to make it reactive.
+- Do not use `any`. If there are type errors related to `unknown`, they are likely because the upstream definition of the data is incorrect.
+- 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
+
+## Common Tasks
+
+### Adding a New Component
+
+1. Determine if it's generic (`lib/components/`) or app-specific (`app/components/`)
+2. Follow naming convention: `PascalCase.svelte`
+3. Import in dependency order (3rd party → lib → app)
+4. Use stores for state, runes only for UI reactivity
+
+### Creating a New Route
+
+1. Add to `src/routes/` following SvelteKit conventions
+2. Use `+page.svelte` for page component
+3. Use `+layout.svelte` for shared layouts
+4. Top-level sync logic goes in root `+layout.svelte`
+
+### Loading Data from Network
+
+1. Use utilities from `app/core/requests.ts`
+2. Or create derived stores in `app/core/state.ts`
+3. Use `load`, `pull`, or `request` from `@welshman/net`
+
+### Publishing Events
+
+1. Create `make*` function to build event template
+2. Create `publish*` function using `publishThunk`
+3. Display thunk status to user (for cancel/error handling)
+4. These go in in `app/core/commands.ts`
+
+### Managing Modals/Toasts
+
+- Import from `app/util/modal.ts` or `app/util/toast.ts`
+- Pass component objects with parameters
+- Use `$state.snapshot` if calling component might unmount
+
+## Development Workflow
+
+Agents should not run the dev server or build the app. Instead, use the following commands:
+
+```bash
+pnpm run format           # Format changed files
+pnpm run lint             # Check formatting and linting
+pnpm run check            # Type check
+```
+
+**Welshman Development:**
+
+- Clone welshman to parent directory
+- Use `./link_deps` script to link local welshman packages
+- Avoid committing `pnpm.overrides` changes
+
+**Git Workflow:**
+
+- `master` branch auto-deploys to production
+- Work on feature branches based on `dev` branch
+- Pre-commit hooks run lint/typecheck automatically
+
+## Environment Variables
+
+See `.env.template` for all options.
+
+## Important Files to Reference
+
+- **src/app/core/state.ts** - All stores and constants
+- **src/app/core/sync.ts** - Data synchronization
+- **src/app/core/requests.ts** - Utilities for requesting data
+- **src/app/core/commands.ts** - Publishing patterns
+- **src/app/util/notifications.ts** - Notification badges and push notifications
+- **src/routes/+layout.svelte** - Top-level sync logic
+
+## Mobile Development
+
+**Capacitor Integration:**
+
+- Android: Full support, APK builds via `pnpm run release:android`
+- iOS: Full support (zaps disabled due to App Store policy)
+- PWA: Progressive Web App with service worker
+
+**Native Features:**
+
+- Push notifications (FCM/APNs)
+- Deep linking (nostr: and https: URLs)
+- Native signing plugin
+- Keyboard management
+- Safe area handling
+- Badge management

CHANGELOG.md

@@ -1,5 +1,170 @@
 # Changelog
 
+# 1.6.4
+
+* Clean up modal design
+* Fix overflowing popovers
+* Use space urls for relay hints
+* Re-work notification badges
+* Add push notification support via NIP 9a
+* Optimistically load messaging relays to avoid unnecessary warning
+* Recover from indexeddb not being available
+* Fix safe area inset support
+* Show space URL in top bar on mobile
+* Fix calendar detail page
+* Improve relay synchronization, especially for pyramid and relay29
+* Improve invite code error handling
+* Add wallet receive flow
+* Fix safari image uploads
+* Re-work recent activity page
+* Add classified listing content type
+* Use address for page param for replaceable events
+* Refine discover page to avoid slowness
+* Upgrade som dependencies
+* Tag event author when tagging parent event
+* Disable macos build
+* Add room muting
+
+# 1.6.3
+
+* Fix scroll down button z index
+* Hide tooltips on mobile
+* Sort comments ascending
+* Make video embeds rounded
+* Fix ProfileMultiSelect styling
+* Accept hex pubkeys/npubs/nprofiles in ProfileMultiSelect
+* Tweak room edit form design
+* Report pending signer to user
+* Update default relays
+* Fix chat list responsiveness
+* Fix memory leak, notification badge not showing
+* Improve space join flow
+* Fix opening images in fullscreen dialog
+* Add support for blocked relays
+* Add authentication policy setting
+* Add login with key if no signer is detected
+* Publish default relay selections on signup
+
+# 1.6.2
+
+* Fix modal scrolling and style
+
+# 1.6.1
+
+* Fix skinny profile images
+* Custom handler for relay urls
+* Improve time based chat partitioning
+* Improve authenticated image access interop
+* Fix image detail dialog
+* Fix zapper loading
+* Fix recent events missing in feeds
+
+# 1.6.0
+
+* Switch back to indexeddb to fix memory and performance
+* Add pay invoice functionality
+* Add space membership management and bans
+* Add event info to profile dialog
+* Add better room membership management
+* Refactor stores for performance
+* Hide nav when keyboard is open
+* Handle flotilla links in-app
+* Fix new messages indicator z-index
+* Fix some display bugs
+* Add date to chat items
+* Refine data synchronization
+* Hide nav when keyboard is open on mobile
+
+# 1.5.3
+
+* Add space edit form
+* Improve room syncing
+* Return better blossom errors
+* Fix access restricted bugs
+* Add room detail dialog
+* Fix broken link to self hosting
+* Tweak shadows
+* Always join spaces when visiting them
+
+# 1.5.2
+
+* Fix negentropy room syncing
+
+# 1.5.1
+
+* Fix chat path link
+
+# 1.5.0
+
+* Restyle mobile dialogs
+* Add room membership lists
+* Add space membership lists
+* Add edit room form
+* Support closed/private/restricted/hidden rooms
+* Add hosting services page
+* Improve performance and UI
+* Fix push notifications
+* Improve error detection and handling
+* Support invite links on discover page
+* Add link to landlubber if user is admin
+* Clear reply/share/edit on escape
+
+# 1.4.1
+
+* Improve data synchronization
+* Fix app url on capacitor deployments
+
+# 1.4.0
+
+* Allow "editing" chat messages
+* Check for room create permission
+* Re-work space navigation
+* Show all messages in non-nip29 chat
+* Improve synchronization logic
+* Add connection status to space menu
+* Add icon picker to room create component
+* Improve mention suggestions
+* Improve storage adapter and relay list performance
+* Fix modals
+* Add room deletion
+* Fix zapper loading
+* Add support for relay/group member lists and join/leave events
+
+# 1.3.1
+
+* Fix memory leak in storage adapter
+* Show fewer annoying toast messages
+
+# 1.3.0
+
+* Add optional badge and sound for notifications
+* Improve link rendering
+* Remove imgproxy
+* Bring back blossom feature detection for spaces
+* Improve light theme
+* Add more info to signer status
+* Simplify navigation for adding a space
+* Add ability to scan QR code for invite links
+* Streamline wallet setup and move receive address setting
+* Remove indexeddb on mobile, use capacitor file storage API
+* Fix duplicate DMs showing up
+
+# 1.2.5
+
+* Fix icons in build
+
+# 1.2.4
+
+* Add direct message alerts
+* Add alert settings page
+* Add instructions to key download
+* Add option that allows relays to strip signatures
+* Detect relays that mostly refuse to serve requests
+* Compress and upload profile images
+* Use system theme by default
+* Switch icon set, refactor how they're included
+* Use capacitor's preferences for storage instead of localStorage
+
 # 1.2.3
 
 * Add `created_at` to event info dialog

CONTRIBUTING.md

@@ -1,96 +0,0 @@
-# Contributing guidelines
-
-## Project Overview
-
-Flotilla is a svelte/typescript/capacitor project. It's intended to be an alternative to Discord for Nostr users. A high-quality UX is a priority, with an emphasis on well-tested, intuitive designs, and robust implementations.
-
-## Getting Started
-
-Run `pnpm run dev` to get a dev server, and `pnpm run check:watch` to watch for typescript errors. When you're ready to commit, a pre-commit hook will run to lint and typecheck your work. To run the project on Android or iOS, use Android Studio or Xcode.
-
-The `master` branch is automatically deployed to production, so always work on feature branches based on the `dev` branch. This project frequently uses unreleased versions of [welshman](https://welshman.coracle.social), using `pnpm` link to hotlink a local copy of the code. To set that up, clone welshman to the parent directory of your `coracle` client, then add `link:../welshman/packages/packagename` to the `pnpm.overrides` section of your `package.json`. Below is a nodejs script that will do that automatically for you:
-
-```javascript
-#!/usr/bin/env node
-
-import fs from 'fs'
-import path from 'path'
-
-const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'))
-
-packageJson.pnpm.overrides = Object.keys(packageJson.dependencies)
-  .filter(pkg => pkg.startsWith('@welshman/'))
-  .reduce((acc, pkg) => {
-    const packageName = pkg.split('/')[1]
-    acc[pkg] = `link:../welshman/packages/${packageName}`
-    return acc
-  }, {})
-
-fs.writeFileSync('./package.json', JSON.stringify(packageJson, null, 2) + '\n')
-
-console.log('Added welshman package overrides.')
-```
-
-Be sure to avoid committing overrides to either `package.json` or `pnpm-lock.yaml`. These overrides can generally be added, installed, and removed, and will persist until another `pnpm install` command gets run.
-
-## File Structure
-
-The main parts of the application are as follows:
-
-- `static` - static assets like fonts, images, etc.
-- `src/assets` - svgs for use as icons.
-- `src/lib` - general purpose components and utilities.
-- `src/app/core/state` - environment variables, constants, custom stores, and some utilities derived from them.
-- `src/app/core/requests` - utilities related to loading data from the nostr network.
-- `src/app/core/commands` - utilities related to publishing nostr events and uploading media to blossom servers.
-- `src/app/utils` - other application logic, including stuff related to modals, routing, etc.
-- `src/app/editor` - configuration for `@welshman/editor` for use in various app views.
-- `src/app/components` - reusable components that depend on other `app` stuff.
-- `src/routes` - file-based routing interpreted by sveltekit.
-
-Application organization is based on an acyclic dependency graph:
-
-- `routes` can depend on anything
-- `app/components` can depend on anything in `app` or `lib`
-- `app/utils` and `app/core` can only depend on `lib`
-- `lib` (and everything else) can depend only on external libraries
-
-The main stylistic/organizational rule when working in this project is that imports should be sorted based on the dependency graph. Third-party libraries should come first, then `lib`, then `app`.
-
-## System Architecture
-
-Flotilla's architecture generally mirrors the file structure. State is stored using Svelte `store`s provided either by `@welshman/app` or by `app/core/state`, allowing for idiomatic svelte 4 usage (svelte 5 runes are [ghey](https://habla.news/u/hodlbod@coracle.social/1739830562159) and not allowed outside of UI components).
-
-State is then synchronized to local storage or indexeddb using storage helpers provided by welshman in `routes/+layout.svelte`. Other top level synchronization logic generally belongs there.
-
-`app/core/state` contains all environment variables, constants, custom stores, and utilities derived from them. Most stores are `derived` from our event `repository` using `deriveEventsMapped`, which efficiently queries the repository and maps events to custom data structures. Some of these data structures are provided by `welshman`, and some are defined in `app/core/state`. In either case, they can always be mapped back to an event, which is important for updating replaceables without dropping unknown data.
-
-Here are a few important domain objects:
-
-- Spaces are relays used as community groups. Their `url`s are core to a lot of data and components, and are frequently passed around from place to place.
-- Chats are direct message conversations. There is currently some ambiguity in routing, since relays that don't support NIP 29 also have a "chat" tab, which uses vanilla NIP-C7.
-- NIP 29 groups are variously called "rooms" and "channels". Conventionally, a "room" is a group id, while a "channel" as an object representing the group's metadata.
-- "Alerts" are records of requests the user has made to be notified, following [this NIP](https://github.com/nostr-protocol/nips/pull/1796)
-
-`app/core/requests` contains utilities related to loading data from the nostr network. This might include feed manager utilities, loaders, or listeners.
-
-`app/core/commands` contains utilities related to publishing nostr events and uploading media to blossom servers. This also includes utilities related to sending lighting payments, authenticating with relays, or probing relay policy. Event creation should generally be split into `make` functions which build the event, and `publish` functions which publish the event using `publishThunk`.
-
-Any of these utilities can be included either in `app/components` or `routes`. Crucial to keep in mind is that nearly all global state runs through welshman's `repository` in a unidirectional way. To update state, run `publishThunk`, which immediately publishes the event to the local repository. State can be read from the repository using `deriveEventsMapped` or other utilities provided by welshman like `deriveProfile`.
-
-Thunks are designed to reduce UI latency, handling signatures and delayed sending the background. In most cases, thunk status should be displayed to the user so that they can cancel sending or address errors.
-
-Toast, modals, and sidebar dialogs are controlled in `app/util/modal` and `app/util/toast`. In both cases, component objects can be passed along with parameters, but care has to be taken that the calling component either doesn't unmount before the modal (as when one modal replaces another), or that `$state.snapshot` is appropriately called on any state runes. These components frequently run into weird svelte compiler bugs too, in which case you may have to do some silly things to cope.
-
-## Issues and Pull Requests
-
-All work by contributors should be done against an issue. If there is no issue for the work you're doing, please open one or ask the project owner to open one. All PRs should be opened against the `dev` branch (unless for hotfixes).
-
-## Communication
-
-Discussion about development is done [on Flotilla](https://app.flotilla.social/spaces/internal.coracle.social). The group is currently closed, so please let me know if you'd like access.
-
-## Project License
-
-This project is licensed under the MIT license. By contributing, you agree to waive all intellectual property rights to your contributions to this project.
-

README.md

@@ -8,15 +8,13 @@ If you would like to be interoperable with Flotilla, please check out this guide
 
 You can also optionally create an `.env` file and populate it with the following environment variables (see `.env` for examples):
 
-- `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. This is only used for build-time population of meta tags.
+- `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_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
-- `VITE_GLITCHTIP_API_KEY` - A Sentry DSN for use with glitchtip (error reporting)
-- `GLITCHTIP_AUTH_TOKEN` - A glitchtip auth token for error reporting
 
 If you're deploying a custom version of flotilla, be sure to remove the `plausible.coracle.social` script from `app.html`. This sends analytics to a server hosted by the developer.
 

android/app/build.gradle

@@ -1,19 +1,19 @@
 apply plugin: 'com.android.application'
 
 android {
-    namespace "social.flotilla"
-    compileSdk rootProject.ext.compileSdkVersion
+    namespace = "social.flotilla"
+    compileSdk = rootProject.ext.compileSdkVersion
     defaultConfig {
         applicationId "social.flotilla"
         minSdk rootProject.ext.minSdkVersion
         targetSdk rootProject.ext.targetSdkVersion
-        versionCode 24
-        versionName "1.2.3"
+        versionCode 40
+        versionName "1.6.4"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
              // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
-            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+            ignoreAssetsPattern = '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
         }
     }
     buildTypes {

android/app/capacitor.build.gradle

@@ -11,8 +11,11 @@ apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-community-safe-area')
     implementation project(':capacitor-app')
+    implementation project(':capacitor-filesystem')
     implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-preferences')
     implementation project(':capacitor-push-notifications')
+    implementation project(':capawesome-capacitor-android-dark-mode-support')
     implementation project(':capawesome-capacitor-badge')
     implementation project(':nostr-signer-capacitor-plugin')
 

android/app/src/main/AndroidManifest.xml

@@ -9,7 +9,7 @@
         android:theme="@style/AppTheme"
         android:usesCleartextTraffic="true">
         <activity
-            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation"
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation|density"
             android:name=".MainActivity"
             android:label="@string/title_activity_main"
             android:theme="@style/AppTheme.NoActionBarLaunch"

android/build.gradle

@@ -7,8 +7,8 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.8.0'
-        classpath 'com.google.gms:google-services:4.4.2'
+        classpath 'com.android.tools.build:gradle:8.13.2'
+        classpath 'com.google.gms:google-services:4.4.4'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

android/capacitor.settings.gradle

@@ -1,21 +1,30 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
-project(':capacitor-android').projectDir = new File('../node_modules/.pnpm/@capacitor+android@7.2.0_@capacitor+core@7.2.0/node_modules/@capacitor/android/capacitor')
+project(':capacitor-android').projectDir = new File('../node_modules/.pnpm/@capacitor+android@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor/android/capacitor')
 
 include ':capacitor-community-safe-area'
-project(':capacitor-community-safe-area').projectDir = new File('../node_modules/.pnpm/@capacitor-community+safe-area@7.0.0-alpha.1_@capacitor+core@7.2.0/node_modules/@capacitor-community/safe-area/android')
+project(':capacitor-community-safe-area').projectDir = new File('../node_modules/.pnpm/@capacitor-community+safe-area@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor-community/safe-area/android')
 
 include ':capacitor-app'
-project(':capacitor-app').projectDir = new File('../node_modules/.pnpm/@capacitor+app@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/app/android')
+project(':capacitor-app').projectDir = new File('../node_modules/.pnpm/@capacitor+app@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/app/android')
+
+include ':capacitor-filesystem'
+project(':capacitor-filesystem').projectDir = new File('../node_modules/.pnpm/@capacitor+filesystem@8.1.0_@capacitor+core@8.0.1/node_modules/@capacitor/filesystem/android')
 
 include ':capacitor-keyboard'
-project(':capacitor-keyboard').projectDir = new File('../node_modules/.pnpm/@capacitor+keyboard@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/keyboard/android')
+project(':capacitor-keyboard').projectDir = new File('../node_modules/.pnpm/@capacitor+keyboard@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/keyboard/android')
+
+include ':capacitor-preferences'
+project(':capacitor-preferences').projectDir = new File('../node_modules/.pnpm/@capacitor+preferences@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/preferences/android')
 
 include ':capacitor-push-notifications'
-project(':capacitor-push-notifications').projectDir = new File('../node_modules/.pnpm/@capacitor+push-notifications@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/push-notifications/android')
+project(':capacitor-push-notifications').projectDir = new File('../node_modules/.pnpm/@capacitor+push-notifications@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/push-notifications/android')
+
+include ':capawesome-capacitor-android-dark-mode-support'
+project(':capawesome-capacitor-android-dark-mode-support').projectDir = new File('../node_modules/.pnpm/@capawesome+capacitor-android-dark-mode-support@8.0.0_@capacitor+core@8.0.1/node_modules/@capawesome/capacitor-android-dark-mode-support/android')
 
 include ':capawesome-capacitor-badge'
-project(':capawesome-capacitor-badge').projectDir = new File('../node_modules/.pnpm/@capawesome+capacitor-badge@7.0.1_@capacitor+core@7.2.0/node_modules/@capawesome/capacitor-badge/android')
+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@7.2.0/node_modules/nostr-signer-capacitor-plugin/android')
+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')

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.11.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-all.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

android/gradlew

@@ -86,8 +86,7 @@ done
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
 # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
-APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
-' "$PWD" ) || exit
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
 
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
@@ -115,7 +114,7 @@ case "$( uname )" in                #(
   NONSTOP* )        nonstop=true ;;
 esac
 
-CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+CLASSPATH="\\\"\\\""
 
 
 # Determine the Java command to use to start the JVM.
@@ -206,7 +205,7 @@ fi
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
 # Collect all arguments for the java command:
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
 #     and any embedded shellness will be escaped.
 #   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
 #     treated as '${Hostname}' itself on the command line.
@@ -214,7 +213,7 @@ DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 set -- \
         "-Dorg.gradle.appname=$APP_BASE_NAME" \
         -classpath "$CLASSPATH" \
-        org.gradle.wrapper.GradleWrapperMain \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
         "$@"
 
 # Stop when "xargs" is not available.

android/gradlew.bat

@@ -70,11 +70,11 @@ goto fail
 :execute
 @rem Setup the command line
 
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+set CLASSPATH=
 
 
 @rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
 
 :end
 @rem End local scope for the variables with windows NT shell

android/variables.gradle

@@ -1,18 +1,18 @@
 ext {
-    minSdkVersion = 23
-    compileSdkVersion = 35
-    targetSdkVersion = 35
-    androidxActivityVersion = '1.9.2'
+    minSdkVersion = 24
+    compileSdkVersion = 36
+    targetSdkVersion = 36
+    androidxActivityVersion = '1.11.0'
     //https://github.com/ionic-team/capacitor/issues/7866
-    // androidxAppCompatVersion = '1.7.0'
-    androidxAppCompatVersion = '1.6.1'
-    androidxCoordinatorLayoutVersion = '1.2.0'
-    androidxCoreVersion = '1.15.0'
-    androidxFragmentVersion = '1.8.4'
-    coreSplashScreenVersion = '1.0.1'
-    androidxWebkitVersion = '1.12.1'
+    // androidxAppCompatVersion = '1.7.1'
+    androidxAppCompatVersion = '1.7.1'
+    androidxCoordinatorLayoutVersion = '1.3.0'
+    androidxCoreVersion = '1.17.0'
+    androidxFragmentVersion = '1.8.9'
+    coreSplashScreenVersion = '1.2.0'
+    androidxWebkitVersion = '1.14.0'
     junitVersion = '4.13.2'
-    androidxJunitVersion = '1.2.1'
-    androidxEspressoCoreVersion = '3.6.1'
-    cordovaAndroidVersion = '10.1.1'
+    androidxJunitVersion = '1.3.0'
+    androidxEspressoCoreVersion = '3.7.0'
+    cordovaAndroidVersion = '14.0.1'
 }

build.sh

@@ -6,10 +6,6 @@ if [ -f .env.template ]; then
   source .env.template
 fi
 
-if [ -f .env ]; then
-  source .env
-fi
-
 # Avoid overwriting env vars provided directly
 # https://stackoverflow.com/a/69127685/1467342
 eval "$temp_env"

capacitor.config.ts

@@ -1,18 +1,21 @@
-import type { CapacitorConfig } from '@capacitor/cli';
+import type {CapacitorConfig} from "@capacitor/cli"
 
 const config: CapacitorConfig = {
-  appId: 'social.flotilla',
-  appName: 'Flotilla',
-  webDir: 'build'
-  server: {
-    androidScheme: "https"
-  },
+  appId: "social.flotilla",
+  appName: "Flotilla",
+  webDir: "build",
   android: {
-    adjustMarginsForEdgeToEdge: false,
+    adjustMarginsForEdgeToEdge: true,
   },
   plugins: {
+    CapacitorHttp: {
+      enabled: true,
+    },
+    SystemBars: {
+      insetsHandling: "enable",
+    },
     SplashScreen: {
-      androidSplashResourceName: "splash"
+      androidSplashResourceName: "splash",
     },
     Keyboard: {
       style: "DARK",
@@ -20,14 +23,14 @@ const config: CapacitorConfig = {
     },
     Badge: {
       persist: true,
-      autoClear: true
+      autoClear: true,
     },
   },
-  // Use this for live reload https://capacitorjs.com/docs/guides/live-reload
-  // server: {
-  //   url: "http://192.168.1.115:1847",
-  //   cleartext: true
-  // },
-};
+  server: {
+    // Use this for live reload https://capacitorjs.com/docs/guides/live-reload
+    // url: "http://192.168.1.17:1847",
+    // cleartext: true,
+  },
+}
 
-export default config;
+export default config

ios/App/App.xcodeproj/project.pbxproj

@@ -8,6 +8,7 @@
 
 /* Begin PBXBuildFile section */
 		2FAD9763203C412B000D30F8 /* config.xml in Resources */ = {isa = PBXBuildFile; fileRef = 2FAD9762203C412B000D30F8 /* config.xml */; };
+		3478F0332E846FEB002431E0 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 3478F0322E846FEB002431E0 /* PrivacyInfo.xcprivacy */; };
 		50379B232058CBB4000EE86E /* capacitor.config.json in Resources */ = {isa = PBXBuildFile; fileRef = 50379B222058CBB4000EE86E /* capacitor.config.json */; };
 		504EC3081FED79650016851F /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 504EC3071FED79650016851F /* AppDelegate.swift */; };
 		504EC30D1FED79650016851F /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30B1FED79650016851F /* Main.storyboard */; };
@@ -21,6 +22,7 @@
 		051414282E0CC28400BE0BC8 /* Flotilla Chat.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = "Flotilla Chat.entitlements"; sourceTree = "<group>"; };
 		1F53EE54954731A2328CBC4B /* Pods-Flotilla Chat.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Flotilla Chat.release.xcconfig"; path = "Pods/Target Support Files/Pods-Flotilla Chat/Pods-Flotilla Chat.release.xcconfig"; sourceTree = "<group>"; };
 		2FAD9762203C412B000D30F8 /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = config.xml; sourceTree = "<group>"; };
+		3478F0322E846FEB002431E0 /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
 		50379B222058CBB4000EE86E /* capacitor.config.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = capacitor.config.json; sourceTree = "<group>"; };
 		504EC3041FED79650016851F /* Flotilla Chat.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "Flotilla Chat.app"; sourceTree = BUILT_PRODUCTS_DIR; };
 		504EC3071FED79650016851F /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
@@ -58,6 +60,7 @@
 		504EC2FB1FED79650016851F = {
 			isa = PBXGroup;
 			children = (
+				3478F0322E846FEB002431E0 /* PrivacyInfo.xcprivacy */,
 				051414282E0CC28400BE0BC8 /* Flotilla Chat.entitlements */,
 				504EC3061FED79650016851F /* App */,
 				504EC3051FED79650016851F /* Products */,
@@ -162,6 +165,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */,
+				3478F0332E846FEB002431E0 /* PrivacyInfo.xcprivacy in Resources */,
 				50B271D11FEDC1A000F3C39B /* public in Resources */,
 				504EC30F1FED79650016851F /* Assets.xcassets in Resources */,
 				50379B232058CBB4000EE86E /* capacitor.config.json in Resources */,
@@ -287,7 +291,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -338,7 +342,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule";
@@ -354,18 +358,19 @@
 				CODE_SIGN_ENTITLEMENTS = "Flotilla Chat.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 17;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = S26U9DYW3A;
 				INFOPLIST_FILE = App/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "Flotilla Chat";
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.2.3;
+				MARKETING_VERSION = 1.6.4;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
+				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
@@ -380,17 +385,18 @@
 				CODE_SIGN_ENTITLEMENTS = "Flotilla Chat.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 17;
+				CURRENT_PROJECT_VERSION = 30;
 				DEVELOPMENT_TEAM = S26U9DYW3A;
 				INFOPLIST_FILE = App/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "Flotilla Chat";
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.2.3;
+				MARKETING_VERSION = 1.6.4;
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
+				SUPPORTS_MAC_DESIGNED_FOR_IPHONE_IPAD = NO;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";

ios/App/Podfile

@@ -1,6 +1,6 @@
-require_relative '../../node_modules/.pnpm/@capacitor+ios@7.2.0_@capacitor+core@7.2.0/node_modules/@capacitor/ios/scripts/pods_helpers'
+require_relative '../../node_modules/.pnpm/@capacitor+ios@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor/ios/scripts/pods_helpers'
 
-platform :ios, '14.0'
+platform :ios, '15.0'
 use_frameworks!
 
 # workaround to avoid Xcode caching of Pods that requires
@@ -9,14 +9,16 @@ use_frameworks!
 install! 'cocoapods', :disable_input_output_paths => true
 
 def capacitor_pods
-  pod 'Capacitor', :path => '../../node_modules/.pnpm/@capacitor+ios@7.2.0_@capacitor+core@7.2.0/node_modules/@capacitor/ios'
-  pod 'CapacitorCordova', :path => '../../node_modules/.pnpm/@capacitor+ios@7.2.0_@capacitor+core@7.2.0/node_modules/@capacitor/ios'
-  pod 'CapacitorCommunitySafeArea', :path => '../../node_modules/.pnpm/@capacitor-community+safe-area@7.0.0-alpha.1_@capacitor+core@7.2.0/node_modules/@capacitor-community/safe-area'
-  pod 'CapacitorApp', :path => '../../node_modules/.pnpm/@capacitor+app@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/app'
-  pod 'CapacitorKeyboard', :path => '../../node_modules/.pnpm/@capacitor+keyboard@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/keyboard'
-  pod 'CapacitorPushNotifications', :path => '../../node_modules/.pnpm/@capacitor+push-notifications@7.0.1_@capacitor+core@7.2.0/node_modules/@capacitor/push-notifications'
-  pod 'CapawesomeCapacitorBadge', :path => '../../node_modules/.pnpm/@capawesome+capacitor-badge@7.0.1_@capacitor+core@7.2.0/node_modules/@capawesome/capacitor-badge'
-  pod 'NostrSignerCapacitorPlugin', :path => '../../node_modules/.pnpm/nostr-signer-capacitor-plugin@0.0.4_@capacitor+core@7.2.0/node_modules/nostr-signer-capacitor-plugin'
+  pod 'Capacitor', :path => '../../node_modules/.pnpm/@capacitor+ios@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor/ios'
+  pod 'CapacitorCordova', :path => '../../node_modules/.pnpm/@capacitor+ios@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor/ios'
+  pod 'CapacitorCommunitySafeArea', :path => '../../node_modules/.pnpm/@capacitor-community+safe-area@8.0.1_@capacitor+core@8.0.1/node_modules/@capacitor-community/safe-area'
+  pod 'CapacitorApp', :path => '../../node_modules/.pnpm/@capacitor+app@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/app'
+  pod 'CapacitorFilesystem', :path => '../../node_modules/.pnpm/@capacitor+filesystem@8.1.0_@capacitor+core@8.0.1/node_modules/@capacitor/filesystem'
+  pod 'CapacitorKeyboard', :path => '../../node_modules/.pnpm/@capacitor+keyboard@8.0.0_@capacitor+core@8.0.1/node_modules/@capacitor/keyboard'
+  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'
 end
 
 target 'Flotilla Chat' do

ios/App/PrivacyInfo.xcprivacy

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSPrivacyAccessedAPITypes</key>
+	<array>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategoryFileTimestamp</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>C617.1</string>
+			</array>
+		</dict>
+	</array>
+</dict>
+</plist>

link_deps

@@ -0,0 +1,32 @@
+#!/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.')
+  process.exit(1)
+}
+
+const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'))
+
+pkg.pnpm.overrides = pkg.pnpm.overrides || {}
+pkg.pnpm.overrides["@welshman/app"] = "link:../welshman/packages/app"
+pkg.pnpm.overrides["@welshman/content"] = "link:../welshman/packages/content"
+pkg.pnpm.overrides["@welshman/editor"] = "link:../welshman/packages/editor"
+pkg.pnpm.overrides["@welshman/feeds"] = "link:../welshman/packages/feeds"
+pkg.pnpm.overrides["@welshman/lib"] = "link:../welshman/packages/lib"
+pkg.pnpm.overrides["@welshman/net"] = "link:../welshman/packages/net"
+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["@pomade/core"] = "link:../pomade/packages/core"
+
+fs.writeFileSync('./package.json', JSON.stringify(pkg, null, 2) + '\n')
+
+execSync('pnpm i', { stdio: 'inherit' })
+
+execSync('git checkout -f pnpm-lock.yaml', { stdio: 'inherit' })
+execSync('git checkout -f package.json', { stdio: 'inherit' })

package.json

@@ -1,83 +1,86 @@
 {
   "name": "flotilla",
-  "version": "1.2.3",
+  "version": "1.6.4",
   "private": true,
   "scripts": {
     "dev": "vite dev",
     "build": "./build.sh",
-    "sourcemaps": "./build.sh && ./sourcemaps.sh",
     "release:android": "./build.sh && cap build android --androidreleasetype APK --signing-type apksigner",
     "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",
-    "format": "prettier --write 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",
     "prepare": "husky"
   },
   "devDependencies": {
     "@capacitor/assets": "^3.0.5",
-    "@eslint/js": "^9.26.0",
-    "@sentry/cli": "^2.40.0",
-    "@sveltejs/kit": "^2.5.27",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@types/eslint": "^9.6.0",
-    "autoprefixer": "^10.4.19",
+    "@eslint/js": "^9.39.2",
+    "@sveltejs/kit": "^2.50.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@types/eslint": "^9.6.1",
+    "autoprefixer": "^10.4.23",
     "classnames": "^2.5.1",
-    "eslint": "^9.0.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.45.1",
-    "globals": "^15.0.0",
-    "postcss": "^8.4.40",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.2.6",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
-    "tailwindcss": "^3.4.7",
-    "typescript": "^5.5.0",
-    "typescript-eslint": "^8.0.0",
-    "vite": "^5.4.4"
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-svelte": "^2.46.1",
+    "globals": "^15.15.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.4.1",
+    "svelte": "^5.48.0",
+    "svelte-check": "^4.3.5",
+    "tailwindcss": "^3.4.19",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^5.4.21"
   },
   "type": "module",
   "dependencies": {
-    "@capacitor-community/safe-area": "7.0.0-alpha.1",
-    "@capacitor/android": "^7.0.0",
-    "@capacitor/app": "^7.0.0",
-    "@capacitor/cli": "^7.0.0",
-    "@capacitor/core": "^7.0.1",
-    "@capacitor/ios": "^7.0.0",
-    "@capacitor/keyboard": "^7.0.0",
-    "@capacitor/push-notifications": "^7.0.1",
-    "@capawesome/capacitor-badge": "^7.0.1",
-    "@getalby/sdk": "^5.1.0",
+    "@capacitor-community/safe-area": "^8.0.1",
+    "@capacitor/android": "^8.0.1",
+    "@capacitor/app": "^8.0.0",
+    "@capacitor/cli": "^8.0.1",
+    "@capacitor/core": "^8.0.1",
+    "@capacitor/filesystem": "^8.1.0",
+    "@capacitor/ios": "^8.0.1",
+    "@capacitor/keyboard": "^8.0.0",
+    "@capacitor/preferences": "^8.0.0",
+    "@capacitor/push-notifications": "^8.0.0",
+    "@capawesome/capacitor-android-dark-mode-support": "^8.0.0",
+    "@capawesome/capacitor-badge": "^8.0.0",
+    "@getalby/lightning-tools": "^6.1.0",
+    "@getalby/sdk": "^5.1.2",
+    "@noble/curves": "^1.9.7",
+    "@pomade/core": "^0.0.12",
     "@poppanator/sveltekit-svg": "^4.2.1",
-    "@sentry/browser": "^8.35.0",
-    "@sveltejs/adapter-static": "^3.0.4",
-    "@tiptap/core": "^2.12.0",
-    "@types/qrcode": "^1.5.5",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@tiptap/core": "^2.27.2",
+    "@types/qrcode": "^1.5.6",
     "@types/throttle-debounce": "^5.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",
-    "@vite-pwa/sveltekit": "^0.6.6",
-    "@welshman/app": "^0.4.3",
-    "@welshman/content": "^0.4.3",
-    "@welshman/editor": "^0.4.3",
-    "@welshman/feeds": "^0.4.3",
-    "@welshman/lib": "^0.4.3",
-    "@welshman/net": "^0.4.3",
-    "@welshman/relay": "^0.4.3",
-    "@welshman/router": "^0.4.3",
-    "@welshman/signer": "^0.4.3",
-    "@welshman/store": "^0.4.3",
-    "@welshman/util": "^0.4.3",
+    "@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",
-    "daisyui": "^4.12.10",
-    "date-picker-svelte": "^2.13.0",
-    "dotenv": "^16.4.5",
-    "emoji-picker-element": "^1.22.8",
-    "fuse.js": "^7.0.0",
-    "husky": "^9.1.6",
-    "idb": "^8.0.0",
+    "daisyui": "^4.12.24",
+    "date-picker-svelte": "^2.17.0",
+    "dotenv": "^16.6.1",
+    "emoji-picker-element": "^1.28.1",
+    "fuse.js": "^7.1.0",
+    "husky": "^9.1.7",
+    "idb": "^8.0.3",
     "nostr-signer-capacitor-plugin": "^0.0.4",
-    "nostr-tools": "^2.14.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "nostr-tools": "^2.19.4",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.4",
     "throttle-debounce": "^5.0.2",
@@ -85,11 +88,13 @@
   },
   "pnpm": {
     "ignoredBuiltDependencies": [
-      "@sentry/cli",
       "esbuild"
     ],
     "onlyBuiltDependencies": [
       "sharp"
-    ]
+    ],
+    "overrides": {
+      "sharp": "0.35.0-rc.0"
+    }
   }
 }

sourcemaps.sh

@@ -1,15 +0,0 @@
-#!/bin/bash
-
-hash=$(find build -type f -print0 | sort -z | xargs -0 sha1sum | sha1sum | awk '{print $1}')
-
-sentry-cli \
-  --url https://glitchtip.coracle.social \
-  --auth-token $GLITCHTIP_AUTH_TOKEN \
-  --api-key $VITE_GLITCHTIP_API_KEY \
-  sourcemaps \
-  --org coracle \
-  --project flotilla \
-  --release $hash \
-  upload \
-  --url-prefix /_app/immutable/ \
-  build/_app/immutable

src/app.css

@@ -62,6 +62,12 @@
   --primary-content: oklch(var(--pc));
   --secondary: oklch(var(--s));
   --secondary-content: oklch(var(--sc));
+  --neutral: oklch(var(--n));
+  --neutral-content: oklch(var(--nc));
+}
+
+.mobile [data-tip]::before {
+  display: none !important;
 }
 
 /* safe area insets */
@@ -96,19 +102,19 @@
   }
 
   .mt-sai {
-    padding-top: var(--sait);
+    margin-top: var(--sait);
   }
 
   .mr-sai {
-    padding-right: var(--sair);
+    margin-right: var(--sair);
   }
 
   .mb-sai {
-    padding-bottom: var(--saib);
+    margin-bottom: var(--saib);
   }
 
   .ml-sai {
-    padding-left: var(--sail);
+    margin-left: var(--sail);
   }
 
   .mx-sai {
@@ -215,12 +221,6 @@
   @apply ellipsize;
 }
 
-@media (max-width: 639px) {
-  [data-tip]::before {
-    display: none;
-  }
-}
-
 .content-padding-x {
   @apply px-4 sm:px-8 md:px-12;
 }
@@ -274,12 +274,12 @@
 .input-editor,
 .chat-editor,
 .note-editor {
-  @apply -m-1 min-h-12 p-1;
+  @apply -m-1 min-h-12 p-1 text-sm;
 }
 
 .tiptap {
-  --tiptap-object-bg: var(--base-100);
-  --tiptap-object-fg: var(--base-content);
+  --tiptap-object-bg: var(--neutral);
+  --tiptap-object-fg: var(--neutral-content);
   --tiptap-active-bg: var(--primary);
   --tiptap-active-fg: var(--primary-content);
 }
@@ -362,6 +362,12 @@
   @apply !h-full !w-full !rounded-lg !border-none !bg-inherit !px-4 !text-inherit;
 }
 
+/* tippy popover */
+
+.tippy-box {
+  @apply rounded-box shadow-xl;
+}
+
 /* emoji picker */
 
 emoji-picker {
@@ -396,12 +402,22 @@ progress[value]::-webkit-progress-value {
   @apply md:bottom-sai bottom-[calc(var(--saib)+3.5rem)];
 }
 
+/* Keyboard open state adjustments */
+
+body.keyboard-open .cb {
+  @apply bottom-sai;
+}
+
+body.keyboard-open .hide-on-keyboard {
+  display: none;
+}
+
 /* chat view */
 
 .chat__compose {
-  @apply cb cw fixed;
+  @apply cb cw fixed z-compose;
 }
 
 .chat__scroll-down {
-  @apply fixed bottom-28 right-4 md:bottom-16;
+  @apply fixed bottom-28 right-4 z-feature md:bottom-16;
 }

src/app.html

@@ -26,7 +26,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png" />
     %sveltekit.head%
   </head>
-  <body data-sveltekit-preload-data="hover">
+  <body data-sveltekit-preload-data="hover" data-sveltekit-preload-code="eager">
     <div style="display: contents">%sveltekit.body%</div>
     <script
       defer

src/app/components/AlertAdd.svelte

@@ -1,273 +0,0 @@
-<script lang="ts">
-  import {onMount} from "svelte"
-  import {preventDefault} from "@lib/html"
-  import {decrypt} from "@welshman/signer"
-  import {randomInt, parseJson, fromPairs, displayList, TIMEZONE, identity} from "@welshman/lib"
-  import {
-    displayRelayUrl,
-    getTagValue,
-    getAddress,
-    THREAD,
-    MESSAGE,
-    EVENT_TIME,
-    COMMENT,
-  } from "@welshman/util"
-  import type {Filter} from "@welshman/util"
-  import {makeIntersectionFeed, makeRelayFeed, feedFromFilters} from "@welshman/feeds"
-  import {pubkey, signer, getThunkError} from "@welshman/app"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import FieldInline from "@lib/components/FieldInline.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {
-    alerts,
-    getMembershipUrls,
-    userMembership,
-    NOTIFIER_PUBKEY,
-    NOTIFIER_RELAY,
-  } from "@app/core/state"
-  import {loadAlertStatuses, requestRelayClaim} from "@app/core/requests"
-  import {publishAlert, attemptAuth} from "@app/core/commands"
-  import type {AlertParams} from "@app/core/commands"
-  import {platform, platformName, canSendPushNotifications, getPushInfo} from "@app/util/push"
-  import {pushToast} from "@app/util/toast"
-
-  type Props = {
-    url?: string
-    channel?: string
-    notifyChat?: boolean
-    notifyThreads?: boolean
-    notifyCalendar?: boolean
-    hideSpaceField?: boolean
-  }
-
-  let {
-    url = "",
-    channel = "email",
-    notifyChat = true,
-    notifyThreads = true,
-    notifyCalendar = true,
-    hideSpaceField = false,
-  }: Props = $props()
-
-  const timezoneOffset = parseInt(TIMEZONE.slice(3)) / 100
-  const minute = randomInt(0, 59)
-  const hour = (17 - timezoneOffset) % 24
-  const WEEKLY = `0 ${minute} ${hour} * * 1`
-  const DAILY = `0 ${minute} ${hour} * * *`
-
-  let loading = $state(false)
-  let cron = $state(WEEKLY)
-  let email = $state($alerts.map(a => getTagValue("email", a.tags)).filter(identity)[0] || "")
-
-  const back = () => history.back()
-
-  const submit = async () => {
-    if (channel === "email" && !email.includes("@")) {
-      return pushToast({
-        theme: "error",
-        message: "Please provide an email address",
-      })
-    }
-
-    if (!url) {
-      return pushToast({
-        theme: "error",
-        message: "Please select a space",
-      })
-    }
-
-    if (!notifyThreads && !notifyCalendar && !notifyChat) {
-      return pushToast({
-        theme: "error",
-        message: "Please select something to be notified about",
-      })
-    }
-
-    const filters: Filter[] = []
-    const display: string[] = []
-
-    if (notifyThreads) {
-      display.push("threads")
-      filters.push({kinds: [THREAD]})
-      filters.push({kinds: [COMMENT], "#k": [String(THREAD)]})
-    }
-
-    if (notifyCalendar) {
-      display.push("calendar events")
-      filters.push({kinds: [EVENT_TIME]})
-      filters.push({kinds: [COMMENT], "#k": [String(EVENT_TIME)]})
-    }
-
-    if (notifyChat) {
-      display.push("chat")
-      filters.push({kinds: [MESSAGE]})
-    }
-
-    loading = true
-
-    try {
-      const claim = url ? await requestRelayClaim(url) : undefined
-      const claims = claim ? {[url]: claim} : {}
-      const feed = makeIntersectionFeed(feedFromFilters(filters), makeRelayFeed(url))
-      const description = `for ${displayList(display)} on ${displayRelayUrl(url)}`
-      const params: AlertParams = {feed, claims, description}
-
-      if (channel === "email") {
-        const cadence = cron?.endsWith("1") ? "Weekly" : "Daily"
-
-        params.description = `${cadence} alert ${description}, sent via email.`
-        params.email = {
-          cron,
-          email,
-          handler: [
-            "31990:97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322:1737058597050",
-            "wss://relay.nostr.band/",
-            "web",
-          ],
-        }
-      } else {
-        try {
-          // @ts-ignore
-          params[platform] = await getPushInfo()
-          params.description = `${platformName} push notification ${description}.`
-        } catch (e: any) {
-          return pushToast({
-            theme: "error",
-            message: String(e),
-          })
-        }
-      }
-
-      // If we don't do this we'll get an event rejection
-      await attemptAuth(NOTIFIER_RELAY)
-
-      const thunk = await publishAlert(params)
-      const error = await getThunkError(thunk)
-
-      if (error) {
-        return pushToast({
-          theme: "error",
-          message: `Failed to send your alert to the notification server (${error}).`,
-        })
-      }
-
-      // Fetch our new status to make sure it's active
-      const address = getAddress(thunk.event)
-      const statusEvents = await loadAlertStatuses($pubkey!)
-      const statusEvent = statusEvents.find(event => getTagValue("d", event.tags) === address)
-      const statusTags = statusEvent
-        ? parseJson(await decrypt(signer.get(), NOTIFIER_PUBKEY, statusEvent.content))
-        : []
-      const {status = "error", message = "Your alert was not activated"}: Record<string, string> =
-        fromPairs(statusTags)
-
-      if (status === "error") {
-        return pushToast({theme: "error", message})
-      }
-
-      pushToast({message: "Your alert has been successfully created!"})
-      back()
-    } finally {
-      loading = false
-    }
-  }
-
-  onMount(() => {
-    if (!canSendPushNotifications()) {
-      channel = "email"
-    }
-  })
-</script>
-
-<form class="column gap-4" onsubmit={preventDefault(submit)}>
-  <ModalHeader>
-    {#snippet title()}
-      Add an Alert
-    {/snippet}
-  </ModalHeader>
-  {#if canSendPushNotifications()}
-    <FieldInline>
-      {#snippet label()}
-        <p>Alert Type*</p>
-      {/snippet}
-      {#snippet input()}
-        <select bind:value={channel} class="select select-bordered">
-          <option value="email">Email Digest</option>
-          <option value="push">Push Notification</option>
-        </select>
-      {/snippet}
-    </FieldInline>
-  {/if}
-  {#if channel === "email"}
-    <FieldInline>
-      {#snippet label()}
-        <p>Email Address*</p>
-      {/snippet}
-      {#snippet input()}
-        <label class="input input-bordered flex w-full items-center gap-2">
-          <input placeholder="email@example.com" bind:value={email} />
-        </label>
-      {/snippet}
-    </FieldInline>
-    <FieldInline>
-      {#snippet label()}
-        <p>Frequency*</p>
-      {/snippet}
-      {#snippet input()}
-        <select bind:value={cron} class="select select-bordered">
-          <option value={WEEKLY}>Weekly</option>
-          <option value={DAILY}>Daily</option>
-        </select>
-      {/snippet}
-    </FieldInline>
-  {/if}
-  {#if !hideSpaceField}
-    <FieldInline>
-      {#snippet label()}
-        <p>Space*</p>
-      {/snippet}
-      {#snippet input()}
-        <select bind:value={url} class="select select-bordered">
-          <option value="" disabled selected>Choose a space URL</option>
-          {#each getMembershipUrls($userMembership) as url (url)}
-            <option value={url}>{displayRelayUrl(url)}</option>
-          {/each}
-        </select>
-      {/snippet}
-    </FieldInline>
-  {/if}
-  <FieldInline>
-    {#snippet label()}
-      <p>Notifications*</p>
-    {/snippet}
-    {#snippet input()}
-      <div class="flex items-center justify-end gap-4">
-        <span class="flex gap-3">
-          <input type="checkbox" class="checkbox" bind:checked={notifyThreads} />
-          Threads
-        </span>
-        <span class="flex gap-3">
-          <input type="checkbox" class="checkbox" bind:checked={notifyCalendar} />
-          Calendar
-        </span>
-        <span class="flex gap-3">
-          <input type="checkbox" class="checkbox" bind:checked={notifyChat} />
-          Chat
-        </span>
-      </div>
-    {/snippet}
-  </FieldInline>
-  <ModalFooter>
-    <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
-      Go back
-    </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
-      <Spinner {loading}>Confirm</Spinner>
-      <Icon icon="alt-arrow-right" />
-    </Button>
-  </ModalFooter>
-</form>

src/app/components/AlertDelete.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import Confirm from "@lib/components/Confirm.svelte"
-  import type {Alert} from "@app/core/state"
-  import {NOTIFIER_RELAY, NOTIFIER_PUBKEY} from "@app/core/state"
-  import {publishDelete} from "@app/core/commands"
-  import {pushToast} from "@app/util/toast"
-
-  type Props = {
-    alert: Alert
-  }
-
-  const {alert}: Props = $props()
-
-  const confirm = () => {
-    const relays = [NOTIFIER_RELAY]
-    const tags = [["p", NOTIFIER_PUBKEY]]
-
-    publishDelete({event: alert.event, relays, tags, protect: false})
-    pushToast({message: "Your alert has been deleted!"})
-    history.back()
-  }
-</script>
-
-<Confirm {confirm} message="You'll no longer receive messages for this alert." />

src/app/components/AlertItem.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">
-  import {parseJson} from "@welshman/lib"
-  import {displayFeeds} from "@welshman/feeds"
-  import {getAddress, getTagValue, getTagValues} from "@welshman/util"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import AlertDelete from "@app/components/AlertDelete.svelte"
-  import type {Alert} from "@app/core/state"
-  import {deriveAlertStatus} from "@app/core/state"
-  import {pushModal} from "@app/util/modal"
-
-  type Props = {
-    alert: Alert
-  }
-
-  const {alert}: Props = $props()
-
-  const status = deriveAlertStatus(getAddress(alert.event))
-  const cron = $derived(getTagValue("cron", alert.tags))
-  const channel = $derived(getTagValue("channel", alert.tags))
-  const feeds = $derived(getTagValues("feed", alert.tags))
-  const description = $derived(
-    getTagValue("description", alert.tags) ||
-      [
-        `${cron?.endsWith("1") ? "Weekly" : "Daily"} alert for events`,
-        displayFeeds(feeds.map(parseJson)),
-        `sent via ${channel}.`,
-      ].join(" "),
-  )
-
-  const startDelete = () => pushModal(AlertDelete, {alert})
-</script>
-
-<div class="flex items-start justify-between gap-4">
-  <div class="flex items-start gap-4">
-    <Button class="py-1" onclick={startDelete}>
-      <Icon icon="trash-bin-2" />
-    </Button>
-    <div class="flex-inline gap-1">{description}</div>
-  </div>
-  {#if $status}
-    {@const statusText = getTagValue("status", $status.tags) || "error"}
-    {#if statusText === "ok"}
-      <span
-        class="tooltip tooltip-left cursor-pointer rounded-full border border-solid border-base-content px-3 py-1 text-sm"
-        data-tip={getTagValue("message", $status.tags)}>
-        Active
-      </span>
-    {:else if statusText === "pending"}
-      <span
-        class="tooltip tooltip-left cursor-pointer rounded-full border border-solid border-base-content border-yellow-500 px-3 py-1 text-sm text-yellow-500"
-        data-tip={getTagValue("message", $status.tags)}>
-        Pending
-      </span>
-    {:else}
-      <span
-        class="tooltip tooltip-left cursor-pointer rounded-full border border-solid border-error px-3 py-1 text-sm text-error"
-        data-tip={getTagValue("message", $status.tags)}>
-        {statusText.replace("-", " ").replace(/^(.)/, x => x.toUpperCase())}
-      </span>
-    {/if}
-  {:else}
-    <span
-      class="tooltip tooltip-left cursor-pointer rounded-full border border-solid border-error px-3 py-1 text-sm text-error"
-      data-tip="The notification server did not respond to your request.">
-      Inactive
-    </span>
-  {/if}
-</div>

src/app/components/Alerts.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-  import {getTagValue} from "@welshman/util"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import AlertAdd from "@app/components/AlertAdd.svelte"
-  import AlertItem from "@app/components/AlertItem.svelte"
-  import {pushModal} from "@app/util/modal"
-  import {alerts} from "@app/core/state"
-
-  type Props = {
-    url?: string
-    channel?: string
-    hideSpaceField?: boolean
-  }
-
-  const {url = "", channel = "push", hideSpaceField = false}: Props = $props()
-
-  const startAlert = () => pushModal(AlertAdd, {url, channel, hideSpaceField})
-
-  const filteredAlerts = $derived(
-    url ? $alerts.filter(a => getTagValue("feed", a.tags)?.includes(url)) : $alerts,
-  )
-</script>
-
-<div class="card2 bg-alt flex flex-col gap-6 shadow-xl">
-  <div class="flex items-center justify-between">
-    <strong class="flex items-center gap-3">
-      <Icon icon="inbox" />
-      Alerts
-    </strong>
-    <Button class="btn btn-primary btn-sm" onclick={startAlert}>
-      <Icon icon="add-circle" />
-      Add Alert
-    </Button>
-  </div>
-  <div class="col-4">
-    {#each filteredAlerts as alert (alert.event.id)}
-      <AlertItem {alert} />
-    {:else}
-      <p class="text-center opacity-75 py-12">Nothing here yet!</p>
-    {/each}
-  </div>
-</div>

src/app/components/AppContainer.svelte

@@ -2,35 +2,17 @@
   import type {Snippet} from "svelte"
   import {page} from "$app/stores"
   import {pubkey} from "@welshman/app"
+  import Dialog from "@lib/components/Dialog.svelte"
   import Landing from "@app/components/Landing.svelte"
   import Toast from "@app/components/Toast.svelte"
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
-  import EmailConfirm from "@app/components/EmailConfirm.svelte"
-  import PasswordReset from "@app/components/PasswordReset.svelte"
-  import {BURROW_URL} from "@app/core/state"
-  import {modals, pushModal} from "@app/util/modal"
+  import {modals} from "@app/util/modal"
 
   interface Props {
     children: Snippet
   }
 
   const {children}: Props = $props()
-
-  if (BURROW_URL && !$pubkey) {
-    if ($page.url.pathname === "/confirm-email") {
-      pushModal(EmailConfirm, {
-        email: $page.url.searchParams.get("email"),
-        confirm_token: $page.url.searchParams.get("confirm_token"),
-      })
-    }
-
-    if ($page.url.pathname === "/reset-password") {
-      pushModal(PasswordReset, {
-        email: $page.url.searchParams.get("email"),
-        reset_token: $page.url.searchParams.get("reset_token"),
-      })
-    }
-  }
 </script>
 
 <div class="flex h-screen overflow-hidden">
@@ -39,7 +21,7 @@
       {@render children?.()}
     </PrimaryNav>
   {:else if !$modals[$page.url.hash.slice(1)]}
-    <Landing />
+    <Dialog children={{component: Landing, props: {}}} />
   {/if}
 </div>
 <Toast />

src/app/components/BunkerUrl.svelte

@@ -3,6 +3,8 @@
   import Scanner from "@lib/components/Scanner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
+  import CpuBolt from "@assets/icons/cpu-bolt.svg?dataurl"
+  import QrCode from "@assets/icons/qr-code.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import InfoBunker from "@app/components/InfoBunker.svelte"
   import type {Nip46Controller} from "@app/util/nip46"
@@ -33,10 +35,10 @@
   {/snippet}
   {#snippet input()}
     <label class="input input-bordered flex w-full items-center gap-2">
-      <Icon icon="cpu" />
+      <Icon icon={CpuBolt} />
       <input disabled={$loading} bind:value={$bunker} class="grow" placeholder="bunker://" />
       <Button onclick={toggleScanner}>
-        <Icon icon="qr-code" />
+        <Icon icon={QrCode} />
       </Button>
     </label>
   {/snippet}

src/app/components/CalendarEventActions.svelte

@@ -1,31 +1,34 @@
 <script lang="ts">
   import type {TrustedEvent, EventContent} from "@welshman/util"
+  import {getTagValue, getAddress} from "@welshman/util"
   import {pubkey} from "@welshman/app"
+  import Pen2 from "@assets/icons/pen-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Link from "@lib/components/Link.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
   import EventActivity from "@app/components/EventActivity.svelte"
   import EventActions from "@app/components/EventActions.svelte"
   import CalendarEventEdit from "@app/components/CalendarEventEdit.svelte"
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
-  import {makeCalendarPath} from "@app/util/routes"
+  import {makeCalendarPath, makeSpacePath} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
 
-  const {
-    url,
-    event,
-    showActivity = false,
-  }: {
+  type Props = {
     url: string
     event: TrustedEvent
+    showRoom?: boolean
     showActivity?: boolean
-  } = $props()
+  }
 
+  const {url, event, showRoom, showActivity}: Props = $props()
+
+  const h = getTagValue("h", event.tags)
+  const path = makeCalendarPath(url, getAddress(event))
   const shouldProtect = canEnforceNip70(url)
 
-  const path = makeCalendarPath(url, event.id)
-
   const editEvent = () => pushModal(CalendarEventEdit, {url, event})
 
   const deleteReaction = async (event: TrustedEvent) =>
@@ -35,24 +38,27 @@
     publishReaction({...template, event, relays: [url], protect: await shouldProtect})
 </script>
 
-<div class="flex flex-wrap items-center justify-between gap-2">
-  <div class="flex flex-grow flex-wrap justify-end gap-2">
-    <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
-    <ThunkStatusOrDeleted {event} />
-    {#if showActivity}
-      <EventActivity {url} {path} {event} />
-    {/if}
-    <EventActions {url} {event} noun="Event">
-      {#snippet customActions()}
-        {#if event.pubkey === $pubkey}
-          <li>
-            <Button onclick={editEvent}>
-              <Icon size={4} icon="pen" />
-              Edit Event
-            </Button>
-          </li>
-        {/if}
-      {/snippet}
-    </EventActions>
-  </div>
+<div class="flex flex-grow flex-wrap justify-end gap-2">
+  {#if h && showRoom}
+    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
+      Posted in #<RoomName {h} {url} />
+    </Link>
+  {/if}
+  <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
+  <ThunkStatusOrDeleted {event} />
+  {#if showActivity}
+    <EventActivity {url} {path} {event} />
+  {/if}
+  <EventActions {url} {event} noun="Event">
+    {#snippet customActions()}
+      {#if event.pubkey === $pubkey}
+        <li>
+          <Button onclick={editEvent}>
+            <Icon size={4} icon={Pen2} />
+            Edit Event
+          </Button>
+        </li>
+      {/if}
+    {/snippet}
+  </EventActions>
 </div>

src/app/components/CalendarEventCreate.svelte

@@ -1,23 +1,22 @@
 <script lang="ts">
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import CalendarEventForm from "@app/components/CalendarEventForm.svelte"
 
   type Props = {
     url: string
+    h?: string
   }
 
-  const {url}: Props = $props()
+  const {url, h}: Props = $props()
 </script>
 
-<CalendarEventForm {url}>
+<CalendarEventForm {url} {h}>
   {#snippet header()}
     <ModalHeader>
-      {#snippet title()}
-        <div>Create an Event</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Invite other group members to events online or in real life.</div>
-      {/snippet}
+      <ModalTitle>Create an Event</ModalTitle>
+      <ModalSubtitle>Invite other group members to events online or in real life.</ModalSubtitle>
     </ModalHeader>
   {/snippet}
 </CalendarEventForm>

src/app/components/CalendarEventDate.svelte

@@ -8,13 +8,16 @@
 
   const {event}: Props = $props()
   const meta = $derived(fromPairs(event.tags) as Record<string, string>)
-  const startDate = $derived(secondsToDate(parseInt(meta.start)))
+  const start = $derived(parseInt(meta.start))
 </script>
 
-<div
-  class="hidden h-32 w-32 min-w-32 flex-col items-center justify-center gap-1 rounded-box bg-base-300 p-2 sm:flex">
-  <strong>{Intl.DateTimeFormat(LOCALE, {month: "short"}).format(startDate)}</strong>
-  <span class="text-4xl">{Intl.DateTimeFormat(LOCALE, {day: "numeric"}).format(startDate)}</span>
-  <span class="text-xs opacity-75"
-    >{Intl.DateTimeFormat(LOCALE, {weekday: "long"}).format(startDate)}</span>
-</div>
+{#if !isNaN(start)}
+  {@const startDate = secondsToDate(start)}
+  <div
+    class="hidden h-32 w-32 min-w-32 flex-col items-center justify-center gap-1 rounded-box bg-base-300 p-2 sm:flex">
+    <strong>{Intl.DateTimeFormat(LOCALE, {month: "short"}).format(startDate)}</strong>
+    <span class="text-4xl">{Intl.DateTimeFormat(LOCALE, {day: "numeric"}).format(startDate)}</span>
+    <span class="text-xs opacity-75"
+      >{Intl.DateTimeFormat(LOCALE, {weekday: "long"}).format(startDate)}</span>
+  </div>
+{/if}

src/app/components/CalendarEventEdit.svelte

@@ -2,6 +2,8 @@
   import type {TrustedEvent} from "@welshman/util"
   import {getTagValue} from "@welshman/util"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import CalendarEventForm from "@app/components/CalendarEventForm.svelte"
 
   type Props = {
@@ -24,12 +26,8 @@
 <CalendarEventForm {url} {initialValues}>
   {#snippet header()}
     <ModalHeader>
-      {#snippet title()}
-        <div>Edit this Event</div>
-      {/snippet}
-      {#snippet info()}
-        <div>Invite other group members to events online or in real life.</div>
-      {/snippet}
+      <ModalTitle>Edit this Event</ModalTitle>
+      <ModalSubtitle>Invite other group members to events online or in real life.</ModalSubtitle>
     </ModalHeader>
   {/snippet}
 </CalendarEventForm>

src/app/components/CalendarEventForm.svelte

@@ -6,11 +6,16 @@
   import {publishThunk} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import {daysBetween} from "@lib/util"
+  import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
+  import MapPoint from "@assets/icons/map-point.svg?dataurl"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import DateTimeInput from "@lib/components/DateTimeInput.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {PROTECTED} from "@app/core/state"
@@ -20,6 +25,7 @@
 
   type Props = {
     url: string
+    h?: string
     header: Snippet
     initialValues?: {
       d: string
@@ -31,7 +37,7 @@
     }
   }
 
-  const {url, header, initialValues}: Props = $props()
+  const {url, h, header, initialValues}: Props = $props()
 
   const shouldProtect = canEnforceNip70(url)
 
@@ -81,6 +87,10 @@
       tags.push(PROTECTED)
     }
 
+    if (h) {
+      tags.push(["h", h])
+    }
+
     const event = makeEvent(EVENT_TIME, {content, tags})
 
     pushToast({message: "Your event has been saved!"})
@@ -106,71 +116,74 @@
   })
 </script>
 
-<form novalidate class="column gap-4" onsubmit={preventDefault(submit)}>
-  {@render header()}
-  <Field>
-    {#snippet label()}
-      <p>Title*</p>
-    {/snippet}
-    {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <input bind:value={title} class="grow" type="text" />
-      </label>
-    {/snippet}
-  </Field>
-  <Field>
-    {#snippet label()}
-      <p>Summary</p>
-    {/snippet}
-    {#snippet input()}
-      <div class="relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100">
-        <div class="input-editor flex-grow overflow-hidden">
-          <EditorContent {editor} />
+<Modal tag="form" novalidate onsubmit={preventDefault(submit)}>
+  <ModalBody>
+    {@render header()}
+    <Field>
+      {#snippet label()}
+        <p>Title*</p>
+      {/snippet}
+      {#snippet input()}
+        <label class="input input-bordered flex w-full items-center gap-2">
+          <input bind:value={title} class="grow" type="text" />
+        </label>
+      {/snippet}
+    </Field>
+    <Field>
+      {#snippet label()}
+        <p>Summary</p>
+      {/snippet}
+      {#snippet input()}
+        <div
+          class="relative z-feature flex gap-2 border-t border-solid border-base-100 bg-base-100">
+          <div class="input-editor flex-grow overflow-hidden">
+            <EditorContent {editor} />
+          </div>
+          <Button data-tip="Add an image" class="center btn tooltip" onclick={selectFiles}>
+            {#if $uploading}
+              <span class="loading loading-spinner loading-xs"></span>
+            {:else}
+              <Icon icon={GallerySend} />
+            {/if}
+          </Button>
         </div>
-        <Button data-tip="Add an image" class="center btn tooltip" onclick={selectFiles}>
-          {#if $uploading}
-            <span class="loading loading-spinner loading-xs"></span>
-          {:else}
-            <Icon icon="gallery-send" />
-          {/if}
-        </Button>
-      </div>
-    {/snippet}
-  </Field>
-  <Field>
-    {#snippet label()}
-      Start*
-    {/snippet}
-    {#snippet input()}
-      <DateTimeInput bind:value={start} />
-    {/snippet}
-  </Field>
-  <Field>
-    {#snippet label()}
-      End*
-    {/snippet}
-    {#snippet input()}
-      <DateTimeInput bind:value={end} />
-    {/snippet}
-  </Field>
-  <Field>
-    {#snippet label()}
-      <p>Location (optional)</p>
-    {/snippet}
-    {#snippet input()}
-      <label class="input input-bordered flex w-full items-center gap-2">
-        <Icon icon="map-point" />
-        <input bind:value={location} class="grow" type="text" />
-      </label>
-    {/snippet}
-  </Field>
+      {/snippet}
+    </Field>
+    <Field>
+      {#snippet label()}
+        Start*
+      {/snippet}
+      {#snippet input()}
+        <DateTimeInput bind:value={start} />
+      {/snippet}
+    </Field>
+    <Field>
+      {#snippet label()}
+        End*
+      {/snippet}
+      {#snippet input()}
+        <DateTimeInput bind:value={end} />
+      {/snippet}
+    </Field>
+    <Field>
+      {#snippet label()}
+        <p>Location (optional)</p>
+      {/snippet}
+      {#snippet input()}
+        <label class="input input-bordered flex w-full items-center gap-2">
+          <Icon icon={MapPoint} />
+          <input bind:value={location} class="grow" type="text" />
+        </label>
+      {/snippet}
+    </Field>
+  </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={$uploading}>
       <Spinner loading={$uploading}>Save Event</Spinner>
     </Button>
   </ModalFooter>
-</form>
+</Modal>

src/app/components/CalendarEventHeader.svelte

@@ -6,6 +6,7 @@
     formatTimestampAsTime,
   } from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
+  import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
 
   type Props = {
@@ -16,18 +17,20 @@
   const meta = $derived(fromPairs(event.tags) as Record<string, string>)
   const start = $derived(parseInt(meta.start))
   const end = $derived(parseInt(meta.end))
-  const startDateDisplay = $derived(formatTimestampAsDate(start))
-  const endDateDisplay = $derived(formatTimestampAsDate(end))
-  const isSingleDay = $derived(startDateDisplay === endDateDisplay)
 </script>
 
 <div class="flex flex-grow flex-wrap justify-between gap-2">
   <p class="text-xl">{meta.title || meta.name}</p>
-  <div class="flex items-center gap-2 text-sm">
-    <Icon icon="clock-circle" size={4} />
-    <span class="sm:hidden">{formatTimestampAsDate(start)}</span>
-    {formatTimestampAsTime(start)} — {isSingleDay
-      ? formatTimestampAsTime(end)
-      : formatTimestamp(end)}
-  </div>
+  {#if !isNaN(start) && !isNaN(end)}
+    {@const startDateDisplay = formatTimestampAsDate(start)}
+    {@const endDateDisplay = formatTimestampAsDate(end)}
+    {@const isSingleDay = startDateDisplay === endDateDisplay}
+    <div class="flex items-center gap-2 text-sm">
+      <Icon icon={ClockCircle} size={4} />
+      <span class="hidden sm:block">{formatTimestampAsDate(start)}</span>
+      {formatTimestampAsTime(start)} — {isSingleDay
+        ? formatTimestampAsTime(end)
+        : formatTimestamp(end)}
+    </div>
+  {/if}
 </div>

src/app/components/CalendarEventItem.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import type {TrustedEvent} from "@welshman/util"
+  import {getTagValue, getAddress} from "@welshman/util"
   import Link from "@lib/components/Link.svelte"
   import CalendarEventActions from "@app/components/CalendarEventActions.svelte"
   import CalendarEventHeader from "@app/components/CalendarEventHeader.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
+  import RoomLink from "@app/components/RoomLink.svelte"
   import {makeCalendarPath} from "@app/util/routes"
 
   type Props = {
@@ -12,13 +14,20 @@
   }
 
   const {url, event}: Props = $props()
+
+  const h = getTagValue("h", event.tags)
 </script>
 
-<Link class="col-3 card2 bg-alt w-full cursor-pointer" href={makeCalendarPath(url, event.id)}>
+<Link
+  class="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">
     <span class="whitespace-nowrap py-1 text-sm opacity-75">
       Posted by <ProfileLink pubkey={event.pubkey} {url} />
+      {#if h}
+        in <RoomLink {url} {h} />
+      {/if}
     </span>
     <CalendarEventActions showActivity {url} {event} />
   </div>

src/app/components/CalendarEventMeta.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import {fromPairs} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
+  import UserCircle from "@assets/icons/user-circle.svg?dataurl"
+  import MapPoint from "@assets/icons/map-point.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
 
@@ -15,12 +17,12 @@
 
 <div class="flex min-w-0 flex-col gap-1 text-sm opacity-75">
   <span class="flex items-center gap-1">
-    <Icon icon="user-circle" size={4} />
+    <Icon icon={UserCircle} size={4} />
     Posted by <ProfileLink pubkey={event.pubkey} {url} />
   </span>
   {#if meta.location}
     <span class="flex items-start gap-1">
-      <Icon icon="map-point" class="mt-[2px]" size={4} />
+      <Icon icon={MapPoint} class="mt-[2px]" size={4} />
       <span class="break-words">{meta.location}</span>
     </span>
   {/if}

src/app/components/ChannelCompose.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import {writable} from "svelte/store"
-  import type {EventContent} from "@welshman/util"
-  import {isMobile, preventDefault} from "@lib/html"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import EditorContent from "@app/editor/EditorContent.svelte"
-  import {makeEditor} from "@app/editor"
-
-  type Props = {
-    url?: string
-    onSubmit: (event: EventContent) => void
-  }
-
-  const {onSubmit, url}: Props = $props()
-
-  const autofocus = !isMobile
-
-  const uploading = writable(false)
-
-  export const focus = () => editor.then(ed => ed.chain().focus().run())
-
-  const uploadFiles = () => editor.then(ed => ed.chain().selectFiles().run())
-
-  const submit = async () => {
-    if ($uploading) return
-
-    const ed = await editor
-    const content = ed.getText({blockSeparator: "\n"}).trim()
-    const tags = ed.storage.nostr.getEditorTags()
-
-    if (!content) return
-
-    onSubmit({content, tags})
-
-    ed.chain().clearContent().run()
-  }
-
-  const editor = makeEditor({url, autofocus, submit, uploading, aggressive: true})
-</script>
-
-<form class="relative z-feature flex gap-2 p-2" onsubmit={preventDefault(submit)}>
-  <Button
-    data-tip="Add an image"
-    class="center tooltip tooltip-right h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
-    disabled={$uploading}
-    onclick={uploadFiles}>
-    {#if $uploading}
-      <span class="loading loading-spinner loading-xs"></span>
-    {:else}
-      <Icon icon="gallery-send" />
-    {/if}
-  </Button>
-  <div class="chat-editor flex-grow overflow-hidden">
-    <EditorContent {editor} />
-  </div>
-  <Button
-    data-tip="{window.navigator.platform.includes('Mac') ? 'cmd' : 'ctrl'}+enter to send"
-    class="center tooltip tooltip-left absolute right-4 h-10 w-10 min-w-10 rounded-full"
-    disabled={$uploading}
-    onclick={submit}>
-    <Icon icon="plain" />
-  </Button>
-</form>

src/app/components/ChannelMessage.svelte

@@ -1,112 +0,0 @@
-<script lang="ts">
-  import {hash, now, formatTimestampAsTime, formatTimestampAsDate} from "@welshman/lib"
-  import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {thunks, deriveProfile, deriveProfileDisplay} from "@welshman/app"
-  import {isMobile} from "@lib/html"
-  import TapTarget from "@lib/components/TapTarget.svelte"
-  import Avatar from "@lib/components/Avatar.svelte"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Content from "@app/components/Content.svelte"
-  import ThunkFailure from "@app/components/ThunkFailure.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
-  import ReactionSummary from "@app/components/ReactionSummary.svelte"
-  import ChannelMessageZapButton from "@app/components/ChannelMessageZapButton.svelte"
-  import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
-  import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
-  import ChannelMessageMenuMobile from "@app/components/ChannelMessageMenuMobile.svelte"
-  import {colors, ENABLE_ZAPS} from "@app/core/state"
-  import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
-  import {pushModal} from "@app/util/modal"
-
-  interface Props {
-    url: string
-    event: TrustedEvent
-    replyTo?: (event: TrustedEvent) => void
-    showPubkey?: boolean
-    inert?: boolean
-  }
-
-  const {url, event, replyTo = undefined, showPubkey = false, inert = false}: Props = $props()
-
-  const thunk = $thunks[event.id]
-  const shouldProtect = canEnforceNip70(url)
-  const today = formatTimestampAsDate(now())
-  const profile = deriveProfile(event.pubkey, [url])
-  const profileDisplay = deriveProfileDisplay(event.pubkey, [url])
-  const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
-
-  const reply = () => replyTo!(event)
-
-  const onTap = () => pushModal(ChannelMessageMenuMobile, {url, event, reply})
-
-  const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey, url})
-
-  const deleteReaction = async (event: TrustedEvent) =>
-    publishDelete({relays: [url], event, protect: await shouldProtect})
-
-  const createReaction = async (template: EventContent) =>
-    publishReaction({...template, event, relays: [url], protect: await shouldProtect})
-</script>
-
-<TapTarget
-  data-event={event.id}
-  onTap={inert ? null : onTap}
-  class="group relative flex w-full cursor-default flex-col p-2 pb-3 text-left">
-  <div class="flex w-full gap-3 overflow-auto">
-    {#if showPubkey}
-      <Button onclick={openProfile} class="flex items-start">
-        <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={8} />
-      </Button>
-    {:else}
-      <div class="w-8 min-w-8 max-w-8"></div>
-    {/if}
-    <div class="min-w-0 flex-grow pr-1">
-      {#if showPubkey}
-        <div class="flex items-center gap-2">
-          <Button onclick={openProfile} class="text-sm font-bold" style="color: {colorValue}">
-            {$profileDisplay}
-          </Button>
-          <span class="text-xs opacity-50">
-            {#if formatTimestampAsDate(event.created_at) === today}
-              Today
-            {:else}
-              {formatTimestampAsDate(event.created_at)}
-            {/if}
-            at {formatTimestampAsTime(event.created_at)}
-          </span>
-        </div>
-      {/if}
-      <div class="text-sm">
-        <Content minimalQuote {event} {url} />
-        {#if thunk}
-          <ThunkFailure showToastOnRetry {thunk} class="mt-2" />
-        {/if}
-      </div>
-    </div>
-  </div>
-  <div class="row-2 ml-10 mt-1 pl-1">
-    <ReactionSummary
-      {url}
-      {event}
-      {deleteReaction}
-      {createReaction}
-      reactionClass="tooltip-right" />
-  </div>
-  {#if !isMobile}
-    <button
-      class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
-      class:group-hover:opacity-100={!isMobile}>
-      {#if ENABLE_ZAPS}
-        <ChannelMessageZapButton {url} {event} />
-      {/if}
-      <ChannelMessageEmojiButton {url} {event} />
-      {#if replyTo}
-        <Button class="btn join-item btn-xs" onclick={reply}>
-          <Icon icon="reply" size={4} />
-        </Button>
-      {/if}
-      <ChannelMessageMenuButton {url} {event} />
-    </button>
-  {/if}
-</TapTarget>

src/app/components/ChannelMessageMenu.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-  import {pubkey} from "@welshman/app"
-  import Button from "@lib/components/Button.svelte"
-  import Icon from "@lib/components/Icon.svelte"
-  import EventInfo from "@app/components/EventInfo.svelte"
-  import EventReport from "@app/components/EventReport.svelte"
-  import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
-  import {pushModal} from "@app/util/modal"
-
-  const {url, event, onClick} = $props()
-
-  const report = () => {
-    onClick()
-    pushModal(EventReport, {url, event})
-  }
-
-  const showInfo = () => {
-    onClick()
-    pushModal(EventInfo, {url, event})
-  }
-
-  const showDelete = () => {
-    onClick()
-    pushModal(EventDeleteConfirm, {url, event})
-  }
-</script>
-
-<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl">
-  <li>
-    <Button onclick={showInfo}>
-      <Icon size={4} icon="code-2" />
-      Message Details
-    </Button>
-  </li>
-  {#if event.pubkey === $pubkey}
-    <li>
-      <Button onclick={showDelete} class="text-error">
-        <Icon size={4} icon="trash-bin-2" />
-        Delete Message
-      </Button>
-    </li>
-  {:else}
-    <li>
-      <Button class="text-error" onclick={report}>
-        <Icon size={4} icon="danger" />
-        Report Content
-      </Button>
-    </li>
-  {/if}
-</ul>

src/app/components/ChannelMessageMenuMobile.svelte

@@ -1,72 +0,0 @@
-<script lang="ts">
-  import type {NativeEmoji} from "emoji-picker-element/shared"
-  import type {TrustedEvent} from "@welshman/util"
-  import {pubkey} from "@welshman/app"
-  import Button from "@lib/components/Button.svelte"
-  import Icon from "@lib/components/Icon.svelte"
-  import EmojiPicker from "@lib/components/EmojiPicker.svelte"
-  import ZapButton from "@app/components/ZapButton.svelte"
-  import EventInfo from "@app/components/EventInfo.svelte"
-  import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
-  import {ENABLE_ZAPS} from "@app/core/state"
-  import {publishReaction, canEnforceNip70} from "@app/core/commands"
-  import {pushModal} from "@app/util/modal"
-
-  type Props = {
-    url: string
-    event: TrustedEvent
-    reply: () => void
-  }
-
-  const {url, event, reply}: Props = $props()
-
-  const shouldProtect = canEnforceNip70(url)
-
-  const onEmoji = (async (event: TrustedEvent, url: string, emoji: NativeEmoji) => {
-    history.back()
-    publishReaction({
-      event,
-      relays: [url],
-      content: emoji.unicode,
-      protect: await shouldProtect,
-    })
-  }).bind(undefined, event, url)
-
-  const showEmojiPicker = () => pushModal(EmojiPicker, {onClick: onEmoji}, {replaceState: true})
-
-  const sendReply = () => {
-    history.back()
-    reply()
-  }
-
-  const showInfo = () => pushModal(EventInfo, {url, event}, {replaceState: true})
-
-  const showDelete = () => pushModal(EventDeleteConfirm, {url, event})
-</script>
-
-<div class="col-2">
-  <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
-    <Icon size={4} icon="smile-circle" />
-    Send Reaction
-  </Button>
-  {#if ENABLE_ZAPS}
-    <ZapButton replaceState {url} {event} class="btn btn-secondary w-full">
-      <Icon size={4} icon="bolt" />
-      Send Zap
-    </ZapButton>
-  {/if}
-  <Button class="btn btn-neutral w-full" onclick={sendReply}>
-    <Icon size={4} icon="reply" />
-    Send Reply
-  </Button>
-  <Button class="btn btn-neutral" onclick={showInfo}>
-    <Icon size={4} icon="code-2" />
-    Message Details
-  </Button>
-  {#if event.pubkey === $pubkey}
-    <Button class="btn btn-neutral text-error" onclick={showDelete}>
-      <Icon size={4} icon="trash-bin-2" />
-      Delete Message
-    </Button>
-  {/if}
-</div>

src/app/components/ChannelName.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-  import {channelsById, makeChannelId} from "@app/core/state"
-
-  const {url, room} = $props()
-</script>
-
-{$channelsById.get(makeChannelId(url, room))?.name || room}

src/app/components/Chat.svelte

@@ -11,6 +11,7 @@
     MINUTE,
     sortBy,
     remove,
+    enumerate,
     formatTimestampAsDate,
   } from "@welshman/lib"
   import type {TrustedEvent, EventTemplate, EventContent} from "@welshman/util"
@@ -27,10 +28,10 @@
     tagPubkey,
     sendWrapped,
     mergeThunks,
-    loadInboxRelaySelections,
-    inboxRelaySelectionsByPubkey,
+    loadMessagingRelayList,
+    messagingRelayListsByPubkey,
   } from "@welshman/app"
-  import type {AbstractThunk} from "@welshman/app"
+  import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -42,36 +43,31 @@
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
-  import ProfileList from "@app/components/ProfileList.svelte"
+  import ChatMembers from "@app/components/ChatMembers.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChatCompose.svelte"
   import ChatComposeParent from "@app/components/ChatComposeParent.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
-  import {
-    INDEXER_RELAYS,
-    userSettingValues,
-    deriveChat,
-    splitChatId,
-    PLATFORM_NAME,
-  } from "@app/core/state"
+  import {userSettingsValues, PLATFORM_NAME, deriveChat} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
   import {prependParent} from "@app/core/commands"
   import {pushToast} from "@app/util/toast"
 
   type Props = {
-    id: string
+    pubkeys: string[]
     info?: Snippet
   }
 
-  const {id, info}: Props = $props()
+  const {pubkeys, info}: Props = $props()
 
-  const chat = deriveChat(id)
-  const pubkeys = splitChatId(id)
+  const chat = deriveChat(pubkeys)
   const others = remove($pubkey!, pubkeys)
-  const missingInboxes = $derived(pubkeys.filter(pk => !$inboxRelaySelectionsByPubkey.has(pk)))
+  const missingRelayLists = $derived(pubkeys.filter(pk => !$messagingRelayListsByPubkey.has(pk)))
 
   const showMembers = () =>
-    pushModal(ProfileList, {pubkeys: others, title: `People in this conversation`})
+    others.length === 1
+      ? pushModal(ProfileDetail, {pubkey: others[0]})
+      : pushModal(ChatMembers, {pubkeys: others})
 
   const replyTo = (event: TrustedEvent) => {
     parent = event
@@ -125,14 +121,15 @@
 
     // Split the message into multiple pieces so that we can use kind 15 to send images per nip 17
     // Sleep 1 second between each one to make sure timestamps are distinct
-    const thunks: AbstractThunk[] = []
-    for (let i = 0; i < templates.length; i++) {
-      const template = templates[i]
-
-      thunks.push(
-        await sendWrapped({pubkeys, template, delay: $userSettingValues.send_delay + ms(i)}),
-      )
-    }
+    const thunks = await Promise.all(
+      Array.from(enumerate(templates)).map(([i, event]) =>
+        sendWrapped({
+          event,
+          recipients: pubkeys,
+          delay: $userSettingsValues.send_delay + ms(i),
+        }),
+      ),
+    )
 
     pushToast({
       timeout: 30_000,
@@ -183,7 +180,7 @@
 
   onMount(() => {
     for (const pubkey of others) {
-      loadInboxRelaySelections(pubkey, INDEXER_RELAYS, true)
+      loadMessagingRelayList(pubkey)
     }
 
     const observer = new ResizeObserver(() => {
@@ -208,19 +205,17 @@
 
 <PageBar>
   {#snippet title()}
-    <div class="flex flex-col gap-1 sm:flex-row sm:gap-2">
+    <Button class="flex flex-col gap-1 sm:flex-row sm:gap-2" onclick={showMembers}>
       {#if others.length === 0}
         <div class="row-2">
           <ProfileCircle pubkey={$pubkey!} size={5} />
           <ProfileName pubkey={$pubkey!} />
         </div>
       {:else if others.length === 1}
-        {@const pubkey = others[0]}
-        {@const onClick = () => pushModal(ProfileDetail, {pubkey})}
-        <Button onclick={onClick} class="row-2">
-          <ProfileCircle {pubkey} size={5} />
-          <ProfileName {pubkey} />
-        </Button>
+        <div class="row-2">
+          <ProfileCircle pubkey={others[0]} size={5} />
+          <ProfileName pubkey={others[0]} />
+        </div>
       {:else}
         <div class="flex items-center gap-2">
           <ProfileCircles pubkeys={others} size={5} />
@@ -235,55 +230,49 @@
             {/if}
           </p>
         </div>
-        {#if others.length > 2}
-          <Button onclick={showMembers} class="btn btn-link hidden sm:block"
-            >Show all members</Button>
-        {/if}
       {/if}
-    </div>
+    </Button>
   {/snippet}
   {#snippet action()}
-    <div>
-      {#if remove($pubkey, missingInboxes).length > 0}
-        {@const count = remove($pubkey, missingInboxes).length}
-        {@const label = count > 1 ? "inboxes are" : "inbox is"}
-        <div
-          class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
-          data-tip="{count} {label} not configured.">
-          <Icon icon="danger" />
-          {count}
-        </div>
-      {/if}
-    </div>
+    {#if remove($pubkey, missingRelayLists).length > 0}
+      {@const count = remove($pubkey, missingRelayLists).length}
+      {@const label = count > 1 ? "lists are" : "list is"}
+      <div
+        class="row-2 badge badge-error badge-lg tooltip tooltip-left cursor-pointer"
+        data-tip="{count} messaging {label} not configured.">
+        <Icon icon={Danger} />
+        {count}
+      </div>
+    {/if}
   {/snippet}
 </PageBar>
 
 <PageContent class="flex flex-col-reverse gap-2 pt-4">
   <div bind:this={dynamicPadding}></div>
-  {#if missingInboxes.includes($pubkey!)}
+  {#if missingRelayLists.includes($pubkey!)}
     <div class="py-12">
       <div class="card2 col-2 m-auto max-w-md items-center text-center">
         <p class="row-2 text-lg text-error">
-          <Icon icon="danger" />
-          Your inbox is not configured.
+          <Icon icon={Danger} />
+          Your messaging relays are not configured.
         </p>
         <p>
           In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please visit
-          your <Link class="link" href="/settings/relays">relay settings page</Link> to set up your inbox.
+          your <Link class="link" href="/settings/relays">relay settings page</Link> to receive messages.
         </p>
       </div>
     </div>
-  {:else if missingInboxes.length > 0}
+  {:else if missingRelayLists.length > 0}
     <div class="py-12">
       <div class="card2 col-2 m-auto max-w-md items-center text-center">
         <p class="row-2 text-lg text-error">
-          <Icon icon="danger" />
-          {missingInboxes.length}
-          {missingInboxes.length > 1 ? "inboxes are" : "inbox is"} not configured.
+          <Icon icon={Danger} />
+          {missingRelayLists.length} messaging
+          {missingRelayLists.length > 1 ? "lists are" : "list is"} not configured.
         </p>
         <p>
           In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please make
-          sure everyone in this conversation has set up their inbox relays.
+          sure everyone in this conversation has set up their messaging relays.
         </p>
       </div>
     </div>

src/app/components/ChatCompose.svelte

@@ -2,17 +2,18 @@
   import {writable} from "svelte/store"
   import type {EventContent} from "@welshman/util"
   import {isMobile, preventDefault} from "@lib/html"
+  import GallerySend from "@assets/icons/gallery-send.svg?dataurl"
+  import Plane from "@assets/icons/plane-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {makeEditor} from "@app/editor"
 
   type Props = {
-    url?: string
     onSubmit: (event: EventContent) => void
   }
 
-  const {onSubmit, url}: Props = $props()
+  const {onSubmit}: Props = $props()
 
   const autofocus = !isMobile
 
@@ -37,11 +38,11 @@
   }
 
   const editor = makeEditor({
-    url,
     autofocus,
     submit,
     uploading,
     aggressive: true,
+    encryptFiles: true,
   })
 </script>
 
@@ -54,7 +55,7 @@
     {#if $uploading}
       <span class="loading loading-spinner loading-xs"></span>
     {:else}
-      <Icon icon="gallery-send" />
+      <Icon icon={GallerySend} />
     {/if}
   </Button>
   <div class="chat-editor flex-grow overflow-hidden">
@@ -65,6 +66,6 @@
     class="center tooltip tooltip-left absolute right-4 h-10 w-10 min-w-10 rounded-full"
     disabled={$uploading}
     onclick={submit}>
-    <Icon icon="plain" />
+    <Icon icon={Plane} />
   </Button>
 </form>

src/app/components/ChatComposeParent.svelte

@@ -2,9 +2,10 @@
   import type {TrustedEvent} from "@welshman/util"
   import {displayProfileByPubkey} from "@welshman/app"
   import {slide} from "@lib/transition"
+  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import NoteContent from "@app/components/NoteContent.svelte"
+  import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
 
   const {
     verb,
@@ -18,18 +19,13 @@
 </script>
 
 <div
-  class="relative border-l-2 border-solid border-primary bg-base-300 px-2 py-1 pr-8 text-xs"
+  class="relative border-l-2 border-solid border-primary bg-base-300 px-2 py-1 pr-8"
   transition:slide>
-  <p class="text-primary">{verb} @{displayProfileByPubkey(event.pubkey)}</p>
+  <p class="text-xs text-primary">{verb} @{displayProfileByPubkey(event.pubkey)}</p>
   {#key event.id}
-    <NoteContent
-      {event}
-      hideMediaAtDepth={0}
-      minLength={100}
-      maxLength={300}
-      expandMode="disabled" />
+    <NoteContentMinimal trimParent {event} />
   {/key}
   <Button class="absolute right-2 top-2 cursor-pointer" onclick={clear}>
-    <Icon icon="close-circle" />
+    <Icon icon={CloseCircle} />
   </Button>
 </div>

src/app/components/ChatEnable.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
-  import {WRAP} from "@welshman/util"
-  import {repository} from "@welshman/app"
   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 {canDecrypt, PLATFORM_NAME, ensureUnwrapped} from "@app/core/state"
+  import {PLATFORM_NAME} from "@app/core/state"
   import {clearModals} from "@app/util/modal"
 
   const {next} = $props()
@@ -17,22 +22,13 @@
 
   let loading = $state(false)
 
-  const enableChat = async () => {
-    canDecrypt.set(true)
-
-    for (const event of repository.query([{kinds: [WRAP]}])) {
-      ensureUnwrapped(event)
-    }
-
-    clearModals()
-    goto(nextUrl)
-  }
-
   const submit = async () => {
     loading = true
 
     try {
-      await enableChat()
+      shouldUnwrap.set(true)
+      clearModals()
+      goto(nextUrl)
     } finally {
       loading = false
     }
@@ -41,31 +37,29 @@
   const back = () => history.back()
 </script>
 
-<form class="column gap-4" onsubmit={preventDefault(submit)}>
-  <ModalHeader>
-    {#snippet title()}
-      <div>Enable Messages</div>
-    {/snippet}
-    {#snippet info()}
-      <div>Do you want to enable direct messages?</div>
-    {/snippet}
-  </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>
+<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="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Enable Messages</Spinner>
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
-</form>
+</Modal>

src/app/components/ChatItem.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {remove} from "@welshman/lib"
+  import {remove, uniq, formatTimestamp} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
-  import {pubkey, loadInboxRelaySelections} from "@welshman/app"
+  import {pubkey, loadMessagingRelayList} from "@welshman/app"
   import {fade} from "@lib/transition"
   import Link from "@lib/components/Link.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
@@ -21,13 +21,13 @@
 
   const {...props}: Props = $props()
 
-  const others = remove($pubkey!, props.pubkeys)
+  const others = uniq(remove($pubkey!, props.pubkeys))
   const active = $derived($page.params.chat === props.id)
   const path = makeChatPath(props.pubkeys)
 
   onMount(() => {
     for (const pk of others) {
-      loadInboxRelaySelections(pk)
+      loadMessagingRelayList(pk)
     }
   })
 </script>
@@ -59,13 +59,16 @@
         {/if}
       </div>
       <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
-        <span class="opacity-50">
+        <span class="opacity-70">
           {#if props.messages[0].pubkey === $pubkey}
             You:
           {/if}
         </span>
         {props.messages[0].content}
       </p>
+      <p class="text-xs opacity-70">
+        {formatTimestamp(props.messages[0].created_at)}
+      </p>
     </div>
   </div>
 </Link>

src/app/components/ChatMembers.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import Profile from "@app/components/Profile.svelte"
+
+  interface Props {
+    pubkeys: string[]
+  }
+
+  const {pubkeys}: Props = $props()
+</script>
+
+<Modal>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>People in this conversation</ModalTitle>
+    </ModalHeader>
+    <div class="flex flex-col gap-2">
+      {#each pubkeys as pubkey (pubkey)}
+        <div class="card2 bg-alt">
+          <Profile {pubkey} />
+        </div>
+      {/each}
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
+  </ModalFooter>
+</Modal>

src/app/components/ChatMenu.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
+  import {assoc} from "@welshman/lib"
+  import ChatSquare from "@assets/icons/chat-square.svg?dataurl"
+  import Check from "@assets/icons/check.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
+  import BellOff from "@assets/icons/bell-off.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import ChatStart from "@app/components/ChatStart.svelte"
   import {setChecked} from "@app/util/notifications"
   import {pushModal} from "@app/util/modal"
+  import {notificationSettings} from "@app/core/state"
 
   const startChat = () => pushModal(ChatStart, {}, {replaceState: true})
 
@@ -11,15 +19,34 @@
     setChecked("/chat/*")
     history.back()
   }
+
+  const enableAlerts = () => notificationSettings.update(assoc("messages", true))
+
+  const disableAlerts = () => notificationSettings.update(assoc("messages", false))
 </script>
 
-<div class="col-2">
-  <Button class="btn btn-primary" onclick={startChat}>
-    <Icon size={4} icon="add-circle" />
-    Start chat
-  </Button>
-  <Button class="btn btn-neutral" onclick={markAsRead}>
-    <Icon size={4} icon="check-circle" />
-    Mark all read
-  </Button>
-</div>
+<Modal>
+  <ModalBody>
+    <div class="flex flex-col gap-2">
+      <Button class="btn btn-primary" onclick={startChat}>
+        <Icon size={5} icon={ChatSquare} />
+        Start chat
+      </Button>
+      <Button class="btn btn-neutral" onclick={markAsRead}>
+        <Icon size={5} icon={Check} />
+        Mark all read
+      </Button>
+      {#if $notificationSettings.messages}
+        <Button class="btn btn-neutral" onclick={disableAlerts}>
+          <Icon size={4} icon={BellOff} />
+          Disable alerts
+        </Button>
+      {:else}
+        <Button class="btn btn-neutral" onclick={enableAlerts}>
+          <Icon size={4} icon={Bell} />
+          Enable alerts
+        </Button>
+      {/if}
+    </div>
+  </ModalBody>
+</Modal>

src/app/components/ChatMessage.svelte

@@ -2,13 +2,14 @@
   import {type Instance} from "tippy.js"
   import {hash, formatTimestampAsTime} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {thunks, pubkey, deriveProfile, deriveProfileDisplay, sendWrapped} from "@welshman/app"
+  import {thunks, mergeThunks, pubkey, deriveProfileDisplay, sendWrapped} from "@welshman/app"
   import {isMobile} from "@lib/html"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import TapTarget from "@lib/components/TapTarget.svelte"
-  import Avatar from "@lib/components/Avatar.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import Content from "@app/components/Content.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThunkFailure from "@app/components/ThunkFailure.svelte"
@@ -28,19 +29,18 @@
 
   const {event, replyTo, pubkeys, showPubkey = false}: Props = $props()
 
-  const thunk = $thunks[event.id]
   const isOwn = event.pubkey === $pubkey
-  const profile = deriveProfile(event.pubkey)
   const profileDisplay = deriveProfileDisplay(event.pubkey)
-  const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
+  const thunk = mergeThunks($thunks.filter(t => t.event.id === event.id))
+  const [_, colorValue] = colors[hash(event.pubkey) % colors.length]
 
   const reply = () => replyTo(event)
 
   const deleteReaction = (event: TrustedEvent) =>
-    sendWrapped({template: makeDelete({event, protect: false}), pubkeys})
+    sendWrapped({event: makeDelete({event, protect: false}), recipients: pubkeys})
 
   const createReaction = (template: EventContent) =>
-    sendWrapped({template: makeReaction({event, protect: false, ...template}), pubkeys})
+    sendWrapped({event: makeReaction({event, protect: false, ...template}), recipients: pubkeys})
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey: event.pubkey})
 
@@ -87,7 +87,7 @@
         class="opacity-0 transition-all"
         class:group-hover:opacity-100={!isMobile}
         onclick={togglePopover}>
-        <Icon icon="menu-dots" size={4} />
+        <Icon icon={MenuDots} size={4} />
       </button>
     </Tippy>
   {/if}
@@ -99,8 +99,8 @@
         <div class="flex items-center gap-2">
           {#if !isOwn}
             <Button onclick={openProfile} class="flex items-center gap-1">
-              <Avatar
-                src={$profile?.picture}
+              <ProfileCircle
+                pubkey={event.pubkey}
                 class="border border-solid border-base-content"
                 size={4} />
               <div class="flex items-center gap-2">

src/app/components/ChatMessageEmojiButton.svelte

@@ -2,6 +2,7 @@
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import type {TrustedEvent} from "@welshman/util"
   import {sendWrapped} from "@welshman/app"
+  import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
   import {makeReaction} from "@app/core/commands"
@@ -14,9 +15,12 @@
   const {event, pubkeys}: Props = $props()
 
   const onEmoji = (emoji: NativeEmoji) =>
-    sendWrapped({template: makeReaction({event, content: emoji.unicode, protect: false}), pubkeys})
+    sendWrapped({
+      event: makeReaction({event, content: emoji.unicode, protect: false}),
+      recipients: pubkeys,
+    })
 </script>
 
 <EmojiButton {onEmoji} class="btn join-item btn-xs">
-  <Icon icon="smile-circle" size={4} />
+  <Icon icon={SmileCircle} size={4} />
 </EmojiButton>

src/app/components/ChatMessageMenu.svelte

@@ -4,6 +4,8 @@
   import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
   import {pushModal} from "@app/util/modal"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
+  import Code2 from "@assets/icons/code-2.svg?dataurl"
 
   const {event, pubkeys, popover, replyTo} = $props()
 
@@ -19,10 +21,10 @@
   <ChatMessageEmojiButton {event} {pubkeys} />
   {#if replyTo}
     <Button class="btn join-item btn-xs" onclick={reply}>
-      <Icon size={4} icon="reply" />
+      <Icon size={4} icon={Reply} />
     </Button>
   {/if}
   <Button class="btn join-item btn-xs" onclick={showInfo}>
-    <Icon size={4} icon="code-2" />
+    <Icon size={4} icon={Code2} />
   </Button>
 </div>

src/app/components/ChatMessageMenuMobile.svelte

@@ -2,7 +2,13 @@
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import type {TrustedEvent} from "@welshman/util"
   import {sendWrapped} from "@welshman/app"
+  import SmileCircle from "@assets/icons/smile-circle.svg?dataurl"
+  import Reply from "@assets/icons/reply-2.svg?dataurl"
+  import Copy from "@assets/icons/copy.svg?dataurl"
+  import Code2 from "@assets/icons/code-2.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
   import Button from "@lib/components/Button.svelte"
   import EmojiPicker from "@lib/components/EmojiPicker.svelte"
   import EventInfo from "@app/components/EventInfo.svelte"
@@ -20,7 +26,10 @@
 
   const onEmoji = ((event: TrustedEvent, pubkeys: string[], emoji: NativeEmoji) => {
     history.back()
-    sendWrapped({template: makeReaction({event, content: emoji.unicode, protect: false}), pubkeys})
+    sendWrapped({
+      event: makeReaction({event, content: emoji.unicode, protect: false}),
+      recipients: pubkeys,
+    })
   }).bind(undefined, event, pubkeys)
 
   const showEmojiPicker = () => pushModal(EmojiPicker, {onClick: onEmoji}, {replaceState: true})
@@ -38,21 +47,25 @@
   const showInfo = () => pushModal(EventInfo, {event}, {replaceState: true})
 </script>
 
-<div class="col-2">
-  <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
-    <Icon size={4} icon="smile-circle" />
-    Send Reaction
-  </Button>
-  <Button class="btn btn-neutral w-full" onclick={sendReply}>
-    <Icon size={4} icon="reply" />
-    Send Reply
-  </Button>
-  <Button class="btn btn-neutral w-full" onclick={copyText}>
-    <Icon size={4} icon="copy" />
-    Copy Text
-  </Button>
-  <Button class="btn btn-neutral" onclick={showInfo}>
-    <Icon size={4} icon="code-2" />
-    Message Details
-  </Button>
-</div>
+<Modal>
+  <ModalBody>
+    <div class="flex flex-col gap-2">
+      <Button class="btn btn-neutral" onclick={showInfo}>
+        <Icon size={4} icon={Code2} />
+        Message Info
+      </Button>
+      <Button class="btn btn-neutral w-full" onclick={copyText}>
+        <Icon size={4} icon={Copy} />
+        Copy Text
+      </Button>
+      <Button class="btn btn-neutral w-full" onclick={sendReply}>
+        <Icon size={4} icon={Reply} />
+        Send Reply
+      </Button>
+      <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
+        <Icon size={4} icon={SmileCircle} />
+        Send Reaction
+      </Button>
+    </div>
+  </ModalBody>
+</Modal>

src/app/components/ChatStart.svelte

@@ -5,19 +5,25 @@
   import {goto} from "$app/navigation"
   import {tryCatch, uniq} from "@welshman/lib"
   import {fromNostrURI} from "@welshman/util"
-  import {pubkey} from "@welshman/app"
+  import {loadMessagingRelayList} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
+  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 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 ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {makeChatPath} from "@app/util/routes"
 
   const back = () => history.back()
 
-  const onSubmit = () => goto(makeChatPath([...pubkeys, $pubkey!]))
+  const onSubmit = () => goto(makeChatPath(pubkeys))
 
   const addPubkey = (pubkey: string) => {
     pubkeys = uniq([...pubkeys, pubkey])
@@ -28,6 +34,10 @@
 
   let pubkeys: string[] = $state([])
 
+  $effect(() => {
+    pubkeys.forEach(pubkey => loadMessagingRelayList(pubkey))
+  })
+
   onMount(() => {
     return term.subscribe(t => {
       if (t.match(/^[0-9a-f]{64}$/)) {
@@ -51,28 +61,26 @@
   })
 </script>
 
-<form class="column gap-4" onsubmit={preventDefault(onSubmit)}>
-  <ModalHeader>
-    {#snippet title()}
-      <div>Start a Chat</div>
-    {/snippet}
-    {#snippet info()}
-      <div>Create an encrypted chat room for private conversations.</div>
-    {/snippet}
-  </ModalHeader>
-  <Field>
-    {#snippet input()}
-      <ProfileMultiSelect autofocus bind:value={pubkeys} {term} />
-    {/snippet}
-  </Field>
+<Modal tag="form" onsubmit={preventDefault(onSubmit)}>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Start a Chat</ModalTitle>
+      <ModalSubtitle>Create an encrypted chat room for private conversations.</ModalSubtitle>
+    </ModalHeader>
+    <Field>
+      {#snippet input()}
+        <ProfileMultiSelect autofocus bind:value={pubkeys} {term} />
+      {/snippet}
+    </Field>
+  </ModalBody>
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
-      <Icon icon="alt-arrow-left" />
+      <Icon icon={AltArrowLeft} />
       Go back
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={pubkeys.length === 0}>
       Create Chat
-      <Icon icon="alt-arrow-right" />
+      <Icon icon={AltArrowRight} />
     </Button>
   </ModalFooter>
-</form>
+</Modal>

src/app/components/ClassifiedActions.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type {TrustedEvent, EventContent} from "@welshman/util"
+  import {getTagValue, getAddress} from "@welshman/util"
+  import {pubkey} from "@welshman/app"
+  import Pen2 from "@assets/icons/pen-2.svg?dataurl"
+  import Link from "@lib/components/Link.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
+  import ReactionSummary from "@app/components/ReactionSummary.svelte"
+  import ClassifiedStatus from "@app/components/ClassifiedStatus.svelte"
+  import ThunkStatusOrDeleted from "@app/components/ThunkStatusOrDeleted.svelte"
+  import EventActivity from "@app/components/EventActivity.svelte"
+  import EventActions from "@app/components/EventActions.svelte"
+  import ClassifiedEdit from "@app/components/ClassifiedEdit.svelte"
+  import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
+  import {makeClassifiedPath, makeSpacePath} from "@app/util/routes"
+  import {pushModal} from "@app/util/modal"
+
+  interface Props {
+    url: string
+    event: TrustedEvent
+    showRoom?: boolean
+    showActivity?: boolean
+  }
+
+  const {url, event, showRoom, showActivity}: Props = $props()
+
+  const h = getTagValue("h", event.tags)
+  const path = makeClassifiedPath(url, getAddress(event))
+  const shouldProtect = canEnforceNip70(url)
+
+  const editClassified = () => pushModal(ClassifiedEdit, {url, event})
+
+  const deleteReaction = async (event: TrustedEvent) =>
+    publishDelete({relays: [url], event, protect: await shouldProtect})
+
+  const createReaction = async (template: EventContent) =>
+    publishReaction({...template, event, relays: [url], protect: await shouldProtect})
+</script>
+
+<div class="flex flex-grow flex-wrap justify-end gap-2">
+  {#if h && showRoom}
+    <Link href={makeSpacePath(url, h)} class="btn btn-neutral btn-xs rounded-full">
+      Posted in #<RoomName {h} {url} />
+    </Link>
+  {/if}
+  <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-left" />
+  <ThunkStatusOrDeleted {event}>
+    <ClassifiedStatus {event} />
+  </ThunkStatusOrDeleted>
+  {#if showActivity}
+    <EventActivity {url} {path} {event} />
+  {/if}
+  <EventActions {url} {event} noun="Listing">
+    {#snippet customActions()}
+      {#if event.pubkey === $pubkey}
+        <li>
+          <Button onclick={editClassified}>
+            <Icon size={4} icon={Pen2} />
+            Edit Listing
+          </Button>
+        </li>
+      {/if}
+    {/snippet}
+  </EventActions>
+</div>

src/app/components/ClassifiedCreate.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
+  import ClassifiedForm from "@app/components/ClassifiedForm.svelte"
+
+  type Props = {
+    url: string
+    h?: string
+  }
+
+  const {url, h}: Props = $props()
+</script>
+
+<ClassifiedForm {url} {h}>
+  {#snippet header()}
+    <ModalHeader>
+      <ModalTitle>Create a Classified Listing</ModalTitle>
+      <ModalSubtitle>Advertise a job, sale, or need.</ModalSubtitle>
+    </ModalHeader>
+  {/snippet}
+</ClassifiedForm>

src/app/components/ClassifiedEdit.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import {fromPairs} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import {getTag, getTagValues} from "@welshman/util"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
+  import ClassifiedForm from "@app/components/ClassifiedForm.svelte"
+
+  type Props = {
+    url: string
+    event: TrustedEvent
+  }
+
+  const {url, event}: Props = $props()
+
+  const {content} = event
+  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}
+</script>
+
+<ClassifiedForm {url} {initialValues}>
+  {#snippet header()}
+    <ModalHeader>
+      <ModalTitle>Edit this Listing</ModalTitle>
+      <ModalSubtitle>Advertise a job, sale, or need.</ModalSubtitle>
+    </ModalHeader>
+  {/snippet}
+</ClassifiedForm>

src/app/components/ClassifiedForm.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+  import {randomId} from "@welshman/lib"
+  import {makeEvent, CLASSIFIED} from "@welshman/util"
+  import {publishThunk} from "@welshman/app"
+  import {isMobile, preventDefault} from "@lib/html"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ImagesInput from "@lib/components/ImagesInput.svelte"
+  import CurrencyInput from "@app/components/CurrencyInput.svelte"
+  import EditorContent from "@app/editor/EditorContent.svelte"
+  import {pushToast} from "@app/util/toast"
+  import {PROTECTED} from "@app/core/state"
+  import {makeEditor} from "@app/editor"
+  import {canEnforceNip70, uploadFile} from "@app/core/commands"
+
+  type Props = {
+    url: string
+    h?: string
+    header: Snippet
+    initialValues?: {
+      d?: string
+      title?: string
+      content?: string
+      price?: number
+      currency?: string
+      images?: string[]
+      status?: string
+    }
+  }
+
+  const {url, h, header, initialValues}: Props = $props()
+
+  const shouldProtect = canEnforceNip70(url)
+
+  const back = () => history.back()
+
+  const submit = async () => {
+    loading = true
+
+    try {
+      if (!title) {
+        return pushToast({
+          theme: "error",
+          message: "Please provide a title for your listing.",
+        })
+      }
+
+      const ed = await editor
+      const content = ed.getText({blockSeparator: "\n"}).trim()
+
+      if (!content.trim()) {
+        return pushToast({
+          theme: "error",
+          message: "Please provide a description for your listing.",
+        })
+      }
+
+      const tags = [
+        ["d", initialValues?.d || randomId()],
+        ["title", title],
+        ["summary", content],
+        ["price", String(price), currency],
+        ["status", status],
+        ...ed.storage.nostr.getEditorTags(),
+      ]
+
+      if (await shouldProtect) {
+        tags.push(PROTECTED)
+      }
+
+      if (h) {
+        tags.push(["h", h])
+      }
+
+      for (const image of images) {
+        if (typeof image === "string") {
+          tags.push(["image", image])
+        } else {
+          const {result, error} = await uploadFile(image, {url})
+
+          if (error) {
+            return pushToast({
+              theme: "error",
+              message: `Failed to upload file ${image.name}`,
+            })
+          }
+
+          if (result) {
+            tags.push(["image", result.url])
+          }
+        }
+      }
+
+      publishThunk({
+        relays: [url],
+        event: makeEvent(CLASSIFIED, {content, tags}),
+      })
+
+      history.back()
+    } finally {
+      loading = false
+    }
+  }
+
+  const content = initialValues?.content || ""
+  const editor = makeEditor({url, submit, content})
+
+  let loading = $state(false)
+  let title = $state(initialValues?.title || "")
+  let status = $state(initialValues?.status || "active")
+  let price = $state(Number(initialValues?.price || 0))
+  let currency = $state(initialValues?.currency || "SAT")
+  let images = $state<(string | File)[]>(initialValues?.images || [])
+</script>
+
+<Modal tag="form" onsubmit={preventDefault(submit)}>
+  <ModalBody>
+    {@render header?.()}
+    <div class="col-8 relative">
+      <Field>
+        {#snippet label()}
+          <p>Title*</p>
+        {/snippet}
+        {#snippet input()}
+          <label class="input input-bordered flex w-full items-center gap-2">
+            <!-- svelte-ignore a11y_autofocus -->
+            <input
+              autofocus={!isMobile}
+              bind:value={title}
+              class="grow"
+              type="text"
+              placeholder="What is this listing for?" />
+          </label>
+        {/snippet}
+      </Field>
+      <Field>
+        {#snippet label()}
+          <p>Description*</p>
+        {/snippet}
+        {#snippet input()}
+          <div class="note-editor flex-grow overflow-hidden">
+            <EditorContent {editor} />
+          </div>
+        {/snippet}
+      </Field>
+      <Field>
+        {#snippet label()}
+          <p>Price*</p>
+        {/snippet}
+        {#snippet input()}
+          <div class="join grid grid-cols-2">
+            <label class="join-item input input-bordered flex w-full items-center gap-2">
+              <input bind:value={price} class="grow w-32" type="number" />
+            </label>
+            <CurrencyInput class="join-item" bind:value={currency} />
+          </div>
+        {/snippet}
+      </Field>
+      {#if initialValues}
+        <Field>
+          {#snippet label()}
+            <p>Status*</p>
+          {/snippet}
+          {#snippet input()}
+            <select class="select select-bordered w-full" bind:value={status}>
+              <option value="active">Active</option>
+              <option value="sold">Sold</option>
+            </select>
+          {/snippet}
+        </Field>
+      {/if}
+      <Field>
+        {#snippet label()}
+          <p>Images (optional)</p>
+        {/snippet}
+        {#snippet input()}
+          <ImagesInput bind:value={images} />
+        {/snippet}
+      </Field>
+    </div>
+  </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}>
+      <Spinner {loading}>Save Listing</Spinner>
+    </Button>
+  </ModalFooter>
+</Modal>

src/app/components/ClassifiedItem.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import {formatTimestamp} from "@welshman/lib"
+  import type {TrustedEvent} from "@welshman/util"
+  import {getTag, getAddress, getTagValue, getTagValues} from "@welshman/util"
+  import Link from "@lib/components/Link.svelte"
+  import CurrencySymbol from "@lib/components/CurrencySymbol.svelte"
+  import ContentLinkBlock from "@app/components/ContentLinkBlock.svelte"
+  import Content from "@app/components/Content.svelte"
+  import ProfileLink from "@app/components/ProfileLink.svelte"
+  import ClassifiedActions from "@app/components/ClassifiedActions.svelte"
+  import RoomLink from "@app/components/RoomLink.svelte"
+  import {makeClassifiedPath} from "@app/util/routes"
+
+  type Props = {
+    url: string
+    event: TrustedEvent
+  }
+
+  const {url, event}: Props = $props()
+
+  const title = getTagValue("title", event.tags)
+  const h = getTagValue("h", event.tags)
+  const images = getTagValues("image", event.tags)
+  const [_, price = 0, currency = "SAT"] = getTag("price", event.tags) || []
+</script>
+
+<Link
+  class="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">
+      <p class="text-xl">
+        {title} —
+        <CurrencySymbol code={currency} />{price}
+      </p>
+      <p class="text-sm opacity-75">
+        {formatTimestamp(event.created_at)}
+      </p>
+    </div>
+  {:else}
+    <p class="mb-3 h-0 text-xs opacity-75">
+      {formatTimestamp(event.created_at)}
+    </p>
+  {/if}
+  <Content {event} {url} expandMode="inline" />
+  <div class="grid grid-cols-3 sm:grid-cols-5">
+    {#each images as image (image)}
+      <ContentLinkBlock {event} value={{url: image}} />
+    {/each}
+  </div>
+  <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">
+    <span class="whitespace-nowrap py-1 text-sm opacity-75">
+      Posted by
+      <ProfileLink pubkey={event.pubkey} {url} />
+      {#if h}
+        in <RoomLink {url} {h} />
+      {/if}
+    </span>
+    <ClassifiedActions showActivity {url} {event} />
+  </div>
+</Link>

src/app/components/ClassifiedStatus.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import cx from "classnames"
+  import type {TrustedEvent} from "@welshman/util"
+  import {getTagValue} from "@welshman/util"
+  import {ucFirst} from "@lib/util"
+
+  type Props = {
+    event: TrustedEvent
+  }
+
+  const {event}: Props = $props()
+
+  const status = getTagValue("status", event.tags)
+</script>
+
+{#if status}
+  <div class={cx("btn btn-xs rounded-full", {"btn-primary": status !== "active"})}>
+    {ucFirst(status)}
+  </div>
+{/if}

src/app/components/CommentActions.svelte

@@ -5,19 +5,20 @@
   import EventActivity from "@app/components/EventActivity.svelte"
   import EventActions from "@app/components/EventActions.svelte"
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
-  import {makeThreadPath} from "@app/util/routes"
+  import {makeSpacePath} from "@app/util/routes"
 
   interface Props {
-    url: any
-    event: any
+    url: string
+    event: TrustedEvent
+    segment: string
     showActivity?: boolean
   }
 
-  const {url, event, showActivity = false}: Props = $props()
+  const {url, event, segment, showActivity = false}: Props = $props()
 
   const shouldProtect = canEnforceNip70(url)
 
-  const path = makeThreadPath(url, event.id)
+  const path = makeSpacePath(url, segment, event.id)
 
   const deleteReaction = async (event: TrustedEvent) =>
     publishDelete({relays: [url], event, protect: await shouldProtect})

src/app/components/ComposeMenu.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
+  import StarFallMinimalistic from "@assets/icons/star-fall-minimalistic.svg?dataurl"
+  import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
+  import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import {pushModal} from "@app/util/modal"
+  import CalendarEventCreate from "@app/components/CalendarEventCreate.svelte"
+  import ThreadCreate from "@app/components/ThreadCreate.svelte"
+  import ClassifiedCreate from "@app/components/ClassifiedCreate.svelte"
+  import GoalCreate from "@app/components/GoalCreate.svelte"
+
+  type Props = {
+    url: string
+    onClick: () => void
+    h?: string
+  }
+
+  const {url, h, onClick}: Props = $props()
+
+  const createGoal = () => pushModal(GoalCreate, {url, h})
+
+  const createCalendarEvent = () => pushModal(CalendarEventCreate, {url, h})
+
+  const createThread = () => pushModal(ThreadCreate, {url, h})
+
+  const createClassified = () => pushModal(ClassifiedCreate, {url, h})
+
+  let ul: Element
+
+  onMount(() => {
+    ul.addEventListener("click", onClick)
+  })
+</script>
+
+<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-md" bind:this={ul}>
+  <li>
+    <Button onclick={createGoal}>
+      <Icon size={4} icon={StarFallMinimalistic} />
+      Funding Goal
+    </Button>
+  </li>
+  <li>
+    <Button onclick={createCalendarEvent}>
+      <Icon size={4} icon={CalendarMinimalistic} />
+      Calendar Event
+    </Button>
+  </li>
+  <li>
+    <Button onclick={createClassified}>
+      <Icon size={4} icon={CaseMinimalistic} />
+      Classified Listing
+    </Button>
+  </li>
+  <li>
+    <Button onclick={createThread}>
+      <Icon size={4} icon={NotesMinimalistic} />
+      Create Thread
+    </Button>
+  </li>
+</ul>