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

design tweaks

Browse source
This commit is contained in:
Peter Steinberger 2025-06-20 16:34:10 +02:00
parent 6e2cd2abcd
commit d6d3a8f570
3 changed files with 36 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/client/components/app-header.ts
View file

@ -49,11 +49,11 @@ export class AppHeader extends LitElement {
<div class="app-header bg-dark-bg-secondary border-b border-dark-border p-6">
<!-- Mobile layout -->
<div class="flex flex-col gap-4 sm:hidden">
<!-- Centered Sessions title with stats -->
<!-- Centered VibeTunnel title with stats -->
<div class="text-center flex flex-col items-center gap-2">
<h1 class="text-2xl font-bold text-accent-green flex items-center gap-3">
<terminal-icon size="28"></terminal-icon>
<span>Sessions</span>
<span>VibeTunnel</span>
</h1>
<p class="text-dark-text-muted text-sm">
${runningSessions.length} ${runningSessions.length === 1 ? 'Session' : 'Sessions'}

4
web/src/client/components/file-browser.ts
View file

@ -146,7 +146,9 @@ export class FileBrowser extends LitElement {
return html`
<div class="modal-backdrop flex items-center justify-center">
<div class="modal-content font-mono text-sm w-96 h-96 flex flex-col overflow-hidden">
<div
class="modal-content font-mono text-sm w-[90vw] max-w-2xl h-[80vh] max-h-[600px] flex flex-col overflow-hidden"
>
<div class="pb-4 mb-4 border-b border-dark-border flex-shrink-0">
<div class="flex justify-between items-center mb-2">
<h2 class="text-accent-green text-lg font-bold">Select Directory</h2>

60
web/src/client/components/session-create-form.ts
View file

@ -232,13 +232,13 @@ export class SessionCreateForm extends LitElement {
return html`
<div class="modal-backdrop flex items-center justify-center">
<div class="modal-content font-mono text-sm w-96 max-w-full mx-4">
<div class="modal-content font-mono text-sm w-96 lg:w-[768px] max-w-full mx-4">
<div class="pb-6 mb-6 border-b border-dark-border">
<h2 class="text-accent-green text-lg font-bold">Create New Session</h2>
</div>
<div class="p-4">
<div class="mb-4">
<div class="p-4 lg:p-8">
<div class="mb-6">
<label class="form-label">Session Name (optional):</label>
<input
type="text"
@ -250,40 +250,42 @@ export class SessionCreateForm extends LitElement {
/>
</div>
<div class="mb-4">
<label class="form-label">Working Directory:</label>
<div class="flex gap-4">
<div class="lg:grid lg:grid-cols-2 lg:gap-6">
<div class="mb-6">
<label class="form-label">Working Directory:</label>
<div class="flex gap-4">
<input
type="text"
class="input-field"
.value=${this.workingDir}
@input=${this.handleWorkingDirChange}
placeholder="~/"
?disabled=${this.disabled || this.isCreating}
/>
<button
class="btn-secondary font-mono px-4"
@click=${this.handleBrowse}
?disabled=${this.disabled || this.isCreating}
>
Browse
</button>
</div>
</div>
<div class="mb-6">
<label class="form-label">Command:</label>
<input
type="text"
class="input-field"
.value=${this.workingDir}
@input=${this.handleWorkingDirChange}
placeholder="~/"
.value=${this.command}
@input=${this.handleCommandChange}
@keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleCreate()}
placeholder="zsh"
?disabled=${this.disabled || this.isCreating}
/>
<button
class="btn-secondary font-mono px-4"
@click=${this.handleBrowse}
?disabled=${this.disabled || this.isCreating}
>
Browse
</button>
</div>
</div>
<div class="mb-4">
<label class="form-label">Command:</label>
<input
type="text"
class="input-field"
.value=${this.command}
@input=${this.handleCommandChange}
@keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleCreate()}
placeholder="zsh"
?disabled=${this.disabled || this.isCreating}
/>
</div>
<div class="flex gap-4 mt-6">
<button
class="btn-ghost font-mono flex-1 py-3"