sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-08 11:45:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reorder mobile terminal buttons and add symbols

Browse source 
- Change button order to: ESC, ⇥, ABC123, CTRL, ⏎
- Use larger tab symbol (⇥) and enter symbol (⏎)
- Keep CTRL as text, ABC123 in middle position
- Improve visual consistency with symbol sizing

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mario Zechner 2025-06-18 10:44:03 +02:00
parent c16ccacf30
commit a2d15471d8
1 changed files with 38 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1020,40 +1020,6 @@ export class SessionView extends LitElement {
<!-- Second row: Special keys -->
<div class="flex gap-2">
<button
class="font-mono text-sm transition-all cursor-pointer w-16"
@click=${() => this.handleSpecialKey('\t')}
style="background: rgba(0, 0, 0, 0.8); color: #d4d4d4; border: 1px solid #444; border-radius: 4px; padding: 8px 4px;"
@mouseover=${(e: Event) => {
const btn = e.target as HTMLElement;
btn.style.background = 'rgba(0, 0, 0, 0.9)';
btn.style.borderColor = '#666';
}}
@mouseout=${(e: Event) => {
const btn = e.target as HTMLElement;
btn.style.background = 'rgba(0, 0, 0, 0.8)';
btn.style.borderColor = '#444';
}}
>
TAB
</button>
<button
class="font-mono text-sm transition-all cursor-pointer w-16"
@click=${() => this.handleSpecialKey('enter')}
style="background: rgba(0, 0, 0, 0.8); color: #d4d4d4; border: 1px solid #444; border-radius: 4px; padding: 8px 4px;"
@mouseover=${(e: Event) => {
const btn = e.target as HTMLElement;
btn.style.background = 'rgba(0, 0, 0, 0.9)';
btn.style.borderColor = '#666';
}}
@mouseout=${(e: Event) => {
const btn = e.target as HTMLElement;
btn.style.background = 'rgba(0, 0, 0, 0.8)';
btn.style.borderColor = '#444';
}}
>
ENTER
</button>
<button
class="font-mono text-sm transition-all cursor-pointer w-16"
@click=${() => this.handleSpecialKey('escape')}
@ -1071,6 +1037,40 @@ export class SessionView extends LitElement {
>
ESC
</button>
<button
class="font-mono text-sm transition-all cursor-pointer w-16"
@click=${() => this.handleSpecialKey('\t')}
style="background: rgba(0, 0, 0, 0.8); color: #d4d4d4; border: 1px solid #444; border-radius: 4px; padding: 8px 4px;"
@mouseover=${(e: Event) => {
const btn = e.target as HTMLElement;
btn.style.background = 'rgba(0, 0, 0, 0.9)';
btn.style.borderColor = '#666';
}}
@mouseout=${(e: Event) => {
const btn = e.target as HTMLElement;
btn.style.background = 'rgba(0, 0, 0, 0.8)';
btn.style.borderColor = '#444';
}}
>
<span class="text-xl">⇥</span>
</button>
<button
class="flex-1 font-mono px-3 py-2 text-sm transition-all cursor-pointer"
@click=${this.handleMobileInputToggle}
style="background: rgba(0, 0, 0, 0.8); color: #d4d4d4; border: 1px solid #444; border-radius: 4px;"
@mouseover=${(e: Event) => {
const btn = e.target as HTMLElement;
btn.style.background = 'rgba(0, 0, 0, 0.9)';
btn.style.borderColor = '#666';
}}
@mouseout=${(e: Event) => {
const btn = e.target as HTMLElement;
btn.style.background = 'rgba(0, 0, 0, 0.8)';
btn.style.borderColor = '#444';
}}
>
ABC123
</button>
<button
class="font-mono text-sm transition-all cursor-pointer w-16"
@click=${this.handleCtrlAlphaToggle}
@ -1089,9 +1089,9 @@ export class SessionView extends LitElement {
CTRL
</button>
<button
class="flex-1 font-mono px-3 py-2 text-sm transition-all cursor-pointer"
@click=${this.handleMobileInputToggle}
style="background: rgba(0, 0, 0, 0.8); color: #d4d4d4; border: 1px solid #444; border-radius: 4px;"
class="font-mono text-sm transition-all cursor-pointer w-16"
@click=${() => this.handleSpecialKey('enter')}
style="background: rgba(0, 0, 0, 0.8); color: #d4d4d4; border: 1px solid #444; border-radius: 4px; padding: 8px 4px;"
@mouseover=${(e: Event) => {
const btn = e.target as HTMLElement;
btn.style.background = 'rgba(0, 0, 0, 0.9)';
@ -1103,7 +1103,7 @@ export class SessionView extends LitElement {
btn.style.borderColor = '#444';
}}
>
ABC123
<span class="text-xl">⏎</span>
</button>
</div>
</div>