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

Replace results cards with sortable, filterable table

Browse Source 
- Compact table view with thumbnail, product name, price, store, link
- Click column headers to sort (toggles asc/desc)
- Filter bar to search within results by product name
- Store dropdown filter when multiple stores present
- Sticky header, hover-reveal "Open" link, sort direction arrows
- Shows "X of Y shown" count when filtering

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
mariosemes
2026-03-26 21:43:32 +01:00
parent c24b06215b
commit 9bdd5c4910
1 changed files with 169 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
src/client/src/routes/results/+page.svelte
View File

@@ -9,6 +9,9 @@
let meta = $state(null);
let loading = $state(true);
let sortBy = $state('price');
let sortAsc = $state(true);
let filterText = $state('');
let filterStore = $state('');
onMount(async () => {
const params = $page.url.searchParams;
@@ -44,15 +47,53 @@
doSearch();
}
let sortedResults = $derived(() => {
const sorted = [...results];
switch (sortBy) {
case 'price': sorted.sort((a, b) => (a.price ?? Infinity) - (b.price ?? Infinity)); break;
case 'price-desc': sorted.sort((a, b) => (b.price ?? -Infinity) - (a.price ?? -Infinity)); break;
case 'name': sorted.sort((a, b) => a.name.localeCompare(b.name)); break;
case 'store': sorted.sort((a, b) => a.storeName.localeCompare(b.storeName)); break;
function handleSort(column) {
if (sortBy === column) {
sortAsc = !sortAsc;
} else {
sortBy = column;
sortAsc = column === 'name' || column === 'store';
}
return sorted;
}
// Unique store names for the filter dropdown
let storeNames = $derived(() => {
const names = [...new Set(results.map(r => r.storeName))];
return names.sort();
});
let filteredAndSorted = $derived(() => {
let items = [...results];
// Text filter
if (filterText) {
const lower = filterText.toLowerCase();
items = items.filter(r => r.name.toLowerCase().includes(lower));
}
// Store filter
if (filterStore) {
items = items.filter(r => r.storeName === filterStore);
}
// Sort
items.sort((a, b) => {
let cmp = 0;
switch (sortBy) {
case 'price':
cmp = (a.price ?? Infinity) - (b.price ?? Infinity);
break;
case 'name':
cmp = a.name.localeCompare(b.name);
break;
case 'store':
cmp = a.storeName.localeCompare(b.storeName);
break;
}
return sortAsc ? cmp : -cmp;
});
return items;
});
function formatPrice(price, currency) {
@@ -60,6 +101,11 @@
try { return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(price); }
catch { return `${currency} ${price.toFixed(2)}`; }
}
function sortIcon(column) {
if (sortBy !== column) return '';
return sortAsc ? '\u2191' : '\u2193';
}
</script>
<div class="h-full flex flex-col">
@@ -71,25 +117,17 @@
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
<input type="text" bind:value={query} placeholder="Search..."
<input type="text" bind:value={query} placeholder="Search products..."
class="w-full pl-9 pr-3 py-1.5 bg-surface-raised border border-surface-border rounded text-sm
text-text-primary placeholder-text-tertiary focus:border-accent/50 focus:outline-none transition-colors" />
</div>
</form>
<div class="flex items-center gap-3">
{#if meta}
<span class="text-2xs text-text-tertiary">
{meta.totalResults} results from {meta.storeCount} stores in {meta.duration}ms
</span>
{/if}
<select bind:value={sortBy} class="input-field w-auto text-xs py-1 px-2">
<option value="price">Price: Low to High</option>
<option value="price-desc">Price: High to Low</option>
<option value="name">Name</option>
<option value="store">Store</option>
</select>
</div>
{#if meta}
<span class="text-2xs text-text-tertiary whitespace-nowrap">
{meta.totalResults} results from {meta.storeCount} stores in {meta.duration}ms
</span>
{/if}
</div>
<!-- Errors -->
@@ -103,19 +141,43 @@
</div>
{/if}
<!-- Filters row -->
{#if !loading && results.length > 0}
<div class="flex-shrink-0 border-b border-surface-border px-6 py-2 flex items-center gap-3">
<div class="relative flex-1 max-w-xs">
<svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3 h-3 text-text-tertiary"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
</svg>
<input type="text" bind:value={filterText} placeholder="Filter results..."
class="w-full pl-8 pr-3 py-1 bg-surface border border-surface-border rounded text-xs
text-text-primary placeholder-text-tertiary focus:border-accent/50 focus:outline-none transition-colors" />
</div>
{#if storeNames().length > 1}
<select bind:value={filterStore} class="input-field w-auto text-xs py-1 px-2">
<option value="">All stores</option>
{#each storeNames() as name}
<option value={name}>{name}</option>
{/each}
</select>
{/if}
<span class="text-2xs text-text-tertiary">
{filteredAndSorted().length} of {results.length} shown
</span>
</div>
{/if}
<!-- Content -->
<div class="flex-1 overflow-y-auto p-6">
<div class="flex-1 overflow-auto">
{#if loading}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
{#each Array(8) as _}
<div class="card p-4 animate-pulse">
<div class="bg-surface-hover h-32 rounded mb-3"></div>
<div class="bg-surface-hover h-3.5 rounded w-3/4 mb-2"></div>
<div class="bg-surface-hover h-5 rounded w-1/3"></div>
</div>
<div class="p-6 space-y-2">
{#each Array(10) as _}
<div class="bg-surface-raised h-10 rounded animate-pulse"></div>
{/each}
</div>
{:else if sortedResults().length === 0}
{:else if results.length === 0}
<div class="flex flex-col items-center justify-center py-20 text-text-tertiary">
<svg class="w-10 h-10 mb-3 text-text-tertiary/50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
@@ -124,33 +186,83 @@
<p class="text-xs mt-1">Try a different search term or check your store configurations.</p>
</div>
{:else}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
{#each sortedResults() as product}
<a href={product.url} target="_blank" rel="noopener noreferrer"
class="card overflow-hidden group hover:border-surface-border-hover transition-colors duration-150">
{#if product.image}
<div class="h-32 bg-surface flex items-center justify-center overflow-hidden">
<img src={product.image} alt={product.name}
class="max-h-full max-w-full object-contain p-3 group-hover:scale-105 transition-transform duration-200" />
</div>
{:else}
<div class="h-32 bg-surface flex items-center justify-center">
<svg class="w-8 h-8 text-text-tertiary/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5" />
</svg>
</div>
{/if}
<table class="w-full">
<thead class="sticky top-0 z-10 bg-surface">
<tr class="border-b border-surface-border">
<th class="w-12 px-6 py-2.5"></th>
<th class="px-4 py-2.5 text-left">
<button onclick={() => handleSort('name')}
class="text-2xs font-medium text-text-tertiary uppercase tracking-wider hover:text-text-secondary transition-colors">
Product {sortIcon('name')}
</button>
</th>
<th class="px-4 py-2.5 text-right">
<button onclick={() => handleSort('price')}
class="text-2xs font-medium text-text-tertiary uppercase tracking-wider hover:text-text-secondary transition-colors">
Price {sortIcon('price')}
</button>
</th>
<th class="px-4 py-2.5 text-left">
<button onclick={() => handleSort('store')}
class="text-2xs font-medium text-text-tertiary uppercase tracking-wider hover:text-text-secondary transition-colors">
Store {sortIcon('store')}
</button>
</th>
<th class="px-6 py-2.5 text-right">
<span class="text-2xs font-medium text-text-tertiary uppercase tracking-wider">Link</span>
</th>
</tr>
</thead>
<tbody>
{#each filteredAndSorted() as product, i}
<tr class="border-b border-surface-border hover:bg-surface-hover/50 transition-colors duration-100 group">
<!-- Thumbnail -->
<td class="px-6 py-2">
{#if product.image}
<div class="w-8 h-8 rounded bg-surface flex items-center justify-center overflow-hidden">
<img src={product.image} alt="" class="max-w-full max-h-full object-contain" />
</div>
{:else}
<div class="w-8 h-8 rounded bg-surface flex items-center justify-center">
<svg class="w-4 h-4 text-text-tertiary/20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5" />
</svg>
</div>
{/if}
</td>
<div class="p-3">
<h3 class="text-xs font-medium text-text-primary line-clamp-2 mb-2 leading-relaxed">{product.name}</h3>
<div class="flex items-center justify-between">
<span class="text-sm font-semibold text-accent-text">{formatPrice(product.price, product.currency)}</span>
<span class="text-2xs text-text-tertiary bg-surface px-1.5 py-0.5 rounded">{product.storeName}</span>
</div>
</div>
</a>
{/each}
</div>
<!-- Product name -->
<td class="px-4 py-2">
<span class="text-sm text-text-primary group-hover:text-white transition-colors line-clamp-1">
{product.name}
</span>
</td>
<!-- Price -->
<td class="px-4 py-2 text-right">
<span class="text-sm font-semibold text-accent-text whitespace-nowrap">
{formatPrice(product.price, product.currency)}
</span>
</td>
<!-- Store -->
<td class="px-4 py-2">
<span class="text-2xs text-text-tertiary bg-surface px-1.5 py-0.5 rounded">
{product.storeName}
</span>
</td>
<!-- Link -->
<td class="px-6 py-2 text-right">
<a href={product.url} target="_blank" rel="noopener noreferrer"
class="text-2xs text-accent-text hover:text-accent transition-colors opacity-0 group-hover:opacity-100">
Open &rarr;
</a>
</td>
</tr>
{/each}
</tbody>
</table>
{/if}
</div>
</div>