problem: structure is confusing

src/components/ProblemView.svelte

@@ -13,7 +13,7 @@
 	import { goto } from '$app/navigation';
 	import { base } from '$app/paths';
 
-	export let problem: Problem;
+	export let problem: Problem | undefined;
 	export let preview: boolean = false;
 
 	const carta = new Carta();

src/components/ProblemTile.svelte → src/components/RecursiveProblemTile.svelte

@@ -1,35 +1,34 @@
 <script lang="ts">
 	import type { Problem } from '@/event_helpers/problems';
 	import { formatTimeAgo } from '@/helpers';
+	import { bloom, selected } from '@/stores/problems';
 	export let problem: Problem;
-	export let bloom: boolean;
-	export let selected: Problem | undefined;
 </script>
 
 {#if problem}
 	<button
 		on:click={() => {
 			console.log(problem.event.rawEvent());
-			selected = problem;
+			$selected = problem;
 		}}
 		class="problems-start flex w-full flex-col gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent"
 	>
 		<div class="flex w-full flex-col gap-1">
 			<div class="problems-center flex">
 				<div class="problems-center flex gap-2">
 					<div class="font-semibold">{problem.tldr}</div>
-					{#if !bloom}
+					{#if !$bloom}
 						<span class="flex h-2 w-2 rounded-full bg-blue-600" />
 					{/if}
 				</div>
 				<div class="ml-auto text-xs text-foreground">
 					{formatTimeAgo(new Date(problem.event.created_at * 1000))}
 				</div>
 			</div>
-			<div class="text-x-s font-medium">{problem.para}</div>
+			<div class="text-x-s font-light">{problem.para}</div>
 		</div>
 		<div class="line-clamp-2 text-xs text-muted-foreground">
-			{'todo: add full page description of problem'.substring(0, 300)}
+			{problem.page.substring(0, 300)}
 		</div>
 		<!-- {#if problem.labels.length}
 					<div class="flex problems-center gap-2">

src/layouts/MailList.svelte

@@ -4,10 +4,12 @@
 	import type { Problem } from '@/event_helpers/problems';
 	import { Search } from 'lucide-svelte';
 	import Filters from '../components/Filters.svelte';
-	import ProblemTile from '../components/ProblemTile.svelte';
-	export let items: Problem[];
-	export let selected: Problem;
-	export let bloom: false; //todo: use a bloom filter from HH for problems that current user has already viewed, this should run on problem event ID not d-tag so that they see updates
+	import ProblemTile from '../components/RecursiveProblemTile.svelte';
+	import { problems } from '@/stores/problems';
+	import { onMount } from 'svelte';
+	// export let problems: Problem[];
+	let selected: Problem;
+	let bloom: false; //todo: use a bloom filter from HH for problems that current user has already viewed, this should run on problem event ID not d-tag so that they see updates
 </script>
 
 <div class="flex flex-col gap-2">
@@ -20,8 +22,8 @@
 	</form>
 	<ScrollArea class="h-[calc(100vh-154px)] px-4">
 		<div class="flex flex-col items-center gap-2">
-			{#each items as problem}
-				<ProblemTile {problem} bind:bloom bind:selected></ProblemTile>
+			{#each $problems as problem}
+				<ProblemTile {problem}></ProblemTile>
 			{/each}
 		</div>
 	</ScrollArea>

src/lib/stores/problems.ts

@@ -0,0 +1,13 @@
+import { Problem } from '@/event_helpers/problems';
+import { ndk } from '@/ndk';
+import { derived, get, writable } from 'svelte/store';
+
+const _problems = get(ndk).storeSubscribe([{ kinds: [31971 as number] }], { subId: 'problems' });
+
+export const problems = derived(_problems, ($problems) =>
+	$problems.map(Problem.fromEvent).filter((problem) => problem.isValid())
+);
+
+export let selected = writable<Problem | undefined>(undefined);
+
+export let bloom = writable(false); //todo

src/views/Problems.svelte

@@ -1,33 +1,15 @@
 <script lang="ts">
-	import { Problem } from '@/event_helpers/problems';
-	import { ndk } from '@/ndk';
-	import { NDKEvent } from '@nostr-dev-kit/ndk';
-	import type { NDKEventStore } from '@nostr-dev-kit/ndk-svelte';
-	import { onDestroy } from 'svelte';
-	import { derived } from 'svelte/store';
-	import MailLayout from '../layouts/MailLayout.svelte';
-	import MailList from '../layouts/MailList.svelte';
+	import * as Resizable from '$lib/components/ui/resizable';
+	import { selected } from '@/stores/problems';
 	import ProblemView from '../components/ProblemView.svelte';
-	import { Badge } from '@/components/ui/badge';
-	import Filters from '../components/Filters.svelte';
-
-	let problems: NDKEventStore<NDKEvent> | undefined;
-	onDestroy(() => {
-		problems?.unsubscribe();
-	});
-
-	problems = $ndk.storeSubscribe([{ kinds: [31971 as number] }], { subId: 'rockets' });
-
-	const validProblems = derived(problems, ($problems) =>
-		$problems.map(Problem.fromEvent).filter((problem) => problem.isValid())
-	);
-
-	let selected: Problem;
+	import MailList from '../layouts/MailList.svelte';
 </script>
 
-<MailLayout>
-	<div slot="list">
-		<MailList items={$validProblems} bloom={false} bind:selected />
-	</div>
-	<div slot="problem"><ProblemView problem={selected} /></div>
-</MailLayout>
+<Resizable.PaneGroup direction="horizontal" class="h-full items-stretch overflow-hidden">
+	<Resizable.Pane defaultSize={30} minSize={30} maxSize={50}>
+		<MailList></MailList>
+	</Resizable.Pane>
+
+	<Resizable.Handle withHandle />
+	<Resizable.Pane maxSize={85}><ProblemView problem={$selected}></ProblemView></Resizable.Pane>
+</Resizable.PaneGroup>