aiolabs/bitspire
9
0
Fork 0
Code Issues 51 Pull requests 3 Projects Releases Packages Wiki Activity Actions

fix(machine): make debug bar in-flow and slim down bill acceptor

Browse source 
- Debug bar is now a normal flex child (shrink-0) instead of fixed
  overlay, so content naturally fits above it without padding hacks
- Replace bulky dashed bill acceptor box with a single text line

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan 2026-02-20 10:45:24 -05:00
commit 98e373c5ce
2 changed files with 9 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

7
apps/machine/src/App.vue
View file

@ -32,10 +32,7 @@ function toggleLiveServices() {
<template> <template>
<div <div
:class="[ class="flex h-screen w-screen flex-col overflow-hidden bg-background font-sans text-foreground"
'flex h-screen w-screen flex-col overflow-hidden bg-background font-sans text-foreground',
atmStore.debugMode ? 'pb-28 sm:pb-16' : '',
]"
> >
<router-view /> <router-view />
@ -76,7 +73,7 @@ function toggleLiveServices() {
<!-- Debug overlay (dev only) --> <!-- Debug overlay (dev only) -->
<div <div
v-if="atmStore.debugMode" v-if="atmStore.debugMode"
class="fixed inset-x-0 bottom-0 z-50 bg-popover font-mono text-xs text-popover-foreground" class="shrink-0 bg-popover font-mono text-xs text-popover-foreground"
> >
<div class="flex flex-wrap items-center gap-2 px-4 py-2 sm:gap-4"> <div class="flex flex-wrap items-center gap-2 px-4 py-2 sm:gap-4">
<Button <Button

20
apps/machine/src/views/CashInView.vue
View file

@ -241,19 +241,13 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
</span> </span>
</div> </div>
<!-- Bill Acceptor Visual --> <!-- Bill Acceptor Status -->
<div class="rounded-lg border-2 border-dashed border-white/20 p-6 text-center"> <p v-if="balanceLimitReached" class="text-center text-sm text-muted-foreground">
<div v-if="balanceLimitReached" class="flex flex-col items-center"> Maximum amount reached — press Done to continue
<BitcoinIcon :size="48" class="mb-2 grayscale opacity-40" /> </p>
<p class="text-sm text-muted-foreground"> <p v-else class="text-center text-sm text-muted-foreground">
Maximum amount reached — press Done to continue 💵 Insert bills into the acceptor
</p> </p>
</div>
<div v-else>
<div class="mb-2 text-4xl">💵 ➡️ 🏧</div>
<p class="text-sm text-muted-foreground">Insert bills into the acceptor</p>
</div>
</div>
<!-- Dev: Simulate bill insertion --> <!-- Dev: Simulate bill insertion -->
<Alert v-if="atmStore.debugMode" class="border-red-500/50 bg-red-500/10"> <Alert v-if="atmStore.debugMode" class="border-red-500/50 bg-red-500/10">