feat: add quick tag management to recipe detail view

- Added inline tag editing directly on recipe view page
- Tags display with × button for instant removal
- Input field with autocomplete for adding new tags
- All changes save immediately without form submission
- No need to navigate to edit page just to manage tags
- Maintains existing tag management in edit screen
- Shows saving indicator during operations
- Minimal clicks for quick tag management

packages/web/src/App.css

@@ -288,6 +288,148 @@ nav a:hover {
   white-space: nowrap;
 }
 
+/* Quick Tag Management */
+.quick-tags-section {
+  background: var(--bg-tertiary);
+  border: 2px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1.25rem;
+  margin: 1.5rem 0;
+}
+
+.quick-tags-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.quick-tags-header h3 {
+  color: var(--brand-primary);
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.saving-indicator {
+  font-size: 0.85rem;
+  color: var(--brand-primary);
+  font-style: italic;
+}
+
+.quick-tags-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.tags-display {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  min-height: 2rem;
+  align-items: center;
+}
+
+.tag-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background-color: var(--brand-light);
+  color: var(--brand-primary);
+  border-radius: 16px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.tag-chip:hover {
+  background-color: #d4e8c9;
+}
+
+.tag-remove-btn {
+  background: none;
+  border: none;
+  color: var(--brand-primary);
+  font-size: 1.3rem;
+  font-weight: bold;
+  cursor: pointer;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: background-color 0.2s;
+  line-height: 1;
+}
+
+.tag-remove-btn:hover:not(:disabled) {
+  background-color: rgba(46, 125, 50, 0.2);
+}
+
+.tag-remove-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.no-tags {
+  color: var(--text-secondary);
+  font-style: italic;
+  font-size: 0.9rem;
+}
+
+.tag-input-container {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.tag-input {
+  flex: 1;
+  padding: 0.6rem 0.75rem;
+  border: 2px solid var(--border-color);
+  border-radius: 6px;
+  font-size: 0.95rem;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: border-color 0.2s;
+}
+
+.tag-input:focus {
+  outline: none;
+  border-color: var(--brand-primary);
+}
+
+.tag-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.tag-add-btn {
+  background-color: var(--brand-primary);
+  color: white;
+  border: none;
+  padding: 0.6rem 1.25rem;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  white-space: nowrap;
+}
+
+.tag-add-btn:hover:not(:disabled) {
+  background-color: var(--brand-secondary);
+}
+
+.tag-add-btn:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 .recipe-sections {
   margin-top: 2rem;
 }

packages/web/src/pages/RecipeDetail.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Recipe, Cookbook } from '@basil/shared';
-import { recipesApi, cookbooksApi } from '../services/api';
+import { Recipe, Cookbook, Tag } from '@basil/shared';
+import { recipesApi, cookbooksApi, tagsApi } from '../services/api';
 import { scaleIngredientString } from '../utils/ingredientParser';
 
 function RecipeDetail() {
@@ -15,12 +15,27 @@ function RecipeDetail() {
   const [cookbooks, setCookbooks] = useState<Cookbook[]>([]);
   const [loadingCookbooks, setLoadingCookbooks] = useState(false);
 
+  // Quick tag management
+  const [availableTags, setAvailableTags] = useState<Tag[]>([]);
+  const [tagInput, setTagInput] = useState('');
+  const [savingTags, setSavingTags] = useState(false);
+
   useEffect(() => {
     if (id) {
       loadRecipe(id);
     }
+    loadTags();
   }, [id]);
 
+  const loadTags = async () => {
+    try {
+      const response = await tagsApi.getAll();
+      setAvailableTags(response.data || []);
+    } catch (err) {
+      console.error('Failed to load tags:', err);
+    }
+  };
+
   const loadRecipe = async (recipeId: string) => {
     try {
       setLoading(true);
@@ -105,6 +120,54 @@ function RecipeDetail() {
     }
   };
 
+  const handleAddTag = async () => {
+    if (!id || !recipe || !tagInput.trim()) return;
+
+    const trimmedTag = tagInput.trim();
+
+    // Check if tag already exists on recipe
+    if (recipe.tags?.includes(trimmedTag)) {
+      setTagInput('');
+      return;
+    }
+
+    try {
+      setSavingTags(true);
+      const updatedTags = [...(recipe.tags || []), trimmedTag];
+      await recipesApi.update(id, { tags: updatedTags });
+
+      // Update local state
+      setRecipe({ ...recipe, tags: updatedTags });
+      setTagInput('');
+
+      // Reload available tags to include newly created ones
+      loadTags();
+    } catch (err) {
+      console.error('Failed to add tag:', err);
+      alert('Failed to add tag');
+    } finally {
+      setSavingTags(false);
+    }
+  };
+
+  const handleRemoveTag = async (tagToRemove: string) => {
+    if (!id || !recipe) return;
+
+    try {
+      setSavingTags(true);
+      const updatedTags = recipe.tags?.filter(tag => tag !== tagToRemove) || [];
+      await recipesApi.update(id, { tags: updatedTags });
+
+      // Update local state
+      setRecipe({ ...recipe, tags: updatedTags });
+    } catch (err) {
+      console.error('Failed to remove tag:', err);
+      alert('Failed to remove tag');
+    } finally {
+      setSavingTags(false);
+    }
+  };
+
   if (loading) {
     return <div className="loading">Loading recipe...</div>;
   }
@@ -179,6 +242,65 @@ function RecipeDetail() {
         )}
       </div>
 
+      {/* Quick Tag Management */}
+      <div className="quick-tags-section">
+        <div className="quick-tags-header">
+          <h3>Tags</h3>
+          {savingTags && <span className="saving-indicator">Saving...</span>}
+        </div>
+        <div className="quick-tags-content">
+          <div className="tags-display">
+            {recipe.tags && recipe.tags.length > 0 ? (
+              recipe.tags.map(tag => (
+                <span key={tag} className="tag-chip">
+                  {tag}
+                  <button
+                    onClick={() => handleRemoveTag(tag)}
+                    disabled={savingTags}
+                    className="tag-remove-btn"
+                    title="Remove tag"
+                  >
+                    ×
+                  </button>
+                </span>
+              ))
+            ) : (
+              <span className="no-tags">No tags yet. Add one below!</span>
+            )}
+          </div>
+          <div className="tag-input-container">
+            <input
+              type="text"
+              value={tagInput}
+              onChange={(e) => setTagInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  handleAddTag();
+                }
+              }}
+              placeholder="Add a tag..."
+              disabled={savingTags}
+              list="available-tags-quick"
+              className="tag-input"
+            />
+            <button
+              onClick={handleAddTag}
+              disabled={savingTags || !tagInput.trim()}
+              className="tag-add-btn"
+              title="Add tag"
+            >
+              + Add
+            </button>
+            <datalist id="available-tags-quick">
+              {availableTags.map(tag => (
+                <option key={tag.id} value={tag.name} />
+              ))}
+            </datalist>
+          </div>
+        </div>
+      </div>
+
       {recipe.sourceUrl && (
         <p>
           <strong>Source: </strong>