problem: can't view merit request detail

src/components/MeritCard.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import * as Card from '$lib/components/ui/card/index.js';
+	import type { MeritRequest } from '@/event_helpers/merits';
+	import { ndk } from '@/ndk';
+	import type { NDKEvent } from '@nostr-dev-kit/ndk';
+	import { Avatar, Name } from '@nostr-dev-kit/ndk-svelte-components';
+
+	export let merit:MeritRequest;
+	export let rocket:NDKEvent;
+</script>
+
+
+	<Card.Root class="m-2">
+		<Card.Header>
+			<Card.Title>{merit.Problem()}</Card.Title>
+			<Card.Description>
+				<div class="flex flex-nowrap">
+					<Avatar
+						ndk={$ndk}
+						pubkey={merit.Pubkey}
+						class="h-10 w-10 flex-none rounded-full object-cover"
+					/>
+					<Name
+						ndk={$ndk}
+						pubkey={merit.Pubkey}
+						class="hidden max-w-32 truncate p-2 md:inline-block"
+					/>
+				</div>
+			</Card.Description>
+		</Card.Header>
+		<Card.Content></Card.Content>
+		<Card.Footer class="flex justify-between">
+			VOTE YES VOTE NO
+		</Card.Footer>
+	</Card.Root>
+

src/components/MeritRequestDashboard.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+	import type { MeritRequest } from '@/event_helpers/merits';
+	import { getRocketURL } from '@/helpers';
+	import type { NDKEvent } from '@nostr-dev-kit/ndk';
+	import MeritCard from './MeritCard.svelte';
+
+	export let rocket: NDKEvent;
+	export let merit: MeritRequest;
+</script>
+
+<div class="flex flex-col sm:gap-4">
+	<header class="flex items-center">
+		<Breadcrumb.Root class="flex">
+			<Breadcrumb.List>
+				<Breadcrumb.Item>
+					<Breadcrumb.Link href={`${base}/rockets/${getRocketURL(rocket)}`}
+						>{rocket.getMatchingTags('d')[0][1]}</Breadcrumb.Link
+					>
+				</Breadcrumb.Item>
+				<Breadcrumb.Separator />
+				<Breadcrumb.Item>
+					<Breadcrumb.Link href={`${base}/rockets/${getRocketURL(rocket)}`}>Merit Requests</Breadcrumb.Link>
+				</Breadcrumb.Item>
+				<Breadcrumb.Separator />
+				<Breadcrumb.Item>
+					<Breadcrumb.Page>{merit.Problem()}</Breadcrumb.Page>
+				</Breadcrumb.Item>
+			</Breadcrumb.List>
+		</Breadcrumb.Root>
+	</header>
+	<main
+		class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-2 lg:grid-cols-3 xl:grid-cols-3"
+	>
+	<MeritCard {rocket} {merit} />
+</main>
+</div>

src/components/MeritRequests.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 	import * as Card from '@/components/ui/card';
 	import * as Table from '@/components/ui/table';
 	import { MeritRequest } from '@/event_helpers/merits';
-	import { ZapPurchase, type RocketProduct } from '@/event_helpers/rockets';
 	import { unixToRelativeTime } from '@/helpers';
 	import { ndk } from '@/ndk';
 	import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 	import { Avatar, Name } from '@nostr-dev-kit/ndk-svelte-components';
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy } from 'svelte';
 	import { derived } from 'svelte/store';
 
 	export let rocket: NDKEvent;
@@ -23,14 +24,11 @@
 		_merits?.unsubscribe();
 	});
 
-
-
-
 	let merits = derived(_merits, ($merits) => {
 		let map = new Map<string, MeritRequest>();
 		for (let z of $merits) {
 			let meritRequest = new MeritRequest(z);
-			if (meritRequest.Valid(rocket)) {
+			if (meritRequest.BasicValidation()) {
 				map.set(meritRequest.ID, meritRequest);
 			}
 		}
@@ -43,19 +41,17 @@
 <Card.Root class="sm:col-span-3">
 	<Card.Header class="px-7">
 		<Card.Title>Merit Requests</Card.Title>
-		<Card.Description
-			>Merit Requests</Card.Description
-		>
+		<Card.Description>Merit Requests</Card.Description>
 	</Card.Header>
 	<Card.Content>
 		<Table.Root>
 			<Table.Header>
 				<Table.Row>
 					<Table.Head>Contributor</Table.Head>
-					<Table.Head class="hidden md:table-cell text-left">Problem</Table.Head>
+					<Table.Head class="hidden text-left md:table-cell">Problem</Table.Head>
 					<Table.Head class="table-cell">Amount (Sats)</Table.Head>
 					<Table.Head class="table-cell">Merits</Table.Head>
-					<Table.Head class="hidden md:table-cell text-right">When</Table.Head>
+					<Table.Head class="hidden text-right md:table-cell">When</Table.Head>
 				</Table.Row>
 			</Table.Header>
 			<Table.Body>
@@ -63,8 +59,9 @@
 					<Table.Row
 						on:click={() => {
 							console.log(merit.Request.rawEvent());
+							goto(`${base}/rockets/merits/${merit.ID}`);
 						}}
-						class="bg-accent cursor-pointer"
+						class="cursor-pointer bg-accent"
 					>
 						<Table.Cell>
 							<div class="flex flex-nowrap">
@@ -76,16 +73,14 @@
 								<Name
 									ndk={$ndk}
 									pubkey={merit.Pubkey}
-									class="hidden md:inline-block max-w-32 truncate p-2"
+									class="hidden max-w-32 truncate p-2 md:inline-block"
 								/>
 							</div>
 						</Table.Cell>
-						<Table.Cell class="hidden md:table-cell text-left"
-						>{merit.Problem()}</Table.Cell
-					>
+						<Table.Cell class="hidden text-left md:table-cell">{merit.Problem()}</Table.Cell>
 						<Table.Cell class="table-cell">{merit.Sats}</Table.Cell>
 						<Table.Cell class="table-cell">{merit.Merits}</Table.Cell>
-						<Table.Cell class="hidden md:table-cell text-right"
+						<Table.Cell class="hidden text-right md:table-cell"
 							>{unixToRelativeTime(merit.TimeStamp * 1000)}</Table.Cell
 						>
 					</Table.Row>