mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-30 03:59:41 +00:00
fix: polish sidebar and masthead chrome, scroll setup preflight (#1522)
Remove redundant nav and label dots, move desktop masthead status to animated left rails, and let AuthCanvas scroll long preflight content on small viewports.
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Bell } from 'lucide-react';
|
||||
import { MastheadRail } from '@/components/ui/MastheadRail';
|
||||
type FleetHealth = 'healthy' | 'degraded' | 'critical';
|
||||
|
||||
interface FleetMastheadProps {
|
||||
@@ -37,24 +38,21 @@ function useTicker(intervalMs: number): number {
|
||||
return now;
|
||||
}
|
||||
|
||||
const healthConfig: Record<FleetHealth, { label: string; dotClass: string; textClass: string; railClass: string; tintClass: string }> = {
|
||||
const healthConfig: Record<FleetHealth, { label: string; textClass: string; railClass: string; tintClass: string }> = {
|
||||
healthy: {
|
||||
label: 'The fleet',
|
||||
dotClass: 'bg-success shadow-[0_0_0_3px_color-mix(in_oklch,var(--success)_20%,transparent)]',
|
||||
textClass: 'text-stat-value',
|
||||
railClass: 'bg-brand',
|
||||
tintClass: 'from-brand/[0.06] via-transparent to-transparent',
|
||||
},
|
||||
degraded: {
|
||||
label: 'The fleet',
|
||||
dotClass: 'bg-warning shadow-[0_0_0_3px_color-mix(in_oklch,var(--warning)_22%,transparent)]',
|
||||
textClass: 'text-warning',
|
||||
railClass: 'bg-warning',
|
||||
tintClass: 'from-warning/[0.06] via-transparent to-transparent',
|
||||
},
|
||||
critical: {
|
||||
label: 'The fleet',
|
||||
dotClass: 'bg-destructive shadow-[0_0_0_3px_color-mix(in_oklch,var(--destructive)_24%,transparent)]',
|
||||
textClass: 'text-destructive',
|
||||
railClass: 'bg-destructive',
|
||||
tintClass: 'from-destructive/[0.06] via-transparent to-transparent',
|
||||
@@ -102,13 +100,9 @@ export function FleetMasthead({
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel transition-colors mb-4">
|
||||
<div className={`pointer-events-none absolute inset-0 bg-gradient-to-r ${config.tintClass}`} />
|
||||
<div className={`absolute inset-y-0 left-0 w-[3px] ${config.railClass}`} />
|
||||
<MastheadRail variant={level === 'healthy' ? 'shimmer' : 'glow'} className={config.railClass} />
|
||||
<div className="relative grid grid-cols-[auto_1fr_auto] items-center gap-6 py-5 pl-7 pr-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`h-2.5 w-2.5 rounded-full ${config.dotClass} ${level === 'healthy' ? '' : 'animate-[pulse_2.4s_ease-in-out_infinite]'}`}
|
||||
/>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className={`font-heading text-3xl leading-none tracking-tight ${config.textClass}`}>
|
||||
{config.label}
|
||||
|
||||
Reference in New Issue
Block a user