fix: rm unnecessary Space.svelte and add List/ListItem (#4874)

apps/desktop/src/lib/components/MarkdownContent.svelte

@@ -8,25 +8,42 @@
 		| Tokens.Link
 		| Tokens.Heading
 		| Tokens.Image
-		| Tokens.Space
 		| Tokens.Blockquote
 		| Tokens.Code
+		| Tokens.Text
 		| Tokens.Codespan
-		| Tokens.Text;
+		| Tokens.Paragraph
+		| Tokens.ListItem
+		| Tokens.List;
 
 	let { type, ...rest }: Props = $props();
+
+	// @ts-expect-error indexing on string union is having trouble
+	const CurrentComponent = renderers[type as Props['type']];
 </script>
 
-{#if type && renderers[type as keyof typeof renderers]}
-	<svelte:component this={renderers[type as keyof typeof renderers] as any} {...rest}>
-		{#if 'tokens' in rest}
-			<svelte:self tokens={rest.tokens} />
-		{/if}
-	</svelte:component>
+{#if type && CurrentComponent}
+	{#if type === 'list'}
+		{@const listItems = (rest as Extract<Props, { type: typeof type }>).items}
+		<CurrentComponent {...rest}>
+			{#each listItems as item}
+				{@const ChildComponent = renderers[item.type]}
+				<ChildComponent {...item}>
+					<svelte:self tokens={item.tokens} {renderers} />
+				</ChildComponent>
+			{/each}
+		</CurrentComponent>
+	{:else}
+		<CurrentComponent {...rest}>
+			{#if 'tokens' in rest}
+				<svelte:self tokens={rest.tokens} />
+			{/if}
+		</CurrentComponent>
+	{/if}
 {:else if 'tokens' in rest && rest.tokens}
 	{#each rest.tokens as token}
 		<svelte:self {...token} />
 	{/each}
 {:else if 'raw' in rest}
-	{@html rest.raw?.replaceAll('\n', '<br />') ?? ''}
+	{@html rest.raw?.replaceAll('\n', '') ?? ''}
 {/if}

apps/desktop/src/lib/components/markdownRenderers/List.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	interface Props {
+		ordered: boolean;
+		start: number | '';
+		children: Snippet;
+	}
+
+	const { ordered, start, children }: Props = $props();
+</script>
+
+{#if ordered}
+	<ol start={Number(start)}>
+		{@render children()}
+	</ol>
+{:else}
+	<ul>
+		{@render children()}
+	</ul>
+{/if}

apps/desktop/src/lib/components/markdownRenderers/ListItem.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+	}
+
+	const { children }: Props = $props();
+</script>
+
+<li>
+	{@render children()}
+</li>

apps/desktop/src/lib/components/markdownRenderers/Space.svelte

@@ -1,2 +0,0 @@
-<br />
-<br />

apps/desktop/src/lib/utils/markdownRenderers.ts

@@ -3,19 +3,21 @@ import Code from '$lib/components/markdownRenderers/Code.svelte';
 import Codespan from '$lib/components/markdownRenderers/Codespan.svelte';
 import Heading from '$lib/components/markdownRenderers/Heading.svelte';
 import Image from '$lib/components/markdownRenderers/Image.svelte';
+import List from '$lib/components/markdownRenderers/List.svelte';
+import ListItem from '$lib/components/markdownRenderers/ListItem.svelte';
 import Paragraph from '$lib/components/markdownRenderers/Paragraph.svelte';
-import Space from '$lib/components/markdownRenderers/Space.svelte';
 import Text from '$lib/components/markdownRenderers/Text.svelte';
 import Link from '$lib/shared/Link.svelte';
 
 export const renderers = {
 	link: Link,
 	image: Image,
-	space: Space,
 	blockquote: Blockquote,
 	code: Code,
 	codespan: Codespan,
 	text: Text,
+	list: List,
+	list_item: ListItem,
 	heading: Heading,
 	paragraph: Paragraph
 };