From 76ea65839a47aa43e7bb402bfa186f45f5f6a1d2 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Wed, 18 Jun 2025 10:23:55 +0200
Subject: [PATCH] Replace hide exited checkbox with button and standardize
 button sizes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert hide exited checkbox to button toggle matching theme style
- Use "SHOW ALL" / "HIDE EXITED" text based on state
- Blue border when active, gray when inactive
- Standardize all header buttons to small size (px-2 py-1 text-xs)
- Consistent button styling across mobile and desktop layouts

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 web/src/client/components/app-header.ts   | 122 +++++++++-------------
 web/src/client/components/session-list.ts |   2 +-
 2 files changed, 49 insertions(+), 75 deletions(-)

diff --git a/web/src/client/components/app-header.ts b/web/src/client/components/app-header.ts
index 122249e4..d448cee1 100644
--- a/web/src/client/components/app-header.ts
+++ b/web/src/client/components/app-header.ts
@@ -51,48 +51,35 @@ export class AppHeader extends LitElement {
 
           <!-- Controls row: hide exited on left, buttons on right -->
           <div class="flex items-center justify-between">
-            <label
-              class="flex items-center gap-2 text-vs-text text-sm cursor-pointer hover:text-vs-accent transition-colors"
+            <button
+              class="font-mono px-2 py-1 rounded transition-colors text-xs whitespace-nowrap"
+              style="background: black; color: #d4d4d4; border: 1px solid ${this.hideExited ? '#569cd6' : '#888'};"
+              @click=${() =>
+                this.dispatchEvent(
+                  new CustomEvent('hide-exited-change', {
+                    detail: !this.hideExited,
+                  })
+                )}
+              @mouseover=${(e: Event) => {
+                const btn = e.target as HTMLElement;
+                const borderColor = this.hideExited ? '#569cd6' : '#888';
+                btn.style.background = borderColor;
+                btn.style.color = 'black';
+              }}
+              @mouseout=${(e: Event) => {
+                const btn = e.target as HTMLElement;
+                btn.style.background = 'black';
+                btn.style.color = '#d4d4d4';
+              }}
             >
-              <div class="relative">
-                <input
-                  type="checkbox"
-                  class="sr-only"
-                  .checked=${this.hideExited}
-                  @change=${(e: Event) =>
-                    this.dispatchEvent(
-                      new CustomEvent('hide-exited-change', {
-                        detail: (e.target as HTMLInputElement).checked,
-                      })
-                    )}
-                />
-                <div
-                  class="w-4 h-4 border border-vs-border rounded bg-vs-bg-secondary flex items-center justify-center transition-all ${this
-                    .hideExited
-                    ? 'bg-vs-user border-vs-user'
-                    : 'hover:border-vs-accent'}"
-                >
-                  ${this.hideExited
-                    ? html`
-                        <svg class="w-3 h-3 text-vs-bg" fill="currentColor" viewBox="0 0 20 20">
-                          <path
-                            fill-rule="evenodd"
-                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                            clip-rule="evenodd"
-                          ></path>
-                        </svg>
-                      `
-                    : ''}
-                </div>
-              </div>
-              hide exited
-            </label>
+              ${this.hideExited ? 'SHOW ALL' : 'HIDE EXITED'}
+            </button>
 
             <div class="flex gap-1">
               ${runningSessions.length > 0 && !this.killingAll
                 ? html`
                     <button
-                      class="font-mono px-2 py-1.5 rounded transition-colors text-xs whitespace-nowrap"
+                      class="font-mono px-2 py-1 rounded transition-colors text-xs whitespace-nowrap"
                       style="background: black; color: #d4d4d4; border: 1px solid #d19a66;"
                       @click=${this.handleKillAll}
                       @mouseover=${(e: Event) => {
@@ -111,7 +98,7 @@ export class AppHeader extends LitElement {
                   `
                 : ''}
               <button
