Skip to content

Commit 31a85d7

Browse files
BunsDevBunsDev
committed
feat: enhance Editor and Terminal UI with improved layouts and functionality
- Redesigned the shell header for better mobile and desktop experiences, including a new status display and workspace label. - Updated the TerminalPane header with enhanced styling, including a focus button and improved terminal information display. - Added functionality for terminal background color customization and improved button interactions for terminal controls.
1 parent 9222808 commit 31a85d7

2 files changed

Lines changed: 297 additions & 91 deletions

File tree

‎app/page.tsx‎

Lines changed: 129 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -506,8 +506,134 @@ export default function EditorLayout() {
506506
}}
507507
/>
508508

509-
{/* View navigation bar — folder tabs */}
510-
{isMobile ? (
509+
{/* Shell header / mobile title bar */}
510+
{!isMobile ? (
511+
<div
512+
className={`border-b border-[var(--border)] px-4 py-3 ${isMacTauri ? 'pl-20 pr-4' : ''}`}
513+
data-tauri-drag-region={isMacTauri ? true : undefined}
514+
style={{ background: 'color-mix(in srgb, var(--header-glass-bg) 92%, transparent)' }}
515+
>
516+
<div className="flex items-center justify-between gap-4">
517+
<div className="min-w-0 flex items-center gap-3">
518+
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-[color-mix(in_srgb,var(--border)_88%,transparent)] bg-[color-mix(in_srgb,var(--bg-elevated)_84%,transparent)] text-[var(--brand)] shadow-sm">
519+
<KnotLogo size={18} />
520+
</div>
521+
<div className="min-w-0">
522+
<div className="flex items-center gap-2">
523+
<span className="truncate text-[17px] font-semibold tracking-[-0.03em] text-[var(--text-primary)]">
524+
{workspaceLabel === 'KnotCode' ? 'Knot Code' : workspaceLabel}
525+
</span>
526+
<span
527+
className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium ${
528+
status === 'connected'
529+
? 'border-[color-mix(in_srgb,var(--success)_30%,transparent)] bg-[color-mix(in_srgb,var(--success)_10%,transparent)] text-[var(--success)]'
530+
: status === 'connecting'
531+
? 'border-[color-mix(in_srgb,var(--warning)_30%,transparent)] bg-[color-mix(in_srgb,var(--warning)_10%,transparent)] text-[var(--warning)]'
532+
: 'border-[var(--border)] bg-[color-mix(in_srgb,var(--bg-elevated)_72%,transparent)] text-[var(--text-disabled)]'
533+
}`}
534+
>
535+
<span
536+
className={`h-1.5 w-1.5 rounded-full ${
537+
status === 'connected'
538+
? 'bg-[var(--success)]'
539+
: status === 'connecting'
540+
? 'bg-[var(--warning)] animate-pulse'
541+
: 'bg-[var(--text-disabled)]'
542+
}`}
543+
/>
544+
{status === 'connected'
545+
? 'Gateway live'
546+
: status === 'connecting'
547+
? 'Gateway waking'
548+
: 'Gateway offline'}
549+
</span>
550+
{terminalVisible && (
551+
<span className="inline-flex items-center gap-1 rounded-full border border-[color-mix(in_srgb,var(--brand)_24%,var(--border))] bg-[color-mix(in_srgb,var(--brand)_8%,transparent)] px-2 py-0.5 text-[10px] font-medium text-[var(--text-secondary)]">
552+
<Icon
553+
icon="lucide:terminal"
554+
width={11}
555+
height={11}
556+
className="text-[var(--brand)]"
557+
/>
558+
Terminal ready
559+
</span>
560+
)}
561+
</div>
562+
<p className="mt-0.5 truncate text-[12.5px] text-[var(--text-secondary)]">
563+
Desktop coding cockpit with chat, editor, and first-class terminal workflows.
564+
</p>
565+
</div>
566+
</div>
567+
568+
<div className="flex items-center gap-3">
569+
<div className="hidden lg:flex items-center rounded-[22px] border border-[color-mix(in_srgb,var(--border)_92%,transparent)] bg-[color-mix(in_srgb,var(--bg-elevated)_84%,transparent)] p-1 shadow-[var(--shadow-xs)]">
570+
{MODE_BUTTONS.map((modeButton) => {
571+
const active = mode === modeButton.id
572+
return (
573+
<button
574+
key={modeButton.id}
575+
type="button"
576+
onClick={() => setMode(modeButton.id)}
577+
className={`shell-mode-controller-btn ${active ? 'shell-mode-controller-btn--active' : ''}`}
578+
title={`${modeButton.label} mode`}
579+
>
580+
<Icon icon={modeButton.icon} width={15} height={15} />
581+
<span>{modeButton.label}</span>
582+
</button>
583+
)
584+
})}
585+
</div>
586+
587+
<div className="hidden md:flex items-center rounded-[22px] border border-[color-mix(in_srgb,var(--border)_92%,transparent)] bg-[color-mix(in_srgb,var(--bg-elevated)_84%,transparent)] p-1 shadow-[var(--shadow-xs)]">
588+
{VIEW_CYCLE.map((v) => {
589+
const isActive = activeView === v || (v === 'terminal' && useCenteredTerminal)
590+
const meta = VIEW_ICONS[v]
591+
return (
592+
<button
593+
key={v}
594+
type="button"
595+
onClick={() => {
596+
if (v === 'terminal') layout.show('terminal')
597+
setView(v)
598+
}}
599+
className={`shell-view-controller-btn ${isActive ? 'shell-view-controller-btn--active' : ''}`}
600+
title={meta.label}
601+
>
602+
<Icon icon={meta.icon} width={15} height={15} />
603+
<span>{meta.label}</span>
604+
</button>
605+
)
606+
})}
607+
</div>
608+
609+
{!modeSpec.terminalCenter && (
610+
<button
611+
type="button"
612+
onClick={() => layout.toggle('terminal')}
613+
className={`inline-flex h-10 items-center gap-2 rounded-2xl border px-3 text-[12px] font-medium transition ${
614+
terminalVisible
615+
? 'border-[color-mix(in_srgb,var(--brand)_36%,var(--border))] bg-[color-mix(in_srgb,var(--brand)_10%,transparent)] text-[var(--brand)]'
616+
: 'border-[var(--border)] bg-[color-mix(in_srgb,var(--bg)_92%,transparent)] text-[var(--text-secondary)] hover:bg-[color-mix(in_srgb,var(--text-primary)_5%,transparent)] hover:text-[var(--text-primary)]'
617+
}`}
618+
title={`${terminalVisible ? 'Hide' : 'Show'} terminal`}
619+
>
620+
<Icon icon="lucide:terminal" width={16} height={16} />
621+
<span>{terminalVisible ? 'Hide Terminal' : 'Show Terminal'}</span>
622+
</button>
623+
)}
624+
625+
<button
626+
type="button"
627+
onClick={() => setView('settings')}
628+
className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-[var(--border)] bg-[color-mix(in_srgb,var(--bg)_92%,transparent)] text-[var(--text-secondary)] transition hover:bg-[color-mix(in_srgb,var(--text-primary)_5%,transparent)] hover:text-[var(--text-primary)]"
629+
title="Settings"
630+
>
631+
<Icon icon="lucide:settings-2" width={17} height={17} />
632+
</button>
633+
</div>
634+
</div>
635+
</div>
636+
) : (
511637
<div
512638
className="shrink-0 border-b border-[var(--border)] bg-[color-mix(in_srgb,var(--bg-elevated)_94%,black)] px-4 pb-1.5"
513639
style={{ paddingTop: 'calc(env(safe-area-inset-top) + 0.25rem)', minHeight: 44 }}
@@ -557,12 +683,7 @@ export default function EditorLayout() {
557683

558684
{/* Gateway status text removed — dot in header is sufficient */}
559685
</div>
560-
) : isMacTauri ? (
561-
<div
562-
data-tauri-drag-region
563-
className="shell-topbar flex items-center h-8 shrink-0 px-4 gap-2 tauri-drag-region pl-20"
564-
/>
565-
) : null}
686+
)}
566687

567688
{showWorkflowEditorTabs && <EditorTabs onTabSelect={() => setView('editor')} />}
568689

0 commit comments

Comments
 (0)