Mobile: bottom tab bar (Cards · Collectibles · Agents · Settings)

Restructure the app into an Expo Router (tabs) group with a bottom navbar:
- 🎒 Cards (bag-personal) = the gallery (moved from app/index.tsx).
- 💰 Collectibles (sack) + 🤖 Agents (robot) = new empty-state screens.
- ⚙️ Settings (cog) = demo settings (app info + Clear all cards).
Root stack hides the (tabs) header; removed the Phase-1 (tabs)/cards.tsx and
pointed the dormant (auth)/login redirect at "/". localCardsStore gains clear().

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>

cardclaws-mobile/app/(tabs)/settings.tsx

@@ -1,55 +1,75 @@
-import { useRouter } from "expo-router";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import { logout } from "../../src/api/auth";
-import { useAuthStore } from "../../src/stores/authStore";
+// Settings (standalone demo): app info + manage local data.
+import { Alert, Pressable, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useLocalCardsStore } from "../../src/stores/localCardsStore";
 
 export default function SettingsScreen() {
-  const router = useRouter();
-  const user = useAuthStore((s) => s.user);
+  const insets = useSafeAreaInsets();
+  const count = useLocalCardsStore((s) => s.cards.length);
+  const clear = useLocalCardsStore((s) => s.clear);
 
-  const onLogout = async () => {
-    await logout();
-    router.replace("/(auth)/login");
+  const confirmClear = () => {
+    Alert.alert(
+      "Clear all cards?",
+      `This removes all ${count} card(s) on this device. This can't be undone.`,
+      [
+        { text: "Cancel", style: "cancel" },
+        { text: "Clear", style: "destructive", onPress: () => clear() },
+      ],
+    );
   };
 
   return (
-    <View style={styles.root}>
-      <View style={styles.row}>
-        <Text style={styles.label}>Signed in as</Text>
-        <Text style={styles.value}>{user?.email ?? "—"}</Text>
+    <View style={[styles.root, { paddingTop: insets.top + 16 }]}>
+      <Text style={styles.h1}>Settings</Text>
+
+      <View style={styles.card}>
+        <Row label="App" value="CardClaws" />
+        <Row label="Mode" value="Standalone demo" />
+        <Row label="Version" value="0.1.0" />
+        <Row label="Cards on device" value={String(count)} />
       </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>Handle</Text>
-        <Text style={styles.value}>@{user?.handle ?? "—"}</Text>
-      </View>
-      <View style={styles.row}>
-        <Text style={styles.label}>Plan</Text>
-        <Text style={styles.value}>{user?.tier ?? "free"}</Text>
-      </View>
-      <Pressable style={styles.logout} onPress={onLogout}>
-        <Text style={styles.logoutText}>Sign out</Text>
+
+      <Pressable
+        style={[styles.danger, count === 0 && styles.disabled]}
+        disabled={count === 0}
+        onPress={confirmClear}
+      >
+        <Text style={styles.dangerText}>Clear all cards</Text>
       </Pressable>
     </View>
   );
 }
 
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <View style={styles.row}>
+      <Text style={styles.label}>{label}</Text>
+      <Text style={styles.value}>{value}</Text>
+    </View>
+  );
+}
+
 const styles = StyleSheet.create({
-  root: { flex: 1, backgroundColor: "#0a0a0c", padding: 16, gap: 4 },
+  root: { flex: 1, backgroundColor: "#0a0a0c", paddingHorizontal: 20, gap: 16 },
+  h1: { color: "#f5f5f7", fontSize: 28, fontWeight: "800" },
+  card: { backgroundColor: "#15151a", borderRadius: 16, paddingHorizontal: 16 },
   row: {
     flexDirection: "row",
     justifyContent: "space-between",
-    paddingVertical: 16,
-    borderBottomColor: "#1a1a1f",
-    borderBottomWidth: 1,
+    paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#22222a",
   },
   label: { color: "#9a9aa0", fontSize: 15 },
   value: { color: "#f5f5f7", fontSize: 15, fontWeight: "600" },
-  logout: {
-    marginTop: 32,
-    backgroundColor: "#15151a",
+  danger: {
+    borderWidth: 1,
+    borderColor: "#ff453a",
     borderRadius: 14,
-    paddingVertical: 16,
+    paddingVertical: 15,
     alignItems: "center",
   },
-  logoutText: { color: "#ff453a", fontWeight: "700", fontSize: 16 },
+  disabled: { opacity: 0.4 },
+  dangerText: { color: "#ff453a", fontWeight: "700", fontSize: 16 },
 });