@micha.bigler/ui-core-micha 3.14.3 → 4.0.0

package/src/notifications/NotificationSettings.jsx

@@ -1,330 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Alert from '@mui/material/Alert';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
-import Divider from '@mui/material/Divider';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-import Typography from '@mui/material/Typography';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import {
-  getNotificationPreferences,
-  getVapidPublicKey,
-  patchNotificationPreferences,
-  removePushSubscription,
-  savePushSubscription,
-  setNotificationCategorySubscription,
-  urlBase64ToUint8Array,
-} from './api';
-
-export const NOTIFICATION_SETTINGS_ALERT_SX = { mb: 2 };
-export const NOTIFICATION_SETTINGS_HINT_ALERT_SX = { mb: 1.5 };
-export const NOTIFICATION_SETTINGS_REACH_ALERT_SX = { mb: 1 };
-export const NOTIFICATION_SETTINGS_FORM_CONTROL_SX = { alignItems: 'flex-start', ml: 0 };
-export const NOTIFICATION_SETTINGS_PUSH_CONTROL_SX = {
-  alignItems: 'flex-start',
-  ml: 0,
-  mt: 1.5,
-};
-export const NOTIFICATION_SETTINGS_CATEGORY_CONTROL_SX = {
-  alignItems: 'center',
-  ml: 0,
-  display: 'flex',
-};
-
-function reachLabelKey(notificationType) {
-  const noActiveChannel = notificationType.active && notificationType.has_active_channel === false;
-  if (notificationType.active && notificationType.passive) {
-    // Scope C's bounded fallback: a "both" type still reaches the user passively
-    // (chip) when no active channel is configured -- it is not undelivered, so it
-    // must not show the "does not reach you" warning meant for active-only types.
-    return noActiveChannel ? 'NotificationSettings.REACH_PASSIVE' : 'NotificationSettings.REACH_BOTH';
-  }
-  if (notificationType.active) {
-    return noActiveChannel ? 'NotificationSettings.REACH_NO_ACTIVE_CHANNEL' : 'NotificationSettings.REACH_ACTIVE';
-  }
-  return 'NotificationSettings.REACH_PASSIVE';
-}
-
-function getPushSupport() {
-  return typeof navigator !== 'undefined'
-    && typeof window !== 'undefined'
-    && 'serviceWorker' in navigator
-    && 'PushManager' in window;
-}
-
-function getIosInstallState() {
-  if (typeof navigator === 'undefined' || typeof window === 'undefined') return false;
-  const isIos = /iphone|ipad|ipod/i.test(navigator.userAgent || '');
-  const standalone = window.matchMedia?.('(display-mode: standalone)').matches
-    || window.navigator.standalone === true;
-  return isIos && !standalone;
-}
-
-export function NotificationSettings() {
-  const { t } = useTranslation();
-  const [preferences, setPreferences] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [savingEmail, setSavingEmail] = useState(false);
-  const [savingPush, setSavingPush] = useState(false);
-  const [savingPreview, setSavingPreview] = useState(false);
-  const [pushSubscribed, setPushSubscribed] = useState(false);
-  const [error, setError] = useState('');
-  const [conflict, setConflict] = useState('');
-  const [savingSubscription, setSavingSubscription] = useState(null);
-
-  const pushSupported = getPushSupport();
-  const iosNeedsInstall = getIosInstallState();
-
-  useEffect(() => {
-    let cancelled = false;
-
-    getNotificationPreferences()
-      .then((data) => {
-        if (!cancelled) setPreferences(data);
-      })
-      .catch(() => {
-        if (!cancelled) setError(t('NotificationSettings.LOAD_ERROR'));
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-
-    return () => { cancelled = true; };
-  }, [t]);
-
-  useEffect(() => {
-    let cancelled = false;
-    if (!pushSupported) return undefined;
-
-    navigator.serviceWorker.ready
-      .then((registration) => registration.pushManager.getSubscription())
-      .then((subscription) => {
-        if (!cancelled) setPushSubscribed(Boolean(subscription));
-      })
-      .catch(() => {
-        if (!cancelled) setPushSubscribed(false);
-      });
-
-    return () => { cancelled = true; };
-  }, [pushSupported]);
-
-  const handleEmailToggle = async (event) => {
-    const email_opt_in = event.target.checked;
-    setSavingEmail(true);
-    setError('');
-    try {
-      const updated = await patchNotificationPreferences({ email_opt_in });
-      setPreferences(updated);
-    } catch {
-      setError(t('NotificationSettings.SAVE_ERROR'));
-    } finally {
-      setSavingEmail(false);
-    }
-  };
-
-  const handleEnablePush = async () => {
-    setSavingPush(true);
-    setError('');
-    setConflict('');
-    try {
-      const permission = await Notification.requestPermission();
-      if (permission !== 'granted') {
-        setError(t('NotificationSettings.PUSH_DENIED'));
-        return;
-      }
-      const vapidPublicKey = await getVapidPublicKey();
-      const registration = await navigator.serviceWorker.ready;
-      const subscription = await registration.pushManager.subscribe({
-        userVisibleOnly: true,
-        applicationServerKey: urlBase64ToUint8Array(vapidPublicKey),
-      });
-      await savePushSubscription(subscription.toJSON(), navigator.userAgent);
-      const updated = await patchNotificationPreferences({ push_opt_in: true });
-      setPreferences(updated);
-      setPushSubscribed(true);
-    } catch (requestError) {
-      if (requestError?.response?.status === 409) {
-        setConflict(t('NotificationSettings.PUSH_CONFLICT'));
-      } else {
-        setError(t('NotificationSettings.PUSH_ERROR'));
-      }
-    } finally {
-      setSavingPush(false);
-    }
-  };
-
-  const handlePreviewToggle = async (event) => {
-    const push_preview_opt_in = event.target.checked;
-    setSavingPreview(true);
-    setError('');
-    try {
-      const updated = await patchNotificationPreferences({ push_preview_opt_in });
-      setPreferences(updated);
-    } catch {
-      setError(t('NotificationSettings.SAVE_ERROR'));
-    } finally {
-      setSavingPreview(false);
-    }
-  };
-
-  const handleSubscriptionToggle = async (category, event) => {
-    const requested = event.target.checked;
-    setSavingSubscription(category);
-    setError('');
-    try {
-      const result = await setNotificationCategorySubscription(category, requested);
-      // Reflect what the server actually recorded, not the checkbox's optimistic
-      // value -- a 2xx response with a different `subscribed` (e.g. a server-side
-      // clamp) must not be silently overridden by what the user clicked.
-      const confirmed = result?.subscribed ?? requested;
-      setPreferences((current) => ({
-        ...current,
-        subscribable_categories: current.subscribable_categories.map((row) => (
-          row.category === category ? { ...row, subscribed: confirmed } : row
-        )),
-      }));
-    } catch {
-      setError(t('NotificationSettings.SUBSCRIPTION_ERROR'));
-    } finally {
-      setSavingSubscription(null);
-    }
-  };
-
-  const handleDisablePush = async () => {
-    setSavingPush(true);
-    setError('');
-    setConflict('');
-    try {
-      const registration = await navigator.serviceWorker.ready;
-      const subscription = await registration.pushManager.getSubscription();
-      if (subscription) {
-        const endpoint = subscription.endpoint;
-        await subscription.unsubscribe();
-        await removePushSubscription({ endpoint });
-      }
-      setPushSubscribed(false);
-    } catch {
-      setError(t('NotificationSettings.PUSH_ERROR'));
-    } finally {
-      setSavingPush(false);
-    }
-  };
-
-  if (loading) {
-    return <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>;
-  }
-
-  return (
-    <Box sx={{ maxWidth: 520 }}>
-      <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-        <NotificationsIcon />
-        {t('NotificationSettings.TITLE')}
-      </Typography>
-      <Typography variant="body2" color="text.secondary" gutterBottom>
-        {t('NotificationSettings.SUBTITLE')}
-      </Typography>
-      {error && <Alert severity="error" sx={NOTIFICATION_SETTINGS_ALERT_SX} onClose={() => setError('')}>{error}</Alert>}
-      {conflict && <Alert severity="warning" sx={NOTIFICATION_SETTINGS_ALERT_SX} onClose={() => setConflict('')}>{conflict}</Alert>}
-
-      <Box sx={{ py: 2 }}>
-        <FormControlLabel
-          control={<Switch checked={Boolean(preferences?.email_opt_in)} onChange={handleEmailToggle} disabled={savingEmail} />}
-          label={<Box><Typography variant="body1">{t('NotificationSettings.EMAIL_LABEL')}</Typography><Typography variant="caption" color="text.secondary">{t('NotificationSettings.EMAIL_HINT')}</Typography></Box>}
-          labelPlacement="end"
-          sx={NOTIFICATION_SETTINGS_FORM_CONTROL_SX}
-        />
-      </Box>
-
-      <Divider />
-
-      <Box sx={{ py: 2 }}>
-        {iosNeedsInstall && <Alert severity="info" sx={NOTIFICATION_SETTINGS_HINT_ALERT_SX}>{t('NotificationSettings.IOS_HINT')}</Alert>}
-        {!pushSupported && !iosNeedsInstall && <Alert severity="warning" sx={NOTIFICATION_SETTINGS_HINT_ALERT_SX}>{t('NotificationSettings.PUSH_NOT_SUPPORTED')}</Alert>}
-        <FormControlLabel
-          control={(
-            <Switch
-              checked={pushSubscribed}
-              onChange={(event) => (event.target.checked ? handleEnablePush() : handleDisablePush())}
-              disabled={savingPush || !pushSupported || iosNeedsInstall}
-            />
-          )}
-          label={<Box><Typography variant="body1">{t('NotificationSettings.PUSH_LABEL')}</Typography><Typography variant="caption" color="text.secondary">{t('NotificationSettings.PUSH_HINT')}</Typography></Box>}
-          labelPlacement="end"
-          sx={NOTIFICATION_SETTINGS_FORM_CONTROL_SX}
-        />
-        <FormControlLabel
-          control={(
-            <Switch
-              checked={preferences?.push_preview_opt_in !== false}
-              onChange={handlePreviewToggle}
-              disabled={savingPreview || !preferences?.push_opt_in}
-            />
-          )}
-          label={<Box><Typography variant="body1">{t('NotificationSettings.PUSH_PREVIEW_LABEL')}</Typography><Typography variant="caption" color="text.secondary">{t('NotificationSettings.PUSH_PREVIEW_HINT')}</Typography></Box>}
-          labelPlacement="end"
-          sx={NOTIFICATION_SETTINGS_PUSH_CONTROL_SX}
-        />
-      </Box>
-
-      {preferences?.notification_types?.length > 0 && (
-        <>
-          <Divider />
-          <Box sx={{ py: 2 }}>
-            <Typography variant="subtitle2" gutterBottom>{t('NotificationSettings.REACH_TITLE')}</Typography>
-            {preferences.notification_types.map((notificationType) => {
-              const labelKey = reachLabelKey(notificationType);
-              const reachText = t(labelKey);
-              // Reserve Alert (a colored banner) for the one case that is actually a
-              // warning -- an active-only type nobody can currently reach. Routine
-              // reach description is static settings copy, not a status message.
-              if (labelKey === 'NotificationSettings.REACH_NO_ACTIVE_CHANNEL') {
-                return (
-                  <Alert key={notificationType.key} severity="warning" sx={NOTIFICATION_SETTINGS_REACH_ALERT_SX}>
-                    <strong>{notificationType.label}</strong> — {reachText}
-                  </Alert>
-                );
-              }
-              return (
-                <Box key={notificationType.key} sx={{ py: 0.5 }}>
-                  <Typography variant="body2">{notificationType.label}</Typography>
-                  <Typography variant="caption" color="text.secondary">{reachText}</Typography>
-                </Box>
-              );
-            })}
-          </Box>
-        </>
-      )}
-
-      {preferences?.subscribable_categories?.length > 0 && (
-        <>
-          <Divider />
-          <Box sx={{ py: 2 }}>
-            <Typography variant="subtitle2" gutterBottom>{t('NotificationSettings.SUBSCRIPTIONS_TITLE')}</Typography>
-            <Typography variant="body2" color="text.secondary" gutterBottom>
-              {t('NotificationSettings.SUBSCRIPTIONS_SUBTITLE')}
-            </Typography>
-            {preferences.subscribable_categories.map((row) => (
-              <FormControlLabel
-                key={row.category}
-                control={(
-                  <Switch
-                    checked={Boolean(row.subscribed)}
-                    onChange={(event) => handleSubscriptionToggle(row.category, event)}
-                    disabled={savingSubscription === row.category}
-                  />
-                )}
-                label={row.label}
-                labelPlacement="end"
-                sx={NOTIFICATION_SETTINGS_CATEGORY_CONTROL_SX}
-              />
-            ))}
-          </Box>
-        </>
-      )}
-    </Box>
-  );
-}
-
-export default NotificationSettings;

package/src/notifications/NotificationsProvider.jsx

@@ -1,224 +0,0 @@
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
-
-import { AuthContext } from '../auth/AuthContext';
-import { getNotificationFeed, getUnreadCount, markNotifications } from './feedApi';
-import { DEFAULT_ENVELOPE, RealtimeContext, useRealtimeCore } from './realtime';
-
-const NotificationsContext = createContext(null);
-
-function normalizeNotification(notification) {
-  return {
-    ...notification,
-    content: notification.content || {},
-    seen: Boolean(notification.seen ?? notification.seen_at),
-    dismissed: Boolean(notification.dismissed ?? notification.dismissed_at),
-    done: Boolean(notification.done ?? notification.done_at),
-  };
-}
-
-function normalizeNotificationPush(data) {
-  return normalizeNotification({
-    id: data.id ?? data.recipient_id ?? data.notification_id,
-    notification_id: data.notification_id,
-    notification_type: data.type,
-    content: data.content || {},
-    created_at: data.created_at,
-    seen_at: null,
-    dismissed_at: null,
-    done_at: null,
-  });
-}
-
-function getWebSocketUrl(wsUrlBase) {
-  if (wsUrlBase) {
-    return new URL('/ws/notifications/', wsUrlBase).toString();
-  }
-
-  const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-  return `${protocol}//${window.location.host}/ws/notifications/`;
-}
-
-function patchStatus(notification, status) {
-  const seen = Boolean(status.seen);
-  const dismissed = Boolean(status.dismissed);
-  const done = Boolean(status.done);
-
-  return {
-    ...notification,
-    seen,
-    dismissed,
-    done,
-    seen_at: seen ? notification.seen_at || true : null,
-    dismissed_at: dismissed ? notification.dismissed_at || true : null,
-    done_at: done ? notification.done_at || true : null,
-  };
-}
-
-export function NotificationsProvider({ children, wsUrlBase }) {
-  const auth = useContext(AuthContext);
-  const authenticated = Boolean(auth?.user);
-  const [notifications, setNotifications] = useState([]);
-  const [unreadCount, setUnreadCount] = useState(0);
-  const notificationsRef = useRef([]);
-
-  const replaceNotifications = useCallback((nextNotifications) => {
-    notificationsRef.current = nextNotifications;
-    setNotifications(nextNotifications);
-  }, []);
-
-  const refresh = useCallback(async () => {
-    if (!authenticated) {
-      replaceNotifications([]);
-      setUnreadCount(0);
-      return { notifications: [], unreadCount: 0 };
-    }
-
-    const [feed, unread] = await Promise.all([getNotificationFeed(), getUnreadCount()]);
-    const nextNotifications = (feed.results || []).map(normalizeNotification);
-    const nextUnreadCount = unread.count || 0;
-    replaceNotifications(nextNotifications);
-    setUnreadCount(nextUnreadCount);
-    return { notifications: nextNotifications, unreadCount: nextUnreadCount };
-  }, [authenticated, replaceNotifications]);
-
-  // Seeded gates the socket connect, not just `authenticated`: the prior single-purpose
-  // socket owner awaited the initial REST feed/unread-count fetch before opening the
-  // WebSocket, so a live push could never race an empty/incomplete `notificationsRef`.
-  // Preserved here rather than connecting immediately, since `refresh()`'s
-  // `replaceNotifications(...)` is unconditional and would silently drop a message that
-  // arrived and patched state before the initial REST response landed.
-  const [seeded, setSeeded] = useState(false);
-
-  const { subscribe, onReconnect } = useRealtimeCore({
-    active: authenticated && seeded,
-    wsUrl: getWebSocketUrl(wsUrlBase),
-  });
-
-  const handleRealtimeMessage = useCallback((data) => {
-    if (data.type === 'notification.status') {
-      let unreadDelta = 0;
-      const nextNotifications = notificationsRef.current.map((notification) => {
-        if (notification.notification_id !== data.notification_id) return notification;
-
-        const wasUnread = !notification.seen && !notification.dismissed;
-        const patched = patchStatus(notification, data.status || {});
-        const isUnread = !patched.seen && !patched.dismissed;
-        if (wasUnread !== isUnread) {
-          unreadDelta += isUnread ? 1 : -1;
-        }
-        return patched;
-      });
-      replaceNotifications(nextNotifications);
-      if (unreadDelta) {
-        setUnreadCount((count) => Math.max(0, count + unreadDelta));
-      }
-      return;
-    }
-
-    const pushedNotification = normalizeNotificationPush(data);
-
-    // NOTIF-12 D2: a notification routed to more than one channel (e.g. chip
-    // + popup) arrives as multiple WS messages sharing one notification_id.
-    // Fold repeats into the existing feed entry (last-write-wins on content)
-    // instead of appending a duplicate and double-incrementing the badge.
-    const existingIndex = pushedNotification.notification_id == null
-      ? -1
-      : notificationsRef.current.findIndex(
-        (notification) => notification.notification_id === pushedNotification.notification_id,
-      );
-
-    if (existingIndex !== -1) {
-      const nextNotifications = notificationsRef.current.map((notification, index) => (
-        index === existingIndex
-          ? { ...notification, notification_type: pushedNotification.notification_type, content: pushedNotification.content }
-          : notification
-      ));
-      replaceNotifications(nextNotifications);
-      return;
-    }
-
-    replaceNotifications([pushedNotification, ...notificationsRef.current]);
-    setUnreadCount((count) => count + 1);
-  }, [replaceNotifications]);
-
-  useEffect(() => {
-    if (!authenticated) return undefined;
-    return subscribe(DEFAULT_ENVELOPE, handleRealtimeMessage);
-  }, [authenticated, subscribe, handleRealtimeMessage]);
-
-  useEffect(() => {
-    if (!authenticated) {
-      replaceNotifications([]);
-      setUnreadCount(0);
-      setSeeded(false);
-      return undefined;
-    }
-
-    let cancelled = false;
-    refresh()
-      .catch(() => {
-        // The live stream remains useful if the initial REST request is temporarily unavailable.
-      })
-      .finally(() => {
-        if (!cancelled) setSeeded(true);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [authenticated, refresh, replaceNotifications]);
-
-  const mark = useCallback((action, ids) => {
-    const selectedIds = Array.isArray(ids) ? ids : [];
-    const selected = new Set(selectedIds);
-    const current = notificationsRef.current;
-    let unreadDelta = 0;
-    const nextNotifications = current.map((notification) => {
-      if (!selected.has(notification.id)) return notification;
-
-      const wasUnread = !notification.seen && !notification.dismissed;
-      if ((action === 'seen' || action === 'dismissed') && wasUnread) {
-        unreadDelta += 1;
-      }
-
-      return patchStatus(notification, {
-        seen: action === 'seen' ? true : notification.seen,
-        dismissed: action === 'dismissed' ? true : notification.dismissed,
-        done: action === 'done' ? true : notification.done,
-      });
-    });
-
-    replaceNotifications(nextNotifications);
-    if (unreadDelta) {
-      setUnreadCount((count) => Math.max(0, count - unreadDelta));
-    }
-    return markNotifications({ action, ids: selectedIds });
-  }, [replaceNotifications]);
-
-  const markSeen = useCallback((ids) => mark('seen', ids), [mark]);
-  const markDismissed = useCallback((ids) => mark('dismissed', ids), [mark]);
-  const markDone = useCallback((ids) => mark('done', ids), [mark]);
-
-  return (
-    <RealtimeContext.Provider value={{ subscribe, onReconnect }}>
-      <NotificationsContext.Provider value={{
-        notifications,
-        unreadCount,
-        markSeen,
-        markDismissed,
-        markDone,
-        refresh,
-      }}>
-        {children}
-      </NotificationsContext.Provider>
-    </RealtimeContext.Provider>
-  );
-}
-
-export function useNotifications() {
-  const context = useContext(NotificationsContext);
-  if (!context) {
-    throw new Error('useNotifications must be used within a NotificationsProvider');
-  }
-  return context;
-}

package/src/notifications/PopupSurface.jsx

@@ -1,105 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Button from '@mui/material/Button';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import { useOnboarding } from '../onboarding/OnboardingProvider';
-import { WizardDialogShell } from '../onboarding/WizardDialogShell';
-import { useNotifications } from './NotificationsProvider';
-import { DEFAULT_ENVELOPE, useRealtime } from './realtime';
-
-export const POPUP_SURFACE_DISMISS_BUTTON_SX = { alignSelf: 'flex-end' };
-
-function PopupStepComponent({ onDismiss, ctx }) {
-  const { t } = useTranslation();
-  const content = ctx?.content || {};
-
-  return (
-    <Stack spacing={2}>
-      {content.body_key && (
-        <Typography variant="body1">{t(content.body_key, content.params || {})}</Typography>
-      )}
-      <Button onClick={onDismiss} sx={POPUP_SURFACE_DISMISS_BUTTON_SX}>
-        {t('PopupSurface.CLOSE')}
-      </Button>
-    </Stack>
-  );
-}
-
-const POPUP_STEP = { blocking: false, Component: PopupStepComponent };
-
-/**
- * Renders popup-eligible notifications (NOTIF-12) through the onboarding
- * wizard's dialog shell, reusing only the renderer (design D-F7) — status
- * lives on NotificationRecipient via the existing feed/mark path, never in
- * the onboarding progress store.
- *
- * Deliberately session-live only: it watches the raw realtime stream for
- * `channel === "popup"` messages rather than the already-seeded feed list,
- * since the feed carries no per-channel discriminator (see NotificationsProvider).
- */
-export function PopupSurface() {
-  const { t } = useTranslation();
-  const { markSeen, markDismissed } = useNotifications();
-  const { subscribe } = useRealtime();
-  const onboarding = useOnboarding();
-  const [queue, setQueue] = useState([]);
-  const seenIdsRef = useRef(new Set());
-
-  const handleRealtimeMessage = useCallback((data) => {
-    if (data.type === 'notification.status') return;
-    if (data.channel !== 'popup') return;
-    setQueue((previous) => {
-      if (previous.some((item) => item.notification_id === data.notification_id)) return previous;
-      return [...previous, {
-        notification_id: data.notification_id,
-        // recipient_id is the id feed/mark/ actually resolves against
-        // (NotificationRecipient.pk, not Notification.pk). Fall back to
-        // notification_id only for an older dcm that predates it — matching
-        // NotificationsProvider's own normalizeNotificationPush precedent.
-        markId: data.recipient_id ?? data.notification_id,
-        content: data.content || {},
-      }];
-    });
-  }, []);
-
-  useEffect(() => subscribe(DEFAULT_ENVELOPE, handleRealtimeMessage), [subscribe, handleRealtimeMessage]);
-
-  // Any active onboarding step — blocking or not — must win: OnboardingWizard
-  // renders its own dialog for as long as onboarding.activeSteps is non-empty,
-  // and two independent MUI Dialogs must never be mounted at once.
-  const onboardingActive = Boolean(onboarding?.activeSteps?.length);
-  const activePopup = queue[0];
-
-  useEffect(() => {
-    if (!activePopup || onboardingActive) return;
-    if (activePopup.markId == null) return;
-    if (seenIdsRef.current.has(activePopup.notification_id)) return;
-    seenIdsRef.current.add(activePopup.notification_id);
-    markSeen([activePopup.markId]);
-  }, [activePopup, onboardingActive, markSeen]);
-
-  const dismissActivePopup = useCallback(() => {
-    if (!activePopup) return;
-    if (activePopup.markId != null) markDismissed([activePopup.markId]);
-    setQueue((previous) => previous.filter((item) => item.notification_id !== activePopup.notification_id));
-  }, [activePopup, markDismissed]);
-
-  if (!activePopup || onboardingActive) return null;
-
-  return (
-    <WizardDialogShell
-      step={POPUP_STEP}
-      stepIndex={0}
-      total={1}
-      onComplete={dismissActivePopup}
-      onDismiss={dismissActivePopup}
-      ctx={{ content: activePopup.content }}
-      title={activePopup.content.title_key
-        ? t(activePopup.content.title_key, activePopup.content.params || {})
-        : t('PopupSurface.TITLE')}
-    />
-  );
-}
-
-export default PopupSurface;