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

feat(app): model tooltip metadata in chooser (per Figma request) (#9707)

Browse Source
This commit is contained in:
Ronan Kearns
2026-01-21 10:25:34 -05:00
committed by GitHub
parent 19f68382fd
commit 6ac8c85b34
4 changed files with 132 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,6 +24,7 @@ export interface ListProps<T> extends FilteredListProps<T> {
activeIcon?: IconProps["name"]
filter?: string
search?: ListSearchProps | boolean
itemWrapper?: (item: T, node: JSX.Element) => JSX.Element
}
export interface ListRef {
@@ -245,39 +246,43 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
</Show>
<div data-slot="list-items">
<For each={group.items}>
{(item, i) => (
<button
data-slot="list-item"
data-key={props.key(item)}
data-active={props.key(item) === active()}
data-selected={item === props.current}
onClick={() => handleSelect(item, i())}
type="button"
onMouseMove={(event) => {
if (!moved(event)) return
setStore("mouseActive", true)
setActive(props.key(item))
}}
onMouseLeave={() => {
if (!store.mouseActive) return
setActive(null)
}}
>
{props.children(item)}
<Show when={item === props.current}>
<span data-slot="list-item-selected-icon">
<Icon name="check-small" />
</span>
</Show>
<Show when={props.activeIcon}>
{(icon) => (
<span data-slot="list-item-active-icon">
<Icon name={icon()} />
{(item, i) => {
const node = (
<button
data-slot="list-item"
data-key={props.key(item)}
data-active={props.key(item) === active()}
data-selected={item === props.current}
onClick={() => handleSelect(item, i())}
type="button"
onMouseMove={(event) => {
if (!moved(event)) return
setStore("mouseActive", true)
setActive(props.key(item))
}}
onMouseLeave={() => {
if (!store.mouseActive) return
setActive(null)
}}
>
{props.children(item)}
<Show when={item === props.current}>
<span data-slot="list-item-selected-icon">
<Icon name="check-small" />
</span>
)}
</Show>
</button>
)}
</Show>
<Show when={props.activeIcon}>
{(icon) => (
<span data-slot="list-item-active-icon">
<Icon name={icon()} />
</span>
)}
</Show>
</button>
)
if (props.itemWrapper) return props.itemWrapper(item, node)
return node
}}
</For>
</div>
</div>