sabisan/ROUND_2.md

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.