d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-07-03 02:52:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: new settings page design and new pill component

Browse Source
This commit is contained in:
simosmik
2026-03-10 21:02:32 +00:00
parent f4777c139f
commit 8ddeeb0ce8
30 changed files with 781 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/settings/view/tabs/git-settings/GitSettingsTab.tsx
View File

@@ -1,7 +1,9 @@
import { Check, GitBranch } from 'lucide-react';
import { Check } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { useGitSettings } from '../../../hooks/useGitSettings';
import { Button, Input } from '../../../../../shared/view/ui';
import SettingsCard from '../../SettingsCard';
import SettingsSection from '../../SettingsSection';
export default function GitSettingsTab() {
const { t } = useTranslation('settings');
@@ -18,64 +20,62 @@ export default function GitSettingsTab() {
return (
<div className="space-y-8">
<div>
<div className="mb-4 flex items-center gap-2">
<GitBranch className="h-5 w-5" />
<h3 className="text-lg font-semibold">{t('git.title')}</h3>
</div>
<SettingsSection
title={t('git.title')}
description={t('git.description')}
>
<SettingsCard className="p-4">
<div className="space-y-4">
<div>
<label htmlFor="settings-git-name" className="mb-2 block text-sm font-medium text-foreground">
{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>
<p className="mb-4 text-sm text-muted-foreground">{t('git.description')}</p>
<div>
<label htmlFor="settings-git-email" className="mb-2 block text-sm font-medium text-foreground">
{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="space-y-3 rounded-lg border bg-card p-4">
<div>
<label htmlFor="settings-git-name" className="mb-2 block text-sm font-medium text-foreground">
{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 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="flex items-center gap-2 text-sm text-green-600 dark:text-green-400">
<Check className="h-4 w-4" />
{t('git.status.success')}
</div>
)}
</div>
</div>
<div>
<label htmlFor="settings-git-email" className="mb-2 block text-sm font-medium text-foreground">
{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="flex items-center gap-2 text-sm text-green-600 dark:text-green-400">
<Check className="h-4 w-4" />
{t('git.status.success')}
</div>
)}
</div>
</div>
</div>
</SettingsCard>
</SettingsSection>
</div>
);
}