Skip to content

Commit 4f00d43

Browse files
BunsDevBunsDev
committed
refactor: update component styles and improve layout consistency
- Modified the ChatHeader component to enhance layout responsiveness and visual clarity by adjusting flex properties and truncating long text. - Updated the ChatHome component to refine spacing, padding, and margin for better alignment and user experience across various screen sizes. - Changed the import path in next-env.d.ts to point to the development types directory for improved type definitions during development.
1 parent d88550f commit 4f00d43

4 files changed

Lines changed: 92 additions & 92 deletions

File tree

‎components/agent-panel.tsx‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1642,44 +1642,48 @@ export function AgentPanel() {
16421642
contextTokens={contextTokens}
16431643
/>
16441644
{messages.length > 0 && (
1645-
<div className="flex items-center justify-between px-3 py-0.5 border-b border-[var(--border)] bg-[var(--bg-elevated)] shrink-0">
1646-
<div className="flex items-center gap-1">
1645+
<div className="flex items-center justify-between border-b border-[var(--border)] bg-[var(--bg-elevated)] px-2.5 py-1 shrink-0">
1646+
<div className="flex min-w-0 items-center gap-1.5">
16471647
{/* Font size controls */}
1648-
<button
1649-
onClick={decreaseFontSize}
1650-
className="p-1 rounded text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] transition-colors cursor-pointer"
1651-
title="Decrease text size (⌘-)"
1652-
>
1653-
<Icon icon="lucide:minus" width={12} height={12} />
1654-
</button>
1655-
<span className="text-[9px] font-mono text-[var(--text-disabled)] w-5 text-center tabular-nums select-none">
1656-
{chatFontSize}
1657-
</span>
1658-
<button
1659-
onClick={increaseFontSize}
1660-
className="p-1 rounded text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] transition-colors cursor-pointer"
1661-
title="Increase text size (⌘+)"
1662-
>
1663-
<Icon icon="lucide:plus" width={12} height={12} />
1664-
</button>
1665-
1666-
<span className="w-px h-3.5 bg-[var(--border)] mx-1" />
1667-
1668-
{/* Font family picker */}
1669-
{FONT_OPTIONS.map((f) => (
1648+
<div className="inline-flex items-center gap-0.5">
1649+
<button
1650+
onClick={decreaseFontSize}
1651+
className="flex h-5 w-5 items-center justify-center rounded text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] transition-colors cursor-pointer"
1652+
title="Decrease text size (⌘-)"
1653+
>
1654+
<Icon icon="lucide:minus" width={12} height={12} />
1655+
</button>
1656+
<span className="w-6 select-none text-center text-[9px] font-mono tabular-nums text-[var(--text-disabled)]">
1657+
{chatFontSize}
1658+
</span>
16701659
<button
1671-
key={f.id}
1672-
onClick={() => setChatFontFamily(f.id)}
1673-
className={`px-1.5 py-0.5 rounded text-[9px] font-medium transition-colors cursor-pointer ${
1674-
chatFontFamily === f.id
1675-
? 'text-[var(--brand)] bg-[color-mix(in_srgb,var(--brand)_10%,transparent)]'
1676-
: 'text-[var(--text-disabled)] hover:text-[var(--text-tertiary)]'
1677-
}`}
1678-
title={`${f.label} font`}
1660+
onClick={increaseFontSize}
1661+
className="flex h-5 w-5 items-center justify-center rounded text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] transition-colors cursor-pointer"
1662+
title="Increase text size (⌘+)"
16791663
>
1680-
{f.label}
1664+
<Icon icon="lucide:plus" width={12} height={12} />
16811665
</button>
1682-
))}
1666+
</div>
1667+
1668+
<span className="mx-0.5 h-3.5 w-px bg-[var(--border)]" />
1669+
1670+
{/* Font family picker */}
1671+
<div className="flex min-w-0 items-center gap-0.5">
1672+
{FONT_OPTIONS.map((f) => (
1673+
<button
1674+
key={f.id}
1675+
onClick={() => setChatFontFamily(f.id)}
1676+
className={`whitespace-nowrap rounded px-1.5 py-[2px] text-[9px] font-medium transition-colors cursor-pointer ${
1677+
chatFontFamily === f.id
1678+
? 'text-[var(--brand)] bg-[color-mix(in_srgb,var(--brand)_10%,transparent)]'
1679+
: 'text-[var(--text-disabled)] hover:text-[var(--text-tertiary)]'
1680+
}`}
1681+
title={`${f.label} font`}
1682+
>
1683+
{f.label}
1684+
</button>
1685+
))}
1686+
</div>
16831687
</div>
16841688
<button
16851689
onClick={handleClear}

‎components/chat-header.tsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export function ChatHeader({
3434
return (
3535
<div className="shrink-0">
3636
<div className="flex items-center justify-between h-10 px-3 border-b border-[var(--border)] bg-[var(--bg-elevated)]">
37-
<div className="flex items-center gap-2 min-w-0">
37+
<div className="flex flex-1 min-w-0 items-center gap-2">
3838
{/* Streaming status indicator */}
3939
{isStreaming ? (
4040
<span className="relative flex h-2.5 w-2.5 shrink-0">
@@ -54,38 +54,42 @@ export function ChatHeader({
5454
</span>
5555
{repoName && (
5656
<>
57-
<span className="text-[var(--text-disabled)]">&middot;</span>
58-
<div className="flex items-center gap-1.5 shrink-0">
57+
<span className="shrink-0 text-[var(--text-disabled)]">&middot;</span>
58+
<div className="flex min-w-0 items-center gap-1.5">
5959
<Icon
6060
icon="lucide:git-branch"
6161
width={12}
6262
height={12}
63-
className="text-[var(--text-disabled)]"
63+
className="shrink-0 text-[var(--text-disabled)]"
6464
/>
65-
<span className="text-[12px] font-mono text-[var(--text-tertiary)]">
65+
<span className="max-w-[180px] truncate text-[12px] font-mono text-[var(--text-tertiary)]">
6666
{repoName}
6767
</span>
6868
{branchName && (
69-
<span className="text-[11px] font-mono text-[var(--text-disabled)]">
69+
<span className="max-w-[120px] truncate whitespace-nowrap text-[11px] font-mono text-[var(--text-disabled)]">
7070
/{branchName}
7171
</span>
7272
)}
7373
</div>
7474
</>
7575
)}
7676
</div>
77-
<div className="flex items-center gap-2">
77+
<div className="ml-2 flex shrink-0 items-center gap-1.5">
7878
{/* Model badge */}
7979
{modelName && (
80-
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[9px] font-mono bg-[color-mix(in_srgb,var(--brand)_8%,transparent)] border border-[color-mix(in_srgb,var(--brand)_15%,transparent)] text-[var(--text-tertiary)]">
80+
<span className="inline-flex items-center gap-1 whitespace-nowrap rounded-md border border-[color-mix(in_srgb,var(--brand)_15%,transparent)] bg-[color-mix(in_srgb,var(--brand)_8%,transparent)] px-2 py-0.5 text-[9px] font-mono text-[var(--text-tertiary)]">
8181
<Icon icon="lucide:sparkles" width={9} height={9} className="text-[var(--brand)]" />
82-
{modelName
83-
.replace(/^.*\//, '')
84-
.replace(/(claude-|gpt-)/, '')
85-
.slice(0, 16)}
82+
<span className="max-w-[90px] truncate">
83+
{modelName
84+
.replace(/^.*\//, '')
85+
.replace(/(claude-|gpt-)/, '')
86+
.slice(0, 16)}
87+
</span>
8688
</span>
8789
)}
88-
<span className="text-[11px] text-[var(--text-disabled)]">{messageCount} messages</span>
90+
<span className="whitespace-nowrap text-[11px] text-[var(--text-disabled)]">
91+
{messageCount} messages
92+
</span>
8993
</div>
9094
</div>
9195

‎components/chat-home.tsx‎

Lines changed: 33 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -192,11 +192,11 @@ export const ChatHome = memo(function ChatHome({
192192
return (
193193
<div className="flex-1 overflow-y-auto relative">
194194
<KnotBackground />
195-
<div className="min-h-full w-full max-w-[720px] mx-auto flex flex-col justify-center px-6 py-12 relative z-[1]">
195+
<div className="min-h-full w-full max-w-[720px] mx-auto flex flex-col justify-center px-4 sm:px-6 py-8 sm:py-10 md:py-12 relative z-[1]">
196196
{/* Header — "Let's build" */}
197-
<div className="flex flex-col items-center mb-8">
197+
<div className="flex flex-col items-center mb-6 sm:mb-7">
198198
<div
199-
className={`mb-4 ${
199+
className={`mb-3 ${
200200
status === 'connected' ? 'logo-breathe-connected' : 'logo-breathe-idle'
201201
}`}
202202
>
@@ -210,15 +210,15 @@ export const ChatHome = memo(function ChatHome({
210210
{/* Workspace dropdown */}
211211
<button
212212
onClick={onSelectFolder}
213-
className="codex-workspace-dropdown mt-3 inline-flex items-center gap-1.5 text-[14px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors cursor-pointer"
213+
className="codex-workspace-dropdown mt-2.5 inline-flex items-center gap-1.5 text-[14px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors cursor-pointer"
214214
>
215215
{repoShort ?? 'Select workspace'}
216216
<Icon icon="lucide:chevron-down" width={14} height={14} className="opacity-50" />
217217
</button>
218218
</div>
219219

220220
{/* "Explore more" link */}
221-
<div className="flex justify-end mb-3">
221+
<div className="flex justify-end mb-2">
222222
<button
223223
onClick={() => emit('open-folder')}
224224
className="text-[12px] text-[var(--text-disabled)] hover:text-[var(--text-secondary)] transition-colors cursor-pointer"
@@ -227,36 +227,31 @@ export const ChatHome = memo(function ChatHome({
227227
</button>
228228
</div>
229229

230-
{/* Suggestion cards — 2-up, center odd last card */}
231-
<div className="codex-suggestion-grid flex flex-wrap gap-3 mb-6">
232-
{suggestions.map((card, i) => {
233-
const isOddTail =
234-
suggestions.length > 1 && suggestions.length % 2 === 1 && i === suggestions.length - 1
235-
236-
return (
237-
<button
238-
key={i}
239-
onClick={() => onSend(card.label, agentMode)}
240-
className={`codex-suggestion-card group flex flex-col gap-3 p-4 rounded-xl text-left cursor-pointer border border-[var(--border)] bg-[color-mix(in_srgb,var(--bg-elevated)_70%,transparent)] backdrop-blur-sm hover:border-[var(--text-disabled)] transition-all w-full sm:w-[calc(50%-0.375rem)] ${isOddTail ? 'sm:mx-auto' : ''}`}
230+
{/* Suggestion cards — 1-up mobile, 3-up desktop */}
231+
<div className="codex-suggestion-grid grid grid-cols-1 sm:grid-cols-3 gap-2.5 sm:gap-3 mb-4 sm:mb-5">
232+
{suggestions.map((card, i) => (
233+
<button
234+
key={i}
235+
onClick={() => onSend(card.label, agentMode)}
236+
className="codex-suggestion-card group flex flex-col gap-2.5 p-3.5 sm:p-4 rounded-xl text-left cursor-pointer border border-[var(--border)] bg-[color-mix(in_srgb,var(--bg-elevated)_70%,transparent)] backdrop-blur-sm hover:border-[var(--text-disabled)] transition-all w-full"
237+
>
238+
<div
239+
className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
240+
style={{ background: card.bg }}
241241
>
242-
<div
243-
className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
244-
style={{ background: card.bg }}
245-
>
246-
<Icon
247-
icon={card.icon}
248-
width={16}
249-
height={16}
250-
style={{ color: card.color }}
251-
className="opacity-80 group-hover:opacity-100 transition-opacity"
252-
/>
253-
</div>
254-
<p className="text-[12px] text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] leading-relaxed transition-colors">
255-
{card.label}
256-
</p>
257-
</button>
258-
)
259-
})}
242+
<Icon
243+
icon={card.icon}
244+
width={16}
245+
height={16}
246+
style={{ color: card.color }}
247+
className="opacity-80 group-hover:opacity-100 transition-opacity"
248+
/>
249+
</div>
250+
<p className="text-[12px] text-[var(--text-secondary)] group-hover:text-[var(--text-primary)] leading-relaxed transition-colors">
251+
{card.label}
252+
</p>
253+
</button>
254+
))}
260255
</div>
261256

262257
{/* Composer */}
@@ -286,7 +281,7 @@ export const ChatHome = memo(function ChatHome({
286281
: 'Describe what you want to build…'
287282
}
288283
aria-label="Chat input"
289-
className="w-full bg-transparent px-4 pt-4 pb-2 text-[14px] leading-[1.6] text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] outline-none resize-none min-h-[48px] max-h-[200px] overflow-y-auto"
284+
className="w-full bg-transparent px-4 pt-3.5 pb-2 text-[14px] leading-[1.6] text-[var(--text-primary)] placeholder:text-[var(--text-disabled)] outline-none resize-none min-h-[48px] max-h-[200px] overflow-y-auto"
290285
/>
291286

292287
{/* Image previews */}
@@ -313,7 +308,7 @@ export const ChatHome = memo(function ChatHome({
313308
)}
314309

315310
{/* Bottom toolbar — Codex-style pill bar */}
316-
<div className="px-3 pb-3 pt-1">
311+
<div className="px-3 pb-2.5 pt-1">
317312
<div className="flex items-center justify-between gap-2">
318313
<div className="flex items-center gap-2 flex-wrap">
319314
{/* + button */}
@@ -377,7 +372,7 @@ export const ChatHome = memo(function ChatHome({
377372

378373
{/* Workspace setup (no workspace) */}
379374
{!hasWorkspace && (
380-
<div className="mt-8 space-y-4">
375+
<div className="mt-6 sm:mt-8 space-y-3 sm:space-y-4">
381376
<div className="h-px bg-[var(--border)]" />
382377
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
383378
<button
@@ -427,7 +422,7 @@ export const ChatHome = memo(function ChatHome({
427422
)}
428423

429424
{/* Footer */}
430-
<div className="mt-8 flex justify-center">
425+
<div className="mt-6 sm:mt-8 flex justify-center">
431426
<span className="text-[10px] font-mono tracking-[0.08em] text-[var(--text-disabled)] opacity-40 uppercase">
432427
KnotCode
433428
</span>

‎components/views/editor-view.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { useLayout, usePanelResize } from '@/context/layout-context'
1212
import { EditorTabs } from '@/components/editor-tabs'
1313
import { FloatingPanel } from '@/components/floating-panel'
1414
import { KnotLogo } from '@/components/knot-logo'
15+
import { KnotBackground } from '@/components/knot-background'
1516
import { isTauri } from '@/lib/tauri'
1617
import { emit } from '@/lib/events'
1718

@@ -142,7 +143,7 @@ export function EditorView() {
142143
)
143144

144145
return (
145-
<div className="flex flex-1 min-h-0 min-w-0 overflow-hidden relative">
146+
<div className="flex flex-1 min-h-0 min-w-0 overflow-hidden relative bg-[var(--sidebar-bg)]">
146147
{/* ── Editor collapsed: narrow toggle strip ── */}
147148
{editorCollapsed ? (
148149
<div className="flex flex-col items-center w-[52px] shrink-0 bg-[var(--bg-elevated)] border-r border-[var(--border)]">
@@ -250,12 +251,8 @@ export function EditorView() {
250251
</>
251252
) : (
252253
<div className="welcome-screen flex-1 flex flex-col items-center justify-center relative overflow-hidden select-none">
253-
{/* Ambient background effects */}
254-
<div className="absolute inset-0 pointer-events-none">
255-
<div className="welcome-orb welcome-orb--primary" />
256-
<div className="welcome-orb welcome-orb--secondary" />
257-
<div className="welcome-grid" />
258-
</div>
254+
{/* Match chat background styling for visual consistency */}
255+
<KnotBackground />
259256

260257
<div className="relative z-10 flex flex-col items-center gap-8 max-w-[480px] px-6">
261258
{/* Logo hero */}

0 commit comments

Comments
 (0)