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
File diff suppressed because it is too large
Load Diff
@@ -1,15 +1,36 @@
|
||||
import React from 'react';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ButtonSmall } from '@/components/ui/button-small';
|
||||
import { useConfigStore } from '@/stores/useConfigStore';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { isVSCodeRuntime } from '@/lib/desktop';
|
||||
import { useProjectsStore } from '@/stores/useProjectsStore';
|
||||
import { RiAddLine, RiStackLine } from '@remixicon/react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { SettingsProjectSelector } from '@/components/sections/shared/SettingsProjectSelector';
|
||||
import { opencodeClient } from '@/lib/opencode/client';
|
||||
|
||||
const ADD_PROVIDER_ID = '__add_provider__';
|
||||
|
||||
interface ProviderSourceInfo {
|
||||
exists: boolean;
|
||||
path?: string | null;
|
||||
}
|
||||
|
||||
interface ProviderSources {
|
||||
auth: ProviderSourceInfo;
|
||||
user: ProviderSourceInfo;
|
||||
project: ProviderSourceInfo;
|
||||
custom?: ProviderSourceInfo;
|
||||
}
|
||||
|
||||
const getCurrentDirectory = (): string | null => {
|
||||
const dir = opencodeClient.getDirectory();
|
||||
if (typeof dir === 'string' && dir.trim().length > 0) {
|
||||
return dir.trim();
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
interface ProvidersSidebarProps {
|
||||
onItemSelect?: () => void;
|
||||
}
|
||||
@@ -18,22 +39,80 @@ export const ProvidersSidebar: React.FC<ProvidersSidebarProps> = ({ onItemSelect
|
||||
const providers = useConfigStore((state) => state.providers);
|
||||
const selectedProviderId = useConfigStore((state) => state.selectedProviderId);
|
||||
const setSelectedProvider = useConfigStore((state) => state.setSelectedProvider);
|
||||
const { isMobile } = useDeviceInfo();
|
||||
const activeProjectId = useProjectsStore((s) => s.activeProjectId);
|
||||
const [sourcesByProvider, setSourcesByProvider] = React.useState<Record<string, ProviderSources>>({});
|
||||
const directory = React.useMemo(() => {
|
||||
// tie refresh to active project changes (directory is stored in the client)
|
||||
void activeProjectId;
|
||||
return getCurrentDirectory();
|
||||
}, [activeProjectId]);
|
||||
|
||||
const isVSCode = React.useMemo(() => isVSCodeRuntime(), []);
|
||||
React.useEffect(() => {
|
||||
if (providers.length === 0) {
|
||||
setSourcesByProvider({});
|
||||
return;
|
||||
}
|
||||
|
||||
const bgClass = isVSCode ? 'bg-background' : 'bg-sidebar';
|
||||
let cancelled = false;
|
||||
|
||||
const loadAllSources = async () => {
|
||||
const tasks = providers.map(async (provider) => {
|
||||
try {
|
||||
const query = directory ? `?directory=${encodeURIComponent(directory)}` : '';
|
||||
const response = await fetch(`/api/provider/${encodeURIComponent(provider.id)}/source${query}`, {
|
||||
method: 'GET',
|
||||
headers: { Accept: 'application/json' },
|
||||
});
|
||||
if (!response.ok) {
|
||||
return;
|
||||
}
|
||||
const payload = await response.json().catch(() => null);
|
||||
const sources = (payload?.sources ?? payload?.data?.sources) as ProviderSources | undefined;
|
||||
if (!sources) {
|
||||
return;
|
||||
}
|
||||
if (cancelled) {
|
||||
return;
|
||||
}
|
||||
setSourcesByProvider((prev) => ({
|
||||
...prev,
|
||||
[provider.id]: sources,
|
||||
}));
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
});
|
||||
|
||||
await Promise.all(tasks);
|
||||
};
|
||||
|
||||
void loadAllSources();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [directory, providers]);
|
||||
|
||||
const bgClass = 'bg-background';
|
||||
|
||||
const projectProviders = React.useMemo(() => {
|
||||
return providers.filter((p) => Boolean(sourcesByProvider[p.id]?.project?.exists));
|
||||
}, [providers, sourcesByProvider]);
|
||||
|
||||
const userProviders = React.useMemo(() => {
|
||||
return providers.filter((p) => !sourcesByProvider[p.id]?.project?.exists);
|
||||
}, [providers, sourcesByProvider]);
|
||||
|
||||
return (
|
||||
<div className={cn('flex h-full flex-col', bgClass)}>
|
||||
<div className={cn('border-b px-3', isMobile ? 'mt-2 py-3' : 'py-3')}>
|
||||
<div className="border-b px-3 pt-4 pb-3">
|
||||
<h2 className="text-base font-semibold text-foreground mb-3">Providers</h2>
|
||||
<SettingsProjectSelector className="mb-3" />
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="typography-meta text-muted-foreground">Total {providers.length}</span>
|
||||
<Button
|
||||
type="button"
|
||||
<ButtonSmall
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 -my-1 text-muted-foreground"
|
||||
className="h-7 w-7 px-0 -my-1 text-muted-foreground"
|
||||
onClick={() => {
|
||||
setSelectedProvider(ADD_PROVIDER_ID);
|
||||
onItemSelect?.();
|
||||
@@ -41,8 +120,8 @@ export const ProvidersSidebar: React.FC<ProvidersSidebarProps> = ({ onItemSelect
|
||||
aria-label="Connect provider"
|
||||
title="Connect provider"
|
||||
>
|
||||
<RiAddLine className="size-4" />
|
||||
</Button>
|
||||
<RiAddLine className="h-3.5 w-3.5" />
|
||||
</ButtonSmall>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -54,40 +133,81 @@ export const ProvidersSidebar: React.FC<ProvidersSidebarProps> = ({ onItemSelect
|
||||
<p className="typography-meta mt-1 opacity-75">Check your OpenCode configuration</p>
|
||||
</div>
|
||||
) : (
|
||||
providers.map((provider) => {
|
||||
const modelCount = Array.isArray(provider.models) ? provider.models.length : 0;
|
||||
const isSelected = provider.id === selectedProviderId;
|
||||
<>
|
||||
{userProviders.length > 0 && (
|
||||
<>
|
||||
<div className="px-2 pb-1.5 pt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
|
||||
User Providers
|
||||
</div>
|
||||
{userProviders.map((provider) => (
|
||||
<ProviderListItem
|
||||
key={provider.id}
|
||||
provider={provider}
|
||||
selectedProviderId={selectedProviderId}
|
||||
onSelect={() => {
|
||||
setSelectedProvider(provider.id);
|
||||
onItemSelect?.();
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={provider.id}
|
||||
className={cn(
|
||||
'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200',
|
||||
isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedProvider(provider.id);
|
||||
onItemSelect?.();
|
||||
}}
|
||||
className="flex min-w-0 flex-1 items-center gap-2 rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
|
||||
tabIndex={0}
|
||||
>
|
||||
<ProviderLogo providerId={provider.id} className="h-4 w-4 flex-shrink-0" />
|
||||
<span className="typography-ui-label font-normal truncate flex-1 min-w-0 text-foreground">
|
||||
{provider.name || provider.id}
|
||||
</span>
|
||||
<span className="typography-micro text-muted-foreground/60 flex-shrink-0">
|
||||
{modelCount}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
{projectProviders.length > 0 && (
|
||||
<>
|
||||
<div className={cn('px-2 pb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground', userProviders.length > 0 ? 'pt-3' : 'pt-2')}>
|
||||
Project Providers
|
||||
</div>
|
||||
{projectProviders.map((provider) => (
|
||||
<ProviderListItem
|
||||
key={provider.id}
|
||||
provider={provider}
|
||||
selectedProviderId={selectedProviderId}
|
||||
onSelect={() => {
|
||||
setSelectedProvider(provider.id);
|
||||
onItemSelect?.();
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</ScrollableOverlay>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ProviderListItem: React.FC<{
|
||||
provider: { id: string; name?: string; models?: unknown[] };
|
||||
selectedProviderId: string;
|
||||
onSelect: () => void;
|
||||
}> = ({ provider, selectedProviderId, onSelect }) => {
|
||||
const modelCount = Array.isArray(provider.models) ? provider.models.length : 0;
|
||||
const isSelected = provider.id === selectedProviderId;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={provider.id}
|
||||
className={cn(
|
||||
'group relative flex items-center rounded-md px-1.5 py-1 transition-all duration-200',
|
||||
isSelected ? 'bg-interactive-selection' : 'hover:bg-interactive-hover'
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSelect}
|
||||
className="flex min-w-0 flex-1 items-center gap-2 rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
|
||||
tabIndex={0}
|
||||
>
|
||||
<ProviderLogo providerId={provider.id} className="h-4 w-4 flex-shrink-0" />
|
||||
<span className="typography-ui-label font-normal truncate flex-1 min-w-0 text-foreground">
|
||||
{provider.name || provider.id}
|
||||
</span>
|
||||
<span className="typography-micro text-muted-foreground/60 flex-shrink-0">
|
||||
{modelCount}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user