monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(app): add manage models icon to selector (per Figma request) (#9722)

Browse Source
This commit is contained in:
Ronan Kearns
2026-01-21 05:44:17 -05:00
committed by GitHub
parent 2e5fe6d5c8
commit 996eeb1f68
3 changed files with 86 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
packages/ui/src/components/list.tsx
View File

@@ -11,6 +11,7 @@ export interface ListSearchProps {
autofocus?: boolean
hideIcon?: boolean
class?: string
action?: JSX.Element
}
export interface ListProps<T> extends FilteredListProps<T> {
@@ -60,6 +61,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
const { filter, grouped, flat, active, setActive, onKeyDown, onInput } = useFilteredList<T>(props)
const searchProps = () => (typeof props.search === "object" ? props.search : {})
const searchAction = () => searchProps().action
const moved = (event: MouseEvent) => event.movementX !== 0 || event.movementY !== 0
@@ -198,29 +200,32 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
return (
<div data-component="list" classList={{ [props.class ?? ""]: !!props.class }}>
<Show when={!!props.search}>
<div data-slot="list-search" classList={{ [searchProps().class ?? ""]: !!searchProps().class }}>
<div data-slot="list-search-container">
<Show when={!searchProps().hideIcon}>
<Icon name="magnifying-glass" />
<div data-slot="list-search-wrapper">
<div data-slot="list-search" classList={{ [searchProps().class ?? ""]: !!searchProps().class }}>
<div data-slot="list-search-container">
<Show when={!searchProps().hideIcon}>
<Icon name="magnifying-glass" />
</Show>
<TextField
autofocus={searchProps().autofocus}
variant="ghost"
data-slot="list-search-input"
type="text"
value={internalFilter()}
onChange={setInternalFilter}
onKeyDown={handleKey}
placeholder={searchProps().placeholder}
spellcheck={false}
autocorrect="off"
autocomplete="off"
autocapitalize="off"
/>
</div>
<Show when={internalFilter()}>
<IconButton icon="circle-x" variant="ghost" onClick={() => setInternalFilter("")} />
</Show>
<TextField
autofocus={searchProps().autofocus}
variant="ghost"
data-slot="list-search-input"
type="text"
value={internalFilter()}
onChange={setInternalFilter}
onKeyDown={handleKey}
placeholder={searchProps().placeholder}
spellcheck={false}
autocorrect="off"
autocomplete="off"
autocapitalize="off"
/>
</div>
<Show when={internalFilter()}>
<IconButton icon="circle-x" variant="ghost" onClick={() => setInternalFilter("")} />
</Show>
{searchAction()}
</div>
</Show>
<div ref={setScrollRef} data-slot="list-scroll">