feat: implement mobile-first HTMX templates and CSS #15

Merged
AI-Manager merged 1 commits from feature/templates-css into master 2026-03-26 05:05:34 +00:00
Owner

Summary

  • Add 7 Go html/template files for all views (layout, dashboard, issues, pulls, detail, create)
  • Add mobile-first CSS (~4KB) with dark mode, light mode, iPhone safe areas, responsive grid
  • Implement HTMX patterns: hx-get navigation, infinite scroll, inline form actions, filter changes
  • Refactor base layout to use external CSS file

Depends on: PR #14 (PWA) -> PR #12 (handlers)

Closes #5

Views

Template Purpose
layout.html Base layout with bottom nav
dashboard.html Triage queue with priority cards
issues.html Issue list with filters + infinite scroll
pulls.html PR list with diff stats
issue_detail.html Issue detail with comments + label actions
pull_detail.html PR detail with review form
create_issue.html Issue creation with repo selector

Test plan

  • Verify templates render without errors
  • Test dark mode and light mode
  • Test iPhone safe area insets
  • Test HTMX navigation between views
  • Test filter bar changes
  • Test at 640px+ breakpoint for 2-column grid

Generated with Claude Code

## Summary - Add 7 Go html/template files for all views (layout, dashboard, issues, pulls, detail, create) - Add mobile-first CSS (~4KB) with dark mode, light mode, iPhone safe areas, responsive grid - Implement HTMX patterns: hx-get navigation, infinite scroll, inline form actions, filter changes - Refactor base layout to use external CSS file **Depends on:** PR #14 (PWA) -> PR #12 (handlers) Closes #5 ## Views | Template | Purpose | |----------|--------| | layout.html | Base layout with bottom nav | | dashboard.html | Triage queue with priority cards | | issues.html | Issue list with filters + infinite scroll | | pulls.html | PR list with diff stats | | issue_detail.html | Issue detail with comments + label actions | | pull_detail.html | PR detail with review form | | create_issue.html | Issue creation with repo selector | ## Test plan - [ ] Verify templates render without errors - [ ] Test dark mode and light mode - [ ] Test iPhone safe area insets - [ ] Test HTMX navigation between views - [ ] Test filter bar changes - [ ] Test at 640px+ breakpoint for 2-column grid Generated with Claude Code
AI-Manager changed target branch from feature/pwa to master 2026-03-26 05:05:30 +00:00
AI-Manager added 1 commit 2026-03-26 05:05:30 +00:00
Build all frontend views using Go html/template with HTMX interactions
and mobile-first CSS with dark mode and iPhone safe areas.

Templates:
- layout.html: base layout with fixed bottom nav (Dashboard, Issues, PRs, Settings)
- dashboard.html: card-based triage view with priority indicators
- issues.html: issue list with filter bar (org, state) and infinite scroll
- pulls.html: PR list with diff stats and merge status
- issue_detail.html: issue detail with comments, label assignment
- pull_detail.html: PR detail with diff stats and review form
- create_issue.html: issue creation form with searchable repo selector

CSS (static/style.css):
- Mobile-first dark mode with CSS variables
- iPhone safe areas via env(safe-area-inset-bottom)
- Responsive: 2-column grid at 640px+ breakpoint
- Light mode support via prefers-color-scheme
- Card, label, badge, form, button component styles
- HTMX loading indicator and spinner animation
- Reduced motion support

HTMX patterns:
- hx-get with hx-target for SPA-like navigation
- hx-trigger="revealed" for infinite scroll
- hx-post with hx-swap for inline form actions
- Filter bar with hx-trigger="change" and hx-include

Closes leeworks-agents/gitea-mobile#5

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
AI-Manager merged commit cf841ac5d9 into master 2026-03-26 05:05:34 +00:00
Sign in to join this conversation.
No Reviewers
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: leeworks-agents/gitea-mobile#15