Update files

2026-02-05 12:35:22 +07:00
parent 45869e699f
commit 1d0b2808c7
8 changed files with 215 additions and 148 deletions
@@ -51,7 +51,7 @@ const styles = StyleSheet.create((theme) => ({
  title: {
    color: theme.colors.foreground,
    fontSize: theme.fontSize.lg,
-    fontWeight: theme.fontWeight.semibold,
+    fontWeight: theme.fontWeight.medium,
  },
  closeButton: {
    padding: theme.spacing[2],
@@ -121,13 +121,16 @@ export function AdaptiveModalSheet({
  const isMobile =
    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
  const sheetRef = useRef<BottomSheetModal>(null);
+  const dismissingForVisibilityRef = useRef(false);
  const resolvedSnapPoints = useMemo(() => snapPoints ?? ["65%", "90%"], [snapPoints]);

  useEffect(() => {
    if (!isMobile) return;
    if (visible) {
+      dismissingForVisibilityRef.current = false;
      sheetRef.current?.present();
    } else {
+      dismissingForVisibilityRef.current = true;
      sheetRef.current?.dismiss();
    }
  }, [visible, isMobile]);
@@ -135,6 +138,10 @@ export function AdaptiveModalSheet({
  const handleSheetChange = useCallback(
    (index: number) => {
      if (index === -1) {
+        if (dismissingForVisibilityRef.current) {
+          dismissingForVisibilityRef.current = false;
+          return;
+        }
        onClose();
      }
    },
@@ -18,7 +18,7 @@ const styles = StyleSheet.create((theme) => ({
  optionText: {
    color: theme.colors.foreground,
    fontSize: theme.fontSize.base,
-    fontWeight: theme.fontWeight.semibold,
+    fontWeight: theme.fontWeight.normal,
  },
  optionSubtext: {
    color: theme.colors.foregroundMuted,
@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useRef, useState } from "react";
-import { Alert, Pressable, Text, TextInput, View } from "react-native";
+import { Alert, Text, TextInput, View } from "react-native";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import { Link2 } from "lucide-react-native";
@@ -7,6 +7,7 @@ import { useDaemonRegistry, type HostProfile } from "@/contexts/daemon-registry-
 import { normalizeHostPort } from "@/utils/daemon-endpoints";
 import { DaemonConnectionTestError, probeDaemonEndpoint } from "@/utils/test-daemon-connection";
 import { AdaptiveModalSheet } from "./adaptive-modal-sheet";
+import { Button } from "@/components/ui/button";

 const styles = StyleSheet.create((theme) => ({
  field: {
@@ -31,24 +32,6 @@ const styles = StyleSheet.create((theme) => ({
    gap: theme.spacing[3],
    marginTop: theme.spacing[2],
  },
-  button: {
-    flex: 1,
-    paddingVertical: theme.spacing[3],
-    borderRadius: theme.borderRadius.lg,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: theme.colors.surface2,
-  },
-  primaryButton: {
-    backgroundColor: theme.colors.palette.blue[500],
-  },
-  buttonText: {
-    color: theme.colors.foreground,
-    fontWeight: theme.fontWeight.semibold,
-  },
-  primaryButtonText: {
-    color: theme.colors.palette.white,
-  },
  helper: {
    color: theme.colors.foregroundMuted,
    fontSize: theme.fontSize.sm,
@@ -57,12 +40,6 @@ const styles = StyleSheet.create((theme) => ({
    color: theme.colors.destructive,
    fontSize: theme.fontSize.sm,
  },
-  connectRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.spacing[2],
-  },
 }));

 function isHostPortOnly(raw: string): boolean {
@@ -264,21 +241,18 @@ export function AddHostModal({ visible, onClose, onCancel, onSaved, targetServer
      </View>

      <View style={styles.actions}>
-        <Pressable style={styles.button} onPress={handleCancel} disabled={isSaving}>
-          <Text style={styles.buttonText}>{onCancel ? "Back" : "Cancel"}</Text>
-        </Pressable>
-        <Pressable
-          style={[styles.button, styles.primaryButton, isSaving ? { opacity: 0.7 } : null]}
+        <Button style={{ flex: 1 }} variant="secondary" onPress={handleCancel} disabled={isSaving}>
+          Cancel
+        </Button>
+        <Button
+          style={{ flex: 1 }}
+          variant="default"
          onPress={() => void handleSave()}
          disabled={isSaving}
+          leftIcon={<Link2 size={16} color={theme.colors.palette.white} />}
        >
-          <View style={styles.connectRow}>
-            <Link2 size={16} color={theme.colors.palette.white} />
-            <Text style={[styles.buttonText, styles.primaryButtonText]}>
-              {isSaving ? "Connecting..." : "Connect & Save"}
-            </Text>
-          </View>
-        </Pressable>
+          {isSaving ? "Connecting..." : "Connect"}
+        </Button>
      </View>
    </AdaptiveModalSheet>
  );
@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Pressable, Text, TextInput, View } from "react-native";
+import { Text, TextInput, View } from "react-native";
 import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { AdaptiveModalSheet } from "./adaptive-modal-sheet";
+import { Button } from "@/components/ui/button";

 const styles = StyleSheet.create((theme) => ({
  helper: {
@@ -32,24 +33,6 @@ const styles = StyleSheet.create((theme) => ({
    gap: theme.spacing[3],
    marginTop: theme.spacing[4],
  },
-  button: {
-    flex: 1,
-    paddingVertical: theme.spacing[3],
-    borderRadius: theme.borderRadius.lg,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: theme.colors.surface2,
-  },
-  primaryButton: {
-    backgroundColor: theme.colors.palette.blue[500],
-  },
-  buttonText: {
-    color: theme.colors.foreground,
-    fontWeight: theme.fontWeight.semibold,
-  },
-  primaryButtonText: {
-    color: theme.colors.palette.white,
-  },
 }));

 export interface NameHostModalProps {
@@ -122,14 +105,13 @@ export function NameHostModal({ visible, serverId, hostname, onSkip, onSave }: N
      </View>

      <View style={styles.actions}>
-        <Pressable style={styles.button} onPress={onSkip} testID="name-host-skip">
-          <Text style={styles.buttonText}>Skip</Text>
-        </Pressable>
-        <Pressable style={[styles.button, styles.primaryButton]} onPress={handleSave} testID="name-host-save">
-          <Text style={[styles.buttonText, styles.primaryButtonText]}>Save</Text>
-        </Pressable>
+        <Button style={{ flex: 1 }} variant="secondary" onPress={onSkip} testID="name-host-skip">
+          Skip
+        </Button>
+        <Button style={{ flex: 1 }} variant="default" onPress={handleSave} testID="name-host-save">
+          Save
+        </Button>
      </View>
    </AdaptiveModalSheet>
  );
 }
-
@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from "react";
-import { Alert, Pressable, Text, TextInput, View } from "react-native";
+import { Alert, Text, TextInput, View } from "react-native";
 import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
 import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import { Link } from "lucide-react-native";
@@ -7,6 +7,7 @@ import { useDaemonRegistry, type HostProfile } from "@/contexts/daemon-registry-
 import { decodeOfferFragmentPayload } from "@/utils/daemon-endpoints";
 import { ConnectionOfferSchema } from "@server/shared/connection-offer";
 import { AdaptiveModalSheet } from "./adaptive-modal-sheet";
+import { Button } from "@/components/ui/button";

 const styles = StyleSheet.create((theme) => ({
  helper: {
@@ -39,30 +40,6 @@ const styles = StyleSheet.create((theme) => ({
    gap: theme.spacing[3],
    marginTop: theme.spacing[2],
  },
-  button: {
-    flex: 1,
-    paddingVertical: theme.spacing[3],
-    borderRadius: theme.borderRadius.lg,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: theme.colors.surface2,
-  },
-  primaryButton: {
-    backgroundColor: theme.colors.palette.blue[500],
-  },
-  buttonText: {
-    color: theme.colors.foreground,
-    fontWeight: theme.fontWeight.semibold,
-  },
-  primaryButtonText: {
-    color: theme.colors.palette.white,
-  },
-  connectRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.spacing[2],
-  },
 }));

 export interface PairLinkModalProps {
@@ -184,33 +161,29 @@ export function PairLinkModal({ visible, onClose, onCancel, onSaved, targetServe
      </View>

      <View style={styles.actions}>
-        <Pressable
-          style={styles.button}
+        <Button
+          style={{ flex: 1 }}
+          variant="secondary"
          onPress={handleCancel}
          disabled={isSaving}
          testID="pair-link-cancel"
-          accessible
          accessibilityRole="button"
          accessibilityLabel="Cancel"
        >
-          <Text style={styles.buttonText}>{onCancel ? "Back" : "Cancel"}</Text>
-        </Pressable>
-        <Pressable
-          style={[styles.button, styles.primaryButton, isSaving ? { opacity: 0.7 } : null]}
+          Cancel
+        </Button>
+        <Button
+          style={{ flex: 1 }}
+          variant="default"
          onPress={() => void handleSave()}
          disabled={isSaving}
          testID="pair-link-submit"
-          accessible
          accessibilityRole="button"
          accessibilityLabel="Pair"
+          leftIcon={<Link size={16} color={theme.colors.palette.white} />}
        >
-          <View style={styles.connectRow}>
-            <Link size={16} color={theme.colors.palette.white} />
-            <Text style={[styles.buttonText, styles.primaryButtonText]}>
-              {isSaving ? "Pairing..." : "Pair"}
-            </Text>
-          </View>
-        </Pressable>
+          {isSaving ? "Pairing..." : "Pair"}
+        </Button>
      </View>
    </AdaptiveModalSheet>
  );
@@ -0,0 +1,129 @@
+import type { PropsWithChildren, ReactElement } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { PressableProps, StyleProp, TextStyle, ViewStyle } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+
+type ButtonVariant = "default" | "secondary" | "outline" | "ghost" | "destructive";
+type ButtonSize = "sm" | "md" | "lg";
+
+const styles = StyleSheet.create((theme) => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing[2],
+    borderRadius: theme.borderRadius.lg,
+    borderWidth: 1,
+    borderColor: "transparent",
+  },
+  md: {
+    paddingVertical: theme.spacing[3],
+    paddingHorizontal: theme.spacing[4],
+  },
+  sm: {
+    paddingVertical: theme.spacing[2],
+    paddingHorizontal: theme.spacing[3],
+    borderRadius: theme.borderRadius.md,
+  },
+  lg: {
+    paddingVertical: theme.spacing[4],
+    paddingHorizontal: theme.spacing[6],
+    borderRadius: theme.borderRadius.xl,
+  },
+  default: {
+    backgroundColor: theme.colors.palette.blue[500],
+    borderColor: theme.colors.palette.blue[500],
+  },
+  secondary: {
+    backgroundColor: theme.colors.surface2,
+    borderColor: theme.colors.border,
+  },
+  outline: {
+    backgroundColor: "transparent",
+    borderColor: theme.colors.border,
+  },
+  ghost: {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+  },
+  destructive: {
+    backgroundColor: theme.colors.destructive,
+    borderColor: theme.colors.destructive,
+  },
+  pressed: {
+    opacity: 0.85,
+  },
+  disabled: {
+    opacity: theme.opacity[50],
+  },
+  text: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.sm,
+    fontWeight: theme.fontWeight.medium,
+  },
+  textDefault: {
+    color: theme.colors.palette.white,
+  },
+  textDestructive: {
+    color: theme.colors.palette.white,
+  },
+}));
+
+export function Button({
+  children,
+  variant = "secondary",
+  size = "md",
+  leftIcon,
+  style,
+  textStyle,
+  disabled,
+  accessibilityRole,
+  ...props
+}: PropsWithChildren<
+  Omit<PressableProps, "style"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    leftIcon?: ReactElement | null;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+  }
+>) {
+  const variantStyle =
+    variant === "default"
+      ? styles.default
+      : variant === "secondary"
+        ? styles.secondary
+        : variant === "outline"
+          ? styles.outline
+          : variant === "ghost"
+            ? styles.ghost
+            : styles.destructive;
+
+  const sizeStyle = size === "sm" ? styles.sm : size === "lg" ? styles.lg : styles.md;
+
+  const resolvedTextStyle = [
+    styles.text,
+    variant === "default" ? styles.textDefault : null,
+    variant === "destructive" ? styles.textDestructive : null,
+    textStyle,
+  ];
+
+  return (
+    <Pressable
+      {...props}
+      accessibilityRole={accessibilityRole ?? "button"}
+      disabled={disabled}
+      style={({ pressed }) => [
+        styles.base,
+        sizeStyle,
+        variantStyle,
+        pressed ? styles.pressed : null,
+        disabled ? styles.disabled : null,
+        style,
+      ]}
+    >
+      {leftIcon ? <View>{leftIcon}</View> : null}
+      <Text style={resolvedTextStyle}>{children}</Text>
+    </Pressable>
+  );
+}
@@ -26,7 +26,7 @@ const styles = StyleSheet.create((theme) => ({
  title: {
    color: theme.colors.foreground,
    fontSize: theme.fontSize.xl,
-    fontWeight: theme.fontWeight.bold,
+    fontWeight: theme.fontWeight.medium,
    marginBottom: theme.spacing[3],
    textAlign: "center",
  },
@@ -59,7 +59,7 @@ const styles = StyleSheet.create((theme) => ({
  actionText: {
    color: theme.colors.foreground,
    fontSize: theme.fontSize.base,
-    fontWeight: theme.fontWeight.semibold,
+    fontWeight: theme.fontWeight.medium,
  },
  actionTextPrimary: {
    color: theme.colors.palette.white,