Add local iOS release pipeline, fix shortcuts, and improve invoice UX.

Enable App Store builds without EAS, iOS 18 App Intents plugins, and signing
fixes for distribution export. Add mobile invoice PDF preview, compact line
items, and more reliable shortcut deep-link handling.

Co-authored-by: Cursor <cursoragent@cursor.com>

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

@@ -1,7 +1,14 @@
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useMemo, useState } from "react";
 import { Alert, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
 
 import { AppBackground } from "@/components/AppBackground";
+import {
+  InvoiceEditorSectionTabs,
+  type InvoiceEditorSection,
+} from "@/components/invoices/InvoiceEditorSectionTabs";
+import { InvoicePdfPreview } from "@/components/invoices/InvoicePdfPreview";
+import { InvoiceTotals } from "@/components/invoices/InvoiceTotals";
 import { LoadingScreen } from "@/components/LoadingScreen";
 import { StatusBadge } from "@/components/StatusBadge";
 import { Button } from "@/components/ui/Button";
@@ -12,6 +19,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 { buildPreviewPdfInputFromInvoice } from "@/lib/invoice-pdf-input";
 import { useTabBarScrollPadding } from "@/lib/tab-bar-insets";
 import { api } from "@/lib/trpc";
 
@@ -21,6 +29,7 @@ export default function InvoiceDetailScreen() {
   const { id } = useLocalSearchParams<{ id: string }>();
   const utils = api.useUtils();
   const scrollPadding = useTabBarScrollPadding();
+  const [section, setSection] = useState<InvoiceEditorSection>("edit");
 
   const invoiceQuery = api.invoices.getById.useQuery(
     { id: id ?? "" },
@@ -81,6 +90,10 @@ export default function InvoiceDetailScreen() {
   const subtotal = invoice.items.reduce((sum, item) => sum + item.amount, 0);
   const taxAmount = subtotal * (invoice.taxRate / 100);
   const clientEmail = invoice.client?.email?.trim() ?? "";
+  const previewInput = useMemo(
+    () => buildPreviewPdfInputFromInvoice(invoice),
+    [invoice],
+  );
 
   function promptSendInvoice() {
     if (!clientEmail) {
@@ -188,6 +201,19 @@ export default function InvoiceDetailScreen() {
           </Text>
         </Card>
 
+        <InvoiceEditorSectionTabs
+          value={section}
+          onChange={setSection}
+          editLabel="Details"
+          previewLabel="PDF"
+        />
+
+        {section === "preview" ? (
+          <Card title="PDF preview">
+            <InvoicePdfPreview input={previewInput} />
+          </Card>
+        ) : (
+          <>
         <Card title="Details">
           <DetailRow label="Issued" value={formatDate(invoice.issueDate)} />
           <DetailRow label="Due" value={formatDate(invoice.dueDate)} />
@@ -222,20 +248,14 @@ export default function InvoiceDetailScreen() {
               </Text>
             </View>
           ))}
-          <View style={styles.totals}>
-            <TotalRow label="Subtotal" value={formatCurrency(subtotal, invoice.currency)} />
-            {invoice.taxRate > 0 ? (
-              <TotalRow
-                label={`Tax (${invoice.taxRate}%)`}
-                value={formatCurrency(taxAmount, invoice.currency)}
-              />
-            ) : null}
-            <TotalRow
-              label="Total"
-              value={formatCurrency(invoice.totalAmount, invoice.currency)}
-              bold
-            />
-          </View>
+          <InvoiceTotals
+            subtotal={formatCurrency(subtotal, invoice.currency)}
+            taxLabel={invoice.taxRate > 0 ? `Tax (${invoice.taxRate}%)` : undefined}
+            taxAmount={
+              invoice.taxRate > 0 ? formatCurrency(taxAmount, invoice.currency) : undefined
+            }
+            total={formatCurrency(invoice.totalAmount, invoice.currency)}
+          />
         </Card>
 
         {invoice.notes ? (
@@ -281,6 +301,8 @@ export default function InvoiceDetailScreen() {
             }
           />
         </View>
+          </>
+        )}
       </ScrollView>
     </AppBackground>
   );
@@ -296,41 +318,6 @@ function DetailRow({ label, value }: { label: string; value: string }) {
   );
 }
 
-function TotalRow({
-  label,
-  value,
-  bold,
-}: {
-  label: string;
-  value: string;
-  bold?: boolean;
-}) {
-  const { colors } = useAppTheme();
-  return (
-    <View style={detailStyles.totalRow}>
-      <Text
-        style={[
-          detailStyles.totalLabel,
-          { color: colors.mutedForeground },
-          bold && detailStyles.totalBold,
-          bold && { color: colors.foreground },
-        ]}
-      >
-        {label}
-      </Text>
-      <Text
-        style={[
-          detailStyles.totalValue,
-          { color: colors.foreground },
-          bold && detailStyles.totalBold,
-        ]}
-      >
-        {value}
-      </Text>
-    </View>
-  );
-}
-
 const detailStyles = StyleSheet.create({
   row: {
     flexDirection: "row",
@@ -346,22 +333,6 @@ const detailStyles = StyleSheet.create({
     fontSize: 14,
     fontFamily: fonts.bodyMedium,
   },
-  totalRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-  totalLabel: {
-    fontFamily: fonts.body,
-    fontSize: 14,
-  },
-  totalValue: {
-    fontFamily: fonts.bodyMedium,
-    fontSize: 14,
-  },
-  totalBold: {
-    fontFamily: fonts.bodySemiBold,
-    fontSize: 14,
-  },
 });
 
 const createInvoiceDetailStyles = (colors: ThemeColors, _isDark: boolean) =>
@@ -427,13 +398,6 @@ const createInvoiceDetailStyles = (colors: ThemeColors, _isDark: boolean) =>
     color: colors.foreground,
     fontSize: 14,
   },
-  totals: {
-    marginTop: spacing.sm,
-    paddingTop: spacing.sm,
-    borderTopWidth: 1,
-    borderTopColor: colors.border,
-    gap: 4,
-  },
   notes: {
     fontFamily: fonts.body,
     color: colors.foreground,