martin/flipventory_v2
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

Web UI: Jinja2 templates with HTMX and Pico CSS #9

New Issue
Open
opened 2026-06-16 09:34:55 +00:00 by martin · 0 comments
martin commented 2026-06-16 09:34:55 +00:00
Owner
Copy Link

Story

As a user, I want a browser UI so I don't have to talk to the raw JSON API.

Stack choice

  • Jinja2 templates (server-side rendering, already installed)
  • Pico CSS (CDN, classless/minimal styling, no build step)
  • HTMX (CDN, live search and inline status updates without writing JS)
  • Cookie-based JWT auth (fv_token httpOnly cookie set on login)

Pages

Path Who Description
/login anyone Login form
/logout auth Clear cookie, redirect to login
/ auth Dashboard: stat cards + quick-add + recent items
/items auth Items table with HTMX search + status filter tabs
/items/{id} auth Item edit form
/bins auth Bins list with item counts
/admin/audit-log admin Audit log with filters
/admin/users admin User list + activate/deactivate

Notes

  • Existing JSON API stays untouched (Swagger still works at /docs)
  • HTMX used for: live item search, inline status badge updates
  • PRG pattern for all form submissions (redirect after POST)
  • Flash messages via query-param ?msg= + ?err=
## Story As a user, I want a browser UI so I don't have to talk to the raw JSON API. ## Stack choice - **Jinja2** templates (server-side rendering, already installed) - **Pico CSS** (CDN, classless/minimal styling, no build step) - **HTMX** (CDN, live search and inline status updates without writing JS) - Cookie-based JWT auth (`fv_token` httpOnly cookie set on login) ## Pages | Path | Who | Description | |------|-----|-------------| | `/login` | anyone | Login form | | `/logout` | auth | Clear cookie, redirect to login | | `/` | auth | Dashboard: stat cards + quick-add + recent items | | `/items` | auth | Items table with HTMX search + status filter tabs | | `/items/{id}` | auth | Item edit form | | `/bins` | auth | Bins list with item counts | | `/admin/audit-log` | admin | Audit log with filters | | `/admin/users` | admin | User list + activate/deactivate | ## Notes - Existing JSON API stays untouched (Swagger still works at /docs) - HTMX used for: live item search, inline status badge updates - PRG pattern for all form submissions (redirect after POST) - Flash messages via query-param `?msg=` + `?err=`
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
martin
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: martin/flipventory_v2#9
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?