A few ui tweaks

src/app/commands.ts

@@ -323,7 +323,7 @@ export type ReplyParams = {
 export const makeComment = ({event, content, tags = []}: ReplyParams) => {
   const seenRoots = new Set<string>()
 
-  for (const [raw, ...tag] of event.tags.filter(t => t[0].match(/^K|E|A|I$/i))) {
+  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()
 

src/app/components/ChannelCompose.svelte

@@ -36,7 +36,7 @@
 <div class="relative z-feature flex gap-2 p-2">
   <Button
     data-tip="Add an image"
-    class="center tooltip h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
+    class="center tooltip tooltip-right h-10 w-10 min-w-10 rounded-box bg-base-300 transition-colors hover:bg-base-200"
     on:click={() => addFile($editor)}>
     {#if $loading}
       <span class="loading loading-spinner loading-xs"></span>

src/app/components/ChannelConversation.svelte

@@ -32,9 +32,9 @@
 
 <div class="col-2">
   <div class="overflow-auto pt-3">
-    <ChannelMessage {url} {room} {event} thunk={$thunks[event.id]} showPubkey isHead />
+    <ChannelMessage {url} {room} {event} thunk={$thunks[event.id]} showPubkey isHead inert />
     {#each sortBy(e => e.created_at, $replies) as reply (reply.id)}
-      <ChannelMessage {url} {room} event={reply} thunk={$thunks[reply.id]} showPubkey />
+      <ChannelMessage {url} {room} event={reply} thunk={$thunks[reply.id]} showPubkey inert />
     {/each}
   </div>
   <div class="bottom-0 left-0 right-0">

src/app/components/ChannelMessage.svelte

@@ -26,6 +26,7 @@
   export let thunk: Thunk
   export let showPubkey = false
   export let isHead = false
+  export let inert = false
 
   const profile = deriveProfile(event.pubkey)
   const profileDisplay = deriveProfileDisplay(event.pubkey)
@@ -38,6 +39,10 @@
   const transition = conditionalTransition(thunk, slideAndFade)
 
   const onClick = () => {
+    if (inert) {
+      return
+    }
+
     if (isMobile) {
       pushModal(ChannelMessageMenuMobile, {url, event})
     } else {
@@ -65,10 +70,11 @@
 
 <Delay>
   <button
+    type="button"
     in:transition
     on:click={onClick}
-    type="button"
+    class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors"
-    class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors hover:bg-base-300">
+    class:hover:bg-base-300={!inert}>
     <div class="flex w-full gap-3">
       {#if showPubkey}
         <Link external href={pubkeyLink(event.pubkey)} class="flex items-start">

src/app/components/Chat.svelte

@@ -57,7 +57,7 @@
   const onSubmit = async ({content, ...params}: EventContent) => {
     const tags = [...params.tags, ...remove($pubkey!, pubkeys).map(tagPubkey)]
     const template = createEvent(DIRECT_MESSAGE, {content, tags})
-    const thunk = await sendWrapped({template, pubkeys, delay: 2000})
+    const thunk = await sendWrapped({template, pubkeys, delay: 3000})
 
     thunks.update(assoc(thunk.thunks[0].event.id, thunk))
   }
@@ -161,7 +161,7 @@
         <ChatMessage {event} {thunk} {pubkeys} {showPubkey} />
       {/if}
     {/each}
-    <p class="flex h-10 items-center justify-center py-20">
+    <p class="flex flex-col gap-4 max-w-sm m-auto text-center h-10 items-center justify-center py-20">
       <Spinner {loading}>
         {#if loading}
           Looking for messages...
@@ -169,6 +169,7 @@
           End of message history
         {/if}
       </Spinner>
+      <slot name="info" />
     </p>
   </div>
   <ChatCompose {onSubmit} />

src/app/components/ChatItem.svelte

@@ -28,30 +28,32 @@
   })
 </script>
 
-<div
+<Link class="flex flex-col justify-start gap-1" href={makeChatPath(pubkeys)}>
-  class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100 {$$props.class}"
+  <div
-  class:bg-base-100={active}>
+    class="cursor-pointer border-t border-solid border-base-100 px-6 py-2 transition-colors hover:bg-base-100 {$$props.class}"
-  <Link class="flex flex-col justify-start gap-1" href={makeChatPath(pubkeys)}>
+    class:bg-base-100={active}>
-    <div class="flex justify-between gap-2">
+    <div class="flex flex-col justify-start gap-1">
-      <div class="flex min-w-0 items-center gap-2">
+      <div class="flex justify-between gap-2">
-        {#if others.length === 1}
+        <div class="flex min-w-0 items-center gap-2">
-          <ProfileCircle pubkey={others[0]} size={5} />
+          {#if others.length === 1}
-          <ProfileName pubkey={others[0]} />
+            <ProfileCircle pubkey={others[0]} size={5} />
-        {:else}
-          <ProfileCircles pubkeys={others} size={5} />
-          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
             <ProfileName pubkey={others[0]} />
-            and {others.length - 1}
+          {:else}
-            {others.length > 2 ? "others" : "other"}
+            <ProfileCircles pubkeys={others} size={5} />
-          </p>
+            <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+              <ProfileName pubkey={others[0]} />
+              and {others.length - 1}
+              {others.length > 2 ? "others" : "other"}
+            </p>
+          {/if}
+        </div>
+        {#if $missingInbox}
+          <Icon icon="danger" class="text-error" />
         {/if}
       </div>
-      {#if $missingInbox}
+      <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
-        <Icon icon="danger" class="text-error" />
+        {message.content}
-      {/if}
+      </p>
     </div>
-    <p class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
+  </div>
-      {message.content}
+</Link>
-    </p>
-  </Link>
-</div>

src/app/components/ContentQuote.svelte

@@ -20,7 +20,6 @@
 
   const getLocalHref = (e: TrustedEvent) => {
     const url = e.tags.find(nthEq(0, "~"))?.[2]
-    console.log(e, url)
 
     if (!url) return
     if ([MESSAGE, THREAD].includes(e.kind)) return makeThreadPath(url, e.id)

src/app/components/SpaceAdd.svelte

@@ -20,6 +20,13 @@
       Spaces are places where communities come together to work, play, and hang out.
     </div>
   </ModalHeader>
+  <Link href="/discover">
+    <CardButton class="!btn-primary">
+      <div slot="icon"><Icon icon="compass" size={7} /></div>
+      <div slot="title">Discover spaces</div>
+      <div slot="info">Browse spaces on the discover page.</div>
+    </CardButton>
+  </Link>
   <Button on:click={startJoin}>
     <CardButton>
       <div slot="icon"><Icon icon="login-2" size={7} /></div>
@@ -34,11 +41,4 @@
       <div slot="info">Just a few questions and you'll be on your way.</div>
     </CardButton>
   </Button>
-  <Link href="/discover">
-    <CardButton>
-      <div slot="icon"><Icon icon="compass" size={7} /></div>
-      <div slot="title">Discover spaces</div>
-      <div slot="info">Browse spaces on the discover page.</div>
-    </CardButton>
-  </Link>
 </div>

src/app/components/SpaceCheck.svelte

@@ -71,7 +71,7 @@
     </Button>
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       Go to Space
-      <Icon icon="alt-arrow-right" class="!bg-base-300" />
+      <Icon icon="alt-arrow-right" />
     </Button>
   </ModalFooter>
 </form>

src/app/components/ThunkStatus.svelte

@@ -28,7 +28,7 @@
   $: failure = Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status))
 </script>
 
-<div class="flex justify-end text-xs">
+<div class="flex justify-end text-xs px-1">
   {#if canCancel || isPending}
     <span class="mt-2 flex items-center gap-1">
       <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />

src/lib/components/CardButton.svelte

@@ -8,7 +8,7 @@
       <slot name="icon" />
     </div>
     <div class="flex flex-col gap-1">
-      <p class="text-bold pt-2 text-lg">
+      <p class="text-bold text-lg">
         <slot name="title" />
       </p>
       <p class="text-sm">

src/routes/notes/+page.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
   import {pubkey} from "@welshman/app"
+  import Page from '@lib/components/Page.svelte'
   import Chat from "@app/components/Chat.svelte"
 
   $: id = $pubkey!
 </script>
 
-<Chat {id} />
+<Page>
+  <Chat {id}>
+    <p slot="info">
+      This is a place for your notes. Everything you write here is encrypted
+      and stored on the nostr network.
+    </p>
+  </Chat>
+</Page>

src/routes/people/+page.svelte

@@ -17,7 +17,6 @@
   $: pubkeys = term ? $profileSearch.searchValues(term) : defaultPubkeys
 
   onMount(() => {
-    console.log(element)
     const scroller = createScroller({
       element,
       onScroll: () => {

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

@@ -52,7 +52,7 @@
 
   const onSubmit = ({content, tags}: EventContent) => {
     const event = createEvent(MESSAGE, {content, tags: append(tagRoom(room, url), tags)})
-    const thunk = publishThunk({event, relays: [url], delay: 2000})
+    const thunk = publishThunk({event, relays: [url], delay: 3000})
 
     thunks.update(assoc(thunk.event.id, thunk))
   }

src/routes/spaces/[relay]/threads/[id]/+page.svelte

@@ -56,17 +56,17 @@
     {/if}
     {#each sortBy(e => -e.created_at, $replies) as reply (reply.id)}
       <NoteCard event={reply} class="card2 bg-alt z-feature w-full">
-        <div class="ml-12">
+        <div class="ml-12 col-3">
           <Content event={reply} />
+          <ThreadActions event={reply} {url} />
         </div>
-        <ThreadActions event={reply} {url} />
       </NoteCard>
     {/each}
     <NoteCard event={$event} class="card2 bg-alt z-feature w-full">
-      <div class="ml-12">
+      <div class="ml-12 col-3">
         <Content event={$event} />
+        <ThreadActions event={$event} {url} />
       </div>
-      <ThreadActions event={$event} {url} />
     </NoteCard>
   {:else}
     {#await sleep(5000)}