Add Expo mobile feed reader with shared Convex feed services

AGENTS.md

@@ -0,0 +1,3 @@
+NEVER USE ANY OTHER PACKAGE MANAGER THAN BUN.
+run the lint, typecheck and format commands after doing any fix.
+DO NOT USE USEEFFECT UNLESS ABSOLUTELY NECESSARY.

apps/mobile/.expo/README.md

@@ -0,0 +1,13 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

apps/mobile/.expo/devices.json

@@ -0,0 +1,3 @@
+{
+  "devices": []
+}

apps/mobile/.expo/types/router.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+import * as Router from 'expo-router';
+
+export * from 'expo-router';
+
+declare module 'expo-router' {
+  export namespace ExpoRouter {
+    export interface __routes<T extends string | object = string> {
+      hrefInputParams: { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/sign-in` | `/sign-in`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/bookmarks` | `/bookmarks`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}` | `/`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/settings` | `/settings`; params?: Router.UnknownInputParams; } | { pathname: `/article/[sourceId]/[itemId]`, params: Router.UnknownInputParams & { sourceId: string | number;itemId: string | number; } } | { pathname: `/feed/[sourceId]`, params: Router.UnknownInputParams & { sourceId: string | number; } };
+      hrefOutputParams: { pathname: Router.RelativePathString, params?: Router.UnknownOutputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownOutputParams } | { pathname: `/_sitemap`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(auth)'}/sign-in` | `/sign-in`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}/bookmarks` | `/bookmarks`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}` | `/`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}/settings` | `/settings`; params?: Router.UnknownOutputParams; } | { pathname: `/article/[sourceId]/[itemId]`, params: Router.UnknownOutputParams & { sourceId: string;itemId: string; } } | { pathname: `/feed/[sourceId]`, params: Router.UnknownOutputParams & { sourceId: string; } };
+      href: Router.RelativePathString | Router.ExternalPathString | `/_sitemap${`?${string}` | `#${string}` | ''}` | `${'/(auth)'}/sign-in${`?${string}` | `#${string}` | ''}` | `/sign-in${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}/bookmarks${`?${string}` | `#${string}` | ''}` | `/bookmarks${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}${`?${string}` | `#${string}` | ''}` | `/${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}/settings${`?${string}` | `#${string}` | ''}` | `/settings${`?${string}` | `#${string}` | ''}` | { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(auth)'}/sign-in` | `/sign-in`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/bookmarks` | `/bookmarks`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}` | `/`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/settings` | `/settings`; params?: Router.UnknownInputParams; } | `/article/${Router.SingleRoutePart<T>}/${Router.SingleRoutePart<T>}${`?${string}` | `#${string}` | ''}` | `/feed/${Router.SingleRoutePart<T>}${`?${string}` | `#${string}` | ''}` | { pathname: `/article/[sourceId]/[itemId]`, params: Router.UnknownInputParams & { sourceId: string | number;itemId: string | number; } } | { pathname: `/feed/[sourceId]`, params: Router.UnknownInputParams & { sourceId: string | number; } };
+    }
+  }
+}

apps/mobile/.gitignore

@@ -0,0 +1,6 @@
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

apps/mobile/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "oop",
+    "slug": "oop-mobile",
+    "scheme": "oop-mobile",
+    "version": "1.0.0",
+    "jsEngine": "hermes",
+    "orientation": "portrait",
+    "userInterfaceStyle": "automatic",
+    "plugins": [
+      "expo-router",
+      "expo-secure-store",
+      [
+        "expo-build-properties",
+        {
+          "buildReactNativeFromSource": true,
+          "useHermesV1": true
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
+    },
+    "ios": {
+      "supportsTablet": false,
+      "bundleIdentifier": "com.t3s.oop.mobile"
+    },
+    "android": {
+      "package": "com.t3s.oop.mobile"
+    }
+  }
+}

apps/mobile/app/(auth)/sign-in.tsx

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { Redirect } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { makeRedirectUri } from "expo-auth-session";
+import { useAuth, useSSO } from "@clerk/expo";
+import { Button } from "@/components/button";
+import { useColors } from "@/theme";
+
+export default function SignInScreen() {
+  const colors = useColors();
+  const { isSignedIn } = useAuth();
+  const { startSSOFlow } = useSSO();
+  const [error, setError] = useState<string | null>(null);
+  const [isPending, setIsPending] = useState(false);
+
+  if (isSignedIn) {
+    return <Redirect href="/(tabs)" />;
+  }
+
+  const handleSignIn = async () => {
+    setError(null);
+    setIsPending(true);
+
+    try {
+      const { createdSessionId, setActive } = await startSSOFlow({
+        strategy: "oauth_google",
+        redirectUrl: makeRedirectUri({ scheme: "oop-mobile" }),
+      });
+
+      if (createdSessionId && setActive) {
+        await setActive({ session: createdSessionId });
+      }
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : "Google sign-in failed.");
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <Button style={styles.button} onPress={handleSignIn} loading={isPending}>
+        <View style={styles.buttonContent}>
+          <Ionicons name="logo-google" size={20} color={colors.primaryForeground} />
+          <Text style={[styles.buttonLabel, { color: colors.primaryForeground }]}>
+            Sign in with Google
+          </Text>
+        </View>
+      </Button>
+      {error ? <Text style={[styles.error, { color: colors.destructive }]}>{error}</Text> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 24,
+  },
+  button: {
+    width: "100%",
+    maxWidth: 320,
+  },
+  buttonContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  buttonLabel: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+  error: {
+    marginTop: 16,
+    fontSize: 14,
+    textAlign: "center",
+  },
+});

