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

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
@@ -13,7 +13,7 @@ import HomeDashboard from '../HomeDashboard';
import type { NotificationItem } from '../dashboard/types';
import type { ScheduleTaskPrefill } from '../ScheduledOperationsView';
import type { ActiveView } from './hooks/useViewNavigationState';
import type { SecurityTab } from '@/lib/events';
import type { SecurityTab, FleetTab } from '@/lib/events';
// Paid-tier views are loaded on demand. Their internal PaidGate /
// CapabilityGate wrappers render
@@ -89,6 +89,8 @@ export interface ViewRouterProps {
onSecurityTabChange: (tab: SecurityTab) => void;
fleetUpdatesIntent?: { tab: 'nodes' | 'changelog' } | null;
onFleetUpdatesIntentConsumed?: () => void;
fleetTab?: FleetTab | null;
onFleetTabConsumed?: () => void;
// Render slot for the inline editor view. Kept as a callback so the
// (large) editor JSX is only allocated when activeView === 'editor',
// not on every parent render that lands on a different view.
@@ -116,6 +118,8 @@ export function ViewRouter({
onSecurityTabChange,
fleetUpdatesIntent,
onFleetUpdatesIntentConsumed,
fleetTab,
onFleetTabConsumed,
renderEditor,
}: ViewRouterProps): ReactNode {
const { can } = useAuth();
@@ -183,6 +187,8 @@ export function ViewRouter({
onNavigateToNode={onFleetNavigateToNode}
fleetUpdatesIntent={fleetUpdatesIntent}
onFleetUpdatesIntentConsumed={onFleetUpdatesIntentConsumed}
fleetTab={fleetTab}
onFleetTabConsumed={onFleetTabConsumed}
/>
</LazyView>
</CapabilityGate>