Bump version

.env

@@ -1,8 +1,6 @@
 VITE_DEFAULT_PUBKEYS=fe7f6bc6f7338b76bbf80db402ade65953e20b2f23e66e898204b63cc42539a3,391819e2f2f13b90cac7209419eb574ef7c0d1f4e81867fc24c47a3ce5e8a248,84dee6e676e5bb67b4ad4e042cf70cbd8681155db535942fcc6a0533858a7240,dace63b00c42e6e017d00dd190a9328386002ff597b841eb5ef91de4f1ce8491,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,58c741aa630c2da35a56a77c1d05381908bd10504fdd2d8b43f725efa6d23196,eeb11961b25442b16389fe6c7ebea9adf0ac36dd596816ea7119e521b8821b9e,b676ded7c768d66a757aa3967b1243d90bf57afb09d1044d3219d8d424e4aea0,61066504617ee79387021e18c89fb79d1ddbc3e7bff19cf2298f40466f8715e9,3f770d65d3a764a9c5cb503ae123e62ec7598ad035d836e2a810f3877a745b24,6389be6491e7b693e9f368ece88fcd145f07c068d2c1bbae4247b9b5ef439d32,97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322
 VITE_BURROW_URL=
 VITE_PLATFORM_URL=https://flotilla.social
-VITE_PLATFORM_TERMS=https://flotilla.social/terms
-VITE_PLATFORM_PRIVACY=https://flotilla.social/privacy
 VITE_PLATFORM_NAME=Flotilla
 VITE_PLATFORM_LOGO=static/flotilla.png
 VITE_PLATFORM_RELAY=

.fdignore

@@ -1,13 +1,3 @@
 src/assets
+android
 build
-.idea
-.gradle
-*.png
-*.ttf
-gradlew*
-_app
-release
-android/capacitor-cordova-android-plugins
-android/app/src/androidTest
-android/app/src/test
-

.gitignore

@@ -17,9 +17,6 @@ Thumbs.db
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
-# Android
-.idea
-
 # Generated assets
 static/favicon.ico
 static/pwa-64x64.png

CHANGELOG.md

@@ -1,40 +0,0 @@
-# Changelog
-
-# 0.2.5
-
-* Improve room and data loading
-* Use @welshman/editor
-* Drop support for legacy event kinds
-* Add support for back button navigation on android
-* Remove note to self page (still available via chat)
-* Improve chat conversation search
-* Change how reply UI works
-
-# 0.2.4
-
-* Update icons
-
-# 0.2.3
-
-* Add NIP 56 reports for messages and threads
-* Add ToS and privacy policy
-* Add avatar fallback icons
-* Add mark as read to chats
-* Add send button to chat compose
-* Accommodate onion URLs
-* Improve loading and notifications
-
-# 0.2.2
-
-* Fix bug with sending messages
-
-# 0.2.1
-
-* Improve performance, as well as scrolling and loading
-* Integrate @welshman/editor
-* Improve NIP 29 compatibility
-* Fix incorrect connection errors
-* Refine notifications
-* Add room menu to space homepage
-* Fix storage bugs
-* Add join space CTA

README.md

@@ -6,11 +6,7 @@ If you would like to be interoperable with Flotilla, please check out this draft
 
 # Deploy
 
-To run your own Flotilla, it's as simple as:
-
-- `npm install`
-- `npm run build`
-- `npx serve build`
+To run your own Flotilla, it's as simple as `npm run build`, then serve the `build` directory.
 
 ## Environment
 

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "social.flotilla"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 5
-        versionName "0.2.5"
+        versionCode 1
+        versionName "1.0"
         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

@@ -9,7 +9,6 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-    implementation project(':capacitor-app')
     implementation project(':nostr-signer-capacitor-plugin')
 
 }

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

@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
+    <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
         <item name="colorAccent">@color/colorAccent</item>
@@ -17,4 +19,4 @@
     <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
         <item name="android:background">@drawable/splash</item>
     </style>
-</resources>
+</resources>

android/build.gradle

@@ -7,7 +7,7 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:8.8.0'
+        classpath 'com.android.tools.build:gradle:8.2.1'
         classpath 'com.google.gms:google-services:4.4.0'
 
         // NOTE: Do not place your application dependencies here; they belong

android/capacitor.settings.gradle

@@ -2,8 +2,5 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
-include ':capacitor-app'
-project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
-
 include ':nostr-signer-capacitor-plugin'
 project(':nostr-signer-capacitor-plugin').projectDir = new File('../node_modules/nostr-signer-capacitor-plugin/android')

android/gradle/wrapper/gradle-wrapper.properties

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

build.sh

