From 41afe8f18a81542e8fb7fc626500d79a03b886da Mon Sep 17 00:00:00 2001
From: Dean Sallinen <7519573+deansallinen@users.noreply.github.com>
Date: Fri, 6 Dec 2024 14:45:33 -0800
Subject: [PATCH] refactor: description list component

---
 src/lib/components/descriptionlist.svelte     | 25 --------
 src/lib/components/descriptionlist/dd.svelte  |  5 ++
 src/lib/components/descriptionlist/dl.svelte  | 10 ++-
 .../components/descriptionlist/dlrow.svelte   | 21 +++++--
 src/lib/components/descriptionlist/dt.svelte  |  5 ++
 src/lib/components/descriptionlist/index.ts   |  2 +
 .../(account)/ram/(forms)/buy/+page.svelte    | 62 +++++++++---------
 .../(account)/ram/(forms)/sell/+page.svelte   | 63 ++++++++++---------
 .../staking/(staking)/stake/+page.svelte      | 16 +++--
 .../staking/(staking)/unstake/+page.svelte    |  6 +-
 .../debug/components/sections/tables.svelte   | 48 +++++++++++---
 .../(explorer)/block/[number]/+page.svelte    | 26 +++++---
 12 files changed, 170 insertions(+), 119 deletions(-)
 delete mode 100644 src/lib/components/descriptionlist.svelte
 create mode 100644 src/lib/components/descriptionlist/dd.svelte
 create mode 100644 src/lib/components/descriptionlist/dt.svelte

diff --git a/src/lib/components/descriptionlist.svelte b/src/lib/components/descriptionlist.svelte
deleted file mode 100644
index d8d06255..00000000
--- a/src/lib/components/descriptionlist.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	type DescriptionItem = {
-		key: string;
-		value: string | Snippet;
-	};
-
-	interface Props {
-		items: DescriptionItem[];
-	}
-
-	let props: Props = $props();
-</script>
-
-<dl class="">
-	{#each props.items as item}
-		<div
-			class="flex flex-wrap items-center justify-between gap-x-4 border-b border-mineShaft-900 py-3 *:grow last:border-none"
-		>
-			<dt class="caption">{item.key}</dt>
-			<dd class="text-balance break-all text-right tabular-nums">{item.value}</dd>
-		</div>
-	{/each}
-</dl>
diff --git a/src/lib/components/descriptionlist/dd.svelte b/src/lib/components/descriptionlist/dd.svelte
new file mode 100644
index 00000000..5a6a5af2
--- /dev/null
+++ b/src/lib/components/descriptionlist/dd.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let props = $props();
+</script>
+
+<dd class="grow text-balance break-all text-right tabular-nums">{@render props.children()}</dd>
diff --git a/src/lib/components/descriptionlist/dl.svelte b/src/lib/components/descriptionlist/dl.svelte
index ef7e1cdc..f184044b 100644
--- a/src/lib/components/descriptionlist/dl.svelte
+++ b/src/lib/components/descriptionlist/dl.svelte
@@ -3,8 +3,8 @@
 	import Dlrow from './dlrow.svelte';
 
 	type DescriptionItem = {
-		key: string;
-		value: string;
+		title: string;
+		description: string;
 	};
 
 	interface Props {
@@ -17,10 +17,8 @@
 
 <dl class="@container">
 	{#if props.items}
-		{#each props.items as item}
-			<Dlrow title={item.key}>
-				{item.value}
-			</Dlrow>
+		{#each props.items as { title, description }}
+			<Dlrow {title} {description} />
 		{/each}
 	{:else if props.children}
 		{@render props.children()}
diff --git a/src/lib/components/descriptionlist/dlrow.svelte b/src/lib/components/descriptionlist/dlrow.svelte
index 70128fda..6bea9b8f 100644
--- a/src/lib/components/descriptionlist/dlrow.svelte
+++ b/src/lib/components/descriptionlist/dlrow.svelte
@@ -1,16 +1,29 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import DT from './dt.svelte';
+	import DD from './dd.svelte';
 
 	interface Props {
 		title: string;
-		children: Snippet;
+		description?: string;
+		children?: Snippet;
 	}
-	let { title, children }: Props = $props();
+
+	let { title = '', description, children }: Props = $props();
 </script>
 
 <div
 	class="flex flex-wrap items-center justify-between gap-x-4 border-b border-mineShaft-900 py-3 last:border-none @xs:flex-nowrap"
 >
-	<dt class="caption self-start text-nowrap">{title}</dt>
-	<dd class="grow text-balance break-all text-right tabular-nums">{@render children()}</dd>
+	<DT>{title}</DT>
+	<div
+		class="grow bg-red-500 before:content-['ERROR_Missing_DD_element_'] has-[dd]:bg-transparent has-[dd]:before:hidden"
+	>
+		{#if description}
+			<DD>{description}</DD>
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
 </div>
diff --git a/src/lib/components/descriptionlist/dt.svelte b/src/lib/components/descriptionlist/dt.svelte
new file mode 100644
index 00000000..852406c2
--- /dev/null
+++ b/src/lib/components/descriptionlist/dt.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	let props = $props();
+</script>
+
+<dt class="caption self-start text-nowrap">{@render props.children()}</dt>
diff --git a/src/lib/components/descriptionlist/index.ts b/src/lib/components/descriptionlist/index.ts
index 8947140a..6f2b22ec 100644
--- a/src/lib/components/descriptionlist/index.ts
+++ b/src/lib/components/descriptionlist/index.ts
@@ -1,2 +1,4 @@
 export { default as DL } from './dl.svelte';
 export { default as DLRow } from './dlrow.svelte';
+export { default as DD } from './dd.svelte';
+export { default as DT } from './dt.svelte';
diff --git a/src/routes/[network]/(account)/ram/(forms)/buy/+page.svelte b/src/routes/[network]/(account)/ram/(forms)/buy/+page.svelte
index 6fd898ce..e8b835d1 100644
--- a/src/routes/[network]/(account)/ram/(forms)/buy/+page.svelte
+++ b/src/routes/[network]/(account)/ram/(forms)/buy/+page.svelte
@@ -20,6 +20,7 @@
 
 	import { BuyRAMState } from './state.svelte';
 	import { calAvailableSize, preventDefault } from '$lib/utils';
+	import { DD, DL, DLRow } from '$lib/components/descriptionlist';
 
 	let bytesInput: BytesInput | undefined = $state();
 	let assetInput: AssetInput | undefined = $state();
@@ -139,34 +140,39 @@
 			</Button>
 
 			<Stack class="gap-3">
-				<div class="mt-4 grid grid-cols-2 gap-y-0 text-lg">
-					<p class="text-gray-400">
-						{m.common_labeled_unit_price({
-							unit: `${context.network.chain.systemToken?.symbol.name}/RAM`
-						})} (KB)
-					</p>
-					<AssetText variant="full" class="text-right" value={buyRamState.pricePerKB} />
-
-					<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-					<p class="text-gray-400">{m.ram_to_purchase()}</p>
-					<AssetText variant="full" class="text-right" value={buyRamState.kbs} />
-
-					<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-					<p class="text-gray-400">{m.ram_purchase_value()}</p>
-					<AssetText variant="full" class="text-right" value={buyRamState.bytesValue} />
-
-					<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-					<p class="text-gray-400">{m.common_network_fees()} (0.5%)</p>
-					<AssetText variant="full" class="text-right" value={buyRamState.fee} />
-
-					<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-					<p class="text-gray-400">{m.common_total_cost()}</p>
-					<AssetText variant="full" class="text-right" value={buyRamState.bytesCost} />
-				</div>
+				<DL>
+					<DLRow
+						title={`${m.common_labeled_unit_price({ unit: `${context.network.chain.systemToken?.symbol.name}/RAM` })} (KB) `}
+					>
+						<DD>
+							<AssetText variant="full" value={buyRamState.pricePerKB} />
+						</DD>
+					</DLRow>
+
+					<DLRow title={m.ram_to_purchase()}>
+						<DD>
+							<AssetText variant="full" value={buyRamState.kbs} />
+						</DD>
+					</DLRow>
+
+					<DLRow title={m.ram_purchase_value()}>
+						<DD>
+							<AssetText variant="full" value={buyRamState.bytesValue} />
+						</DD>
+					</DLRow>
+
+					<DLRow title={`${m.common_network_fees()} (0.5%)`}>
+						<DD>
+							<AssetText variant="full" value={buyRamState.fee} />
+						</DD>
+					</DLRow>
+
+					<DLRow title={m.common_total_cost()}>
+						<DD>
+							<AssetText variant="full" value={buyRamState.bytesCost} />
+						</DD>
+					</DLRow>
+				</DL>
 
 				{#if buyRamState.valid}
 					{#if buyRamState.format === 'asset'}
diff --git a/src/routes/[network]/(account)/ram/(forms)/sell/+page.svelte b/src/routes/[network]/(account)/ram/(forms)/sell/+page.svelte
index f6d7ab8a..bb958358 100644
--- a/src/routes/[network]/(account)/ram/(forms)/sell/+page.svelte
+++ b/src/routes/[network]/(account)/ram/(forms)/sell/+page.svelte
@@ -19,6 +19,7 @@
 
 	import { SellRAMState } from './state.svelte';
 	import { calAvailableSize, preventDefault } from '$lib/utils';
+	import { DD, DL, DLRow } from '$lib/components/descriptionlist';
 
 	let bytesInput: BytesInput | undefined = $state();
 	let assetInput: AssetInput | undefined = $state();
@@ -125,36 +126,40 @@
 			{m.common_unit_sell({ unit: 'RAM' })}
 		</Button>
 
-		<!-- TODO: use table  -->
 		<Stack class="gap-3">
-			<div class="mt-4 grid grid-cols-2 gap-y-0 text-lg">
-				<p class="text-muted">
-					{m.common_labeled_unit_price({
-						unit: `${context.network.chain.systemToken?.symbol.name}/RAM`
-					})} (KB)
-				</p>
-				<AssetText variant="full" class="text-right" value={sellRamState.pricePerKB} />
-
-				<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-				<p class="text-muted">{m.ram_to_sell()}</p>
-				<AssetText variant="full" class="text-right" value={sellRamState.kbsToSell} />
-
-				<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-				<p class="text-muted">{m.total_proceeds()}</p>
-				<AssetText variant="full" class="text-right" value={sellRamState.bytesValue} />
-
-				<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-				<p class="text-muted">{m.common_network_fees()} (0.5%)</p>
-				<AssetText variant="full" class="text-right" value={sellRamState.fee} />
-
-				<div class="col-span-2 my-2 border-b border-mineShaft-900"></div>
-
-				<p class="text-muted">{m.common_expected_receive()}</p>
-				<AssetText variant="full" class="text-right" value={sellRamState.expectedToReceive} />
-			</div>
+			<DL>
+				<DLRow
+					title={` ${m.common_labeled_unit_price({ unit: `${context.network.chain.systemToken?.symbol.name}/RAM` })} (KB) `}
+				>
+					<DD>
+						<AssetText variant="full" value={sellRamState.pricePerKB} />
+					</DD>
+				</DLRow>
+
+				<DLRow title={m.ram_to_sell()}>
+					<DD>
+						<AssetText variant="full" value={sellRamState.kbsToSell} />
+					</DD>
+				</DLRow>
+
+				<DLRow title={m.total_proceeds()}>
+					<DD>
+						<AssetText variant="full" value={sellRamState.bytesValue} />
+					</DD>
+				</DLRow>
+
+				<DLRow title={` ${m.common_network_fees()} (0.5%) `}>
+					<DD>
+						<AssetText variant="full" value={sellRamState.fee} />
+					</DD>
+				</DLRow>
+
+				<DLRow title={m.common_expected_receive()}>
+					<DD>
+						<AssetText variant="full" value={sellRamState.expectedToReceive} />
+					</DD>
+				</DLRow>
+			</DL>
 
 			{#if sellRamState.valid}
 				<SummarySellRAM class="hidden" action={{ data: sellRamState.toJSON() }} />
diff --git a/src/routes/[network]/(account)/staking/(staking)/stake/+page.svelte b/src/routes/[network]/(account)/staking/(staking)/stake/+page.svelte
index 5ee33b9a..940c11a4 100644
--- a/src/routes/[network]/(account)/staking/(staking)/stake/+page.svelte
+++ b/src/routes/[network]/(account)/staking/(staking)/stake/+page.svelte
@@ -9,7 +9,7 @@
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
 	import { StakeManager } from './manager.svelte';
-	import Descriptionlist from '$lib/components/descriptionlist.svelte';
+	import { DL } from '$lib/components/descriptionlist';
 	import * as m from '$lib/paraglide/messages';
 
 	const context = getContext<UnicoveContext>('state');
@@ -19,14 +19,12 @@
 
 	let hints = $derived([
 		{
-			key: m.common_amount_to_act({
-				action: m.common_stake()
-			}),
-			value: manager.assetValue.toString()
+			title: m.common_amount_to_act({ action: m.common_stake() }),
+			description: manager.assetValue.toString()
 		},
-		{ key: m.staking_minimum_lockup(), value: '21 days' },
-		{ key: m.common_apr_current(), value: manager.apr + '%' },
-		{ key: m.staking_estimated_yield_yearly(), value: String(manager.estimateYield) }
+		{ title: m.staking_minimum_lockup(), description: '21 days' },
+		{ title: m.common_apr_current(), description: manager.apr + '%' },
+		{ title: m.staking_estimated_yield_yearly(), description: String(manager.estimateYield) }
 	]);
 
 	$effect(() => {
@@ -90,6 +88,6 @@
 			>
 		</Stack>
 
-		<Descriptionlist items={hints} />
+		<DL items={hints} />
 	{/if}
 </Stack>
diff --git a/src/routes/[network]/(account)/staking/(staking)/unstake/+page.svelte b/src/routes/[network]/(account)/staking/(staking)/unstake/+page.svelte
index 924cf90d..c8837028 100644
--- a/src/routes/[network]/(account)/staking/(staking)/unstake/+page.svelte
+++ b/src/routes/[network]/(account)/staking/(staking)/unstake/+page.svelte
@@ -6,7 +6,7 @@
 	import Button from '$lib/components/button/button.svelte';
 	import Label from '$lib/components/input/label.svelte';
 	import TransactionSummary from '$lib/components/transactionSummary.svelte';
-	import Descriptionlist from '$lib/components/descriptionlist.svelte';
+	import { DL } from '$lib/components/descriptionlist';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 	import { getContext } from 'svelte';
 	import { UnstakeManager } from './manager.svelte';
@@ -18,7 +18,7 @@
 	let manager: UnstakeManager = $state(new UnstakeManager(data.network));
 
 	let hints = $derived([
-		{ key: m.staking_withdraw_timeframe(), value: manager.assetValue.toString() }
+		{ title: m.staking_withdraw_timeframe(), description: manager.assetValue.toString() }
 	]);
 
 	$effect(() => {
@@ -78,6 +78,6 @@
 			</Button>
 		</Stack>
 
-		<Descriptionlist items={hints} />
+		<DL items={hints} />
 	{/if}
 </Stack>
diff --git a/src/routes/[network]/(dev)/debug/components/sections/tables.svelte b/src/routes/[network]/(dev)/debug/components/sections/tables.svelte
index a5f02107..51d297d0 100644
--- a/src/routes/[network]/(dev)/debug/components/sections/tables.svelte
+++ b/src/routes/[network]/(dev)/debug/components/sections/tables.svelte
@@ -1,6 +1,7 @@
 <script>
-	import Descriptionlist from '$lib/components/descriptionlist.svelte';
-	import { Stack } from '$lib/components/layout';
+	import { DD, DL, DLRow } from '$lib/components/descriptionlist';
+	import Account from '$lib/components/elements/account.svelte';
+	import { Card, Stack } from '$lib/components/layout';
 
 	const options = [
 		[
@@ -30,11 +31,11 @@
 	];
 
 	const items = [
-		{ key: 'Some title', value: '123456' },
-		{ key: 'Some title', value: '123456' },
-		{ key: 'Some title', value: '123456' },
-		{ key: 'Some title', value: '123456' },
-		{ key: 'Some title', value: '123456' }
+		{ title: 'Some title', description: '123456' },
+		{ title: 'Some title', description: '123456' },
+		{ title: 'Some title', description: '123456' },
+		{ title: 'Some title', description: '123456' },
+		{ title: 'Some title', description: '123456' }
 	];
 </script>
 
@@ -50,8 +51,39 @@
 			row striping here.
 		</p>
 
+		<Card class="max-w-md" title="Some items">
+			<DL {items} />
+		</Card>
+
+		<p>
+			For displaying a component in the description, or multiple values under a single key, you can
+			use the components declaratively.
+		</p>
+
+		<p>
+			Note: You need to wrap the child component correctly or you'll get a warning. There are CSS
+			rules that'll visually yell at you to fix it :)
+		</p>
+
 		<div class="max-w-md">
-			<Descriptionlist {items} />
+			<DL>
+				<DLRow title="First">
+					<DD>
+						<Account name={'teamgreymass'} />
+					</DD>
+				</DLRow>
+				<DLRow title="Second">
+					<DD>
+						<Account name={'unicove.gm'} />
+					</DD>
+					<DD>
+						<Account name={'test.gm'} />
+					</DD>
+				</DLRow>
+				<DLRow title="Warning">
+					<Account name={'unicove.gm'} />
+				</DLRow>
+			</DL>
 		</div>
 	</Stack>
 
diff --git a/src/routes/[network]/(explorer)/block/[number]/+page.svelte b/src/routes/[network]/(explorer)/block/[number]/+page.svelte
index 1443c0e8..1091aeb7 100644
--- a/src/routes/[network]/(explorer)/block/[number]/+page.svelte
+++ b/src/routes/[network]/(explorer)/block/[number]/+page.svelte
@@ -4,7 +4,7 @@
 	import AccountText from '$lib/components/elements/account.svelte';
 	import Button from '$lib/components/button/button.svelte';
 	import { ArrowLeftRight, ArrowRight, ArrowLeft } from 'lucide-svelte';
-	import { DL, DLRow } from '$lib/components/descriptionlist/index.js';
+	import { DD, DL, DLRow } from '$lib/components/descriptionlist/index.js';
 	import { goto } from '$lib/utils';
 
 	let { data } = $props();
@@ -78,22 +78,34 @@
 
 		<DL>
 			<DLRow title={'Block Number'}>
-				{data.details.blockNumber}
+				<DD>
+					{data.details.blockNumber}
+				</DD>
 			</DLRow>
 			<DLRow title={'Producer Name'}>
-				<AccountText name={data.details.blockProducer} />
+				<DD>
+					<AccountText name={data.details.blockProducer} />
+				</DD>
 			</DLRow>
 			<DLRow title={'Total CPU'}>
-				{data.details.totalCpu} μs
+				<DD>
+					{data.details.totalCpu} μs
+				</DD>
 			</DLRow>
 			<DLRow title={'Total NET'}>
-				{data.details.totalNet * 8} Bytes
+				<DD>
+					{data.details.totalNet * 8} Bytes
+				</DD>
 			</DLRow>
 			<DLRow title={'Total Actions'}>
-				{data.details.totalActions}
+				<DD>
+					{data.details.totalActions}
+				</DD>
 			</DLRow>
 			<DLRow title={'Block ID'}>
-				{data.details.blockId}
+				<DD>
+					{data.details.blockId}
+				</DD>
 			</DLRow>
 		</DL>