problem: rocket card isn't very interesting

package-lock.json

@@ -25,7 +25,7 @@
 				"formsnap": "^1.0.0",
 				"immutable": "^4.3.7",
 				"js-sha256": "^0.11.0",
-				"lucide-svelte": "^0.383.0",
+				"lucide-svelte": "^0.428.0",
 				"mode-watcher": "^0.3.0",
 				"paneforge": "^0.0.4",
 				"qrious": "^4.0.2",
@@ -3577,9 +3577,9 @@
 			}
 		},
 		"node_modules/lucide-svelte": {
-			"version": "0.383.0",
-			"resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-0.383.0.tgz",
-			"integrity": "sha512-jA4fd9v1gLuE/iNszC7VyIexDnWX06bYpFFTPfBwk0FKh3Paf7FULgotQ8UUY1Lsr6JIMWASh7zKhI2f1bePFw==",
+			"version": "0.428.0",
+			"resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-0.428.0.tgz",
+			"integrity": "sha512-XiwnbKEwPiwbYfhPRASbIuGwF9zqaSbQahpNFNLNpIsZ/Wi8nimpkqq28pb3U6EqBOsFrcRtcrMO5CNN8dGr8Q==",
 			"peerDependencies": {
 				"svelte": "^3 || ^4 || ^5.0.0-next.42"
 			}

package.json

@@ -55,7 +55,7 @@
 		"formsnap": "^1.0.0",
 		"immutable": "^4.3.7",
 		"js-sha256": "^0.11.0",
-		"lucide-svelte": "^0.383.0",
+		"lucide-svelte": "^0.428.0",
 		"mode-watcher": "^0.3.0",
 		"paneforge": "^0.0.4",
 		"qrious": "^4.0.2",

src/components/AssociatedBitcoinAddresses.svelte

@@ -74,8 +74,8 @@
 			<Table.Header>
 				<Table.Row>
 					<Table.Head class="w-[200px]">Sponsor</Table.Head>
-					<Table.Head class="hidden text-left md:table-cell">Amount (Sats)</Table.Head>
-					<Table.Head class="hidden text-left md:table-cell">CuckLoserBucks</Table.Head>
+					<Table.Head class="table-cell text-left">Sats</Table.Head>
+					<Table.Head class="table-cell text-left">CuckLoserBucks</Table.Head>
 				</Table.Row>
 			</Table.Header>
 			<Table.Body>
@@ -95,10 +95,10 @@
 								/>
 							</div>
 						</Table.Cell>
-						<Table.Cell class="hidden text-left md:table-cell">
+						<Table.Cell class="table-cell text-left">
 							{amount.toLocaleString()}
 						</Table.Cell>
-						<Table.Cell class="hidden text-left md:table-cell">
+						<Table.Cell class="table-cell text-left">
 							${Math.floor((amount / 100000000) * cuckprice).toLocaleString()}
 						</Table.Cell>
 					</Table.Row>

src/components/BadgeMaker.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Badge } from '@/components/ui/badge';
+
+	export let left = false;
+	export let right = false;
+</script>
+
+<div class="m-1 flex flex-nowrap items-stretch {left ? 'mr-auto' : ''} {right ? 'ml-auto' : ''}">
+	<Badge variant="nostr" class="mr-0 rounded-none p-0"><slot name="icon" /></Badge><Badge
+		variant="outline"
+		class="rounded-none"
+	>
+		<div class="flex items-center gap-2">
+			<slot name="content" />
+		</div>
+	</Badge>
+</div>

src/components/RocketCard.svelte

@@ -7,7 +7,8 @@
 	import { ndk } from '@/ndk';
 	import { devmode } from '@/stores/session';
 	import { Avatar, Name } from '@nostr-dev-kit/ndk-svelte-components';
-	import { ChevronRight } from 'lucide-svelte';
+	import { ChevronRight, RocketIcon, ShoppingCart, BicepsFlexed, User } from 'lucide-svelte';
+	import BadgeMaker from './BadgeMaker.svelte';
 
 	export let rocket: Rocket;
 
@@ -16,18 +17,44 @@
 
 <Card.Root class="flex flex-col justify-between">
 	<Card.Header>
-		<Card.Title>{rocket.Name()}</Card.Title>
-		<Card.Description>{rocket.Mission()}</Card.Description>
+		<Card.Title>
+			<div class="flex flex-nowrap items-stretch">
+				{rocket.Name()}<BadgeMaker right
+					><div slot="icon"><RocketIcon /></div>
+					<div slot="content">
+						<div class="flex items-center gap-2">
+							<Avatar
+								ndk={$ndk}
+								pubkey={rocket.Event.pubkey}
+								class="h-5 w-5 flex-none rounded-full object-cover"
+							/>
+							<Name
+								npubMaxLength={10}
+								ndk={$ndk}
+								pubkey={rocket.Event.pubkey}
+								class="inline-block truncate"
+							/>
+						</div>
+					</div></BadgeMaker
+				>
+			</div>
+		</Card.Title>
+		{#if rocket.Mission()}<Card.Description>MISSION: {rocket.Mission()}</Card.Description>
+		{/if}
 	</Card.Header>
 	<Card.Content>
-		<div class="flex items-center gap-2">
-			<Avatar
-				ndk={$ndk}
-				pubkey={rocket.Event.pubkey}
-				class="h-5 w-5 flex-none rounded-full object-cover"
-			/>
-			<Name ndk={$ndk} pubkey={rocket.Event.pubkey} class="inline-block truncate" />
-		</div>
+		<BadgeMaker
+			><div slot="icon"><ShoppingCart /></div>
+			<div slot="content">{rocket.Products().size}</div></BadgeMaker
+		>
+		<BadgeMaker
+			><div slot="icon"><BicepsFlexed /></div>
+			<div slot="content">{rocket.ApprovedMeritRequests().size}</div></BadgeMaker
+		>
+		<BadgeMaker
+			><div slot="icon"><User /></div>
+			<div slot="content">{rocket.Owners().size}</div></BadgeMaker
+		>
 	</Card.Content>
 	<Card.Footer>
 		<div class="flex flex-wrap justify-between gap-2 lg:gap-1">

src/lib/event_helpers/rockets.ts

@@ -201,6 +201,14 @@ export class Rocket {
 		}
 		return amr;
 	}
+	Owners(): Set<string> {
+		let owners = new Set<string>();
+		owners.add(this.Event.pubkey);
+		for (let [_, amr] of this.ApprovedMeritRequests()) {
+			owners.add(amr.Pubkey);
+		}
+		return owners;
+	}
 	TotalMerits(): number {
 		let total = 0;
 		let amr = this.ApprovedMeritRequests();