feat(desktop): Adding Provider Icons (#8215)

1 files changed, 9 insertions, 3 deletions

diff --git a/packages/ui/src/components/list.tsx b/packages/ui/src/components/list.tsx
index 1283b3023..8c92728d7 100644
--- a/packages/ui/src/components/list.tsx
+++ b/packages/ui/src/components/list.tsx
@@ -10,9 +10,15 @@ export interface ListSearchProps {
   autofocus?: boolean
 }
 
+export interface ListGroup<T> {
+  category: string
+  items: T[]
+}
+
 export interface ListProps<T> extends FilteredListProps<T> {
   class?: string
   children: (item: T) => JSX.Element
+  groupHeader?: (group: ListGroup<T>) => JSX.Element
   emptyMessage?: string
   onKeyEvent?: (event: KeyboardEvent, item: T | undefined) => void
   onMove?: (item: T | undefined) => void
@@ -116,7 +122,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
     setScrollRef,
   })
 
-  function GroupHeader(props: { category: string }): JSX.Element {
+  function GroupHeader(groupProps: { category: string; children?: JSX.Element }): JSX.Element {
     const [stuck, setStuck] = createSignal(false)
     const [header, setHeader] = createSignal<HTMLDivElement | undefined>(undefined)
 
@@ -138,7 +144,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
 
     return (
       <div data-slot="list-header" data-stuck={stuck()} ref={setHeader}>
-        {props.category}
+        {groupProps.children ?? groupProps.category}
       </div>
     )
   }
@@ -185,7 +191,7 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
             {(group) => (
               <div data-slot="list-group">
                 <Show when={group.category}>
-                  <GroupHeader category={group.category} />
+                  <GroupHeader category={group.category}>{props.groupHeader?.(group)}</GroupHeader>
                 </Show>
                 <div data-slot="list-items">
                   <For each={group.items}>