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
@@ -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 },
+});