Registry page: section filters and results into bordered panels

Author: dooly123

packages/index.html

@@ -83,20 +83,20 @@ <h1 class="mt-3 text-4xl font-extrabold sm:text-5xl">
     <!-- Registry -->
     <div class="mt-10 grid gap-8 lg:grid-cols-[240px_1fr]">
       <!-- Filters -->
-      <aside class="space-y-6 lg:sticky lg:top-8 self-start">
-        <div>
-          <h4 class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-400">Source</h4>
+      <aside class="space-y-4 lg:sticky lg:top-8 self-start">
+        <div class="rounded-2xl border border-gray-200 bg-white/70 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/5">
+          <h4 class="mb-3 text-xs font-semibold uppercase tracking-wide text-gray-400">Source</h4>
           <div id="sourceChips" class="space-y-1"></div>
         </div>
-        <div>
-          <h4 class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-400">Category</h4>
+        <div class="rounded-2xl border border-gray-200 bg-white/70 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/5">
+          <h4 class="mb-3 text-xs font-semibold uppercase tracking-wide text-gray-400">Category</h4>
           <div id="categoryChips" class="space-y-1"></div>
         </div>
       </aside>
 
       <!-- Results -->
-      <section>
-        <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
+      <section class="rounded-2xl border border-gray-200 bg-white/40 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/[0.03] sm:p-5">
+        <div class="mb-4 flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 pb-4 dark:border-white/10">
           <div id="count" class="text-sm text-gray-600 dark:text-gray-300"></div>
           <select id="sort" class="rounded-xl border border-gray-200 bg-white/70 px-3 py-2 text-sm outline-none dark:border-white/10 dark:bg-white/5">
             <option value="popular">Sort: Popular</option>