gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-09-04 06:35:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make Reduced motion gate overlays, standardize the tab band, and polish fleet/snapshots (#1504)

Browse Source 
* fix: address review feedback on motion, fleet band, and snapshots

- Reduced motion now also skips the animate-ui overlay open/close animations
  (dialog, sheet, popover, dropdown-menu) via a shared useReducedTransition that
  zeroes the transition when reduced motion is active; MotionConfig alone only
  neutralized transform/layout, leaving the opacity/blur fade.
- Fleet tab band: flatten the list's own pill band so the tabs sit in a single
  full-width band instead of a nested second band.
- Fleet Overview: label the node-update button "Node Update"; the add-node
  button becomes a ChartNetwork icon that opens Settings > Nodes (outline style,
  matching the node-update button) instead of the add-node modal.
- Blueprint deployments empty state: drive the serif headings from the theme
  heading-style token so Calm drops the italic.
- Snapshots: move the per-stack Restore onto the stack header row (right side),
  matching the ghost action style.

* feat: standardize the tab band on Security and add a tab hover state

- Apply the Fleet full-width tab band to the Security page (single band, the
  list's pill background flattened so the tabs sit directly in it).
- Add a hover highlight to tabs so the band reads as interactive, not flat;
  the active tab is unaffected.

* fix: drive reduced-motion transitions from the app setting, not the OS query

useReducedTransition called framer-motion's useReducedMotion(), which only
reflects the OS prefers-reduced-motion media query and ignores our MotionConfig
/ appearance toggle, so dialogs kept animating with the setting on. Read the
app's useReducedMotion selector instead. Verified: with the setting on, the
dialog opacity snaps 0->1 in one frame; with it off, it ramps over the spring.

* feat: standardize stack-detail body text to text-xs and add a log expand toggle

- Bump the anatomy panel body text (rows, field values, warnings) and the
  structured log lines from 10/11/12px to text-xs (12px), leaving the uppercase
  kicker labels and the log level/source badges as-is.
- Add an expand control next to the log download button that collapses the
  Command Center so the logs pane fills the left column; toggles back to restore.
This commit is contained in:
Anso
2026-06-28 08:17:34 -04:00
committed by GitHub
parent 04e69021e0
commit d6ce60d280
17 changed files with 167 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/FleetSnapshots.tsx
+28 -30
View File
@@ -590,22 +590,34 @@ export default function FleetSnapshots() {
.find(s => s.nodeId === node.nodeId && s.stackName === stack.stackName)?.dossier;
return (
<div key={stackKey}>
<button
onClick={() => toggleStack(stackKey)}
className="flex items-center gap-2 w-full px-3 py-2 text-left rounded-md hover:bg-muted/50 transition-colors"
>
{stackExpanded
? <ChevronDown className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
: <ChevronRight className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
}
<Layers className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
<span className="text-xs font-mono font-medium flex-1 truncate">
{stack.stackName}
</span>
<Badge variant="outline" className="text-[10px] font-mono tabular-nums px-1.5 py-0 h-4 shrink-0">
{stack.files.length} file{stack.files.length !== 1 ? 's' : ''}
</Badge>
</button>
<div className="flex items-center gap-2 pr-3 rounded-md hover:bg-muted/50 transition-colors">
<button
onClick={() => toggleStack(stackKey)}
className="flex items-center gap-2 flex-1 min-w-0 px-3 py-2 text-left"
>
{stackExpanded
? <ChevronDown className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
: <ChevronRight className="w-3.5 h-3.5 shrink-0 text-muted-foreground" />
}
<Layers className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
<span className="text-xs font-mono font-medium flex-1 truncate">
{stack.stackName}
</span>
<Badge variant="outline" className="text-[10px] font-mono tabular-nums px-1.5 py-0 h-4 shrink-0">
{stack.files.length} file{stack.files.length !== 1 ? 's' : ''}
</Badge>
</button>
{isAdmin && (
<RestoreButton
nodeId={node.nodeId}
nodeName={node.nodeName}
stackName={stack.stackName}
hasDossier={!!dossier}
restoring={restoringStack === `${node.nodeId}:${stack.stackName}`}
onRestore={handleRestore}
/>
)}
</div>
{/* Files */}
{stackExpanded && (
@@ -650,20 +662,6 @@ export default function FleetSnapshots() {
{/* Preserved dossier notes (read-only) */}
{dossier && <DossierBlock dossier={dossier} />}
{/* Restore (admin only), right-aligned to match the file action row */}
{isAdmin && (
<div className="flex justify-end px-3">
<RestoreButton
nodeId={node.nodeId}
nodeName={node.nodeName}
stackName={stack.stackName}
hasDossier={!!dossier}
restoring={restoringStack === `${node.nodeId}:${stack.stackName}`}
onRestore={handleRestore}
/>
</div>
)}
</div>
)}
</div>