Stabilize mobile auth session handling

app/(app)/invoices/[id].tsx

@@ -8,6 +8,7 @@ import { InvoicePdfPreview } from "@/components/invoices/InvoicePdfPreview";
 import { InvoiceTotals } from "@/components/invoices/InvoiceTotals";
 import { InvoiceDetailActions } from "@/components/invoices/InvoiceDetailActions";
 import { LoadingScreen } from "@/components/LoadingScreen";
+import { SwipeableRow } from "@/components/SwipeableRow";
 import { StatusBadge } from "@/components/StatusBadge";
 import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
@@ -23,6 +24,7 @@ import { api } from "@/lib/trpc";
 
 export default function InvoiceDetailScreen() {
   const styles = useThemedStyles(createInvoiceDetailStyles);
+  const { colors } = useAppTheme();
   const { id } = useLocalSearchParams<{ id: string }>();
   const utils = api.useUtils();
   const scrollPadding = useTabBarScrollPadding();
@@ -50,10 +52,9 @@ export default function InvoiceDetailScreen() {
     onError: (err) => Alert.alert("Could not send reminder", err.message),
   });
 
-  const invoice = invoiceQuery.data;
   const previewInput = useMemo(
-    () => (invoice ? buildPreviewPdfInputFromInvoice(invoice) : null),
-    [invoice],
+    () => (invoiceQuery.data ? buildPreviewPdfInputFromInvoice(invoiceQuery.data) : null),
+    [invoiceQuery.data],
   );
 
   if (!id) {
@@ -78,6 +79,7 @@ export default function InvoiceDetailScreen() {
     );
   }
 
+  const invoice = invoiceQuery.data;
   const status = getInvoiceStatus(invoice);
   const subtotal = invoice.items.reduce((sum, item) => sum + item.amount, 0);
   const taxAmount = subtotal * (invoice.taxRate / 100);
@@ -209,20 +211,45 @@ export default function InvoiceDetailScreen() {
               add lines manually.
             </Text>
           ) : (
-            invoice.items.map((item) => (
-              <View key={item.id} style={styles.lineItem}>
-                <View style={styles.lineMeta}>
-                  <Text style={styles.lineDescription}>{item.description}</Text>
-                  <Text style={styles.lineSub}>
-                    {formatDate(item.date)} · {item.hours}h ×{" "}
-                    {formatCurrency(item.rate, invoice.currency)}
+            invoice.items.map((item) => {
+              const line = (
+                <View style={styles.lineItem}>
+                  <View style={styles.lineMeta}>
+                    <Text style={styles.lineDescription}>{item.description}</Text>
+                    <Text style={styles.lineSub}>
+                      {formatDate(item.date)} · {item.hours}h ×{" "}
+                      {formatCurrency(item.rate, invoice.currency)}
+                    </Text>
+                  </View>
+                  <Text style={styles.lineAmount}>
+                    {formatCurrency(item.amount, invoice.currency)}
                   </Text>
                 </View>
-                <Text style={styles.lineAmount}>
-                  {formatCurrency(item.amount, invoice.currency)}
-                </Text>
-              </View>
-            ))
+              );
+
+              if (invoice.status !== "draft") {
+                return <View key={item.id}>{line}</View>;
+              }
+
+              return (
+                <SwipeableRow
+                  key={item.id}
+                  backgroundColor={colors.card}
+                  actions={[
+                    {
+                      key: "edit",
+                      label: "Edit",
+                      icon: "create-outline",
+                      color: "#fff",
+                      backgroundColor: colors.primary,
+                      onPress: () => router.push(`/(app)/invoices/edit/${invoice.id}`),
+                    },
+                  ]}
+                >
+                  {line}
+                </SwipeableRow>
+              );
+            })
           )}
           <InvoiceTotals
             subtotal={formatCurrency(subtotal, invoice.currency)}