From e84ebf3ffe7038da7efbaf96daf77772934457ce Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Wed, 20 May 2026 06:00:21 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20[desktop]=20Update=20UI=20to=20f?=
 =?UTF-8?q?lat,=20minimalist=20grayscale=20aesthetic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Set desktop global background strictly to `#09090b` and removed unnecessary elevations.
- Updated user message bubbles to use soft `rounded-2xl` pills without borders.
- Flattened the chat prompt input to use `bg-xibe-surface-raised` matching the borderless look.
- Adjusted sidebar active items to replace heavy left borders with soft raised backgrounds.
- Preserved existing semantic colors (info/error/success) and optimized `group-hover` components.
---
 .../desktop/src/renderer/components/ChatHistory.tsx  |  6 +++---
 .../desktop/src/renderer/components/ChatPanel.tsx    | 12 ++++++------
 .../src/renderer/components/MessageBubble.tsx        |  8 ++++----
 packages/desktop/src/renderer/styles/global.css      |  4 ++--
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/desktop/src/renderer/components/ChatHistory.tsx b/packages/desktop/src/renderer/components/ChatHistory.tsx
index 3f08573..88865ab 100644
--- a/packages/desktop/src/renderer/components/ChatHistory.tsx
+++ b/packages/desktop/src/renderer/components/ChatHistory.tsx
@@ -93,10 +93,10 @@ 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 relative",
+                    "flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-left transition-all duration-200 group",
                     activeSessionId === s.id
-                      ? "text-xibe-text font-semibold before:absolute before:left-0 before:top-1/4 before:bottom-1/4 before:w-1 before:bg-xibe-text before:rounded-r"
-                      : "text-xibe-text-secondary hover:bg-xibe-surface-hover/30 hover:text-xibe-text"
+                      ? "text-xibe-text font-semibold bg-xibe-surface-raised"
+                      : "text-xibe-text-secondary hover:bg-xibe-surface-raised/50 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")} />
diff --git a/packages/desktop/src/renderer/components/ChatPanel.tsx b/packages/desktop/src/renderer/components/ChatPanel.tsx
index 12602e9..2a85e16 100644
--- a/packages/desktop/src/renderer/components/ChatPanel.tsx
+++ b/packages/desktop/src/renderer/components/ChatPanel.tsx
@@ -127,16 +127,16 @@ export default function ChatPanel({
                 </button>
               ) : (
                 <div className="w-full max-w-2xl space-y-4">
-                  <div className="flex justify-center gap-2 mb-6">
+                  <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-full px-4 py-1.5 text-xs font-medium transition-colors duration-200",
+                          "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"
+                            : "text-xibe-text-dim hover:text-xibe-text hover:bg-xibe-surface-raised/50"
                         )}
                       >
                         {m.label}
@@ -153,9 +153,9 @@ export default function ChatPanel({
                       <button
                         key={q.text}
                         onClick={() => onSendMessage(q.text)}
-                        className="group flex items-center gap-3 rounded-xl bg-xibe-surface-raised border-none px-4 py-3 text-sm text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text transition-colors"
+                        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"
                       >
-                        <div className="rounded-lg p-1.5 text-xibe-text-dim group-hover:text-xibe-text transition-colors">
+                        <div className="rounded-lg p-1 text-xibe-text-dim group-hover:text-xibe-text transition-colors">
                           {q.icon}
                         </div>
                         {q.text}
@@ -203,7 +203,7 @@ 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-bg transition-all duration-200">
+          <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">
             <textarea
               ref={inputRef}
               value={input}
diff --git a/packages/desktop/src/renderer/components/MessageBubble.tsx b/packages/desktop/src/renderer/components/MessageBubble.tsx
index 68df0fe..da57468 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-xl bg-xibe-surface border border-xibe-border-subtle 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-raised px-5 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
           {content}
         </div>
       </div>
@@ -30,18 +30,18 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
         prose-blockquote:my-4 prose-blockquote:border-l-2 prose-blockquote:border-xibe-border prose-blockquote:pl-4 prose-blockquote:text-xibe-text-dim
         prose-a:text-xibe-text-secondary hover:prose-a:text-xibe-text prose-a:underline prose-a:underline-offset-2
         prose-strong:text-xibe-text prose-strong:font-semibold
-        prose-code:text-xibe-text-secondary prose-code:bg-xibe-surface prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:font-medium prose-code:before:content-none prose-code:after:content-none
+        prose-code:text-xibe-text-secondary prose-code:bg-xibe-surface-raised prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:font-medium prose-code:before:content-none prose-code:after:content-none
         prose-h1:text-xl prose-h2:text-lg prose-h3:text-base prose-h1:font-semibold prose-h2:font-semibold prose-h3:font-semibold">
         <ReactMarkdown
           remarkPlugins={[remarkGfm]}
           components={{
             pre: ({ children }) => (
-              <pre className="overflow-x-auto rounded-xl bg-xibe-surface p-4 text-[13px] font-mono leading-relaxed my-4">{children}</pre>
+              <pre className="overflow-x-auto rounded-xl bg-xibe-surface-raised border border-xibe-border-subtle p-4 text-[13px] font-mono leading-relaxed my-4">{children}</pre>
             ),
             code: ({ className, children }) => {
               const isInline = !className;
               return isInline ? (
-                <code className="rounded-md bg-xibe-surface px-1.5 py-0.5 text-[13px] font-mono text-xibe-text-secondary">{children}</code>
+                <code className="rounded-md bg-xibe-surface-raised px-1.5 py-0.5 text-[13px] font-mono text-xibe-text-secondary">{children}</code>
               ) : (
                 <code className={`${className ?? ''} text-[13px] font-mono`}>{children}</code>
               );
diff --git a/packages/desktop/src/renderer/styles/global.css b/packages/desktop/src/renderer/styles/global.css
index 7a53bb0..a35942e 100644
--- a/packages/desktop/src/renderer/styles/global.css
+++ b/packages/desktop/src/renderer/styles/global.css
@@ -3,10 +3,10 @@
 @theme {
   --color-xibe-bg: #09090b;
   --color-xibe-surface: #09090b;
-  --color-xibe-surface-raised: #121214;
+  --color-xibe-surface-raised: #18181b;
   --color-xibe-surface-hover: #27272a;
   --color-xibe-border: #27272a;
-  --color-xibe-border-subtle: #27272a;
+  --color-xibe-border-subtle: #18181b;
   --color-xibe-border-focus: #52525b;
   --color-xibe-muted: #71717a;
   --color-xibe-text: #fafafa;