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

remove kill button from sidebar header

Browse source
This commit is contained in:
Peter Steinberger 2025-06-25 02:47:49 +02:00
parent f160ceea50
commit de31ceabe6
1 changed files with 8 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
web/src/client/components/sidebar-header.ts
View file

@ -6,14 +6,12 @@
import { html } from 'lit';
import { customElement } from 'lit/decorators.js';
import { HeaderBase } from './header-base.js';
import type { Session } from './session-list.js';
import './terminal-icon.js';
@customElement('sidebar-header')
export class SidebarHeader extends HeaderBase {
render() {
const runningSessions = this.runningSessions;
const exitedSessions = this.exitedSessions;
return html`
<div
@ -21,7 +19,7 @@ export class SidebarHeader extends HeaderBase {
style="padding-top: max(0.75rem, calc(0.75rem + env(safe-area-inset-top)));"
>
<!-- Compact vertical layout for sidebar -->
<div class="flex flex-col gap-3">
<div class="flex flex-col gap-2">
<!-- Title and logo -->
<a
href="/"
@ -41,102 +39,15 @@ export class SidebarHeader extends HeaderBase {
</div>
</a>
<!-- Compact action buttons -->
<div class="flex flex-col gap-2 items-center">
<button
class="btn-primary font-mono text-xs px-3 py-1.5 vt-create-button text-center max-w-[200px] w-full"
@click=${this.handleCreateSession}
>
Create Session
</button>
<div class="flex flex-col gap-1 w-full max-w-[200px]">
${this.renderUtilityAndKillButtons(runningSessions)}
${this.renderExitedToggleButton(exitedSessions, true)}
${
!this.hideExited && exitedSessions.length > 0
? html`
<button
class="btn-ghost font-mono text-xs px-3 py-1.5 w-full text-status-warning"
@click=${this.handleCleanExited}
>
Clean Exited (${exitedSessions.length})
</button>
`
: ''
}
</div>
</div>
<!-- Create Session button -->
<button
class="btn-primary font-mono text-xs px-3 py-1.5 vt-create-button text-center w-full"
@click=${this.handleCreateSession}
>
Create Session
</button>
</div>
</div>
`;
}
private renderExitedToggleButton(exitedSessions: Session[], compact: boolean) {
if (exitedSessions.length === 0) return '';
const buttonClass = compact
? 'relative font-mono text-xs px-3 py-1.5 w-full rounded-lg border transition-all duration-200'
: 'relative font-mono text-xs px-4 py-2 rounded-lg border transition-all duration-200';
const stateClass = this.hideExited
? 'border-dark-border bg-dark-bg-tertiary text-dark-text hover:border-accent-green-darker'
: 'border-accent-green bg-accent-green text-dark-bg hover:bg-accent-green-darker';
return html`
<button
class="${buttonClass} ${stateClass}"
@click=${this.handleHideExitedToggle}
title="${
this.hideExited
? `Show ${exitedSessions.length} exited sessions`
: `Hide ${exitedSessions.length} exited sessions`
}"
>
<div class="flex items-center ${compact ? 'justify-between' : 'gap-2'}">
<span>${compact ? 'Show Exited' : `Show Exited (${exitedSessions.length})`}</span>
<div class="flex items-center gap-2">
${
compact
? html`<span class="text-xs opacity-75">(${exitedSessions.length})</span>`
: ''
}
<div
class="w-${compact ? '8' : '6'} h-${
compact ? '4' : '3'
} rounded-full transition-colors duration-200 ${
this.hideExited ? 'bg-dark-border' : 'bg-dark-bg'
}"
>
<div
class="w-${compact ? '3' : '2'} h-${
compact ? '3' : '2'
} rounded-full transition-transform duration-200 mt-0.5 ${
this.hideExited
? `translate-x-0.5 bg-dark-text-muted`
: `translate-x-${compact ? '4' : '3'} bg-dark-bg`
}"
></div>
</div>
</div>
</div>
</button>
`;
}
private renderUtilityAndKillButtons(runningSessions: Session[]) {
// Only show Kill button if there are running sessions
if (runningSessions.length === 0 || this.killingAll) {
return '';
}
return html`
<button
class="btn-ghost font-mono text-xs px-3 py-1.5 w-full text-status-error"
@click=${this.handleKillAll}
>
Kill All (${runningSessions.length})
</button>
`;
}
}