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 b46c8300d1
commit 6486c3d1a9
13 changed files with 388 additions and 102 deletions

36
frontend/src/lib/hints.ts Normal file
View file

@ -0,0 +1,36 @@
// App-wide "hints" toggle: when on, Tooltip components reveal short explanatory
// captions on hover so the UI is somewhat self-documenting for new users. Experienced
// users can turn it off in Settings. Persisted to localStorage (+ server preferences).
const KEY = "subfeed.hints";
let enabled = load();
let listeners: Array<() => void> = [];
function load(): boolean {
try {
return localStorage.getItem(KEY) !== "0"; // default ON
} catch {
return true;
}
}
export function hintsEnabled(): boolean {
return enabled;
}
export function setHintsEnabled(v: boolean): void {
enabled = v;
try {
localStorage.setItem(KEY, v ? "1" : "0");
} catch {
/* ignore */
}
listeners.forEach((l) => l());
}
export function subscribeHints(listener: () => void): () => void {
listeners.push(listener);
return () => {
listeners = listeners.filter((l) => l !== listener);
};
}