From 6159be0fa617230711a3de1a0f77ab5c188c4ecc Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Sun, 24 May 2026 05:50:32 +0000
Subject: [PATCH] feat(desktop): modernize desktop UI with sleeker minimalist
 aesthetics

- Updated global CSS custom properties to a darker, lower-contrast neutral palette, removing harsh borders while strictly preserving semantic status colors.
- Redesigned the empty state ("How can I help you today?") with rounded-xl cards and cleaner icons.
- Transformed the floating pill input into a structured, rounded-2xl bottom bar with adjusted padding.
- Enhanced the `App.tsx` layout by removing arbitrary background colors and updating sidebar borders to be subtle.
- Revamped the `ChatHistory.tsx` left sidebar, modernizing the "New Conversation" button to be borderless and transparent until hovered.
- Polished `MessageBubble.tsx` to ensure assistant markdown text has a slightly more compact typography and user messages use subtle borders.
- Simplified `StatusBar.tsx` by removing the top border and slightly increasing its height for better breathing room.
---
 packages/desktop/src/renderer/App.tsx              |  6 +++---
 .../src/renderer/components/ChatHistory.tsx        | 10 +++++-----
 .../desktop/src/renderer/components/ChatPanel.tsx  | 14 +++++++-------
 .../src/renderer/components/MessageBubble.tsx      |  4 ++--
 .../desktop/src/renderer/components/StatusBar.tsx  |  2 +-
 packages/desktop/src/renderer/styles/global.css    | 12 ++++++------
 6 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/desktop/src/renderer/App.tsx b/packages/desktop/src/renderer/App.tsx
