Fix failure to navigate, quote transitions

src/app/components/ChannelMessage.svelte

@@ -79,10 +79,10 @@
   <div class="flex w-full gap-3 overflow-auto">
     {#if showPubkey}
       <Link external href={pubkeyLink(event.pubkey)} class="flex items-start">
-        <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={10} />
+        <Avatar src={$profile?.picture} class="border border-solid border-base-content" size={8} />
       </Link>
     {:else}
-      <div class="w-10 min-w-10 max-w-10" />
+      <div class="w-8 min-w-8 max-w-8" />
     {/if}
     <div class="-mt-1 min-w-0 flex-grow pr-1">
       {#if showPubkey}
@@ -105,7 +105,7 @@
       </div>
     </div>
   </div>
-  <div class="row-2 ml-12">
+  <div class="row-2 ml-10 mt-1">
     {#if !isHead}
       <ReplySummary relays={[url]} {event} on:click={onClick} />
     {/if}

src/app/components/Content.svelte

@@ -47,9 +47,9 @@
   const isBlock = (i: number) => {
     const parsed = fullContent[i]
 
-    if (!parsed || hideMedia) return true
+    if (!parsed || hideMedia) return false
 
-    if (isLink(parsed) && isStartOrEnd(i) && $userSettingValues.show_media) {
+    if (isLink(parsed) && $userSettingValues.show_media && isStartOrEnd(i)) {
       return true
     }
 
@@ -64,14 +64,18 @@
     const parsed = fullContent[i]
 
     if (!parsed || isNewline(parsed)) return true
-    if (isText(parsed)) return parsed.value.match(/^\s+$/)
+    if (isText(parsed)) return Boolean(parsed.value.match(/^\s+$/))
 
     return false
   }
 
-  const isStartAndEnd = (i: number) => Boolean(isBoundary(i - 1) && isBoundary(i + 1))
+  const isStart = (i: number) => isBoundary(i - 1)
 
-  const isStartOrEnd = (i: number) => Boolean(isBoundary(i - 1) || isBoundary(i + 1))
+  const isEnd = (i: number) => isBoundary(i + 1)
+
+  const isStartAndEnd = (i: number) => isStart(i) && isEnd(i)
+
+  const isStartOrEnd = (i: number) => isStart(i) || isEnd(i)
 
   const ignoreWarning = () => {
     warning = null

src/app/components/ContentQuote.svelte

@@ -24,10 +24,20 @@
   const entity = id ? nip19.neventEncode({id, relays}) : addr.toNaddr()
 
   const scrollToEvent = (id: string) => {
-    const element = document.querySelector(`[data-event="${id}"]`)
+    const element = document.querySelector(`[data-event="${id}"]`) as any
 
     if (element) {
       element.scrollIntoView({behavior: "smooth"})
+      element.style =
+        "filter: brightness(1.5); transition-property: all; transition-duration: 400ms;"
+
+      setTimeout(() => {
+        element.style = "transition-property: all; transition-duration: 300ms;"
+      }, 800)
+
+      setTimeout(() => {
+        element.style = ""
+      }, 800 + 400)
     }
 
     return Boolean(element)

src/app/components/ReactionSummary.svelte

@@ -35,7 +35,7 @@
       <button
         type="button"
         data-tip={tooltip}
-        class="flex-inline btn btn-neutral btn-xs tooltip gap-1 rounded-full"
+        class="flex-inline btn btn-neutral btn-xs tooltip tooltip-right gap-1 rounded-full"
         class:border={isOwn}
         class:border-solid={isOwn}
         class:border-primary={isOwn}

src/routes/+layout.svelte

@@ -3,7 +3,6 @@
   import {onMount} from "svelte"
   import {nip19} from "nostr-tools"
   import {get, derived} from "svelte/store"
-  import {page} from "$app/stores"
   import {dev} from "$app/environment"
   import {bytesToHex, hexToBytes} from "@noble/hashes/utils"
   import {identity, uniq, sleep, take, sortBy, ago, now, HOUR, WEEK, Worker} from "@welshman/lib"
@@ -257,9 +256,7 @@
 {:then}
   <div data-theme={$theme}>
     <AppContainer>
-      {#key $page.url.pathname}
+      <slot />
-        <slot />
-      {/key}
     </AppContainer>
     <ModalContainer />
     <div class="tippy-target" />

src/routes/chat/+layout.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import {onMount} from "svelte"
+  import {page} from "$app/stores"
   import {ctx} from "@welshman/lib"
   import {WRAP} from "@welshman/util"
-  import type {TrustedEvent} from "@welshman/util"
+  import {pubkey} from "@welshman/app"
-  import {pubkey, repository} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -13,7 +12,7 @@
   import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
   import ChatStart from "@app/components/ChatStart.svelte"
   import ChatItem from "@app/components/ChatItem.svelte"
-  import {chatSearch, pullConservatively, ensureUnwrapped} from "@app/state"
+  import {chatSearch, pullConservatively} from "@app/state"
   import {pushModal} from "@app/modal"
 
   const startChat = () => pushModal(ChatStart)
@@ -23,23 +22,9 @@
     relays: ctx.app.router.UserInbox().getUrls(),
   })
 
-  const onUpdate = ({added}: {added: TrustedEvent[]}) => {
-    for (const event of added) {
-      ensureUnwrapped(event)
-    }
-  }
-
   let term = ""
 
   $: chats = $chatSearch.searchOptions(term).filter(c => c.pubkeys.length > 1)
-
-  onMount(() => {
-    repository.on("update", onUpdate)
-
-    return () => {
-      repository.off("update", onUpdate)
-    }
-  })
 </script>
 
 <SecondaryNav>
@@ -67,5 +52,7 @@
   </div>
 </SecondaryNav>
 <Page>
-  <slot />
+  {#key $page.url.pathname}
+    <slot />
+  {/key}
 </Page>

src/routes/spaces/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import {page} from "$app/stores"
+</script>
+
+{#key $page.params.relay}
+  <slot />
+{/key}

src/routes/spaces/[relay]/+layout.svelte

@@ -60,5 +60,7 @@
   <MenuSpace {url} />
 </SecondaryNav>
 <Page>
-  <slot />
+  {#key $page.url.pathname}
+    <slot />
+  {/key}
 </Page>