diff --git a/docs/superpowers/specs/2026-03-19-ui-improvement-pass-design.md b/docs/superpowers/specs/2026-03-19-ui-improvement-pass-design.md index 6137568..e7e6d7e 100644 --- a/docs/superpowers/specs/2026-03-19-ui-improvement-pass-design.md +++ b/docs/superpowers/specs/2026-03-19-ui-improvement-pass-design.md @@ -72,8 +72,8 @@ Removing shadow elevation in favour of a subtle border gives cards a cleaner, mo ### Nav drawer brand header Replace the plain `v-list-item` brand block with a styled header: - Container: `pa-4` padding, `bg-surface` background to visually separate from nav list -- Icon: `mdi-download-network` at size 32, `color="primary"` -- Title: `"GallerySubscriber"` in `font-weight-bold text-subtitle-1` +- Icon: `mdi-download-network` at size 32, `color="primary"` *(icon intentionally changed from current `mdi-image-multiple`)* +- Title: `"GallerySubscriber"` in `font-weight-bold text-subtitle-1` *(title intentionally changed from `"Gallery Subscriber"` — one word, no space)* - Subtitle: `"Download Manager"` in `text-caption text-medium-emphasis` - Followed by a `v-divider` @@ -83,12 +83,11 @@ Change from `density="compact"` to `density="comfortable"`. Add `rounded="lg"` a ### App bar - Change `elevation="1"` to `elevation="0"` with `border="b"` — flat bar with bottom border - Add a WebSocket status indicator to the right of the title, before the theme toggle: - - A `v-chip` or icon+dot combination showing three states: - - **Connected:** small green dot (`color="success"`) + tooltip "Connected" - - **Connecting:** amber dot with CSS pulse animation + tooltip "Connecting…" - - **Disconnected:** red dot + tooltip "Disconnected — real-time updates paused" - - Reads from `useWebSocketStore().status` (the store already tracks connection state) - - `variant="text"` so it's unobtrusive + - A small icon button showing two states (the store exposes `isConnected: Ref` only — no "connecting" state is tracked): + - **Connected:** `mdi-circle` at size 10, `color="success"` + `v-tooltip` "Real-time updates active" + - **Disconnected:** `mdi-circle` at size 10, `color="error"` + `v-tooltip` "Disconnected — real-time updates paused" + - Reads from `useWebSocketStore().isConnected` + - Wrapped in a `v-btn variant="text" icon` so it is unobtrusive and the tooltip activates on hover --- @@ -127,7 +126,7 @@ Running items get a subtle animated left border: All three empty panels (active downloads, recent activity, sources needing attention) use the same pattern: ```html
- mdi-[relevant-icon] + mdi-[relevant-icon]
[Primary message]
[Helper text]
@@ -145,15 +144,15 @@ All three empty panels (active downloads, recent activity, sources needing atten - Add `class="border-t"` to the inner table container for visual separation. ### Downloads (`frontend/src/views/Downloads.vue`) -- Add an `exclude_superseded` toggle to the filters row: a `v-switch` or `v-chip` labelled "Hide superseded failures" that adds `exclude_superseded: true` to the fetch params when active. Defaults to `true` (consistent with the dashboard behaviour). -- No table layout changes. +- Add an `exclude_superseded` filter toggle below the existing four filter columns (the current row is already full-width with four `md="3"` columns). Add a new `v-row` directly below the existing filter row containing a single `v-col cols="12"` with a `v-switch` labelled "Hide superseded failures", `density="compact"`, `hide-details`, defaulting to `true`. When true, adds `exclude_superseded: true` to the `loadDownloads()` params. +- The existing four filter columns are unchanged. ### Credentials (`frontend/src/views/Credentials.vue`) Two visual states for platform cards: **Configured:** Card gets `border-color` set to the success colour via inline style or a CSS class. Existing content unchanged. -**Not configured:** Card gets a dashed border (`border: 2px dashed`), the `v-alert` info block is replaced with a concise empty-state message, and the "Add Credentials" button is promoted to `color="primary" variant="flat"` (currently `variant="text"`), making the call to action visually prominent. +**Not configured:** Card gets a dashed border via `:style="{ border: '2px dashed var(--v-border-color)' }"` and `:border="false"` to override the global VCard `border: true` default. (`--v-border-color` is a hex value, not an RGB triplet, so it must be used directly without `rgb()` wrapping.) The `v-alert` info block is replaced with a concise empty-state message, and the "Add Credentials" button is promoted to `color="primary" variant="flat"` (currently `variant="text"`), making the call to action visually prominent. ### Settings & Logs No structural changes — both pages inherit the new palette and card border style from the vuetify.js update automatically.