space/codexbar-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Activity

feat: production-ready UI with onboarding wizard and dashboard
CodexBar Mobile Build / build-android (push) Successful in 31m31s
Details
CodexBar Mobile Build / release (push) Failing after 23s
Details

Browse Source 
- 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:
Space
2026-06-24 17:52:06 +02:00
parent 6bcef323be
commit d5b0f9c833
15 changed files with 1398 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(tabs)/claude.tsx
+72 -32
View File
@@ -10,8 +10,8 @@ import {
Platform,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { MaterialIcons } from "@expo/vector-icons";
import { useClaudeUsage } from "@/hooks/useClaudeUsage";
import { SectionCard } from "@/components/SectionCard";
import { UsageStat } from "@/components/UsageStat";
import { ErrorMessage } from "@/components/ErrorMessage";
@@ -31,13 +31,17 @@ export default function ClaudeTab() {
const canSave = pendingKey.trim().startsWith("sk-ant-");
return (
<SafeAreaView className="flex-1 bg-neutral-50 dark:bg-neutral-950" edges={["bottom"]}>
<SafeAreaView
className="flex-1 bg-neutral-50 dark:bg-neutral-950"
edges={["top", "bottom"]}
>
<KeyboardAvoidingView
className="flex-1"
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<ScrollView
className="flex-1 px-4 pt-4"
className="flex-1"
contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 32 }}
keyboardShouldPersistTaps="handled"
refreshControl={
<RefreshControl
@@ -46,26 +50,49 @@ export default function ClaudeTab() {
tintColor="#d97706"
/>
}
contentContainerStyle={{ paddingBottom: 32 }}
>
{/* Configure */}
<SectionCard title="Configuration">
{/* Header */}
<View className="flex-row items-center gap-x-3 py-5">
<View
className="w-9 h-9 rounded-xl items-center justify-center"
style={{ backgroundColor: "#d9770622" }}
>
<MaterialIcons name="psychology" size={18} color="#d97706" />
</View>
<View>
<Text className="text-xl font-bold text-neutral-900 dark:text-white tracking-tight">
Claude.ai
</Text>
<Text className="text-xs text-neutral-400 mt-0.5">
Usage windows
</Text>
</View>
</View>
{/* Configuration card */}
<View className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4 mb-4">
<Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 mb-3">
Configuration
</Text>
<ErrorMessage
message={error && (status === "idle" || status === "error") ? error : null}
/>
{sessionKey ? (
<View className="flex-row items-center justify-between">
<View className="flex-row items-center gap-x-2">
<View className="flex-row items-center gap-x-2.5">
<View className="w-2 h-2 rounded-full bg-green-500" />
<Text className="text-sm text-neutral-700 dark:text-neutral-300">
Configured
<Text className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
Connected
</Text>
<Text className="text-xs text-neutral-400 dark:text-neutral-500 font-mono">
{sessionKey.slice(0, 10)}…
</Text>
</View>
<TouchableOpacity
onPress={clearKey}
className="px-3 py-1.5 rounded-lg bg-neutral-100 dark:bg-neutral-800"
>
<Text className="text-sm text-neutral-600 dark:text-neutral-300">
<Text className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
Clear
</Text>
</TouchableOpacity>
@@ -79,39 +106,53 @@ export default function ClaudeTab() {
placeholderTextColor="#a3a3a3"
autoCapitalize="none"
autoCorrect={false}
className="border border-neutral-200 dark:border-neutral-700 rounded-xl px-3 py-2.5 text-sm text-neutral-900 dark:text-white bg-white dark:bg-neutral-800 mb-3"
secureTextEntry
className="border border-neutral-200 dark:border-neutral-700 rounded-xl px-3 py-3 text-sm text-neutral-900 dark:text-white bg-white dark:bg-neutral-800 mb-3"
/>
<TouchableOpacity
onPress={saveKey}
disabled={!canSave}
className={`py-3 px-4 rounded-xl ${
canSave ? "bg-amber-500" : "bg-neutral-200 dark:bg-neutral-700"
}`}
className="py-3.5 px-4 rounded-xl items-center"
style={{ backgroundColor: canSave ? "#d97706" : "#e5e5e5" }}
>
<Text
className={`text-center font-semibold text-sm ${
canSave ? "text-white" : "text-neutral-400"
}`}
className="font-semibold text-sm"
style={{ color: canSave ? "white" : "#a3a3a3" }}
>
Save Session Key
</Text>
</TouchableOpacity>
<Text className="text-xs text-neutral-400 mt-2">
Chrome DevTools → Application → Cookies → claude.ai → sessionKey
<View className="bg-neutral-50 dark:bg-neutral-800 rounded-xl p-3.5 mt-3 border border-neutral-100 dark:border-neutral-700">
<Text className="text-xs font-semibold text-neutral-400 uppercase tracking-widest mb-1.5">
Where to find it
</Text>
<Text className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed">
Chrome DevTools → Application → Cookies → claude.ai →{" "}
<Text className="font-mono text-neutral-600 dark:text-neutral-300">
sessionKey
</Text>
</Text>
</View>
</View>
)}
</View>
{/* Usage card */}
<View className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4">
<Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 mb-3">
Usage
</Text>
{status === "idle" && !sessionKey && (
<View className="items-center py-8">
<MaterialIcons name="insert-chart-outlined" size={32} color="#d4d4d4" />
<Text className="text-sm text-neutral-400 text-center mt-3">
Enter your session key to see usage windows
</Text>
</View>
)}
</SectionCard>
{/* Usage */}
<SectionCard title="Usage">
{status === "idle" && !sessionKey && (
<Text className="text-sm text-neutral-400 text-center py-4">
Enter your Claude session key to see usage
</Text>
)}
{status === "loading" && (
<ActivityIndicator color="#d97706" className="py-4" />
<ActivityIndicator color="#d97706" style={{ marginVertical: 24 }} />
)}
{status === "error" && error && <ErrorMessage message={error} />}
{status === "success" && usage && (
@@ -121,7 +162,6 @@ export default function ClaudeTab() {
percent={usage.five_hour.utilization}
resetAtISO={usage.five_hour.resets_at}
/>
<UsageStat
label="7-day window"
percent={usage.seven_day.utilization}
@@ -129,7 +169,7 @@ export default function ClaudeTab() {
/>
{(usage.seven_day_sonnet || usage.seven_day_opus) && (
<View className="mt-2 p-3 rounded-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
<View className="mt-1 p-3.5 rounded-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-100 dark:border-neutral-700">
<Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 mb-3">
By Model (7-day)
</Text>
@@ -149,7 +189,7 @@ export default function ClaudeTab() {
)}
</View>
)}
</SectionCard>
</View>
</ScrollView>
</KeyboardAvoidingView>
</SafeAreaView>