Stabilize mobile auth session handling

app/(app)/invoices/index.tsx

@@ -16,6 +16,7 @@ import { FloatingActionButton } from "@/components/FloatingActionButton";
 import { GlassSurface } from "@/components/GlassSurface";
 import { LoadingScreen } from "@/components/LoadingScreen";
 import { PageHeader } from "@/components/PageHeader";
+import { SwipeableRow } from "@/components/SwipeableRow";
 import { StatusBadge } from "@/components/StatusBadge";
 import { TabPage } from "@/components/TabPage";
 import { TabScrollView } from "@/components/TabScrollView";
@@ -25,6 +26,7 @@ import { formatCurrency, formatDate } from "@/lib/format";
 import type { ThemeColors } from "@/lib/theme-palette";
 import { useThemedStyles } from "@/lib/use-themed-styles";
 import { getInvoiceStatus, type InvoiceStatus } from "@/lib/invoice-status";
+import { formatTrpcErrorMessage } from "@/lib/trpc-errors";
 import { api } from "@/lib/trpc";
 
 const filters: Array<{ label: string; value?: InvoiceStatus | "all" }> = [
@@ -49,6 +51,14 @@ export default function InvoicesScreen() {
     onError: (err) => Alert.alert("Update failed", err.message),
   });
 
+  const deleteInvoice = api.invoices.delete.useMutation({
+    onSuccess: () => {
+      utils.invoices.getAll.invalidate();
+      utils.dashboard.getStats.invalidate();
+    },
+    onError: (err) => Alert.alert("Delete failed", err.message),
+  });
+
   if (invoicesQuery.isLoading) {
     return <LoadingScreen message="Loading invoices…" />;
   }
@@ -59,7 +69,7 @@ export default function InvoicesScreen() {
         <TabPage>
           <View style={styles.errorBox}>
             <Text style={styles.errorTitle}>Could not load invoices</Text>
-            <Text style={styles.errorText}>{invoicesQuery.error.message}</Text>
+            <Text style={styles.errorText}>{formatTrpcErrorMessage(invoicesQuery.error)}</Text>
           </View>
         </TabPage>
       </AppBackground>
@@ -93,6 +103,17 @@ export default function InvoicesScreen() {
     ]);
   }
 
+  function confirmDelete(invoiceId: string, label: string) {
+    Alert.alert("Delete invoice?", `Remove ${label}? This cannot be undone.`, [
+      { text: "Cancel", style: "cancel" },
+      {
+        text: "Delete",
+        style: "destructive",
+        onPress: () => deleteInvoice.mutate({ id: invoiceId }),
+      },
+    ]);
+  }
+
   return (
     <AppBackground>
       <TabPage>
@@ -134,35 +155,82 @@ export default function InvoicesScreen() {
           ) : (
             invoices.map((invoice) => {
               const status = getInvoiceStatus(invoice);
+              const label = `${invoice.invoicePrefix}${invoice.invoiceNumber}`;
+              const actions = [
+                {
+                  key: "open",
+                  label: "Open",
+                  icon: "open-outline" as const,
+                  color: "#fff",
+                  backgroundColor: colors.primary,
+                  onPress: () => router.push(`/(app)/invoices/${invoice.id}`),
+                },
+                ...(status === "draft"
+                  ? [
+                      {
+                        key: "edit",
+                        label: "Edit",
+                        icon: "create-outline" as const,
+                        color: "#fff",
+                        backgroundColor: colors.mutedForeground,
+                        onPress: () => router.push(`/(app)/invoices/edit/${invoice.id}`),
+                      },
+                      {
+                        key: "send",
+                        label: "Send",
+                        icon: "send-outline" as const,
+                        color: "#fff",
+                        backgroundColor: colors.success,
+                        onPress: () => router.push(`/(app)/invoices/send/${invoice.id}`),
+                      },
+                      {
+                        key: "delete",
+                        label: "Delete",
+                        icon: "trash-outline" as const,
+                        color: "#fff",
+                        backgroundColor: colors.destructive,
+                        onPress: () => confirmDelete(invoice.id, label),
+                      },
+                    ]
+                  : [
+                      {
+                        key: "status",
+                        label: "Status",
+                        icon: "flag-outline" as const,
+                        color: "#fff",
+                        backgroundColor: colors.warning,
+                        onPress: () => promptStatusChange(invoice.id, status),
+                      },
+                    ]),
+              ];
+
               return (
-                <Pressable
-                  key={invoice.id}
-                  onPress={() => router.push(`/(app)/invoices/${invoice.id}`)}
-                  onLongPress={() => promptStatusChange(invoice.id, status)}
-                >
-                  <GlassSurface style={styles.card}>
-                    <View style={styles.cardInner}>
-                      <View style={styles.cardTop}>
-                        <View style={styles.cardMeta}>
-                          <Text style={styles.invoiceNumber}>
-                            {invoice.invoicePrefix}
-                            {invoice.invoiceNumber}
-                          </Text>
-                          <Text style={styles.clientName}>
-                            {invoice.client?.name ?? "Client"}
+                <SwipeableRow key={invoice.id} actions={actions} backgroundColor={colors.cardGlass}>
+                  <Pressable
+                    onPress={() => router.push(`/(app)/invoices/${invoice.id}`)}
+                    onLongPress={() => promptStatusChange(invoice.id, status)}
+                  >
+                    <GlassSurface style={styles.card}>
+                      <View style={styles.cardInner}>
+                        <View style={styles.cardTop}>
+                          <View style={styles.cardMeta}>
+                            <Text style={styles.invoiceNumber}>{label}</Text>
+                            <Text style={styles.clientName}>
+                              {invoice.client?.name ?? "Client"}
+                            </Text>
+                          </View>
+                          <Text style={styles.amount}>
+                            {formatCurrency(invoice.totalAmount, invoice.currency)}
                           </Text>
                         </View>
-                        <Text style={styles.amount}>
-                          {formatCurrency(invoice.totalAmount, invoice.currency)}
-                        </Text>
+                        <View style={styles.cardBottom}>
+                          <Text style={styles.date}>Due {formatDate(invoice.dueDate)}</Text>
+                          <StatusBadge status={status} />
+                        </View>
                       </View>
-                      <View style={styles.cardBottom}>
-                        <Text style={styles.date}>Due {formatDate(invoice.dueDate)}</Text>
-                        <StatusBadge status={status} />
-                      </View>
-                    </View>
-                  </GlassSurface>
-                </Pressable>
+                    </GlassSurface>
+                  </Pressable>
+                </SwipeableRow>
               );
             })
           )}