mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-27 15:17:38 +00:00
Simplify UI with clean header and button styling
- Replace complex ASCII header with simple "VibeTunnel" text - Remove ASCII brackets from buttons: CREATE, CLEAN, CLEAN EXITED, kill - Add border to header for visual separation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mario Zechner
parent
2bc2c2f3c7
commit
79509ea251
2 changed files with 82 additions and 38 deletions
|
|
@ -9,8 +9,8 @@ export class AppHeader extends LitElement {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`
|
return html`
|
||||||
<div class="p-4">
|
<div class="p-4 border-b border-vs-border">
|
||||||
<h1 class="text-vs-user font-mono text-sm m-0">VibeTunnel</h1>
|
<div class="text-vs-user font-mono text-sm">VibeTunnel</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -248,44 +248,88 @@ export class SessionList extends LitElement {
|
||||||
return html`
|
return html`
|
||||||
<div class="font-mono text-sm p-4">
|
<div class="font-mono text-sm p-4">
|
||||||
<!-- Controls -->
|
<!-- Controls -->
|
||||||
<div class="mb-4 flex items-center justify-between">
|
<div class="mb-4 space-y-3 md:space-y-0">
|
||||||
<div class="flex items-center gap-3">
|
<!-- Mobile: Stack everything -->
|
||||||
<button
|
<div class="flex flex-col space-y-3 md:hidden">
|
||||||
class="bg-vs-user text-vs-text hover:bg-vs-accent font-mono px-4 py-2 border-none rounded transition-colors"
|
<div class="flex items-center gap-2">
|
||||||
@click=${() => this.showCreateModal = true}
|
<button
|
||||||
>
|
class="bg-vs-user text-vs-text hover:bg-vs-accent font-mono px-3 py-2 border-none rounded transition-colors text-sm flex-1"
|
||||||
Create Session
|
@click=${() => this.showCreateModal = true}
|
||||||
</button>
|
>
|
||||||
|
CREATE
|
||||||
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="bg-vs-warning text-vs-bg hover:bg-vs-highlight font-mono px-4 py-2 border-none rounded transition-colors disabled:opacity-50"
|
class="bg-vs-warning text-vs-bg hover:bg-vs-highlight font-mono px-3 py-2 border-none rounded transition-colors disabled:opacity-50 text-sm flex-1"
|
||||||
@click=${this.handleCleanExited}
|
@click=${this.handleCleanExited}
|
||||||
?disabled=${this.cleaningExited || this.sessions.filter(s => s.status === 'exited').length === 0}
|
?disabled=${this.cleaningExited || this.sessions.filter(s => s.status === 'exited').length === 0}
|
||||||
>
|
>
|
||||||
${this.cleaningExited ? 'Cleaning...' : 'Clean Exited'}
|
${this.cleaningExited ? '[~] CLEANING...' : 'CLEAN'}
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="flex items-center gap-2 text-vs-text text-sm cursor-pointer hover:text-vs-accent transition-colors">
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
class="sr-only"
|
||||||
|
.checked=${this.hideExited}
|
||||||
|
@change=${(e: Event) => this.hideExited = (e.target as HTMLInputElement).checked}
|
||||||
|
>
|
||||||
|
<div class="w-4 h-4 border border-vs-border rounded bg-vs-bg-secondary flex items-center justify-center transition-all ${
|
||||||
|
this.hideExited ? 'bg-vs-user border-vs-user' : 'hover:border-vs-accent'
|
||||||
|
}">
|
||||||
|
${this.hideExited ? html`
|
||||||
|
<svg class="w-3 h-3 text-vs-bg" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
` : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
--filter-exited
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label class="flex items-center gap-2 text-vs-text text-sm cursor-pointer hover:text-vs-accent transition-colors">
|
<!-- Desktop: Side by side -->
|
||||||
<div class="relative">
|
<div class="hidden md:flex md:items-center md:justify-between">
|
||||||
<input
|
<div class="flex items-center gap-3">
|
||||||
type="checkbox"
|
<button
|
||||||
class="sr-only"
|
class="bg-vs-user text-vs-text hover:bg-vs-accent font-mono px-4 py-2 border-none rounded transition-colors"
|
||||||
.checked=${this.hideExited}
|
@click=${() => this.showCreateModal = true}
|
||||||
@change=${(e: Event) => this.hideExited = (e.target as HTMLInputElement).checked}
|
|
||||||
>
|
>
|
||||||
<div class="w-4 h-4 border border-vs-border rounded bg-vs-bg-secondary flex items-center justify-center transition-all ${
|
CREATE SESSION
|
||||||
this.hideExited ? 'bg-vs-user border-vs-user' : 'hover:border-vs-accent'
|
</button>
|
||||||
}">
|
|
||||||
${this.hideExited ? html`
|
<button
|
||||||
<svg class="w-3 h-3 text-vs-bg" fill="currentColor" viewBox="0 0 20 20">
|
class="bg-vs-warning text-vs-bg hover:bg-vs-highlight font-mono px-4 py-2 border-none rounded transition-colors disabled:opacity-50"
|
||||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
@click=${this.handleCleanExited}
|
||||||
</svg>
|
?disabled=${this.cleaningExited || this.sessions.filter(s => s.status === 'exited').length === 0}
|
||||||
` : ''}
|
>
|
||||||
</div>
|
${this.cleaningExited ? '[~] CLEANING...' : 'CLEAN EXITED'}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
Hide exited sessions
|
|
||||||
</label>
|
<label class="flex items-center gap-2 text-vs-text text-sm cursor-pointer hover:text-vs-accent transition-colors">
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
class="sr-only"
|
||||||
|
.checked=${this.hideExited}
|
||||||
|
@change=${(e: Event) => this.hideExited = (e.target as HTMLInputElement).checked}
|
||||||
|
>
|
||||||
|
<div class="w-4 h-4 border border-vs-border rounded bg-vs-bg-secondary flex items-center justify-center transition-all ${
|
||||||
|
this.hideExited ? 'bg-vs-user border-vs-user' : 'hover:border-vs-accent'
|
||||||
|
}">
|
||||||
|
${this.hideExited ? html`
|
||||||
|
<svg class="w-3 h-3 text-vs-bg" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
` : ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
--filter-exited
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
${sessionsToShow.length === 0 ? html`
|
${sessionsToShow.length === 0 ? html`
|
||||||
|
|
@ -307,7 +351,7 @@ export class SessionList extends LitElement {
|
||||||
@click=${(e: Event) => this.handleKillSession(e, session.id)}
|
@click=${(e: Event) => this.handleKillSession(e, session.id)}
|
||||||
?disabled=${this.killingSessionIds.has(session.id)}
|
?disabled=${this.killingSessionIds.has(session.id)}
|
||||||
>
|
>
|
||||||
${this.killingSessionIds.has(session.id) ? 'killing...' : 'kill'}
|
${this.killingSessionIds.has(session.id) ? '[~] killing...' : 'kill'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -318,8 +362,8 @@ export class SessionList extends LitElement {
|
||||||
` : html`
|
` : html`
|
||||||
<div class="text-vs-muted text-xs">
|
<div class="text-vs-muted text-xs">
|
||||||
${this.newSessionIds.has(session.id)
|
${this.newSessionIds.has(session.id)
|
||||||
? 'Starting session...'
|
? '[~] init_session...'
|
||||||
: (this.loadingSnapshots.has(session.id) ? 'Loading...' : 'Loading...')
|
: (this.loadingSnapshots.has(session.id) ? '[~] loading...' : '[~] loading...')
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue