mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-27 15:17:38 +00:00
remove kill button from sidebar header
This commit is contained in:
Peter Steinberger
parent
f160ceea50
commit
de31ceabe6
1 changed files with 8 additions and 97 deletions
|
|
@ -6,14 +6,12 @@
|
||||||
import { html } from 'lit';
|
import { html } from 'lit';
|
||||||
import { customElement } from 'lit/decorators.js';
|
import { customElement } from 'lit/decorators.js';
|
||||||
import { HeaderBase } from './header-base.js';
|
import { HeaderBase } from './header-base.js';
|
||||||
import type { Session } from './session-list.js';
|
|
||||||
import './terminal-icon.js';
|
import './terminal-icon.js';
|
||||||
|
|
||||||
@customElement('sidebar-header')
|
@customElement('sidebar-header')
|
||||||
export class SidebarHeader extends HeaderBase {
|
export class SidebarHeader extends HeaderBase {
|
||||||
render() {
|
render() {
|
||||||
const runningSessions = this.runningSessions;
|
const runningSessions = this.runningSessions;
|
||||||
const exitedSessions = this.exitedSessions;
|
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div
|
<div
|
||||||
|
|
@ -21,7 +19,7 @@ export class SidebarHeader extends HeaderBase {
|
||||||
style="padding-top: max(0.75rem, calc(0.75rem + env(safe-area-inset-top)));"
|
style="padding-top: max(0.75rem, calc(0.75rem + env(safe-area-inset-top)));"
|
||||||
>
|
>
|
||||||
<!-- Compact vertical layout for sidebar -->
|
<!-- Compact vertical layout for sidebar -->
|
||||||
<div class="flex flex-col gap-3">
|
<div class="flex flex-col gap-2">
|
||||||
<!-- Title and logo -->
|
<!-- Title and logo -->
|
||||||
<a
|
<a
|
||||||
href="/"
|
href="/"
|
||||||
|
|
@ -41,102 +39,15 @@ export class SidebarHeader extends HeaderBase {
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Compact action buttons -->
|
<!-- Create Session button -->
|
||||||
<div class="flex flex-col gap-2 items-center">
|
<button
|
||||||
<button
|
class="btn-primary font-mono text-xs px-3 py-1.5 vt-create-button text-center w-full"
|
||||||
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}
|
||||||
@click=${this.handleCreateSession}
|
>
|
||||||
>
|
Create Session
|
||||||
Create Session
|
</button>
|
||||||
</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>
|
|
||||||
</div>
|
</div>
|
||||||
</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>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue