feat: ChatGPT/Claude-style persistent sidebar for desktop fullscreen chat (v0.57.0)

Cooking assistant's fullscreen mode gets a real left sidebar (always-
visible conversation list, hover-reveal rename/delete) on desktop
(md+), replacing the small dropdown menu that made sense in the narrow
420px drawer but not in a full-viewport layout. Mobile fullscreen and
the normal drawer keep the dropdown (ConversationMenu) — no room for a
persistent sidebar there.

Extracted the shared fetch/rename/delete/create logic into
use-conversation-list.ts so the dropdown (ConversationMenu) and the new
sidebar (ConversationSidebar) can't silently diverge — both are thin
render layers over the same hook. ConversationMenu gained an optional
className prop so the panel can hide it with `md:hidden` specifically
when the sidebar is already covering that job.

Per-recipe chat is untouched — it's single-threaded by design and never
used either of these components.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/components/recipe/conversation-menu.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { useTranslations } from "next-intl";
 import { List, Plus, Pencil, Trash2, Check, X } from "lucide-react";
-import { toast } from "sonner";
 import { cn } from "@/lib/utils";
 import { useLocale } from "@/lib/i18n/provider";
+import { useConversationList } from "./use-conversation-list";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -20,112 +19,71 @@ import {
 export type Conversation = { id: string; title: string | null; createdAt: string; updatedAt: string };
 
 /**
- * Lists, creates, renames, and deletes the general assistant's conversations
- * — the homepage chat can hold more than one thread, unlike the per-recipe
- * chat (which stays single-threaded, one conversation per recipe, by design).
+ * Dropdown skin for the general assistant's conversation list — a narrow
+ * popover, used in the drawer/mobile layout. The desktop-fullscreen layout
+ * uses ConversationSidebar (a persistent list) instead; both share their
+ * fetch/rename/delete logic via useConversationList so they can't diverge.
+ * The per-recipe chat stays single-threaded, one conversation per recipe,
+ * by design — it never uses either of these.
  */
 export function ConversationMenu({
   activeId,
   onSelect,
   onCreated,
   onDeletedActive,
+  className,
 }: {
   activeId: string | null;
   onSelect: (id: string) => void;
   onCreated: (conversation: Conversation) => void;
   onDeletedActive: () => void;
+  className?: string;
 }) {
-  const t = useTranslations("conversations");
   const { locale } = useLocale();
   const [open, setOpen] = useState(false);
-  const [conversations, setConversations] = useState<Conversation[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [renamingId, setRenamingId] = useState<string | null>(null);
-  const [renameValue, setRenameValue] = useState("");
-  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  const loadedRef = useRef(false);
+  const {
+    t,
+    conversations,
+    loading,
+    load,
+    create,
+    renamingId,
+    renameValue,
+    setRenameValue,
+    startRename,
+    cancelRename,
+    submitRename,
+    deleteTargetId,
+    setDeleteTargetId,
+    confirmDelete,
+  } = useConversationList(onDeletedActive, activeId);
 
   useEffect(() => {
     function handleClickOutside(e: MouseEvent) {
       if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
         setOpen(false);
-        setRenamingId(null);
+        cancelRename();
       }
     }
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  async function loadConversations() {
-    setLoading(true);
-    try {
-      const res = await fetch("/api/v1/ai/conversations");
-      if (!res.ok) return;
-      const json = await res.json() as { data: Conversation[] };
-      setConversations(json.data);
-    } finally {
-      setLoading(false);
-    }
-  }
+  }, [cancelRename]);
 
   function handleToggle() {
     setOpen((v) => !v);
-    if (!loadedRef.current) {
-      loadedRef.current = true;
-      void loadConversations();
-    }
+    void load();
   }
 
   async function handleCreate() {
-    const res = await fetch("/api/v1/ai/conversations", { method: "POST" });
-    if (!res.ok) {
-      toast.error(t("createFailed"));
-      return;
-    }
-    const created = await res.json() as Conversation;
-    setConversations((prev) => [created, ...prev]);
+    const created = await create();
+    if (!created) return;
     onCreated(created);
     setOpen(false);
   }
 
-  function startRename(conversation: Conversation) {
-    setRenamingId(conversation.id);
-    setRenameValue(conversation.title ?? "");
-  }
-
-  async function submitRename() {
-    if (!renamingId) return;
-    const id = renamingId;
-    const title = renameValue.trim() || null;
-    setRenamingId(null);
-    const res = await fetch(`/api/v1/ai/conversations/${id}`, {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ title }),
-    });
-    if (!res.ok) {
-      toast.error(t("renameFailed"));
-      return;
-    }
-    setConversations((prev) => prev.map((c) => (c.id === id ? { ...c, title } : c)));
-  }
-
-  async function confirmDelete() {
-    const id = deleteTargetId;
-    setDeleteTargetId(null);
-    if (!id) return;
-    const res = await fetch(`/api/v1/ai/conversations/${id}`, { method: "DELETE" });
-    if (!res.ok) {
-      toast.error(t("deleteFailed"));
-      return;
-    }
-    setConversations((prev) => prev.filter((c) => c.id !== id));
-    if (id === activeId) onDeletedActive();
-  }
-
   return (
-    <div ref={containerRef} className="relative">
+    <div ref={containerRef} className={cn("relative", className)}>
       <button
         type="button"
         onClick={handleToggle}
@@ -168,7 +126,7 @@ export function ConversationMenu({
                       onChange={(e) => setRenameValue(e.target.value)}
                       onKeyDown={(e) => {
                         if (e.key === "Enter") void submitRename();
-                        if (e.key === "Escape") setRenamingId(null);
+                        if (e.key === "Escape") cancelRename();
                       }}
                       maxLength={100}
                       className="flex-1 min-w-0 bg-transparent border-b border-primary text-sm outline-none"
@@ -176,7 +134,7 @@ export function ConversationMenu({
                     <button type="button" onClick={() => void submitRename()} className="p-1 rounded-md hover:bg-muted shrink-0" aria-label={t("renameSave")}>
                       <Check className="h-3.5 w-3.5" />
                     </button>
-                    <button type="button" onClick={() => setRenamingId(null)} className="p-1 rounded-md hover:bg-muted shrink-0" aria-label={t("renameCancel")}>
+                    <button type="button" onClick={cancelRename} className="p-1 rounded-md hover:bg-muted shrink-0" aria-label={t("renameCancel")}>
                       <X className="h-3.5 w-3.5" />
                     </button>
                   </>

apps/web/components/recipe/conversation-sidebar.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useEffect } from "react";
+import { Plus, Pencil, Trash2, Check, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useLocale } from "@/lib/i18n/provider";
+import { useConversationList } from "./use-conversation-list";
+import type { Conversation } from "./conversation-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+/**
+ * Persistent conversation list for the desktop-fullscreen chat layout —
+ * ChatGPT/Claude-style, always visible rather than a dropdown (that's
+ * ConversationMenu, used in the drawer/mobile layout instead). Shares its
+ * fetch/rename/delete logic with ConversationMenu via useConversationList.
+ */
+export function ConversationSidebar({
+  activeId,
+  onSelect,
+  onCreated,
+  onDeletedActive,
+  className,
+}: {
+  activeId: string | null;
+  onSelect: (id: string) => void;
+  onCreated: (conversation: Conversation) => void;
+  onDeletedActive: () => void;
+  className?: string;
+}) {
+  const { locale } = useLocale();
+  const {
+    t,
+    conversations,
+    loading,
+    load,
+    create,
+    renamingId,
+    renameValue,
+    setRenameValue,
+    startRename,
+    cancelRename,
+    submitRename,
+    deleteTargetId,
+    setDeleteTargetId,
+    confirmDelete,
+  } = useConversationList(onDeletedActive, activeId);
+
+  useEffect(() => {
+    void load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- load() is idempotent (guarded by its own `loaded` flag), only needs to run once on mount
+  }, []);
+
+  async function handleCreate() {
+    const created = await create();
+    if (created) onCreated(created);
+  }
+
+  return (
+    <div className={cn("flex flex-col border-r bg-muted/30", className)}>
+      <div className="p-2 border-b shrink-0">
+        <button
+          type="button"
+          onClick={() => void handleCreate()}
+          className="w-full flex items-center gap-2 px-2.5 py-2 rounded-md text-sm border bg-background hover:bg-accent transition-colors text-left"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          {t("newConversation")}
+        </button>
+      </div>
+
+      <div className="overflow-y-auto flex-1 p-1.5 space-y-0.5">
+        {loading && <p className="text-xs text-muted-foreground text-center py-4">{t("loading")}</p>}
+        {!loading && conversations.length === 0 && (
+          <p className="text-xs text-muted-foreground text-center py-4">{t("empty")}</p>
+        )}
+        {!loading && conversations.map((c) => (
+          <div
+            key={c.id}
+            className={cn(
+              "group flex items-center gap-1 px-2 py-2 rounded-md text-sm",
+              c.id === activeId ? "bg-accent" : "hover:bg-accent/50"
+            )}
+          >
+            {renamingId === c.id ? (
+              <>
+                <input
+                  autoFocus
+                  value={renameValue}
+                  onChange={(e) => setRenameValue(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") void submitRename();
+                    if (e.key === "Escape") cancelRename();
+                  }}
+                  maxLength={100}
+                  className="flex-1 min-w-0 bg-transparent border-b border-primary text-sm outline-none"
+                />
+                <button type="button" onClick={() => void submitRename()} className="p-1 rounded-md hover:bg-muted shrink-0" aria-label={t("renameSave")}>
+                  <Check className="h-3.5 w-3.5" />
+                </button>
+                <button type="button" onClick={cancelRename} className="p-1 rounded-md hover:bg-muted shrink-0" aria-label={t("renameCancel")}>
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              </>
+            ) : (
+              <>
+                <button
+                  type="button"
+                  onClick={() => onSelect(c.id)}
+                  className="flex-1 min-w-0 text-left truncate"
+                >
+                  <span className="truncate block">{c.title || t("untitled")}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {new Date(c.updatedAt).toLocaleDateString(locale, { month: "short", day: "numeric" })}
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => startRename(c)}
+                  className="p-1 rounded-md hover:bg-muted shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity"
+                  aria-label={t("renameAriaLabel")}
+                >
+                  <Pencil className="h-3.5 w-3.5" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setDeleteTargetId(c.id)}
+                  className="p-1 rounded-md hover:bg-muted shrink-0 text-muted-foreground opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity"
+                  aria-label={t("deleteAriaLabel")}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </button>
+              </>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <AlertDialog open={!!deleteTargetId} onOpenChange={(v) => { if (!v) setDeleteTargetId(null); }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("deleteConfirmTitle")}</AlertDialogTitle>
+            <AlertDialogDescription>{t("deleteConfirmDescription")}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("deleteCancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => { void confirmDelete(); }}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {t("deleteConfirm")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

apps/web/components/recipe/cooking-assistant-panel.tsx

@@ -12,6 +12,7 @@ import ReactMarkdown from "react-markdown";
 import { cn } from "@/lib/utils";
 import { ChatHistorySearch } from "./chat-history-search";
 import { ConversationMenu, type Conversation } from "./conversation-menu";
+import { ConversationSidebar } from "./conversation-sidebar";
 import { ShoppingListProposalCard, type ShoppingListProposal } from "./shopping-list-proposal-card";
 
 type RecipeProposal = {
@@ -224,10 +225,20 @@ export function CookingAssistantPanel() {
         <SheetContent
           side="right"
           className={cn(
-            "flex flex-col p-0",
-            fullscreen ? "!w-screen !max-w-none !h-screen !inset-0" : "w-full sm:w-[420px]"
+            "p-0",
+            fullscreen ? "!w-screen !max-w-none !h-screen !inset-0 flex flex-row" : "flex flex-col w-full sm:w-[420px]"
           )}
         >
+          {fullscreen && (
+            <ConversationSidebar
+              className="hidden md:flex w-64 shrink-0"
+              activeId={conversationId}
+              onSelect={handleSelectConversation}
+              onCreated={handleConversationCreated}
+              onDeletedActive={handleActiveConversationDeleted}
+            />
+          )}
+          <div className="flex flex-col flex-1 min-w-0 h-full">
           <SheetHeader className="px-4 py-3 pr-10 border-b shrink-0">
             <div className="flex items-center justify-between gap-2">
               <SheetTitle className="text-base flex items-center gap-2">
@@ -244,7 +255,11 @@ export function CookingAssistantPanel() {
                   {fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
                 </button>
                 <ChatHistorySearch />
+                {/* On desktop fullscreen, ConversationSidebar (left) replaces this
+                    dropdown — kept for mobile fullscreen and the normal drawer,
+                    where there's no room for a persistent sidebar. */}
                 <ConversationMenu
+                  className={cn(fullscreen && "md:hidden")}
                   activeId={conversationId}
                   onSelect={handleSelectConversation}
                   onCreated={handleConversationCreated}
@@ -389,6 +404,7 @@ export function CookingAssistantPanel() {
               <Send className="h-4 w-4" />
             </Button>
           </form>
+          </div>
         </SheetContent>
       </Sheet>
     </>

apps/web/components/recipe/use-conversation-list.ts

@@ -0,0 +1,94 @@
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import type { Conversation } from "./conversation-menu";
+
+/** Shared fetch/rename/delete logic for the general assistant's conversation
+ *  list — used by both the dropdown (ConversationMenu, narrow/mobile) and the
+ *  persistent sidebar (desktop fullscreen) skins, so the two never diverge. */
+export function useConversationList(onDeletedActive: () => void, activeId: string | null) {
+  const t = useTranslations("conversations");
+  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+  const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+
+  async function load() {
+    if (loaded) return;
+    setLoaded(true);
+    setLoading(true);
+    try {
+      const res = await fetch("/api/v1/ai/conversations");
+      if (!res.ok) return;
+      const json = await res.json() as { data: Conversation[] };
+      setConversations(json.data);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function create(): Promise<Conversation | null> {
+    const res = await fetch("/api/v1/ai/conversations", { method: "POST" });
+    if (!res.ok) {
+      toast.error(t("createFailed"));
+      return null;
+    }
+    const created = await res.json() as Conversation;
+    setConversations((prev) => [created, ...prev]);
+    return created;
+  }
+
+  function startRename(conversation: Conversation) {
+    setRenamingId(conversation.id);
+    setRenameValue(conversation.title ?? "");
+  }
+
+  async function submitRename() {
+    if (!renamingId) return;
+    const id = renamingId;
+    const title = renameValue.trim() || null;
+    setRenamingId(null);
+    const res = await fetch(`/api/v1/ai/conversations/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title }),
+    });
+    if (!res.ok) {
+      toast.error(t("renameFailed"));
+      return;
+    }
+    setConversations((prev) => prev.map((c) => (c.id === id ? { ...c, title } : c)));
+  }
+
+  async function confirmDelete() {
+    const id = deleteTargetId;
+    setDeleteTargetId(null);
+    if (!id) return;
+    const res = await fetch(`/api/v1/ai/conversations/${id}`, { method: "DELETE" });
+    if (!res.ok) {
+      toast.error(t("deleteFailed"));
+      return;
+    }
+    setConversations((prev) => prev.filter((c) => c.id !== id));
+    if (id === activeId) onDeletedActive();
+  }
+
+  return {
+    t,
+    conversations,
+    loading,
+    load,
+    create,
+    renamingId,
+    renameValue,
+    setRenameValue,
+    startRename,
+    cancelRename: () => setRenamingId(null),
+    submitRename,
+    deleteTargetId,
+    setDeleteTargetId,
+    confirmDelete,
+  };
+}

apps/web/lib/changelog.ts

@@ -1,5 +1,5 @@
 // Mirrors CHANGELOG.md at the repo root — update both together.
-export const APP_VERSION = "0.56.0";
+export const APP_VERSION = "0.57.0";
 
 export type ChangelogEntry = {
   version: string;
@@ -11,6 +11,13 @@ export type ChangelogEntry = {
 };
 
 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "0.57.0",
+    date: "2026-07-20 09:20",
+    added: [
+      "Cooking assistant, fullscreen on desktop, now has a persistent conversation sidebar on the left (like ChatGPT/Claude) instead of a dropdown menu — switch chats without leaving the conversation you're reading. Mobile and the normal drawer view keep the dropdown, since there's no room for a sidebar there.",
+    ],
+  },
   {
     version: "0.56.0",
     date: "2026-07-20 09:10",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epicure/web",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "private": true,
   "scripts": {
     "dev": "next dev",