From 360eadf78fb001e947f3850603152adc413bb3a8 Mon Sep 17 00:00:00 2001 From: Tyler Hoang Date: Sat, 9 May 2026 02:31:10 -0700 Subject: Recipe detail page, menu revamp, and UX improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add recipe detail page (recipe.html) with full ingredients and instructions - Simplify menu tab: cards show name + description only, click through for full recipe - Add description field to Recipe model with DB migration - Add AI-generated descriptions to menu, swap, and import prompts - Add single dish by description (POST /api/menus/current/recipes) - Add grocery item delete without pantry add (DELETE /api/grocery/{id}/items) - Persist grocery checked state server-side (PATCH /api/grocery/{id}/check-item) - Hash-based tab routing — refresh stays on current tab - Logo branding in header and favicon - Dark theme fixes: URL/text inputs, amber accent, muted danger/warning colors - Markdown rendering in chat (bold, italic, code blocks, lists, headers) - Fix instruction step splitting for inline-numbered steps (1. 2. 3.) - Import recipe from URL with JSON-LD structured data + AI fallback Co-Authored-By: Claude Sonnet 4.6 --- main.py | 4 ++ models.py | 1 + requirements.txt | 2 + routers/grocery.py | 22 ++++++++ routers/menus.py | 68 ++++++++++++++++++++++- routers/recipes.py | 144 ++++++++++++++++++++++++++++++++++++++++++++++++- schemas.py | 3 ++ services/ai_service.py | 71 +++++++++++++++++++++++- static/app.js | 129 ++++++++++++++++++++++++++++++++++++-------- static/index.html | 12 ++++- static/logo.png | Bin 0 -> 1626778 bytes static/recipe.html | 68 +++++++++++++++++++++++ static/style.css | 74 ++++++++++++++++--------- 13 files changed, 545 insertions(+), 53 deletions(-) create mode 100644 static/logo.png create mode 100644 static/recipe.html diff --git a/main.py b/main.py index 65b8271..8bc2d4f 100644 --- a/main.py +++ b/main.py @@ -17,6 +17,10 @@ async def lifespan(app: FastAPI): if 'notes' not in [row[1] for row in result]: conn.execute(text("ALTER TABLE menu_plans ADD COLUMN notes TEXT")) conn.commit() + result = conn.execute(text("PRAGMA table_info(recipes)")) + if 'description' not in [row[1] for row in result]: + conn.execute(text("ALTER TABLE recipes ADD COLUMN description TEXT")) + conn.commit() yield # Shutdown pass diff --git a/models.py b/models.py index 9e78d65..4059e20 100644 --- a/models.py +++ b/models.py @@ -44,6 +44,7 @@ class Recipe(Base): id = Column(Integer, primary_key=True, autoincrement=True) name = Column(String, nullable=False) + description = Column(Text, nullable=True) meal_type = Column(String, nullable=False) ingredients = Column(Text, nullable=False) instructions = Column(Text, nullable=True) diff --git a/requirements.txt b/requirements.txt index c32f824..2162fcf 100644 --- a/requirements.txt +++ b/requirements.txt @@ -4,3 +4,5 @@ sqlalchemy==2.0.36 pydantic-settings==2.5.2 python-dotenv==1.0.1 ollama==0.3.3 +httpx==0.27.2 +beautifulsoup4==4.12.3 diff --git a/routers/grocery.py b/routers/grocery.py index cbc66bb..a74776d 100644 --- a/routers/grocery.py +++ b/routers/grocery.py @@ -211,6 +211,28 @@ async def mark_purchased(id: int, db: Session = Depends(get_db)): return GroceryListRead.from_orm(grocery_list) +@router.delete("/{id}/items") +async def delete_grocery_item(id: int, request: dict = Body(...), db: Session = Depends(get_db)): + """Remove a single item from a grocery list by name.""" + grocery_list = db.query(GroceryList).filter(GroceryList.id == id).first() + if not grocery_list: + raise HTTPException(status_code=404, detail="Grocery list not found") + + item_name = request.get("name") + if not item_name: + raise HTTPException(status_code=400, detail="Item name is required") + + try: + items = json.loads(grocery_list.items) + except json.JSONDecodeError: + items = [] + + items = [i for i in items if not (isinstance(i, dict) and i.get("name") == item_name)] + grocery_list.items = json.dumps(items) + db.commit() + return {"status": "ok"} + + @ai_router.post("/suggest-recipe") async def suggest_recipe_endpoint(db: Session = Depends(get_db)): """Suggest a recipe based on current pantry.""" diff --git a/routers/menus.py b/routers/menus.py index 9ec1d1d..db56d73 100644 --- a/routers/menus.py +++ b/routers/menus.py @@ -4,7 +4,7 @@ from datetime import datetime, timedelta, date import json from database import get_db -from schemas import MenuPlanRead +from schemas import MenuPlanRead, RecipeRead from models import MenuPlan, Recipe from services import pantry_service, ai_service from config import settings @@ -78,6 +78,7 @@ async def generate_menu(request: dict = None, db: Session = Depends(get_db)): estimated_time_minutes=recipe_data.get("time_minutes", 30), servings=recipe_data.get("serves", 2), source="ai", + description=recipe_data.get("description", ""), ) db.add(new_recipe) db.flush() @@ -234,6 +235,71 @@ async def swap_recipe_in_menu(recipe_id: int, request: dict = Body(default={}), } +@router.post("/current/recipes") +async def add_recipe_to_menu(request: dict = Body(default={}), db: Session = Depends(get_db)): + """Generate and add a single recipe by description.""" + description = (request.get("description") or "").strip() + if not description: + raise HTTPException(status_code=400, detail="Description is required") + + monday = _current_monday() + menu_plan = db.query(MenuPlan).filter(MenuPlan.week_start == monday).first() + + # Get existing recipe names to avoid duplicates + existing_names = [] + if menu_plan: + try: + plan_ids = json.loads(menu_plan.plan) + existing = db.query(Recipe).filter(Recipe.id.in_(plan_ids)).all() if plan_ids else [] + existing_names = [r.name for r in existing] + except Exception: + pass + + pantry_context = pantry_service.build_pantry_context(db) + + try: + result = await ai_service.generate_single_recipe(description, existing_names, pantry_context) + except ValueError as e: + raise HTTPException(status_code=503, detail=str(e)) + except Exception as e: + raise HTTPException(status_code=503, detail=f"Ollama error: {str(e)}") + + recipe_data = result.get("recipe", {}) + if not recipe_data.get("name"): + raise HTTPException(status_code=503, detail="AI returned invalid recipe") + + new_recipe = Recipe( + name=recipe_data["name"], + description=recipe_data.get("description", ""), + meal_type=recipe_data.get("meal_type", "dinner"), + ingredients=json.dumps(recipe_data.get("ingredients", [])), + instructions=recipe_data.get("instructions", ""), + estimated_time_minutes=recipe_data.get("time_minutes"), + servings=recipe_data.get("serves", 2), + source="ai", + ) + db.add(new_recipe) + db.flush() + + if menu_plan: + try: + plan_ids = json.loads(menu_plan.plan) + except Exception: + plan_ids = [] + plan_ids.append(new_recipe.id) + menu_plan.plan = json.dumps(plan_ids) + else: + menu_plan = MenuPlan( + week_start=monday, + plan=json.dumps([new_recipe.id]), + ) + db.add(menu_plan) + + db.commit() + db.refresh(new_recipe) + return {"recipe": RecipeRead.from_orm(new_recipe)} + + @router.delete("/{id}") async def delete_menu(id: int, db: Session = Depends(get_db)): """Delete a menu plan.""" diff --git a/routers/recipes.py b/routers/recipes.py index f215062..000f945 100644 --- a/routers/recipes.py +++ b/routers/recipes.py @@ -1,14 +1,24 @@ -from fastapi import APIRouter, Depends, HTTPException, Query, status +from fastapi import APIRouter, Depends, HTTPException, Query, status, Body from sqlalchemy.orm import Session from typing import List +import httpx +import json +from datetime import datetime, timedelta +from bs4 import BeautifulSoup from database import get_db -from models import Recipe +from models import Recipe, MenuPlan from schemas import RecipeCreate, RecipeRead, RecipeUpdate +from services import ai_service router = APIRouter(prefix="/api/recipes", tags=["recipes"]) +def _current_monday(): + today = datetime.utcnow().date() + return today - timedelta(days=today.weekday()) + + @router.get("", response_model=List[RecipeRead]) def list_recipes(meal_type: str = Query(None), db: Session = Depends(get_db)): """List all recipes. Optional ?meal_type=dinner.""" @@ -48,3 +58,133 @@ def delete_recipe(id: int, db: Session = Depends(get_db)): db.delete(recipe) db.commit() + + +@router.post("/import") +async def import_recipe(request: dict = Body(default={}), db: Session = Depends(get_db)): + """Import a recipe from a URL.""" + url = (request.get("url") or "").strip() + if not url: + raise HTTPException(status_code=400, detail="URL is required") + + # Fetch the page + try: + async with httpx.AsyncClient(timeout=15, follow_redirects=True) as client: + resp = await client.get(url, headers={"User-Agent": "Mozilla/5.0"}) + resp.raise_for_status() + except Exception as e: + raise HTTPException(status_code=400, detail=f"Could not fetch URL: {e}") + + soup = BeautifulSoup(resp.text, "html.parser") + recipe_data = None + + # Try JSON-LD structured data first + for script in soup.find_all("script", type="application/ld+json"): + try: + ld = json.loads(script.string or "") + # Handle @graph wrapper + if isinstance(ld, dict) and ld.get("@graph"): + ld = next((x for x in ld["@graph"] if x.get("@type") == "Recipe"), None) + if isinstance(ld, list): + ld = next((x for x in ld if x.get("@type") == "Recipe"), None) + if isinstance(ld, dict) and ld.get("@type") == "Recipe": + recipe_data = ld + break + except Exception: + continue + + if recipe_data: + # Map JSON-LD Recipe schema to our format + def parse_duration(iso): + if not iso: + return None + import re + m = re.search(r'(\d+)M', iso) + h = re.search(r'(\d+)H', iso) + return (int(h.group(1)) * 60 if h else 0) + (int(m.group(1)) if m else 0) + + raw_ingredients = recipe_data.get("recipeIngredient") or [] + ingredients = [{"name": ing, "quantity": 1.0, "unit": ""} for ing in raw_ingredients] + + raw_instructions = recipe_data.get("recipeInstructions") or [] + if isinstance(raw_instructions, list): + steps = [] + for step in raw_instructions: + if isinstance(step, dict): + steps.append(step.get("text", "")) + else: + steps.append(str(step)) + instructions = " ".join(steps) + else: + instructions = str(raw_instructions) + + name = recipe_data.get("name") or "Imported Recipe" + time_minutes = parse_duration(recipe_data.get("totalTime") or recipe_data.get("cookTime")) + serves_raw = recipe_data.get("recipeYield") + if isinstance(serves_raw, list): + serves_raw = serves_raw[0] + try: + serves = int(str(serves_raw).split()[0]) if serves_raw else 2 + except Exception: + serves = 2 + + recipe_category = str(recipe_data.get("recipeCategory") or "").lower() + if "breakfast" in recipe_category or "brunch" in recipe_category: + meal_type = "breakfast" + elif "lunch" in recipe_category or "salad" in recipe_category or "sandwich" in recipe_category: + meal_type = "lunch" + else: + meal_type = "dinner" + + parsed = { + "name": name, + "meal_type": meal_type, + "ingredients": ingredients, + "instructions": instructions, + "time_minutes": time_minutes, + "serves": serves, + } + else: + # Fall back to AI parsing of visible text + text = soup.get_text(separator=" ", strip=True) + try: + result = await ai_service.parse_recipe_from_text(text) + except Exception as e: + raise HTTPException(status_code=503, detail=f"AI parsing failed: {e}") + parsed = result.get("recipe", {}) + + # Save recipe to DB + db_recipe = Recipe( + name=parsed.get("name", "Imported Recipe"), + meal_type=parsed.get("meal_type", "dinner"), + ingredients=json.dumps(parsed.get("ingredients", [])), + instructions=parsed.get("instructions", ""), + estimated_time_minutes=parsed.get("time_minutes"), + servings=parsed.get("serves", 2), + source="import", + description=parsed.get("description", ""), + ) + db.add(db_recipe) + db.commit() + db.refresh(db_recipe) + + # Add to current week's menu plan + monday = _current_monday() + menu_plan = db.query(MenuPlan).filter(MenuPlan.week_start == monday).first() + if menu_plan: + try: + plan_ids = json.loads(menu_plan.plan) + except Exception: + plan_ids = [] + plan_ids.append(db_recipe.id) + menu_plan.plan = json.dumps(plan_ids) + db.commit() + else: + menu_plan = MenuPlan( + week_start=monday, + plan=json.dumps([db_recipe.id]), + ) + db.add(menu_plan) + db.commit() + + return {"recipe": RecipeRead.from_orm(db_recipe)} diff --git a/schemas.py b/schemas.py index b21c1f0..e6d926f 100644 --- a/schemas.py +++ b/schemas.py @@ -95,6 +95,7 @@ class RecipeCreate(BaseModel): estimated_time_minutes: Optional[int] = None servings: int = 2 source: str = "ai" + description: Optional[str] = None class RecipeRead(BaseModel): @@ -107,6 +108,7 @@ class RecipeRead(BaseModel): servings: int source: str created_at: datetime + description: Optional[str] = None model_config = ConfigDict(from_attributes=True) @@ -119,6 +121,7 @@ class RecipeUpdate(BaseModel): estimated_time_minutes: Optional[int] = None servings: Optional[int] = None source: Optional[str] = None + description: Optional[str] = None # MenuPlan Schemas diff --git a/services/ai_service.py b/services/ai_service.py index f128b4a..4b54c15 100644 --- a/services/ai_service.py +++ b/services/ai_service.py @@ -50,7 +50,8 @@ Respond ONLY with this JSON structure: "name": "...", "meal_type": "breakfast", "ingredients": [{{"name": "...", "quantity": 1.0, "unit": "cup"}}], - "instructions": "Step 1... Step 2...", + "description": "1-2 sentence description of the dish's flavor and appeal", + "instructions": "1. ... 2. ... (4-8 numbered steps, 1-2 sentences each)", "time_minutes": 20, "serves": 2 }} @@ -204,7 +205,8 @@ Respond ONLY with this JSON: "name": "...", "meal_type": "{meal_type}", "ingredients": [{{"name": "...", "quantity": 1.0, "unit": "cup"}}], - "instructions": "Step 1... Step 2...", + "description": "1-2 sentence description of the dish's flavor and appeal", + "instructions": "1. ... 2. ... (4-8 numbered steps, 1-2 sentences each)", "time_minutes": 30, "serves": 2 }} @@ -262,3 +264,68 @@ Be conversational, helpful, and concise. Reference specific ingredients and reci loop = asyncio.get_running_loop() return await loop.run_in_executor(None, lambda: _chat_sync(messages, json_format=False)) + + +async def parse_recipe_from_text(text: str) -> dict: + """Ask Ollama to parse unstructured recipe text into our standard recipe schema.""" + user_message = f"""Parse this recipe text and extract structured data. + +RECIPE TEXT: +{text[:4000]} + +Respond ONLY with this JSON: +{{ + "recipe": {{ + "name": "...", + "meal_type": "dinner", + "ingredients": [{{"name": "...", "quantity": 1.0, "unit": "cup"}}], + "description": "1-2 sentence description of the dish's flavor and appeal", + "instructions": "1. ... 2. ... (4-8 numbered steps, 1-2 sentences each)", + "time_minutes": 30, + "serves": 2 + }} +}} +meal_type must be one of: breakfast, lunch, dinner, snack""" + + messages = [ + {"role": "system", "content": settings.system_prompt}, + {"role": "user", "content": user_message}, + ] + return await _chat(messages) + + +async def generate_single_recipe(description: str, existing_names: list, pantry_context: dict) -> dict: + """Generate one recipe matching a user description.""" + user_message = f"""Suggest ONE recipe based on this description: "{description}" + +CURRENT PANTRY: +{json.dumps(pantry_context["available_ingredients"], indent=2)} + +ALREADY IN PLAN (do not suggest these): +{json.dumps(existing_names, indent=2)} + +GUIDELINES: +- Match the description as closely as possible +- Do NOT limit yourself to only pantry ingredients +- Under 60 minutes +- Must not be any dish already in the plan + +Respond ONLY with this JSON: +{{ + "recipe": {{ + "name": "...", + "description": "1-2 sentence description of the dish's flavor and appeal", + "meal_type": "dinner", + "ingredients": [{{"name": "...", "quantity": 1.0, "unit": "cup"}}], + "instructions": "1. ... 2. ... (4-8 numbered steps, 1-2 sentences each)", + "time_minutes": 30, + "serves": 2 + }} +}} +meal_type must be one of: breakfast, lunch, dinner, snack""" + + messages = [ + {"role": "system", "content": settings.system_prompt}, + {"role": "user", "content": user_message}, + ] + return await _chat(messages) diff --git a/static/app.js b/static/app.js index 724e565..3135aa9 100644 --- a/static/app.js +++ b/static/app.js @@ -100,19 +100,17 @@ function autoCategory(name) { // ── Tab Switching ────────────────────────────────────────────────────────── function switchTab(tabName) { state.activeTab = tabName; + location.hash = tabName; - // Update button states document.querySelectorAll('.tab-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.tab === tabName); }); - // Update content visibility document.querySelectorAll('.tab-content').forEach(content => { content.classList.toggle('hidden', content.id !== `tab-${tabName}`); content.classList.toggle('active', content.id === `tab-${tabName}`); }); - // Load tab content if (tabName === 'pantry') loadPantry(); else if (tabName === 'meals') loadMeals(); else if (tabName === 'menu') loadMenu(); @@ -394,33 +392,21 @@ function renderRecipeList(recipes) { } list.innerHTML = recipes.map(recipe => { - let ingredients = recipe.ingredients || []; - if (typeof ingredients === 'string') { - try { ingredients = JSON.parse(ingredients); } catch { ingredients = []; } - } - - const ingredientText = Array.isArray(ingredients) - ? ingredients.map(i => { - if (typeof i === 'string') return i; - return [i.quantity, i.unit, i.name].filter(Boolean).join(' '); - }).join(', ') - : ''; - const mealType = recipe.meal_type || 'dinner'; const typeDisplay = mealType.charAt(0).toUpperCase() + mealType.slice(1); const time = recipe.time_minutes || recipe.estimated_time_minutes; const serves = recipe.serves || recipe.servings; const meta = [time ? `${time} min` : '', serves ? `serves ${serves}` : ''].filter(Boolean).join(' · '); + const description = recipe.description || ''; return `
-
${recipe.name}
+ ${recipe.name} ${typeDisplay}
${meta ? `
${meta}
` : ''} - ${ingredientText ? `
Ingredients: ${ingredientText}
` : ''} - ${recipe.instructions ? `
${recipe.instructions}
` : ''} + ${description ? `
${description}
` : ''}
@@ -550,6 +536,48 @@ async function makeThisMeal(mealName, mealType) { } } +async function importRecipe() { + const input = document.getElementById('import-url-input'); + const btn = document.getElementById('btn-import-recipe'); + const url = input.value.trim(); + if (!url) { showToast('Paste a recipe URL first', 'error'); return; } + + btn.disabled = true; + btn.textContent = 'Importing…'; + try { + const res = await api('POST', '/recipes/import', { url }); + input.value = ''; + showToast(`Imported: ${res.recipe.name}`); + await loadMenu(); + } catch (err) { + showToast('Import failed: ' + err.message, 'error'); + } finally { + btn.disabled = false; + btn.textContent = 'Import'; + } +} + +async function addSingleDish() { + const input = document.getElementById('add-dish-input'); + const btn = document.getElementById('btn-add-dish'); + const description = input.value.trim(); + if (!description) { showToast('Describe a dish first', 'error'); return; } + + btn.disabled = true; + btn.textContent = 'Adding…'; + try { + const res = await api('POST', '/menus/current/recipes', { description }); + input.value = ''; + showToast(`Added: ${res.recipe.name}`); + await loadMenu(); + } catch (err) { + showToast('Failed: ' + err.message, 'error'); + } finally { + btn.disabled = false; + btn.textContent = 'Add Dish'; + } +} + // ── Grocery Tab ──────────────────────────────────────────────────────────── async function loadGrocery() { try { @@ -643,6 +671,7 @@ function renderGroceryList() { ${usedIn ? ` - Used in: ${usedIn}` : ''}
+ `; }).join('')} @@ -759,11 +788,67 @@ async function markPurchased() { } } +async function deleteGroceryItem(name) { + if (!state.currentGroceryId) return; + try { + await api('DELETE', `/grocery/${state.currentGroceryId}/items`, { name }); + // Remove from local state and re-render + const parsed = JSON.parse(state.currentGrocery.grocery_list?.items || state.currentGrocery.items || '[]'); + const updated = parsed.filter(i => i.name !== name); + if (state.currentGrocery.grocery_list) { + state.currentGrocery.grocery_list.items = JSON.stringify(updated); + } else { + state.currentGrocery.items = JSON.stringify(updated); + } + renderGroceryList(); + } catch (err) { + showToast('Failed to remove item: ' + err.message, 'error'); + } +} + // ── Chat Tab ─────────────────────────────────────────────────────────────── function loadChat() { renderChat(); } +function renderMarkdown(text) { + // Escape HTML first + let html = text.replace(/&/g, '&').replace(//g, '>'); + + // Fenced code blocks + html = html.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) => + `
${code.trim()}
` + ); + + // Inline code + html = html.replace(/`([^`]+)`/g, '$1'); + + // Bold + italic + html = html.replace(/\*\*\*(.+?)\*\*\*/g, '$1'); + // Bold + html = html.replace(/\*\*(.+?)\*\*/g, '$1'); + // Italic + html = html.replace(/\*(.+?)\*/g, '$1'); + + // Headers (## and ###) + html = html.replace(/^### (.+)$/gm, '

$1

'); + html = html.replace(/^## (.+)$/gm, '

$1

'); + + // Unordered lists + html = html.replace(/^[-*] (.+)$/gm, '
  • $1
    • '); + html = html.replace(/(
  • .*<\/li>)/s, '
      $1
    '); + + // Numbered lists + html = html.replace(/^\d+\. (.+)$/gm, '
  • $1
    • '); + + // Paragraphs — double newlines + html = html.replace(/\n\n+/g, '

    '); + // Single newlines outside block elements + html = html.replace(/\n/g, '
    '); + + return `

    ${html}

    `; +} + function renderChat() { const messagesDiv = document.getElementById('chat-messages'); if (state.chatHistory.length === 0) { @@ -773,7 +858,7 @@ function renderChat() { messagesDiv.innerHTML = state.chatHistory.map(msg => `
    -
    ${msg.content.replace(/\n/g, '
    ')}
    +
    ${msg.role === 'assistant' ? renderMarkdown(msg.content) : msg.content.replace(/&/g, '&').replace(//g, '>').replace(/\n/g, '
    ')}
    `).join(''); @@ -925,8 +1010,10 @@ async function init() { } }); - // Load initial tab - await loadPantry(); + // Load initial tab from URL hash, defaulting to pantry + const validTabs = ['pantry', 'meals', 'menu', 'grocery', 'chat']; + const hashTab = location.hash.slice(1); + switchTab(validTabs.includes(hashTab) ? hashTab : 'pantry'); } document.addEventListener('DOMContentLoaded', init); diff --git a/static/index.html b/static/index.html index ae36a4f..7db0a86 100644 --- a/static/index.html +++ b/static/index.html @@ -5,11 +5,11 @@ Commis - +
    -
    🔪 Commis
    +
    CommisCommis
    Checking...
    @@ -90,6 +90,14 @@ +
    + + +
    +
    + + +
    diff --git a/static/logo.png b/static/logo.png new file mode 100644 index 0000000..e20d8e1 Binary files /dev/null and b/static/logo.png differ diff --git a/static/recipe.html b/static/recipe.html new file mode 100644 index 0000000..2a5614f --- /dev/null +++ b/static/recipe.html @@ -0,0 +1,68 @@ + + + + + + Recipe — Commis + + + + +
    +
    CommisCommis
    +
    +
    + ← Back to Menu +

    Loading…

    +
    + + + diff --git a/static/style.css b/static/style.css index c530839..4395e88 100644 --- a/static/style.css +++ b/static/style.css @@ -1,15 +1,15 @@ :root { - --bg: #0f1117; - --surface: #1a1d27; - --surface2: #252836; - --border: #2e3148; - --accent: #6c63ff; - --accent-hover: #8b84ff; + --bg: #0b0b0a; + --surface: #141412; + --surface2: #1e1e1b; + --border: #2a2a26; + --accent: #c07d0a; + --accent-hover: #a56a08; --text: #e2e8f0; --text-muted: #94a3b8; - --success: #22c55e; - --warning: #f59e0b; - --danger: #ef4444; + --success: #1ea34e; + --warning: #d4783a; + --danger: #b03030; --info: #3b82f6; } @@ -190,6 +190,24 @@ main { transition: border-color 0.2s ease; } +input[type="url"], +input[type="text"] { + padding: 0.75rem; + background-color: var(--surface2); + border: 1px solid var(--border); + border-radius: 0.375rem; + color: var(--text); + font-size: 0.9rem; + transition: border-color 0.2s ease; +} + +input[type="url"]:focus, +input[type="text"]:focus { + outline: none; + border-color: var(--accent); + background-color: rgba(108, 99, 255, 0.05); +} + .form-group input:focus, .form-group select:focus { outline: none; @@ -385,12 +403,6 @@ tbody tr:hover { gap: 0.5rem; } -.recipe-card-title { - font-weight: 600; - font-size: 1rem; - color: var(--text); -} - .recipe-type-badge { font-size: 0.7rem; padding: 0.2rem 0.6rem; @@ -410,20 +422,23 @@ tbody tr:hover { color: var(--text-muted); } -.recipe-card-ingredients { - font-size: 0.85rem; +.recipe-description { color: var(--text-muted); + font-size: 0.9rem; + margin: 0.25rem 0 0.5rem; line-height: 1.5; } -.recipe-card-instructions { - font-size: 0.85rem; +.recipe-card-title { color: var(--text); - line-height: 1.6; - border-top: 1px solid var(--border); - padding-top: 0.5rem; - margin-top: 0.25rem; - white-space: pre-line; + text-decoration: none; + font-weight: 600; + font-size: 1.05rem; +} + +.recipe-card-title:hover { + color: var(--accent); + text-decoration: underline; } .recipe-card .btn { @@ -454,7 +469,7 @@ tbody tr:hover { .grocery-item { display: flex; - align-items: flex-start; + align-items: center; gap: 1rem; padding: 0.75rem; background-color: rgba(255, 255, 255, 0.01); @@ -943,6 +958,15 @@ tbody tr:hover { border-bottom-left-radius: 0.25rem; } +.chat-bubble p { margin: 0 0 0.5rem; } +.chat-bubble p:last-child { margin-bottom: 0; } +.chat-bubble h3, .chat-bubble h4 { margin: 0.75rem 0 0.25rem; font-size: 0.95rem; } +.chat-bubble ul { padding-left: 1.25rem; margin: 0.25rem 0; } +.chat-bubble li { margin-bottom: 0.15rem; } +.chat-bubble code { background: rgba(0,0,0,0.3); padding: 0.1rem 0.35rem; border-radius: 0.25rem; font-size: 0.85rem; font-family: monospace; } +.chat-bubble pre { background: rgba(0,0,0,0.4); padding: 0.75rem; border-radius: 0.375rem; overflow-x: auto; margin: 0.5rem 0; } +.chat-bubble pre code { background: none; padding: 0; font-size: 0.82rem; } + .chat-typing-indicator { color: var(--text-muted); font-style: italic; -- cgit v1.3-2-g0d8e