From 06c7485a7d05de86f9898e388161e8d932d5f3e6 Mon Sep 17 00:00:00 2001 From: Peter Stone Date: Mon, 12 Jan 2026 14:28:50 -1000 Subject: Modernize frontend with tabs, HTMX, and Tailwind build pipeline Complete UI overhaul implementing modern design patterns with HTMX for dynamic updates, proper Tailwind build pipeline, and improved UX. Build Pipeline: - Add npm + PostCSS + Tailwind CSS configuration - Custom design system with brand colors - Compiled CSS: 27KB (vs 3MB CDN), 99% reduction - Makefile for unified build commands - Inter font for improved typography Tab Interface: - Separate Tasks tab from Notes tab using HTMX - Partial page updates without full refreshes - Tab state management with proper refresh handling - New endpoints: /tabs/tasks, /tabs/notes, /tabs/refresh Template Architecture: - Modular partials system (7 reusable components) - Cleaner separation of concerns Empty Board Management: - Active boards in main 3-column grid - Empty boards in collapsible section - Reduces visual clutter Visual Design Enhancements: - Inter font, brand color accents - Improved typography hierarchy and spacing - Enhanced card styling with hover effects Co-Authored-By: Claude Sonnet 4.5 --- web/templates/index.html | 193 +++++----------------------- web/templates/partials/error-banner.html | 12 ++ web/templates/partials/notes-tab.html | 22 ++++ web/templates/partials/obsidian-notes.html | 30 +++++ web/templates/partials/plantoeat-meals.html | 35 +++++ web/templates/partials/tasks-tab.html | 22 ++++ web/templates/partials/todoist-tasks.html | 58 +++++++++ web/templates/partials/trello-boards.html | 72 +++++++++++ 8 files changed, 283 insertions(+), 161 deletions(-) create mode 100644 web/templates/partials/error-banner.html create mode 100644 web/templates/partials/notes-tab.html create mode 100644 web/templates/partials/obsidian-notes.html create mode 100644 web/templates/partials/plantoeat-meals.html create mode 100644 web/templates/partials/tasks-tab.html create mode 100644 web/templates/partials/todoist-tasks.html create mode 100644 web/templates/partials/trello-boards.html (limited to 'web/templates') diff --git a/web/templates/index.html b/web/templates/index.html index 7668a94..2d35b37 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -4,182 +4,53 @@ Personal Dashboard - - + - -
+ +
-
-

Personal Dashboard

+
+

Personal Dashboard

Last updated: {{.LastUpdated.Format "3:04 PM"}} -
- - {{if .Errors}} -
-

Errors:

-
    - {{range .Errors}} -
  • {{.}}
    • - {{end}} -
-
- {{end}} - - -
- -
- {{if .Boards}} -
-

📋 Trello Boards

-
- {{range .Boards}} -
-

{{.Name}}

- {{if .Cards}} -
- {{range .Cards}} -
-

{{.Name}}

- {{if .ListName}} - - {{.ListName}} - - {{end}} - {{if .DueDate}} - - Due: {{.DueDate.Format "Jan 2"}} - - {{end}} - {{if .URL}} - - View → - - {{end}} -
- {{end}} -
- {{else}} -

No cards

- {{end}} -
- {{end}} -
-
- {{end}} -
- - -
-
-

✓ Todoist Tasks

- - {{if .Tasks}} -
- {{range .Tasks}} -
- -
-

- {{.Content}} -

- {{if .Description}} -

{{.Description}}

- {{end}} -
- {{if .ProjectName}} - {{.ProjectName}} - {{end}} - {{if .DueDate}} - - Due: {{.DueDate.Format "Jan 2"}} - - {{end}} - {{range .Labels}} - {{.}} - {{end}} -
-
- {{if .URL}} - - - - - - {{end}} -
- {{end}} -
- {{else}} -

No tasks found

- {{end}} -
-
- - -
-
-

Upcoming Meals

- - {{if .Meals}} -
- {{range .Meals}} -
-

{{.RecipeName}}

-
- {{.Date.Format "Mon, Jan 2"}} - - {{.MealType}} - -
-
- {{end}} -
- {{else}} -

No meals planned

- {{end}} -
-
+ +
+
- - {{if .Notes}} -
-
-

Recent Notes

-
- {{range .Notes}} -
-

{{.Title}}

-

{{.Content}}

-
- {{.Modified.Format "Jan 2, 3:04 PM"}} - {{if .Tags}} -
- {{range .Tags}} - #{{.}} - {{end}} -
- {{end}} -
-
- {{end}} -
-
+ +
+ {{template "tasks-tab" .}}
- {{end}}
+ diff --git a/web/templates/partials/error-banner.html b/web/templates/partials/error-banner.html new file mode 100644 index 0000000..eb4c08d --- /dev/null +++ b/web/templates/partials/error-banner.html @@ -0,0 +1,12 @@ +{{define "error-banner"}} +{{if .Errors}} +
+

