diff options
| author | adamelmore <[email protected]> | 2026-01-25 17:05:24 -0600 |
|---|---|---|
| committer | Adam <[email protected]> | 2026-01-25 20:40:00 -0600 |
| commit | c323d96deb3f1d98bc62160f4e954aad1a807253 (patch) | |
| tree | 7b2e1c7f4d92f55ac2e23e34ef42c7e67511a452 /packages/app/src/components | |
| parent | 03d884797c19e7cbe92d7ef237c4b28d51b58f18 (diff) | |
| download | opencode-c323d96deb3f1d98bc62160f4e954aad1a807253.tar.gz opencode-c323d96deb3f1d98bc62160f4e954aad1a807253.zip | |
wip(app): provider settings
Diffstat (limited to 'packages/app/src/components')
| -rw-r--r-- | packages/app/src/components/settings-providers.tsx | 36 |
1 files changed, 20 insertions, 16 deletions
diff --git a/packages/app/src/components/settings-providers.tsx b/packages/app/src/components/settings-providers.tsx index b175a570b..4d842037f 100644 --- a/packages/app/src/components/settings-providers.tsx +++ b/packages/app/src/components/settings-providers.tsx @@ -22,13 +22,28 @@ export const SettingsProviders: Component = () => { const connected = createMemo(() => providers.connected()) const popular = createMemo(() => { - const items = providers.popular().slice() + const connectedIDs = new Set(connected().map((p) => p.id)) + const items = providers + .popular() + .filter((p) => !connectedIDs.has(p.id)) + .slice() items.sort((a, b) => popularProviders.indexOf(a.id) - popularProviders.indexOf(b.id)) return items }) const source = (item: unknown) => (item as ProviderMeta).source + const type = (item: unknown) => { + const current = source(item) + if (current === "env") return language.t("settings.providers.tag.environment") + if (current === "api") return language.t("provider.connect.method.apiKey") + if (current === "config") return language.t("settings.providers.tag.config") + if (current === "custom") return language.t("settings.providers.tag.custom") + return language.t("settings.providers.tag.other") + } + + const canDisconnect = (item: unknown) => source(item) !== "env" + const disconnect = async (providerID: string, name: string) => { await globalSDK.client.auth .remove({ providerID }) @@ -48,14 +63,8 @@ export const SettingsProviders: Component = () => { } return ( - <div class="flex flex-col h-full overflow-y-auto no-scrollbar" style={{ padding: "0 40px 40px 40px" }}> - <div - class="sticky top-0 z-10" - style={{ - background: - "linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha) calc(100% - 24px), transparent)", - }} - > + <div class="flex flex-col h-full overflow-y-auto px-10 pb-10 no-scrollbar"> + <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-raised-stronger-non-alpha)_calc(100%_-_24px),transparent)]"> <div class="flex flex-col gap-4 pt-6 pb-6 max-w-[720px]"> <div class="flex items-center justify-between gap-4"> <h2 class="text-16-medium text-text-strong">{language.t("settings.providers.title")}</h2> @@ -81,14 +90,9 @@ export const SettingsProviders: Component = () => { <div class="flex items-center gap-3 min-w-0"> <ProviderIcon id={item.id as IconName} class="size-5 shrink-0 icon-strong-base" /> <span class="text-14-regular text-text-strong truncate">{item.name}</span> - <Show when={source(item) === "env"}> - <Tag>{language.t("settings.providers.tag.environment")}</Tag> - </Show> - <Show when={source(item) === "api"}> - <Tag>{language.t("provider.connect.method.apiKey")}</Tag> - </Show> + <Tag>{type(item)}</Tag> </div> - <Show when={source(item) === "api"}> + <Show when={canDisconnect(item)}> <Button size="small" variant="ghost" onClick={() => void disconnect(item.id, item.name)}> {language.t("common.disconnect")} </Button> |