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

fix(access): move End Session to a red ✕ beside Help (top-left)

Browse source 
The top-right "End Session" button overlapped the centered balance /
commission chips, which wrap into the top-right corner on narrower
screens (sintra). Relocate it to a minimal red ✕ icon button grouped
next to the "?" help button in the top-left, clear of the chips. Same
endSession() behavior; shown only while the gate is active.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018ivBosaWmv8vwFE7ejrdHW
This commit is contained in:
Padreug 2026-08-16 08:34:00 +02:00
commit fbcaa3121f
1 changed files with 28 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

52
apps/machine/src/views/IdleView.vue
View file

@ -173,30 +173,34 @@ function handleCashOut() {
</div> </div>
</div> </div>
<!-- Help button (top-left) --> <!-- Top-left utility buttons: Help, plus an End-session "✕" while the access
<Button gate is engaged. Kept in the left corner (not top-right) so they never
variant="outline" collide with the centered balance/commission chips, which wrap into the
size="icon" top-right on narrower screens (e.g. sintra). A tap-in loads the holder's
class="absolute top-4 left-4 lg:top-8 lg:left-8 h-14 w-14 lg:h-20 lg:w-20 rounded-full border-2 border-muted-foreground/30 text-2xl lg:text-4xl text-muted-foreground" Bolt Card for the whole session, so the ✕ gives them an explicit way to
@click="$router.push('/support')" re-lock the moment they're done rather than waiting out the idle timeout
> (which would leave the card usable by the next person meanwhile). -->
? <div class="absolute top-4 left-4 lg:top-8 lg:left-8 flex items-center gap-2 lg:gap-3">
</Button> <Button
variant="outline"
<!-- End-session button (top-right) — only while the access gate is engaged. size="icon"
A tap-in loads the holder's Bolt Card for the whole session, so give class="h-14 w-14 lg:h-20 lg:w-20 rounded-full border-2 border-muted-foreground/30 text-2xl lg:text-4xl text-muted-foreground"
them an explicit way to re-lock the moment they're done instead of aria-label="Help"
relying on the idle timeout (which would leave the card usable by the @click="$router.push('/support')"
next person in the meantime). --> >
<Button ?
v-if="atmStore.accessControl.enabled" </Button>
variant="outline" <Button
size="kiosk" v-if="atmStore.accessControl.enabled"
class="absolute top-4 right-4 lg:top-8 lg:right-8 h-14 min-h-0 gap-2 rounded-full border-2 border-destructive/50 px-4 text-sm font-bold text-destructive lg:h-20 lg:px-8 lg:text-2xl" variant="outline"
@click="atmStore.endSession()" size="icon"
> class="h-14 w-14 lg:h-20 lg:w-20 rounded-full border-2 border-destructive/50 text-2xl lg:text-4xl font-bold text-destructive"
🔒 End Session aria-label="End session"
</Button> @click="atmStore.endSession()"
>
✕
</Button>
</div>
<!-- Debug toggle (only visible when debug bar is hidden, never in production) --> <!-- Debug toggle (only visible when debug bar is hidden, never in production) -->
<Button <Button