Avoid showing "No matches" when query is empty if there are no matches

styles/src/styleTree/contactFinder.ts

@@ -3,7 +3,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, foreground, text } from "./components";
 
 export default function contactFinder(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest;
+  let layer = colorScheme.middle;
 
   const sideMargin = 6;
   const contactButton = {
@@ -14,31 +14,36 @@ export default function contactFinder(colorScheme: ColorScheme) {
     cornerRadius: 8,
   };
 
+  const pickerStyle = picker(colorScheme);
+  const pickerInput = {
+    background: background(layer, "on"),
+    cornerRadius: 6,
+    text: text(layer, "mono",),
+    placeholderText: text(layer, "mono", "variant", { size: "sm" }),
+    selection: colorScheme.players[0],
+    border: border(layer),
+    padding: {
+      bottom: 4,
+      left: 8,
+      right: 8,
+      top: 4,
+    },
+    margin: {
+      left: sideMargin,
+      right: sideMargin,
+    }
+  };
+
   return {
     picker: {
+      emptyContainer: {},
       item: {
-        ...picker(colorScheme).item,
-        margin: { left: sideMargin, right: sideMargin }
+        ...pickerStyle.item,
+        margin: { left: sideMargin, right: sideMargin },
       },
-      empty: picker(colorScheme).empty,
-      inputEditor: {
-        background: background(layer, "on"),
-        cornerRadius: 6,
-        text: text(layer, "mono",),
-        placeholderText: text(layer, "mono", "variant", { size: "sm" }),
-        selection: colorScheme.players[0],
-        border: border(layer),
-        padding: {
-          bottom: 4,
-          left: 8,
-          right: 8,
-          top: 4,
-        },
-        margin: {
-          left: sideMargin,
-          right: sideMargin,
-        }
-      }
+      noMatches: pickerStyle.noMatches,
+      inputEditor: pickerInput,
+      emptyInputEditor: pickerInput
     },
     rowHeight: 28,
     contactAvatar: {

styles/src/styleTree/picker.ts

@@ -3,13 +3,39 @@ import { background, border, text } from "./components";
 
 export default function picker(colorScheme: ColorScheme) {
   let layer = colorScheme.lowest;
-  return {
+  const container = {
     background: background(layer),
     border: border(layer),
     shadow: colorScheme.modalShadow,
     cornerRadius: 12,
     padding: {
       bottom: 4,
+    }
+  };
+  const inputEditor = {
+    placeholderText: text(layer, "sans", "on", "disabled"),
+    selection: colorScheme.players[0],
+    text: text(layer, "mono", "on"),
+    border: border(layer, { bottom: true }),
+    padding: {
+      bottom: 8,
+      left: 16,
+      right: 16,
+      top: 8,
+    },
+    margin: {
+      bottom: 4,
+    },
+  };
+  const emptyInputEditor = { ...inputEditor };
+  delete emptyInputEditor.border;
+  delete emptyInputEditor.margin;
+
+  return {
+    ...container,
+    emptyContainer: {
+      ...container,
+      padding: {}
     },
     item: {
       padding: {
@@ -37,7 +63,9 @@ export default function picker(colorScheme: ColorScheme) {
         background: background(layer, "hovered"),
       },
     },
-    empty: {
+    inputEditor,
+    emptyInputEditor,
+    noMatches: {
       text: text(layer, "sans", "variant"),
       padding: {
         bottom: 8,
@@ -46,20 +74,5 @@ export default function picker(colorScheme: ColorScheme) {
         top: 8,
       },
     },
-    inputEditor: {
-      placeholderText: text(layer, "sans", "on", "disabled"),
-      selection: colorScheme.players[0],
-      text: text(layer, "mono", "on"),
-      border: border(layer, { bottom: true }),
-      padding: {
-        bottom: 8,
-        left: 16,
-        right: 16,
-        top: 8,
-      },
-      margin: {
-        bottom: 4,
-      },
-    },
   };
 }