problem: bad layout

src/components/CreateNewProduct.svelte

@@ -48,7 +48,7 @@
 </script>
 
 <Dialog.Root>
-	<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>Create a Product</Dialog.Trigger>
+	<Dialog.Trigger class={buttonVariants({ variant: 'default' })}>Propose a New Product</Dialog.Trigger>
 	<Dialog.Content class="sm:max-w-[425px]">
 		<Todo text={["validate sane field entries", "name.length > 5 < 20", "description length > 20", "image url resolves and is image"]} />
 		{#if !currentUser}

src/components/ProductFomo.svelte

@@ -1,30 +1,40 @@
 <script lang="ts">
+	import * as Card from '$lib/components/ui/card/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
+	import { RocketProduct } from '@/event_helpers/rockets';
+	import type { NDKEvent } from '@nostr-dev-kit/ndk';
+	import ProductCardFromId from './ProductCardFromID.svelte';
+	import ProductPurchases from './ProductPurchases.svelte';
+	import { writable, type Writable } from 'svelte/store';
 
-    import * as Card from "$lib/components/ui/card/index.js";
+	//export let product:RocketProduct;
-    import * as Table from "$lib/components/ui/table/index.js";
+	export let rocket: NDKEvent;
-    import type { RocketProduct } from "@/event_helpers/rockets";
-    import type { NDKEvent } from "@nostr-dev-kit/ndk";
-    import ProductCardFromId from "./ProductCardFromID.svelte";
-	import ProductPurchases from "./ProductPurchases.svelte";
 
-    export let product:RocketProduct;
+	let products: Writable<RocketProduct[]> = writable([]);
-    export let rocket:NDKEvent;
 
-
+	$: {
-  
+		//fetch products from rocket and populate a store of them
+		let _products: RocketProduct[] = [];
+		for (let p of rocket.getMatchingTags('product')) {
+			_products.push(new RocketProduct(p));
+		}
+		products.set(_products);
+	}
+</script>
 
 <Card.Root class="sm:col-span-3">
-<Card.Root class="sm:col-span-3">
+	<Card.Header class="pb-3">
-    <Card.Header class="pb-3">
+		<Card.Title>Products and Purchases</Card.Title>
-      <Card.Title>Products and Purchases</Card.Title>
+		<Card.Description class="grid grid-cols-2">
-      <Card.Description class="grid grid-cols-2">
+            {#each $products as product}
-        <div class=" grid-cols-1">
+			<div class=" grid-cols-1">
-          <ProductCardFromId {rocket} productID={product.ID} />
+				<ProductCardFromId {rocket} productID={product.ID} />
-      </div>
+			</div>
-      <div class="grid-cols-1">
+			<div class="grid-cols-1">
-        <ProductPurchases {rocket} {product} />
+				<ProductPurchases {rocket} {product} />
-      </div>
+			</div>
-      </Card.Description>
+            {/each}
-    </Card.Header>
+		</Card.Description>
-    <Card.Footer>
+	</Card.Header>
-    </Card.Footer>
+	<Card.Footer></Card.Footer>
+</Card.Root>

src/components/ProductPurchases.svelte

@@ -79,15 +79,6 @@
 	//todo: validate zaps against product, publish store of all successful payments including those already in rocket. Publish another store with successful payments that are not yet included in rocket state so we can update the state and republish.
 </script>
 
-{#each $zaps as z}<a
-		href="#"
-		on:click={() => {
-			console.log(z.rawEvent());
-		}}>{z.id}</a
-	><br />{/each}
-
-{#each $newZaps as [id, zapReceipt]}{/each}
-
 <Card.Root>
 	<Card.Header class="px-7">
 		<Card.Title>Purchases</Card.Title>
@@ -106,7 +97,7 @@
 			</Table.Header>
 			<Table.Body>
 				{#each $newZaps as [id, zapReceipt]}
-					<Table.Row class=" bg-red-800">
+					<Table.Row on:click={()=>{console.log(getZapRequest(zapReceipt)?.rawEvent())}} class=" bg-red-800">
 						<Table.Cell>
 							<div class="flex flex-nowrap">
 								<Avatar

src/components/ProposedProducts.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { ndk } from '@/ndk';
+	import type { NDKEvent } from '@nostr-dev-kit/ndk';
+	import { onDestroy } from 'svelte';
+	import ProductCard from './ProductCard.svelte';
+	import { derived } from 'svelte/store';
+
+	export let rocket: NDKEvent;
+
+	let proposals = $ndk.storeSubscribe(
+		[
+			{ '#a': [`31108:${rocket.author.pubkey}:${rocket.dTag}`], kinds: [1908 as number] }
+		],
+		{ subId: rocket.dTag }
+	);
+
+    onDestroy(()=>{
+        proposals.unsubscribe()
+    })
+
+    let unratified = derived(proposals, ($proposals)=>{
+        return $proposals.filter((p)=>{
+            let found = false;
+            for (let product of rocket.getMatchingTags("product")){
+                if (product[1].split(":")[0] == p.id) {
+                    found = true
+                }
+            }
+            return !found
+        })
+    })
+</script>
+
+{#each $unratified as r}<ProductCard {rocket} product={r} />{/each}

src/components/RocketDashboard.svelte

@@ -1,57 +1,60 @@
 <script lang="ts">
+	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
+	import { RocketProduct } from '@/event_helpers/rockets';
+	import type { NDKEvent } from '@nostr-dev-kit/ndk';
+	import { writable, type Readable, type Writable } from 'svelte/store';
+	import MeritsAndSatflow from './MeritsAndSatflow.svelte';
+	import ProductFomo from './ProductFomo.svelte';
+	import Todo from './Todo.svelte';
+	import ProductCard from './ProductCard.svelte';
+	import CreateNewProduct from './CreateNewProduct.svelte';
+	import type { ExtendedBaseType } from '@nostr-dev-kit/ndk-svelte';
+	import ProposedProducts from './ProposedProducts.svelte';
+	import * as Card from '@/components/ui/card';
 
-    import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
+	export let rocket: NDKEvent;
-    import { RocketProduct } from "@/event_helpers/rockets";
+</script>
-    import type { NDKEvent } from "@nostr-dev-kit/ndk";
-    import { writable, type Writable } from "svelte/store";
-    import MeritsAndSatflow from "./MeritsAndSatflow.svelte";
-    import ProductFomo from "./ProductFomo.svelte";
 
-    export let rocket:NDKEvent;
+<div class="flex flex-col sm:gap-4">
+	<header
+		class="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6"
+	>
+		<Breadcrumb.Root class="hidden md:flex">
+			<Breadcrumb.List>
+				<Breadcrumb.Item>
+					<Breadcrumb.Link href="##">{rocket.getMatchingTags('d')[0][1]}</Breadcrumb.Link>
+				</Breadcrumb.Item>
+				<Breadcrumb.Separator />
+				<Breadcrumb.Item>
+					<Breadcrumb.Page>Dashboard</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"
+	>
+		<MeritsAndSatflow {rocket} />
 
+		<ProductFomo {rocket} />
 
-    let products: Writable<RocketProduct[]> = writable([])
+		<ProposedProducts {rocket} />
-
-    $: {
-      //fetch products from rocket and populate a store of them
-      let _products:RocketProduct[] = []
-      for (let p of rocket.getMatchingTags("product")) {
-        _products.push(new RocketProduct(p))
-      }
-      products.set(_products)
-    }
-
-    
-    
-
-  
-</script>
-    <div class="flex flex-col sm:gap-4">
-      <header
-        class="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6"
-      >
-        
-        <Breadcrumb.Root class="hidden md:flex">
-          <Breadcrumb.List>
-            <Breadcrumb.Item>
-              <Breadcrumb.Link href="##">{rocket.getMatchingTags('d')[0][1]}</Breadcrumb.Link>
-            </Breadcrumb.Item>
-            <Breadcrumb.Separator />
-            <Breadcrumb.Item>
-              <Breadcrumb.Page>Dashboard</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-8 lg:grid-cols-3 xl:grid-cols-3"
-    >
-      <MeritsAndSatflow {rocket} />
-
-      {#each $products as product} 
-      <ProductFomo {rocket} {product} />
-      {/each}
-      </main>
 
+		<Card.Root class="sm:col-span-3">
+			<Card.Header class="pb-3">
+				<Card.Title>Actions</Card.Title>
+				<Card.Description class="grid grid-cols-6">
+					<CreateNewProduct rocketEvent={rocket} />
+				</Card.Description>
+			</Card.Header>
+			<Card.Footer></Card.Footer>
+		</Card.Root>
 
+		<Todo
+			text={[
+				'delete rocket (if current user is rocket creator)',
+				'modify relevant data and republish event according to https://github.com/nostrocket/NIPS/blob/main/31108.md and https://github.com/nostrocket/NIPS/blob/main/MSBR334000.md '
+			]}
+		/>
+	</main>
+</div>

src/routes/rockets/[ignition]/+page.svelte

@@ -92,16 +92,16 @@
 </script>
 {#if latestRocketEvent && $latestRocketEvent}
 <RocketDashboard rocket={$latestRocketEvent} />
+{:else}
+	<Heading title="Fetching events for the requested rocket" />
+	IGNITION: {rIgnitionOrActual} <br />
+	NAME: {rName} <br />
+	PUBKEY: {rPubkey} <br />
 {/if}
 {#if latestRocketEvent && $latestRocketEvent && false}
 	<Heading title={$latestRocketEvent.getMatchingTags('d')[0][1]} />
 
-	<Todo
+
-		text={[
-			'delete rocket (if current user is rocket creator)',
-			'modify relevant data and republish event according to https://github.com/nostrocket/NIPS/blob/main/31108.md and https://github.com/nostrocket/NIPS/blob/main/MSBR334000.md '
-		]}
-	/>
 	<div class="flex flex-col gap-1 text-left">
 		<h3 class="text-xl font-bold tracking-tight">
 			{$latestRocketEvent.getMatchingTags('d')[0][1].toLocaleUpperCase()} Products
@@ -122,9 +122,4 @@
 	</div>
 	{#each $candidateProducts as r}<ProductCard rocket={$latestRocketEvent} product={r} />{/each}
 	<CreateNewProduct rocketEvent={$latestRocketEvent} />
-{:else}
-	<Heading title="Fetching events for the requested rocket" />
-	IGNITION: {rIgnitionOrActual} <br />
-	NAME: {rName} <br />
-	PUBKEY: {rPubkey} <br />
 {/if}