apps/mobile/app/(tabs)/_layout.tsx

@@ -0,0 +1,168 @@
+import { useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Redirect, Tabs, router } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { useAuth } from "@clerk/expo";
+import { useConvexAuth, useMutation } from "convex/react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/button";
+import { Input } from "@/components/input";
+import { Sheet } from "@/components/sheet";
+import { useColors } from "@/theme";
+import { api } from "@/lib/convex";
+import { normalizeInputUrl } from "@repo/shared/feed/utils";
+import { discoverFeed } from "@repo/shared/feed/service";
+
+export default function TabsLayout() {
+  const { isSignedIn } = useAuth();
+  const { isAuthenticated } = useConvexAuth();
+  const colors = useColors();
+  const insets = useSafeAreaInsets();
+  const createSubscription = useMutation(api.feedSubscriptions.mutations.createForCurrentUser);
+  const queryClient = useQueryClient();
+  const [isAddOpen, setIsAddOpen] = useState(false);
+  const [url, setUrl] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  if (!isSignedIn) {
+    return <Redirect href="/(auth)/sign-in" />;
+  }
+
+  const canRunAuthenticatedQueries = isSignedIn && isAuthenticated;
+
+  const handleAddFeed = async () => {
+    if (!canRunAuthenticatedQueries) {
+      setError("Still connecting — please wait a moment and try again.");
+      return;
+    }
+
+    setError(null);
+    setIsSubmitting(true);
+
+    try {
+      const discovery = await discoverFeed(normalizeInputUrl(url));
+      await createSubscription(discovery.source);
+      await queryClient.invalidateQueries({ queryKey: ["feed-items"] });
+      setUrl("");
+      setIsAddOpen(false);
+      router.push(`/feed/${discovery.source.sourceId}`);
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : "Could not add feed.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <>
+      <Tabs
+        screenOptions={{
+          headerShown: false,
+          tabBarActiveTintColor: colors.primary,
+          tabBarInactiveTintColor: colors.mutedForeground,
+          tabBarStyle: {
+            backgroundColor: colors.card,
+            borderTopColor: colors.border,
+            height: 64 + insets.bottom,
+            paddingBottom: insets.bottom + 8,
+            paddingTop: 8,
+          },
+          sceneStyle: { backgroundColor: colors.background },
+        }}
+      >
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: "Home",
+            tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} />,
+          }}
+        />
+        <Tabs.Screen
+          name="bookmarks"
+          options={{
+            title: "Bookmarks",
+            tabBarIcon: ({ color, size }) => <Ionicons name="bookmark" color={color} size={size} />,
+          }}
+        />
+        <Tabs.Screen
+          name="settings"
+          options={{
+            title: "Settings",
+            tabBarIcon: ({ color, size }) => <Ionicons name="settings" color={color} size={size} />,
+          }}
+        />
+      </Tabs>
+
+      <Pressable
+        style={[
+          styles.fab,
+          {
+            right: 16,
+            bottom: insets.bottom + 42,
+            backgroundColor: colors.primary,
+          },
+        ]}
+        onPress={() => setIsAddOpen(true)}
+      >
+        <Ionicons name="add" size={24} color={colors.primaryForeground} />
+      </Pressable>
+
+      <Sheet open={isAddOpen} onOpenChange={setIsAddOpen}>
+        <Text style={[styles.sheetTitle, { color: colors.foreground }]}>Add feed</Text>
+        <Text style={[styles.sheetDesc, { color: colors.mutedForeground }]}>
+          Paste a direct RSS or Atom feed URL.
+        </Text>
+        <Input
+          value={url}
+          onChangeText={setUrl}
+          autoCapitalize="none"
+          autoCorrect={false}
+          placeholder="https://example.com/feed.xml"
+          style={styles.sheetInput}
+        />
+        {error ? (
+          <Text style={[styles.sheetError, { color: colors.destructive }]}>{error}</Text>
+        ) : null}
+        <Button style={styles.sheetButton} onPress={handleAddFeed} loading={isSubmitting} label="Add feed" />
+      </Sheet>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  fab: {
+    position: "absolute",
+    zIndex: 10,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: "center",
+    justifyContent: "center",
+    elevation: 4,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+  },
+  sheetTitle: {
+    fontSize: 24,
+    fontWeight: "600",
+  },
+  sheetDesc: {
+    marginTop: 8,
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  sheetInput: {
+    marginTop: 20,
+  },
+  sheetError: {
+    marginTop: 12,
+    fontSize: 14,
+  },
+  sheetButton: {
+    marginTop: 20,
+  },
+});