app: prefer using useLocation instead of window.location (#15989)

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]
+}

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 #", () => {

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"
+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 const messageIdFromHash = (hash: string) => {
-  const value = hash.startsWith("#") ? hash.slice(1) : hash
-  const match = value.match(/^message-(.+)$/)
-  if (!match) return
-  return match[1]
-}
+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 {