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

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to Epicure are documented here. This file is mirrored in-app at `/changelog` (and in the admin dashboard) via `apps/web/lib/changelog.ts` — update both together.
 
+## 0.38.0 — 2026-07-17 13:00
+
+### Added
+- The cooking assistant and per-recipe chat can now expand to fullscreen — a new toggle in the chat header.
+
 ## 0.37.0 — 2026-07-17 12:30
 
 ### Fixed

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>

apps/web/lib/changelog.ts

@@ -1,5 +1,5 @@
 // Mirrors CHANGELOG.md at the repo root — update both together.
-export const APP_VERSION = "0.37.0";
+export const APP_VERSION = "0.38.0";
 
 export type ChangelogEntry = {
   version: string;
@@ -11,6 +11,13 @@ export type ChangelogEntry = {
 };
 
 export const CHANGELOG: ChangelogEntry[] = [
+  {
+    version: "0.38.0",
+    date: "2026-07-17 13:00",
+    added: [
+      "The cooking assistant and per-recipe chat can now expand to fullscreen — a new toggle in the chat header.",
+    ],
+  },
   {
     version: "0.37.0",
     date: "2026-07-17 12:30",

apps/web/messages/en.json

@@ -530,6 +530,8 @@
     "noRecent": "No public recipes yet."
   },
   "common": {
+    "expand": "Expand to fullscreen",
+    "collapse": "Exit fullscreen",
     "loading": "Loading…",
     "error": "Something went wrong",
     "save": "Save",

apps/web/messages/fr.json

@@ -530,6 +530,8 @@
     "noRecent": "Aucune recette publique pour l'instant."
   },
   "common": {
+    "expand": "Passer en plein écran",
+    "collapse": "Quitter le plein écran",
     "loading": "Chargement…",
     "error": "Une erreur s'est produite",
     "save": "Enregistrer",

apps/web/package.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "epicure",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "private": true,
   "scripts": {
     "dev": "pnpm --filter web dev",