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]>
2026-06-05 22:57:11 -05:00
parent 4de59cca31
commit e0b6200091
9 changed files with 144 additions and 147 deletions
@@ -1,18 +1,39 @@
+// Bottom tab bar for the standalone app:
+//   backpack → your cards (gallery)
+//   money bag → collectible cards
+//   robot → work-agent cards
+//   cog → settings
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";

+type IconName = keyof typeof MaterialCommunityIcons.glyphMap;
+
+function tabIcon(name: IconName) {
+  return ({ color, size }: { color: string; size: number }) => (
+    <MaterialCommunityIcons name={name} size={size} color={color} />
+  );
+}
+
 export default function TabsLayout() {
  return (
    <Tabs
      screenOptions={{
-        headerStyle: { backgroundColor: "#0a0a0c" },
-        headerTintColor: "#f5f5f7",
-        tabBarStyle: { backgroundColor: "#0a0a0c", borderTopColor: "#1a1a1f" },
+        headerShown: false,
        tabBarActiveTintColor: "#ff3b30",
        tabBarInactiveTintColor: "#6b6b70",
+        tabBarStyle: {
+          backgroundColor: "#0e0e12",
+          borderTopColor: "#1c1c22",
+        },
      }}
    >
-      <Tabs.Screen name="cards" options={{ title: "Cards" }} />
-      <Tabs.Screen name="settings" options={{ title: "Settings" }} />
+      <Tabs.Screen name="index" options={{ title: "Cards", tabBarIcon: tabIcon("bag-personal") }} />
+      <Tabs.Screen
+        name="collectibles"
+        options={{ title: "Collectibles", tabBarIcon: tabIcon("sack") }}
+      />
+      <Tabs.Screen name="agents" options={{ title: "Agents", tabBarIcon: tabIcon("robot") }} />
+      <Tabs.Screen name="settings" options={{ title: "Settings", tabBarIcon: tabIcon("cog") }} />
    </Tabs>
  );
 }
