From 0dd84dd2f3dbf301f3ec20ec38f92e4fc1c3f0dd Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Thu, 21 May 2026 05:43:05 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Refine=20desktop=20UI=20to=20match?=
 =?UTF-8?q?=20Claude=20Code=20/=20Cursor=20aesthetic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Updated global.css to use zinc-based neutral hex codes for background and surfaces
- Refined App.tsx layout to remove shadows and flatten sidebars
- Repositioned model selector directly into the top header bar
- Redesigned ChatPanel.tsx empty state with minimalist buttons and clean heading
- Rebuilt chat input as a floating, rounded-3xl pill design
- Adjusted ChatHistory padding and hover states for a flatter, modern look
---
 packages/desktop/src/renderer/App.tsx         | 19 +++--
 .../src/renderer/components/ChatHistory.tsx   | 13 ++--
 .../src/renderer/components/ChatPanel.tsx     | 77 +++++++++----------
 .../desktop/src/renderer/styles/global.css    |  4 +-
 4 files changed, 56 insertions(+), 57 deletions(-)

diff --git a/packages/desktop/src/renderer/App.tsx b/packages/desktop/src/renderer/App.tsx
index 3a76459..3ce2516 100644
--- a/packages/desktop/src/renderer/App.tsx
+++ b/packages/desktop/src/renderer/App.tsx
@@ -333,13 +333,16 @@ export default function App() {
           >
             <PanelLeft className="h-4 w-4" />
           </button>
-          <span className="text-sm font-semibold tracking-tight text-xibe-text-secondary">XibeCode</span>
-          <button
-            onClick={() => setSettingsOpen(true)}
-            className="flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text transition-colors"
-          >
-            <span className="truncate max-w-[150px]">{activeModel.split('/').pop() || 'No model'}</span>
-          </button>
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold tracking-tight text-xibe-text">XibeCode</span>
+            <span className="text-xibe-text-dim text-xs">/</span>
+            <button
+              onClick={() => setSettingsOpen(true)}
+              className="flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[13px] text-xibe-text-secondary hover:bg-xibe-surface hover:text-xibe-text transition-colors"
+            >
+              <span className="truncate max-w-[150px]">{activeModel.split('/').pop() || 'No model'}</span>
+            </button>
+          </div>
         </div>
 
         <div className="flex items-center gap-1.5">
@@ -369,7 +372,7 @@ export default function App() {
       <div className="flex flex-1 min-h-0 overflow-hidden relative">
         {/* Left panel: Chat history + settings shortcut */}
         <aside
-          className="shrink-0 bg-xibe-bg flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out border-r border-xibe-border-subtle"
+          className="shrink-0 bg-xibe-surface flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out border-r border-xibe-border-subtle"
           style={{ width: leftPanelOpen ? 240 : 0 }}
         >
             <div className="flex-1 min-h-0 overflow-y-auto p-3">
diff --git a/packages/desktop/src/renderer/components/ChatHistory.tsx b/packages/desktop/src/renderer/components/ChatHistory.tsx
index 88865ab..3cf5798 100644
--- a/packages/desktop/src/renderer/components/ChatHistory.tsx
+++ b/packages/desktop/src/renderer/components/ChatHistory.tsx
@@ -70,14 +70,14 @@ const ChatHistory = memo(function ChatHistory({ activeSessionId, onSelectSession
       {/* New chat button */}
       <button
         onClick={onNewChat}
-        className="flex items-center gap-2 rounded-lg bg-xibe-surface px-3 py-2.5 text-xs font-medium text-xibe-text hover:bg-xibe-surface-hover transition-colors mb-4"
+        className="flex items-center gap-2 rounded-lg px-2 py-2 text-xs font-medium text-xibe-text hover:bg-xibe-surface-hover transition-colors mb-2"
       >
         <Plus className="h-4 w-4 text-xibe-text" />
         New Chat
       </button>
 
       {/* Session list */}
-      <div className="flex-1 overflow-y-auto space-y-5 min-h-0 pr-1">
+      <div className="flex-1 overflow-y-auto space-y-4 min-h-0 pr-1">
         {groups.length === 0 && (
           <div className="flex flex-col items-center justify-center h-32 text-center">
             <MessageSquare className="h-6 w-6 text-xibe-text-dim/20 mb-2" />
@@ -93,14 +93,13 @@ const ChatHistory = memo(function ChatHistory({ activeSessionId, onSelectSession
                   key={s.id}
                   onClick={() => onSelectSession(s.id)}
                   className={cn(
-                    "flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left transition-all duration-200 group",
+                    "flex w-full items-center gap-2.5 rounded-lg px-2 py-1 text-left transition-all duration-200 group",
                     activeSessionId === s.id
-                      ? "text-xibe-text font-semibold bg-xibe-surface-raised"
-                      : "text-xibe-text-secondary hover:bg-xibe-surface-raised/50 hover:text-xibe-text"
+                      ? "text-xibe-text font-medium bg-xibe-surface-hover"
+                      : "text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text"
                   )}
                 >
-                  <MessageSquare className={cn("h-3.5 w-3.5 shrink-0", activeSessionId === s.id ? "text-xibe-text" : "text-xibe-text-dim/40 group-hover:text-xibe-text-dim/70")} />
-                  <span className="flex-1 truncate text-[12px] font-medium leading-tight">{s.title}</span>
+                  <span className="flex-1 truncate text-[13px] leading-tight">{s.title}</span>
 
                   {/* ⚡ Bolt: Used CSS group-hover instead of React state to toggle delete button visibility to prevent O(N) re-renders of the entire list on hover */}
                   <span
diff --git a/packages/desktop/src/renderer/components/ChatPanel.tsx b/packages/desktop/src/renderer/components/ChatPanel.tsx
index 2a85e16..82974f1 100644
--- a/packages/desktop/src/renderer/components/ChatPanel.tsx
+++ b/packages/desktop/src/renderer/components/ChatPanel.tsx
@@ -114,11 +114,7 @@ export default function ChatPanel({
           <div className={`min-h-full ${CHAT_GUTTER}`}>
             <div className={`${CHAT_WIDTH} animate-fade-in flex min-h-full flex-col items-center justify-center text-center`}>
               <div className="mb-8">
-                <div className="mx-auto w-12 h-12 flex items-center justify-center mb-4">
-                  <Terminal className="h-6 w-6 text-xibe-text" />
-                </div>
-                <h1 className="text-2xl font-semibold text-xibe-text tracking-tight">How can I help you today?</h1>
-                <p className="text-sm text-xibe-text-dim mt-2 max-w-md mx-auto">I can write code, fix bugs, explain concepts, and help you navigate your codebase.</p>
+                <h1 className="text-3xl font-medium text-xibe-text tracking-tight">How can I help you today?</h1>
               </div>
 
               {needsSetup ? (
@@ -127,37 +123,18 @@ export default function ChatPanel({
                 </button>
               ) : (
                 <div className="w-full max-w-2xl space-y-4">
-                  <div className="flex justify-center gap-1 mb-6">
-                    {MODES.map((m) => (
-                      <button
-                        key={m.id}
-                        onClick={() => onModeSwitch(m.id, `Switched to ${m.label}`)}
-                        className={cn(
-                          "rounded-md px-3 py-1 text-xs font-medium transition-colors duration-200",
-                          modeState.current === m.id
-                            ? "bg-xibe-surface-raised text-xibe-text"
-                            : "text-xibe-text-dim hover:text-xibe-text hover:bg-xibe-surface-raised/50"
-                        )}
-                      >
-                        {m.label}
-                      </button>
-                    ))}
-                  </div>
-                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-left">
+                  <div className="flex flex-wrap justify-center gap-2 mb-6">
                     {[
-                      { text: 'Build a REST API', icon: <Zap className="h-4 w-4 text-xibe-text-dim" /> },
-                      { text: 'Fix a bug', icon: <BookOpen className="h-4 w-4 text-xibe-text-dim" /> },
-                      { text: 'Set up a project', icon: <Terminal className="h-4 w-4 text-xibe-text-dim" /> },
-                      { text: 'Write unit tests', icon: <BookOpen className="h-4 w-4 text-xibe-text-dim" /> }
+                      { text: 'Build a REST API', icon: <Zap className="h-3.5 w-3.5" /> },
+                      { text: 'Fix a bug', icon: <BookOpen className="h-3.5 w-3.5" /> },
+                      { text: 'Set up a project', icon: <Terminal className="h-3.5 w-3.5" /> }
                     ].map((q) => (
                       <button
                         key={q.text}
                         onClick={() => onSendMessage(q.text)}
-                        className="group flex items-center gap-3 rounded-xl bg-transparent border border-xibe-border-subtle px-4 py-3 text-sm text-xibe-text-secondary hover:bg-xibe-surface-raised hover:text-xibe-text transition-colors"
+                        className="flex items-center gap-2 rounded-full bg-xibe-surface px-3.5 py-1.5 text-[13px] text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text transition-colors border border-xibe-border-subtle"
                       >
-                        <div className="rounded-lg p-1 text-xibe-text-dim group-hover:text-xibe-text transition-colors">
-                          {q.icon}
-                        </div>
+                        <span className="text-xibe-text-dim">{q.icon}</span>
                         {q.text}
                       </button>
                     ))}
@@ -203,7 +180,26 @@ export default function ChatPanel({
           )}
 
           {/* Floating Pill input */}
-          <div className="relative flex items-end rounded-2xl bg-xibe-surface-raised border border-transparent focus-within:border-xibe-border-focus focus-within:bg-xibe-surface-raised transition-all duration-200">
+          <div className="relative flex flex-col rounded-3xl bg-xibe-surface border border-xibe-border-subtle focus-within:border-xibe-border-focus focus-within:bg-xibe-surface transition-all duration-200">
+            <div className="flex items-center px-4 pt-2 pb-1 text-xs text-xibe-text-dim">
+                <span className="flex items-center gap-1.5">
+                    {MODES.map((m) => (
+                        <button
+                          key={m.id}
+                          onClick={() => onModeSwitch(m.id, `Switched to ${m.label}`)}
+                          className={cn(
+                            "rounded-full px-2 py-0.5 font-medium transition-colors duration-200",
+                            modeState.current === m.id
+                              ? "bg-xibe-surface-hover text-xibe-text"
+                              : "text-xibe-text-dim hover:text-xibe-text"
+                          )}
+                        >
+                          {m.label}
+                        </button>
+                    ))}
+                </span>
+            </div>
+            <div className="relative flex items-end">
             <textarea
               ref={inputRef}
               value={input}
@@ -217,17 +213,18 @@ export default function ChatPanel({
               placeholder={isRunning ? 'Thinking...' : 'Ask anything or type / for commands'}
               disabled={isRunning}
               rows={1}
-              className="flex-1 resize-none bg-transparent pl-4 pr-12 py-3.5 text-[15px] leading-relaxed text-xibe-text placeholder-xibe-text-dim/50 focus:outline-none disabled:opacity-40"
-              style={{ minHeight: '52px', maxHeight: '400px' }}
+              className="flex-1 resize-none bg-transparent pl-4 pr-12 pb-3.5 pt-1 text-[15px] leading-relaxed text-xibe-text placeholder-xibe-text-dim/50 focus:outline-none disabled:opacity-40"
+              style={{ minHeight: '36px', maxHeight: '400px' }}
               onInput={(e) => { const t = e.target as HTMLTextAreaElement; t.style.height = 'auto'; t.style.height = Math.min(t.scrollHeight, 400) + 'px'; }}
             />
-            <button
-              onClick={submit}
-              disabled={isRunning || !input.trim()}
-              className="absolute right-2 bottom-2 h-9 w-9 rounded-lg flex items-center justify-center text-xibe-text bg-xibe-surface hover:bg-xibe-surface-hover disabled:opacity-30 disabled:cursor-not-allowed transition-all duration-200"
-            >
-              <Send className="h-4 w-4 ml-0.5" />
-            </button>
+              <button
+                onClick={submit}
+                disabled={isRunning || !input.trim()}
+                className="absolute right-3 bottom-2 h-8 w-8 rounded-full flex items-center justify-center text-xibe-bg bg-xibe-text hover:opacity-90 disabled:opacity-30 disabled:bg-xibe-text-dim disabled:text-xibe-surface disabled:cursor-not-allowed transition-all duration-200"
+              >
+                <Send className="h-3.5 w-3.5 ml-0.5" />
+              </button>
+            </div>
           </div>
           <div className="mt-2 text-center">
             <p className="text-[11px] font-medium text-xibe-text-dim/40">
diff --git a/packages/desktop/src/renderer/styles/global.css b/packages/desktop/src/renderer/styles/global.css
index a35942e..214243c 100644
--- a/packages/desktop/src/renderer/styles/global.css
+++ b/packages/desktop/src/renderer/styles/global.css
@@ -2,7 +2,7 @@
 
 @theme {
   --color-xibe-bg: #09090b;
-  --color-xibe-surface: #09090b;
+  --color-xibe-surface: #121214;
   --color-xibe-surface-raised: #18181b;
   --color-xibe-surface-hover: #27272a;
   --color-xibe-border: #27272a;
@@ -21,7 +21,7 @@
   --color-xibe-brand-purple: #A78BFA;
   --color-xibe-brand-red: #F87171;
   --color-xibe-suggestion: #93C5FD;
-  --color-xibe-user-bubble: #27272a;
+  --color-xibe-user-bubble: #18181b;
   --color-xibe-warning: #F59E0B;
   --color-xibe-error: #EF4444;
   --color-xibe-info: #0EA5E9;