Extract reusable clipboard hook and standardize media queries

[juliusmarminge]

Note

Medium Risk
Replaces clipboard and media-query logic used across UI, so regressions could affect copy interactions and responsive layout behavior despite limited surface-area changes.

Overview
Centralizes clipboard behavior by adding useCopyToClipboard (with timeout-driven isCopied state plus onCopy/onError callbacks) and migrating plan/message copy actions and the thread context-menu “Copy Thread ID” flow to use it.

Standardizes responsive queries by rewriting useMediaQuery to use useSyncExternalStore and support breakpoint-based query strings/objects, then updating the sidebar to use a new useIsMobile() helper. Also includes a tiny className whitespace tweak in _chat.$threadId.tsx and lockfile metadata adjustments.

^{Written by Cursor Bugbot for commit b28cdbf. This will update automatically on new commits. Configure here.}

Note

Extract reusable useCopyToClipboard hook and rewrite useMediaQuery with SSR safety

• Adds useCopyToClipboard, a shared hook that writes to the clipboard, tracks transient isCopied state, and accepts optional onCopy/onError callbacks with configurable timeout.
• Replaces ad-hoc clipboard logic in PlanSidebar, Sidebar, and MessageCopyButton with the new hook.
• Rewrites useMediaQuery using useSyncExternalStore for SSR safety and adds support for semantic breakpoint strings (e.g. 'max-md'); adds a useIsMobile() convenience hook.
• Behavioral Change: copy actions now only set the success state after a confirmed clipboard write — previously the state toggled even when the Clipboard API was unavailable or the write failed.

^{Macroscope summarized b28cdbf.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 7569fb66-5c4f-4586-9b34-5924503c092c

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/web/clipboard-hook-media-query

📝 Coding Plan

• Generate coding plan for human review comments

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for both issues found in the latest run.

• ✅ Fixed: Breakpoint mismatch between JS hook and Tailwind CSS
  • Changed BREAKPOINTS.md from 800 to 768 to match Tailwind CSS v4's default md breakpoint (48rem = 768px), eliminating the 768-799px gap where the sidebar trigger was hidden but the sidebar was in mobile sheet mode.
• ✅ Fixed: Unstable copyToClipboard reference defeats downstream memoization
  • Wrapped copyToClipboard in useCallback with stable refs for onCopy, onError, and timeout, ensuring the returned function identity is stable across renders and downstream useCallback hooks are not needlessly re-created.

Or push these changes by commenting:

@cursor push 152076a0b5

Preview (152076a0b5)

diff --git a/apps/web/src/hooks/useCopyToClipboard.ts b/apps/web/src/hooks/useCopyToClipboard.ts
--- a/apps/web/src/hooks/useCopyToClipboard.ts
+++ b/apps/web/src/hooks/useCopyToClipboard.ts
@@ -11,8 +11,15 @@
 } = {}): { copyToClipboard: (value: string, ctx: TContext) => void; isCopied: boolean } {
   const [isCopied, setIsCopied] = React.useState(false);
   const timeoutIdRef = React.useRef<NodeJS.Timeout | null>(null);
+  const onCopyRef = React.useRef(onCopy);
+  const onErrorRef = React.useRef(onError);
+  const timeoutRef = React.useRef(timeout);
 
-  const copyToClipboard = (value: string, ctx: TContext): void => {
+  onCopyRef.current = onCopy;
+  onErrorRef.current = onError;
+  timeoutRef.current = timeout;
+
+  const copyToClipboard = React.useCallback((value: string, ctx: TContext): void => {
     if (typeof window === "undefined" || !navigator.clipboard?.writeText) {
       return;
     }
@@ -26,26 +33,24 @@
         }
         setIsCopied(true);
 
-        if (onCopy) {
-          onCopy(ctx);
-        }
+        onCopyRef.current?.(ctx);
 
-        if (timeout !== 0) {
+        if (timeoutRef.current !== 0) {
           timeoutIdRef.current = setTimeout(() => {
             setIsCopied(false);
             timeoutIdRef.current = null;
-          }, timeout);
+          }, timeoutRef.current);
         }
       },
       (error) => {
-        if (onError) {
-          onError(error, ctx);
+        if (onErrorRef.current) {
+          onErrorRef.current(error, ctx);
         } else {
           console.error(error);
         }
       },
     );
-  };
+  }, []);
 
   // Cleanup timeout on unmount
   React.useEffect(() => {

diff --git a/apps/web/src/hooks/useMediaQuery.ts b/apps/web/src/hooks/useMediaQuery.ts
--- a/apps/web/src/hooks/useMediaQuery.ts
+++ b/apps/web/src/hooks/useMediaQuery.ts
@@ -5,7 +5,7 @@
   "3xl": 1600,
   "4xl": 2000,
   lg: 1024,
-  md: 800,
+  md: 768,
   sm: 640,
   xl: 1280,
 } as const;

[juliusmarminge]

@cursor push 152076a

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Clipboard unavailability silently swallowed, onError callback bypassed
  • Added onErrorRef.current?.(new Error("Clipboard API unavailable."), ctx) before the early return so the onError callback is invoked when the Clipboard API is unavailable.

Or push these changes by commenting:

@cursor push 6b03ce9bea

Preview (6b03ce9bea)

diff --git a/apps/web/src/hooks/useCopyToClipboard.ts b/apps/web/src/hooks/useCopyToClipboard.ts
--- a/apps/web/src/hooks/useCopyToClipboard.ts
+++ b/apps/web/src/hooks/useCopyToClipboard.ts
@@ -21,6 +21,7 @@
 
   const copyToClipboard = React.useCallback((value: string, ctx: TContext): void => {
     if (typeof window === "undefined" || !navigator.clipboard?.writeText) {
+      onErrorRef.current?.(new Error("Clipboard API unavailable."), ctx);
       return;
     }

[juliusmarminge]

@cursor push 6b03ce9