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

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

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