From d94e3cefb252cb141a5ff731d18f9c1d369110bd Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sun, 1 Feb 2026 11:56:39 +0300
Subject: [PATCH] feat(SearchBar): move away from popover due to unnecessary
 complication and ux problems

---
 src/shared/ui/SearchBar/SearchBar.svelte | 88 ++++++++++--------------
 1 file changed, 35 insertions(+), 53 deletions(-)

diff --git a/src/shared/ui/SearchBar/SearchBar.svelte b/src/shared/ui/SearchBar/SearchBar.svelte
index 09abb16..a6f2d52 100644
--- a/src/shared/ui/SearchBar/SearchBar.svelte
+++ b/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 {
-    Content as PopoverContent,
-    Root as PopoverRoot,
-    Trigger as PopoverTrigger,
-} from '$shared/shadcn/ui/popover';
+import ScanSearchIcon from '@lucide/svelte/icons/scan-search';
 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}>
-    <PopoverTrigger bind:ref={triggerRef}>
-        {#snippet child({ props })}
-            {@const { onclick, ...rest } = props}
-            <div {...rest} class="flex flex-row flex-1 w-full">
-                {#if label}
-                    <Label for={id}>{label}</Label>
-                {/if}
-                <Input
-                    id={id}
-                    placeholder={placeholder}
-                    bind:value={value}
-                    onkeydown={handleKeyDown}
-                    onclick={handleInputClick}
-                    class="
-                        h-20 w-full md:text-2xl backdrop-blur-sm bg-white/60 dark:bg-slate-900/40
-                        ring-2 ring-slate-200/50
-                        active:ring-indigo-500/50
-                        focus-visible:border-indigo-500/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/50
-                        hover:bg-white/70 dark:hover:bg-slate-900/50 text-slate-900 dark:text-slate-100
-                        placeholder:text-slate-400 px-6 py-4 rounded-2xl transition-all duration-300
-                        font-medium
-                    "
-                />
-            </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>
+<div class="relative w-full">
+    <div class="absolute left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
+        <ScanSearchIcon class="size-4 stroke-gray-400 stroke-[1.5]" />
+    </div>
+    <Input
+        id={id}
+        placeholder={placeholder}
+        bind:value={value}
+        onkeydown={handleKeyDown}
+        onclick={handleInputClick}
+        class="
+            h-16 w-full text-base
+            backdrop-blur-md bg-white/80
+            border border-gray-300/50
+            shadow-[0_1px_3px_rgba(0,0,0,0.04)]
+            focus-visible:border-gray-400/60
+            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>