Bohdan Triapitsyn
7d7285655d
* 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
224 lines
10 KiB
TypeScript
224 lines
10 KiB
TypeScript
import React from 'react';
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { RiCheckboxBlankLine, RiCheckboxLine } from '@remixicon/react';
|
|
import type { Session } from '@opencode-ai/sdk/v2';
|
|
import { useI18n } from '@/lib/i18n';
|
|
|
|
export type DeleteSessionConfirmState = {
|
|
session: Session;
|
|
descendantCount: number;
|
|
archivedBucket: boolean;
|
|
} | null;
|
|
|
|
export function SessionDeleteConfirmDialog(props: {
|
|
value: DeleteSessionConfirmState;
|
|
setValue: (next: DeleteSessionConfirmState) => void;
|
|
showDeletionDialog: boolean;
|
|
setShowDeletionDialog: (next: boolean) => void;
|
|
onConfirm: () => Promise<void> | void;
|
|
}): React.ReactNode {
|
|
const { t } = useI18n();
|
|
const { value, setValue, showDeletionDialog, setShowDeletionDialog, onConfirm } = props;
|
|
const untitledSession = t('sessions.sidebar.session.untitled');
|
|
|
|
return (
|
|
<Dialog open={Boolean(value)} onOpenChange={(open) => { if (!open) setValue(null); }}>
|
|
<DialogContent showCloseButton={false} className="max-w-sm gap-5">
|
|
<DialogHeader>
|
|
<DialogTitle>{value?.archivedBucket
|
|
? t('sessions.sidebar.dialogs.deleteSession.title')
|
|
: t('sessions.sidebar.dialogs.archiveSession.title')}</DialogTitle>
|
|
<DialogDescription>
|
|
{value && value.descendantCount > 0
|
|
? value.archivedBucket
|
|
? value.descendantCount === 1
|
|
? t('sessions.sidebar.dialogs.deleteSession.withOneSubtask', {
|
|
sessionTitle: value.session.title || untitledSession,
|
|
count: value.descendantCount,
|
|
})
|
|
: t('sessions.sidebar.dialogs.deleteSession.withManySubtasks', {
|
|
sessionTitle: value.session.title || untitledSession,
|
|
count: value.descendantCount,
|
|
})
|
|
: value.descendantCount === 1
|
|
? t('sessions.sidebar.dialogs.archiveSession.withOneSubtask', {
|
|
sessionTitle: value.session.title || untitledSession,
|
|
count: value.descendantCount,
|
|
})
|
|
: t('sessions.sidebar.dialogs.archiveSession.withManySubtasks', {
|
|
sessionTitle: value.session.title || untitledSession,
|
|
count: value.descendantCount,
|
|
})
|
|
: value?.archivedBucket
|
|
? t('sessions.sidebar.dialogs.deleteSession.single', {
|
|
sessionTitle: value?.session.title || untitledSession,
|
|
})
|
|
: t('sessions.sidebar.dialogs.archiveSession.single', {
|
|
sessionTitle: value?.session.title || untitledSession,
|
|
})}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter className="w-full sm:items-center sm:justify-between">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowDeletionDialog(!showDeletionDialog)}
|
|
className="inline-flex items-center gap-1.5 typography-ui-label text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50"
|
|
aria-pressed={!showDeletionDialog}
|
|
>
|
|
{!showDeletionDialog ? <RiCheckboxLine className="h-4 w-4 text-primary" /> : <RiCheckboxBlankLine className="h-4 w-4" />}
|
|
{t('sessions.sidebar.dialogs.neverAsk')}
|
|
</button>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setValue(null)}
|
|
className="inline-flex h-8 items-center justify-center rounded-md border border-border px-3 typography-ui-label text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
|
|
>
|
|
{t('sessions.sidebar.dialogs.cancel')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => void onConfirm()}
|
|
className="inline-flex h-8 items-center justify-center rounded-md bg-destructive px-3 typography-ui-label text-destructive-foreground hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/50"
|
|
>
|
|
{value?.archivedBucket ? t('sessions.sidebar.bulkActions.delete') : t('sessions.sidebar.bulkActions.archive')}
|
|
</button>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export type BulkDeleteSessionsConfirmState = {
|
|
sessionCount: number;
|
|
archivedBucket: boolean;
|
|
} | null;
|
|
|
|
export function BulkSessionDeleteConfirmDialog(props: {
|
|
value: BulkDeleteSessionsConfirmState;
|
|
setValue: (next: BulkDeleteSessionsConfirmState) => void;
|
|
showDeletionDialog: boolean;
|
|
setShowDeletionDialog: (next: boolean) => void;
|
|
onConfirm: () => Promise<void> | void;
|
|
}): React.ReactNode {
|
|
const { t } = useI18n();
|
|
const { value, setValue, showDeletionDialog, setShowDeletionDialog, onConfirm } = props;
|
|
const archived = value?.archivedBucket === true;
|
|
const n = value?.sessionCount ?? 0;
|
|
const title = archived
|
|
? (n === 1
|
|
? t('sessions.sidebar.dialogs.deleteSession.title')
|
|
: t('sessions.sidebar.dialogs.deleteSessions.title'))
|
|
: (n === 1
|
|
? t('sessions.sidebar.dialogs.archiveSession.title')
|
|
: t('sessions.sidebar.dialogs.archiveSessions.title'));
|
|
const description = archived
|
|
? (n === 1
|
|
? t('sessions.sidebar.dialogs.deleteSessions.singleDescription', { count: n })
|
|
: t('sessions.sidebar.dialogs.deleteSessions.pluralDescription', { count: n }))
|
|
: (n === 1
|
|
? t('sessions.sidebar.dialogs.archiveSessions.singleDescription', { count: n })
|
|
: t('sessions.sidebar.dialogs.archiveSessions.pluralDescription', { count: n }));
|
|
|
|
return (
|
|
<Dialog open={Boolean(value)} onOpenChange={(open) => { if (!open) setValue(null); }}>
|
|
<DialogContent showCloseButton={false} className="max-w-sm gap-5">
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
<DialogDescription>{description}</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter className="w-full sm:items-center sm:justify-between">
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowDeletionDialog(!showDeletionDialog)}
|
|
className="inline-flex items-center gap-1.5 typography-ui-label text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50"
|
|
aria-pressed={!showDeletionDialog}
|
|
>
|
|
{!showDeletionDialog ? <RiCheckboxLine className="h-4 w-4 text-primary" /> : <RiCheckboxBlankLine className="h-4 w-4" />}
|
|
{t('sessions.sidebar.dialogs.neverAsk')}
|
|
</button>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setValue(null)}
|
|
className="inline-flex h-8 items-center justify-center rounded-md border border-border px-3 typography-ui-label text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
|
|
>
|
|
{t('sessions.sidebar.dialogs.cancel')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => void onConfirm()}
|
|
className="inline-flex h-8 items-center justify-center rounded-md bg-destructive px-3 typography-ui-label text-destructive-foreground hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/50"
|
|
>
|
|
{archived ? t('sessions.sidebar.bulkActions.delete') : t('sessions.sidebar.bulkActions.archive')}
|
|
</button>
|
|
</div>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export type DeleteFolderConfirmState = {
|
|
scopeKey: string;
|
|
folderId: string;
|
|
folderName: string;
|
|
subFolderCount: number;
|
|
sessionCount: number;
|
|
} | null;
|
|
|
|
export function FolderDeleteConfirmDialog(props: {
|
|
value: DeleteFolderConfirmState;
|
|
setValue: (next: DeleteFolderConfirmState) => void;
|
|
onConfirm: () => void;
|
|
}): React.ReactNode {
|
|
const { t } = useI18n();
|
|
const { value, setValue, onConfirm } = props;
|
|
|
|
return (
|
|
<Dialog open={Boolean(value)} onOpenChange={(open) => { if (!open) setValue(null); }}>
|
|
<DialogContent showCloseButton={false} className="max-w-sm gap-5">
|
|
<DialogHeader>
|
|
<DialogTitle>{t('sessions.sidebar.dialogs.deleteFolder.title')}</DialogTitle>
|
|
<DialogDescription>
|
|
{value && (value.subFolderCount > 0 || value.sessionCount > 0)
|
|
? value.subFolderCount > 0
|
|
? value.subFolderCount === 1
|
|
? t('sessions.sidebar.dialogs.deleteFolder.withOneSubfolder', {
|
|
folderName: value.folderName,
|
|
count: value.subFolderCount,
|
|
})
|
|
: t('sessions.sidebar.dialogs.deleteFolder.withManySubfolders', {
|
|
folderName: value.folderName,
|
|
count: value.subFolderCount,
|
|
})
|
|
: t('sessions.sidebar.dialogs.deleteFolder.withContentsNoSubfolders', {
|
|
folderName: value.folderName,
|
|
})
|
|
: t('sessions.sidebar.dialogs.deleteFolder.single', {
|
|
folderName: value?.folderName ?? '',
|
|
})}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<DialogFooter>
|
|
<button
|
|
type="button"
|
|
onClick={() => setValue(null)}
|
|
className="inline-flex h-8 items-center justify-center rounded-md border border-border px-3 typography-ui-label text-foreground hover:bg-interactive-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
|
|
>
|
|
{t('sessions.sidebar.dialogs.cancel')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onConfirm}
|
|
className="inline-flex h-8 items-center justify-center rounded-md bg-destructive px-3 typography-ui-label text-destructive-foreground hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive/50"
|
|
>
|
|
{t('sessions.sidebar.bulkActions.delete')}
|
|
</button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|