problem: can't view root events

src/routes/+layout.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { base } from '$app/paths';
+	import LoginButton from '@/components/LoginButton.svelte';
 	import { Button } from '@/components/ui/button';
 	import { Input } from '@/components/ui/input';
-	import { maxBodyWidth } from '@/stores/layout';
+	import { Init } from '@/workers/firehose_master';
 	import { ModeWatcher, toggleMode } from 'mode-watcher';
 	import { Home, QuestionMark } from 'radix-icons-svelte';
+	import { onMount } from 'svelte';
 	import { ArrowTurnUpSolid } from 'svelte-awesome-icons';
 	import Moon from 'svelte-radix/Moon.svelte';
 	import Sun from 'svelte-radix/Sun.svelte';
 	import '../app.css';
-</script>
 
+	onMount(() => {
+		Init();
+	});
+</script>
 <ModeWatcher />
 
 <div
@@ -22,7 +29,7 @@
 			<Button variant="outline" size="icon" class="-scale-x-100 hover:skew-y-12"
 				><ArrowTurnUpSolid /></Button
 			>
-			<Button variant="outline" size="icon" class="-scale-x-100 hover:skew-y-12"
+			<Button on:click={()=>{goto(`${base}/`)}} variant="outline" size="icon" class="-scale-x-100 hover:skew-y-12"
 				><Home size={24} /></Button
 			>
 			<Button variant="outline" size="icon" class="hover:skew-y-12"
@@ -38,11 +45,15 @@
 				/>
 				<span class="sr-only">Toggle theme</span>
 			</Button>
+
+			<LoginButton />
+
+			<Button on:click={()=>{goto(`${base}/debug`)}}>D</Button>
+
 		</div>
 		<div
 			class="bg-white dark:bg-zinc-900 row-span-12 col-span-11 overflow-x-hidden overflow-y-scroll no-scrollbar"
 		>
-			<div class="mx-auto {$maxBodyWidth}"></div>
 			<slot />
 		</div>
 	</div>

src/routes/+page.svelte

@@ -1,7 +1,43 @@
 <script lang="ts">
+	import Kind1 from '@/components/Kind1.svelte';
+	import { EventTreeItem, type RecursiveEventMap } from '@/workers/firehose.types';
+	import { responseFromWorker } from '@/workers/firehose_master';
 	import { onDestroy, onMount } from 'svelte';
+	import { derived, writable, type Writable } from 'svelte/store';
 	onMount(() => {});
 	onDestroy(() => {});
+
+	function find(m: RecursiveEventMap, id: string): EventTreeItem | undefined {
+		if (m.get(id)) {
+			return m.get(id)!;
+		}
+		for (let [_, item] of m) {
+			let c = find(item.children, id);
+			if (c) {
+				return c;
+			}
+		}
+	}
+
+	let parentFromUsersHistory = writable([""])
+
+	//todo: if the last parentFromUsersHistory is included in the current threadParent's tags, go to that when user navigates UP. If not, go to the e-tag that 1) we have and 2) has the most replies.
+
+	let threadParentID = writable(["root"]);
+
+	let rThreadParent = derived([responseFromWorker, threadParentID], ([$rfw, $parentID]) => {
+		if ($parentID[$parentID.length-1] == 'root') {
+			return $rfw.recursiveEvents;
+		} else {
+			return find($rfw.recursiveEvents.children, $parentID[$parentID.length-1]);
+		}
+	});
 </script>
 
-<br />
+{#if $rThreadParent}
+	{$rThreadParent.children.size} <br />
+	<Kind1
+		treeItem={$rThreadParent || $responseFromWorker.recursiveEvents}
+		bind:newParent={threadParentID}
+	/>
+{/if}

src/routes/debug/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Button } from '@/components/ui/button';
+	import { currentPubkey } from '@/stores/user';
+import { responseFromWorker } from '@/workers/firehose_master';
+
+
+</script>
+<Button on:click={()=>{console.log($responseFromWorker)}}>Print responseFromWorker to console</Button><br />
+Local Pubkey: {$currentPubkey}
+{#if responseFromWorker && $responseFromWorker}
+Master pubkey for WoT: {$responseFromWorker.masterPubkey} <br />
+Root events: {$responseFromWorker.rootEvents.size} <br />
+Total events: {$responseFromWorker.events.size}
+{/if}