Skip to content

Add tag legend to Supported Devices page - #176

Merged
snekxs merged 1 commit into
control-panelfrom
feat/supported-tag-legend
Sep 6, 2026
Merged

Add tag legend to Supported Devices page#176
snekxs merged 1 commit into
control-panelfrom
feat/supported-tag-legend

Conversation

@snekxs

Copy link
Copy Markdown
Member

Summary

Adds a small collapsible legend box on the Supported Devices page (/supported) explaining what each status tag means, addressing the report that the colored dot/badge tags had no explanation.

  • Placed directly below the filter toolbar (brand/tag dropdowns + search) and above the first brand accordion row, per the request.
  • Implemented as a <details>/<summary> element (defaults collapsed) so it stays compact and doesn't push extra vertical space when not needed, while still being always-discoverable.
  • Reuses the existing STATUS_LEGEND descriptions and STATUS_DOT colors already used for the tag-filter dropdown tooltips, so the wording/colors match what's already in the code and can't drift:
    • Supported — Confirmed working with a registered driver
    • PR pending — Pull request adding the driver is open
    • Quick Win — Protocol implemented — only PID/config entry missing
    • Test Needed — Driver probably covers it — needs hardware test
    • Driver Needed — No driver exists yet
    • Unknown — Protocol not yet identified
    • Needs Bridge — Not compatible with WebHID — needs the OpenMouse Bridge companion
    • Requested — Live community request
  • Styling matches the existing dark-theme card/border conventions in src/supported.css (--bg-surface, --bg-border, --ink-* tokens).

Files changed

  • src/supported.ts — legend markup, inserted between the toolbar and <main>
  • src/supported.css.tag-legend styles
  • package-lock.json — refreshed after npm install (dependency string unchanged, resolved commit hash updated)

Verification

  • npm run check — build + all 119 tests pass
  • npm run size — CSS 143107/195000 (73%), JS 787587/790000 (100%, still within budget, no BUDGET_BYTES change needed)
  • npm audit --audit-level=high — 0 vulnerabilities
  • Verified package.json dependency strings still exactly match: "@openmouse/protocol": "https://github.com/OpenMouse-Project/mouse-protocol.git", "preact": "^10.29.8" (npm install had normalized the protocol URL to github:...; reverted before committing)

https://claude.ai/code/session_014cM8LdYwaPgZKrwYXp9bZe

Adds a compact, collapsible legend box below the filter/search toolbar
on /supported explaining what each status tag (Supported, PR pending,
Quick Win, Test Needed, Driver Needed, Unknown, Needs Bridge,
Requested) means, reusing the existing STATUS_LEGEND copy and
STATUS_DOT colors already used for the tag dropdown tooltips.
Claude-Session: https://claude.ai/code/session_014cM8LdYwaPgZKrwYXp9bZe
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying openmouse-landing with Cloudflare Pages Cloudflare Pages

Latest commit:2656ed9
Status: ✅ Deploy successful!
Preview URL:https://bb0b7f5e.openmouse-landing.pages.dev
Branch Preview URL:https://feat-supported-tag-legend.openmouse-landing.pages.dev

View logs

@snekxs
snekxs merged commit 12af634 into control-panelSep 6, 2026
5 of 6 checks passed
@snekxs
snekxs deleted the feat/supported-tag-legend branch September 6, 2026 08:10
Sign up for freeto 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.

1 participant

@snekxs