# 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.