feat(mobile): right-rail as drawer on mobile, header toggle button

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>

apps/web/src/components/RightRail.tsx

@@ -4,8 +4,11 @@ import { api } from '@/api/client';
 import type { FileEntry } from '@/api/types';
 import { inferLanguage } from '@/lib/attachments';
 import { sessionEvents } from '@/hooks/sessionEvents';
+import { useRightRailDrawer } from '@/hooks/useRightRailDrawer';
+import { useViewport } from '@/hooks/useViewport';
 import { FileViewerOverlay } from '@/components/FileViewerOverlay';
 import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
 
 interface Props {
   projectId: string;
@@ -25,6 +28,8 @@ function joinPath(parent: string, name: string): string {
 }
 
 export function RightRail({ projectId }: Props) {
+  const { isMobile } = useViewport();
+  const { open: drawerOpen, setOpen: setDrawerOpen } = useRightRailDrawer();
   const [open, setOpen] = useState(() => {
     try { return localStorage.getItem(`${STORAGE_KEY}.open`) !== 'false'; } catch { return true; }
   });
@@ -34,6 +39,19 @@ export function RightRail({ projectId }: Props) {
   const [fullFileList, setFullFileList] = useState<string[] | null>(null);
   const [viewerFile, setViewerFile] = useState<{ path: string; content: string } | null>(null);
 
+  // Combined open state: on mobile use the global drawer state (toggled by
+  // the Session header's FolderTree button); on desktop use the persistent
+  // internal state.
+  const isOpen = isMobile ? drawerOpen : open;
+  const closeRail = useCallback(() => {
+    if (isMobile) setDrawerOpen(false);
+    else setOpen(false);
+  }, [isMobile, setDrawerOpen]);
+  const openRail = useCallback(() => {
+    if (isMobile) setDrawerOpen(true);
+    else setOpen(true);
+  }, [isMobile, setDrawerOpen]);
+
   useEffect(() => {
     // best-effort; ignore failure because localStorage may be unavailable (quota, private mode)
     try { localStorage.setItem(`${STORAGE_KEY}.open`, String(open)); } catch {}
@@ -56,9 +74,9 @@ export function RightRail({ projectId }: Props) {
   }, [projectId]);
 
   useEffect(() => {
-    if (!open) return;
+    if (!isOpen) return;
     if (!cache.has('')) void loadDir('');
-  }, [open, cache, loadDir]);
+  }, [isOpen, cache, loadDir]);
 
   function toggleDir(dirPath: string) {
     setExpandedDirs((prev) => {
@@ -108,12 +126,14 @@ export function RightRail({ projectId }: Props) {
   useEffect(() => {
     return sessionEvents.subscribe((event) => {
       if (event.type !== 'open_file_in_browser') return;
-      if (!open) setOpen(true);
+      if (!isOpen) openRail();
       void openFile(event.path);
     });
-  }, [open, projectId]);
+  }, [isOpen, openRail, projectId]);
 
-  if (!open) {
+  // Desktop closed state: render the floating chevron handle. Mobile never
+  // shows the handle — the toggle lives in the Session header on mobile.
+  if (!isMobile && !open) {
     return (
       <button
         type="button"
@@ -128,15 +148,25 @@ export function RightRail({ projectId }: Props) {
 
   const rootEntries = cache.get('') ?? [];
 
+  // Mobile: render as fixed-position right-side drawer (always mounted so
+  // the transform transition can animate in/out). Desktop: inline aside.
+  const asideCls = isMobile
+    ? cn(
+        'fixed inset-y-0 right-0 z-40 w-[85vw] max-w-sm border-l bg-sidebar flex flex-col overflow-hidden',
+        'transition-transform duration-200 ease-out',
+        drawerOpen ? 'translate-x-0' : 'translate-x-full',
+      )
+    : 'w-64 shrink-0 border-l bg-sidebar flex flex-col h-full overflow-hidden';
+
   return (
     <>
-      <aside className="w-64 shrink-0 border-l bg-sidebar flex flex-col h-full overflow-hidden">
+      <aside className={asideCls}>
         <div className="flex items-center gap-2 px-3 py-2 border-b shrink-0">
           <span className="text-xs font-medium flex-1">Files</span>
           <button
             type="button"
-            onClick={() => setOpen(false)}
-            className="p-1 rounded hover:bg-muted text-muted-foreground"
+            onClick={closeRail}
+            className="p-1 rounded hover:bg-muted text-muted-foreground max-md:min-h-[44px] max-md:min-w-[44px]"
             aria-label="Close file browser"
           >
             <PanelRightClose size={14} />