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>
                   </>