@@ -0,0 +1,27 @@
+// Work-agent cards — AI agents attached to your cards. None yet; this is their
+// home.
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function Agents() {
+  const insets = useSafeAreaInsets();
+  return (
+    <View style={[styles.root, { paddingTop: insets.top }]}>
+      <View style={styles.center}>
+        <MaterialCommunityIcons name="robot" size={48} color="#3a3a44" />
+        <Text style={styles.title}>No agent cards yet</Text>
+        <Text style={styles.hint}>
+          Cards backed by an AI work agent will appear here.
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: "#0a0a0c" },
+  center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 32, gap: 10 },
+  title: { color: "#f5f5f7", fontSize: 20, fontWeight: "700" },
+  hint: { color: "#6b6b70", fontSize: 14, textAlign: "center", lineHeight: 20 },
+});
@@ -1,100 +0,0 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useRouter } from "expo-router";
-import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
-import { createCard, listCards } from "../../src/api/cards";
-import { useAuthStore } from "../../src/stores/authStore";
-import { CardDefinition, DEFAULT_SETTINGS, emptySide } from "../../src/types/card";
-
-function defaultCard(handle: string, ownerId: string): CardDefinition {
-  return {
-    id: "",
-    ownerId,
-    handle,
-    version: 1,
-    face: emptySide("#1b1b2f"),
-    back: emptySide("#1b1b2f"),
-    palette: {
-      colors: [
-        { name: "Ocean", hex: "#1b1b2f", role: "background" },
-        { name: "Snow", hex: "#f5f5f7", role: "text" },
-        { name: "Claw", hex: "#ff3b30", role: "accent" },
-      ],
-    },
-    settings: DEFAULT_SETTINGS,
-  };
-}
-
-export default function CardsScreen() {
-  const router = useRouter();
-  const queryClient = useQueryClient();
-  const user = useAuthStore((s) => s.user);
-
-  const { data: cards = [], isLoading } = useQuery({
-    queryKey: ["cards"],
-    queryFn: listCards,
-  });
-
-  const create = useMutation({
-    mutationFn: () => {
-      const suffix = Math.floor(Math.random() * 1e4).toString(36);
-      const handle = `${(user?.handle ?? "card").slice(0, 22)}-${suffix}`;
-      return createCard(handle, defaultCard(handle, user?.id ?? ""));
-    },
-    onSuccess: (card) => {
-      queryClient.invalidateQueries({ queryKey: ["cards"] });
-      router.push(`/builder/${card.id}`);
-    },
-  });
-
-  return (
-    <View style={styles.root}>
-      <FlatList
-        data={cards}
-        keyExtractor={(c) => c.id}
-        contentContainerStyle={styles.list}
-        ListEmptyComponent={
-          isLoading ? null : <Text style={styles.empty}>No cards yet. Create your first.</Text>
-        }
-        renderItem={({ item }) => (
-          <Pressable style={styles.card} onPress={() => router.push(`/card/${item.id}/view`)}>
-            <Text style={styles.handle}>@{item.handle}</Text>
-            <Text style={styles.status}>{item.status}</Text>
-            <Pressable onPress={() => router.push(`/builder/${item.id}`)} hitSlop={8}>
-              <Text style={styles.edit}>Edit</Text>
-            </Pressable>
-          </Pressable>
-        )}
-      />
-      <Pressable style={styles.fab} onPress={() => create.mutate()} disabled={create.isPending}>
-        <Text style={styles.fabText}>+ New card</Text>
-      </Pressable>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  root: { flex: 1, backgroundColor: "#0a0a0c" },
-  list: { padding: 16, gap: 12 },
-  empty: { color: "#6b6b70", textAlign: "center", marginTop: 64 },
-  card: {
-    backgroundColor: "#15151a",
-    borderRadius: 16,
-    padding: 18,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-  },
-  handle: { color: "#f5f5f7", fontSize: 18, fontWeight: "700", flex: 1 },
-  status: { color: "#9a9aa0", textTransform: "uppercase", fontSize: 12 },
-  edit: { color: "#ff3b30", fontWeight: "600" },
-  fab: {
-    position: "absolute",
-    bottom: 24,
-    alignSelf: "center",
-    backgroundColor: "#ff3b30",
-    borderRadius: 28,
-    paddingHorizontal: 28,
-    paddingVertical: 16,
-  },
-  fabText: { color: "#fff", fontWeight: "700", fontSize: 16 },
-});
@@ -0,0 +1,27 @@
+// Collectible cards — cards you've collected from people you meet (a deck you
+// build up). No collectibles yet; this is the home for them.
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function Collectibles() {
+  const insets = useSafeAreaInsets();
+  return (
+    <View style={[styles.root, { paddingTop: insets.top }]}>
+      <View style={styles.center}>
+        <MaterialCommunityIcons name="sack" size={48} color="#3a3a44" />
+        <Text style={styles.title}>No collectibles yet</Text>
+        <Text style={styles.hint}>
+          Cards you collect from people you meet will live here — build your deck.
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: "#0a0a0c" },
+  center: { flex: 1, alignItems: "center", justifyContent: "center", padding: 32, gap: 10 },
+  title: { color: "#f5f5f7", fontSize: 20, fontWeight: "700" },
+  hint: { color: "#6b6b70", fontSize: 14, textAlign: "center", lineHeight: 20 },
+});
@@ -0,0 +1,87 @@
+// Gallery of cards saved on this device (standalone demo). Clean, chrome-free:
+// just the cards, auto-arranging by count, plus a New-card button.
+
+import { useRouter } from "expo-router";
+import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { CardThumb } from "../../src/components/CardThumb";
+import { LocalCard, useLocalCardsStore } from "../../src/stores/localCardsStore";
+
+/// Shrink tiles as the gallery grows: 2 columns → 4 fit a screen, 3 columns →
+/// ~8 fit, 4 columns beyond that.
+function columnsFor(count: number): number {
+  if (count <= 4) return 2;
+  if (count <= 9) return 3;
+  return 4;
+}
+
+export default function Gallery() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const cards = useLocalCardsStore((s) => s.cards);
+  const columns = columnsFor(cards.length);
+
+  return (
+    <View style={styles.root}>
+      <FlatList
+        data={cards}
+        keyExtractor={(c) => c.id}
+        // numColumns can't change on the fly without remounting the list.
+        key={`cols-${columns}`}
+        numColumns={columns}
+        columnWrapperStyle={cards.length > 0 ? styles.column : undefined}
+        contentContainerStyle={[styles.list, { paddingTop: insets.top + 12 }]}
+        ListEmptyComponent={
+          <View style={styles.empty}>
+            <Text style={styles.emptyTitle}>No cards yet</Text>
+            <Text style={styles.emptyHint}>Tap “New card” to create your first.</Text>
+          </View>
+        }
+        renderItem={({ item }: { item: LocalCard }) => (
+          <Pressable style={styles.tile} onPress={() => router.push(`/demo?cardId=${item.id}`)}>
+            <CardThumb item={item} style={styles.tileImage} />
+            <View style={[styles.tileLabel, columns >= 3 && styles.tileLabelCompact]}>
+              <Text style={[styles.tileName, columns >= 3 && styles.tileNameCompact]} numberOfLines={1}>
+                {item.name}
+              </Text>
+              {!!item.title && columns < 4 && (
+                <Text style={[styles.tileTitle, columns >= 3 && styles.tileNameCompact]} numberOfLines={1}>
+                  {item.title}
+                </Text>
+              )}
+            </View>
+          </Pressable>
+        )}
+      />
+
+      <Pressable style={[styles.fab, { bottom: 24 }]} onPress={() => router.push("/demo")}>
+        <Text style={styles.fabText}>+ New card</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: "#0a0a0c" },
+  list: { paddingHorizontal: 16, paddingBottom: 96, flexGrow: 1 },
+  column: { gap: 12 },
+  tile: { flex: 1, marginBottom: 12, borderRadius: 18, overflow: "hidden", backgroundColor: "#15151a" },
+  tileImage: { width: "100%", aspectRatio: 2 / 3, overflow: "hidden" },
+  tileLabel: { padding: 12 },
+  tileLabelCompact: { padding: 7 },
+  tileName: { color: "#f5f5f7", fontSize: 16, fontWeight: "700" },
+  tileNameCompact: { fontSize: 12 },
+  tileTitle: { color: "#9a9aa0", fontSize: 13, marginTop: 2 },
+  empty: { flex: 1, alignItems: "center", justifyContent: "center", paddingTop: 120, gap: 6 },
+  emptyTitle: { color: "#f5f5f7", fontSize: 20, fontWeight: "700" },
+  emptyHint: { color: "#6b6b70" },
+  fab: {
+    position: "absolute",
+    alignSelf: "center",
+    backgroundColor: "#ff3b30",
+    borderRadius: 28,
+    paddingHorizontal: 30,
+    paddingVertical: 16,
+  },
+  fabText: { color: "#fff", fontWeight: "700", fontSize: 16 },
+});
@@ -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 },
 });