From 360eadf78fb001e947f3850603152adc413bb3a8 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
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 <noreply@anthropic.com>
---
 static/app.js      | 129 ++++++++++++++++++++++++++++++++++++++++++++---------
 static/index.html  |  12 ++++-
 static/logo.png    | Bin 0 -> 1626778 bytes
 static/recipe.html |  68 ++++++++++++++++++++++++++++
 static/style.css   |  74 +++++++++++++++++++-----------
 5 files changed, 235 insertions(+), 48 deletions(-)
 create mode 100644 static/logo.png
 create mode 100644 static/recipe.html

(limited to 'static')

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 `
       <div class="recipe-card">
         <div class="recipe-card-header">
-          <div class="recipe-card-title">${recipe.name}</div>
+          <a class="recipe-card-title" href="/recipe.html?id=${recipe.id}">${recipe.name}</a>
           <span class="recipe-type-badge ${mealType}">${typeDisplay}</span>
         </div>
         ${meta ? `<div class="recipe-card-meta">${meta}</div>` : ''}
-        ${ingredientText ? `<div class="recipe-card-ingredients"><strong>Ingredients:</strong> ${ingredientText}</div>` : ''}
-        ${recipe.instructions ? `<div class="recipe-card-instructions">${recipe.instructions}</div>` : ''}
+        ${description ? `<div class="recipe-description">${description}</div>` : ''}
         <div class="recipe-card-actions">
           <button class="btn btn-sm btn-primary" onclick="makeThisMeal('${recipe.name.replace(/'/g, "\\'")}', '${mealType}')">Make This</button>
           <button class="btn btn-sm btn-secondary" onclick="swapRecipe(${recipe.id}, '${mealType}', this)">Swap</button>
@@ -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}` : ''}
               </div>
             </div>
+            <button class="btn btn-sm btn-danger" style="padding:0.1rem 0.4rem;font-size:0.75rem;" onclick="deleteGroceryItem('${item.name.replace(/'/g, "\\'")}')">×</button>
           </div>
         `;
       }).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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+  // Fenced code blocks
+  html = html.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) =>
+    `<pre><code>${code.trim()}</code></pre>`
+  );
+
+  // Inline code
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  // Bold + italic
+  html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+  // Bold
+  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  // Italic
+  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+
+  // Headers (## and ###)
+  html = html.replace(/^### (.+)$/gm, '<h4>$1</h4>');
+  html = html.replace(/^## (.+)$/gm, '<h3>$1</h3>');
+
+  // Unordered lists
+  html = html.replace(/^[-*] (.+)$/gm, '<li>$1</li>');
+  html = html.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
+
+  // Numbered lists
+  html = html.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
+
+  // Paragraphs — double newlines
+  html = html.replace(/\n\n+/g, '</p><p>');
+  // Single newlines outside block elements
+  html = html.replace(/\n/g, '<br>');
+
+  return `<p>${html}</p>`;
+}
+
 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 => `
     <div class="chat-message chat-message-${msg.role}">
