feat: add quick tag field to recipe import page and maintain focus

- Added compact tag input next to Import Recipe button
- Tags are pre-selected before saving the imported recipe
- Shows selected tags with × removal buttons
- Input field with autocomplete from existing tags
- Tags are included when recipe is saved
- Both import and recipe detail pages now maintain focus in input after adding tag
- Press Enter to add multiple tags quickly without losing focus

packages/web/src/App.css

@@ -411,6 +411,43 @@ nav a:hover {
   opacity: 0.6;
 }
 
+/* Import Page Tag Management */
+.import-actions {
+  display: flex;
+  align-items: flex-start;
+  gap: 2rem;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+}
+
+.import-tags-inline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 300px;
+}
+
+.import-tags-inline > label {
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 0.95rem;
+}
+
+.import-tags-display {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2rem;
+}
+
+.import-tag-input {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
 .recipe-sections {
   margin-top: 2rem;
 }

packages/web/src/pages/RecipeDetail.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { Recipe, Cookbook, Tag } from '@basil/shared';
 import { recipesApi, cookbooksApi, tagsApi } from '../services/api';
@@ -19,6 +19,7 @@ function RecipeDetail() {
   const [availableTags, setAvailableTags] = useState<Tag[]>([]);
   const [tagInput, setTagInput] = useState('');
   const [savingTags, setSavingTags] = useState(false);
+  const tagInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (id) {
@@ -128,6 +129,8 @@ function RecipeDetail() {
     // Check if tag already exists on recipe
     if (recipe.tags?.includes(trimmedTag)) {
       setTagInput('');
+      // Keep focus in input field
+      setTimeout(() => tagInputRef.current?.focus(), 0);
       return;
     }
 
@@ -142,6 +145,9 @@ function RecipeDetail() {
 
       // Reload available tags to include newly created ones
       loadTags();
+
+      // Keep focus in input field
+      setTimeout(() => tagInputRef.current?.focus(), 0);
     } catch (err) {
       console.error('Failed to add tag:', err);
       alert('Failed to add tag');
@@ -265,6 +271,7 @@ function RecipeDetail() {
           </div>
           <div className="tag-input-inline">
             <input
+              ref={tagInputRef}
               type="text"
               value={tagInput}
               onChange={(e) => setTagInput(e.target.value)}

packages/web/src/pages/RecipeImport.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Recipe } from '@basil/shared';
-import { recipesApi } from '../services/api';
+import { Recipe, Tag } from '@basil/shared';
+import { recipesApi, tagsApi } from '../services/api';
 
 function RecipeImport() {
   const navigate = useNavigate();
@@ -10,6 +10,25 @@ function RecipeImport() {
   const [error, setError] = useState<string | null>(null);
   const [importedRecipe, setImportedRecipe] = useState<Partial<Recipe> | null>(null);
 
+  // Tag management
+  const [availableTags, setAvailableTags] = useState<Tag[]>([]);
+  const [tagInput, setTagInput] = useState('');
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const tagInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    loadTags();
+  }, []);
+
+  const loadTags = async () => {
+    try {
+      const response = await tagsApi.getAll();
+      setAvailableTags(response.data || []);
+    } catch (err) {
+      console.error('Failed to load tags:', err);
+    }
+  };
+
   const handleImport = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -36,12 +55,30 @@ function RecipeImport() {
     }
   };
 
+  const handleAddTag = () => {
+    const trimmedTag = tagInput.trim();
+    if (trimmedTag && !selectedTags.includes(trimmedTag)) {
+      setSelectedTags([...selectedTags, trimmedTag]);
+      setTagInput('');
+      // Keep focus in input field
+      setTimeout(() => tagInputRef.current?.focus(), 0);
+    }
+  };
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    setSelectedTags(selectedTags.filter(tag => tag !== tagToRemove));
+  };
+
   const handleSave = async () => {
     if (!importedRecipe) return;
 
     try {
       setLoading(true);
-      const response = await recipesApi.create(importedRecipe);
+      const recipeWithTags = {
+        ...importedRecipe,
+        tags: selectedTags.length > 0 ? selectedTags : undefined
+      };
+      const response = await recipesApi.create(recipeWithTags);
       if (response.data) {
         navigate(`/recipes/${response.data.id}`);
       }
@@ -70,9 +107,65 @@ function RecipeImport() {
           />
         </div>
 
-        <button type="submit" disabled={loading}>
-          {loading ? 'Importing...' : 'Import Recipe'}
-        </button>
+        <div className="import-actions">
+          <button type="submit" disabled={loading}>
+            {loading ? 'Importing...' : 'Import Recipe'}
+          </button>
+
+          <div className="import-tags-inline">
+            <label>Tags:</label>
+            <div className="import-tags-display">
+              {selectedTags.length > 0 ? (
+                selectedTags.map(tag => (
+                  <span key={tag} className="tag-chip-inline">
+                    {tag}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveTag(tag)}
+                      className="tag-remove-btn-inline"
+                      title="Remove tag"
+                    >
+                      ×
+                    </button>
+                  </span>
+                ))
+              ) : (
+                <span className="no-tags-inline">None</span>
+              )}
+            </div>
+            <div className="import-tag-input">
+              <input
+                ref={tagInputRef}
+                type="text"
+                value={tagInput}
+                onChange={(e) => setTagInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    handleAddTag();
+                  }
+                }}
+                placeholder="Add tag..."
+                list="import-available-tags"
+                className="tag-input-small"
+              />
+              <button
+                type="button"
+                onClick={handleAddTag}
+                disabled={!tagInput.trim()}
+                className="tag-add-btn-small"
+                title="Add tag"
+              >
+                +
+              </button>
+              <datalist id="import-available-tags">
+                {availableTags.map(tag => (
+                  <option key={tag.id} value={tag.name} />
+                ))}
+              </datalist>
+            </div>
+          </div>
+        </div>
       </form>
 
       {error && <div className="error">{error}</div>}