From 6866a060bc48031ecc3b0f7c1c1e99f6961a4cb1 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Wed, 10 Dec 2025 06:26:24 -0600
Subject: wip(desktop): progress

---
 packages/ui/src/components/dialog.css        |  11 ++-
 packages/ui/src/components/dialog.tsx        |   2 +-
 packages/ui/src/components/input.css         |   2 +
 packages/ui/src/components/select-dialog.css |  28 ++++--
 packages/ui/src/components/select-dialog.tsx | 138 ++++++++++++++-------------
 packages/ui/src/styles/tailwind/index.css    |   1 +
 packages/ui/src/styles/theme.css             |   1 +
 7 files changed, 103 insertions(+), 80 deletions(-)

(limited to 'packages/ui')

diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css
index 2ac0709dd..267c891f3 100644
--- a/packages/ui/src/components/dialog.css
+++ b/packages/ui/src/components/dialog.css
@@ -36,14 +36,14 @@
       flex-direction: column;
       align-items: flex-start;
       align-self: stretch;
-      gap: 8px;
       width: 100%;
       max-height: 100%;
+      min-height: 280px;
 
       /* padding: 8px; */
-      padding: 8px 8px 0 8px;
+      /* padding: 8px 8px 0 8px; */
       border: 1px solid var(--border-base);
-      border-radius: var(--radius-md);
+      border-radius: var(--radius-xl);
       background: var(--surface-raised-stronger-non-alpha);
       box-shadow:
         0 15px 45px 0 rgba(19, 16, 16, 0.22),
