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

feat: add hideIcon and class options to List search, customize search modal input

Browse Source
This commit is contained in:
David Hill
2026-01-16 23:59:42 +00:00
parent f8f1f46a4f
commit 6f78a71fa7
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/src/components/dialog-select-file.tsx
View File

@@ -136,7 +136,7 @@ export function DialogSelectFile() {
return ( return (
<Dialog title="Search"> <Dialog title="Search">
<List <List
search={{ placeholder: "Search files and commands", autofocus: true }} search={{ placeholder: "Search files and commands", autofocus: true, hideIcon: true, class: "px-3" }}
emptyMessage="No results found" emptyMessage="No results found"
items={items} items={items}
key={(item) => item.id} key={(item) => item.id}

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

@@ -8,6 +8,8 @@ import { TextField } from "./text-field"
export interface ListSearchProps { export interface ListSearchProps {
placeholder?: string placeholder?: string
autofocus?: boolean autofocus?: boolean
hideIcon?: boolean
class?: string
} }
export interface ListProps<T> extends FilteredListProps<T> { export interface ListProps<T> extends FilteredListProps<T> {
@@ -146,9 +148,11 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
return ( return (
<div data-component="list" classList={{ [props.class ?? ""]: !!props.class }}> <div data-component="list" classList={{ [props.class ?? ""]: !!props.class }}>
<Show when={!!props.search}> <Show when={!!props.search}>
<div data-slot="list-search"> <div data-slot="list-search" classList={{ [searchProps().class ?? ""]: !!searchProps().class }}>
<div data-slot="list-search-container"> <div data-slot="list-search-container">
<Icon name="magnifying-glass" /> <Show when={!searchProps().hideIcon}>
<Icon name="magnifying-glass" />
</Show>
<TextField <TextField
autofocus={searchProps().autofocus} autofocus={searchProps().autofocus}
variant="ghost" variant="ghost"