feat: add URL-driven workspace state and streamed Codex research

src/hooks/use-mobile.ts

@@ -1,19 +1,14 @@
-import * as React from 'react'
+import { useSyncExternalStore } from "react";
 
-const MOBILE_BREAKPOINT = 768
+const query = "(max-width: 767px)";
+const subscribe = (listener: () => void) => {
+  const media = window.matchMedia(query);
+  media.addEventListener("change", listener);
+  return () => media.removeEventListener("change", listener);
+};
+const getSnapshot = () => window.matchMedia(query).matches;
+const getServerSnapshot = () => false;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener('change', onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener('change', onChange)
-  }, [])
-
-  return !!isMobile
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }