62 lines
3.7 KiB
Markdown
62 lines
3.7 KiB
Markdown
# Round 2 Plan: Tabbed Admin Interface
|
|
|
|
## Summary
|
|
|
|
Refactor the admin area from one long dashboard into a tabbed interface with three subsections: Main, Projects, and Contact Details. Keep the existing password-protected admin shell, reuse the current CRUD behavior, and add HTMX-powered tab loading so the interface feels fast while each tab remains accessible by URL.
|
|
|
|
## Key Changes
|
|
|
|
- Add protected admin tab routes:
|
|
- `GET /admin` redirects to `/admin/main`.
|
|
- `GET /admin/main` shows homepage/about content editing.
|
|
- `GET /admin/projects` shows project creation, project editing, gallery upload/removal.
|
|
- `GET /admin/contact-details` shows public contact fields and saved contact requests.
|
|
- Keep existing mutation routes but redirect or HTMX-refresh back to the relevant tab:
|
|
- `POST /admin/content` returns to `/admin/main` unless only contact fields were submitted.
|
|
- `POST /admin/contact-details` updates email, phone, and location, then returns to `/admin/contact-details`.
|
|
- Project mutation routes return to `/admin/projects`.
|
|
- Split `web/templates/admin.html` into a reusable admin layout plus tab partials:
|
|
- Admin layout: header, logout/view-site actions, flash message area, tab navigation, and `#admin-panel` content target.
|
|
- Main tab partial: hero title/subtitle, intro copy, about name/role/bio, hero image, about image.
|
|
- Projects tab partial: add project form, project edit forms, cover image changes, gallery images.
|
|
- Contact details tab partial: email/phone/location form plus contact request inbox.
|
|
|
|
## Interface Behavior
|
|
|
|
- Use a horizontal tab bar under the admin header with active state for `main`, `projects`, and `contact details`.
|
|
- Tabs are normal links for direct navigation and browser refresh support.
|
|
- Add `hx-get`, `hx-target="#admin-panel"`, `hx-push-url="true"`, and `hx-swap="innerHTML transition:true"` to tab links for smooth in-page tab changes.
|
|
- On direct page loads, render the full admin layout with the requested tab already active.
|
|
- On HTMX requests, return only the tab panel partial and update the tab active state with an out-of-band fragment or by returning the tab nav with `hx-swap-oob`.
|
|
- Keep mobile behavior simple: tabs scroll horizontally if needed, forms remain single-column on small screens.
|
|
|
|
## Data and Handler Notes
|
|
|
|
- Reuse the existing `adminData` loading pattern, but allow tab-specific data loading to avoid fetching project galleries on the Main tab.
|
|
- Keep all admin routes behind `requireAdmin`.
|
|
- Add a small `AdminTab` field to page data so templates can render active tab state.
|
|
- Move email, phone, and location out of the Main form into Contact Details while still storing them in the existing `site_content` row.
|
|
- Do not change the SQLite schema for this refactor.
|
|
|
|
## Test Plan
|
|
|
|
- Update handler tests:
|
|
- `/admin` redirects to `/admin/main`.
|
|
- unauthenticated requests to each tab redirect to `/admin/login`.
|
|
- authenticated requests to `/admin/main`, `/admin/projects`, and `/admin/contact-details` return `200`.
|
|
- HTMX tab requests return partial content rather than the full admin document.
|
|
- content updates redirect to the correct tab.
|
|
- project create/update/delete routes still work and redirect to `/admin/projects`.
|
|
- Manual checks:
|
|
- tab links work with and without JavaScript.
|
|
- HTMX tab changes update browser URL.
|
|
- active tab styling is correct after direct load, HTMX navigation, and form redirects.
|
|
- mobile tab bar and forms remain usable.
|
|
|
|
## Assumptions
|
|
|
|
- "Main" means homepage/about presentation content and showcase images.
|
|
- "Projects" owns all project and gallery management.
|
|
- "Contact Details" owns public contact fields and the contact request inbox.
|
|
- This is a UI/routing refactor only; no database migration is needed.
|