+
`;
}
-}
+}
\ No newline at end of file
diff --git a/web/src/client/components/app-header.ts b/web/src/client/components/app-header.ts
index bc3edae7..0a08f0b4 100644
--- a/web/src/client/components/app-header.ts
+++ b/web/src/client/components/app-header.ts
@@ -1,21 +1,23 @@
/**
* App Header Component
*
- * Displays the VibeTunnel logo, session statistics, and control buttons.
- * Provides controls for creating sessions, toggling exited sessions visibility,
- * killing all sessions, and cleaning up exited sessions.
+ * Conditionally renders either a compact sidebar header or full-width header
+ * based on the showSplitView property.
*
* @fires create-session - When create button is clicked
* @fires hide-exited-change - When hide/show exited toggle is clicked (detail: boolean)
* @fires kill-all-sessions - When kill all button is clicked
* @fires clean-exited-sessions - When clean exited button is clicked
* @fires open-file-browser - When browse button is clicked
+ * @fires logout - When logout is clicked
*/
-import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
import type { Session } from './session-list.js';
import './terminal-icon.js';
import './notification-status.js';
+import './sidebar-header.js';
+import './full-header.js';
@customElement('app-header')
export class AppHeader extends LitElement {
@@ -25,333 +27,55 @@ export class AppHeader extends LitElement {
@property({ type: Array }) sessions: Session[] = [];
@property({ type: Boolean }) hideExited = true;
+ @property({ type: Boolean }) showSplitView = false;
@property({ type: String }) currentUser: string | null = null;
@property({ type: String }) authMethod: string | null = null;
- @state() private killingAll = false;
- @state() private showUserMenu = false;
- private handleCreateSession(e: MouseEvent) {
- // Capture button position for view transition
- const button = e.currentTarget as HTMLButtonElement;
- const rect = button.getBoundingClientRect();
-
- // Store position in CSS custom properties for the transition
- document.documentElement.style.setProperty('--vt-button-x', `${rect.left + rect.width / 2}px`);
- document.documentElement.style.setProperty('--vt-button-y', `${rect.top + rect.height / 2}px`);
- document.documentElement.style.setProperty('--vt-button-width', `${rect.width}px`);
- document.documentElement.style.setProperty('--vt-button-height', `${rect.height}px`);
-
- this.dispatchEvent(new CustomEvent('create-session'));
- }
-
- private handleLogout() {
- this.showUserMenu = false;
- this.dispatchEvent(new CustomEvent('logout'));
- }
-
- private toggleUserMenu() {
- this.showUserMenu = !this.showUserMenu;
- }
-
- private handleClickOutside = (e: Event) => {
- const target = e.target as HTMLElement;
- if (!target.closest('.user-menu-container')) {
- this.showUserMenu = false;
- }
+ private forwardEvent = (e: Event) => {
+ // Forward events from child components to parent
+ this.dispatchEvent(
+ new CustomEvent(e.type, {
+ detail: (e as CustomEvent).detail,
+ bubbles: true,
+ })
+ );
};
- connectedCallback() {
- super.connectedCallback();
- document.addEventListener('click', this.handleClickOutside);
- }
-
- disconnectedCallback() {
- super.disconnectedCallback();
- document.removeEventListener('click', this.handleClickOutside);
- }
-
- private handleKillAll() {
- if (this.killingAll) return;
-
- this.killingAll = true;
- this.requestUpdate();
-
- this.dispatchEvent(new CustomEvent('kill-all-sessions'));
-
- // Reset the state after a delay to allow for the kill operations to complete
- setTimeout(() => {
- this.killingAll = false;
- this.requestUpdate();
- }, 3000); // 3 seconds should be enough for most kill operations
- }
-
- private handleCleanExited() {
- this.dispatchEvent(new CustomEvent('clean-exited-sessions'));
- }
-
- private handleOpenFileBrowser() {
- this.dispatchEvent(new CustomEvent('open-file-browser'));
- }
-
render() {
- const runningSessions = this.sessions.filter((session) => session.status === 'running');
- const exitedSessions = this.sessions.filter((session) => session.status === 'exited');
-
- // Reset killing state if no more running sessions
- if (this.killingAll && runningSessions.length === 0) {
- this.killingAll = false;
- }
+ return this.showSplitView ? this.renderSidebarHeader() : this.renderFullHeader();
+ }
+ private renderSidebarHeader() {
return html`
-
+
`;
}
-}
+
+ private renderFullHeader() {
+ return html`
+
+ `;
+ }
+}
\ No newline at end of file
diff --git a/web/src/client/components/full-header.ts b/web/src/client/components/full-header.ts
new file mode 100644
index 00000000..e9821dd0
--- /dev/null
+++ b/web/src/client/components/full-header.ts
@@ -0,0 +1,190 @@
+/**
+ * Full Header Component
+ *
+ * Full-width header for list view with horizontal layout
+ */
+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';
+import './notification-status.js';
+
+@customElement('full-header')
+export class FullHeader extends HeaderBase {
+ render() {
+ const runningSessions = this.runningSessions;
+ const exitedSessions = this.exitedSessions;
+
+ return html`
+
+ `;
+ }
+
+ private renderExitedToggleButton(exitedSessions: Session[]) {
+ if (exitedSessions.length === 0) return '';
+
+ return html`
+
+
+
Show Exited (${exitedSessions.length})
+
+
+ `;
+ }
+
+ private renderActionButtons(exitedSessions: Session[], runningSessions: Session[]) {
+ return html`
+ ${!this.hideExited && exitedSessions.length > 0
+ ? html`
+
+ Clean Exited (${exitedSessions.length})
+
+ `
+ : ''}
+ ${runningSessions.length > 0 && !this.killingAll
+ ? html`
+
+ Kill All (${runningSessions.length})
+
+ `
+ : ''}
+ ${this.killingAll
+ ? html`
+
+ `
+ : ''}
+ `;
+ }
+
+ private renderUserMenu() {
+ if (!this.currentUser) return '';
+
+ return html`
+
+ `;
+ }
+}
diff --git a/web/src/client/components/header-base.ts b/web/src/client/components/header-base.ts
new file mode 100644
index 00000000..85059c95
--- /dev/null
+++ b/web/src/client/components/header-base.ts
@@ -0,0 +1,94 @@
+/**
+ * Base functionality for header components
+ */
+import { LitElement } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import type { Session } from './session-list.js';
+import { TIMING } from '../utils/constants.js';
+
+export abstract class HeaderBase extends LitElement {
+ createRenderRoot() {
+ return this;
+ }
+
+ @property({ type: Array }) sessions: Session[] = [];
+ @property({ type: Boolean }) hideExited = true;
+ @property({ type: String }) currentUser: string | null = null;
+ @property({ type: String }) authMethod: string | null = null;
+ @state() protected killingAll = false;
+ @state() protected showUserMenu = false;
+
+ protected get runningSessions(): Session[] {
+ return this.sessions.filter((session) => session.status === 'running');
+ }
+
+ protected get exitedSessions(): Session[] {
+ return this.sessions.filter((session) => session.status === 'exited');
+ }
+
+ protected handleCreateSession(e: MouseEvent) {
+ // Capture button position for view transition
+ const button = e.currentTarget as HTMLButtonElement;
+ const rect = button.getBoundingClientRect();
+
+ // Store position in CSS custom properties for the transition
+ document.documentElement.style.setProperty('--vt-button-x', `${rect.left + rect.width / 2}px`);
+ document.documentElement.style.setProperty('--vt-button-y', `${rect.top + rect.height / 2}px`);
+ document.documentElement.style.setProperty('--vt-button-width', `${rect.width}px`);
+ document.documentElement.style.setProperty('--vt-button-height', `${rect.height}px`);
+
+ this.dispatchEvent(new CustomEvent('create-session'));
+ }
+
+ protected handleKillAll() {
+ if (this.killingAll) return;
+
+ this.killingAll = true;
+ this.requestUpdate();
+
+ this.dispatchEvent(new CustomEvent('kill-all-sessions'));
+
+ // Reset after a delay to prevent multiple clicks
+ window.setTimeout(() => {
+ this.killingAll = false;
+ }, TIMING.KILL_ALL_BUTTON_DISABLE_DURATION);
+ }
+
+ protected handleCleanExited() {
+ this.dispatchEvent(new CustomEvent('clean-exited-sessions'));
+ }
+
+ protected handleHideExitedToggle() {
+ this.dispatchEvent(
+ new CustomEvent('hide-exited-change', {
+ detail: !this.hideExited,
+ })
+ );
+ }
+
+ protected handleLogout() {
+ this.showUserMenu = false;
+ this.dispatchEvent(new CustomEvent('logout'));
+ }
+
+ protected toggleUserMenu() {
+ this.showUserMenu = !this.showUserMenu;
+ }
+
+ protected handleClickOutside = (e: Event) => {
+ const target = e.target as HTMLElement;
+ if (!target.closest('.user-menu-container')) {
+ this.showUserMenu = false;
+ }
+ };
+
+ connectedCallback() {
+ super.connectedCallback();
+ document.addEventListener('click', this.handleClickOutside);
+ }
+
+ disconnectedCallback() {
+ super.disconnectedCallback();
+ document.removeEventListener('click', this.handleClickOutside);
+ }
+}
diff --git a/web/src/client/components/session-list.ts b/web/src/client/components/session-list.ts
index bd1e9bcb..e82bf27c 100644
--- a/web/src/client/components/session-list.ts
+++ b/web/src/client/components/session-list.ts
@@ -42,6 +42,8 @@ export class SessionList extends LitElement {
@property({ type: Boolean }) hideExited = true;
@property({ type: Boolean }) showCreateModal = false;
@property({ type: Object }) authClient!: AuthClient;
+ @property({ type: String }) selectedSessionId: string | null = null;
+ @property({ type: Boolean }) compactMode = false;
@state() private cleaningExited = false;
private previousRunningCount = 0;
@@ -145,6 +147,14 @@ export class SessionList extends LitElement {
}
}
+ private handleOpenFileBrowser() {
+ this.dispatchEvent(
+ new CustomEvent('open-file-browser', {
+ bubbles: true,
+ })
+ );
+ }
+
render() {
const filteredSessions = this.hideExited
? this.sessions.filter((session) => session.status !== 'exited')
@@ -226,20 +236,126 @@ export class SessionList extends LitElement {
}