-      <div class="chat-bubble">${msg.content.replace(/\n/g, '<br>')}</div>
+      <div class="chat-bubble">${msg.role === 'assistant' ? renderMarkdown(msg.content) : msg.content.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</div>
     </div>
   `).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 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Commis</title>
   <link rel="stylesheet" href="style.css">
-  <link rel="icon" href="favicon.svg" type="image/svg+xml">
+  <link rel="icon" href="logo.png" type="image/png">
 </head>
 <body>
   <header>
-    <div class="header-title">🔪 Commis</div>
+    <div class="header-title"><img src="logo.png" alt="Commis" style="height:32px;width:32px;object-fit:contain;vertical-align:middle;margin-right:0.4rem;border-radius:6px;">Commis</div>
     <div id="ollama-status" class="status-badge">Checking...</div>
   </header>
 
@@ -90,6 +90,14 @@
         </div>
       </div>
       <div id="menu-notes" class="info-banner hidden"></div>
+      <div class="import-url-form" id="import-url-form" style="display:flex;gap:0.5rem;margin-top:0.75rem;">
+        <input type="url" id="import-url-input" placeholder="Paste recipe URL…" style="flex:1;" />
+        <button class="btn btn-secondary" id="btn-import-recipe" onclick="importRecipe()">Import</button>
+      </div>
+      <div style="display:flex;gap:0.5rem;margin-top:0.5rem;">
+        <input type="text" id="add-dish-input" placeholder="Describe a dish to add… e.g. a quick pasta for tonight" style="flex:1;" />
+        <button class="btn btn-secondary" id="btn-add-dish" onclick="addSingleDish()">Add Dish</button>
+      </div>
       <div id="recipe-list" class="recipe-list"></div>
       <div id="menu-empty" class="empty-state hidden">No menu generated yet. Click "Generate Menu" to create one.</div>
     </div>
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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Recipe — Commis</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="logo.png" type="image/png">
+</head>
+<body>
+  <header>
+    <div class="header-title"><img src="logo.png" alt="Commis" style="height:32px;width:32px;object-fit:contain;vertical-align:middle;margin-right:0.4rem;border-radius:6px;">Commis</div>
+  </header>
+  <main id="recipe-detail" style="max-width:720px;margin:2rem auto;padding:0 1rem;">
+    <a href="/#menu" class="btn btn-secondary" style="margin-bottom:1.5rem;display:inline-block;">← Back to Menu</a>
+    <div id="recipe-content"><p>Loading…</p></div>
+  </main>
+  <script>
+    const params = new URLSearchParams(location.search);
+    const id = params.get('id');
+    if (!id) {
+      document.getElementById('recipe-content').innerHTML = '<p>No recipe ID provided.</p>';
+    } else {
+      fetch(`/api/recipes/${id}`)
+        .then(r => r.ok ? r.json() : Promise.reject(r.statusText))
+        .then(recipe => {
+          let ingredients = [];
+          try { ingredients = JSON.parse(recipe.ingredients); } catch {}
+
+          const mealType = recipe.meal_type || 'dinner';
+          const typeDisplay = mealType.charAt(0).toUpperCase() + mealType.slice(1);
+          const time = recipe.estimated_time_minutes;
+          const serves = recipe.servings;
+          const meta = [time ? `${time} min` : '', serves ? `serves ${serves}` : ''].filter(Boolean).join(' · ');
+
+          const ingredientList = Array.isArray(ingredients)
+            ? ingredients.map(i => {
+                if (typeof i === 'string') return `<li>${i}</li>`;
+                return `<li>${[i.quantity, i.unit, i.name].filter(Boolean).join(' ')}</li>`;
+              }).join('')
+            : '';
+
+          const instructionSteps = (recipe.instructions || '')
+            .split(/\n+| (?=\d+\. )/)
+            .map(s => s.trim())
+            .filter(Boolean)
+            .map(s => `<p>${s}</p>`)
+            .join('');
+
+          document.title = `${recipe.name} — Commis`;
+          document.getElementById('recipe-content').innerHTML = `
+            <div class="recipe-card-header" style="margin-bottom:0.5rem;">
+              <h1 style="font-size:1.6rem;margin:0;">${recipe.name}</h1>
+              <span class="recipe-type-badge ${mealType}">${typeDisplay}</span>
+            </div>
+            ${recipe.description ? `<p style="color:var(--text-muted);margin:0.5rem 0 1rem;">${recipe.description}</p>` : ''}
+            ${meta ? `<div class="recipe-card-meta" style="margin-bottom:1.5rem;">${meta}</div>` : ''}
+            ${ingredientList ? `<h2 style="font-size:1.1rem;margin-bottom:0.5rem;">Ingredients</h2><ul style="padding-left:1.25rem;line-height:1.8;">${ingredientList}</ul>` : ''}
+            ${instructionSteps ? `<h2 style="font-size:1.1rem;margin:1.5rem 0 0.5rem;">Instructions</h2><div style="line-height:1.7;">${instructionSteps}</div>` : ''}
+          `;
+        })
+        .catch(err => {
+          document.getElementById('recipe-content').innerHTML = `<p>Failed to load recipe: ${err}</p>`;
+        });
+    }
+  </script>
+</body>
+</html>
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