Add key signup, improve message listening

src/app/components/AppContainer.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import {page} from "$app/stores"
   import {pubkey} from "@welshman/app"
   import Landing from "@app/components/Landing.svelte"
   import Toast from "@app/components/Toast.svelte"
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
+  import {modals} from "@app/modal"
 </script>
 
 <div class="flex h-screen overflow-hidden">
@@ -10,7 +12,7 @@
     <PrimaryNav>
       <slot />
     </PrimaryNav>
-  {:else}
+  {:else if !$modals[$page.url.hash.slice(1)]}
     <Landing />
   {/if}
 </div>

src/app/components/ChannelMessage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import {readable, derived} from "svelte/store"
-  import {hash, ellipsize, uniqBy, groupBy, now} from "@welshman/lib"
+  import {hash, sleep, ellipsize, uniqBy, groupBy, now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveEvents, throttled} from "@welshman/store"
   import {
@@ -12,17 +12,20 @@
   import type {Thunk} from "@welshman/app"
   import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
   import {repository} from "@welshman/app"
+  import {slideAndFade, conditionalTransition} from '@lib/transition'
   import Icon from "@lib/components/Icon.svelte"
+  import Delay from "@lib/components/Delay.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
   import ThunkStatus from "@app/components/ThunkStatus.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ChannelThread from "@app/components/ChannelThread.svelte"
   import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
   import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
   import {colors, tagRoom, deriveEvent, displayReaction} from "@app/state"
   import {publishDelete, publishReaction} from "@app/commands"
-  import {pushModal} from "@app/modal"
+  import {pushModal, pushDrawer} from "@app/modal"
 
   export let url
   export let room
@@ -41,6 +44,10 @@
   const rootEvent = rootId ? deriveEvent(rootId, rootHints) : readable(null)
   const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
 
+  const transition = conditionalTransition(thunk, slideAndFade)
+
+  const showProfile = () => pushDrawer(ProfileDetail, {pubkey: event.pubkey})
+
   const openThread = () => {
     const root = $rootEvent || event
 
@@ -67,70 +74,74 @@
   $: rootProfileDisplay = deriveProfileDisplay(rootPubkey || "")
 </script>
 
-<button
-  type="button"
-  on:click={openThread}
-  class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors hover:bg-base-300">
-  {#if $rootEvent && !hideParent}
-    <div class="flex items-center gap-1 pl-12 text-xs">
-      <Icon icon="square-share-line" size={3} />
-      <p>In reply to</p>
-      <Avatar src={$rootProfile?.picture} size={4} />
-      <p class="text-primary">{$rootProfileDisplay}</p>
-      <p
-        class="flex items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap opacity-75 hover:underline">
-        {ellipsize($rootEvent.content, 30)}
-      </p>
-    </div>
-  {/if}
-  <div class="flex w-full gap-3">
-    {#if showPubkey}
-      <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={8} />
-    {:else}
-      <div class="w-10 min-w-10 max-w-10" />
+<Delay>
+  <button
+    in:transition
+    on:click={openThread}
+    type="button"
+    class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors hover:bg-base-300">
+    {#if $rootEvent && !hideParent}
+      <div class="flex items-center gap-1 pl-12 text-xs">
+        <Icon icon="square-share-line" size={3} />
+        <p>In reply to</p>
+        <Avatar src={$rootProfile?.picture} size={4} />
+        <p class="text-primary">{$rootProfileDisplay}</p>
+        <p
+          class="flex items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap opacity-75 hover:underline">
+          {ellipsize($rootEvent.content, 30)}
+        </p>
+      </div>
     {/if}
-    <div class="-mt-1 flex-grow pr-1">
+    <div class="flex w-full gap-3">
       {#if showPubkey}
-        <div class="flex items-center gap-2">
-          <strong class="text-sm" style="color: {colorValue}" data-color={colorName}
-            >{$profileDisplay}</strong>
-          <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
-        </div>
+        <Button on:click={showProfile}>
+          <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
+        </Button>
+      {:else}
+        <div class="w-10 min-w-10 max-w-10" />
       {/if}
-      <div class="text-sm">
-        <Content {event} />
-        {#if thunk}
-          <div class="badge badge-neutral">
-            <ThunkStatus {thunk} />
+      <div class="-mt-1 flex-grow pr-1">
+        {#if showPubkey}
+          <div class="flex items-center gap-2">
+            <Button class="font-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
+              {$profileDisplay}
+            </Button>
+            <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
           </div>
         {/if}
+        <div class="text-sm">
+          <Content {event} />
+          {#if thunk}
+            <ThunkStatus {thunk} />
+          {/if}
+        </div>
       </div>
     </div>
-  </div>
-  {#if $reactions.length > 0 || $zaps.length > 0}
-    <div class="ml-12 text-xs">
-      {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
-        {@const isOwn = events.some(e => e.pubkey === $pubkey)}
-        {@const onClick = () => onReactionClick(content, events)}
-        <button
-          type="button"
-          class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full"
-          class:border={isOwn}
-          class:border-solid={isOwn}
-          class:border-primary={isOwn}
-          on:click|stopPropagation={onClick}>
-          <span>{displayReaction(content)}</span>
-          {#if events.length > 1}
-            <span>{events.length}</span>
-          {/if}
-        </button>
-      {/each}
-    </div>
-  {/if}
-  <button
-    class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100"
-    on:click|stopPropagation>
-    <ChannelMessageEmojiButton {url} {room} {event} />
-    <ChannelMessageMenuButton {url} {room} {event} />
+    {#if $reactions.length > 0 || $zaps.length > 0}
+      <div class="ml-12 text-xs">
+        {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
+          {@const isOwn = events.some(e => e.pubkey === $pubkey)}
+          {@const onClick = () => onReactionClick(content, events)}
+          <button
+            type="button"
+            class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full"
+            class:border={isOwn}
+            class:border-solid={isOwn}
+            class:border-primary={isOwn}
+            on:click|stopPropagation={onClick}>
+            <span>{displayReaction(content)}</span>
+            {#if events.length > 1}
+              <span>{events.length}</span>
+            {/if}
+          </button>
+        {/each}
+      </div>
+    {/if}
+    <button
+      class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100"
+      on:click|stopPropagation>
+      <ChannelMessageEmojiButton {url} {room} {event} />
+      <ChannelMessageMenuButton {url} {room} {event} />
+    </button>
   </button>
-</button>
+</Delay>

src/app/components/ChatMessage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {derived} from "svelte/store"
   import {type Instance} from "tippy.js"
-  import {hash, uniqBy, groupBy, now} from "@welshman/lib"
+  import {hash, sleep, uniqBy, groupBy, now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveEvents, throttled} from "@welshman/store"
   import {
@@ -12,8 +12,10 @@
   } from "@welshman/app"
   import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
   import {repository} from "@welshman/app"
+  import {slideAndFade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
+  import Delay from "@lib/components/Delay.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
@@ -54,74 +56,77 @@
   let popoverIsVisible = false
 </script>
 
-<div
-  class="group chat flex items-center justify-end gap-1"
-  class:chat-start={event.pubkey !== $pubkey}
-  class:flex-row-reverse={event.pubkey !== $pubkey}
-  class:chat-end={event.pubkey === $pubkey}>
-  <Tippy
-    bind:popover
-    component={ChatMessageMenu}
-    props={{event, pubkeys, popover}}
-    params={{
-      interactive: true,
-      trigger: "manual",
-      onShow() {
-        popoverIsVisible = true
-      },
-      onHidden() {
-        popoverIsVisible = false
-      },
-    }}>
-    <Button class="opacity-0 transition-all group-hover:opacity-100" on:click={togglePopover}>
-      <Icon icon="menu-dots" size={4} />
-    </Button>
-  </Tippy>
-  <div class="flex flex-col">
-    <div class="chat-bubble mx-1 max-w-sm">
-      <div class="flex w-full items-start gap-2">
-        {#if showPubkey}
-          <Button on:click={showProfile}>
-            <Avatar
-              src={$profile?.picture}
-              class="border border-solid border-base-content"
-              size={8} />
-          </Button>
-        {/if}
-        <div class="-mt-1 flex-grow pr-1">
+<Delay>
+  <div
+    in:slideAndFade
+    class="group chat flex items-center justify-end gap-1"
+    class:chat-start={event.pubkey !== $pubkey}
+    class:flex-row-reverse={event.pubkey !== $pubkey}
+    class:chat-end={event.pubkey === $pubkey}>
+    <Tippy
+      bind:popover
+      component={ChatMessageMenu}
+      props={{event, pubkeys, popover}}
+      params={{
+        interactive: true,
+        trigger: "manual",
+        onShow() {
+          popoverIsVisible = true
+        },
+        onHidden() {
+          popoverIsVisible = false
+        },
+      }}>
+      <Button class="opacity-0 transition-all group-hover:opacity-100" on:click={togglePopover}>
+        <Icon icon="menu-dots" size={4} />
+      </Button>
+    </Tippy>
+    <div class="flex flex-col">
+      <div class="chat-bubble mx-1 max-w-sm">
+        <div class="flex w-full items-start gap-2">
           {#if showPubkey}
-            <div class="flex items-center gap-2">
-              <Button class="text-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
-                {$profileDisplay}
-              </Button>
-              <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
-            </div>
+            <Button on:click={showProfile}>
+              <Avatar
+                src={$profile?.picture}
+                class="border border-solid border-base-content"
+                size={8} />
+            </Button>
           {/if}
-          <div class="text-sm">
-            <Content showEntire {event} />
+          <div class="-mt-1 flex-grow pr-1">
+            {#if showPubkey}
+              <div class="flex items-center gap-2">
+                <Button class="font-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
+                  {$profileDisplay}
+                </Button>
+                <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
+              </div>
+            {/if}
+            <div class="text-sm">
+              <Content showEntire {event} />
+            </div>
           </div>
         </div>
       </div>
+      {#if $reactions.length > 0 || $zaps.length > 0}
+        <div class="relative z-feature -mt-4 flex justify-end text-xs">
+          {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
+            {@const isOwn = events.some(e => e.pubkey === $pubkey)}
+            {@const onClick = () => onReactionClick(content, events)}
+            <button
+              type="button"
+              class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full"
+              class:border={isOwn}
+              class:border-solid={isOwn}
+              class:border-primary={isOwn}
+              on:click|stopPropagation={onClick}>
+              <span>{displayReaction(content)}</span>
+              {#if events.length > 1}
+                <span>{events.length}</span>
+              {/if}
+            </button>
+          {/each}
+        </div>
+      {/if}
     </div>
-    {#if $reactions.length > 0 || $zaps.length > 0}
-      <div class="relative z-feature -mt-4 flex justify-end text-xs">
-        {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
-          {@const isOwn = events.some(e => e.pubkey === $pubkey)}
-          {@const onClick = () => onReactionClick(content, events)}
-          <button
-            type="button"
-            class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full"
-            class:border={isOwn}
-            class:border-solid={isOwn}
-            class:border-primary={isOwn}
-            on:click|stopPropagation={onClick}>
-            <span>{displayReaction(content)}</span>
-            {#if events.length > 1}
-              <span>{events.length}</span>
-            {/if}
-          </button>
-        {/each}
-      </div>
-    {/if}
   </div>
-</div>
+</Delay>

src/app/components/ChatStart.svelte

@@ -22,7 +22,6 @@
     <div slot="info">Create an encrypted chat room for private conversations.</div>
   </ModalHeader>
   <Field>
-    <p slot="label">Members</p>
     <div slot="input">
       <ProfileMultiSelect bind:value={pubkeys} />
     </div>

src/app/components/ProfileName.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-  import {loadProfile, deriveProfileDisplay} from "@welshman/app"
+  import {deriveProfileDisplay} from "@welshman/app"
 
   export let pubkey
 
   const profileDisplay = deriveProfileDisplay(pubkey)
-
-  loadProfile(pubkey)
 </script>
 
 {$profileDisplay}

src/app/components/RelayAdd.svelte

@@ -32,13 +32,11 @@
   })
 </script>
 
-<div class="fixed left-6 right-6 top-6">
-  <label class="input input-bordered flex w-full items-center gap-2">
-    <Icon icon="magnifer" />
-    <input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
-  </label>
-</div>
-<div class="column mt-16 h-[50vh] gap-2 overflow-auto" bind:this={element}>
+<label class="input input-bordered flex w-full items-center gap-2">
+  <Icon icon="magnifer" />
+  <input bind:value={term} class="grow" type="text" placeholder="Search for relays..." />
+</label>
+<div class="column -m-6 mt-0 p-6 pt-2 h-[50vh] gap-2 overflow-auto" bind:this={element}>
   {#each $relaySearch
     .searchValues(term)
     .filter(url => !$relays.includes(url))

src/app/components/SignUp.svelte

@@ -4,14 +4,18 @@
   import Icon from "@lib/components/Icon.svelte"
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Divider from "@lib/components/Divider.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import LogIn from "@app/components/LogIn.svelte"
-  import InfoNostr from "@app/components/LogIn.svelte"
+  import InfoNostr from "@app/components/InfoNostr.svelte"
+  import SignUpKey from "@app/components/SignUpKey.svelte"
   import {pushModal, clearModals} from "@app/modal"
   import {pushToast} from "@app/toast"
 
   const login = () => pushModal(LogIn)
 
+  const signUpWithKey = () => pushModal(SignUpKey)
+
   const trySignup = async () => {
     const secret = makeSecret()
     const handle = await loadHandle(`${username}@${handler.domain}`)
@@ -83,14 +87,17 @@
       @{handler.domain}
     </div>
   </Field>
-  <div class="flex flex-col gap-2">
-    <Button type="submit" class="btn btn-primary" disabled={!username || loading}>
-      <Spinner {loading}>Sign Up</Spinner>
-      <Icon icon="alt-arrow-right" />
-    </Button>
-    <div class="text-sm">
-      Already have an account?
-      <Button class="link" on:click={login}>Log in instead</Button>
-    </div>
+  <Button type="submit" class="btn btn-primary" disabled={!username || loading}>
+    <Spinner {loading}>Sign Up</Spinner>
+    <Icon icon="alt-arrow-right" />
+  </Button>
+  <Divider>Or</Divider>
+  <Button disabled={loading} on:click={signUpWithKey} class="btn btn-neutral">
+    <Icon icon="key" />
+    Sign up with Key
+  </Button>
+  <div class="text-sm">
+    Already have an account?
+    <Button class="link" on:click={login}>Log in instead</Button>
   </div>
 </form>

src/app/components/SignUpKey.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import {nip19} from 'nostr-tools'
+  import {goto} from '$app/navigation'
+  import {hexToBytes} from '@noble/hashes/utils'
+  import {getPubkey, makeSecret} from "@welshman/signer"
+  import {addSession} from "@welshman/app"
+  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 InfoKeys from "@app/components/InfoKeys.svelte"
+  import {loadUserData} from "@app/commands"
+  import {pushModal, clearModals} from "@app/modal"
+  import {clip} from "@app/toast"
+
+  const secret = makeSecret()
+  const nsec = nip19.nsecEncode(hexToBytes(secret))
+
+  const back = () => history.back()
+
+  const copyNsec = () => clip(nsec)
+
+  const onSubmit = async () => {
+    const pubkey = getPubkey(secret)
+
+    addSession({method: "nip01", pubkey, secret})
+    clearModals()
+    goto("/settings/profile")
+  }
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={onSubmit}>
+  <ModalHeader>
+    <div slot="title">Sign Up</div>
+    <div slot="info">With a freshly generated private key</div>
+  </ModalHeader>
+  <Field>
+    <p slot="label">Private Key</p>
+    <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+      <Icon icon="key" />
+      <input value={nsec} class="grow" type="password" />
+      <Button on:click={copyNsec}>
+        <Icon icon="copy" />
+      </Button>
+    </label>
+    <p slot="info">
+      Make sure to save your private key somewhere safe, like in a password manager.
+      <Button class="link" on:click={() => pushModal(InfoKeys)}>What is a private key?</Button>
+    </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">
+      Next
+      <Icon icon="alt-arrow-right" class="!bg-base-300" />
+    </Button>
+  </ModalFooter>
+</form>

src/lib/components/Delay.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import {sleep} from '@welshman/lib'
+
+  export let delay = 1
+</script>
+
+{#await sleep(delay)}
+  <!-- pass -->
+{:then}
+  <slot />
+{/await}

src/lib/components/Dialog.svelte

@@ -11,7 +11,7 @@
     transition:fade
     on:click={onClose} />
   <div
-    class="card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
+    class="relative card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
     transition:fly={{duration: 300}}>
     <slot />
   </div>

src/lib/components/Drawer.svelte

@@ -10,7 +10,7 @@
     transition:fade
     on:click={onClose} />
   <div
-    class="menu absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
+    class="absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
     transition:slide={{axis: "x", duration: 300}}>
     <slot />
   </div>

src/lib/editor/SuggestionProfile.svelte

@@ -1,7 +1,42 @@
 <script lang="ts">
-  import Profile from "@app/components/Profile.svelte"
+  import {displayPubkey, getPubkeyTagValues, getListTags} from "@welshman/util"
+  import {
+    userFollows,
+    deriveUserWotScore,
+    deriveProfile,
+    deriveHandleForPubkey,
+    displayHandle,
+    deriveProfileDisplay,
+  } from "@welshman/app"
+  import Avatar from "@lib/components/Avatar.svelte"
+  import WotScore from "@lib/components/WotScore.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {pushDrawer} from "@app/modal"
 
   export let value
+
+  const pubkey = value
+  const profile = deriveProfile(pubkey)
+  const profileDisplay = deriveProfileDisplay(pubkey)
+  const handle = deriveHandleForPubkey(pubkey)
+  const score = deriveUserWotScore(pubkey)
+
+  $: following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)
 </script>
 
-<Profile pubkey={value} />
+<div class="flex max-w-full gap-3">
+  <div class="py-1">
+    <Avatar src={$profile?.picture} size={10} />
+  </div>
+  <div class="flex min-w-0 flex-col">
+    <div class="flex items-center gap-2">
+      <div class="text-bold overflow-hidden text-ellipsis">
+        {$profileDisplay}
+      </div>
+      <WotScore score={$score} active={following} />
+    </div>
+    <div class="overflow-hidden text-ellipsis text-sm opacity-75">
+      {$handle ? displayHandle($handle) : displayPubkey(pubkey)}
+    </div>
+  </div>
+</div>

src/lib/transition.ts

@@ -13,6 +13,7 @@ export function slideAndFade(
   node: any,
   {delay = 0, duration = 400, easing = cubicOut, axis = "y"} = {},
 ) {
+  console.log('slideAndFade')
   const style = getComputedStyle(node)
   const primary_property = axis === "y" ? "height" : "width"
   const primary_property_value = parseFloat(style[primary_property])
@@ -46,3 +47,6 @@ export function slideAndFade(
       `border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`,
   }
 }
+
+export const conditionalTransition = (condition: any, transition: any) =>
+  (node: any, args?: any) => condition ? transtion(node, args) : null

src/routes/home/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {ctx, ago} from "@welshman/lib"
+  import {WEEK, ctx, ago} from "@welshman/lib"
   import {WRAP} from "@welshman/util"
   import {pubkey, subscribe} from "@welshman/app"
   import {fly} from "@lib/transition"
@@ -26,7 +26,7 @@
   onMount(() => {
     const filter = {kinds: [WRAP], "#p": [$pubkey!]}
     const relays = ctx.app.router.InboxRelays().getUrls()
-    const sub = subscribe({filters: [{...filter, since: ago(30)}], relays})
+    const sub = subscribe({filters: [{...filter, since: ago(WEEK)}], relays})
 
     pullConservatively({filters: [filter], relays})
 

src/routes/home/[chat]/+page.svelte

@@ -21,7 +21,6 @@
     loadInboxRelaySelections,
     tagPubkey,
   } from "@welshman/app"
-  import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -155,9 +154,7 @@
       {#if type === "date"}
         <Divider>{value}</Divider>
       {:else}
-        <div in:fly>
-          <ChatMessage event={assertEvent(value)} {pubkeys} {showPubkey} />
-        </div>
+        <ChatMessage event={assertEvent(value)} {pubkeys} {showPubkey} />
       {/if}
     {/each}
     <p class="flex h-10 items-center justify-center py-20">