Reverts v1.6.1's max-md:hidden wrapper around RightRail. On mobile, RightRail now renders as a fixed right-side drawer (w-[85vw], max-w-sm) toggled by a new FolderTree button in the Session header. - New useRightRailDrawer hook mirrors useSidebarDrawer (Context + auto-close on route change). - New MobileRightRailBackdrop component in App.tsx mirrors the existing MobileBackdrop for the left sidebar. - RightRail computes an isOpen synthesis: on mobile, reads the drawer Context; on desktop, reads the persistent internal state. The existing tree-load effect and open_file_in_browser subscription share this plumbing via openRail / closeRail helpers. - The desktop floating chevron handle is hidden on mobile (the Session header's FolderTree button replaces it). - Session header gains a mobile-only FolderTree button after the ModelPicker, calling toggle() on the drawer Context. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { createContext, useCallback, useContext, useEffect, useState } from 'react';
|
|
import type { ReactNode } from 'react';
|
|
import { useLocation } from 'react-router-dom';
|
|
|
|
interface RightRailDrawerState {
|
|
open: boolean;
|
|
setOpen: (open: boolean) => void;
|
|
toggle: () => void;
|
|
}
|
|
|
|
const Ctx = createContext<RightRailDrawerState | null>(null);
|
|
|
|
export function RightRailDrawerProvider({ children }: { children: ReactNode }) {
|
|
const [open, setOpen] = useState(false);
|
|
const location = useLocation();
|
|
|
|
// Auto-close on route change. Same pattern as useSidebarDrawer — keeps the
|
|
// drawer from leaking between sessions when the user navigates.
|
|
useEffect(() => {
|
|
setOpen(false);
|
|
}, [location.pathname]);
|
|
|
|
const toggle = useCallback(() => setOpen((v) => !v), []);
|
|
|
|
return <Ctx.Provider value={{ open, setOpen, toggle }}>{children}</Ctx.Provider>;
|
|
}
|
|
|
|
export function useRightRailDrawer(): RightRailDrawerState {
|
|
const ctx = useContext(Ctx);
|
|
if (!ctx) {
|
|
// Soft fallback so consumers don't crash if rendered outside a provider.
|
|
return { open: false, setOpen: () => {}, toggle: () => {} };
|
|
}
|
|
return ctx;
|
|
}
|