fix: refine search modal styling and list component

Author: iamdavidhill

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

@@ -134,14 +134,14 @@ export function DialogSelectFile() {
   })
 
   return (
-    <Dialog title="Search">
+    <Dialog class="pt-3 pb-0">
       <List
-        search={{ placeholder: "Search files and commands", autofocus: true, hideIcon: true, class: "px-3" }}
+        search={{ placeholder: "Search files and commands", autofocus: true, hideIcon: true, class: "pl-3 pr-2 !mb-0" }}
         emptyMessage="No results found"
         items={items}
         key={(item) => item.id}
         filterKeys={["title", "description", "category"]}
-        groupBy={(item) => (grouped() ? item.category : "")}
+        groupBy={(item) => item.category}
         onMove={handleMove}
         onSelect={handleSelect}
       >

packages/ui/src/components/list.css

@@ -56,11 +56,14 @@
       width: 20px;
       height: 20px;
       background-color: transparent;
+      opacity: 0.5;
+      transition: opacity 0.15s ease;
 
       &:hover:not(:disabled),
       &:focus:not(:disabled),
       &:active:not(:disabled) {
         background-color: transparent;
+        opacity: 0.7;
       }
 
       &:hover:not(:disabled) [data-slot="icon-svg"] {
@@ -125,18 +128,22 @@
       display: flex;
       flex-direction: column;
 
+      &:last-child {
+        padding-bottom: 12px;
+      }
+
       [data-slot="list-header"] {
         display: flex;
         z-index: 10;
-        padding: 0 12px 8px 8px;
+        padding: 8px 12px 8px 12px;
         justify-content: space-between;
         align-items: center;
         align-self: stretch;
         background: var(--surface-raised-stronger-non-alpha);
         position: sticky;
         top: 0;
 
-        color: var(--text-base);
+        color: var(--text-weak);
 
         /* text-14-medium */
         font-family: var(--font-family-sans);