Implement 4-tab architecture with unified Atom rendering

- Create TabsHandler with 4 specialized tab methods
- HandleTasks: Unified Atom view (Todoist + Trello due cards)
- HandlePlanning: Dedicated Trello boards view
- HandleNotes: Obsidian notes view
- HandleMeals: PlanToEat meals view
- Rewrite tasks-tab template for Atom rendering
- Add planning-tab and meals-tab templates
- Update index.html navigation with 4 tabs
- Smart sorting: Tasks sorted by due date then priority
- Clean separation: Tasks (action), Planning (structure), Notes (knowledge), Meals (calendar)

Template fixes:
- Load initial tab content via HTMX to avoid data structure mismatch
- Update refresh logic to use 2-step process (API refresh + tab reload)
- Fix manual and auto-refresh to call tab endpoints directly

Note: Router changes in cmd/dashboard/main.go (untracked file) at lines 55-78

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

1 files changed, 18 insertions, 7 deletions

diff --git a/web/static/js/app.js b/web/static/js/app.js
index b68b12a..a930b1f 100644
--- a/web/static/js/app.js
+++ b/web/static/js/app.js
@@ -91,15 +91,20 @@ async function refreshData() {
     `;
 
     try {
-        // Refresh current tab
-        const response = await fetch(`/tabs/refresh?tab=${currentTab}`, {
+        // Force API refresh (updates cache)
+        const refreshResponse = await fetch('/api/refresh', {
             method: 'POST'
         });
 
-        if (!response.ok) throw new Error('Refresh failed');
+        if (!refreshResponse.ok) throw new Error('Refresh failed');
+
+        // Reload current tab from cache
+        const tabResponse = await fetch(`/tabs/${currentTab}`);
+
+        if (!tabResponse.ok) throw new Error('Tab reload failed');
 
         // Get HTML response and update tab content
-        const html = await response.text();
+        const html = await tabResponse.text();
         document.getElementById('tab-content').innerHTML = html;
 
         // Update timestamp
@@ -138,12 +143,18 @@ async function autoRefresh() {
     console.log(`Auto-refreshing ${currentTab} tab...`);
 
     try {
-        const response = await fetch(`/tabs/refresh?tab=${currentTab}`, {
+        // Force API refresh (updates cache)
+        const refreshResponse = await fetch('/api/refresh', {
             method: 'POST'
         });
 
-        if (response.ok) {
-            const html = await response.text();
+        if (!refreshResponse.ok) throw new Error('Refresh failed');
+
+        // Reload current tab from cache
+        const tabResponse = await fetch(`/tabs/${currentTab}`);
+
+        if (tabResponse.ok) {
+            const html = await tabResponse.text();
             document.getElementById('tab-content').innerHTML = html;
             updateLastUpdatedTime();
             console.log('Auto-refresh successful');