mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-13 20:27:22 +00:00
Anso
d6ce60d280
* 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.
62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import * as React from 'react';
|
|
import { Tabs as RadixTabs } from 'radix-ui';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
import {
|
|
Tabs,
|
|
TabsHighlight,
|
|
TabsHighlightItem,
|
|
TabsList as AnimateTabsList,
|
|
TabsTrigger as AnimateTabsTrigger,
|
|
} from '@/components/animate-ui/primitives/radix/tabs';
|
|
|
|
const TabsList = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.ComponentProps<typeof AnimateTabsList>
|
|
>(({ className, ...props }, ref) => (
|
|
<AnimateTabsList
|
|
ref={ref}
|
|
className={cn(
|
|
'inline-flex h-9 items-center justify-center rounded-lg bg-glass border border-glass-border p-1 text-muted-foreground',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
));
|
|
TabsList.displayName = 'TabsList';
|
|
|
|
const TabsTrigger = React.forwardRef<
|
|
HTMLButtonElement,
|
|
React.ComponentProps<typeof AnimateTabsTrigger>
|
|
>(({ className, ...props }, ref) => (
|
|
<AnimateTabsTrigger
|
|
ref={ref}
|
|
className={cn(
|
|
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-muted/50 hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow data-[state=active]:hover:bg-background',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
));
|
|
TabsTrigger.displayName = 'TabsTrigger';
|
|
|
|
// Custom TabsContent: uses Radix directly (no Framer Motion `layout` prop)
|
|
// to prevent unintended height expansion when switching tabs.
|
|
const TabsContent = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.ComponentProps<typeof RadixTabs.Content>
|
|
>(({ className, ...props }, ref) => (
|
|
<RadixTabs.Content
|
|
ref={ref}
|
|
className={cn(
|
|
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
|
|
'data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:duration-200',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
));
|
|
TabsContent.displayName = 'TabsContent';
|
|
|
|
export { Tabs, TabsList, TabsTrigger, TabsContent, TabsHighlight, TabsHighlightItem };
|