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

38
packages/ui/src/components/list.css
View File

@@ -23,14 +23,46 @@
overflow: hidden;
padding: 0 12px;
[data-slot="list-search"] {
[data-slot="list-search-wrapper"] {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 8px;
align-self: stretch;
margin-bottom: 4px;
padding-right: 4px;
> [data-component="icon-button"] {
width: 24px;
height: 24px;
flex-shrink: 0;
background-color: transparent;
opacity: 0.5;
transition: opacity 0.15s ease;
&:hover:not(:disabled),
&:focus:not(:disabled),
&:active:not(:disabled) {
background-color: transparent;
opacity: 0.7;
}
&:hover:not(:disabled) [data-slot="icon-svg"] {
color: var(--icon-hover);
}
&:active:not(:disabled) [data-slot="icon-svg"] {
color: var(--icon-active);
}
}
}
[data-slot="list-search"] {
display: flex;
flex: 1;
padding: 8px;
align-items: center;
gap: 12px;
align-self: stretch;
margin-bottom: 4px;
border-radius: var(--radius-md);
background: var(--surface-base);

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">