@@ -16,6 +16,7 @@ eval "$temp_env"
 
 if [[ $VITE_PLATFORM_LOGO =~ ^https://* ]]; then
   curl $VITE_PLATFORM_LOGO > static/logo.png
+  cp static/logo.png assets/logo.png
   export VITE_PLATFORM_LOGO=static/logo.png
 fi
 
@@ -27,10 +28,3 @@ perl -i -pe"s|{DESCRIPTION}|$VITE_PLATFORM_DESCRIPTION|g" build/index.html
 perl -i -pe"s|{ACCENT}|$VITE_PLATFORM_ACCENT|g" build/index.html
 perl -i -pe"s|{NAME}|$VITE_PLATFORM_NAME|g" build/index.html
 perl -i -pe"s|{URL}|$VITE_PLATFORM_URL|g" build/index.html
-
-npx cap sync
-npx @capacitor/assets generate \
-  --iconBackgroundColor '#eeeeee' \
-  --iconBackgroundColorDark '#222222' \
-  --splashBackgroundColor '#ffffff' \
-  --splashBackgroundColorDark '#191E24'

capacitor.config.ts

@@ -4,9 +4,6 @@ const config: CapacitorConfig = {
   appId: 'social.flotilla',
   appName: 'Flotilla',
   webDir: 'build'
-  server: {
-    androidScheme: "https"
-  },
   plugins: {
     SplashScreen: {
       androidSplashResourceName: "splash"

package.json

@@ -1,24 +1,20 @@
 {
   "name": "flotilla",
-  "version": "0.2.5",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "vite dev",
     "build": "./build.sh",
     "sourcemaps": "sentry-cli --url https://glitchtip.coracle.social --auth-token $GLITCHTIP_AUTH_TOKEN --api-key $VITE_GLITCHTIP_API_KEY sourcemaps --org coracle --project flotilla --release $(cat package.json|jq -r '.version') upload --url-prefix /_app/immutable/ build/_app/immutable",
-    "release:android": "cap build android --androidreleasetype APK --signing-type apksigner",
+    "release:android": "cap sync && cap build android --androidreleasetype APK --signing-type apksigner",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check src && eslint src",
     "format": "prettier --write src",
     "prepare": "husky"
   },
-  "overrides": {
-    "@capacitor/core": "^7.0.1"
-  },
   "devDependencies": {
     "@capacitor/assets": "^3.0.5",
-    "@sentry/cli": "^2.40.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/eslint": "^9.6.0",
@@ -40,28 +36,37 @@
   },
   "type": "module",
   "dependencies": {
-    "@capacitor/android": "^7.0.1",
-    "@capacitor/app": "^7.0.0",
-    "@capacitor/cli": "^6.2.0",
-    "@capacitor/core": "^7.0.1",
+    "@capacitor/android": "^6.1.2",
+    "@capacitor/cli": "^6.1.2",
+    "@capacitor/core": "^6.1.2",
     "@noble/curves": "^1.5.0",
     "@noble/hashes": "^1.4.0",
     "@poppanator/sveltekit-svg": "^4.2.1",
     "@sentry/browser": "^8.35.0",
     "@sveltejs/adapter-static": "^3.0.4",
+    "@tiptap/extension-code": "^2.6.6",
+    "@tiptap/extension-code-block": "^2.6.6",
+    "@tiptap/extension-document": "^2.6.6",
+    "@tiptap/extension-dropcursor": "^2.6.6",
+    "@tiptap/extension-gapcursor": "^2.6.6",
+    "@tiptap/extension-hard-break": "^2.6.6",
+    "@tiptap/extension-history": "^2.6.6",
+    "@tiptap/extension-paragraph": "^2.6.6",
+    "@tiptap/extension-placeholder": "^2.9.1",
+    "@tiptap/extension-text": "^2.6.6",
+    "@tiptap/suggestion": "^2.6.4",
     "@types/qrcode": "^1.5.5",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.6",
-    "@welshman/app": "~0.0.41",
-    "@welshman/content": "~0.0.15",
-    "@welshman/dvm": "~0.0.14",
-    "@welshman/editor": "~0.0.8",
-    "@welshman/feeds": "~0.0.30",
-    "@welshman/lib": "~0.0.38",
-    "@welshman/net": "~0.0.46",
-    "@welshman/signer": "~0.0.20",
-    "@welshman/store": "~0.0.15",
-    "@welshman/util": "~0.0.59",
+    "@welshman/app": "~0.0.34",
+    "@welshman/content": "~0.0.14",
+    "@welshman/dvm": "~0.0.12",
+    "@welshman/feeds": "~0.0.27",
+    "@welshman/lib": "~0.0.33",
+    "@welshman/net": "~0.0.43",
+    "@welshman/signer": "~0.0.17",
+    "@welshman/store": "~0.0.14",
+    "@welshman/util": "~0.0.52",
     "daisyui": "^4.12.10",
     "date-picker-svelte": "^2.13.0",
     "dotenv": "^16.4.5",
@@ -69,9 +74,11 @@
     "fuse.js": "^7.0.0",
     "husky": "^9.1.6",
     "idb": "^8.0.0",
+    "nostr-editor": "^0.0.3",
     "nostr-signer-capacitor-plugin": "^0.0.3",
     "nostr-tools": "^2.7.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
-    "qrcode": "^1.5.4"
+    "qrcode": "^1.5.4",
+    "svelte-tiptap": "^1.1.3"
   }
 }

src/app.css

@@ -40,14 +40,15 @@
 
 :root {
   font-family: Lato;
+}
+
+[data-theme] {
   --base-100: oklch(var(--b1));
   --base-200: oklch(var(--b2));
   --base-300: oklch(var(--b3));
   --base-content: oklch(var(--bc));
   --primary: oklch(var(--p));
-  --primary-content: oklch(var(--pc));
   --secondary: oklch(var(--s));
-  --secondary-content: oklch(var(--sc));
 }
 
 .bg-alt,
@@ -119,16 +120,6 @@
   @apply overflow-hidden text-ellipsis;
 }
 
-[data-tip]::before {
-  @apply ellipsize;
-}
-
-@media (max-width: 639px) {
-  [data-tip]::before {
-    display: none;
-  }
-}
-
 .content-padding-x {
   @apply px-4 sm:px-8 md:px-12;
 }
@@ -248,19 +239,3 @@ emoji-picker {
   --input-font-color: var(--base-content);
   --outline-color: var(--base-100);
 }
-
-/* tiptap */
-
-.tiptap {
-  --tiptap-object-bg: var(--base-100);
-  --tiptap-object-fg: var(--base-content);
-  --tiptap-active-bg: var(--primary);
-  --tiptap-active-fg: var(--primary-content);
-}
-
-.tiptap-suggestions {
-  --tiptap-object-bg: var(--base-100);
-  --tiptap-object-fg: var(--base-content);
-  --tiptap-active-bg: var(--base-300);
-  --tiptap-active-fg: var(--base-content);
-}

src/app/commands.ts

@@ -1,9 +1,7 @@
-import * as nip19 from "nostr-tools/nip19"
 import {get} from "svelte/store"
-import {ctx, sample, uniq, sleep, chunk, equals} from "@welshman/lib"
+import {ctx, sample, uniq, sleep, chunk, equals, choice} from "@welshman/lib"
 import {
   DELETE,
-  REPORT,
   PROFILE,
   INBOX_RELAYS,
   RELAYS,
@@ -28,9 +26,8 @@ import {
   getRelayTags,
   isShareableRelayUrl,
   getRelayTagValues,
-  toNostrURI,
 } from "@welshman/util"
-import type {TrustedEvent, EventContent, EventTemplate, List} from "@welshman/util"
+import type {TrustedEvent, EventTemplate, List} from "@welshman/util"
 import type {SubscribeRequestWithHandlers} from "@welshman/net"
 import {PublishStatus, AuthStatus, SocketStatus} from "@welshman/net"
 import {Nip59, makeSecret, stamp, Nip46Broker} from "@welshman/signer"
@@ -48,7 +45,7 @@ import {
   loadFollows,
   loadMutes,
   tagEvent,
-  tagEventForReaction,
+  tagReactionTo,
   getRelayUrls,
   userRelaySelections,
   userInboxRelaySelections,
@@ -57,8 +54,6 @@ import {
   addSession,
   clearStorage,
   dropSession,
-  tagEventForComment,
-  tagEventForQuote,
 } from "@welshman/app"
 import type {Thunk} from "@welshman/app"
 import {
@@ -90,6 +85,19 @@ export const getPubkeyPetname = (pubkey: string) => {
   return display
 }
 
+export const makeMention = (pubkey: string, hints?: string[]) => [
+  "p",
+  pubkey,
+  choice(hints || getPubkeyHints(pubkey)),
+  getPubkeyPetname(pubkey),
+]
+
+export const makeIMeta = (url: string, data: Record<string, string>) => [
+  "imeta",
+  `url ${url}`,
+  ...Object.entries(data).map(([k, v]) => [k, v].join(" ")),
+]
+
 export const getThunkError = async (thunk: Thunk) => {
   const result = await thunk.result
   const [{status, message}] = Object.values(result) as any
@@ -99,22 +107,6 @@ export const getThunkError = async (thunk: Thunk) => {
   }
 }
 
-export const prependParent = (parent: TrustedEvent | undefined, {content, tags}: EventContent) => {
-  if (parent) {
-    const nevent = nip19.neventEncode({
-      id: parent.id,
-      kind: parent.kind,
-      author: parent.pubkey,
-      relays: ctx.app.router.Event(parent).limit(3).getUrls(),
-    })
-
-    tags = [...tags, tagEventForQuote(parent)]
-    content = toNostrURI(nevent) + "\n\n" + content
-  }
-
-  return {content, tags}
-}
-
 // Log in
 
 export const loginWithNip46 = async ({
@@ -129,7 +121,7 @@ export const loginWithNip46 = async ({
   connectSecret?: string
 }) => {
   const broker = Nip46Broker.get({relays, clientSecret, signerPubkey})
-  const result = await broker.connect(connectSecret, NIP46_PERMS)
+  const result = await broker.connect("", connectSecret, NIP46_PERMS)
 
   // TODO: remove ack result
   if (!["ack", connectSecret].includes(result)) return false
@@ -350,7 +342,7 @@ export const checkRelayAccess = async (url: string, claim = "") => {
 
   const result = await thunk.result
 
-  if (result[url].status === PublishStatus.Failure) {
+  if (result[url].status !== PublishStatus.Success) {
     const message =
       connection.auth.message?.replace(/^.*: /, "") ||
       result[url].message?.replace(/^.*: /, "") ||
@@ -397,6 +389,7 @@ export const checkRelayAuth = async (url: string, timeout = 3000) => {
 
 export const attemptRelayAccess = async (url: string, claim = "") => {
   const checks = [
+    () => checkRelayProfile(url),
     () => checkRelayConnection(url),
     () => checkRelayAccess(url, claim),
     () => checkRelayAuth(url),
@@ -450,36 +443,13 @@ export const makeDelete = ({event}: {event: TrustedEvent}) => {
 export const publishDelete = ({relays, event}: {relays: string[]; event: TrustedEvent}) =>
   publishThunk({event: makeDelete({event}), relays})
 
-export type ReportParams = {
-  event: TrustedEvent
-  content: string
-  reason: string
-}
-
-export const makeReport = ({event, reason, content}: ReportParams) => {
-  const tags = [
-    ["p", event.pubkey],
-    ["e", event.id, reason],
-  ]
-
-  return createEvent(REPORT, {content, tags})
-}
-
-export const publishReport = ({
-  relays,
-  event,
-  reason,
-  content,
-}: ReportParams & {relays: string[]}) =>
-  publishThunk({event: makeReport({event, reason, content}), relays})
-
 export type ReactionParams = {
   event: TrustedEvent
   content: string
 }
 
 export const makeReaction = ({event, content}: ReactionParams) => {
-  const tags = tagEventForReaction(event)
+  const tags = [["k", String(event.kind)], ...tagReactionTo(event)]
   const groupTag = getTag("h", event.tags)
 
   if (groupTag) {
@@ -493,14 +463,37 @@ export const makeReaction = ({event, content}: ReactionParams) => {
 export const publishReaction = ({relays, ...params}: ReactionParams & {relays: string[]}) =>
   publishThunk({event: makeReaction(params), relays})
 
-export type CommentParams = {
+export type ReplyParams = {
   event: TrustedEvent
   content: string
   tags?: string[][]
 }
 
-export const makeComment = ({event, content, tags = []}: CommentParams) =>
-  createEvent(COMMENT, {content, tags: [...tags, ...tagEventForComment(event)]})
+export const makeComment = ({event, content, tags = []}: ReplyParams) => {
+  const seenRoots = new Set<string>()
 
-export const publishComment = ({relays, ...params}: CommentParams & {relays: string[]}) =>
+  for (const [raw, ...tag] of event.tags.filter(t => t[0].match(/^(k|e|a|i)$/i))) {
+    const T = raw.toUpperCase()
+    const t = raw.toLowerCase()
+
+    if (seenRoots.has(T)) {
+      tags.push([t, ...tag])
+    } else {
+      tags.push([T, ...tag])
+      seenRoots.add(T)
+    }
+  }
+
+  if (seenRoots.size === 0) {
+    tags.push(["K", String(event.kind)])
+    tags.push(["E", event.id])
+  }
+
+  tags.push(["k", String(event.kind)])
+  tags.push(["e", event.id])
+
+  return createEvent(COMMENT, {content, tags})
+}
+
+export const publishComment = ({relays, ...params}: ReplyParams & {relays: string[]}) =>
   publishThunk({event: makeComment(params), relays})

src/app/components/ChannelCompose.svelte

@@ -1,50 +1,50 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {writable} from "svelte/store"
-  import {EditorContent} from "svelte-tiptap"
+  import {createEditor, EditorContent} from "svelte-tiptap"
   import {isMobile} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import {makeEditor} from "@app/editor"
+  import {getEditorOptions, getEditorTags} from "@lib/editor"
+  import {getPubkeyHints} from "@app/commands"
 
   export let onSubmit: any
   export let content = ""
+  export let editor = createEditor(
+    getEditorOptions({
+      submit,
+      getPubkeyHints,
+      submitOnEnter: true,
+      autofocus: !isMobile,
+    }),
+  )
 
-  export const focus = () => $editor.chain().focus().run()
+  function submit() {
+    if ($loading) return
 
-  const uploading = writable(false)
+    onSubmit({
+      content: $editor.getText({blockSeparator: "\n"}),
+      tags: getEditorTags($editor),
+    })
 
-  const uploadFiles = () => $editor!.chain().selectFiles().run()
-
-  const submit = () => {
-    if ($uploading) return
-
-    const content = $editor!.getText({blockSeparator: "\n"}).trim()
-    const tags = $editor!.storage.nostr.getEditorTags()
-
-    if (!content) return
-
-    onSubmit({content, tags})
-
-    $editor!.chain().clearContent().run()
+    $editor.chain().clearContent().run()
   }
 
-  const editor = makeEditor({autofocus: !isMobile, submit, uploading, aggressive: true})
+  $: loading = $editor?.storage.fileUpload.loading
 
   onMount(() => {
-    $editor!.chain().setContent(content).run()
+    $editor.commands.setContent(content)
   })
 </script>
 
 <form
   class="relative z-feature flex gap-2 p-2"
-  on:submit|preventDefault={$uploading ? undefined : submit}>
+  on:submit|preventDefault={$loading ? undefined : 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}
-    on:click={uploadFiles}>
-    {#if $uploading}
+    disabled={$loading}
+    on:click={$editor.commands.selectFiles}>
+    {#if $loading}
       <span class="loading loading-spinner loading-xs"></span>
     {:else}
       <Icon icon="gallery-send" />
@@ -53,11 +53,4 @@
   <div class="chat-editor flex-grow overflow-hidden">
     <EditorContent editor={$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}
-    on:click={submit}>
-    <Icon icon="plain" />
-  </Button>
 </form>

src/app/components/ChannelComposeParent.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import type {TrustedEvent} from "@welshman/util"
-  import {displayProfileByPubkey} from "@welshman/app"
-  import {slide} from "@lib/transition"
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Content from "@app/components/Content.svelte"
-
-  export let event: TrustedEvent
-  export let clear: () => void
-</script>
-
-<div
-  class="relative border-l-2 border-solid border-primary bg-base-300 px-2 py-1 pr-8 text-xs"
-  transition:slide>
-  <p class="text-primary">Replying to @{displayProfileByPubkey(event.pubkey)}</p>
-  {#key event.id}
-    <Content {event} minLength={100} maxLength={300} expandMode="disabled" />
-  {/key}
-  <Button class="absolute right-2 top-2 cursor-pointer" on:click={clear}>
-    <Icon icon="close-circle" />
-  </Button>
-</div>

src/app/components/ChannelMessage.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
   import {hash} from "@welshman/lib"
-  import {now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {
     thunks,
-    pubkey,
     deriveProfile,
     deriveProfileDisplay,
-    formatTimestampAsDate,
     formatTimestampAsTime,
+    pubkey,
   } from "@welshman/app"
   import {isMobile} from "@lib/html"
   import LongPress from "@lib/components/LongPress.svelte"
@@ -33,7 +31,6 @@
   export let inert = false
 
   const thunk = $thunks[event.id]
-  const today = formatTimestampAsDate(now())
   const profile = deriveProfile(event.pubkey)
   const profileDisplay = deriveProfileDisplay(event.pubkey)
   const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
@@ -73,14 +70,7 @@
           <Button on:click={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>
+          <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
         </div>
       {/if}
       <div class="text-sm">
@@ -92,7 +82,7 @@
     </div>
   </div>
   <div class="row-2 ml-10 mt-1">
-    <ReactionSummary {url} {event} {onReactionClick} reactionClass="tooltip-right" />
+    <ReactionSummary relays={[url]} {event} {onReactionClick} reactionClass="tooltip-right" />
   </div>
   <button
     class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"

src/app/components/ChannelMessageMenu.svelte

@@ -3,7 +3,6 @@
   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 ConfirmDelete from "@app/components/ConfirmDelete.svelte"
   import {pushModal} from "@app/modal"
 
@@ -11,11 +10,6 @@
   export let event
   export let onClick
 
-  const report = () => {
-    onClick()
-    pushModal(EventReport, {url, event})
-  }
-
   const showInfo = () => {
     onClick()
     pushModal(EventInfo, {event})
@@ -41,12 +35,5 @@
         Delete Message
       </Button>
     </li>
-  {:else}
-    <li>
-      <Button class="text-error" on:click={report}>
-        <Icon size={4} icon="danger" />
-        Report Content
-      </Button>
-    </li>
   {/if}
 </ul>

src/app/components/Chat.svelte

@@ -10,10 +10,19 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {derived} from "svelte/store"
-  import {int, nthNe, MINUTE, sortBy, remove} from "@welshman/lib"
+  import type {Readable} from "svelte/store"
+  import type {Editor} from "svelte-tiptap"
+  import {nip19} from "nostr-tools"
+  import {int, nthNe, MINUTE, sortBy, remove, ctx} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent, DIRECT_MESSAGE, INBOX_RELAYS} from "@welshman/util"
-  import {pubkey, formatTimestampAsDate, inboxRelaySelectionsByPubkey, load} from "@welshman/app"
+  import {
+    pubkey,
+    formatTimestampAsDate,
+    inboxRelaySelectionsByPubkey,
+    load,
+    tagPubkey,
+  } from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -27,10 +36,9 @@
   import ProfileList from "@app/components/ProfileList.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChannelCompose.svelte"
-  import ChatComposeParent from "@app/components/ChannelComposeParent.svelte"
   import {userSettingValues, deriveChat, splitChatId, PLATFORM_NAME} from "@app/state"
   import {pushModal} from "@app/modal"
-  import {sendWrapped, prependParent} from "@app/commands"
+  import {sendWrapped} from "@app/commands"
 
   export let id
 
@@ -49,31 +57,28 @@
     pushModal(ProfileList, {pubkeys: others, title: `People in this conversation`})
 
   const replyTo = (event: TrustedEvent) => {
-    parent = event
-    compose.focus()
+    const relays = ctx.app.router.Event(event).getUrls()
+    const nevent = nip19.neventEncode({...event, relays})
+
+    $editor.commands.insertNEvent({nevent})
+    $editor.commands.insertContent("\n")
+    $editor.commands.focus()
   }
 
-  const clearParent = () => {
-    parent = undefined
-  }
+  const onSubmit = async ({content, ...params}: EventContent) => {
+    // Remove p tags since they result in forking the conversation
+    const tags = [...params.tags.filter(nthNe(0, "p")), ...remove($pubkey!, pubkeys).map(tagPubkey)]
 
-  const onSubmit = async ({content, tags}: EventContent) => {
     await sendWrapped({
       pubkeys,
-      template: createEvent(
-        DIRECT_MESSAGE,
-        prependParent(parent, {content, tags: tags.filter(nthNe(0, "p"))}),
-      ),
+      template: createEvent(DIRECT_MESSAGE, {content, tags}),
       delay: $userSettingValues.send_delay,
     })
-
-    clearParent()
   }
 
   let loading = true
-  let parent: TrustedEvent | undefined
+  let editor: Readable<Editor>
   let elements: Element[] = []
-  let compose: ChatCompose
 
   $: {
     elements = []
@@ -195,8 +200,5 @@
       <slot name="info" />
     </p>
   </div>
-  {#if parent}
-    <ChatComposeParent event={parent} clear={clearParent} />
-  {/if}
-  <ChatCompose bind:this={compose} {onSubmit} />
+  <ChatCompose bind:editor {onSubmit} />
 </div>

src/app/components/ChatEnable.svelte

@@ -41,10 +41,10 @@
 <form class="column gap-4" on:submit|preventDefault={submit}>
   <ModalHeader>
     <div slot="title">Enable Messages</div>
-    <div slot="info">Do you want to enable direct messages?</div>
+    <div slot="info">Do you want to enable notes and direct messages?</div>
   </ModalHeader>
   <p>
-    By default, direct messages are disabled, since loading them requires
+    By default, notes and direct messages are disabled, since loading them requires
     {PLATFORM_NAME} to download and decrypt a lot of data.
   </p>
   <p>

src/app/components/ChatItem.svelte

@@ -34,10 +34,7 @@
     <div class="flex flex-col justify-start gap-1">
       <div class="flex items-center justify-between gap-2">
         <div class="flex min-w-0 items-center gap-2">
-          {#if others.length === 0}
-            <ProfileCircle pubkey={$pubkey} size={5} />
-            Note to self
-          {:else if others.length === 1}
+          {#if others.length === 1}
             <ProfileCircle pubkey={others[0]} size={5} />
             <ProfileName pubkey={others[0]} />
           {:else}

src/app/components/ChatMenuMobile.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import ChatStart from "@app/components/ChatStart.svelte"
-  import {setChecked} from "@app/notifications"
-  import {pushModal} from "@app/modal"
-
-  const startChat = () => pushModal(ChatStart, {}, {replaceState: true})
-
-  const markAsRead = () => {
-    setChecked("/chat/*")
-    history.back()
-  }
-</script>
-
-<div class="col-2">
-  <Button class="btn btn-primary" on:click={startChat}>
-    <Icon size={4} icon="add-circle" />
-    Start chat
-  </Button>
-  <Button class="btn btn-neutral" on:click={markAsRead}>
-    <Icon size={4} icon="check-circle" />
-    Mark all read
-  </Button>
-</div>

src/app/components/ChatMessage.svelte

@@ -112,8 +112,7 @@
               </div>
             </Button>
           {/if}
-          <span class="whitespace-nowrap text-xs opacity-50"
-            >{formatTimestampAsTime(event.created_at)}</span>
+          <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
         </div>
       {/if}
       <div class="text-sm">

src/app/components/Content.svelte

@@ -93,7 +93,7 @@
         mediaLength: hideMedia ? 20 : 200,
       })
 
-  $: hasEllipsis = shortContent.some(isEllipsis)
+  $: hasEllipsis = shortContent.find(isEllipsis)
   $: expandInline = hasEllipsis && expandMode === "inline"
   $: expandBlock = hasEllipsis && expandMode === "block"
 </script>

src/app/components/ContentLinkBlock.svelte

@@ -22,7 +22,7 @@
   const expand = () => pushModal(ContentLinkDetail, {url}, {fullscreen: true})
 </script>
 
-<Link external href={url} class="my-2 block">
+<Link external href={url} class="my-2 flex">
   <div class="overflow-hidden rounded-box leading-[0]">
     {#if url.match(/\.(mov|webm|mp4)$/)}
       <video controls src={url} class="max-h-96 object-contain object-center">

src/app/components/EventCreate.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import {EditorContent} from "svelte-tiptap"
-  import {writable} from "svelte/store"
+  import {onMount} from "svelte"
+  import type {Readable} from "svelte/store"
+  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
   import {randomId} from "@welshman/lib"
-  import {createEvent, EVENT_TIME} from "@welshman/util"
+  import {createEvent, EVENT_DATE, EVENT_TIME} from "@welshman/util"
   import {publishThunk, dateToSeconds} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
@@ -11,17 +12,16 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import DateTimeInput from "@lib/components/DateTimeInput.svelte"
   import {PROTECTED} from "@app/state"
-  import {makeEditor} from "@app/editor"
+  import {getPubkeyHints} from "@app/commands"
+  import {getEditorOptions, getEditorTags} from "@lib/editor"
   import {pushToast} from "@app/toast"
 
   export let url
 
-  const uploading = writable(false)
-
   const back = () => history.back()
 
   const submit = () => {
-    if ($uploading) return
+    if ($loading) return
 
     if (!title) {
       return pushToast({
@@ -37,15 +37,16 @@
       })
     }
 
-    const event = createEvent(EVENT_TIME, {
-      content: $editor.getText({blockSeparator: "\n"}).trim(),
+    const kind = isAllDay ? EVENT_DATE : EVENT_TIME
+    const event = createEvent(kind, {
+      content: $editor.getText({blockSeparator: "\n"}),
       tags: [
         ["d", randomId()],
         ["title", title],
         ["location", location],
         ["start", dateToSeconds(start).toString()],
         ["end", dateToSeconds(end).toString()],
-        ...$editor.storage.nostr.getEditorTags(),
+        ...getEditorTags($editor),
         PROTECTED,
       ],
     })
@@ -54,12 +55,18 @@
     history.back()
   }
 
-  const editor = makeEditor({submit, uploading})
-
+  let editor: Readable<Editor>
+  const isAllDay = false
   let title = ""
   let location = ""
   let start: Date
   let end: Date
+
+  $: loading = $editor?.storage.fileUpload.loading
+
+  onMount(() => {
+    editor = createEditor(getEditorOptions({submit, getPubkeyHints}))
+  })
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={submit}>
@@ -84,8 +91,8 @@
       <Button
         data-tip="Add an image"
         class="center btn tooltip"
-        on:click={() => $editor.chain().selectFiles().run()}>
-        {#if $uploading}
+        on:click={$editor.commands.selectFiles}>
+        {#if $loading}
           <span class="loading loading-spinner loading-xs"></span>
         {:else}
           <Icon icon="gallery-send" />

src/app/components/EventReport.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-  import Spinner from "@lib/components/Spinner.svelte"
-  import Button from "@lib/components/Button.svelte"
-  import Field from "@lib/components/Field.svelte"
-  import Icon from "@lib/components/Icon.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
-  import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {pushToast} from "@app/toast"
-  import {publishReport} from "@app/commands"
-
-  export let url
-  export let event
-
-  const back = () => history.back()
-
-  const confirm = async () => {
-    if (!reason) {
-      return pushToast({
-        theme: "error",
-        message: "Please select a reason for your report.",
-      })
-    }
-
-    loading = true
-
-    await publishReport({event, reason: reason.toLowerCase(), content, relays: [url]})
-
-    loading = false
-    history.back()
-
-    return pushToast({message: "Your report has been sent!"})
-  }
-
-  let reason = ""
-  let content = ""
-  let loading = false
-</script>
-
-<form class="column gap-4" on:submit|preventDefault={confirm}>
-  <ModalHeader>
-    <div slot="title">Report Content</div>
-    <div slot="info">Flag inappropriate content.</div>
-  </ModalHeader>
-  <Field>
-    <p slot="label">Reason*</p>
-    <select slot="input" class="select select-bordered" bind:value={reason}>
-      <option disabled selected>Choose a reason</option>
-      <option>Nudity</option>
-      <option>Malware</option>
-      <option>Profanity</option>
-      <option>Illegal</option>
-      <option>Spam</option>
-      <option>Impersonation</option>
-      <option>Other</option>
-    </select>
-    <p slot="info">Please select a reason for your report.</p>
-  </Field>
-  <Field>
-    <p slot="label">Details</p>
-    <textarea slot="input" class="textarea textarea-bordered" bind:value={content} />
-    <p slot="info">Please provide any additional details relevant to your report.</p>
-  </Field>
-  <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
-      <Icon icon="alt-arrow-left" />
-      Go back
-    </Button>
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
-      <Spinner {loading}>Send Report</Spinner>
-      <Icon icon="alt-arrow-right" />
-    </Button>
-  </ModalFooter>
-</form>

src/app/components/EventReportDetails.svelte

@@ -1,55 +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} from "@app/commands"
-
-  export let url
-  export let event
-
-  const reports = deriveEvents(repository, {
-    filters: [{kinds: [REPORT], "#e": [event.id]}],
-  })
-
-  const back = () => history.back()
-
-  const deleteReport = (report: TrustedEvent) => {
-    publishDelete({event: report, relays: [url]})
-
-    if ($reports.length === 0) {
-      history.back()
-    }
-  }
-
-  const getReason = (tags: string[][]) => getTag("e", tags)?.[2] || "other"
-</script>
-
-<div class="column gap-4">
-  <ModalHeader>
-    <div slot="title">Report Details</div>
-    <div slot="info">All reports for this event are shown below.</div>
-  </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} />
-          <span>Reported this event as "{reason}"</span>
-        </div>
-        {#if report.pubkey === $pubkey}
-          <Button class="btn-default btn" on:click={remove}>Delete Report</Button>
-        {/if}
-      </div>
-      {#if report.content}
-        <p>"{report.content}"</p>
-      {/if}
-    </div>
-  {/each}
-  <Button class="btn btn-primary" on:click={back}>Got it</Button>
-</div>

src/app/components/Landing.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Link from "@lib/components/Link.svelte"
   import Dialog from "@lib/components/Dialog.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
   import LogIn from "@app/components/LogIn.svelte"
   import SignUp from "@app/components/SignUp.svelte"
-  import {PLATFORM_TERMS, PLATFORM_PRIVACY, PLATFORM_NAME} from "@app/state"
+  import {PLATFORM_NAME} from "@app/state"
   import {pushModal} from "@app/modal"
 
   const logIn = () => pushModal(LogIn)
@@ -34,10 +33,5 @@
         <div slot="info">Just a few questions and you'll be on your way.</div>
       </CardButton>
     </Button>
-    <p class="text-center text-xs opacity-75">
-      By using {PLATFORM_NAME}, you consent to our
-      <Link external class="link" href={PLATFORM_TERMS}>Terms of Service</Link> and
-      <Link external class="link" href={PLATFORM_PRIVACY}>Privacy Policy</Link>.
-    </p>
   </div>
 </Dialog>

src/app/components/LogInBunker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {onMount, onDestroy} from "svelte"
-  import {Nip46Broker, getPubkey, makeSecret} from "@welshman/signer"
+  import {Nip46Broker, makeSecret} from "@welshman/signer"
   import {addSession} from "@welshman/app"
   import {slideAndFade} from "@lib/transition"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -26,7 +26,7 @@
   const back = () => history.back()
 
   const onSubmit = async () => {
-    const {signerPubkey, connectSecret, relays} = Nip46Broker.parseBunkerUrl(input)
+    const {signerPubkey, connectSecret, relays} = broker.parseBunkerUrl(input)
 
     if (loading) {
       return
@@ -63,15 +63,6 @@
   let input = ""
   let loading = false
 
-  $: {
-    // For testing and for play store reviewers
-    if (input === "reviewkey") {
-      const secret = makeSecret()
-
-      addSession({method: "nip01", secret, pubkey: getPubkey(secret)})
-    }
-  }
-
   onMount(async () => {
     url = await broker.makeNostrconnectUrl({
       perms: NIP46_PERMS,

src/app/components/MenuSpace.svelte

@@ -71,7 +71,7 @@
   <SecondaryNavSection class="max-h-screen">
     <div>
       <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
-        <strong class="ellipsize">{displayRelayUrl(url)}</strong>
+        <strong>{displayRelayUrl(url)}</strong>
         <Icon icon="alt-arrow-down" />
       </SecondaryNavItem>
       {#if showMenu}

src/app/components/NoteItem.svelte

@@ -29,7 +29,7 @@
 <NoteCard {event} class="card2 bg-alt">
   <Content {event} expandMode="inline" />
   <div class="flex w-full justify-between gap-2">
-    <ReactionSummary {url} {event} {onReactionClick} reactionClass="tooltip-right">
+    <ReactionSummary relays={[url]} {event} {onReactionClick} reactionClass="tooltip-right">
       <EmojiButton {onEmoji} class="btn btn-neutral btn-xs h-[26px] rounded-box">
         <Icon icon="smile-circle" size={4} />
       </EmojiButton>

src/app/components/PeopleItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {ctx} from "@welshman/lib"
+  import {first, sortBy, ctx} from "@welshman/lib"
+  import {getAncestorTags} from "@welshman/util"
   import type {Filter} from "@welshman/util"
   import {deriveEvents} from "@welshman/store"
   import {repository, load, loadRelaySelections, formatTimestampRelative} from "@welshman/app"
@@ -12,9 +13,11 @@
 
   export let pubkey
 
-  const filters: Filter[] = [{authors: [pubkey], limit: 1}]
+  const filters: Filter[] = [{authors: [pubkey]}]
   const events = deriveEvents(repository, {filters})
 
+  $: roots = $events.filter(e => getAncestorTags(e.tags).replies.length === 0)
+
   onMount(async () => {
     // Make sure we have their relay selections before we load their posts
     await loadRelaySelections(pubkey)
@@ -36,9 +39,10 @@
     </Link>
   </div>
   <ProfileInfo {pubkey} />
-  {#if $events.length > 0}
+  {#if roots.length > 0}
+    {@const event = first(sortBy(e => -e.created_at, roots))}
     <div class="bg-alt badge badge-neutral border-none">
-      Last active {formatTimestampRelative($events[0].created_at)}
+      Last active {formatTimestampRelative(event.created_at)}
     </div>
   {/if}
   <Link class="btn btn-primary sm:hidden" href={makeChatPath([pubkey])}>

src/app/components/PrimaryNav.svelte

@@ -21,6 +21,8 @@
 
   const showSettingsMenu = () => pushModal(MenuSettings)
 
+  const openNotes = () => ($canDecrypt ? goto("/notes") : pushModal(ChatEnable, {next: "/notes"}))
+
   const openChat = () => ($canDecrypt ? goto("/chat") : pushModal(ChatEnable, {next: "/chat"}))
 
   $: spaceUrls = Array.from($userRoomsByUrl.keys())
@@ -56,6 +58,9 @@
         class="tooltip-right">
         <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
       </PrimaryNavItem>
+      <PrimaryNavItem title="Notes" on:click={openNotes} class="tooltip-right">
+        <Avatar icon="notes-minimalistic" class="!h-10 !w-10" />
+      </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
         on:click={openChat}
@@ -76,8 +81,11 @@
   class="border-top fixed bottom-0 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">
-      <PrimaryNavItem title="Home" href="/home">
-        <Avatar icon="home-smile" class="!h-10 !w-10" />
+      <PrimaryNavItem title="Search" href="/people">
+        <Avatar icon="magnifer" class="!h-10 !w-10" />
+      </PrimaryNavItem>
+      <PrimaryNavItem title="Notes" on:click={openNotes}>
+        <Avatar icon="notes-minimalistic" class="!h-10 !w-10" />
       </PrimaryNavItem>
       <PrimaryNavItem
         title="Messages"
@@ -90,7 +98,7 @@
       </PrimaryNavItem>
     </div>
     <PrimaryNavItem title="Settings" on:click={showSettingsMenu}>
-      <Avatar icon="settings" src={$userProfile?.picture} class="!h-10 !w-10" />
+      <Avatar src={$userProfile?.picture} class="!h-10 !w-10" />
     </PrimaryNavItem>
   </div>
 </div>

src/app/components/ProfileFeed.svelte

@@ -2,7 +2,7 @@
   import {onMount} from "svelte"
   import {sortBy, uniqBy} from "@welshman/lib"
   import {feedFromFilter, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
-  import {NOTE, getReplyTags} from "@welshman/util"
+  import {NOTE, getAncestorTags} from "@welshman/util"
   import type {TrustedEvent} from "@welshman/util"
   import {createFeedController} from "@welshman/app"
   import {createScroller} from "@lib/html"
@@ -22,7 +22,7 @@
       feedFromFilter({kinds: [NOTE], authors: [pubkey]}),
     ),
     onEvent: (event: TrustedEvent) => {
-      if (getReplyTags(event.tags).replies.length === 0) {
+      if (getAncestorTags(event.tags).replies.length === 0) {
         buffer.push(event)
       }
     },

src/app/components/ProfileMultiSelect.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
   import type {SvelteComponent} from "svelte"
-  import {derived} from "svelte/store"
   import {type Instance} from "tippy.js"
   import {append, remove, uniq} from "@welshman/lib"
   import {profileSearch} from "@welshman/app"
-  import {Suggestions} from "@welshman/editor"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Button from "@lib/components/Button.svelte"
-  import ProfileSuggestion from "@app/editor/ProfileSuggestion.svelte"
+  import Suggestions from "@lib/editor/Suggestions.svelte"
+  import SuggestionProfile from "@lib/editor/SuggestionProfile.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {pushModal} from "@app/modal"
@@ -21,8 +20,6 @@
   let popover: Instance
   let instance: SvelteComponent
 
-  const search = derived(profileSearch, $profileSearch => $profileSearch.searchValues)
-
   const selectPubkey = (pubkey: string) => {
     term = ""
     popover.hide()
@@ -79,9 +76,9 @@
     component={Suggestions}
     props={{
       term,
-      search,
       select: selectPubkey,
-      component: ProfileSuggestion,
+      search: profileSearch,
+      component: SuggestionProfile,
       class: "rounded-box",
       style: `left: 4px; width: ${input?.clientWidth + 12}px`,
     }}

src/app/components/ReactionSummary.svelte

@@ -1,69 +1,45 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {groupBy, uniq, uniqBy, batch} from "@welshman/lib"
-  import {REACTION, getTag, REPORT, DELETE} from "@welshman/util"
+  import {groupBy, uniqBy, batch} from "@welshman/lib"
+  import {REACTION, DELETE} from "@welshman/util"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveEvents} from "@welshman/store"
   import {pubkey, repository, load, displayProfileByPubkey} from "@welshman/app"
   import {displayList} from "@lib/util"
   import {isMobile} from "@lib/html"
-  import Icon from "@lib/components/Icon.svelte"
-  import EventReportDetails from "@app/components/EventReportDetails.svelte"
   import {displayReaction} from "@app/state"
-  import {pushModal} from "@app/modal"
 
   export let event
   export let onReactionClick
-  export let url = ""
+  export let relays: string[] = []
   export let reactionClass = ""
   export let noTooltip = false
 
-  const reports = deriveEvents(repository, {
-    filters: [{kinds: [REPORT], "#e": [event.id]}],
-  })
-
   const reactions = deriveEvents(repository, {
     filters: [{kinds: [REACTION], "#e": [event.id]}],
   })
 
-  const onReportClick = () => pushModal(EventReportDetails, {url, event})
-
-  $: reportReasons = uniq($reports.map(e => getTag("e", e.tags)?.[2]))
-
   $: groupedReactions = groupBy(
     e => e.content,
     uniqBy(e => e.pubkey + e.content, $reactions),
   )
 
   onMount(() => {
-    if (url) {
-      load({
-        relays: [url],
-        filters: [{kinds: [REACTION, REPORT, DELETE], "#e": [event.id]}],
-        onEvent: batch(300, (events: TrustedEvent[]) => {
-          load({
-            relays: [url],
-            filters: [{kinds: [DELETE], "#e": events.map(e => e.id)}],
-          })
-        }),
-      })
-    }
+    load({
+      relays,
+      filters: [{kinds: [REACTION, DELETE], "#e": [event.id]}],
+      onEvent: batch(300, (events: TrustedEvent[]) => {
+        load({
+          relays,
+          filters: [{kinds: [DELETE], "#e": events.map(e => e.id)}],
+        })
+      }),
+    })
   })
 </script>
 
-{#if $reactions.length > 0 || $reports.length > 0}
+{#if $reactions.length > 0}
   <div class="flex min-w-0 flex-wrap gap-2">
-    {#if url && $reports.length > 0}
-      <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:tooltip={!noTooltip && !isMobile}
-        on:click|preventDefault|stopPropagation={onReportClick}>
-        <Icon icon="danger" />
-        <span>{$reports.length}</span>
-      </button>
-    {/if}
     {#each groupedReactions.entries() as [content, events]}
       {@const pubkeys = events.map(e => e.pubkey)}
       {@const isOwn = $pubkey && pubkeys.includes($pubkey)}

src/app/components/SpaceAuthError.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import {displayRelayUrl} from "@welshman/util"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
@@ -48,9 +47,7 @@
     <div slot="title">Access Error</div>
     <div slot="info">We couldn't connect you to this space.</div>
   </ModalHeader>
-  <p>
-    We received an error from the relay indicating you don't have access to {displayRelayUrl(url)}.
-  </p>
+  <p>We received an error from the relay indicating you don't have access to this space.</p>
   <p class="border-l border-solid border-error pl-4 text-error">
     {error}
   </p>

src/app/components/ThreadActions.svelte

@@ -56,7 +56,7 @@
 
 <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} {onReactionClick} reactionClass="tooltip-left" />
+    <ReactionSummary relays={[url]} {event} {onReactionClick} reactionClass="tooltip-left" />
     {#if $deleted}
       <div class="btn btn-error btn-xs rounded-full">Deleted</div>
     {:else if thunk}

src/app/components/ThreadCreate.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import {writable} from "svelte/store"
-  import {EditorContent} from "svelte-tiptap"
+  import {onMount} from "svelte"
+  import type {Readable} from "svelte/store"
+  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
   import {createEvent, THREAD} from "@welshman/util"
   import {publishThunk} from "@welshman/app"
   import {isMobile} from "@lib/html"
@@ -11,16 +12,15 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushToast} from "@app/toast"
   import {GENERAL, tagRoom, PROTECTED} from "@app/state"
-  import {makeEditor} from "@app/editor"
+  import {getPubkeyHints} from "@app/commands"
+  import {getEditorOptions, getEditorTags} from "@lib/editor"
 
   export let url
 
-  const uploading = writable(false)
-
   const back = () => history.back()
 
   const submit = () => {
-    if ($uploading) return
+    if ($loading) return
 
     if (!title) {
       return pushToast({
@@ -29,7 +29,7 @@
       })
     }
 
-    const content = $editor.getText({blockSeparator: "\n"}).trim()
+    const content = $editor.getText({blockSeparator: "\n"})
 
     if (!content.trim()) {
       return pushToast({
@@ -38,12 +38,7 @@
       })
     }
 
-    const tags = [
-      ...$editor.storage.nostr.getEditorTags(),
-      tagRoom(GENERAL, url),
-      ["title", title],
-      PROTECTED,
-    ]
+    const tags = [["title", title], tagRoom(GENERAL, url), ...getEditorTags($editor), PROTECTED]
 
     publishThunk({
       relays: [url],
@@ -53,9 +48,16 @@
     history.back()
   }
 
-  const editor = makeEditor({submit, uploading, placeholder: "What's on your mind?"})
-
   let title: string
+  let editor: Readable<Editor>
+
+  $: loading = $editor?.storage.fileUpload.loading
+
+  onMount(() => {
+    editor = createEditor(
+      getEditorOptions({submit, getPubkeyHints, placeholder: "What's on your mind?"}),
+    )
+  })
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={submit}>
@@ -86,7 +88,7 @@
       data-tip="Add an image"
       class="tooltip tooltip-left absolute bottom-1 right-2"
       on:click={$editor.commands.selectFiles}>
-      {#if $uploading}
+      {#if $loading}
         <span class="loading loading-spinner loading-xs"></span>
       {:else}
         <Icon icon="paperclip" size={3} />

src/app/components/ThreadItem.svelte

@@ -27,7 +27,7 @@
       </p>
     </div>
   {:else}
-    <p class="mb-3 h-0 text-xs opacity-75">
+    <p class="-mb-3 h-0 text-end text-xs opacity-75">
       {formatTimestamp(event.created_at)}
     </p>
   {/if}

src/app/components/ThreadMenu.svelte

@@ -4,7 +4,6 @@
   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 ThreadShare from "@app/components/ThreadShare.svelte"
   import ConfirmDelete from "@app/components/ConfirmDelete.svelte"
   import {pushModal} from "@app/modal"
@@ -15,11 +14,6 @@
 
   const isRoot = event.kind !== COMMENT
 
-  const report = () => {
-    onClick()
-    pushModal(EventReport, {url, event})
-  }
-
   const showInfo = () => {
     onClick()
     pushModal(EventInfo, {event})
@@ -58,12 +52,5 @@
         Delete Message
       </Button>
     </li>
-  {:else}
-    <li>
-      <Button class="text-error" on:click={report}>
-        <Icon size={4} icon="danger" />
-        Report Content
-      </Button>
-    </li>
   {/if}
 </ul>

src/app/components/ThreadReply.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-  import {writable} from "svelte/store"
-  import {EditorContent} from "svelte-tiptap"
+  import {onMount} from "svelte"
+  import type {Readable} from "svelte/store"
+  import {createEditor, type Editor, EditorContent} from "svelte-tiptap"
   import {isMobile} from "@lib/html"
   import {fly, slideAndFade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import {publishComment} from "@app/commands"
+  import {getEditorOptions, getEditorTags} from "@lib/editor"
+  import {getPubkeyHints, publishComment} from "@app/commands"
   import {tagRoom, GENERAL, PROTECTED} from "@app/state"
-  import {makeEditor} from "@app/editor"
   import {pushToast} from "@app/toast"
 
   export let url
@@ -16,15 +17,13 @@
   export let onClose
   export let onSubmit
 
-  const uploading = writable(false)
-
   const submit = () => {
-    if ($uploading) return
+    if ($loading) return
 
-    const content = $editor.getText({blockSeparator: "\n"}).trim()
-    const tags = [...$editor.storage.nostr.getEditorTags(), tagRoom(GENERAL, url), PROTECTED]
+    const content = $editor.getText({blockSeparator: "\n"})
+    const tags = [...getEditorTags($editor), tagRoom(GENERAL, url), PROTECTED]
 
-    if (!content) {
+    if (!content.trim()) {
       return pushToast({
         theme: "error",
         message: "Please provide a message for your reply.",
@@ -34,7 +33,13 @@
     onSubmit(publishComment({event, content, tags, relays: [url]}))
   }
 
-  const editor = makeEditor({submit, uploading, autofocus: !isMobile})
+  let editor: Readable<Editor>
+
+  $: loading = $editor?.storage.fileUpload.loading
+
+  onMount(() => {
+    editor = createEditor(getEditorOptions({submit, getPubkeyHints, autofocus: !isMobile}))
+  })
 </script>
 
 <form
@@ -50,7 +55,7 @@
       data-tip="Add an image"
       class="tooltip tooltip-left absolute bottom-1 right-2"
       on:click={$editor.commands.selectFiles}>
-      {#if $uploading}
+      {#if $loading}
         <span class="loading loading-spinner loading-xs"></span>
       {:else}
         <Icon icon="paperclip" size={3} />

src/app/components/ThunkStatus.svelte

@@ -42,9 +42,9 @@
   }
 </script>
 
-{#if isFailure && failure}
-  {@const [url, {message, status}] = failure}
-  <div class="flex justify-end px-1 text-xs {$$props.class}">
+<div class="flex justify-end px-1 text-xs {$$props.class}">
+  {#if isFailure && failure}
+    {@const [url, {message, status}] = failure}
     <Tippy
       class="flex items-center {$$props.class}"
       component={ThunkStatusDetail}
@@ -55,9 +55,7 @@
         <span>Failed to send!</span>
       </span>
     </Tippy>
-  </div>
-{:else if canCancel || isPending}
-  <div class="flex justify-end px-1 text-xs {$$props.class}">
+  {:else if canCancel || isPending}
     <span class="flex items-center gap-1 {$$props.class}">
       <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
       <span class="opacity-50">Sending...</span>
@@ -65,5 +63,5 @@
         <Button class="link" on:click={abort}>Cancel</Button>
       {/if}
     </span>
-  </div>
-{/if}
+  {/if}
+</div>