mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-05-30 16:35:34 +08:00
refactor: new settings page design and new pill component
This commit is contained in:
simosmik
@@ -1,4 +1,5 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { cn } from '../../../../../../lib/utils';
|
||||
import type { AgentCategory } from '../../../../types/types';
|
||||
import type { AgentCategoryTabsSectionProps } from '../types';
|
||||
|
||||
@@ -11,7 +12,7 @@ export default function AgentCategoryTabsSection({
|
||||
const { t } = useTranslation('settings');
|
||||
|
||||
return (
|
||||
<div className="flex-shrink-0 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex-shrink-0 border-b border-border">
|
||||
<div role="tablist" className="flex overflow-x-auto px-2 md:px-4">
|
||||
{AGENT_CATEGORIES.map((category) => (
|
||||
<button
|
||||
@@ -19,11 +20,12 @@ export default function AgentCategoryTabsSection({
|
||||
role="tab"
|
||||
aria-selected={selectedCategory === category}
|
||||
onClick={() => onSelectCategory(category)}
|
||||
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 ${
|
||||
className={cn(
|
||||
'whitespace-nowrap border-b-2 px-4 py-3 text-sm font-medium touch-manipulation transition-colors duration-150',
|
||||
selectedCategory === category
|
||||
? 'border-blue-600 text-blue-600 dark:text-blue-400'
|
||||
: 'border-transparent text-muted-foreground hover:text-foreground'
|
||||
}`}
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
{category === 'account' && t('tabs.account')}
|
||||
{category === 'permissions' && t('tabs.permissions')}
|
||||
|
||||
@@ -1,8 +1,16 @@
|
||||
import { PillBar, Pill } from '../../../../../../shared/view/ui';
|
||||
import SessionProviderLogo from '../../../../../llm-logo-provider/SessionProviderLogo';
|
||||
import type { AgentProvider } from '../../../../types/types';
|
||||
import AgentListItem from '../AgentListItem';
|
||||
import type { AgentSelectorSectionProps } from '../types';
|
||||
|
||||
const AGENT_PROVIDERS: AgentProvider[] = ['claude', 'cursor', 'codex'];
|
||||
const AGENT_PROVIDERS: AgentProvider[] = ['claude', 'cursor', 'codex', 'gemini'];
|
||||
|
||||
const AGENT_NAMES: Record<AgentProvider, string> = {
|
||||
claude: 'Claude',
|
||||
cursor: 'Cursor',
|
||||
codex: 'Codex',
|
||||
gemini: 'Gemini',
|
||||
};
|
||||
|
||||
export default function AgentSelectorSection({
|
||||
selectedAgent,
|
||||
@@ -10,35 +18,30 @@ export default function AgentSelectorSection({
|
||||
agentContextById,
|
||||
}: AgentSelectorSectionProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="flex-shrink-0 border-b border-gray-200 dark:border-gray-700 md:hidden">
|
||||
<div className="flex">
|
||||
{AGENT_PROVIDERS.map((agent) => (
|
||||
<AgentListItem
|
||||
key={`mobile-${agent}`}
|
||||
agentId={agent}
|
||||
authStatus={agentContextById[agent].authStatus}
|
||||
isSelected={selectedAgent === agent}
|
||||
onClick={() => onSelectAgent(agent)}
|
||||
isMobile
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 border-b border-border px-3 py-2 md:px-4 md:py-3">
|
||||
<PillBar className="w-full md:w-auto">
|
||||
{AGENT_PROVIDERS.map((agent) => {
|
||||
const dotColor =
|
||||
agent === 'claude' ? 'bg-blue-500' :
|
||||
agent === 'cursor' ? 'bg-purple-500' :
|
||||
agent === 'gemini' ? 'bg-indigo-500' : 'bg-foreground/60';
|
||||
|
||||
<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
|
||||
key={`desktop-${agent}`}
|
||||
agentId={agent}
|
||||
authStatus={agentContextById[agent].authStatus}
|
||||
isSelected={selectedAgent === agent}
|
||||
return (
|
||||
<Pill
|
||||
key={agent}
|
||||
isActive={selectedAgent === agent}
|
||||
onClick={() => onSelectAgent(agent)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
className="min-w-0 flex-1 justify-center md:flex-initial"
|
||||
>
|
||||
<SessionProviderLogo provider={agent} className="h-4 w-4 flex-shrink-0" />
|
||||
<span className="truncate">{AGENT_NAMES[agent]}</span>
|
||||
{agentContextById[agent].authStatus.authenticated && (
|
||||
<span className={`h-1.5 w-1.5 flex-shrink-0 rounded-full ${dotColor}`} />
|
||||
)}
|
||||
</Pill>
|
||||
);
|
||||
})}
|
||||
</PillBar>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ const agentConfig: Record<AgentProvider, AgentVisualConfig> = {
|
||||
borderClass: 'border-blue-200 dark:border-blue-800',
|
||||
textClass: 'text-blue-900 dark:text-blue-100',
|
||||
subtextClass: 'text-blue-700 dark:text-blue-300',
|
||||
buttonClass: 'bg-blue-600 hover:bg-blue-700',
|
||||
buttonClass: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-800',
|
||||
},
|
||||
cursor: {
|
||||
name: 'Cursor',
|
||||
@@ -35,15 +35,15 @@ const agentConfig: Record<AgentProvider, AgentVisualConfig> = {
|
||||
borderClass: 'border-purple-200 dark:border-purple-800',
|
||||
textClass: 'text-purple-900 dark:text-purple-100',
|
||||
subtextClass: 'text-purple-700 dark:text-purple-300',
|
||||
buttonClass: 'bg-purple-600 hover:bg-purple-700',
|
||||
buttonClass: 'bg-purple-600 hover:bg-purple-700 active:bg-purple-800',
|
||||
},
|
||||
codex: {
|
||||
name: 'Codex',
|
||||
bgClass: 'bg-gray-100 dark:bg-gray-800/50',
|
||||
bgClass: 'bg-muted/50',
|
||||
borderClass: 'border-gray-300 dark:border-gray-600',
|
||||
textClass: 'text-gray-900 dark:text-gray-100',
|
||||
subtextClass: 'text-gray-700 dark:text-gray-300',
|
||||
buttonClass: 'bg-gray-800 hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-600',
|
||||
buttonClass: 'bg-gray-800 hover:bg-gray-900 active:bg-gray-950 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-500',
|
||||
},
|
||||
gemini: {
|
||||
name: 'Gemini',
|
||||
@@ -52,7 +52,7 @@ const agentConfig: Record<AgentProvider, AgentVisualConfig> = {
|
||||
borderClass: 'border-indigo-200 dark:border-indigo-800',
|
||||
textClass: 'text-indigo-900 dark:text-indigo-100',
|
||||
subtextClass: 'text-indigo-700 dark:text-indigo-300',
|
||||
buttonClass: 'bg-indigo-600 hover:bg-indigo-700',
|
||||
buttonClass: 'bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -91,7 +91,7 @@ export default function AccountContent({ agent, authStatus, onLogin }: AccountCo
|
||||
</div>
|
||||
<div>
|
||||
{authStatus.loading ? (
|
||||
<Badge variant="secondary" className="bg-gray-100 dark:bg-gray-800">
|
||||
<Badge variant="secondary" className="bg-muted">
|
||||
{t('agents.authStatus.checking')}
|
||||
</Badge>
|
||||
) : authStatus.authenticated ? (
|
||||
@@ -107,7 +107,7 @@ export default function AccountContent({ agent, authStatus, onLogin }: AccountCo
|
||||
</div>
|
||||
|
||||
{authStatus.method !== 'api_key' && (
|
||||
<div className="border-t border-gray-200 pt-4 dark:border-gray-700">
|
||||
<div className="border-t border-border/50 pt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className={`font-medium ${config.textClass}`}>
|
||||
@@ -132,7 +132,7 @@ export default function AccountContent({ agent, authStatus, onLogin }: AccountCo
|
||||
)}
|
||||
|
||||
{authStatus.error && (
|
||||
<div className="border-t border-gray-200 pt-4 dark:border-gray-700">
|
||||
<div className="border-t border-border/50 pt-4">
|
||||
<div className="text-sm text-red-600 dark:text-red-400">
|
||||
{t('agents.error', { error: authStatus.error })}
|
||||
</div>
|
||||
|
||||
@@ -80,7 +80,7 @@ function ClaudeMcpServers({
|
||||
const toolsResult = serverTools[serverId];
|
||||
|
||||
return (
|
||||
<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 key={serverId} className="rounded-lg border border-border bg-card/50 p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
@@ -102,19 +102,19 @@ function ClaudeMcpServers({
|
||||
{server.type === 'stdio' && server.config?.command && (
|
||||
<div>
|
||||
{t('mcpServers.config.command')}:{' '}
|
||||
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">{server.config.command}</code>
|
||||
<code className="rounded bg-muted px-1 text-xs">{server.config.command}</code>
|
||||
</div>
|
||||
)}
|
||||
{(server.type === 'sse' || server.type === 'http') && server.config?.url && (
|
||||
<div>
|
||||
{t('mcpServers.config.url')}:{' '}
|
||||
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">{server.config.url}</code>
|
||||
<code className="rounded bg-muted px-1 text-xs">{server.config.url}</code>
|
||||
</div>
|
||||
)}
|
||||
{server.config?.args && server.config.args.length > 0 && (
|
||||
<div>
|
||||
{t('mcpServers.config.args')}:{' '}
|
||||
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">{server.config.args.join(' ')}</code>
|
||||
<code className="rounded bg-muted px-1 text-xs">{server.config.args.join(' ')}</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -156,7 +156,7 @@ function ClaudeMcpServers({
|
||||
onClick={() => onEdit(server)}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-600 hover:text-gray-700"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
title={t('mcpServers.actions.edit')}
|
||||
>
|
||||
<Edit3 className="h-4 w-4" />
|
||||
@@ -176,7 +176,7 @@ function ClaudeMcpServers({
|
||||
);
|
||||
})}
|
||||
{servers.length === 0 && (
|
||||
<div className="py-8 text-center text-gray-500 dark:text-gray-400">{t('mcpServers.empty')}</div>
|
||||
<div className="py-8 text-center text-muted-foreground">{t('mcpServers.empty')}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -214,7 +214,7 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }: Omit<CursorMcpSe
|
||||
const serverId = server.id || server.name;
|
||||
|
||||
return (
|
||||
<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 key={serverId} className="rounded-lg border border-border bg-card/50 p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
@@ -226,7 +226,7 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }: Omit<CursorMcpSe
|
||||
{server.config?.command && (
|
||||
<div>
|
||||
{t('mcpServers.config.command')}:{' '}
|
||||
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">{server.config.command}</code>
|
||||
<code className="rounded bg-muted px-1 text-xs">{server.config.command}</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -236,7 +236,7 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }: Omit<CursorMcpSe
|
||||
onClick={() => onEdit(server)}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-600 hover:text-gray-700"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
title={t('mcpServers.actions.edit')}
|
||||
>
|
||||
<Edit3 className="h-4 w-4" />
|
||||
@@ -256,7 +256,7 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }: Omit<CursorMcpSe
|
||||
);
|
||||
})}
|
||||
{servers.length === 0 && (
|
||||
<div className="py-8 text-center text-gray-500 dark:text-gray-400">{t('mcpServers.empty')}</div>
|
||||
<div className="py-8 text-center text-muted-foreground">{t('mcpServers.empty')}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -278,7 +278,7 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete, deleteError }: Omit
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Server className="h-5 w-5 text-gray-700 dark:text-gray-300" />
|
||||
<Server className="h-5 w-5 text-muted-foreground" />
|
||||
<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>
|
||||
@@ -297,7 +297,7 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete, deleteError }: Omit
|
||||
|
||||
<div className="space-y-2">
|
||||
{servers.map((server) => (
|
||||
<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 key={server.name} className="rounded-lg border border-border bg-card/50 p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
@@ -310,19 +310,19 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete, deleteError }: Omit
|
||||
{server.config?.command && (
|
||||
<div>
|
||||
{t('mcpServers.config.command')}:{' '}
|
||||
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">{server.config.command}</code>
|
||||
<code className="rounded bg-muted px-1 text-xs">{server.config.command}</code>
|
||||
</div>
|
||||
)}
|
||||
{server.config?.args && server.config.args.length > 0 && (
|
||||
<div>
|
||||
{t('mcpServers.config.args')}:{' '}
|
||||
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">{server.config.args.join(' ')}</code>
|
||||
<code className="rounded bg-muted px-1 text-xs">{server.config.args.join(' ')}</code>
|
||||
</div>
|
||||
)}
|
||||
{server.config?.env && Object.keys(server.config.env).length > 0 && (
|
||||
<div>
|
||||
{t('mcpServers.config.environment')}:{' '}
|
||||
<code className="rounded bg-gray-100 px-1 text-xs dark:bg-gray-800">
|
||||
<code className="rounded bg-muted px-1 text-xs">
|
||||
{Object.entries(server.config.env).map(([key, value]) => `${key}=${maskSecret(value)}`).join(', ')}
|
||||
</code>
|
||||
</div>
|
||||
@@ -335,7 +335,7 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete, deleteError }: Omit
|
||||
onClick={() => onEdit(server)}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-600 hover:text-gray-700"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
title={t('mcpServers.actions.edit')}
|
||||
>
|
||||
<Edit3 className="h-4 w-4" />
|
||||
@@ -354,13 +354,13 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete, deleteError }: Omit
|
||||
</div>
|
||||
))}
|
||||
{servers.length === 0 && (
|
||||
<div className="py-8 text-center text-gray-500 dark:text-gray-400">{t('mcpServers.empty')}</div>
|
||||
<div className="py-8 text-center text-muted-foreground">{t('mcpServers.empty')}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<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 className="rounded-lg border border-border bg-muted/50 p-4">
|
||||
<h4 className="mb-2 font-medium text-foreground">{t('mcpServers.help.title')}</h4>
|
||||
<p className="text-sm text-muted-foreground">{t('mcpServers.help.description')}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -104,7 +104,7 @@ function ClaudePermissions({
|
||||
type="checkbox"
|
||||
checked={skipPermissions}
|
||||
onChange={(event) => onSkipPermissionsChange(event.target.checked)}
|
||||
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"
|
||||
className="h-4 w-4 rounded border-input bg-card text-primary focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
<div>
|
||||
<div className="font-medium text-orange-900 dark:text-orange-100">
|
||||
@@ -150,7 +150,7 @@ function ClaudePermissions({
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
{t('permissions.allowedTools.quickAdd')}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
@@ -184,7 +184,7 @@ function ClaudePermissions({
|
||||
</div>
|
||||
))}
|
||||
{allowedTools.length === 0 && (
|
||||
<div className="py-6 text-center text-gray-500 dark:text-gray-400">
|
||||
<div className="py-6 text-center text-muted-foreground">
|
||||
{t('permissions.allowedTools.empty')}
|
||||
</div>
|
||||
)}
|
||||
@@ -237,7 +237,7 @@ function ClaudePermissions({
|
||||
</div>
|
||||
))}
|
||||
{disallowedTools.length === 0 && (
|
||||
<div className="py-6 text-center text-gray-500 dark:text-gray-400">
|
||||
<div className="py-6 text-center text-muted-foreground">
|
||||
{t('permissions.blockedTools.empty')}
|
||||
</div>
|
||||
)}
|
||||
@@ -314,7 +314,7 @@ function CursorPermissions({
|
||||
type="checkbox"
|
||||
checked={skipPermissions}
|
||||
onChange={(event) => onSkipPermissionsChange(event.target.checked)}
|
||||
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"
|
||||
className="h-4 w-4 rounded border-input bg-card text-primary focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
<div>
|
||||
<div className="font-medium text-orange-900 dark:text-orange-100">
|
||||
@@ -360,7 +360,7 @@ function CursorPermissions({
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
<p className="text-sm font-medium text-muted-foreground">
|
||||
{t('permissions.allowedCommands.quickAdd')}
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
@@ -394,7 +394,7 @@ function CursorPermissions({
|
||||
</div>
|
||||
))}
|
||||
{allowedCommands.length === 0 && (
|
||||
<div className="py-6 text-center text-gray-500 dark:text-gray-400">
|
||||
<div className="py-6 text-center text-muted-foreground">
|
||||
{t('permissions.allowedCommands.empty')}
|
||||
</div>
|
||||
)}
|
||||
@@ -447,7 +447,7 @@ function CursorPermissions({
|
||||
</div>
|
||||
))}
|
||||
{disallowedCommands.length === 0 && (
|
||||
<div className="py-6 text-center text-gray-500 dark:text-gray-400">
|
||||
<div className="py-6 text-center text-muted-foreground">
|
||||
{t('permissions.blockedCommands.empty')}
|
||||
</div>
|
||||
)}
|
||||
@@ -489,8 +489,8 @@ function CodexPermissions({ permissionMode, onPermissionModeChange }: Omit<Codex
|
||||
|
||||
<div
|
||||
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'
|
||||
? 'border-border bg-accent'
|
||||
: 'border-border bg-card/50 active:border-border active:bg-accent/50'
|
||||
}`}
|
||||
onClick={() => onPermissionModeChange('default')}
|
||||
>
|
||||
@@ -514,7 +514,7 @@ function CodexPermissions({ permissionMode, onPermissionModeChange }: Omit<Codex
|
||||
<div
|
||||
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'
|
||||
: 'border-border bg-card/50 active:border-border active:bg-accent/50'
|
||||
}`}
|
||||
onClick={() => onPermissionModeChange('acceptEdits')}
|
||||
>
|
||||
@@ -538,7 +538,7 @@ function CodexPermissions({ permissionMode, onPermissionModeChange }: Omit<Codex
|
||||
<div
|
||||
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'
|
||||
: 'border-border bg-card/50 active:border-border active:bg-accent/50'
|
||||
}`}
|
||||
onClick={() => onPermissionModeChange('bypassPermissions')}
|
||||
>
|
||||
@@ -566,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 space-y-2 rounded-lg bg-gray-50 p-3 text-xs text-muted-foreground dark:bg-gray-900/50">
|
||||
<div className="mt-2 space-y-2 rounded-lg bg-muted/50 p-3 text-xs text-muted-foreground">
|
||||
<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>
|
||||
@@ -603,8 +603,8 @@ function GeminiPermissions({ permissionMode, onPermissionModeChange }: Omit<Gemi
|
||||
{/* Default Mode */}
|
||||
<div
|
||||
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'
|
||||
? 'border-border bg-accent'
|
||||
: 'border-border bg-card/50 active:border-border active:bg-accent/50'
|
||||
}`}
|
||||
onClick={() => onPermissionModeChange('default')}
|
||||
>
|
||||
@@ -629,7 +629,7 @@ function GeminiPermissions({ permissionMode, onPermissionModeChange }: Omit<Gemi
|
||||
<div
|
||||
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'
|
||||
: 'border-border bg-card/50 active:border-border active:bg-accent/50'
|
||||
}`}
|
||||
onClick={() => onPermissionModeChange('auto_edit')}
|
||||
>
|
||||
@@ -654,7 +654,7 @@ function GeminiPermissions({ permissionMode, onPermissionModeChange }: Omit<Gemi
|
||||
<div
|
||||
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'
|
||||
: 'border-border bg-card/50 active:border-border active:bg-accent/50'
|
||||
}`}
|
||||
onClick={() => onPermissionModeChange('yolo')}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user