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>
2026-07-12 10:53:12 +02:00
parent 1baf5ce20e
commit 2682eba2be
9 changed files with 66 additions and 19 deletions
@@ -39,6 +39,11 @@ ENV NEXT_PUBLIC_VAPID_PUBLIC_KEY=$NEXT_PUBLIC_VAPID_PUBLIC_KEY
 ENV NEXT_PUBLIC_GITHUB_ENABLED=$NEXT_PUBLIC_GITHUB_ENABLED
 ENV NEXT_PUBLIC_DISCORD_ENABLED=$NEXT_PUBLIC_DISCORD_ENABLED
 ENV NEXT_PUBLIC_AUTHENTIK_ENABLED=$NEXT_PUBLIC_AUTHENTIK_ENABLED
+# next.config.ts reads STORAGE_PUBLIC_URL to compute the CSP connect-src/img-src
+# allowlist, and next.config.ts's headers() are evaluated at build time — so this
+# also needs to be a build arg, not just a runtime env var (unlike STORAGE_ENDPOINT).
+ARG STORAGE_PUBLIC_URL
+ENV STORAGE_PUBLIC_URL=$STORAGE_PUBLIC_URL
 RUN pnpm --filter web build

 # ---- runtime ----
@@ -259,7 +259,7 @@ export function RecipeForm({ recipeId, defaultValues }: RecipeFormProps) {
  }

  return (
-    <form onSubmit={handleSubmit} className="space-y-8 max-w-3xl">
+    <form onSubmit={handleSubmit} className="space-y-8 max-w-3xl pb-20">
      {/* Basic info */}
      <div className="space-y-4">
        <div className="space-y-2">
@@ -335,7 +335,7 @@ export function RecipeForm({ recipeId, defaultValues }: RecipeFormProps) {
        </div>

        <div className="space-y-2">
-          <Label htmlFor="visibility">{t("visibilityMenuLabel")}</Label>
+          <Label htmlFor="visibility">{t_recipe("visibilityMenuLabel")}</Label>
          <select
            id="visibility"
            value={visibility}
@@ -518,6 +518,16 @@ export function RecipeForm({ recipeId, defaultValues }: RecipeFormProps) {
        </Button>
      </div>

+      {/* Floating save bar — the form above can get long, this stays reachable without scrolling back down */}
+      <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-40 flex items-center gap-2 rounded-full border bg-popover p-1.5 shadow-lg">
+        <Button type="submit" size="sm" className="rounded-full" disabled={saving}>
+          {saving ? t("saving") : isEdit ? t("saveChanges") : t("createRecipe")}
+        </Button>
+        <Button type="button" size="sm" variant="ghost" className="rounded-full" onClick={handleCancelClick}>
+          {t_common("cancel")}
+        </Button>
+      </div>
+
      <AlertDialog open={discardConfirmOpen} onOpenChange={setDiscardConfirmOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
@@ -154,7 +154,7 @@ function GridCard({ recipe, selected, selectMode }: { recipe: Recipe; selected:
          {recipe.isBatchCook && (
            <TooltipProvider>
              <Tooltip>
-                <TooltipTrigger render={<span className="p-1.5 inline-flex"><ChefHat className="h-3.5 w-3.5 text-primary" /></span>} />
+                <TooltipTrigger render={<span className="p-1.5 inline-flex"><ChefHat className="h-3.5 w-3.5 text-muted-foreground" /></span>} />
                <TooltipContent>{t("batchCookBadge")}</TooltipContent>
              </Tooltip>
            </TooltipProvider>
@@ -201,7 +201,7 @@ function ListRow({ recipe, selected, selectMode }: { recipe: Recipe; selected: b
            {recipe.isBatchCook && (
              <TooltipProvider>
                <Tooltip>
-                  <TooltipTrigger render={<span className="p-1.5 inline-flex"><ChefHat className="h-3.5 w-3.5 text-primary" /></span>} />
+                  <TooltipTrigger render={<span className="p-1.5 inline-flex"><ChefHat className="h-3.5 w-3.5 text-muted-foreground" /></span>} />
                  <TooltipContent>{t("batchCookBadge")}</TooltipContent>
                </Tooltip>
              </TooltipProvider>
@@ -240,6 +240,7 @@ function ListRow({ recipe, selected, selectMode }: { recipe: Recipe; selected: b

 function CompactRow({ recipe, selected, selectMode }: { recipe: Recipe; selected: boolean; selectMode: boolean }) {
  const t = useTranslations("recipe");
+  const tBatch = useTranslations("batchCooking");
  const { locale } = useLocale();
  const totalMins = (recipe.prepMins ?? 0) + (recipe.cookMins ?? 0);
  const VisibilityIcon = VISIBILITY_ICON[recipe.visibility];
@@ -256,20 +257,26 @@ function CompactRow({ recipe, selected, selectMode }: { recipe: Recipe; selected
      <h3 className={cn("font-medium text-sm truncate flex-1 min-w-0", !selectMode && "group-hover:text-primary")}>
        {recipe.title}
      </h3>
-      <span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground shrink-0"><Users className="h-3 w-3" />{recipe.baseServings}</span>
+      {recipe.isBatchCook && recipe.dishCount ? (
+        <span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground shrink-0"><Utensils className="h-3 w-3" />{tBatch("dishCount", { count: recipe.dishCount })}</span>
+      ) : (
+        <span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground shrink-0"><Users className="h-3 w-3" />{recipe.baseServings}</span>
+      )}
      {totalMins > 0 && (
        <span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground shrink-0"><Clock className="h-3 w-3" />{t("total", { mins: totalMins })}</span>
      )}
-      {recipe.difficulty && (
-        <Badge variant={DIFFICULTY_COLOR[recipe.difficulty]} className="hidden sm:inline-flex text-xs h-4 px-1.5 shrink-0">{t(`difficulty.${recipe.difficulty}`)}</Badge>
-      )}
+      <span className="hidden sm:inline-flex w-16 shrink-0">
+        {recipe.difficulty && (
+          <Badge variant={DIFFICULTY_COLOR[recipe.difficulty]} className="text-xs h-4 px-1.5">{t(`difficulty.${recipe.difficulty}`)}</Badge>
+        )}
+      </span>
      <span className="hidden md:inline text-xs text-muted-foreground shrink-0 w-16 text-right">
        {recipe.updatedAt.toLocaleDateString(locale, { month: "short", day: "numeric" })}
      </span>
      {recipe.isBatchCook && (
        <TooltipProvider>
          <Tooltip>
-            <TooltipTrigger render={<span className="p-1.5 inline-flex shrink-0"><ChefHat className="h-3.5 w-3.5 text-primary" /></span>} />
+            <TooltipTrigger render={<span className="p-1.5 inline-flex shrink-0"><ChefHat className="h-3.5 w-3.5 text-muted-foreground" /></span>} />
            <TooltipContent>{t("batchCookBadge")}</TooltipContent>
          </Tooltip>
        </TooltipProvider>
@@ -27,7 +27,13 @@ function TagFilterInput({ value, onChange }: { value: string; onChange: (v: stri
    <input
      value={local}
      onChange={(e) => setLocal(e.target.value)}
-      onKeyDown={(e) => { if (e.key === "Enter") onChange(local); }}
+      onKeyDown={(e) => {
+        // Stop the dropdown menu's own keydown handling (roving focus / type-ahead
+        // search) from intercepting keystrokes meant for this plain text input.
+        e.stopPropagation();
+        if (e.key === "Enter") onChange(local);
+      }}
+      onClick={(e) => e.stopPropagation()}
      onBlur={() => onChange(local)}
      placeholder={t("filterByTag")}
      className="w-full h-7 px-2 text-sm rounded-md border border-input bg-background focus:outline-none focus:ring-1 focus:ring-ring"
@@ -217,6 +223,7 @@ export function RecipesHeader({
                {Object.entries(VISIBILITY_KEYS).map(([value, key]) => (
                  <DropdownMenuItem
                    key={value}
+                    closeOnClick={false}
                    onClick={() => pushParams({ visibility: value })}
                    className={cn(initialVisibility === value && "font-medium text-primary")}
                  >
@@ -230,6 +237,7 @@ export function RecipesHeader({
                {Object.entries(DIFFICULTY_KEYS).map(([value, key]) => (
                  <DropdownMenuItem
                    key={value}
+                    closeOnClick={false}
                    onClick={() => pushParams({ difficulty: value })}
                    className={cn(initialDifficulty === value && "font-medium text-primary")}
                  >
@@ -253,6 +261,7 @@ export function RecipesHeader({
                {Object.entries(BATCH_COOK_KEYS).map(([value, key]) => (
                  <DropdownMenuItem
                    key={value}
+                    closeOnClick={false}
                    onClick={() => pushParams({ batchCook: value })}
                    className={cn(initialBatchCook === value && "font-medium text-primary")}
                  >
@@ -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).
@@ -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> {
@@ -562,7 +562,7 @@
    "dietaryPrefsPlaceholder": "e.g. vegetarian, no shellfish",
    "anyDifficulty": "Any",
    "generate": "Generate",
-    "generating": "Generating… this can take a minute",
+    "generating": "Generating…",
    "generateSuccess": "Batch-cooking session created",
    "generateFailed": "Failed to generate"
  },
@@ -976,8 +976,8 @@
    "reactionFailed": "Échec de la mise à jour de la réaction",
    "addReaction": "Ajouter la réaction {type}",
    "removeReaction": "Retirer la réaction {type}",
-    "favoriteAdd": "Enregistrer la recette",
-    "favoriteRemove": "Retirer la recette des enregistrements"
+    "favoriteAdd": "Favoris",
+    "favoriteRemove": "Retirer des favoris"
  },
  "cookingMode": {
    "cooking": "En cuisine",
@@ -74,11 +74,13 @@ services:
        NEXT_PUBLIC_GITHUB_ENABLED: ${NEXT_PUBLIC_GITHUB_ENABLED}
        NEXT_PUBLIC_DISCORD_ENABLED: ${NEXT_PUBLIC_DISCORD_ENABLED}
        NEXT_PUBLIC_AUTHENTIK_ENABLED: ${NEXT_PUBLIC_AUTHENTIK_ENABLED}
+        STORAGE_PUBLIC_URL: ${STORAGE_PUBLIC_URL}
    restart: always
    environment:
      DATABASE_URL: postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@postgres:5432/${POSTGRES_DB}
      REDIS_URL: redis://:${REDIS_PASSWORD}@redis:6379
      STORAGE_ENDPOINT: http://minio:9000
+      STORAGE_PUBLIC_URL: ${STORAGE_PUBLIC_URL}
      STORAGE_ACCESS_KEY: ${MINIO_ROOT_USER}
      STORAGE_SECRET_KEY: ${MINIO_ROOT_PASSWORD}
      STORAGE_BUCKET: epicure-uploads