diff options
| author | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-08 03:24:36 -0700 |
|---|---|---|
| committer | Tyler Hoang <tyler@tylerhoang.xyz> | 2026-05-08 03:24:36 -0700 |
| commit | 3de7c5eed5ba262abf0d746211e33800db6d66df (patch) | |
| tree | 6fddb5381fb178423eac34894add5b611babe300 /static/index.html | |
| parent | f361e7599d9a11ad3397b7b6bffee151ab9bdde9 (diff) | |
Add recipe suggestions, chat tab, and major workflow improvements
- Replace 7-day grid menu with browsable recipe suggestion cards (swap, remove, make this)
- Add Chat tab: conversational AI with full pantry/menu/grocery context
- Grocery list works without a menu (pantry-only mode)
- Individual grocery checkboxes auto-add items to pantry
- Swap modal with optional preference input
- User notes textarea on menu and grocery generation
- Clear button for menu and grocery list
- LLM notes/summary displayed after generation, persisted to DB
- Favicon linked in HTML
- Category dropdown styled for dark theme
- System prompt configurable via SYSTEM_PROMPT in .env
- Fix startup error (ollama_timeout default), DB migration for menu_plans.notes
- Simplify: batch N+1 queries, extract _current_monday(), merge chat sync fns,
asyncio.get_running_loop(), fix currentGroceryId bug, cap chat history
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to 'static/index.html')
| -rw-r--r-- | static/index.html | 35 |
1 files changed, 33 insertions, 2 deletions
diff --git a/static/index.html b/static/index.html index a9ae018..d0e0243 100644 --- a/static/index.html +++ b/static/index.html @@ -5,6 +5,7 @@ <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"> </head> <body> <header> @@ -17,6 +18,7 @@ <button class="tab-btn" data-tab="meals">Meals</button> <button class="tab-btn" data-tab="menu">This Week's Menu</button> <button class="tab-btn" data-tab="grocery">Grocery List</button> + <button class="tab-btn" data-tab="chat">Chat</button> </nav> <main> @@ -96,12 +98,14 @@ <div class="tab-header"> <h2>This Week's Menu</h2> <div class="header-actions"> + <textarea id="menu-user-notes" class="ai-notes-input" placeholder="Any preferences or instructions for the AI (e.g. vegetarian, 2 people, quick breakfasts)..." rows="2"></textarea> <button class="btn btn-primary" id="btn-generate-menu">✨ Generate Menu</button> + <button class="btn btn-danger hidden" id="btn-clear-menu">Clear</button> <div id="menu-spinner" class="spinner hidden"></div> </div> </div> <div id="menu-notes" class="info-banner hidden"></div> - <div id="menu-grid" class="menu-grid"></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> @@ -110,17 +114,44 @@ <div class="tab-header"> <h2>Grocery List</h2> <div class="header-actions"> + <textarea id="grocery-user-notes" class="ai-notes-input" placeholder="Any preferences or instructions for the AI (e.g. budget $50, no red meat, stock up on breakfast items)..." rows="2"></textarea> <button class="btn btn-primary" id="btn-generate-grocery">✨ Generate List</button> + <button class="btn btn-danger hidden" id="btn-clear-grocery">Clear</button> <button class="btn btn-success hidden" id="btn-mark-purchased">✓ Mark All Purchased</button> <div id="grocery-spinner" class="spinner hidden"></div> </div> </div> + <div id="grocery-notes" class="info-banner hidden"></div> <div id="grocery-total" class="hidden"></div> <div id="grocery-sections"></div> - <div id="grocery-empty" class="empty-state hidden">No grocery list yet. Generate a menu first, then generate the grocery list.</div> + <div id="grocery-empty" class="empty-state hidden">No grocery list yet. Click "Generate List" to create one.</div> + </div> + + <!-- Chat Tab --> + <div id="tab-chat" class="tab-content hidden"> + <div class="chat-container"> + <div id="chat-messages" class="chat-messages"></div> + <div class="chat-input-area"> + <textarea id="chat-input" class="chat-input" placeholder="Ask Commis anything about your kitchen..." rows="2"></textarea> + <button class="btn btn-primary" id="btn-send-chat">Send</button> + </div> + </div> </div> </main> + <!-- Swap Recipe Modal --> + <div id="swap-modal-overlay" class="modal-overlay hidden" onclick="cancelSwap()"> + <div class="modal" onclick="event.stopPropagation()"> + <div class="modal-title">Swap Recipe</div> + <div id="swap-modal-subtitle" class="modal-subtitle"></div> + <textarea id="swap-notes" class="ai-notes-input" placeholder="Any preferences? e.g. vegetarian, something with chicken, quick and easy... (optional)" rows="3"></textarea> + <div class="modal-actions"> + <button class="btn btn-secondary" onclick="cancelSwap()">Cancel</button> + <button class="btn btn-primary" onclick="confirmSwap()">Find Replacement</button> + </div> + </div> + </div> + <div id="toast-container"></div> <script src="app.js"></script> </body> |