d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2026-04-12 08:31:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor/shared and tasks components (#473)

Browse Source 
* refactor: remove unused TasksSettings component

* refactor: migrate TodoList component to a new file with improved structure and normalization logic

* refactor: Move Tooltip and DarkModeToggle to shared/ui

* refactor: Move Tooltip and DarkModeToggle to shared/view/ui

* refactor: move GeminiLogo to llm-logo-provider and update imports

* refactor: remove unused GeminiStatus component

* refactor: move components in src/components/ui to src/shared/view/ui

* refactor: move ErrorBoundary component to main-content/view and update imports

* refactor: move VersionUpgradeModal to its own module

* refactor(wizard): rebuild project creation flow as modular TypeScript components

Replace the monolithic `ProjectCreationWizard.jsx` with a feature-based TS
implementation under `src/components/project-creation-wizard`, while preserving
existing behavior and improving readability, maintainability, and state isolation.

Why:
- The previous wizard mixed API logic, flow state, folder browsing, and UI in one file.
- Refactoring and testing were difficult due to tightly coupled concerns.
- We needed stronger type safety and localized component state.

What changed:
- Deleted:
  - `src/components/ProjectCreationWizard.jsx`
- Added new modular structure:
  - `src/components/project-creation-wizard/index.ts`
  - `src/components/project-creation-wizard/ProjectCreationWizard.tsx`
  - `src/components/project-creation-wizard/types.ts`
  - `src/components/project-creation-wizard/data/workspaceApi.ts`
  - `src/components/project-creation-wizard/hooks/useGithubTokens.ts`
  - `src/components/project-creation-wizard/utils/pathUtils.ts`
  - `src/components/project-creation-wizard/components/*`
    - `WizardProgress`, `WizardFooter`, `ErrorBanner`
    - `StepTypeSelection`, `StepConfiguration`, `StepReview`
    - `WorkspacePathField`, `GithubAuthenticationCard`, `FolderBrowserModal`
- Updated import usage:
  - `src/components/sidebar/view/subcomponents/SidebarModals.tsx`
    now imports from `../../../project-creation-wizard`.

Implementation details:
- Migrated wizard logic to TypeScript using `type` aliases only.
- Kept component prop types colocated in each component file.
- Split responsibilities by feature:
  - container/orchestration in `ProjectCreationWizard.tsx`
  - API/SSE and request parsing in `data/workspaceApi.ts`
  - GitHub token loading/caching behavior in `useGithubTokens`
  - path/URL helpers in `utils/pathUtils.ts`
- Localized UI-only state to child components:
  - folder browser modal state (current path, hidden folders, create-folder input)
  - path suggestion dropdown state with debounced lookup
- Preserved existing UX flows:
  - step navigation and validation
  - existing/new workspace modes
  - optional GitHub clone + auth modes
  - clone progress via SSE
  - folder browsing + folder creation
- Added focused comments for non-obvious logic (debounce, SSE auth constraint, path edge cases).

* refactor(quick-settings): migrate panel to typed feature-based modules

Refactor QuickSettingsPanel from a single JSX component into a modular TypeScript feature structure while preserving behavior and translations.

Highlights:
- Replace legacy src/components/QuickSettingsPanel.jsx with a typed entrypoint (src/components/QuickSettingsPanel.tsx).
- Introduce src/components/quick-settings-panel/ with clear separation of concerns:
  - view/: panel shell, header, handle, section wrappers, toggle rows, and content sections.
  - hooks/: drag interactions and whisper mode persistence.
  - constants.ts and types.ts for shared config and strict local typing.
- Move drag logic into useQuickSettingsDrag with explicit touch/mouse handling, drag threshold detection, click suppression after drag, position clamping, and localStorage persistence.
- Keep user-visible behavior intact:
  - same open/close panel interactions.
  - same mobile/desktop drag behavior and persisted handle position.
  - same quick preference toggles and wiring to useUiPreferences.
  - same hidden whisper section behavior and localStorage/event updates.
- Improve readability and maintainability by extracting repetitive setting rows and section scaffolding into reusable components.
- Add focused comments around non-obvious behavior (drag click suppression, touch scroll lock, hidden whisper section intent).
- Keep files small and reviewable (all new/changed files are under 300 lines).

Validation:
- npm run typecheck
- npm run build

* refactor(quick-settings-panel): restructure QuickSettingsPanel import and create index file

* refactor(shared): move shared ui components to share/view/ui without subfolders

* refactor(LanguageSelector): move LanguageSelector to shared UI components

* refactor(prd-editor): modularize PRD editor with typed feature modules

Break the legacy PRDEditor.jsx monolith into a feature-based TypeScript architecture under src/components/prd-editor while keeping behavior parity and readability.

Key changes:

- Replace PRDEditor.jsx with a typed orchestrator component and a compatibility export bridge at src/components/PRDEditor.tsx.

- Split responsibilities into dedicated hooks: document loading/init, existing PRD registry fetching, save workflow with overwrite detection, and keyboard shortcuts.

- Split UI into focused view components: header, editor/preview body, footer stats, loading state, generate-tasks modal, and overwrite-confirm modal.

- Move filename concerns into utility helpers (sanitize, extension handling, default naming) and centralize template/constants.

- Keep component-local state close to the UI that owns it (workspace controls/modal toggles), while shared workflow state remains in the feature container.

- Reuse the existing MarkdownPreview component for safer markdown rendering instead of ad-hoc HTML conversion.

- Update TaskMasterPanel integration to consume typed PRDEditor directly (remove any-cast) and pass isExisting metadata for correct overwrite behavior.

- Keep all new/changed files below 300 lines and add targeted comments where behavior needs clarification.

Validation:

- npm run typecheck

- npm run build

* refactor(TaskMasterPanel): update PRDEditor import path to match new structure

* refactor(TaskMaster): Remove unused TaskMasterSetupWizard and TaskMasterStatus components

* refactor(TaskDetail): remove unused TaskIndicator import

* refactor(task-master): migrate tasks to a typed feature module

- introduce a new feature-oriented TaskMaster domain under src/components/task-master

- add typed TaskMaster context/provider with explicit project, task, MCP, and loading state handling

- split task UI into focused components (panel, board, toolbar, content, card, detail modal, setup/help modals, banner)

- move task board filtering/sorting/kanban derivation into dedicated hooks and utilities

- relocate CreateTaskModal into the feature module and keep task views modular/readable

- remove legacy monolithic TaskList/TaskDetail/TaskCard files and route main task panel to the new feature panel

- replace contexts/TaskMasterContext.jsx with a typed contexts/TaskMasterContext.ts re-export to the feature context

- update MainContent project sync logic to compare by project name to avoid state churn

- validation: npm run typecheck, npm run build

* refactor(MobileNav): remove unused React import and TaskMasterContext

* refactor(auth): migrate login and setup flows to typed feature module

- Introduce a new feature-based auth module under src/components/auth with clear separation of concerns:\n  - context/AuthContext.tsx for session lifecycle, onboarding status checks, token persistence, and auth actions\n  - view/* components for loading, route guarding, form layout, input fields, and error display\n  - shared auth constants, utility helpers, and type aliases (no interfaces)\n- Convert login and setup UIs to TypeScript and keep form state local to each component for readability and component-level ownership\n- Add explicit API payload typing and safe JSON parsing helpers to improve resilience when backend responses are malformed or incomplete\n- Centralize error fallback handling for auth requests to reduce repeated logic

- Replace legacy auth entrypoints with the new feature module in app wiring:\n  - App now imports AuthProvider and ProtectedRoute from src/components/auth\n  - WebSocketContext, TaskMasterContext, and Onboarding now consume useAuth from the new typed auth context\n- Remove duplicated legacy auth screens (LoginForm.jsx, SetupForm.jsx, ProtectedRoute.jsx)\n- Keep backward compatibility by turning src/contexts/AuthContext.jsx into a thin re-export of the new provider/hook

Result: auth code now follows a feature/domain structure, is fully typed, easier to navigate, and cleaner to extend without touching unrelated UI areas.

* refactor(AppContent): update MobileNav import path and add MobileNav component

* refactor(DiffViewer): rename different diff viewers and place them in different components

* refactor(components): reorganize onboarding/provider auth/sidebar indicator into domain features

- Move onboarding out of root-level components into a dedicated feature module:
  - add src/components/onboarding/view/Onboarding.tsx
  - split onboarding UI into focused subcomponents:
    - OnboardingStepProgress
    - GitConfigurationStep
    - AgentConnectionsStep
    - AgentConnectionCard
  - add onboarding-local types and utils for provider status and validation helpers

- Move multi-provider login modal into a dedicated provider-auth feature:
  - add src/components/provider-auth/view/ProviderLoginModal.tsx
  - add src/components/provider-auth/types.ts
  - keep provider-specific command/title behavior and Gemini setup guidance
  - preserve compatibility for both onboarding flow and settings login flow

- Move TaskIndicator into the sidebar domain:
  - add src/components/sidebar/view/subcomponents/TaskIndicator.tsx
  - update SidebarProjectItem to consume local sidebar TaskIndicator

- Update integration points to the new structure:
  - ProtectedRoute now imports onboarding from onboarding feature
  - Settings now imports ProviderLoginModal directly (remove legacy cast wrapper)
  - git panel consumers now import shared GitDiffViewer by explicit name

- Rename git shared diff view to clearer domain naming:
  - replace shared DiffViewer with shared GitDiffViewer
  - update FileChangeItem and CommitHistoryItem imports accordingly

- Remove superseded root-level legacy components:
  - delete src/components/LoginModal.jsx
  - delete src/components/Onboarding.jsx
  - delete src/components/TaskIndicator.jsx
  - delete old src/components/git-panel/view/shared/DiffViewer.tsx

- Result:
  - clearer feature boundaries (auth vs onboarding vs provider-auth vs sidebar)
  - easier navigation and ownership by domain
  - preserved runtime behavior with improved readability and modularity

* refactor(MainContent): remove TaskMasterPanel import and relocate to task-master component

* fix: update import paths for Input component in FileTree and FileTreeNode

* refactor(FileTree): make file tree context menu a typescript component and move it inside the file tree view

* refactor(FileTree): remove unused ScrollArea import

* feat: setup eslint with typescript and react rules, add unused imports plugin

* fix: remove unused imports, functions, and types after discovering using `npm run lint`

* feat: setup eslint-plugin-react, react-refresh, import-x, and tailwindcss plugins with recommended rules and configurations

* chore: reformat files after running `npm run lint:fix`

* chore: add omments about eslint config plugin uses

* feat: add husky and lint-staged for pre-commit linting

* feat: setup commitlint with conventional config

* fix: i18n translations

---------

Co-authored-by: Haileyesus <something@gmail.com>
Co-authored-by: viper151 <simosmik@gmail.com>
This commit is contained in:
Haileyesus
2026-03-06 01:47:58 +03:00
committed by GitHub
parent 8d28438fe7
commit 844de26ada
254 changed files with 14571 additions and 9347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/settings/view/Settings.tsx
View File

@@ -1,7 +1,7 @@
import { Settings as SettingsIcon, X } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import LoginModal from '../../LoginModal';
import { Button } from '../../ui/button';
import ProviderLoginModal from '../../provider-auth/view/ProviderLoginModal';
import { Button } from '../../../shared/view/ui';
import ClaudeMcpFormModal from '../view/modals/ClaudeMcpFormModal';
import CodexMcpFormModal from '../view/modals/CodexMcpFormModal';
import SettingsMainTabs from '../view/SettingsMainTabs';
@@ -11,18 +11,7 @@ import CredentialsSettingsTab from '../view/tabs/api-settings/CredentialsSetting
import GitSettingsTab from '../view/tabs/git-settings/GitSettingsTab';
import TasksSettingsTab from '../view/tabs/tasks-settings/TasksSettingsTab';
import { useSettingsController } from '../hooks/useSettingsController';
import type { AgentProvider, SettingsProject, SettingsProps } from '../types/types';
type LoginModalProps = {
isOpen: boolean;
onClose: () => void;
provider: AgentProvider | '';
project: SettingsProject | null;
onComplete: (exitCode: number) => void;
isAuthenticated: boolean;
};
const LoginModalComponent = LoginModal as unknown as (props: LoginModalProps) => JSX.Element;
import type { SettingsProps } from '../types/types';
function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: SettingsProps) {
const { t } = useTranslation('settings');
@@ -95,27 +84,27 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
: false;
return (
<div className="modal-backdrop fixed inset-0 flex items-center justify-center z-[9999] md:p-4 bg-background/95">
<div className="bg-background border border-border md:rounded-lg shadow-xl w-full md:max-w-4xl h-full md:h-[90vh] flex flex-col">
<div className="flex items-center justify-between p-4 md:p-6 border-b border-border flex-shrink-0">
<div className="modal-backdrop fixed inset-0 z-[9999] flex items-center justify-center bg-background/95 md:p-4">
<div className="flex h-full w-full flex-col border border-border bg-background shadow-xl md:h-[90vh] md:max-w-4xl md:rounded-lg">
<div className="flex flex-shrink-0 items-center justify-between border-b border-border p-4 md:p-6">
<div className="flex items-center gap-3">
<SettingsIcon className="w-5 h-5 md:w-6 md:h-6 text-blue-600" />
<h2 className="text-lg md:text-xl font-semibold text-foreground">{t('title')}</h2>
<SettingsIcon className="h-5 w-5 text-blue-600 md:h-6 md:w-6" />
<h2 className="text-lg font-semibold text-foreground md:text-xl">{t('title')}</h2>
</div>
<Button
variant="ghost"
size="sm"
onClick={onClose}
className="text-muted-foreground hover:text-foreground touch-manipulation"
className="touch-manipulation text-muted-foreground hover:text-foreground"
>
<X className="w-5 h-5" />
<X className="h-5 w-5" />
</Button>
</div>
<div className="flex-1 overflow-y-auto">
<SettingsMainTabs activeTab={activeTab} onChange={setActiveTab} />
<div className="p-4 md:p-6 space-y-6 md:space-y-8 pb-safe-area-inset-bottom">
<div className="space-y-6 p-4 pb-safe-area-inset-bottom md:space-y-8 md:p-6">
{activeTab === 'appearance' && (
<AppearanceSettingsTab
projectSortOrder={projectSortOrder}
@@ -179,42 +168,42 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
</div>
</div>
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between p-4 md:p-6 border-t border-border flex-shrink-0 gap-3 pb-safe-area-inset-bottom">
<div className="flex items-center justify-center sm:justify-start gap-2 order-2 sm:order-1">
<div className="flex flex-shrink-0 flex-col gap-3 border-t border-border p-4 pb-safe-area-inset-bottom sm:flex-row sm:items-center sm:justify-between md:p-6">
<div className="order-2 flex items-center justify-center gap-2 sm:order-1 sm:justify-start">
{saveStatus === 'success' && (
<div className="text-green-600 dark:text-green-400 text-sm flex items-center gap-1">
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<div className="flex items-center gap-1 text-sm text-green-600 dark:text-green-400">
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
{t('saveStatus.success')}
</div>
)}
{saveStatus === 'error' && (
<div className="text-red-600 dark:text-red-400 text-sm flex items-center gap-1">
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<div className="flex items-center gap-1 text-sm text-red-600 dark:text-red-400">
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
</svg>
{t('saveStatus.error')}
</div>
)}
</div>
<div className="flex items-center gap-3 order-1 sm:order-2">
<div className="order-1 flex items-center gap-3 sm:order-2">
<Button
variant="outline"
onClick={onClose}
disabled={isSaving}
className="flex-1 sm:flex-none h-10 touch-manipulation"
className="h-10 flex-1 touch-manipulation sm:flex-none"
>
{t('footerActions.cancel')}
</Button>
<Button
onClick={saveSettings}
disabled={isSaving}
className="flex-1 sm:flex-none h-10 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 touch-manipulation"
className="h-10 flex-1 touch-manipulation bg-blue-600 hover:bg-blue-700 disabled:opacity-50 sm:flex-none"
>
{isSaving ? (
<div className="flex items-center gap-2">
<div className="w-4 h-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
<div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
{t('saveStatus.saving')}
</div>
) : (
@@ -225,11 +214,11 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
</div>
</div>
<LoginModalComponent
key={loginProvider}
<ProviderLoginModal
key={loginProvider || 'claude'}
isOpen={showLoginModal}
onClose={() => setShowLoginModal(false)}
provider={loginProvider}
provider={loginProvider || 'claude'}
project={selectedProject}
onComplete={handleLoginComplete}
isAuthenticated={isAuthenticated}

4
src/components/settings/view/SettingsMainTabs.tsx
View File

@@ -37,13 +37,13 @@ export default function SettingsMainTabs({ activeTab, onChange }: SettingsMainTa
role="tab"
aria-selected={isActive}
onClick={() => onChange(tab.id)}
className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
className={`border-b-2 px-4 py-3 text-sm font-medium transition-colors ${
isActive
? 'border-blue-600 text-blue-600 dark:text-blue-400'
: 'border-transparent text-muted-foreground hover:text-foreground'
}`}
>
{Icon && <Icon className="w-4 h-4 inline mr-2" />}
{Icon && <Icon className="mr-2 inline h-4 w-4" />}
{t(tab.labelKey)}
</button>
);

93
src/components/settings/view/modals/ClaudeMcpFormModal.tsx
View File

@@ -2,8 +2,7 @@ import { FolderOpen, Globe, X } from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import type { FormEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { Input } from '../../../ui/input';
import { Button } from '../../../ui/button';
import { Button, Input } from '../../../../shared/view/ui';
import { DEFAULT_CLAUDE_MCP_FORM } from '../../constants/constants';
import type { ClaudeMcpFormState, McpServer, McpScope, McpTransportType, SettingsProject } from '../../types/types';
@@ -148,27 +147,27 @@ export default function ClaudeMcpFormModal({
};
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[110] p-4">
<div className="bg-background border border-border rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
<div className="flex items-center justify-between p-4 border-b border-border">
<div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/50 p-4">
<div className="max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-lg border border-border bg-background">
<div className="flex items-center justify-between border-b border-border p-4">
<h3 className="text-lg font-medium text-foreground">
{isEditing ? t('mcpForm.title.edit') : t('mcpForm.title.add')}
</h3>
<Button variant="ghost" size="sm" onClick={onClose}>
<X className="w-4 h-4" />
<X className="h-4 w-4" />
</Button>
</div>
<form onSubmit={handleSubmit} className="p-4 space-y-4">
<form onSubmit={handleSubmit} className="space-y-4 p-4">
{!isEditing && (
<div className="flex gap-2 mb-4">
<div className="mb-4 flex gap-2">
<button
type="button"
onClick={() => setFormData((prev) => ({ ...prev, importMode: 'form' }))}
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
className={`rounded-lg px-4 py-2 font-medium transition-colors ${
formData.importMode === 'form'
? 'bg-blue-600 text-white'
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
}`}
>
{t('mcpForm.importMode.form')}
@@ -176,10 +175,10 @@ export default function ClaudeMcpFormModal({
<button
type="button"
onClick={() => setFormData((prev) => ({ ...prev, importMode: 'json' }))}
className={`px-4 py-2 rounded-lg font-medium transition-colors ${
className={`rounded-lg px-4 py-2 font-medium transition-colors ${
formData.importMode === 'json'
? 'bg-blue-600 text-white'
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
}`}
>
{t('mcpForm.importMode.json')}
@@ -188,12 +187,12 @@ export default function ClaudeMcpFormModal({
)}
{formData.importMode === 'form' && isEditing && (
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
<label className="block text-sm font-medium text-foreground mb-2">
<div className="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900/50">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.scope.label')}
</label>
<div className="flex items-center gap-2">
{formData.scope === 'user' ? <Globe className="w-4 h-4" /> : <FolderOpen className="w-4 h-4" />}
{formData.scope === 'user' ? <Globe className="h-4 w-4" /> : <FolderOpen className="h-4 w-4" />}
<span className="text-sm">
{formData.scope === 'user' ? t('mcpForm.scope.userGlobal') : t('mcpForm.scope.projectLocal')}
</span>
@@ -201,47 +200,47 @@ export default function ClaudeMcpFormModal({
<span className="text-xs text-muted-foreground">- {formData.projectPath}</span>
)}
</div>
<p className="text-xs text-muted-foreground mt-2">{t('mcpForm.scope.cannotChange')}</p>
<p className="mt-2 text-xs text-muted-foreground">{t('mcpForm.scope.cannotChange')}</p>
</div>
)}
{formData.importMode === 'form' && !isEditing && (
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.scope.label')} *
</label>
<div className="flex gap-2">
<button
type="button"
onClick={() => setFormData((prev) => ({ ...prev, scope: 'user', projectPath: '' }))}
className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
className={`flex-1 rounded-lg px-4 py-2 font-medium transition-colors ${
formData.scope === 'user'
? 'bg-blue-600 text-white'
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
}`}
>
<div className="flex items-center justify-center gap-2">
<Globe className="w-4 h-4" />
<Globe className="h-4 w-4" />
<span>{t('mcpForm.scope.userGlobal')}</span>
</div>
</button>
<button
type="button"
onClick={() => setFormData((prev) => ({ ...prev, scope: 'local' }))}
className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
className={`flex-1 rounded-lg px-4 py-2 font-medium transition-colors ${
formData.scope === 'local'
? 'bg-blue-600 text-white'
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700'
}`}
>
<div className="flex items-center justify-center gap-2">
<FolderOpen className="w-4 h-4" />
<FolderOpen className="h-4 w-4" />
<span>{t('mcpForm.scope.projectLocal')}</span>
</div>
</button>
</div>
<p className="text-xs text-muted-foreground mt-2">
<p className="mt-2 text-xs text-muted-foreground">
{formData.scope === 'user'
? t('mcpForm.scope.userDescription')
: t('mcpForm.scope.projectDescription')}
@@ -250,7 +249,7 @@ export default function ClaudeMcpFormModal({
{formData.scope === 'local' && (
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.selectProject')} *
</label>
<select
@@ -258,7 +257,7 @@ export default function ClaudeMcpFormModal({
onChange={(event) => {
setFormData((prev) => ({ ...prev, projectPath: event.target.value }));
}}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500"
className="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
required
>
<option value="">{t('mcpForm.fields.selectProject')}...</option>
@@ -269,7 +268,7 @@ export default function ClaudeMcpFormModal({
))}
</select>
{formData.projectPath && (
<p className="text-xs text-muted-foreground mt-1">
<p className="mt-1 text-xs text-muted-foreground">
{t('mcpForm.projectPath', { path: formData.projectPath })}
</p>
)}
@@ -278,9 +277,9 @@ export default function ClaudeMcpFormModal({
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div className={formData.importMode === 'json' ? 'md:col-span-2' : ''}>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.serverName')} *
</label>
<Input
@@ -293,7 +292,7 @@ export default function ClaudeMcpFormModal({
{formData.importMode === 'form' && (
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.transportType')} *
</label>
<select
@@ -304,7 +303,7 @@ export default function ClaudeMcpFormModal({
type: getSafeTransportType(event.target.value),
}));
}}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500"
className="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
>
<option value="stdio">stdio</option>
<option value="sse">SSE</option>
@@ -315,13 +314,13 @@ export default function ClaudeMcpFormModal({
</div>
{isEditing && Boolean(formData.raw) && formData.importMode === 'form' && (
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<h4 className="text-sm font-medium text-foreground mb-2">
<div className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
<h4 className="mb-2 text-sm font-medium text-foreground">
{t('mcpForm.configDetails', {
configFile: editingServer?.scope === 'global' ? '~/.claude.json' : 'project config',
})}
</h4>
<pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
<pre className="overflow-x-auto rounded bg-gray-100 p-3 text-xs dark:bg-gray-800">
{JSON.stringify(formData.raw, null, 2)}
</pre>
</div>
@@ -330,7 +329,7 @@ export default function ClaudeMcpFormModal({
{formData.importMode === 'json' && (
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.jsonConfig')} *
</label>
<textarea
@@ -340,17 +339,17 @@ export default function ClaudeMcpFormModal({
setFormData((prev) => ({ ...prev, jsonInput: value }));
handleJsonValidation(value);
}}
className={`w-full px-3 py-2 border ${
className={`w-full border px-3 py-2 ${
jsonValidationError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'
} bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 font-mono text-sm`}
} rounded-lg bg-gray-50 font-mono text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-100`}
rows={8}
placeholder={'{\n "type": "stdio",\n "command": "/path/to/server",\n "args": ["--api-key", "abc123"],\n "env": {\n "CACHE_DIR": "/tmp"\n }\n}'}
required
/>
{jsonValidationError && (
<p className="text-xs text-red-500 mt-1">{jsonValidationError}</p>
<p className="mt-1 text-xs text-red-500">{jsonValidationError}</p>
)}
<p className="text-xs text-muted-foreground mt-2">
<p className="mt-2 text-xs text-muted-foreground">
{t('mcpForm.validation.jsonHelp')}
<br />
- stdio: {`{"type":"stdio","command":"npx","args":["@upstash/context7-mcp"]}`}
@@ -364,7 +363,7 @@ export default function ClaudeMcpFormModal({
{formData.importMode === 'form' && formData.type === 'stdio' && (
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.command')} *
</label>
<Input
@@ -376,7 +375,7 @@ export default function ClaudeMcpFormModal({
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.arguments')}
</label>
<textarea
@@ -385,7 +384,7 @@ export default function ClaudeMcpFormModal({
const args = event.target.value.split('\n').filter((arg) => arg.trim());
updateConfig('args', args);
}}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500"
className="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
rows={3}
placeholder="--api-key&#10;abc123"
/>
@@ -395,7 +394,7 @@ export default function ClaudeMcpFormModal({
{formData.importMode === 'form' && (formData.type === 'sse' || formData.type === 'http') && (
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.url')} *
</label>
<Input
@@ -410,7 +409,7 @@ export default function ClaudeMcpFormModal({
{formData.importMode === 'form' && (
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.envVars')}
</label>
<textarea
@@ -425,7 +424,7 @@ export default function ClaudeMcpFormModal({
});
updateConfig('env', env);
}}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500"
className="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
rows={3}
placeholder="API_KEY=your-key&#10;DEBUG=true"
/>
@@ -434,7 +433,7 @@ export default function ClaudeMcpFormModal({
{formData.importMode === 'form' && (formData.type === 'sse' || formData.type === 'http') && (
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.headers')}
</label>
<textarea
@@ -449,7 +448,7 @@ export default function ClaudeMcpFormModal({
});
updateConfig('headers', headers);
}}
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500"
className="w-full rounded-lg border border-gray-300 bg-gray-50 px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
rows={3}
placeholder="Authorization=Bearer token&#10;X-API-Key=your-key"
/>

29
src/components/settings/view/modals/CodexMcpFormModal.tsx
View File

@@ -2,8 +2,7 @@ import { useEffect, useState } from 'react';
import type { FormEvent } from 'react';
import { X } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '../../../ui/button';
import { Input } from '../../../ui/input';
import { Button, Input } from '../../../../shared/view/ui';
import { DEFAULT_CODEX_MCP_FORM } from '../../constants/constants';
import type { CodexMcpFormState, McpServer } from '../../types/types';
@@ -69,20 +68,20 @@ export default function CodexMcpFormModal({
};
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[110] p-4">
<div className="bg-background border border-border rounded-lg w-full max-w-lg max-h-[90vh] overflow-y-auto">
<div className="flex items-center justify-between p-4 border-b border-border">
<div className="fixed inset-0 z-[110] flex items-center justify-center bg-black/50 p-4">
<div className="max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-lg border border-border bg-background">
<div className="flex items-center justify-between border-b border-border p-4">
<h3 className="text-lg font-medium text-foreground">
{editingServer ? t('mcpForm.title.edit') : t('mcpForm.title.add')}
</h3>
<Button variant="ghost" size="sm" onClick={onClose}>
<X className="w-4 h-4" />
<X className="h-4 w-4" />
</Button>
</div>
<form onSubmit={handleSubmit} className="p-4 space-y-4">
<form onSubmit={handleSubmit} className="space-y-4 p-4">
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.serverName')} *
</label>
<Input
@@ -94,7 +93,7 @@ export default function CodexMcpFormModal({
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.command')} *
</label>
<Input
@@ -112,7 +111,7 @@ export default function CodexMcpFormModal({
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.arguments')}
</label>
<textarea
@@ -126,12 +125,12 @@ export default function CodexMcpFormModal({
}}
placeholder="--port&#10;3000"
rows={3}
className="w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
/>
</div>
<div>
<label className="block text-sm font-medium text-foreground mb-2">
<label className="mb-2 block text-sm font-medium text-foreground">
{t('mcpForm.fields.envVars')}
</label>
<textarea
@@ -151,18 +150,18 @@ export default function CodexMcpFormModal({
}}
placeholder="API_KEY=xxx&#10;DEBUG=true"
rows={3}
className="w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
/>
</div>
<div className="flex justify-end gap-2 pt-4 border-t border-border">
<div className="flex justify-end gap-2 border-t border-border pt-4">
<Button type="button" variant="outline" onClick={onClose}>
{t('mcpForm.actions.cancel')}
</Button>
<Button
type="submit"
disabled={isSubmitting || !formData.name.trim() || !formData.config.command.trim()}
className="bg-green-600 hover:bg-green-700 text-white"
className="bg-green-600 text-white hover:bg-green-700"
>
{isSubmitting
? t('mcpForm.actions.saving')

22
src/components/settings/view/tabs/AppearanceSettingsTab.tsx
View File

@@ -1,8 +1,8 @@
import type { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import DarkModeToggle from '../../../DarkModeToggle';
import LanguageSelector from '../../../LanguageSelector';
import { DarkModeToggle } from '../../../../shared/view/ui';
import type { CodeEditorSettingsState, ProjectSortOrder } from '../../types/types';
import LanguageSelector from '../../../../shared/view/ui/LanguageSelector';
type AppearanceSettingsTabProps = {
projectSortOrder: ProjectSortOrder;
@@ -35,7 +35,7 @@ function ToggleCard({
ariaLabel,
}: ToggleCardProps) {
return (
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<div className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
<div className="flex items-center justify-between">
<div>
<div className="font-medium text-foreground">{label}</div>
@@ -43,7 +43,7 @@ function ToggleCard({
</div>
<button
onClick={() => onChange(!checked)}
className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
className="relative inline-flex h-8 w-14 items-center rounded-full bg-gray-200 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-gray-700 dark:focus:ring-offset-gray-900"
role="switch"
aria-checked={checked}
aria-label={ariaLabel}
@@ -51,7 +51,7 @@ function ToggleCard({
<span className="sr-only">{ariaLabel}</span>
<span
className={`${checked ? 'translate-x-7' : 'translate-x-1'
} h-6 w-6 transform rounded-full bg-white shadow-lg transition-transform duration-200 flex items-center justify-center`}
} flex h-6 w-6 transform items-center justify-center rounded-full bg-white shadow-lg transition-transform duration-200`}
>
{checked ? onIcon : offIcon}
</span>
@@ -77,7 +77,7 @@ export default function AppearanceSettingsTab({
return (
<div className="space-y-6 md:space-y-8">
<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="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
<div className="flex items-center justify-between">
<div>
<div className="font-medium text-foreground">{t('appearanceSettings.darkMode.label')}</div>
@@ -95,7 +95,7 @@ export default function AppearanceSettingsTab({
</div>
<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="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
<div className="flex items-center justify-between">
<div>
<div className="font-medium text-foreground">
@@ -108,7 +108,7 @@ export default function AppearanceSettingsTab({
<select
value={projectSortOrder}
onChange={(event) => onProjectSortOrderChange(event.target.value as ProjectSortOrder)}
className="text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 w-32"
className="w-32 rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
>
<option value="name">{t('appearanceSettings.projectSorting.alphabetical')}</option>
<option value="date">{t('appearanceSettings.projectSorting.recentActivity')}</option>
@@ -120,7 +120,7 @@ export default function AppearanceSettingsTab({
<div className="space-y-4">
<h3 className="text-lg font-semibold text-foreground">{t('appearanceSettings.codeEditor.title')}</h3>
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<div className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
<div className="flex items-center justify-between">
<div>
<div className="font-medium text-foreground">{codeEditorThemeLabel}</div>
@@ -160,7 +160,7 @@ export default function AppearanceSettingsTab({
ariaLabel={t('appearanceSettings.codeEditor.lineNumbers.label')}
/>
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<div className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
<div className="flex items-center justify-between">
<div>
<div className="font-medium text-foreground">
@@ -173,7 +173,7 @@ export default function AppearanceSettingsTab({
<select
value={codeEditorSettings.fontSize}
onChange={(event) => onCodeEditorFontSizeChange(event.target.value)}
className="text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 w-24"
className="w-24 rounded-lg border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
>
<option value="10">10px</option>
<option value="11">11px</option>

20
src/components/settings/view/tabs/agents-settings/AgentListItem.tsx
View File

@@ -76,16 +76,16 @@ export default function AgentListItem({
return (
<button
onClick={onClick}
className={`flex-1 text-center py-3 px-2 border-b-2 transition-colors ${isSelected
className={`flex-1 border-b-2 px-2 py-3 text-center transition-colors ${isSelected
? `${colors.borderBottom} ${colors.bg}`
: 'border-transparent hover:bg-gray-50 dark:hover:bg-gray-800'
}`}
>
<div className="flex flex-col items-center gap-1">
<SessionProviderLogo provider={agentId} className="w-5 h-5" />
<SessionProviderLogo provider={agentId} className="h-5 w-5" />
<span className="text-xs font-medium text-foreground">{config.name}</span>
{authStatus.authenticated && (
<span className={`w-1.5 h-1.5 rounded-full ${colors.dot}`} />
<span className={`h-1.5 w-1.5 rounded-full ${colors.dot}`} />
)}
</div>
</button>
@@ -95,28 +95,28 @@ export default function AgentListItem({
return (
<button
onClick={onClick}
className={`w-full text-left p-3 border-l-4 transition-colors ${isSelected
className={`w-full border-l-4 p-3 text-left transition-colors ${isSelected
? `${colors.border} ${colors.bg}`
: 'border-transparent hover:bg-gray-50 dark:hover:bg-gray-800'
}`}
>
<div className="flex items-center gap-2 mb-1">
<SessionProviderLogo provider={agentId} className="w-4 h-4" />
<div className="mb-1 flex items-center gap-2">
<SessionProviderLogo provider={agentId} className="h-4 w-4" />
<span className="font-medium text-foreground">{config.name}</span>
</div>
<div className="text-xs text-muted-foreground pl-6">
<div className="pl-6 text-xs text-muted-foreground">
{authStatus.loading ? (
<span className="text-gray-400">{t('agents.authStatus.checking')}</span>
) : authStatus.authenticated ? (
<div className="flex items-center gap-1">
<span className={`w-1.5 h-1.5 rounded-full ${colors.dot}`} />
<span className="truncate max-w-[120px]" title={authStatus.email ?? undefined}>
<span className={`h-1.5 w-1.5 rounded-full ${colors.dot}`} />
<span className="max-w-[120px] truncate" title={authStatus.email ?? undefined}>
{authStatus.email || t('agents.authStatus.connected')}
</span>
</div>
) : (
<div className="flex items-center gap-1">
<span className="w-1.5 h-1.5 rounded-full bg-gray-400" />
<span className="h-1.5 w-1.5 rounded-full bg-gray-400" />
<span>{t('agents.authStatus.notConnected')}</span>
</div>
)}

4
src/components/settings/view/tabs/agents-settings/AgentsSettingsTab.tsx
View File

@@ -68,14 +68,14 @@ export default function AgentsSettingsTab({
]);
return (
<div className="flex flex-col md:flex-row h-full min-h-[400px] md:min-h-[500px]">
<div className="flex h-full min-h-[400px] flex-col md:min-h-[500px] md:flex-row">
<AgentSelectorSection
selectedAgent={selectedAgent}
onSelectAgent={setSelectedAgent}
agentContextById={agentContextById}
/>
<div className="flex-1 flex flex-col overflow-hidden">
<div className="flex flex-1 flex-col overflow-hidden">
<AgentCategoryTabsSection
selectedCategory={selectedCategory}
onSelectCategory={setSelectedCategory}

2
src/components/settings/view/tabs/agents-settings/sections/AgentCategoryContentSection.tsx
View File

@@ -1,7 +1,7 @@
import type { AgentCategoryContentSectionProps } from '../types';
import AccountContent from './content/AccountContent';
import McpServersContent from './content/McpServersContent';
import PermissionsContent from './content/PermissionsContent';
import type { AgentCategoryContentSectionProps } from '../types';
export default function AgentCategoryContentSection({
selectedAgent,

6
src/components/settings/view/tabs/agents-settings/sections/AgentCategoryTabsSection.tsx
View File

@@ -11,15 +11,15 @@ export default function AgentCategoryTabsSection({
const { t } = useTranslation('settings');
return (
<div className="border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
<div role="tablist" className="flex px-2 md:px-4 overflow-x-auto">
<div className="flex-shrink-0 border-b border-gray-200 dark:border-gray-700">
<div role="tablist" className="flex overflow-x-auto px-2 md:px-4">
{AGENT_CATEGORIES.map((category) => (
<button
key={category}
role="tab"
aria-selected={selectedCategory === category}
onClick={() => onSelectCategory(category)}
className={`px-3 md:px-4 py-2 md:py-3 text-xs md:text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
className={`whitespace-nowrap border-b-2 px-3 py-2 text-xs font-medium transition-colors md:px-4 md:py-3 md:text-sm ${
selectedCategory === category
? 'border-blue-600 text-blue-600 dark:text-blue-400'
: 'border-transparent text-muted-foreground hover:text-foreground'

4
src/components/settings/view/tabs/agents-settings/sections/AgentSelectorSection.tsx
View File

@@ -11,7 +11,7 @@ export default function AgentSelectorSection({
}: AgentSelectorSectionProps) {
return (
<>
<div className="md:hidden border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
<div className="flex-shrink-0 border-b border-gray-200 dark:border-gray-700 md:hidden">
<div className="flex">
{AGENT_PROVIDERS.map((agent) => (
<AgentListItem
@@ -26,7 +26,7 @@ export default function AgentSelectorSection({
</div>
</div>
<div className="hidden md:block w-48 border-r border-gray-200 dark:border-gray-700 flex-shrink-0">
<div className="hidden w-48 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 md:block">
<div className="p-2">
{AGENT_PROVIDERS.map((agent) => (
<AgentListItem

13
src/components/settings/view/tabs/agents-settings/sections/content/AccountContent.tsx
View File

@@ -1,7 +1,6 @@
import { LogIn } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Badge } from '../../../../../../ui/badge';
import { Button } from '../../../../../../ui/button';
import { Badge, Button } from '../../../../../../../shared/view/ui';
import SessionProviderLogo from '../../../../../../llm-logo-provider/SessionProviderLogo';
import type { AgentProvider, AuthStatus } from '../../../../../types/types';
@@ -63,8 +62,8 @@ export default function AccountContent({ agent, authStatus, onLogin }: AccountCo
return (
<div className="space-y-6">
<div className="flex items-center gap-3 mb-4">
<SessionProviderLogo provider={agent} className="w-6 h-6" />
<div className="mb-4 flex items-center gap-3">
<SessionProviderLogo provider={agent} className="h-6 w-6" />
<div>
<h3 className="text-lg font-medium text-foreground">{config.name}</h3>
<p className="text-sm text-muted-foreground">{t(`agents.account.${agent}.description`)}</p>
@@ -108,7 +107,7 @@ export default function AccountContent({ agent, authStatus, onLogin }: AccountCo
</div>
{authStatus.method !== 'api_key' && (
<div className="border-t border-gray-200 dark:border-gray-700 pt-4">
<div className="border-t border-gray-200 pt-4 dark:border-gray-700">
<div className="flex items-center justify-between">
<div>
<div className={`font-medium ${config.textClass}`}>
@@ -125,7 +124,7 @@ export default function AccountContent({ agent, authStatus, onLogin }: AccountCo
className={`${config.buttonClass} text-white`}
size="sm"
>
<LogIn className="w-4 h-4 mr-2" />
<LogIn className="mr-2 h-4 w-4" />
{authStatus.authenticated ? t('agents.login.reLoginButton') : t('agents.login.button')}
</Button>
</div>
@@ -133,7 +132,7 @@ export default function AccountContent({ agent, authStatus, onLogin }: AccountCo
)}
{authStatus.error && (
<div className="border-t border-gray-200 dark:border-gray-700 pt-4">
<div className="border-t border-gray-200 pt-4 dark:border-gray-700">
<div className="text-sm text-red-600 dark:text-red-400">
{t('agents.error', { error: authStatus.error })}
</div>

109
src/components/settings/view/tabs/agents-settings/sections/content/McpServersContent.tsx
View File

@@ -1,23 +1,22 @@
import { Edit3, Globe, Plus, Server, Terminal, Trash2, Zap } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Badge } from '../../../../../../ui/badge';
import { Button } from '../../../../../../ui/button';
import { Badge, Button } from '../../../../../../../shared/view/ui';
import type { McpServer, McpToolsResult, McpTestResult } from '../../../../../types/types';
const getTransportIcon = (type: string | undefined) => {
if (type === 'stdio') {
return <Terminal className="w-4 h-4" />;
return <Terminal className="h-4 w-4" />;
}
if (type === 'sse') {
return <Zap className="w-4 h-4" />;
return <Zap className="h-4 w-4" />;
}
if (type === 'http') {
return <Globe className="w-4 h-4" />;
return <Globe className="h-4 w-4" />;
}
return <Server className="w-4 h-4" />;
return <Server className="h-4 w-4" />;
};
const maskSecret = (value: unknown): string => {
@@ -57,14 +56,14 @@ function ClaudeMcpServers({
return (
<div className="space-y-4">
<div className="flex items-center gap-3">
<Server className="w-5 h-5 text-purple-500" />
<Server className="h-5 w-5 text-purple-500" />
<h3 className="text-lg font-medium text-foreground">{t('mcpServers.title')}</h3>
</div>
<p className="text-sm text-muted-foreground">{t('mcpServers.description.claude')}</p>
<div className="flex justify-between items-center">
<Button onClick={onAdd} className="bg-purple-600 hover:bg-purple-700 text-white" size="sm">
<Plus className="w-4 h-4 mr-2" />
<div className="flex items-center justify-between">
<Button onClick={onAdd} className="bg-purple-600 text-white hover:bg-purple-700" size="sm">
<Plus className="mr-2 h-4 w-4" />
{t('mcpServers.addButton')}
</Button>
</div>
@@ -81,10 +80,10 @@ function ClaudeMcpServers({
const toolsResult = serverTools[serverId];
return (
<div key={serverId} className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<div key={serverId} className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-2 mb-2">
<div className="mb-2 flex items-center gap-2">
{getTransportIcon(server.type)}
<span className="font-medium text-foreground">{server.name}</span>
<Badge variant="outline" className="text-xs">
@@ -99,32 +98,32 @@ function ClaudeMcpServers({
</Badge>
</div>
<div className="text-sm text-muted-foreground space-y-1">
<div className="space-y-1 text-sm text-muted-foreground">
{server.type === 'stdio' && server.config?.command && (
<div>
{t('mcpServers.config.command')}:{' '}
<code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.command}</code>
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">{server.config.command}</code>
</div>
)}
{(server.type === 'sse' || server.type === 'http') && server.config?.url && (
<div>
{t('mcpServers.config.url')}:{' '}
<code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.url}</code>
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">{server.config.url}</code>
</div>
)}
{server.config?.args && server.config.args.length > 0 && (
<div>
{t('mcpServers.config.args')}:{' '}
<code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.args.join(' ')}</code>
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">{server.config.args.join(' ')}</code>
</div>
)}
</div>
{testResult && (
<div className={`mt-2 p-2 rounded text-xs ${
<div className={`mt-2 rounded p-2 text-xs ${
testResult.success
? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200'
: 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200'
? 'bg-green-50 text-green-800 dark:bg-green-900/20 dark:text-green-200'
: 'bg-red-50 text-red-800 dark:bg-red-900/20 dark:text-red-200'
}`}
>
<div className="font-medium">{testResult.message}</div>
@@ -132,13 +131,13 @@ function ClaudeMcpServers({
)}
{toolsResult && toolsResult.tools && toolsResult.tools.length > 0 && (
<div className="mt-2 p-2 rounded text-xs bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200">
<div className="mt-2 rounded bg-blue-50 p-2 text-xs text-blue-800 dark:bg-blue-900/20 dark:text-blue-200">
<div className="font-medium">
{t('mcpServers.tools.title')} {t('mcpServers.tools.count', { count: toolsResult.tools.length })}
</div>
<div className="flex flex-wrap gap-1 mt-1">
<div className="mt-1 flex flex-wrap gap-1">
{toolsResult.tools.slice(0, 5).map((tool, index) => (
<code key={`${tool.name}-${index}`} className="bg-blue-100 dark:bg-blue-800 px-1 rounded">
<code key={`${tool.name}-${index}`} className="rounded bg-blue-100 px-1 dark:bg-blue-800">
{tool.name}
</code>
))}
@@ -152,7 +151,7 @@ function ClaudeMcpServers({
)}
</div>
<div className="flex items-center gap-2 ml-4">
<div className="ml-4 flex items-center gap-2">
<Button
onClick={() => onEdit(server)}
variant="ghost"
@@ -160,7 +159,7 @@ function ClaudeMcpServers({
className="text-gray-600 hover:text-gray-700"
title={t('mcpServers.actions.edit')}
>
<Edit3 className="w-4 h-4" />
<Edit3 className="h-4 w-4" />
</Button>
<Button
onClick={() => onDelete(serverId, server.scope)}
@@ -169,7 +168,7 @@ function ClaudeMcpServers({
className="text-red-600 hover:text-red-700"
title={t('mcpServers.actions.delete')}
>
<Trash2 className="w-4 h-4" />
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
@@ -177,7 +176,7 @@ function ClaudeMcpServers({
);
})}
{servers.length === 0 && (
<div className="text-center py-8 text-gray-500 dark:text-gray-400">{t('mcpServers.empty')}</div>
<div className="py-8 text-center text-gray-500 dark:text-gray-400">{t('mcpServers.empty')}</div>
)}
</div>
</div>
@@ -198,14 +197,14 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }: Omit<CursorMcpSe
return (
<div className="space-y-4">
<div className="flex items-center gap-3">
<Server className="w-5 h-5 text-purple-500" />
<Server className="h-5 w-5 text-purple-500" />
<h3 className="text-lg font-medium text-foreground">{t('mcpServers.title')}</h3>
</div>
<p className="text-sm text-muted-foreground">{t('mcpServers.description.cursor')}</p>
<div className="flex justify-between items-center">
<Button onClick={onAdd} className="bg-purple-600 hover:bg-purple-700 text-white" size="sm">
<Plus className="w-4 h-4 mr-2" />
<div className="flex items-center justify-between">
<Button onClick={onAdd} className="bg-purple-600 text-white hover:bg-purple-700" size="sm">
<Plus className="mr-2 h-4 w-4" />
{t('mcpServers.addButton')}
</Button>
</div>
@@ -215,11 +214,11 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }: Omit<CursorMcpSe
const serverId = server.id || server.name;
return (
<div key={serverId} className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<div key={serverId} className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-2 mb-2">
<Terminal className="w-4 h-4" />
<div className="mb-2 flex items-center gap-2">
<Terminal className="h-4 w-4" />
<span className="font-medium text-foreground">{server.name}</span>
<Badge variant="outline" className="text-xs">stdio</Badge>
</div>
@@ -227,12 +226,12 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }: Omit<CursorMcpSe
{server.config?.command && (
<div>
{t('mcpServers.config.command')}:{' '}
<code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.command}</code>
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">{server.config.command}</code>
</div>
)}
</div>
</div>
<div className="flex items-center gap-2 ml-4">
<div className="ml-4 flex items-center gap-2">
<Button
onClick={() => onEdit(server)}
variant="ghost"
@@ -240,7 +239,7 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }: Omit<CursorMcpSe
className="text-gray-600 hover:text-gray-700"
title={t('mcpServers.actions.edit')}
>
<Edit3 className="w-4 h-4" />
<Edit3 className="h-4 w-4" />
</Button>
<Button
onClick={() => onDelete(serverId)}
@@ -249,7 +248,7 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }: Omit<CursorMcpSe
className="text-red-600 hover:text-red-700"
title={t('mcpServers.actions.delete')}
>
<Trash2 className="w-4 h-4" />
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
@@ -257,7 +256,7 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }: Omit<CursorMcpSe
);
})}
{servers.length === 0 && (
<div className="text-center py-8 text-gray-500 dark:text-gray-400">{t('mcpServers.empty')}</div>
<div className="py-8 text-center text-gray-500 dark:text-gray-400">{t('mcpServers.empty')}</div>
)}
</div>
</div>
@@ -279,14 +278,14 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete, deleteError }: Omit
return (
<div className="space-y-4">
<div className="flex items-center gap-3">
<Server className="w-5 h-5 text-gray-700 dark:text-gray-300" />
<Server className="h-5 w-5 text-gray-700 dark:text-gray-300" />
<h3 className="text-lg font-medium text-foreground">{t('mcpServers.title')}</h3>
</div>
<p className="text-sm text-muted-foreground">{t('mcpServers.description.codex')}</p>
<div className="flex justify-between items-center">
<Button onClick={onAdd} className="bg-gray-800 hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600 text-white" size="sm">
<Plus className="w-4 h-4 mr-2" />
<div className="flex items-center justify-between">
<Button onClick={onAdd} className="bg-gray-800 text-white hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600" size="sm">
<Plus className="mr-2 h-4 w-4" />
{t('mcpServers.addButton')}
</Button>
</div>
@@ -298,32 +297,32 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete, deleteError }: Omit
<div className="space-y-2">
{servers.map((server) => (
<div key={server.name} className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
<div key={server.name} className="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-2 mb-2">
<Terminal className="w-4 h-4" />
<div className="mb-2 flex items-center gap-2">
<Terminal className="h-4 w-4" />
<span className="font-medium text-foreground">{server.name}</span>
<Badge variant="outline" className="text-xs">stdio</Badge>
</div>
<div className="text-sm text-muted-foreground space-y-1">
<div className="space-y-1 text-sm text-muted-foreground">
{server.config?.command && (
<div>
{t('mcpServers.config.command')}:{' '}
<code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.command}</code>
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">{server.config.command}</code>
</div>
)}
{server.config?.args && server.config.args.length > 0 && (
<div>
{t('mcpServers.config.args')}:{' '}
<code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.args.join(' ')}</code>
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">{server.config.args.join(' ')}</code>
</div>
)}
{server.config?.env && Object.keys(server.config.env).length > 0 && (
<div>
{t('mcpServers.config.environment')}:{' '}
<code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">
{Object.entries(server.config.env).map(([key, value]) => `${key}=${maskSecret(value)}`).join(', ')}
</code>
</div>
@@ -331,7 +330,7 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete, deleteError }: Omit
</div>
</div>
<div className="flex items-center gap-2 ml-4">
<div className="ml-4 flex items-center gap-2">
<Button
onClick={() => onEdit(server)}
variant="ghost"
@@ -339,7 +338,7 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete, deleteError }: Omit
className="text-gray-600 hover:text-gray-700"
title={t('mcpServers.actions.edit')}
>
<Edit3 className="w-4 h-4" />
<Edit3 className="h-4 w-4" />
</Button>
<Button
onClick={() => onDelete(server.name)}
@@ -348,19 +347,19 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete, deleteError }: Omit
className="text-red-600 hover:text-red-700"
title={t('mcpServers.actions.delete')}
>
<Trash2 className="w-4 h-4" />
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
</div>
))}
{servers.length === 0 && (
<div className="text-center py-8 text-gray-500 dark:text-gray-400">{t('mcpServers.empty')}</div>
<div className="py-8 text-center text-gray-500 dark:text-gray-400">{t('mcpServers.empty')}</div>
)}
</div>
<div className="bg-gray-100 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg p-4">
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">{t('mcpServers.help.title')}</h4>
<div className="rounded-lg border border-gray-300 bg-gray-100 p-4 dark:border-gray-600 dark:bg-gray-800/50">
<h4 className="mb-2 font-medium text-gray-900 dark:text-gray-100">{t('mcpServers.help.title')}</h4>
<p className="text-sm text-gray-700 dark:text-gray-300">{t('mcpServers.help.description')}</p>
</div>
</div>

177
src/components/settings/view/tabs/agents-settings/sections/content/PermissionsContent.tsx
View File

@@ -1,8 +1,7 @@
import { useState } from 'react';
import { AlertTriangle, Plus, Shield, X } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '../../../../../../ui/button';
import { Input } from '../../../../../../ui/input';
import { Button, Input } from '../../../../../../../shared/view/ui';
import type { CodexPermissionMode, GeminiPermissionMode } from '../../../../../types/types';
const COMMON_CLAUDE_TOOLS = [
@@ -96,16 +95,16 @@ function ClaudePermissions({
<div className="space-y-6">
<div className="space-y-4">
<div className="flex items-center gap-3">
<AlertTriangle className="w-5 h-5 text-orange-500" />
<AlertTriangle className="h-5 w-5 text-orange-500" />
<h3 className="text-lg font-medium text-foreground">{t('permissions.title')}</h3>
</div>
<div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
<div className="rounded-lg border border-orange-200 bg-orange-50 p-4 dark:border-orange-800 dark:bg-orange-900/20">
<label className="flex items-center gap-3">
<input
type="checkbox"
checked={skipPermissions}
onChange={(event) => onSkipPermissionsChange(event.target.checked)}
className="w-4 h-4 text-blue-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:ring-2"
className="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
/>
<div>
<div className="font-medium text-orange-900 dark:text-orange-100">
@@ -121,12 +120,12 @@ function ClaudePermissions({
<div className="space-y-4">
<div className="flex items-center gap-3">
<Shield className="w-5 h-5 text-green-500" />
<Shield className="h-5 w-5 text-green-500" />
<h3 className="text-lg font-medium text-foreground">{t('permissions.allowedTools.title')}</h3>
</div>
<p className="text-sm text-muted-foreground">{t('permissions.allowedTools.description')}</p>
<div className="flex flex-col sm:flex-row gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<Input
value={newAllowedTool}
onChange={(event) => setNewAllowedTool(event.target.value)}
@@ -137,7 +136,7 @@ function ClaudePermissions({
handleAddAllowedTool(newAllowedTool);
}
}}
className="flex-1 h-10"
className="h-10 flex-1"
/>
<Button
onClick={() => handleAddAllowedTool(newAllowedTool)}
@@ -145,7 +144,7 @@ function ClaudePermissions({
size="sm"
className="h-10 px-4"
>
<Plus className="w-4 h-4 mr-2 sm:mr-0" />
<Plus className="mr-2 h-4 w-4 sm:mr-0" />
<span className="sm:hidden">{t('permissions.actions.add')}</span>
</Button>
</div>
@@ -162,7 +161,7 @@ function ClaudePermissions({
size="sm"
onClick={() => handleAddAllowedTool(tool)}
disabled={allowedTools.includes(tool)}
className="text-xs h-8"
className="h-8 text-xs"
>
{tool}
</Button>
@@ -172,7 +171,7 @@ function ClaudePermissions({
<div className="space-y-2">
{allowedTools.map((tool) => (
<div key={tool} className="flex items-center justify-between bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-3">
<div key={tool} className="flex items-center justify-between rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-800 dark:bg-green-900/20">
<span className="font-mono text-sm text-green-800 dark:text-green-200">{tool}</span>
<Button
variant="ghost"
@@ -180,12 +179,12 @@ function ClaudePermissions({
onClick={() => onAllowedToolsChange(removeValue(allowedTools, tool))}
className="text-green-600 hover:text-green-700"
>
<X className="w-4 h-4" />
<X className="h-4 w-4" />
</Button>
</div>
))}
{allowedTools.length === 0 && (
<div className="text-center py-6 text-gray-500 dark:text-gray-400">
<div className="py-6 text-center text-gray-500 dark:text-gray-400">
{t('permissions.allowedTools.empty')}
</div>
)}
@@ -194,12 +193,12 @@ function ClaudePermissions({
<div className="space-y-4">
<div className="flex items-center gap-3">
<AlertTriangle className="w-5 h-5 text-red-500" />
<AlertTriangle className="h-5 w-5 text-red-500" />
<h3 className="text-lg font-medium text-foreground">{t('permissions.blockedTools.title')}</h3>
</div>
<p className="text-sm text-muted-foreground">{t('permissions.blockedTools.description')}</p>
<div className="flex flex-col sm:flex-row gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<Input
value={newDisallowedTool}
onChange={(event) => setNewDisallowedTool(event.target.value)}
@@ -210,7 +209,7 @@ function ClaudePermissions({
handleAddDisallowedTool(newDisallowedTool);
}
}}
className="flex-1 h-10"
className="h-10 flex-1"
/>
<Button
onClick={() => handleAddDisallowedTool(newDisallowedTool)}
@@ -218,14 +217,14 @@ function ClaudePermissions({
size="sm"
className="h-10 px-4"
>
<Plus className="w-4 h-4 mr-2 sm:mr-0" />
<Plus className="mr-2 h-4 w-4 sm:mr-0" />
<span className="sm:hidden">{t('permissions.actions.add')}</span>
</Button>
</div>
<div className="space-y-2">
{disallowedTools.map((tool) => (
<div key={tool} className="flex items-center justify-between bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3">
<div key={tool} className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20">
<span className="font-mono text-sm text-red-800 dark:text-red-200">{tool}</span>
<Button
variant="ghost"
@@ -233,27 +232,27 @@ function ClaudePermissions({
onClick={() => onDisallowedToolsChange(removeValue(disallowedTools, tool))}
className="text-red-600 hover:text-red-700"
>
<X className="w-4 h-4" />
<X className="h-4 w-4" />
</Button>
</div>
))}
{disallowedTools.length === 0 && (
<div className="text-center py-6 text-gray-500 dark:text-gray-400">
<div className="py-6 text-center text-gray-500 dark:text-gray-400">
{t('permissions.blockedTools.empty')}
</div>
)}
</div>
</div>
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
<h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
<div className="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/20">
<h4 className="mb-2 font-medium text-blue-900 dark:text-blue-100">
{t('permissions.toolExamples.title')}
</h4>
<ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
<li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Bash(git log:*)"</code> {t('permissions.toolExamples.bashGitLog')}</li>
<li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Bash(git diff:*)"</code> {t('permissions.toolExamples.bashGitDiff')}</li>
<li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Write"</code> {t('permissions.toolExamples.write')}</li>
<li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Bash(rm:*)"</code> {t('permissions.toolExamples.bashRm')}</li>
<ul className="space-y-1 text-sm text-blue-800 dark:text-blue-200">
<li><code className="rounded bg-blue-100 px-1 dark:bg-blue-800">"Bash(git log:*)"</code> {t('permissions.toolExamples.bashGitLog')}</li>
<li><code className="rounded bg-blue-100 px-1 dark:bg-blue-800">"Bash(git diff:*)"</code> {t('permissions.toolExamples.bashGitDiff')}</li>
<li><code className="rounded bg-blue-100 px-1 dark:bg-blue-800">"Write"</code> {t('permissions.toolExamples.write')}</li>
<li><code className="rounded bg-blue-100 px-1 dark:bg-blue-800">"Bash(rm:*)"</code> {t('permissions.toolExamples.bashRm')}</li>
</ul>
</div>
</div>
@@ -306,16 +305,16 @@ function CursorPermissions({
<div className="space-y-6">
<div className="space-y-4">
<div className="flex items-center gap-3">
<AlertTriangle className="w-5 h-5 text-orange-500" />
<AlertTriangle className="h-5 w-5 text-orange-500" />
<h3 className="text-lg font-medium text-foreground">{t('permissions.title')}</h3>
</div>
<div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
<div className="rounded-lg border border-orange-200 bg-orange-50 p-4 dark:border-orange-800 dark:bg-orange-900/20">
<label className="flex items-center gap-3">
<input
type="checkbox"
checked={skipPermissions}
onChange={(event) => onSkipPermissionsChange(event.target.checked)}
className="w-4 h-4 text-purple-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-purple-500 focus:ring-2"
className="h-4 w-4 rounded border-gray-300 bg-gray-100 text-purple-600 focus:ring-2 focus:ring-purple-500 dark:border-gray-600 dark:bg-gray-700"
/>
<div>
<div className="font-medium text-orange-900 dark:text-orange-100">
@@ -331,12 +330,12 @@ function CursorPermissions({
<div className="space-y-4">
<div className="flex items-center gap-3">
<Shield className="w-5 h-5 text-green-500" />
<Shield className="h-5 w-5 text-green-500" />
<h3 className="text-lg font-medium text-foreground">{t('permissions.allowedCommands.title')}</h3>
</div>
<p className="text-sm text-muted-foreground">{t('permissions.allowedCommands.description')}</p>
<div className="flex flex-col sm:flex-row gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<Input
value={newAllowedCommand}
onChange={(event) => setNewAllowedCommand(event.target.value)}
@@ -347,7 +346,7 @@ function CursorPermissions({
handleAddAllowedCommand(newAllowedCommand);
}
}}
className="flex-1 h-10"
className="h-10 flex-1"
/>
<Button
onClick={() => handleAddAllowedCommand(newAllowedCommand)}
@@ -355,7 +354,7 @@ function CursorPermissions({
size="sm"
className="h-10 px-4"
>
<Plus className="w-4 h-4 mr-2 sm:mr-0" />
<Plus className="mr-2 h-4 w-4 sm:mr-0" />
<span className="sm:hidden">{t('permissions.actions.add')}</span>
</Button>
</div>
@@ -372,7 +371,7 @@ function CursorPermissions({
size="sm"
onClick={() => handleAddAllowedCommand(command)}
disabled={allowedCommands.includes(command)}
className="text-xs h-8"
className="h-8 text-xs"
>
{command}
</Button>
@@ -382,7 +381,7 @@ function CursorPermissions({
<div className="space-y-2">
{allowedCommands.map((command) => (
<div key={command} className="flex items-center justify-between bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-3">
<div key={command} className="flex items-center justify-between rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-800 dark:bg-green-900/20">
<span className="font-mono text-sm text-green-800 dark:text-green-200">{command}</span>
<Button
variant="ghost"
@@ -390,12 +389,12 @@ function CursorPermissions({
onClick={() => onAllowedCommandsChange(removeValue(allowedCommands, command))}
className="text-green-600 hover:text-green-700"
>
<X className="w-4 h-4" />
<X className="h-4 w-4" />
</Button>
</div>
))}
{allowedCommands.length === 0 && (
<div className="text-center py-6 text-gray-500 dark:text-gray-400">
<div className="py-6 text-center text-gray-500 dark:text-gray-400">
{t('permissions.allowedCommands.empty')}
</div>
)}
@@ -404,12 +403,12 @@ function CursorPermissions({
<div className="space-y-4">
<div className="flex items-center gap-3">
<AlertTriangle className="w-5 h-5 text-red-500" />
<AlertTriangle className="h-5 w-5 text-red-500" />
<h3 className="text-lg font-medium text-foreground">{t('permissions.blockedCommands.title')}</h3>
</div>
<p className="text-sm text-muted-foreground">{t('permissions.blockedCommands.description')}</p>
<div className="flex flex-col sm:flex-row gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<Input
value={newDisallowedCommand}
onChange={(event) => setNewDisallowedCommand(event.target.value)}
@@ -420,7 +419,7 @@ function CursorPermissions({
handleAddDisallowedCommand(newDisallowedCommand);
}
}}
className="flex-1 h-10"
className="h-10 flex-1"
/>
<Button
onClick={() => handleAddDisallowedCommand(newDisallowedCommand)}
@@ -428,14 +427,14 @@ function CursorPermissions({
size="sm"
className="h-10 px-4"
>
<Plus className="w-4 h-4 mr-2 sm:mr-0" />
<Plus className="mr-2 h-4 w-4 sm:mr-0" />
<span className="sm:hidden">{t('permissions.actions.add')}</span>
</Button>
</div>
<div className="space-y-2">
{disallowedCommands.map((command) => (
<div key={command} className="flex items-center justify-between bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3">
<div key={command} className="flex items-center justify-between rounded-lg border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20">
<span className="font-mono text-sm text-red-800 dark:text-red-200">{command}</span>
<Button
variant="ghost"
@@ -443,27 +442,27 @@ function CursorPermissions({
onClick={() => onDisallowedCommandsChange(removeValue(disallowedCommands, command))}
className="text-red-600 hover:text-red-700"
>
<X className="w-4 h-4" />
<X className="h-4 w-4" />
</Button>
</div>
))}
{disallowedCommands.length === 0 && (
<div className="text-center py-6 text-gray-500 dark:text-gray-400">
<div className="py-6 text-center text-gray-500 dark:text-gray-400">
{t('permissions.blockedCommands.empty')}
</div>
)}
</div>
</div>
<div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4">
<h4 className="font-medium text-purple-900 dark:text-purple-100 mb-2">
<div className="rounded-lg border border-purple-200 bg-purple-50 p-4 dark:border-purple-800 dark:bg-purple-900/20">
<h4 className="mb-2 font-medium text-purple-900 dark:text-purple-100">
{t('permissions.shellExamples.title')}
</h4>
<ul className="text-sm text-purple-800 dark:text-purple-200 space-y-1">
<li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(ls)"</code> {t('permissions.shellExamples.ls')}</li>
<li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(git status)"</code> {t('permissions.shellExamples.gitStatus')}</li>
<li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(npm install)"</code> {t('permissions.shellExamples.npmInstall')}</li>
<li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(rm -rf)"</code> {t('permissions.shellExamples.rmRf')}</li>
<ul className="space-y-1 text-sm text-purple-800 dark:text-purple-200">
<li><code className="rounded bg-purple-100 px-1 dark:bg-purple-800">"Shell(ls)"</code> {t('permissions.shellExamples.ls')}</li>
<li><code className="rounded bg-purple-100 px-1 dark:bg-purple-800">"Shell(git status)"</code> {t('permissions.shellExamples.gitStatus')}</li>
<li><code className="rounded bg-purple-100 px-1 dark:bg-purple-800">"Shell(npm install)"</code> {t('permissions.shellExamples.npmInstall')}</li>
<li><code className="rounded bg-purple-100 px-1 dark:bg-purple-800">"Shell(rm -rf)"</code> {t('permissions.shellExamples.rmRf')}</li>
</ul>
</div>
</div>
@@ -483,25 +482,25 @@ function CodexPermissions({ permissionMode, onPermissionModeChange }: Omit<Codex
<div className="space-y-6">
<div className="space-y-4">
<div className="flex items-center gap-3">
<Shield className="w-5 h-5 text-green-500" />
<Shield className="h-5 w-5 text-green-500" />
<h3 className="text-lg font-medium text-foreground">{t('permissions.codex.permissionMode')}</h3>
</div>
<p className="text-sm text-muted-foreground">{t('permissions.codex.description')}</p>
<div
className={`border rounded-lg p-4 cursor-pointer transition-all ${permissionMode === 'default'
? 'bg-gray-100 dark:bg-gray-800 border-gray-400 dark:border-gray-500'
: 'bg-gray-50 dark:bg-gray-900/50 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
className={`cursor-pointer rounded-lg border p-4 transition-all ${permissionMode === 'default'
? 'border-gray-400 bg-gray-100 dark:border-gray-500 dark:bg-gray-800'
: 'border-gray-200 bg-gray-50 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900/50 dark:hover:border-gray-600'
}`}
onClick={() => onPermissionModeChange('default')}
>
<label className="flex items-start gap-3 cursor-pointer">
<label className="flex cursor-pointer items-start gap-3">
<input
type="radio"
name="codexPermissionMode"
checked={permissionMode === 'default'}
onChange={() => onPermissionModeChange('default')}
className="mt-1 w-4 h-4 text-green-600"
className="mt-1 h-4 w-4 text-green-600"
/>
<div>
<div className="font-medium text-foreground">{t('permissions.codex.modes.default.title')}</div>
@@ -513,19 +512,19 @@ function CodexPermissions({ permissionMode, onPermissionModeChange }: Omit<Codex
</div>
<div
className={`border rounded-lg p-4 cursor-pointer transition-all ${permissionMode === 'acceptEdits'
? 'bg-green-50 dark:bg-green-900/20 border-green-400 dark:border-green-600'
: 'bg-gray-50 dark:bg-gray-900/50 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
className={`cursor-pointer rounded-lg border p-4 transition-all ${permissionMode === 'acceptEdits'
? 'border-green-400 bg-green-50 dark:border-green-600 dark:bg-green-900/20'
: 'border-gray-200 bg-gray-50 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900/50 dark:hover:border-gray-600'
}`}
onClick={() => onPermissionModeChange('acceptEdits')}
>
<label className="flex items-start gap-3 cursor-pointer">
<label className="flex cursor-pointer items-start gap-3">
<input
type="radio"
name="codexPermissionMode"
checked={permissionMode === 'acceptEdits'}
onChange={() => onPermissionModeChange('acceptEdits')}
className="mt-1 w-4 h-4 text-green-600"
className="mt-1 h-4 w-4 text-green-600"
/>
<div>
<div className="font-medium text-green-900 dark:text-green-100">{t('permissions.codex.modes.acceptEdits.title')}</div>
@@ -537,24 +536,24 @@ function CodexPermissions({ permissionMode, onPermissionModeChange }: Omit<Codex
</div>
<div
className={`border rounded-lg p-4 cursor-pointer transition-all ${permissionMode === 'bypassPermissions'
? 'bg-orange-50 dark:bg-orange-900/20 border-orange-400 dark:border-orange-600'
: 'bg-gray-50 dark:bg-gray-900/50 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
className={`cursor-pointer rounded-lg border p-4 transition-all ${permissionMode === 'bypassPermissions'
? 'border-orange-400 bg-orange-50 dark:border-orange-600 dark:bg-orange-900/20'
: 'border-gray-200 bg-gray-50 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900/50 dark:hover:border-gray-600'
}`}
onClick={() => onPermissionModeChange('bypassPermissions')}
>
<label className="flex items-start gap-3 cursor-pointer">
<label className="flex cursor-pointer items-start gap-3">
<input
type="radio"
name="codexPermissionMode"
checked={permissionMode === 'bypassPermissions'}
onChange={() => onPermissionModeChange('bypassPermissions')}
className="mt-1 w-4 h-4 text-orange-600"
className="mt-1 h-4 w-4 text-orange-600"
/>
<div>
<div className="font-medium text-orange-900 dark:text-orange-100 flex items-center gap-2">
<div className="flex items-center gap-2 font-medium text-orange-900 dark:text-orange-100">
{t('permissions.codex.modes.bypassPermissions.title')}
<AlertTriangle className="w-4 h-4" />
<AlertTriangle className="h-4 w-4" />
</div>
<div className="text-sm text-orange-700 dark:text-orange-300">
{t('permissions.codex.modes.bypassPermissions.description')}
@@ -567,7 +566,7 @@ function CodexPermissions({ permissionMode, onPermissionModeChange }: Omit<Codex
<summary className="cursor-pointer text-muted-foreground hover:text-foreground">
{t('permissions.codex.technicalDetails')}
</summary>
<div className="mt-2 p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg text-xs text-muted-foreground space-y-2">
<div className="mt-2 space-y-2 rounded-lg bg-gray-50 p-3 text-xs text-muted-foreground dark:bg-gray-900/50">
<p><strong>{t('permissions.codex.modes.default.title')}:</strong> {t('permissions.codex.technicalInfo.default')}</p>
<p><strong>{t('permissions.codex.modes.acceptEdits.title')}:</strong> {t('permissions.codex.technicalInfo.acceptEdits')}</p>
<p><strong>{t('permissions.codex.modes.bypassPermissions.title')}:</strong> {t('permissions.codex.technicalInfo.bypassPermissions')}</p>
@@ -592,7 +591,7 @@ function GeminiPermissions({ permissionMode, onPermissionModeChange }: Omit<Gemi
<div className="space-y-6">
<div className="space-y-4">
<div className="flex items-center gap-3">
<Shield className="w-5 h-5 text-green-500" />
<Shield className="h-5 w-5 text-green-500" />
<h3 className="text-lg font-medium text-foreground">
{t('gemini.permissionMode')}
</h3>
@@ -603,19 +602,19 @@ function GeminiPermissions({ permissionMode, onPermissionModeChange }: Omit<Gemi
{/* Default Mode */}
<div
className={`border rounded-lg p-4 cursor-pointer transition-all ${permissionMode === 'default'
? 'bg-gray-100 dark:bg-gray-800 border-gray-400 dark:border-gray-500'
: 'bg-gray-50 dark:bg-gray-900/50 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
className={`cursor-pointer rounded-lg border p-4 transition-all ${permissionMode === 'default'
? 'border-gray-400 bg-gray-100 dark:border-gray-500 dark:bg-gray-800'
: 'border-gray-200 bg-gray-50 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900/50 dark:hover:border-gray-600'
}`}
onClick={() => onPermissionModeChange('default')}
>
<label className="flex items-start gap-3 cursor-pointer">
<label className="flex cursor-pointer items-start gap-3">
<input
type="radio"
name="geminiPermissionMode"
checked={permissionMode === 'default'}
onChange={() => onPermissionModeChange('default')}
className="mt-1 w-4 h-4 text-green-600"
className="mt-1 h-4 w-4 text-green-600"
/>
<div>
<div className="font-medium text-foreground">{t('gemini.modes.default.title')}</div>
@@ -628,19 +627,19 @@ function GeminiPermissions({ permissionMode, onPermissionModeChange }: Omit<Gemi
{/* Auto Edit Mode */}
<div
className={`border rounded-lg p-4 cursor-pointer transition-all ${permissionMode === 'auto_edit'
? 'bg-green-50 dark:bg-green-900/20 border-green-400 dark:border-green-600'
: 'bg-gray-50 dark:bg-gray-900/50 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
className={`cursor-pointer rounded-lg border p-4 transition-all ${permissionMode === 'auto_edit'
? 'border-green-400 bg-green-50 dark:border-green-600 dark:bg-green-900/20'
: 'border-gray-200 bg-gray-50 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900/50 dark:hover:border-gray-600'
}`}
onClick={() => onPermissionModeChange('auto_edit')}
>
<label className="flex items-start gap-3 cursor-pointer">
<label className="flex cursor-pointer items-start gap-3">
<input
type="radio"
name="geminiPermissionMode"
checked={permissionMode === 'auto_edit'}
onChange={() => onPermissionModeChange('auto_edit')}
className="mt-1 w-4 h-4 text-green-600"
className="mt-1 h-4 w-4 text-green-600"
/>
<div>
<div className="font-medium text-green-900 dark:text-green-100">{t('gemini.modes.autoEdit.title')}</div>
@@ -653,24 +652,24 @@ function GeminiPermissions({ permissionMode, onPermissionModeChange }: Omit<Gemi
{/* YOLO Mode */}
<div
className={`border rounded-lg p-4 cursor-pointer transition-all ${permissionMode === 'yolo'
? 'bg-orange-50 dark:bg-orange-900/20 border-orange-400 dark:border-orange-600'
: 'bg-gray-50 dark:bg-gray-900/50 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
className={`cursor-pointer rounded-lg border p-4 transition-all ${permissionMode === 'yolo'
? 'border-orange-400 bg-orange-50 dark:border-orange-600 dark:bg-orange-900/20'
: 'border-gray-200 bg-gray-50 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-900/50 dark:hover:border-gray-600'
}`}
onClick={() => onPermissionModeChange('yolo')}
>
<label className="flex items-start gap-3 cursor-pointer">
<label className="flex cursor-pointer items-start gap-3">
<input
type="radio"
name="geminiPermissionMode"
checked={permissionMode === 'yolo'}
onChange={() => onPermissionModeChange('yolo')}
className="mt-1 w-4 h-4 text-orange-600"
className="mt-1 h-4 w-4 text-orange-600"
/>
<div>
<div className="font-medium text-orange-900 dark:text-orange-100 flex items-center gap-2">
<div className="flex items-center gap-2 font-medium text-orange-900 dark:text-orange-100">
{t('gemini.modes.yolo.title')}
<AlertTriangle className="w-4 h-4" />
<AlertTriangle className="h-4 w-4" />
</div>
<div className="text-sm text-orange-700 dark:text-orange-300">
{t('gemini.modes.yolo.description')}

19
src/components/settings/view/tabs/api-settings/sections/ApiKeysSection.tsx
View File

@@ -1,7 +1,6 @@
import { ExternalLink, Key, Plus, Trash2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '../../../../../ui/button';
import { Input } from '../../../../../ui/input';
import { Button, Input } from '../../../../../../shared/view/ui';
import type { ApiKeyItem } from '../types';
type ApiKeysSectionProps = {
@@ -31,24 +30,24 @@ export default function ApiKeysSection({
return (
<div>
<div className="flex items-center justify-between mb-4">
<div className="mb-4 flex items-center justify-between">
<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" />
<Plus className="mr-1 h-4 w-4" />
{t('apiKeys.newButton')}
</Button>
</div>
<div className="mb-4">
<p className="text-sm text-muted-foreground mb-2">{t('apiKeys.description')}</p>
<p className="mb-2 text-sm text-muted-foreground">{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"
className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
>
{t('apiKeys.apiDocsLink')}
<ExternalLink className="h-3 w-3" />
@@ -56,7 +55,7 @@ export default function ApiKeysSection({
</div>
{showNewKeyForm && (
<div className="mb-4 p-4 border rounded-lg bg-card">
<div className="mb-4 rounded-lg border bg-card p-4">
<Input
placeholder={t('apiKeys.form.placeholder')}
value={newKeyName}
@@ -74,14 +73,14 @@ export default function ApiKeysSection({
<div className="space-y-2">
{apiKeys.length === 0 ? (
<p className="text-sm text-muted-foreground italic">{t('apiKeys.empty')}</p>
<p className="text-sm italic text-muted-foreground">{t('apiKeys.empty')}</p>
) : (
apiKeys.map((key) => (
<div key={key.id} className="flex items-center justify-between p-3 border rounded-lg">
<div key={key.id} className="flex items-center justify-between rounded-lg border p-3">
<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">
<div className="mt-1 text-xs text-muted-foreground">
{t('apiKeys.list.created')} {new Date(key.created_at).toLocaleDateString()}
{key.last_used
? ` - ${t('apiKeys.list.lastUsed')} ${new Date(key.last_used).toLocaleDateString()}`

19
src/components/settings/view/tabs/api-settings/sections/GithubCredentialsSection.tsx
View File

@@ -1,7 +1,6 @@
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 { Button, Input } from '../../../../../../shared/view/ui';
import type { GithubCredentialItem } from '../types';
type GithubCredentialsSectionProps = {
@@ -43,21 +42,21 @@ export default function GithubCredentialsSection({
return (
<div>
<div className="flex items-center justify-between mb-4">
<div className="mb-4 flex items-center justify-between">
<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" />
<Plus className="mr-1 h-4 w-4" />
{t('apiKeys.github.addButton')}
</Button>
</div>
<p className="text-sm text-muted-foreground mb-4">{t('apiKeys.github.descriptionAlt')}</p>
<p className="mb-4 text-sm text-muted-foreground">{t('apiKeys.github.descriptionAlt')}</p>
{showNewGithubForm && (
<div className="mb-4 p-4 border rounded-lg bg-card space-y-3">
<div className="mb-4 space-y-3 rounded-lg border bg-card p-4">
<Input
placeholder={t('apiKeys.github.form.namePlaceholder')}
value={newGithubName}
@@ -99,7 +98,7 @@ export default function GithubCredentialsSection({
href="https://github.com/settings/tokens"
target="_blank"
rel="noopener noreferrer"
className="text-xs text-primary hover:underline block"
className="block text-xs text-primary hover:underline"
>
{t('apiKeys.github.form.howToCreate')}
</a>
@@ -108,16 +107,16 @@ export default function GithubCredentialsSection({
<div className="space-y-2">
{githubCredentials.length === 0 ? (
<p className="text-sm text-muted-foreground italic">{t('apiKeys.github.empty')}</p>
<p className="text-sm italic text-muted-foreground">{t('apiKeys.github.empty')}</p>
) : (
githubCredentials.map((credential) => (
<div key={credential.id} className="flex items-center justify-between p-3 border rounded-lg">
<div key={credential.id} className="flex items-center justify-between rounded-lg border p-3">
<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">
<div className="mt-1 text-xs text-muted-foreground">
{t('apiKeys.github.added')} {new Date(credential.created_at).toLocaleDateString()}
</div>
</div>

10
src/components/settings/view/tabs/api-settings/sections/NewApiKeyAlert.tsx
View File

@@ -1,6 +1,6 @@
import { Check, Copy } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Button } from '../../../../../ui/button';
import { Button } from '../../../../../../shared/view/ui';
import type { CreatedApiKey } from '../types';
type NewApiKeyAlertProps = {
@@ -19,11 +19,11 @@ export default function NewApiKeyAlert({
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="rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-4">
<h4 className="mb-2 font-semibold text-yellow-500">{t('apiKeys.newKey.alertTitle')}</h4>
<p className="mb-3 text-sm text-muted-foreground">{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">
<code className="flex-1 break-all rounded bg-background/50 px-3 py-2 font-mono text-sm">
{apiKey.apiKey}
</code>
<Button

6
src/components/settings/view/tabs/api-settings/sections/VersionInfoSection.tsx
View File

@@ -19,13 +19,13 @@ export default function VersionInfoSection({
const releasesUrl = releaseInfo?.htmlUrl || 'https://github.com/siteboon/claudecodeui/releases';
return (
<div className="pt-6 border-t border-border/50">
<div className="border-t border-border/50 pt-6">
<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"
className="transition-colors hover:text-muted-foreground"
>
v{currentVersion}
</a>
@@ -34,7 +34,7 @@ export default function VersionInfoSection({
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"
className="flex items-center gap-1.5 rounded-full bg-green-500/10 px-2 py-0.5 font-medium not-italic text-green-600 transition-colors hover:bg-green-500/20 dark:text-green-400"
>
<span className="text-[10px]">{t('apiKeys.version.updateAvailable', { version: latestVersion })}</span>
<ExternalLink className="h-2.5 w-2.5" />

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

@@ -1,8 +1,7 @@
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';
import { Button, Input } from '../../../../../shared/view/ui';
export default function GitSettingsTab() {
const { t } = useTranslation('settings');
@@ -20,16 +19,16 @@ export default function GitSettingsTab() {
return (
<div className="space-y-8">
<div>
<div className="flex items-center gap-2 mb-4">
<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>
<p className="text-sm text-muted-foreground mb-4">{t('git.description')}</p>
<p className="mb-4 text-sm text-muted-foreground">{t('git.description')}</p>
<div className="p-4 border rounded-lg bg-card space-y-3">
<div className="space-y-3 rounded-lg border bg-card p-4">
<div>
<label htmlFor="settings-git-name" className="block text-sm font-medium text-foreground mb-2">
<label htmlFor="settings-git-name" className="mb-2 block text-sm font-medium text-foreground">
{t('git.name.label')}
</label>
<Input
@@ -45,7 +44,7 @@ export default function GitSettingsTab() {
</div>
<div>
<label htmlFor="settings-git-email" className="block text-sm font-medium text-foreground mb-2">
<label htmlFor="settings-git-email" className="mb-2 block text-sm font-medium text-foreground">
{t('git.email.label')}
</label>
<Input
@@ -69,8 +68,8 @@ export default function GitSettingsTab() {
</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" />
<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>
)}

34
src/components/settings/view/tabs/tasks-settings/TasksSettingsTab.tsx
View File

@@ -20,30 +20,30 @@ export default function TasksSettingsTab() {
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="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
<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" />
<div className="h-5 w-5 animate-spin rounded-full border-2 border-blue-600 border-t-transparent" />
<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="rounded-lg border border-orange-200 bg-orange-50 p-4 dark:border-orange-800 dark:bg-orange-950/50">
<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">
<div className="mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-orange-100 dark:bg-orange-900">
<svg className="h-4 w-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">
<div className="mb-2 font-medium text-orange-900 dark:text-orange-100">
{t('tasks.notInstalled.title')}
</div>
<div className="text-sm text-orange-800 dark:text-orange-200 space-y-3">
<div className="space-y-3 text-sm text-orange-800 dark:text-orange-200">
<p>{t('tasks.notInstalled.description')}</p>
<div className="bg-orange-100 dark:bg-orange-900/50 rounded-lg p-3 font-mono text-sm">
<div className="rounded-lg bg-orange-100 p-3 font-mono text-sm dark:bg-orange-900/50">
<code>{t('tasks.notInstalled.installCommand')}</code>
</div>
@@ -52,13 +52,13 @@ export default function TasksSettingsTab() {
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"
className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
>
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<svg className="h-4 w-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">
<svg className="h-3 w-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>
@@ -66,7 +66,7 @@ export default function TasksSettingsTab() {
<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">
<ol className="list-inside list-decimal 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>
@@ -80,20 +80,20 @@ export default function TasksSettingsTab() {
{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="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/50">
<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 className="mt-1 text-sm text-muted-foreground">{t('tasks.settings.enableDescription')}</div>
</div>
<label className="relative inline-flex items-center cursor-pointer">
<label className="relative inline-flex cursor-pointer items-center">
<input
type="checkbox"
checked={tasksEnabled}
onChange={(event) => setTasksEnabled(event.target.checked)}
className="sr-only peer"
className="peer sr-only"
/>
<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" />
<div className="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800" />
</label>
</div>
</div>