palmier 0.7.9 → 0.8.1

package/palmier-server/pwa/src/components/HostMenu.tsx

@@ -1,101 +1,9 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { useNavigate } from "react-router-dom";
-import { Capacitor, registerPlugin } from "@capacitor/core";
-import { App as CapApp } from "@capacitor/app";
-import { Preferences } from "@capacitor/preferences";
-
-interface LocationPermissionResult {
-  fine: boolean;
-  background: boolean;
-}
-
-interface LocationPermissionPlugin {
-  request(): Promise<LocationPermissionResult>;
-  check(): Promise<LocationPermissionResult>;
-}
-
-interface NotificationListenerResult {
-  enabled: boolean;
-}
-
-interface NotificationListenerPlugin {
-  request(): Promise<NotificationListenerResult>;
-  check(): Promise<NotificationListenerResult>;
-}
-
-const LocationPermission = Capacitor.isNativePlatform()
-  ? registerPlugin<LocationPermissionPlugin>("LocationPermission")
-  : null;
-
-interface SmsPermissionResult {
-  granted: boolean;
-}
-
-interface SmsPermissionPlugin {
-  request(): Promise<SmsPermissionResult>;
-  check(): Promise<SmsPermissionResult>;
-}
-
-interface ContactsPermissionResult {
-  granted: boolean;
-}
-
-interface ContactsPermissionPlugin {
-  request(): Promise<ContactsPermissionResult>;
-  check(): Promise<ContactsPermissionResult>;
-}
-
-interface CalendarPermissionResult {
-  granted: boolean;
-}
-
-interface CalendarPermissionPlugin {
-  request(): Promise<CalendarPermissionResult>;
-  check(): Promise<CalendarPermissionResult>;
-}
-
-interface DndAccessResult {
-  enabled: boolean;
-}
-
-interface DndAccessPlugin {
-  request(): Promise<DndAccessResult>;
-  check(): Promise<DndAccessResult>;
-}
-
-interface FullScreenIntentResult {
-  granted: boolean;
-}
-
-interface FullScreenIntentPlugin {
-  request(): Promise<FullScreenIntentResult>;
-  check(): Promise<FullScreenIntentResult>;
-}
-
-const NotificationListener = Capacitor.isNativePlatform()
-  ? registerPlugin<NotificationListenerPlugin>("NotificationListener")
-  : null;
-
-const SmsPermission = Capacitor.isNativePlatform()
-  ? registerPlugin<SmsPermissionPlugin>("SmsPermission")
-  : null;
-
-const ContactsPermission = Capacitor.isNativePlatform()
-  ? registerPlugin<ContactsPermissionPlugin>("ContactsPermission")
-  : null;
-
-const CalendarPermission = Capacitor.isNativePlatform()
-  ? registerPlugin<CalendarPermissionPlugin>("CalendarPermission")
-  : null;
-
-const DndAccess = Capacitor.isNativePlatform()
-  ? registerPlugin<DndAccessPlugin>("DndAccess")
-  : null;
-
-const FullScreenIntent = Capacitor.isNativePlatform()
-  ? registerPlugin<FullScreenIntentPlugin>("FullScreenIntent")
-  : null;
+import { Capacitor } from "@capacitor/core";
+import { App as CapacitorApp } from "@capacitor/app";
+import { Device, type PermissionType } from "../native/Device";
 import { useHostStore } from "../contexts/HostStoreContext";
 import { useMediaQuery } from "../hooks/useMediaQuery";
 import { confirmLeaveDraft } from "../draftGuard";
@@ -104,6 +12,42 @@ import { confirmLeaveDraft } from "../draftGuard";
 const isLanMode = !!(window as any).__PALMIER_SERVE__;
 const isNative = Capacitor.isNativePlatform();
 
