refactor(app-shell): I.1 — split AppShell.tsx 691 → 248 LOC across 12 files (#671)

* refactor(app-shell): extract appShellHelpers.ts Move SIDEBAR_COLLAPSED_STORAGE_KEY + read/persist helpers and the shouldSuppressQueueResizerMouseDown geometry helper out of AppShell.tsx into utils/appShellHelpers.ts. AppShell.tsx: 691 → 639 LOC. * refactor(app-shell): extract usePlatformShellSetup hook Bundle the one-shot platform/window-shell effects (tiling-WM detection, no-compositing class, data-platform attr, custom titlebar sync, kinetic scroll toggle, logging mode push) into hooks/usePlatformShellSetup.ts. Returns isTilingWm so AppShell can still gate the custom titlebar. AppShell.tsx: 639 → 604 LOC. * refactor(app-shell): extract 5 lifecycle hooks Pull these effect islands into hooks/: - useOrbitBodyAttrs — orbit role/phase → <html data-orbit-*> attrs - useWindowFullscreenState — Tauri isFullscreen() tracker - useNowPlayingTrayTitle — title + tray tooltip sync - useTrayMenuI18n — tray menu labels via i18n - useServerCapabilitiesProbe — music folders + rating support + orbit orphan sweep on login AppShell.tsx: 604 → 497 LOC. * refactor(app-shell): extract useQueueResizer hook Bundle queueWidth state, drag listeners, sidebar-aligned handle position, and the click-vs-drag mousedown handler into hooks/useQueueResizer.ts. AppShell drops shouldSuppressQueueResizerMouseDown wiring and 4 local state pieces. AppShell.tsx: 497 → 403 LOC. * refactor(app-shell): extract 4 misc lifecycle hooks - useGlobalDndAndSelectionBlockers — document-level DnD/select-all/ selectstart blockers (Linux/WebKitGTK + Wayland workarounds). - useAppActivityTracking — <html data-app-hidden> + <html data-app-blurred> so CSS can pause cosmetic animation when the app isn't being looked at. - useMainScrollingIndicator — scroll-idle tracker for main + np viewports. - useOfflineAutoNav — connStatus transitions push to /offline or back. AppShell.tsx: 403 → 282 LOC. * refactor(app-shell): extract AppShellQueueResizerSeam subcomponent The 6px resizer strip and the round resize/toggle handle (~50 LOC of JSX with embedded scrollbar-collision suppression + self-heal logic) move into components/AppShellQueueResizerSeam.tsx. Desktop-only. AppShell.tsx: 282 → 248 LOC.
2026-07-22 07:15:47 +00:00 · 2026-05-13 23:48:03 +02:00
parent 988806e6b1
commit b591a1cb5f
14 changed files with 738 additions and 488 deletions
@@ -0,0 +1,58 @@
+import { APP_MAIN_SCROLL_VIEWPORT_ID } from '../constants/appScroll';
+
+export const SIDEBAR_COLLAPSED_STORAGE_KEY = 'psysonic_sidebar_collapsed';
+
+export function readInitialSidebarCollapsed(): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    return window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+export function persistSidebarCollapsed(collapsed: boolean): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, String(collapsed));
+  } catch {
+    // Ignore storage failures and keep in-memory UI state.
+  }
+}
+
+/**
+ * Avoid grabbing the queue resizer when aiming at the main overlay scrollbar.
+ * Uses the real main viewport edge (not innerWidth − queueWidth — sidebar/zoom skew that).
+ * Only the main-route thumb counts (not queue/mini/sidebar thumbs — selector is scoped).
+ *
+ * The queue resizer is 6px and sits on the main|queue seam with ~3px overlapping the main
+ * column (layout.css `.resizer-queue`). Treating `clientX <= mainRight` as "main" suppressed
+ * that overlap and felt like a dead resize strip at certain widths. Thumb hit slop must not
+ * extend past `mainRight` or it steals grabs on the resizer.
+ */
+export function shouldSuppressQueueResizerMouseDown(clientX: number, clientY: number, queueWidth: number): boolean {
+  const vp = document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID) as HTMLElement | null;
+  const mainRight = vp ? vp.getBoundingClientRect().right : window.innerWidth - queueWidth;
+  /** Pixels of the resizer that lie left of the main column's right edge (see `.resizer-queue`). */
+  const RESIZER_BLEED_INTO_MAIN = 4;
+
+  if (clientX <= mainRight - RESIZER_BLEED_INTO_MAIN) return true;
+
+  const thumbs = document.querySelectorAll<HTMLElement>('.app-shell-route-scroll .overlay-scroll__thumb');
+  const xSlop = 22;
+  const vPad = 40;
+  for (let i = 0; i < thumbs.length; i++) {
+    const thumb = thumbs[i];
+    const style = window.getComputedStyle(thumb);
+    const pointerActive = style.pointerEvents !== 'none';
+    const visible = Number.parseFloat(style.opacity || '0') > 0.01;
+    if (!pointerActive && !visible) continue;
+
+    const r = thumb.getBoundingClientRect();
+    if (r.height < 4 || r.width < 1) continue;
+    if (clientY < r.top - vPad || clientY > r.bottom + vPad) continue;
+    const thumbHitRight = Math.min(r.right + xSlop, mainRight);
+    if (clientX >= r.left - 6 && clientX <= thumbHitRight) return true;
+  }
+  return false;
+}