mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-26 15:07:39 +00:00
reduce heider height
This commit is contained in:
Peter Steinberger
parent
83137d25d6
commit
9d775e6b31
1 changed files with 43 additions and 48 deletions
|
|
@ -16,55 +16,50 @@ export class FullHeader extends HeaderBase {
|
|||
|
||||
return html`
|
||||
<div
|
||||
class="app-header bg-dark-bg-secondary border-b border-dark-border p-6"
|
||||
style="padding-top: max(1.5rem, calc(1.5rem + env(safe-area-inset-top)));"
|
||||
class="app-header bg-dark-bg-secondary border-b border-dark-border p-3"
|
||||
style="padding-top: max(0.75rem, calc(0.75rem + env(safe-area-inset-top)));"
|
||||
>
|
||||
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<button
|
||||
class="flex items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer group"
|
||||
title="Go to home"
|
||||
@click=${this.handleHomeClick}
|
||||
>
|
||||
<terminal-icon size="32"></terminal-icon>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-accent-green font-mono group-hover:underline">
|
||||
VibeTunnel
|
||||
</h1>
|
||||
<p class="text-dark-text-muted text-sm font-mono">
|
||||
${runningSessions.length} ${runningSessions.length === 1 ? 'session' : 'sessions'}
|
||||
running
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div class="flex gap-2 items-center flex-1">
|
||||
<notification-status
|
||||
@open-settings=${() => this.dispatchEvent(new CustomEvent('open-settings'))}
|
||||
></notification-status>
|
||||
<button
|
||||
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)"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path
|
||||
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>
|
||||
<span class="hidden sm:inline">Browse</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn-primary font-mono text-sm px-5 py-2.5 vt-create-button"
|
||||
@click=${this.handleCreateSession}
|
||||
>
|
||||
Create Session
|
||||
</button>
|
||||
<div class="flex items-center justify-between">
|
||||
<button
|
||||
class="flex items-center gap-2 hover:opacity-80 transition-opacity cursor-pointer group"
|
||||
title="Go to home"
|
||||
@click=${this.handleHomeClick}
|
||||
>
|
||||
<terminal-icon size="24"></terminal-icon>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<h1 class="text-xl font-bold text-accent-green font-mono group-hover:underline">
|
||||
VibeTunnel
|
||||
</h1>
|
||||
<p class="text-dark-text-muted text-xs font-mono">
|
||||
(${runningSessions.length})
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<notification-status
|
||||
@open-settings=${() => this.dispatchEvent(new CustomEvent('open-settings'))}
|
||||
></notification-status>
|
||||
<button
|
||||
class="p-2 text-dark-text border border-dark-border hover:border-accent-green hover:text-accent-green rounded-lg transition-all duration-200"
|
||||
@click=${() => this.dispatchEvent(new CustomEvent('open-file-browser'))}
|
||||
title="Browse Files (⌘O)"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path
|
||||
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>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 bg-accent-green text-dark-bg hover:bg-accent-green-light rounded-lg transition-all duration-200 vt-create-button"
|
||||
@click=${this.handleCreateSession}
|
||||
title="Create New Session"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/>
|
||||
</svg>
|
||||
</button>
|
||||
${this.renderUserMenu()}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -81,7 +76,7 @@ export class FullHeader extends HeaderBase {
|
|||
return html`
|
||||
<div class="user-menu-container relative flex-shrink-0">
|
||||
<button
|
||||
class="font-mono text-sm px-3 sm:px-5 py-2.5 text-dark-text border border-dark-border hover:bg-dark-bg-tertiary hover:text-dark-text rounded-lg transition-all duration-200 flex items-center gap-2"
|
||||
class="font-mono text-sm px-3 py-2 text-dark-text border border-dark-border hover:bg-dark-bg-tertiary hover:text-dark-text rounded-lg transition-all duration-200 flex items-center gap-2"
|
||||
@click=${this.toggleUserMenu}
|
||||
title="User menu"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue