diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-01-12 09:27:16 -1000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-01-12 09:27:16 -1000 |
| commit | 9fe0998436488537a8a2e8ffeefb0c4424b41c60 (patch) | |
| tree | ce877f04e60a187c2bd0e481e80298ec5e7cdf80 /web/templates | |
Initial commit: Personal Consolidation Dashboard (Phase 1 Complete)
Implemented a unified web dashboard aggregating tasks, notes, and meal planning:
Core Features:
- Trello integration (PRIMARY feature - boards, cards, lists)
- Todoist integration (tasks and projects)
- Obsidian integration (20 most recent notes)
- PlanToEat integration (optional - 7-day meal planning)
- Mobile-responsive web UI with auto-refresh (5 min)
- SQLite caching with 5-minute TTL
- AI agent endpoint with Bearer token authentication
Technical Implementation:
- Go 1.21+ backend with chi router
- Interface-based API client design for testability
- Parallel data fetching with goroutines
- Graceful degradation (partial data on API failures)
- .env file loading with godotenv
- Comprehensive test coverage (9/9 tests passing)
Bug Fixes:
- Fixed .env file not being loaded at startup
- Fixed nil pointer dereference with optional API clients (typed nil interface gotcha)
Documentation:
- START_HERE.md - Quick 5-minute setup guide
- QUICKSTART.md - Fast track setup
- SETUP_GUIDE.md - Detailed step-by-step instructions
- PROJECT_SUMMARY.md - Complete project overview
- CLAUDE.md - Guide for Claude Code instances
- AI_AGENT_ACCESS.md - AI agent design document
- AI_AGENT_SETUP.md - Claude.ai integration guide
- TRELLO_AUTH_UPDATE.md - New Power-Up auth process
Statistics:
- Binary: 17MB
- Code: 2,667 lines
- Tests: 5 unit + 4 acceptance tests (all passing)
- Dependencies: chi, sqlite3, godotenv
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Diffstat (limited to 'web/templates')
| -rw-r--r-- | web/templates/index.html | 185 |
1 files changed, 185 insertions, 0 deletions
diff --git a/web/templates/index.html b/web/templates/index.html new file mode 100644 index 0000000..7668a94 --- /dev/null +++ b/web/templates/index.html @@ -0,0 +1,185 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Personal Dashboard</title> + <link rel="stylesheet" href="/static/css/styles.css"> + <script src="https://cdn.tailwindcss.com"></script> +</head> +<body class="bg-gray-100 min-h-screen"> + <div class="container mx-auto px-4 py-8 max-w-7xl"> + <!-- Header --> + <header class="mb-8 flex justify-between items-center"> + <h1 class="text-3xl font-bold text-gray-800">Personal Dashboard</h1> + <div class="flex items-center gap-4"> + <span class="text-sm text-gray-600"> + Last updated: <span id="last-updated">{{.LastUpdated.Format "3:04 PM"}}</span> + </span> + <button onclick="refreshData()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition"> + Refresh + </button> + </div> + </header> + + <!-- Error Messages --> + {{if .Errors}} + <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-6"> + <p class="font-bold">Errors:</p> + <ul class="list-disc list-inside"> + {{range .Errors}} + <li>{{.}}</li> + {{end}} + </ul> + </div> + {{end}} + + <!-- Main Grid --> + <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> + <!-- Trello Boards Section (PRIORITY) --> + <div class="lg:col-span-3"> + {{if .Boards}} + <div class="bg-white rounded-lg shadow-md p-6 mb-6"> + <h2 class="text-xl font-semibold mb-4 text-gray-800">📋 Trello Boards</h2> + <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> + {{range .Boards}} + <div class="border border-gray-300 rounded-lg p-4 bg-gradient-to-br from-blue-50 to-white"> + <h3 class="font-bold text-lg text-gray-800 mb-3">{{.Name}}</h3> + {{if .Cards}} + <div class="space-y-2 max-h-96 overflow-y-auto"> + {{range .Cards}} + <div class="bg-white border border-gray-200 rounded p-3 hover:shadow-md transition"> + <p class="font-medium text-gray-800 text-sm">{{.Name}}</p> + {{if .ListName}} + <span class="inline-block mt-1 text-xs bg-gray-200 text-gray-700 px-2 py-1 rounded"> + {{.ListName}} + </span> + {{end}} + {{if .DueDate}} + <span class="inline-block mt-1 text-xs bg-red-100 text-red-800 px-2 py-1 rounded"> + Due: {{.DueDate.Format "Jan 2"}} + </span> + {{end}} + {{if .URL}} + <a href="{{.URL}}" target="_blank" class="text-blue-600 hover:text-blue-800 text-xs mt-1 inline-block"> + View → + </a> + {{end}} + </div> + {{end}} + </div> + {{else}} + <p class="text-gray-500 text-sm text-center py-4">No cards</p> + {{end}} + </div> + {{end}} + </div> + </div> + {{end}} + </div> + + <!-- Tasks Section --> + <div class="lg:col-span-2"> + <div class="bg-white rounded-lg shadow-md p-6"> + <h2 class="text-xl font-semibold mb-4 text-gray-800">✓ Todoist Tasks</h2> + + {{if .Tasks}} + <div class="space-y-3"> + {{range .Tasks}} + <div class="flex items-start gap-3 p-3 hover:bg-gray-50 rounded-lg transition"> + <input type="checkbox" {{if .Completed}}checked{{end}} + class="mt-1 h-5 w-5 text-blue-600 rounded" disabled> + <div class="flex-1"> + <p class="font-medium text-gray-800 {{if .Completed}}line-through text-gray-500{{end}}"> + {{.Content}} + </p> + {{if .Description}} + <p class="text-sm text-gray-600 mt-1">{{.Description}}</p> + {{end}} + <div class="flex gap-2 mt-2 text-xs text-gray-500"> + {{if .ProjectName}} + <span class="bg-gray-200 px-2 py-1 rounded">{{.ProjectName}}</span> + {{end}} + {{if .DueDate}} + <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded"> + Due: {{.DueDate.Format "Jan 2"}} + </span> + {{end}} + {{range .Labels}} + <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">{{.}}</span> + {{end}} + </div> + </div> + {{if .URL}} + <a href="{{.URL}}" target="_blank" class="text-blue-600 hover:text-blue-800"> + <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> + </svg> + </a> + {{end}} + </div> + {{end}} + </div> + {{else}} + <p class="text-gray-500 text-center py-8">No tasks found</p> + {{end}} + </div> + </div> + + <!-- Meals Section --> + <div> + <div class="bg-white rounded-lg shadow-md p-6"> + <h2 class="text-xl font-semibold mb-4 text-gray-800">Upcoming Meals</h2> + + {{if .Meals}} + <div class="space-y-3"> + {{range .Meals}} + <div class="border-l-4 border-green-500 pl-3 py-2"> + <p class="font-medium text-gray-800">{{.RecipeName}}</p> + <div class="flex justify-between items-center mt-1"> + <span class="text-sm text-gray-600">{{.Date.Format "Mon, Jan 2"}}</span> + <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded capitalize"> + {{.MealType}} + </span> + </div> + </div> + {{end}} + </div> + {{else}} + <p class="text-gray-500 text-center py-8">No meals planned</p> + {{end}} + </div> + </div> + </div> + + <!-- Notes Section --> + {{if .Notes}} + <div class="mt-6"> + <div class="bg-white rounded-lg shadow-md p-6"> + <h2 class="text-xl font-semibold mb-4 text-gray-800">Recent Notes</h2> + <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> + {{range .Notes}} + <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition"> + <h3 class="font-semibold text-gray-800 mb-2">{{.Title}}</h3> + <p class="text-sm text-gray-600 mb-2 line-clamp-3">{{.Content}}</p> + <div class="flex justify-between items-center text-xs text-gray-500"> + <span>{{.Modified.Format "Jan 2, 3:04 PM"}}</span> + {{if .Tags}} + <div class="flex gap-1"> + {{range .Tags}} + <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded">#{{.}}</span> + {{end}} + </div> + {{end}} + </div> + </div> + {{end}} + </div> + </div> + </div> + {{end}} + </div> + + <script src="/static/js/app.js"></script> +</body> +</html> |