From cb3c9b6e41b97f97a7e82747f412312e878a7153 Mon Sep 17 00:00:00 2001
From: Davide Scaini <davide.scaini@alumni.cern>
Date: Wed, 13 May 2026 11:54:37 +0200
Subject: [PATCH] Move search bar above sport/date filters, below page title

---
 site/src/components/ActivityFeed.svelte | 20 ++++++++++----------
 site/src/pages/index.astro              |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/site/src/components/ActivityFeed.svelte b/site/src/components/ActivityFeed.svelte
index 63f4a1b..6c06c9e 100644
--- a/site/src/components/ActivityFeed.svelte
+++ b/site/src/components/ActivityFeed.svelte
@@ -193,6 +193,16 @@
   ];
 </script>
 
+<!-- Search -->
+<div class="relative mb-4">
+  <input
+    type="search"
+    placeholder="Search activities…"
+    bind:value={query}
+    class="w-full px-4 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white placeholder-zinc-500 text-sm focus:outline-none focus:border-zinc-500 transition-colors"
+  />
+</div>
+
 <!-- Sport filter bar -->
 <div class="flex gap-2 mb-3 flex-wrap">
   {#each sports as s}
@@ -219,16 +229,6 @@
   {/if}
 </div>
 
-<!-- Search -->
-<div class="relative mb-3">
-  <input
-    type="search"
-    placeholder="Search activities…"
-    bind:value={query}
-    class="w-full px-4 py-2 rounded-lg bg-zinc-900 border border-zinc-700 text-white placeholder-zinc-500 text-sm focus:outline-none focus:border-zinc-500 transition-colors"
-  />
-</div>
-
 <!-- Date filter bar -->
 <div class="flex gap-2 mb-6 flex-wrap">
   {#each [{ value: 'all', label: 'All time' }, { value: '7d', label: '7 days' }, { value: '30d', label: '30 days' }, { value: '6mo', label: '6 months' }, ...allYears.map(y => ({ value: y, label: y }))] as d}
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index 1be0c25..33928d6 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -18,7 +18,7 @@ const singleHandle = isSingleUser ? shards[0].handle : null;
 ) : (
   <!-- Multi-user activity feed -->
   <Base title="BincioActivity - Feed">
-    <h1 class="text-2xl font-bold text-white mb-6">Feed</h1>
+    <h1 class="text-2xl font-bold text-white mb-3">Feed</h1>
     <ActivityFeed {base} client:only="svelte" />
   </Base>
 )}