mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-02 10:45:57 +00:00
Replace hide exited checkbox with button and standardize button sizes
- 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>
This commit is contained in:
Mario Zechner
parent
7c92eb5bdb
commit
76ea65839a
2 changed files with 49 additions and 75 deletions
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue