feat: implement mobile-first HTMX templates and CSS

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>

internal/templates/create_issue.html

@@ -0,0 +1,42 @@
+{{define "content"}}
+<h1>Create Issue</h1>
+
+<form hx-post="/issues" hx-swap="innerHTML" hx-target="#main-content">
+  <div class="form-group">
+    <label for="repo-select">Repository</label>
+    <select id="repo-select" name="owner_repo" required>
+      <option value="">Select a repository...</option>
+      {{range $org, $repos := .Repos}}
+      <optgroup label="{{$org}}">
+        {{range $repos}}
+        <option value="{{.Owner.Login}}/{{.Name}}">{{.FullName}}</option>
+        {{end}}
+      </optgroup>
+      {{end}}
+    </select>
+    <input type="hidden" name="owner" id="owner-input">
+    <input type="hidden" name="repo" id="repo-input">
+  </div>
+
+  <div class="form-group">
+    <label for="title">Title</label>
+    <input type="text" id="title" name="title" placeholder="Issue title" required>
+  </div>
+
+  <div class="form-group">
+    <label for="body">Description</label>
+    <textarea id="body" name="body" placeholder="Describe the issue..."></textarea>
+  </div>
+
+  <button type="submit" class="btn btn-primary">Create Issue</button>
+</form>
+
+<script>
+  // Split owner/repo from select into hidden fields.
+  document.getElementById('repo-select').addEventListener('change', function() {
+    var parts = this.value.split('/');
+    document.getElementById('owner-input').value = parts[0] || '';
+    document.getElementById('repo-input').value = parts[1] || '';
+  });
+</script>
+{{end}}

internal/templates/dashboard.html

@@ -0,0 +1,26 @@
+{{define "content"}}
+<h1>Dashboard</h1>
+
+{{if .Error}}
+<p class="empty">{{.Error}}</p>
+{{else if not .Items}}
+<p class="empty">No items need attention. Nice work!</p>
+{{else}}
+<div class="card-grid">
+  {{range .Items}}
+  <div class="card" hx-get="/{{if eq .Type "pull"}}pulls{{else}}issues{{end}}/{{.RepoOwner}}/{{.RepoName}}/{{.Number}}" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true">
+    <div class="card-title">
+      {{if eq .Type "pull"}}<span class="type-badge type-pull">PR</span>{{else}}<span class="type-badge type-issue">issue</span>{{end}}
+      {{.Title}}
+    </div>
+    <div class="card-meta">
+      <span>{{.RepoOwner}}/{{.RepoName}} #{{.Number}}</span>
+      {{range .Labels}}
+      <span class="label">{{.}}</span>
+      {{end}}
+    </div>
+  </div>
+  {{end}}
+</div>
+{{end}}
+{{end}}

internal/templates/issue_detail.html

@@ -0,0 +1,43 @@
+{{define "content"}}
+<h1>{{.Issue.Title}}</h1>
+
+<div class="card">
+  <div class="card-meta">
+    <span class="state-open">{{.Issue.State}}</span>
+    <span>{{.Issue.RepoOwner}}/{{.Issue.RepoName}} #{{.Issue.Number}}</span>
+    {{range .Issue.Labels}}
+    <span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
+    {{end}}
+  </div>
+  {{if .Issue.Body}}
+  <div class="card-body">{{.Issue.Body}}</div>
+  {{end}}
+</div>
+
+{{if .Comments}}
+<h2>Comments</h2>
+{{range .Comments}}
+<div class="comment">
+  <div class="comment-header">
+    <strong>{{.User}}</strong>
+    <span>{{.CreatedAt}}</span>
+  </div>
+  <div class="comment-body">{{.Body}}</div>
+</div>
+{{end}}
+{{end}}
+
+<div class="card" style="margin-top:1rem;">
+  <h2>Actions</h2>
+  <form hx-post="/issues/{{.Issue.RepoOwner}}/{{.Issue.RepoName}}/{{.Issue.Number}}/labels" hx-swap="outerHTML" style="margin-bottom:0.5rem;">
+    <div class="filter-bar" style="margin-bottom:0.5rem;">
+      <select name="label_id">
+        {{range .AvailableLabels}}
+        <option value="{{.ID}}">{{.Name}}</option>
+        {{end}}
+      </select>
+      <button type="submit" class="btn btn-secondary" style="width:auto;padding:0.5rem 1rem;">Apply Label</button>
+    </div>
+  </form>
+</div>
+{{end}}

internal/templates/issues.html

@@ -0,0 +1,44 @@
+{{define "content"}}
+<h1>Issues</h1>
+
+<div class="filter-bar">
+  <select name="org" hx-get="/issues" hx-trigger="change" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true" hx-include="[name='state']">
+    <option value="">All orgs</option>
+    {{range .Orgs}}
+    <option value="{{.}}" {{if eq . $.SelectedOrg}}selected{{end}}>{{.}}</option>
+    {{end}}
+  </select>
+  <select name="state" hx-get="/issues" hx-trigger="change" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true" hx-include="[name='org']">
+    <option value="open" {{if eq .SelectedState "open"}}selected{{end}}>Open</option>
+    <option value="closed" {{if eq .SelectedState "closed"}}selected{{end}}>Closed</option>
+  </select>
+</div>
+
+{{if .Error}}
+<p class="empty">{{.Error}}</p>
+{{else if not .Issues}}
+<p class="empty">No issues found.</p>
+{{else}}
+<div id="issue-list">
+  {{range .Issues}}
+  <div class="card" hx-get="/issues/{{.RepoOwner}}/{{.RepoName}}/{{.Number}}" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true">
+    <div class="card-title">{{.Title}}</div>
+    <div class="card-meta">
+      <span>{{.RepoOwner}}/{{.RepoName}} #{{.Number}}</span>
+      {{range .Labels}}
+      <span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
+      {{end}}
+      {{if .Assignee}}
+      <span>{{.Assignee.Login}}</span>
+      {{end}}
+    </div>
+  </div>
+  {{end}}
+  {{if .HasMore}}
+  <div class="scroll-sentinel" hx-get="/issues?page={{.NextPage}}&org={{.SelectedOrg}}&state={{.SelectedState}}" hx-trigger="revealed" hx-swap="outerHTML" hx-target="this">
+    <div class="spinner htmx-indicator"></div>
+  </div>
+  {{end}}
+</div>
+{{end}}
+{{end}}

