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

Author: iamdavidhill

packages/app/src/components/dialog-select-file.tsx

@@ -136,7 +136,7 @@ export function DialogSelectFile() {
   return (
     <Dialog title="Search">
       <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"
         items={items}
         key={(item) => item.id}

packages/ui/src/components/list.tsx

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