diff options
| author | Peter Stone <thepeterstone@gmail.com> | 2026-01-12 14:28:50 -1000 |
|---|---|---|
| committer | Peter Stone <thepeterstone@gmail.com> | 2026-01-12 14:28:50 -1000 |
| commit | 06c7485a7d05de86f9898e388161e8d932d5f3e6 (patch) | |
| tree | 376083a75278c9758f53c0062742062dedb75633 /Makefile | |
| parent | 9ef5b7f37883f846f105da9dc5d2ba1415e594e3 (diff) | |
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 <noreply@anthropic.com>
Diffstat (limited to 'Makefile')
| -rw-r--r-- | Makefile | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..bee9968 --- /dev/null +++ b/Makefile @@ -0,0 +1,36 @@ +.PHONY: help build run dev test css css-watch install clean + +help: ## Show this help message + @echo 'Usage: make [target]' + @echo '' + @echo 'Targets:' + @awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {printf " %-15s %s\n", $$1, $$2}' $(MAKEFILE_LIST) + +install: ## Install all dependencies (Go + npm) + go mod download + npm install + +css: ## Build CSS once + npm run build + +css-watch: ## Watch CSS for changes + npm run dev + +build: css ## Build Go binary with CSS + go build -o dashboard cmd/dashboard/main.go + +run: css ## Build CSS and run server + go run cmd/dashboard/main.go + +dev: ## Run in development mode (CSS watch + Go server in separate terminals) + @echo "Run these in separate terminals:" + @echo " Terminal 1: make css-watch" + @echo " Terminal 2: go run cmd/dashboard/main.go" + +test: ## Run tests + go test ./... + +clean: ## Clean build artifacts + rm -f dashboard + rm -f web/static/css/output.css + rm -rf node_modules |