feat: initial commit!

1 files changed, 193 insertions, 0 deletions

diff --git a/app/(tabs)/contact-detail.tsx b/app/(tabs)/contact-detail.tsx
new file mode 100644
index 0000000..520cc15
--- /dev/null
+++ b/app/(tabs)/contact-detail.tsx
@@ -0,0 +1,193 @@
+import { Ionicons } from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import { ScrollView, StyleSheet, Text, View } from "react-native";
+import { t } from "../../lib/locales";
+import { colors } from "../../lib/theme";
+import { Button } from "../../lib/ui";
+
+export default function ContactDetailScreen() {
+  const params = useLocalSearchParams<{
+    contactName: string;
+    contactIdentifier: string;
+    contactType: string;
+    deviceName: string;
+  }>();
+
+  const { contactName, contactIdentifier, contactType, deviceName } = params;
+
+  const getContactTypeIcon = () => {
+    switch (contactType) {
+      case "phone":
+        return "call";
+      case "email":
+        return "mail";
+      default:
+        return "person";
+    }
+  };
+
+  const getContactTypeLabel = () => {
+    switch (contactType) {
+      case "phone":
+        return t("phoneNumber");
+      case "email":
+        return t("emailAddress");
+      default:
+        return t("identifier");
+    }
+  };
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+    >
+      <View style={styles.header}>
+        <View style={styles.iconContainer}>
+          <Ionicons name="person-add" size={48} color={colors.primary} />
+        </View>
+        <Text style={styles.title}>{t("newContactAddedTitle")}</Text>
+        <Text style={styles.subtitle}>{t("newContactAddedSubtitle")}</Text>
+      </View>
+
+      <View style={styles.detailsCard}>
+        <View style={styles.detailRow}>
+          <View style={styles.detailLabel}>
+            <Ionicons name="person" size={20} color={colors.onSurfaceVariant} />
+            <Text style={styles.detailLabelText}>{t("contactName")}</Text>
+          </View>
+          <Text style={styles.detailValue}>{contactName || t("unknown")}</Text>
+        </View>
+
+        <View style={styles.divider} />
+
+        <View style={styles.detailRow}>
+          <View style={styles.detailLabel}>
+            <Ionicons
+              name={getContactTypeIcon()}
+              size={20}
+              color={colors.onSurfaceVariant}
+            />
+            <Text style={styles.detailLabelText}>{getContactTypeLabel()}</Text>
+          </View>
+          <Text style={styles.detailValue}>
+            {contactIdentifier || t("notProvided")}
+          </Text>
+        </View>
+
+        <View style={styles.divider} />
+
+        <View style={styles.detailRow}>
+          <View style={styles.detailLabel}>
+            <Ionicons
+              name="phone-portrait"
+              size={20}
+              color={colors.onSurfaceVariant}
+            />
+            <Text style={styles.detailLabelText}>{t("device")}</Text>
+          </View>
+          <Text style={styles.detailValue}>
+            {deviceName || t("unknownDevice")}
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.infoCard}>
+        <Ionicons name="information-circle" size={24} color={colors.primary} />
+        <Text style={styles.infoText}>
+          {t("contactAddedInfo").replace(
+            "{deviceName}",
+            deviceName || t("unknownDevice"),
+          )}
+        </Text>
+      </View>
+
+      <Button title={t("backToHome")} onPress={() => router.push("/(tabs)")} />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colors.background,
+  },
+  contentContainer: {
+    padding: 20,
+    paddingBottom: 40,
+  },
+  header: {
+    alignItems: "center",
+    marginBottom: 32,
+  },
+  iconContainer: {
+    width: 96,
+    height: 96,
+    borderRadius: 48,
+    backgroundColor: colors.primaryContainer,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 16,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: colors.onBackground,
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  subtitle: {
+    fontSize: 14,
+    color: colors.onSurfaceVariant,
+    textAlign: "center",
+  },
+  detailsCard: {
+    backgroundColor: colors.surfaceContainer,
+    borderRadius: 16,
+    padding: 20,
+    marginBottom: 20,
+  },
+  detailRow: {
+    gap: 12,
+  },
+  detailLabel: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 4,
+  },
+  detailLabelText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: colors.onSurfaceVariant,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+  },
+  detailValue: {
+    fontSize: 16,
+    fontWeight: "500",
+    color: colors.onSurface,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: colors.outline,
+    marginVertical: 16,
+  },
+  infoCard: {
+    flexDirection: "row",
+    gap: 12,
+    padding: 16,
+    backgroundColor: colors.primaryContainer,
+    borderRadius: 12,
+    marginBottom: 24,
+  },
+  infoText: {
+    flex: 1,
+    fontSize: 14,
+    color: colors.onPrimaryContainer,
+    lineHeight: 20,
+  },
+  button: {
+    marginTop: 8,
+  },
+});