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

realign buttons

Browse source
This commit is contained in:
Peter Steinberger 2025-06-27 00:03:22 +02:00
parent f839822a01
commit f41b54799a
1 changed files with 70 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

137
web/src/client/components/session-list.ts
View file

@ -401,83 +401,86 @@ export class SessionList extends LitElement {
if (exitedSessions.length === 0 && runningSessions.length === 0) return ''; if (exitedSessions.length === 0 && runningSessions.length === 0) return '';
return html` return html`
<div class="flex flex-col items-center gap-2 mt-8 pb-4 px-4"> <div class="flex flex-col gap-2 mt-8 pb-4 px-4 w-full">
<!-- First row: Show/Hide Exited --> <!-- First row: Show/Hide Exited and Clean Exited (when visible) -->
${ ${
exitedSessions.length > 0 exitedSessions.length > 0
? html` ? html`
<button <div class="flex gap-2 w-full">
class="font-mono text-xs sm:text-sm px-3 sm:px-6 py-2 rounded-lg border transition-all duration-200 ${ <!-- Show/Hide Exited button -->
this.hideExited <button
? 'border-dark-border bg-dark-bg-secondary text-dark-text-muted hover:bg-dark-bg-tertiary hover:text-dark-text' class="font-mono text-xs sm:text-sm px-3 sm:px-6 py-2 rounded-lg border transition-all duration-200 flex-1 ${
: 'border-dark-border bg-dark-bg-tertiary text-dark-text hover:bg-dark-bg-secondary' this.hideExited
}" ? 'border-dark-border bg-dark-bg-secondary text-dark-text-muted hover:bg-dark-bg-tertiary hover:text-dark-text'
@click=${() => : 'border-dark-border bg-dark-bg-tertiary text-dark-text hover:bg-dark-bg-secondary'
this.dispatchEvent( }"
new CustomEvent('hide-exited-change', { detail: !this.hideExited }) @click=${() =>
)} this.dispatchEvent(
> new CustomEvent('hide-exited-change', { detail: !this.hideExited })
<div class="flex items-center gap-2 sm:gap-3"> )}
<span class="hidden sm:inline" >
>${this.hideExited ? 'Show' : 'Hide'} Exited (${exitedSessions.length})</span <div class="flex items-center justify-center gap-2 sm:gap-3">
> <span class="hidden sm:inline"
<span class="sm:hidden" >${this.hideExited ? 'Show' : 'Hide'} Exited (${exitedSessions.length})</span
>${this.hideExited ? 'Show' : 'Hide'} (${exitedSessions.length})</span >
> <span class="sm:hidden"
<div >${this.hideExited ? 'Show' : 'Hide'} (${exitedSessions.length})</span
class="w-8 h-4 rounded-full transition-colors duration-200 ${ >
this.hideExited ? 'bg-dark-surface' : 'bg-dark-bg'
}"
>
<div <div
class="w-3 h-3 rounded-full transition-transform duration-200 mt-0.5 ${ class="w-8 h-4 rounded-full transition-colors duration-200 ${
this.hideExited this.hideExited ? 'bg-dark-surface' : 'bg-dark-bg'
? 'translate-x-0.5 bg-dark-text-muted'
: 'translate-x-4 bg-accent-green'
}" }"
></div> >
<div
class="w-3 h-3 rounded-full transition-transform duration-200 mt-0.5 ${
this.hideExited
? 'translate-x-0.5 bg-dark-text-muted'
: 'translate-x-4 bg-accent-green'
}"
></div>
</div>
</div> </div>
</div> </button>
</button>
<!-- Clean Exited button (only when Show Exited is active) -->
${
!this.hideExited
? html`
<button
class="font-mono text-xs sm:text-sm px-3 sm:px-6 py-2 rounded-lg border transition-all duration-200 flex-1 border-dark-border bg-dark-bg-secondary text-status-warning hover:bg-dark-bg-tertiary hover:border-status-warning"
@click=${this.handleCleanupExited}
?disabled=${this.cleaningExited}
>
<span class="hidden sm:inline"
>${
this.cleaningExited
? 'Cleaning...'
: `Clean Exited (${exitedSessions.length})`
}</span
>
<span class="sm:hidden">${this.cleaningExited ? 'Cleaning...' : 'Clean'}</span>
</button>
`
: ''
}
</div>
` `
: '' : ''
} }
<!-- Second row: Kill All and Clean Exited (when visible) --> <!-- Second row: Kill All button (full width) -->
<div class="flex justify-center items-center gap-2 sm:gap-4"> ${
${ runningSessions.length > 0
runningSessions.length > 0 ? html`
? html` <button
<button class="font-mono text-xs sm:text-sm px-3 sm:px-6 py-2 rounded-lg border transition-all duration-200 w-full border-status-error bg-dark-bg-secondary text-status-error hover:bg-dark-bg-tertiary hover:border-status-error"
class="font-mono text-xs sm:text-sm px-3 sm:px-6 py-2 rounded-lg border transition-all duration-200 border-status-error bg-dark-bg-secondary text-status-error hover:bg-dark-bg-tertiary hover:border-status-error" @click=${() => this.dispatchEvent(new CustomEvent('kill-all-sessions'))}
@click=${() => this.dispatchEvent(new CustomEvent('kill-all-sessions'))} >
> Kill All (${runningSessions.length})
Kill All (${runningSessions.length}) </button>
</button> `
` : ''
: '' }
}
${
!this.hideExited && exitedSessions.length > 0
? html`
<button
class="font-mono text-xs sm:text-sm px-3 sm:px-6 py-2 rounded-lg border transition-all duration-200 border-dark-border bg-dark-bg-secondary text-status-warning hover:bg-dark-bg-tertiary hover:border-status-warning"
@click=${this.handleCleanupExited}
?disabled=${this.cleaningExited}
>
<span class="hidden sm:inline"
>${
this.cleaningExited
? 'Cleaning...'
: `Clean Exited (${exitedSessions.length})`
}</span
>
<span class="sm:hidden">${this.cleaningExited ? 'Cleaning...' : 'Clean'}</span>
</button>
`
: ''
}
</div>
</div> </div>
`; `;
} }