Skip to content

Add rearrangeable drag-and-drop dashboard#78

Merged
Krippler merged 1 commit into
mainfrom
claude/rearrangeable-dashboard
Jul 17, 2026
Merged

Add rearrangeable drag-and-drop dashboard#78
Krippler merged 1 commit into
mainfrom
claude/rearrangeable-dashboard

Conversation

@Krippler

Copy link
Copy Markdown
Owner

What

Ports Fresharr's dashboard layout system to Starr: the main panels are now drag-to-rearrange cards.

  • Hover a panel header → a grip handle () appears; drag it to reorder a card or move it to another column.
  • On wide screens the panels flow into responsive columns — 3 (≥1500px) / 2 (≥980px) / 1 (narrow). Each width keeps its own saved arrangement.
  • Layout persists per-browser in localStorage (same mechanism as the existing panel collapse-state — no backend/API changes).
  • A Reset layout button (appears once you've customized) restores the default.
  • The transient run-status widgets (shutdown warning, progress bar, result tiles) are lifted into a fixed strip above the grid, so live repair status never jumps around mid-run.
  • Progressive enhancement: on narrow/mobile it's the original single stacked column, in the original order. With JS off it's unchanged.

Cards: Connection, Repair Log, Operations, Trends, Backups, Schedules, Notifications. The app-tab row stays fixed at the top.

Implementation

All in app/templates/index.html:

  • CSS: .dashboard flex columns, .dash-card, hover-reveal .drag-handle, drag/drop states.
  • JS: responsive column count, masonry distribution, HTML5 drag-and-drop with live reordering, per-width localStorage persistence, reset, and a debounced resize re-flow. Grip handles are injected into existing headers, and toggleSection ignores handle clicks so dragging a collapsible panel doesn't toggle it.

Verification

Driven in a headless Chromium (screenshots captured):

  • ✅ 3-column masonry at 1680px; run-status widgets correctly lifted into the fixed strip
  • ✅ Drag reorder + move between columns
  • ✅ Per-width layout persists across reload; Reset layout clears it and restores default
  • ✅ Collapses to a single original-order column at 760px
  • ✅ 122 Python tests still green (template renders, div balance intact)

Staged under ## [Unreleased]. This is a feature, so if you release it, it'd be the 1.3.0 minor bump. Want me to cut it, or leave it on edge for you to try first?

🤖 Generated with Claude Code


Generated by Claude Code

The main panels are now drag-to-rearrange cards, modeled on Fresharr's
layout system. Hover a panel header for a grip handle; drag to reorder or
move a card between responsive columns (3/2/1 by width). Each width keeps
its own arrangement, persisted per-browser in localStorage alongside the
existing collapse-state. A "Reset layout" button restores the default.

The transient run-status widgets (shutdown warning, progress bar, result
tiles) are lifted into a fixed strip above the grid so live repair status
never moves mid-run. On narrow screens it degrades to the original single
stacked column, so it's a pure progressive-enhancement — no API/backend
changes.

Verified in a headless browser: 3/2/1 responsive columns, drag reorder,
per-width persistence across reload, reset, and single-column fallback.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013ffp2b19PUmzEU1fxpnURA
@Krippler
Krippler merged commit 8f8410f into main Jul 17, 2026
3 of 4 checks passed
@Krippler Krippler mentioned this pull request Jul 17, 2026
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