diff --git a/packages/app/src/components/settings-v2/models.tsx b/packages/app/src/components/settings-v2/models.tsx index a3f058670e..482e8cbffb 100644 --- a/packages/app/src/components/settings-v2/models.tsx +++ b/packages/app/src/components/settings-v2/models.tsx @@ -5,9 +5,12 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon" import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2" import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2" import { type Component, For, Show } from "solid-js" +import { createStore } from "solid-js/store" import { useLanguage } from "@/context/language" import { useModels } from "@/context/models" +import { useServerSDK } from "@/context/server-sdk" import { popularProviders } from "@/hooks/use-providers" +import { Persist, persisted } from "@/utils/persist" import { SettingsListV2 } from "./parts/list" import { SettingsRowV2 } from "./parts/row" import "./settings-v2.css" @@ -19,6 +22,11 @@ const PROVIDER_ICON_SIZE = 16 export const SettingsModelsV2: Component = () => { const language = useLanguage() const models = useModels() + const serverSdk = useServerSDK() + const [store, setStore] = persisted( + Persist.serverGlobal(serverSdk().scope, "settings-v2.models.providers"), + createStore({ collapsed: {} as Record }), + ) const list = useFilteredList({ items: (_filter) => models.list(), @@ -94,41 +102,82 @@ export const SettingsModelsV2: Component = () => { } > - {(group) => ( -
-
- -

{group.items[0].provider.name}

+ {(group) => { + const searching = () => list.filter().length > 0 + const expanded = () => searching() || !store.collapsed[group.category] + + return ( +
+

+ +

+ + + + {(item) => { + const key = { providerID: item.provider.id, modelID: item.id } + return ( + +
+ { + models.setVisibility(key, checked) + }} + hideLabel + > + {item.name} + +
+
+ ) + }} +
+
+
- - - {(item) => { - const key = { providerID: item.provider.id, modelID: item.id } - return ( - -
- { - models.setVisibility(key, checked) - }} - hideLabel - > - {item.name} - -
-
- ) - }} -
-
-
- )} + ) + }} diff --git a/packages/app/src/components/settings-v2/settings-v2.css b/packages/app/src/components/settings-v2/settings-v2.css index 64a55ea3f4..29540a9a4a 100644 --- a/packages/app/src/components/settings-v2/settings-v2.css +++ b/packages/app/src/components/settings-v2/settings-v2.css @@ -373,14 +373,65 @@ } .settings-v2-models { - gap: 24px; + gap: 12px; +} + +.settings-v2-models .settings-v2-section { + gap: 12px; +} + +.settings-v2-models .settings-v2-section[data-expanded] { + padding-bottom: 12px; } .settings-v2-models-group-header { + display: flex; + align-items: center; + height: 28px; +} + +.settings-v2-models-group-trigger { + display: flex; + align-items: center; + gap: 4px; + height: 28px; + padding: 4px 8px 4px 4px; + border: 0; + border-radius: 4px; + background: transparent; + color: var(--v2-text-text-base); + cursor: pointer; +} + +.settings-v2-models-group-trigger:focus-visible { + outline: 2px solid var(--v2-border-border-focus); + outline-offset: 2px; +} + +@media (hover: hover) { + .settings-v2-models-group-trigger:not(:disabled):hover { + background-color: var(--v2-background-bg-layer-02); + } +} + +.settings-v2-models-group-trigger:disabled { + cursor: default; +} + +.settings-v2-models-group-chevron { + display: flex; + width: 20px; + height: 20px; + flex-shrink: 0; + align-items: center; + justify-content: center; + color: var(--v2-icon-icon-muted); +} + +.settings-v2-models-group-label { display: flex; align-items: center; gap: 8px; - padding-bottom: 8px; } .settings-v2-models .settings-v2-section-title { @@ -394,6 +445,10 @@ color: var(--v2-icon-icon-base); } +.settings-v2-models [data-component="settings-v2-list"] { + padding-inline: 16px; +} + .settings-v2-models .settings-v2-section-title + [data-component="settings-v2-list"] { margin-top: 0; }