Add sidebar thread folders (folders view, scoped archived views, shared components)

apps/app/.ladle/components.tsx

@@ -6,6 +6,7 @@ import { WorkerPoolContextProvider } from "@pierre/diffs/react";
 import { Provider as JotaiProvider, createStore } from "jotai";
 import { MemoryRouter } from "react-router-dom";
 import { AppToaster } from "../src/components/AppToaster";
+import { TooltipProvider } from "../src/components/ui/tooltip";
 import { setPreferredTheme } from "../src/hooks/useTheme";
 import {
   createDiffWorker,
@@ -65,10 +66,12 @@ export const Provider: GlobalProvider = ({ globalState, children }) => {
             }}
             highlighterOptions={{}}
           >
-            <div className="min-h-screen text-foreground">
-              {children}
-              <AppToaster position="bottom-right" />
-            </div>
+            <TooltipProvider delayDuration={300} disableHoverableContent>
+              <div className="min-h-screen text-foreground">
+                {children}
+                <AppToaster position="bottom-right" />
+              </div>
+            </TooltipProvider>
           </WorkerPoolContextProvider>
         </QueryClientProvider>
       </JotaiProvider>

apps/app/.ladle/story-fixtures.ts

@@ -279,6 +279,7 @@ export function makeThread(overrides: Partial<Thread> = {}): Thread {
     providerId: "codex",
     title: "Audit recurring permission failures",
     titleFallback: "Audit recurring permission failures",
+    folderPath: null,
     status: "idle",
     parentThreadId: null,
     sourceThreadId: null,
@@ -305,6 +306,7 @@ export function makeThreadListEntry(
     providerId: "codex",
     title: "Audit recurring permission failures",
     titleFallback: "Audit recurring permission failures",
+    folderPath: null,
     status: "idle",
     parentThreadId: null,
     sourceThreadId: null,

apps/app/src/App.tsx

@@ -56,9 +56,9 @@ const ProjectSettingsView = lazy(() =>
     default: m.ProjectSettingsView,
   })),
 );
