feat(mobile): unified toast system — no more inline red error text

Replaces the ad-hoc inline red error `<Text>` scattered across the apps with one
shared toast: green = success, red = error, slide-in from the top, tap or
auto-dismiss.

- packages/ui: ToastProvider + useToast() (toast.success/error/info), animated,
  safe-area aware. Wired into both apps' root _layout.
- customer app: login, checkout, book (+ the geocode "could not search" error),
  change-laundry, addresses, profile, notifications, order detail (cancel/rate)
  — every transient error → toast.error; success paths (address saved/removed,
  booking cancelled, rating thanks, address pinned, all-caught-up) → toast.success.
- rider app: login, job detail (status transition + cash) → toasts.
- Full-screen load-failure ErrorState (with retry) intentionally kept — those
  aren't transient alerts. Sign-out confirm Alert kept (it's a confirmation).
- type-clean: ui + both apps.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Banyel3

apps/customer-mobile/src/app/(tabs)/profile.tsx

@@ -9,15 +9,19 @@ import {
   Screen,
   colors,
   type,
+  useToast,
 } from '@wash-and-go/ui';
 import { auth } from '../../lib/firebase';
 
 export default function ProfileScreen() {
+  const toast = useToast();
   const email = auth.currentUser?.email ?? null;
 
   function doSignOut() {
     // The root auth gate redirects to /login once the user becomes null.
-    void signOut(auth);
+    signOut(auth).catch((e) =>
+      toast.error(e instanceof Error ? e.message : 'Could not sign out.'),
+    );
   }
 
   function confirmSignOut() {

apps/customer-mobile/src/app/_layout.tsx

@@ -12,7 +12,7 @@ import { onAuthStateChanged, type User } from 'firebase/auth';
 import { useEffect, useState } from 'react';
 import { Text as RNText, TextInput as RNTextInput } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { colors, font } from '@wash-and-go/ui';
+import { colors, font, ToastProvider } from '@wash-and-go/ui';
 import { auth } from '../lib/firebase';
 
 // Base default font so every Text/TextInput inherits Plus Jakarta, not the
@@ -50,25 +50,27 @@ export default function RootLayout() {
 
   return (
     <SafeAreaProvider>
-      <StatusBar style="dark" />
-      <Stack
-        screenOptions={{
-          headerStyle: { backgroundColor: colors.bg },
-          headerTintColor: colors.text,
-          headerTitleStyle: { fontFamily: font.bold, color: colors.text },
-          headerShadowVisible: false,
-          contentStyle: { backgroundColor: colors.bg },
-        }}
-      >
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="login" options={{ headerShown: false }} />
-        <Stack.Screen name="addresses" options={{ title: 'Saved addresses' }} />
-        <Stack.Screen name="notifications" options={{ title: 'Notifications' }} />
-        <Stack.Screen name="book" options={{ title: 'Book pickup' }} />
-        <Stack.Screen name="checkout" options={{ title: 'Review & confirm' }} />
-        <Stack.Screen name="change-laundry" options={{ title: 'Choose a laundry' }} />
-        <Stack.Screen name="orders/[id]" options={{ title: 'Order' }} />
-      </Stack>
+      <ToastProvider>
+        <StatusBar style="dark" />
+        <Stack
+          screenOptions={{
+            headerStyle: { backgroundColor: colors.bg },
+            headerTintColor: colors.text,
+            headerTitleStyle: { fontFamily: font.bold, color: colors.text },
+            headerShadowVisible: false,
+            contentStyle: { backgroundColor: colors.bg },
+          }}
+        >
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen name="login" options={{ headerShown: false }} />
+          <Stack.Screen name="addresses" options={{ title: 'Saved addresses' }} />
+          <Stack.Screen name="notifications" options={{ title: 'Notifications' }} />
+          <Stack.Screen name="book" options={{ title: 'Book pickup' }} />
+          <Stack.Screen name="checkout" options={{ title: 'Review & confirm' }} />
+          <Stack.Screen name="change-laundry" options={{ title: 'Choose a laundry' }} />
+          <Stack.Screen name="orders/[id]" options={{ title: 'Order' }} />
+        </Stack>
+      </ToastProvider>
     </SafeAreaProvider>
   );
 }

apps/customer-mobile/src/app/addresses.tsx

@@ -12,10 +12,12 @@ import {
   radius,
   space,
   type,
+  useToast,
 } from '@wash-and-go/ui';
 import { api } from '../lib/api';
 
 export default function AddressesScreen() {
+  const toast = useToast();
   const [list, setList] = useState<AddressView[] | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [label, setLabel] = useState('');
@@ -39,7 +41,6 @@ export default function AddressesScreen() {
     const l = line.trim();
     if (l.length < 3 || busy) return;
     setBusy(true);
-    setError(null);
     try {
       await api.createAddress({
         line: l,
@@ -49,35 +50,38 @@ export default function AddressesScreen() {
       setLabel('');
       setLine('');
       await load();
+      toast.success('Address saved');
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not add that address.');
+      toast.error(e instanceof Error ? e.message : 'Could not add that address.');
     } finally {
       setBusy(false);
     }
-  }, [line, label, busy, list, load]);
+  }, [line, label, busy, list, load, toast]);
 
   const setDefault = useCallback(
     async (id: string) => {
       try {
         await api.updateAddress(id, { isDefault: true });
         await load();
+        toast.success('Default address updated');
       } catch (e) {
-        setError(e instanceof Error ? e.message : 'Could not update that address.');
+        toast.error(e instanceof Error ? e.message : 'Could not update that address.');
       }
     },
-    [load],
+    [load, toast],
   );
 
   const remove = useCallback(
     async (id: string) => {
       try {
         await api.deleteAddress(id);
         await load();
+        toast.success('Address removed');
       } catch (e) {
-        setError(e instanceof Error ? e.message : 'Could not remove that address.');
+        toast.error(e instanceof Error ? e.message : 'Could not remove that address.');
       }
     },
-    [load],
+    [load, toast],
   );
 
   if (!list && !error) {
@@ -164,7 +168,6 @@ export default function AddressesScreen() {
         multiline
         testID="addr-line-input"
       />
-      {error ? <Text style={styles.error}>{error}</Text> : null}
       <PrimaryButton
         label="Add address"
         onPress={add}
@@ -197,7 +200,6 @@ const styles = StyleSheet.create({
     color: colors.text,
     fontSize: 15,
   },
-  error: { color: colors.danger, ...type.body },
   defaultBadge: {
     backgroundColor: colors.terra,
     paddingHorizontal: 8,

apps/customer-mobile/src/app/book.tsx

@@ -12,6 +12,7 @@ import {
   radius,
   space,
   type,
+  useToast,
 } from '@wash-and-go/ui';
 import { api } from '../lib/api';
 import { LOAD_BUCKETS, LoadBucket } from '../lib/format';
@@ -48,9 +49,9 @@ export default function BookScreen() {
   const [address, setAddress] = useState('');
   const [gpsLoading, setGpsLoading] = useState(false);
   const [geoLoading, setGeoLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const [saved, setSaved] = useState<AddressView[]>([]);
   const [saveNew, setSaveNew] = useState(false);
+  const toast = useToast();
 
   // Load the address book to prefill pickup (best-effort — booking works without).
   useEffect(() => {
@@ -73,29 +74,28 @@ export default function BookScreen() {
     const q = address.trim();
     if (q.length < 2) return;
     setGeoLoading(true);
-    setError(null);
     try {
       const hit = await api.geocode(q);
       if (hit) {
         setCoords(hit.point);
         setAddress(hit.label);
+        toast.success('Address pinned.');
       } else {
-        setError('No match for that address. Try GPS or add more detail.');
+        toast.error('No match for that address. Try GPS or add more detail.');
       }
     } catch {
-      setError('Could not search that address. Try again or use GPS.');
+      toast.error('Could not search that address. Try again or use GPS.');
     } finally {
       setGeoLoading(false);
     }
   }, [address]);
 
   const useMyLocation = useCallback(async () => {
     setGpsLoading(true);
-    setError(null);
     try {
       const { status } = await Location.requestForegroundPermissionsAsync();
       if (status !== 'granted') {
-        setError('Location permission is needed to set your pickup point.');
+        toast.error('Location permission is needed to set your pickup point.');
         return;
       }
       const pos = await Location.getCurrentPositionAsync({
@@ -116,7 +116,7 @@ export default function BookScreen() {
         // best-effort
       }
     } catch {
-      setError('Could not read your location. Try again or type your address.');
+      toast.error('Could not read your location. Try again or type your address.');
     } finally {
       setGpsLoading(false);
     }
@@ -321,8 +321,6 @@ export default function BookScreen() {
         <Text style={[type.body, { color: colors.text }]}>Save this pickup for next time</Text>
       </Pressable>
 
-      {error ? <Text style={styles.error}>{error}</Text> : null}
-
       <PrimaryButton label="Continue" onPress={cont} disabled={!canContinue} />
     </Screen>
   );
@@ -358,7 +356,6 @@ const styles = StyleSheet.create({
     color: colors.text,
     fontSize: 15,
   },
-  error: { color: colors.danger, ...type.body },
   defaultBadge: {
     backgroundColor: colors.terra,
     paddingHorizontal: 8,

apps/customer-mobile/src/app/checkout.tsx

@@ -15,6 +15,7 @@ import {
   peso,
   space,
   type,
+  useToast,
 } from '@wash-and-go/ui';
 import { api } from '../lib/api';
 
@@ -52,6 +53,7 @@ export default function CheckoutScreen() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
+  const toast = useToast();
   // One key per checkout mount — a retried confirm dedupes to a single order.
   const idempotencyKey = useMemo(() => newIdempotencyKey(), []);
 
@@ -81,7 +83,6 @@ export default function CheckoutScreen() {
   const confirm = useCallback(async () => {
     if (!quote) return;
     setSubmitting(true);
-    setError(null);
     try {
       const order = await api.createOrder(
         {
@@ -97,7 +98,7 @@ export default function CheckoutScreen() {
       );
       router.replace(`/orders/${order.id}`);
     } catch (e) {
-      setError(e instanceof Error ? e.message : 'Could not place your order.');
+      toast.error(e instanceof Error ? e.message : 'Could not place your order.');
     } finally {
       setSubmitting(false);
     }
@@ -186,7 +187,6 @@ export default function CheckoutScreen() {
         <Text style={styles.est}>Delivery adjusts by distance · final weight at the shop.</Text>
       </Card>
 
-      {error ? <Text style={styles.errText}>{error}</Text> : null}
       <PrimaryButton
         label={submitting ? 'Booking…' : 'Confirm booking'}
         onPress={confirm}
@@ -243,5 +243,4 @@ const styles = StyleSheet.create({
   change: { color: colors.terraDark, fontWeight: '700', fontSize: 13 },
   divider: { height: StyleSheet.hairlineWidth, backgroundColor: colors.border, marginVertical: space.xs },
   est: { color: colors.terraDark, fontSize: 12, fontWeight: '600' },
-  errText: { color: colors.danger, ...type.body },
 });

apps/customer-mobile/src/app/login.tsx

@@ -13,7 +13,7 @@ import {
   colors,
   radius,
   space,
-  type,
+  useToast,
 } from '@wash-and-go/ui';
 import { auth } from '../lib/firebase';
 import { api } from '../lib/api';
@@ -42,14 +42,13 @@ export default function LoginScreen() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const toast = useToast();
 
   const valid = email.includes('@') && password.length >= 6;
 
   async function submit() {
     if (!valid) return;
     setBusy(true);
-    setError(null);
     try {
       if (mode === 'signup') {
         await createUserWithEmailAndPassword(auth, email.trim(), password);
@@ -60,7 +59,7 @@ export default function LoginScreen() {
       await api.postSession();
       router.replace('/');
     } catch (e) {
-      setError(friendly((e as { code?: string })?.code));
+      toast.error(friendly((e as { code?: string })?.code));
     } finally {
       setBusy(false);
     }
@@ -94,8 +93,6 @@ export default function LoginScreen() {
           style={styles.input}
         />
 
-        {error ? <Text style={styles.error}>{error}</Text> : null}
-
         <PrimaryButton
           label={mode === 'signin' ? 'Sign in' : 'Create account'}
           onPress={submit}
@@ -106,7 +103,6 @@ export default function LoginScreen() {
         <Pressable
           onPress={() => {
             setMode(mode === 'signin' ? 'signup' : 'signin');
-            setError(null);
           }}
           style={{ padding: space.md }}
         >
@@ -133,5 +129,4 @@ const styles = StyleSheet.create({
     color: colors.text,
     fontSize: 15,
   },
-  error: { color: colors.danger, ...type.body },
 });

apps/customer-mobile/src/app/notifications.tsx

@@ -11,10 +11,12 @@ import {
   colors,
   space,
   type,
+  useToast,
 } from '@wash-and-go/ui';
 import { api } from '../lib/api';
 
 export default function NotificationsScreen() {
+  const toast = useToast();
   const [items, setItems] = useState<NotificationView[] | null>(null);
   const [error, setError] = useState<string | null>(null);
 
@@ -51,10 +53,11 @@ export default function NotificationsScreen() {
     try {
       await api.markAllNotificationsRead();
       await load();
-    } catch {
-      // best-effort
+      toast.success('All caught up');
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : 'Could not mark all as read.');
     }
-  }, [load]);
+  }, [load, toast]);
 
   if (!items && !error) {
     return (