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:
parent
a8822d3935
commit
002579e5e5
13 changed files with 388 additions and 102 deletions
|
|
@ -36,7 +36,7 @@ function ThemeMenu({
|
|||
setTheme: (t: ThemePrefs) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="absolute right-0 mt-2 w-60 rounded-xl border border-border bg-surface shadow-2xl p-3 z-30">
|
||||
<div className="glass absolute right-0 mt-2 w-60 rounded-xl p-3 z-30 animate-[popIn_0.16s_ease]">
|
||||
<div className="text-xs uppercase tracking-wide text-muted mb-2">Color scheme</div>
|
||||
<div className="grid grid-cols-4 gap-2 mb-3">
|
||||
{SCHEMES.map((s) => (
|
||||
|
|
@ -219,7 +219,7 @@ function AccountMenu({
|
|||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute right-0 mt-2 w-64 rounded-xl border border-border bg-surface shadow-2xl p-3 z-30">
|
||||
<div className="glass absolute right-0 mt-2 w-64 rounded-xl p-3 z-30 animate-[popIn_0.16s_ease]">
|
||||
<div className="flex items-center gap-3 pb-3 border-b border-border">
|
||||
<Avatar me={me} className="w-10 h-10 text-sm shrink-0" />
|
||||
<div className="min-w-0">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue