gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-08-29 11:47:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add Reduced motion setting and polish chrome, files, and stack-detail (#1501)

Browse Source 
A batch of UI/UX polish:

- New independent "Reduced motion" appearance setting (separate from Reduced
  effects). Drives framer-motion via MotionConfig and clamps CSS transitions via
  data-motion on <html>; toasts are unaffected. Defaults off (OS preference
  still honored).
- Stack-detail Files tab: rename "Files & Volumes" to "Files", add a persisted
  word-wrap toggle to the file viewer (default on), and add a fullscreen toggle
  that collapses the Command Center + Logs column so the editor fills the width.
- Create Stack > From Git: remove the nested scroll clamp so the deploy toggle
  and footer are reachable.
- Fleet: full-width tab band with icon-only Refresh / Export Dossier, icon-only
  Check-for-updates / Add-node on the Overview toolbar, theme-aware empty-state
  headings (calm drops the italic), and fix the Actions card body overlapping
  the action-row divider.
- Snapshots: restyle Restore and Restore all to the ghost button design used by
  View / Preview / Download, and right-align the per-stack Restore.
- Settings sidebar: App Store gradient active style and standard font size.
- Compose Doctor: dismiss the high-risk banner (and clear the tab dot) until the
  findings change, via a shared fingerprint-keyed hook.
- Stack-detail Storage: link the "no recent fleet snapshot" warning to the Fleet
  Snapshots tab (FleetView tabs are now controlled to support the deep link).
This commit is contained in:
Anso
2026-06-28 06:18:02 -04:00
committed by GitHub
parent 083442d5ea
commit b5810a9b55
27 changed files with 489 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/fleet/FleetEmptyState.tsx
+7 -6
View File
@@ -8,15 +8,16 @@ interface FleetTabHeadingProps {
}
/**
* Standardized Fleet tab header: italic-serif title and muted subtitle on the
* Standardized Fleet tab header: heading-styled title and muted subtitle on the
* left, an optional primary action on the right. Rendered in both empty and
* populated states so the tab chrome stays consistent.
* populated states so the tab chrome stays consistent. The title follows the
* theme heading style (signature italic or calm) via .font-heading.
*/
export function FleetTabHeading({ title, subtitle, action }: FleetTabHeadingProps) {
return (
<div className="flex items-center justify-between gap-3">
<div>
<h2 className="font-display italic text-[1.5rem] leading-tight text-stat-value">{title}</h2>
<h2 className="font-heading text-[1.5rem] leading-tight text-stat-value">{title}</h2>
<p className="text-sm text-stat-subtitle">{subtitle}</p>
</div>
{action}
@@ -44,15 +45,15 @@ interface FleetEmptyCardProps {
}
/**
* Minimal empty-state card: centered icon, italic headline, muted one-line
* description, optional CTA.
* Minimal empty-state card: centered icon, heading-styled headline, muted
* one-line description, optional CTA.
*/
export function FleetEmptyCard({ icon: Icon, title, description, action }: FleetEmptyCardProps) {
return (
<div className="mx-auto max-w-xl rounded-xl border border-card-border/60 bg-popover/30 p-8 text-center space-y-4">
<Icon className="mx-auto w-8 h-8 text-stat-subtitle" />
<div>
<h3 className="font-display italic text-[1.25rem] text-stat-value">{title}</h3>
<h3 className="font-heading text-[1.25rem] text-stat-value">{title}</h3>
<p className="text-sm text-stat-subtitle leading-relaxed mt-1">{description}</p>
</div>
{action}