From 942d2526633edd8e5506c7ca6e94b4317b33f396 Mon Sep 17 00:00:00 2001
From: mariosemes <mario.semes@gmail.com>
Date: Thu, 26 Mar 2026 23:00:06 +0100
Subject: [PATCH] Replace store badge chips with vertical checkbox list

Clean vertical layout with category headers and indented store
checkboxes. Filled purple checkbox when selected, empty border
when not. Hover highlight on each row.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/src/routes/+page.svelte | 43 +++++++++++++-----------------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/client/src/routes/+page.svelte b/src/client/src/routes/+page.svelte
index a2e5482..c264daf 100644
--- a/src/client/src/routes/+page.svelte
+++ b/src/client/src/routes/+page.svelte
@@ -127,57 +127,50 @@
 
     <!-- Store picker by category -->
     {#if storesByCategory().length > 0}
-      <div class="mt-6 space-y-3">
+      <div class="mt-6 space-y-4">
         {#each storesByCategory() as group}
           <div>
             <!-- Category header -->
             <button
               onclick={() => toggleCategory(group.category.id)}
-              class="flex items-center gap-2 mb-1.5 group/cat"
+              class="flex items-center gap-2.5 mb-1 w-full text-left hover:bg-surface-hover/50 -mx-2 px-2 py-1 rounded transition-colors"
             >
-              <span class="w-3 h-3 rounded-sm border flex items-center justify-center flex-shrink-0 transition-colors
+              <span class="w-3.5 h-3.5 rounded border flex items-center justify-center flex-shrink-0 transition-colors
                 {isCategorySelected(group.category.id)
-                  ? 'border-accent/50 bg-accent/20'
+                  ? 'border-accent bg-accent'
                   : isCategoryPartial(group.category.id)
-                    ? 'border-accent/30 bg-accent/10'
-                    : 'border-text-tertiary/30'}">
+                    ? 'border-accent bg-accent/50'
+                    : 'border-text-tertiary/40'}">
                 {#if isCategorySelected(group.category.id)}
-                  <svg class="w-2 h-2 text-accent-text" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+                  <svg class="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                     <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                   </svg>
                 {:else if isCategoryPartial(group.category.id)}
-                  <span class="w-1.5 h-0.5 bg-accent-text rounded-full"></span>
+                  <span class="w-2 h-0.5 bg-white rounded-full"></span>
                 {/if}
               </span>
-              <span class="text-2xs font-medium uppercase tracking-wider transition-colors
-                {isCategorySelected(group.category.id) ? 'text-text-secondary' : 'text-text-tertiary'}
-                group-hover/cat:text-text-primary"
-                style="color: {isCategorySelected(group.category.id) ? group.category.color : ''}">
-                {group.category.name}
-              </span>
+              <span class="text-xs font-medium text-text-primary">{group.category.name}</span>
+              <span class="text-2xs text-text-tertiary">({group.stores.length})</span>
             </button>
 
-            <!-- Store chips -->
-            <div class="flex flex-wrap gap-1.5 pl-5">
+            <!-- Store list -->
+            <div class="pl-6 space-y-0.5">
               {#each group.stores as store}
                 <button
                   onclick={() => toggleStore(store.id)}
-                  class="flex items-center gap-1.5 text-2xs px-2 py-1 rounded border transition-colors duration-100
-                    {selectedStoreIds.has(store.id)
-                      ? 'bg-accent-muted border-accent/30 text-accent-text hover:bg-accent/20'
-                      : 'bg-surface border-surface-border text-text-tertiary line-through opacity-50 hover:opacity-75'}"
+                  class="flex items-center gap-2.5 w-full text-left -mx-2 px-2 py-1 rounded transition-colors hover:bg-surface-hover/50"
                 >
-                  <span class="w-3 h-3 rounded-sm border flex items-center justify-center flex-shrink-0
+                  <span class="w-3.5 h-3.5 rounded border flex items-center justify-center flex-shrink-0 transition-colors
                     {selectedStoreIds.has(store.id)
-                      ? 'border-accent/50 bg-accent/20'
-                      : 'border-text-tertiary/30'}">
+                      ? 'border-accent bg-accent'
+                      : 'border-text-tertiary/40'}">
                     {#if selectedStoreIds.has(store.id)}
-                      <svg class="w-2 h-2 text-accent-text" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+                      <svg class="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                       </svg>
                     {/if}
                   </span>
-                  {store.name}
+                  <span class="text-xs transition-colors {selectedStoreIds.has(store.id) ? 'text-text-primary' : 'text-text-tertiary'}">{store.name}</span>
                 </button>
               {/each}
             </div>