feat: phase 2.1 — storage gauge + status pills component pack #3

New issue

Open

opened 2026-05-15 04:53:49 +00:00 by hartle-tech · 0 comments

hartle-tech commented

2026-05-15 04:53:49 +00:00

(Migrated from github.com)

S01E12 — Show The Gauge

Two reusable UI components called out by the v2 mockups, useful across the multi-tab dashboard:

Storage gauge — circular SVG ring showing iPhone storage. Three states: "used" (gray), "about to free" (animated red on hover/during pull), "free" (light). Large percentage in the center. Driven by AFC's `device_info` (or by inferring from the PTP `StorageInfo` we already use).
Status pills — small horizontal pills at the top of every screen: "100% Local", "No Cloud", "Your Data Stays Yours". Already added to the title bar in the v2 rebrand commit (`1bdad84`); broaden to a reusable component.

Reference

`assets/mockups/clean_mobile_app_ui_design_spec.png` — mobile UI spec, but the pills + gauge patterns translate directly to desktop.

Acceptance

Storage gauge SVG component lives in `internal/frontend/dist/` (or a JS module if we end up splitting JS), takes `{used_bytes, total_bytes, freeing_bytes}` props.
Pills component renders a horizontal pill stack from a config array.

## S01E12 — *Show The Gauge* Two reusable UI components called out by the v2 mockups, useful across the multi-tab dashboard: 1. **Storage gauge** — circular SVG ring showing iPhone storage. Three states: \"used\" (gray), \"about to free\" (animated red on hover/during pull), \"free\" (light). Large percentage in the center. Driven by AFC's \`device_info\` (or by inferring from the PTP \`StorageInfo\` we already use). 2. **Status pills** — small horizontal pills at the top of every screen: \"100% Local\", \"No Cloud\", \"Your Data Stays Yours\". Already added to the title bar in the v2 rebrand commit (\`1bdad84\`); broaden to a reusable component. ## Reference \`assets/mockups/clean_mobile_app_ui_design_spec.png\` — mobile UI spec, but the pills + gauge patterns translate directly to desktop. ## Acceptance - Storage gauge SVG component lives in \`internal/frontend/dist/\` (or a JS module if we end up splitting JS), takes \`{used_bytes, total_bytes, freeing_bytes}\` props. - Pills component renders a horizontal pill stack from a config array.

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

hartle-tech/dumpsock#3

No description provided.

Rows
Columns