chore: directory migration - gateway→server, web→client/electron

client/electron/src/hooks/useIsNarrow.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * 窄屏断点。
+ *
+ * 三栏布局需要 60（导航）+ 320（列表）+ 至少 520（详情）≈ 900px；
+ * 还要给滚动条、长地址和触摸留余量，因此与 Tailwind 的 lg 断点统一：
+ * 1024px 以下（含常见 768/820px 竖屏平板）都使用单栏。
+ *
+ * 用 matchMedia 而不是监听 resize：后者每变化一像素都触发，还得自己节流；
+ * matchMedia 只在跨过阈值时回调一次。
+ */
+export const NARROW_QUERY = '(max-width: 1023px)';
+
+export function useIsNarrow(): boolean {
+  const [narrow, setNarrow] = useState(() =>
+    typeof window === 'undefined' ? false : window.matchMedia(NARROW_QUERY).matches
+  );
+
+  useEffect(() => {
+    const mq = window.matchMedia(NARROW_QUERY);
+    const onChange = (e: MediaQueryListEvent) => setNarrow(e.matches);
+    mq.addEventListener('change', onChange);
+    // 挂载时同步一次：首次渲染到 effect 之间窗口可能已变化（例如手机旋屏）
+    setNarrow(mq.matches);
+    return () => mq.removeEventListener('change', onChange);
+  }, []);
+
+  return narrow;
+}