@hadoku/task-ui-components 4.22.3 → 4.22.5

package/dist/components/ConnectedSettings.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useEffect } from "react";
+import { useState, useRef, useId, useCallback, useEffect } from "react";
+import { useSettingsTab } from "@wolffm/themes";
 import { SettingsIcon } from "./ThemeIcons.js";
 import { AvatarPicker } from "./AvatarPicker.js";
-import { prefetchSettings, setDisplayName, loadSignIn, switchKeyHref, loadSignInClient, passkeyHref, setContentLevel, passkeysSupported, deleteOwnAccount } from "../lib/settingsClient.js";
+import { passkeysSupported, prefetchSettings, setDisplayName, loadSignIn, switchKeyHref, loadSignInClient, passkeyHref, setContentLevel, deleteOwnAccount } from "../lib/settingsClient.js";
 /* empty css                */
 function untilAborted(signal) {
   return new Promise((_, reject) => {
@@ -26,7 +27,6 @@ const PASSKEY_DOT = {
   pointerEvents: "none"
 };
 const PASSKEY_PULSE_CLASS = "settings-popout__btn--pulse";
-const PASSKEY_PULSE_STYLE_ID = "settings-passkey-pulse";
 const PASSKEY_PULSE_CSS = `
 @keyframes settings-passkey-pulse {
   0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 70%, transparent); }
@@ -39,14 +39,67 @@ const PASSKEY_PULSE_CSS = `
   }
 }
 `;
-function usePasskeyPulseStyle(active) {
+const TABS_CSS = `
+.settings-popout__top {
+  position: sticky;
+  top: -16px;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: -16px -16px 0;
+  padding: 16px 16px 0;
+  background: var(--color-bg-card);
+  border-bottom: 1px solid var(--color-border);
+}
+.settings-popout__tabs {
+  display: flex;
+  gap: 2px;
+  margin: 0 -16px -1px;
+  padding: 0 16px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+.settings-popout__tab {
+  position: relative;
+  flex: none;
+  padding: 6px 10px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 600;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.settings-popout__tab:hover {
+  color: var(--color-text);
+}
+.settings-popout__tab[aria-selected='true'] {
+  color: var(--color-text);
+  border-bottom-color: var(--color-primary);
+}
+.settings-popout__tab:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: -2px;
+  border-radius: 6px 6px 0 0;
+}
+.settings-popout__tabpanel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+`;
+function useInjectedStyle(id, css, active) {
   useEffect(() => {
-    if (!active || document.getElementById(PASSKEY_PULSE_STYLE_ID)) return;
+    if (!active || document.getElementById(id)) return;
     const el = document.createElement("style");
-    el.id = PASSKEY_PULSE_STYLE_ID;
-    el.textContent = PASSKEY_PULSE_CSS;
+    el.id = id;
+    el.textContent = css;
     document.head.appendChild(el);
-  }, [active]);
+  }, [id, css, active]);
 }
 const TIER_LABEL = {
   admin: "Administrator",
@@ -60,10 +113,15 @@ function ConnectedSettings({
   userType: userTypeProp,
   name: nameProp,
   onNameChange,
-  children
+  children,
+  appTabs
 }) {
   const [open, setOpen] = useState(false);
   const rootRef = useRef(null);
+  const tabIdBase = useId();
+  const tabRefs = useRef(/* @__PURE__ */ new Map());
+  const [savedTab, saveTab] = useSettingsTab();
+  const [pickedTab, setPickedTab] = useState(null);
   const [userType, setUserType] = useState(userTypeProp ?? "public");
   const [resolvedName, setResolvedName] = useState(nameProp ?? null);
   const [nameDraft, setNameDraft] = useState(resolvedName ?? "");
@@ -89,7 +147,42 @@ function ConnectedSettings({
   const [resolving, setResolving] = useState(true);
   const showContentPill = userType !== "public";
   const needsPasskey = !resolving && userType !== "public" && passkeyCount === 0 && !passkeySaved && passkeysSupported();
-  usePasskeyPulseStyle(needsPasskey);
+  useInjectedStyle("settings-passkey-pulse", PASSKEY_PULSE_CSS, needsPasskey);
+  useInjectedStyle("settings-tabs", TABS_CSS, open);
+  const tabs = [
+    { id: "profile", label: "Profile" },
+    ...!resolving && showContentPill ? [{ id: "content", label: "Content" }] : [],
+    // The gear's dot asks for a passkey; this one says where Save passkey is.
+    { id: "account", label: "Account", dot: needsPasskey },
+    ...children ? [{ id: "app:", label: "App" }] : [],
+    ...(appTabs ?? []).map((t) => ({ id: `app:${t.id}`, label: t.label }))
+  ];
+  const tabIds = tabs.map((t) => t.id);
+  const defaultTab = tabIds.find((id) => id.startsWith("app:")) ?? "profile";
+  const activeTab = [pickedTab, savedTab].find((id) => id !== null && tabIds.includes(id)) ?? defaultTab;
+  const appTab = appTabs?.find((t) => `app:${t.id}` === activeTab);
+  const tabDomId = (id) => `${tabIdBase}tab-${id}`;
+  const panelDomId = `${tabIdBase}panel`;
+  const selectTab = useCallback(
+    (id) => {
+      setPickedTab(id);
+      saveTab(id);
+    },
+    [saveTab]
+  );
+  const onTabKey = (e) => {
+    const i = tabIds.indexOf(activeTab);
+    const n = tabIds.length;
+    const next = e.key === "ArrowRight" ? tabIds[(i + 1) % n] : e.key === "ArrowLeft" ? tabIds[(i - 1 + n) % n] : e.key === "Home" ? tabIds[0] : e.key === "End" ? tabIds[n - 1] : void 0;
+    if (next === void 0) return;
+    e.preventDefault();
+    selectTab(next);
+    tabRefs.current.get(next)?.focus();
+  };
+  useEffect(() => {
+    if (open)
+      tabRefs.current.get(activeTab)?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+  }, [open, activeTab]);
   useEffect(() => {
     if (userTypeProp !== void 0) setUserType(userTypeProp);
   }, [userTypeProp]);
@@ -262,295 +355,344 @@ function ConnectedSettings({
     ),
     open && /* @__PURE__ */ jsx("div", { className: "settings-popout__overlay", onClick: () => setOpen(false) }),
     open && /* @__PURE__ */ jsxs("div", { className: "settings-popout__panel", role: "dialog", "aria-label": "User settings", children: [
-      /* @__PURE__ */ jsx("div", { className: "settings-popout__header", children: "Settings" }),
-      /* @__PURE__ */ jsxs("section", { className: "settings-popout__row", children: [
-        /* @__PURE__ */ jsx("span", { className: "settings-popout__label", children: "Access tier" }),
-        resolving ? /* @__PURE__ */ jsx("span", { className: "settings-popout__value", children: "…" }) : /* @__PURE__ */ jsx("span", { className: `settings-popout__tier settings-popout__tier--${userType}`, children: TIER_LABEL[userType] })
-      ] }),
-      /* @__PURE__ */ jsxs("section", { className: "settings-popout__row", children: [
-        /* @__PURE__ */ jsx("span", { className: "settings-popout__label", children: "Display name" }),
-        resolving ? /* @__PURE__ */ jsx("span", { className: "settings-popout__value", children: "…" }) : editingName ? /* @__PURE__ */ jsxs("span", { className: "settings-popout__inline", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              className: "settings-popout__input",
-              value: nameDraft,
-              maxLength: 64,
-              autoFocus: true,
-              disabled: nameSaving,
-              "aria-invalid": nameError !== null,
-              "aria-describedby": nameError ? "settings-popout-name-error" : void 0,
-              onChange: (e) => {
-                setNameDraft(e.target.value);
-                setNameError(null);
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                  saveName().catch(reportErr);
-                }
-                if (e.key === "Escape") {
-                  e.stopPropagation();
-                  setEditingName(false);
-                  setNameError(null);
-                  setNameDraft(displayName ?? "");
-                }
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "settings-popout__btn settings-popout__btn--primary",
-              disabled: nameSaving,
-              onClick: () => {
-                saveName().catch(reportErr);
-              },
-              children: nameSaving ? "…" : "Save"
-            }
-          ),
-          nameError && /* @__PURE__ */ jsx(
-            "span",
-            {
-              id: "settings-popout-name-error",
-              className: "settings-popout__error",
-              role: "alert",
-              children: nameError
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx(
-          "button",
+      /* @__PURE__ */ jsxs("div", { className: "settings-popout__top", children: [
+        /* @__PURE__ */ jsx("div", { className: "settings-popout__header", children: "Settings" }),
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            type: "button",
-            className: "settings-popout__value settings-popout__value--editable",
-            "aria-label": "Edit display name",
-            onClick: () => {
-              setNameDraft(displayName ?? "");
-              setEditingName(true);
-            },
-            children: displayName || "Unnamed"
-          }
-        )
-      ] }),
-      !resolving && userType !== "public" && /* @__PURE__ */ jsxs("section", { className: "settings-popout__row settings-popout__row--stack", children: [
-        /* @__PURE__ */ jsxs("span", { className: "settings-popout__inline", children: [
-          /* @__PURE__ */ jsx("span", { className: "settings-popout__label settings-popout__label--grow", children: "Avatar" }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "settings-popout__btn",
-              "aria-expanded": avatarOpen,
-              onClick: () => setAvatarOpen((v) => !v),
-              children: avatarOpen ? "Done" : "Change"
-            }
-          )
-        ] }),
-        avatarOpen && /* @__PURE__ */ jsx(AvatarPicker, {})
-      ] }),
-      !resolving && showContentPill && /* @__PURE__ */ jsxs("section", { className: "settings-popout__row settings-popout__row--stack", children: [
-        /* @__PURE__ */ jsx("span", { className: "settings-popout__label", children: "Content visibility" }),
-        content ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "settings-popout__pill",
-              role: "radiogroup",
-              "aria-label": "Content visibility level",
-              children: Array.from({ length: content.maxLevel }, (_, i) => i + 1).map((lvl) => /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  role: "radio",
-                  "aria-checked": lvl === content.level,
-                  "aria-label": `Level ${lvl}`,
-                  className: `settings-popout__seg${lvl <= content.level ? " settings-popout__seg--filled" : ""}`,
-                  disabled: levelSaving,
-                  onClick: () => {
-                    pickLevel(lvl).catch(reportErr);
-                  },
-                  children: lvl
+            className: "settings-popout__tabs",
+            role: "tablist",
+            "aria-label": "Settings sections",
+            onKeyDown: onTabKey,
+            children: tabs.map((t) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ref: (el) => {
+                  if (el) tabRefs.current.set(t.id, el);
+                  else tabRefs.current.delete(t.id);
                 },
-                lvl
-              ))
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "settings-popout__hint", children: "Higher levels reveal more mature content across apps. Level 1 is safe-for-everyone." })
-        ] }) : (
-          // Not "Loading…" — the fetch has already settled by the time
-          // this section renders at all, so a null here means it failed.
-          /* @__PURE__ */ jsx("span", { className: "settings-popout__hint", children: "Currently unavailable." })
+                type: "button",
+                role: "tab",
+                id: tabDomId(t.id),
+                className: "settings-popout__tab",
+                "aria-selected": t.id === activeTab,
+                "aria-controls": panelDomId,
+                tabIndex: t.id === activeTab ? 0 : -1,
+                onClick: () => selectTab(t.id),
+                children: [
+                  t.label,
+                  t.dot && /* @__PURE__ */ jsx("span", { style: PASSKEY_DOT, "aria-hidden": "true" })
+                ]
+              },
+              t.id
+            ))
+          }
         )
       ] }),
-      keyFormOpen ? /* @__PURE__ */ jsx("section", { className: "settings-popout__row settings-popout__row--stack", children: /* @__PURE__ */ jsxs(
-        "form",
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          className: "settings-popout__key-form",
-          onSubmit: (e) => {
-            e.preventDefault();
-            submitKey().catch(reportErr);
-          },
+          className: "settings-popout__tabpanel",
+          role: "tabpanel",
+          id: panelDomId,
+          "aria-labelledby": tabDomId(activeTab),
           children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                name: "username",
-                autoComplete: "username",
-                value: "hadoku",
-                readOnly: true,
-                hidden: true
-              }
-            ),
-            /* @__PURE__ */ jsx("label", { className: "settings-popout__label", htmlFor: "settings-popout-key", children: "Access key" }),
-            /* @__PURE__ */ jsxs("span", { className: "settings-popout__inline", children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  id: "settings-popout-key",
-                  className: "settings-popout__input",
-                  type: "password",
-                  name: "password",
-                  autoComplete: "current-password",
-                  autoCapitalize: "none",
-                  spellCheck: false,
-                  autoFocus: true,
-                  value: keyDraft,
-                  disabled: keyBusy,
-                  "aria-invalid": keyError !== null,
-                  "aria-describedby": keyError ? "settings-popout-key-error" : void 0,
-                  onChange: (e) => setKeyDraft(e.target.value)
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
+            activeTab === "profile" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("section", { className: "settings-popout__row", children: [
+                /* @__PURE__ */ jsx("span", { className: "settings-popout__label", children: "Access tier" }),
+                resolving ? /* @__PURE__ */ jsx("span", { className: "settings-popout__value", children: "…" }) : /* @__PURE__ */ jsx("span", { className: `settings-popout__tier settings-popout__tier--${userType}`, children: TIER_LABEL[userType] })
+              ] }),
+              /* @__PURE__ */ jsxs("section", { className: "settings-popout__row", children: [
+                /* @__PURE__ */ jsx("span", { className: "settings-popout__label", children: "Display name" }),
+                resolving ? /* @__PURE__ */ jsx("span", { className: "settings-popout__value", children: "…" }) : editingName ? /* @__PURE__ */ jsxs("span", { className: "settings-popout__inline", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      className: "settings-popout__input",
+                      value: nameDraft,
+                      maxLength: 64,
+                      autoFocus: true,
+                      disabled: nameSaving,
+                      "aria-invalid": nameError !== null,
+                      "aria-describedby": nameError ? "settings-popout-name-error" : void 0,
+                      onChange: (e) => {
+                        setNameDraft(e.target.value);
+                        setNameError(null);
+                      },
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") {
+                          saveName().catch(reportErr);
+                        }
+                        if (e.key === "Escape") {
+                          e.stopPropagation();
+                          setEditingName(false);
+                          setNameError(null);
+                          setNameDraft(displayName ?? "");
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "settings-popout__btn settings-popout__btn--primary",
+                      disabled: nameSaving,
+                      onClick: () => {
+                        saveName().catch(reportErr);
+                      },
+                      children: nameSaving ? "…" : "Save"
+                    }
+                  ),
+                  nameError && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      id: "settings-popout-name-error",
+                      className: "settings-popout__error",
+                      role: "alert",
+                      children: nameError
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "settings-popout__value settings-popout__value--editable",
+                    "aria-label": "Edit display name",
+                    onClick: () => {
+                      setNameDraft(displayName ?? "");
+                      setEditingName(true);
+                    },
+                    children: displayName || "Unnamed"
+                  }
+                )
+              ] }),
+              !resolving && userType !== "public" && /* @__PURE__ */ jsxs("section", { className: "settings-popout__row settings-popout__row--stack", children: [
+                /* @__PURE__ */ jsxs("span", { className: "settings-popout__inline", children: [
+                  /* @__PURE__ */ jsx("span", { className: "settings-popout__label settings-popout__label--grow", children: "Avatar" }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "settings-popout__btn",
+                      "aria-expanded": avatarOpen,
+                      onClick: () => setAvatarOpen((v) => !v),
+                      children: avatarOpen ? "Done" : "Change"
+                    }
+                  )
+                ] }),
+                avatarOpen && /* @__PURE__ */ jsx(AvatarPicker, {})
+              ] })
+            ] }),
+            activeTab === "content" && /* @__PURE__ */ jsxs("section", { className: "settings-popout__row settings-popout__row--stack", children: [
+              /* @__PURE__ */ jsx("span", { className: "settings-popout__label", children: "Content visibility" }),
+              content ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "settings-popout__pill",
+                    role: "radiogroup",
+                    "aria-label": "Content visibility level",
+                    children: Array.from({ length: content.maxLevel }, (_, i) => i + 1).map((lvl) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        role: "radio",
+                        "aria-checked": lvl === content.level,
+                        "aria-label": `Level ${lvl}`,
+                        className: `settings-popout__seg${lvl <= content.level ? " settings-popout__seg--filled" : ""}`,
+                        disabled: levelSaving,
+                        onClick: () => {
+                          pickLevel(lvl).catch(reportErr);
+                        },
+                        children: lvl
+                      },
+                      lvl
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "settings-popout__hint", children: "Higher levels reveal more mature content across apps. Level 1 is safe-for-everyone." })
+              ] }) : (
+                // Not "Loading…" — the fetch has already settled by the time
+                // this section renders at all, so a null here means it failed.
+                /* @__PURE__ */ jsx("span", { className: "settings-popout__hint", children: "Currently unavailable." })
+              )
+            ] }),
+            activeTab === "account" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              keyFormOpen ? /* @__PURE__ */ jsx("section", { className: "settings-popout__row settings-popout__row--stack", children: /* @__PURE__ */ jsxs(
+                "form",
                 {
-                  type: "submit",
-                  className: "settings-popout__btn settings-popout__btn--primary",
-                  disabled: keyBusy,
-                  children: keyBusy ? "Signing in…" : "Sign in"
+                  className: "settings-popout__key-form",
+                  onSubmit: (e) => {
+                    e.preventDefault();
+                    submitKey().catch(reportErr);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        name: "username",
+                        autoComplete: "username",
+                        value: "hadoku",
+                        readOnly: true,
+                        hidden: true
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("label", { className: "settings-popout__label", htmlFor: "settings-popout-key", children: "Access key" }),
+                    /* @__PURE__ */ jsxs("span", { className: "settings-popout__inline", children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          id: "settings-popout-key",
+                          className: "settings-popout__input",
+                          type: "password",
+                          name: "password",
+                          autoComplete: "current-password",
+                          autoCapitalize: "none",
+                          spellCheck: false,
+                          autoFocus: true,
+                          value: keyDraft,
+                          disabled: keyBusy,
+                          "aria-invalid": keyError !== null,
+                          "aria-describedby": keyError ? "settings-popout-key-error" : void 0,
+                          onChange: (e) => setKeyDraft(e.target.value)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "submit",
+                          className: "settings-popout__btn settings-popout__btn--primary",
+                          disabled: keyBusy,
+                          children: keyBusy ? "Signing in…" : "Sign in"
+                        }
+                      )
+                    ] }),
+                    passkeysSupported() && /* @__PURE__ */ jsx("span", { className: "settings-popout__inline", children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "settings-popout__btn",
+                        disabled: keyBusy,
+                        onClick: () => {
+                          signInWithPasskey().catch(reportErr);
+                        },
+                        children: passkeyMode === "signin" ? "Waiting for passkey…" : "Use a passkey"
+                      }
+                    ) }),
+                    passkeyMode === "signin" && /* @__PURE__ */ jsx("span", { className: "settings-popout__inline", children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "settings-popout__btn",
+                        onClick: () => cancelPasskey(),
+                        children: "Cancel"
+                      }
+                    ) }),
+                    keyError && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        id: "settings-popout-key-error",
+                        className: "settings-popout__error",
+                        role: "alert",
+                        children: keyError
+                      }
+                    )
+                  ]
                 }
-              )
+              ) }) : /* @__PURE__ */ jsxs("section", { className: "settings-popout__row settings-popout__row--stack", children: [
+                /* @__PURE__ */ jsxs("span", { className: "settings-popout__inline", children: [
+                  /* @__PURE__ */ jsx("span", { className: "settings-popout__label settings-popout__label--grow", children: "Access key" }),
+                  !resolving && userType !== "public" && passkeysSupported() && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: `settings-popout__btn${needsPasskey ? ` settings-popout__btn--primary ${PASSKEY_PULSE_CLASS}` : ""}`,
+                      disabled: passkeyMode !== null || passkeySaved,
+                      onClick: () => {
+                        savePasskey().catch(reportErr);
+                      },
+                      children: passkeySaved ? "Passkey saved" : passkeyMode === "save" ? "Saving…" : "Save passkey"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "settings-popout__btn",
+                      disabled: passkeyMode === "save",
+                      onClick: openKeyForm,
+                      children: "Switch key"
+                    }
+                  )
+                ] }),
+                passkeyMode === "save" && /* @__PURE__ */ jsx("span", { className: "settings-popout__inline", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "settings-popout__btn",
+                    onClick: () => cancelPasskey(),
+                    children: "Cancel"
+                  }
+                ) }),
+                passkeyError && /* @__PURE__ */ jsx("span", { className: "settings-popout__error", role: "alert", children: passkeyError })
+              ] }),
+              !resolving && userType === "member" && /* @__PURE__ */ jsxs("section", { className: "settings-popout__row settings-popout__row--stack", children: [
+                /* @__PURE__ */ jsxs("span", { className: "settings-popout__inline", children: [
+                  /* @__PURE__ */ jsx("span", { className: "settings-popout__label settings-popout__label--grow", children: "Account" }),
+                  deleteStage === "idle" ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "settings-popout__btn",
+                      onClick: () => {
+                        setDeleteError(null);
+                        setDeleteStage("confirm");
+                      },
+                      children: "Delete account"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "settings-popout__btn",
+                      disabled: deleteStage === "busy",
+                      onClick: () => setDeleteStage("idle"),
+                      children: "Keep"
+                    }
+                  )
+                ] }),
+                deleteStage !== "idle" && /* @__PURE__ */ jsx("span", { className: "settings-popout__inline", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "settings-popout__btn settings-popout__btn--primary",
+                    disabled: deleteStage === "busy",
+                    onClick: () => {
+                      setDeleteStage("busy");
+                      deleteOwnAccount().then((deleted) => {
+                        if (!deleted) {
+                          setDeleteError("Account not deleted");
+                          setDeleteStage("confirm");
+                          return;
+                        }
+                        localStorage.removeItem("hadoku_session_id");
+                        localStorage.removeItem("hadoku_user_type");
+                        window.location.assign("/");
+                      }).catch(reportErr);
+                    },
+                    children: deleteStage === "busy" ? "Deleting…" : "Delete for good"
+                  }
+                ) }),
+                deleteError && /* @__PURE__ */ jsx("span", { className: "settings-popout__error", role: "alert", children: deleteError })
+              ] })
             ] }),
-            passkeysSupported() && /* @__PURE__ */ jsx("span", { className: "settings-popout__inline", children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "settings-popout__btn",
-                disabled: keyBusy,
-                onClick: () => {
-                  signInWithPasskey().catch(reportErr);
-                },
-                children: passkeyMode === "signin" ? "Waiting for passkey…" : "Use a passkey"
-              }
-            ) }),
-            passkeyMode === "signin" && /* @__PURE__ */ jsx("span", { className: "settings-popout__inline", children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "settings-popout__btn",
-                onClick: () => cancelPasskey(),
-                children: "Cancel"
-              }
-            ) }),
-            keyError && /* @__PURE__ */ jsx(
-              "span",
-              {
-                id: "settings-popout-key-error",
-                className: "settings-popout__error",
-                role: "alert",
-                children: keyError
-              }
-            )
+            activeTab === "app:" && /* @__PURE__ */ jsx("section", { className: "settings-popout__row settings-popout__row--stack", children }),
+            appTab && /* @__PURE__ */ jsx("section", { className: "settings-popout__row settings-popout__row--stack", children: appTab.render() })
           ]
         }
-      ) }) : /* @__PURE__ */ jsxs("section", { className: "settings-popout__row settings-popout__row--stack", children: [
-        /* @__PURE__ */ jsxs("span", { className: "settings-popout__inline", children: [
-          /* @__PURE__ */ jsx("span", { className: "settings-popout__label settings-popout__label--grow", children: "Access key" }),
-          !resolving && userType !== "public" && passkeysSupported() && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: `settings-popout__btn${needsPasskey ? ` settings-popout__btn--primary ${PASSKEY_PULSE_CLASS}` : ""}`,
-              disabled: passkeyMode !== null || passkeySaved,
-              onClick: () => {
-                savePasskey().catch(reportErr);
-              },
-              children: passkeySaved ? "Passkey saved" : passkeyMode === "save" ? "Saving…" : "Save passkey"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "settings-popout__btn",
-              disabled: passkeyMode === "save",
-              onClick: openKeyForm,
-              children: "Switch key"
-            }
-          )
-        ] }),
-        passkeyMode === "save" && /* @__PURE__ */ jsx("span", { className: "settings-popout__inline", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "settings-popout__btn",
-            onClick: () => cancelPasskey(),
-            children: "Cancel"
-          }
-        ) }),
-        passkeyError && /* @__PURE__ */ jsx("span", { className: "settings-popout__error", role: "alert", children: passkeyError })
-      ] }),
-      !resolving && userType === "member" && /* @__PURE__ */ jsxs("section", { className: "settings-popout__row settings-popout__row--stack", children: [
-        /* @__PURE__ */ jsxs("span", { className: "settings-popout__inline", children: [
-          /* @__PURE__ */ jsx("span", { className: "settings-popout__label settings-popout__label--grow", children: "Account" }),
-          deleteStage === "idle" ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "settings-popout__btn",
-              onClick: () => {
-                setDeleteError(null);
-                setDeleteStage("confirm");
-              },
-              children: "Delete account"
-            }
-          ) : /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "settings-popout__btn",
-              disabled: deleteStage === "busy",
-              onClick: () => setDeleteStage("idle"),
-              children: "Keep"
-            }
-          )
-        ] }),
-        deleteStage !== "idle" && /* @__PURE__ */ jsx("span", { className: "settings-popout__inline", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "settings-popout__btn settings-popout__btn--primary",
-            disabled: deleteStage === "busy",
-            onClick: () => {
-              setDeleteStage("busy");
-              deleteOwnAccount().then((deleted) => {
-                if (!deleted) {
-                  setDeleteError("Account not deleted");
-                  setDeleteStage("confirm");
-                  return;
-                }
-                localStorage.removeItem("hadoku_session_id");
-                localStorage.removeItem("hadoku_user_type");
-                window.location.assign("/");
-              }).catch(reportErr);
-            },
-            children: deleteStage === "busy" ? "Deleting…" : "Delete for good"
-          }
-        ) }),
-        deleteError && /* @__PURE__ */ jsx("span", { className: "settings-popout__error", role: "alert", children: deleteError })
-      ] }),
-      children && /* @__PURE__ */ jsx("section", { className: "settings-popout__row settings-popout__row--stack settings-popout__app", children })
+      )
     ] })
   ] });
 }