From b3947909a0df0bb03fa426362b1abc3f6a13b56c Mon Sep 17 00:00:00 2001
From: MotorTruck1221 <motortruck1221@protonmail.com>
Date: Thu, 26 Sep 2024 23:54:13 -0600
Subject: [PATCH] Omnibox styling...

---
 src/pages/[lang]/index.astro      | 50 +++++++++++++++++++++----------
 src/pages/catalog/pagnation.astro |  2 +-
 2 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 8efb9f3..6e2061c 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -17,22 +17,29 @@ const t = useTranslations(lang);
 <Layout title="Welcome to Astro.">
   <div
     class="flex flex-wrap mt-16 justify-center content-center w-full bg-primary fixed inset-0 h-[calc(100%-4rem)] z-0 flex-col items-center"
-  >
-    <div class="flex flex-row items-center mb-8">
-      <div class="h-32 w-32 fill-navbar-text-color">
-        <Logo />
-      </div>
-      <h1
-        class="font-roboto whitespace-nowrap font-bold text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto"
-      >
-        nebula.
-      </h1>
+    >
+    <div class="w-full flex flex-col justify-center items-center content-center h-2/4">
+        <div class="flex flex-row items-center mb-8">
+            <div class="h-32 w-32 fill-navbar-text-color">
+                <Logo />
+            </div>
+            <h1
+                class="font-roboto whitespace-nowrap font-bold text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto"
+            >
+                nebula.
+            </h1>
+        </div>
+        <input
+            id="nebula-input"
+            class="transition-all duration-300 font-roboto h-14 rounded-t-2xl w-10/12 rounded-b-2xl border border-input-border-color bg-input p-2 text-center text-xl text-input-text placeholder:text-input-text roboto focus:outline-none md:w-3/12"
+            placeholder={t("home.placeholder")}
+        />
+        <div id="omnibox" class="hidden transition-all duration-300 flex flex-col w-10/12 md:w-3/12 flex-grow bg-input text-center items-center rounded-b-2xl border-input-border-color border-b border-r border-l">
+            <span class="w-full text-input-text bg-primary h-9 text-xl text-align-center overflow-hidden flex items-center justify-center hover:bg-lighter active:bg-primary">
+                <p>E</p>
+            </span>
+        </div>
     </div>
-    <input
-      id="nebula-input"
-      class="font-roboto h-14 rounded-t-2xl w-10/12 rounded-b-2xl border border-input-border-color bg-input p-2 text-center text-xl text-input-text placeholder:text-input-text roboto focus:outline-none md:w-3/12"
-      placeholder={t("home.placeholder")}
-    />
     <iframe id="neb-iframe" class="hidden z-100 w-full h-full absolute top-0 bottom-0 bg-primary"></iframe>
   </div>
 </Layout>
@@ -48,6 +55,7 @@ const t = useTranslations(lang);
         try {
             const input = document.getElementById("nebula-input") as HTMLInputElement;
             const iframe = document.getElementById("neb-iframe") as HTMLIFrameElement;
+            const omnibox = document.getElementById("omnibox") as HTMLDivElement;
             input?.addEventListener("keypress", function (event: any) {
                 if (event.key === "Enter") {
                     initSw().then(() => {
@@ -56,6 +64,18 @@ const t = useTranslations(lang);
                     })
                 }
             })
+            input?.addEventListener("input", async function() {
+                const value = input?.value;
+                input.classList.remove("rounded-b-2xl");
+                omnibox.classList.remove("hidden");
+                if (value.length === 0) {
+                    input.classList.add("rounded-b-2xl");
+                    omnibox.classList.add("hidden");
+                }
+                if (value >= 3) {
+                    //handle shit here :D
+                }
+            });
         }
         catch (_) {
             //we purposely don't return anything
diff --git a/src/pages/catalog/pagnation.astro b/src/pages/catalog/pagnation.astro
index 236d9e2..a5ce261 100644
--- a/src/pages/catalog/pagnation.astro
+++ b/src/pages/catalog/pagnation.astro
@@ -1,5 +1,5 @@
 <input
-  class="w-10 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md"
+  class="w-10 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
   type="number"
   id="pagnation_input"
   placeholder="..."