workspace-shell.tsx

workspace-shell.tsxapps/web/src/components/layout/workspace-shell.tsxraw ← layout4,761 B← Back to the app
1"use client";
2 
3import { useEffect } from "react";
4import { DndContext, PointerSensor, useSensor, useSensors, type DragEndEvent } from "@dnd-kit/core";
5import { Sidebar } from "./sidebar";
6import { Topbar } from "./topbar";
7import { CommandPalette } from "./command-palette";
8import { OfflineBanner } from "@/components/collaboration/OfflineBanner";
9import { SearchDialog } from "@/components/search/search-dialog";
10import { AiPanel } from "@/components/ai/ai-panel";
11import { GeneratePageDialog } from "@/components/ai/generate-page-dialog";
12import { AssistantDialog } from "@/components/ai/assistant-dialog";
13import { MoveToDialog } from "@/components/dialogs/move-to-dialog";
14import { BulkActionsDialog } from "@/components/dialogs/bulk-actions-dialog";
15import { initOutbox } from "@/stores/offlineQueue";
16import { useUiStore } from "@/stores/ui-store";
17import { authStore, useAuthStore } from "@/lib/auth-store";
18import { realtime } from "@/lib/realtime";
19 
20/**
21 * App shell: sidebar + main column (topbar + content), global search dialog
22 * (⌘K, TASK-0098) + command palette, and the global DnD context shared by
23 * the sidebar tree and the block editor (dnd-kit).
24 */
25export function WorkspaceShell({ children }: { children: React.ReactNode }) {
26  const setSearchDialog = useUiStore((s) => s.setSearchDialog);
27 
28  // The offline outbox (R1): load the persisted items + drain on `online`.
29  // Idempotent (the store guards against a double-wire).
30  useEffect(() => {
31    initOutbox();
32  }, []);
33 
34  // The realtime socket is an app-wide singleton ("one socket per tab") but
35  // the only places that OPENED it were the page-editor and database-home
36  // routes (usePageRealtime / useDatabasePresence). On every other menu the
37  // socket was never connected, so `realtime.connectionStatus` stayed
38  // "disconnected" and the top-bar StatusChip read "Offline" — even though
39  // the page's REST data loaded fine. Open it here, from the shell that
40  // renders on every authenticated route, so the connection (and the Live/
41  // Offline chip + presence) is tab-wide.
42  //
43  // We connect on the *presence* of the access token (reactive): the (app)
44  // layout gates on `!initializing && user`, so the token is hydrated before
45  // first render, but keying the effect on the token also re-arms `connect`
46  // if it is ever briefly null. `connect` is idempotent (a no-op while the
47  // socket is OPEN/CONNECTING), so the route-level `connect` calls that were
48  // the only openers before are now redundant-but-harmless.
49  const accessToken = useAuthStore((s) => s.accessToken);
50  useEffect(() => {
51    if (!accessToken) {
52      // Signed out (logout / session kill): drop the tab's socket. The client
53      // never re-authenticates an OPEN socket, so without this a second login
54      // in the same tab would keep the previous user's handshake.
55      realtime.disconnect();
56      return;
57    }
58    realtime.connect(() => authStore.accessToken);
59  }, [accessToken]);
60 
61  // ⌘K / Ctrl+K opens the GLOBAL SEARCH dialog (TASK-0098 — the bare
62  // meta/ctrl+k was the command palette's binding before Phase 8; the
63  // palette remains reachable through the sidebar and stays wired for its
64  // OWN in-palette shortcuts, but the bare hotkey belongs to search now).
65  useEffect(() => {
66    const onKey = (e: KeyboardEvent) => {
67      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
68        e.preventDefault();
69        setSearchDialog(!useUiStore.getState().searchOpen);
70      }
71    };
72    window.addEventListener("keydown", onKey);
73    return () => window.removeEventListener("keydown", onKey);
74  }, [setSearchDialog]);
75 
76  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
77 
78  // Sidebar drags are handled inside the tree; this shell-level context
79  // exists so blocks and tree rows share one DnD provider for cross-surface
80  // drags.
81  const onDragEnd = (_event: DragEndEvent) => {
82    /* per-surface drag handlers own the mutation */
83  };
84 
85  return (
86    <DndContext sensors={sensors} onDragEnd={onDragEnd}>
87      <div className="flex h-screen overflow-hidden bg-background">
88        <Sidebar />
89        <div className="flex min-w-0 flex-1 flex-col">
90          <Topbar />
91          {/* The offline banner (R2): top, below the topbar — visible when
92              offline / the provider is down / reconnecting ≥ 5 s. */}
93          <OfflineBanner />
94          <main id="workspace-main" className="min-h-0 flex-1 overflow-y-auto">
95            {children}
96          </main>
97        </div>
98      </div>
99      <CommandPalette />
100      <SearchDialog />
101      <AiPanel />
102      <GeneratePageDialog />
103      <AssistantDialog />
104      <MoveToDialog />
105      <BulkActionsDialog />
106    </DndContext>
107  );
108}
109