From a2d15471d86322b8f51671efae5224cfd2a88ea4 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Wed, 18 Jun 2025 10:44:03 +0200
Subject: [PATCH] Reorder mobile terminal buttons and add symbols
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 web/src/client/components/session-view.ts | 76 +++++++++++------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/web/src/client/components/session-view.ts b/web/src/client/components/session-view.ts
index a15cbb9b..3663d2ab 100644
--- a/web/src/client/components/session-view.ts
+++ b/web/src/client/components/session-view.ts
@@ -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>