feat(ui): liquid-glass design system, settings polish, hints, notif fixes

- Add a theme-aware glass surface system (.glass/.glass-card + ambient backdrop,
  performance-mode opt-out) and apply it across panels, popovers, toasts, cards,
  sidebar widgets, channel rows, video cards and login.
- SettingsPanel: slide in/out animation, glass styling, wrapping pill tabs (no
  horizontal scrollbar) with a prominent active state.
- Notifications: auto-dismiss can be switched off (stays until closed); the test
  notification now also triggers the alert sound; resume a suspended AudioContext.
- Add an app-wide, toggleable hint/tooltip system (lib/hints + Tooltip) and wire
  hints across the settings and channel-manager surfaces; persisted per account.
This commit is contained in:
npeter83 2026-06-11 21:08:35 +02:00
parent bf54b4b5a5
commit f8d2a11226
13 changed files with 388 additions and 102 deletions

View file

@ -90,7 +90,7 @@ export default function NotificationCenter({
</button>
{open && (
<div className="absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl border border-border bg-surface shadow-2xl z-30 flex flex-col max-h-[70vh]">
<div className="glass absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl z-30 flex flex-col max-h-[70vh] animate-[popIn_0.16s_ease]">
<div className="flex items-center justify-between px-3 py-2 border-b border-border">
<div className="text-sm font-semibold">Notifications</div>
{notifications.length > 0 && (