diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/app.js | 129 | ||||
| -rw-r--r-- | static/index.html | 12 | ||||
| -rw-r--r-- | static/logo.png | bin | 0 -> 1626778 bytes | |||
| -rw-r--r-- | static/recipe.html | 68 | ||||
| -rw-r--r-- | static/style.css | 74 |
5 files changed, 235 insertions, 48 deletions
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, '&').replace(/</g, '<').replace(/>/g, '>'); + + // 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, '&').replace(/</g, '<').replace(/>/g, '>').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 Binary files differnew file mode 100644 index 0000000..e20d8e1 --- /dev/null +++ b/static/logo.png 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; |
