@entropy-softworks/ui 2026.7.31

package/src/components/separator.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { View } from "react-native";
+import * as SeparatorPrimitive from "@rn-primitives/separator";
+import { cn } from "../utils/cn";
+import { MutedText } from "./text";
+
+interface SeparatorProps {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+  className?: string;
+}
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  SeparatorProps
+>(({ orientation = "horizontal", decorative = true, className, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    orientation={orientation}
+    decorative={decorative}
+    className={cn(
+      "bg-border dark:bg-neutral-800",
+      orientation === "horizontal" ? "h-px w-full" : "w-px h-full",
+      className
+    )}
+    {...props}
+  />
+));
+Separator.displayName = "Separator";
+
+function SeparatorWithText({ text = "or" }: { text?: string }) {
+  return (
+    <View className="w-full flex-row items-center gap-3">
+      <View className="h-px flex-1 bg-border dark:bg-neutral-600" />
+      <MutedText className="text-xs uppercase">{text}</MutedText>
+      <View className="h-px flex-1 bg-border dark:bg-neutral-600" />
+    </View>
+  );
+}
+
+export { Separator, SeparatorWithText };

package/src/components/server-settings.tsx

@@ -0,0 +1,442 @@
+import React, { useEffect, useState } from "react";
+import { Platform, Pressable, TextInput, View } from "react-native";
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import { Dialog, DialogContent, DialogFooter } from "./dialog";
+import { Text } from "./text";
+import AuthService from "../services/auth.service";
+import { getDefaultBaseUrl } from "../services/api-config";
+import { useAppConfig } from "../context/AppConfigContext";
+
+const HOVER_COLOR = "#22C55E";
+
+export interface ServerSettingsProps {
+  /**
+   * Health-check path appended to the entered server URL's origin.
+   * Default `/api/health`.
+   */
+  healthCheckPath?: string;
+  /**
+   * Validator the test step runs against the parsed JSON body of the
+   * health response. Default: requires `{ status, version }` (matches
+   * Entropy Softworks servers). Return `false` to mark the test failed.
+   */
+  validateHealthResponse?: (body: unknown) => boolean;
+  /** Error message shown when validation fails. Default uses `appName`. */
+  validationFailureMessage?: string;
+  /** Override for the placeholder shown in the URL input. */
+  urlPlaceholder?: string;
+}
+
+/**
+ * Settings gear icon that opens the server-configuration dialog.
+ * Renders as an absolute-positioned button in the top-right corner.
+ * Use on any auth screen to give users a self-hosted-server entry
+ * point.
+ */
+export function ServerSettings({
+  healthCheckPath = "/api/health",
+  validateHealthResponse,
+  validationFailureMessage,
+  urlPlaceholder = "https://example.com",
+}: ServerSettingsProps = {}) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const { appName } = useAppConfig();
+
+  const [visible, setVisible] = useState(false);
+  const [serverUrl, setServerUrl] = useState("");
+  const [testingServer, setTestingServer] = useState(false);
+  const [testResult, setTestResult] = useState<{
+    success: boolean;
+    message: string;
+  } | null>(null);
+  const [retryCount, setRetryCount] = useState(0);
+  const isOverridden = serverUrl !== getDefaultBaseUrl();
+
+  const progressAnimation = useSharedValue(0);
+  const shimmerAnimation = useSharedValue(0);
+
+  useEffect(() => {
+    if (visible) {
+      setServerUrl(AuthService.getBaseUrl());
+      setTestResult(null);
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    if (testingServer) {
+      progressAnimation.value = 0;
+      shimmerAnimation.value = 0;
+      shimmerAnimation.value = withRepeat(
+        withTiming(1, { duration: 500, easing: Easing.linear }),
+        -1
+      );
+    } else {
+      cancelAnimation(shimmerAnimation);
+      shimmerAnimation.value = 0;
+    }
+  }, [testingServer, progressAnimation, shimmerAnimation]);
+
+  const animatedProgressStyle = useAnimatedStyle(() => ({
+    width: `${progressAnimation.value}%`,
+  }));
+
+  const animatedShimmerStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: -50 + shimmerAnimation.value * 350 }],
+  }));
+
+  const defaultValidate = (body: unknown): boolean => {
+    if (!body || typeof body !== "object") {
+      return false;
+    }
+    const obj = body as Record<string, unknown>;
+    return Boolean(obj.status) && Boolean(obj.version);
+  };
+  const validate = validateHealthResponse ?? defaultValidate;
+  const invalidServerMessage = validationFailureMessage ?? `Not a valid ${appName} server`;
+
+  const handleTest = async () => {
+    setTestingServer(true);
+    setTestResult(null);
+    setRetryCount(0);
+    progressAnimation.value = 0;
+
+    const urlRegex = /^https?:\/\/[\w-]+(\.[\w-]+)*(:\d+)?(\/.*)?$/;
+    if (!urlRegex.test(serverUrl)) {
+      setTestResult({
+        success: false,
+        message: "Invalid URL format. Please use http:// or https://",
+      });
+      setTestingServer(false);
+      return;
+    }
+
+    let url: URL;
+    try {
+      url = new URL(serverUrl);
+    } catch {
+      setTestResult({ success: false, message: "Invalid URL format" });
+      setTestingServer(false);
+      return;
+    }
+
+    const maxRetries = 3;
+    const retryDelay = 2000;
+    let attemptCount = 0;
+    let lastError: unknown = null;
+
+    const attemptConnection = async (): Promise<boolean> => {
+      attemptCount++;
+      setRetryCount(attemptCount);
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 3000);
+
+      try {
+        const healthUrl = `${url.origin}${healthCheckPath}`;
+        const response = await fetch(healthUrl, {
+          method: "GET",
+          signal: controller.signal,
+          headers: { Accept: "application/json" },
+        });
+        if (response.ok) {
+          const data: unknown = await response.json();
+          if (!validate(data)) {
+            throw new Error(invalidServerMessage);
+          }
+          return true;
+        }
+        return false;
+      } catch (error: unknown) {
+        lastError = error;
+        return false;
+      } finally {
+        clearTimeout(timeoutId);
+        progressAnimation.value = withTiming((attemptCount / maxRetries) * 100, {
+          duration: 300,
+          easing: Easing.out(Easing.cubic),
+        });
+      }
+    };
+
+    let success = false;
+    for (let i = 0; i < maxRetries; i++) {
+      if (i > 0) {
+        await new Promise((resolve) => setTimeout(resolve, retryDelay));
+      }
+      success = await attemptConnection();
+      if (success) {
+        break;
+      }
+    }
+
+    if (success) {
+      setTestResult({ success: true, message: "Server is reachable!" });
+    } else if (lastError instanceof Error && lastError.name === "AbortError") {
+      setTestResult({
+        success: false,
+        message: `Connection timeout after ${maxRetries} attempts`,
+      });
+    } else {
+      setTestResult({
+        success: false,
+        message: `Cannot reach server after ${maxRetries} attempts`,
+      });
+    }
+
+    setTestingServer(false);
+    setRetryCount(0);
+  };
+
+  const handleSave = async () => {
+    try {
+      await AuthService.setBaseUrl(serverUrl);
+      setVisible(false);
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Invalid server URL";
+      setTestResult({ success: false, message: msg });
+    }
+  };
+
+  const handleReset = async () => {
+    await AuthService.resetBaseUrl();
+    setServerUrl(getDefaultBaseUrl());
+    setTestResult(null);
+  };
+
+  const close = () => setVisible(false);
+
+  return (
+    <>
+      <Pressable
+        onPress={() => setVisible(true)}
+        style={{ position: "absolute", top: 16, right: 24, zIndex: 10 }}
+        accessibilityLabel="Server settings"
+        accessibilityRole="button"
+      >
+        {({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => {
+          const active = pressed || hovered;
+          return (
+            <View
+              style={{
+                padding: 8,
+                borderRadius: 4,
+                backgroundColor: active ? HOVER_COLOR : "transparent",
+              }}
+            >
+              <Ionicons
+                name="settings-outline"
+                size={24}
+                color={active ? "#FFFFFF" : isDark ? "#FFFFFF" : "#000000"}
+              />
+            </View>
+          );
+        }}
+      </Pressable>
+
+      <Dialog visible={visible} onClose={close} title="Server Configuration" draggable>
+        <DialogContent>
+          <Text
+            className="font-mono text-sm mb-2"
+            style={{ color: isDark ? "#FFFFFF" : "#000000" }}
+          >
+            Configure your self-hosted server URL
+          </Text>
+          <View
+            className="rounded-lg px-3 flex-row items-center"
+            style={{
+              borderWidth: 1,
+              borderColor: isDark ? "#333333" : "#E5E5E5",
+              paddingVertical: Platform.OS === "ios" ? 12 : 8,
+              backgroundColor: isDark ? "#0A0A0A" : "#FAFAFA",
+            }}
+          >
+            <Ionicons
+              name="server-outline"
+              size={20}
+              color={isDark ? "#999999" : "#666666"}
+              style={{ marginRight: 8 }}
+            />
+            <TextInput
+              value={serverUrl}
+              onChangeText={setServerUrl}
+              placeholder={urlPlaceholder}
+              placeholderTextColor={isDark ? "#666666" : "#999999"}
+              className="font-sans flex-1 text-base"
+              style={{ color: isDark ? "#FFFFFF" : "#000000" }}
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+          </View>
+          {(testingServer || testResult) && (
+            <View
+              style={{
+                marginTop: 8,
+                padding: 8,
+                borderRadius: 6,
+                backgroundColor: testingServer
+                  ? isDark
+                    ? "#22C55E20"
+                    : "#22C55E10"
+                  : testResult?.success
+                    ? isDark
+                      ? "#22C55E20"
+                      : "#22C55E10"
+                    : isDark
+                      ? "#EF444420"
+                      : "#EF444410",
+                borderWidth: 1,
+                borderColor: testingServer
+                  ? isDark
+                    ? "#22C55E40"
+                    : "#22C55E30"
+                  : testResult?.success
+                    ? isDark
+                      ? "#22C55E40"
+                      : "#22C55E30"
+                    : isDark
+                      ? "#EF444440"
+                      : "#EF444430",
+              }}
+            >
+              <Text
+                className="font-mono text-xs text-center"
+                style={{
+                  color: testingServer ? "#22C55E" : testResult?.success ? "#22C55E" : "#EF4444",
+                }}
+              >
+                {testingServer
+                  ? `Testing server connection... (Attempt ${retryCount}/3)`
+                  : testResult?.message}
+              </Text>
+              {testingServer && (
+                <View
+                  style={{
+                    height: 3,
+                    backgroundColor: isDark ? "#22C55E20" : "#22C55E10",
+                    borderRadius: 1.5,
+                    marginTop: 6,
+                    overflow: "hidden",
+                  }}
+                >
+                  <Animated.View
+                    style={[
+                      {
+                        height: "100%",
+                        backgroundColor: "#22C55E",
+                        borderRadius: 1.5,
+                        overflow: "hidden",
+                      },
+                      animatedProgressStyle,
+                    ]}
+                  >
+                    <Animated.View
+                      style={[
+                        {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: 50,
+                          height: "100%",
+                          opacity: 0.4,
+                        },
+                        animatedShimmerStyle,
+                      ]}
+                    >
+                      <View
+                        style={{
+                          width: "100%",
+                          height: "100%",
+                          backgroundColor: "#FFFFFF",
+                          transform: [{ skewX: "-20deg" }],
+                        }}
+                      />
+                    </Animated.View>
+                  </Animated.View>
+                </View>
+              )}
+            </View>
+          )}
+        </DialogContent>
+        <DialogFooter style={{ justifyContent: "space-between" }}>
+          <View className="flex-row gap-3">
+            <ServerSettingsButton
+              label="Test"
+              onPress={handleTest}
+              disabled={testingServer}
+              filled
+            />
+            {isOverridden && <ServerSettingsButton label="Reset" onPress={handleReset} />}
+          </View>
+          <View className="flex-row gap-3">
+            <ServerSettingsButton label="Cancel" onPress={close} />
+            <ServerSettingsButton label="Save" onPress={handleSave} filled />
+          </View>
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+}
+
+/** Reusable dialog button with green hover effect, used by the ServerSettings footer. */
+function ServerSettingsButton({
+  label,
+  onPress,
+  disabled,
+  filled,
+}: {
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  filled?: boolean;
+}) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  return (
+    <Pressable
+      onPress={onPress}
+      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+      disabled={disabled}
+    >
+      {({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => {
+        const active = pressed || hovered;
+        const defaultBg = filled ? (isDark ? "#FFFFFF" : "#000000") : "transparent";
+        const defaultText = filled
+          ? isDark
+            ? "#000000"
+            : "#FFFFFF"
+          : isDark
+            ? "#FFFFFF"
+            : "#000000";
+
+        return (
+          <View
+            className="px-4 rounded-lg"
+            style={{
+              paddingVertical: 10,
+              backgroundColor: active ? HOVER_COLOR : defaultBg,
+            }}
+          >
+            <Text
+              className="font-mono-medium text-sm text-center"
+              style={{ color: active ? "#FFFFFF" : defaultText }}
+            >
+              {label}
+            </Text>
+          </View>
+        );
+      }}
+    </Pressable>
+  );
+}
+
+export default ServerSettings;

package/src/components/settings/AccountSection.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { useNavigation } from "../../context/NavigationContext";
+import { SettingsRow, SettingsSection } from "../settings-row";
+import { useAppConfig } from "../../context/AppConfigContext";
+
+export interface AccountSectionProps {
+  /** Fires when the user closes the surrounding settings surface (dialog). */
+  onClose: () => void;
+  /**
+   * Open the in-app profile dialog/screen. Apps wire this to whatever
+   * UI shell they use for profile editing. The `tab` argument signals
+   * which sub-tab to land on (`"profile"` for personal info, `"security"`
+   * for master-password change).
+   */
+  onOpenProfile?: (tab?: "profile" | "security") => void;
+  /**
+   * Override the Server Configuration row. Default behavior navigates
+   * to `routes.serverConfig` from `AppConfig`. Pass `null` to hide the
+   * row entirely (apps with no self-hosted concept).
+   */
+  onOpenServerConfig?: (() => void) | null;
+}
+
+/**
+ * Generic ACCOUNT section used inside the settings dialog. Rows:
+ *   • Profile (delegates to `onOpenProfile?.("profile")`)
+ *   • Master Password (delegates to `onOpenProfile?.("security")`)
+ *   • Server Configuration (default navigates to `routes.serverConfig`)
+ */
+export function AccountSection({
+  onClose,
+  onOpenProfile,
+  onOpenServerConfig,
+}: AccountSectionProps) {
+  const router = useNavigation();
+  const { routes } = useAppConfig();
+
+  const handleServerConfig =
+    onOpenServerConfig === undefined
+      ? () => {
+          onClose();
+          router.push(routes.serverConfig);
+        }
+      : onOpenServerConfig;
+
+  return (
+    <SettingsSection title="ACCOUNT">
+      <SettingsRow
+        icon="person-outline"
+        label="Profile"
+        onPress={() => {
+          onClose();
+          onOpenProfile?.("profile");
+        }}
+        showChevron
+      />
+      <SettingsRow
+        icon="key-outline"
+        label="Master Password"
+        onPress={() => {
+          onClose();
+          onOpenProfile?.("security");
+        }}
+        showChevron
+      />
+      {handleServerConfig ? (
+        <SettingsRow
+          icon="server-outline"
+          label="Server Configuration"
+          onPress={handleServerConfig}
+          showChevron
+        />
+      ) : null}
+    </SettingsSection>
+  );
+}

package/src/components/settings/DangerZoneSection.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback } from "react";
+import { useAuth } from "../../hooks/useAuth";
+import { SettingsRow, SettingsSection } from "../settings-row";
+
+export interface DangerZoneSectionProps {
+  onClose: () => void;
+  /**
+   * Fires when the user taps Delete Account. Apps wire this to a
+   * confirm-and-delete dialog (which then calls
+   * `useAuth().deleteAccount(password)`). Without it the row is hidden.
+   */
+  onRequestDeleteAccount?: () => void;
+}
+
+/** Generic DANGER ZONE section — Sign out + (optionally) Delete account. */
+export function DangerZoneSection({ onClose, onRequestDeleteAccount }: DangerZoneSectionProps) {
+  const { logout } = useAuth();
+
+  const handleSignOut = useCallback(() => {
+    onClose();
+    logout();
+  }, [onClose, logout]);
+
+  return (
+    <SettingsSection title="DANGER ZONE" destructive>
+      <SettingsRow icon="log-out-outline" label="Sign Out" destructive onPress={handleSignOut} />
+      {onRequestDeleteAccount ? (
+        <SettingsRow
+          icon="trash-outline"
+          label="Delete Account"
+          destructive
+          onPress={onRequestDeleteAccount}
+        />
+      ) : null}
+    </SettingsSection>
+  );
+}

package/src/components/settings/GeneralSection.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useColorScheme } from "nativewind";
+import { SettingsRow, SettingsSection } from "../settings-row";
+
+export interface GeneralSectionProps {
+  notifications: boolean;
+  onNotificationsToggle: (v: boolean) => void;
+  /** Fired when the user taps the Appearance row. Apps wire this to a
+   *  theme-picker dialog. When omitted the row renders without chevron. */
+  onOpenAppearance?: () => void;
+}
+
+/** Generic GENERAL section — notifications toggle + appearance picker. */
+export function GeneralSection({
+  notifications,
+  onNotificationsToggle,
+  onOpenAppearance,
+}: GeneralSectionProps) {
+  const { colorScheme } = useColorScheme();
+  return (
+    <SettingsSection title="GENERAL">
+      <SettingsRow
+        icon="notifications-outline"
+        label="Notifications"
+        subtitle="Security alerts and reminders"
+        toggle
+        value={notifications}
+        onValueChange={onNotificationsToggle}
+      />
+      <SettingsRow
+        icon="color-palette-outline"
+        label="Appearance"
+        subtitle={colorScheme === "dark" ? "Dark" : "Light"}
+        onPress={onOpenAppearance}
+        showChevron={Boolean(onOpenAppearance)}
+      />
+    </SettingsSection>
+  );
+}

package/src/components/settings/SupportSection.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { useNavigation } from "../../context/NavigationContext";
+import { SettingsRow, SettingsSection } from "../settings-row";
+import { useAppConfig } from "../../context/AppConfigContext";
+
+export interface SupportSectionProps {
+  onClose: () => void;
+  /** Wire to the app's help screen / web URL. Optional. */
+  onOpenHelp?: () => void;
+  /** Wire to the app's about modal / screen. Optional. */
+  onOpenAbout?: () => void;
+}
+
+/** Generic SUPPORT section — Help, About, Privacy Policy, Terms of Service. */
+export function SupportSection({ onClose, onOpenHelp, onOpenAbout }: SupportSectionProps) {
+  const router = useNavigation();
+  const { routes } = useAppConfig();
+
+  return (
+    <SettingsSection title="SUPPORT">
+      <SettingsRow
+        icon="help-circle-outline"
+        label="Help & Support"
+        onPress={onOpenHelp}
+        showChevron={Boolean(onOpenHelp)}
+      />
+      <SettingsRow
+        icon="information-circle-outline"
+        label="About"
+        onPress={onOpenAbout}
+        showChevron={Boolean(onOpenAbout)}
+      />
+      <SettingsRow
+        icon="document-text-outline"
+        label="Privacy Policy"
+        onPress={() => {
+          onClose();
+          router.push(routes.privacyPolicy);
+        }}
+        showChevron
+      />
+      <SettingsRow
+        icon="document-outline"
+        label="Terms of Service"
+        onPress={() => {
+          onClose();
+          router.push(routes.termsOfService);
+        }}
+        showChevron
+      />
+    </SettingsSection>
+  );
+}

package/src/components/settings/index.ts

@@ -0,0 +1,4 @@
+export { AccountSection, type AccountSectionProps } from "./AccountSection";
+export { GeneralSection, type GeneralSectionProps } from "./GeneralSection";
+export { SupportSection, type SupportSectionProps } from "./SupportSection";
+export { DangerZoneSection, type DangerZoneSectionProps } from "./DangerZoneSection";