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>
<!-- Help button (top-left) -->
<Button
variant="outline"
size="icon"
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"
@click="$router.push('/support')"
>
?
</Button>
<!-- End-session button (top-right) — only while the access gate is engaged.
A tap-in loads the holder's Bolt Card for the whole session, so give
them an explicit way to re-lock the moment they're done instead of
relying on the idle timeout (which would leave the card usable by the
next person in the meantime). -->
<Button
v-if="atmStore.accessControl.enabled"
variant="outline"
size="kiosk"
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"
@click="atmStore.endSession()"
>
🔒 End Session
</Button>
<!-- Top-left utility buttons: Help, plus an End-session "✕" while the access
gate is engaged. Kept in the left corner (not top-right) so they never
collide with the centered balance/commission chips, which wrap into the
top-right on narrower screens (e.g. sintra). A tap-in loads the holder's
Bolt Card for the whole session, so the ✕ gives them an explicit way to
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
variant="outline"
size="icon"
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"
aria-label="Help"
@click="$router.push('/support')"
>
?
</Button>
<Button
v-if="atmStore.accessControl.enabled"
variant="outline"
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"
aria-label="End session"
@click="atmStore.endSession()"
>
✕
</Button>
</div>
<!-- Debug toggle (only visible when debug bar is hidden, never in production) -->
<Button