BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add i18n foundation and translations (#1027)

Browse Source 
* feat: add i18n foundation

* feat: localize sessions sidebar

* Localize multirun/scheduled tasks and fix dialog dropdown interactions

* localize git sidebar surface and add zh-CN keys

* feat(ui): localize context panel, diff/plan views, and context sidebar content

* fix(config): resolve user config home via fs/home before embedded home

* localize header/chat UI and complete model/worktree panel strings

* localize worktree + github issue/pr dialog flows

* localize settings sections and split settings i18n dictionaries

* localize additional settings sections and sidebars

* localize more settings pages and dialogs

* fix settings select trigger localization

* localize tunnel settings ui surface

* localize additional settings sections

* localize keyboard shortcuts labels in settings

* localize terminal and utility dialogs surfaces

* feat(i18n): localize remaining UI strings

* Add Ukrainian locale

* Add Spanish locale

* Add Brazilian Portuguese locale

* Polish locale translations
This commit is contained in:
Bohdan Triapitsyn
2026-04-26 14:03:39 +03:00
committed by GitHub
parent 87db2ea210
commit 7d7285655d
198 changed files with 24173 additions and 4365 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/sections/magic-prompts/MagicPromptsPage.tsx
+90 -82
View File
@@ -14,129 +14,130 @@ import {
type MagicPromptId,
} from '@/lib/magicPrompts';
import { useMagicPromptsStore } from '@/stores/useMagicPromptsStore';
import { useI18n } from '@/lib/i18n';
type PromptBlock = {
id: MagicPromptId;
title: string;
titleKey: string;
};
type PromptPageConfig = {
title: string;
description: string;
titleKey: string;
descriptionKey: string;
blocks: PromptBlock[];
};
const PROMPT_PAGE_MAP: Record<string, PromptPageConfig> = {
'git.commit.generate': {
title: 'Commit Generation',
description: 'Prompts used for commit message generation: visible user message + hidden instructions.',
titleKey: 'settings.magicPrompts.page.group.gitCommitGenerate.title',
descriptionKey: 'settings.magicPrompts.page.group.gitCommitGenerate.description',
blocks: [
{ id: 'git.commit.generate.visible', title: 'Visible Prompt' },
{ id: 'git.commit.generate.instructions', title: 'Instructions' },
{ id: 'git.commit.generate.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'git.commit.generate.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'git.pr.generate': {
title: 'PR Generation',
description: 'Prompts used for PR title/body generation: visible user message + hidden instructions.',
titleKey: 'settings.magicPrompts.page.group.gitPrGenerate.title',
descriptionKey: 'settings.magicPrompts.page.group.gitPrGenerate.description',
blocks: [
{ id: 'git.pr.generate.visible', title: 'Visible Prompt' },
{ id: 'git.pr.generate.instructions', title: 'Instructions' },
{ id: 'git.pr.generate.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'git.pr.generate.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'github.pr.review': {
title: 'PR Review',
description: 'Prompts used for PR review flow: visible user message + hidden instruction payload.',
titleKey: 'settings.magicPrompts.page.group.githubPrReview.title',
descriptionKey: 'settings.magicPrompts.page.group.githubPrReview.description',
blocks: [
{ id: 'github.pr.review.visible', title: 'Visible Prompt' },
{ id: 'github.pr.review.instructions', title: 'Instructions' },
{ id: 'github.pr.review.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'github.pr.review.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'github.issue.review': {
title: 'Issue Review',
description: 'Prompts used for issue review flow: visible user message + hidden instruction payload.',
titleKey: 'settings.magicPrompts.page.group.githubIssueReview.title',
descriptionKey: 'settings.magicPrompts.page.group.githubIssueReview.description',
blocks: [
{ id: 'github.issue.review.visible', title: 'Visible Prompt' },
{ id: 'github.issue.review.instructions', title: 'Instructions' },
{ id: 'github.issue.review.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'github.issue.review.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'github.pr.checks.review': {
title: 'PR Failed Checks Review',
description: 'Prompts used for PR failed checks analysis.',
titleKey: 'settings.magicPrompts.page.group.githubPrFailedChecksReview.title',
descriptionKey: 'settings.magicPrompts.page.group.githubPrFailedChecksReview.description',
blocks: [
{ id: 'github.pr.checks.review.visible', title: 'Visible Prompt' },
{ id: 'github.pr.checks.review.instructions', title: 'Instructions' },
{ id: 'github.pr.checks.review.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'github.pr.checks.review.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'github.pr.comments.review': {
title: 'PR Comments Review',
description: 'Prompts used for PR comments analysis.',
titleKey: 'settings.magicPrompts.page.group.githubPrCommentsReview.title',
descriptionKey: 'settings.magicPrompts.page.group.githubPrCommentsReview.description',
blocks: [
{ id: 'github.pr.comments.review.visible', title: 'Visible Prompt' },
{ id: 'github.pr.comments.review.instructions', title: 'Instructions' },
{ id: 'github.pr.comments.review.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'github.pr.comments.review.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'github.pr.comment.single': {
title: 'Single PR Comment Review',
description: 'Prompts used for single PR comment analysis.',
titleKey: 'settings.magicPrompts.page.group.githubSinglePrCommentReview.title',
descriptionKey: 'settings.magicPrompts.page.group.githubSinglePrCommentReview.description',
blocks: [
{ id: 'github.pr.comment.single.visible', title: 'Visible Prompt' },
{ id: 'github.pr.comment.single.instructions', title: 'Instructions' },
{ id: 'github.pr.comment.single.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'github.pr.comment.single.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'git.conflict.resolve': {
title: 'Merge/Rebase Conflict Resolution',
description: 'Prompts used when resolving merge/rebase conflicts with AI.',
titleKey: 'settings.magicPrompts.page.group.gitConflictResolve.title',
descriptionKey: 'settings.magicPrompts.page.group.gitConflictResolve.description',
blocks: [
{ id: 'git.conflict.resolve.visible', title: 'Visible Prompt' },
{ id: 'git.conflict.resolve.instructions', title: 'Instructions' },
{ id: 'git.conflict.resolve.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'git.conflict.resolve.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'git.integrate.cherrypick.resolve': {
title: 'Cherry-pick Conflict Resolution',
description: 'Prompts used when resolving cherry-pick conflicts in integrate flow.',
titleKey: 'settings.magicPrompts.page.group.gitCherrypickConflictResolve.title',
descriptionKey: 'settings.magicPrompts.page.group.gitCherrypickConflictResolve.description',
blocks: [
{ id: 'git.integrate.cherrypick.resolve.visible', title: 'Visible Prompt' },
{ id: 'git.integrate.cherrypick.resolve.instructions', title: 'Instructions' },
{ id: 'git.integrate.cherrypick.resolve.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'git.integrate.cherrypick.resolve.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'plan.improve': {
title: 'Improve Plan',
description: 'Hidden prompt used when sending a saved plan into an improve flow.',
titleKey: 'settings.magicPrompts.page.group.planImprove.title',
descriptionKey: 'settings.magicPrompts.page.group.planImprove.description',
blocks: [
{ id: 'plan.improve.visible', title: 'Visible Prompt' },
{ id: 'plan.improve.instructions', title: 'Instructions' },
{ id: 'plan.improve.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'plan.improve.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'plan.todo': {
title: 'Todo Planning',
description: 'Hidden prompt used when sending a todo into a new planning session.',
titleKey: 'settings.magicPrompts.page.group.planTodo.title',
descriptionKey: 'settings.magicPrompts.page.group.planTodo.description',
blocks: [
{ id: 'plan.todo.visible', title: 'Visible Prompt' },
{ id: 'plan.todo.instructions', title: 'Instructions' },
{ id: 'plan.todo.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'plan.todo.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'plan.implement': {
title: 'Implement Plan',
description: 'Hidden prompt used when sending a saved plan into an implement flow.',
titleKey: 'settings.magicPrompts.page.group.planImplement.title',
descriptionKey: 'settings.magicPrompts.page.group.planImplement.description',
blocks: [
{ id: 'plan.implement.visible', title: 'Visible Prompt' },
{ id: 'plan.implement.instructions', title: 'Instructions' },
{ id: 'plan.implement.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'plan.implement.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'session.summary': {
title: 'Session Summary',
description: 'Prompts used by the /summary slash command: visible user message + hidden instructions. Non-destructive — does not compact session history.',
titleKey: 'settings.magicPrompts.page.group.sessionSummary.title',
descriptionKey: 'settings.magicPrompts.page.group.sessionSummary.description',
blocks: [
{ id: 'session.summary.visible', title: 'Visible Prompt' },
{ id: 'session.summary.instructions', title: 'Instructions' },
{ id: 'session.summary.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'session.summary.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
'session.review': {
title: 'Workspace Review',
description: 'Prompts used by the /review slash command: visible user message + hidden instructions. Reviews current workspace changes for high-signal issues only.',
titleKey: 'settings.magicPrompts.page.group.sessionWorkspaceReview.title',
descriptionKey: 'settings.magicPrompts.page.group.sessionWorkspaceReview.description',
blocks: [
{ id: 'session.review.visible', title: 'Visible Prompt' },
{ id: 'session.review.instructions', title: 'Instructions' },
{ id: 'session.review.visible', titleKey: 'settings.magicPrompts.page.block.visiblePrompt' },
{ id: 'session.review.instructions', titleKey: 'settings.magicPrompts.page.block.instructions' },
],
},
};
@@ -145,6 +146,8 @@ const hasOwn = (input: Record<string, string>, key: string) => Object.prototype.
const isVisiblePromptId = (id: MagicPromptId): boolean => id.endsWith('.visible');
export const MagicPromptsPage: React.FC = () => {
const { t } = useI18n();
const tUnsafe = React.useCallback((key: string) => t(key as Parameters<typeof t>[0]), [t]);
const selectedPromptId = useMagicPromptsStore((state) => state.selectedPromptId);
const [loading, setLoading] = React.useState(true);
const [overrides, setOverrides] = React.useState<Record<string, string>>({});
@@ -163,7 +166,7 @@ export const MagicPromptsPage: React.FC = () => {
setOverrides(nextOverrides);
} catch (error) {
console.warn('Failed to load magic prompts:', error);
toast.error('Failed to load Magic Prompts');
toast.error(t('settings.magicPrompts.page.toast.loadFailed'));
} finally {
if (active) {
setLoading(false);
@@ -174,7 +177,7 @@ export const MagicPromptsPage: React.FC = () => {
return () => {
active = false;
};
}, []);
}, [t]);
const pageConfig = PROMPT_PAGE_MAP[selectedPromptId] ?? PROMPT_PAGE_MAP['git.commit.generate'];
const getBaseline = React.useCallback((id: MagicPromptId) => {
@@ -197,7 +200,7 @@ export const MagicPromptsPage: React.FC = () => {
const savePrompt = React.useCallback(async (id: MagicPromptId) => {
const value = getDraft(id);
if (isVisiblePromptId(id) && value.trim().length === 0) {
toast.error('Visible prompt cannot be empty');
toast.error(t('settings.magicPrompts.page.toast.visiblePromptRequired'));
return;
}
setSavingIds((current) => ({ ...current, [id]: true }));
@@ -206,14 +209,14 @@ export const MagicPromptsPage: React.FC = () => {
? await resetMagicPromptOverride(id)
: await saveMagicPromptOverride(id, value);
setOverrides(payload.overrides);
toast.success('Magic prompt saved');
toast.success(t('settings.magicPrompts.page.toast.saved'));
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
toast.error('Failed to save magic prompt', { description: message });
toast.error(t('settings.magicPrompts.page.toast.saveFailed'), { description: message });
} finally {
setSavingIds((current) => ({ ...current, [id]: false }));
}
}, [getDraft]);
}, [getDraft, t]);
const resetPrompt = React.useCallback(async (id: MagicPromptId) => {
setResettingIds((current) => ({ ...current, [id]: true }));
@@ -224,14 +227,14 @@ export const MagicPromptsPage: React.FC = () => {
...current,
[id]: getDefaultMagicPromptTemplate(id),
}));
toast.success('Prompt reset to default');
toast.success(t('settings.magicPrompts.page.toast.resetSuccess'));
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
toast.error('Failed to reset prompt', { description: message });
toast.error(t('settings.magicPrompts.page.toast.resetFailed'), { description: message });
} finally {
setResettingIds((current) => ({ ...current, [id]: false }));
}
}, []);
}, [t]);
const handleResetAll = React.useCallback(async () => {
setResettingAll(true);
@@ -239,20 +242,20 @@ export const MagicPromptsPage: React.FC = () => {
const payload = await resetAllMagicPromptOverrides();
setOverrides(payload.overrides);
setDrafts({});
toast.success('All prompt overrides reset');
toast.success(t('settings.magicPrompts.page.toast.resetAllSuccess'));
} catch (error) {
const message = error instanceof Error ? error.message : String(error);
toast.error('Failed to reset all prompts', { description: message });
toast.error(t('settings.magicPrompts.page.toast.resetAllFailed'), { description: message });
} finally {
setResettingAll(false);
}
}, []);
}, [t]);
if (loading) {
return (
<div className="py-6 px-6 flex items-center gap-2 text-muted-foreground">
<span className="inline-block h-1.5 w-1.5 rounded-full bg-current animate-busy-pulse" aria-label="Loading" />
<span className="typography-ui">Loading Magic Prompts...</span>
<span className="inline-block h-1.5 w-1.5 rounded-full bg-current animate-busy-pulse" aria-label={t('settings.magicPrompts.page.loading.aria')} />
<span className="typography-ui">{t('settings.magicPrompts.page.loading.text')}</span>
</div>
);
}
@@ -263,13 +266,13 @@ export const MagicPromptsPage: React.FC = () => {
<div className="flex flex-wrap items-start justify-between gap-3">
<div className="space-y-1">
<div className="flex items-center gap-2">
<h2 className="typography-ui-header font-semibold text-foreground">{pageConfig.title}</h2>
<h2 className="typography-ui-header font-semibold text-foreground">{tUnsafe(pageConfig.titleKey)}</h2>
<Tooltip delayDuration={700}>
<TooltipTrigger asChild>
<RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
</TooltipTrigger>
<TooltipContent sideOffset={8} className="max-w-xs">
{pageConfig.description}
{tUnsafe(pageConfig.descriptionKey)}
</TooltipContent>
</Tooltip>
</div>
@@ -282,7 +285,7 @@ export const MagicPromptsPage: React.FC = () => {
}}
disabled={resettingAll || Object.keys(overrides).length === 0}
>
{resettingAll ? 'Resetting...' : 'Reset All Overrides'}
{resettingAll ? t('settings.magicPrompts.page.actions.resetting') : t('settings.magicPrompts.page.actions.resetAllOverrides')}
</Button>
</div>
@@ -300,7 +303,7 @@ export const MagicPromptsPage: React.FC = () => {
<section key={block.id} className={index > 0 ? 'space-y-3 pt-5 border-t border-border' : 'space-y-3'}>
<div className="space-y-1">
<div className="flex flex-wrap items-center gap-2">
<h3 className="typography-ui-label text-foreground">{block.title}</h3>
<h3 className="typography-ui-label text-foreground">{tUnsafe(block.titleKey)}</h3>
<Tooltip delayDuration={700}>
<TooltipTrigger asChild>
<RiInformationLine className="h-3.5 w-3.5 text-muted-foreground/60 cursor-help" />
@@ -312,7 +315,8 @@ export const MagicPromptsPage: React.FC = () => {
</div>
{definition.placeholders && definition.placeholders.length > 0 && (
<div className="typography-micro text-muted-foreground">
Placeholders: {definition.placeholders.map((item) => `{{${item.key}}}`).join(', ')}
{t('settings.magicPrompts.page.placeholdersLabel')}{' '}
{definition.placeholders.map((item) => `{{${item.key}}}`).join(', ')}
</div>
)}
</div>
@@ -323,12 +327,16 @@ export const MagicPromptsPage: React.FC = () => {
className="min-h-[220px] font-mono text-sm"
/>
{isInvalidEmptyVisiblePrompt && (
<div className="typography-micro text-[var(--status-error)]">Visible prompt cannot be empty.</div>
<div className="typography-micro text-[var(--status-error)]">{t('settings.magicPrompts.page.validation.visiblePromptRequired')}</div>
)}
<div className="flex items-center justify-between gap-2">
<span className="typography-micro text-muted-foreground">
{isDirty ? 'Unsaved changes' : isOverridden ? 'Using saved override' : 'Using built-in default'}
{isDirty
? t('settings.magicPrompts.page.status.unsavedChanges')
: isOverridden
? t('settings.magicPrompts.page.status.usingSavedOverride')
: t('settings.magicPrompts.page.status.usingBuiltinDefault')}
</span>
<div className="flex items-center gap-2">
<Button
@@ -339,7 +347,7 @@ export const MagicPromptsPage: React.FC = () => {
}}
disabled={!isOverridden || saving || resetting}
>
{resetting ? 'Resetting...' : 'Reset to Default'}
{resetting ? t('settings.magicPrompts.page.actions.resetting') : t('settings.magicPrompts.page.actions.resetToDefault')}
</Button>
<Button
size="sm"
@@ -348,7 +356,7 @@ export const MagicPromptsPage: React.FC = () => {
}}
disabled={!isDirty || saving || resetting || isInvalidEmptyVisiblePrompt}
>
{saving ? 'Saving...' : 'Save'}
{saving ? t('settings.common.actions.saving') : t('settings.magicPrompts.page.actions.save')}
</Button>
</div>
</div>
packages/ui/src/components/sections/magic-prompts/MagicPromptsSidebar.tsx
+25 -23
View File
@@ -2,49 +2,51 @@ import React from 'react';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
import { useMagicPromptsStore } from '@/stores/useMagicPromptsStore';
import { cn } from '@/lib/utils';
import { useI18n } from '@/lib/i18n';
interface MagicPromptsSidebarProps {
onItemSelect?: () => void;
}
export const MagicPromptsSidebar: React.FC<MagicPromptsSidebarProps> = ({ onItemSelect }) => {
const { t } = useI18n();
const selectedPromptId = useMagicPromptsStore((state) => state.selectedPromptId);
const setSelectedPromptId = useMagicPromptsStore((state) => state.setSelectedPromptId);
const grouped = React.useMemo(() => {
return [
{
group: 'Git',
groupKey: 'settings.magicPrompts.sidebar.group.git',
items: [
{ id: 'git.commit.generate', title: 'Commit Generation' },
{ id: 'git.pr.generate', title: 'PR Generation' },
{ id: 'git.conflict.resolve', title: 'Merge/Rebase Conflict Resolution' },
{ id: 'git.integrate.cherrypick.resolve', title: 'Cherry-pick Conflict Resolution' },
{ id: 'git.commit.generate', titleKey: 'settings.magicPrompts.sidebar.item.gitCommitGenerate' },
{ id: 'git.pr.generate', titleKey: 'settings.magicPrompts.sidebar.item.gitPrGenerate' },
{ id: 'git.conflict.resolve', titleKey: 'settings.magicPrompts.sidebar.item.gitConflictResolve' },
{ id: 'git.integrate.cherrypick.resolve', titleKey: 'settings.magicPrompts.sidebar.item.gitCherrypickConflictResolve' },
],
},
{
group: 'GitHub',
groupKey: 'settings.magicPrompts.sidebar.group.github',
items: [
{ id: 'github.pr.review', title: 'PR Review' },
{ id: 'github.issue.review', title: 'Issue Review' },
{ id: 'github.pr.checks.review', title: 'PR Failed Checks Review' },
{ id: 'github.pr.comments.review', title: 'PR Comments Review' },
{ id: 'github.pr.comment.single', title: 'Single PR Comment Review' },
{ id: 'github.pr.review', titleKey: 'settings.magicPrompts.sidebar.item.githubPrReview' },
{ id: 'github.issue.review', titleKey: 'settings.magicPrompts.sidebar.item.githubIssueReview' },
{ id: 'github.pr.checks.review', titleKey: 'settings.magicPrompts.sidebar.item.githubPrFailedChecksReview' },
{ id: 'github.pr.comments.review', titleKey: 'settings.magicPrompts.sidebar.item.githubPrCommentsReview' },
{ id: 'github.pr.comment.single', titleKey: 'settings.magicPrompts.sidebar.item.githubSinglePrCommentReview' },
],
},
{
group: 'Planning',
groupKey: 'settings.magicPrompts.sidebar.group.planning',
items: [
{ id: 'plan.todo', title: 'Todo Planning' },
{ id: 'plan.improve', title: 'Improve Plan' },
{ id: 'plan.implement', title: 'Implement Plan' },
{ id: 'plan.todo', titleKey: 'settings.magicPrompts.sidebar.item.planTodo' },
{ id: 'plan.improve', titleKey: 'settings.magicPrompts.sidebar.item.planImprove' },
{ id: 'plan.implement', titleKey: 'settings.magicPrompts.sidebar.item.planImplement' },
],
},
{
group: 'Session',
groupKey: 'settings.magicPrompts.sidebar.group.session',
items: [
{ id: 'session.summary', title: 'Session Summary' },
{ id: 'session.review', title: 'Workspace Review' },
{ id: 'session.summary', titleKey: 'settings.magicPrompts.sidebar.item.sessionSummary' },
{ id: 'session.review', titleKey: 'settings.magicPrompts.sidebar.item.sessionWorkspaceReview' },
],
},
] as const;
@@ -53,14 +55,14 @@ export const MagicPromptsSidebar: React.FC<MagicPromptsSidebarProps> = ({ onItem
return (
<div className="flex h-full flex-col bg-background">
<div className="border-b px-3 pt-4 pb-3">
<h2 className="text-base font-semibold text-foreground">Magic Prompts</h2>
<p className="typography-meta mt-1 text-muted-foreground">Select a prompt template to edit.</p>
<h2 className="text-base font-semibold text-foreground">{t('settings.magicPrompts.sidebar.title')}</h2>
<p className="typography-meta mt-1 text-muted-foreground">{t('settings.magicPrompts.sidebar.description')}</p>
</div>
<ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-3 px-3 py-2 overflow-x-hidden">
{grouped.map((group) => (
<div key={group.group} className="space-y-1">
<div className="typography-micro px-1 text-muted-foreground">{group.group}</div>
<div key={group.groupKey} className="space-y-1">
<div className="typography-micro px-1 text-muted-foreground">{t(group.groupKey)}</div>
{group.items.map((item) => {
const selected = selectedPromptId === item.id;
return (
@@ -76,7 +78,7 @@ export const MagicPromptsSidebar: React.FC<MagicPromptsSidebarProps> = ({ onItem
selected ? 'bg-interactive-selection text-foreground' : 'text-foreground hover:bg-interactive-hover'
)}
>
<span className="typography-ui-label truncate font-normal">{item.title}</span>
<span className="typography-ui-label truncate font-normal">{t(item.titleKey)}</span>
</button>
);
})}