sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-11 12:15:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

move buttons around

Browse source
This commit is contained in:
Peter Steinberger 2025-06-25 02:49:09 +02:00
parent d3b5b599c0
commit 21c3d36435
2 changed files with 58 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
web/src/client/components/full-header.ts
View file

@ -49,7 +49,7 @@ export class FullHeader extends HeaderBase {
></notification-status>
${this.renderActionButtons(exitedSessions, runningSessions)}
<button
class="btn-secondary font-mono text-sm px-5 py-2.5"
class="btn-secondary font-mono text-sm px-3 sm:px-5 py-2.5"
@click=${() => this.dispatchEvent(new CustomEvent('open-file-browser'))}
title="Browse Files (⌘O)"
>
@ -59,7 +59,7 @@ export class FullHeader extends HeaderBase {
d="M1.75 1h5.5c.966 0 1.75.784 1.75 1.75v1h4c.966 0 1.75.784 1.75 1.75v7.75A1.75 1.75 0 0113 15H3a1.75 1.75 0 01-1.75-1.75V2.75C1.25 1.784 1.784 1 1.75 1zM2.75 2.5v10.75c0 .138.112.25.25.25h10a.25.25 0 00.25-.25V5.5a.25.25 0 00-.25-.25H8.75v-2.5a.25.25 0 00-.25-.25h-5.5a.25.25 0 00-.25.25z"
/>
</svg>
Browse
<span class="hidden sm:inline">Browse</span>
</span>
</button>
<button
@ -138,6 +138,13 @@ export class FullHeader extends HeaderBase {
>
${this.authMethod || 'authenticated'}
</div>
<button
class="w-full text-left px-3 py-2 text-sm font-mono text-dark-text hover:bg-dark-bg-secondary"
@click=${this.handleOpenSettings}
>
Settings
</button>
<div class="border-t border-dark-border"></div>
<button
class="w-full text-left px-3 py-2 text-sm font-mono text-status-warning hover:bg-dark-bg-secondary hover:text-status-error"
@click=${this.handleLogout}

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

@ -385,45 +385,67 @@ export class SessionList extends LitElement {
private renderExitedControls() {
const exitedSessions = this.sessions.filter((session) => session.status === 'exited');
const runningSessions = this.sessions.filter((session) => session.status === 'running');
if (exitedSessions.length === 0) return '';
// If no exited sessions and no running sessions, don't show controls
if (exitedSessions.length === 0 && runningSessions.length === 0) return '';
return html`
<div class="flex justify-center items-center gap-4 mt-8 pb-4">
<button
class="font-mono text-sm px-6 py-2 rounded-lg border transition-all duration-200 ${
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-tertiary text-dark-text hover:bg-dark-bg-secondary'
}"
@click=${() => this.dispatchEvent(new CustomEvent('hide-exited-change', { detail: !this.hideExited }))}
>
<div class="flex items-center gap-3">
<span>${this.hideExited ? 'Show' : 'Hide'} Exited (${exitedSessions.length})</span>
<div
class="w-8 h-4 rounded-full transition-colors duration-200 ${
this.hideExited ? 'bg-dark-surface' : 'bg-dark-bg'
}"
>
<div
class="w-3 h-3 rounded-full transition-transform duration-200 mt-0.5 ${
<div class="flex justify-center items-center gap-2 sm:gap-4 mt-8 pb-4 px-4">
${
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 ${
this.hideExited
? 'translate-x-0.5 bg-dark-text-muted'
: 'translate-x-4 bg-accent-green'
? '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'
}"
></div>
</div>
</div>
</button>
@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>
<span class="sm:hidden">${this.hideExited ? 'Show' : 'Hide'} (${exitedSessions.length})</span>
<div
class="w-8 h-4 rounded-full transition-colors duration-200 ${
this.hideExited ? 'bg-dark-surface' : 'bg-dark-bg'
}"
>
<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>
</button>
`
: ''
}
${
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 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>
`
: ''
}
${
!this.hideExited && exitedSessions.length > 0
? html`
<button
class="font-mono text-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"
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}
>
${this.cleaningExited ? 'Cleaning...' : `Clean Exited (${exitedSessions.length})`}
<span class="hidden sm:inline">${this.cleaningExited ? 'Cleaning...' : `Clean Exited (${exitedSessions.length})`}</span>
<span class="sm:hidden">${this.cleaningExited ? 'Cleaning...' : 'Clean'}</span>
</button>
`
: ''