feat: fullscreen toggle for cooking assistant and recipe chat

Both chat panels were locked to a fixed 420px slide-over with no way
to get more room for longer conversations. Adds an expand/collapse
button in the header that grows the sheet to fill the viewport.

v0.38.0

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

@@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
-import { MessageCircle, Send, Bot, User } from "lucide-react";
+import { MessageCircle, Send, Bot, User, Maximize2, Minimize2 } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import { cn } from "@/lib/utils";
 import { ChatHistorySearch } from "./chat-history-search";
@@ -20,7 +20,9 @@ type HistoryEntry = { role: "user" | "assistant"; content: string };
 
 export function CookingAssistantPanel() {
   const t = useTranslations("cookingChat");
+  const tCommon = useTranslations("common");
   const [open, setOpen] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState("");
   const [loading, setLoading] = useState(false);
@@ -96,8 +98,14 @@ export function CookingAssistantPanel() {
         <MessageCircle className="h-5 w-5" />
       </Button>
 
-      <Sheet open={open} onOpenChange={setOpen}>
-        <SheetContent side="right" className="w-full sm:w-[420px] flex flex-col p-0">
+      <Sheet open={open} onOpenChange={(v) => { setOpen(v); if (!v) setFullscreen(false); }}>
+        <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]"
+          )}
+        >
           <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">
@@ -105,6 +113,14 @@ export function CookingAssistantPanel() {
                 {t("title")}
               </SheetTitle>
               <div className="flex items-center gap-0.5">
+                <button
+                  type="button"
+                  onClick={() => setFullscreen((v) => !v)}
+                  aria-label={fullscreen ? tCommon("collapse") : tCommon("expand")}
+                  className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                >
+                  {fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+                </button>
                 <ChatHistorySearch />
                 <ClearChatHistoryButton disabled={messages.length === 0} onCleared={() => setMessages([])} />
               </div>

apps/web/components/recipe/recipe-chat-panel.tsx

@@ -5,7 +5,7 @@ import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
-import { MessageCircle, Send, Bot, User } from "lucide-react";
+import { MessageCircle, Send, Bot, User, Maximize2, Minimize2 } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import { cn } from "@/lib/utils";
 import { ChatHistorySearch } from "./chat-history-search";
@@ -25,7 +25,9 @@ type Props = {
 
 export function RecipeChatPanel({ recipeId, recipeTitle }: Props) {
   const t = useTranslations("recipeChat");
+  const tCommon = useTranslations("common");
   const [open, setOpen] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState("");
   const [loading, setLoading] = useState(false);
@@ -98,8 +100,14 @@ export function RecipeChatPanel({ recipeId, recipeTitle }: Props) {
         <MessageCircle className="h-5 w-5" />
       </Button>
 
-      <Sheet open={open} onOpenChange={setOpen}>
-        <SheetContent side="right" className="w-full sm:w-[420px] flex flex-col p-0">
+      <Sheet open={open} onOpenChange={(v) => { setOpen(v); if (!v) setFullscreen(false); }}>
+        <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]"
+          )}
+        >
           <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">
@@ -107,6 +115,14 @@ export function RecipeChatPanel({ recipeId, recipeTitle }: Props) {
                 {t("title")}
               </SheetTitle>
               <div className="flex items-center gap-0.5">
+                <button
+                  type="button"
+                  onClick={() => setFullscreen((v) => !v)}
+                  aria-label={fullscreen ? tCommon("collapse") : tCommon("expand")}
+                  className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                >
+                  {fullscreen ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+                </button>
                 <ChatHistorySearch recipeId={recipeId} />
                 <ClearChatHistoryButton recipeId={recipeId} disabled={messages.length === 0} onCleared={() => setMessages([])} />
               </div>