fix: presigned upload URLs, card badge alignment, filter menu UX, floating save

- Presigned upload URLs were signed against STORAGE_ENDPOINT (the
  internal docker hostname, e.g. http://minio:9000) instead of a
  browser-reachable URL — uploads/edits with photos were broken in
  prod. Now signed with a separate client bound to STORAGE_PUBLIC_URL,
  which also needed threading through as a Docker build arg (CSP
  headers are computed at build time) and into compose.prod.yml/
  .env.production (gitignored, not committed).
- recipe-form.tsx used the wrong i18n namespace for the visibility
  label (t("recipeForm") instead of t_recipe("recipe")), causing
  MISSING_MESSAGE in French.
- Compact recipe-list view: batch-cook rows showed no dish count, and
  the date/difficulty columns shifted per-row depending on whether a
  difficulty badge was present — reserved a fixed-width slot for it.
- All three card icon badges (batch-cook, favorite, visibility) now
  share the same muted color instead of the batch badge standing out.
- Recipes filter dropdown: clicking a filter option closed the whole
  menu, and the tag text input couldn't be typed into (the menu's
  roving-focus/type-ahead handling was intercepting keystrokes) — menu
  items now stay open on click, and the tag input stops event
  propagation so it behaves like a normal text field.
- Recipe form: added a floating save/cancel bar so long recipes don't
  require scrolling back down to save.

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

apps/web/lib/ai/features/generate-batch-cook.ts

@@ -60,7 +60,7 @@ export async function generateBatchCook(
     ? `Keep techniques at a ${difficulty} skill level.`
     : "";
 
-  const systemPrompt = `You are a professional meal-prep chef writing ONE unified "batch cooking" recipe page — not several separate recipes. This mirrors real French batch-cooking guides (cuisine-addict.com style): one shopping list, then a single prep session structured in two phases, covering multiple meals for the days ahead.
+  const systemPrompt = `You are a professional meal-prep chef writing ONE unified "batch cooking" recipe page — not several separate recipes. This mirrors real French batch-cooking guides: one shopping list, then a single prep session structured in two phases, covering multiple meals for the days ahead.
 
 Structure:
 1. A merged, deduplicated ingredient list across all dishes (identical rawName spelling for anything shared).

apps/web/lib/storage.ts

@@ -5,19 +5,33 @@ const bucket = process.env["STORAGE_BUCKET"] ?? "epicure-uploads";
 const endpoint = process.env["STORAGE_ENDPOINT"] ?? "http://localhost:9000";
 const publicUrl = process.env["STORAGE_PUBLIC_URL"] ?? "http://localhost:9000";
 
+const credentials = {
+  accessKeyId: process.env["STORAGE_ACCESS_KEY"] ?? "minioadmin",
+  secretAccessKey: process.env["STORAGE_SECRET_KEY"] ?? "minioadmin",
+};
+
 const s3 = new S3Client({
   region: process.env["STORAGE_REGION"] ?? "us-east-1",
   endpoint,
   forcePathStyle: true,
-  credentials: {
-    accessKeyId: process.env["STORAGE_ACCESS_KEY"] ?? "minioadmin",
-    secretAccessKey: process.env["STORAGE_SECRET_KEY"] ?? "minioadmin",
-  },
+  credentials,
+});
+
+// Presigned URLs are PUT/GET directly by the browser, so they must be signed
+// against an endpoint the browser can actually resolve — not the internal
+// docker hostname `s3` (and `endpoint`) use for server-to-server calls. Signing
+// is pure crypto (no network call), so a second client pointed at the public
+// URL is safe even though it's never used to make a real request itself.
+const presignS3 = new S3Client({
+  region: process.env["STORAGE_REGION"] ?? "us-east-1",
+  endpoint: publicUrl,
+  forcePathStyle: true,
+  credentials,
 });
 
 export async function createPresignedUploadUrl(key: string, contentType: string): Promise<string> {
   const command = new PutObjectCommand({ Bucket: bucket, Key: key, ContentType: contentType });
-  return getSignedUrl(s3, command, { expiresIn: 300 });
+  return getSignedUrl(presignS3, command, { expiresIn: 300 });
 }
 
 export async function deleteObject(key: string): Promise<void> {