diff --git a/src/assets/icons/codex_drak.svg b/src/assets/icons/codex_drak.svg new file mode 100644 index 0000000..ca9cd39 --- /dev/null +++ b/src/assets/icons/codex_drak.svg @@ -0,0 +1,25 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/codex_light.svg b/src/assets/icons/codex_light.svg new file mode 100644 index 0000000..eca43ab --- /dev/null +++ b/src/assets/icons/codex_light.svg @@ -0,0 +1,25 @@ + + + + + + + + + + diff --git a/src/assets/icons/kimi-dark.svg b/src/assets/icons/kimi-dark.svg index ec5db53..373ae9a 100644 --- a/src/assets/icons/kimi-dark.svg +++ b/src/assets/icons/kimi-dark.svg @@ -1 +1 @@ -Kimi \ No newline at end of file +Kimi \ No newline at end of file diff --git a/src/components/providers/CodexSection/CodexSection.tsx b/src/components/providers/CodexSection/CodexSection.tsx index f89cc83..f60865c 100644 --- a/src/components/providers/CodexSection/CodexSection.tsx +++ b/src/components/providers/CodexSection/CodexSection.tsx @@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next'; import { Button } from '@/components/ui/Button'; import { Card } from '@/components/ui/Card'; import { ToggleSwitch } from '@/components/ui/ToggleSwitch'; -import iconOpenaiLight from '@/assets/icons/openai-light.svg'; -import iconOpenaiDark from '@/assets/icons/openai-dark.svg'; +import iconCodexLight from '@/assets/icons/codex_light.svg'; +import iconCodexDark from '@/assets/icons/codex_drak.svg'; import type { ProviderKeyConfig } from '@/types'; import { maskApiKey } from '@/utils/format'; import { @@ -73,7 +73,7 @@ export function CodexSection({ title={ diff --git a/src/components/providers/ProviderNav/ProviderNav.tsx b/src/components/providers/ProviderNav/ProviderNav.tsx index ef4ef3e..568b8b3 100644 --- a/src/components/providers/ProviderNav/ProviderNav.tsx +++ b/src/components/providers/ProviderNav/ProviderNav.tsx @@ -4,6 +4,8 @@ import { useThemeStore } from '@/stores'; import iconGemini from '@/assets/icons/gemini.svg'; import iconOpenaiLight from '@/assets/icons/openai-light.svg'; import iconOpenaiDark from '@/assets/icons/openai-dark.svg'; +import iconCodexLight from '@/assets/icons/codex_light.svg'; +import iconCodexDark from '@/assets/icons/codex_drak.svg'; import iconClaude from '@/assets/icons/claude.svg'; import iconVertex from '@/assets/icons/vertex.svg'; import iconAmp from '@/assets/icons/amp.svg'; @@ -19,7 +21,7 @@ interface ProviderNavItem { const PROVIDERS: ProviderNavItem[] = [ { id: 'gemini', label: 'Gemini', getIcon: () => iconGemini }, - { id: 'codex', label: 'Codex', getIcon: (theme) => (theme === 'dark' ? iconOpenaiDark : iconOpenaiLight) }, + { id: 'codex', label: 'Codex', getIcon: (theme) => (theme === 'dark' ? iconCodexDark : iconCodexLight) }, { id: 'claude', label: 'Claude', getIcon: () => iconClaude }, { id: 'vertex', label: 'Vertex', getIcon: () => iconVertex }, { id: 'ampcode', label: 'Ampcode', getIcon: () => iconAmp }, @@ -46,6 +48,7 @@ export function ProviderNav() { const triggerPoint = containerRect.top + containerRect.height * 0.3; let currentActive: ProviderId | null = null; + let closestAbove: { id: ProviderId; top: number } | null = null; for (const provider of PROVIDERS) { const element = document.getElementById(`provider-${provider.id}`); @@ -54,13 +57,27 @@ export function ProviderNav() { const elementTop = rect.top; const elementBottom = rect.bottom; + // Check if triggerPoint is within this element's bounds if (triggerPoint >= elementTop && triggerPoint < elementBottom) { currentActive = provider.id; break; } + + // Track the element whose top is closest to (but not exceeding) triggerPoint + // This handles short cards where triggerPoint may have passed the bottom + if (elementTop <= triggerPoint) { + if (!closestAbove || elementTop > closestAbove.top) { + closestAbove = { id: provider.id, top: elementTop }; + } + } } } + // If no element contains triggerPoint, use the closest one above it + if (!currentActive && closestAbove) { + currentActive = closestAbove.id; + } + setActiveProvider(currentActive); }, [getScrollContainer]); diff --git a/src/pages/OAuthPage.tsx b/src/pages/OAuthPage.tsx index d4aae80..066a4b6 100644 --- a/src/pages/OAuthPage.tsx +++ b/src/pages/OAuthPage.tsx @@ -7,8 +7,8 @@ import { useNotificationStore, useThemeStore } from '@/stores'; import { oauthApi, type OAuthProvider, type IFlowCookieAuthResponse } from '@/services/api/oauth'; import { vertexApi, type VertexImportResponse } from '@/services/api/vertex'; import styles from './OAuthPage.module.scss'; -import iconOpenaiLight from '@/assets/icons/openai-light.svg'; -import iconOpenaiDark from '@/assets/icons/openai-dark.svg'; +import iconCodexLight from '@/assets/icons/codex_light.svg'; +import iconCodexDark from '@/assets/icons/codex_drak.svg'; import iconClaude from '@/assets/icons/claude.svg'; import iconAntigravity from '@/assets/icons/antigravity.svg'; import iconGemini from '@/assets/icons/gemini.svg'; @@ -55,7 +55,7 @@ interface VertexImportState { } const PROVIDERS: { id: OAuthProvider; titleKey: string; hintKey: string; urlLabelKey: string; icon: string | { light: string; dark: string } }[] = [ - { id: 'codex', titleKey: 'auth_login.codex_oauth_title', hintKey: 'auth_login.codex_oauth_hint', urlLabelKey: 'auth_login.codex_oauth_url_label', icon: { light: iconOpenaiLight, dark: iconOpenaiDark } }, + { id: 'codex', titleKey: 'auth_login.codex_oauth_title', hintKey: 'auth_login.codex_oauth_hint', urlLabelKey: 'auth_login.codex_oauth_url_label', icon: { light: iconCodexLight, dark: iconCodexDark } }, { id: 'anthropic', titleKey: 'auth_login.anthropic_oauth_title', hintKey: 'auth_login.anthropic_oauth_hint', urlLabelKey: 'auth_login.anthropic_oauth_url_label', icon: iconClaude }, { id: 'antigravity', titleKey: 'auth_login.antigravity_oauth_title', hintKey: 'auth_login.antigravity_oauth_hint', urlLabelKey: 'auth_login.antigravity_oauth_url_label', icon: iconAntigravity }, { id: 'gemini-cli', titleKey: 'auth_login.gemini_cli_oauth_title', hintKey: 'auth_login.gemini_cli_oauth_hint', urlLabelKey: 'auth_login.gemini_cli_oauth_url_label', icon: iconGemini },