From 3d9d85ba7fd085ae69baac7107b03c686a1175b9 Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Sun, 1 Mar 2026 12:18:46 -0500
Subject: [PATCH] feat(machine): redesign cash-out with split-screen layout

Split-screen for displayingInvoice (info left, QR right), full-width
for selectingAmount. Add StepIndicator with warning flow accent header.
Replace Skeleton with BounceDots, remove ScrollArea and Card wrappers,
wrap states in Transition for fade animations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/machine/src/views/CashOutView.vue | 471 +++++++++++++------------
 1 file changed, 248 insertions(+), 223 deletions(-)

diff --git a/apps/machine/src/views/CashOutView.vue b/apps/machine/src/views/CashOutView.vue
index 8c9819e..5a4e426 100644
--- a/apps/machine/src/views/CashOutView.vue
+++ b/apps/machine/src/views/CashOutView.vue
@@ -3,17 +3,31 @@ import { watch, computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAtmStore } from '@/stores/atm'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Skeleton } from '@/components/ui/skeleton'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import QRCode from '@/components/QRCode.vue'
+import BounceDots from '@/components/BounceDots.vue'
+import StepIndicator from '@/components/StepIndicator.vue'
 
 const router = useRouter()
 const atmStore = useAtmStore()
 const isElectron = typeof window !== 'undefined' && window.electronAPI !== undefined
 
+const cashOutSteps = ['Select', 'Pay', 'Collect']
+
+const currentStepIndex = computed(() => {
+  switch (nestedState.value) {
+    case 'fetchingRate':
+    case 'selectingAmount':
+      return 0
+    case 'generatingInvoice':
+    case 'displayingInvoice':
+      return 1
+    default:
+      return 2
+  }
+})
+
 // Copy invoice functionality
 const copyButtonText = ref('Copy Invoice')
 
