From 9598d8c3e49a1b858c0625dec6233fc38ca0379e Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 9 Jan 2026 16:19:22 +0300
Subject: [PATCH] feat(SearchBar): create SearchBar component with input and
 popover that contains search results

---
 src/shared/ui/SearchBar/SearchBar.svelte | 82 ++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 src/shared/ui/SearchBar/SearchBar.svelte

diff --git a/src/shared/ui/SearchBar/SearchBar.svelte b/src/shared/ui/SearchBar/SearchBar.svelte
new file mode 100644
index 0000000..f65e40b
--- /dev/null
+++ b/src/shared/ui/SearchBar/SearchBar.svelte
@@ -0,0 +1,82 @@
+<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 { useId } from 'bits-ui';
+import {
+    type Snippet,
+    tick,
+} from 'svelte';
+
+interface Props {
+    id: string;
+    value: string;
+    class?: string;
+    placeholder?: string;
+    label?: string;
+    children: Snippet<[{ id: string }]> | undefined;
+}
+
+let {
+    id = 'search-bar',
+    value = $bindable(),
+    class: className,
+    placeholder,
+    label,
+    children,
+}: Props = $props();
+
+let open = $state(false);
+let triggerRef = $state<HTMLInputElement>();
+const contentId = useId(id);
+
+function closeAndFocusTrigger() {
+    open = false;
+    tick().then(() => {
+        triggerRef?.focus();
+    });
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
+        event.preventDefault();
+    }
+}
+
+function handleInputClick() {
+    open = true;
+    tick().then(() => {
+        triggerRef?.focus();
+    });
+}
+</script>
+
+<PopoverRoot>
+    <PopoverTrigger bind:ref={triggerRef}>
+        {#snippet child({ props })}
+            <div {...props} 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}
+                    class="flex flex-row flex-1"
+                />
+            </div>
+        {/snippet}
+    </PopoverTrigger>
+
+    <PopoverContent
+        onOpenAutoFocus={e => e.preventDefault()}
+        class="w-max"
+    >
+        {@render children?.({ id: contentId })}
+    </PopoverContent>
+</PopoverRoot>