problem: can't see sub-problems

src/components/RecursiveProblemTile.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
 	import type { Problem } from '@/event_helpers/problems';
 	import { formatTimeAgo } from '@/helpers';
-	import { bloom, selected } from '@/stores/problems';
+	import { bloom, problems, selected } from '@/stores/problems';
+	import { onMount } from 'svelte';
+	import { derived } from 'svelte/store';
 	export let problem: Problem;
+
+	let children = derived(problems, ($problems) => {
+		return $problems.filter((p) => {
+			return p.parents().includes(problem.dtag);
+		});
+	});
 </script>
 
 {#if problem}
@@ -11,7 +19,10 @@
 			console.log(problem.event.rawEvent());
 			$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"
+		class="problems-start flex w-full flex-col gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent hover:bg-opacity-100 {$selected ==
+		problem
+			? 'bg-accent bg-opacity-90'
+			: ''}"
 	>
 		<div class="flex w-full flex-col gap-1">
 			<div class="problems-center flex">
@@ -40,4 +51,11 @@
 					</div>
 				{/if} -->
 	</button>
+	{#if $selected == problem}
+		{#each $children as child}
+			<div class="pl-2">
+				<svelte:self problem={child}></svelte:self>
+			</div>
+		{/each}
+	{/if}
 {/if}

src/layouts/MailList.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	import { Input } from '@/components/ui/input';
 	import ScrollArea from '@/components/ui/scroll-area/scroll-area.svelte';
-	import type { Problem } from '@/event_helpers/problems';
+	import { problems } from '@/stores/problems';
 	import { Search } from 'lucide-svelte';
 	import Filters from '../components/Filters.svelte';
 	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
+	import { derived } from 'svelte/store';
+
+	let filtered = derived(problems, ($problems) => {
+		return $problems.filter((p) => {
+			return p.parents().length == 0;
+		});
+	});
 </script>
 
 <div class="flex flex-col gap-2">
@@ -22,7 +24,7 @@
 	</form>
 	<ScrollArea class="h-[calc(100vh-154px)] px-4">
 		<div class="flex flex-col items-center gap-2">
-			{#each $problems as problem}
+			{#each $filtered as problem}
 				<ProblemTile {problem}></ProblemTile>
 			{/each}
 		</div>

src/lib/event_helpers/problems.ts

@@ -16,6 +16,19 @@ export class Problem {
 		this.event = event;
 	}
 
+	parents(): string[] {
+		let p: string[] = [];
+		for (let t of this.event.getMatchingTags('a')) {
+			if (t.length == 3 && t[2] == 'parent') {
+				let s = t[1].split(':');
+				if (s.length == 3 && s[0] == '31971') {
+					p.push(s[2]);
+				}
+			}
+		}
+		return p;
+	}
+
 	static fromEvent(event: NDKEvent): Problem {
 		return new Problem(
 			event,

src/lib/stores/problems.ts

@@ -10,4 +10,4 @@ export const problems = derived(_problems, ($problems) =>
 
 export let selected = writable<Problem | undefined>(undefined);
 
-export let bloom = writable(false); //todo
+export let bloom = writable(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

src/views/Problems.svelte

@@ -7,7 +7,7 @@
 
 <Resizable.PaneGroup direction="horizontal" class="h-full items-stretch overflow-hidden">
 	<Resizable.Pane defaultSize={30} minSize={30} maxSize={50}>
-		<MailList></MailList>
+		<MailList />
 	</Resizable.Pane>
 
 	<Resizable.Handle withHandle />