Skip to content

Commit

Permalink
problem: can't navigate to parent event
Browse files Browse the repository at this point in the history
  • Loading branch information
gsovereignty committed Apr 13, 2024
1 parent df8c306 commit dbbf5b1
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 61 deletions.
54 changes: 54 additions & 0 deletions src/lib/components/ChatLayout.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<script>
import { ArrowTurnUpSolid } from "svelte-awesome-icons";
import { Button } from "./ui/button";
import { goto } from "$app/navigation";
import { base } from "$app/paths";
import { toggleMode } from "mode-watcher";
import { Home, QuestionMark, Sun, Moon } from "radix-icons-svelte";
import LoginButton from "./LoginButton.svelte";
import { Input } from "./ui/input";
</script>

<div
class="grid grid-cols-12 grid-rows-12 w-full h-full dark:bg-gradient-to-r from-transparent to-blue-950"
>
<div class="grid grid-cols-12 grid-rows-12 col-span-12 row-span-10">
<div
class="flex flex-col gap-2 py-2 bg-slate-400 dark:bg-zinc-800 row-span-12 col-span-1 place-items-center"
> <slot name="buttons" />

<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"
><QuestionMark size={24} /></Button
>

<Button on:click={toggleMode} variant="outline" size="icon">
<Sun
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Moon
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<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"
>
<slot />
</div>
</div>
<div class="col-span-12 row-span-10 bg-sky-100 dark:bg-sky-950">
<Input placeholder="Start typing..." type="text" class=" bg-sky-100 dark:bg-sky-950" />
</div>
</div>
2 changes: 1 addition & 1 deletion src/lib/components/Kind1.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,4 @@
<a href="#" on:click={()=>{newParent.update(existing=>{existing.push(id); return existing})}} class="text-sm font-normal text-gray-500 dark:text-gray-400 float-right">{tree.children.size}<ArrowRight /></a>
</div>
</div>
{/each}
{/each}
46 changes: 3 additions & 43 deletions src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,52 +12,12 @@
import Moon from 'svelte-radix/Moon.svelte';
import Sun from 'svelte-radix/Sun.svelte';
import '../app.css';
import { page } from '$app/stores';
onMount(() => {
Init();
});
</script>
<ModeWatcher />

<div
class="grid grid-cols-12 grid-rows-12 w-full h-full dark:bg-gradient-to-r from-transparent to-blue-950"
>
<div class="grid grid-cols-12 grid-rows-12 col-span-12 row-span-10">
<div
class="flex flex-col gap-2 py-2 bg-slate-400 dark:bg-zinc-800 row-span-12 col-span-1 place-items-center"
>
<Button variant="outline" size="icon" class="-scale-x-100 hover:skew-y-12"
><ArrowTurnUpSolid /></Button
>
<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"
><QuestionMark size={24} /></Button
>

<Button on:click={toggleMode} variant="outline" size="icon">
<Sun
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
/>
<Moon
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
/>
<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"
>
<slot />
</div>
</div>
<div class="col-span-12 row-span-10 bg-sky-100 dark:bg-sky-950">
<Input placeholder="Start typing..." type="text" class=" bg-sky-100 dark:bg-sky-950" />
</div>
</div>
<ModeWatcher />
<slot />
43 changes: 33 additions & 10 deletions src/routes/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
<script lang="ts">
import ChatLayout from '@/components/ChatLayout.svelte';
import Kind1 from '@/components/Kind1.svelte';
import { Button } from '@/components/ui/button';
import { EventTreeItem, type RecursiveEventMap } from '@/workers/firehose.types';
import { responseFromWorker } from '@/workers/firehose_master';
import { onDestroy, onMount } from 'svelte';
import { ArrowTurnUpSolid } from 'svelte-awesome-icons';
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)!;
Expand All @@ -19,25 +24,43 @@
}
}
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') {
function pop() {
threadParentID.update(existing=>{
existing.pop()
return existing
})
}
let rThreadParent = derived([responseFromWorker, threadParentID], ([$rfw, $threadParentID]) => {
if ($threadParentID[$threadParentID.length-1] == 'root') {
return $rfw.recursiveEvents;
} else {
return find($rfw.recursiveEvents.children, $parentID[$parentID.length-1]);
return find($rfw.recursiveEvents.children, $threadParentID[$threadParentID.length-1]);
}
});
</script>

<ChatLayout>
<div slot="buttons">
{#if $threadParentID[$threadParentID.length-1] != "root"}
<Button on:click={pop} variant="outline" size="icon" class="-scale-x-100 hover:skew-y-12"
><ArrowTurnUpSolid /></Button
>
{/if}
</div>
<slot>

{#if $rThreadParent}
{$rThreadParent.children.size} <br />
<Kind1
treeItem={$rThreadParent || $responseFromWorker.recursiveEvents}
bind:newParent={threadParentID}
/>
{$rThreadParent.children.size} <br />
<Kind1
treeItem={$rThreadParent || $responseFromWorker.recursiveEvents}
bind:newParent={threadParentID}
/>
{/if}
</slot>
</ChatLayout>

20 changes: 13 additions & 7 deletions src/routes/debug/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
<script lang="ts">
import ChatLayout from '@/components/ChatLayout.svelte';
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}
<ChatLayout>
<slot>
<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}
</slot>
</ChatLayout>

0 comments on commit dbbf5b1

Please sign in to comment.