Let a person collapse the sidebar, and reach the roster on a phone (#308)

* Let a person collapse the sidebar, and reach the roster on a phone

The sidebar could always collapse. The primitive has held the state, the width transition and a
Cmd/Ctrl+B listener since it was vendored in, and nothing ever rendered a trigger for any of it. The
only affordance was SidebarRail, a 16px transparent strip carrying tabIndex={-1}, so the eye could
not find it and the keyboard could not reach it.

Under 768px the same sidebar is a Sheet that starts closed, and with no trigger nothing could open
it. The roster is this app's navigation, so on a phone every channel sat behind a control that did
not exist.

The toggle is drawn in the chrome each screen already has, and in both states: one that lived inside
the sidebar could not bring back what it hid. PageShell's back-button bar becomes unconditional so
the control sits at the pane's left edge rather than 400px into a centred prose column, and the three
screens that draw no header of their own get the same 48px band.

The preference now survives a reload. The primitive wrote a sidebar_state cookie for a
server-rendered shell to read on its first byte; nothing renders this app on a server and nothing
ever read it back, so that write is gone and lib/sidebar.ts holds the answer instead, in the shape of
the theme preference beside it. Mobile is deliberately excluded: an overlay that covers the screen it
overlays has no business being open before anybody asked.

* Draw no toggle where there is no sidebar, and cover the playground

Two gaps found by auditing every screen under a shell rather than trusting the list of files the
feature commit happened to touch.

The admin playground drew no toggle at all, so collapsing the sidebar there left no way back. It is
the one admin page that keeps its own geometry — an editor beside a live preview, as its comment says
— so the toggle goes inline in its header rather than in a band of its own, which would take 48px
from the thing being previewed.

`PageShell` is not guaranteed to be inside a shell. Every one of the twenty screens that draws it is
inside one today, so a toggle reading `useSidebar` unconditionally works here; a screen that renders
`PageShell` outside a provider is a reasonable layout choice, and it would have met a thrown error
during render rather than a missing button. `useSidebar` throwing is correct for a part OF a sidebar,
where its absence is a wiring bug. A control that merely offers to toggle one reads the context
optionally and draws nothing when there is none.

* Draw the bar only when it holds something, and name the action a phone will take

Two things review found.

The bar was unconditional, which on `/assist` and `/link/slack` meant a 56px band holding nothing:
those two draw PageShell directly under `_authed`, so there is no sidebar, the toggle correctly draws
nothing, and neither passes a Back link. An empty band of chrome reads as a layout bug rather than as
chrome. It is now drawn when it has at least one of the two to hold, and a screen without it keeps
the full original space above its heading rather than the reduced space the bar was paying for.

The label was wrong on a phone. `open` describes the desktop pane, so a mobile toggle always read
"Show sidebar" even with the Sheet open. The Sheet is modal, so nothing could be clicked while it was
wrong, but the context already carries `openMobile` and there is no reason to name the wrong action.

Author: jerelvelarde

app/src/components/layout/page-shell.tsx

@@ -3,6 +3,8 @@ import { Link, type LinkProps } from "@tanstack/react-router";
 import type * as React from "react";
 import { cn } from "@/lib/utils";
 import { Button } from "../ui/button";
+import { useOptionalSidebar } from "../ui/sidebar";
+import { SidebarToggle } from "./sidebar-toggle";
 
 /**
  * The frame every configuration screen sits in.
@@ -56,23 +58,42 @@ export function PageShell({
     label: string;
   };
 }) {
+  /*
+   * Whether this screen has a sidebar at all. `/assist` and `/link/slack` draw PageShell directly
+   * under `_authed`, which mounts no provider, so there is nothing for a toggle to act on there.
+   */
+  const hasSidebar = useOptionalSidebar() !== null;
+  /*
+   * The bar carries the toggle and the Back link, and is drawn when it has at least one of them.
+   * The screens with a Back link already drew exactly this bar, so for them nothing changes; what
+   * changed is that a sidebar is now reason enough on its own, because the toggle has to sit at the
+   * pane's left edge in both states and the prose column is centred — a control inside it would be
+   * 400px from the edge it belongs to on a wide screen. Drawing it with neither would be a 56px
+   * band holding nothing, which reads as a layout bug rather than as chrome.
+   */
+  const bar = hasSidebar || !!backButton;
+
   return (
     <>
-      {!!backButton && (
-        <div className="max-w-7xl w-full h-14 flex items-center px-3">
-          <Button
-            variant="ghost"
-            render={(props) => <Link {...backButton.linkProps} {...props} />}
-          >
-            <IconChevronLeft />
-            {backButton.label}
-          </Button>
+      {bar ? (
+        <div className="max-w-7xl w-full h-14 flex items-center gap-1 px-3">
+          {hasSidebar ? <SidebarToggle /> : null}
+          {!!backButton && (
+            <Button
+              variant="ghost"
+              render={(props) => <Link {...backButton.linkProps} {...props} />}
+            >
+              <IconChevronLeft />
+              {backButton.label}
+            </Button>
+          )}
         </div>
-      )}
+      ) : null}
       <div
         className={cn(
-          "mx-auto flex w-full flex-col px-4 py-12",
-          { "pt-8": !!backButton },
+          "mx-auto flex w-full flex-col px-4 pb-12",
+          // Without a bar above it the heading keeps the full original space.
+          bar ? "pt-8" : "pt-12",
           WIDTHS[width],
           className,
         )}

app/src/components/layout/sidebar-shell.tsx

@@ -0,0 +1,62 @@
+import { type CSSProperties, type ReactNode, useEffect, useState } from "react";
+
+import { SidebarProvider } from "@/components/ui/sidebar";
+import {
+  applySidebarOpen,
+  parseStoredSidebarOpen,
+  SIDEBAR_STORAGE_KEY,
+} from "@/lib/sidebar";
+
+/**
+ * The frame the three shells — app, admin, settings — hang their sidebar in.
+ *
+ * It exists for one reason: the open/closed state has to outlive a reload, and the primitive's
+ * `SidebarProvider` cannot do that on its own (it writes a cookie nothing reads and hardcodes
+ * `defaultOpen` to true). Driving it as controlled state is a dozen lines, and three copies of a
+ * dozen lines is three chances for one shell to forget the preference the other two remember.
+ *
+ * `width` is what actually differs between the shells. The app's roster earns 340px because its
+ * rows are two-line message previews; admin and settings hold short nav labels and earn 300px.
+ */
+export function SidebarShell({
+  children,
+  className,
+  width,
+}: {
+  children: ReactNode;
+  className?: string;
+  width: string;
+}) {
+  // Read before the first paint, so a shell somebody left collapsed never flashes open.
+  const [open, setOpen] = useState(() =>
+    parseStoredSidebarOpen(window.localStorage.getItem(SIDEBAR_STORAGE_KEY)),
+  );
+
+  useEffect(() => {
+    applySidebarOpen(open, {
+      setStoredValue: (key, value) => window.localStorage.setItem(key, value),
+    });
+  }, [open]);
+
+  return (
+    <SidebarProvider
+      className={className}
+      onOpenChange={setOpen}
+      open={open}
+      /*
+       * `--sidebar-width-mobile` is set for the shape's sake and currently goes unread: the
+       * primitive's mobile branch styles its Sheet from a hardcoded 18rem. Below 768px the sidebar
+       * is that Sheet, which is also why the stored preference never reaches it — a panel that
+       * covers the screen it overlays has no business being open before anybody asked for it.
+       */
+      style={
+        {
+          "--sidebar-width": width,
+          "--sidebar-width-mobile": "20rem",
+        } as CSSProperties
+      }
+    >
+      {children}
+    </SidebarProvider>
+  );
+}

app/src/components/layout/sidebar-toggle.tsx

@@ -0,0 +1,89 @@
+import { IconLayoutSidebar } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+import { useOptionalSidebar } from "@/components/ui/sidebar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+/**
+ * ⌘ on Apple platforms, Ctrl everywhere else. The primitive's listener accepts either modifier, so
+ * this only decides which of the two to name.
+ */
+const SHORTCUT_LABEL = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
+  ? "⌘B"
+  : "Ctrl+B";
+
+/**
+ * The control that opens and closes the shell's sidebar.
+ *
+ * WHAT THIS IS FIXING. The sidebar could always collapse — the primitive has had the state, the
+ * width transition and a ⌘B shortcut since it was vendored in. Nothing ever rendered a trigger for
+ * it. The only affordance was `SidebarRail`, a 16px transparent strip carrying `tabIndex={-1}`, so
+ * the eye could not find it and the keyboard could not reach it; and under 768px, where the sidebar
+ * becomes a Sheet that starts closed, there was no way to open the roster at all.
+ *
+ * It is therefore drawn in the chrome each screen already has, and in BOTH states, rather than
+ * inside the sidebar it hides — a trigger that disappears along with the sidebar cannot bring it
+ * back.
+ *
+ * Built from `Button` rather than the primitive's `SidebarTrigger` because that component hardcodes
+ * its own children after the prop spread, including an `sr-only` "Toggle Sidebar" that would
+ * contradict the label below. The state still belongs to the primitive: `toggleSidebar` is its hook.
+ */
+export function SidebarToggle({ className }: { className?: string }) {
+  const sidebar = useOptionalSidebar();
+  // No sidebar in scope, so nothing to toggle and nothing to draw.
+  if (!sidebar) return null;
+  const { isMobile, open, openMobile, toggleSidebar } = sidebar;
+  /*
+   * The label says what the click will do, not what is on screen. Below 768px the sidebar is an
+   * overlay Sheet with its own open state, and `open` describes the desktop pane — reading it there
+   * would name the wrong action.
+   */
+  const label = (isMobile ? openMobile : open)
+    ? "Hide sidebar"
+    : "Show sidebar";
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            aria-label={label}
+            className={cn("text-muted-foreground", className)}
+            onClick={toggleSidebar}
+            size="icon"
+            variant="ghost"
+          >
+            <IconLayoutSidebar className="size-4.5" />
+          </Button>
+        }
+      />
+      {/* An accelerator nobody is told about is not a feature. */}
+      <TooltipContent side="bottom">
+        {label}
+        <span className="text-background/60">{SHORTCUT_LABEL}</span>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+/**
+ * The toggle on a screen that draws no header of its own.
+ *
+ * Three `_app` screens open straight into their content, and the toggle still has to land in the
+ * same 48px band it occupies everywhere else — a control that moves between screens is a control
+ * somebody has to look for each time. No bottom border: a divider under an otherwise empty bar is a
+ * line with nothing to divide.
+ */
+export function SidebarToggleBar() {
+  return (
+    <div className="h-12 shrink-0 flex items-center px-3">
+      <SidebarToggle />
+    </div>
+  );
+}

app/src/components/ui/sidebar.tsx

@@ -25,8 +25,6 @@ import {
 } from "@/components/ui/tooltip";
 import { IconLayoutSidebar } from "@tabler/icons-react";
 
-const SIDEBAR_COOKIE_NAME = "sidebar_state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
@@ -53,6 +51,27 @@ function useSidebar() {
   return context;
 }
 
+/**
+ * The sidebar's state, or null where there is no sidebar.
+ *
+ * `useSidebar` throwing is right for a part OF a sidebar, where its absence is a wiring bug. A
+ * control that merely offers to toggle one is the other case: `PageShell` sits inside the three
+ * shells today, and a screen that renders it outside one is a layout choice rather than a defect.
+ * Throwing there would take a whole screen down over a button that should simply not be drawn.
+ */
+function useOptionalSidebar() {
+  return React.useContext(SidebarContext);
+}
+
+/**
+ * Sidebar state, uncontrolled by default.
+ *
+ * This vendored file used to write a `sidebar_state` cookie on every toggle, so a server-rendered
+ * shell could paint the right width on its first byte. Nothing renders this app on a server and
+ * nothing ever read the cookie back, so the preference lives in `lib/sidebar.ts` and the shells
+ * drive `open`/`onOpenChange` through `layout/sidebar-shell.tsx` instead. Re-adding the cookie would
+ * stand a second, staler answer beside that one.
+ */
 function SidebarProvider({
   defaultOpen = true,
   open: openProp,
@@ -81,9 +100,6 @@ function SidebarProvider({
       } else {
         _setOpen(openState);
       }
-
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
     [setOpenProp, open],
   );
@@ -719,5 +735,6 @@ export {
   SidebarRail,
   SidebarSeparator,
   SidebarTrigger,
+  useOptionalSidebar,
   useSidebar,
 };

app/src/lib/sidebar.ts

@@ -0,0 +1,33 @@
+/**
+ * Whether the shell's sidebar is open, remembered across reloads.
+ *
+ * The primitive under `components/ui/sidebar.tsx` writes a `sidebar_state` cookie of its own, which
+ * exists so a server-rendered shell can paint the right width on the first byte. Nothing renders
+ * this app on a server, and nothing ever read that cookie back — so the preference lives here
+ * instead, in the same shape and the same storage as the theme preference next door.
+ */
+export const SIDEBAR_STORAGE_KEY = "openbot-sidebar";
+
+/**
+ * Only the exact stored `collapsed` starts the sidebar closed.
+ *
+ * Everything else opens it: a key never written, a value from an older build, a value somebody
+ * else's script left behind. The roster is this app's navigation, and the cost of the two mistakes
+ * is not symmetric — opening a sidebar somebody wanted shut costs them one click, while shutting one
+ * on a guess hides every channel they have behind an affordance they have not found yet.
+ */
+export function parseStoredSidebarOpen(value: string | null) {
+  return value !== "collapsed";
+}
+
+type SidebarEffects = {
+  setStoredValue: (key: string, value: string) => void;
+};
+
+/**
+ * Records the state in the vocabulary the primitive already uses for it — `expanded` and
+ * `collapsed`, the two values of its `data-state` attribute — rather than inventing a second pair.
+ */
+export function applySidebarOpen(open: boolean, effects: SidebarEffects) {
+  effects.setStoredValue(SIDEBAR_STORAGE_KEY, open ? "expanded" : "collapsed");
+}

app/src/routes/_authed/_app.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 import { AppSidebar } from "@/components/app-sidebar/app-sidebar";
-import { SidebarProvider } from "@/components/ui/sidebar";
+import { SidebarShell } from "@/components/layout/sidebar-shell";
 
 export const Route = createFileRoute("/_authed/_app")({
   component: RouteComponent,
@@ -10,19 +10,11 @@ function RouteComponent() {
   return (
     // One viewport, never scrolls: panes scroll inside it. A growable shell lets the transcript's
     // scroller size against the page, grow it, and grow again.
-    <SidebarProvider
-      className="h-svh overflow-hidden"
-      style={
-        {
-          "--sidebar-width": "340px",
-          "--sidebar-width-mobile": "20rem",
-        } as React.CSSProperties
-      }
-    >
+    <SidebarShell className="h-svh overflow-hidden" width="340px">
       <AppSidebar />
       <main className="flex-1 flex flex-col min-h-0 overflow-hidden">
         <Outlet />
       </main>
-    </SidebarProvider>
+    </SidebarShell>
   );
 }

app/src/routes/_authed/_app/agents/index.tsx

@@ -6,6 +6,7 @@ import { AgentCard } from "@/components/agents/agent-card";
 import { AgentProfile as AgentProfileDetail } from "@/components/agents/agent-profile";
 import { NewAgent } from "@/components/agents/new-agent";
 import { DetailPanel } from "@/components/layout/detail-panel";
+import { SidebarToggleBar } from "@/components/layout/sidebar-toggle";
 import { StaggerItem } from "@/components/layout/stagger";
 import { Button } from "@/components/ui/button";
 import { Empty, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
@@ -58,6 +59,7 @@ function AgentsScreen() {
         ) : null
       }
     >
+      <SidebarToggleBar />
       <div className="max-w-2xl px-4 w-full mx-auto">
         <div className="mt-12 w-full max-w-2xl">
           <div className="flex flex-row w-full items-center justify-between">

app/src/routes/_authed/_app/bot.tsx

@@ -2,6 +2,7 @@ import { CopilotChat } from "@copilotkit/react-core/v2";
 import { IconPlus } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
+import { SidebarToggleBar } from "@/components/layout/sidebar-toggle";
 import { Button } from "@/components/ui/button";
 import { agentListQueryOptions } from "@/lib/agents/queries";
 import { useActiveBot } from "@/lib/copilot/active-bot";
@@ -76,6 +77,7 @@ function BotChat({ agentId, name }: { agentId: string; name: string }) {
 
   return (
     <div className="flex h-screen flex-col">
+      <SidebarToggleBar />
       <header className="border-b px-6 py-3">
         <div className="flex items-baseline justify-between">
           {/*

app/src/routes/_authed/_app/channel/$channelId.tsx

@@ -17,6 +17,7 @@ import { ActivityLog } from "@/components/computer/activity-log";
 import { ComputerView } from "@/components/computer/computer-view";
 import { useNeedsYou } from "@/components/computer/needs-you";
 import { DetailPanel } from "@/components/layout/detail-panel";
+import { SidebarToggle } from "@/components/layout/sidebar-toggle";
 import { Button } from "@/components/ui/button";
 import { markChannelReadMutationOptions } from "@/lib/channels/mutations";
 import {
@@ -177,6 +178,7 @@ function RouteComponent() {
         <div className="h-12 border-b border-border sticky top-0 flex flex-row items-center justify-between px-3 gap-2">
           {/* Keyed on the displayed name so cold channel loads animate the resolved name, not the id. */}
           <div className="flex min-w-0 items-center gap-1.5">
+            <SidebarToggle />
             <motion.div
               animate={{ opacity: 1 }}
               className="shrink-0"

app/src/routes/_authed/_app/channel/new.tsx

@@ -6,6 +6,7 @@ import { ChannelAvatar } from "@/components/channels/avatar";
 import { canSend, type Recipient } from "@/components/channels/compose-state";
 import { ConversationView } from "@/components/channels/conversation-view";
 import { seedMessage } from "@/components/channels/transcript-messages";
+import { SidebarToggle } from "@/components/layout/sidebar-toggle";
 import {
   Combobox,
   ComboboxContent,
@@ -64,6 +65,7 @@ function RouteComponent() {
   return (
     <div className="flex h-full flex-col">
       <div className="h-12 border-b border-border sticky top-0 flex flex-row px-2 items-center">
+        <SidebarToggle className="mr-1" />
         <span className="text-sm text-muted-foreground">To:</span>
         <Combobox
           // Do not auto-open when the recipient came from the URL; the field is already answered.