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>
2026-06-24 17:52:06 +02:00
parent 6bcef323be
commit d5b0f9c833
15 changed files with 1398 additions and 107 deletions
@@ -0,0 +1,82 @@
+import { View, Text, TouchableOpacity } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { router } from "expo-router";
+import { MaterialIcons } from "@expo/vector-icons";
+
+export default function WelcomeScreen() {
+  return (
+    <SafeAreaView className="flex-1 bg-neutral-950">
+      <View className="flex-1 px-8 justify-between py-12">
+        {/* Logo + title */}
+        <View className="items-center mt-8">
+          <View className="flex-row items-center justify-center mb-8">
+            <View
+              className="w-16 h-16 rounded-2xl items-center justify-center"
+              style={{ backgroundColor: "#10a37f" }}
+            >
+              <MaterialIcons name="auto-awesome" size={28} color="white" />
+            </View>
+            <View
+              className="w-16 h-16 rounded-2xl items-center justify-center -ml-5"
+              style={{ backgroundColor: "#d97706" }}
+            >
+              <MaterialIcons name="psychology" size={28} color="white" />
+            </View>
+          </View>
+          <Text className="text-5xl font-bold text-white mb-4 tracking-tight">
+            Codexbar
+          </Text>
+          <Text className="text-neutral-400 text-base text-center leading-relaxed">
+            Monitor your Codex CLI and Claude.ai{"\n"}usage limits at a glance.
+          </Text>
+        </View>
+
+        {/* Feature pills */}
+        <View className="gap-y-3">
+          <View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800">
+            <View
+              className="w-10 h-10 rounded-xl items-center justify-center"
+              style={{ backgroundColor: "#10a37f22" }}
+            >
+              <MaterialIcons name="auto-awesome" size={20} color="#10a37f" />
+            </View>
+            <View className="flex-1">
+              <Text className="text-white font-semibold mb-0.5">Codex CLI</Text>
+              <Text className="text-neutral-500 text-sm">
+                Rate limits · Credits · Windows
+              </Text>
+            </View>
+          </View>
+          <View className="flex-row items-center gap-x-3 bg-neutral-900 rounded-2xl p-4 border border-neutral-800">
+            <View
+              className="w-10 h-10 rounded-xl items-center justify-center"
+              style={{ backgroundColor: "#d9770622" }}
+            >
+              <MaterialIcons name="psychology" size={20} color="#d97706" />
+            </View>
+            <View className="flex-1">
+              <Text className="text-white font-semibold mb-0.5">Claude.ai</Text>
+              <Text className="text-neutral-500 text-sm">
+                5-hour · 7-day · Model usage
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        {/* CTA */}
+        <View>
+          <TouchableOpacity
+            onPress={() => router.push("/onboarding/codex")}
+            className="rounded-2xl py-4 items-center"
+            style={{ backgroundColor: "#10a37f" }}
+          >
+            <Text className="text-white font-bold text-base">Get Started</Text>
+          </TouchableOpacity>
+          <Text className="text-neutral-600 text-xs text-center mt-4">
+            You can configure services at any time in Settings
+          </Text>
+        </View>
+      </View>
+    </SafeAreaView>
+  );
+}