problem: product page doesn't use product groups

src/components/MeritsAndSatflow.svelte

@@ -2,7 +2,6 @@
 	import * as Card from '@/components/ui/card';
 	import * as Table from '@/components/ui/table';
 	import { Rocket } from '@/event_helpers/rockets';
-	import type { NDKEvent } from '@nostr-dev-kit/ndk';
 	import { writable } from 'svelte/store';
 	import Pie from './Pie.svelte';
 	import { Avatar, Name } from '@nostr-dev-kit/ndk-svelte-components';

src/components/ProductCard.svelte

@@ -11,7 +11,10 @@
 {#if product.Validate()}
 	<Card.Root>
 		<Card.Header>
-			<Card.Title>{product.Group()} {#if product.Option().length > 0}(variant: {product.Option()}){/if}</Card.Title>
+			<Card.Title
+				>{product.Group()}
+				{#if product.Option().length > 0}(variant: {product.Option()}){/if}</Card.Title
+			>
 			<Card.Description>{product.Description()}</Card.Description>
 		</Card.Header>
 
@@ -27,9 +30,11 @@
 				</div>
 			</Card.Content>
 		{:else}
-			<img src={product.CoverImage()} alt="cover" class="aspect-square object-cover" />
+			<div class="grid place-items-center">
+				<img src={product.CoverImage()} alt="cover" class="aspect-square object-cover" />
+			</div>
 		{/if}
-		<Card.Footer class="flex justify-center pt-2">
+		<Card.Footer class="flex items-center justify-center pt-2">
 			{#if !rocket.Products().get(product.ID())}
 				<AddProductToRocket {product} {rocket} />
 			{:else}

src/components/ProductFomo.svelte

@@ -1,17 +1,13 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { Product, Rocket } from '@/event_helpers/rockets';
-	import ProductCardFromId from './ProductCardFromID.svelte';
-	import ProductPurchases from './ProductPurchases.svelte';
-	import type { NDKEvent } from '@nostr-dev-kit/ndk';
 	import { fetchEvent } from '@/event_helpers/products';
 	import { ndk } from '@/ndk';
 	import { derived, writable } from 'svelte/store';
-	import * as Pagination from '@/components/ui/pagination';
+	import ProductGroup from './ProductGroup.svelte';
-	import { ChevronLeft, ChevronRight } from 'lucide-svelte';
 
 	export let rocket: Rocket;
-	export let unratifiedZaps:Map<string, number>;
+	export let unratifiedZaps: Map<string, number>;
 
 	let products = writable(new Map<string, Product>());
 
@@ -19,10 +15,10 @@
 		fetchEvent(id, $ndk).then((e) => {
 			let _p = new Product(e);
 			if (_p.Validate()) {
-				products.update(existing => {
+				products.update((existing) => {
-					existing.set(id, _p)
+					existing.set(id, _p);
-					return existing
+					return existing;
-				})
+				});
 			}
 		});
 	}
@@ -30,18 +26,23 @@
 	let groups = derived(products, ($products) => {
 		let productGroups = new Map<string, Map<string, Product>>();
 		for (let [id, p] of $products) {
-			console.log(p.Group())
+			console.log(p.Group());
 			if (!productGroups.get(p.Group())) {
 				productGroups.set(p.Group(), new Map());
 			}
 			let existing = productGroups.get(p.Group())!;
 			existing.set(id, p);
 		}
-		let productGroupArray = new Map<string, Product[]>()
+		let productGroupArray = new Map<string, Product[]>();
 		for (let [id, m] of productGroups) {
-			productGroupArray.set(id, Array.from(m, ([_, p]) => {return p}))
+			productGroupArray.set(
+				id,
+				Array.from(m, ([_, p]) => {
+					return p;
+				})
+			);
 		}
-		return productGroupArray
+		return productGroupArray;
 	});
 </script>
 
@@ -52,53 +53,8 @@
 	</Card.Header>
 	<Card.Content class="grid grid-cols-1 gap-2">
 		{#each $groups as [identifier, products] (identifier)}
-		<Pagination.Root count={products.length} perPage={1} siblingCount={1} let:pages let:currentPage>
+			<ProductGroup {products} {rocket} bind:unratifiedZaps />
-			{#if currentPage} <ProductCardFromId {rocket} product={products[currentPage-1]}>
-				
-				<ProductPurchases bind:unratifiedZaps {rocket} {products} />
-			</ProductCardFromId>{/if}
-			{#if products.length > 1}
-			<Pagination.Content>
-			  <Pagination.Item>
-				<Pagination.PrevButton>
-				  <ChevronLeft class="h-4 w-4" />
-				  <span class="hidden sm:block">Previous Option</span>
-				</Pagination.PrevButton>
-			  </Pagination.Item>
-			  {#each pages as page (page.key)}
-				{#if page.type === "ellipsis"}
-				  <Pagination.Item>
-					<Pagination.Ellipsis />
-				  </Pagination.Item>
-				{:else}
-				  <Pagination.Item>
-					<Pagination.Link {page} isActive={currentPage === page.value}>
-					  {page.value}
-					</Pagination.Link>
-				  </Pagination.Item>
-				{/if}
-			  {/each}
-			  <Pagination.Item>
-				<Pagination.NextButton>
-				  <span class="hidden sm:block">Next Option</span>
-				  <ChevronRight class="h-4 w-4" />
-				</Pagination.NextButton>
-			  </Pagination.Item>
-			</Pagination.Content>	
-			{/if}	
-		  </Pagination.Root>
-		  
-		<!-- {#each map as [id, product]} {#if true}
-		
-		{/if}{/each} -->
 		{/each}
-		<!-- {#each products as [id, product] (id)}
-			<div>
-				<ProductCardFromId {rocket} {product}>
-					<ProductPurchases bind:unratifiedZaps {rocket} product={rocket.Products().get(id)} />
-				</ProductCardFromId>
-			</div>
-		{/each} -->
 	</Card.Content>
 	<Card.Footer></Card.Footer>
 </Card.Root>

src/components/ProductGroup.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import ProductCardFromId from './ProductCardFromID.svelte';
+	import ProductPurchases from './ProductPurchases.svelte';
+	import * as Pagination from '@/components/ui/pagination';
+	import { ChevronLeft, ChevronRight } from 'lucide-svelte';
+	import { Product, Rocket } from '@/event_helpers/rockets';
+
+	export let rocket: Rocket;
+	export let products: Product[];
+	export let unratifiedZaps: Map<string, number> | undefined = undefined;
+</script>
+
+<Pagination.Root count={products.length} perPage={1} siblingCount={1} let:pages let:currentPage>
+	{#if currentPage}
+		<ProductCardFromId {rocket} product={products[currentPage - 1]}>
+			{#if unratifiedZaps}
+				<ProductPurchases bind:unratifiedZaps {rocket} {products} />
+			{/if}
+		</ProductCardFromId>
+	{/if}
+	{#if products.length > 1}
+		<Pagination.Content>
+			<Pagination.Item>
+				<Pagination.PrevButton>
+					<ChevronLeft class="h-4 w-4" />
+					<span class="hidden sm:block">Previous Option</span>
+				</Pagination.PrevButton>
+			</Pagination.Item>
+			{#each pages as page (page.key)}
+				{#if page.type === 'ellipsis'}
+					<Pagination.Item>
+						<Pagination.Ellipsis />
+					</Pagination.Item>
+				{:else}
+					<Pagination.Item>
+						<Pagination.Link {page} isActive={currentPage === page.value}>
+							{page.value}
+						</Pagination.Link>
+					</Pagination.Item>
+				{/if}
+			{/each}
+			<Pagination.Item>
+				<Pagination.NextButton>
+					<span class="hidden sm:block">Next Option</span>
+					<ChevronRight class="h-4 w-4" />
+				</Pagination.NextButton>
+			</Pagination.Item>
+		</Pagination.Content>
+	{/if}
+</Pagination.Root>

src/routes/products/+page.svelte

@@ -5,8 +5,8 @@
 	import { onDestroy } from 'svelte';
 	import { derived } from 'svelte/store';
 	import Heading from '../../components/Heading.svelte';
-	import ProductCard from '../../components/ProductCard.svelte';
 	import { Product, Rocket } from '@/event_helpers/rockets';
+	import ProductGroup from '../../components/ProductGroup.svelte';
 
 	let rockets: NDKEventStore<NDKEvent> | undefined;
 	let products: NDKEventStore<NDKEvent> | undefined;
@@ -26,30 +26,41 @@
 	});
 
 	let productsToRender = derived([rocketsWithProducts, products], ([$rocketsWP, $products]) => {
-		let data = new Map<NDKEvent, NDKEvent[]>();
+		let data = new Map<Rocket, Map<string, Product[]>>();
 		let productMap = new Map($products.map((e) => [e.id, e]));
 		for (let r of $rocketsWP) {
-			let events = [];
+			let events: Product[] = [];
 			for (let p of r.getMatchingTags('product')) {
 				let productEvent = productMap.get(p[1].split(':')[0]);
 				if (productEvent) {
-					events.push(productEvent);
+					events.push(new Product(productEvent));
 				}
 			}
 			if (events.length > 0) {
-				data.set(r, events);
+				data.set(new Rocket(r), groups(events));
 			}
 		}
+
+		function groups(products: Product[]): Map</* group name*/ string, Product[]> {
+			return products.reduce((acc, product) => {
+				const group = product.Group();
+				if (!acc.has(group)) {
+					acc.set(group, []);
+				}
+				acc.get(group)!.push(product);
+				return acc;
+			}, new Map<string, Product[]>());
+		}
 		return data;
 	});
 </script>
 
 {#if productsToRender && $productsToRender}
-	{#each $productsToRender as [r, p] (r.id)}
+	{#each $productsToRender as [rocket, groups] (rocket.Event.id)}
-		<Heading title={r.dTag} />
+		<Heading title={rocket.Event.dTag} />
-		<div class="grid gap-2" style="grid-template-columns: repeat(auto-fit, 350px);">
+		<div class="grid gap-4" style="grid-template-columns: repeat(auto-fit, 350px);">
-			{#each p as product (product.id)}
+			{#each groups as [identifier, products] (identifier)}
-				<ProductCard product={new Product(product)} rocket={new Rocket(r)} />
+				<ProductGroup {products} {rocket} />
 			{/each}
 		</div>
 	{/each}