mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-20 23:32:19 +00:00
feat(ui): redesign user menu and notification panel (#691)
* feat(ui): redesign user menu and notification panel per design audit
Align both floating surfaces with the stack-view design language: cyan
signal rails, identity headers, strip containers, day-banded streams,
severity rails, Instrument Serif for hero words, and tracked-mono for
metadata. Extract the notifications popover out of EditorLayout into its
own component and introduce a reusable SegmentedControl primitive for
3-way radiogroups (Auto/Light/Dark theme, All/Unread/Alerts filter).
* fix(ui): pin accessible names on avatar and bell buttons
After the redesign the avatar button's text content became the user's
initials and the bell button's text became the unread count, which
displaced the title-based accessible names and broke
getByRole('button', { name: /profile/i }). Set aria-label explicitly on
both triggers and mark the bell badge aria-hidden so screen readers and
role-based selectors see stable names regardless of dynamic content.
This commit is contained in:
Anso
@@ -0,0 +1,324 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import {
|
||||
Bell,
|
||||
BellOff,
|
||||
Info,
|
||||
AlertTriangle,
|
||||
AlertOctagon,
|
||||
X,
|
||||
Trash2,
|
||||
} from 'lucide-react';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
||||
import { SegmentedControl } from '@/components/ui/segmented-control';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { NotificationItem } from './dashboard/types';
|
||||
import type { Node } from '@/context/NodeContext';
|
||||
|
||||
type NotifFilter = 'all' | 'unread' | 'alerts';
|
||||
|
||||
type LevelConfig = {
|
||||
icon: LucideIcon;
|
||||
iconClass: string;
|
||||
railClass: string;
|
||||
};
|
||||
|
||||
const LEVEL_CONFIG: Record<NotificationItem['level'], LevelConfig> = {
|
||||
info: { icon: Info, iconClass: 'text-info', railClass: 'bg-info' },
|
||||
warning: { icon: AlertTriangle, iconClass: 'text-warning', railClass: 'bg-warning' },
|
||||
error: { icon: AlertOctagon, iconClass: 'text-destructive', railClass: 'bg-destructive' },
|
||||
};
|
||||
|
||||
const DAY_MS = 86_400_000;
|
||||
const HOUR_MS = 3_600_000;
|
||||
const MINUTE_MS = 60_000;
|
||||
|
||||
type GroupLabel = 'Today' | 'Yesterday' | 'This week' | 'Earlier';
|
||||
const GROUP_ORDER: GroupLabel[] = ['Today', 'Yesterday', 'This week', 'Earlier'];
|
||||
|
||||
function startOfDay(d: Date): number {
|
||||
const c = new Date(d);
|
||||
c.setHours(0, 0, 0, 0);
|
||||
return c.getTime();
|
||||
}
|
||||
|
||||
function groupByDay(items: NotificationItem[]): { label: GroupLabel; items: NotificationItem[] }[] {
|
||||
const today = startOfDay(new Date());
|
||||
const yesterday = today - DAY_MS;
|
||||
const weekStart = today - 6 * DAY_MS;
|
||||
|
||||
const buckets: Record<GroupLabel, NotificationItem[]> = {
|
||||
Today: [],
|
||||
Yesterday: [],
|
||||
'This week': [],
|
||||
Earlier: [],
|
||||
};
|
||||
|
||||
for (const item of items) {
|
||||
const ts = item.timestamp;
|
||||
if (ts >= today) buckets.Today.push(item);
|
||||
else if (ts >= yesterday) buckets.Yesterday.push(item);
|
||||
else if (ts >= weekStart) buckets['This week'].push(item);
|
||||
else buckets.Earlier.push(item);
|
||||
}
|
||||
|
||||
return GROUP_ORDER.map((label) => ({ label, items: buckets[label] })).filter(
|
||||
(g) => g.items.length > 0,
|
||||
);
|
||||
}
|
||||
|
||||
function formatRelative(ms: number): string {
|
||||
const diff = Date.now() - ms;
|
||||
if (diff < MINUTE_MS) return 'just now';
|
||||
if (diff < HOUR_MS) return `${Math.round(diff / MINUTE_MS)}m ago`;
|
||||
if (diff < DAY_MS) return `${Math.round(diff / HOUR_MS)}h ago`;
|
||||
if (diff < 2 * DAY_MS) return 'yesterday';
|
||||
return new Date(ms).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
function applyFilter(items: NotificationItem[], filter: NotifFilter): NotificationItem[] {
|
||||
if (filter === 'unread') return items.filter((n) => !n.is_read);
|
||||
if (filter === 'alerts') return items.filter((n) => n.level === 'warning' || n.level === 'error');
|
||||
return items;
|
||||
}
|
||||
|
||||
interface NotificationPanelProps {
|
||||
notifications: NotificationItem[];
|
||||
nodes: Node[];
|
||||
onMarkAllRead: () => void;
|
||||
onClearAll: () => void;
|
||||
onDelete: (notif: NotificationItem) => void;
|
||||
}
|
||||
|
||||
export function NotificationPanel({
|
||||
notifications,
|
||||
nodes,
|
||||
onMarkAllRead,
|
||||
onClearAll,
|
||||
onDelete,
|
||||
}: NotificationPanelProps) {
|
||||
const [filter, setFilter] = useState<NotifFilter>('all');
|
||||
|
||||
const unreadCount = useMemo(
|
||||
() => notifications.filter((n) => !n.is_read).length,
|
||||
[notifications],
|
||||
);
|
||||
|
||||
const remoteNodeIds = useMemo(() => {
|
||||
const ids = new Set<number>();
|
||||
for (const n of nodes) if (n.type === 'remote') ids.add(n.id);
|
||||
return ids;
|
||||
}, [nodes]);
|
||||
|
||||
const filtered = useMemo(() => applyFilter(notifications, filter), [notifications, filter]);
|
||||
const groups = useMemo(() => groupByDay(filtered), [filtered]);
|
||||
|
||||
const filterOptions = useMemo(
|
||||
() => [
|
||||
{ value: 'all' as const, label: 'All' },
|
||||
{
|
||||
value: 'unread' as const,
|
||||
label: 'Unread',
|
||||
badge: unreadCount > 0 ? unreadCount : undefined,
|
||||
},
|
||||
{ value: 'alerts' as const, label: 'Alerts' },
|
||||
],
|
||||
[unreadCount],
|
||||
);
|
||||
|
||||
const bellBadge =
|
||||
unreadCount > 0 ? (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="absolute -right-1 -top-1 flex min-h-[16px] min-w-[16px] items-center justify-center rounded-full bg-destructive px-1 font-mono text-[9px] font-semibold tabular-nums leading-none text-destructive-foreground"
|
||||
>
|
||||
{unreadCount > 99 ? '99+' : unreadCount}
|
||||
</span>
|
||||
) : null;
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="relative h-8 w-8 rounded-lg"
|
||||
title="Notifications"
|
||||
aria-label="Notifications"
|
||||
>
|
||||
<Bell className="h-4 w-4" strokeWidth={1.5} />
|
||||
{bellBadge}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-[360px] overflow-hidden rounded-md p-0"
|
||||
align="end"
|
||||
sideOffset={8}
|
||||
>
|
||||
{/* Masthead */}
|
||||
<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="flex items-baseline gap-2.5">
|
||||
<span className="font-display text-xl italic leading-none text-stat-value">
|
||||
Notifications
|
||||
</span>
|
||||
{unreadCount > 0 ? (
|
||||
<span className="font-mono text-[11px] uppercase tracking-[0.14em] tabular-nums text-brand">
|
||||
{unreadCount} unread
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex items-center gap-0.5">
|
||||
{unreadCount > 0 ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={onMarkAllRead}
|
||||
className="h-7 px-2 font-mono text-[10px] uppercase tracking-[0.14em] text-stat-subtitle hover:text-stat-value"
|
||||
>
|
||||
Mark read
|
||||
</Button>
|
||||
) : null}
|
||||
{notifications.length > 0 ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onClearAll}
|
||||
className="h-7 w-7 text-stat-subtitle hover:text-destructive"
|
||||
title="Clear all"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" strokeWidth={1.5} />
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filter segment */}
|
||||
<div className="flex items-center justify-end border-t border-card-border/60 px-5 py-2.5">
|
||||
<SegmentedControl
|
||||
value={filter}
|
||||
options={filterOptions}
|
||||
onChange={setFilter}
|
||||
ariaLabel="Filter notifications"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Stream */}
|
||||
{groups.length === 0 ? (
|
||||
<EmptyState filter={filter} hasAny={notifications.length > 0} />
|
||||
) : (
|
||||
<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]">
|
||||
{group.label}
|
||||
</div>
|
||||
{group.items.map((notif) => (
|
||||
<NotificationRow
|
||||
key={`${notif.nodeId ?? 'local'}:${notif.level}:${notif.id}`}
|
||||
notif={notif}
|
||||
showNodeName={
|
||||
notif.nodeId !== undefined && remoteNodeIds.has(notif.nodeId)
|
||||
}
|
||||
onDelete={onDelete}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
interface NotificationRowProps {
|
||||
notif: NotificationItem;
|
||||
showNodeName: boolean;
|
||||
onDelete: (notif: NotificationItem) => void;
|
||||
}
|
||||
|
||||
function NotificationRow({ notif, showNodeName, onDelete }: NotificationRowProps) {
|
||||
const config = LEVEL_CONFIG[notif.level];
|
||||
const Icon = config.icon;
|
||||
const isUnread = !notif.is_read;
|
||||
|
||||
return (
|
||||
<div className="group relative flex items-start gap-3 border-b border-card-border/40 px-5 py-3 transition-colors last:border-b-0 hover:bg-accent/40">
|
||||
<div
|
||||
className={cn(
|
||||
'absolute inset-y-0 left-0 w-[3px] transition-opacity',
|
||||
config.railClass,
|
||||
isUnread ? 'opacity-100' : 'opacity-30',
|
||||
)}
|
||||
/>
|
||||
<Icon
|
||||
className={cn('mt-0.5 h-4 w-4 flex-shrink-0', config.iconClass)}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p
|
||||
className={cn(
|
||||
'break-words pr-6 text-sm leading-snug',
|
||||
isUnread ? 'text-stat-value' : 'text-stat-subtitle',
|
||||
)}
|
||||
>
|
||||
{notif.message}
|
||||
</p>
|
||||
<div className="mt-1 flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-[0.14em] text-stat-subtitle">
|
||||
{showNodeName && notif.nodeName ? (
|
||||
<>
|
||||
<span className="rounded-sm border border-card-border bg-muted/40 px-1.5 py-0.5 normal-case tracking-normal text-stat-subtitle">
|
||||
{notif.nodeName}
|
||||
</span>
|
||||
<span className="text-stat-icon">·</span>
|
||||
</>
|
||||
) : null}
|
||||
<span className="tabular-nums">{formatRelative(notif.timestamp)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-2 top-2 h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onDelete(notif);
|
||||
}}
|
||||
title="Dismiss"
|
||||
>
|
||||
<X className="h-3 w-3" strokeWidth={1.5} />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface EmptyStateProps {
|
||||
filter: NotifFilter;
|
||||
hasAny: boolean;
|
||||
}
|
||||
|
||||
function EmptyState({ filter, hasAny }: EmptyStateProps) {
|
||||
let title = "You're all caught up";
|
||||
let subtitle = 'New notifications appear here in real time.';
|
||||
|
||||
if (hasAny && filter === 'unread') {
|
||||
title = 'No unread notifications';
|
||||
subtitle = 'Everything in your feed has been read.';
|
||||
} else if (hasAny && filter === 'alerts') {
|
||||
title = 'No active alerts';
|
||||
subtitle = 'Warnings and errors will surface here when they occur.';
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center gap-2 border-t border-card-border/60 px-5 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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user