internal/templates/layout.html

@@ -0,0 +1,45 @@
+{{define "layout"}}<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="theme-color" content="#161b22">
+  <link rel="manifest" href="/static/manifest.json">
+  <link rel="apple-touch-icon" href="/static/icon-192.png">
+  <title>{{.Title}} — Gitea Mobile</title>
+  <link rel="stylesheet" href="/static/style.css">
+  <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+</head>
+<body>
+  <div class="content" id="main-content">
+    {{template "content" .}}
+  </div>
+  <nav class="bottom-nav">
+    <a href="/" {{if eq .ActiveTab "dashboard"}}class="active"{{end}}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg>
+      Dashboard
+    </a>
+    <a href="/issues" {{if eq .ActiveTab "issues"}}class="active"{{end}}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+      Issues
+    </a>
+    <a href="/pulls" {{if eq .ActiveTab "pulls"}}class="active"{{end}}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M6 21V9a9 9 0 009 9"/></svg>
+      PRs
+    </a>
+    <a href="/settings" {{if eq .ActiveTab "settings"}}class="active"{{end}}>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+      Settings
+    </a>
+  </nav>
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/static/sw.js').catch(function(err) {
+        console.log('SW registration failed:', err);
+      });
+    }
+  </script>
+</body>
+</html>{{end}}

internal/templates/pull_detail.html

@@ -0,0 +1,47 @@
+{{define "content"}}
+<h1>{{.Pull.Title}}</h1>
+
+<div class="card">
+  <div class="card-meta">
+    <span class="type-badge type-pull">PR</span>
+    <span class="state-open">{{.Pull.State}}</span>
+    <span>{{.Pull.RepoOwner}}/{{.Pull.RepoName}} #{{.Pull.Number}}</span>
+    {{range .Pull.Labels}}
+    <span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
+    {{end}}
+  </div>
+  <div class="card-meta" style="margin-top:0.5rem;">
+    <span class="diff-add">+{{.Pull.Additions}}</span>
+    <span class="diff-del">-{{.Pull.Deletions}}</span>
+    {{if .Pull.Mergeable}}<span style="color:var(--accent-green);">Mergeable</span>{{end}}
+  </div>
+  {{if .Pull.Body}}
+  <div class="card-body">{{.Pull.Body}}</div>
+  {{end}}
+</div>
+
+<div class="card" style="margin-top:1rem;">
+  <h2>Submit Review</h2>
+  <form hx-post="/pulls/{{.Pull.RepoOwner}}/{{.Pull.RepoName}}/{{.Pull.Number}}/review" hx-swap="outerHTML">
+    <div class="form-group">
+      <label for="review-body">Comment</label>
+      <textarea id="review-body" name="body" placeholder="Leave a review comment..."></textarea>
+    </div>
+    <div class="review-options">
+      <label class="review-option">
+        <input type="radio" name="event" value="COMMENT" checked>
+        <span>Comment</span>
+      </label>
+      <label class="review-option">
+        <input type="radio" name="event" value="APPROVED">
+        <span>Approve</span>
+      </label>
+      <label class="review-option">
+        <input type="radio" name="event" value="REQUEST_CHANGES">
+        <span>Request Changes</span>
+      </label>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit Review</button>
+  </form>
+</div>
+{{end}}

internal/templates/pulls.html

@@ -0,0 +1,38 @@
+{{define "content"}}
+<h1>Pull Requests</h1>
+
+<div class="filter-bar">
+  <select name="org" hx-get="/pulls" hx-trigger="change" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true">
+    <option value="">All orgs</option>
+    {{range .Orgs}}
+    <option value="{{.}}" {{if eq . $.SelectedOrg}}selected{{end}}>{{.}}</option>
+    {{end}}
+  </select>
+</div>
+
+{{if .Error}}
+<p class="empty">{{.Error}}</p>
+{{else if not .Pulls}}
+<p class="empty">No open pull requests found.</p>
+{{else}}
+<div id="pull-list">
+  {{range .Pulls}}
+  <div class="card" hx-get="/pulls/{{.RepoOwner}}/{{.RepoName}}/{{.Number}}" hx-target="#main-content" hx-swap="innerHTML" hx-push-url="true">
+    <div class="card-title">
+      <span class="type-badge type-pull">PR</span>
+      {{.Title}}
+    </div>
+    <div class="card-meta">
+      <span>{{.RepoOwner}}/{{.RepoName}} #{{.Number}}</span>
+      {{range .Labels}}
+      <span class="label" style="color:#{{.Color}};border:1px solid #{{.Color}}">{{.Name}}</span>
+      {{end}}
+      <span class="diff-add">+{{.Additions}}</span>
+      <span class="diff-del">-{{.Deletions}}</span>
+      {{if .Mergeable}}<span style="color:var(--accent-green);font-size:0.7rem;">mergeable</span>{{end}}
+    </div>
+  </div>
+  {{end}}
+</div>
+{{end}}
+{{end}}