Release 1.6.2

.env.template

@@ -1,6 +1,7 @@
 VITE_DEFAULT_PUBKEYS=06639a386c9c1014217622ccbcf40908c4f1a0c33e23f8d6d68f4abf655f8f71,266815e0c9210dfa324c6cba3573b14bee49da4209a9456f9484e5106cd408a5,391819e2f2f13b90cac7209419eb574ef7c0d1f4e81867fc24c47a3ce5e8a248,3bf0c63fcb93463407af97a5e5ee64fa883d107ef9e558472c4eb9aaaefa459d,3f770d65d3a764a9c5cb503ae123e62ec7598ad035d836e2a810f3877a745b24,55f04590674f3648f4cdc9dc8ce32da2a282074cd0b020596ee033d12d385185,58c741aa630c2da35a56a77c1d05381908bd10504fdd2d8b43f725efa6d23196,61066504617ee79387021e18c89fb79d1ddbc3e7bff19cf2298f40466f8715e9,6389be6491e7b693e9f368ece88fcd145f07c068d2c1bbae4247b9b5ef439d32,63fe6318dc58583cfe16810f86dd09e18bfd76aabc24a0081ce2856f330504ed,6e75f7972397ca3295e0f4ca0fbc6eb9cc79be85bafdd56bd378220ca8eee74e,76c71aae3a491f1d9eec47cba17e229cda4113a0bbb6e6ae1776d7643e29cafa,7fa56f5d6962ab1e3cd424e758c3002b8665f7b0d8dcee9fe9e288d7751ac194,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,84dee6e676e5bb67b4ad4e042cf70cbd8681155db535942fcc6a0533858a7240,97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322,b676ded7c768d66a757aa3967b1243d90bf57afb09d1044d3219d8d424e4aea0,dace63b00c42e6e017d00dd190a9328386002ff597b841eb5ef91de4f1ce8491,eeb11961b25442b16389fe6c7ebea9adf0ac36dd596816ea7119e521b8821b9e,fe7f6bc6f7338b76bbf80db402ade65953e20b2f23e66e898204b63cc42539a3
+VITE_DEFAULT_BLOSSOM_SERVERS=https://blossom.primal.net/
 VITE_BURROW_URL=
-VITE_PLATFORM_URL=https://flotilla.social
+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
@@ -10,7 +11,7 @@ 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_SIGNER_RELAYS=wss://relay.nsec.app/,wss://offchain.pub/
 VITE_NOTIFIER_PUBKEY=27b7c2ed89ef78322114225ea3ebf5f72c7767c2528d4d0c1854d039c00085df
 VITE_NOTIFIER_RELAY=wss://anchor.coracle.social/
 VITE_VAPID_PUBLIC_KEY=BIt2D4BdgdbCowD_0d3Np6GbrIGHxd7aIEUeZNe3hQuRlHz02OhzvDaai0XSFoJYVzSzdMjdyW-QhvW9_yq8j4Y

CHANGELOG.md

@@ -1,5 +1,113 @@
 # Changelog
 
+# 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

CONTEXT.md

@@ -0,0 +1,34 @@
+# Flotilla - AI Assistant Context
+
+## Project Overview
+
+Flotilla is a Discord-like Nostr client based on the concept of "relays as groups". It's built with SvelteKit, TypeScript, and Capacitor for cross-platform support (web, Android, iOS).
+
+On boot, please run `tree -I assets src` to get an idea of the project structure.
+
+## Key Dependencies
+
+`@welshman/*` libraries contain the majority of nostr-related functionality.
+`@app/core/*` contains additional app-specific data stores and commands.
+
+When creating an import statement, first identify what functionality you need. Search the codebase for components with similar functionality, and imitate their imports.
+
+## Dependency Graph (Acyclic)
+
+The project follows a strict dependency hierarchy:
+1. **External libraries** (bottom layer)
+2. **`lib/`** - Only depends on external libraries
+3. **`app/core/`** and **`app/util/`** - Can depend on `lib` only
+4. **`app/components/`** - Can depend on anything in `app` or `lib`
+5. **`routes/`** - Can depend on anything (top layer)
+
+**Import Ordering Convention:** Always sort imports by dependency level:
+1. Third-party libraries first
+2. Then `lib` imports
+3. Then `app` imports
+
+## Development Conventions
+
+When creating components related to a given space or room, parameterize them only with the entity's identifier (i.e., `url` and `h`). Only pass additional props if they can't be derived from the identifiers. For example, a room's `members` should be derived inside the child component, not passed in by the parent.
+
+Do not use null, only undefined.

CONTRIBUTING.md

@@ -69,7 +69,7 @@ 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.
+- NIP 29 groups are called "rooms". Conventionally, "h" is a group id, while a "room" 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.

README.md

@@ -8,8 +8,8 @@ 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.

android/app/build.gradle

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

android/app/capacitor.build.gradle

@@ -11,6 +11,7 @@ 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')

android/capacitor.settings.gradle

@@ -1,27 +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@7.4.3_@capacitor+core@7.4.3/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@7.0.0-alpha.1_@capacitor+core@7.4.3/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@7.1.0_@capacitor+core@7.4.3/node_modules/@capacitor/app/android')
+
+include ':capacitor-filesystem'
+project(':capacitor-filesystem').projectDir = new File('../node_modules/.pnpm/@capacitor+filesystem@7.1.4_@capacitor+core@7.4.3/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@7.0.3_@capacitor+core@7.4.3/node_modules/@capacitor/keyboard/android')
 
 include ':capacitor-preferences'
-project(':capacitor-preferences').projectDir = new File('../node_modules/.pnpm/@capacitor+preferences@7.0.2_@capacitor+core@7.2.0/node_modules/@capacitor/preferences/android')
+project(':capacitor-preferences').projectDir = new File('../node_modules/.pnpm/@capacitor+preferences@7.0.2_@capacitor+core@7.4.3/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@7.0.3_@capacitor+core@7.4.3/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@7.0.0_@capacitor+core@7.2.0/node_modules/@capawesome/capacitor-android-dark-mode-support/android')
+project(':capawesome-capacitor-android-dark-mode-support').projectDir = new File('../node_modules/.pnpm/@capawesome+capacitor-android-dark-mode-support@7.0.0_@capacitor+core@7.4.3/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@7.0.1_@capacitor+core@7.4.3/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@7.4.3/node_modules/nostr-signer-capacitor-plugin/android')

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"

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 */,
@@ -354,14 +358,14 @@
 				CODE_SIGN_ENTITLEMENTS = "Flotilla Chat.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 17;
+				CURRENT_PROJECT_VERSION = 28;
 				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;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.2.4;
+				MARKETING_VERSION = 1.6.2;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -380,14 +384,14 @@
 				CODE_SIGN_ENTITLEMENTS = "Flotilla Chat.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 17;
+				CURRENT_PROJECT_VERSION = 28;
 				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;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.2.4;
+				MARKETING_VERSION = 1.6.2;
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

ios/App/Podfile

@@ -1,4 +1,4 @@
-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@7.4.3_@capacitor+core@7.4.3/node_modules/@capacitor/ios/scripts/pods_helpers'
 
 platform :ios, '14.0'
 use_frameworks!
@@ -9,15 +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 'CapacitorPreferences', :path => '../../node_modules/.pnpm/@capacitor+preferences@7.0.2_@capacitor+core@7.2.0/node_modules/@capacitor/preferences'
-  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@7.4.3_@capacitor+core@7.4.3/node_modules/@capacitor/ios'
+  pod 'CapacitorCordova', :path => '../../node_modules/.pnpm/@capacitor+ios@7.4.3_@capacitor+core@7.4.3/node_modules/@capacitor/ios'
+  pod 'CapacitorCommunitySafeArea', :path => '../../node_modules/.pnpm/@capacitor-community+safe-area@7.0.0-alpha.1_@capacitor+core@7.4.3/node_modules/@capacitor-community/safe-area'
+  pod 'CapacitorApp', :path => '../../node_modules/.pnpm/@capacitor+app@7.1.0_@capacitor+core@7.4.3/node_modules/@capacitor/app'
+  pod 'CapacitorFilesystem', :path => '../../node_modules/.pnpm/@capacitor+filesystem@7.1.4_@capacitor+core@7.4.3/node_modules/@capacitor/filesystem'
+  pod 'CapacitorKeyboard', :path => '../../node_modules/.pnpm/@capacitor+keyboard@7.0.3_@capacitor+core@7.4.3/node_modules/@capacitor/keyboard'
+  pod 'CapacitorPreferences', :path => '../../node_modules/.pnpm/@capacitor+preferences@7.0.2_@capacitor+core@7.4.3/node_modules/@capacitor/preferences'
+  pod 'CapacitorPushNotifications', :path => '../../node_modules/.pnpm/@capacitor+push-notifications@7.0.3_@capacitor+core@7.4.3/node_modules/@capacitor/push-notifications'
+  pod 'CapawesomeCapacitorBadge', :path => '../../node_modules/.pnpm/@capawesome+capacitor-badge@7.0.1_@capacitor+core@7.4.3/node_modules/@capawesome/capacitor-badge'
+  pod 'NostrSignerCapacitorPlugin', :path => '../../node_modules/.pnpm/nostr-signer-capacitor-plugin@0.0.4_@capacitor+core@7.4.3/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>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flotilla",
-  "version": "1.2.4",
+  "version": "1.6.2",
   "private": true,
   "scripts": {
     "dev": "vite dev",
@@ -10,76 +10,78 @@
     "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)$' | 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.37.0",
+    "@sentry/cli": "^2.56.1",
+    "@sveltejs/kit": "^2.46.5",
+    "@sveltejs/vite-plugin-svelte": "^4.0.4",
+    "@types/eslint": "^9.6.1",
+    "autoprefixer": "^10.4.21",
     "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.37.0",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-svelte": "^2.46.1",
+    "globals": "^15.15.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "svelte": "^5.39.12",
+    "svelte-check": "^4.3.3",
+    "tailwindcss": "^3.4.18",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.1",
+    "vite": "^5.4.20"
   },
   "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/android": "^7.4.3",
+    "@capacitor/app": "^7.1.0",
+    "@capacitor/cli": "^7.4.3",
+    "@capacitor/core": "^7.4.3",
+    "@capacitor/filesystem": "^7.1.4",
+    "@capacitor/ios": "^7.4.3",
+    "@capacitor/keyboard": "^7.0.3",
     "@capacitor/preferences": "^7.0.2",
-    "@capacitor/push-notifications": "^7.0.1",
+    "@capacitor/push-notifications": "^7.0.3",
     "@capawesome/capacitor-android-dark-mode-support": "^7.0.0",
     "@capawesome/capacitor-badge": "^7.0.1",
-    "@getalby/sdk": "^5.1.0",
+    "@getalby/lightning-tools": "^6.0.0",
+    "@getalby/sdk": "^5.1.2",
     "@poppanator/sveltekit-svg": "^4.2.1",
-    "@sentry/browser": "^8.35.0",
-    "@sveltejs/adapter-static": "^3.0.4",
-    "@tiptap/core": "^2.12.0",
+    "@sentry/browser": "^8.55.0",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@tiptap/core": "^2.26.3",
     "@types/qrcode": "^1.5.5",
     "@types/throttle-debounce": "^5.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",
-    "@vite-pwa/sveltekit": "^0.6.6",
-    "@welshman/app": "^0.4.7",
-    "@welshman/content": "^0.4.7",
-    "@welshman/editor": "^0.4.7",
-    "@welshman/feeds": "^0.4.7",
-    "@welshman/lib": "^0.4.7",
-    "@welshman/net": "^0.4.7",
-    "@welshman/relay": "^0.4.7",
-    "@welshman/router": "^0.4.7",
-    "@welshman/signer": "^0.4.7",
-    "@welshman/store": "^0.4.7",
-    "@welshman/util": "^0.4.7",
+    "@vite-pwa/sveltekit": "^0.6.8",
+    "@welshman/app": "^0.7.1",
+    "@welshman/content": "^0.7.1",
+    "@welshman/editor": "^0.7.1",
+    "@welshman/feeds": "^0.7.1",
+    "@welshman/lib": "^0.7.1",
+    "@welshman/net": "^0.7.1",
+    "@welshman/router": "^0.7.1",
+    "@welshman/signer": "^0.7.1",
+    "@welshman/store": "^0.7.1",
+    "@welshman/util": "^0.7.1",
     "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.16.0",
+    "dotenv": "^16.6.1",
+    "emoji-picker-element": "^1.27.0",
+    "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",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.4",
     "throttle-debounce": "^5.0.2",

src/app.css

@@ -62,6 +62,8 @@
   --primary-content: oklch(var(--pc));
   --secondary: oklch(var(--s));
   --secondary-content: oklch(var(--sc));
+  --neutral: oklch(var(--n));
+  --neutral-content: oklch(var(--nc));
 }
 
 /* safe area insets */
@@ -215,12 +217,6 @@
   @apply ellipsize;
 }
 
-@media (max-width: 639px) {
-  [data-tip]::before {
-    display: none;
-  }
-}
-
 .content-padding-x {
   @apply px-4 sm:px-8 md:px-12;
 }
@@ -278,8 +274,8 @@
 }
 
 .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);
 }
@@ -396,10 +392,20 @@ 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 {

src/app/components/AlertAdd.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {preventDefault} from "@lib/html"
-  import {randomInt, displayList, TIMEZONE, identity} from "@welshman/lib"
+  import {randomInt, map, displayList, identity, TIMEZONE} from "@welshman/lib"
   import {displayRelayUrl, getTagValue, THREAD, MESSAGE, EVENT_TIME, COMMENT} from "@welshman/util"
   import type {Filter} from "@welshman/util"
   import {makeIntersectionFeed, makeRelayFeed, feedFromFilters} from "@welshman/feeds"
@@ -13,7 +13,7 @@
   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} from "@app/core/state"
+  import {alertsById, userSpaceUrls} from "@app/core/state"
   import {requestRelayClaim} from "@app/core/requests"
   import {createAlert} from "@app/core/commands"
   import {canSendPushNotifications} from "@app/util/push"
@@ -37,7 +37,7 @@
     hideSpaceField = false,
   }: Props = $props()
 
-  const timezoneOffset = parseInt(TIMEZONE.slice(3)) / 100
+  const timezoneOffset = parseInt(TIMEZONE.split(":")?.[0] || "00")
   const minute = randomInt(0, 59)
   const hour = (17 - timezoneOffset) % 24
   const WEEKLY = `0 ${minute} ${hour} * * 1`
@@ -45,7 +45,9 @@
 
   let loading = $state(false)
   let cron = $state(WEEKLY)
-  let email = $state($alerts.map(a => getTagValue("email", a.tags)).filter(identity)[0] || "")
+  let email = $state(
+    map(a => getTagValue("email", a.tags), $alertsById.values()).filter(identity)[0] || "",
+  )
 
   const back = () => history.back()
 
