From 190fa4c87aa2b3f954a419f716add1fc29e4011e Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Wed, 10 Dec 2025 14:48:08 -0600
Subject: wip(desktop): progress

---
 packages/ui/src/components/provider-icon.tsx |  6 +++---
 packages/ui/src/components/select-dialog.css | 12 ++++++++----
 packages/ui/src/components/select-dialog.tsx | 10 ++++++++--
 3 files changed, 19 insertions(+), 9 deletions(-)

(limited to 'packages/ui/src')

diff --git a/packages/ui/src/components/provider-icon.tsx b/packages/ui/src/components/provider-icon.tsx
index 924dcd25c..d653765a5 100644
--- a/packages/ui/src/components/provider-icon.tsx
+++ b/packages/ui/src/components/provider-icon.tsx
@@ -4,11 +4,11 @@ import sprite from "./provider-icons/sprite.svg"
 import type { IconName } from "./provider-icons/types"
 
 export type ProviderIconProps = JSX.SVGElementTags["svg"] & {
-  name: IconName
+  id: IconName
 }
 
 export const ProviderIcon: Component<ProviderIconProps> = (props) => {
-  const [local, rest] = splitProps(props, ["name", "class", "classList"])
+  const [local, rest] = splitProps(props, ["id", "class", "classList"])
   return (
     <svg
       data-component="provider-icon"
@@ -18,7 +18,7 @@ export const ProviderIcon: Component<ProviderIconProps> = (props) => {
         [local.class ?? ""]: !!local.class,
       }}
     >
-      <use href={`${sprite}#${local.name}`} />
+      <use href={`${sprite}#${local.id}`} />
     </svg>
   )
 }
diff --git a/packages/ui/src/components/select-dialog.css b/packages/ui/src/components/select-dialog.css
index cc834f795..f5687ad8e 100644
--- a/packages/ui/src/components/select-dialog.css
+++ b/packages/ui/src/components/select-dialog.css
@@ -11,7 +11,7 @@
   display: flex;
   height: 40px;
   flex-shrink: 0;
-  padding: 4px 10px 4px 6px;
+  padding: 4px 10px 4px 16px;
   align-items: center;
   gap: 12px;
   align-self: stretch;
@@ -121,6 +121,9 @@
         letter-spacing: var(--letter-spacing-normal);
 
         [data-slot="select-dialog-item-selected-icon"] {
+          color: var(--icon-strong-base);
+        }
+        [data-slot="select-dialog-item-active-icon"] {
           display: none;
           color: var(--icon-strong-base);
         }
@@ -128,12 +131,13 @@
         &[data-active="true"] {
           border-radius: var(--radius-md);
           background: var(--surface-raised-base-hover);
-        }
-        &[data-selected="true"] {
-          [data-slot="select-dialog-item-selected-icon"] {
+          [data-slot="select-dialog-item-active-icon"] {
             display: block;
           }
         }
+        &:active {
+          background: var(--surface-raised-base-active);
+        }
       }
     }
   }
diff --git a/packages/ui/src/components/select-dialog.tsx b/packages/ui/src/components/select-dialog.tsx
index b93993ad4..86f723225 100644
--- a/packages/ui/src/components/select-dialog.tsx
+++ b/packages/ui/src/components/select-dialog.tsx
@@ -2,7 +2,7 @@ import { createEffect, Show, For, type JSX, splitProps, createSignal } from "sol
 import { createStore } from "solid-js/store"
 import { FilteredListProps, useFilteredList } from "@opencode-ai/ui/hooks"
 import { Dialog, DialogProps } from "./dialog"
-import { Icon } from "./icon"
+import { Icon, IconProps } from "./icon"
 import { Input } from "./input"
 import { IconButton } from "./icon-button"
 
@@ -16,6 +16,7 @@ interface SelectDialogProps<T>
   onSelect?: (value: T | undefined) => void
   onKeyEvent?: (event: KeyboardEvent, item: T | undefined) => void
   actions?: JSX.Element
+  activeIcon?: IconProps["name"]
 }
 
 export function SelectDialog<T>(props: SelectDialogProps<T>) {
@@ -165,7 +166,12 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
                           }}
                         >
                           {others.children(item)}
-                          <Icon data-slot="select-dialog-item-selected-icon" name="check-small" />
+                          <Show when={item === others.current}>
+                            <Icon data-slot="select-dialog-item-selected-icon" name="check-small" />
+                          </Show>
+                          <Show when={others.activeIcon}>
+                            {(icon) => <Icon data-slot="select-dialog-item-active-icon" name={icon()} />}
+                          </Show>
                         </button>
                       )}
                     </For>
-- 
cgit v1.2.3