Phase 1 foundation: backend, web profile, and mobile app

Greenfield implementation of CardClaws Phase 1 across three surfaces. Backend (Rust/Axum workspace, 67 tests): - cardclaws-types/config/db/auth/api/wallet crates - Auth: register, login + lockout, magic link, refresh rotation, Apple verify - Cards: CRUD, tier-limited publish, duplicate, public handle lookup - Assets: R2 presigned uploads; vCard export - Apple Wallet .pkpass pipeline (PKCS#7 signer behind apple-signing feature) - Analytics ingest + summary with daily-salted IP hashing - Migrations 0001 (incl. cardclaws_sessions) + 0002 analytics Web profile (Astro SSR): cardclaws.com/[handle] hero + flip, contact actions, client-built vCard, visit attribution. Verified end-to-end. Mobile (Expo SDK 51): auth, card list/create, builder v1 (bg/text/logo, palette, undo/redo), Skia/Reanimated viewer (flip + ambient). 22 logic tests. CI: policy/backend/profile/mobile jobs; LOC + no-placeholder lint. Review fixes baked in: `back` (not `cardclaws`) key; strip image is a bundled manifest file (not a URL); sessions table added; NFC reframed; test doubles allowed for external services. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
2026-06-04 10:17:26 -05:00
commit c30d3afeec
128 changed files with 36279 additions and 0 deletions
@@ -0,0 +1,100 @@
+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 },
+});