Refine desktop UI for a flatter, minimalist aesthetic (#88)

- Updated global CSS variables for a softer surface and border focus.
- Added subtle borders to cleanly separate header, sidebar, and right panels.
- Tightened sidebar session item padding and reduced hover prominence.
- Redesigned chat input to a floating pill format with focus rings.
- Refined message bubble borders, spacing, and typography margins.

Author: iotserver24

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-xibe-bg z-10 border-b border-xibe-border-subtle">
         <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"
+          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 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"
+          className="shrink-0 overflow-hidden transition-[width] duration-200 ease-in-out border-l border-xibe-border-subtle"
           style={{ width: rightPanelOpen ? 320 : 0 }}
         >
           <TabbedRightPanel

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.5 py-2 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 relative",
                     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/50 hover:text-xibe-text"
+                      : "text-xibe-text-secondary hover:bg-xibe-surface-hover/30 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")} />

packages/desktop/src/renderer/components/ChatPanel.tsx

@@ -153,7 +153,7 @@ export default function ChatPanel({
                       <button
                         key={q.text}
                         onClick={() => onSendMessage(q.text)}
-                        className="group flex items-center gap-3 rounded-lg bg-xibe-surface 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 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"
                       >
                         <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-lg bg-xibe-surface transition-colors duration-200">
+          <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">
             <textarea
               ref={inputRef}
               value={input}

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-[#27272a] 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 bg-xibe-surface px-5 py-3.5 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap border border-xibe-border-subtle">
           {content}
         </div>
       </div>
@@ -25,8 +25,8 @@ 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
-        prose-p:my-3 prose-headings:my-4 prose-ul:my-3 prose-ol:my-3 prose-li:my-1
-        prose-pre:my-4 prose-pre:bg-transparent prose-pre:p-0
+        prose-p:my-2 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
         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

packages/desktop/src/renderer/styles/global.css

@@ -6,8 +6,8 @@
   --color-xibe-surface-raised: #27272a;
   --color-xibe-surface-hover: #27272a;
   --color-xibe-border: #27272a;
-  --color-xibe-border-subtle: #18181b;
-  --color-xibe-border-focus: #3f3f46;
+  --color-xibe-border-subtle: #27272a;
+  --color-xibe-border-focus: #52525b;
   --color-xibe-muted: #71717a;
   --color-xibe-text: #fafafa;
   --color-xibe-text-secondary: #a1a1aa;