feat(SearchBar): move away from popover due to unnecessary complication and ux problems

src/shared/ui/SearchBar/SearchBar.svelte

@@ -7,14 +7,8 @@
 -->
 <script lang="ts">
 import { Input } from '$shared/shadcn/ui/input';
-import { Label } from '$shared/shadcn/ui/label';
+import ScanSearchIcon from '@lucide/svelte/icons/scan-search';
-import {
-    Content as PopoverContent,
-    Root as PopoverRoot,
-    Trigger as PopoverTrigger,
-} from '$shared/shadcn/ui/popover';
 import { useId } from 'bits-ui';
-import type { Snippet } from 'svelte';
 
 interface Props {
     /**
@@ -41,10 +35,6 @@ interface Props {
      * Optional label displayed above the input
      */
     label?: string;
-    /**
-     * Content to render inside the popover (receives unique content ID)
-     */
-    children: Snippet<[{ id: string }]> | undefined;
 }
 
 let {
@@ -53,8 +43,6 @@ let {
     isOpen = $bindable(false),
     class: className,
     placeholder,
-    label,
-    children,
 }: Props = $props();
 
 let triggerRef = $state<HTMLInputElement>(null!);
@@ -72,43 +60,37 @@ function handleInputClick() {
 }
 </script>
 
-<PopoverRoot bind:open={isOpen}>
+<div class="relative w-full">
-    <PopoverTrigger bind:ref={triggerRef}>
+    <div class="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
-        {#snippet child({ props })}
+        <ScanSearchIcon class="size-4 stroke-gray-400 stroke-[1.5]" />
-            {@const { onclick, ...rest } = props}
+    </div>
-            <div {...rest} class="flex flex-row flex-1 w-full">
+    <Input
-                {#if label}
+        id={id}
-                    <Label for={id}>{label}</Label>
+        placeholder={placeholder}
-                {/if}
+        bind:value={value}
-                <Input
+        onkeydown={handleKeyDown}
-                    id={id}
+        onclick={handleInputClick}
-                    placeholder={placeholder}
+        class="
-                    bind:value={value}
+            h-16 w-full text-base
-                    onkeydown={handleKeyDown}
+            backdrop-blur-md bg-white/80
-                    onclick={handleInputClick}
+            border border-gray-300/50
-                    class="
+            shadow-[0_1px_3px_rgba(0,0,0,0.04)]
-                        h-20 w-full md:text-2xl backdrop-blur-sm bg-white/60 dark:bg-slate-900/40
+            focus-visible:border-gray-400/60
-                        ring-2 ring-slate-200/50
+            focus-visible:outline-none
-                        active:ring-indigo-500/50
+            focus-visible:ring-1
-                        focus-visible:border-indigo-500/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/50
+            focus-visible:ring-gray-400/30
-                        hover:bg-white/70 dark:hover:bg-slate-900/50 text-slate-900 dark:text-slate-100
+            focus-visible:bg-white/90
-                        placeholder:text-slate-400 px-6 py-4 rounded-2xl transition-all duration-300
+            hover:bg-white/90
-                        font-medium
+            hover:border-gray-400/60
-                    "
+            text-gray-900
-                />
+            placeholder:text-gray-400
-            </div>
+            placeholder:font-mono
-        {/snippet}
+            placeholder:text-sm
-    </PopoverTrigger>
+            placeholder:tracking-wide
-
+            pl-14 pr-6
-    <PopoverContent
+            rounded-xl
-        onOpenAutoFocus={e => e.preventDefault()}
+            transition-all duration-200
-        onInteractOutside={(e => {
+            font-medium
-            if (e.target === triggerRef) {
+        "
-                e.preventDefault();
+    />
-            }
+</div>
-        })}
-        class="w-(--bits-popover-anchor-width) min-w-(--bits-popover-anchor-width) md:rounded-2xl"
-    >
-        {@render children?.({ id: contentId })}
-    </PopoverContent>
-</PopoverRoot>