diff --git a/packages/desktop/src/hooks/create-session-seen.ts b/packages/desktop/src/hooks/create-session-seen.ts new file mode 100644 index 000000000..c051ed262 --- /dev/null +++ b/packages/desktop/src/hooks/create-session-seen.ts @@ -0,0 +1,20 @@ +import { createSignal, onCleanup, onMount } from "solid-js" +import { isServer } from "solid-js/web" + +export function createSessionSeen(key: string, delay = 1000) { + // 1. Initialize state based on storage (default to true on server to avoid flash) + const storageKey = `app:seen:${key}` + const [hasSeen] = createSignal(!isServer && sessionStorage.getItem(storageKey) === "true") + + onMount(() => { + // 2. If we haven't seen it, mark it as seen for NEXT time + if (!hasSeen()) { + const timer = setTimeout(() => { + sessionStorage.setItem(storageKey, "true") + }, delay) + onCleanup(() => clearTimeout(timer)) + } + }) + + return hasSeen +} diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx index e0487d80f..43c7b3736 100644 --- a/packages/desktop/src/pages/session.tsx +++ b/packages/desktop/src/pages/session.tsx @@ -52,6 +52,7 @@ import { useSession } from "@/context/session" import { StickyAccordionHeader } from "@/components/sticky-accordion-header" import { SessionReview } from "@/components/session-review" import { useLayout } from "@/context/layout" +import { createSessionSeen } from "@/hooks/create-session-seen" export default function Page() { const layout = useLayout() @@ -451,7 +452,9 @@ export default function Page() { {(message) => { const isActive = createMemo(() => session.messages.active()?.id === message.id) - const [titled, setTitled] = createSignal(!!message.summary?.title) + const titleSeen = createSessionSeen(`message-title-${message.id}`) + const contentSeen = createSessionSeen(`message-content-${message.id}`) + const [titled, setTitled] = createSignal(titleSeen()) const assistantMessages = createMemo(() => { if (!session.id) return [] return sync.data.message[session.id]?.filter( @@ -474,8 +477,9 @@ export default function Page() { // allowing time for the animations to finish createEffect(() => { + if (titleSeen()) return const title = message.summary?.title - setTimeout(() => setTitled(!!title), 10_000) + if (title) setTimeout(() => setTitled(true), 10_000) }) createEffect(() => { const completed = !working() @@ -523,8 +527,7 @@ export default function Page() { *]:fade-up-text": - !message.summary?.diffs?.length && !initialCompleted, + "[&>*]:fade-up-text": !message.summary?.diffs?.length && !contentSeen(), }} text={summary()} />