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,14 +60,10 @@ 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">
-                {#if label}
-                    <Label for={id}>{label}</Label>
-                {/if}
     <Input
         id={id}
         placeholder={placeholder}
@@ -87,28 +71,26 @@ function handleInputClick() {
         onkeydown={handleKeyDown}
         onclick={handleInputClick}
         class="
-                        h-20 w-full md:text-2xl backdrop-blur-sm bg-white/60 dark:bg-slate-900/40
+            h-16 w-full text-base
-                        ring-2 ring-slate-200/50
+            backdrop-blur-md bg-white/80
-                        active:ring-indigo-500/50
+            border border-gray-300/50
-                        focus-visible:border-indigo-500/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/50
+            shadow-[0_1px_3px_rgba(0,0,0,0.04)]
-                        hover:bg-white/70 dark:hover:bg-slate-900/50 text-slate-900 dark:text-slate-100
+            focus-visible:border-gray-400/60
-                        placeholder:text-slate-400 px-6 py-4 rounded-2xl transition-all duration-300
+            focus-visible:outline-none
+            focus-visible:ring-1
+            focus-visible:ring-gray-400/30
+            focus-visible:bg-white/90
+            hover:bg-white/90
+            hover:border-gray-400/60
+            text-gray-900
+            placeholder:text-gray-400
+            placeholder:font-mono
+            placeholder:text-sm
+            placeholder:tracking-wide
+            pl-14 pr-6
+            rounded-xl
+            transition-all duration-200
             font-medium
         "
     />
-            </div>
+</div>
-        {/snippet}
-    </PopoverTrigger>
-
-    <PopoverContent
-        onOpenAutoFocus={e => e.preventDefault()}
-        onInteractOutside={(e => {
-            if (e.target === triggerRef) {
-                e.preventDefault();
-            }
-        })}
-        class="w-(--bits-popover-anchor-width) min-w-(--bits-popover-anchor-width) md:rounded-2xl"
-    >
-        {@render children?.({ id: contentId })}
-    </PopoverContent>
-</PopoverRoot>