Change permalink event style

src/app/components/ChatMessage.svelte

@@ -21,6 +21,7 @@
   import ChatMessageMenu from "@app/components/ChatMessageMenu.svelte"
   import ChatMessageMenuMobile from "@app/components/ChatMessageMenuMobile.svelte"
   import {app, profiles, user} from "@app/core"
+  import {highlightedEvent} from "@app/routes"
   import {colorFor} from "@app/theme"
   import {pushModal} from "@app/modal"
 
@@ -61,7 +62,10 @@
 <ThunkFailure showToastOnRetry {thunk} class="mt-1" />
 <div
   data-event={event.id}
-  class={cx("group flex items-center justify-end gap-1 px-2", {"flex-row-reverse": !isOwn})}>
+  class={cx("group flex items-center justify-end gap-1 px-2", {
+    "flex-row-reverse": !isOwn,
+    "highlight-target": $highlightedEvent === event.id,
+  })}>
   {#if !isMobile}
     <Tippy
       bind:controller={tippy}

src/app/components/RoomChat.svelte

@@ -47,7 +47,7 @@
   import {isFeedLoading, makeFeed, makeFeedContext, makeScrollLoader} from "@app/feeds"
   import {pageLoading} from "@app/loading"
   import {checked, deferredRoomPath, setChecked} from "@app/notifications"
-  import {makeRoomPath} from "@app/routes"
+  import {highlightedEvent, makeRoomPath} from "@app/routes"
   import {pendingShare, type Share} from "@app/share"
   import {pushToast} from "@app/toast"
 
@@ -301,7 +301,7 @@
         target.scrollIntoView({behavior, block: "center"})
 
         if (highlight) {
-          target.classList.add("highlight-target")
+          highlightedEvent.set(id)
         }
 
         if (pin) {

src/app/components/RoomItem.svelte

@@ -38,7 +38,7 @@
   import {ENABLE_ZAPS} from "@app/env"
   import type {FeedContext} from "@app/feeds"
   import {deriveEvent, deriveEventsForUrl} from "@app/repository"
-  import {makeContentPath, makeThreadPath} from "@app/routes"
+  import {highlightedEvent, makeContentPath, makeThreadPath} from "@app/routes"
   import {pushModal} from "@app/modal"
 
   type Props = {
@@ -103,7 +103,7 @@
   {onTap}
   class={cx(
     "room__item group relative flex w-full cursor-default flex-col px-2 py-0.5 text-left transition-colors",
-    {"mt-1.5": showPubkey},
+    {"mt-1.5": showPubkey, "highlight-target": $highlightedEvent === event.id},
   )}>
   <div class="flex w-full gap-3 overflow-auto">
     {#if showPubkey}

src/app/components/ThreadPost.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
   import {formatTimestamp} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {COMMENT, displayHandle} from "@welshman/util"
@@ -14,7 +15,7 @@
   import type {FeedContext} from "@app/feeds"
   import ThreadActions from "@app/components/ThreadActions.svelte"
   import {handles, profiles} from "@app/core"
-  import {makeEventPermalink} from "@app/routes"
+  import {highlightedEvent, makeEventPermalink} from "@app/routes"
   import {pushModal} from "@app/modal"
   import {clip} from "@app/toast"
 
@@ -43,7 +44,7 @@
 <article
   id="post-{event.id}"
   data-event={event.id}
-  class="bg-surface border-b @container"
+  class={cx("bg-surface border-b @container", {"highlight-target": $highlightedEvent === event.id})}
   style="border-color: var(--line)">
   <div class="flex flex-col @2xl:flex-row">
     <aside

src/app/routes.ts

@@ -32,6 +32,10 @@ export let lastChatUrl: string | undefined = undefined
 
 export const lastPageBySpaceUrl = new Map<string, string>()
 
+// The event a link pointed at. A store rather than a class set on the node, because each row owns
+// its own class attribute and drops anything written behind its back on the next render.
+export const highlightedEvent = writable<string | undefined>(undefined)
+
 // The space the user was in most recently, so the space menu can be opened from a page that isn't
 // in a space. A store because it's read from markup, unlike lastChatUrl.
 export const lastSpaceUrl = writable<string | undefined>(undefined)
@@ -241,7 +245,7 @@ export const scrollToEvent = (id: string) => {
 
   if (element instanceof HTMLElement) {
     element.scrollIntoView({behavior: "smooth", block: "center"})
-    element.classList.add("highlight-target")
+    highlightedEvent.set(id)
   }
 
   return element instanceof HTMLElement

src/lib/components/base.css

@@ -129,24 +129,13 @@
     width: var(--rule-bleed-r, 100vw);
   }
 }
-/* Marks the event a link pointed at, so the reader can pick it out of the conversation once the
-   jump lands. Brightness rather than a background so it works over any row's own surface. */
+/* Marks the event a link pointed at. The mark stays until another link is followed, so the reader
+   can scroll away and still find their place. The wash is a spread inset shadow rather than a
+   background because a row's hover rule sets its own background and would paint over it. */
 @utility highlight-target {
-  animation: highlight-target 1.6s ease-out;
-}
-@keyframes highlight-target {
-  0%,
-  50% {
-    filter: brightness(1.5);
-  }
-  100% {
-    filter: brightness(1);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .highlight-target {
-    animation: none;
-  }
+  box-shadow:
+    inset 3px 0 0 var(--primary),
+    inset 0 0 0 9999px color-mix(in srgb, var(--primary) 16%, transparent);
 }
 /* Breathes a control in and out while it's listening to the user's voice. */
 @utility pulse-scale {