Responsive

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

front/src/components/Nav.svelte

@@ -87,17 +87,27 @@
           {/each}
         </ul>
       </div>
+      <!-- Logo à gauche sur écran moyen et grand -->
       <a
         href="/"
-        class="btn btn-ghost text-xl flex justify-center gap-2 items-center"
+        class="btn btn-ghost text-xl hidden sm:flex justify-center gap-2 items-center"
       >
-        <img src="/logo.svg" class="m-auto h-6" alt="iky logo" />
+        <img src="/logo.svg" class="m-auto h-4 lg:h-6" alt="iky logo" />
-        <img src="/logo-large.svg" class="m-auto h-6" alt="iky logo large" />
+        <img src="/logo-large.svg" class="m-auto h-4 lg:h-6" alt="iky logo large" />
       </a>
     </div>
 
-    <div class="navbar-center hidden lg:flex">
+    <div class="navbar-center lg:flex">
-      <ul class="menu menu-horizontal px-1">
+      <!-- Logo centré sur petit écran (mobile) -->
+      <a
+        href="/"
+        class="btn btn-ghost text-xl flex sm:hidden justify-center gap-2 items-center"
+      >
+        <img src="/logo.svg" class="m-auto h-4" alt="iky logo" />
+        <img src="/logo-large.svg" class="m-auto h-4" alt="iky logo large" />
+      </a>
+      <!-- Nav links sur grand écran -->
+      <ul class="menu menu-horizontal px-1 hidden lg:flex">
         {#each navLinks as link}
           <li>
             {#if link.children}

front/src/components/SearchBar.svelte

@@ -164,8 +164,9 @@
           onselect={(v) => { profile = v; }}
         />
       </div>
+    </div>
     <button
-        class="btn btn-primary btn-sm flex-1 gap-1"
+      class="btn btn-primary btn-sm w-full gap-1"
       onclick={submit}
       disabled={demo || loading || !target.trim()}
     >
@@ -177,7 +178,6 @@
       Search
     </button>
   </div>
-  </div>
 
   <!-- Desktop layout -->
   <div

front/src/components/SearchList.svelte

@@ -28,43 +28,49 @@
         href={`/search/${s.id}`}
         class="card bg-base-200 hover:bg-base-300 transition-colors shadow-sm cursor-pointer"
       >
-        <div class="card-body flex-row items-center gap-4 py-3 px-4">
+        <div class="card-body py-3 px-4">
-          <div class="text-base-content/40 w-6 flex items-center justify-center shrink-0">
+          <div class="flex items-start gap-3">
+            <!-- Icon -->
+            <div class="text-base-content/40 flex items-center justify-center shrink-0 mt-0.5">
               {#each [INPUT_TYPE_ICON[s.input_type] ?? FileText] as Icon}
                 <Icon size={16} />
               {/each}
             </div>
-          <div class="flex flex-col min-w-0 flex-1">
+
-            <span class="font-mono font-semibold truncate">{s.target}</span>
+            <!-- Target + meta -->
+            <div class="flex flex-col min-w-0 flex-1 gap-0.5">
+              <span class="font-mono font-semibold truncate leading-snug">{s.target}</span>
               <div class="flex items-center gap-1.5 flex-wrap text-xs text-base-content/50">
                 <span>{s.input_type}</span>
                 {#if s.profile}
                   <span class="badge badge-outline badge-xs font-semibold">{s.profile}</span>
                 {/if}
                 <span>· {fmtDate(s.started_at)}</span>
-            </div>
-          </div>
-
                 {#if s.status !== "running"}
                   {@const total = (s.planned_tools ?? []).reduce((sum, t) => sum + (t.result_count ?? 0), 0)}
                   {#if total > 0}
-              <span class="text-xs font-mono text-base-content/50 shrink-0">{total} result{total !== 1 ? "s" : ""}</span>
+                    <span>· {total} result{total !== 1 ? "s" : ""}</span>
                   {/if}
                 {/if}
+              </div>
+            </div>
 
-          <span class="badge {STATUS_BADGE[s.status] ?? 'badge-ghost'} badge-sm shrink-0">
+            <!-- Status + delete -->
+            <div class="flex items-center gap-1.5 shrink-0 ml-auto">
+              <span class="badge {STATUS_BADGE[s.status] ?? 'badge-ghost'} badge-sm">
                 {#if s.status === "running"}
                   <span class="loading loading-ring loading-xs mr-1"></span>
                 {/if}
                 {s.status}
               </span>
-
               <button
-            class="btn btn-ghost btn-xs text-base-content/30 hover:text-error shrink-0"
+                class="btn btn-ghost btn-xs text-base-content/30 hover:text-error"
                 onclick={(e) => { e.preventDefault(); onDelete(s.id); }}
                 title="Delete"
               ><X size={14} /></button>
             </div>
+          </div>
+        </div>
       </a>
     {/each}
   </div>

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.filter((t) => {
-      ? toolsWithStatus
+      const matchesInput =
-      : toolsWithStatus.filter((t) =>
+        selectedInputType === "all" || t.input_types.includes(selectedInputType);
-          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"

front/src/layouts/Layout.astro

@@ -42,7 +42,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site ?? Astro.url.origin)
         slot="action"
         target="_blank"
         class="btn btn-primary btn-sm"
-        ><Coffee class="size-3" /> Support me</a
+        ><Coffee class="size-3" /><span class="hidden sm:inline">Support me</span></a
       >
     </Navbar>
     <div class="m-auto max-w-5xl md:py-10 md:px-10 py-5 px-5 animate-fade-in">