Major UI refresh: sidebar redesign, theme expansion, and chat performance optimizations (#706)

## Summary
Complete sidebar redesign and comprehensive UI polish pass with performance optimizations, theme system refinements, and desktop integration improvements.

## Key Changes

**Sidebar & Navigation Redesign**
- Redesigned sessions sidebar layout with unified button primitives
- Added activity sections with project grouping and improved session organization
- Refined sidebar corners, spacing, and visual hierarchy
- Removed NavRail component in favor of streamlined sidebar
- Stabilized sessions bar toggle position in fullscreen mode

**Performance Optimizations**
- Reduced chat streaming CPU usage and storage churn
- Optimized task tool polling and live timers with debouncing
- Prevented chat state races and reduced background request load
- Debounced draft writes and coalesced session reloads
- Optimized message store updates and turn tracking

**Theme & Visual System**
- Added theme-aware window corners (desktop) and border radius tokens
- Introduced glassmorphism effects on desktop sidebar
- Added backdrop blur to UI elements

**Chat Experience**
- Added session-based permission auto-accept toggle in chat input
- Polished permission shield UX with improved icon sizing and spacing
- Fixed chat scroll-to-bottom behavior and timeline tracking
- Enhanced tool output display with better path label detection
- Removed duplicate draft context details in chat header
- Added text selection menu to chat messages

**Git Improvements**
- Refreshed git history visual design with cleaner dividers
- Added remote removal action in sync selector
- Stabilized git polling to prevent excessive requests
- Improved tool output rendering for git operations

**Settings & Panels**
- Fixed mobile scrolling on settings pages
- Made outside-click settings close instantly
- Reduced settings load churn and CPU spikes
- Improved services dropdown layout and spacing
- Softened panel resize handles

**Desktop Integration**
- Synced macOS window theme with app theme
- Restored window dragging in sidebar header zones
- Fixed system window corners on macOS
- Improved header session metadata and action controls

**Button & Component Standardization**
- Unified button primitives across all components
- Standardized destructive action patterns
- Removed unused button variants (button-large, button-small)
- Aligned context tab close hit areas

---------

Co-authored-by: Iuliia Ivashko <yulia.ivashko@gmail.com>
This commit is contained in:
Bohdan Triapitsyn
2026-03-20 01:01:03 +02:00
committed by GitHub
co-authored by Iuliia Ivashko
parent 359879153a
commit 321cc7252a
222 changed files with 8575 additions and 5456 deletions
+95 -9
View File
@@ -9,6 +9,7 @@ import type {
GitBranch,
GitDeleteBranchPayload,
GitDeleteRemoteBranchPayload,
GitRemoveRemotePayload,
GeneratedCommitMessage,
GitWorktreeInfo,
CreateGitWorktreePayload,
@@ -51,6 +52,15 @@ const resolveBaseOrigin = (): string => {
};
const API_BASE = '/api/git';
const GIT_STATUS_CACHE_TTL_MS = 1200;
const GIT_REPO_CHECK_CACHE_TTL_MS = 5000;
const gitStatusCache = new Map<string, { value: GitStatus; expiresAt: number }>();
const gitStatusInFlight = new Map<string, Promise<GitStatus>>();
const gitRepoCache = new Map<string, { value: boolean; expiresAt: number }>();
const gitRepoInFlight = new Map<string, Promise<boolean>>();
const normalizeDirectoryKey = (directory: string): string => directory.trim();
function buildUrl(
path: string,
@@ -73,20 +83,76 @@ function buildUrl(
}
export async function checkIsGitRepository(directory: string): Promise<boolean> {
const response = await fetch(buildUrl(`${API_BASE}/check`, directory));
if (!response.ok) {
throw new Error(`Failed to check git repository: ${response.statusText}`);
const key = normalizeDirectoryKey(directory);
const now = Date.now();
const cached = gitRepoCache.get(key);
if (cached && cached.expiresAt > now) {
return cached.value;
}
const inFlight = gitRepoInFlight.get(key);
if (inFlight) {
return inFlight;
}
const task = (async () => {
const response = await fetch(buildUrl(`${API_BASE}/check`, directory));
if (!response.ok) {
throw new Error(`Failed to check git repository: ${response.statusText}`);
}
const data = await response.json();
const isGitRepository = Boolean(data.isGitRepository);
gitRepoCache.set(key, {
value: isGitRepository,
expiresAt: Date.now() + GIT_REPO_CHECK_CACHE_TTL_MS,
});
return isGitRepository;
})();
gitRepoInFlight.set(key, task);
try {
return await task;
} finally {
if (gitRepoInFlight.get(key) === task) {
gitRepoInFlight.delete(key);
}
}
const data = await response.json();
return data.isGitRepository;
}
export async function getGitStatus(directory: string): Promise<GitStatus> {
const response = await fetch(buildUrl(`${API_BASE}/status`, directory));
if (!response.ok) {
throw new Error(`Failed to get git status: ${response.statusText}`);
const key = normalizeDirectoryKey(directory);
const now = Date.now();
const cached = gitStatusCache.get(key);
if (cached && cached.expiresAt > now) {
return cached.value;
}
const inFlight = gitStatusInFlight.get(key);
if (inFlight) {
return inFlight;
}
const task = (async () => {
const response = await fetch(buildUrl(`${API_BASE}/status`, directory));
if (!response.ok) {
throw new Error(`Failed to get git status: ${response.statusText}`);
}
const payload = await response.json() as GitStatus;
gitStatusCache.set(key, {
value: payload,
expiresAt: Date.now() + GIT_STATUS_CACHE_TTL_MS,
});
return payload;
})();
gitStatusInFlight.set(key, task);
try {
return await task;
} finally {
if (gitStatusInFlight.get(key) === task) {
gitStatusInFlight.delete(key);
}
}
return response.json();
}
export async function getGitDiff(directory: string, options: GetGitDiffOptions): Promise<GitDiffResponse> {
@@ -207,6 +273,26 @@ export async function deleteRemoteBranch(directory: string, payload: GitDeleteRe
return response.json();
}
export async function removeRemote(directory: string, payload: GitRemoveRemotePayload): Promise<{ success: boolean }> {
const remote = payload?.remote?.trim();
if (!remote) {
throw new Error('remote is required to remove a remote');
}
const response = await fetch(buildUrl(`${API_BASE}/remotes`, directory), {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ remote }),
});
if (!response.ok) {
const error = await response.json().catch(() => ({ error: response.statusText }));
throw new Error(error.error || 'Failed to remove remote');
}
return response.json();
}
export async function generateCommitMessage(
directory: string,
files: string[],