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

feat(ui): wire overlay popovers to density tokens (#695)

Browse Source 
Swap hardcoded Tailwind padding on NodeSwitcher, UserProfileDropdown,
and NotificationPanel for var(--density-row-x) / --density-row-y /
--density-cell-y / --density-tile-y custom properties so the three
sidebar/header overlays now tighten when the Appearance setting is
switched to Compact, matching the reference pattern in ui/table.tsx.
This commit is contained in:
Anso
2026-04-19 12:36:59 -04:00
committed by GitHub
parent e721742560
commit 72a1ecd192
3 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/NodeSwitcher.tsx
+3 -3
View File
@@ -99,7 +99,7 @@ export function NodeSwitcher({ onManageNodes }: NodeSwitcherProps) {
<div className="relative overflow-hidden">
<div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-brand/[0.05] via-transparent to-transparent" />
<div className="absolute inset-y-0 left-0 w-[2px] bg-brand/60" />
<div className="relative flex items-center justify-between px-5 py-3.5">
<div className="relative flex items-center justify-between px-[var(--density-row-x)] py-[var(--density-tile-y)]">
<div className="flex items-baseline gap-2.5">
<span className="font-display text-xl italic leading-none text-stat-value">
Connected
@@ -136,7 +136,7 @@ export function NodeSwitcher({ onManageNodes }: NodeSwitcherProps) {
}}
aria-current={isActive ? 'true' : undefined}
className={cn(
'group relative flex w-full items-center gap-3 px-5 py-2.5 text-left transition-colors',
'group relative flex w-full items-center gap-3 px-[var(--density-row-x)] py-[var(--density-row-y)] text-left transition-colors',
'hover:bg-accent focus-visible:bg-accent focus-visible:outline-none',
)}
>
@@ -182,7 +182,7 @@ export function NodeSwitcher({ onManageNodes }: NodeSwitcherProps) {
setOpen(false);
onManageNodes();
}}
className="flex w-full items-center gap-2.5 px-5 py-2.5 text-left text-sm text-stat-value transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
className="flex w-full items-center gap-2.5 px-[var(--density-row-x)] py-[var(--density-row-y)] text-left text-sm text-stat-value transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
>
<Settings2 className="h-4 w-4 text-stat-icon" strokeWidth={1.5} />
<span className="flex-1 truncate">Manage nodes</span>
frontend/src/components/NotificationPanel.tsx
+5 -5
View File
@@ -169,7 +169,7 @@ export function NotificationPanel({
<div className="relative overflow-hidden">
<div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-brand/[0.05] via-transparent to-transparent" />
<div className="absolute inset-y-0 left-0 w-[2px] bg-brand/60" />
<div className="relative flex items-center justify-between px-5 py-3.5">
<div className="relative flex items-center justify-between px-[var(--density-row-x)] py-[var(--density-tile-y)]">
<div className="flex items-baseline gap-2.5">
<span className="font-display text-xl italic leading-none text-stat-value">
Notifications
@@ -207,7 +207,7 @@ export function NotificationPanel({
</div>
{/* Filter segment */}
<div className="flex items-center justify-end border-t border-card-border/60 px-5 py-2.5">
<div className="flex items-center justify-end border-t border-card-border/60 px-[var(--density-row-x)] py-[var(--density-row-y)]">
<SegmentedControl
value={filter}
options={filterOptions}
@@ -223,7 +223,7 @@ export function NotificationPanel({
<div className="max-h-[480px] overflow-y-auto border-t border-card-border/60">
{groups.map((group) => (
<div key={group.label}>
<div className="sticky top-0 z-10 border-b border-card-border/40 bg-popover/95 px-5 py-1.5 font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle backdrop-blur-[10px] backdrop-saturate-[1.15]">
<div className="sticky top-0 z-10 border-b border-card-border/40 bg-popover/95 px-[var(--density-row-x)] py-[var(--density-cell-y)] font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle backdrop-blur-[10px] backdrop-saturate-[1.15]">
{group.label}
</div>
{group.items.map((notif) => (
@@ -260,7 +260,7 @@ function NotificationRow({ notif, showNodeName, onDelete, onNavigate }: Notifica
const isRoutable = Boolean(onNavigate && notif.stack_name);
const surfaceClasses = cn(
'flex w-full items-start gap-3 px-5 py-3 text-left transition-colors',
'flex w-full items-start gap-3 px-[var(--density-row-x)] py-[var(--density-row-y)] text-left transition-colors',
isRoutable && 'cursor-pointer hover:bg-accent/40 focus-visible:bg-accent/40 focus-visible:outline-none',
);
@@ -352,7 +352,7 @@ function EmptyState({ filter, hasAny }: EmptyStateProps) {
}
return (
<div className="flex flex-col items-center gap-2 border-t border-card-border/60 px-5 py-12 text-center">
<div className="flex flex-col items-center gap-2 border-t border-card-border/60 px-[var(--density-row-x)] py-12 text-center">
<BellOff className="h-8 w-8 text-stat-icon" strokeWidth={1.5} />
<p className="text-sm text-stat-value">{title}</p>
<p className="font-mono text-[11px] text-stat-subtitle">{subtitle}</p>
frontend/src/components/UserProfileDropdown.tsx
+4 -4
View File
@@ -96,7 +96,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
<div className="relative overflow-hidden">
<div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-brand/[0.05] via-transparent to-transparent" />
<div className="absolute inset-y-0 left-0 w-[2px] bg-brand/60" />
<div className="relative flex items-center gap-3 px-5 py-4">
<div className="relative flex items-center gap-3 px-[var(--density-row-x)] py-[var(--density-tile-y)]">
<div className="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-full border border-brand/25 bg-brand/10">
{initials ? (
<span className="font-display text-lg leading-none text-brand">
@@ -157,7 +157,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
</div>
{/* Appearance */}
<div className="flex items-center justify-between gap-3 border-t border-card-border/60 px-5 py-3">
<div className="flex items-center justify-between gap-3 border-t border-card-border/60 px-[var(--density-row-x)] py-[var(--density-row-y)]">
<span className="font-mono text-[10px] uppercase tracking-[0.18em] text-stat-subtitle">
Appearance
</span>
@@ -175,7 +175,7 @@ export function UserProfileDropdown({ theme, setTheme, onOpenSettings }: UserPro
<button
type="button"
onClick={logout}
className="flex w-full items-center gap-2.5 px-5 py-3 text-left text-sm text-destructive transition-colors hover:bg-destructive/5 focus-visible:bg-destructive/5 focus-visible:outline-none"
className="flex w-full items-center gap-2.5 px-[var(--density-row-x)] py-[var(--density-row-y)] text-left text-sm text-destructive transition-colors hover:bg-destructive/5 focus-visible:bg-destructive/5 focus-visible:outline-none"
>
<LogOut className="h-4 w-4" strokeWidth={1.5} />
Log Out
@@ -209,7 +209,7 @@ function MenuRow({
}: MenuRowProps) {
const TrailingIcon = trailingIcon ?? (external ? ExternalLink : undefined);
const classes = cn(
'flex w-full items-center gap-2.5 px-5 py-2.5 text-left text-sm text-stat-value transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none',
'flex w-full items-center gap-2.5 px-[var(--density-row-x)] py-[var(--density-row-y)] text-left text-sm text-stat-value transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none',
disabled && 'pointer-events-none opacity-50',
);