{children}
@@ -92,6 +102,7 @@ function RootRedirect() {
export default function App() {
const { loadUser, isAuthenticated, demoMode, setDemoMode, setDevMode, setIsPrerelease, setAppVersion, setHasMapsKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled } = useAuthStore()
const { loadSettings } = useSettingsStore()
+ const { loadAddons } = useAddonStore()
useEffect(() => {
if (!location.pathname.startsWith('/shared/') && !location.pathname.startsWith('/public/') && !location.pathname.startsWith('/login')) {
@@ -145,6 +156,7 @@ export default function App() {
useEffect(() => {
if (isAuthenticated) {
loadSettings()
+ loadAddons()
}
}, [isAuthenticated])
@@ -182,8 +194,11 @@ export default function App() {
applyDark(mode === true || mode === 'dark')
}, [settings.dark_mode, isSharedPage])
+ const isAuthPage = location.pathname.startsWith('/login') || location.pathname.startsWith('/register')
+
return (
+ {React.createElement(
+ (SEVERITY_ICONS[notice.severity] ?? Info) as React.ElementType,
+ { size: 20, className: `shrink-0 mt-0.5 ${s.icon}` },
+ )}
+
+ );
+}
+
+interface AnimatedBannerItemProps {
+ notice: SystemNoticeDTO;
+ onDismiss: () => void;
+ language: string;
+}
+
+function AnimatedBannerItem({ notice, onDismiss, language }: AnimatedBannerItemProps) {
+ const [mounted, setMounted] = useState(false);
+ const prefersReducedMotion =
+ typeof window !== 'undefined' &&
+ (window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false);
+
+ useEffect(() => {
+ if (typeof requestAnimationFrame !== 'undefined') {
+ const id = requestAnimationFrame(() => setMounted(true));
+ return () => cancelAnimationFrame(id);
+ }
+ setMounted(true);
+ }, []);
+
+ const transition = prefersReducedMotion
+ ? 'transition-opacity duration-[120ms]'
+ : 'transition-all duration-200 ease-out';
+ const state = mounted ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2';
+
+ return (
+
+ {title}
+ {body !== title && (
+ {body}
+ )}
+ {ctaLabel && notice.cta && (
+
+ {notice.dismissible && (
+
+ )}
+
+
+ );
+}
+
+interface BannerRendererProps {
+ notices: SystemNoticeDTO[];
+}
+
+export function BannerRenderer({ notices }: BannerRendererProps) {
+ const { dismiss } = useSystemNoticeStore();
+ const { language } = useTranslation();
+ const containerRef = useRef
+ {visible.map((notice, i) => (
+
+ {i > 0 && }
+ dismiss(notice.id)}
+ language={language}
+ />
+
+ ))}
+
+ );
+}
+
+interface ToastRendererProps {
+ notices: SystemNoticeDTO[];
+}
+
+export function ToastRenderer({ notices }: ToastRendererProps) {
+ const { dismiss } = useSystemNoticeStore();
+ const { t } = useTranslation();
+ const firedRef = useRef(new Set
+ {/* Dismiss X button */}
+ {notice.dismissible && (
+
+ )}
+
+ {/* Hero image (not inline) */}
+ {notice.media && notice.media.placement !== 'inline' && (
+
+ );
+}
+
+export function ModalRenderer({ notices }: Props) {
+ const [idx, setIdx] = useState(0);
+ const [visible, setVisible] = useState(false);
+ const [pageAnnouncement, setPageAnnouncement] = useState('');
+ const navigate = useNavigate();
+ const { dismiss } = useSystemNoticeStore();
+ const { t, language } = useTranslation();
+
+ const [isMobile, setIsMobile] = useState(
+ () => typeof window !== 'undefined' && (window.matchMedia?.('(max-width: 639px)')?.matches ?? false)
+ );
+
+ const [isDark, setIsDark] = useState(
+ () => typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+ );
+
+ const prefersReducedMotion =
+ typeof window !== 'undefined' &&
+ (window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false);
+
+ const notice = notices[idx] ?? null;
+
+ // Non-dismissible notices lock the pager so users must act before advancing.
+ const canPage = notice?.dismissible !== false;
+
+ const touchStartY = useRef
+ 
{ (e.target as HTMLImageElement).style.display = 'none'; }}
+ />
+
+ )}
+
+
+ {/* Severity icon (when no hero) */}
+ {!notice.media && (
+
+
+
+ )}
+
+ {/* Title */}
+ + {title} +
+ + {/* Body — markdown */} +
+ {body}}>
+ (
+
+ {children}
+
+ ),
+ ul: ({ children }) =>
+
+
+
+ {/* Inline image */}
+ {notice.media?.placement === 'inline' && (
+ - {children}
- {children}
+ { (e.target as HTMLImageElement).style.display = 'none'; }}
+ />
+
+ )}
+
+ {/* Highlights */}
+ {notice.highlights && notice.highlights.length > 0 && (
+ -
+ {notice.highlights.map((h, i) => {
+ const HIcon: React.ElementType | null = h.iconName
+ ? ((LucideIcons as Record
-
+ {HIcon
+ ?
+ : ✓ + } + {t(h.labelKey)} +
+ );
+ })}
+
+
+ )}
+
+ {/* CTA + dismiss link */}
+
+
+
+ {Array.from({ length: total }, (_, i) => (
+
+
+
+ {t('system_notice.pager.counter')
+ .replace('{current}', String(currentPage + 1))
+ .replace('{total}', String(total))}
+
+
+ {ctaLabel ? (
+
+ ) : (
+
+ )}
+ {notice.dismissible && ctaLabel && (
+
+ )}
+
+
+ {/* Screen-reader page announcements */}
+ {pageAnnouncement}
+ {/* Backdrop */}
+
+ {/* Bottom sheet */}
+
+ );
+ }
+
+ // Desktop centered modal
+ const maxWidth = notice.severity === 'critical' ? 'max-w-[560px]' : 'max-w-[480px]';
+ const desktopMotion = prefersReducedMotion
+ ? (visible ? 'opacity-100' : 'opacity-0')
+ : (visible ? 'opacity-100 scale-100' : 'opacity-0 scale-[0.97]');
+
+ return (
+ { touchStartY.current = e.touches[0].clientY; }}
+ onTouchEnd={e => {
+ if (touchStartY.current !== null && notice.dismissible) {
+ const delta = e.changedTouches[0].clientY - touchStartY.current;
+ if (delta > 80) handleDismiss();
+ }
+ touchStartY.current = null;
+ }}
+ >
+ {/* Drag handle */}
+
+
+
+
+
+
+
+ {/* Screen-reader page announcements */}
+ {pageAnnouncement}
+
+ );
+}
diff --git a/client/src/components/SystemNotices/noticeActions.ts b/client/src/components/SystemNotices/noticeActions.ts
new file mode 100644
index 00000000..1369bdb9
--- /dev/null
+++ b/client/src/components/SystemNotices/noticeActions.ts
@@ -0,0 +1,21 @@
+import type { NavigateFunction } from 'react-router-dom';
+
+export interface NoticeActionContext {
+ navigate: NavigateFunction;
+}
+type NoticeActionHandler = (ctx: NoticeActionContext) => void | Promise
+
+ e.stopPropagation()}
+ >
+
+
+
+