From b6995dbc85122ef774c5d21921e23cad8c43ace3 Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Tue, 5 May 2026 06:03:49 +0000
Subject: [PATCH] feat(desktop): modernize desktop UI with minimalist zinc
 palette

- Updated global CSS variables to use a flat, grayscale "Zinc" palette (e.g., zinc-950 background, zinc-900 surfaces).
- Refined `ChatPanel.tsx` by flattening the input pill and removing heavy hover backgrounds from empty-state buttons.
- Updated `MessageBubble.tsx` to align markdown rendering and user message bubbles with the new flat design language.
---
 .../src/renderer/components/ChatPanel.tsx        | 12 ++++++------
 .../src/renderer/components/MessageBubble.tsx    |  8 ++++----
 packages/desktop/src/renderer/styles/global.css  | 16 ++++++++--------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/desktop/src/renderer/components/ChatPanel.tsx b/packages/desktop/src/renderer/components/ChatPanel.tsx
index 9b7e03e..71db67d 100644
--- a/packages/desktop/src/renderer/components/ChatPanel.tsx
+++ b/packages/desktop/src/renderer/components/ChatPanel.tsx
@@ -126,9 +126,9 @@ export default function ChatPanel({
                       <button
                         key={q.text}
                         onClick={() => onSendMessage(q.text)}
-                        className="group flex items-center gap-3 rounded-2xl border border-xibe-border-subtle bg-xibe-surface/50 px-4 py-3 text-sm text-xibe-text-secondary hover:bg-xibe-surface-hover hover:border-xibe-border hover:text-xibe-text transition-all"
+                        className="group flex items-center gap-3 rounded-xl border border-xibe-border-subtle bg-transparent px-4 py-3 text-sm text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text transition-all"
                       >
-                        <div className="bg-xibe-bg rounded-lg p-1.5 border border-xibe-border-subtle group-hover:border-xibe-border transition-colors">
+                        <div className="rounded-lg p-1 transition-colors">
                           {q.icon}
                         </div>
                         {q.text}
@@ -171,11 +171,11 @@ export default function ChatPanel({
       </div>
 
       {/* Input area */}
-      <div className="shrink-0 px-4 pb-6 pt-2 bg-gradient-to-t from-xibe-bg via-xibe-bg to-transparent">
+      <div className="shrink-0 px-4 pb-6 pt-2 bg-xibe-bg">
         <div className="mx-auto max-w-3xl relative">
           {/* Command dropdown above input */}
           {isSlashMode && filteredCmds.length > 0 && (
-            <div className="absolute bottom-full mb-2 w-full rounded-xl border border-xibe-border-subtle bg-xibe-surface/95 backdrop-blur-md shadow-lg overflow-hidden animate-slide-up z-20">
+            <div className="absolute bottom-full mb-2 w-full rounded-xl border border-xibe-border-subtle bg-xibe-surface overflow-hidden animate-slide-up z-20">
               {filteredCmds.slice(0, 6).map((cmd, i) => (
                 <button key={cmd.name} onClick={() => { setInput(cmd.name + ' '); inputRef.current?.focus(); }} className={`flex w-full items-center justify-between px-4 py-2.5 text-left text-sm transition-colors ${i === selectedCmd ? 'bg-xibe-surface-hover text-xibe-text' : 'text-xibe-text-secondary hover:bg-xibe-surface-hover/50'}`}>
                   <span className="font-mono font-medium text-xibe-text">{cmd.name}</span>
@@ -186,7 +186,7 @@ export default function ChatPanel({
           )}
 
           {/* Floating Pill input */}
-          <div className="relative flex items-end rounded-2xl bg-xibe-surface transition-all duration-200">
+          <div className="relative flex items-end rounded-xl bg-xibe-surface transition-all duration-200">
             <textarea
               ref={inputRef}
               value={input}
@@ -207,7 +207,7 @@ export default function ChatPanel({
             <button
               onClick={submit}
               disabled={isRunning || !input.trim()}
-              className="absolute right-2 bottom-2 h-9 w-9 rounded-xl bg-xibe-surface-raised border border-xibe-border-subtle flex items-center justify-center text-xibe-text hover:bg-xibe-text hover:text-xibe-bg disabled:opacity-30 disabled:cursor-not-allowed transition-all duration-200 shadow-sm"
+              className="absolute right-2 bottom-2 h-9 w-9 rounded-lg bg-xibe-text text-xibe-bg flex items-center justify-center hover:opacity-90 disabled:opacity-30 disabled:cursor-not-allowed transition-all duration-200"
             >
               <Send className="h-4 w-4 ml-0.5" />
             </button>
diff --git a/packages/desktop/src/renderer/components/MessageBubble.tsx b/packages/desktop/src/renderer/components/MessageBubble.tsx
index 91a5acb..eb23f6e 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-[85%] sm:max-w-[75%] rounded-2xl rounded-tr-sm bg-xibe-surface px-4 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
+        <div className="max-w-[85%] sm:max-w-[75%] rounded-2xl rounded-tr-sm bg-xibe-surface px-4 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap border border-transparent group-hover:border-xibe-border-subtle transition-colors">
           {content}
         </div>
       </div>
@@ -30,18 +30,18 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming }
         prose-blockquote:my-4 prose-blockquote:border-l-xibe-border-focus prose-blockquote:text-xibe-text-dim
         prose-a:text-xibe-brand-blue prose-a:no-underline hover:prose-a:underline hover: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/50 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: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-bg border border-xibe-border-subtle p-4 text-[13px] font-mono leading-relaxed shadow-sm my-4">{children}</pre>
+              <pre className="overflow-x-auto rounded-xl bg-xibe-surface 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-raised border border-xibe-border-subtle/50 px-1.5 py-0.5 text-[13px] font-mono text-xibe-text-secondary">{children}</code>
+                <code className="rounded-md bg-xibe-surface border border-xibe-border-subtle 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 e6450c6..ab50225 100644
--- a/packages/desktop/src/renderer/styles/global.css
+++ b/packages/desktop/src/renderer/styles/global.css
@@ -1,14 +1,14 @@
 @import "tailwindcss";
 
 @theme {
-  --color-xibe-bg: #111111;
-  --color-xibe-surface: #1A1A1A;
-  --color-xibe-surface-raised: #2A2A2A;
-  --color-xibe-surface-hover: #222222;
-  --color-xibe-border: #333333;
-  --color-xibe-border-subtle: #222222;
-  --color-xibe-border-focus: #444444;
-  --color-xibe-muted: #888888;
+  --color-xibe-bg: #09090b;
+  --color-xibe-surface: #18181b;
+  --color-xibe-surface-raised: #27272a;
+  --color-xibe-surface-hover: #27272a;
+  --color-xibe-border: #3f3f46;
+  --color-xibe-border-subtle: #27272a;
+  --color-xibe-border-focus: #52525b;
+  --color-xibe-muted: #71717a;
   --color-xibe-text: #fafafa;
   --color-xibe-text-secondary: #e4e4e7;
   --color-xibe-text-dim: #a1a1aa;