Update features and dependencies

apps/web/components/recipe/recipe-form.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef, KeyboardEvent } from "react";
 import { useRouter } from "next/navigation";
-import { Plus, Trash2, GripVertical } from "lucide-react";
+import { Plus, Trash2, GripVertical, X, Tag } from "lucide-react";
 import { toast } from "sonner";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
@@ -48,6 +48,7 @@ type RecipeFormProps = {
     prepMins?: number | null;
     cookMins?: number | null;
     dietaryTags?: DietaryTags;
+    tags?: string[];
     ingredients?: IngredientRow[];
     steps?: StepRow[];
     photos?: PhotoEntry[];
@@ -77,6 +78,9 @@ export function RecipeForm({ recipeId, defaultValues }: RecipeFormProps) {
   const [difficulty, setDifficulty] = useState<"easy" | "medium" | "hard" | "">(defaultValues?.difficulty ?? "");
   const [prepMins, setPrepMins] = useState(String(defaultValues?.prepMins ?? ""));
   const [cookMins, setCookMins] = useState(String(defaultValues?.cookMins ?? ""));
+  const [tags, setTags] = useState<string[]>(defaultValues?.tags ?? []);
+  const [tagInput, setTagInput] = useState("");
+  const tagInputRef = useRef<HTMLInputElement>(null);
   const [dietaryTags, setDietaryTags] = useState<DietaryTags>(defaultValues?.dietaryTags ?? {});
   const [ingredients, setIngredients] = useState<IngredientRow[]>(
     defaultValues?.ingredients?.length ? defaultValues.ingredients : [newIngredient()]
@@ -95,6 +99,26 @@ export function RecipeForm({ recipeId, defaultValues }: RecipeFormProps) {
     setIngredients((prev) => prev.filter((_, idx) => idx !== i));
   }
 
+  function addTag(raw: string) {
+    const tag = raw.trim().toLowerCase().slice(0, 50);
+    if (!tag || tags.includes(tag) || tags.length >= 20) return;
+    setTags((prev) => [...prev, tag]);
+    setTagInput("");
+  }
+
+  function removeTag(tag: string) {
+    setTags((prev) => prev.filter((t) => t !== tag));
+  }
+
+  function handleTagKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      addTag(tagInput);
+    } else if (e.key === "Backspace" && !tagInput && tags.length > 0) {
+      setTags((prev) => prev.slice(0, -1));
+    }
+  }
+
   function updateStep(i: number, patch: Partial<StepRow>) {
     setSteps((prev) => prev.map((row, idx) => idx === i ? { ...row, ...patch } : row));
   }
@@ -120,6 +144,7 @@ export function RecipeForm({ recipeId, defaultValues }: RecipeFormProps) {
         difficulty: difficulty || undefined,
         prepMins: prepMins ? parseInt(prepMins) : undefined,
         cookMins: cookMins ? parseInt(cookMins) : undefined,
+        tags,
         dietaryTags,
         ingredients: ingredients
           .filter((ing) => ing.rawName.trim())
@@ -252,6 +277,45 @@ export function RecipeForm({ recipeId, defaultValues }: RecipeFormProps) {
             <option value="public">{t_recipe("visibility.public")}</option>
           </select>
         </div>
+
+        {/* Tags */}
+        <div className="space-y-2">
+          <Label>Tags</Label>
+          <div
+            className="flex flex-wrap gap-1.5 min-h-[36px] rounded-lg border border-input bg-transparent px-2.5 py-1.5 cursor-text focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50"
+            onClick={() => tagInputRef.current?.focus()}
+          >
+            {tags.map((tag) => (
+              <span
+                key={tag}
+                className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs bg-muted text-muted-foreground"
+              >
+                <Tag className="h-2.5 w-2.5" />
+                {tag}
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); removeTag(tag); }}
+                  className="hover:text-foreground transition-colors"
+                  aria-label={`Remove tag ${tag}`}
+                >
+                  <X className="h-2.5 w-2.5" />
+                </button>
+              </span>
+            ))}
+            {tags.length < 20 && (
+              <input
+                ref={tagInputRef}
+                value={tagInput}
+                onChange={(e) => setTagInput(e.target.value)}
+                onKeyDown={handleTagKeyDown}
+                onBlur={() => { if (tagInput.trim()) addTag(tagInput); }}
+                placeholder={tags.length === 0 ? "Add tags… (press Enter)" : ""}
+                className="flex-1 min-w-[120px] bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+              />
+            )}
+          </div>
+          <p className="text-xs text-muted-foreground">Press Enter to add · Backspace to remove last · max 20 tags</p>
+        </div>
       </div>
 
       <Separator />