fix: reduce flickering

Related to ParthJadhav#25.

Search results flickers because of three things (IMO):

- `handleInput` resets the `results` array, which immediately dropping
  list with `#if` directive in `SearchResult` component
- Changing styles on `focus` and `blur` are not immediate operation, that's why another
  kind of flickering is a transition between focused and non-focused
  state (gray background)
- `getIcon` function is another "bottleneck"; preservation of space for
  upcomming <img> tag is a key for rescue

Most "ugly" part of this code is manipulating with classes. Changing
classes through Svelte's `class:` binding leads to focus lost.

Unfortunately, manipulating classes through script cannot be made with
obfuscated selectors, that's why you can see `:global` in code. Maybe you
know better way to change classes without losing focus.

src/routes/App/App.svelte

@@ -64,7 +64,6 @@
   });
 
   const handleInput = async (event: any) => {
-    results = [];
     if (event.target.value === "") {
       footerText = "verve.app";
       return;

src/routes/App/lib/SearchResult.svelte

@@ -13,6 +13,7 @@
     await appWindow.setSize(new LogicalSize(750, height));
     if (results.length > 0 && results[0] !== "") {
       const firstResult = document.getElementById(results[0]);
+      firstResult.classList.add('searchResultFocused');
       await firstResult.focus();
     }
   });
@@ -58,6 +59,8 @@
         else newIndex = (currentIndex + 1) % items.length;
       }
       if (current !== null && items[newIndex] !== null) {
+        items[newIndex].classList.add('searchResultFocused');
+        current.classList.remove('searchResultFocused');
         current.blur();
         items[newIndex].focus();
       }
@@ -85,7 +88,12 @@
           {#await getIcon(result
               .split("/")
               .pop()
-              .replace(/.app$/, "")) then { icon, fallbackIcon }}
+              .replace(/.app$/, ""))}
+            <span
+              class="appIcon"
+              alt=""
+            />
+          {:then {icon, fallbackIcon}}
             <img
               class="appIcon"
               src={icon}
@@ -123,12 +131,14 @@
     order: 1;
     flex-grow: 0;
   }
-  .searchResult:focus {
-    background: var(--highlight-overlay);
-    outline: 0;
+
+  :global(.searchResultFocused) {
+    background: var(--highlight-overlay) !important;
+    outline: 0 !important;
   }
 
   .appIcon {
+    display: inline-flex;
     width: 24px;
     height: 24px;
     margin-right: 8px;