feat: redesign settings pages to match canonical flat UI patterns (#493)
* refactor(settings): new IA shell + projects section + skills catalog discoverability * chore(settings): split providers list by scope; show user before project * fix: navigation flow in mobile Settings * feat: redesign settings pages to use modern elevated surface patterns * feat: replace helper text with tooltips in settings * ui: redesign update dialog and fix external link routing - Restructures UpdateDialog to focus on changelog readability with a wider max-w-4xl canvas - Highlights @username contributor mentions with theme primary color - Strips excessive vertical padding and right-aligns compact action buttons - Disables streamdown's internal link safety dialog in favor of direct Tauri shell routing * feat: refactor Git identities into dedicated Git settings page * feat: unify sidebar background styling across VS Code and web/mobile * fix: adjust button styling and layout for mobile settings pages * feat: add MCP settings page and sidebar * feat: hide models in provider view (thanks to @nguyenngothuong) * feat: add "Add new provider" option to model selector dropdown * fix: local evroc logo + provider dropdown icons * fix: increase width of provider menu * fix: dark theme background color for better contrast * feat: update @opencode-ai/sdk dependency to v1.2.10 * fix: restore session sorting to only use updated time * fix: added settings for sessions deletion dialog * fix: adjust padding on settings pages for better layout * fix: standardize select dropdown height across UI * fix: agent selector UI and notification settings * fix: remove redundant helper text from settings pages * fix: update UI layout for description fields * fix: remove border-none and shadow-none from textarea classes * fix: enable context menu on sidebar items * feat: refactor UI controls and layout patterns across settings pages * fix: use headerless blocks when page title already provides context * fix: remove subtask option from command settings * fix: refactor mcp page settings * fix: reduce spacing in skills configuration pages * feat: refactor voice settings * feat: refactor settings sidebar sections
This commit is contained in:
Bohdan Triapitsyn
committed by
GitHub
GitHub
parent
d2d39c48ac
commit
d2358c2c03
@@ -0,0 +1,215 @@
|
||||
import React from 'react';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { ButtonSmall } from '@/components/ui/button-small';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useProjectsStore } from '@/stores/useProjectsStore';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { PROJECT_COLORS, PROJECT_ICONS, PROJECT_COLOR_MAP as COLOR_MAP } from '@/lib/projectMeta';
|
||||
import { RiCloseLine } from '@remixicon/react';
|
||||
import { WorktreeSectionContent } from '@/components/sections/openchamber/WorktreeSectionContent';
|
||||
|
||||
export const ProjectsPage: React.FC = () => {
|
||||
const projects = useProjectsStore((state) => state.projects);
|
||||
const updateProjectMeta = useProjectsStore((state) => state.updateProjectMeta);
|
||||
const selectedId = useUIStore((state) => state.settingsProjectsSelectedId);
|
||||
const setSelectedId = useUIStore((state) => state.setSettingsProjectsSelectedId);
|
||||
|
||||
const selectedProject = React.useMemo(() => {
|
||||
if (!selectedId) return null;
|
||||
return projects.find((p) => p.id === selectedId) ?? null;
|
||||
}, [projects, selectedId]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (projects.length === 0) {
|
||||
setSelectedId(null);
|
||||
return;
|
||||
}
|
||||
if (selectedId && projects.some((p) => p.id === selectedId)) {
|
||||
return;
|
||||
}
|
||||
setSelectedId(projects[0].id);
|
||||
}, [projects, selectedId, setSelectedId]);
|
||||
|
||||
const [name, setName] = React.useState('');
|
||||
const [icon, setIcon] = React.useState<string | null>(null);
|
||||
const [color, setColor] = React.useState<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!selectedProject) {
|
||||
setName('');
|
||||
setIcon(null);
|
||||
setColor(null);
|
||||
return;
|
||||
}
|
||||
setName(selectedProject.label ?? '');
|
||||
setIcon(selectedProject.icon ?? null);
|
||||
setColor(selectedProject.color ?? null);
|
||||
}, [selectedProject]);
|
||||
|
||||
const hasChanges = Boolean(selectedProject) && (
|
||||
name.trim() !== (selectedProject?.label ?? '').trim()
|
||||
|| icon !== (selectedProject?.icon ?? null)
|
||||
|| color !== (selectedProject?.color ?? null)
|
||||
);
|
||||
|
||||
const handleSave = React.useCallback(() => {
|
||||
if (!selectedProject) return;
|
||||
updateProjectMeta(selectedProject.id, { label: name.trim(), icon, color });
|
||||
}, [color, icon, name, selectedProject, updateProjectMeta]);
|
||||
|
||||
if (!selectedProject) {
|
||||
return (
|
||||
<ScrollableOverlay keyboardAvoid outerClassName="h-full" className="w-full">
|
||||
<div className="mx-auto w-full max-w-4xl p-3 sm:p-6 sm:pt-8">
|
||||
<p className="typography-meta text-muted-foreground">No projects available.</p>
|
||||
</div>
|
||||
</ScrollableOverlay>
|
||||
);
|
||||
}
|
||||
|
||||
const currentColorVar = color ? (COLOR_MAP[color] ?? null) : null;
|
||||
|
||||
return (
|
||||
<ScrollableOverlay keyboardAvoid outerClassName="h-full" className="w-full bg-background">
|
||||
<div className="mx-auto w-full max-w-4xl p-3 sm:p-6 sm:pt-8">
|
||||
|
||||
{/* Top Header & Actions */}
|
||||
<div className="mb-4 flex items-center justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<h2 className="typography-ui-header font-semibold text-foreground truncate">
|
||||
{selectedProject.label ?? 'Project Settings'}
|
||||
</h2>
|
||||
<p className="typography-meta text-muted-foreground truncate" title={selectedProject.path}>
|
||||
{selectedProject.path}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Identity Controls */}
|
||||
<div className="mb-8">
|
||||
<section className="px-2 pb-2 pt-0 space-y-0.5">
|
||||
|
||||
{/* Name */}
|
||||
<div className="py-1.5">
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="typography-ui-label text-foreground">Project Name</span>
|
||||
</div>
|
||||
<div className="mt-1.5 flex min-w-0 items-center gap-2">
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Project name"
|
||||
className="h-7 min-w-0 w-full sm:max-w-[19rem]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color */}
|
||||
<div className="py-1.5">
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="typography-ui-label text-foreground">Accent Color</span>
|
||||
</div>
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setColor(null)}
|
||||
className={cn(
|
||||
'h-7 w-7 rounded-md border transition-colors flex items-center justify-center',
|
||||
color === null
|
||||
? 'border-2 border-foreground bg-[var(--primary-base)]/10'
|
||||
: 'border-border/40 hover:border-border hover:bg-[var(--surface-muted)]'
|
||||
)}
|
||||
title="None"
|
||||
>
|
||||
<RiCloseLine className="h-4 w-4 text-muted-foreground" />
|
||||
</button>
|
||||
{PROJECT_COLORS.map((c) => (
|
||||
<button
|
||||
key={c.key}
|
||||
type="button"
|
||||
onClick={() => setColor(c.key)}
|
||||
className={cn(
|
||||
'h-7 w-7 rounded-md border transition-colors',
|
||||
color === c.key
|
||||
? 'border-2 border-foreground ring-1 ring-[var(--primary-base)]/40'
|
||||
: 'border-transparent hover:border-border/70'
|
||||
)}
|
||||
style={{ backgroundColor: c.cssVar }}
|
||||
title={c.label}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icon */}
|
||||
<div className="py-1.5">
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="typography-ui-label text-foreground">Project Icon</span>
|
||||
</div>
|
||||
<div className="mt-1.5 flex max-w-[22rem] flex-wrap items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIcon(null)}
|
||||
className={cn(
|
||||
'h-7 w-7 rounded-md border transition-colors flex items-center justify-center',
|
||||
icon === null
|
||||
? 'border-2 border-foreground bg-[var(--primary-base)]/10'
|
||||
: 'border-border/40 hover:border-border hover:bg-[var(--surface-muted)]'
|
||||
)}
|
||||
title="None"
|
||||
>
|
||||
<RiCloseLine className="h-4 w-4 text-muted-foreground" />
|
||||
</button>
|
||||
{PROJECT_ICONS.map((i) => {
|
||||
const IconComponent = i.Icon;
|
||||
return (
|
||||
<button
|
||||
key={i.key}
|
||||
type="button"
|
||||
onClick={() => setIcon(i.key)}
|
||||
className={cn(
|
||||
'h-7 w-7 rounded-md border transition-colors flex items-center justify-center',
|
||||
icon === i.key
|
||||
? 'border-2 border-foreground bg-[var(--primary-base)]/10'
|
||||
: 'border-transparent hover:border-border hover:bg-[var(--surface-muted)]'
|
||||
)}
|
||||
title={i.label}
|
||||
>
|
||||
<IconComponent className="w-4 h-4" style={currentColorVar && icon === i.key ? { color: currentColorVar } : undefined} />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<div className="mt-0.5 px-2 py-1">
|
||||
<ButtonSmall
|
||||
onClick={handleSave}
|
||||
disabled={!hasChanges || name.trim().length === 0}
|
||||
size="xs"
|
||||
className="!font-normal"
|
||||
>
|
||||
Save Changes
|
||||
</ButtonSmall>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Worktree Group */}
|
||||
<div className="mb-8">
|
||||
<div className="mb-1 px-1">
|
||||
<h3 className="typography-ui-header font-medium text-foreground">
|
||||
Worktree
|
||||
</h3>
|
||||
</div>
|
||||
<section className="px-2 pb-2 pt-0">
|
||||
<WorktreeSectionContent projectRef={{ id: selectedProject.id, path: selectedProject.path }} />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ScrollableOverlay>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,117 @@
|
||||
import React from 'react';
|
||||
import { useProjectsStore } from '@/stores/useProjectsStore';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { SettingsSidebarLayout } from '@/components/sections/shared/SettingsSidebarLayout';
|
||||
import { SettingsSidebarItem } from '@/components/sections/shared/SettingsSidebarItem';
|
||||
import { PROJECT_COLOR_MAP, PROJECT_ICON_MAP } from '@/lib/projectMeta';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { RiAddLine, RiFolderLine } from '@remixicon/react';
|
||||
import { isDesktopLocalOriginActive, isTauriShell, isVSCodeRuntime } from '@/lib/desktop';
|
||||
import { sessionEvents } from '@/lib/sessionEvents';
|
||||
import { toast } from '@/components/ui';
|
||||
|
||||
export const ProjectsSidebar: React.FC<{ onItemSelect?: () => void }> = ({ onItemSelect }) => {
|
||||
const projects = useProjectsStore((state) => state.projects);
|
||||
const addProject = useProjectsStore((state) => state.addProject);
|
||||
const selectedId = useUIStore((state) => state.settingsProjectsSelectedId);
|
||||
const setSelectedId = useUIStore((state) => state.setSettingsProjectsSelectedId);
|
||||
|
||||
const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
|
||||
const tauriIpcAvailable = React.useMemo(() => isTauriShell(), []);
|
||||
|
||||
const handleAddProject = React.useCallback(() => {
|
||||
if (!tauriIpcAvailable || !isDesktopLocalOriginActive()) {
|
||||
sessionEvents.requestDirectoryDialog();
|
||||
return;
|
||||
}
|
||||
|
||||
import('@/lib/desktop')
|
||||
.then(({ requestDirectoryAccess }) => requestDirectoryAccess(''))
|
||||
.then((result) => {
|
||||
if (result.success && result.path) {
|
||||
const added = addProject(result.path, { id: result.projectId });
|
||||
if (!added) {
|
||||
toast.error('Failed to add project', {
|
||||
description: 'Please select a valid directory.',
|
||||
});
|
||||
return;
|
||||
}
|
||||
setSelectedId(added.id);
|
||||
} else if (result.error && result.error !== 'Directory selection cancelled') {
|
||||
toast.error('Failed to select directory', {
|
||||
description: result.error,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Failed to select directory:', error);
|
||||
toast.error('Failed to select directory');
|
||||
});
|
||||
}, [addProject, setSelectedId, tauriIpcAvailable]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (projects.length === 0) {
|
||||
if (selectedId !== null) {
|
||||
setSelectedId(null);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (selectedId && projects.some((p) => p.id === selectedId)) {
|
||||
return;
|
||||
}
|
||||
setSelectedId(projects[0].id);
|
||||
}, [projects, selectedId, setSelectedId]);
|
||||
|
||||
return (
|
||||
<SettingsSidebarLayout
|
||||
variant="background"
|
||||
header={
|
||||
<div className={cn('border-b px-3', 'pt-4 pb-3')}>
|
||||
<h2 className="text-base font-semibold text-foreground mb-3">Projects</h2>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="typography-meta text-muted-foreground">Total {projects.length}</span>
|
||||
{!isVSCode && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 -my-1 text-muted-foreground"
|
||||
onClick={handleAddProject}
|
||||
aria-label="Add project"
|
||||
>
|
||||
<RiAddLine className="size-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{projects.map((project) => {
|
||||
const selected = project.id === selectedId;
|
||||
const Icon = project.icon ? PROJECT_ICON_MAP[project.icon] : null;
|
||||
const color = project.color ? (PROJECT_COLOR_MAP[project.color] ?? null) : null;
|
||||
const icon = Icon
|
||||
? (
|
||||
<Icon className={cn('h-4 w-4', selected ? 'text-foreground' : 'text-muted-foreground/70')} style={color ? { color } : undefined} />
|
||||
)
|
||||
: (
|
||||
<RiFolderLine className={cn('h-4 w-4', selected ? 'text-foreground' : 'text-muted-foreground/70')} style={color ? { color } : undefined} />
|
||||
);
|
||||
|
||||
return (
|
||||
<SettingsSidebarItem
|
||||
key={project.id}
|
||||
title={project.label || project.path}
|
||||
icon={icon}
|
||||
selected={selected}
|
||||
onSelect={() => {
|
||||
setSelectedId(project.id);
|
||||
onItemSelect?.();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</SettingsSidebarLayout>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user