feat: production-ready UI with onboarding wizard and dashboard
- Onboarding flow (welcome -> Codex setup -> Claude setup -> done) with dark-themed screens and step indicators; completion stored in SecureStore - Smart root redirect checks onboarding state on launch - Dashboard tab shows both services at a glance via ServiceStatusCard; useFocusEffect + reload() keeps it fresh when credentials change in tabs - Settings tab manages credentials and exposes re-run setup wizard - Polished Codex and Claude detail screens with service headers and empty states - 4-tab layout (Home, Codex, Claude, Settings) with dark-mode tab bar - Both hooks gain reload() for cross-tab credential refresh Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,266 @@
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { View, Text, TouchableOpacity, Alert, ScrollView } from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import { router, useFocusEffect } from "expo-router";
|
||||
import { MaterialIcons } from "@expo/vector-icons";
|
||||
import {
|
||||
loadCodexAuth,
|
||||
clearCodexAuth,
|
||||
loadClaudeSessionKey,
|
||||
clearClaudeSessionKey,
|
||||
} from "@/lib/storage";
|
||||
import { resetOnboarding } from "@/lib/setupState";
|
||||
import type { CodexAuth } from "@/types/codex";
|
||||
import Constants from "expo-constants";
|
||||
|
||||
function SettingRow({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
onPress,
|
||||
destructive,
|
||||
disabled,
|
||||
}: {
|
||||
icon: React.ComponentProps<typeof MaterialIcons>["name"];
|
||||
label: string;
|
||||
value?: string;
|
||||
onPress?: () => void;
|
||||
destructive?: boolean;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={onPress}
|
||||
disabled={disabled}
|
||||
activeOpacity={onPress ? 0.7 : 1}
|
||||
className="flex-row items-center gap-x-3 py-3.5 px-4"
|
||||
>
|
||||
<View className="w-8 items-center">
|
||||
<MaterialIcons
|
||||
name={icon}
|
||||
size={20}
|
||||
color={destructive ? "#ef4444" : disabled ? "#a3a3a3" : "#737373"}
|
||||
/>
|
||||
</View>
|
||||
<View className="flex-1">
|
||||
<Text
|
||||
className={`text-sm font-medium ${
|
||||
destructive
|
||||
? "text-red-500"
|
||||
: disabled
|
||||
? "text-neutral-400 dark:text-neutral-600"
|
||||
: "text-neutral-800 dark:text-neutral-100"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
{value && (
|
||||
<Text className="text-xs text-neutral-400 dark:text-neutral-500 mt-0.5 font-mono">
|
||||
{value}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
{onPress && !disabled && (
|
||||
<MaterialIcons
|
||||
name="chevron-right"
|
||||
size={18}
|
||||
color={destructive ? "#ef4444" : "#d4d4d4"}
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionHeader({ title }: { title: string }) {
|
||||
return (
|
||||
<Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 px-4 pt-5 pb-1.5">
|
||||
{title}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionCard({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<View className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 mx-4 overflow-hidden">
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return (
|
||||
<View className="ml-16 mr-0 h-px bg-neutral-100 dark:bg-neutral-800" />
|
||||
);
|
||||
}
|
||||
|
||||
export default function SettingsTab() {
|
||||
const [codexAuth, setCodexAuth] = useState<CodexAuth | null>(null);
|
||||
const [claudeKey, setClaudeKey] = useState<string | null>(null);
|
||||
|
||||
const reload = useCallback(() => {
|
||||
Promise.all([loadCodexAuth(), loadClaudeSessionKey()]).then(
|
||||
([codex, claude]) => {
|
||||
setCodexAuth(codex);
|
||||
setClaudeKey(claude);
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
reload();
|
||||
}, [reload]);
|
||||
|
||||
useFocusEffect(useCallback(() => {
|
||||
reload();
|
||||
}, [reload]));
|
||||
|
||||
const handleClearCodex = () => {
|
||||
Alert.alert(
|
||||
"Clear Codex credentials",
|
||||
"This will remove your stored auth.json data. You can re-import it anytime.",
|
||||
[
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{
|
||||
text: "Clear",
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
await clearCodexAuth();
|
||||
setCodexAuth(null);
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const handleClearClaude = () => {
|
||||
Alert.alert(
|
||||
"Clear Claude session key",
|
||||
"Your session key will be removed. You can re-enter it anytime.",
|
||||
[
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{
|
||||
text: "Clear",
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
await clearClaudeSessionKey();
|
||||
setClaudeKey(null);
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const handleResetSetup = () => {
|
||||
Alert.alert(
|
||||
"Re-run Setup Wizard",
|
||||
"This will clear all credentials and restart the setup flow.",
|
||||
[
|
||||
{ text: "Cancel", style: "cancel" },
|
||||
{
|
||||
text: "Reset & Re-run",
|
||||
style: "destructive",
|
||||
onPress: async () => {
|
||||
await Promise.all([
|
||||
clearCodexAuth(),
|
||||
clearClaudeSessionKey(),
|
||||
resetOnboarding(),
|
||||
]);
|
||||
router.replace("/onboarding");
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
};
|
||||
|
||||
const appVersion = Constants.expoConfig?.version ?? "1.0.0";
|
||||
|
||||
return (
|
||||
<SafeAreaView
|
||||
className="flex-1 bg-neutral-50 dark:bg-neutral-950"
|
||||
edges={["top", "bottom"]}
|
||||
>
|
||||
<ScrollView className="flex-1" contentContainerStyle={{ paddingBottom: 48 }}>
|
||||
{/* Header */}
|
||||
<View className="px-4 py-5">
|
||||
<Text className="text-2xl font-bold text-neutral-900 dark:text-white tracking-tight">
|
||||
Settings
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Codex CLI section */}
|
||||
<SectionHeader title="Codex CLI" />
|
||||
<SectionCard>
|
||||
{codexAuth ? (
|
||||
<>
|
||||
<SettingRow
|
||||
icon="check-circle"
|
||||
label="Connected"
|
||||
value={codexAuth.accountId ? `${codexAuth.accountId.slice(0, 16)}…` : undefined}
|
||||
disabled
|
||||
/>
|
||||
<Divider />
|
||||
<SettingRow
|
||||
icon="delete-outline"
|
||||
label="Clear credentials"
|
||||
onPress={handleClearCodex}
|
||||
destructive
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<SettingRow
|
||||
icon="upload-file"
|
||||
label="Import auth.json"
|
||||
onPress={() => router.navigate("/(tabs)/codex")}
|
||||
/>
|
||||
)}
|
||||
</SectionCard>
|
||||
|
||||
{/* Claude.ai section */}
|
||||
<SectionHeader title="Claude.ai" />
|
||||
<SectionCard>
|
||||
{claudeKey ? (
|
||||
<>
|
||||
<SettingRow
|
||||
icon="check-circle"
|
||||
label="Connected"
|
||||
value={`${claudeKey.slice(0, 16)}…`}
|
||||
disabled
|
||||
/>
|
||||
<Divider />
|
||||
<SettingRow
|
||||
icon="delete-outline"
|
||||
label="Clear session key"
|
||||
onPress={handleClearClaude}
|
||||
destructive
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<SettingRow
|
||||
icon="vpn-key"
|
||||
label="Enter session key"
|
||||
onPress={() => router.navigate("/(tabs)/claude")}
|
||||
/>
|
||||
)}
|
||||
</SectionCard>
|
||||
|
||||
{/* App section */}
|
||||
<SectionHeader title="App" />
|
||||
<SectionCard>
|
||||
<SettingRow
|
||||
icon="info-outline"
|
||||
label="Version"
|
||||
value={appVersion}
|
||||
disabled
|
||||
/>
|
||||
<Divider />
|
||||
<SettingRow
|
||||
icon="restart-alt"
|
||||
label="Re-run Setup Wizard"
|
||||
onPress={handleResetSetup}
|
||||
destructive
|
||||
/>
|
||||
</SectionCard>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user