Colonel Panic 5554ab9f34 dashboard: promote the command buttons to a proper toolbar ...

The first cut wedged the five host-command buttons into the existing
Sniffer device-control-group on the same line as the Connect /
Disconnect buttons. On a real-width header that crammed nine controls
into one row and the visual hierarchy collapsed.

Lift them out into a dedicated sticky toolbar that lives between the
header and the main content:

  - Sticky top:0 with a frosted dark gradient, a soft shadow, and the
    same #8b5cf6 accent the header already uses
  - Sections separated by gradient dividers: DEVICE label + live
    "Online" pulse dot, then [Pull Prev] [Pull Live] [Status], a
    flexible spacer, divider, [Clear Prev] [Clear Live]
  - SVG-iconed buttons (no emojis): download glyph on Pull, refresh
    glyph on Pull Live, info-circle on Status, trash on Clear. 14px
    stroked, currentColor so they pick up each button's accent
  - Colour-keyed by action class: purple/indigo on Pull Prev (matches
    the FLASH replay badge), cyan on Pull Live (matches the RAM
    replay badge), slate on Status, red on the destructive Clear pair
  - Slides in / out via transform + opacity transition when
    setFlockExtraControls() toggles .show — no more raw display flip

Replay badges and the cards they live on got the same treatment so the
toolbar and the data it pulls back are visually linked:

  - Inline SVG icons on the badge itself (a chip-stack glyph for
    FLASH, a waveform for RAM) with a tooltip naming the source
    CMD: that produced them
  - Gradient backgrounds + subtle outer glow keyed to the same
    indigo / cyan as the toolbar buttons
  - Cards carry .replay (and .replay.live-source for RAM dumps) so
    they get a coloured left border and a faint horizontal gradient
    wash instead of a flat tint

Live progress counter while a Pull is in flight. Every replay_detection
socket event bumps a small pill on the in-flight button — "Pulling 17"
becomes "Pulling 18" in real time as the device streams the array.
Reset on the POST response or an error. Single global state since the
firmware protocol serializes one CMD:* at a time, so at most one Pull
is ever live.

Toast got a refresh too: bigger padding, frosted blur, a soft outer
glow matching the variant colour (green / amber / red / indigo), and
a smoother translate-in animation. The Status button now joins fields
with " · " instead of spaces so the one-line status line reads cleanly
at any width.

Buttons in the toolbar use .fcb-btn-label spans for their text so the
busy/done state updates ("Pulling…", "Querying…", "Clearing…") swap
just the label, not the SVG icon. Mobile breakpoint at 800px hides the
dividers and the Online dot, shrinks the label font, and lets the bar
wrap.

2026-05-10 20:39:41 -04:00

..

index.html

dashboard: promote the command buttons to a proper toolbar

2026-05-10 20:39:41 -04:00