Live communication and production mobile setup

.env.example

@@ -1,2 +1,3 @@
 EXPO_PUBLIC_API_URL=http://localhost:3000
 EXPO_PUBLIC_SENTRY_DSN=
+EXPO_PUBLIC_SENTRY_ENVIRONMENT=development

.github/workflows/ci.yml

@@ -5,9 +5,15 @@ on:
     branches: [main]
   pull_request:
 
+permissions:
+  contents: read
+
 jobs:
   validate:
     runs-on: ubuntu-latest
+    env:
+      EXPO_PUBLIC_API_URL: https://backend.ruffl.thomaswhite.me
+      EXPO_PUBLIC_SENTRY_ENVIRONMENT: test
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -18,3 +24,4 @@ jobs:
       - run: npm run typecheck
       - run: npm run lint
       - run: npm test
+      - run: npm run export:web

app.json

@@ -17,7 +17,7 @@
     },
     "android": {
       "adaptiveIcon": {
-          "backgroundColor": "#F8F4EC",
+        "backgroundColor": "#F8F4EC",
         "foregroundImage": "./assets/images/android-icon-foreground.png",
         "backgroundImage": "./assets/images/android-icon-background.png",
         "monochromeImage": "./assets/images/android-icon-monochrome.png"
@@ -44,7 +44,17 @@
             "backgroundColor": "#1D2A24"
           }
         }
-      ]
+      ],
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "Allow Ruffl to select photos you choose to share in commissions and messages.",
+          "cameraPermission": false,
+          "microphonePermission": false
+        }
+      ],
+      "expo-notifications",
+      "@sentry/react-native"
     ],
     "experiments": {
       "typedRoutes": true,

app/(tabs)/inbox.tsx

@@ -39,6 +39,8 @@ export default function InboxScreen() {
 
   useEffect(() => {
     void load();
+    const interval = setInterval(() => void load(), 5_000);
+    return () => clearInterval(interval);
   }, [load]);
 
   return (

app/(tabs)/index.tsx

@@ -47,6 +47,25 @@ export default function HomeScreen() {
     void load();
   }, [load]);
 
+  const markNotificationRead = async (notification: Notification) => {
+    if (!token || notification.read) return;
+    setNotifications((current) =>
+      current.map((item) =>
+        item.id === notification.id ? { ...item, read: true } : item,
+      ),
+    );
+    try {
+      await api.readNotification(token, notification.id);
+    } catch (caught) {
+      setNotifications((current) =>
+        current.map((item) =>
+          item.id === notification.id ? { ...item, read: false } : item,
+        ),
+      );
+      setError(caught instanceof ApiError ? caught.message : 'Could not update this activity.');
+    }
+  };
+
   const active = commissions.filter((commission) =>
     ['pending', 'negotiating', 'price_proposed', 'accepted', 'active', 'shipping', 'disputed'].includes(
       commission.status,
@@ -69,7 +88,10 @@ export default function HomeScreen() {
             <Eyebrow>{user?.role === 'maker' ? 'Maker studio' : 'Commission desk'}</Eyebrow>
             <Text style={styles.greeting}>Hi, {user?.displayName.split(' ')[0]}</Text>
           </View>
-          <Avatar name={user?.displayName ?? 'Ruffl'} />
+          <Avatar
+            name={user?.displayName ?? 'Ruffl'}
+            uri={user?.avatarUrl}
+          />
         </View>
         {error ? <ErrorNotice message={error} /> : null}
         <Card tone="moss">
@@ -170,15 +192,22 @@ export default function HomeScreen() {
               .reverse()
               .slice(0, 4)
               .map((notification, index) => (
-                <View
+                <Pressable
                   key={notification.id}
+                  accessibilityRole="button"
+                  onPress={() => void markNotificationRead(notification)}
                   style={[styles.activity, index > 0 && styles.activityBorder]}>
-                  <View style={styles.activityDot} />
+                  <View
+                    style={[
+                      styles.activityDot,
+                      notification.read && styles.activityDotRead,
+                    ]}
+                  />
                   <View style={styles.flex}>
                     <Text style={textStyles.label}>{notification.title}</Text>
                     <Text style={textStyles.muted}>{notification.body}</Text>
                   </View>
-                </View>
+                </Pressable>
               ))
           )}
         </Card>
@@ -220,4 +249,5 @@ const styles = StyleSheet.create({
     marginTop: 6,
     width: 8,
   },
+  activityDotRead: { backgroundColor: colours.line },
 });

app/(tabs)/makers.tsx

@@ -92,7 +92,11 @@ export default function MakersScreen() {
               <Pressable>
                 <Card>
                   <View style={styles.makerTop}>
-                    <Avatar name={user.displayName} size={58} />
+                    <Avatar
+                      name={user.displayName}
+                      size={58}
+                      uri={user.avatarUrl}
+                    />
                     <View style={styles.flex}>
                       <View style={styles.nameRow}>
                         <Text style={styles.name}>{user.displayName}</Text>