@@ -99,172 +113,168 @@ function formatFiat(cents: number): string {
 
 <template>
   <div class="flex min-h-0 flex-1 flex-col">
-    <!-- Header -->
-    <header class="flex items-center bg-foreground/10 px-4 pb-3 pt-12 sm:px-8 sm:py-4">
-      <Button variant="ghost" class="text-muted-foreground" @click="cancel">← Cancel</Button>
-      <h2 class="flex-1 text-center text-lg font-semibold sm:text-xl">Sell Bitcoin</h2>
+    <!-- Header with warning flow accent -->
+    <header
+      class="flex items-center px-8 py-4"
+      style="background: color-mix(in srgb, var(--warning) 10%, var(--background))"
+    >
+      <Button variant="ghost" size="kiosk" class="text-muted-foreground" @click="cancel"
+        >← Cancel</Button
+      >
+      <div class="flex flex-1 flex-col items-center gap-2">
+        <h2 class="text-[2.5rem] font-semibold">Sell Bitcoin</h2>
+        <StepIndicator :steps="cashOutSteps" :current-step="currentStepIndex" />
+      </div>
       <div class="w-20"></div>
     </header>
 
-    <!-- Content -->
-    <ScrollArea class="min-h-0 flex-1">
-      <main class="flex min-h-0 flex-1 items-start justify-center p-4 sm:items-center sm:p-8">
-        <!-- Fetching Rate -->
-        <Card v-if="nestedState === 'fetchingRate'" class="w-full max-w-80 border-0 bg-card">
-          <CardContent class="flex flex-col items-center gap-4 p-8">
-            <Skeleton class="h-10 w-10 rounded-full" />
-            <p class="text-muted-foreground">Fetching exchange rate...</p>
-          </CardContent>
-        </Card>
+    <!-- Content area -->
+    <main class="flex min-h-0 flex-1">
+      <Transition name="state-fade" mode="out-in">
+        <!-- Fetching Rate (centered) -->
+        <div
+          v-if="nestedState === 'fetchingRate'"
+          key="fetchingRate"
+          class="flex flex-1 flex-col items-center justify-center gap-6"
+        >
+          <BounceDots class="scale-150" />
+          <p class="text-2xl text-muted-foreground">Fetching exchange rate...</p>
+        </div>
 
-        <!-- Selecting Amount - Main cash-out screen -->
-        <Card
+        <!-- Selecting Amount (full-width) -->
+        <div
           v-else-if="nestedState === 'selectingAmount'"
-          class="w-full max-w-[520px] border-0 bg-card"
+          key="selectingAmount"
+          class="flex flex-1 flex-col justify-center px-[8vw] py-6 gap-6"
         >
-          <CardHeader class="text-center">
-            <CardTitle>Select Cash Amount</CardTitle>
-            <CardDescription v-if="context">
-              Rate:
-              <Badge variant="secondary"
-                >{{ formatSats(context.exchangeRate) }} sats/{{ atmStore.fiatSymbol }}</Badge
+          <!-- Denomination grid -->
+          <div class="grid grid-cols-2 gap-6">
+            <div
+              v-for="denom in availableDenominations"
+              :key="denom"
+              class="flex items-center justify-between rounded-lg bg-card px-6 py-5"
+            >
+              <span class="text-[2.5rem] font-bold text-success"
+                >{{ atmStore.fiatSymbol }}{{ denom }}</span
               >
-            </CardDescription>
-          </CardHeader>
-          <CardContent class="space-y-6">
-            <!-- Denomination buttons -->
-            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
-              <div
-                v-for="denom in availableDenominations"
-                :key="denom"
-                class="flex items-center justify-between rounded-lg bg-card px-4 py-3 sm:p-4"
-              >
-                <span class="text-xl font-bold text-success sm:text-2xl"
-                  >{{ atmStore.fiatSymbol }}{{ denom }}</span
+              <div class="flex items-center gap-3">
+                <Button
+                  variant="outline"
+                  size="kiosk-icon"
+                  :disabled="!canRemove(denom)"
+                  @click="atmStore.removeDenomination(denom)"
                 >
-                <div class="flex items-center gap-3">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    class="h-9 w-9"
-                    :disabled="!canRemove(denom)"
-                    @click="atmStore.removeDenomination(denom)"
-                  >
-                    -
-                  </Button>
-                  <span class="w-8 text-center text-lg font-medium">{{
-                    selectionCounts[denom] || 0
-                  }}</span>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    class="h-9 w-9"
-                    :disabled="!canAdd(denom)"
-                    @click="atmStore.addDenomination(denom)"
-                  >
-                    +
-                  </Button>
-                </div>
+                  -
+                </Button>
+                <span class="w-16 text-center text-[2rem] font-medium">{{
+                  selectionCounts[denom] || 0
+                }}</span>
+                <Button
+                  variant="outline"
+                  size="kiosk-icon"
+                  :disabled="!canAdd(denom)"
+                  @click="atmStore.addDenomination(denom)"
+                >
+                  +
+                </Button>
               </div>
             </div>
+          </div>
 
-            <!-- Selected amount summary -->
-            <div class="rounded-lg bg-muted/50 p-6 text-center">
-              <p class="text-sm text-muted-foreground">You will receive</p>
-              <p class="text-4xl font-bold text-success">
-                {{ atmStore.fiatSymbol }}{{ context ? formatFiat(context.fiatAmount) : '0.00' }}
+          <!-- Amount summary -->
+          <div class="text-center py-4">
+            <p class="text-xl text-muted-foreground">You will receive</p>
+            <p class="text-[7vh] font-bold text-success leading-tight">
+              {{ atmStore.fiatSymbol }}{{ context ? formatFiat(context.fiatAmount) : '0.00' }}
+            </p>
+            <p class="mt-2 text-2xl text-muted-foreground">
+              You pay:
+              <Badge variant="secondary" class="ml-1 text-2xl">
+                {{ context ? formatSats(context.satsAmount) : 0 }} sats
+              </Badge>
+            </p>
+            <p v-if="context" class="mt-1 text-lg text-muted-foreground">
+              Rate:
+              <Badge variant="secondary" class="text-lg">
+                {{ formatSats(context.exchangeRate) }} sats/{{ atmStore.fiatSymbol }}
+              </Badge>
+            </p>
+          </div>
+
+          <!-- Action buttons -->
+          <div class="flex gap-4">
+            <Button
+              variant="outline"
+              size="kiosk-lg"
+              class="flex-1"
+              :disabled="!context?.cashOutSelection?.length"
+              @click="atmStore.clearSelection()"
+            >
+              Clear
+            </Button>
+            <Button
+              size="kiosk-lg"
+              class="flex-1 bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
+              :disabled="!context?.cashOutSelection?.length"
+              @click="atmStore.confirmAmount()"
+            >
+              Continue
+            </Button>
+          </div>
+
+          <!-- Instructions -->
+          <Alert class="border-bitcoin/50 bg-bitcoin/10">
+            <AlertDescription>
+              <p class="text-xl text-muted-foreground">
+                Select the cash amount you want to receive. You'll pay the equivalent in Bitcoin.
               </p>
-              <p class="mt-2 text-sm text-muted-foreground">
-                You pay:
-                <Badge variant="secondary" class="ml-1">
-                  {{ context ? formatSats(context.satsAmount) : 0 }} sats
-                </Badge>
-              </p>
-            </div>
+            </AlertDescription>
+          </Alert>
+        </div>
 
-            <!-- Action buttons -->
-            <div class="flex gap-4">
-              <Button
-                variant="outline"
-                class="flex-1"
-                :disabled="!context?.cashOutSelection?.length"
-                @click="atmStore.clearSelection()"
-              >
-                Clear
-              </Button>
-              <Button
-                class="flex-1 bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
-                :disabled="!context?.cashOutSelection?.length"
-                @click="atmStore.confirmAmount()"
-              >
-                Continue
-              </Button>
-            </div>
-
-            <!-- Instructions -->
-            <Alert class="border-bitcoin/50 bg-bitcoin/10">
-              <AlertDescription>
-                <p class="text-sm text-muted-foreground">
-                  Select the cash amount you want to receive. You'll pay the equivalent in Bitcoin.
-                </p>
-              </AlertDescription>
-            </Alert>
-          </CardContent>
-        </Card>
-
-        <!-- Generating Invoice -->
-        <Card
+        <!-- Generating Invoice (centered) -->
+        <div
           v-else-if="nestedState === 'generatingInvoice'"
-          class="w-full max-w-80 border-0 bg-card"
+          key="generatingInvoice"
+          class="flex flex-1 flex-col items-center justify-center gap-6"
         >
-          <CardContent class="flex flex-col items-center gap-4 p-8">
-            <Skeleton class="h-10 w-10 rounded-full" />
-            <p class="text-muted-foreground">Creating invoice...</p>
-          </CardContent>
-        </Card>
+          <BounceDots class="scale-150" />
+          <p class="text-2xl text-muted-foreground">Creating invoice...</p>
+        </div>
 
-        <!-- Displaying Invoice - Show QR for payment -->
-        <Card
+        <!-- Displaying Invoice (split-screen) -->
+        <div
           v-else-if="nestedState === 'displayingInvoice'"
-          class="w-full max-w-[480px] border-0 bg-card"
+          key="displayingInvoice"
+          class="flex flex-1"
         >
-          <CardHeader class="text-center">
-            <CardTitle>Scan to Pay</CardTitle>
-            <CardDescription v-if="context">
-              Pay <Badge variant="secondary">{{ formatSats(context.satsAmount) }} sats</Badge> to
-              receive
-              <Badge class="bg-success"
-                >{{ atmStore.fiatSymbol }}{{ formatFiat(context.fiatAmount) }}</Badge
-              >
-            </CardDescription>
-          </CardHeader>
-          <CardContent class="space-y-6">
-            <!-- Invoice QR Code -->
-            <div class="flex flex-col items-center">
-              <QRCode v-if="context?.invoice" :value="context.invoice" :size="220" />
-              <p class="mt-4 text-center text-sm text-muted-foreground">
-                Scan with any Lightning wallet
-              </p>
-            </div>
+          <!-- Left panel (52%) — info -->
+          <div class="flex w-[52%] flex-col items-center justify-center gap-5 px-[4vw]">
+            <p class="text-[2rem] font-semibold text-warning">Scan to Pay</p>
+            <p class="text-[7vh] font-bold text-bitcoin leading-tight">
+              {{ context ? formatSats(context.satsAmount) : 0 }} sats
+            </p>
+            <p class="text-2xl text-muted-foreground">
+              to receive
+              <Badge class="bg-success text-success-foreground text-2xl">
+                {{ atmStore.fiatSymbol }}{{ context ? formatFiat(context.fiatAmount) : '0.00' }}
+              </Badge>
+            </p>
 
-            <!-- Payment status -->
-            <div class="flex flex-col items-center gap-4 py-4">
-              <div class="h-12 w-12 animate-pulse rounded-full bg-bitcoin/20">
-                <div class="flex h-full items-center justify-center text-2xl">⏳</div>
-              </div>
-              <p class="text-center text-muted-foreground">Waiting for payment...</p>
+            <!-- Waiting indicator -->
+            <div class="flex items-center gap-3 pt-4">
+              <BounceDots />
+              <p class="text-xl text-muted-foreground">Waiting for payment...</p>
             </div>
 
             <!-- Invoice info with copy button (web-ui only) -->
-            <div v-if="context?.invoice && !isElectron" class="rounded-lg bg-card p-3">
-              <p class="mb-2 truncate text-center font-mono text-xs text-muted-foreground">
+            <div v-if="context?.invoice && !isElectron" class="pt-4 text-center">
+              <p class="font-mono-code mb-2 truncate text-xs text-muted-foreground max-w-[300px]">
                 {{ context.invoice.slice(0, 50) }}...
               </p>
-              <div class="flex justify-center">
-                <Button variant="outline" size="sm" @click="copyInvoice">
-                  {{ copyButtonText }}
-                </Button>
-              </div>
+              <Button variant="outline" size="sm" @click="copyInvoice">
+                {{ copyButtonText }}
+              </Button>
             </div>
 
             <!-- Dev controls -->
@@ -280,90 +290,105 @@ function formatFiat(cents: number): string {
                 </Button>
               </AlertDescription>
             </Alert>
-          </CardContent>
-        </Card>
+          </div>
 
-        <!-- Dispensing Cash -->
-        <Card v-else-if="nestedState === 'dispensingCash'" class="w-full max-w-80 border-0 bg-card">
-          <CardContent class="flex flex-col items-center gap-4 p-8">
-            <Skeleton class="h-10 w-10 rounded-full" />
-            <p class="text-muted-foreground">Dispensing cash...</p>
-            <p class="text-sm text-muted-foreground">Please wait</p>
-          </CardContent>
-        </Card>
-
-        <!-- Cash Ready -->
-        <Card
-          v-else-if="nestedState === 'waitingForCashTaken'"
-          class="w-full max-w-80 border-0 bg-success/20"
-        >
-          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-            <div class="text-6xl text-success">✅</div>
-            <CardTitle class="text-success">Cash Ready!</CardTitle>
-            <p v-if="context">
-              Please take your
-              <Badge class="bg-success text-lg"
-                >{{ atmStore.fiatSymbol }}{{ formatFiat(context.fiatAmount) }}</Badge
-              >
-            </p>
-            <Button
-              class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
-              size="lg"
-              @click="confirmCashTaken"
-            >
-              I've Taken the Cash
-            </Button>
-          </CardContent>
-        </Card>
-
-        <!-- Ask for Receipt -->
-        <Card v-else-if="nestedState === 'askForReceipt'" class="w-full max-w-80 border-0 bg-card">
-          <CardContent class="flex flex-col items-center gap-4 p-8">
-            <CardTitle>Would you like a receipt?</CardTitle>
-            <p class="text-sm text-muted-foreground">
-              Scan your npub to receive a Nostr DM receipt
-            </p>
-            <div class="flex h-32 w-32 items-center justify-center rounded-lg bg-qr">
-              <p class="text-qr-foreground">📱 Scan npub</p>
+          <!-- Right panel (48%) — QR code -->
+          <div class="flex w-[48%] flex-col items-center justify-center bg-foreground/5 p-6">
+            <div v-if="context?.invoice">
+              <QRCode :value="context.invoice" :size="380" />
             </div>
-            <Button variant="outline" @click="skipReceipt">No Thanks</Button>
-          </CardContent>
-        </Card>
+            <div v-else class="flex flex-col items-center gap-4">
+              <BounceDots class="scale-150" />
+              <p class="text-xl text-muted-foreground">Generating invoice...</p>
+            </div>
+          </div>
+        </div>
 
-        <!-- Complete -->
-        <Card v-else-if="nestedState === 'complete'" class="w-full max-w-80 border-0 bg-success/20">
-          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-            <div class="text-6xl">🎉</div>
-            <CardTitle class="text-success">Transaction Complete!</CardTitle>
-            <p class="text-muted-foreground">Thank you!</p>
-          </CardContent>
-        </Card>
-
-        <!-- Error -->
-        <Card
-          v-else-if="nestedState === 'error' || nestedState === 'dispenseError'"
-          class="w-full max-w-80 border-0 bg-destructive/20"
+        <!-- Dispensing Cash (centered) -->
+        <div
+          v-else-if="nestedState === 'dispensingCash'"
+          key="dispensingCash"
+          class="flex flex-1 flex-col items-center justify-center gap-6"
         >
-          <CardContent class="flex flex-col items-center gap-4 p-8 text-center">
-            <div class="text-6xl">⚠️</div>
-            <CardTitle class="text-destructive">Error</CardTitle>
-            <p class="text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
-            <Button
-              class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black"
-              @click="cancel"
+          <BounceDots class="scale-150" />
+          <p class="text-2xl text-muted-foreground">Dispensing cash...</p>
+          <p class="text-xl text-muted-foreground">Please wait</p>
+        </div>
+
+        <!-- Cash Ready (centered, success accent) -->
+        <div
+          v-else-if="nestedState === 'waitingForCashTaken'"
+          key="waitingForCashTaken"
+          class="flex flex-1 flex-col items-center justify-center gap-6 p-8"
+          style="background: color-mix(in srgb, var(--success) 10%, var(--background))"
+        >
+          <div class="text-[8vh] text-success">✅</div>
+          <h3 class="text-[3rem] font-bold text-success">Cash Ready!</h3>
+          <p v-if="context" class="text-2xl">
+            Please take your
+            <Badge class="bg-success text-success-foreground text-2xl"
+              >{{ atmStore.fiatSymbol }}{{ formatFiat(context.fiatAmount) }}</Badge
             >
-              Return to Start
-            </Button>
-          </CardContent>
-        </Card>
+          </p>
+          <Button
+            class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black hover:from-orange-600 hover:to-yellow-500"
+            size="kiosk-lg"
+            @click="confirmCashTaken"
+          >
+            I've Taken the Cash
+          </Button>
+        </div>
+
+        <!-- Ask for Receipt (centered) -->
+        <div
+          v-else-if="nestedState === 'askForReceipt'"
+          key="askForReceipt"
+          class="flex flex-1 flex-col items-center justify-center gap-6 p-8"
+        >
+          <h3 class="text-[3rem] font-bold">Would you like a receipt?</h3>
+          <p class="text-2xl text-muted-foreground">Scan your npub to receive a Nostr DM receipt</p>
+          <div class="flex h-32 w-32 items-center justify-center rounded-lg bg-qr">
+            <p class="text-qr-foreground">📱 Scan npub</p>
+          </div>
+          <Button variant="outline" size="kiosk" @click="skipReceipt">No Thanks</Button>
+        </div>
+
+        <!-- Complete (centered, success accent) -->
+        <div
+          v-else-if="nestedState === 'complete'"
+          key="complete"
+          class="flex flex-1 flex-col items-center justify-center gap-6 p-8"
+          style="background: color-mix(in srgb, var(--success) 10%, var(--background))"
+        >
+          <div class="text-[8vh]">🎉</div>
+          <h3 class="text-[3rem] font-bold text-success">Transaction Complete!</h3>
+          <p class="text-2xl text-muted-foreground">Thank you!</p>
+        </div>
+
+        <!-- Error (centered, destructive accent) -->
+        <div
+          v-else-if="nestedState === 'error' || nestedState === 'dispenseError'"
+          key="error"
+          class="flex flex-1 flex-col items-center justify-center gap-6 p-8"
+          style="background: color-mix(in srgb, var(--destructive) 8%, var(--background))"
+        >
+          <div class="text-[8vh]">⚠️</div>
+          <h3 class="text-[3rem] font-bold text-destructive">Error</h3>
+          <p class="text-2xl text-muted-foreground">{{ context?.error || 'An error occurred' }}</p>
+          <Button
+            class="bg-gradient-to-r from-orange-500 to-yellow-400 text-black"
+            size="kiosk"
+            @click="cancel"
+          >
+            Return to Start
+          </Button>
+        </div>
 
         <!-- Fallback -->
-        <Card v-else class="w-full max-w-80 border-0 bg-card">
-          <CardContent class="p-8 text-center">
-            <p class="text-muted-foreground">State: {{ nestedState }}</p>
-          </CardContent>
-        </Card>
-      </main>
-    </ScrollArea>
+        <div v-else key="fallback" class="flex flex-1 items-center justify-center">
+          <p class="text-xl text-muted-foreground">State: {{ nestedState }}</p>
+        </div>
+      </Transition>
+    </main>
   </div>
 </template>