problem: not clear what parent a new problem is being logged under

src/components/ProblemView.svelte

@@ -9,6 +9,9 @@
 	import { Carta, CartaViewer } from 'carta-md';
 	import { ArrowBigLeft } from 'lucide-svelte';
 	import ProfileCard from './ProfileCard.svelte';
+	import { Button } from '@/components/ui/button';
+	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
 
 	export let problem: Problem;
 	export let preview: boolean = false;
@@ -18,6 +21,11 @@
 
 {#if problem}
 	<ScrollArea class="h-[calc(100vh-64px)]">
+		<div class="flex flex-col items-end p-4">
+			<Button on:click={async () => await goto(`${base}/new/problem/${problem.atag}`)}
+				>Log New Problem</Button
+			>
+		</div>
 		<div class="flex flex-col items-center p-4">
 			<h1 class="text-2xl font-semibold">{problem.tldr}</h1>
 			<p class="text-sm text-muted-foreground">

src/layouts/SidePanelLayout.svelte

@@ -12,6 +12,7 @@
 	import { bitcoinTip } from '@/stores/bitcoin';
 	import { AngleLeftSolid, AngleRightSolid } from 'svelte-awesome-icons';
 	import { goto } from '$app/navigation';
+	import { devmode } from '@/stores/session';
 
 	let open = false;
 	let expandSidebar = true;
@@ -86,7 +87,9 @@
 					</Sheet.Content>
 				</Sheet.Root>
 			</div>
-			<Button on:click={async () => await goto(`${base}/logNewProblem`)}>Log New Problem</Button>
+			{#if $devmode}
+				<Button on:click={async () => await goto(`${base}/new/problem/`)}>Log New Problem</Button>
+			{/if}
 			<div class="flex w-full flex-1 items-center justify-end gap-2">
 				<Badge class="flex h-9 max-w-16 shrink-0 items-center justify-center rounded-md"
 					>{$bitcoinTip.height}</Badge

src/lib/event_helpers/problems.ts

@@ -7,6 +7,7 @@ export class Problem {
 	constructor(
 		event: NDKEvent,
 		public dtag: string,
+		public atag: string,
 		public tldr: string,
 		public para: string,
 		public page: string,
@@ -19,6 +20,7 @@ export class Problem {
 		return new Problem(
 			event,
 			event.dTag ?? '',
+			event.kind + ':' + event.pubkey + ':' + event.dTag,
 			event.getMatchingTags('tldr')[0]?.[1] ?? '',
 			event.getMatchingTags('para')[0]?.[1] ?? '',
 			event.getMatchingTags('page')[0]?.[1] ?? '',
@@ -28,7 +30,7 @@ export class Problem {
 
 	// only for problem preview
 	static fromObject({ tldr, para, page }: { tldr: string; para: string; page: string }): Problem {
-		return new Problem(new NDKEvent(), '', tldr, para, page, 'rfm');
+		return new Problem(new NDKEvent(), '', '', tldr, para, page, 'rfm');
 	}
 
 	get creator(): string {

src/routes/new/problem/[parentID]/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { derived, type Readable } from 'svelte/store';
+	import LogNewProblem from '../../../../views/LogNewProblem.svelte';
+	import type { ExtendedBaseType, NDKEventStore } from '@nostr-dev-kit/ndk-svelte';
+	import { NDKEvent } from '@nostr-dev-kit/ndk';
+	import { ndk } from '@/ndk';
+	import { Problem } from '@/event_helpers/problems';
+
+	let latestEvent: Readable<ExtendedBaseType<NDKEvent> | undefined>;
+	let atag = $page.params.parentID.split(':');
+	let events: NDKEventStore<ExtendedBaseType<NDKEvent>> | undefined;
+	if (atag.length == 3) {
+		events = $ndk.storeSubscribe(
+			[{ '#d': [atag[2]], authors: [atag[1]], kinds: [31971 as number] }],
+			{ subId: atag[2] }
+		);
+	}
+
+	$: {
+		if (events && !latestEvent) {
+			latestEvent = derived(events, ($events) => {
+				let sorted = $events.filter((e) => {
+					return e.kind == 31971;
+				});
+				sorted = sorted.toSorted((a, b) => {
+					return a.created_at - b.created_at;
+				});
+				return sorted[0];
+			});
+		}
+	}
+</script>
+
+{#if latestEvent && $latestEvent}
+	<LogNewProblem parent={Problem.fromEvent($latestEvent)} />
+{/if}

src/views/LogNewProblem.svelte

@@ -1,23 +1,24 @@
 <script lang="ts">
-	import { Button } from '@/components/ui/button';
-	import ScrollArea from '@/components/ui/scroll-area/scroll-area.svelte';
 	import { goto } from '$app/navigation';
 	import { base } from '$app/paths';
-	import * as Card from '@/components/ui/card';
-	import TextareaField from '../components/TextareaField.svelte';
+	import { Button } from '@/components/ui/button';
+	import { Label } from '@/components/ui/label';
 	import * as RadioGroup from '@/components/ui/radio-group';
-	import { currentUser } from '@/stores/session';
-	import Login from '../components/Login.svelte';
+	import ScrollArea from '@/components/ui/scroll-area/scroll-area.svelte';
+	import { Problem } from '@/event_helpers/problems';
 	import { ndk } from '@/ndk';
-	import type NDKSvelte from '@nostr-dev-kit/ndk-svelte';
+	import { currentUser } from '@/stores/session';
 	import { NDKEvent } from '@nostr-dev-kit/ndk';
-	import { sha256 } from 'js-sha256';
-	import { Label } from '@/components/ui/label';
+	import type NDKSvelte from '@nostr-dev-kit/ndk-svelte';
 	import { Carta, MarkdownEditor } from 'carta-md';
-	import LogNewProblemLayout from '../layouts/LogNewProblemLayout.svelte';
 	import 'carta-md/default.css';
+	import { sha256 } from 'js-sha256';
+	import Login from '../components/Login.svelte';
 	import ProblemView from '../components/ProblemView.svelte';
-	import { Problem } from '@/event_helpers/problems';
+	import TextareaField from '../components/TextareaField.svelte';
+	import LogNewProblemLayout from '../layouts/LogNewProblemLayout.svelte';
+
+	export let parent: Problem;
 
 	let tldr: string = '';
 	let para: string = '';
@@ -96,7 +97,8 @@
 	<div slot="editor">
 		<ScrollArea class="h-[calc(100vh-64px)]">
 			<div class="flex flex-col justify-start gap-2 p-4">
-				<div class="text-3xl font-bold">Log New problem</div>
+				You are currently logging new sub-problem under: {parent.tldr}
+				<div class="text-3xl font-bold">Log a new problem</div>
 				<TextareaField
 					title="Title"
 					bind:value={tldr}