From 9d836a19874c84a9065406a1a06ebf586f3d087b Mon Sep 17 00:00:00 2001 From: iotserver24 <147928812+iotserver24@users.noreply.github.com> Date: Wed, 27 May 2026 05:56:02 +0000 Subject: [PATCH 1/2] feat(ui): redesign desktop app with modern flat aesthetic Updates the XibeCode Desktop UI to follow a sleeker, flatter, grayscale aesthetic similar to tools like Claude Desktop or Cursor. - Flattens the color scheme globally in `global.css` with zinc-based hexes, muting the purple accent to a subtle gray. - Redesigns `MessageBubble` to strip heavy backgrounds from assistant messages and reduces border-radius on user messages. - Flattens the `ChatPanel` input bar from a "floating pill" to a solid `rounded-xl` block. - Simplifies the new chat empty state, removing loud icons and solid button backgrounds in favor of simple text and borders. - Refines App shell layout, thinning out the header and removing harsh borders/shadows from the history sidebar in `ChatHistory`. --- packages/desktop/src/renderer/App.tsx | 6 ++--- .../src/renderer/components/ChatHistory.tsx | 23 ++++++------------ .../src/renderer/components/ChatPanel.tsx | 15 ++++++------ .../src/renderer/components/MessageBubble.tsx | 6 ++--- .../desktop/src/renderer/styles/global.css | 10 ++++---- screenshot.png | Bin 40247 -> 0 bytes 6 files changed, 26 insertions(+), 34 deletions(-) delete mode 100644 screenshot.png diff --git a/packages/desktop/src/renderer/App.tsx b/packages/desktop/src/renderer/App.tsx index c7b3de8..4a54ab1 100644 --- a/packages/desktop/src/renderer/App.tsx +++ b/packages/desktop/src/renderer/App.tsx @@ -319,7 +319,7 @@ export default function App() { return (
{/* Header */} -
+
-
- +
+ Conversation History
-
+
Scheduled Tasks
diff --git a/packages/desktop/src/renderer/components/ChatPanel.tsx b/packages/desktop/src/renderer/components/ChatPanel.tsx index 82974f1..5e42f54 100644 --- a/packages/desktop/src/renderer/components/ChatPanel.tsx +++ b/packages/desktop/src/renderer/components/ChatPanel.tsx @@ -118,23 +118,22 @@ export default function ChatPanel({
{needsSetup ? ( - ) : (
{[ - { text: 'Build a REST API', icon: }, - { text: 'Fix a bug', icon: }, - { text: 'Set up a project', icon: } + { text: 'Build a REST API' }, + { text: 'Fix a bug' }, + { text: 'Set up a project' } ].map((q) => ( ))} @@ -179,8 +178,8 @@ export default function ChatPanel({
)} - {/* Floating Pill input */} -
+ {/* Flat input */} +
{MODES.map((m) => ( diff --git a/packages/desktop/src/renderer/components/MessageBubble.tsx b/packages/desktop/src/renderer/components/MessageBubble.tsx index da57468..0b3ac35 100644 --- a/packages/desktop/src/renderer/components/MessageBubble.tsx +++ b/packages/desktop/src/renderer/components/MessageBubble.tsx @@ -14,8 +14,8 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming } if (isUser) { return ( -
-
+
+
{content}
@@ -23,7 +23,7 @@ const MessageBubble = memo(function MessageBubble({ role, content, isStreaming } } return ( -
+
picomatch": "4.0.4", "micromatch>picomatch": "2.3.2", "tinyglobby>picomatch": "4.0.4", - "fast-uri": "3.1.2" + "fast-uri": "3.1.2", + "tmp": "0.2.6" } }, "packageManager": "pnpm@9.15.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a247d4b..38ed5d4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,7 @@ overrides: micromatch>picomatch: 2.3.2 tinyglobby>picomatch: 4.0.4 fast-uri: 3.1.2 + tmp: 0.2.6 importers: @@ -3793,8 +3794,8 @@ packages: tmp-promise@3.0.3: resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==} - tmp@0.2.5: - resolution: {integrity: sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==} + tmp@0.2.6: + resolution: {integrity: sha512-5sJPdPjfI5Kx+qbrDesxkglRBxW//g7hCsqspEjwkewGvBMGIKMOTKzLt1hFVJzyadba3lDUN20O9qhvbQUSTA==} engines: {node: '>=14.14'} to-regex-range@5.0.1: @@ -7974,9 +7975,9 @@ snapshots: tmp-promise@3.0.3: dependencies: - tmp: 0.2.5 + tmp: 0.2.6 - tmp@0.2.5: {} + tmp@0.2.6: {} to-regex-range@5.0.1: dependencies: