arama özelliği eklendi

client/src/components/Topbar.svelte

@@ -1,11 +1,21 @@
 <script>
-  import { createEventDispatcher, onMount } from "svelte";
-  const dispatch = createEventDispatcher();
+  import { createEventDispatcher } from "svelte";
+  import {
+    activePlaceholder,
+    activeSearchTerm,
+    updateSearchTerm
+  } from "../stores/searchStore.js";
 
-  let search = "";
-  export let placeholder = "Search files...";
+  const dispatch = createEventDispatcher();
+  export let placeholder = "";
 
   const onToggle = () => dispatch("toggleMenu");
+
+  function handleInput(event) {
+    updateSearchTerm(event.target.value);
+  }
+
+  $: resolvedPlaceholder = placeholder || $activePlaceholder;
 </script>
 
 <div class="topbar">
@@ -20,7 +30,12 @@
 
   <div class="search">
     <i class="fa-solid fa-magnifying-glass"></i>
-    <input placeholder={placeholder} bind:value={search} />
+    <input
+      type="search"
+      placeholder={resolvedPlaceholder}
+      value={$activeSearchTerm}
+      on:input={handleInput}
+    />
   </div>
 </div>