feat(sentry): opt-in consent model with first-login banner

- Flip Sentry from opt-out to opt-in: enabled only when sable_sentry_enabled === 'true'
- Add TelemetryConsentBanner: fixed bottom slide-up banner shown once on first login
  - 'Enable crash reports' reloads page so Sentry initialises immediately
  - 'No thanks' / dismiss X sets sable_sentry_enabled=false, no repeat prompts
  - Only shown when VITE_SENTRY_DSN is configured (self-hosters unaffected)
- Update DiagnosticsAndPrivacy toggle: enable path now sets 'true' instead of removeItem
- Update SentrySettings dev panel to match new opt-in read logic

Author: Just-Insane

src/app/components/telemetry-consent/TelemetryConsentBanner.css.ts

@@ -0,0 +1,82 @@
+import { keyframes, style } from '@vanilla-extract/css';
+import { color, config, toRem } from 'folds';
+
+const slideUp = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(100%)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+});
+
+const slideDown = keyframes({
+  from: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+  to: {
+    opacity: 0,
+    transform: 'translateY(100%)',
+  },
+});
+
+export const Container = style({
+  position: 'fixed',
+  bottom: 'env(safe-area-inset-bottom, 0)',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  zIndex: 9998,
+  width: `min(100%, ${toRem(520)})`,
+  padding: config.space.S400,
+  pointerEvents: 'none',
+});
+
+export const Banner = style({
+  pointerEvents: 'all',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S300,
+  backgroundColor: color.Surface.Container,
+  color: color.Surface.OnContainer,
+  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+  borderRadius: toRem(16),
+  padding: config.space.S400,
+  boxShadow: `0 ${toRem(8)} ${toRem(32)} rgba(0, 0, 0, 0.45), 0 ${toRem(2)} ${toRem(8)} rgba(0, 0, 0, 0.3)`,
+  animationName: slideUp,
+  animationDuration: '300ms',
+  animationTimingFunction: 'cubic-bezier(0.22, 0.8, 0.6, 1)',
+  animationFillMode: 'both',
+
+  selectors: {
+    '&[data-dismissing=true]': {
+      animationName: slideDown,
+      animationDuration: '220ms',
+      animationTimingFunction: 'cubic-bezier(0.4, 0, 1, 1)',
+      animationFillMode: 'both',
+    },
+  },
+});
+
+export const Header = style({
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: config.space.S300,
+});
+
+export const HeaderText = style({
+  flex: 1,
+  minWidth: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: toRem(4),
+});
+
+export const Actions = style({
+  display: 'flex',
+  gap: config.space.S200,
+  justifyContent: 'flex-end',
+  flexWrap: 'wrap',
+});

src/app/components/telemetry-consent/TelemetryConsentBanner.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from 'react';
+import { Box, Button, Icon, IconButton, Icons, Text } from 'folds';
+import * as css from './TelemetryConsentBanner.css';
+
+const SENTRY_KEY = 'sable_sentry_enabled';
+
+export function TelemetryConsentBanner() {
+  const isSentryConfigured = Boolean(import.meta.env.VITE_SENTRY_DSN);
+  const [visible, setVisible] = useState(
+    isSentryConfigured && localStorage.getItem(SENTRY_KEY) === null
+  );
+  const [dismissing, setDismissing] = useState(false);
+  const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
+    },
+    []
+  );
+
+  if (!visible) return null;
+
+  const handleAcknowledge = () => {
+    localStorage.setItem(SENTRY_KEY, 'true');
+    setDismissing(true);
+    dismissTimerRef.current = setTimeout(() => setVisible(false), 220);
+  };
+
+  const handleOptOut = () => {
+    localStorage.setItem(SENTRY_KEY, 'false');
+    window.location.reload();
+  };
+
+  return (
+    <div className={css.Container}>
+      <div
+        className={css.Banner}
+        data-dismissing={dismissing}
+        role="region"
+        aria-label="Crash reporting notice"
+      >
+        <div className={css.Header}>
+          <Icon src={Icons.Shield} size="400" />
+          <div className={css.HeaderText}>
+            <Text size="H4">Crash reporting is enabled</Text>
+            <Text size="T300" priority="300">
+              Sable sends anonymous crash reports to help us fix bugs faster. No messages, room
+              names, or personal data are included.{' '}
+              <a
+                href="https://github.com/SableClient/Sable/blob/dev/docs/PRIVACY.md"
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                Learn more
+              </a>
+            </Text>
+          </div>
+          <IconButton
+            size="300"
+            variant="Surface"
+            fill="None"
+            radii="300"
+            onClick={handleAcknowledge}
+            aria-label="Dismiss"
+          >
+            <Icon size="100" src={Icons.Cross} />
+          </IconButton>
+        </div>
+        <Box className={css.Actions}>
+          <Button variant="Secondary" fill="Soft" size="300" radii="300" onClick={handleOptOut}>
+            <Text size="B300">Opt out</Text>
+          </Button>
+          <Button variant="Primary" fill="Solid" size="300" radii="300" onClick={handleAcknowledge}>
+            <Text size="B300">Got it</Text>
+          </Button>
+        </Box>
+      </div>
+    </div>
+  );
+}

src/app/components/telemetry-consent/index.ts

@@ -0,0 +1 @@
+export * from './TelemetryConsentBanner';

src/app/features/settings/general/General.tsx

@@ -1068,7 +1068,7 @@ function DiagnosticsAndPrivacy() {
   const handleSentryToggle = (enabled: boolean) => {
     setSentryEnabled(enabled);
     if (enabled) {
-      localStorage.removeItem('sable_sentry_enabled');
+      localStorage.setItem('sable_sentry_enabled', 'true');
     } else {
       localStorage.setItem('sable_sentry_enabled', 'false');
     }

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -48,6 +48,7 @@ import { mobileOrTablet } from '$utils/user-agent';
 import { useSlidingSyncActiveRoom } from '$hooks/useSlidingSyncActiveRoom';
 import { getSlidingSyncManager } from '$client/initMatrix';
 import { NotificationBanner } from '$components/notification-banner';
+import { TelemetryConsentBanner } from '$components/telemetry-consent';
 import { useCallSignaling } from '$hooks/useCallSignaling';
 import { getBlobCacheStats } from '$hooks/useBlobCache';
 import { lastVisitedRoomIdAtom } from '$state/room/lastRoom';
@@ -766,6 +767,7 @@ export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
       <BackgroundNotifications />
       <SyncNotificationSettingsWithServiceWorker />
       <NotificationBanner />
+      <TelemetryConsentBanner />
       <SlidingSyncActiveRoomSubscriber />
       <PresenceFeature />
       <SentryRoomContextFeature />

src/instrument.ts

@@ -23,7 +23,7 @@ const release = import.meta.env.VITE_APP_VERSION;
 let sessionErrorCount = 0;
 const SESSION_ERROR_LIMIT = 50;
 
-// Check user preferences
+// Default on: Sentry runs unless the user has opted out via the banner or Settings.
 const sentryEnabled = localStorage.getItem('sable_sentry_enabled') !== 'false';
 const replayEnabled = localStorage.getItem('sable_sentry_replay_enabled') === 'true';