Users can now create a new context directly from the todo creation modal
without having to navigate away to the contexts page.
Changes:
- Added "Create new context..." option to context dropdown in todo modal
- Added inline form that appears when user selects "Create new context"
- Added JavaScript to show/hide the new context input field dynamically
- Added form validation to ensure either an existing context is selected
or a new context name is provided
- Updated HandleCreateTodo to detect when user wants to create a new context
(context_id == "__new__") and create it before creating the todo
- New contexts are created with proper position ordering
UX Flow:
1. User clicks "New Todo"
2. User selects "Create new context..." from dropdown
3. Input field appears below for entering context name
4. User enters context name (e.g., "@home", "@work")
5. When form is submitted, context is created first, then todo is created
with the new context automatically assigned
6. User is redirected back to todos page with both new context and todo visible
This streamlines the workflow and eliminates context switching when users
need to quickly add a todo with a new context.
Implemented complete CRUD (Create, Read, Update, Delete) operations for the web UI:
## Context CRUD:
- Added HandleCreateContext and HandleDeleteContext handlers
- Created modal form for context creation in contexts.html
- Added delete buttons with confirmation dialogs
- Added POST /contexts and POST /contexts/:id/delete routes
- Contexts now support proper position-based ordering
## Todo CRUD:
- Added HandleCreateTodo and HandleDeleteTodo handlers
- Created modal form for todo creation with context selection in todos.html
- Context selection is required (aligned with GTD methodology)
- Added delete buttons for todos with confirmation dialogs
- Added POST /todos and POST /todos/:id/delete routes
- Updated ShowTodos to pass available contexts to template
## RSS Feed:
- Implemented HandleContextFeed handler with RSS 2.0 XML generation
- Added GET /contexts/:id/feed.rss route
- Feed includes all todos for a specific context
- Feed contains todo description, notes, project, and due date info
## Testing:
- Created comprehensive Playwright test suite (test-tracks-crud.js)
- Tests cover: login, context creation, todo creation with context assignment,
todo deletion, context deletion, and RSS feed validation
All code compiles successfully. Ready for end-to-end testing.
- Created todos.html template showing user's todos with state badges
- Created projects.html template showing project cards in grid layout
- Created contexts.html template showing context cards
- Added ShowTodos, ShowProjects, ShowContexts handlers to web_handler.go
- Added routes for /todos, /projects, /contexts to main.go
- All pages show empty state when no data exists
- Navigation menu links now work without 404 errors
All pages are functional and display user-specific data from the database.
Features:
- Single binary deployment with embedded HTML templates
- Dark and light mode theme switcher with localStorage persistence
- Server-side rendered Go templates
- Clean, modern UI with CSS variables for theming
- Login page with default admin credentials hint
- Dashboard with statistics and quick actions
- Admin user management page
- Session management via HTTP-only cookies
Implementation:
- Created web templates in cmd/tracks/web/templates/
- base.html: Main layout with navigation and theme toggle
- login.html: Login form with first-time user hint
- dashboard.html: Main dashboard with stats cards and recent todos
- admin_users.html: User management with create user modal
- Added web_handler.go for serving web UI
- ShowLogin: Renders login page
- HandleLogin: Processes login form, sets cookie, redirects to dashboard
- HandleLogout: Clears cookie, redirects to login
- ShowDashboard: Shows personalized dashboard with stats
- ShowAdminUsers: Admin-only user management page
- HandleCreateUser: Processes user creation form
- Updated main.go to embed templates using //go:embed
- Added web routes before API routes:
- GET/POST /login (public)
- GET /logout (public)
- GET / and /dashboard (authenticated)
- GET/POST /admin/users (authenticated + admin)
UI Features:
- Responsive design with mobile support
- Theme persistence across sessions
- Clean card-based layout
- Statistics dashboard (active todos, projects, contexts, completed today)
- Quick action buttons
- Admin badge for admin users
- Navigation menu with conditional admin links
Security:
- HttpOnly cookies for session tokens
- Admin middleware for protected routes
- CSRF protection via form POST
- Password fields properly masked
No external dependencies - all CSS and JS inline in templates.
Everything compiles into single binary.
Tested:
- Login page renders correctly ✓
- Login form submits and creates session ✓
- Dashboard displays with user info ✓
- Theme toggle functionality included ✓
- Admin user sees admin links ✓
