Merge pull request #108 from bob2402/purchases-list-very-long

problem: the list of purchases is sometimes very long

src/components/ProductPurchases.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Button } from '@/components/ui/button';
 	import * as Table from '@/components/ui/table';
 	import { Product, Rocket, ValidateZapPublisher, ZapPurchase } from '@/event_helpers/rockets';
 	import { unixToRelativeTime } from '@/helpers';
@@ -81,6 +82,8 @@
 		});
 	});
 
+	let truncate = writable(true);
+
 	let validatedZapsNotInRocket = derived(
 		[zapsNotInRocket, validPubkeys],
 		([$zapsNotInRocket, $validPubkeys]) => {
@@ -94,6 +97,17 @@
 		}
 	);
 
+	let validatedZapsNotInRocketTruncated = derived(
+		[validatedZapsNotInRocket, truncate],
+		([$validatedZapsNotInRocket, $truncate]) => {
+			let validatedZapsNotInRocketArray = Array.from($validatedZapsNotInRocket);
+			if (validatedZapsNotInRocketArray.length > 6 && $truncate) {
+				validatedZapsNotInRocketArray.length = 6;
+			}
+			return validatedZapsNotInRocketArray;
+		}
+	);
+
 	validatedZapsNotInRocket.subscribe((zaps) => {
 		for (let [_, z] of zaps) {
 			unratifiedZaps.set(z.ZapReceipt.id, z);
@@ -119,7 +133,7 @@
 		</Table.Row>
 	</Table.Header>
 	<Table.Body>
-		{#each $validatedZapsNotInRocket as [id, purchase], _ (id)}
+		{#each $validatedZapsNotInRocketTruncated as [id, purchase], _ (id)}
 			<Table.Row
 				on:click={() => {
 					console.log(purchase.ZapReceipt.rawEvent());
@@ -146,5 +160,14 @@
 				>
 			</Table.Row>
 		{/each}
+		{#if $validatedZapsNotInRocket.size > $validatedZapsNotInRocketTruncated.length}
+			<Button
+				class="mt-2 rounded-full"
+				on:click={() => {
+					truncate.set(false);
+				}}
+				>View {$validatedZapsNotInRocket.size - $validatedZapsNotInRocketTruncated.length} more</Button
+			>
+		{/if}
 	</Table.Body>
 </Table.Root>