web: omnibox base with meowbalt

web/src/components/save/Omnibox.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+    import { IconLink } from '@tabler/icons-svelte';
+
+    import DownloadButton from './buttons/DownloadButton.svelte';
+    import ClearButton from './buttons/ClearButton.svelte';
+
+    let link: string = "";
+    let isFocused = false;
+
+    const validLink = (link: string) => {
+        try {
+            return /^https:/i.test(new URL(link).protocol);
+        } catch {
+            return false
+        }
+    }
+</script>
+
+<div id="omnibox">
+    <div id="input-container" class:focused={isFocused} class:downloadable={validLink(link)}>
+        <IconLink id="input-link-icon" color="var(--gray)" size="18px" />
+
+        <input
+            id="link-area"
+            bind:value={link}
+
+            on:input={() => isFocused = true}
+            on:focus={() => isFocused = true}
+            on:blur={() => isFocused = false}
+
+            spellcheck="false"
+            autocomplete="off"
+            autocapitalize="off"
+            maxlength="256"
+
+            placeholder="paste the link here"
+            aria-label="link input area"
+        >
+
+        {#if link.length > 0}
+            <ClearButton click={() => link = ""} />
+        {/if}
+        {#if validLink(link)}
+            <DownloadButton />
+        {/if}
+    </div>
+</div>
+
+<style>
+    #omnibox {
+        display: flex;
+        flex-direction: column;
+        max-width: 640px;
+        width: 100%;
+        gap: var(--padding);
+    }
+
+    #input-container {
+        display: flex;
+        box-shadow: 0 0 0 1.5px var(--gray) inset;
+        border-radius: 11px;
+        padding: 0 12px;
+        align-items: center;
+        gap: 10px;
+        font-size: 14px;
+        flex: 1
+    }
+
+    #input-container.downloadable {
+        padding-right: 0;
+    }
+
+    #input-container.focused {
+        box-shadow: 0 0 0 1.5px var(--secondary) inset;
+        outline: var(--secondary) 0.5px solid;
+    }
+
+    #input-container.focused :global(#input-link-icon) {
+        stroke: var(--secondary);
+    }
+    #input-container.downloadable :global(#input-link-icon) {
+        stroke: var(--secondary);
+    }
+
+    #link-area {
+        display: flex;
+        width: 100%;
+        margin: 0;
+        padding: 12px 0;
+        height: 18px;
+
+        align-items: center;
+
+        border: none;
+        outline: none;
+        background-color: transparent;
+        color: var(--secondary);
+
+        -webkit-tap-highlight-color: transparent;
+        flex: 1;
+
+        font-weight: 500;
+
+        /* workaround for safari */
+        font-size: inherit;
+    }
+
+    #link-area::placeholder {
+        color: var(--gray)
+    }
+</style>

web/src/components/save/buttons/ClearButton.svelte

@@ -0,0 +1,15 @@
+<script>
+    export let click;
+    import IconX from '@tabler/icons-svelte/IconX.svelte';
+</script>
+
+<button id="clear-button" on:click={click}>
+    <IconX color="var(--secondary)" size="16px"/>
+</button>
+
+<style>
+    #clear-button {
+        padding: 3px;
+        border-radius: 100%;
+    }
+</style>

web/src/components/save/buttons/DownloadButton.svelte

@@ -0,0 +1,54 @@
+<script>
+    import '@fontsource-variable/noto-sans-mono';
+</script>
+
+<button id="download-button">
+    <span id="download-state">&gt;&gt;</span>
+</button>
+
+<style>
+    #download-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        height: 100%;
+        min-width: 48px;
+
+        border-radius: 0;
+        padding: 0 12px;
+        background: none;
+
+        border-left: 1px var(--gray) solid;
+        border-top-right-radius: 11px;
+        border-bottom-right-radius: 11px;
+    }
+
+    #download-state {
+        font-size: 24px;
+        font-family: "Noto Sans Mono Variable", "Noto Sans Mono", "IBM Plex Mono", monospace;
+        font-weight: 400;
+
+        text-align: center;
+        text-indent: -5px;
+        letter-spacing: -0.22em;
+
+        margin-bottom: 0.1rem;
+    }
+
+    #download-button:hover {
+        background: var(--button-hover-transparent);
+    }
+
+    #download-button:disabled {
+        cursor: unset;
+    }
+
+    #download-button:disabled:hover {
+        background: none;
+    }
+
+    :global(#input-container.focused) #download-button {
+        border-left: 2px var(--secondary) solid;
+    }
+</style>