sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-06-28 05:29:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

redesign new session dialog

Browse source
This commit is contained in:
Peter Steinberger 2025-06-20 16:54:09 +02:00
parent d1ecdaac8e
commit b669b63fc9
1 changed files with 72 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,6 +26,16 @@ export class SessionCreateForm extends LitElement {
@state() private isCreating = false;
@state() private showFileBrowser = false;
@state() private selectedQuickStart = 'zsh';
private quickStartCommands = [
{ label: 'claude', command: 'claude' },
{ label: 'zsh', command: 'zsh' },
{ label: 'bash', command: 'bash' },
{ label: 'python3', command: 'python3' },
{ label: 'node', command: 'node' },
{ label: 'npm run dev', command: 'npm run dev' },
];
private readonly STORAGE_KEY_WORKING_DIR = 'vibetunnel_last_working_dir';
private readonly STORAGE_KEY_COMMAND = 'vibetunnel_last_command';
@ -225,6 +235,11 @@ export class SessionCreateForm extends LitElement {
this.dispatchEvent(new CustomEvent('cancel'));
}
private handleQuickStart(command: string) {
this.command = command;
this.selectedQuickStart = command;
}
render() {
if (!this.visible) {
return html``;
@ -232,14 +247,15 @@ 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 lg:w-[768px] max-w-full mx-4">
<div class="modal-content font-mono text-sm w-96 lg:w-[576px] 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>
<h2 class="text-accent-green text-lg font-bold">New Session</h2>
</div>
<div class="p-4 lg:p-8">
<!-- Session Name -->
<div class="mb-6">
<label class="form-label">Session Name (optional):</label>
<label class="form-label">Session Name (Optional):</label>
<input
type="text"
class="input-field"
@ -250,43 +266,68 @@ export class SessionCreateForm extends LitElement {
/>
</div>
<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>
<!-- Command -->
<div class="mb-6">
<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="mb-6">
<label class="form-label">Command:</label>
<!-- Working Directory -->
<div class="mb-6">
<label class="form-label">Working Directory:</label>
<div class="flex gap-4">
<input
type="text"
class="input-field"
.value=${this.command}
@input=${this.handleCommandChange}
@keydown=${(e: KeyboardEvent) => e.key === 'Enter' && this.handleCreate()}
placeholder="zsh"
.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}
>
📁
</button>
</div>
</div>
<div class="flex gap-4 mt-6">
<!-- Quick Start Section -->
<div class="mb-6">
<label class="form-label text-dark-text-secondary uppercase text-xs tracking-wider"
>Quick Start</label
>
<div class="grid grid-cols-2 gap-3 mt-3">
${this.quickStartCommands.map(
({ label, command }) => html`
<button
@click=${() => this.handleQuickStart(command)}
class="px-4 py-3 rounded border text-left transition-all
${this.command === command
? 'bg-accent-green bg-opacity-20 border-accent-green text-accent-green'
: 'bg-dark-border bg-opacity-10 border-dark-border text-dark-text hover:bg-opacity-20 hover:border-dark-text-secondary'}"
?disabled=${this.disabled || this.isCreating}
>
${label === 'claude' ? '✨ ' : ''}${label === 'npm run dev'
? '▶️ '
: ''}${label}
</button>
`
)}
</div>
</div>
<div class="flex gap-4 mt-8">
<button
class="btn-ghost font-mono flex-1 py-3"
@click=${this.handleCancel}