feat(ui): add collapsible sidebar rail and takeover panes (#7824)
## Thinking Path > - Paperclip is the open source control plane people use to manage AI agents, work, and company context. > - The board UI sidebar is the main way operators keep orientation across companies, projects, agents, issues, and settings. > - The existing fixed expanded sidebar competes with route-specific navigation, especially company settings and plugin routes that bring their own contextual sidebar. > - A collapsible primary rail preserves global navigation while giving contextual pages more horizontal room. > - This pull request adds a persisted collapsed rail, hover/focus peek, keyboard toggle, and a secondary sidebar takeover model for settings and plugin `routeSidebar` surfaces. > - The benefit is a denser board shell that keeps the app rail available without replacing it when a route needs its own navigation. ## Linked Issues or Issue Description Paperclip issue: PAP-10638 Create collapsible sidebar branch. Related GitHub PR found during duplicate search: #3838 (`feat/collapsible-sidebar`) covers a similar sidebar area but is a different head branch and implementation. This PR intentionally packages the work from `PAP-10638-collapsable-sidebar` into one reviewable branch. Problem description: The board shell needs a first-class collapsed sidebar mode. Contextual surfaces such as company settings and plugin route sidebars should not replace the global app sidebar; they should collapse the app sidebar to a rail and render their contextual navigation beside it. ## What Changed - Added desktop collapsed/sidebar-peek state to `SidebarContext`, including persisted user pins, route collapse requests, and forced collapse for secondary-sidebar routes. - Replaced the old resizable sidebar pane with `SidebarShell`, which supports a fixed 64px rail, persisted expanded width, keyboard/pointer resizing, and hover/focus peek overlay behavior. - Updated `Sidebar`, sidebar nav items, project/agent sections, badges, and account/company menu presentation for expanded, collapsed, and peeking states. - Added `RequestCollapsedSidebar` and `SecondarySidebar` so routes and plugin `routeSidebar` slots can request contextual sidebar layouts without replacing the primary app sidebar. - Wired company settings and plugin route sidebars into the secondary-pane takeover model. - Added focused Vitest coverage for sidebar state precedence, shell sizing, nav item rail rendering, keyboard shortcuts, layout takeover behavior, and route collapse requests. - Updated plugin authoring docs/spec references for route sidebar behavior. ## Verification Targeted local verification passed: ```sh NODE_ENV=test pnpm run preflight:workspace-links && NODE_ENV=test pnpm exec vitest run ui/src/context/SidebarContext.test.tsx ui/src/components/SidebarShell.test.tsx ui/src/components/Sidebar.test.tsx ui/src/components/Layout.test.tsx ui/src/components/RequestCollapsedSidebar.test.tsx ui/src/components/SidebarNavItem.test.tsx ui/src/components/SidebarAgents.test.tsx ui/src/components/SidebarProjects.test.tsx ui/src/components/KeyboardShortcutsCheatsheet.test.tsx ui/src/hooks/useKeyboardShortcuts.test.tsx ``` Result: 10 test files passed, 88 tests passed. Additional follow-up verification passed after review fixes: ```sh NODE_ENV=test pnpm run preflight:workspace-links && NODE_ENV=test pnpm exec vitest run ui/src/components/Layout.test.tsx ui/src/context/SidebarContext.test.tsx && pnpm --filter /ui typecheck ``` Result: 2 test files passed, 28 tests passed, and UI typecheck passed. Latest PR-head remote checks: Paperclip PR workflow, Snyk, Socket, and Greptile are green; commitperclip `review` is cancelled in its security-gate step after filing a non-blocking neutral `security-review` check. Notes: - A direct run without `NODE_ENV=test` loads React's production build in this workspace, where `act` is unavailable; the command above matches the repo stable runner's test environment. - I did not run Playwright/browser e2e or full workspace build/typecheck in this PR-creation heartbeat. - QA screenshots are attached in https://github.com/paperclipai/paperclip/pull/7824#issuecomment-4661968387 for expanded, collapsed rail, hover peek, and settings secondary-sidebar states. ## Risks - Medium UI layout risk: this changes the board shell and primary sidebar composition across many routes. - Local storage migration risk is low: new collapsed state uses a new key and existing width storage remains scoped to the sidebar width. - Plugin route risk: plugin `routeSidebar` slots now render as secondary panes on desktop, so plugin authors should confirm their route sidebar content fits a 240px contextual pane. - Mobile risk appears low because mobile keeps the drawer model and gates collapsed/peek behavior to desktop. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used OpenAI Codex coding agent based on GPT-5, with local shell/git/GitHub CLI tool use. Exact service-side model identifier and context window were not exposed in this runtime. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [ ] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
@@ -0,0 +1,262 @@
|
||||
// @vitest-environment jsdom
|
||||
|
||||
import { act } from "react";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { SidebarProvider, useSidebar } from "./SidebarContext";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
const COLLAPSED_STORAGE_KEY = "paperclip.sidebar.collapsed";
|
||||
|
||||
// Mutable media state driving the matchMedia mock.
|
||||
const mediaState = { mobile: false, hoverFine: true };
|
||||
|
||||
function setViewport({ mobile, hoverFine }: { mobile?: boolean; hoverFine?: boolean }) {
|
||||
if (typeof mobile === "boolean") mediaState.mobile = mobile;
|
||||
if (typeof hoverFine === "boolean") mediaState.hoverFine = hoverFine;
|
||||
Object.defineProperty(window, "innerWidth", {
|
||||
configurable: true,
|
||||
writable: true,
|
||||
value: mediaState.mobile ? 500 : 1280,
|
||||
});
|
||||
}
|
||||
|
||||
let capturedValue: ReturnType<typeof useSidebar> | null = null;
|
||||
|
||||
function Capture() {
|
||||
capturedValue = useSidebar();
|
||||
return null;
|
||||
}
|
||||
|
||||
function renderProvider(): { root: Root; host: HTMLDivElement } {
|
||||
const host = document.createElement("div");
|
||||
document.body.appendChild(host);
|
||||
const root = createRoot(host);
|
||||
act(() => {
|
||||
root.render(
|
||||
<SidebarProvider>
|
||||
<Capture />
|
||||
</SidebarProvider>,
|
||||
);
|
||||
});
|
||||
return { root, host };
|
||||
}
|
||||
|
||||
describe("SidebarContext", () => {
|
||||
let active: { root: Root; host: HTMLDivElement } | null = null;
|
||||
|
||||
beforeEach(() => {
|
||||
localStorage.clear();
|
||||
capturedValue = null;
|
||||
setViewport({ mobile: false, hoverFine: true });
|
||||
Object.defineProperty(window, "matchMedia", {
|
||||
configurable: true,
|
||||
writable: true,
|
||||
value: vi.fn().mockImplementation((query: string) => {
|
||||
const isHoverQuery = query.includes("(hover: hover)");
|
||||
const matches = isHoverQuery ? mediaState.hoverFine : mediaState.mobile;
|
||||
return {
|
||||
matches,
|
||||
media: query,
|
||||
onchange: null,
|
||||
addEventListener: vi.fn(),
|
||||
removeEventListener: vi.fn(),
|
||||
addListener: vi.fn(),
|
||||
removeListener: vi.fn(),
|
||||
dispatchEvent: vi.fn(),
|
||||
};
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
if (active) {
|
||||
act(() => active!.root.unmount());
|
||||
active.host.remove();
|
||||
active = null;
|
||||
}
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
describe("precedence: user pin > route request > default", () => {
|
||||
it("defaults to expanded (collapsed=false) with no pin and no route request", () => {
|
||||
active = renderProvider();
|
||||
expect(capturedValue?.collapsed).toBe(false);
|
||||
});
|
||||
|
||||
it("uses the route request when there is no user pin", () => {
|
||||
active = renderProvider();
|
||||
act(() => capturedValue?.setRouteRequestsCollapsed(true));
|
||||
expect(capturedValue?.collapsed).toBe(true);
|
||||
});
|
||||
|
||||
it("lets an explicit user pin override the route request", () => {
|
||||
active = renderProvider();
|
||||
act(() => capturedValue?.setRouteRequestsCollapsed(true));
|
||||
expect(capturedValue?.collapsed).toBe(true);
|
||||
|
||||
// User pins expanded — this must win over the route's collapse request.
|
||||
act(() => capturedValue?.setCollapsed(false));
|
||||
expect(capturedValue?.collapsed).toBe(false);
|
||||
|
||||
// And pinning collapsed wins too.
|
||||
act(() => capturedValue?.setCollapsed(true));
|
||||
expect(capturedValue?.collapsed).toBe(true);
|
||||
});
|
||||
|
||||
it("toggleCollapsed flips the effective mode and records a pin", () => {
|
||||
active = renderProvider();
|
||||
expect(capturedValue?.collapsed).toBe(false);
|
||||
|
||||
act(() => capturedValue?.toggleCollapsed());
|
||||
expect(capturedValue?.collapsed).toBe(true);
|
||||
expect(localStorage.getItem(COLLAPSED_STORAGE_KEY)).toBe("1");
|
||||
|
||||
act(() => capturedValue?.toggleCollapsed());
|
||||
expect(capturedValue?.collapsed).toBe(false);
|
||||
expect(localStorage.getItem(COLLAPSED_STORAGE_KEY)).toBe("0");
|
||||
});
|
||||
|
||||
it("toggleCollapsed pins expanded when only a route request is active", () => {
|
||||
active = renderProvider();
|
||||
act(() => capturedValue?.setRouteRequestsCollapsed(true));
|
||||
expect(capturedValue?.collapsed).toBe(true);
|
||||
|
||||
// Effective is collapsed (via route); toggling should flip to expanded.
|
||||
act(() => capturedValue?.toggleCollapsed());
|
||||
expect(capturedValue?.collapsed).toBe(false);
|
||||
expect(localStorage.getItem(COLLAPSED_STORAGE_KEY)).toBe("0");
|
||||
});
|
||||
});
|
||||
|
||||
describe("forced collapse (secondary sidebar): overrides the pin, preserves preference", () => {
|
||||
it("forces collapsed even when the user pinned expanded, without mutating the pin", () => {
|
||||
active = renderProvider();
|
||||
// User prefers expanded site-wide.
|
||||
act(() => capturedValue?.setCollapsed(false));
|
||||
expect(capturedValue?.collapsed).toBe(false);
|
||||
expect(localStorage.getItem(COLLAPSED_STORAGE_KEY)).toBe("0");
|
||||
|
||||
// Entering a secondary-sidebar route forces the rail and locks it.
|
||||
act(() => capturedValue?.setForceCollapsed(true));
|
||||
expect(capturedValue?.collapsed).toBe(true);
|
||||
expect(capturedValue?.collapseLocked).toBe(true);
|
||||
// The persisted preference is untouched.
|
||||
expect(localStorage.getItem(COLLAPSED_STORAGE_KEY)).toBe("0");
|
||||
});
|
||||
|
||||
it("restores the user's preference when the force is cleared (leaving the route)", () => {
|
||||
active = renderProvider();
|
||||
act(() => capturedValue?.setCollapsed(false));
|
||||
act(() => capturedValue?.setForceCollapsed(true));
|
||||
expect(capturedValue?.collapsed).toBe(true);
|
||||
|
||||
// Navigating away clears the force; the expanded preference returns.
|
||||
act(() => capturedValue?.setForceCollapsed(false));
|
||||
expect(capturedValue?.collapsed).toBe(false);
|
||||
expect(capturedValue?.collapseLocked).toBe(false);
|
||||
});
|
||||
|
||||
it("locks the toggle while forced: toggleCollapsed is a no-op and never writes the pin", () => {
|
||||
active = renderProvider();
|
||||
act(() => capturedValue?.setCollapsed(false));
|
||||
act(() => capturedValue?.setForceCollapsed(true));
|
||||
|
||||
act(() => capturedValue?.toggleCollapsed());
|
||||
expect(capturedValue?.collapsed).toBe(true); // still forced
|
||||
expect(localStorage.getItem(COLLAPSED_STORAGE_KEY)).toBe("0"); // pin unchanged
|
||||
});
|
||||
|
||||
it("never forces or locks on mobile", () => {
|
||||
setViewport({ mobile: true });
|
||||
active = renderProvider();
|
||||
act(() => capturedValue?.setForceCollapsed(true));
|
||||
expect(capturedValue?.collapsed).toBe(false);
|
||||
expect(capturedValue?.collapseLocked).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("persistence round-trip", () => {
|
||||
it("writes '1'/'0' to localStorage on setCollapsed", () => {
|
||||
active = renderProvider();
|
||||
act(() => capturedValue?.setCollapsed(true));
|
||||
expect(localStorage.getItem(COLLAPSED_STORAGE_KEY)).toBe("1");
|
||||
act(() => capturedValue?.setCollapsed(false));
|
||||
expect(localStorage.getItem(COLLAPSED_STORAGE_KEY)).toBe("0");
|
||||
});
|
||||
|
||||
it("reads the persisted pin synchronously on first paint (no flash)", () => {
|
||||
localStorage.setItem(COLLAPSED_STORAGE_KEY, "1");
|
||||
active = renderProvider();
|
||||
// Collapsed is already true on the very first captured render.
|
||||
expect(capturedValue?.collapsed).toBe(true);
|
||||
});
|
||||
|
||||
it("treats a missing/garbage value as unpinned", () => {
|
||||
localStorage.setItem(COLLAPSED_STORAGE_KEY, "yes");
|
||||
active = renderProvider();
|
||||
expect(capturedValue?.collapsed).toBe(false);
|
||||
// Unpinned, so a route request still applies.
|
||||
act(() => capturedValue?.setRouteRequestsCollapsed(true));
|
||||
expect(capturedValue?.collapsed).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("mobile gating", () => {
|
||||
it("never reports collapsed on mobile even with a collapsed pin", () => {
|
||||
localStorage.setItem(COLLAPSED_STORAGE_KEY, "1");
|
||||
setViewport({ mobile: true });
|
||||
active = renderProvider();
|
||||
expect(capturedValue?.isMobile).toBe(true);
|
||||
expect(capturedValue?.collapsed).toBe(false);
|
||||
});
|
||||
|
||||
it("never reports peeking on mobile", () => {
|
||||
localStorage.setItem(COLLAPSED_STORAGE_KEY, "1");
|
||||
setViewport({ mobile: true });
|
||||
active = renderProvider();
|
||||
act(() => capturedValue?.setPeeking(true));
|
||||
expect(capturedValue?.peeking).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("peek gating", () => {
|
||||
it("peeks when collapsed on a hover-capable pointer", () => {
|
||||
localStorage.setItem(COLLAPSED_STORAGE_KEY, "1");
|
||||
setViewport({ mobile: false, hoverFine: true });
|
||||
active = renderProvider();
|
||||
expect(capturedValue?.collapsed).toBe(true);
|
||||
act(() => capturedValue?.setPeeking(true));
|
||||
expect(capturedValue?.peeking).toBe(true);
|
||||
});
|
||||
|
||||
it("does not peek when expanded", () => {
|
||||
setViewport({ mobile: false, hoverFine: true });
|
||||
active = renderProvider();
|
||||
expect(capturedValue?.collapsed).toBe(false);
|
||||
act(() => capturedValue?.setPeeking(true));
|
||||
expect(capturedValue?.peeking).toBe(false);
|
||||
});
|
||||
|
||||
it("does not peek on a coarse/non-hover pointer", () => {
|
||||
localStorage.setItem(COLLAPSED_STORAGE_KEY, "1");
|
||||
setViewport({ mobile: false, hoverFine: false });
|
||||
active = renderProvider();
|
||||
expect(capturedValue?.collapsed).toBe(true);
|
||||
act(() => capturedValue?.setPeeking(true));
|
||||
expect(capturedValue?.peeking).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("back-compat", () => {
|
||||
it("retains sidebarOpen/toggleSidebar for the drawer", () => {
|
||||
active = renderProvider();
|
||||
const initial = capturedValue?.sidebarOpen;
|
||||
expect(typeof initial).toBe("boolean");
|
||||
act(() => capturedValue?.toggleSidebar());
|
||||
expect(capturedValue?.sidebarOpen).toBe(!initial);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,20 +1,104 @@
|
||||
import { createContext, useCallback, useContext, useState, useEffect, type ReactNode } from "react";
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
type ReactNode,
|
||||
} from "react";
|
||||
|
||||
interface SidebarContextValue {
|
||||
// Mobile drawer + back-compat (existing behavior, unchanged).
|
||||
sidebarOpen: boolean;
|
||||
setSidebarOpen: (open: boolean) => void;
|
||||
toggleSidebar: () => void;
|
||||
isMobile: boolean;
|
||||
// Pinned desktop mode: expanded | collapsed. Desktop-only.
|
||||
collapsed: boolean;
|
||||
setCollapsed: (next: boolean) => void;
|
||||
toggleCollapsed: () => void;
|
||||
// True while a secondary sidebar forces the rail: the collapse is locked, so
|
||||
// the expand/toggle affordance must be hidden/inert. Desktop-only.
|
||||
collapseLocked: boolean;
|
||||
// Ephemeral peek (hover flyout). Only meaningful on desktop, collapsed,
|
||||
// hover-capable pointer. Never persisted.
|
||||
peeking: boolean;
|
||||
setPeeking: (next: boolean) => void;
|
||||
// Hard, ephemeral collapse forced by an active secondary sidebar (settings,
|
||||
// plugin `routeSidebar`, …). HIGHER precedence than the user pin — the rule
|
||||
// is "a secondary sidebar always collapses the primary" — but it never
|
||||
// mutates the persisted pin, so leaving the route restores the preference.
|
||||
// Wired by Layout (PAP-10694).
|
||||
forceCollapsed: boolean;
|
||||
setForceCollapsed: (next: boolean) => void;
|
||||
// Route-requested collapse: a route may *default* the app sidebar to
|
||||
// collapsed. LOWER precedence than an explicit user pin. Wired by routes via
|
||||
// RequestCollapsedSidebar.
|
||||
routeRequestsCollapsed: boolean;
|
||||
setRouteRequestsCollapsed: (next: boolean) => void;
|
||||
}
|
||||
|
||||
const SidebarContext = createContext<SidebarContextValue | null>(null);
|
||||
|
||||
const MOBILE_BREAKPOINT = 768;
|
||||
const COLLAPSED_STORAGE_KEY = "paperclip.sidebar.collapsed";
|
||||
const PEEK_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
|
||||
|
||||
// Tri-state read of the persisted user pin:
|
||||
// true → pinned collapsed ("1")
|
||||
// false → pinned expanded ("0")
|
||||
// null → no pin (fall through to route request, then global default)
|
||||
// Read synchronously in the state initializer so first paint matches the
|
||||
// persisted mode (mirrors the `paperclip.sidebar.width` pattern in
|
||||
// ResizableSidebarPane and avoids an expand→collapse flash).
|
||||
function readStoredCollapsed(): boolean | null {
|
||||
if (typeof window === "undefined") return null;
|
||||
|
||||
try {
|
||||
const stored = window.localStorage.getItem(COLLAPSED_STORAGE_KEY);
|
||||
if (stored === "1") return true;
|
||||
if (stored === "0") return false;
|
||||
return null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function writeStoredCollapsed(value: boolean) {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
try {
|
||||
window.localStorage.setItem(COLLAPSED_STORAGE_KEY, value ? "1" : "0");
|
||||
} catch {
|
||||
// Storage can be unavailable in private contexts; pinning should still
|
||||
// work for the current session.
|
||||
}
|
||||
}
|
||||
|
||||
function readPointerCanPeek(): boolean {
|
||||
if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
return window.matchMedia(PEEK_POINTER_QUERY).matches;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export function SidebarProvider({ children }: { children: ReactNode }) {
|
||||
const [isMobile, setIsMobile] = useState(() => window.innerWidth < MOBILE_BREAKPOINT);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(() => window.innerWidth >= MOBILE_BREAKPOINT);
|
||||
|
||||
// `null` = unpinned; an explicit user pin takes precedence over route request.
|
||||
const [userCollapsed, setUserCollapsed] = useState<boolean | null>(() => readStoredCollapsed());
|
||||
const [routeRequestsCollapsed, setRouteRequestsCollapsed] = useState(false);
|
||||
const [forceCollapsed, setForceCollapsed] = useState(false);
|
||||
const [rawPeeking, setRawPeeking] = useState(false);
|
||||
const [pointerCanPeek, setPointerCanPeek] = useState(() => readPointerCanPeek());
|
||||
|
||||
useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
|
||||
const onChange = (e: MediaQueryListEvent) => {
|
||||
@@ -25,13 +109,81 @@ export function SidebarProvider({ children }: { children: ReactNode }) {
|
||||
return () => mql.removeEventListener("change", onChange);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window.matchMedia !== "function") return;
|
||||
const mql = window.matchMedia(PEEK_POINTER_QUERY);
|
||||
const onChange = (e: MediaQueryListEvent) => setPointerCanPeek(e.matches);
|
||||
mql.addEventListener("change", onChange);
|
||||
return () => mql.removeEventListener("change", onChange);
|
||||
}, []);
|
||||
|
||||
// Precedence (highest wins): forced (active secondary sidebar) > explicit user
|
||||
// pin > route request > default expanded. The force is ephemeral and never
|
||||
// touches the persisted pin, so dropping it restores the user's preference.
|
||||
const pinnedOrRequested = userCollapsed !== null ? userCollapsed : routeRequestsCollapsed;
|
||||
const desktopCollapsed = forceCollapsed || pinnedOrRequested;
|
||||
// Collapsed/peek are desktop-only; mobile always uses the drawer. The user
|
||||
// pin is preserved across the breakpoint and reapplies on the desktop side.
|
||||
const collapsed = isMobile ? false : desktopCollapsed;
|
||||
// While forced, the pin is locked: the expand/toggle affordance is inert.
|
||||
const collapseLocked = !isMobile && forceCollapsed;
|
||||
// Peek only applies when collapsed on a hover-capable pointer.
|
||||
const peeking = rawPeeking && collapsed && pointerCanPeek;
|
||||
|
||||
const setCollapsed = useCallback((next: boolean) => {
|
||||
setUserCollapsed(next);
|
||||
writeStoredCollapsed(next);
|
||||
}, []);
|
||||
|
||||
const toggleCollapsed = useCallback(() => {
|
||||
// While a secondary sidebar forces the rail, the toggle is locked: it must
|
||||
// neither expand the rail nor mutate the persisted preference.
|
||||
if (forceCollapsed) return;
|
||||
setCollapsed(!pinnedOrRequested);
|
||||
}, [forceCollapsed, pinnedOrRequested, setCollapsed]);
|
||||
|
||||
const setPeeking = useCallback((next: boolean) => {
|
||||
setRawPeeking(next);
|
||||
}, []);
|
||||
|
||||
const toggleSidebar = useCallback(() => setSidebarOpen((v) => !v), []);
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={{ sidebarOpen, setSidebarOpen, toggleSidebar, isMobile }}>
|
||||
{children}
|
||||
</SidebarContext.Provider>
|
||||
const value = useMemo<SidebarContextValue>(
|
||||
() => ({
|
||||
sidebarOpen,
|
||||
setSidebarOpen,
|
||||
toggleSidebar,
|
||||
isMobile,
|
||||
collapsed,
|
||||
setCollapsed,
|
||||
toggleCollapsed,
|
||||
collapseLocked,
|
||||
peeking,
|
||||
setPeeking,
|
||||
forceCollapsed,
|
||||
setForceCollapsed,
|
||||
routeRequestsCollapsed,
|
||||
setRouteRequestsCollapsed,
|
||||
}),
|
||||
[
|
||||
sidebarOpen,
|
||||
setSidebarOpen,
|
||||
toggleSidebar,
|
||||
isMobile,
|
||||
collapsed,
|
||||
setCollapsed,
|
||||
toggleCollapsed,
|
||||
collapseLocked,
|
||||
peeking,
|
||||
setPeeking,
|
||||
forceCollapsed,
|
||||
setForceCollapsed,
|
||||
routeRequestsCollapsed,
|
||||
setRouteRequestsCollapsed,
|
||||
],
|
||||
);
|
||||
|
||||
return <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>;
|
||||
}
|
||||
|
||||
export function useSidebar() {
|
||||
|
||||
Reference in New Issue
Block a user