| author |  Julius Marminge <julius0216@outlook.com> 2026-02-12 15:43:05-08:00 |
| committer | Julius Marminge <julius0216@outlook.com> 2026-02-12 15:43:05-08:00 |
| log | 86e7bd000c2b13fb1f3fbf946d61a6ed16b6fa87 |
| tree | 89159e493276cb139aec577bd412f847901c2522 |
| parent | 1cad53dae43aa9d719e190f88f2a3e1ce549942a |
Align Electron drag headers and sidebar branding spacing
- Update `ChatView` so Electron uses a fixed 52px drag titlebar, including empty-thread state.
- Make `DiffPanel` header use the same Electron drag-region sizing.
- Consolidate Sidebar drag-region into branding row and remove separate spacer div.
- Co-authored-by: codex <codex@users.noreply.github.com>3 files changed, 10 insertions(+), 6 deletions(-)
apps
web
src
components
apps/web/src/components/ChatView.tsx+6-2
| ... | @@ -863,7 +863,11 @@ export default function ChatView() { | ... | @@ -863,7 +863,11 @@ export default function ChatView() { |
| 863 | if (!activeThread) { | 863 | if (!activeThread) { |
| 864 | return ( | 864 | return ( |
| 865 | <div className="flex min-h-0 flex-1 flex-col bg-background text-muted-foreground/40"> | 865 | <div className="flex min-h-0 flex-1 flex-col bg-background text-muted-foreground/40"> |
| 866 | {isElectron && <div className="drag-region h-[52px] shrink-0" />} | 866 | {isElectron && ( |
| 867 | <div className="drag-region flex h-[52px] shrink-0 items-center border-b border-border px-5"> | ||
| 868 | <span className="text-xs text-muted-foreground/50">No active thread</span> | ||
| 869 | </div> | ||
| 870 | )} | ||
| 867 | <div className="flex flex-1 items-center justify-center"> | 871 | <div className="flex flex-1 items-center justify-center"> |
| 868 | <div className="text-center"> | 872 | <div className="text-center"> |
| 869 | <p className="text-sm">Select a thread or create a new one to get started.</p> | 873 | <p className="text-sm">Select a thread or create a new one to get started.</p> |
| ... | @@ -877,7 +881,7 @@ export default function ChatView() { | ... | @@ -877,7 +881,7 @@ export default function ChatView() { |
| 877 | <div className="flex min-h-0 flex-1 flex-col bg-background"> | 881 | <div className="flex min-h-0 flex-1 flex-col bg-background"> |
| 878 | {/* Top bar */} | 882 | {/* Top bar */} |
| 879 | <header | 883 | <header |
| 880 | className={`flex items-center justify-between border-b border-border px-5 pb-3 ${isElectron ? "drag-region pt-[28px]" : "pt-3"}`} | 884 | className={`flex items-center justify-between border-b border-border px-5 ${isElectron ? "drag-region h-[52px]" : "py-3"}`} |
| 881 | > | 885 | > |
| 882 | <div className="flex items-center gap-3"> | 886 | <div className="flex items-center gap-3"> |
| 883 | <h2 className="text-sm font-medium text-foreground">{activeThread.title}</h2> | 887 | <h2 className="text-sm font-medium text-foreground">{activeThread.title}</h2> |
apps/web/src/components/DiffPanel.tsx+1-1
| ... | @@ -8,7 +8,7 @@ export default function DiffPanel() { | ... | @@ -8,7 +8,7 @@ export default function DiffPanel() { |
| 8 | <aside className="flex h-full w-[400px] shrink-0 flex-col border-l border-border bg-card"> | 8 | <aside className="flex h-full w-[400px] shrink-0 flex-col border-l border-border bg-card"> |
| 9 | {/* Header */} | 9 | {/* Header */} |
| 10 | <div | 10 | <div |
| 11 | className={`flex items-center justify-between border-b border-border px-4 pb-3 ${isElectron ? "drag-region pt-[28px]" : "pt-3"}`} | 11 | className={`flex items-center justify-between border-b border-border px-4 ${isElectron ? "drag-region h-[52px]" : "py-3"}`} |
| 12 | > | 12 | > |
| 13 | <h3 className="text-xs font-medium text-foreground">Uncommitted changes</h3> | 13 | <h3 className="text-xs font-medium text-foreground">Uncommitted changes</h3> |
| 14 | <button | 14 | <button |
apps/web/src/components/Sidebar.tsx+3-3
| ... | @@ -237,10 +237,10 @@ export default function Sidebar() { | ... | @@ -237,10 +237,10 @@ export default function Sidebar() { |
| 237 | 237 | ||
| 238 | return ( | 238 | return ( |
| 239 | <aside className="sidebar flex h-full w-[260px] shrink-0 flex-col border-r border-border bg-card"> | 239 | <aside className="sidebar flex h-full w-[260px] shrink-0 flex-col border-r border-border bg-card"> |
| 240 | {/* Drag region / traffic light space (Electron only) */} | ||
| 241 | {isElectron && <div className="drag-region h-[52px] shrink-0" />} | ||
| 242 | {/* Branding */} | 240 | {/* Branding */} |
| 243 | <div className={`flex items-center gap-2.5 px-4 pb-4 ${isElectron ? "" : "pt-4"}`}> | 241 | <div |
| 242 | className={`flex items-center gap-2.5 px-4 ${isElectron ? "drag-region h-[52px] pl-[76px]" : "py-4"}`} | ||
| 243 | > | ||
| 244 | <span className="flex-1 text-sm font-semibold tracking-tight text-foreground"> | 244 | <span className="flex-1 text-sm font-semibold tracking-tight text-foreground"> |
| 245 | T3 <span className="font-normal text-muted-foreground">Code</span> | 245 | T3 <span className="font-normal text-muted-foreground">Code</span> |
| 246 | </span> | 246 | </span> |