peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(toast): surface toasts bottom-left by the bell, brighter dark rim

Browse source 
Toasts rose top-right, far from the notification bell which now lives bottom-left.
Anchor them bottom-left inside the content column (clears the sidebar at any width),
newest nearest the bell. Add a ~50% white border in dark mode so they stand out off
the conventional top-right spot.
This commit is contained in:
npeter83 2026-06-17 14:28:29 +02:00
parent df0ca24a23
commit 1fb34b52d2
2 changed files with 8 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/Toaster.tsx
View file

@ -31,13 +31,13 @@ export default function Toaster() {
const toasts = useSyncExternalStore(subscribe, getActiveToasts, getActiveToasts); const toasts = useSyncExternalStore(subscribe, getActiveToasts, getActiveToasts);
return ( return (
<div className="fixed top-4 right-4 z-50 flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]"> <div className="absolute bottom-4 left-4 z-50 flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]">
{toasts.map((toast) => { {toasts.map((toast) => {
const { icon: Icon, color, bar } = LEVEL_STYLE[toast.level]; const { icon: Icon, color, bar } = LEVEL_STYLE[toast.level];
return ( return (
<div <div
key={toast.id} key={toast.id}
className="glass relative overflow-hidden rounded-xl px-3 py-3 flex items-start gap-3 animate-[popIn_0.16s_ease]" className="toast-card glass relative overflow-hidden rounded-xl px-3 py-3 flex items-start gap-3 animate-[popIn_0.16s_ease]"
> >
<Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} /> <Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">

6
frontend/src/index.css
View file

@ -93,6 +93,12 @@ html[data-theme="dark"] .glass-menu {
backdrop-filter: blur(30px) saturate(1.7) brightness(1.4); backdrop-filter: blur(30px) saturate(1.7) brightness(1.4);
-webkit-backdrop-filter: blur(30px) saturate(1.7) brightness(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.7) brightness(1.4);
} }
/* Toasts surface bottom-left (by the nav's notification bell), off the conventional
top-right; a brighter rim draws the eye there. Most needed in dark mode, where the
default glass border (dark navy) all but vanishes against the backdrop. */
html[data-theme="dark"] .toast-card {
border-color: color-mix(in srgb, #fff 50%, transparent);
}
/* Performance mode (Settings → Appearance) drops the expensive blur + soft shadows. */ /* Performance mode (Settings → Appearance) drops the expensive blur + soft shadows. */
html[data-perf="1"] .glass, html[data-perf="1"] .glass,