Errors:

+
    + {{range .Errors}} +
  • {{.}}
    • + {{end}} +
+
+{{end}} +{{end}} diff --git a/web/templates/partials/notes-tab.html b/web/templates/partials/notes-tab.html new file mode 100644 index 0000000..526f387 --- /dev/null +++ b/web/templates/partials/notes-tab.html @@ -0,0 +1,22 @@ +{{define "notes-tab"}} +
+ + {{template "error-banner" .}} + + + {{if .Notes}} + {{template "obsidian-notes" .}} + {{else}} +
+ + + +

No notes found

+

+ Configure your Obsidian vault path in the settings to see your recent notes displayed here. +

+
+ {{end}} +
+{{end}} diff --git a/web/templates/partials/obsidian-notes.html b/web/templates/partials/obsidian-notes.html new file mode 100644 index 0000000..268a0fe --- /dev/null +++ b/web/templates/partials/obsidian-notes.html @@ -0,0 +1,30 @@ +{{define "obsidian-notes"}} +{{if .Notes}} +
+ +
+
+

Recent Notes

+
+ +
+ {{range .Notes}} +
+

{{.Title}}

+

{{.Content}}

+
+ {{.Modified.Format "Jan 2, 3:04 PM"}} + {{if .Tags}} +
+ {{range .Tags}} + #{{.}} + {{end}} +
+ {{end}} +
+
+ {{end}} +
+
+{{end}} +{{end}} diff --git a/web/templates/partials/plantoeat-meals.html b/web/templates/partials/plantoeat-meals.html new file mode 100644 index 0000000..78e403e --- /dev/null +++ b/web/templates/partials/plantoeat-meals.html @@ -0,0 +1,35 @@ +{{define "plantoeat-meals"}} +
+ +
+
+

Upcoming Meals

+
+ + {{if .Meals}} +
+ {{range .Meals}} +
+

{{.RecipeName}}

+
+ {{.Date.Format "Mon, Jan 2"}} + + {{.MealType}} + +
+
+ {{end}} +
+ {{else}} +
+ + + +

No meals planned

+

+ Schedule your meals to see them here. +

+
+ {{end}} +
+{{end}} diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html new file mode 100644 index 0000000..5678193 --- /dev/null +++ b/web/templates/partials/tasks-tab.html @@ -0,0 +1,22 @@ +{{define "tasks-tab"}} +
+ + {{template "error-banner" .}} + + + {{template "trello-boards" .}} + + +
+ +
+ {{template "todoist-tasks" .}} +
+ + +
+ {{template "plantoeat-meals" .}} +
+
+
+{{end}} diff --git a/web/templates/partials/todoist-tasks.html b/web/templates/partials/todoist-tasks.html new file mode 100644 index 0000000..7595ac7 --- /dev/null +++ b/web/templates/partials/todoist-tasks.html @@ -0,0 +1,58 @@ +{{define "todoist-tasks"}} +
+ +
+
+

Todoist Tasks

+
+ + {{if .Tasks}} +
+ {{range .Tasks}} +
+ +
+

+ {{.Content}} +

+ {{if .Description}} +

{{.Description}}

+ {{end}} +
+ {{if .ProjectName}} + {{.ProjectName}} + {{end}} + {{if .DueDate}} + + Due: {{.DueDate.Format "Jan 2"}} + + {{end}} + {{range .Labels}} + {{.}} + {{end}} +
+
+ {{if .URL}} + + + + + + {{end}} +
+ {{end}} +
+ {{else}} +
+ + + +

No tasks found

+

+ All tasks completed or no tasks available. +

+
+ {{end}} +
+{{end}} diff --git a/web/templates/partials/trello-boards.html b/web/templates/partials/trello-boards.html new file mode 100644 index 0000000..bd460cf --- /dev/null +++ b/web/templates/partials/trello-boards.html @@ -0,0 +1,72 @@ +{{define "trello-boards"}} +{{if .Boards}} +
+ +
+
+

Trello Boards

+
+ + +
+ {{range .Boards}} + {{if .Cards}} +
+

{{.Name}}

+
+ {{range .Cards}} +
+

{{.Name}}

+
+ {{if .ListName}} + + {{.ListName}} + + {{end}} + {{if .DueDate}} + + Due: {{.DueDate.Format "Jan 2"}} + + {{end}} + {{if .URL}} + + View → + + {{end}} +
+
+ {{end}} +
+
+ {{end}} + {{end}} +
+ + +
+ + + Empty Boards + + + + + +
+
+ {{range .Boards}} + {{if not .Cards}} +
+

{{.Name}}

+

No cards

+
+ {{end}} + {{end}} +
+
+
+
+{{end}} +{{end}} -- cgit v1.2.3