index c7b3de8..dc7b8de 100644
--- a/packages/desktop/src/renderer/App.tsx
+++ b/packages/desktop/src/renderer/App.tsx
@@ -319,7 +319,7 @@ export default function App() {
   return (
     <div className="flex h-screen flex-col bg-xibe-bg text-xibe-text font-sans overflow-hidden">
       {/* Header */}
-      <header className="flex h-12 items-center justify-between px-3 shrink-0 bg-xibe-bg z-10">
+      <header className="flex h-12 items-center justify-between px-3 shrink-0 bg-transparent z-10">
         <div className="flex items-center gap-3">
           <button
             onClick={() => setLeftPanelOpen((v) => !v)}
@@ -372,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-[#0c0c0f] flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out border-r border-xibe-border/40"
+          className="shrink-0 bg-xibe-bg 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 flex flex-col p-3.5 pb-2">
@@ -383,7 +383,7 @@ export default function App() {
               />
             </div>
             {/* Settings shortcut at bottom */}
-            <div className="shrink-0 p-3 border-t border-xibe-border/30 bg-[#0c0c0f]/80 backdrop-blur-sm">
+            <div className="shrink-0 p-3 border-t border-xibe-border-subtle bg-transparent">
               <button
                 onClick={() => setSettingsOpen(true)}
                 className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-xibe-text-secondary hover:bg-xibe-surface-hover/60 hover:text-xibe-text transition-all duration-200 group border border-transparent hover:border-xibe-border/30"
diff --git a/packages/desktop/src/renderer/components/ChatHistory.tsx b/packages/desktop/src/renderer/components/ChatHistory.tsx
index 3ab5bd5..836962e 100644
--- a/packages/desktop/src/renderer/components/ChatHistory.tsx
+++ b/packages/desktop/src/renderer/components/ChatHistory.tsx
@@ -91,8 +91,8 @@ const ChatHistoryItem = memo(function ChatHistoryItem({
         "relative flex w-full items-center justify-between gap-2 rounded-lg pr-2 py-2.5 text-left transition-all duration-150 group border border-transparent select-none cursor-pointer",
         isGeneral ? "pl-4" : "pl-10",
         isActive
-          ? "text-xibe-text font-medium bg-xibe-surface-hover/75 border-xibe-border/40 shadow-sm"
-          : "text-xibe-text-secondary hover:bg-xibe-surface-hover/30 hover:text-xibe-text"
+          ? "text-xibe-text font-medium bg-xibe-surface-raised border-transparent shadow-sm"
+          : "text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text"
       )}
     >
       {isActive && (
@@ -181,18 +181,18 @@ const ChatHistory = memo(function ChatHistory({ activeSessionId, onSelectSession
       <div className="space-y-2.5 mb-5 shrink-0">
         <button
           onClick={onNewChat}
-          className="flex w-full items-center gap-2.5 rounded-lg border border-xibe-border/60 bg-xibe-surface-raised/40 hover:bg-xibe-surface-hover/80 hover:border-xibe-border-focus/50 px-3 py-2.5 text-[13px] font-medium text-xibe-text transition-all duration-200 cursor-pointer select-none group"
+          className="flex w-full items-center gap-2.5 rounded-lg border border-xibe-border-subtle bg-transparent hover:bg-xibe-surface-hover hover:border-xibe-border px-3 py-2.5 text-[13px] font-medium text-xibe-text transition-all duration-200 cursor-pointer select-none group"
         >
           <Plus className="h-4 w-4 text-xibe-brand-purple group-hover:scale-110 transition-transform duration-200" />
           <span className="font-sans">New Conversation</span>
         </button>
 
-        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13px] font-medium text-xibe-text bg-xibe-surface-hover/40 border border-xibe-border/20 select-none cursor-pointer">
+        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13px] font-medium text-xibe-text bg-transparent hover:bg-xibe-surface-hover border border-transparent select-none cursor-pointer">
           <History className="h-4 w-4 text-xibe-brand-purple" />
           <span className="font-sans">Conversation History</span>
         </div>
 
-        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13px] font-medium text-xibe-text-secondary hover:bg-xibe-surface-hover/30 hover:text-xibe-text transition-colors select-none cursor-pointer">
+        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13px] font-medium text-xibe-text-secondary bg-transparent hover:bg-xibe-surface-hover hover:text-xibe-text border border-transparent transition-colors select-none cursor-pointer">
           <Clock className="h-4 w-4 text-xibe-text-dim" />
           <span className="font-sans">Scheduled Tasks</span>
         </div>
diff --git a/packages/desktop/src/renderer/components/ChatPanel.tsx b/packages/desktop/src/renderer/components/ChatPanel.tsx
index 82974f1..f4004b4 100644
--- a/packages/desktop/src/renderer/components/ChatPanel.tsx
+++ b/packages/desktop/src/renderer/components/ChatPanel.tsx
@@ -125,14 +125,14 @@ export default function ChatPanel({
                 <div className="w-full max-w-2xl space-y-4">
                   <div className="flex flex-wrap justify-center gap-2 mb-6">
                     {[
-                      { 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" /> }
+                      { text: 'Build a REST API', icon: <Zap className="h-4 w-4" /> },
+                      { text: 'Fix a bug', icon: <BookOpen className="h-4 w-4" /> },
+                      { text: 'Set up a project', icon: <Terminal className="h-4 w-4" /> }
                     ].map((q) => (
                       <button
                         key={q.text}
                         onClick={() => onSendMessage(q.text)}
-                        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"
+                        className="flex items-center gap-2 rounded-xl bg-xibe-surface px-4 py-3 text-[13px] text-xibe-text-secondary hover:bg-xibe-surface-raised hover:border-xibe-border hover:text-xibe-text transition-colors border border-xibe-border-subtle"
                       >
                         <span className="text-xibe-text-dim">{q.icon}</span>
                         {q.text}
@@ -180,7 +180,7 @@ export default function ChatPanel({
           )}
 
           {/* Floating Pill input */}
-          <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="relative flex flex-col rounded-2xl 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) => (
@@ -213,14 +213,14 @@ 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 pb-3.5 pt-1 text-[15px] leading-relaxed text-xibe-text placeholder-xibe-text-dim/50 focus:outline-none disabled:opacity-40"
+              className="flex-1 resize-none bg-transparent pl-4 pr-12 py-3 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-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"
+                className="absolute right-3 bottom-2 h-8 w-8 rounded-xl flex items-center justify-center text-black bg-white 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>
diff --git a/packages/desktop/src/renderer/components/MessageBubble.tsx b/packages/desktop/src/renderer/components/MessageBubble.tsx
index da57468..a18e6e0 100644
--- a/packages/desktop/src/renderer/components/MessageBubble.tsx
+++ b/packages/desktop/src/renderer/components/MessageBubble.tsx
@@ -15,7 +15,7 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
   if (isUser) {
     return (
       <div className="flex justify-end animate-fade-in w-full group">
-        <div className="max-w-[90%] sm:max-w-[80%] rounded-2xl bg-xibe-surface-raised px-5 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
+        <div className="max-w-[90%] sm:max-w-[80%] rounded-2xl bg-xibe-surface border border-xibe-border-subtle px-5 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
           {content}
         </div>
       </div>
@@ -24,7 +24,7 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
 
   return (
     <div className="animate-fade-in flex flex-col w-full group">
-      <div className="prose prose-invert max-w-none text-[15px] leading-relaxed text-xibe-text
+      <div className="prose prose-invert max-w-none text-[14px] leading-relaxed text-xibe-text
         prose-p:my-1.5 prose-headings:my-3 prose-ul:my-2 prose-ol:my-2 prose-li:my-0.5
         prose-pre:my-3 prose-pre:bg-transparent prose-pre:p-0
         prose-blockquote:my-4 prose-blockquote:border-l-2 prose-blockquote:border-xibe-border prose-blockquote:pl-4 prose-blockquote:text-xibe-text-dim
diff --git a/packages/desktop/src/renderer/components/StatusBar.tsx b/packages/desktop/src/renderer/components/StatusBar.tsx
index e3c99b1..b966816 100644
--- a/packages/desktop/src/renderer/components/StatusBar.tsx
+++ b/packages/desktop/src/renderer/components/StatusBar.tsx
@@ -37,7 +37,7 @@ export default function StatusBar({ mode, workingDir, isRunning, activeModel, ac
   const dot = MODE_COLORS[mode] ?? 'bg-zinc-400';
 
   return (
-    <footer className="flex h-6 items-center justify-between bg-xibe-bg border-t border-xibe-border-subtle/50 px-3 text-[10px] text-xibe-text-dim font-mono">
+    <footer className="flex h-7 items-center justify-between bg-xibe-bg border-t border-transparent px-3 text-[10px] text-xibe-text-dim font-mono">
       <div className="flex items-center gap-2">
         <button onClick={onToggleSidebar} className="hover:text-xibe-text transition-colors" title="Toggle sidebar">
           <svg className="h-3 w-3" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" /></svg>
diff --git a/packages/desktop/src/renderer/styles/global.css b/packages/desktop/src/renderer/styles/global.css
index 214243c..e72e8b0 100644
--- a/packages/desktop/src/renderer/styles/global.css
+++ b/packages/desktop/src/renderer/styles/global.css
@@ -2,14 +2,14 @@
 
 @theme {
   --color-xibe-bg: #09090b;
-  --color-xibe-surface: #121214;
-  --color-xibe-surface-raised: #18181b;
-  --color-xibe-surface-hover: #27272a;
-  --color-xibe-border: #27272a;
-  --color-xibe-border-subtle: #18181b;
+  --color-xibe-surface: #121212;
+  --color-xibe-surface-raised: #1e1e1e;
+  --color-xibe-surface-hover: #262626;
+  --color-xibe-border: #262626;
+  --color-xibe-border-subtle: #1e1e1e;
   --color-xibe-border-focus: #52525b;
   --color-xibe-muted: #71717a;
-  --color-xibe-text: #fafafa;
+  --color-xibe-text: #ececec;
   --color-xibe-text-secondary: #a1a1aa;
   --color-xibe-text-dim: #71717a;
   --color-xibe-accent: #e4e4e7;