feat(desktop): modernize desktop UI with minimalist theme#72
Conversation
- Updated global.css to use a zinc-based neutral color palette - Simplified header layout by removing borders - Redesigned chat input to be borderless and flat - Removed heavy backgrounds and borders from user message bubbles - Tweaked tool call cards to be more compact with tighter padding - Adjusted code block and inline code styles for better contrast and readability
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (5)
📝 WalkthroughWalkthroughThis PR updates the desktop renderer's visual design by refining the global color theme and adjusting component styling. Changes include removing header borders, simplifying chat input styling, flattening message bubble surfaces, updating card backgrounds, and replacing theme color variables with a new palette. ChangesUI Styling Refinement
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Review rate limit: 9/10 reviews remaining, refill in 6 minutes. Comment |
|
Hey @coderabbitai[bot]! 👋 I'll go through the changes and help you out! 🔍 Starting the review now... |
There was a problem hiding this comment.
Pull request overview
Modernizes the packages/desktop renderer UI styling to a flatter, minimalist monochrome theme by updating global design tokens and simplifying visual chrome across chat surfaces.
Changes:
- Updated Tailwind v4
@themecolor tokens inglobal.css(neutral zinc-like palette) and adjusted selection/scrollbar/focus styling. - Simplified UI surfaces by removing borders/shadows/backgrounds in header, tool call cards, chat input, and user message bubbles.
- Tweaked Markdown/code styling for assistant messages.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/desktop/src/renderer/styles/global.css | Updates global theme tokens and global focus/selection/scrollbar styling. |
| packages/desktop/src/renderer/components/ToolCallCard.tsx | Reduces visual weight of tool call cards (removes background/shadow, tightens padding). |
| packages/desktop/src/renderer/components/MessageBubble.tsx | Flattens user bubbles and adjusts Markdown inline code background styling. |
| packages/desktop/src/renderer/components/ChatPanel.tsx | Simplifies the floating pill input container styling. |
| packages/desktop/src/renderer/App.tsx | Removes the header bottom border for a cleaner layout. |
Comments suppressed due to low confidence (2)
packages/desktop/src/renderer/components/ChatPanel.tsx:203
- The input wrapper no longer has
focus-within:*styling, while the<textarea>still hasfocus:outline-none. Becausefocus:outline-noneis more specific than the global*:focus-visiblerule, keyboard focus can end up with no visible focus indicator. Restore a focus-visible outline on the textarea or re-addfocus-withinring/border styles on the wrapper to keep focus accessible.
<div className="relative flex items-end rounded-2xl bg-xibe-surface transition-all duration-200">
<textarea
ref={inputRef}
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); }
if (e.key === 'ArrowUp' && isSlashMode && filteredCmds.length > 0) { e.preventDefault(); setSelectedCmd((s) => (s <= 0 ? filteredCmds.length - 1 : s - 1)); }
if (e.key === 'ArrowDown' && isSlashMode && filteredCmds.length > 0) { e.preventDefault(); setSelectedCmd((s) => (s >= filteredCmds.length - 1 ? 0 : s + 1)); }
if (e.key === 'Tab' && isSlashMode && filteredCmds[selectedCmd]) { e.preventDefault(); setInput(filteredCmds[selectedCmd].name + ' '); }
}}
placeholder={isRunning ? 'Thinking...' : 'Ask anything or type / for commands'}
disabled={isRunning}
rows={1}
className="flex-1 resize-none bg-transparent pl-4 pr-12 py-3.5 text-[15px] leading-relaxed text-xibe-text placeholder-xibe-text-dim/50 focus:outline-none disabled:opacity-40"
packages/desktop/src/renderer/components/MessageBubble.tsx:45
prose-code:bg-xibe-surface/50was updated, but inline code is also styled via the customcomponents.coderenderer, which still hard-codesbg-xibe-surface-raised+ border for inline code. That override will keep the old look and makes the newprose-code:*change ineffective/inconsistent. Align the inline<code>renderer styles with the updatedprose-codestyling (or remove one source of truth).
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-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>
),
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>
) : (
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @keyframes pulse-dot { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } } | ||
|
|
||
| *:focus-visible { outline: 2px solid var(--color-xibe-brand-blue); outline-offset: -2px; border-radius: 4px; } | ||
| *:focus-visible { outline: 2px solid var(--color-xibe-border-focus); outline-offset: -2px; border-radius: 4px; } |
🔍 Review for @iotserver24 (Requested by @coderabbitai[bot])Focus: Review of PR 🔴 Security ConcernsNo critical security issues found.
🎯 User-Specific AnalysisThe PR achieves its stated goal of a flat, minimalist, neutral zinc-based palette. However, the trade‑off for a cleaner appearance introduces accessibility regressions that should be addressed before final merge. Key concerns: 1. Focus-visible outline nearly invisible 2. Selection highlight too faint 3. Scrollbar thumb contrast borderline 4. ChatPanel focus indicator removed These are not security issues but directly impact usability and WCAG compliance. ✅ Recommended ChangesFix 1 – Restore visible focus-visible outline ( - *:focus-visible { outline: 2px solid var(--color-xibe-border-focus); ... }
+ *:focus-visible { outline: 2px solid var(--color-xibe-accent); ... }or revert to a lighter shade like Fix 2 – Increase selection highlight opacity ( - ::selection { background: rgba(250,250,250,0.2); color: #fff; }
+ ::selection { background: rgba(250,250,250,0.4); color: #111; }Fix 3 – Lighten scrollbar thumb ( - ::-webkit-scrollbar-thumb { background: #27272a; ... }
+ ::-webkit-scrollbar-thumb { background: #3f3f46; ... }Fix 4 – Add focus ring back to ChatPanel input ( - <div className="relative flex items-end rounded-2xl bg-xibe-surface transition-all duration-200">
+ <div className="relative flex items-end rounded-2xl bg-xibe-surface transition-all duration-200 focus-within:ring-2 focus-within:ring-xibe-border">📘 Comprehensive AnalysisCode Quality & Maintainability
Performance
Design Consistency
Risk of Overlap with Related PR #67 Accessibility (non‑blocking but important)
📊 Review SummaryFiles reviewed: 5
Recommendation: 🤖 Powered by Xibe AI |
This PR modernizes the React desktop UI in
packages/desktopto align with the minimalist, sleek, flat aesthetic requested by the user, drawing inspiration from modern AI assistants like Cursor and Claude Desktop.Changes include:
global.cssfrom a slightly blue-tinted dark mode to a neutral, zinc-based monochrome palette.ChatPanel.tsxto be a flat, borderless background that seamlessly integrates into the surface.MessageBubble.tsx, opting for a simpler flat design. Also adjusted inline code styles.ToolCallCard.tsxby eliminating thebg-xibe-bgandshadow-smclasses, and tightened the vertical padding for a more compact list view.Verification:
pnpm --filter xibecode-desktop run build:check) pass.pnpm testandpnpm lint) passes with no regressions.PR created automatically by Jules for task 523002332861316757 started by @iotserver24
Summary by CodeRabbit