diff --git a/public/third-party/claude-dark.svg b/public/third-party/claude-dark.svg new file mode 100644 index 000000000..ec82d3706 --- /dev/null +++ b/public/third-party/claude-dark.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/third-party/claude-light.svg b/public/third-party/claude-light.svg new file mode 100644 index 000000000..507ef1783 --- /dev/null +++ b/public/third-party/claude-light.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/third-party/cursor-dark.svg b/public/third-party/cursor-dark.svg new file mode 100644 index 000000000..635d3ccdc --- /dev/null +++ b/public/third-party/cursor-dark.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/public/third-party/cursor-light.svg b/public/third-party/cursor-light.svg new file mode 100644 index 000000000..10d50ca84 --- /dev/null +++ b/public/third-party/cursor-light.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/public/third-party/openai-dark.svg b/public/third-party/openai-dark.svg new file mode 100644 index 000000000..a3c140dde --- /dev/null +++ b/public/third-party/openai-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/third-party/openai-light.svg b/public/third-party/openai-light.svg new file mode 100644 index 000000000..bf8010d30 --- /dev/null +++ b/public/third-party/openai-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/third-party/opencode-dark.svg b/public/third-party/opencode-dark.svg new file mode 100644 index 000000000..b79140a50 --- /dev/null +++ b/public/third-party/opencode-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/third-party/opencode-light.svg b/public/third-party/opencode-light.svg new file mode 100644 index 000000000..b79c7332e --- /dev/null +++ b/public/third-party/opencode-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/ai-client-config/AiClientConfigCard.tsx b/src/components/ai-client-config/AiClientConfigCard.tsx index 3ef196aa8..709e7ac33 100644 --- a/src/components/ai-client-config/AiClientConfigCard.tsx +++ b/src/components/ai-client-config/AiClientConfigCard.tsx @@ -27,9 +27,11 @@ import type { } from "@app/lib/aiClientConfig"; import { buildAiClientGuide } from "@app/lib/aiClientConfig"; import { cn } from "@app/lib/cn"; -import { ChevronDown, Loader2, type LucideIcon } from "lucide-react"; +import { ChevronDown, Loader2 } from "lucide-react"; +import { useTheme } from "next-themes"; +import Image from "next/image"; import { useTranslations } from "next-intl"; -import { useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; type AiClientConfigCardProps = { clientId: AiClientId; @@ -37,7 +39,7 @@ type AiClientConfigCardProps = { endpoint: string; keyAuth: AiClientAuthInput; description: string; - icon: LucideIcon; + iconSrc: { light: string; dark: string }; }; export function AiClientConfigCard({ @@ -46,15 +48,30 @@ export function AiClientConfigCard({ endpoint, keyAuth, description, - icon: Icon + iconSrc }: AiClientConfigCardProps) { const t = useTranslations(); + const { theme } = useTheme(); + const [resolvedIconSrc, setResolvedIconSrc] = useState(iconSrc.light); const [open, setOpen] = useState(false); const [presetId, setPresetId] = useState("default"); const [revealedKey, setRevealedKey] = useState(null); const [revealing, setRevealing] = useState(false); const [revealError, setRevealError] = useState(false); + useEffect(() => { + let lightOrDark = theme; + if (theme === "system" || !theme) { + lightOrDark = window.matchMedia("(prefers-color-scheme: dark)") + .matches + ? "dark" + : "light"; + } + setResolvedIconSrc( + lightOrDark === "dark" ? iconSrc.dark : iconSrc.light + ); + }, [theme, iconSrc]); + const reveal = () => { if (keyAuth.mode !== "keyed" || revealedKey !== null || revealing) { return; @@ -127,7 +144,13 @@ export function AiClientConfigCard({ className="min-w-0 rounded-md border bg-card" > - + {name}

{name}

diff --git a/src/components/ai-client-config/AiClientConfigSection.tsx b/src/components/ai-client-config/AiClientConfigSection.tsx index a419abe27..5998bf615 100644 --- a/src/components/ai-client-config/AiClientConfigSection.tsx +++ b/src/components/ai-client-config/AiClientConfigSection.tsx @@ -14,7 +14,6 @@ import { type AiClientAuthInput } from "@app/lib/aiClientConfig"; import { cn } from "@app/lib/cn"; -import { MousePointerClick, Sparkles, SquareTerminal, TerminalSquare } from "lucide-react"; import { useTranslations } from "next-intl"; type AiClientConfigSectionProps = { @@ -30,11 +29,25 @@ type AiClientConfigSectionProps = { className?: string; }; -const CLIENT_ICONS = { - claude: Sparkles, - codex: TerminalSquare, - opencode: SquareTerminal, - cursor: MousePointerClick +// Each logo file is named for its own color, not the theme it belongs on, so +// the light-colored "-light" asset is what we show in dark mode and vice versa. +const CLIENT_LOGOS = { + claude: { + light: "/third-party/claude-dark.svg", + dark: "/third-party/claude-light.svg" + }, + codex: { + light: "/third-party/openai-dark.svg", + dark: "/third-party/openai-light.svg" + }, + opencode: { + light: "/third-party/opencode-dark.svg", + dark: "/third-party/opencode-light.svg" + }, + cursor: { + light: "/third-party/cursor-dark.svg", + dark: "/third-party/cursor-light.svg" + } } as const; export function AiClientConfigSection({ @@ -79,7 +92,7 @@ export function AiClientConfigSection({ endpoint={endpoint} keyAuth={auth} description={descriptions[clientId]} - icon={CLIENT_ICONS[clientId]} + iconSrc={CLIENT_LOGOS[clientId]} /> ))}