wip: desktop work

Author: adamdotdevin

packages/desktop/src/pages/index.tsx

@@ -315,19 +315,27 @@ export default function Page() {
         <SelectDialog
           defaultOpen
           title="Select file"
+          placeholder="Search files"
+          emptyMessage="No files found"
           items={local.file.search}
           key={(x) => x}
           onOpenChange={(open) => setStore("fileSelectOpen", open)}
           onSelect={(x) => (x ? local.file.open(x, { pinned: true }) : undefined)}
         >
           {(i) => (
-            <div class="w-full flex items-center justify-between">
-              <div class="flex items-center gap-x-2 text-text-muted grow min-w-0">
+            <div
+              classList={{
+                "w-full flex items-center justify-between rounded-md": true,
+              }}
+            >
+              <div class="flex items-center gap-x-2 grow min-w-0">
                 <FileIcon node={{ path: i, type: "file" }} class="shrink-0 size-4" />
-                <span class="text-xs text-text whitespace-nowrap">{getFilename(i)}</span>
-                <span class="text-xs text-text-muted/80 whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
-                  {getDirectory(i)}
-                </span>
+                <div class="flex items-center text-14-regular">
+                  <span class="text-text-weak whitespace-nowrap overflow-hidden overflow-ellipsis truncate min-w-0">
+                    {getDirectory(i)}/
+                  </span>
+                  <span class="text-text-strong whitespace-nowrap">{getFilename(i)}</span>
+                </div>
               </div>
               <div class="flex items-center gap-x-1 text-text-muted/40 shrink-0"></div>
             </div>

packages/ui/src/components/icon.tsx

@@ -134,6 +134,7 @@ const newIcons = {
   "plus-small": `<path d="M9.99984 5.41699V10.0003M9.99984 10.0003V14.5837M9.99984 10.0003H5.4165M9.99984 10.0003H14.5832" stroke="currentColor" stroke-linecap="square"/>`,
   "chevron-down": `<path d="M6.6665 8.33325L9.99984 11.6666L13.3332 8.33325" stroke="currentColor" stroke-linecap="square"/>`,
   "arrow-up": `<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99991 2.24121L16.0921 8.33343L15.2083 9.21731L10.6249 4.63397V17.5001H9.37492V4.63398L4.7916 9.21731L3.90771 8.33343L9.99991 2.24121Z" fill="currentColor"/>`,
+  "check-small": `<path d="M6.5 11.4412L8.97059 13.5L13.5 6.5" stroke="currentColor" stroke-linecap="square"/>`,
 }
 
 export interface IconProps extends ComponentProps<"svg"> {

packages/ui/src/components/select.css

@@ -87,6 +87,8 @@
     }
     [data-slot="item-indicator"] {
       margin-left: auto;
+      width: 16px;
+      height: 16px;
     }
     &:focus {
       outline: none;

packages/ui/src/components/select.tsx

@@ -52,7 +52,7 @@ export function Select<T>(props: SelectProps<T> & ButtonProps) {
             {props.label ? props.label(itemProps.item.rawValue) : (itemProps.item.rawValue as string)}
           </Kobalte.ItemLabel>
           <Kobalte.ItemIndicator data-slot="item-indicator">
-            <Icon name="checkmark" />
+            <Icon name="check-small" size="small" />
           </Kobalte.ItemIndicator>
         </Kobalte.Item>
       )}