+interface CapabilityDefinition {
+  /** Server-side capability name used in device.capability.{enable,disable} RPCs. */
+  capability: string;
+  /** Label shown in the drawer toggle. */
+  label: string;
+  /** Runtime or settings permission to request before enabling. */
+  permission?: PermissionType;
+  /** True for capabilities that display full-screen alerts (alert, send-email). */
+  needsFullScreenIntent?: boolean;
+  /** Override RPC methods; location uses device.location.{enable,disable} instead. */
+  enableMethod?: string;
+  disableMethod?: string;
+  enableParams?(fcmToken: string): Record<string, unknown>;
+  disableParams?(): Record<string, unknown>;
+}
+
+const CAPABILITIES: CapabilityDefinition[] = [
+  {
+    capability: "location",
+    label: "Location Access",
+    permission: "location",
+    enableMethod: "device.location.enable",
+    disableMethod: "device.location.disable",
+    enableParams: (fcmToken) => ({ fcmToken }),
+    disableParams: () => ({}),
+  },
+  { capability: "notifications", label: "Notification Access", permission: "notificationListener" },
+  { capability: "sms", label: "SMS Access", permission: "sms" },
+  { capability: "contacts", label: "Contacts Access", permission: "contacts" },
+  { capability: "calendar", label: "Calendar Access", permission: "calendar" },
+  { capability: "dnd", label: "Do Not Disturb Control", permission: "dnd" },
+  { capability: "alert", label: "Alert Access", needsFullScreenIntent: true },
+  { capability: "battery", label: "Battery Access" },
+  { capability: "send-email", label: "Email Drafting", needsFullScreenIntent: true },
+];
+
 interface HostMenuProps {
   daemonVersion?: string | null;
   capabilityTokens?: Record<string, string | null>;
@@ -122,294 +66,140 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
   const [renamingId, setRenamingId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState("");
   const [confirmingDeleteId, setConfirmingDeleteId] = useState<string | null>(null);
-  const [togglingLocation, setTogglingLocation] = useState(false);
-  const [togglingNotificationListener, setTogglingNotificationListener] = useState(false);
-  const [togglingSms, setTogglingSms] = useState(false);
-  const [togglingContacts, setTogglingContacts] = useState(false);
-  const [togglingCalendar, setTogglingCalendar] = useState(false);
-  const [togglingDnd, setTogglingDnd] = useState(false);
-  const [togglingAlarm, setTogglingAlarm] = useState(false);
-  const [togglingBattery, setTogglingBattery] = useState(false);
-  const [togglingEmail, setTogglingEmail] = useState(false);
+  const [togglingCapability, setTogglingCapability] = useState<string | null>(null);
+  /**
+   * Permission types the installed APK understands. Null while loading; an empty
+   * set means the native plugin doesn't expose a discovery method (pre-Device
+   * plugin build) — in that case we don't pre-filter the UI and rely on per-call
+   * {supported: false} from the native side as the fallback.
+   */
+  const [supportedPerms, setSupportedPerms] = useState<Set<PermissionType> | null>(null);
+
+  useEffect(() => {
+    if (!isNative || !Device) {
+      setSupportedPerms(new Set());
+      return;
+    }
+    Device.getSupportedPermissions()
+      .then(({ types }) => setSupportedPerms(new Set(types)))
+      .catch(() => setSupportedPerms(new Set()));   // old APK: fall back to per-call supported flag
+  }, []);
 
   // Capability enabled = this device's client token matches the registered device for that capability
-  function isCapEnabled(cap: string): boolean {
-    return !!(activeClientToken && capabilityTokens?.[cap] === activeClientToken);
+  function isCapabilityEnabled(capability: string): boolean {
+    return !!(activeClientToken && capabilityTokens?.[capability] === activeClientToken);
+  }
+
+  /**
+   * A capability is shown when native either explicitly supports its permission, or
+   * can't advertise support (empty set = old APK or web) — in the latter case the
+   * toggle still works because the per-call `supported` flag guards at tap time.
+   */
+  function isCapabilityVisible(definition: CapabilityDefinition): boolean {
+    if (!supportedPerms) return false;
+    if (supportedPerms.size === 0) return true;
+    if (definition.permission && !supportedPerms.has(definition.permission)) return false;
+    if (definition.needsFullScreenIntent && !supportedPerms.has("fullScreenIntent")) return false;
+    return true;
   }
-  const locationEnabled = isCapEnabled("location");
-  const notificationListenerEnabled = isCapEnabled("notifications");
-  const smsEnabled = isCapEnabled("sms");
-  const contactsEnabled = isCapEnabled("contacts");
-  const calendarEnabled = isCapEnabled("calendar");
-  const dndEnabled = isCapEnabled("dnd");
-  const alarmEnabled = isCapEnabled("alert");
-  const batteryEnabled = isCapEnabled("battery");
-  const emailEnabled = isCapEnabled("email");
 
   /** Update local capability tokens state after a toggle change */
-  function setCapEnabled(cap: string, enabled: boolean) {
+  function setCapabilityEnabled(capability: string, enabled: boolean) {
     const updated: Record<string, string | null> = {};
     for (const [k, v] of Object.entries(capabilityTokens ?? {})) updated[k] = v ?? null;
-    updated[cap] = enabled ? (activeClientToken ?? null) : null;
+    updated[capability] = enabled ? (activeClientToken ?? null) : null;
     onCapabilityTokensChange?.(updated);
   }
 
-  // Sync location toggle with permission state — on mount and when app resumes from background
+  // If the OS location permission is revoked while the app is backgrounded,
+  // disable the capability on the host so agents don't keep pinging for fixes.
   useEffect(() => {
-    if (!isNative || !LocationPermission || !request) return;
+    if (!isNative || !Device || !request) return;
+
+    const locationEnabled = isCapabilityEnabled("location");
+    if (!locationEnabled) return;
 
     function syncPermissionState() {
-      if (!locationEnabled) return;
-      LocationPermission!.check().then(({ fine }) => {
-        if (!fine) {
-          // Permission revoked — disable on host
+      Device!.checkPermission({ type: "location" }).then(({ granted }) => {
+        if (!granted) {
           request!("device.location.disable").then(() => {
-            setCapEnabled("location", false);
+            setCapabilityEnabled("location", false);
           }).catch(() => {});
         }
       });
     }
 
     syncPermissionState();
-
-    const listener = CapApp.addListener("resume", () => {
-      syncPermissionState();
-    });
-
+    const listener = CapacitorApp.addListener("resume", syncPermissionState);
     return () => { listener.then((h) => h.remove()); };
-  }, [locationEnabled, activeClientToken]);
+  }, [capabilityTokens, activeClientToken]);
 
-  async function handleNotificationListenerToggle() {
-    if (!NotificationListener || !request) return;
-    setTogglingNotificationListener(true);
+  // Mirror the server-derived enabled set into native as the local kill-switch.
+  // Toggling below writes through immediately; this useEffect catches host-initiated
+  // changes (e.g. a capability revoked on another device) on the next render.
+  useEffect(() => {
+    if (!isNative || !Device) return;
+    const enabledCapabilities = CAPABILITIES
+      .map((definition) => definition.capability)
+      .filter((capability) => capabilityTokens?.[capability] === activeClientToken);
+    Device.setEnabledCapabilities({ capabilities: enabledCapabilities }).catch(() => {});
+  }, [capabilityTokens, activeClientToken]);
+
+  async function toggleCapability(definition: CapabilityDefinition) {
+    if (!request) return;
+    const enabled = isCapabilityEnabled(definition.capability);
+    setTogglingCapability(definition.capability);
     try {
-      if (notificationListenerEnabled) {
-        await Preferences.set({ key: "notificationListenerEnabled", value: "false" });
-        await request("device.capability.disable", { capability: "notifications" });
-        setCapEnabled("notifications", false);
-      } else {
-        const { enabled: systemEnabled } = await NotificationListener.check();
-        if (!systemEnabled) {
-          const result = await NotificationListener.request();
-          if (!result.enabled) return;
-        }
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await Preferences.set({ key: "notificationListenerEnabled", value: "true" });
-        await request("device.capability.enable", { capability: "notifications", fcmToken });
-        setCapEnabled("notifications", true);
+      if (enabled) {
+        const method = definition.disableMethod ?? "device.capability.disable";
+        const params = definition.disableParams?.() ?? { capability: definition.capability };
+        await request(method, params);
+        setCapabilityEnabled(definition.capability, false);
+        return;
       }
-    } catch (err) {
-      console.error("Failed to toggle notification listener:", err);
-    } finally {
-      setTogglingNotificationListener(false);
-    }
-  }
 
-  async function handleSmsToggle() {
-    if (!SmsPermission || !request) return;
-    setTogglingSms(true);
-    try {
-      if (smsEnabled) {
-        await Preferences.set({ key: "smsListenerEnabled", value: "false" });
-        await request("device.capability.disable", { capability: "sms" });
-        setCapEnabled("sms", false);
-      } else {
-        const { granted } = await SmsPermission.check();
-        if (!granted) {
-          const result = await SmsPermission.request();
-          if (!result.granted) return;
+      if (Device && definition.permission) {
+        const check = await Device.checkPermission({ type: definition.permission });
+        if (!check.supported) {
+          console.warn(`Native build does not support permission '${definition.permission}'`);
+          return;
         }
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await Preferences.set({ key: "smsListenerEnabled", value: "true" });
-        await request("device.capability.enable", { capability: "sms", fcmToken });
-        setCapEnabled("sms", true);
-      }
-    } catch (err) {
-      console.error("Failed to toggle SMS access:", err);
-    } finally {
-      setTogglingSms(false);
-    }
-  }
-
-  async function handleContactsToggle() {
-    if (!ContactsPermission || !request) return;
-    setTogglingContacts(true);
-    try {
-      if (contactsEnabled) {
-        await Preferences.set({ key: "contactsAccessEnabled", value: "false" });
-        await request("device.capability.disable", { capability: "contacts" });
-        setCapEnabled("contacts", false);
-      } else {
-        const { granted } = await ContactsPermission.check();
-        if (!granted) {
-          const result = await ContactsPermission.request();
+        if (!check.granted) {
+          const result = await Device.requestPermission({ type: definition.permission });
           if (!result.granted) return;
         }
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await Preferences.set({ key: "contactsAccessEnabled", value: "true" });
-        await request("device.capability.enable", { capability: "contacts", fcmToken });
-        setCapEnabled("contacts", true);
       }
-    } catch (err) {
-      console.error("Failed to toggle contacts access:", err);
-    } finally {
-      setTogglingContacts(false);
-    }
-  }
-
-  async function handleCalendarToggle() {
-    if (!CalendarPermission || !request) return;
-    setTogglingCalendar(true);
-    try {
-      if (calendarEnabled) {
-        await Preferences.set({ key: "calendarAccessEnabled", value: "false" });
-        await request("device.capability.disable", { capability: "calendar" });
-        setCapEnabled("calendar", false);
-      } else {
-        const { granted } = await CalendarPermission.check();
-        if (!granted) {
-          const result = await CalendarPermission.request();
-          if (!result.granted) return;
+      if (Device && definition.needsFullScreenIntent) {
+        const check = await Device.checkPermission({ type: "fullScreenIntent" });
+        if (!check.supported) {
+          console.warn("Native build does not support fullScreenIntent");
+          return;
         }
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await Preferences.set({ key: "calendarAccessEnabled", value: "true" });
-        await request("device.capability.enable", { capability: "calendar", fcmToken });
-        setCapEnabled("calendar", true);
-      }
-    } catch (err) {
-      console.error("Failed to toggle calendar access:", err);
-    } finally {
-      setTogglingCalendar(false);
-    }
-  }
-
-  async function handleDndToggle() {
-    if (!DndAccess || !request) return;
-    setTogglingDnd(true);
-    try {
-      if (dndEnabled) {
-        await request("device.capability.disable", { capability: "dnd" });
-        setCapEnabled("dnd", false);
-      } else {
-        const { enabled: systemEnabled } = await DndAccess.check();
-        if (!systemEnabled) {
-          const result = await DndAccess.request();
-          if (!result.enabled) return;
+        if (!check.granted) {
+          const result = await Device.requestPermission({ type: "fullScreenIntent" });
+          if (!result.granted) return;
         }
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await request("device.capability.enable", { capability: "dnd", fcmToken });
-        setCapEnabled("dnd", true);
-      }
-    } catch (err) {
-      console.error("Failed to toggle DND access:", err);
-    } finally {
-      setTogglingDnd(false);
-    }
-  }
-
-  /** Ensure full-screen intent permission is granted (needed for alert + email). */
-  async function ensureFullScreenIntent(): Promise<boolean> {
-    if (!FullScreenIntent) return true;
-    const { granted } = await FullScreenIntent.check();
-    if (granted) return true;
-    const result = await FullScreenIntent.request();
-    return result.granted;
-  }
-
-  async function handleAlarmToggle() {
-    if (!request) return;
-    setTogglingAlarm(true);
-    try {
-      if (alarmEnabled) {
-        await request("device.capability.disable", { capability: "alert" });
-        setCapEnabled("alert", false);
-      } else {
-        if (!await ensureFullScreenIntent()) return;
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await request("device.capability.enable", { capability: "alert", fcmToken });
-        setCapEnabled("alert", true);
-      }
-    } catch (err) {
-      console.error("Failed to toggle alert access:", err);
-    } finally {
-      setTogglingAlarm(false);
-    }
-  }
-
-  async function handleEmailToggle() {
-    if (!request) return;
-    setTogglingEmail(true);
-    try {
-      if (emailEnabled) {
-        await request("device.capability.disable", { capability: "email" });
-        setCapEnabled("email", false);
-      } else {
-        if (!await ensureFullScreenIntent()) return;
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await request("device.capability.enable", { capability: "email", fcmToken });
-        setCapEnabled("email", true);
-      }
-    } catch (err) {
-      console.error("Failed to toggle email access:", err);
-    } finally {
-      setTogglingEmail(false);
-    }
-  }
-
-  async function handleBatteryToggle() {
-    if (!request) return;
-    setTogglingBattery(true);
-    try {
-      if (batteryEnabled) {
-        await request("device.capability.disable", { capability: "battery" });
-        setCapEnabled("battery", false);
-      } else {
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await request("device.capability.enable", { capability: "battery", fcmToken });
-        setCapEnabled("battery", true);
       }
-    } catch (err) {
-      console.error("Failed to toggle battery access:", err);
-    } finally {
-      setTogglingBattery(false);
-    }
-  }
 
-  async function handleLocationToggle() {
-    if (!request) return;
-    setTogglingLocation(true);
-    try {
-      if (locationEnabled) {
-        await request("device.location.disable");
-        setCapEnabled("location", false);
-      } else {
-        if (LocationPermission) {
-          const result = await LocationPermission.request();
-          if (!result.fine) {
-            return;
-          }
-        }
-
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) {
-          console.warn("No FCM token available");
-          return;
-        }
-        await request("device.location.enable", { fcmToken });
-        setCapEnabled("location", true);
-      }
+      if (!Device) return;
+      const { token: fcmToken } = await Device.getFcmToken();
+      if (!fcmToken) { console.warn("No FCM token available"); return; }
+
+      // Whitelist the capability natively before enabling on the host, so an FCM
+      // from the host can't arrive in the gap where our useEffect hasn't synced yet.
+      const enabledNow = CAPABILITIES
+        .map((c) => c.capability)
+        .filter((name) => name === definition.capability || capabilityTokens?.[name] === activeClientToken);
+      await Device.setEnabledCapabilities({ capabilities: enabledNow });
+
+      const method = definition.enableMethod ?? "device.capability.enable";
+      const params = definition.enableParams?.(fcmToken) ?? { capability: definition.capability, fcmToken };
+      await request(method, params);
+      setCapabilityEnabled(definition.capability, true);
     } catch (err) {
-      console.error("Failed to toggle location:", err);
+      console.error(`Failed to toggle ${definition.capability}:`, err);
     } finally {
-      setTogglingLocation(false);
+      setTogglingCapability(null);
     }
   }
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -596,114 +386,23 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
         <>
           <div className="drawer-divider" />
           <div className="drawer-section">
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Location Access</span>
-              <button
-                className={`toggle-switch ${locationEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleLocationToggle}
-                disabled={togglingLocation}
-                role="switch"
-                aria-checked={locationEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Notification Access</span>
-              <button
-                className={`toggle-switch ${notificationListenerEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleNotificationListenerToggle}
-                disabled={togglingNotificationListener}
-                role="switch"
-                aria-checked={notificationListenerEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">SMS Access</span>
-              <button
-                className={`toggle-switch ${smsEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleSmsToggle}
-                disabled={togglingSms}
-                role="switch"
-                aria-checked={smsEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Contacts Access</span>
-              <button
-                className={`toggle-switch ${contactsEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleContactsToggle}
-                disabled={togglingContacts}
-                role="switch"
-                aria-checked={contactsEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Calendar Access</span>
-              <button
-                className={`toggle-switch ${calendarEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleCalendarToggle}
-                disabled={togglingCalendar}
-                role="switch"
-                aria-checked={calendarEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Do Not Disturb Control</span>
-              <button
-                className={`toggle-switch ${dndEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleDndToggle}
-                disabled={togglingDnd}
-                role="switch"
-                aria-checked={dndEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Alert Access</span>
-              <button
-                className={`toggle-switch ${alarmEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleAlarmToggle}
-                disabled={togglingAlarm}
-                role="switch"
-                aria-checked={alarmEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Battery Access</span>
-              <button
-                className={`toggle-switch ${batteryEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleBatteryToggle}
-                disabled={togglingBattery}
-                role="switch"
-                aria-checked={batteryEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Email Access</span>
-              <button
-                className={`toggle-switch ${emailEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleEmailToggle}
-                disabled={togglingEmail}
-                role="switch"
-                aria-checked={emailEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
+            {CAPABILITIES.filter(isCapabilityVisible).map((definition) => {
+              const enabled = isCapabilityEnabled(definition.capability);
+              return (
+                <label key={definition.capability} className="drawer-toggle">
+                  <span className="drawer-toggle-label">{definition.label}</span>
+                  <button
+                    className={`toggle-switch ${enabled ? "toggle-switch-on" : ""}`}
+                    onClick={() => toggleCapability(definition)}
+                    disabled={togglingCapability === definition.capability}
+                    role="switch"
+                    aria-checked={enabled}
+                  >
+                    <span className="toggle-switch-thumb" />
+                  </button>
+                </label>
+              );
+            })}
           </div>
         </>
       )}