-                class="font-mono px-2 py-1.5 rounded transition-colors text-xs whitespace-nowrap"
+                class="font-mono px-2 py-1 rounded transition-colors text-xs whitespace-nowrap"
                 style="background: black; color: #d4d4d4; border: 1px solid #569cd6;"
                 @click=${this.handleCreateSession}
                 @mouseover=${(e: Event) => {
@@ -135,47 +122,34 @@ export class AppHeader extends LitElement {
         <div class="hidden sm:flex sm:items-center sm:justify-between">
           <vibe-logo></vibe-logo>
           <div class="flex items-center gap-3">
-            <label
-              class="flex items-center gap-2 text-vs-text text-sm cursor-pointer hover:text-vs-accent transition-colors"
+            <button
+              class="font-mono px-2 py-1 rounded transition-colors text-xs whitespace-nowrap"
+              style="background: black; color: #d4d4d4; border: 1px solid ${this.hideExited ? '#569cd6' : '#888'};"
+              @click=${() =>
+                this.dispatchEvent(
+                  new CustomEvent('hide-exited-change', {
+                    detail: !this.hideExited,
+                  })
+                )}
+              @mouseover=${(e: Event) => {
+                const btn = e.target as HTMLElement;
+                const borderColor = this.hideExited ? '#569cd6' : '#888';
+                btn.style.background = borderColor;
+                btn.style.color = 'black';
+              }}
+              @mouseout=${(e: Event) => {
+                const btn = e.target as HTMLElement;
+                btn.style.background = 'black';
+                btn.style.color = '#d4d4d4';
+              }}
             >
-              <div class="relative">
-                <input
-                  type="checkbox"
-                  class="sr-only"
-                  .checked=${this.hideExited}
-                  @change=${(e: Event) =>
-                    this.dispatchEvent(
-                      new CustomEvent('hide-exited-change', {
-                        detail: (e.target as HTMLInputElement).checked,
-                      })
-                    )}
-                />
-                <div
-                  class="w-4 h-4 border border-vs-border rounded bg-vs-bg-secondary flex items-center justify-center transition-all ${this
-                    .hideExited
-                    ? 'bg-vs-user border-vs-user'
-                    : 'hover:border-vs-accent'}"
-                >
-                  ${this.hideExited
-                    ? html`
-                        <svg class="w-3 h-3 text-vs-bg" fill="currentColor" viewBox="0 0 20 20">
-                          <path
-                            fill-rule="evenodd"
-                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                            clip-rule="evenodd"
-                          ></path>
-                        </svg>
-                      `
-                    : ''}
-                </div>
-              </div>
-              hide exited
-            </label>
+              ${this.hideExited ? 'SHOW ALL' : 'HIDE EXITED'}
+            </button>
             <div class="flex gap-2">
               ${runningSessions.length > 0 && !this.killingAll
                 ? html`
                     <button
-                      class="font-mono px-3 sm:px-4 py-2 rounded transition-colors text-sm whitespace-nowrap"
+                      class="font-mono px-2 py-1 rounded transition-colors text-xs whitespace-nowrap"
                       style="background: black; color: #d4d4d4; border: 1px solid #d19a66;"
                       @click=${this.handleKillAll}
                       @mouseover=${(e: Event) => {
@@ -194,7 +168,7 @@ export class AppHeader extends LitElement {
                   `
                 : ''}
               <button
-                class="font-mono px-3 sm:px-4 py-2 rounded transition-colors text-sm whitespace-nowrap"
+                class="font-mono px-2 py-1 rounded transition-colors text-xs whitespace-nowrap"
                 style="background: black; color: #d4d4d4; border: 1px solid #569cd6;"
                 @click=${this.handleCreateSession}
                 @mouseover=${(e: Event) => {
diff --git a/web/src/client/components/session-list.ts b/web/src/client/components/session-list.ts
index c23af090..e183bf8e 100644
--- a/web/src/client/components/session-list.ts
+++ b/web/src/client/components/session-list.ts
@@ -80,7 +80,7 @@ export class SessionList extends LitElement {
           ? html`
               <div class="mb-4">
                 <button
-                  class="font-mono px-4 py-2 rounded transition-colors disabled:opacity-50"
+                  class="font-mono px-2 py-1 rounded transition-colors disabled:opacity-50 text-xs"
                   style="background: black; color: #d4d4d4; border: 1px solid #d19a66;"
                   @click=${this.handleCleanupExited}
                   ?disabled=${this.cleaningExited}