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
|
|
@ -401,7 +401,7 @@ export default function Sidebar({
|
|||
)}
|
||||
|
||||
{filters.channelId && !editing && (
|
||||
<div className="rounded-xl border border-border bg-card/30">
|
||||
<div className="glass-card rounded-xl">
|
||||
<div className="px-3 pt-2 text-xs uppercase tracking-wide text-muted">Channel</div>
|
||||
<div className="px-3 pb-3 pt-2">
|
||||
<button
|
||||
|
|
@ -474,7 +474,7 @@ function WidgetCard({
|
|||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`rounded-xl border border-border bg-card/30 ${
|
||||
className={`glass-card rounded-xl ${
|
||||
isDragging ? "relative z-10 shadow-2xl ring-1 ring-accent" : ""
|
||||
} ${hidden && editing ? "opacity-50" : ""}`}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue