🚧 Layout completions

apps/content/src/browser/components/UrlBox.svelte

@@ -3,13 +3,12 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <script>
-
   // @ts-check
-    import { writable } from 'svelte/store'
+  import { writable } from 'svelte/store'
 
   import * as WebsiteViewApi from '../windowApi/WebsiteView'
   import * as UrlBoxApi from './urlBox'
-    import { onMount } from 'svelte'
+  import { onMount } from 'svelte'
 
   /** @type {WebsiteView} */
   export let view
@@ -26,36 +25,94 @@
   let input
   const value = writable('')
 
-  uri.subscribe(newValue => value.set(newValue?.spec || ''))
+  uri.subscribe((newValue) => value.set(newValue?.spec || ''))
 
   $: fastAutocomplete = UrlBoxApi.getFastAutocomplete($value)
   $: slowAutocomplete = UrlBoxApi.debouncedSlowAutocomplete(value)
 
   onMount(() => {
-  uri.subscribe(UrlBoxApi.performCursedUrlStyling(input))
+    uri.subscribe(UrlBoxApi.performCursedUrlStyling(input))
   })
 </script>
 
 <div class="url-box">
-    <input type="text" bind:this={input} bind:value={$value} on:focus={() => inputFocused = true} on:blur={() => inputFocused = false} />
+  <div class="background"></div>
+
+  <div class="container" data-active={inputFocused}>
+    <input
+      type="text"
+      bind:this={input}
+      bind:value={$value}
+      on:focus={() => (inputFocused = true)}
+      on:blur={() => (inputFocused = false)}
+    />
 
-    <div hidden={!inputFocused}>
+    <div hidden={!inputFocused} class="completions">
       {#each fastAutocomplete as result}
-        <div>{result.url}: {result.display}</div>
+        <div class="completion">{result.display}</div>
       {/each}
       <div>Suggestions</div>
       {#each $slowAutocomplete as result}
-        <div>{result.url}: {result.display}</div>
+        <div class="completion">{result.display}</div>
       {/each}
     </div>
+  </div>
 </div>
 
 <style>
-.url-box {
-  flex-grow: 2;
-}
+  .url-box {
+    flex-grow: 2;
+    position: relative;
+  }
+
+  .url-box:has(+ .container > input:focus) {
+    outline: solid;
+  }
+
+  input:focus {
+    outline: none;
+  }
+
+  .background {
+    background: black;
+    height: 2.5rem;
+    border-radius: 1rem;
+  }
+
+  .container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    box-sizing: content-box;
+    border-radius: 1rem;
+  }
+
+  .container[data-active='true'] {
+    background: black;
+    border: 1px solid red;
+  }
+
+  .url-box input {
+    width: 100%;
+    height: 2.5rem;
+
+    border: none;
+    background: none;
+    padding: 0 1rem;
+    margin: 0;
+  }
+
+  .completions {
+    padding: 0.5rem;
+  }
+
+  .completion {
+    border-radius: 0.5rem;
+    padding: 0.5rem 1rem;
+    margin-top: 0.5rem;
 
-.url-box input {
-  width: 100%;
-}
+    background: darkgray;
+  }
 </style>

apps/content/src/browser/components/urlBox.js

@@ -129,6 +129,7 @@ export function performCursedUrlStyling(inputElement) {
       startIndex = currentIndex
     }
 
+    // Consume path
     if (!inputElement.value.substring(startIndex).includes('/')) {
       return
     }