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

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

@ -401,13 +401,15 @@ 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`
<div class="flex gap-2 w-full">
<!-- Show/Hide Exited button -->
<button <button
class="font-mono text-xs sm:text-sm px-3 sm:px-6 py-2 rounded-lg border transition-all duration-200 ${ class="font-mono text-xs sm:text-sm px-3 sm:px-6 py-2 rounded-lg border transition-all duration-200 flex-1 ${
this.hideExited this.hideExited
? 'border-dark-border bg-dark-bg-secondary text-dark-text-muted hover:bg-dark-bg-tertiary hover:text-dark-text' ? 'border-dark-border bg-dark-bg-secondary text-dark-text-muted hover:bg-dark-bg-tertiary hover:text-dark-text'
: 'border-dark-border bg-dark-bg-tertiary text-dark-text hover:bg-dark-bg-secondary' : 'border-dark-border bg-dark-bg-tertiary text-dark-text hover:bg-dark-bg-secondary'
@ -417,7 +419,7 @@ export class SessionList extends LitElement {
new CustomEvent('hide-exited-change', { detail: !this.hideExited }) new CustomEvent('hide-exited-change', { detail: !this.hideExited })
)} )}
> >
<div class="flex items-center gap-2 sm:gap-3"> <div class="flex items-center justify-center gap-2 sm:gap-3">
<span class="hidden sm:inline" <span class="hidden sm:inline"
>${this.hideExited ? 'Show' : 'Hide'} Exited (${exitedSessions.length})</span >${this.hideExited ? 'Show' : 'Hide'} Exited (${exitedSessions.length})</span
> >
@ -439,29 +441,13 @@ export class SessionList extends LitElement {
</div> </div>
</div> </div>
</button> </button>
`
: ''
}
<!-- Second row: Kill All and Clean Exited (when visible) --> <!-- Clean Exited button (only when Show Exited is active) -->
<div class="flex justify-center items-center gap-2 sm:gap-4">
${ ${
runningSessions.length > 0 !this.hideExited
? 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 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 flex-1 border-dark-border bg-dark-bg-secondary text-status-warning hover:bg-dark-bg-tertiary hover:border-status-warning"
@click=${() => this.dispatchEvent(new CustomEvent('kill-all-sessions'))}
>
Kill All (${runningSessions.length})
</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} @click=${this.handleCleanupExited}
?disabled=${this.cleaningExited} ?disabled=${this.cleaningExited}
> >
@ -478,6 +464,23 @@ export class SessionList extends LitElement {
: '' : ''
} }
</div> </div>
`
: ''
}
<!-- Second row: Kill All button (full width) -->
${
runningSessions.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 w-full 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'))}
>
Kill All (${runningSessions.length})
</button>
`
: ''
}
</div> </div>
`; `;
} }