mirror of
https://github.com/kilyabin/psysonic.git
synced 2026-07-22 14:35:41 +00:00
Frank Stellmacher
7a7a9f5e6b
111 of 122 top-level src/utils/ files move into 16 topic folders (audio, cache, cover, share, server, playback, playlist, deviceSync, waveform, mix, format, export, changelog, ui, perf, componentHelpers). True singletons with no cluster stay at the utils/ root. Pure file-move: a path-aware codemod rewrote 539 relative-import specifiers across 275 files; no logic touched. The hot-path coverage gate list (.github/frontend-hot-path-files.txt) is updated to the new paths for the 11 gated utils files — a mechanical consequence of the move, not a CI change. tsc is green.
104 lines
3.0 KiB
TypeScript
104 lines
3.0 KiB
TypeScript
/**
|
||
* Lightweight DOM-based toast notification.
|
||
* Uses the app's CSS custom properties so it respects the active theme.
|
||
* Multiple toasts stack vertically above each other.
|
||
*/
|
||
|
||
const TOAST_GAP = 8;
|
||
const TOAST_BOTTOM_ANCHOR = 100;
|
||
|
||
function getActiveToasts(): HTMLElement[] {
|
||
return Array.from(document.querySelectorAll<HTMLElement>('.psysonic-toast'));
|
||
}
|
||
|
||
function reflow(): void {
|
||
const toasts = getActiveToasts();
|
||
let bottom = TOAST_BOTTOM_ANCHOR;
|
||
for (let i = toasts.length - 1; i >= 0; i--) {
|
||
toasts[i].style.bottom = `${bottom}px`;
|
||
bottom += toasts[i].offsetHeight + TOAST_GAP;
|
||
}
|
||
}
|
||
|
||
export type ToastVariant = 'error' | 'info' | 'warning' | 'success';
|
||
|
||
export function showToast(text: string, durationMs = 4000, variant: ToastVariant = 'info'): void {
|
||
const isError = variant === 'error';
|
||
const isWarning = variant === 'warning';
|
||
const isSuccess = variant === 'success';
|
||
|
||
const toast = document.createElement('div');
|
||
toast.className = 'psysonic-toast';
|
||
|
||
const icon = document.createElement('span');
|
||
icon.textContent = isError ? '✕' : isWarning ? '!' : isSuccess ? '✓' : 'ℹ';
|
||
icon.style.cssText = `
|
||
flex-shrink: 0;
|
||
font-size: ${isSuccess ? '10px' : '11px'};
|
||
font-weight: 700;
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: ${isError ? 'var(--danger)' : isWarning ? 'var(--warning, #f59e0b)' : isSuccess ? 'var(--success, #10b981)' : 'var(--accent)'};
|
||
color: var(--bg-app);
|
||
line-height: 1;
|
||
`;
|
||
|
||
const msg = document.createElement('span');
|
||
msg.textContent = text;
|
||
msg.style.cssText = `flex: 1; min-width: 0;`;
|
||
|
||
const getBorderColor = () => {
|
||
if (isError) return 'var(--danger)';
|
||
if (isWarning) return 'var(--warning, #f59e0b)';
|
||
if (isSuccess) return 'var(--success, #10b981)';
|
||
return 'var(--accent)';
|
||
};
|
||
|
||
const getBoxShadow = () => {
|
||
const base = '0 4px 24px rgba(0,0,0,0.45)';
|
||
if (isError) return `${base}, 0 0 0 1px color-mix(in srgb, var(--danger) 20%, transparent)`;
|
||
if (isWarning) return `${base}, 0 0 0 1px color-mix(in srgb, var(--warning, #f59e0b) 20%, transparent)`;
|
||
return base;
|
||
};
|
||
|
||
toast.style.cssText = `
|
||
position: fixed;
|
||
bottom: ${TOAST_BOTTOM_ANCHOR}px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
background: var(--bg-card);
|
||
color: var(--text-primary);
|
||
border: 1px solid ${getBorderColor()};
|
||
border-left: 3px solid ${getBorderColor()};
|
||
padding: 10px 16px;
|
||
border-radius: 8px;
|
||
font-size: 13.5px;
|
||
font-weight: 500;
|
||
z-index: 999999;
|
||
pointer-events: none;
|
||
box-shadow: ${getBoxShadow()};
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
transition: bottom 150ms ease;
|
||
max-width: 480px;
|
||
width: max-content;
|
||
`;
|
||
|
||
toast.appendChild(icon);
|
||
toast.appendChild(msg);
|
||
document.body.appendChild(toast);
|
||
reflow();
|
||
|
||
setTimeout(() => {
|
||
toast.remove();
|
||
reflow();
|
||
}, durationMs);
|
||
}
|