msemes/PriceHunter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace store badge chips with vertical checkbox list

Browse Source 
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>
This commit is contained in:
mariosemes
2026-03-26 23:00:06 +01:00
parent d9a3693469
commit 942d252663
1 changed files with 18 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/client/src/routes/+page.svelte
View File

@@ -127,57 +127,50 @@
<!-- Store picker by category --> <!-- Store picker by category -->
{#if storesByCategory().length > 0} {#if storesByCategory().length > 0}
<div class="mt-6 space-y-3"> <div class="mt-6 space-y-4">
{#each storesByCategory() as group} {#each storesByCategory() as group}
<div> <div>
<!-- Category header --> <!-- Category header -->
<button <button
onclick={() => toggleCategory(group.category.id)} 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) {isCategorySelected(group.category.id)
? 'border-accent/50 bg-accent/20' ? 'border-accent bg-accent'
: isCategoryPartial(group.category.id) : isCategoryPartial(group.category.id)
? 'border-accent/30 bg-accent/10' ? 'border-accent bg-accent/50'
: 'border-text-tertiary/30'}"> : 'border-text-tertiary/40'}">
{#if isCategorySelected(group.category.id)} {#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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg> </svg>
{:else if isCategoryPartial(group.category.id)} {: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} {/if}
</span> </span>
<span class="text-2xs font-medium uppercase tracking-wider transition-colors <span class="text-xs font-medium text-text-primary">{group.category.name}</span>
{isCategorySelected(group.category.id) ? 'text-text-secondary' : 'text-text-tertiary'} <span class="text-2xs text-text-tertiary">({group.stores.length})</span>
group-hover/cat:text-text-primary"
style="color: {isCategorySelected(group.category.id) ? group.category.color : ''}">
{group.category.name}
</span>
</button> </button>
<!-- Store chips --> <!-- Store list -->
<div class="flex flex-wrap gap-1.5 pl-5"> <div class="pl-6 space-y-0.5">
{#each group.stores as store} {#each group.stores as store}
<button <button
onclick={() => toggleStore(store.id)} onclick={() => toggleStore(store.id)}
class="flex items-center gap-1.5 text-2xs px-2 py-1 rounded border transition-colors duration-100 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"
{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'}"
> >
<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) {selectedStoreIds.has(store.id)
? 'border-accent/50 bg-accent/20' ? 'border-accent bg-accent'
: 'border-text-tertiary/30'}"> : 'border-text-tertiary/40'}">
{#if selectedStoreIds.has(store.id)} {#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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg> </svg>
{/if} {/if}
</span> </span>
{store.name} <span class="text-xs transition-colors {selectedStoreIds.has(store.id) ? 'text-text-primary' : 'text-text-tertiary'}">{store.name}</span>
</button> </button>
{/each} {/each}
</div> </div>