-const ProjectArchivedThreadsView = lazy(() =>
-  import("./views/ProjectArchivedThreadsView").then((m) => ({
-    default: m.ProjectArchivedThreadsView,
+const ArchivedThreadsView = lazy(() =>
+  import("./views/ArchivedThreadsView").then((m) => ({
+    default: m.ArchivedThreadsView,
   })),
 );
 const PopoutChatView = lazy(() =>
@@ -118,11 +118,11 @@ function AppRoutes() {
           />
           <Route
             path={PROJECT_ARCHIVED_ROUTE_PATH}
-            element={<ProjectArchivedThreadsView />}
+            element={<ArchivedThreadsView />}
           />
           <Route
             path={PROJECTLESS_ARCHIVED_ROUTE_PATH}
-            element={<ProjectArchivedThreadsView />}
+            element={<ArchivedThreadsView />}
           />
           <Route
             path={THREAD_DETAIL_ROUTE_PATH}

apps/app/src/app.css

@@ -300,3 +300,25 @@
     transform: scale(1) rotate(90deg);
   }
 }
+
+/* Briefly highlight a conversation message that a sidebar search result
+ * deep-links to, then fade back to transparent. */
+@keyframes bb-search-flash {
+  from {
+    background-color: color-mix(in oklch, var(--ring) 22%, transparent);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
+.bb-search-flash {
+  border-radius: var(--radius-lg, 0.5rem);
+  animation: bb-search-flash 1.6s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bb-search-flash {
+    animation: none;
+  }
+}

apps/app/src/components/dialogs/ThreadFolderCreateDialog.tsx

@@ -0,0 +1,170 @@
+import { useId, useState, type FormEvent, type RefObject } from "react";
+import { Button } from "@/components/ui/button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog.js";
+import { Input } from "@/components/ui/input.js";
+import { normalizeFolderPath } from "@/components/sidebar/folderPath";
+import { useNameValidation } from "./useNameValidation.js";
+import { useRenameDialogAutoFocus } from "./useRenameDialogAutoFocus.js";
+
+interface ThreadFolderCreateDialogProps {
+  open: boolean;
+  pending?: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreate: (path: string) => void;
+}
+
+export interface ThreadFolderRenameDialogTarget {
+  path: string;
+}
+
+interface ThreadFolderRenameDialogProps {
+  target: ThreadFolderRenameDialogTarget | null;
+  pending?: boolean;
+  onOpenChange: (open: boolean) => void;
+  onRename: (path: string, newPath: string) => void;
+}
+
+interface ThreadFolderDialogContentProps {
+  description: string;
+  initialPath: string;
+  inputLabel: string;
+  pending: boolean;
+  submitLabel: string;
+  title: string;
+  onSubmit: (path: string) => void;
+  inputRef: RefObject<HTMLInputElement | null>;
+}
+
+export function ThreadFolderCreateDialog({
+  open,
+  pending = false,
+  onOpenChange,
+  onCreate,
+}: ThreadFolderCreateDialogProps) {
+  const { inputRef, handleOpenAutoFocus } = useRenameDialogAutoFocus();
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent onOpenAutoFocus={handleOpenAutoFocus}>
+        {open ? (
+          <ThreadFolderDialogContent
+            description="Create a folder for threads."
+            initialPath=""
+            inputLabel="Folder name"
+            pending={pending}
+            submitLabel="Create folder"
+            title="New folder"
+            onSubmit={onCreate}
+            inputRef={inputRef}
+          />
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function ThreadFolderRenameDialog({
+  target,
+  pending = false,
+  onOpenChange,
+  onRename,
+}: ThreadFolderRenameDialogProps) {
+  const { inputRef, handleOpenAutoFocus } = useRenameDialogAutoFocus();
+  return (
+    <Dialog open={target !== null} onOpenChange={onOpenChange}>
+      <DialogContent onOpenAutoFocus={handleOpenAutoFocus}>
+        {target ? (
+          <ThreadFolderDialogContent
+            key={target.path}
+            description="Choose a new path for this folder."
+            initialPath={target.path}
+            inputLabel="Folder path"
+            pending={pending}
+            submitLabel="Rename folder"
+            title="Rename folder"
+            onSubmit={(newPath) => onRename(target.path, newPath)}
+            inputRef={inputRef}
+          />
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ThreadFolderDialogContent({
+  description,
+  initialPath,
+  inputLabel,
+  pending,
+  submitLabel,
+  title,
+  onSubmit,
+  inputRef,
+}: ThreadFolderDialogContentProps) {
+  const inputId = useId();
+  const [path, setPath] = useState(initialPath);
+  const [folderPathMessage, setFolderPathMessage] = useState<string | null>(
+    null,
+  );
+  const { validationMessage, validate, clearMessage } = useNameValidation({
+    emptyMessage: "Folder name cannot be empty.",
+  });
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (pending) return;
+
+    const trimmedPath = validate(path);
+    if (trimmedPath === null) return;
+    const normalizedPath = normalizeFolderPath(trimmedPath);
+    if (normalizedPath === null) {
+      setFolderPathMessage("Folder name cannot be empty.");
+      return;
+    }
+
+    onSubmit(normalizedPath);
+  };
+  const displayedMessage = validationMessage ?? folderPathMessage;
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <form className="space-y-4" onSubmit={handleSubmit}>
+        <div className="space-y-2">
+          <Input
+            ref={inputRef}
+            id={inputId}
+            aria-label={inputLabel}
+            value={path}
+            autoCapitalize="sentences"
+            autoCorrect="off"
+            spellCheck={false}
+            disabled={pending}
+            onChange={(event) => {
+              setPath(event.target.value);
+              setFolderPathMessage(null);
+              clearMessage();
+            }}
+          />
+          {displayedMessage ? (
+            <p className="text-sm text-destructive">{displayedMessage}</p>
+          ) : null}
+        </div>
+        <DialogFooter>
+          <Button type="submit" disabled={pending}>
+            {submitLabel}
+          </Button>
+        </DialogFooter>
+      </form>
+    </>
+  );
+}

apps/app/src/components/dialogs/ThreadRenameDialog.stories.tsx

@@ -22,6 +22,11 @@ const parentTarget: ThreadRenameDialogTarget = {
   currentTitle: "Frontend Parent",
 };
 
+const slashTitleTarget: ThreadRenameDialogTarget = {
+  id: "thr_folder",
+  currentTitle: "test/say hi",
+};
+
 const longTitleTarget: ThreadRenameDialogTarget = {
   id: "thr_long",
   currentTitle:
@@ -55,6 +60,16 @@ export function Overview() {
           />
         </DialogStage>
       </StoryRow>
+      <StoryRow label="slash title" hint="slashes stay part of the title">
+        <DialogStage>
+          <ThreadRenameDialogContent
+            target={slashTitleTarget}
+            pending={false}
+            onRename={noop}
+            inputRef={inputRef}
+          />
+        </DialogStage>
+      </StoryRow>
       <StoryRow
         label="pending"
         hint="submit in flight — input and submit are disabled"

apps/app/src/components/dialogs/ThreadRenameDialog.tsx

@@ -1,7 +1,14 @@
 import { capitalize } from "@bb/thread-view";
 import { useId, useState, type FormEvent, type RefObject } from "react";
 import { Button } from "@/components/ui/button.js";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog.js";
 import { Input } from "@/components/ui/input.js";
 import { useNameValidation } from "./useNameValidation.js";
 import { useRenameDialogAutoFocus } from "./useRenameDialogAutoFocus.js";
@@ -11,11 +18,15 @@ export interface ThreadRenameDialogTarget {
   currentTitle: string;
 }
 
+export interface ThreadRenameDialogPayload {
+  title: string;
+}
+
 interface ThreadRenameDialogProps {
   target: ThreadRenameDialogTarget | null;
   pending?: boolean;
   onOpenChange: (open: boolean) => void;
-  onRename: (threadId: string, title: string) => void;
+  onRename: (threadId: string, payload: ThreadRenameDialogPayload) => void;
 }
 
 export function ThreadRenameDialog({
@@ -45,7 +56,7 @@ export function ThreadRenameDialog({
 export interface ThreadRenameDialogContentProps {
   target: ThreadRenameDialogTarget;
   pending: boolean;
-  onRename: (threadId: string, title: string) => void;
+  onRename: (threadId: string, payload: ThreadRenameDialogPayload) => void;
   inputRef: RefObject<HTMLInputElement | null>;
 }
 
@@ -69,7 +80,7 @@ export function ThreadRenameDialogContent({
     const trimmedTitle = validate(nextTitle);
     if (trimmedTitle === null) return;
 
-    onRename(target.id, trimmedTitle);
+    onRename(target.id, { title: trimmedTitle });
   };
 
   return (

apps/app/src/components/layout/AppLayout.tsx

@@ -387,6 +387,11 @@ export function AppLayout({ children }: AppLayoutProps) {
     { enabled: isAutomationDetailView },
   );
   const automationName = automationDetail?.name ?? "Automation";
+  // Folder-scoped archived list (`/archived?folder=<path>`); drives the
+  // breadcrumb's folder segment.
+  const archivedFolderPath = isArchivedView
+    ? new URLSearchParams(location.search).get("folder")
+    : null;
   const sidebarNavigationQuery = useSidebarNavigation();
   const projects = useMemo(
     () => sidebarNavigationQuery.data?.projects.map(stripProjectThreads),
@@ -465,6 +470,9 @@ export function AppLayout({ children }: AppLayoutProps) {
               subtitle: undefined,
               breadcrumbs: [
                 { label: "Threads", to: getRootComposeRoutePath() },
+                ...(archivedFolderPath
+                  ? [{ label: archivedFolderPath }]
+                  : []),
                 { label: "Archived" },
               ],
             }
@@ -507,7 +515,9 @@ export function AppLayout({ children }: AppLayoutProps) {
     }
     if (isArchivedView && projectId) {
       if (isProjectlessProjectId(projectId)) {
-        return "Threads · Archived";
+        return archivedFolderPath
+          ? `${archivedFolderPath} · Archived`
+          : "Threads · Archived";
       }
       return `${projectLabel ?? projectId} · Archived`;
     }