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 --- static/app.js | 129 ++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 108 insertions(+), 21 deletions(-) (limited to 'static/app.js') 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); -- cgit v1.3-2-g0d8e