feat: implement high-priority settings actions

.env.example

@@ -20,6 +20,11 @@ AUTH_DISCORD_SECRET='your_discord_client_secret'
 # Expo app API URL (for local development, set to localhost:3000)
 EXPO_PUBLIC_API_URL=http://localhost:3000
 
+# PostHog product analytics (optional) — analytics are disabled if the key is unset.
+# Project API key + host from https://posthog.com (Project Settings)
+EXPO_PUBLIC_POSTHOG_KEY=
+EXPO_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
+
 # Google Custom Search API (for article images)
 # API Key: https://console.cloud.google.com/apis/credentials
 # Search Engine: https://programmablesearchengine.google.com/

apps/expo/package.json

@@ -37,8 +37,10 @@
     "expo-dev-client": "~5.2.4",
     "expo-font": "~13.3.2",
     "expo-image": "~2.4.1",
+    "expo-image-picker": "~16.0.6",
     "expo-linear-gradient": "~14.1.5",
     "expo-linking": "~7.1.7",
+    "expo-location": "~18.1.6",
     "expo-network": "~7.1.5",
     "expo-router": "~5.1.11",
     "expo-secure-store": "~14.2.4",
@@ -49,6 +51,7 @@
     "expo-web-browser": "~14.2.0",
     "fuse.js": "^7.1.0",
     "nativewind": "5.0.0-preview.3",
+    "posthog-react-native": "^3.3.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-native": "~0.79.6",

apps/expo/src/app/_layout.tsx

@@ -28,6 +28,7 @@ import {
   InriaSerif_700Bold_Italic,
 } from "@expo-google-fonts/inria-serif";
 import { QueryClientProvider } from "@tanstack/react-query";
+import { PostHogProvider } from "posthog-react-native";
 
 import { useTheme } from "~/styles";
 import { queryClient } from "~/utils/api";
@@ -87,7 +88,9 @@ export default function RootLayout() {
     void loadFonts();
   }, []);
 
