From 7948de16129970ab01286fbbd7ba7a5e5dcf7be9 Mon Sep 17 00:00:00 2001 From: Brendan Allan Date: Thu, 5 Mar 2026 14:41:12 +0800 Subject: app: prefer using useLocation instead of window.location (#15989) --- .../app/src/pages/session/message-id-from-hash.ts | 6 ++++ .../pages/session/use-session-hash-scroll.test.ts | 2 +- .../src/pages/session/use-session-hash-scroll.ts | 40 ++++++++++------------ 3 files changed, 25 insertions(+), 23 deletions(-) create mode 100644 packages/app/src/pages/session/message-id-from-hash.ts (limited to 'packages/app/src/pages/session') diff --git a/packages/app/src/pages/session/message-id-from-hash.ts b/packages/app/src/pages/session/message-id-from-hash.ts new file mode 100644 index 000000000..2857f4b01 --- /dev/null +++ b/packages/app/src/pages/session/message-id-from-hash.ts @@ -0,0 +1,6 @@ +export const messageIdFromHash = (hash: string) => { + const value = hash.startsWith("#") ? hash.slice(1) : hash + const match = value.match(/^message-(.+)$/) + if (!match) return + return match[1] +} diff --git a/packages/app/src/pages/session/use-session-hash-scroll.test.ts b/packages/app/src/pages/session/use-session-hash-scroll.test.ts index 844f5451e..7f3389baa 100644 --- a/packages/app/src/pages/session/use-session-hash-scroll.test.ts +++ b/packages/app/src/pages/session/use-session-hash-scroll.test.ts @@ -1,5 +1,5 @@ import { describe, expect, test } from "bun:test" -import { messageIdFromHash } from "./use-session-hash-scroll" +import { messageIdFromHash } from "./message-id-from-hash" describe("messageIdFromHash", () => { test("parses hash with leading #", () => { diff --git a/packages/app/src/pages/session/use-session-hash-scroll.ts b/packages/app/src/pages/session/use-session-hash-scroll.ts index 473409fd9..20e88a3ea 100644 --- a/packages/app/src/pages/session/use-session-hash-scroll.ts +++ b/packages/app/src/pages/session/use-session-hash-scroll.ts @@ -1,12 +1,9 @@ -import { createEffect, createMemo, onCleanup, onMount } from "solid-js" -import { UserMessage } from "@opencode-ai/sdk/v2" - -export const messageIdFromHash = (hash: string) => { - const value = hash.startsWith("#") ? hash.slice(1) : hash - const match = value.match(/^message-(.+)$/) - if (!match) return - return match[1] -} +import type { UserMessage } from "@opencode-ai/sdk/v2" +import { useLocation, useNavigate } from "@solidjs/router" +import { createEffect, createMemo, onMount } from "solid-js" +import { messageIdFromHash } from "./message-id-from-hash" + +export { messageIdFromHash } from "./message-id-from-hash" export const useSessionHashScroll = (input: { sessionKey: () => string @@ -30,13 +27,18 @@ export const useSessionHashScroll = (input: { const messageIndex = createMemo(() => new Map(visibleUserMessages().map((m, i) => [m.id, i]))) let pendingKey = "" + const location = useLocation() + const navigate = useNavigate() + const clearMessageHash = () => { - if (!window.location.hash) return - window.history.replaceState(null, "", window.location.href.replace(/#.*$/, "")) + if (!location.hash) return + navigate(location.pathname + location.search, { replace: true }) } const updateHash = (id: string) => { - window.history.replaceState(null, "", `#${input.anchor(id)}`) + navigate(location.pathname + location.search + `#${input.anchor(id)}`, { + replace: true, + }) } const scrollToElement = (el: HTMLElement, behavior: ScrollBehavior) => { @@ -53,6 +55,7 @@ export const useSessionHashScroll = (input: { } const scrollToMessage = (message: UserMessage, behavior: ScrollBehavior = "smooth") => { + console.log({ message, behavior }) if (input.currentMessageId() !== message.id) input.setActiveMessage(message) const index = messageIndex().get(message.id) ?? -1 @@ -100,7 +103,7 @@ export const useSessionHashScroll = (input: { } const applyHash = (behavior: ScrollBehavior) => { - const hash = window.location.hash.slice(1) + const hash = location.hash.slice(1) if (!hash) { input.autoScroll.forceScrollToBottom() const el = input.scroller() @@ -132,6 +135,7 @@ export const useSessionHashScroll = (input: { } createEffect(() => { + location.hash if (!input.sessionID() || !input.messagesReady()) return requestAnimationFrame(() => applyHash("auto")) }) @@ -155,7 +159,7 @@ export const useSessionHashScroll = (input: { } } - if (!targetId) targetId = messageIdFromHash(window.location.hash) + if (!targetId) targetId = messageIdFromHash(location.hash) if (!targetId) return if (input.currentMessageId() === targetId) return @@ -171,14 +175,6 @@ export const useSessionHashScroll = (input: { if (typeof window !== "undefined" && "scrollRestoration" in window.history) { window.history.scrollRestoration = "manual" } - - const handler = () => { - if (!input.sessionID() || !input.messagesReady()) return - requestAnimationFrame(() => applyHash("auto")) - } - - window.addEventListener("hashchange", handler) - onCleanup(() => window.removeEventListener("hashchange", handler)) }) return { -- cgit v1.2.3