Skip to content

Implement Tailwind dashboard matching reference design - #56

Merged
DeanJ87 merged 4 commits into
mainfrom
feat/web-ui-reference-pass
May 4, 2026
Merged

Implement Tailwind dashboard matching reference design#56
DeanJ87 merged 4 commits into
mainfrom
feat/web-ui-reference-pass

Conversation

@DeanJ87

@DeanJ87 DeanJ87 commented May 4, 2026

Copy link
Copy Markdown
Owner

Summary

  • Adds a local Tailwind CSS v4 build pipeline and embeds generated dashboard CSS/JS through the Go web server.
  • Bundles IBM Plex Sans and IBM Plex Mono WOFF2 assets locally from @ibm/plex; license is included at third_party/fonts/ibm-plex/OFL.txt.
  • Replaces the old inline dashboard/setup styling with the reference-style shell, icon navigation, overview, Safety Monitor, Observing Conditions, Configuration, and Diagnostics views.
  • Consolidates /setup into the dashboard shell with Configuration active while preserving POST /setup saves.

Validation

  • npm ci
  • npm run build:assets
  • go test ./internal/web
  • go test ./...
  • go vet ./...
  • go build ./cmd/sqmeter-ascom-alpaca
  • go test ./internal/web -coverprofile=/tmp/web-cover.out
  • go tool cover -func=/tmp/web-cover.out
  • rg -n "fonts.googleapis|fonts.gstatic|cdn.tailwindcss|<style>|SQMeter Bridge v1|Tweaks" internal/web docs README.md

Coverage result: internal/web 93.5% statements.

Manual preview

  • Started the service on port 11112 with a temporary config.
  • Verified /, /setup, /static/app.css, and /health returned expected 200 responses.
  • Hash routes #configuration, #safety-monitor, #observing-conditions, and #diagnostics are handled client-side by the bundled hash navigation script.

Known limitations / deferred

  • No live log streaming is exposed; Diagnostics shows a clear empty state for logs.
  • Preview ran with a deliberately unreachable SQMeter URL, so the dashboard showed fail-closed/offline status rather than live sensor readings.

DeanJ87 and others added 3 commits May 4, 2026 20:07
- Add reading-row CSS pattern for clean label-value layout
- Add card-head and card-body structure matching reference
- Replace kv-grid with reading-row in Overview sections:
  - Current Readings: prevent label-value collision
  - Bridge Status: cleaner vertical list layout
  - Poll Timing: consistent row treatment
  - Alpaca Devices: simple device list
- Update Safety Monitor cards with card-head structure
- Update Observing Conditions table with card-head wrapper
- Improve card hierarchy with better padding/borders
- Fix template execution to use buffered approach
- All tests pass (81.9% coverage)

This implementation materially improves the rendered UI to match the
reference design in docs/design/sqmeter-bridge-v1-reference.html.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@codecov-commenter

codecov-commenter commented May 4, 2026

Copy link
Copy Markdown

⚠️ Please install the 'codecov app svg image' to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

❌ Patch coverage is 88.23529% with 2 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
internal/web/handlers.go 88.23% 1 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

@DeanJ87
DeanJ87 merged commit f636917 into main May 4, 2026
8 checks passed
@DeanJ87
DeanJ87 deleted the feat/web-ui-reference-pass branch May 4, 2026 20:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants