From fd35de7f0ee30aa2b17679c13b4b8bdc642e9be3 Mon Sep 17 00:00:00 2001
From: iotserver24 <147928812+iotserver24@users.noreply.github.com>
Date: Sun, 17 May 2026 05:48:21 +0000
Subject: [PATCH] feat(desktop): update UI for a modern flat and borderless
 aesthetic

- Replaced outlined borders with filled surfaces across main sections (headers, sidebars, panels).
- Updated ChatPanel components (action buttons, chat input container, mode selectors) to use `bg-xibe-surface-raised` borderless styles.
- Updated user message bubbles and inline code blocks in MessageBubble.tsx to use borderless flatter backgrounds.
- Updated Tailwind config variables in `global.css` to blend sub-surfaces better for a seamless look.
---
 packages/desktop/src/renderer/App.tsx                     | 6 +++---
 packages/desktop/src/renderer/components/ChatPanel.tsx    | 8 ++++----
 .../desktop/src/renderer/components/MessageBubble.tsx     | 8 ++++----
 packages/desktop/src/renderer/styles/global.css           | 8 ++++----
 4 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/desktop/src/renderer/App.tsx b/packages/desktop/src/renderer/App.tsx
index 2c22b75..56c0a3e 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 border-b border-xibe-border-subtle">
+      <header className="flex h-12 items-center justify-between px-3 shrink-0 bg-xibe-bg z-10">
         <div className="flex items-center gap-3">
           <button
             onClick={() => setLeftPanelOpen((v) => !v)}
@@ -370,7 +370,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-bg flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out"
           style={{ width: leftPanelOpen ? 240 : 0 }}
         >
             <div className="flex-1 min-h-0 overflow-y-auto p-3">
@@ -413,7 +413,7 @@ export default function App() {
 
         {/* Right panel: Tabbed (Web + Folder) */}
         <div
-          className="shrink-0 overflow-hidden transition-[width] duration-200 ease-in-out border-l border-xibe-border-subtle"
+          className="shrink-0 overflow-hidden transition-[width] duration-200 ease-in-out"
           style={{ width: rightPanelOpen ? 320 : 0 }}
         >
           <TabbedRightPanel
diff --git a/packages/desktop/src/renderer/components/ChatPanel.tsx b/packages/desktop/src/renderer/components/ChatPanel.tsx
index 23b20aa..3349074 100644
--- a/packages/desktop/src/renderer/components/ChatPanel.tsx
+++ b/packages/desktop/src/renderer/components/ChatPanel.tsx
@@ -135,8 +135,8 @@ export default function ChatPanel({
                         className={cn(
                           "rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-200",
                           modeState.current === m.id
-                            ? "bg-xibe-surface text-xibe-text"
-                            : "text-xibe-text-dim hover:text-xibe-text hover:bg-xibe-surface"
+                            ? "bg-xibe-surface-raised text-xibe-text"
+                            : "text-xibe-text-dim hover:text-xibe-text hover:bg-xibe-surface-raised"
                         )}
                       >
                         {m.label}
@@ -153,7 +153,7 @@ export default function ChatPanel({
                       <button
                         key={q.text}
                         onClick={() => onSendMessage(q.text)}
-                        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/50 hover:text-xibe-text transition-colors"
+                        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"
                       >
                         <div className="rounded-lg p-1.5 text-xibe-text-dim group-hover:text-xibe-text transition-colors">
                           {q.icon}
@@ -203,7 +203,7 @@ export default function ChatPanel({
           )}
 
           {/* Floating Pill input */}
-          <div className="relative flex items-end rounded-2xl border border-xibe-border-subtle bg-xibe-bg focus-within:border-xibe-border-focus focus-within:ring-1 focus-within:ring-xibe-border-focus transition-all duration-200">
+          <div className="relative flex items-end rounded-2xl bg-xibe-surface-raised border-none 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 83457f3..f073842 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 bg-xibe-surface px-5 py-3.5 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap border border-xibe-border-subtle">
+        <div className="max-w-[85%] sm:max-w-[75%] rounded-xl bg-xibe-surface-raised px-5 py-3.5 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap border-none">
           {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-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-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-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-raised p-4 text-[13px] font-mono leading-relaxed my-4">{children}</pre>
+              <pre className="overflow-x-auto rounded-xl bg-xibe-surface 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 px-1.5 py-0.5 text-[13px] font-mono text-xibe-text-secondary">{children}</code>
+                <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={`${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 ed9565e..99f2183 100644
--- a/packages/desktop/src/renderer/styles/global.css
+++ b/packages/desktop/src/renderer/styles/global.css
@@ -2,11 +2,11 @@
 
 @theme {
   --color-xibe-bg: #09090b;
-  --color-xibe-surface: #18181b;
-  --color-xibe-surface-raised: #27272a;
-  --color-xibe-surface-hover: #27272a;
+  --color-xibe-surface: #09090b;
+  --color-xibe-surface-raised: #18181b;
+  --color-xibe-surface-hover: #18181b;
   --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;