@@ -58,8 +58,9 @@
 
       [data-slot="dialog-header"] {
         display: flex;
-        height: 40px;
-        padding: 4px 4px 4px 8px;
+        /* height: 40px; */
+        /* padding: 4px 4px 4px 8px; */
+        padding: 20px;
         justify-content: space-between;
         align-items: center;
         flex-shrink: 0;
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index 4625482b5..a16705a57 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -79,7 +79,7 @@ function DialogDescription(props: DialogDescriptionProps & ComponentProps<"p">)
 }
 
 function DialogCloseButton(props: DialogCloseButtonProps & ComponentProps<"button">) {
-  return <Kobalte.CloseButton data-slot="dialog-close-button" as={IconButton} icon="close" {...props} />
+  return <Kobalte.CloseButton data-slot="dialog-close-button" as={IconButton} icon="close" variant="ghost" {...props} />
 }
 
 export const Dialog = Object.assign(DialogRoot, {
diff --git a/packages/ui/src/components/input.css b/packages/ui/src/components/input.css
index 9e8a3b164..c5f8cb8c5 100644
--- a/packages/ui/src/components/input.css
+++ b/packages/ui/src/components/input.css
@@ -1,7 +1,9 @@
 [data-component="input"] {
+  width: 100%;
   /* [data-slot="input-label"] {} */
 
   [data-slot="input-input"] {
+    width: 100%;
     color: var(--text-strong);
 
     /* text-14-regular */
diff --git a/packages/ui/src/components/select-dialog.css b/packages/ui/src/components/select-dialog.css
index 6263cee67..6b78639a8 100644
--- a/packages/ui/src/components/select-dialog.css
+++ b/packages/ui/src/components/select-dialog.css
@@ -1,3 +1,12 @@
+[data-slot="select-dialog-content"] {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: 12px;
+  padding: 0 10px;
+}
+
 [data-component="select-dialog-input"] {
   display: flex;
   height: 40px;
@@ -29,11 +38,11 @@
 [data-component="select-dialog"] {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 
   [data-slot="select-dialog-empty-state"] {
     display: flex;
-    padding: 32px 160px;
+    padding: 32px 0px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
@@ -63,25 +72,30 @@
   }
 
   [data-slot="select-dialog-group"] {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 4px;
 
     [data-slot="select-dialog-header"] {
       display: flex;
-      padding: 4px 8px;
+      height: 28px;
+      padding: 0 10px;
       justify-content: space-between;
       align-items: center;
       align-self: stretch;
+      background: var(--surface-raised-stronger-non-alpha);
+      position: sticky;
+      top: 0;
 
-      color: var(--text-weak);
+      color: var(--text-base);
 
-      /* text-12-medium */
+      /* text-14-medium */
       font-family: var(--font-family-sans);
-      font-size: var(--font-size-small);
+      font-size: 14px;
       font-style: normal;
       font-weight: var(--font-weight-medium);
-      line-height: var(--line-height-large); /* 166.667% */
+      line-height: var(--line-height-large); /* 142.857% */
       letter-spacing: var(--letter-spacing-normal);
     }
 
diff --git a/packages/ui/src/components/select-dialog.tsx b/packages/ui/src/components/select-dialog.tsx
index 2f2d3e414..bfc39508e 100644
--- a/packages/ui/src/components/select-dialog.tsx
+++ b/packages/ui/src/components/select-dialog.tsx
@@ -20,6 +20,7 @@ interface SelectDialogProps<T>
 export function SelectDialog<T>(props: SelectDialogProps<T>) {
   const [dialog, others] = splitProps(props, ["trigger", "onOpenChange", "defaultOpen"])
   let closeButton!: HTMLButtonElement
+  let inputRef: HTMLInputElement | undefined
   let scrollRef: HTMLDivElement | undefined
   const [store, setStore] = createStore({
     mouseActive: false,
@@ -87,77 +88,80 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
     <Dialog modal {...dialog} onOpenChange={handleOpenChange}>
       <Dialog.Header>
         <Dialog.Title>{others.title}</Dialog.Title>
-        <Dialog.CloseButton ref={closeButton} style={{ display: "none" }} />
+        <Dialog.CloseButton ref={closeButton} tabIndex={-1} />
       </Dialog.Header>
-      <div data-component="select-dialog-input">
-        <div data-slot="select-dialog-input-container">
-          <Icon name="magnifying-glass" />
-          <Input
-            data-slot="select-dialog-input"
-            type="text"
-            value={filter()}
-            onChange={(value) => handleInput(value)}
-            onKeyDown={handleKey}
-            placeholder={others.placeholder}
-            autofocus
-            spellcheck={false}
-            autocorrect="off"
-            autocomplete="off"
-            autocapitalize="off"
-          />
+      <div data-slot="select-dialog-content">
+        <div data-component="select-dialog-input">
+          <div data-slot="select-dialog-input-container">
+            <Icon name="magnifying-glass" />
+            <Input
+              ref={inputRef}
+              autofocus
+              data-slot="select-dialog-input"
+              type="text"
+              value={filter()}
+              onChange={(value) => handleInput(value)}
+              onKeyDown={handleKey}
+              placeholder={others.placeholder}
+              spellcheck={false}
+              autocorrect="off"
+              autocomplete="off"
+              autocapitalize="off"
+            />
+          </div>
+          <Show when={filter()}>
+            <IconButton
+              icon="circle-x"
+              variant="ghost"
+              onClick={() => {
+                onInput("")
+                reset()
+              }}
+            />
+          </Show>
         </div>
-        <Show when={filter()}>
-          <IconButton
-            icon="circle-x"
-            variant="ghost"
-            onClick={() => {
-              onInput("")
-              reset()
-            }}
-          />
-        </Show>
-      </div>
-      <Dialog.Body ref={scrollRef} data-component="select-dialog" class="no-scrollbar">
-        <Show
-          when={flat().length > 0}
-          fallback={
-            <div data-slot="select-dialog-empty-state">
-              <div data-slot="select-dialog-message">
-                {props.emptyMessage ?? "No search results"} for{" "}
-                <span data-slot="select-dialog-filter">&quot;{filter()}&quot;</span>
-              </div>
-            </div>
-          }
-        >
-          <For each={grouped()}>
-            {(group) => (
-              <div data-slot="select-dialog-group">
-                <Show when={group.category}>
-                  <div data-slot="select-dialog-header">{group.category}</div>
-                </Show>
-                <div data-slot="select-dialog-list">
-                  <For each={group.items}>
-                    {(item) => (
-                      <button
-                        data-slot="select-dialog-item"
-                        data-key={others.key(item)}
-                        data-active={others.key(item) === active()}
-                        onClick={() => handleSelect(item)}
-                        onMouseMove={() => {
-                          setStore("mouseActive", true)
-                          setActive(others.key(item))
-                        }}
-                      >
-                        {others.children(item)}
-                      </button>
-                    )}
-                  </For>
+        <Dialog.Body ref={scrollRef} data-component="select-dialog" class="no-scrollbar">
+          <Show
+            when={flat().length > 0}
+            fallback={
+              <div data-slot="select-dialog-empty-state">
+                <div data-slot="select-dialog-message">
+                  {props.emptyMessage ?? "No search results"} for{" "}
+                  <span data-slot="select-dialog-filter">&quot;{filter()}&quot;</span>
                 </div>
               </div>
-            )}
-          </For>
-        </Show>
-      </Dialog.Body>
+            }
+          >
+            <For each={grouped()}>
+              {(group) => (
+                <div data-slot="select-dialog-group">
+                  <Show when={group.category}>
+                    <div data-slot="select-dialog-header">{group.category}</div>
+                  </Show>
+                  <div data-slot="select-dialog-list">
+                    <For each={group.items}>
+                      {(item) => (
+                        <button
+                          data-slot="select-dialog-item"
+                          data-key={others.key(item)}
+                          data-active={others.key(item) === active()}
+                          onClick={() => handleSelect(item)}
+                          onMouseMove={() => {
+                            setStore("mouseActive", true)
+                            setActive(others.key(item))
+                          }}
+                        >
+                          {others.children(item)}
+                        </button>
+                      )}
+                    </For>
+                  </div>
+                </div>
+              )}
+            </For>
+          </Show>
+        </Dialog.Body>
+      </div>
     </Dialog>
   )
 }
diff --git a/packages/ui/src/styles/tailwind/index.css b/packages/ui/src/styles/tailwind/index.css
index bc6bb6f6d..d0a414fee 100644
--- a/packages/ui/src/styles/tailwind/index.css
+++ b/packages/ui/src/styles/tailwind/index.css
@@ -57,6 +57,7 @@
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
+  --radius-xl: 0.625rem;
 
   --shadow-xs: var(--shadow-xs);
   --shadow-md: var(--shadow-md);
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 4450358f8..338e045ef 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -43,6 +43,7 @@
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
+  --radius-xl: 0.625rem;
 
   --shadow-xs:
     0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
-- 
cgit v1.2.3