Skip to content

🎨 [ui] Modernize Desktop App UI (Flat / Grayscale Theme) #104

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
iotserver24 wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

🎨 [ui] Modernize Desktop App UI (Flat / Grayscale Theme) #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d836a1
feat(ui): redesign desktop app with modern flat aesthetic
iotserver24 May 27, 2026
fa5be01
fix(deps): override tmp package to version 0.2.6 to resolve high seve…
iotserver24 May 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
"vitest>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",
Expand Down
6 changes: 3 additions & 3 deletions packages/desktop/src/renderer/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-10 items-center justify-between px-3 shrink-0 bg-xibe-bg z-10 border-b border-xibe-border/40">
<div className="flex items-center gap-3">
<button
onClick={() => setLeftPanelOpen((v) => !v)}
Expand Down Expand Up @@ -372,7 +372,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-[#0c0c0f] flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out border-r border-xibe-border/40"
className="shrink-0 bg-xibe-bg flex flex-col overflow-hidden transition-[width] duration-200 ease-in-out border-r border-xibe-border/40"
style={{ width: leftPanelOpen ? 240 : 0 }}
>
<div className="flex-1 min-h-0 flex flex-col p-3.5 pb-2">
Expand All @@ -383,7 +383,7 @@ export default function App() {
/>
</div>
{/* Settings shortcut at bottom */}
<div className="shrink-0 p-3 border-t border-xibe-border/30 bg-[#0c0c0f]/80 backdrop-blur-sm">
<div className="shrink-0 p-3 border-t border-xibe-border/40 bg-xibe-bg/80 backdrop-blur-sm">
<button
onClick={() => setSettingsOpen(true)}
className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-xibe-text-secondary hover:bg-xibe-surface-hover/60 hover:text-xibe-text transition-all duration-200 group border border-transparent hover:border-xibe-border/30"
Expand Down
23 changes: 8 additions & 15 deletions packages/desktop/src/renderer/components/ChatHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,20 +88,13 @@ const ChatHistoryItem = memo(function ChatHistoryItem({
<button
onClick={() => onSelect(session.id)}
className={cn(
"relative flex w-full items-center justify-between gap-2 rounded-lg pr-2 py-2.5 text-left transition-all duration-150 group border border-transparent select-none cursor-pointer",
"relative flex w-full items-center justify-between gap-2 rounded-lg pr-2 py-2.5 text-left transition-colors duration-150 group select-none cursor-pointer",
isGeneral ? "pl-4" : "pl-10",
isActive
? "text-xibe-text font-medium bg-xibe-surface-hover/75 border-xibe-border/40 shadow-sm"
? "text-xibe-text font-medium bg-xibe-surface-raised/50"
: "text-xibe-text-secondary hover:bg-xibe-surface-hover/30 hover:text-xibe-text"
)}
>
{isActive && (
<span className={cn(
"absolute top-2.5 bottom-2.5 w-[3px] rounded-r-md bg-xibe-brand-purple animate-fade-in",
isGeneral ? "left-0" : "left-3.5"
)} />
)}

<span className="flex-1 truncate text-[13px] leading-tight font-sans">
{session.title}
</span>
Expand Down Expand Up @@ -178,21 +171,21 @@ const ChatHistory = memo(function ChatHistory({ activeSessionId, onSelectSession
return (
<div className="flex h-full flex-col">
{/* Top navigation actions */}
<div className="space-y-2.5 mb-5 shrink-0">
<div className="space-y-1 mb-5 shrink-0 mt-1">
<button
onClick={onNewChat}
className="flex w-full items-center gap-2.5 rounded-lg border border-xibe-border/60 bg-xibe-surface-raised/40 hover:bg-xibe-surface-hover/80 hover:border-xibe-border-focus/50 px-3 py-2.5 text-[13px] font-medium text-xibe-text transition-all duration-200 cursor-pointer select-none group"
className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-xibe-text-secondary hover:bg-xibe-surface-hover/40 hover:text-xibe-text transition-colors duration-200 cursor-pointer select-none group"
>
<Plus className="h-4 w-4 text-xibe-brand-purple group-hover:scale-110 transition-transform duration-200" />
<Plus className="h-4 w-4 text-xibe-text-dim group-hover:text-xibe-text transition-colors duration-200" />
<span className="font-sans">New Conversation</span>
</button>

<div className="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13px] font-medium text-xibe-text bg-xibe-surface-hover/40 border border-xibe-border/20 select-none cursor-pointer">
<History className="h-4 w-4 text-xibe-brand-purple" />
<div className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-xibe-text bg-xibe-surface-raised/50 select-none cursor-pointer">
<History className="h-4 w-4 text-xibe-text-dim" />
<span className="font-sans">Conversation History</span>
</div>

<div className="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-[13px] font-medium text-xibe-text-secondary hover:bg-xibe-surface-hover/30 hover:text-xibe-text transition-colors select-none cursor-pointer">
<div className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-xibe-text-secondary hover:bg-xibe-surface-hover/30 hover:text-xibe-text transition-colors select-none cursor-pointer">
<Clock className="h-4 w-4 text-xibe-text-dim" />
<span className="font-sans">Scheduled Tasks</span>
</div>
Expand Down
15 changes: 7 additions & 8 deletions packages/desktop/src/renderer/components/ChatPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,23 +118,22 @@ export default function ChatPanel({
</div>

{needsSetup ? (
<button onClick={onOpenSetup} className="rounded-full bg-xibe-accent px-8 py-2.5 text-sm font-medium text-xibe-bg hover:bg-xibe-accent-hover transition-colors">
<button onClick={onOpenSetup} className="rounded-xl bg-xibe-accent px-6 py-2 text-sm font-medium text-xibe-bg hover:bg-xibe-accent-hover transition-colors">
Complete Setup
</button>
) : (
<div className="w-full max-w-2xl space-y-4">
<div className="flex flex-wrap justify-center gap-2 mb-6">
{[
{ text: 'Build a REST API', icon: <Zap className="h-3.5 w-3.5" /> },
{ text: 'Fix a bug', icon: <BookOpen className="h-3.5 w-3.5" /> },
{ text: 'Set up a project', icon: <Terminal className="h-3.5 w-3.5" /> }
{ text: 'Build a REST API' },
{ text: 'Fix a bug' },
{ text: 'Set up a project' }
].map((q) => (
<button
key={q.text}
onClick={() => onSendMessage(q.text)}
className="flex items-center gap-2 rounded-full bg-xibe-surface px-3.5 py-1.5 text-[13px] text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text transition-colors border border-xibe-border-subtle"
className="flex items-center gap-2 rounded-lg bg-transparent px-3 py-1.5 text-[13px] text-xibe-text-secondary hover:bg-xibe-surface-hover hover:text-xibe-text transition-colors border border-xibe-border-subtle hover:border-xibe-border-focus"
>
<span className="text-xibe-text-dim">{q.icon}</span>
{q.text}
</button>
))}
Expand Down Expand Up @@ -179,8 +178,8 @@ export default function ChatPanel({
</div>
)}

{/* Floating Pill input */}
<div className="relative flex flex-col rounded-3xl bg-xibe-surface border border-xibe-border-subtle focus-within:border-xibe-border-focus focus-within:bg-xibe-surface transition-all duration-200">
{/* Flat input */}
<div className="relative flex flex-col rounded-xl bg-xibe-bg border border-xibe-border-focus focus-within:border-xibe-text-dim/50 transition-all duration-200">
<div className="flex items-center px-4 pt-2 pb-1 text-xs text-xibe-text-dim">
<span className="flex items-center gap-1.5">
{MODES.map((m) => (
Expand Down
6 changes: 3 additions & 3 deletions packages/desktop/src/renderer/components/MessageBubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@ 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-[90%] sm:max-w-[80%] rounded-2xl bg-xibe-surface-raised px-5 py-3 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap">
<div className="flex justify-end animate-fade-in w-full group mb-4">
<div className="max-w-[90%] sm:max-w-[80%] rounded-xl bg-xibe-surface-raised px-4 py-2.5 text-[15px] leading-relaxed text-xibe-text whitespace-pre-wrap border border-xibe-border-subtle">
{content}
</div>
</div>
);
}

return (
<div className="animate-fade-in flex flex-col w-full group">
<div className="animate-fade-in flex flex-col w-full group mb-4">
<div className="prose prose-invert max-w-none text-[15px] leading-relaxed text-xibe-text
prose-p:my-1.5 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
Expand Down
10 changes: 5 additions & 5 deletions packages/desktop/src/renderer/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@

@theme {
--color-xibe-bg: #09090b;
--color-xibe-surface: #121214;
--color-xibe-surface: #09090b;
--color-xibe-surface-raised: #18181b;
--color-xibe-surface-hover: #27272a;
--color-xibe-border: #27272a;
--color-xibe-border-subtle: #18181b;
--color-xibe-border-focus: #52525b;
--color-xibe-border-focus: #3f3f46;
--color-xibe-muted: #71717a;
--color-xibe-text: #fafafa;
--color-xibe-text: #ececec;
--color-xibe-text-secondary: #a1a1aa;
--color-xibe-text-dim: #71717a;
--color-xibe-accent: #e4e4e7;
--color-xibe-accent: #ececec;
--color-xibe-accent-hover: #ffffff;
--color-xibe-accent-muted: rgba(244, 244, 245, 0.1);
--color-xibe-brand-blue: #60A5FA;
--color-xibe-brand-green: #34D399;
--color-xibe-brand-orange: #FBBF24;
--color-xibe-brand-purple: #A78BFA;
--color-xibe-brand-purple: #a1a1aa; /* Flatten purple accent to gray */
--color-xibe-brand-red: #F87171;
--color-xibe-suggestion: #93C5FD;
--color-xibe-user-bubble: #18181b;
Expand Down
9 changes: 5 additions & 4 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file removed screenshot.png
View file
Open in desktop
Binary file not shown.
Loading