settings framework and section metadata keyed (487 -> 425)
SettingsSection now carries titleKey/descriptionKey instead of title/description, and the sidebar and content pane resolve them. The section arrays are module-level consts holding JSX content, so they cannot call a hook — the data holds keys and the renderers translate. Sidebar search matches the RESOLVED words, so it works in the language on screen. Capital K in titleKey is load-bearing: docs-check-settings.ts greps key:\s*'…' for route segments, and a lowercase title_key would have fed it twenty bogus paths. Verified 0 bogus, 26 declared, 20 offered, 0 missing. Section titles now share one key with the Spotlight rows that name the same section, per 'one key per meaning'. Two casings had to converge, so Settings shows Spotlight's: 'Change Password' now reads 'Change password'. Settings sidebar search placeholder was 'Search...'; it is now 'Search settings…', which is what the skeleton catalog already said and what distinguishes it from the global Spotlight.
This commit is contained in:
@@ -11,6 +11,7 @@ import { SettingsRoute, createSettingsPanelComponents, type SettingsSectionGroup
|
||||
import { useSettings } from 'state/useSettings';
|
||||
import type { UserSettings } from 'state/useSettings';
|
||||
import { useModels, useVisibleModels, modelKey, getProviderDisplayName, type ModelOption } from 'state/useModels';
|
||||
import { useTranslation } from '@/lib/i18n';
|
||||
import { useAccessPolicy } from 'state/useAccessPolicy';
|
||||
import { useUserState } from 'state/useUserState';
|
||||
import { AIHarnessesSection } from './ServerSettings/AIHarnessesSection';
|
||||
@@ -104,6 +105,7 @@ const DropZone = ({ label, children, onDrop }: DropZoneProps) => {
|
||||
// --- My Models Section (per-user hidden models) ---
|
||||
|
||||
function MyModelsSection() {
|
||||
const { t } = useTranslation();
|
||||
const { settings, saveSettings } = useSettings();
|
||||
const visibleModels = useModels();
|
||||
const [activeProvider, setActiveProvider] = useUserState<string>('my-models-provider', '');
|
||||
@@ -174,11 +176,7 @@ function MyModelsSection() {
|
||||
}, []);
|
||||
|
||||
if (providerGroups.length === 0) {
|
||||
return (
|
||||
<p className="text-sm text-duck-dark/40 dark:text-foreground/40">
|
||||
No models available. Configure API keys in Providers.
|
||||
</p>
|
||||
);
|
||||
return <p className="text-sm text-duck-dark/40 dark:text-foreground/40">{t('settings.ai.noModels')}</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -199,9 +197,9 @@ function MyModelsSection() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<DropZone label="Visible" onDrop={showModel}>
|
||||
<DropZone label={t('settings.ai.visible')} onDrop={showModel}>
|
||||
{shown.length === 0 && (
|
||||
<span className="text-xs text-duck-dark/30 dark:text-foreground/30 py-1">Drag models here to show</span>
|
||||
<span className="text-xs text-duck-dark/30 dark:text-foreground/30 py-1">{t('settings.ai.dragToShow')}</span>
|
||||
)}
|
||||
{shown.map((m) => (
|
||||
<ModelPill
|
||||
@@ -215,9 +213,9 @@ function MyModelsSection() {
|
||||
))}
|
||||
</DropZone>
|
||||
|
||||
<DropZone label="Hidden" onDrop={hideModel}>
|
||||
<DropZone label={t('settings.ai.hidden')} onDrop={hideModel}>
|
||||
{hidden.length === 0 && (
|
||||
<span className="text-xs text-duck-dark/30 dark:text-foreground/30 py-1">All models visible</span>
|
||||
<span className="text-xs text-duck-dark/30 dark:text-foreground/30 py-1">{t('settings.ai.allVisible')}</span>
|
||||
)}
|
||||
{hidden.map((m) => (
|
||||
<ModelPill
|
||||
@@ -237,6 +235,7 @@ function MyModelsSection() {
|
||||
// --- Member Models Section (system-wide policy, admin only) ---
|
||||
|
||||
function MemberModelsSection() {
|
||||
const { t } = useTranslation();
|
||||
const client = useClient();
|
||||
const queryClient = useQueryClient();
|
||||
const { policy, savePolicy } = useAccessPolicy();
|
||||
@@ -249,9 +248,9 @@ function MemberModelsSection() {
|
||||
try {
|
||||
await client.post('/server-settings/chat-providers/local-providers/refresh');
|
||||
queryClient.invalidateQueries({ queryKey: ['CHAT_MODELS'] });
|
||||
toast.success('Models refreshed');
|
||||
toast.success(t('settings.ai.refreshed'));
|
||||
} catch {
|
||||
toast.error('Failed to refresh models');
|
||||
toast.error(t('settings.ai.refreshFailed'));
|
||||
} finally {
|
||||
setRefreshing(false);
|
||||
}
|
||||
@@ -325,11 +324,7 @@ function MemberModelsSection() {
|
||||
}, []);
|
||||
|
||||
if (providerGroups.length === 0) {
|
||||
return (
|
||||
<p className="text-sm text-duck-dark/40 dark:text-foreground/40">
|
||||
No models available. Configure API keys in Providers.
|
||||
</p>
|
||||
);
|
||||
return <p className="text-sm text-duck-dark/40 dark:text-foreground/40">{t('settings.ai.noModels')}</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -353,15 +348,17 @@ function MemberModelsSection() {
|
||||
onClick={refreshModels}
|
||||
disabled={refreshing}
|
||||
className="ml-auto p-1.5 rounded hover:bg-duck-teal/10 cursor-pointer transition-colors disabled:opacity-30"
|
||||
title="Refresh models from providers"
|
||||
title={t('settings.ai.refresh')}
|
||||
>
|
||||
<RefreshCw className={`h-3.5 w-3.5 text-duck-teal ${refreshing ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<DropZone label="Enabled" onDrop={enableModel}>
|
||||
<DropZone label={t('settings.ai.enabled')} onDrop={enableModel}>
|
||||
{enabled.length === 0 && (
|
||||
<span className="text-xs text-duck-dark/30 dark:text-foreground/30 py-1">Drag models here to enable</span>
|
||||
<span className="text-xs text-duck-dark/30 dark:text-foreground/30 py-1">
|
||||
{t('settings.ai.dragToEnable')}
|
||||
</span>
|
||||
)}
|
||||
{enabled.map((m) => (
|
||||
<ModelPill
|
||||
@@ -375,9 +372,9 @@ function MemberModelsSection() {
|
||||
))}
|
||||
</DropZone>
|
||||
|
||||
<DropZone label="Disabled" onDrop={disableModel}>
|
||||
<DropZone label={t('settings.ai.disabled')} onDrop={disableModel}>
|
||||
{disabled.length === 0 && (
|
||||
<span className="text-xs text-duck-dark/30 dark:text-foreground/30 py-1">All models enabled</span>
|
||||
<span className="text-xs text-duck-dark/30 dark:text-foreground/30 py-1">{t('settings.ai.allEnabled')}</span>
|
||||
)}
|
||||
{disabled.map((m) => (
|
||||
<ModelPill
|
||||
@@ -410,49 +407,49 @@ function MemberModelsSection() {
|
||||
function useAISettingsGroups(): SettingsSectionGroup[] {
|
||||
return useMemo(() => {
|
||||
const modelsGroup: SettingsSectionGroup = {
|
||||
label: 'Models',
|
||||
labelKey: 'settings.groups.models',
|
||||
icon: Eye,
|
||||
sections: [
|
||||
{
|
||||
key: 'my-models',
|
||||
icon: Eye,
|
||||
title: 'My Models',
|
||||
description: 'Show or hide models for yourself',
|
||||
titleKey: 'settings.sections.myModels.label',
|
||||
descriptionKey: 'settings.sections.myModels.description',
|
||||
content: <MyModelsSection />,
|
||||
},
|
||||
{
|
||||
key: 'member-models',
|
||||
icon: Eye,
|
||||
title: 'Channel Models',
|
||||
description: 'Models reachable by non-owner accounts',
|
||||
titleKey: 'settings.sections.channelModels.label',
|
||||
descriptionKey: 'settings.sections.channelModels.description',
|
||||
content: <MemberModelsSection />,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const defaultsGroup: SettingsSectionGroup = {
|
||||
label: 'Defaults',
|
||||
labelKey: 'settings.groups.defaults',
|
||||
icon: Sparkles,
|
||||
sections: [
|
||||
{
|
||||
key: 'default-models',
|
||||
icon: Sparkles,
|
||||
title: 'Default Models',
|
||||
description: 'Default models for chat, projects, and tasks',
|
||||
titleKey: 'settings.sections.defaultModels.label',
|
||||
descriptionKey: 'settings.sections.defaultModels.description',
|
||||
content: <AIModels />,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const providersGroup: SettingsSectionGroup = {
|
||||
label: 'Providers',
|
||||
labelKey: 'settings.groups.providers',
|
||||
icon: Terminal,
|
||||
sections: [
|
||||
{
|
||||
key: 'ai-harnesses',
|
||||
icon: Terminal,
|
||||
title: 'Providers',
|
||||
description: 'Remote and local AI providers',
|
||||
titleKey: 'settings.sections.providers.label',
|
||||
descriptionKey: 'settings.sections.providers.description',
|
||||
content: <AIHarnessesSection />,
|
||||
},
|
||||
],
|
||||
@@ -482,7 +479,7 @@ export const AISettings = () => {
|
||||
createSettingsPanelComponents({
|
||||
basePath: BASE_PATH,
|
||||
sidebarIcon: Bot,
|
||||
sidebarLabel: 'AI',
|
||||
sidebarLabelKey: 'settings.nav.ai',
|
||||
groups,
|
||||
}),
|
||||
[groups],
|
||||
|
||||
Reference in New Issue
Block a user