-  return (
+  const posthogKey = process.env.EXPO_PUBLIC_POSTHOG_KEY;
+
+  const tree = (
     <QueryClientProvider client={queryClient}>
       <Stack
         screenOptions={{
@@ -100,4 +103,21 @@ export default function RootLayout() {
       <StatusBar style="light" />
     </QueryClientProvider>
   );
+
+  if (posthogKey) {
+    return (
+      <PostHogProvider
+        apiKey={posthogKey}
+        options={{
+          host:
+            process.env.EXPO_PUBLIC_POSTHOG_HOST ?? "https://us.i.posthog.com",
+        }}
+        autocapture={false}
+      >
+        {tree}
+      </PostHogProvider>
+    );
+  }
+
+  return tree;
 }

apps/expo/src/app/settings/edit-profile.tsx

@@ -1,11 +1,19 @@
 import { useState } from "react";
-import { StyleSheet, TextInput, TouchableOpacity, View } from "react-native";
+import {
+  Alert,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import * as ImagePicker from "expo-image-picker";
 import { useMutation, useQuery } from "@tanstack/react-query";
 
 import { Text } from "~/components/Themed";
 import { Avatar, GhostButton, Icon, ScreenShell } from "~/components/ui";
 import { colors, fontBody, hair, planes } from "~/styles";
 import { queryClient, trpc } from "~/utils/api";
+import { authClient } from "~/utils/auth";
 
 function getInitials(name: string): string {
   return name
@@ -22,6 +30,7 @@ export default function EditProfileScreen() {
 
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
+  const [nameError, setNameError] = useState<string | null>(null);
   const [synced, setSynced] = useState(false);
 
   if (sessionUser && !synced) {
@@ -39,14 +48,63 @@ export default function EditProfileScreen() {
     },
   });
 
+  const deleteAccount = useMutation(trpc.user.deleteAccount.mutationOptions());
+
+  const handleChangePhoto = async () => {
+    const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (!perm.granted) {
+      Alert.alert(
+        "Permission needed",
+        "Allow photo library access to change your profile photo.",
+      );
+      return;
+    }
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 0.5,
+      base64: true,
+    });
+    const asset = result.assets?.[0];
+    if (!result.canceled && asset?.base64) {
+      const dataUri = `data:image/jpeg;base64,${asset.base64}`;
+      updateProfile.mutate({ image: dataUri });
+    }
+  };
+
+  const handleDeleteAccount = () => {
+    Alert.alert(
+      "Delete account",
+      "This permanently deletes your account and all your data. This cannot be undone.",
+      [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Delete",
+          style: "destructive",
+          onPress: () =>
+            deleteAccount.mutate(undefined, {
+              onSuccess: () => void authClient.signOut(),
+            }),
+        },
+      ],
+    );
+  };
+
   const fields = [
     { label: "DISPLAY NAME", value: name, set: setName },
     { label: "EMAIL", value: email, set: undefined },
   ];
 
   const handleSave = () => {
-    if (name && name !== sessionUser?.name) {
-      updateProfile.mutate({ name });
+    const trimmed = name.trim();
+    if (trimmed.length < 1) {
+      setNameError("Name can't be empty.");
+      return;
+    }
+    setNameError(null);
+    if (trimmed && trimmed !== sessionUser?.name) {
+      updateProfile.mutate({ name: trimmed });
     }
   };
 
@@ -72,27 +130,42 @@ export default function EditProfileScreen() {
           label="Change photo"
           color={colors.bill}
           style={{ marginTop: 10, height: 32 }}
+          onPress={handleChangePhoto}
         />
       </View>
 
-      {fields.map((f) => (
-        <View key={f.label} style={{ marginBottom: 18 }}>
-          <Text style={s.label}>{f.label}</Text>
-          <TextInput
-            style={[s.input, !f.set && { opacity: 0.5 }]}
-            value={f.value}
-            onChangeText={f.set}
-            editable={!!f.set}
-            placeholderTextColor={colors.textSecondary}
-            autoCapitalize="none"
-          />
-        </View>
-      ))}
+      {fields.map((f) => {
+        const set = f.set;
+        return (
+          <View key={f.label} style={{ marginBottom: 18 }}>
+            <Text style={s.label}>{f.label}</Text>
+            <TextInput
+              style={[s.input, !set && { opacity: 0.5 }]}
+              value={f.value}
+              onChangeText={
+                set
+                  ? (v) => {
+                      set(v);
+                      setNameError(null);
+                    }
+                  : undefined
+              }
+              editable={!!set}
+              placeholderTextColor={colors.textSecondary}
+              autoCapitalize="none"
+            />
+            {f.label === "DISPLAY NAME" && nameError && (
+              <Text style={s.error}>{nameError}</Text>
+            )}
+          </View>
+        );
+      })}
 
       <GhostButton
-        label="Delete account"
+        label={deleteAccount.isPending ? "Deleting…" : "Delete account"}
         color={colors.red[500]}
         style={{ marginTop: 8, alignSelf: "flex-start" }}
+        onPress={handleDeleteAccount}
       />
     </ScreenShell>
   );
@@ -133,4 +206,11 @@ const s = StyleSheet.create({
     fontFamily: "AlbertSans-Regular",
     fontSize: 16,
   },
+  error: {
+    fontFamily: fontBody.semibold,
+    fontSize: 12,
+    color: colors.red[500],
+    marginTop: 6,
+    paddingLeft: 4,
+  },
 });

apps/expo/src/app/settings/feedback.tsx

@@ -1,10 +1,20 @@
 import { useState } from "react";
-import { StyleSheet, TextInput, TouchableOpacity, View } from "react-native";
+import {
+  Alert,
+  Platform,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import Constants from "expo-constants";
+import { useMutation } from "@tanstack/react-query";
 
 import type { IconName } from "~/components/ui";
 import { Text } from "~/components/Themed";
 import { Icon, Kicker, PrimaryButton, ScreenShell } from "~/components/ui";
 import { colors, fontBody, hair, planes } from "~/styles";
+import { trpc } from "~/utils/api";
 
 const CATS: { id: string; label: string; icon: IconName }[] = [
   { id: "bug", label: "Bug report", icon: "flag" },
@@ -16,6 +26,31 @@ export default function FeedbackScreen() {
   const [cat, setCat] = useState("bug");
   const [text, setText] = useState("");
 
+  const submitFeedback = useMutation(
+    trpc.user.submitFeedback.mutationOptions(),
+  );
+
+  const handleSubmit = () => {
+    if (!text.trim()) return;
+    submitFeedback.mutate(
+      {
+        category: cat as "bug" | "idea" | "content",
+        message: text,
+        os: Platform.OS,
+        appVersion: Constants.expoConfig?.version ?? "0.1.1",
+      },
+      {
+        onSuccess: () => {
+          setText("");
+          Alert.alert("Thanks!", "Your feedback was sent to the team.");
+        },
+        onError: () => {
+          Alert.alert("Couldn't send", "Please try again.");
+        },
+      },
+    );
+  };
+
   return (
     <ScreenShell title="Send Feedback">
       <Text style={s.title}>What&apos;s on your mind?</Text>
@@ -76,9 +111,16 @@ export default function FeedbackScreen() {
         multiline
         textAlignVertical="top"
       />
-      <Text style={s.attached}>App version 2.4.0 attached automatically.</Text>
+      <Text style={s.attached}>
+        App version {Constants.expoConfig?.version ?? "0.1.1"} attached
+        automatically.
+      </Text>
 
-      <PrimaryButton label="Submit feedback" />
+      <PrimaryButton
+        label={submitFeedback.isPending ? "Sending…" : "Submit feedback"}
+        onPress={handleSubmit}
+        disabled={submitFeedback.isPending || !text.trim()}
+      />
     </ScreenShell>
   );
 }

apps/expo/src/app/settings/help.tsx

@@ -1,10 +1,12 @@
 import { useState } from "react";
-import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { Linking, StyleSheet, TouchableOpacity, View } from "react-native";
 
 import { Text } from "~/components/Themed";
 import { Card, Icon, ScreenShell, SearchInput } from "~/components/ui";
 import { colors, fontBody } from "~/styles";
 
+const SUPPORT_EMAIL = "hello@billion.app";
+
 const FAQS = [
   {
     q: "Where does Billion get its information?",
@@ -57,14 +59,25 @@ export default function HelpScreen() {
         ))}
       </View>
 
-      <Card style={s.contactRow}>
-        <Icon name="message" size={22} color={colors.bill} />
-        <View style={{ flex: 1 }}>
-          <Text style={s.contactTitle}>Still stuck?</Text>
-          <Text style={s.contactSub}>Reach our team directly</Text>
-        </View>
-        <Icon name="chevR" size={18} color="#5B6172" />
-      </Card>
+      <TouchableOpacity
+        activeOpacity={0.8}
+        onPress={() =>
+          void Linking.openURL(
+            `mailto:${SUPPORT_EMAIL}?subject=${encodeURIComponent(
+              "Billion support request",
+            )}`,
+          )
+        }
+      >
+        <Card style={s.contactRow}>
+          <Icon name="message" size={22} color={colors.bill} />
+          <View style={{ flex: 1 }}>
+            <Text style={s.contactTitle}>Still stuck?</Text>
+            <Text style={s.contactSub}>Reach our team directly</Text>
+          </View>
+          <Icon name="chevR" size={18} color="#5B6172" />
+        </Card>
+      </TouchableOpacity>
     </ScreenShell>
   );
 }