feat: Phase 0 mobile app scaffold — Expo 55, SQLite, Feed/Import/Settings screens

2026-04-24 10:39:06 +02:00
parent 565f5a3ff1
commit b37df88fe1
17 changed files with 1076 additions and 0 deletions
@@ -0,0 +1,115 @@
+import { useRouter } from 'expo-router';
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useActivities, type ActivitySummary } from '@/db/queries';
+
+export default function FeedScreen() {
+  const activities = useActivities();
+
+  if (activities.length === 0) {
+    return (
+      <View style={styles.empty}>
+        <Text style={styles.emptyIcon}>🚴</Text>
+        <Text style={styles.emptyTitle}>No activities yet</Text>
+        <Text style={styles.emptyBody}>
+          Go to Import to add a FIT, GPX, or TCX file.
+        </Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.header}>Feed</Text>
+      <FlatList
+        data={activities}
+        keyExtractor={(a) => a.id}
+        renderItem={({ item }) => <ActivityCard activity={item} />}
+        contentContainerStyle={styles.list}
+      />
+    </View>
+  );
+}
+
+function ActivityCard({ activity }: { activity: ActivitySummary }) {
+  const router = useRouter();
+  const km = activity.distance_m != null
+    ? (activity.distance_m / 1000).toFixed(1)
+    : null;
+  const elev = activity.elevation_gain_m != null
+    ? Math.round(activity.elevation_gain_m)
+    : null;
+  const date = new Date(activity.started_at).toLocaleDateString(undefined, {
+    day: 'numeric', month: 'short', year: 'numeric',
+  });
+
+  return (
+    <Pressable
+      style={styles.card}
+      onPress={() => router.push(`/activity/${activity.id}`)}
+    >
+      <View style={styles.cardTop}>
+        <Text style={styles.sportIcon}>{sportIcon(activity.sport)}</Text>
+        <View style={styles.cardMeta}>
+          <Text style={styles.cardDate}>{date}</Text>
+          {!activity.synced_at && activity.origin === 'local' && (
+            <Text style={styles.unsyncedBadge}>local</Text>
+          )}
+        </View>
+      </View>
+      <Text style={styles.cardTitle} numberOfLines={1}>{activity.title}</Text>
+      <View style={styles.cardStats}>
+        {km && <Stat label="km" value={km} />}
+        {elev != null && <Stat label="m↑" value={String(elev)} />}
+      </View>
+    </Pressable>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <View style={styles.stat}>
+      <Text style={styles.statValue}>{value}</Text>
+      <Text style={styles.statLabel}>{label}</Text>
+    </View>
+  );
+}
+
+function sportIcon(sport: string): string {
+  const icons: Record<string, string> = {
+    cycling: '🚴', running: '🏃', hiking: '🥾', swimming: '🏊', walking: '🚶',
+  };
+  return icons[sport] ?? '🏅';
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#09090b' },
+  header: {
+    color: '#fff', fontSize: 22, fontWeight: '700',
+    paddingHorizontal: 16, paddingTop: 60, paddingBottom: 12,
+  },
+  list: { padding: 16, gap: 12 },
+  card: {
+    backgroundColor: '#18181b', borderRadius: 12,
+    padding: 16, borderWidth: 1, borderColor: '#27272a',
+  },
+  cardTop: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 },
+  sportIcon: { fontSize: 20 },
+  cardMeta: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  cardDate: { color: '#71717a', fontSize: 12 },
+  unsyncedBadge: {
+    color: '#a1a1aa', fontSize: 10, borderWidth: 1,
+    borderColor: '#3f3f46', borderRadius: 4, paddingHorizontal: 4,
+  },
+  cardTitle: { color: '#f4f4f5', fontSize: 15, fontWeight: '600', marginBottom: 10 },
+  cardStats: { flexDirection: 'row', gap: 16 },
+  stat: { flexDirection: 'row', alignItems: 'baseline', gap: 3 },
+  statValue: { color: '#f4f4f5', fontSize: 16, fontWeight: '600' },
+  statLabel: { color: '#71717a', fontSize: 12 },
+  empty: {
+    flex: 1, backgroundColor: '#09090b',
+    alignItems: 'center', justifyContent: 'center', padding: 32,
+  },
+  emptyIcon: { fontSize: 48, marginBottom: 16 },
+  emptyTitle: { color: '#f4f4f5', fontSize: 18, fontWeight: '600', marginBottom: 8 },
+  emptyBody: { color: '#71717a', fontSize: 14, textAlign: 'center', lineHeight: 20 },
+});