Responsive

Signed-off-by: Hadi <112569860+anotherhadi@users.noreply.github.com>

front/src/components/ToolList.svelte

@@ -15,6 +15,7 @@
   let error = $state("");
 
   let selectedInputType = $state("all");
+  let nameFilter = $state("");
 
   const inputTypeOptions = ["all", ...INPUT_TYPES];
 
@@ -47,11 +48,14 @@
   );
 
   let visibleTools = $derived(
-    selectedInputType === "all"
-      ? toolsWithStatus
-      : toolsWithStatus.filter((t) =>
-          t.input_types.includes(selectedInputType),
-        ),
+    toolsWithStatus.filter((t) => {
+      const matchesInput =
+        selectedInputType === "all" || t.input_types.includes(selectedInputType);
+      const matchesName =
+        nameFilter.trim() === "" ||
+        t.name.toLowerCase().includes(nameFilter.trim().toLowerCase());
+      return matchesInput && matchesName;
+    }),
   );
 
   let active = $derived(
@@ -170,6 +174,19 @@
   <div class="alert alert-error gap-3"><AlertTriangle size={18} class="shrink-0" />{error}</div>
 {:else}
   <div class="flex flex-wrap items-center gap-x-6 gap-y-3 mb-6">
+    <div class="flex items-center gap-3">
+      <span
+        class="text-xs uppercase tracking-widest text-base-content/50 shrink-0"
+        >Search</span
+      >
+      <input
+        type="text"
+        class="input input-sm input-bordered w-40"
+        placeholder="tool name..."
+        bind:value={nameFilter}
+      />
+    </div>
+
     <div class="flex items-center gap-3">
       <span
         class="text-xs uppercase tracking-widest text-base-content/50 shrink-0"