@@ -174,7 +176,7 @@
       {#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)}
+          {#each $userSpaceUrls as url (url)}
             <option value={url}>{displayRelayUrl(url)}</option>
           {/each}
         </select>

src/app/components/Alerts.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-  import {sleep} from "@welshman/lib"
-  import {getTagValue, getAddress} from "@welshman/util"
+  import {sleep, filter} from "@welshman/lib"
+  import {getTagValue, getAddress, RelayMode} from "@welshman/util"
   import {isRelayFeed, findFeed} from "@welshman/feeds"
+  import {getPubkeyRelays, pubkey} from "@welshman/app"
   import Inbox from "@assets/icons/inbox.svg?dataurl"
+  import Bell from "@assets/icons/bell.svg?dataurl"
   import AddCircle from "@assets/icons/add-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -10,8 +12,15 @@
   import AlertItem from "@app/components/AlertItem.svelte"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
-  import {alerts, dmAlert, deriveAlertStatus, userInboxRelays, getAlertFeed} from "@app/core/state"
+  import {
+    dmAlert,
+    alertsById,
+    deriveAlertStatus,
+    getAlertFeed,
+    userSettingsValues,
+  } from "@app/core/state"
   import {deleteAlert, createDmAlert} from "@app/core/commands"
+  import {clearBadges} from "../util/notifications"
 
   type Props = {
     url?: string
@@ -24,7 +33,7 @@
   const dmStatus = $derived($dmAlert ? deriveAlertStatus(getAddress($dmAlert.event)) : undefined)
 
   const filteredAlerts = $derived(
-    $alerts.filter(alert => {
+    filter(alert => {
       const feed = getAlertFeed(alert)
 
       // Skip non-feeds and DM alerts
@@ -34,7 +43,7 @@
       if (url) return findFeed(feed, f => isRelayFeed(f) && f.includes(url))
 
       return true
-    }),
+    }, $alertsById.values()),
   )
 
   const startAlert = () => pushModal(AlertAdd, {url, channel, hideSpaceField})
@@ -42,15 +51,15 @@
   const uncheckDmAlert = async (message: string) => {
     await sleep(100)
 
-    toggle.checked = false
+    directMessagesNotificationToggle.checked = false
     pushToast({theme: "error", message})
   }
 
-  const onToggle = async () => {
+  const onDirectMessagesNotificationToggle = async () => {
     if ($dmAlert) {
       deleteAlert($dmAlert)
     } else {
-      if ($userInboxRelays.length === 0) {
+      if (getPubkeyRelays($pubkey!, RelayMode.Messaging).length === 0) {
         return uncheckDmAlert("Please set up your messaging relays before enabling alerts.")
       }
 
@@ -64,11 +73,23 @@
     }
   }
 
-  let toggle: HTMLInputElement
+  const onShowBadgeOnUnreadToggle = async () => {
+    $userSettingsValues.show_notifications_badge = !$userSettingsValues.show_notifications_badge
+
+    if (!$userSettingsValues.show_notifications_badge) {
+      await clearBadges()
+    }
+  }
+
+  const onDirectMessagesNotificationSoundToggle = async () => {
+    $userSettingsValues.play_notification_sound = !$userSettingsValues.play_notification_sound
+  }
+
+  let directMessagesNotificationToggle: HTMLInputElement
 </script>
 
 <div class="col-4">
-  <div class="card2 bg-alt flex flex-col gap-6 shadow-xl">
+  <div class="card2 bg-alt flex flex-col gap-6 shadow-md">
     <div class="flex items-center justify-between">
       <strong class="flex items-center gap-3">
         <Icon icon={Inbox} />
@@ -87,15 +108,37 @@
       {/each}
     </div>
   </div>
-  <div class="card2 bg-alt flex flex-col gap-4 shadow-xl">
+  <div class="card2 bg-alt flex flex-col gap-4 shadow-md">
+    <div class="flex items-center justify-between">
+      <strong class="flex items-center gap-3">
+        <Icon icon={Bell} />
+        Notifications
+      </strong>
+    </div>
     <div class="flex justify-between">
       <p>Notify me about new direct messages</p>
       <input
         type="checkbox"
         class="toggle toggle-primary"
-        bind:this={toggle}
+        bind:this={directMessagesNotificationToggle}
         checked={Boolean($dmAlert)}
-        oninput={onToggle} />
+        oninput={onDirectMessagesNotificationToggle} />
+    </div>
+    <div class="flex justify-between">
+      <p>Show badge for unread direct messages</p>
+      <input
+        type="checkbox"
+        class="toggle toggle-primary"
+        checked={Boolean($userSettingsValues.show_notifications_badge)}
+        oninput={onShowBadgeOnUnreadToggle} />
+    </div>
+    <div class="flex justify-between">
+      <p>Play sound for new direct messages</p>
+      <input
+        type="checkbox"
+        class="toggle toggle-primary"
+        checked={Boolean($userSettingsValues.play_notification_sound)}
+        oninput={onDirectMessagesNotificationSoundToggle} />
     </div>
     {#if $dmStatus}
       {@const status = getTagValue("status", $dmStatus.tags) || "error"}

src/app/components/CalendarEventActions.svelte

@@ -1,31 +1,33 @@
 <script lang="ts">
   import type {TrustedEvent, EventContent} from "@welshman/util"
+  import {getTagValue} from "@welshman/util"
   import {pubkey} from "@welshman/app"
   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"
   import Pen2 from "@assets/icons/pen-2.svg?dataurl"
 
-  const {
-    url,
-    event,
-    showActivity = false,
-  }: {
+  type Props = {
     url: string
     event: TrustedEvent
+    showRoom?: boolean
     showActivity?: boolean
-  } = $props()
+  }
 
-  const shouldProtect = canEnforceNip70(url)
+  const {url, event, showRoom, showActivity}: Props = $props()
 
+  const h = getTagValue("h", event.tags)
   const path = makeCalendarPath(url, event.id)
+  const shouldProtect = canEnforceNip70(url)
 
   const editEvent = () => pushModal(CalendarEventEdit, {url, event})
 
@@ -36,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={Pen2} />
-              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

@@ -4,12 +4,13 @@
 
   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()}

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/CalendarEventForm.svelte

@@ -23,6 +23,7 @@
 
   type Props = {
     url: string
+    h?: string
     header: Snippet
     initialValues?: {
       d: string
@@ -34,7 +35,7 @@
     }
   }
 
-  const {url, header, initialValues}: Props = $props()
+  const {url, h, header, initialValues}: Props = $props()
 
   const shouldProtect = canEnforceNip70(url)
 
@@ -84,6 +85,10 @@
       tags.push(PROTECTED)
     }
 
+    if (h) {
+      tags.push(["h", h])
+    }
+
     const event = makeEvent(EVENT_TIME, {content, tags})
 
     pushToast({message: "Your event has been saved!"})

src/app/components/CalendarEventHeader.svelte

@@ -17,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={ClockCircle} 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} 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, event.id)}>
   <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/ChannelCompose.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-  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 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={GallerySend} />
-    {/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={Plane} />
-  </Button>
-</form>

src/app/components/ChannelMessage.svelte

@@ -1,113 +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 Reply from "@assets/icons/reply-2.svg?dataurl"
-  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,53 +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"
-  import Code2 from "@assets/icons/code-2.svg?dataurl"
-  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
-  import Danger from "@assets/icons/danger.svg?dataurl"
-
-  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={Code2} />
-      Message Details
-    </Button>
-  </li>
-  {#if event.pubkey === $pubkey}
-    <li>
-      <Button onclick={showDelete} class="text-error">
-        <Icon size={4} icon={TrashBin2} />
-        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/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,9 @@
     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"
@@ -43,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,
-    userSettingsValues,
-    deriveChat,
-    splitChatId,
-    PLATFORM_NAME,
-  } from "@app/core/state"
+  import {INDEXER_RELAYS, 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
@@ -126,14 +121,13 @@
 
     // 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: $userSettingsValues.send_delay + ms(i)}),
-      )
-    }
+    const thunks = Array.from(enumerate(templates)).map(([i, event]) =>
+      sendWrapped({
+        event,
+        recipients: pubkeys,
+        delay: $userSettingsValues.send_delay + ms(i),
+      }),
+    )
 
     pushToast({
       timeout: 30_000,
@@ -184,7 +178,7 @@
 
   onMount(() => {
     for (const pubkey of others) {
-      loadInboxRelaySelections(pubkey, INDEXER_RELAYS, true)
+      loadMessagingRelayList(pubkey, INDEXER_RELAYS, true)
     }
 
     const observer = new ResizeObserver(() => {
@@ -209,19 +203,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} />
@@ -236,55 +228,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.
+          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.
+          {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

@@ -10,11 +10,10 @@
   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
 
@@ -39,11 +38,11 @@
   }
 
   const editor = makeEditor({
-    url,
     autofocus,
     submit,
     uploading,
     aggressive: true,
+    encryptFiles: true,
   })
 </script>
 

src/app/components/ChatComposeParent.svelte

@@ -5,7 +5,7 @@
   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,
@@ -19,16 +19,11 @@
 </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={CloseCircle} />

src/app/components/ChatEnable.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
   import {preventDefault} from "@lib/html"
+  import {shouldUnwrap} from "@welshman/app"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
@@ -9,7 +10,6 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {PLATFORM_NAME} from "@app/core/state"
-  import {enableGiftWraps} from "@app/core/commands"
   import {clearModals} from "@app/util/modal"
 
   const {next} = $props()
@@ -18,17 +18,13 @@
 
   let loading = $state(false)
 
-  const enableChat = async () => {
-    enableGiftWraps()
-    clearModals()
-    goto(nextUrl)
-  }
-
   const submit = async () => {
     loading = true
 
     try {
-      await enableChat()
+      shouldUnwrap.set(true)
+      clearModals()
+      goto(nextUrl)
     } finally {
       loading = false
     }

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, 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"
@@ -27,7 +27,7 @@
 
   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,25 @@
+<script lang="ts">
+  import Button from "@lib/components/Button.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import Profile from "@app/components/Profile.svelte"
+
+  interface Props {
+    pubkeys: string[]
+  }
+
+  const {pubkeys}: Props = $props()
+</script>
+
+<div class="column gap-4">
+  <ModalHeader>
+    {#snippet title()}
+      <div>People in this conversation</div>
+    {/snippet}
+  </ModalHeader>
+  {#each pubkeys as pubkey (pubkey)}
+    <div class="card2 bg-alt">
+      <Profile {pubkey} />
+    </div>
+  {/each}
+  <Button class="btn btn-primary" onclick={() => history.back()}>Got it</Button>
+</div>

src/app/components/ChatMenu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import {waitForThunkCompletion} from "@welshman/app"
+  import {RelayMode} from "@welshman/util"
+  import {waitForThunkCompletion, getPubkeyRelays, pubkey} from "@welshman/app"
   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"
@@ -11,7 +12,7 @@
   import {setChecked} from "@app/util/notifications"
   import {pushModal} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
-  import {dmAlert, userInboxRelays} from "@app/core/state"
+  import {dmAlert} from "@app/core/state"
   import {deleteAlert, createDmAlert} from "@app/core/commands"
 
   const startChat = () => pushModal(ChatStart, {}, {replaceState: true})
@@ -22,7 +23,7 @@
   }
 
   const enableAlerts = async () => {
-    if ($userInboxRelays.length === 0) {
+    if (getPubkeyRelays($pubkey!, RelayMode.Messaging).length === 0) {
       return pushToast({
         theme: "error",
         message: "Please set up your messaging relays before enabling alerts.",

src/app/components/ChatMessage.svelte

@@ -2,14 +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"
@@ -29,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})
 
@@ -100,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

@@ -15,7 +15,10 @@
   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">

src/app/components/ChatMessageMenuMobile.svelte

@@ -24,7 +24,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})
@@ -43,20 +46,20 @@
 </script>
 
 <div class="col-2">
-  <Button class="btn btn-primary w-full" onclick={showEmojiPicker}>
-    <Icon size={4} icon={SmileCircle} />
-    Send Reaction
-  </Button>
-  <Button class="btn btn-neutral w-full" onclick={sendReply}>
-    <Icon size={4} icon={Reply} />
-    Send Reply
+  <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" onclick={showInfo}>
-    <Icon size={4} icon={Code2} />
-    Message Details
+  <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>

src/app/components/ComposeMenu.svelte

@@ -0,0 +1,53 @@
+<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 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 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})
+
+  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} />
+      Create Funding Goal
+    </Button>
+  </li>
+  <li>
+    <Button onclick={createCalendarEvent}>
+      <Icon size={4} icon={CalendarMinimalistic} />
+      Create Calendar Event
+    </Button>
+  </li>
+  <li>
+    <Button onclick={createThread}>
+      <Icon size={4} icon={NotesMinimalistic} />
+      Create Thread
+    </Button>
+  </li>
+</ul>

src/app/components/Content.svelte

@@ -18,6 +18,7 @@
     isAddress,
     isNewline,
   } from "@welshman/content"
+  import type {Parsed} from "@welshman/content"
   import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
@@ -39,10 +40,8 @@
     minLength?: number
     maxLength?: number
     showEntire?: boolean
-    hideMediaAtDepth?: number
     expandMode?: string
-    minimalQuote?: boolean
-    depth?: number
+    trimParent?: boolean
     url?: string
   }
 
@@ -51,10 +50,8 @@
     minLength = 500,
     maxLength = 700,
     showEntire = $bindable(false),
-    hideMediaAtDepth = 1,
     expandMode = "block",
-    minimalQuote = false,
-    depth = 0,
+    trimParent = false,
     url,
   }: Props = $props()
 
@@ -67,13 +64,13 @@
   const isBlock = (i: number) => {
     const parsed = fullContent[i]
 
-    if (!parsed || hideMediaAtDepth <= depth) return false
+    if (!parsed) return false
 
-    if (isLink(parsed) && $userSettingsValues.show_media && isStartOrEnd(i)) {
+    if (isLink(parsed) && $userSettingsValues.show_media && isStartAndEnd(i)) {
       return true
     }
 
-    if ((isEvent(parsed) || isAddress(parsed)) && isStartOrEnd(i)) {
+    if (isQuote(parsed) && isStartAndEnd(i)) {
       return true
     }
 
@@ -95,7 +92,7 @@
 
   const isStartAndEnd = (i: number) => isStart(i) && isEnd(i)
 
-  const isStartOrEnd = (i: number) => isStart(i) || isEnd(i)
+  const isQuote = (p: Parsed) => isEvent(p) || isAddress(p)
 
   const ignoreWarning = () => {
     warning = null
@@ -105,15 +102,37 @@
     $userSettingsValues.hide_sensitive && event.tags.find(nthEq(0, "content-warning"))?.[1],
   )
 
-  const shortContent = $derived(
-    showEntire
-      ? fullContent
-      : truncate(fullContent, {
-          minLength,
-          maxLength,
-          mediaLength: hideMediaAtDepth <= depth ? 20 : 200,
-        }),
-  )
+  const dropWhile = <T,>(f: (x: T) => boolean, xs: Iterable<T>) => {
+    const result: T[] = []
+
+    for (const x of xs) {
+      if (result.length === 0 && f(x)) {
+        continue
+      }
+
+      result.push(x)
+    }
+
+    return result
+  }
+
+  const shortContent = $derived.by(() => {
+    let result = fullContent
+
+    if (trimParent && result.length > 0 && isQuote(result[0])) {
+      result = dropWhile(p => isQuote(p) || isNewline(p), result)
+    }
+
+    if (!showEntire) {
+      result = truncate(result, {
+        minLength,
+        maxLength,
+        mediaLength: 200,
+      })
+    }
+
+    return result
+  })
 
   const hasEllipsis = $derived(shortContent.some(isEllipsis))
   const expandInline = $derived(hasEllipsis && expandMode === "inline")
@@ -154,15 +173,9 @@
           {/if}
         {:else if isProfile(parsed)}
           <ContentMention value={parsed.value} {url} />
-        {:else if isEvent(parsed) || isAddress(parsed)}
+        {:else if isQuote(parsed)}
           {#if isBlock(i)}
-            <ContentQuote
-              {depth}
-              {url}
-              {hideMediaAtDepth}
-              value={parsed.value}
-              {event}
-              minimal={minimalQuote} />
+            <ContentQuote {url} value={parsed.value} {event} />
           {:else}
             <Link
               external

src/app/components/ContentEmoji.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type {ParsedEmojiValue} from "@welshman/content"
-  import {imgproxy} from "@app/core/state"
 
   export let value: ParsedEmojiValue
 
@@ -8,10 +7,7 @@
 </script>
 
 {#if value.url}
-  <img
-    {alt}
-    src={imgproxy(value.url, {w: 24, h: 24})}
-    class="-mt-0.5 inline h-[1em] min-w-[1em] align-middle" />
+  <img {alt} src={value.url} class="-mt-0.5 inline h-[1em] min-w-[1em] align-middle" />
 {:else}
   {alt}
 {/if}

src/app/components/ContentLinkBlock.svelte

@@ -1,17 +1,25 @@
 <script lang="ts">
-  import {ellipsize, displayUrl, postJson} from "@welshman/lib"
-  import {dufflepud, imgproxy} from "@app/core/state"
+  import {call, ellipsize, displayUrl, postJson} from "@welshman/lib"
+  import {isRelayUrl} from "@welshman/util"
   import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
   import {pushModal} from "@app/util/modal"
+  import {dufflepud, PLATFORM_URL} from "@app/core/state"
+  import {makeSpacePath} from "@app/util/routes"
 
   const {value, event} = $props()
 
   let hideImage = $state(false)
 
   const url = value.url.toString()
+  const [href, external] = call(() => {
+    if (isRelayUrl(url)) return [makeSpacePath(url), false]
+    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
+
+    return [url, true]
+  })
 
   const loadPreview = async () => {
     const json = await postJson(dufflepud("link/preview"), {url})
@@ -30,7 +38,7 @@
   const expand = () => pushModal(ContentLinkDetail, {value, event}, {fullscreen: true})
 </script>
 
-<Link external href={url} class="my-2 block">
+<Link {external} {href} class="my-2 block">
   <div class="overflow-hidden rounded-box">
     {#if url.match(/\.(mov|webm|mp4)$/)}
       <video controls src={url} class="max-h-96 object-contain object-center">
@@ -49,9 +57,9 @@
         <div class="bg-alt flex max-w-xl flex-col leading-normal">
           {#if preview.image && !hideImage}
             <img
-              alt="Link preview"
+              alt=""
               onerror={onError}
-              src={imgproxy(preview.image)}
+              src={preview.image}
               class="bg-alt max-h-72 rounded-t-box object-contain object-center" />
           {/if}
           <div class="flex flex-col gap-2 p-4">

src/app/components/ContentLinkBlockImage.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
   import {onMount, onDestroy} from "svelte"
   import {displayUrl} from "@welshman/lib"
-  import {getTags, decryptFile, getTagValue, tagsFromIMeta} from "@welshman/util"
+  import {
+    getTags,
+    getBlob,
+    decryptFile,
+    getTagValue,
+    tagsFromIMeta,
+    makeBlossomAuthEvent,
+  } from "@welshman/util"
+  import {signer} from "@welshman/app"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
-  import {imgproxy} from "@app/core/state"
 
   const {value, event, ...props} = $props()
 
@@ -14,18 +21,35 @@
       .map(tagsFromIMeta)
       .find(meta => getTagValue("url", meta) === url) || event.tags
 
+  // Fallback to filename if hash was omitted from the message for interoperability
+  const hash = getTagValue("x", meta) || url.split(/[\/\.]/).slice(-2)[0]
   const key = getTagValue("decryption-key", meta)
   const nonce = getTagValue("decryption-nonce", meta)
   const algorithm = getTagValue("encryption-algorithm", meta)
 
-  const onError = () => {
-    hasError = true
+  const onError = async () => {
+    // If the image failed to load, try authenticating
+    if (hash && $signer) {
+      const server = new URL(url).origin
+      const template = makeBlossomAuthEvent({action: "get", server, hashes: [hash]})
+      const authEvent = await $signer.sign(template)
+      const res = await getBlob(server, hash, {authEvent})
+
+      if (res.status === 200) {
+        src = URL.createObjectURL(await res.blob())
+      } else {
+        hasError = true
+      }
+    } else {
+      hasError = true
+    }
   }
 
   let hasError = $state(false)
-  let src = $state(imgproxy(url))
+  let src = $state("")
 
   onMount(async () => {
+    // If we have an encryption algorithm, fetch and decrypt
     if (algorithm === "aes-gcm" && key && nonce) {
       const response = await fetch(url)
 
@@ -33,8 +57,10 @@
         const ciphertext = new Uint8Array(await response.arrayBuffer())
         const decryptedData = await decryptFile({ciphertext, key, nonce, algorithm})
 
-        src = URL.createObjectURL(new Blob([decryptedData]))
+        src = URL.createObjectURL(new Blob([new Uint8Array(decryptedData)]))
       }
+    } else {
+      src = url
     }
   })
 
@@ -48,6 +74,6 @@
     <Icon icon={LinkRound} size={3} class="inline-block" />
     {displayUrl(url)}
   </a>
-{:else}
+{:else if src}
   <img alt="" {src} onerror={onError} {...props} />
 {/if}

src/app/components/ContentLinkInline.svelte

@@ -1,15 +1,24 @@
 <script lang="ts">
-  import {displayUrl} from "@welshman/lib"
+  import {call, displayUrl} from "@welshman/lib"
+  import {isRelayUrl} from "@welshman/util"
   import {preventDefault} from "@lib/html"
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
   import {pushModal} from "@app/util/modal"
+  import {PLATFORM_URL} from "@app/core/state"
+  import {makeSpacePath} from "@app/util/routes"
 
   const {value} = $props()
 
   const url = value.url.toString()
+  const [href, external] = call(() => {
+    if (isRelayUrl(url)) return [makeSpacePath(url), false]
+    if (url.startsWith(PLATFORM_URL)) return [url.replace(PLATFORM_URL, ""), false]
+
+    return [url, true]
+  })
 
   const expand = () => pushModal(ContentLinkDetail, {url}, {fullscreen: true})
 </script>
@@ -21,7 +30,7 @@
     {displayUrl(url)}
   </a>
 {:else}
-  <Link external href={url} class="link-content whitespace-nowrap">
+  <Link {external} {href} class="link-content whitespace-nowrap">
     <Icon icon={LinkRound} size={3} class="inline-block" />
     {displayUrl(url)}
   </Link>

src/app/components/ContentMention.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {removeNil} from "@welshman/lib"
+  import {removeUndefined} from "@welshman/lib"
   import type {ProfilePointer} from "@welshman/content"
   import {deriveProfileDisplay} from "@welshman/app"
   import Button from "@lib/components/Button.svelte"
@@ -13,7 +13,7 @@
 
   const {value, url}: Props = $props()
 
-  const display = deriveProfileDisplay(value.pubkey, removeNil([url]))
+  const display = deriveProfileDisplay(value.pubkey, removeUndefined([url]))
 
   const openProfile = () => pushModal(ProfileDetail, {pubkey: value.pubkey, url})
 </script>

src/app/components/ContentMinimal.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import {fromNostrURI} from "@welshman/util"
+  import {nthEq} from "@welshman/lib"
+  import {
+    parse,
+    truncate,
+    renderAsHtml,
+    isText,
+    isEmoji,
+    isTopic,
+    isCode,
+    isCashu,
+    isInvoice,
+    isLink,
+    isProfile,
+    isEvent,
+    isAddress,
+    isNewline,
+  } from "@welshman/content"
+  import type {Parsed} from "@welshman/content"
+  import Link from "@lib/components/Link.svelte"
+  import Danger from "@assets/icons/danger-triangle.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import ContentToken from "@app/components/ContentToken.svelte"
+  import ContentEmoji from "@app/components/ContentEmoji.svelte"
+  import ContentCode from "@app/components/ContentCode.svelte"
+  import ContentLinkInline from "@app/components/ContentLinkInline.svelte"
+  import ContentNewline from "@app/components/ContentNewline.svelte"
+  import ContentTopic from "@app/components/ContentTopic.svelte"
+  import ContentMention from "@app/components/ContentMention.svelte"
+  import {entityLink, userSettingsValues} from "@app/core/state"
+
+  interface Props {
+    event: any
+    trimParent?: boolean
+    url?: string
+  }
+
+  const {event, trimParent = false, url}: Props = $props()
+
+  const fullContent = parse(event)
+
+  const isBoundary = (i: number) => {
+    const parsed = fullContent[i]
+
+    if (!parsed || isNewline(parsed)) return true
+    if (isText(parsed)) return Boolean(parsed.value.match(/^\s+$/))
+
+    return false
+  }
+
+  const isStart = (i: number) => isBoundary(i - 1)
+
+  const isEnd = (i: number) => isBoundary(i + 1)
+
+  const isStartAndEnd = (i: number) => isStart(i) && isEnd(i)
+
+  const isQuote = (p: Parsed) => isEvent(p) || isAddress(p)
+
+  const ignoreWarning = () => {
+    warning = null
+  }
+
+  let warning = $state(
+    $userSettingsValues.hide_sensitive && event.tags.find(nthEq(0, "content-warning"))?.[1],
+  )
+
+  const dropWhile = <T,>(f: (x: T) => boolean, xs: Iterable<T>) => {
+    const result: T[] = []
+
+    for (const x of xs) {
+      if (result.length === 0 && f(x)) {
+        continue
+      }
+
+      result.push(x)
+    }
+
+    return result
+  }
+
+  const shortContent = $derived.by(() => {
+    let result = fullContent
+
+    if (trimParent && result.length > 0 && isQuote(result[0])) {
+      result = dropWhile(p => isQuote(p) || isNewline(p), result)
+    }
+
+    return truncate(result, {minLength: 200, maxLength: 300, mediaLength: 20})
+  })
+</script>
+
+<div class="relative">
+  {#if warning}
+    <div class="card2 card2-sm bg-alt row-2">
+      <Icon icon={Danger} />
+      <p>
+        This note has been flagged by the author as "{warning}".<br />
+        <Button class="link" onclick={ignoreWarning}>Show anyway</Button>
+      </p>
+    </div>
+  {:else}
+    <div class="overflow-hidden text-ellipsis break-words">
+      {#each shortContent as parsed, i}
+        {#if isNewline(parsed)}
+          <ContentNewline value={parsed.value} />
+        {:else if isTopic(parsed)}
+          <ContentTopic value={parsed.value} />
+        {:else if isEmoji(parsed)}
+          <ContentEmoji value={parsed.value} />
+        {:else if isCode(parsed)}
+          <ContentCode
+            value={parsed.value}
+            isBlock={isStartAndEnd(i) || parsed.value.includes("\n")} />
+        {:else if isCashu(parsed) || isInvoice(parsed)}
+          <ContentToken value={parsed.value} />
+        {:else if isLink(parsed)}
+          <ContentLinkInline value={parsed.value} />
+        {:else if isProfile(parsed)}
+          <ContentMention value={parsed.value} {url} />
+        {:else if isQuote(parsed)}
+          <Link
+            external
+            class="overflow-hidden text-ellipsis whitespace-nowrap underline"
+            href={entityLink(parsed.raw)}>
+            {fromNostrURI(parsed.raw).slice(0, 16) + "…"}
+          </Link>
+        {:else}
+          {@html renderAsHtml(parsed)}
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>

src/app/components/ContentQuote.svelte

@@ -6,20 +6,17 @@
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
-  import NoteContent from "@app/components/NoteContent.svelte"
+  import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
   import {deriveEvent, entityLink} from "@app/core/state"
   import {goToEvent} from "@app/util/routes"
 
   type Props = {
     value: any
-    hideMediaAtDepth: number
     event: TrustedEvent
-    depth: number
     url?: string
-    minimal?: boolean
   }
 
-  const {value, event, depth, hideMediaAtDepth, url, minimal}: Props = $props()
+  const {value, event, url}: Props = $props()
 
   const {id, identifier, kind, pubkey, relays = []} = value
   const idOrAddress = id || new Address(kind, pubkey, identifier).toString()
@@ -43,17 +40,17 @@
   }
 </script>
 
-<Button class="my-2 block max-w-full text-left" {onclick}>
+<Button class="my-2 block w-full max-w-full text-left" {onclick}>
   {#if $quote}
-    {#if minimal && $quote.kind === MESSAGE}
+    {#if $quote.kind === MESSAGE}
       <div
         class="border-l-2 border-solid border-l-primary py-1 pl-2 opacity-90"
         style="background-color: color-mix(in srgb, var(--primary) 10%, var(--base-300) 90%);">
-        <NoteContent {hideMediaAtDepth} {url} event={$quote} depth={depth + 1} />
+        <NoteContentMinimal trimParent {url} event={$quote} />
       </div>
     {:else}
       <NoteCard event={$quote} {url} class="bg-alt rounded-box p-4">
-        <NoteContent {hideMediaAtDepth} {url} event={$quote} depth={depth + 1} />
+        <NoteContentMinimal {url} event={$quote} />
       </NoteCard>
     {/if}
   {:else}

src/app/components/ConversationCard.svelte

@@ -4,39 +4,39 @@
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Content from "@app/components/Content.svelte"
+  import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
   import {goToEvent} from "@app/util/routes"
-  import {displayChannel} from "@app/core/state"
+  import {displayRoom} from "@app/core/state"
 
   type Props = {
     url: string
-    room?: string
+    h?: string
     events: TrustedEvent[]
     latest: TrustedEvent
     earliest: TrustedEvent
     participants: string[]
   }
 
-  const {url, room, events, latest, earliest, participants}: Props = $props()
+  const {url, h, events, latest, earliest, participants}: Props = $props()
 </script>
 
-<Button class="card2 bg-alt" onclick={() => goToEvent(earliest)}>
+<Button class="card2 bg-alt shadow-lg" onclick={() => goToEvent(earliest)}>
   <div class="flex flex-col gap-3">
     <div class="flex items-start gap-3">
       <ProfileCircle pubkey={earliest.pubkey} size={10} />
       <div class="min-w-0 flex-1">
         <div class="flex items-center gap-2 text-sm opacity-70">
-          {#if room}
+          {#if h}
             <span class="truncate font-medium text-blue-400">
-              #{displayChannel(url, room)}
+              #{displayRoom(url, h)}
             </span>
             <span class="opacity-50">•</span>
           {/if}
           <span class="text-nowrap">{formatTimestamp(earliest.created_at)}</span>
         </div>
-        <Content minimalQuote minLength={100} maxLength={400} event={earliest} />
+        <NoteContentMinimal event={earliest} />
       </div>
     </div>
     <div class="ml-13 flex items-center justify-between">
@@ -67,7 +67,7 @@
               {formatTimestamp(latest.created_at)}
             </span>
           </div>
-          <Content minimalQuote minLength={100} maxLength={400} event={latest} />
+          <NoteContentMinimal event={latest} />
         </div>
       </Button>
     {/if}

src/app/components/EventActivity.svelte

@@ -3,7 +3,7 @@
   import {max, formatTimestampRelative} from "@welshman/lib"
   import {COMMENT} from "@welshman/util"
   import {load} from "@welshman/net"
-  import {deriveEvents} from "@welshman/store"
+  import {deriveArray, deriveEventsById} from "@welshman/store"
   import type {TrustedEvent} from "@welshman/util"
   import {repository} from "@welshman/app"
   import {notifications} from "@app/util/notifications"
@@ -13,7 +13,7 @@
   const {url, path, event}: {url: string; path: string; event: TrustedEvent} = $props()
 
   const filters = [{kinds: [COMMENT], "#E": [event.id]}]
-  const replies = deriveEvents(repository, {filters})
+  const replies = deriveArray(deriveEventsById({repository, filters}))
   const lastActive = $derived(max([...$replies, event].map(e => e.created_at)))
 
   onMount(() => {

src/app/components/EventInfo.svelte

@@ -4,6 +4,7 @@
   import {LOCALE, secondsToDate} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {displayRelayUrl} from "@welshman/util"
+  import {tracker} from "@welshman/app"
   import FileText from "@assets/icons/file-text.svg?dataurl"
   import Copy from "@assets/icons/copy.svg?dataurl"
   import UserCircle from "@assets/icons/user-circle.svg?dataurl"
@@ -11,7 +12,6 @@
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import {trackerStore} from "@app/core/state"
   import {clip} from "@app/util/toast"
 
   type Props = {
@@ -23,7 +23,7 @@
 
   const relays = url ? [url] : Router.get().Event(event).getUrls()
   const nevent1 = nip19.neventEncode({...event, relays})
-  const seenOn = $trackerStore.getRelays(event.id)
+  const seenOn = tracker.getRelays(event.id)
   const npub1 = nip19.npubEncode(event.pubkey)
   const json = JSON.stringify(event, null, 2)
   const copyLink = () => clip(nevent1)

src/app/components/EventMenu.svelte

@@ -1,20 +1,26 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import type {Snippet} from "svelte"
+  import {goto} from "$app/navigation"
   import type {TrustedEvent} from "@welshman/util"
-  import {COMMENT} from "@welshman/util"
-  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 EventShare from "@app/components/EventShare.svelte"
-  import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
-  import {pushModal} from "@app/util/modal"
+  import {COMMENT, ManagementMethod} from "@welshman/util"
+  import {pubkey, repository, relaysByUrl, manageRelay} from "@welshman/app"
   import ShareCircle from "@assets/icons/share-circle.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
   import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
   import Danger from "@assets/icons/danger.svg?dataurl"
+  import {setKey} from "@lib/implicit"
+  import Button from "@lib/components/Button.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import EventInfo from "@app/components/EventInfo.svelte"
+  import Report from "@app/components/Report.svelte"
+  import EventShare from "@app/components/EventShare.svelte"
+  import EventDeleteConfirm from "@app/components/EventDeleteConfirm.svelte"
+  import {hasNip29, deriveUserIsSpaceAdmin} from "@app/core/state"
+  import {pushModal} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
+  import {makeSpaceChatPath} from "@app/util/routes"
 
   type Props = {
     url: string
@@ -27,15 +33,43 @@
   const {url, noun, event, onClick, customActions}: Props = $props()
 
   const isRoot = event.kind !== COMMENT
+  const userIsAdmin = deriveUserIsSpaceAdmin(url)
 
-  const report = () => pushModal(EventReport, {url, event})
+  const report = () => pushModal(Report, {url, event})
 
   const showInfo = () => pushModal(EventInfo, {url, event})
 
-  const share = () => pushModal(EventShare, {url, event})
+  const share = async () => {
+    if (hasNip29($relaysByUrl.get(url))) {
+      pushModal(EventShare, {url, event})
+    } else {
+      setKey("share", event)
+      goto(makeSpaceChatPath(url))
+    }
+  }
 
   const showDelete = () => pushModal(EventDeleteConfirm, {url, event})
 
+  const showAdminDelete = () =>
+    pushModal(Confirm, {
+      title: `Delete ${noun}`,
+      message: `Are you sure you want to delete this ${noun.toLowerCase()} from the space?`,
+      confirm: async () => {
+        const {error} = await manageRelay(url, {
+          method: ManagementMethod.BanEvent,
+          params: [event.id],
+        })
+
+        if (error) {
+          pushToast({theme: "error", message: error})
+        } else {
+          pushToast({message: "Event has successfully been deleted!"})
+          repository.removeEvent(event.id)
+          history.back()
+        }
+      },
+    })
+
   let ul: Element
 
   onMount(() => {
@@ -43,7 +77,7 @@
   })
 </script>
 
-<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-xl" bind:this={ul}>
+<ul class="menu whitespace-nowrap rounded-box bg-base-100 p-2 shadow-md" bind:this={ul}>
   {#if isRoot}
     <li>
       <Button onclick={share}>
@@ -73,5 +107,13 @@
         Report Content
       </Button>
     </li>
+    {#if $userIsAdmin}
+      <li>
+        <Button class="text-error" onclick={showAdminDelete}>
+          <Icon size={4} icon={TrashBin2} />
+          Delete {noun}
+        </Button>
+      </li>
+    {/if}
   {/if}
 </ul>

src/app/components/EventReportDetails.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  import {getTag, REPORT} from "@welshman/util"
-  import type {TrustedEvent} from "@welshman/util"
-  import {deriveEvents} from "@welshman/store"
-  import {pubkey, repository} from "@welshman/app"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Profile from "@app/components/Profile.svelte"
-  import {publishDelete, canEnforceNip70} from "@app/core/commands"
-
-  const {url, event} = $props()
-
-  const shouldProtect = canEnforceNip70(url)
-
-  const reports = deriveEvents(repository, {
-    filters: [{kinds: [REPORT], "#e": [event.id]}],
-  })
-
-  const back = () => history.back()
-
-  const deleteReport = async (report: TrustedEvent) => {
-    publishDelete({event: report, relays: [url], protect: await shouldProtect})
-
-    if ($reports.length === 0) {
-      history.back()
-    }
-  }
-
-  const getReason = (tags: string[][]) => getTag("e", tags)?.[2] || "other"
-</script>
-
-<div class="column gap-4">
-  <ModalHeader>
-    {#snippet title()}
-      <div>Report Details</div>
-    {/snippet}
-    {#snippet info()}
-      <div>All reports for this event are shown below.</div>
-    {/snippet}
-  </ModalHeader>
-  {#each $reports as report (report.id)}
-    {@const reason = getReason(report.tags)}
-    {@const remove = () => deleteReport(report)}
-    <div class="column gap-2">
-      <div class="flex justify-between">
-        <div>
-          <Profile pubkey={report.pubkey} {url} />
-          <span>Reported this event as "{reason}"</span>
-        </div>
-        {#if report.pubkey === $pubkey}
-          <Button class="btn-default btn" onclick={remove}>Delete Report</Button>
-        {/if}
-      </div>
-      {#if report.content}
-        <p>"{report.content}"</p>
-      {/if}
-    </div>
-  {/each}
-  <Button class="btn btn-primary" onclick={back}>Got it</Button>
-</div>

src/app/components/EventShare.svelte

@@ -4,14 +4,14 @@
   import {preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import {setKey} from "@lib/implicit"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import ChannelName from "@app/components/ChannelName.svelte"
-  import {channelsByUrl} from "@app/core/state"
+  import RoomName from "@app/components/RoomName.svelte"
+  import {roomsByUrl} from "@app/core/state"
   import {makeRoomPath} from "@app/util/routes"
-  import {setKey} from "@lib/implicit"
 
   const {url, noun, event}: {url: string; noun: string; event: TrustedEvent} = $props()
 
@@ -22,8 +22,8 @@
     goto(makeRoomPath(url, selection), {replaceState: true})
   }
 
-  const toggleRoom = (room: string) => {
-    selection = room === selection ? "" : room
+  const toggleRoom = (h: string) => {
+    selection = h === selection ? "" : h
   }
 
   let selection = $state("")
@@ -39,14 +39,14 @@
     {/snippet}
   </ModalHeader>
   <div class="grid grid-cols-3 gap-2">
-    {#each $channelsByUrl.get(url) || [] as channel (channel.room)}
+    {#each $roomsByUrl.get(url) || [] as room (room.h)}
       <button
         type="button"
         class="btn"
-        class:btn-neutral={selection !== channel.room}
-        class:btn-primary={selection === channel.room}
-        onclick={() => toggleRoom(channel.room)}>
-        #<ChannelName {...channel} />
+        class:btn-neutral={selection !== room.h}
+        class:btn-primary={selection === room.h}
+        onclick={() => toggleRoom(room.h)}>
+        #<RoomName {...room} />
       </button>
     {/each}
   </div>

src/app/components/GoalActions.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
   import type {TrustedEvent, EventContent} from "@welshman/util"
+  import {getTagValue} from "@welshman/util"
+  import Link from "@lib/components/Link.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 RoomName from "@app/components/RoomName.svelte"
   import {publishDelete, publishReaction, canEnforceNip70} from "@app/core/commands"
-  import {makeGoalPath} from "@app/util/routes"
+  import {makeGoalPath, makeSpacePath} from "@app/util/routes"
 
   interface Props {
-    url: any
-    event: any
+    url: string
+    event: TrustedEvent
+    showRoom?: boolean
     showActivity?: boolean
   }
 
-  const {url, event, showActivity = false}: Props = $props()
-
-  const shouldProtect = canEnforceNip70(url)
+  const {url, event, showRoom, showActivity}: Props = $props()
 
   const path = makeGoalPath(url, event.id)
+  const h = getTagValue("h", event.tags)
+  const shouldProtect = canEnforceNip70(url)
 
   const deleteReaction = async (event: TrustedEvent) =>
     publishDelete({relays: [url], event, protect: await shouldProtect})
@@ -26,13 +30,16 @@
     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} hideZap noun="Goal" />
-  </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} hideZap noun="Goal" />
 </div>

src/app/components/GoalCreate.svelte

@@ -18,7 +18,12 @@
   import {makeEditor} from "@app/editor"
   import {canEnforceNip70} from "@app/core/commands"
 
-  const {url} = $props()
+  type Props = {
+    url: string
+    h?: string
+  }
+
+  const {url, h}: Props = $props()
 
   const shouldProtect = canEnforceNip70(url)
 
@@ -59,6 +64,10 @@
       tags.push(PROTECTED)
     }
 
+    if (h) {
+      tags.push(["h", h])
+    }
+
     publishThunk({
       relays: [url],
       event: makeEvent(ZAP_GOAL, {content, tags}),

src/app/components/GoalItem.svelte

@@ -6,6 +6,7 @@
   import ProfileLink from "@app/components/ProfileLink.svelte"
   import GoalActions from "@app/components/GoalActions.svelte"
   import GoalSummary from "@app/components/GoalSummary.svelte"
+  import RoomLink from "@app/components/RoomLink.svelte"
   import {makeGoalPath} from "@app/util/routes"
 
   type Props = {
@@ -16,9 +17,10 @@
   const {url, event}: Props = $props()
 
   const summary = getTagValue("summary", event.tags)
+  const h = getTagValue("h", event.tags)
 </script>
 
-<Link class="col-2 card2 bg-alt w-full cursor-pointer" href={makeGoalPath(url, event.id)}>
+<Link class="col-2 card2 bg-alt w-full cursor-pointer shadow-md" href={makeGoalPath(url, event.id)}>
   <p class="text-2xl">{event.content}</p>
   <Content
     event={{content: summary, tags: event.tags}}
@@ -30,6 +32,9 @@
   <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>
     <GoalActions showActivity {url} {event} />
   </div>

src/app/components/GoalSummary.svelte

@@ -2,24 +2,28 @@
   import {now, DAY, uniq, sum} from "@welshman/lib"
   import type {Zap, TrustedEvent} from "@welshman/util"
   import {getTagValue, fromMsats, ZAP_RESPONSE} from "@welshman/util"
-  import {deriveEventsMapped} from "@welshman/store"
+  import {deriveItemsByKey, deriveArray} from "@welshman/store"
   import {repository, getValidZap} from "@welshman/app"
   import Bolt from "@assets/icons/bolt.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ZapButton from "@app/components/ZapButton.svelte"
 
   type Props = {
-    url: string
+    url?: string
     event: TrustedEvent
+    class?: string
   }
 
-  const {url, event}: Props = $props()
+  const {url, event, ...props}: Props = $props()
 
-  const zaps = deriveEventsMapped<Zap>(repository, {
-    filters: [{kinds: [ZAP_RESPONSE], "#e": [event.id]}],
-    itemToEvent: item => item.response,
-    eventToItem: (response: TrustedEvent) => getValidZap(response, event),
-  })
+  const zaps = deriveArray(
+    deriveItemsByKey<Zap>({
+      repository,
+      getKey: zap => zap.response.id,
+      filters: [{kinds: [ZAP_RESPONSE], "#e": [event.id]}],
+      eventToItem: (response: TrustedEvent) => getValidZap(response, event),
+    }),
+  )
 
   const goalAmount = parseInt(getTagValue("amount", event.tags) || "0")
   const zapAmount = $derived(fromMsats(sum($zaps.map(zap => zap.invoiceAmount))))
@@ -27,7 +31,7 @@
   const daysOld = Math.ceil((now() - event.created_at) / DAY)
 </script>
 
-<div class="card2 bg-alt flex flex-col gap-8">
+<div class="flex flex-col gap-8 {props.class}">
   <div class="flex gap-8">
     <div>
       <p class="text-xl text-primary">{zapAmount} sats</p>

src/app/components/IconPicker.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import {createSearch} from "@welshman/app"
+  import Icon from "@lib/components/Icon.svelte"
+  import Magnifier from "@assets/icons/magnifier.svg?dataurl"
+
+  const iconModules = import.meta.glob("@assets/icons/*.svg", {
+    query: "?dataurl",
+    eager: true,
+  })
+
+  const icons = Object.entries(iconModules)
+    .map(([path, module]) => {
+      const name = path.split("/").pop()?.replace(".svg", "") || ""
+      return {
+        name,
+        url: (module as any).default,
+        searchText: name.replace(/[-_]/g, " ").toLowerCase(),
+      }
+    })
+    .filter(icon => icon.name && !icon.name.startsWith("icon-") && icon.name !== "index")
+    .sort((a, b) => a.name.localeCompare(b.name))
+
+  const iconSearch = createSearch(icons, {
+    getValue: icon => icon.name,
+    fuseOptions: {
+      keys: ["name", "searchText"],
+      threshold: 0.4,
+    },
+  })
+
+  type Props = {
+    onSelect: (iconUrl: string) => void
+  }
+
+  const {onSelect}: Props = $props()
+
+  let searchTerm = $state("")
+
+  const filteredIcons = $derived(searchTerm ? iconSearch.searchOptions(searchTerm) : icons)
+
+  const handleSelect = (iconUrl: string) => {
+    onSelect(iconUrl)
+  }
+</script>
+
+<div class="w-96 rounded-box bg-base-100 p-4 shadow-2xl">
+  <label class="input input-bordered flex w-full items-center gap-2">
+    <Icon icon={Magnifier} />
+    <input bind:value={searchTerm} class="grow" type="text" placeholder="Search icons..." />
+  </label>
+  <div class="mt-2 max-h-80 overflow-y-auto">
+    <div class="grid grid-cols-8 gap-2 p-2">
+      {#each filteredIcons as icon}
+        <button
+          class="flex aspect-square items-center justify-center rounded-box transition-colors hover:bg-primary hover:text-primary-content"
+          onclick={() => handleSelect(icon.url)}
+          title={icon.name}>
+          <Icon icon={icon.url} class="h-6 w-6" />
+        </button>
+      {/each}
+    </div>
+  </div>
+</div>

src/app/components/Landing.svelte

@@ -35,7 +35,7 @@
         {/snippet}
       </CardButton>
     </Button>
-    <Button onclick={signUp} class="dark:btn-neutral">
+    <Button onclick={signUp} class="btn-neutral">
       <CardButton>
         {#snippet icon()}
           <div><Icon icon={AddCircle} size={7} /></div>

src/app/components/LogIn.svelte

@@ -17,7 +17,6 @@
   import {pushModal, clearModals} from "@app/util/modal"
   import {PLATFORM_NAME, BURROW_URL} from "@app/core/state"
   import {pushToast} from "@app/util/toast"
-  import {loadUserData} from "@app/core/requests"
   import {setChecked} from "@app/util/notifications"
 
   let signers: any[] = $state([])
@@ -27,9 +26,7 @@
 
   const signUp = () => pushModal(SignUp)
 
-  const onSuccess = async (session: Session, relays: string[] = []) => {
-    await loadUserData(session.pubkey, relays)
-
+  const onSuccess = async (session: Session) => {
     addSession(session)
     pushToast({message: "Successfully logged in!"})
     setChecked("*")

src/app/components/LogInBunker.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import {onMount, onDestroy} from "svelte"
   import type {Nip46ResponseWithResult} from "@welshman/signer"
-  import {Nip46Broker, makeSecret} from "@welshman/signer"
+  import {Nip46Broker} from "@welshman/signer"
+  import {makeSecret} from "@welshman/util"
   import {loginWithNip01, loginWithNip46} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -14,7 +15,6 @@
   import BunkerConnect from "@app/components/BunkerConnect.svelte"
   import BunkerUrl from "@app/components/BunkerUrl.svelte"
   import {Nip46Controller} from "@app/util/nip46"
-  import {loadUserData} from "@app/core/requests"
   import {clearModals} from "@app/util/modal"
   import {setChecked} from "@app/util/notifications"
   import {pushToast} from "@app/util/toast"
@@ -32,8 +32,6 @@
     onNostrConnect: async (response: Nip46ResponseWithResult) => {
       const pubkey = await controller.broker.getPublicKey()
 
-      await loadUserData(pubkey)
-
       loginWithNip46(pubkey, controller.clientSecret, response.event.pubkey, SIGNER_RELAYS)
       setChecked("*")
       clearModals()
@@ -48,13 +46,20 @@
     try {
       const {signerPubkey, connectSecret, relays} = Nip46Broker.parseBunkerUrl($bunker)
 
-      if (!signerPubkey || relays.length === 0) {
+      if (!signerPubkey) {
         return pushToast({
           theme: "error",
           message: "Sorry, it looks like that's an invalid bunker link.",
         })
       }
 
+      if (relays.length === 0) {
+        return pushToast({
+          theme: "error",
+          message: "That bunker link does not include any relays.",
+        })
+      }
+
       controller.loading.set(true)
 
       const {clientSecret} = controller
@@ -67,8 +72,6 @@
         broker.cleanup()
         controller.stop()
 
-        await loadUserData(pubkey)
-
         loginWithNip46(pubkey, clientSecret, signerPubkey, relays)
       } else {
         return pushToast({
@@ -91,6 +94,7 @@
   }
 
   const selectConnect = () => {
+    controller.loading.set(false)
     mode = "connect"
   }
 

src/app/components/LogInPassword.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import {onMount, onDestroy} from "svelte"
   import {postJson, stripProtocol} from "@welshman/lib"
-  import {Nip46Broker, makeSecret} from "@welshman/signer"
-  import {normalizeRelayUrl} from "@welshman/util"
+  import {Nip46Broker} from "@welshman/signer"
+  import {normalizeRelayUrl, makeSecret} from "@welshman/util"
   import {addSession, makeNip46Session} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -16,7 +16,6 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import PasswordResetRequest from "@app/components/PasswordResetRequest.svelte"
-  import {loadUserData} from "@app/core/requests"
   import {clearModals, pushModal} from "@app/util/modal"
   import {setChecked} from "@app/util/notifications"
   import {pushToast} from "@app/util/toast"
@@ -96,8 +95,6 @@
       const pubkey = await broker.getPublicKey()
       const session = makeNip46Session(pubkey, clientSecret, response.event.pubkey, relays)
 
-      await loadUserData(pubkey)
-
       addSession({...session, email})
       broker.cleanup()
       setChecked("*")

src/app/components/MenuSettings.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Server from "@assets/icons/server.svg?dataurl"
+  import Moon from "@assets/icons/moon.svg?dataurl"
   import Settings from "@assets/icons/settings-minimalistic.svg?dataurl"
   import Code2 from "@assets/icons/code-2.svg?dataurl"
   import Exit from "@assets/icons/logout-3.svg?dataurl"
@@ -13,13 +14,16 @@
   import LogOut from "@app/components/LogOut.svelte"
   import {PLATFORM_NAME} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
+  import {theme} from "@app/util/theme"
 
   const logout = () => pushModal(LogOut)
+
+  const toggleTheme = () => theme.set($theme === "dark" ? "light" : "dark")
 </script>
 
 <div class="column menu gap-2">
   <Link replaceState href="/settings/profile">
-    <CardButton class="dark:btn-neutral">
+    <CardButton class="btn-neutral">
       {#snippet icon()}
         <div><Icon icon={UserRounded} size={7} /></div>
       {/snippet}
@@ -32,7 +36,7 @@
     </CardButton>
   </Link>
   <Link replaceState href="/settings/alerts">
-    <CardButton class="dark:btn-neutral">
+    <CardButton class="btn-neutral">
       {#snippet icon()}
         <div><Icon icon={Bell} size={7} /></div>
       {/snippet}
@@ -45,7 +49,7 @@
     </CardButton>
   </Link>
   <Link replaceState href="/settings/wallet">
-    <CardButton class="dark:btn-neutral">
+    <CardButton class="btn-neutral">
       {#snippet icon()}
         <div><Icon icon={Wallet} size={7} /></div>
       {/snippet}
@@ -58,7 +62,7 @@
     </CardButton>
   </Link>
   <Link replaceState href="/settings/relays">
-    <CardButton class="dark:btn-neutral">
+    <CardButton class="btn-neutral">
       {#snippet icon()}
         <div><Icon icon={Server} size={7} /></div>
       {/snippet}
@@ -71,7 +75,7 @@
     </CardButton>
   </Link>
   <Link replaceState href="/settings/content">
-    <CardButton class="dark:btn-neutral">
+    <CardButton class="btn-neutral">
       {#snippet icon()}
         <div><Icon icon={Settings} size={7} /></div>
       {/snippet}
@@ -83,8 +87,21 @@
       {/snippet}
     </CardButton>
   </Link>
+  <Button onclick={toggleTheme}>
+    <CardButton class="btn-neutral">
+      {#snippet icon()}
+        <div><Icon icon={Moon} size={7} /></div>
+      {/snippet}
+      {#snippet title()}
+        <div>Theme</div>
+      {/snippet}
+      {#snippet info()}
+        <div>Switch between light and dark mode</div>
+      {/snippet}
+    </CardButton>
+  </Button>
   <Link replaceState href="/settings/about">
-    <CardButton class="dark:btn-neutral">
+    <CardButton class="btn-neutral">
       {#snippet icon()}
         <div><Icon icon={Code2} size={7} /></div>
       {/snippet}

src/app/components/MenuSpaceRoomItem.svelte

@@ -1,36 +1,24 @@
 <script lang="ts">
-  import Lock from "@assets/icons/lock-keyhole.svg?dataurl"
-  import Hashtag from "@assets/icons/hashtag.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
-  import ChannelName from "@app/components/ChannelName.svelte"
+  import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
   import {makeRoomPath} from "@app/util/routes"
-  import {deriveChannel} from "@app/core/state"
   import {notifications} from "@app/util/notifications"
 
   interface Props {
     url: any
-    room: any
+    h: any
     notify?: boolean
     replaceState?: boolean
   }
 
-  const {url, room, notify = false, replaceState = false}: Props = $props()
+  const {url, h, notify = false, replaceState = false}: Props = $props()
 
-  const path = makeRoomPath(url, room)
-  const channel = deriveChannel(url, room)
+  const path = makeRoomPath(url, h)
 </script>
 
 <SecondaryNavItem
   href={path}
   {replaceState}
   notification={notify ? $notifications.has(path) : false}>
-  {#if $channel?.closed || $channel?.private}
-    <Icon icon={Lock} size={4} />
-  {:else}
-    <Icon icon={Hashtag} />
-  {/if}
-  <div class="min-w-0 overflow-hidden text-ellipsis">
-    <ChannelName {url} {room} />
-  </div>
+  <RoomNameWithImage {url} {h} />
 </SecondaryNavItem>

src/app/components/MenuSpaces.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  import Login from "@assets/icons/login-3.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Divider from "@lib/components/Divider.svelte"
-  import CardButton from "@lib/components/CardButton.svelte"
-  import MenuSpacesItem from "@app/components/MenuSpacesItem.svelte"
-  import SpaceAdd from "@app/components/SpaceAdd.svelte"
-  import {userRoomsByUrl, PLATFORM_RELAYS} from "@app/core/state"
-  import {pushModal} from "@app/util/modal"
-
-  const addSpace = () => pushModal(SpaceAdd)
-</script>
-
-<div class="column menu gap-2">
-  {#each PLATFORM_RELAYS as url (url)}
-    <MenuSpacesItem {url} />
-  {:else}
-    {#if $userRoomsByUrl.size > 0}
-      {#each $userRoomsByUrl.keys() as url (url)}
-        <MenuSpacesItem {url} />
-      {/each}
-      <Divider />
-    {/if}
-    <Button onclick={addSpace}>
-      <CardButton class="dark:btn-neutral">
-        {#snippet icon()}
-          <div><Icon icon={Login} size={7} /></div>
-        {/snippet}
-        {#snippet title()}
-          <div>Add a space</div>
-        {/snippet}
-        {#snippet info()}
-          <div>Join or create a new space</div>
-        {/snippet}
-      </CardButton>
-    </Button>
-  {/each}
-</div>

src/app/components/MenuSpacesItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Link from "@lib/components/Link.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
-  import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
+  import RelayIcon from "@app/components/RelayIcon.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
   import {makeSpacePath} from "@app/util/routes"
@@ -13,9 +13,9 @@
 </script>
 
 <Link replaceState href={path}>
-  <CardButton class="dark:btn-neutral">
+  <CardButton class="btn-neutral shadow-md">
     {#snippet icon()}
-      <div><SpaceAvatar {url} /></div>
+      <RelayIcon {url} size={12} />
     {/snippet}
     {#snippet title()}
       <div class="flex gap-1">

src/app/components/ModalContainer.svelte

@@ -1,29 +1,55 @@
 <script lang="ts">
+  import {onMount, mount, unmount, createRawSnippet} from "svelte"
   import Drawer from "@lib/components/Drawer.svelte"
   import Dialog from "@lib/components/Dialog.svelte"
   import {modal, clearModals} from "@app/util/modal"
 
-  const onKeyDown = (e: any) => {
-    if (e.code === "Escape" && e.target === document.body) {
+  const closeModals = () => {
+    if ($modal && !$modal.options.noEscape) {
       clearModals()
     }
   }
 
-  const m = $derived($modal)
+  const onKeyDown = (e: any) => {
+    if (e.code === "Escape" && e.target === document.body) {
+      closeModals()
+    }
+  }
+
+  let element: HTMLElement
+  let instance: any | undefined
+
+  onMount(() => {
+    return modal.subscribe($modal => {
+      if (instance) {
+        unmount(instance, {outro: true})
+        instance = undefined
+      }
+
+      if ($modal) {
+        const {options, component, props} = $modal
+        const wrapper = options.drawer ? Drawer : Dialog
+
+        instance = mount(wrapper as any, {
+          target: element,
+          props: {
+            onClose: closeModals,
+            fullscreen: options.fullscreen,
+            children: createRawSnippet(() => ({
+              render: () => "<div></div>",
+              setup: (target: Element) => {
+                const child = mount(component, {target, props})
+
+                return () => unmount(child)
+              },
+            })),
+          },
+        })
+      }
+    })
+  })
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
 
-{#if m?.options?.drawer}
-  <Drawer onClose={clearModals} {...m.options}>
-    {#key m.id}
-      <m.component {...m.props} />
-    {/key}
-  </Drawer>
-{:else if m}
-  <Dialog onClose={clearModals} {...m.options}>
-    {#key m.id}
-      <m.component {...m.props} />
-    {/key}
-  </Dialog>
-{/if}
+<div bind:this={element}></div>

src/app/components/NewNotificationSound.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import {onMount} from "svelte"
+  import {userSettingsValues} from "@app/core/state"
+  import {notifications} from "../util/notifications"
+
+  let audioElement: HTMLAudioElement
+
+  let enabled = $state(false)
+
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) {
+      enabled = true
+    } else {
+      enabled = false
+    }
+  })
+
+  let notificationCount = $state($notifications.size)
+
+  const playSound = () => {
+    if (enabled && $userSettingsValues.play_notification_sound) {
+      audioElement?.play()
+    }
+  }
+
+  onMount(() => {
+    audioElement.load()
+
+    notifications.subscribe(notifications => {
+      if (notifications.size > notificationCount) {
+        playSound()
+      }
+
+      notificationCount = notifications.size
+    })
+  })
+</script>
+
+<audio bind:this={audioElement} src="/new-notification-3-398649.mp3"></audio>

src/app/components/NoteCard.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
   import cx from "classnames"
   import type {Snippet} from "svelte"
-  import * as nip19 from "nostr-tools/nip19"
   import {formatTimestamp} from "@welshman/lib"
   import {getListTags, getPubkeyTagValues} from "@welshman/util"
   import type {TrustedEvent} from "@welshman/util"
-  import {Router} from "@welshman/router"
-  import {userMutes} from "@welshman/app"
-  import Link from "@lib/components/Link.svelte"
+  import {userMuteList} from "@welshman/app"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Profile from "@app/components/Profile.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
-  import {entityLink} from "@app/core/state"
+  import {goToEvent} from "@app/util/routes"
 
   const {
     event,
@@ -31,14 +28,11 @@
     class?: string
   } = $props()
 
-  const relays = Router.get().Event(event).getUrls()
-  const nevent = nip19.neventEncode({id: event.id, relays})
-
   const ignoreMute = () => {
     muted = false
   }
 
-  let muted = $state(getPubkeyTagValues(getListTags($userMutes)).includes(event.pubkey))
+  let muted = $state(getPubkeyTagValues(getListTags($userMuteList)).includes(event.pubkey))
 </script>
 
 <div class="flex flex-col gap-2 {restProps.class}">
@@ -59,12 +53,11 @@
           <Profile pubkey={event.pubkey} {url} />
         {/if}
       {/if}
-      <Link
-        external
-        href={entityLink(nevent)}
-        class={cx("text-sm opacity-75", {"text-xs": minimal})}>
+      <Button
+        class={cx("text-sm opacity-75", {"text-xs": minimal})}
+        onclick={() => goToEvent(event)}>
         {formatTimestamp(event.created_at)}
-      </Link>
+      </Button>
     </div>
     {@render children()}
   {/if}

src/app/components/NoteContent.svelte

@@ -1,24 +1,20 @@
 <script lang="ts">
   import type {ComponentProps} from "svelte"
-  import {EVENT_TIME} from "@welshman/util"
+  import {EVENT_TIME, ZAP_GOAL, THREAD} from "@welshman/util"
+  import NoteContentEventTime from "@app/components/NoteContentEventTime.svelte"
+  import NoteContentThread from "@app/components/NoteContentThread.svelte"
+  import NoteContentGoal from "@app/components/NoteContentGoal.svelte"
   import Content from "@app/components/Content.svelte"
-  import CalendarEventDate from "@app/components/CalendarEventDate.svelte"
-  import CalendarEventHeader from "@app/components/CalendarEventHeader.svelte"
 
   const props: ComponentProps<typeof Content> = $props()
 </script>
 
 {#if props.event.kind === EVENT_TIME}
-  <div class="flex items-start gap-4">
-    <CalendarEventDate event={props.event} />
-    <div class="flex flex-grow flex-col">
-      <CalendarEventHeader event={props.event} />
-      <div class="flex py-2 opacity-50">
-        <div class="h-px flex-grow bg-base-content opacity-25"></div>
-      </div>
-      <Content {...props} />
-    </div>
-  </div>
+  <NoteContentEventTime {...props} />
+{:else if props.event.kind === THREAD}
+  <NoteContentThread {...props} />
+{:else if props.event.kind === ZAP_GOAL}
+  <NoteContentGoal {...props} />
 {:else}
   <Content {...props} />
 {/if}

src/app/components/NoteContentEventTime.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import Content from "@app/components/Content.svelte"
+  import CalendarEventDate from "@app/components/CalendarEventDate.svelte"
+  import CalendarEventHeader from "@app/components/CalendarEventHeader.svelte"
+
+  const props: ComponentProps<typeof Content> = $props()
+</script>
+
+<div class="flex items-start gap-4">
+  <CalendarEventDate event={props.event} />
+  <div class="flex flex-grow flex-col">
+    <CalendarEventHeader event={props.event} />
+    <div class="flex py-2 opacity-50">
+      <div class="h-px flex-grow bg-base-content opacity-25"></div>
+    </div>
+    <Content {...props} />
+  </div>
+</div>

src/app/components/NoteContentGoal.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import {getTagValue} from "@welshman/util"
+  import Content from "@app/components/Content.svelte"
+  import GoalSummary from "@app/components/GoalSummary.svelte"
+
+  const props: ComponentProps<typeof Content> = $props()
+
+  const content = getTagValue("summary", props.event.tags)
+  const fakeEvent = {content, tags: props.event.tags}
+</script>
+
+<div class="flex flex-col gap-2">
+  <p class="text-2xl">{props.event.content}</p>
+  <Content {...props} event={fakeEvent} expandMode="inline" minLength={50} maxLength={300} />
+  <GoalSummary url={props.url} event={props.event} />
+</div>

src/app/components/NoteContentMinimal.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import {EVENT_TIME, ZAP_GOAL, THREAD} from "@welshman/util"
+  import NoteContentMinimalEventTime from "@app/components/NoteContentMinimalEventTime.svelte"
+  import NoteContentMinimalThread from "@app/components/NoteContentMinimalThread.svelte"
+  import NoteContentMinimalGoal from "@app/components/NoteContentMinimalGoal.svelte"
+  import ContentMinimal from "@app/components/ContentMinimal.svelte"
+
+  const props: ComponentProps<typeof ContentMinimal> = $props()
+</script>
+
+<div class="text-xs">
+  {#if props.event.kind === EVENT_TIME}
+    <NoteContentMinimalEventTime {...props} />
+  {:else if props.event.kind === THREAD}
+    <NoteContentMinimalThread {...props} />
+  {:else if props.event.kind === ZAP_GOAL}
+    <NoteContentMinimalGoal {...props} />
+  {:else}
+    <ContentMinimal {...props} />
+  {/if}
+</div>

src/app/components/NoteContentMinimalEventTime.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import {
+    fromPairs,
+    formatTimestamp,
+    formatTimestampAsDate,
+    formatTimestampAsTime,
+  } from "@welshman/lib"
+  import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import ContentMinimal from "@app/components/ContentMinimal.svelte"
+
+  const props: ComponentProps<typeof ContentMinimal> = $props()
+  const meta = $derived(fromPairs(props.event.tags) as Record<string, string>)
+  const start = $derived(parseInt(meta.start))
+  const end = $derived(parseInt(meta.end))
+</script>
+
+<div class="flex flex-col">
+  <div class="flex flex-grow flex-wrap justify-between gap-2">
+    <p class="text-sm">{meta.title || meta.name}</p>
+    {#if !isNaN(start) && !isNaN(end)}
+      {@const startDateDisplay = formatTimestampAsDate(start)}
+      {@const endDateDisplay = formatTimestampAsDate(end)}
+      {@const isSingleDay = startDateDisplay === endDateDisplay}
+      <div class="flex items-center gap-2">
+        <Icon icon={ClockCircle} size={4} />
+        <span class="hidden sm:block">{formatTimestampAsDate(start)}</span>
+        {formatTimestampAsTime(start)} — {isSingleDay
+          ? formatTimestampAsTime(end)
+          : formatTimestamp(end)}
+      </div>
+    {/if}
+  </div>
+  <ContentMinimal {...props} />
+</div>

src/app/components/NoteContentMinimalGoal.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import {sum} from "@welshman/lib"
+  import type {Zap, TrustedEvent} from "@welshman/util"
+  import {getTagValue, fromMsats, ZAP_RESPONSE} from "@welshman/util"
+  import {deriveItemsByKey, deriveArray} from "@welshman/store"
+  import {repository, getValidZap} from "@welshman/app"
+  import Bolt from "@assets/icons/bolt.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import ContentMinimal from "@app/components/ContentMinimal.svelte"
+
+  const props: ComponentProps<typeof ContentMinimal> = $props()
+
+  const content = getTagValue("summary", props.event.tags)
+  const fakeEvent = {content, tags: props.event.tags}
+
+  const zaps = deriveArray(
+    deriveItemsByKey<Zap>({
+      repository,
+      getKey: zap => zap.response.id,
+      filters: [{kinds: [ZAP_RESPONSE], "#e": [props.event.id]}],
+      eventToItem: (response: TrustedEvent) => getValidZap(response, props.event),
+    }),
+  )
+
+  const goalAmount = parseInt(getTagValue("amount", props.event.tags) || "0")
+  const zapAmount = $derived(fromMsats(sum($zaps.map(zap => zap.invoiceAmount))))
+</script>
+
+<div class="flex justify-between">
+  <span class="text-sm">{props.event.content}</span>
+  <div class="flex items-center gap-1">
+    <Icon icon={Bolt} size={4} />
+    {zapAmount}/{goalAmount} sats funded
+  </div>
+</div>
+<ContentMinimal {...props} event={fakeEvent} />

src/app/components/NoteContentMinimalThread.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import {getTagValue} from "@welshman/util"
+  import ContentMinimal from "@app/components/ContentMinimal.svelte"
+
+  const props: ComponentProps<typeof ContentMinimal> = $props()
+
+  const title = getTagValue("title", props.event.tags)
+</script>
+
+{#if title}
+  <span class="text-sm">{title}</span>
+{/if}
+{#if props.event.content}
+  <ContentMinimal {...props} />
+{/if}

src/app/components/NoteContentThread.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type {ComponentProps} from "svelte"
+  import {formatTimestamp} from "@welshman/lib"
+  import {getTagValue} from "@welshman/util"
+  import Content from "@app/components/Content.svelte"
+
+  const props: ComponentProps<typeof Content> = $props()
+
+  const title = getTagValue("title", props.event.tags)
+</script>
+
+<div class="flex flex-col gap-2">
+  {#if title}
+    <div class="flex w-full items-center justify-between gap-2">
+      <p class="text-xl">{title}</p>
+      <p class="text-sm opacity-75">
+        {formatTimestamp(props.event.created_at)}
+      </p>
+    </div>
+  {:else}
+    <p class="mb-3 h-0 text-xs opacity-75">
+      {formatTimestamp(props.event.created_at)}
+    </p>
+  {/if}
+  {#if props.event.content}
+    <Content {...props} />
+  {/if}
+</div>

src/app/components/PeopleItem.svelte

@@ -18,7 +18,7 @@
   const openProfile = () => pushModal(ProfileDetail, {pubkey, url})
 </script>
 
-<div class="card2 bg-alt flex flex-col gap-4 shadow-xl">
+<div class="card2 bg-alt flex flex-col gap-4 shadow-md">
   <div class="flex justify-between">
     <Profile {pubkey} {url} />
     <Button onclick={openProfile} class="btn btn-primary hidden sm:flex">

src/app/components/PrimaryNav.svelte

@@ -3,27 +3,26 @@
   import {page} from "$app/stores"
   import {goto} from "$app/navigation"
   import {splitAt} from "@welshman/lib"
-  import {userProfile} from "@welshman/app"
-  import Avatar from "@lib/components/Avatar.svelte"
-  import Divider from "@lib/components/Divider.svelte"
-  import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
-  import SpaceAdd from "@app/components/SpaceAdd.svelte"
-  import ChatEnable from "@app/components/ChatEnable.svelte"
-  import MenuSpaces from "@app/components/MenuSpaces.svelte"
-  import MenuOtherSpaces from "@app/components/MenuOtherSpaces.svelte"
-  import MenuSettings from "@app/components/MenuSettings.svelte"
-  import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
-  import {userRoomsByUrl, canDecrypt, PLATFORM_RELAYS, PLATFORM_LOGO} from "@app/core/state"
-  import {pushModal} from "@app/util/modal"
-  import {makeSpacePath} from "@app/util/routes"
-  import {notifications} from "@app/util/notifications"
+  import {userProfile, shouldUnwrap} from "@welshman/app"
   import Widget from "@assets/icons/widget.svg?dataurl"
-  import AddSquare from "@assets/icons/add-square.svg?dataurl"
+  import Compass from "@assets/icons/compass.svg?dataurl"
   import Letter from "@assets/icons/letter.svg?dataurl"
   import Magnifier from "@assets/icons/magnifier.svg?dataurl"
   import HomeSmile from "@assets/icons/home-smile.svg?dataurl"
   import SettingsMinimalistic from "@assets/icons/settings-minimalistic.svg?dataurl"
+  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
   import Settings from "@assets/icons/settings.svg?dataurl"
+  import ImageIcon from "@lib/components/ImageIcon.svelte"
+  import Divider from "@lib/components/Divider.svelte"
+  import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
+  import ChatEnable from "@app/components/ChatEnable.svelte"
+  import MenuOtherSpaces from "@app/components/MenuOtherSpaces.svelte"
+  import MenuSettings from "@app/components/MenuSettings.svelte"
+  import PrimaryNavItemSpace from "@app/components/PrimaryNavItemSpace.svelte"
+  import {userSpaceUrls, PLATFORM_RELAYS, PLATFORM_LOGO} from "@app/core/state"
+  import {pushModal} from "@app/util/modal"
+  import {makeSpacePath} from "@app/util/routes"
+  import {notifications} from "@app/util/notifications"
 
   type Props = {
     children?: Snippet
@@ -31,15 +30,11 @@
 
   const {children}: Props = $props()
 
-  const addSpace = () => pushModal(SpaceAdd)
-
-  const showSpacesMenu = () => (spaceUrls.length > 0 ? pushModal(MenuSpaces) : pushModal(SpaceAdd))
-
   const showOtherSpacesMenu = () => pushModal(MenuOtherSpaces, {urls: secondarySpaceUrls})
 
   const showSettingsMenu = () => pushModal(MenuSettings)
 
-  const openChat = () => ($canDecrypt ? goto("/chat") : pushModal(ChatEnable, {next: "/chat"}))
+  const openChat = () => ($shouldUnwrap ? goto("/chat") : pushModal(ChatEnable, {next: "/chat"}))
 
   const hasNotification = (url: string) => {
     const path = makeSpacePath(url)
@@ -52,9 +47,8 @@
   const itemHeight = 56
   const navPadding = 6 * itemHeight
   const itemLimit = $derived((windowHeight - navPadding) / itemHeight)
-  const spaceUrls = $derived(Array.from($userRoomsByUrl.keys()))
-  const [primarySpaceUrls, secondarySpaceUrls] = $derived(splitAt(itemLimit, spaceUrls))
-  const anySpaceNotifications = $derived(spaceUrls.some(hasNotification))
+  const [primarySpaceUrls, secondarySpaceUrls] = $derived(splitAt(itemLimit, $userSpaceUrls))
+  const anySpaceNotifications = $derived($userSpaceUrls.some(hasNotification))
   const otherSpaceNotifications = $derived(secondarySpaceUrls.some(hasNotification))
 </script>
 
@@ -68,7 +62,7 @@
         <PrimaryNavItemSpace {url} />
       {:else}
         <PrimaryNavItem title="Home" href="/home" class="tooltip-right">
-          <Avatar src={PLATFORM_LOGO} class="!h-10 !w-10" />
+          <ImageIcon alt="Home" src={PLATFORM_LOGO} class="rounded-full" />
         </PrimaryNavItem>
         <Divider />
         {#each primarySpaceUrls as url (url)}
@@ -80,11 +74,11 @@
             class="tooltip-right"
             onclick={showOtherSpacesMenu}
             notification={otherSpaceNotifications}>
-            <Avatar icon={Widget} class="!h-10 !w-10" />
+            <ImageIcon alt="Other Spaces" src={Widget} />
           </PrimaryNavItem>
         {/if}
-        <PrimaryNavItem title="Add Space" onclick={addSpace} class="tooltip-right">
-          <Avatar icon={AddSquare} class="!h-10 !w-10" />
+        <PrimaryNavItem title="Add a Space" href="/discover" class="tooltip-right">
+          <ImageIcon alt="Add a Space" src={Compass} size={7} />
         </PrimaryNavItem>
       {/each}
     </div>
@@ -97,17 +91,17 @@
         href="/settings/profile"
         prefix="/settings"
         class="tooltip-right">
-        <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
+        <ImageIcon alt="Settings" src={$userProfile?.picture || UserRounded} class="rounded-full" />
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
         onclick={openChat}
         class="tooltip-right"
         notification={$notifications.has("/chat")}>
-        <Avatar icon={Letter} class="!h-10 !w-10" />
+        <ImageIcon alt="Messages" src={Letter} size={7} />
       </PrimaryNavItem>
       <PrimaryNavItem title="Search" href="/people" class="tooltip-right">
-        <Avatar icon={Magnifier} class="!h-10 !w-10" />
+        <ImageIcon alt="Search" src={Magnifier} size={7} />
       </PrimaryNavItem>
     </div>
   </div>
@@ -116,31 +110,34 @@
 {@render children?.()}
 
 <!-- a little extra something for ios -->
-<div class="fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden"></div>
 <div
-  class="border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
+  class="bottom-nav hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden">
+</div>
+<div
+  class="bottom-nav hide-on-keyboard border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
   <div class="content-padding-x content-sizing flex justify-between px-2">
-    <div class="flex gap-2 sm:gap-8">
+    <div class="flex gap-2 sm:gap-6">
       <PrimaryNavItem title="Home" href="/home">
-        <Avatar icon={HomeSmile} class="!h-10 !w-10" />
+        <ImageIcon alt="Home" src={HomeSmile} size={7} />
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
         onclick={openChat}
         notification={$notifications.has("/chat")}>
-        <Avatar icon={Letter} class="!h-10 !w-10" />
+        <ImageIcon alt="Messages" src={Letter} size={7} />
       </PrimaryNavItem>
       {#if PLATFORM_RELAYS.length !== 1}
-        <PrimaryNavItem
-          title="Spaces"
-          onclick={showSpacesMenu}
-          notification={anySpaceNotifications}>
-          <Avatar icon={SettingsMinimalistic} class="!h-10 !w-10" />
+        <PrimaryNavItem title="Spaces" href="/spaces" notification={anySpaceNotifications}>
+          <ImageIcon alt="Spaces" src={SettingsMinimalistic} size={7} />
         </PrimaryNavItem>
       {/if}
     </div>
     <PrimaryNavItem title="Settings" onclick={showSettingsMenu}>
-      <Avatar icon={Settings} src={$userProfile?.picture} class="!h-10 !w-10" />
+      <ImageIcon
+        alt="Settings"
+        src={$userProfile?.picture || Settings}
+        size={7}
+        class="rounded-full" />
     </PrimaryNavItem>
   </div>
 </div>

src/app/components/PrimaryNavItemSpace.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
   import {displayRelayUrl} from "@welshman/util"
   import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
-  import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
-  import {makeSpacePath} from "@app/util/routes"
+  import RelayIcon from "@app/components/RelayIcon.svelte"
+  import {makeSpacePath, goToSpace} from "@app/util/routes"
   import {notifications} from "@app/util/notifications"
 
-  const {url} = $props()
+  type Props = {
+    url: string
+  }
 
-  const path = makeSpacePath(url)
+  const {url}: Props = $props()
+
+  const onClick = () => goToSpace(url)
 </script>
 
 <PrimaryNavItem
+  onclick={onClick}
   title={displayRelayUrl(url)}
-  href={path}
   class="tooltip-right"
-  notification={$notifications.has(path)}>
-  <SpaceAvatar {url} />
+  notification={$notifications.has(makeSpacePath(url))}>
+  <RelayIcon {url} size={7} class="rounded-full" />
 </PrimaryNavItem>

src/app/components/Profile.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
   import * as nip19 from "nostr-tools/nip19"
-  import {removeNil} from "@welshman/lib"
+  import {removeUndefined} from "@welshman/lib"
   import {displayPubkey} from "@welshman/util"
-  import {
-    deriveHandleForPubkey,
-    displayHandle,
-    deriveProfile,
-    deriveProfileDisplay,
-  } from "@welshman/app"
+  import {deriveHandleForPubkey, displayHandle, deriveProfileDisplay} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Avatar from "@lib/components/Avatar.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import WotScore from "@app/components/WotScore.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {pushModal} from "@app/util/modal"
@@ -26,8 +21,7 @@
 
   const {pubkey, url, showPubkey, avatarSize = 10}: Props = $props()
 
-  const relays = removeNil([url])
-  const profile = deriveProfile(pubkey, relays)
+  const relays = removeUndefined([url])
   const profileDisplay = deriveProfileDisplay(pubkey, relays)
   const handle = deriveHandleForPubkey(pubkey)
 
@@ -38,7 +32,7 @@
 
 <div class="flex max-w-full items-start gap-3">
   <Button onclick={openProfile} class="py-1">
-    <Avatar src={$profile?.picture} size={avatarSize} />
+    <ProfileCircle {pubkey} size={avatarSize} />
   </Button>
   <div class="flex min-w-0 flex-col">
     <div class="flex items-center gap-2">

src/app/components/ProfileBadges.svelte

@@ -3,13 +3,13 @@
   import {load} from "@welshman/net"
   import {Router} from "@welshman/router"
   import type {Filter} from "@welshman/util"
-  import {deriveEvents} from "@welshman/store"
+  import {deriveArray, deriveEventsById} from "@welshman/store"
   import {formatTimestampRelative} from "@welshman/lib"
-  import {NOTE, ROOMS, MESSAGE, THREAD, COMMENT, getRelayTags, getListTags} from "@welshman/util"
-  import {repository, loadRelaySelections} from "@welshman/app"
+  import {NOTE, ROOMS, COMMENT} from "@welshman/util"
+  import {repository, loadRelayList} from "@welshman/app"
   import Button from "@lib/components/Button.svelte"
   import ProfileSpaces from "@app/components/ProfileSpaces.svelte"
-  import {membershipsByPubkey} from "@app/core/state"
+  import {deriveGroupList, getSpaceUrlsFromGroupList, MESSAGE_KINDS} from "@app/core/state"
   import {goToEvent} from "@app/util/routes"
   import {pushModal} from "@app/util/modal"
 
@@ -20,9 +20,9 @@
 
   const {pubkey, url}: Props = $props()
   const filters: Filter[] = [{authors: [pubkey], limit: 1}]
-  const events = deriveEvents(repository, {filters})
-  const membership = $derived($membershipsByPubkey.get(pubkey))
-  const relays = $derived(getRelayTags(getListTags(membership)))
+  const events = deriveArray(deriveEventsById({repository, filters}))
+  const groupList = deriveGroupList(pubkey)
+  const spaceUrls = $derived(getSpaceUrlsFromGroupList($groupList))
 
   const viewEvent = () => goToEvent($events[0]!)
 
@@ -30,13 +30,13 @@
 
   onMount(async () => {
     // Make sure we have their relay selections before we load their posts
-    await loadRelaySelections(pubkey)
+    await loadRelayList(pubkey)
 
     // Load groups and at least one note, regardless of time frame
     load({
       filters: [
         {authors: [pubkey], kinds: [ROOMS]},
-        {authors: [pubkey], limit: 1, kinds: [NOTE, MESSAGE, THREAD, COMMENT]},
+        {authors: [pubkey], limit: 1, kinds: [NOTE, COMMENT, ...MESSAGE_KINDS]},
       ],
       relays: Router.get().FromPubkeys([pubkey]).getUrls(),
     })
@@ -49,10 +49,10 @@
       Last active {formatTimestampRelative($events[0].created_at)}
     </Button>
   {/if}
-  {#if relays.length > 0}
+  {#if spaceUrls.length > 0}
     <Button onclick={openSpaces} class="badge badge-neutral">
-      {relays.length}
-      {relays.length === 1 ? "space" : "spaces"}
+      {spaceUrls.length}
+      {spaceUrls.length === 1 ? "space" : "spaces"}
     </Button>
   {/if}
 </div>

src/app/components/ProfileCircle.svelte

@@ -1,17 +1,24 @@
 <script lang="ts">
-  import Avatar from "@lib/components/Avatar.svelte"
-  import {removeNil} from "@welshman/lib"
+  import cx from "classnames"
+  import {removeUndefined} from "@welshman/lib"
   import {deriveProfile} from "@welshman/app"
-  import UserCircle from "@assets/icons/user-circle.svg?dataurl"
+  import UserRounded from "@assets/icons/user-rounded.svg?dataurl"
+  import ImageIcon from "@lib/components/ImageIcon.svelte"
 
   type Props = {
     pubkey: string
+    class?: string
+    size?: number
     url?: string
-  } & Record<string, any>
+  }
 
-  const {pubkey, url, ...props}: Props = $props()
+  const {pubkey, url, size = 7, ...props}: Props = $props()
 
-  const profile = deriveProfile(pubkey, removeNil([url]))
+  const profile = deriveProfile(pubkey, removeUndefined([url]))
 </script>
 
-<Avatar src={$profile?.picture} icon={UserCircle} {...props} />
+<ImageIcon
+  {size}
+  alt=""
+  class={cx(props.class, "rounded-full")}
+  src={$profile?.picture || UserRounded} />

src/app/components/ProfileCircles.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
+  import {getProfile} from "@welshman/app"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
 
-  const {...props} = $props()
+  type Props = {
+    pubkeys: string[]
+    size?: number
+  }
+
+  const {pubkeys, size = 7}: Props = $props()
 </script>
 
 <div class="flex pr-3">
-  {#each props.pubkeys.toSorted().slice(0, 15) as pubkey (pubkey)}
+  {#each pubkeys
+    .filter(p => getProfile(p)?.picture)
+    .toSorted()
+    .slice(0, 15) as pubkey (pubkey)}
     <div class="z-feature -mr-3 inline-block">
-      <ProfileCircle class="h-8 w-8 bg-base-300" {pubkey} {...props} />
+      <ProfileCircle class="h-8 w-8 bg-base-300" {pubkey} {size} />
     </div>
   {/each}
 </div>

src/app/components/ProfileDelete.svelte

@@ -7,8 +7,9 @@
     DELETE,
     isReplaceable,
     getAddress,
+    RelayMode,
   } from "@welshman/util"
-  import {pubkey, publishThunk, repository} from "@welshman/app"
+  import {pubkey, publishThunk, repository, derivePubkeyRelays} from "@welshman/app"
   import {preventDefault} from "@lib/html"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
@@ -19,18 +20,13 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushToast} from "@app/util/toast"
   import {logout} from "@app/core/commands"
-  import {
-    INDEXER_RELAYS,
-    PLATFORM_NAME,
-    userMembership,
-    getMembershipUrls,
-    userWriteRelays,
-  } from "@app/core/state"
+  import {INDEXER_RELAYS, PLATFORM_NAME, userSpaceUrls} from "@app/core/state"
 
   let progress: number | undefined = $state(undefined)
   let confirmText = $state("")
 
   const CONFIRM_TEXT = "permanently delete my nostr account"
+  const userWriteRelays = derivePubkeyRelays($pubkey!, RelayMode.Write)
   const confirmOk = $derived(confirmText.toLowerCase().trim() === CONFIRM_TEXT)
   const showProgress = $derived(progress !== undefined)
 
@@ -46,11 +42,7 @@
     const profileEvent = makeEvent(PROFILE, createProfile({name: "[deleted]"}))
     const vanishEvent = makeEvent(62, {tags: [["relay", "ALL_RELAYS"]]})
     const denominator = chunks.length + 2
-    const relays = uniq([
-      ...INDEXER_RELAYS,
-      ...$userWriteRelays,
-      ...getMembershipUrls($userMembership),
-    ])
+    const relays = uniq([...INDEXER_RELAYS, ...$userWriteRelays, ...$userSpaceUrls])
 
     let step = 0
 

src/app/components/ProfileDetail.svelte

@@ -1,18 +1,29 @@
 <script lang="ts">
   import {goto} from "$app/navigation"
+  import {removeUndefined} from "@welshman/lib"
+  import {ManagementMethod} from "@welshman/util"
+  import {shouldUnwrap, manageRelay, deriveProfile, displayProfileByPubkey} from "@welshman/app"
   import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import Code2 from "@assets/icons/code-2.svg?dataurl"
   import Letter from "@assets/icons/letter-opened.svg?dataurl"
+  import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
+  import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
+  import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
-  import Avatar from "@lib/components/Avatar.svelte"
+  import ImageIcon from "@lib/components/ImageIcon.svelte"
   import Link from "@lib/components/Link.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Popover from "@lib/components/Popover.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Profile from "@app/components/Profile.svelte"
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
+  import EventInfo from "@app/components/EventInfo.svelte"
   import ProfileBadges from "@app/components/ProfileBadges.svelte"
   import ChatEnable from "@app/components/ChatEnable.svelte"
-  import {canDecrypt, pubkeyLink} from "@app/core/state"
+  import {pubkeyLink, deriveUserIsSpaceAdmin} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
+  import {pushToast} from "@app/util/toast"
   import {makeChatPath} from "@app/util/routes"
 
   export type Props = {
@@ -22,15 +33,83 @@
 
   const {pubkey, url}: Props = $props()
 
+  const profile = deriveProfile(pubkey, removeUndefined([url]))
+
+  const userIsAdmin = deriveUserIsSpaceAdmin(url)
+
   const back = () => history.back()
 
   const chatPath = makeChatPath([pubkey])
 
-  const openChat = () => ($canDecrypt ? goto(chatPath) : pushModal(ChatEnable, {next: chatPath}))
+  const showInfo = () => pushModal(EventInfo, {url, event: $profile!.event})
+
+  const openChat = () => ($shouldUnwrap ? goto(chatPath) : pushModal(ChatEnable, {next: chatPath}))
+
+  const toggleMenu = (pubkey: string) => {
+    showMenu = !showMenu
+  }
+
+  const closeMenu = () => {
+    showMenu = false
+  }
+
+  const banMember = () =>
+    pushModal(Confirm, {
+      title: "Ban User",
+      message: `Are you sure you want to ban @${displayProfileByPubkey(pubkey)} from the space?`,
+      confirm: async () => {
+        const {error} = await manageRelay(url!, {
+          method: ManagementMethod.BanPubkey,
+          params: [pubkey],
+        })
+
+        if (error) {
+          pushToast({theme: "error", message: error})
+        } else {
+          pushToast({message: "User has successfully been banned!"})
+          back()
+        }
+      },
+    })
+
+  let showMenu = $state(false)
 </script>
 
 <div class="flex flex-col gap-4">
-  <Profile showPubkey avatarSize={14} {pubkey} {url} />
+  <div class="flex justify-between">
+    <Profile showPubkey avatarSize={14} {pubkey} {url} />
+    {#if $profile || $userIsAdmin}
+      <div class="relative">
+        <Button class="btn btn-circle btn-ghost btn-sm" onclick={() => toggleMenu(pubkey)}>
+          <Icon icon={MenuDots} />
+        </Button>
+        {#if showMenu}
+          <Popover hideOnClick onClose={closeMenu}>
+            <ul
+              transition:fly
+              class="bg-alt menu absolute right-0 z-popover w-48 gap-1 rounded-box p-2 shadow-md">
+              {#if $profile}
+                <li>
+                  <Button onclick={showInfo}>
+                    <Icon icon={Code2} />
+                    User Details
+                  </Button>
+                </li>
+              {/if}
+              {#if $userIsAdmin}
+                <li>
+                  <Button class="text-error" onclick={banMember}>
+                    <Icon icon={MinusCircle} />
+                    Ban User
+                  </Button>
+                </li>
+              {/if}
+            </ul>
+          </Popover>
+        {/if}
+      </div>
+    {/if}
+  </div>
   <ProfileInfo {pubkey} {url} />
   <ProfileBadges {pubkey} {url} />
   <ModalFooter>
@@ -40,7 +119,7 @@
     </Button>
     <div class="flex gap-2">
       <Link external href={pubkeyLink(pubkey)} class="btn btn-neutral">
-        <Avatar src="/coracle.png" />
+        <ImageIcon alt="" src="/coracle.png" />
         Open in Coracle
       </Link>
       <Button onclick={openChat} class="btn btn-primary">

src/app/components/ProfileEdit.svelte

@@ -1,22 +1,13 @@
 <script lang="ts">
-  import {nthNe} from "@welshman/lib"
   import type {Profile} from "@welshman/util"
-  import {
-    getTag,
-    makeEvent,
-    makeProfile,
-    editProfile,
-    createProfile,
-    isPublishedProfile,
-    uniqTags,
-  } from "@welshman/util"
-  import {Router} from "@welshman/router"
-  import {pubkey, profilesByPubkey, publishThunk} from "@welshman/app"
+  import {getTag, makeProfile} from "@welshman/util"
+  import {pubkey, profilesByPubkey} from "@welshman/app"
   import Button from "@lib/components/Button.svelte"
   import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
   import {clearModals} from "@app/util/modal"
   import {pushToast} from "@app/util/toast"
-  import {PROTECTED, getMembershipUrls, userMembership} from "@app/core/state"
+  import {PROTECTED} from "@app/core/state"
+  import {updateProfile} from "../core/commands"
 
   const profile = $profilesByPubkey.get($pubkey!) || makeProfile()
   const shouldBroadcast = !getTag(PROTECTED, profile.event?.tags || [])
@@ -25,21 +16,7 @@
   const back = () => history.back()
 
   const onsubmit = ({profile, shouldBroadcast}: {profile: Profile; shouldBroadcast: boolean}) => {
-    const router = Router.get()
-    const template = isPublishedProfile(profile) ? editProfile(profile) : createProfile(profile)
-    const scenarios = [router.FromRelays(getMembershipUrls($userMembership))]
-
-    if (shouldBroadcast) {
-      scenarios.push(router.FromUser(), router.Index())
-      template.tags = template.tags.filter(nthNe(0, "-"))
-    } else {
-      template.tags = uniqTags([...template.tags, PROTECTED])
-    }
-
-    const event = makeEvent(template.kind, template)
-    const relays = router.merge(scenarios).getUrls()
-
-    publishThunk({event, relays})
+    updateProfile({profile, shouldBroadcast})
     pushToast({message: "Your profile has been updated!"})
     clearModals()
   }

src/app/components/ProfileEject.svelte

@@ -32,7 +32,7 @@
       }
 
       success = true
-      pushToast({message: "Success! Please check your inbox and continue when you're ready."})
+      pushToast({message: "Success! Please check your messages and continue when you're ready."})
 
       await logout()
     } finally {

src/app/components/ProfileInfo.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import {removeNil} from "@welshman/lib"
+  import {removeUndefined} from "@welshman/lib"
   import {deriveProfile} from "@welshman/app"
-  import Content from "@app/components/Content.svelte"
+  import ContentMinimal from "@app/components/ContentMinimal.svelte"
 
   export type Props = {
     pubkey: string
@@ -10,9 +10,9 @@
 
   const {pubkey, url}: Props = $props()
 
-  const profile = deriveProfile(pubkey, removeNil([url]))
+  const profile = deriveProfile(pubkey, removeUndefined([url]))
 </script>
 
 {#if $profile}
-  <Content event={{content: $profile.about || "", tags: []}} hideMediaAtDepth={0} />
+  <ContentMinimal event={{content: $profile.about || "", tags: []}} />
 {/if}

src/app/components/ProfileLatest.svelte

@@ -2,8 +2,6 @@
   import type {Snippet} from "svelte"
   import {load} from "@welshman/net"
   import {NOTE} from "@welshman/util"
-  import {fly} from "@lib/transition"
-  import Spinner from "@lib/components/Spinner.svelte"
   import NoteItem from "@app/components/NoteItem.svelte"
 
   interface Props {
@@ -24,16 +22,16 @@
 <div class="col-4">
   <div class="flex flex-col gap-2">
     {#await events}
-      <p class="center my-12 flex">
-        <Spinner loading />
+      <p class="center flex min-h-6">
+        <span class="loading loading-spinner"></span>
       </p>
     {:then events}
       {#each events as event (event.id)}
-        <div in:fly>
-          <NoteItem {url} {event} />
-        </div>
+        <NoteItem {url} {event} />
       {:else}
-        {@render fallback?.()}
+        <div class="min-h-6">
+          {@render fallback?.()}
+        </div>
       {/each}
     {/await}
   </div>

src/app/components/ProfileLink.svelte

@@ -18,6 +18,8 @@
   const openProfile = () => pushModal(ProfileDetail, {pubkey, url})
 </script>
 
-<Button onclick={preventDefault(openProfile)} class={cx(props.class, {"link-content": !unstyled})}>
+<Button
+  onclick={preventDefault(openProfile)}
+  class={cx(props.class, {"link-content bg-alt": !unstyled})}>
   @<ProfileName {pubkey} {url} />
 </Button>

src/app/components/ProfileName.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {removeNil} from "@welshman/lib"
+  import {removeUndefined} from "@welshman/lib"
   import {deriveProfileDisplay} from "@welshman/app"
 
   type Props = {
@@ -9,7 +9,7 @@
 
   const {pubkey, url}: Props = $props()
 
-  const profileDisplay = deriveProfileDisplay(pubkey, removeNil([url]))
+  const profileDisplay = deriveProfileDisplay(pubkey, removeUndefined([url]))
 </script>
 
 {$profileDisplay}

src/app/components/ProfileSpaces.svelte

@@ -5,10 +5,10 @@
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
+  import RelayIcon from "@app/components/RelayIcon.svelte"
   import RelayName from "@app/components/RelayName.svelte"
   import {makeSpacePath} from "@app/util/routes"
-  import {getMembershipUrls, membershipsByPubkey} from "@app/core/state"
+  import {deriveGroupList, getSpaceUrlsFromGroupList} from "@app/core/state"
 
   type Props = {
     pubkey: string
@@ -16,7 +16,8 @@
 
   const {pubkey}: Props = $props()
 
-  const spaceUrls = $derived(getMembershipUrls($membershipsByPubkey.get(pubkey)))
+  const groupList = deriveGroupList(pubkey)
+  const spaceUrls = $derived(getSpaceUrlsFromGroupList($groupList))
 
   const back = () => history.back()
 </script>
@@ -25,7 +26,7 @@
   {#each spaceUrls as url (url)}
     <div class="card2 bg-alt flex flex-row items-center gap-2">
       <div class="flex-shrink-0">
-        <SpaceAvatar {url} />
+        <RelayIcon {url} size={12} />
       </div>
       <div class="flex flex-grow flex-col">
         <RelayName {url} />

src/app/components/QRCode.svelte

@@ -26,8 +26,8 @@
   })
 </script>
 
-<Button class="max-w-full {props.class}" onclick={copy}>
-  <div bind:this={wrapper} style={`height: ${height}px`}>
+<Button class="flex w-full justify-center {props.class}" onclick={copy}>
+  <div bind:this={wrapper} class="w-md" style={`height: ${height}px`}>
     <canvas
       class="rounded-box"
       bind:this={canvas}

src/app/components/ReactionSummary.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import cx from "classnames"
   import {onMount} from "svelte"
   import type {Snippet} from "svelte"
-  import {groupBy, sum, uniq, uniqBy, batch, displayList} from "@welshman/lib"
+  import {groupBy, map, sum, uniq, uniqBy, batch, displayList} from "@welshman/lib"
   import {
+    REPORT,
     REACTION,
     ZAP_RESPONSE,
     getReplyFilters,
@@ -10,18 +12,17 @@
     getEmojiTag,
     fromMsats,
     getTag,
-    REPORT,
     DELETE,
   } from "@welshman/util"
   import type {TrustedEvent, EventContent, Zap} from "@welshman/util"
-  import {deriveEvents, deriveEventsMapped} from "@welshman/store"
+  import {deriveArray, deriveEventsById, deriveItemsByKey} from "@welshman/store"
   import {load} from "@welshman/net"
   import {pubkey, repository, getValidZap, displayProfileByPubkey} from "@welshman/app"
   import {isMobile, preventDefault, stopPropagation} from "@lib/html"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Reaction from "@app/components/Reaction.svelte"
-  import EventReportDetails from "@app/components/EventReportDetails.svelte"
+  import ReportDetails from "@app/components/ReportDetails.svelte"
   import {REACTION_KINDS} from "@app/core/state"
   import {pushModal} from "@app/util/modal"
 
@@ -45,19 +46,22 @@
     children,
   }: Props = $props()
 
-  const reports = deriveEvents(repository, {
-    filters: [{kinds: [REPORT], "#e": [event.id]}],
-  })
+  const reports = deriveArray(
+    deriveEventsById({repository, filters: [{kinds: [REPORT], "#e": [event.id]}]}),
+  )
 
-  const reactions = deriveEvents(repository, {
-    filters: [{kinds: [REACTION], "#e": [event.id]}],
-  })
+  const reactions = deriveArray(
+    deriveEventsById({repository, filters: [{kinds: [REACTION], "#e": [event.id]}]}),
+  )
 
-  const zaps = deriveEventsMapped<Zap>(repository, {
-    filters: [{kinds: [ZAP_RESPONSE], "#e": [event.id]}],
-    itemToEvent: item => item.response,
-    eventToItem: (response: TrustedEvent) => getValidZap(response, event),
-  })
+  const zaps = deriveArray(
+    deriveItemsByKey<Zap>({
+      repository,
+      getKey: zap => zap.response.id,
+      filters: [{kinds: [ZAP_RESPONSE], "#e": [event.id]}],
+      eventToItem: (response: TrustedEvent) => getValidZap(response, event),
+    }),
+  )
 
   const onReactionClick = (events: TrustedEvent[]) => {
     const reaction = events.find(e => e.pubkey === $pubkey)
@@ -74,20 +78,20 @@
     }
   }
 
-  const onReportClick = () => pushModal(EventReportDetails, {url, event})
+  const onReportClick = () => pushModal(ReportDetails, {url, event})
 
-  const reportReasons = $derived(uniq($reports.map(e => getTag("e", e.tags)?.[2])))
+  const reportReasons = $derived(uniq(map(e => getTag("e", e.tags)?.[2], $reports.values())))
 
   const getReactionKey = (e: TrustedEvent) => getEmojiTag(e.content, e.tags)?.join("") || e.content
 
   const groupedReactions = $derived(
     groupBy(
       getReactionKey,
-      uniqBy(e => `${e.pubkey}${getReactionKey(e)}`, $reactions),
+      uniqBy(e => `${e.pubkey}${getReactionKey(e)}`, $reactions.values()),
     ),
   )
 
-  const groupedZaps = $derived(groupBy(e => getReactionKey(e.request), $zaps))
+  const groupedZaps = $derived(groupBy(e => getReactionKey(e.request), $zaps.values()))
 
   onMount(() => {
     const controller = new AbortController()
@@ -96,7 +100,7 @@
       load({
         relays: [url],
         signal: controller.signal,
-        filters: getReplyFilters([event], {kinds: [REPORT, DELETE, ...REACTION_KINDS]}),
+        filters: getReplyFilters([event], {kinds: REACTION_KINDS}),
         onEvent: batch(300, (events: TrustedEvent[]) => {
           load({
             relays: [url],
@@ -118,7 +122,7 @@
       <button
         type="button"
         data-tip={`This content has been reported as "${displayList(reportReasons)}".`}
-        class="btn btn-error btn-xs tooltip-right flex items-center gap-1 rounded-full"
+        class="btn btn-error btn-xs tooltip-right flex items-center gap-1 rounded-full font-normal"
         class:tooltip={!noTooltip && !isMobile}
         onclick={stopPropagation(preventDefault(onReportClick))}>
         <Icon icon={Danger} />
@@ -134,11 +138,15 @@
       <button
         type="button"
         data-tip={tooltip}
-        class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full {reactionClass}"
-        class:tooltip={!noTooltip && !isMobile}
-        class:border={isOwn}
-        class:border-solid={isOwn}
-        class:border-primary={isOwn}>
+        class={cx(
+          reactionClass,
+          "flex-inline btn btn-outline btn-neutral btn-xs flex items-center gap-1 rounded-full text-xs font-normal",
+          {
+            tooltip: !noTooltip && !isMobile,
+            "border-neutral-content/20": !isOwn,
+            "btn-primary": isOwn,
+          },
+        )}>
         <Reaction event={zaps[0].request} />
         <span>{amount}</span>
       </button>
@@ -152,11 +160,15 @@
       <button
         type="button"
         data-tip={tooltip}
-        class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full {reactionClass}"
-        class:tooltip={!noTooltip && !isMobile}
-        class:border={isOwn}
-        class:border-solid={isOwn}
-        class:border-primary={isOwn}
+        class={cx(
+          reactionClass,
+          "flex-inline btn btn-outline btn-neutral btn-xs gap-1 rounded-full font-normal",
+          {
+            tooltip: !noTooltip && !isMobile,
+            "border-neutral-content/20": !isOwn,
+            "btn-primary": isOwn,
+          },
+        )}
         onclick={stopPropagation(preventDefault(onClick))}>
         <Reaction event={events[0]} />
         {#if events.length > 1}

src/app/components/RelayDescription.svelte

@@ -6,6 +6,6 @@
   const relay = deriveRelay(props.url)
 </script>
 
-{#if $relay?.profile?.description}
-  <p class={props.class}>{$relay?.profile.description}</p>
+{#if $relay?.description}
+  <p class={props.class}>{$relay.description}</p>
 {/if}

src/app/components/RelayIcon.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import {deriveRelay} from "@welshman/app"
+  import RemoteControllerMinimalistic from "@assets/icons/remote-controller-minimalistic.svg?dataurl"
+  import ImageIcon from "@lib/components/ImageIcon.svelte"
+
+  type Props = {
+    url: string
+    size?: number
+    class?: string
+  }
+
+  const {url, size = 7, ...props}: Props = $props()
+
+  const relay = deriveRelay(url)
+</script>
+
+<ImageIcon {size} alt="" src={$relay?.icon || RemoteControllerMinimalistic} class={props.class} />

src/app/components/RelayItem.svelte

@@ -4,13 +4,13 @@
   import Link from "@lib/components/Link.svelte"
   import {displayUrl} from "@welshman/lib"
   import {displayRelayUrl} from "@welshman/util"
-  import {deriveRelay} from "@welshman/app"
+  import {deriveRelay, deriveRelayStats} from "@welshman/app"
 
   const {url, children} = $props()
 
   const relay = deriveRelay(url)
-
-  const connections = $derived($relay?.stats?.open_count || 0)
+  const relayStats = deriveRelayStats(url)
+  const connections = $derived($relayStats?.open_count || 0)
 </script>
 
 <div class="card2 card2-sm bg-alt column gap-2">
@@ -21,20 +21,20 @@
     </div>
     {@render children?.()}
   </div>
-  {#if $relay?.profile?.description}
-    <p class="ellipsize">{$relay?.profile.description}</p>
+  {#if $relay?.description}
+    <p class="ellipsize">{$relay.description}</p>
   {/if}
   <span class="flex items-center gap-1 whitespace-nowrap text-sm">
-    {#if $relay?.profile?.contact}
-      <Link external class="ellipsize underline" href={$relay.profile.contact}
-        >{displayUrl($relay.profile.contact)}</Link>
+    {#if $relay?.contact}
+      <Link external class="ellipsize underline" href={$relay.contact}
+        >{displayUrl($relay.contact)}</Link>
       &bull;
     {/if}
-    {#if Array.isArray($relay?.profile?.supported_nips)}
+    {#if Array.isArray($relay?.supported_nips)}
       <span
         class="tooltip cursor-pointer underline"
-        data-tip="NIPs supported: {$relay.profile.supported_nips.join(', ')}">
-        {$relay.profile.supported_nips.length} NIPs
+        data-tip="NIPs supported: {$relay.supported_nips.join(', ')}">
+        {$relay.supported_nips.length} NIPs
       </span>
       &bull;
     {/if}

src/app/components/RelayName.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
   import {deriveRelayDisplay} from "@welshman/app"
 
-  const {url} = $props()
+  type Props = {
+    url: string
+  }
+
+  const {url}: Props = $props()
 
   const display = $derived(deriveRelayDisplay(url))
 </script>

src/app/components/RelaySummary.svelte

@@ -1,20 +1,19 @@
 <script lang="ts">
-  import {gt} from "@welshman/lib"
-  import {deriveRelay} from "@welshman/app"
-  import Ghost from "@assets/icons/ghost-smile.svg?dataurl"
   import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import RelayName from "@app/components/RelayName.svelte"
+  import RelayIcon from "@app/components/RelayIcon.svelte"
   import RelayDescription from "@app/components/RelayDescription.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
-  import {membersByUrl, userRoomsByUrl} from "@app/core/state"
+  import {deriveGroupListPubkeys, deriveUserRooms} from "@app/core/state"
 
   type Props = {
     url: string
   }
 
   const {url}: Props = $props()
-  const relay = deriveRelay(url)
+  const rooms = deriveUserRooms(url)
+  const favorited = deriveGroupListPubkeys(url)
 </script>
 
 <div class="col-4 text-left">
@@ -24,14 +23,10 @@
         <div class="avatar relative">
           <div
             class="center !flex h-12 w-12 min-w-12 rounded-full border-2 border-solid border-base-300 bg-base-300">
-            {#if $relay?.profile?.icon}
-              <img alt="" src={$relay.profile.icon} />
-            {:else}
-              <Icon icon={Ghost} size={5} />
-            {/if}
+            <RelayIcon {url} />
           </div>
         </div>
-        {#if $userRoomsByUrl.has(url)}
+        {#if $rooms.includes(url)}
           <div
             class="tooltip absolute -right-1 -top-1 h-5 w-5 rounded-full bg-primary"
             data-tip="You are already a member of this space.">
@@ -48,10 +43,10 @@
     </div>
     <RelayDescription {url} />
   </div>
-  {#if gt($membersByUrl.get(url)?.size, 0)}
+  {#if $favorited.size > 0}
     <div class="row-2 card2 card2-sm bg-alt">
-      Members:
-      <ProfileCircles pubkeys={Array.from($membersByUrl.get(url) || [])} />
+      Favorited By:
+      <ProfileCircles pubkeys={Array.from($favorited)} />
     </div>
   {/if}
 </div>