@entropy-softworks/ui 2026.7.31

package/src/components/popover.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import * as PopoverPrimitive from "@rn-primitives/popover";
+import { cn } from "../utils/cn";
+import { useColorScheme } from "nativewind";
+import { Platform } from "react-native";
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { className?: string }
+>(({ className, sideOffset = 8, align = "start", side = "bottom", ...props }, ref) => {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Overlay />
+      <PopoverPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        align={align}
+        side={side}
+        className={cn(
+          "z-50 w-72 rounded-lg border border-border p-4",
+          isDark ? "bg-neutral-900" : "bg-white",
+          Platform.OS === "web" && "shadow-lg",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+});
+PopoverContent.displayName = "PopoverContent";
+
+export { Popover, PopoverTrigger, PopoverContent };

package/src/components/profile/ProfileDialog.tsx

@@ -0,0 +1,129 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Pressable, ScrollView, useWindowDimensions, View } from "react-native";
+import { useAuth } from "../../hooks/useAuth";
+import { cn } from "../../utils/cn";
+import { Dialog } from "../dialog";
+import { MutedText, Text } from "../text";
+import { UserAvatar } from "../user-avatar";
+import { ProfileTab } from "./ProfileTab";
+import { SecurityTab, type SecurityTabProps } from "./SecurityTab";
+
+type Tab = "profile" | "security";
+
+export interface ProfileDialogProps {
+  visible: boolean;
+  onClose: () => void;
+  initialTab?: Tab;
+  /** Wired to `SecurityTab`'s MFA-enrolment callback. */
+  onEnableMfa: () => void;
+  /**
+   * Optional client-side key-rewrap hook for password changes. Vault
+   * supplies `KeyManager.computeReWrap`; apps without a wrapped key
+   * omit it.
+   */
+  onComputeReWrap?: SecurityTabProps["onComputeReWrap"];
+}
+
+/**
+ * Account-management dialog with Profile / Security tabs. The avatar
+ * strip across the top pulls from the entropy-ui `UserAvatar` (which
+ * reads `useAuth().user`). Apps inject their MFA enrolment route via
+ * `onEnableMfa` and (optionally) a key-rewrap hook for password change.
+ */
+export function ProfileDialog({
+  visible,
+  onClose,
+  initialTab,
+  onEnableMfa,
+  onComputeReWrap,
+}: ProfileDialogProps) {
+  const { user } = useAuth();
+  const { height: screenHeight } = useWindowDimensions();
+
+  const [tab, setTab] = useState<Tab>(initialTab ?? "profile");
+
+  useEffect(() => {
+    if (visible) {
+      setTab(initialTab ?? "profile");
+    }
+  }, [visible, initialTab]);
+
+  const handleClose = useCallback(() => {
+    setTab("profile");
+    onClose();
+  }, [onClose]);
+
+  return (
+    <Dialog visible={visible} draggable onClose={handleClose} title="Manage Account" maxWidth={580}>
+      <View className="mb-5 flex-row items-center gap-3.5">
+        <UserAvatar size={52} />
+        <View className="flex-1">
+          <Text className="text-base font-bold">
+            {user?.display_name || user?.username || "User"}
+          </Text>
+          <MutedText className="mt-0.5 font-mono text-xs">{user?.email ?? ""}</MutedText>
+        </View>
+        <View className="rounded-xl bg-muted px-2.5 py-1 dark:bg-neutral-800">
+          <MutedText className="text-xs font-medium uppercase tracking-wider">
+            {user?.role ?? "User"}
+          </MutedText>
+        </View>
+      </View>
+
+      <View className="mb-5 flex-row border-b border-border dark:border-neutral-800">
+        {(["profile", "security"] as Tab[]).map((t) => {
+          const active = tab === t;
+          return (
+            <Pressable
+              key={t}
+              onPress={() => setTab(t)}
+              className="mr-1"
+              testID={`profile-tab-${t}`}
+            >
+              {(state) => {
+                // RN-Web extends PressableStateCallbackType with `hovered`;
+                // base RN doesn't, so widen via cast.
+                const hovered = (state as { hovered?: boolean }).hovered === true;
+                return (
+                  <View
+                    className={cn(
+                      "-mb-px border-b-2 px-3.5 py-2",
+                      active ? "border-foreground dark:border-white" : "border-transparent"
+                    )}
+                  >
+                    <Text
+                      className={cn(
+                        "text-sm font-medium",
+                        active || hovered
+                          ? "text-foreground dark:text-white"
+                          : "text-muted-foreground dark:text-neutral-400"
+                      )}
+                    >
+                      {t === "profile" ? "Profile" : "Security"}
+                    </Text>
+                  </View>
+                );
+              }}
+            </Pressable>
+          );
+        })}
+      </View>
+
+      <ScrollView
+        style={{ maxHeight: screenHeight * 0.55 }}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      >
+        {tab === "profile" && <ProfileTab visible={visible} />}
+        {tab === "security" && (
+          <SecurityTab
+            visible={visible}
+            onClose={handleClose}
+            onEnableMfa={onEnableMfa}
+            onComputeReWrap={onComputeReWrap}
+          />
+        )}
+      </ScrollView>
+    </Dialog>
+  );
+}

package/src/components/profile/ProfileTab.tsx

@@ -0,0 +1,151 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { View } from "react-native";
+import { useAuth } from "../../hooks/useAuth";
+import { useNotificationContext } from "../../context/NotificationContext";
+import AuthService from "../../services/auth.service";
+import { Button } from "../button";
+import { Card, CardContent } from "../card";
+import { EmailInput, Input, PasswordInput } from "../input";
+import { FormLabel as Label } from "../label";
+
+export interface ProfileTabProps {
+  /** Whether the surrounding dialog is currently open — drives state reset. */
+  visible: boolean;
+}
+
+/**
+ * "Profile" tab body: edit display name + email. Drops in unchanged
+ * between vault and bootstrap because every consumer of entropy-ui's
+ * AuthProvider already supports the corresponding AuthService methods.
+ */
+export function ProfileTab({ visible }: ProfileTabProps) {
+  const { user, refreshUser } = useAuth();
+  const { push } = useNotificationContext();
+
+  const [displayName, setDisplayName] = useState("");
+  const [displayNameLoading, setDisplayNameLoading] = useState(false);
+  const [displayNameError, setDisplayNameError] = useState("");
+
+  const [newEmail, setNewEmail] = useState("");
+  const [emailPassword, setEmailPassword] = useState("");
+  const [emailLoading, setEmailLoading] = useState(false);
+  const [emailError, setEmailError] = useState("");
+
+  useEffect(() => {
+    if (visible) {
+      return;
+    }
+    setDisplayName("");
+    setDisplayNameError("");
+    setNewEmail("");
+    setEmailPassword("");
+    setEmailError("");
+  }, [visible]);
+
+  const handleSaveDisplayName = useCallback(async () => {
+    setDisplayNameError("");
+    const trimmed = displayName.trim();
+    if (!trimmed) {
+      setDisplayNameError("Display name is required");
+      return;
+    }
+    if (trimmed.length > 100) {
+      setDisplayNameError("Max 100 characters");
+      return;
+    }
+    setDisplayNameLoading(true);
+    try {
+      await AuthService.updateDisplayName(trimmed);
+      await refreshUser();
+      setDisplayName("");
+      push({ level: "success", title: "Display name updated" });
+    } catch (err) {
+      setDisplayNameError(err instanceof Error ? err.message : "Failed to update");
+    } finally {
+      setDisplayNameLoading(false);
+    }
+  }, [displayName, refreshUser, push]);
+
+  const handleSaveEmail = useCallback(async () => {
+    setEmailError("");
+    if (!AuthService.validateEmail(newEmail)) {
+      setEmailError("Invalid email address");
+      return;
+    }
+    if (!emailPassword) {
+      setEmailError("Password is required");
+      return;
+    }
+    setEmailLoading(true);
+    try {
+      await AuthService.changeEmail(newEmail, emailPassword);
+      await refreshUser();
+      setNewEmail("");
+      setEmailPassword("");
+      push({ level: "success", title: "Email updated" });
+    } catch (err) {
+      setEmailError(err instanceof Error ? err.message : "Failed to update email");
+    } finally {
+      setEmailLoading(false);
+    }
+  }, [newEmail, emailPassword, refreshUser, push]);
+
+  return (
+    <View className="gap-3">
+      <Card>
+        <CardContent className="p-4">
+          <Label className="mb-3 text-xs font-semibold uppercase tracking-wider text-foreground dark:text-white">
+            Display Name
+          </Label>
+          <Input
+            value={displayName}
+            onChangeText={setDisplayName}
+            placeholder={user?.display_name || user?.username || "Display name"}
+            autoCapitalize="words"
+            maxLength={100}
+            error={displayNameError}
+          />
+          <Button
+            variant="outline"
+            size="sm"
+            className="mt-3 self-end"
+            onPress={handleSaveDisplayName}
+            isLoading={displayNameLoading}
+          >
+            Save
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardContent className="p-4">
+          <Label className="mb-3 text-xs font-semibold uppercase tracking-wider text-foreground dark:text-white">
+            Email Address
+          </Label>
+          <EmailInput
+            value={newEmail}
+            onChangeText={setNewEmail}
+            placeholder={user?.email || "New email address"}
+            containerClassName="mb-2.5"
+          />
+          <PasswordInput
+            value={emailPassword}
+            onChangeText={setEmailPassword}
+            placeholder="Your current password"
+            label="Confirm Password"
+            error={emailError}
+          />
+          <Button
+            variant="outline"
+            size="sm"
+            className="mt-3 self-end"
+            onPress={handleSaveEmail}
+            isLoading={emailLoading}
+          >
+            Save
+          </Button>
+        </CardContent>
+      </Card>
+    </View>
+  );
+}

package/src/components/profile/SecurityTab.tsx

@@ -0,0 +1,229 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { View } from "react-native";
+import { useAuth, validatePassword } from "../../hooks/useAuth";
+import { useNotificationContext } from "../../context/NotificationContext";
+import AuthService from "../../services/auth.service";
+import { cn } from "../../utils/cn";
+import { Button } from "../button";
+import { Card, CardContent } from "../card";
+import { PasswordInput } from "../input";
+import { FormLabel as Label } from "../label";
+import { ErrorText, Text } from "../text";
+
+export interface SecurityTabProps {
+  /** Whether the surrounding dialog is currently open — drives state reset. */
+  visible: boolean;
+  /** Close the surrounding dialog (consumed when navigating to MFA setup). */
+  onClose: () => void;
+  /**
+   * Fired when the user taps "Enable MFA" — apps wire this to whatever
+   * screen they use for TOTP enrollment (vault routes to its mfa-setup
+   * tab; bootstrap could route somewhere else).
+   */
+  onEnableMfa: () => void;
+  /**
+   * Optional hook invoked before the password change is submitted to the
+   * server. Apps that re-wrap a client-side encryption key on rotation
+   * (vault) wire it here; the returned payload is forwarded to
+   * `AuthService.changePassword` so the server can apply both changes
+   * atomically. Apps without a wrapped key pass nothing — the password
+   * change happens unmodified.
+   */
+  onComputeReWrap?: (
+    currentPassword: string,
+    newPassword: string
+  ) => Promise<{ symmetric_key_enc: string; pbkdf2_salt: string } | undefined>;
+}
+
+/**
+ * "Security" tab body: change master password (with optional client-side
+ * key re-wrap) and toggle MFA. The MFA-enrolment route is consumer-
+ * specific — pass it via `onEnableMfa`.
+ */
+export function SecurityTab({ visible, onClose, onEnableMfa, onComputeReWrap }: SecurityTabProps) {
+  const { user, refreshUser } = useAuth();
+  const { push } = useNotificationContext();
+
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [passwordLoading, setPasswordLoading] = useState(false);
+  const [passwordError, setPasswordError] = useState("");
+
+  const [mfaPassword, setMfaPassword] = useState("");
+  const [mfaLoading, setMfaLoading] = useState(false);
+  const [mfaError, setMfaError] = useState("");
+  const [mfaSuccess, setMfaSuccess] = useState("");
+
+  useEffect(() => {
+    if (visible) {
+      return;
+    }
+    setCurrentPassword("");
+    setNewPassword("");
+    setConfirmPassword("");
+    setPasswordError("");
+    setMfaPassword("");
+    setMfaError("");
+    setMfaSuccess("");
+  }, [visible]);
+
+  const handleSavePassword = useCallback(async () => {
+    setPasswordError("");
+    if (!currentPassword) {
+      setPasswordError("Current password is required");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setPasswordError("Passwords do not match");
+      return;
+    }
+    const validation = validatePassword(newPassword);
+    if (!validation.valid) {
+      setPasswordError(validation.errors.join(", "));
+      return;
+    }
+    setPasswordLoading(true);
+    try {
+      const reWrappedKey = onComputeReWrap
+        ? await onComputeReWrap(currentPassword, newPassword)
+        : undefined;
+      await AuthService.changePassword(currentPassword, newPassword, reWrappedKey);
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
+      push({ level: "success", title: "Password updated" });
+    } catch (err) {
+      setPasswordError(err instanceof Error ? err.message : "Failed to update password");
+    } finally {
+      setPasswordLoading(false);
+    }
+  }, [currentPassword, newPassword, confirmPassword, push, onComputeReWrap]);
+
+  const handleDisableMfa = useCallback(async () => {
+    setMfaError("");
+    setMfaSuccess("");
+    if (!mfaPassword) {
+      setMfaError("Password is required to disable MFA");
+      return;
+    }
+    setMfaLoading(true);
+    try {
+      await AuthService.disableMfa(mfaPassword);
+      await refreshUser();
+      setMfaPassword("");
+      setMfaSuccess("MFA disabled");
+    } catch (err) {
+      setMfaError(err instanceof Error ? err.message : "Failed to disable MFA");
+    } finally {
+      setMfaLoading(false);
+    }
+  }, [mfaPassword, refreshUser]);
+
+  const handleEnableMfa = useCallback(() => {
+    onClose();
+    onEnableMfa();
+  }, [onClose, onEnableMfa]);
+
+  return (
+    <View className="gap-3">
+      <Card>
+        <CardContent className="p-4">
+          <Label className="mb-3 text-xs font-semibold uppercase tracking-wider text-foreground dark:text-white">
+            Change Password
+          </Label>
+          <PasswordInput
+            value={currentPassword}
+            onChangeText={setCurrentPassword}
+            placeholder="Current password"
+            containerClassName="mb-2.5"
+          />
+          <PasswordInput
+            value={newPassword}
+            onChangeText={setNewPassword}
+            placeholder="New password"
+            containerClassName="mb-2.5"
+          />
+          <PasswordInput
+            value={confirmPassword}
+            onChangeText={setConfirmPassword}
+            placeholder="Confirm new password"
+            error={passwordError}
+          />
+          <Button
+            variant="outline"
+            size="sm"
+            className="mt-3 self-end"
+            onPress={handleSavePassword}
+            isLoading={passwordLoading}
+          >
+            Update Password
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardContent className="p-4">
+          <Label className="mb-3 text-xs font-semibold uppercase tracking-wider text-foreground dark:text-white">
+            Two-Factor Authentication
+          </Label>
+          <View className="mb-3.5 flex-row items-center">
+            <View
+              className={cn(
+                "mr-2 h-2 w-2 rounded-full",
+                user?.mfa_enabled
+                  ? "bg-foreground dark:bg-white"
+                  : "bg-muted-foreground/40 dark:bg-neutral-600"
+              )}
+            />
+            <Text
+              className={cn(
+                "text-sm font-medium",
+                user?.mfa_enabled
+                  ? "text-foreground dark:text-white"
+                  : "text-muted-foreground dark:text-neutral-400"
+              )}
+            >
+              {user?.mfa_enabled ? "Enabled" : "Not enabled"}
+            </Text>
+          </View>
+          {user?.mfa_enabled ? (
+            <>
+              <PasswordInput
+                value={mfaPassword}
+                onChangeText={setMfaPassword}
+                placeholder="Your current password"
+                label="Password to Disable"
+                error={mfaError}
+              />
+              {mfaSuccess ? (
+                <Text className="mt-1.5 text-sm text-foreground dark:text-white">{mfaSuccess}</Text>
+              ) : null}
+              <Button
+                variant="destructive"
+                size="sm"
+                className="mt-3 self-end"
+                onPress={handleDisableMfa}
+                isLoading={mfaLoading}
+              >
+                Disable MFA
+              </Button>
+            </>
+          ) : (
+            <>
+              {mfaError ? <ErrorText className="mb-2">{mfaError}</ErrorText> : null}
+              <Button
+                variant="outline"
+                size="sm"
+                className="mt-1 self-end"
+                onPress={handleEnableMfa}
+              >
+                Enable MFA
+              </Button>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </View>
+  );
+}

package/src/components/profile/index.ts

@@ -0,0 +1,3 @@
+export { ProfileTab, type ProfileTabProps } from "./ProfileTab";
+export { SecurityTab, type SecurityTabProps } from "./SecurityTab";
+export { ProfileDialog, type ProfileDialogProps } from "./ProfileDialog";

package/src/components/segmented-toggle.tsx

@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import { Pressable, Text, View, type LayoutChangeEvent } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { usePalette } from "../utils/palette";
+
+export interface SegmentedOption<T extends string> {
+  key: T;
+  label: string;
+  /** When false the segment is shown but not selectable (e.g. "coming soon"). */
+  disabled?: boolean;
+}
+
+export interface SegmentedToggleProps<T extends string> {
+  value: T;
+  options: SegmentedOption<T>[];
+  onChange: (next: T) => void;
+  /** Visual size — `sm` is used inside dialogs, `default` on the auth screen. */
+  size?: "sm" | "default";
+  className?: string;
+}
+
+/**
+ * Themed segmented control with a sliding indicator (reanimated). Mirrors the
+ * website/simple-finance "Sign In / Sign Up" pill, but palette-driven so it
+ * tracks the active theme instead of hard-coded brand colors. Shared by the
+ * consolidated AuthScreen mode switch and the ConnectionSettings run-mode pills.
+ *
+ * Colors are applied via inline `style` (not className) on the Text so Android's
+ * NativeWind doesn't override the active/inactive foreground — see the
+ * android-nativewind-styling note.
+ */
+export function SegmentedToggle<T extends string>({
+  value,
+  options,
+  onChange,
+  size = "default",
+  className,
+}: SegmentedToggleProps<T>) {
+  const { palette: p } = usePalette();
+  const [trackW, setTrackW] = useState(0);
+  const slide = useSharedValue(0);
+
+  const count = options.length;
+  const index = Math.max(
+    0,
+    options.findIndex((o) => o.key === value)
+  );
+  const pad = 4;
+  const segW = trackW > 0 ? (trackW - pad * 2) / count : 0;
+
+  // Drive the indicator off the selected index whenever it changes.
+  slide.value = withTiming(index * segW, { duration: 240, easing: Easing.out(Easing.cubic) });
+
+  const indicatorStyle = useAnimatedStyle(() => ({
+    width: segW,
+    transform: [{ translateX: slide.value }],
+  }));
+
+  const vPad = size === "sm" ? 9 : 11;
+  const fontSize = size === "sm" ? 14 : 15;
+
+  return (
+    <View
+      className={className}
+      style={{ backgroundColor: p.muted, borderRadius: 999, padding: pad }}
+      onLayout={(e: LayoutChangeEvent) => setTrackW(e.nativeEvent.layout.width)}
+    >
+      <View style={{ flexDirection: "row" }}>
+        <Animated.View
+          style={[
+            {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              borderRadius: 999,
+              backgroundColor: p.primary,
+            },
+            indicatorStyle,
+          ]}
+        />
+        {options.map((opt) => {
+          const active = opt.key === value;
+          return (
+            <Pressable
+              key={opt.key}
+              accessibilityRole="tab"
+              accessibilityState={{ selected: active, disabled: !!opt.disabled }}
+              disabled={opt.disabled}
+              onPress={() => !opt.disabled && onChange(opt.key)}
+              style={{
+                flex: 1,
+                alignItems: "center",
+                paddingVertical: vPad,
+                opacity: opt.disabled ? 0.45 : 1,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize,
+                  fontWeight: active ? "700" : "500",
+                  color: active ? p.primaryForeground : p.mutedForeground,
+                }}
+              >
+                {opt.label}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+export default SegmentedToggle;