sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-27 15:17:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reorder ctrl key dialog buttons for better UX

Browse source 
- Move CANCEL button to the left (renamed from CLOSE)
- Keep CLEAR button in the middle when sequence exists
- Move SEND button to the right when sequence exists
- Follows standard UI convention with cancel actions on left, primary actions on right

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mario Zechner 2025-06-19 22:55:37 +02:00
parent 3c081f90f4
commit 6391605267
1 changed files with 34 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
web/src/client/components/session-view.ts
View file

@ -1324,15 +1324,13 @@ export class SessionView extends LitElement {
<!-- Action buttons --> <!-- Action buttons -->
<div class="flex gap-2 justify-center"> <div class="flex gap-2 justify-center">
${this.ctrlSequence.length > 0
? html`
<button <button
class="font-mono px-3 py-2 text-sm transition-all cursor-pointer" class="font-mono px-4 py-2 text-sm transition-all cursor-pointer"
style="background: black; color: #d4d4d4; border: 1px solid #569cd6; border-radius: 4px;" style="background: black; color: #d4d4d4; border: 1px solid #888; border-radius: 4px;"
@click=${this.handleSendCtrlSequence} @click=${() => (this.showCtrlAlpha = false)}
@mouseover=${(e: Event) => { @mouseover=${(e: Event) => {
const btn = e.target as HTMLElement; const btn = e.target as HTMLElement;
btn.style.background = '#569cd6'; btn.style.background = '#888';
btn.style.color = 'black'; btn.style.color = 'black';
}} }}
@mouseout=${(e: Event) => { @mouseout=${(e: Event) => {
@ -1341,8 +1339,10 @@ export class SessionView extends LitElement {
btn.style.color = '#d4d4d4'; btn.style.color = '#d4d4d4';
}} }}
> >
SEND CANCEL
</button> </button>
${this.ctrlSequence.length > 0
? html`
<button <button
class="font-mono px-3 py-2 text-sm transition-all cursor-pointer" class="font-mono px-3 py-2 text-sm transition-all cursor-pointer"
style="background: black; color: #d4d4d4; border: 1px solid #888; border-radius: 4px;" style="background: black; color: #d4d4d4; border: 1px solid #888; border-radius: 4px;"
@ -1360,15 +1360,13 @@ export class SessionView extends LitElement {
> >
CLEAR CLEAR
</button> </button>
`
: ''}
<button <button
class="font-mono px-4 py-2 text-sm transition-all cursor-pointer" class="font-mono px-3 py-2 text-sm transition-all cursor-pointer"
style="background: black; color: #d4d4d4; border: 1px solid #888; border-radius: 4px;" style="background: black; color: #d4d4d4; border: 1px solid #569cd6; border-radius: 4px;"
@click=${() => (this.showCtrlAlpha = false)} @click=${this.handleSendCtrlSequence}
@mouseover=${(e: Event) => { @mouseover=${(e: Event) => {
const btn = e.target as HTMLElement; const btn = e.target as HTMLElement;
btn.style.background = '#888'; btn.style.background = '#569cd6';
btn.style.color = 'black'; btn.style.color = 'black';
}} }}
@mouseout=${(e: Event) => { @mouseout=${(e: Event) => {
@ -1377,8 +1375,10 @@ export class SessionView extends LitElement {
btn.style.color = '#d4d4d4'; btn.style.color = '#d4d4d4';
}} }}
> >
CLOSE SEND
</button> </button>
`
: ''}
</div> </div>
</div> </div>
</div> </div>