mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-03-03 04:57:42 +00:00
feat(settings): refactor settings components and move API Git settings tabs
- Replaced old settings components with new tab-based structure for API, Git, and Tasks settings. - Introduced hooks for managing credentials and Git settings. - Created new sections for API keys and GitHub credentials with appropriate UI components.
This commit is contained in:
Haileyesus
@@ -0,0 +1,100 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useVersionCheck } from '../../../../../hooks/useVersionCheck';
|
||||
import { useCredentialsSettings } from '../../../hooks/useCredentialsSettings';
|
||||
import ApiKeysSection from './sections/ApiKeysSection';
|
||||
import GithubCredentialsSection from './sections/GithubCredentialsSection';
|
||||
import NewApiKeyAlert from './sections/NewApiKeyAlert';
|
||||
import VersionInfoSection from './sections/VersionInfoSection';
|
||||
|
||||
export default function CredentialsSettingsTab() {
|
||||
const { t } = useTranslation('settings');
|
||||
const { updateAvailable, latestVersion, currentVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
|
||||
const {
|
||||
apiKeys,
|
||||
githubCredentials,
|
||||
loading,
|
||||
showNewKeyForm,
|
||||
setShowNewKeyForm,
|
||||
newKeyName,
|
||||
setNewKeyName,
|
||||
showNewGithubForm,
|
||||
setShowNewGithubForm,
|
||||
newGithubName,
|
||||
setNewGithubName,
|
||||
newGithubToken,
|
||||
setNewGithubToken,
|
||||
newGithubDescription,
|
||||
setNewGithubDescription,
|
||||
showToken,
|
||||
copiedKey,
|
||||
newlyCreatedKey,
|
||||
createApiKey,
|
||||
deleteApiKey,
|
||||
toggleApiKey,
|
||||
createGithubCredential,
|
||||
deleteGithubCredential,
|
||||
toggleGithubCredential,
|
||||
copyToClipboard,
|
||||
dismissNewlyCreatedKey,
|
||||
cancelNewApiKeyForm,
|
||||
cancelNewGithubForm,
|
||||
toggleNewGithubTokenVisibility,
|
||||
} = useCredentialsSettings({
|
||||
confirmDeleteApiKeyText: t('apiKeys.confirmDelete'),
|
||||
confirmDeleteGithubCredentialText: t('apiKeys.github.confirmDelete'),
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return <div className="text-muted-foreground">{t('apiKeys.loading')}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{newlyCreatedKey && (
|
||||
<NewApiKeyAlert
|
||||
apiKey={newlyCreatedKey}
|
||||
copiedKey={copiedKey}
|
||||
onCopy={copyToClipboard}
|
||||
onDismiss={dismissNewlyCreatedKey}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ApiKeysSection
|
||||
apiKeys={apiKeys}
|
||||
showNewKeyForm={showNewKeyForm}
|
||||
newKeyName={newKeyName}
|
||||
onShowNewKeyFormChange={setShowNewKeyForm}
|
||||
onNewKeyNameChange={setNewKeyName}
|
||||
onCreateApiKey={createApiKey}
|
||||
onCancelCreateApiKey={cancelNewApiKeyForm}
|
||||
onToggleApiKey={toggleApiKey}
|
||||
onDeleteApiKey={deleteApiKey}
|
||||
/>
|
||||
|
||||
<GithubCredentialsSection
|
||||
githubCredentials={githubCredentials}
|
||||
showNewGithubForm={showNewGithubForm}
|
||||
showNewTokenPlainText={Boolean(showToken.new)}
|
||||
newGithubName={newGithubName}
|
||||
newGithubToken={newGithubToken}
|
||||
newGithubDescription={newGithubDescription}
|
||||
onShowNewGithubFormChange={setShowNewGithubForm}
|
||||
onNewGithubNameChange={setNewGithubName}
|
||||
onNewGithubTokenChange={setNewGithubToken}
|
||||
onNewGithubDescriptionChange={setNewGithubDescription}
|
||||
onToggleNewTokenVisibility={toggleNewGithubTokenVisibility}
|
||||
onCreateGithubCredential={createGithubCredential}
|
||||
onCancelCreateGithubCredential={cancelNewGithubForm}
|
||||
onToggleGithubCredential={toggleGithubCredential}
|
||||
onDeleteGithubCredential={deleteGithubCredential}
|
||||
/>
|
||||
|
||||
<VersionInfoSection
|
||||
currentVersion={currentVersion}
|
||||
updateAvailable={updateAvailable}
|
||||
latestVersion={latestVersion}
|
||||
releaseInfo={releaseInfo}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import { ExternalLink, Key, Plus, Trash2 } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '../../../../../ui/button';
|
||||
import { Input } from '../../../../../ui/input';
|
||||
import type { ApiKeyItem } from '../types';
|
||||
|
||||
type ApiKeysSectionProps = {
|
||||
apiKeys: ApiKeyItem[];
|
||||
showNewKeyForm: boolean;
|
||||
newKeyName: string;
|
||||
onShowNewKeyFormChange: (value: boolean) => void;
|
||||
onNewKeyNameChange: (value: string) => void;
|
||||
onCreateApiKey: () => void;
|
||||
onCancelCreateApiKey: () => void;
|
||||
onToggleApiKey: (keyId: string, isActive: boolean) => void;
|
||||
onDeleteApiKey: (keyId: string) => void;
|
||||
};
|
||||
|
||||
export default function ApiKeysSection({
|
||||
apiKeys,
|
||||
showNewKeyForm,
|
||||
newKeyName,
|
||||
onShowNewKeyFormChange,
|
||||
onNewKeyNameChange,
|
||||
onCreateApiKey,
|
||||
onCancelCreateApiKey,
|
||||
onToggleApiKey,
|
||||
onDeleteApiKey,
|
||||
}: ApiKeysSectionProps) {
|
||||
const { t } = useTranslation('settings');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Key className="h-5 w-5" />
|
||||
<h3 className="text-lg font-semibold">{t('apiKeys.title')}</h3>
|
||||
</div>
|
||||
<Button size="sm" onClick={() => onShowNewKeyFormChange(!showNewKeyForm)}>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
{t('apiKeys.newButton')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<p className="text-sm text-muted-foreground mb-2">{t('apiKeys.description')}</p>
|
||||
<a
|
||||
href="/api-docs.html"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-primary hover:underline inline-flex items-center gap-1"
|
||||
>
|
||||
{t('apiKeys.apiDocsLink')}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{showNewKeyForm && (
|
||||
<div className="mb-4 p-4 border rounded-lg bg-card">
|
||||
<Input
|
||||
placeholder={t('apiKeys.form.placeholder')}
|
||||
value={newKeyName}
|
||||
onChange={(event) => onNewKeyNameChange(event.target.value)}
|
||||
className="mb-2"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={onCreateApiKey}>{t('apiKeys.form.createButton')}</Button>
|
||||
<Button variant="outline" onClick={onCancelCreateApiKey}>
|
||||
{t('apiKeys.form.cancelButton')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
{apiKeys.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground italic">{t('apiKeys.empty')}</p>
|
||||
) : (
|
||||
apiKeys.map((key) => (
|
||||
<div key={key.id} className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{key.key_name}</div>
|
||||
<code className="text-xs text-muted-foreground">{key.api_key}</code>
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
{t('apiKeys.list.created')} {new Date(key.created_at).toLocaleDateString()}
|
||||
{key.last_used
|
||||
? ` - ${t('apiKeys.list.lastUsed')} ${new Date(key.last_used).toLocaleDateString()}`
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant={key.is_active ? 'outline' : 'secondary'}
|
||||
onClick={() => onToggleApiKey(key.id, key.is_active)}
|
||||
>
|
||||
{key.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" onClick={() => onDeleteApiKey(key.id)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
import { Eye, EyeOff, Github, Plus, Trash2 } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '../../../../../ui/button';
|
||||
import { Input } from '../../../../../ui/input';
|
||||
import type { GithubCredentialItem } from '../types';
|
||||
|
||||
type GithubCredentialsSectionProps = {
|
||||
githubCredentials: GithubCredentialItem[];
|
||||
showNewGithubForm: boolean;
|
||||
showNewTokenPlainText: boolean;
|
||||
newGithubName: string;
|
||||
newGithubToken: string;
|
||||
newGithubDescription: string;
|
||||
onShowNewGithubFormChange: (value: boolean) => void;
|
||||
onNewGithubNameChange: (value: string) => void;
|
||||
onNewGithubTokenChange: (value: string) => void;
|
||||
onNewGithubDescriptionChange: (value: string) => void;
|
||||
onToggleNewTokenVisibility: () => void;
|
||||
onCreateGithubCredential: () => void;
|
||||
onCancelCreateGithubCredential: () => void;
|
||||
onToggleGithubCredential: (credentialId: string, isActive: boolean) => void;
|
||||
onDeleteGithubCredential: (credentialId: string) => void;
|
||||
};
|
||||
|
||||
export default function GithubCredentialsSection({
|
||||
githubCredentials,
|
||||
showNewGithubForm,
|
||||
showNewTokenPlainText,
|
||||
newGithubName,
|
||||
newGithubToken,
|
||||
newGithubDescription,
|
||||
onShowNewGithubFormChange,
|
||||
onNewGithubNameChange,
|
||||
onNewGithubTokenChange,
|
||||
onNewGithubDescriptionChange,
|
||||
onToggleNewTokenVisibility,
|
||||
onCreateGithubCredential,
|
||||
onCancelCreateGithubCredential,
|
||||
onToggleGithubCredential,
|
||||
onDeleteGithubCredential,
|
||||
}: GithubCredentialsSectionProps) {
|
||||
const { t } = useTranslation('settings');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Github className="h-5 w-5" />
|
||||
<h3 className="text-lg font-semibold">{t('apiKeys.github.title')}</h3>
|
||||
</div>
|
||||
<Button size="sm" onClick={() => onShowNewGithubFormChange(!showNewGithubForm)}>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
{t('apiKeys.github.addButton')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground mb-4">{t('apiKeys.github.descriptionAlt')}</p>
|
||||
|
||||
{showNewGithubForm && (
|
||||
<div className="mb-4 p-4 border rounded-lg bg-card space-y-3">
|
||||
<Input
|
||||
placeholder={t('apiKeys.github.form.namePlaceholder')}
|
||||
value={newGithubName}
|
||||
onChange={(event) => onNewGithubNameChange(event.target.value)}
|
||||
/>
|
||||
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showNewTokenPlainText ? 'text' : 'password'}
|
||||
placeholder={t('apiKeys.github.form.tokenPlaceholder')}
|
||||
value={newGithubToken}
|
||||
onChange={(event) => onNewGithubTokenChange(event.target.value)}
|
||||
className="pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggleNewTokenVisibility}
|
||||
className="absolute right-3 top-2.5 text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{showNewTokenPlainText ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
placeholder={t('apiKeys.github.form.descriptionPlaceholder')}
|
||||
value={newGithubDescription}
|
||||
onChange={(event) => onNewGithubDescriptionChange(event.target.value)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={onCreateGithubCredential}>{t('apiKeys.github.form.addButton')}</Button>
|
||||
<Button variant="outline" onClick={onCancelCreateGithubCredential}>
|
||||
{t('apiKeys.github.form.cancelButton')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://github.com/settings/tokens"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs text-primary hover:underline block"
|
||||
>
|
||||
{t('apiKeys.github.form.howToCreate')}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
{githubCredentials.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground italic">{t('apiKeys.github.empty')}</p>
|
||||
) : (
|
||||
githubCredentials.map((credential) => (
|
||||
<div key={credential.id} className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div className="flex-1">
|
||||
<div className="font-medium">{credential.credential_name}</div>
|
||||
{credential.description && (
|
||||
<div className="text-xs text-muted-foreground">{credential.description}</div>
|
||||
)}
|
||||
<div className="text-xs text-muted-foreground mt-1">
|
||||
{t('apiKeys.github.added')} {new Date(credential.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant={credential.is_active ? 'outline' : 'secondary'}
|
||||
onClick={() => onToggleGithubCredential(credential.id, credential.is_active)}
|
||||
>
|
||||
{credential.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" onClick={() => onDeleteGithubCredential(credential.id)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Check, Copy } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from '../../../../../ui/button';
|
||||
import type { CreatedApiKey } from '../types';
|
||||
|
||||
type NewApiKeyAlertProps = {
|
||||
apiKey: CreatedApiKey;
|
||||
copiedKey: string | null;
|
||||
onCopy: (text: string, id: string) => void;
|
||||
onDismiss: () => void;
|
||||
};
|
||||
|
||||
export default function NewApiKeyAlert({
|
||||
apiKey,
|
||||
copiedKey,
|
||||
onCopy,
|
||||
onDismiss,
|
||||
}: NewApiKeyAlertProps) {
|
||||
const { t } = useTranslation('settings');
|
||||
|
||||
return (
|
||||
<div className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
|
||||
<h4 className="font-semibold text-yellow-500 mb-2">{t('apiKeys.newKey.alertTitle')}</h4>
|
||||
<p className="text-sm text-muted-foreground mb-3">{t('apiKeys.newKey.alertMessage')}</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<code className="flex-1 px-3 py-2 bg-background/50 rounded font-mono text-sm break-all">
|
||||
{apiKey.apiKey}
|
||||
</code>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => onCopy(apiKey.apiKey, 'new')}
|
||||
>
|
||||
{copiedKey === 'new' ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
<Button size="sm" variant="ghost" className="mt-3" onClick={onDismiss}>
|
||||
{t('apiKeys.newKey.iveSavedIt')}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { ExternalLink } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { ReleaseInfo } from '../../../../../../types/sharedTypes';
|
||||
|
||||
type VersionInfoSectionProps = {
|
||||
currentVersion: string;
|
||||
updateAvailable: boolean;
|
||||
latestVersion: string | null;
|
||||
releaseInfo: ReleaseInfo | null;
|
||||
};
|
||||
|
||||
export default function VersionInfoSection({
|
||||
currentVersion,
|
||||
updateAvailable,
|
||||
latestVersion,
|
||||
releaseInfo,
|
||||
}: VersionInfoSectionProps) {
|
||||
const { t } = useTranslation('settings');
|
||||
const releasesUrl = releaseInfo?.htmlUrl || 'https://github.com/siteboon/claudecodeui/releases';
|
||||
|
||||
return (
|
||||
<div className="pt-6 border-t border-border/50">
|
||||
<div className="flex items-center justify-between text-xs italic text-muted-foreground/60">
|
||||
<a
|
||||
href={releasesUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:text-muted-foreground transition-colors"
|
||||
>
|
||||
v{currentVersion}
|
||||
</a>
|
||||
{updateAvailable && latestVersion && (
|
||||
<a
|
||||
href={releasesUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1.5 px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full hover:bg-green-500/20 transition-colors not-italic font-medium"
|
||||
>
|
||||
<span className="text-[10px]">{t('apiKeys.version.updateAvailable', { version: latestVersion })}</span>
|
||||
<ExternalLink className="h-2.5 w-2.5" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
src/components/settings/view/tabs/api-settings/types.ts
Normal file
36
src/components/settings/view/tabs/api-settings/types.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
export type ApiKeyItem = {
|
||||
id: string;
|
||||
key_name: string;
|
||||
api_key: string;
|
||||
created_at: string;
|
||||
last_used?: string | null;
|
||||
is_active: boolean;
|
||||
};
|
||||
|
||||
export type CreatedApiKey = {
|
||||
id: string;
|
||||
keyName: string;
|
||||
apiKey: string;
|
||||
createdAt?: string;
|
||||
};
|
||||
|
||||
export type GithubCredentialItem = {
|
||||
id: string;
|
||||
credential_name: string;
|
||||
description?: string | null;
|
||||
created_at: string;
|
||||
is_active: boolean;
|
||||
};
|
||||
|
||||
export type ApiKeysResponse = {
|
||||
apiKeys?: ApiKeyItem[];
|
||||
success?: boolean;
|
||||
error?: string;
|
||||
apiKey?: CreatedApiKey;
|
||||
};
|
||||
|
||||
export type GithubCredentialsResponse = {
|
||||
credentials?: GithubCredentialItem[];
|
||||
success?: boolean;
|
||||
error?: string;
|
||||
};
|
||||
@@ -0,0 +1,82 @@
|
||||
import { Check, GitBranch } from 'lucide-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useGitSettings } from '../../../hooks/useGitSettings';
|
||||
import { Button } from '../../../../ui/button';
|
||||
import { Input } from '../../../../ui/input';
|
||||
|
||||
export default function GitSettingsTab() {
|
||||
const { t } = useTranslation('settings');
|
||||
const {
|
||||
gitName,
|
||||
setGitName,
|
||||
gitEmail,
|
||||
setGitEmail,
|
||||
isLoading,
|
||||
isSaving,
|
||||
saveStatus,
|
||||
saveGitConfig,
|
||||
} = useGitSettings();
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<GitBranch className="h-5 w-5" />
|
||||
<h3 className="text-lg font-semibold">{t('git.title')}</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground mb-4">{t('git.description')}</p>
|
||||
|
||||
<div className="p-4 border rounded-lg bg-card space-y-3">
|
||||
<div>
|
||||
<label htmlFor="settings-git-name" className="block text-sm font-medium text-foreground mb-2">
|
||||
{t('git.name.label')}
|
||||
</label>
|
||||
<Input
|
||||
id="settings-git-name"
|
||||
type="text"
|
||||
value={gitName}
|
||||
onChange={(event) => setGitName(event.target.value)}
|
||||
placeholder="John Doe"
|
||||
disabled={isLoading}
|
||||
className="w-full"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{t('git.name.help')}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="settings-git-email" className="block text-sm font-medium text-foreground mb-2">
|
||||
{t('git.email.label')}
|
||||
</label>
|
||||
<Input
|
||||
id="settings-git-email"
|
||||
type="email"
|
||||
value={gitEmail}
|
||||
onChange={(event) => setGitEmail(event.target.value)}
|
||||
placeholder="john@example.com"
|
||||
disabled={isLoading}
|
||||
className="w-full"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{t('git.email.help')}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
onClick={saveGitConfig}
|
||||
disabled={isSaving || !gitName.trim() || !gitEmail.trim()}
|
||||
>
|
||||
{isSaving ? t('git.actions.saving') : t('git.actions.save')}
|
||||
</Button>
|
||||
|
||||
{saveStatus === 'success' && (
|
||||
<div className="text-sm text-green-600 dark:text-green-400 flex items-center gap-2">
|
||||
<Check className="w-4 h-4" />
|
||||
{t('git.status.success')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useTasksSettings } from '../../../../../contexts/TasksSettingsContext';
|
||||
|
||||
type TasksSettingsContextValue = {
|
||||
tasksEnabled: boolean;
|
||||
setTasksEnabled: (enabled: boolean) => void;
|
||||
isTaskMasterInstalled: boolean | null;
|
||||
isCheckingInstallation: boolean;
|
||||
};
|
||||
|
||||
export default function TasksSettingsTab() {
|
||||
const { t } = useTranslation('settings');
|
||||
const {
|
||||
tasksEnabled,
|
||||
setTasksEnabled,
|
||||
isTaskMasterInstalled,
|
||||
isCheckingInstallation,
|
||||
} = useTasksSettings() as TasksSettingsContextValue;
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{isCheckingInstallation ? (
|
||||
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="animate-spin w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full" />
|
||||
<span className="text-sm text-muted-foreground">{t('tasks.checking')}</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{!isTaskMasterInstalled && (
|
||||
<div className="bg-orange-50 dark:bg-orange-950/50 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<svg className="w-4 h-4 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-orange-900 dark:text-orange-100 mb-2">
|
||||
{t('tasks.notInstalled.title')}
|
||||
</div>
|
||||
<div className="text-sm text-orange-800 dark:text-orange-200 space-y-3">
|
||||
<p>{t('tasks.notInstalled.description')}</p>
|
||||
|
||||
<div className="bg-orange-100 dark:bg-orange-900/50 rounded-lg p-3 font-mono text-sm">
|
||||
<code>{t('tasks.notInstalled.installCommand')}</code>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="https://github.com/eyaltoledano/claude-task-master"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium text-sm"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
{t('tasks.notInstalled.viewOnGitHub')}
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="font-medium">{t('tasks.notInstalled.afterInstallation')}</p>
|
||||
<ol className="list-decimal list-inside space-y-1 text-xs">
|
||||
<li>{t('tasks.notInstalled.steps.restart')}</li>
|
||||
<li>{t('tasks.notInstalled.steps.autoAvailable')}</li>
|
||||
<li>{t('tasks.notInstalled.steps.initCommand')}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isTaskMasterInstalled && (
|
||||
<div className="space-y-4">
|
||||
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-medium text-foreground">{t('tasks.settings.enableLabel')}</div>
|
||||
<div className="text-sm text-muted-foreground mt-1">{t('tasks.settings.enableDescription')}</div>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={tasksEnabled}
|
||||
onChange={(event) => setTasksEnabled(event.target.checked)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user