feat: full-width mobile edit buttons and add Air live-reload (#46)

* feat: full-width mobile edit buttons and add Air live-reload

Make edit page action buttons stretch to fill row width on mobile
(two per row) while keeping natural sizing on desktop. Also add Air
config and `make dev` target for live-reload during development.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: address PR review - air.toml improvements and cancel button flex

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: add items-center to cancel button and use npx tailwindcss

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: absolutely position spinner in submit buttons to prevent text shift

The htmx-indicator spinner was occupying layout space inside the flex
button, nudging the button text off-center when visible. Changed the
spinner to absolute positioning (opacity-based toggle) and added left
padding to the button to reserve space for the spinner overlay.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: separate spinner positioning and rotation onto different elements

Move animate-spin from the .htmx-indicator span to an inner wrapper so
that the translateY(-50%) centering on the outer element is not overridden
by the spin keyframes' transform: rotate().

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: drywaters

.air.toml

@@ -0,0 +1,20 @@
+root = "."
+tmp_dir = "tmp"
+
+[build]
+  # Run templ generate and tailwind before building
+  pre_cmd = ["templ generate", "npx tailwindcss -i ./tailwind/styles.css -o ./static/styles.css"]
+  cmd = "go build -o ./tmp/main ./cmd/learnd"
+  entrypoint = ["./tmp/main"]
+  delay = 500
+  include_ext = ["go", "templ", "css"]
+  include_dir = ["cmd", "internal", "tailwind"]
+  exclude_dir = ["tmp", "bin", "static", "migrations", "node_modules"]
+  exclude_regex = ["_templ\\.go$"]
+  kill_delay = "1s"
+
+[log]
+  main_only = false
+
+[misc]
+  clean_on_exit = true

.gitignore

@@ -1,5 +1,6 @@
 # Binaries
 bin/
+tmp/
 *.exe
 *.exe~
 *.dll

Makefile

@@ -1,5 +1,5 @@
 .DEFAULT_GOAL := help
-.PHONY: help run build test docker-buildx tail-watch tail-prod migrate migrate-down migrate-status templ templ-watch
+.PHONY: help run dev build test docker-buildx tail-watch tail-prod migrate migrate-down migrate-status templ templ-watch
 
 # Include local.mk for local environment variables (API keys, DATABASE_URL, etc.)
 -include local.mk
@@ -15,6 +15,9 @@ templ-watch: ## Watch templ files and regenerate on change
 run: templ tail-prod ## Generate templ, build Tailwind, and run the app
 	go run ./cmd/learnd
 
+dev: ## Live-reload dev server (watches .go, .templ, .css files)
+	air
+
 build: templ tail-prod ## Generate templ, build Tailwind, and build production binary
 	go build -o bin/learnd ./cmd/learnd
 

internal/ui/pages/capture.templ

@@ -106,9 +106,11 @@ templ CapturePage(entries []ui.EntryView, prefillURL string) {
 
 						<!-- Submit Button -->
 						<div class="flex justify-end">
-							<button type="submit" class="btn-primary flex items-center gap-2">
-								<span class="htmx-indicator animate-spin">
-									@components.SpinnerIcon()
+							<button type="submit" class="btn-primary relative flex items-center justify-center pl-6">
+								<span class="htmx-indicator">
+									<span class="animate-spin inline-block">
+										@components.SpinnerIcon()
+									</span>
 								</span>
 								<span>Save Entry</span>
 							</button>

internal/ui/pages/capture_templ.go

@@ -199,14 +199,14 @@ templ EditPage(entry ui.EntryView) {
 						</div>
 
 						<!-- Actions -->
-						<div class="flex flex-col items-start sm:flex-row sm:items-center gap-3 pt-6 border-t" style="border-color: var(--color-warm-gray);">
+						<div class="flex flex-col sm:flex-row sm:items-center gap-3 pt-6 border-t" style="border-color: var(--color-warm-gray);">
 							<!-- Re-sync actions (left side) -->
-							<div class="flex items-center gap-2">
+							<div class="flex items-center gap-2 w-full sm:w-auto">
 								<button
 									type="button"
 									hx-post={ fmt.Sprintf("/api/entries/%s/refresh-enrichment", entry.ID) }
 									hx-swap="none"
-									class="btn-secondary flex items-center gap-1.5"
+									class="btn-secondary flex-1 sm:flex-initial flex items-center justify-center gap-1.5"
 									title="Re-fetch metadata from source"
 								>
 									@components.RefreshIcon()
@@ -216,7 +216,7 @@ templ EditPage(entry ui.EntryView) {
 									type="button"
 									hx-post={ fmt.Sprintf("/api/entries/%s/refresh-summary", entry.ID) }
 									hx-swap="none"
-									class="btn-secondary flex items-center gap-1.5"
+									class="btn-secondary flex-1 sm:flex-initial flex items-center justify-center gap-1.5"
 									title="Regenerate AI summary"
 								>
 									@components.RefreshIcon()
@@ -225,16 +225,18 @@ templ EditPage(entry ui.EntryView) {
 							</div>
 
 							<!-- Main actions (right side) -->
-							<div class="flex items-center gap-3 sm:ml-auto">
+							<div class="flex items-center gap-3 w-full sm:w-auto sm:ml-auto">
 								<a
 									href="/"
-									class="btn-secondary"
+									class="btn-secondary flex-1 sm:flex-initial flex items-center justify-center"
 								>
 									Cancel
 								</a>
-								<button type="submit" class="btn-primary flex items-center gap-2">
-									<span class="htmx-indicator animate-spin">
-										@components.SpinnerIcon()
+								<button type="submit" class="btn-primary flex-1 sm:flex-initial relative flex items-center justify-center pl-6">
+									<span class="htmx-indicator">
+										<span class="animate-spin inline-block">
+											@components.SpinnerIcon()
+										</span>
 									</span>
 									<span>Save Changes</span>
 								</button>

internal/ui/pages/edit.templ

@@ -262,11 +262,15 @@
 
 	/* HTMX loading states */
 	.htmx-request .htmx-indicator {
-		display: inline-block;
+		opacity: 1;
 	}
 
 	.htmx-indicator {
-		display: none;
+		opacity: 0;
+		position: absolute;
+		left: 0.75rem;
+		top: 50%;
+		transform: translateY(-50%);
 	}
 
 	/* Toast notifications */