forked from wrenn/wrenn
Polish terminal tab: merge status bar into tab strip, normalize sizing
- Merge separate status bar into unified tab bar (one row of chrome instead of two) - Bump font/button/icon sizes to match rest of capsule page - VS Code-style tab separators with intelligent hiding around active tab - Hide tab bar when no sessions exist (empty state has its own CTA) - Fix xterm background gaps by painting viewport/screen backgrounds - Increase terminal font from 13px to 14px
This commit is contained in:
@ -148,8 +148,8 @@
|
||||
cursorStyle: 'bar',
|
||||
cursorInactiveStyle: 'outline',
|
||||
fontFamily: "'JetBrains Mono Variable', 'JetBrains Mono', monospace",
|
||||
fontSize: 13,
|
||||
lineHeight: 1.4,
|
||||
fontSize: 14,
|
||||
lineHeight: 1.35,
|
||||
letterSpacing: 0,
|
||||
theme: TERM_THEME,
|
||||
allowProposedApi: true,
|
||||
@ -360,6 +360,11 @@
|
||||
padding: 12px 4px 12px 16px;
|
||||
height: 100%;
|
||||
}
|
||||
/* Paint xterm's own background to cover any fractional-pixel gaps */
|
||||
.terminal-container :global(.xterm-viewport),
|
||||
.terminal-container :global(.xterm-screen) {
|
||||
background-color: #0a0c0b !important;
|
||||
}
|
||||
.terminal-container :global(.xterm-viewport) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(94, 140, 88, 0.18) transparent;
|
||||
@ -383,27 +388,50 @@
|
||||
.tab-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.term-tab {
|
||||
position: relative;
|
||||
}
|
||||
.term-tab::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25%;
|
||||
bottom: 25%;
|
||||
width: 1px;
|
||||
background: var(--color-border);
|
||||
}
|
||||
.term-tab:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
.term-tab-active::after {
|
||||
display: none;
|
||||
}
|
||||
/* Hide separator on tab right before active tab */
|
||||
.term-tab:has(+ .term-tab-active)::after {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="flex flex-1 flex-col min-h-0">
|
||||
{#if !isRunning}
|
||||
<div class="flex flex-1 items-center justify-center">
|
||||
<div class="flex flex-col items-center gap-4 text-center">
|
||||
<div class="flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite">
|
||||
<svg class="text-[var(--color-text-muted)]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<div class="flex flex-col items-center gap-5 text-center">
|
||||
<div class="flex h-16 w-16 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite">
|
||||
<svg class="text-[var(--color-text-muted)]" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-ui font-medium text-[var(--color-text-secondary)]">Terminal unavailable</span>
|
||||
<span class="text-meta text-[var(--color-text-muted)]">Start the capsule to connect</span>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<span class="text-body font-medium text-[var(--color-text-secondary)]">Terminal unavailable</span>
|
||||
<span class="text-ui text-[var(--color-text-muted)]">Start the capsule to connect</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Session tab bar -->
|
||||
<div class="flex items-center border-b border-[var(--color-border)] bg-[var(--color-bg-1)]">
|
||||
<div class="tab-scroll flex flex-1 items-center overflow-x-auto">
|
||||
<!-- Unified session bar: tabs + status integrated into one row (hidden when no sessions) -->
|
||||
<div class="flex items-stretch bg-[var(--color-bg-1)]" style:display={sessions.length === 0 ? 'none' : 'flex'}>
|
||||
<!-- Tabs -->
|
||||
<div class="tab-scroll flex items-stretch overflow-x-auto">
|
||||
{#each sessions as session (session.id)}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
@ -412,30 +440,34 @@
|
||||
role="tab"
|
||||
tabindex="0"
|
||||
aria-selected={session.id === activeSessionId}
|
||||
class="group relative flex shrink-0 cursor-pointer items-center gap-2 border-r border-[var(--color-border)] px-3.5 py-2 text-label transition-colors
|
||||
class="term-tab group flex shrink-0 cursor-pointer items-center gap-2.5 px-5 py-2.5 text-meta transition-colors
|
||||
{session.id === activeSessionId
|
||||
? 'bg-[var(--color-bg-0)] text-[var(--color-text-primary)]'
|
||||
: 'bg-[var(--color-bg-1)] text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-2)] hover:text-[var(--color-text-secondary)]'}"
|
||||
? 'term-tab-active bg-[var(--color-bg-0)] text-[var(--color-text-primary)]'
|
||||
: 'bg-[var(--color-bg-1)] text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-2)] hover:text-[var(--color-text-secondary)] border-b border-b-[var(--color-border)]'}"
|
||||
>
|
||||
{#if session.id === activeSessionId}
|
||||
<span class="absolute inset-x-0 bottom-0 h-px bg-[var(--color-accent)]"></span>
|
||||
{#if session.state === 'connected'}
|
||||
<span class="relative flex h-[7px] w-[7px] shrink-0">
|
||||
<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
|
||||
<span class="relative inline-flex h-[7px] w-[7px] rounded-full bg-[var(--color-accent)]"></span>
|
||||
</span>
|
||||
{:else if session.state === 'connecting'}
|
||||
<svg class="animate-spin shrink-0 text-[var(--color-text-tertiary)]" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
|
||||
{:else if session.state === 'error'}
|
||||
<span class="h-[7px] w-[7px] shrink-0 rounded-full bg-[var(--color-red)]"></span>
|
||||
{:else}
|
||||
<span class="h-[7px] w-[7px] shrink-0 rounded-full bg-[var(--color-text-muted)]"></span>
|
||||
{/if}
|
||||
|
||||
<span class="h-[6px] w-[6px] shrink-0 rounded-full {statusDot(session.state)}"></span>
|
||||
|
||||
<span class="font-mono">
|
||||
bash
|
||||
{#if session.ptyPid}
|
||||
<span class="text-[var(--color-text-muted)]">:{session.ptyPid}</span>
|
||||
{/if}
|
||||
bash{#if session.ptyPid}<span class="text-[var(--color-text-muted)]">:{session.ptyPid}</span>{/if}
|
||||
</span>
|
||||
|
||||
<button
|
||||
onclick={(e) => { e.stopPropagation(); closeSession(session.id); }}
|
||||
class="ml-0.5 flex h-4 w-4 items-center justify-center rounded-[2px] text-[var(--color-text-muted)] opacity-0 transition-all group-hover:opacity-100 hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-secondary)]"
|
||||
class="ml-0.5 flex h-5 w-5 items-center justify-center rounded-[3px] text-[var(--color-text-muted)] opacity-0 transition-all group-hover:opacity-100 hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-secondary)]"
|
||||
title="Close session"
|
||||
>
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
@ -443,74 +475,49 @@
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- New tab button -->
|
||||
<button
|
||||
onclick={createSession}
|
||||
class="flex shrink-0 items-center gap-1.5 px-3 py-2 text-label font-medium text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-bg-2)] hover:text-[var(--color-text-secondary)]"
|
||||
class="flex shrink-0 items-center justify-center aspect-square self-stretch border-b border-[var(--color-border)] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-bg-2)] hover:text-[var(--color-text-primary)]"
|
||||
title="New terminal session"
|
||||
>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Status bar for active session -->
|
||||
<!-- Spacer fills remaining width with bg-1, has bottom border like inactive area -->
|
||||
<div class="flex-1 border-b border-[var(--color-border)] bg-[var(--color-bg-1)]"></div>
|
||||
|
||||
<!-- Right-side status info (reconnect button, pty tag) -->
|
||||
{#if activeSession}
|
||||
<div class="flex items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-bg-1)] px-4 py-1.5">
|
||||
<div class="flex items-center gap-2.5">
|
||||
{#if activeSession.state === 'connected'}
|
||||
<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-accent)]/25 bg-[var(--color-accent-glow-mid)] px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-accent-mid)]">
|
||||
<span class="relative flex h-[5px] w-[5px] shrink-0">
|
||||
<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
|
||||
<span class="relative inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
|
||||
</span>
|
||||
Live
|
||||
</span>
|
||||
{:else if activeSession.state === 'connecting'}
|
||||
<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-border)] bg-[var(--color-bg-2)] px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]">
|
||||
<svg class="animate-spin" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
|
||||
Connecting
|
||||
</span>
|
||||
{:else if activeSession.state === 'error'}
|
||||
<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-red)]/25 bg-[var(--color-red)]/8 px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-red)]">
|
||||
Error
|
||||
</span>
|
||||
{#if activeSession.errorMessage}
|
||||
<span class="text-meta text-[var(--color-red)]/80">{activeSession.errorMessage}</span>
|
||||
{/if}
|
||||
{:else if activeSession.state === 'disconnected'}
|
||||
<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-border)] bg-[var(--color-bg-2)] px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">
|
||||
Disconnected
|
||||
</span>
|
||||
<div class="flex items-center gap-3 border-b border-[var(--color-border)] bg-[var(--color-bg-1)] pr-4">
|
||||
{#if activeSession.state === 'error' && activeSession.errorMessage}
|
||||
<span class="text-meta text-[var(--color-red)]/70">{activeSession.errorMessage}</span>
|
||||
{/if}
|
||||
|
||||
{#if activeSession.ptyTag}
|
||||
<span class="h-3 w-px bg-[var(--color-border)]"></span>
|
||||
<span class="font-mono text-badge text-[var(--color-text-muted)]">{activeSession.ptyTag}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
{#if activeSession.state === 'disconnected' || activeSession.state === 'error'}
|
||||
{#if activeSession.ptyTag}
|
||||
{#if (activeSession.state === 'disconnected' || activeSession.state === 'error') && activeSession.ptyTag}
|
||||
<button
|
||||
onclick={() => activeSession && reconnectSession(activeSession.id)}
|
||||
class="flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-border)] bg-[var(--color-bg-3)] px-2.5 py-1 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)]"
|
||||
class="flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-border)] bg-[var(--color-bg-3)] px-3 py-1 text-meta font-medium text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)]"
|
||||
>
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="1 4 1 10 7 10" /><polyline points="23 20 23 14 17 14" />
|
||||
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
|
||||
</svg>
|
||||
Reconnect
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if activeSession.ptyTag}
|
||||
<span class="font-mono text-label text-[var(--color-text-muted)]">{activeSession.ptyTag}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Terminal surfaces -->
|
||||
<div class="relative flex-1 min-h-0" bind:this={containerRef}>
|
||||
<div class="relative flex-1 min-h-0 bg-[var(--color-bg-0)]" bind:this={containerRef}>
|
||||
{#each sessions as session (session.id)}
|
||||
<div
|
||||
data-session-id={session.id}
|
||||
@ -521,21 +528,21 @@
|
||||
|
||||
{#if sessions.length === 0}
|
||||
<div class="flex h-full items-center justify-center">
|
||||
<div class="flex flex-col items-center gap-4 text-center">
|
||||
<div class="flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite">
|
||||
<svg class="text-[var(--color-text-muted)]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<div class="flex flex-col items-center gap-5 text-center">
|
||||
<div class="flex h-16 w-16 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite">
|
||||
<svg class="text-[var(--color-text-muted)]" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-ui font-medium text-[var(--color-text-secondary)]">No active sessions</span>
|
||||
<span class="text-meta text-[var(--color-text-muted)]">All terminal sessions have been closed</span>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<span class="text-body font-medium text-[var(--color-text-secondary)]">No active sessions</span>
|
||||
<span class="text-ui text-[var(--color-text-muted)]">All terminal sessions have been closed</span>
|
||||
</div>
|
||||
<button
|
||||
onclick={createSession}
|
||||
class="mt-1 flex items-center gap-2 rounded-[var(--radius-button)] border border-[var(--color-accent)]/30 bg-[var(--color-accent-glow-mid)] px-4 py-2 text-meta font-semibold text-[var(--color-accent-bright)] transition-all duration-150 hover:border-[var(--color-accent)]/50 hover:bg-[var(--color-accent)]/15 hover:-translate-y-px active:translate-y-0"
|
||||
class="mt-1 flex items-center gap-2 rounded-[var(--radius-button)] border border-[var(--color-accent)]/30 bg-[var(--color-accent-glow-mid)] px-5 py-2.5 text-ui font-semibold text-[var(--color-accent-bright)] transition-all duration-150 hover:border-[var(--color-accent)]/50 hover:bg-[var(--color-accent)]/15 hover:-translate-y-px active:translate-y-0"
|
||||
>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
New session
|
||||
|
||||
Reference in New Issue
Block a user