Skip to content

Commit

Permalink
problem: can't re-use layout
Browse files Browse the repository at this point in the history
  • Loading branch information
gsovereignty committed Apr 13, 2024
1 parent b491f76 commit 2dfd8ee
Show file tree
Hide file tree
Showing 10 changed files with 204 additions and 158 deletions.
46 changes: 29 additions & 17 deletions src/lib/components/ChatLayout.svelte
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
<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";
import { goto } from '$app/navigation';
import { base } from '$app/paths';
import { toggleMode } from 'mode-watcher';
import { Home, Moon, QuestionMark, Sun } from 'radix-icons-svelte';
import LoginButton from './LoginButton.svelte';
import { Button } from './ui/button';
import { Input } from './ui/input';
</script>

<div
Expand All @@ -18,10 +14,16 @@
<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" />
>
<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
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
Expand All @@ -39,16 +41,26 @@

<LoginButton />

<Button on:click={()=>{goto(`${base}/debug`)}}>D</Button>
<Button
on:click={() => {
goto(`${base}/debug`);
}}>DEV</Button
>

<Button
on:click={() => {
goto(`${base}/marcus`);
}}
size="icon"><img class=" w-16" src={`${base}/marcus.png`} /></Button
>
</div>
<div
class="bg-white dark:bg-zinc-900 row-span-12 col-span-11 overflow-x-hidden overflow-y-scroll no-scrollbar"
class="bg-white dark:bg-zinc-900 row-span-12 col-span-11 overflow-x-hidden overflow-y-scroll no-scrollbar ml-1"
>
<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>
</div>
63 changes: 0 additions & 63 deletions src/lib/components/Kind1.svelte

This file was deleted.

2 changes: 1 addition & 1 deletion src/lib/components/RenderNoteContent.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
// Replace image URLs with <img> tags
formattedInput = formattedInput.replace(urlRegex, (url) => {
return `<img src="${url}" alt="Image" style="max-width: 100%; height: auto;">`;
return `<img src="${url}" alt="Image" style="max-width: 98%; height: auto;" class="m-2 rounded">`;
});
const nostr = /nostr:\S+/g;
Expand Down
2 changes: 1 addition & 1 deletion src/lib/workers/firehose.ts
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ function iterate(m: Map<string, EventTreeItem>): Map<string, EventTreeItem> {
if (_children) {
for (let eventID of _children) {
let _child_event = responseData!.events.get(eventID);
if (_child_event) {
if (_child_event && _child_event.kind == 1) {
children.set(eventID, new EventTreeItem(_child_event));
}
}
Expand Down
13 changes: 1 addition & 12 deletions src/routes/+layout.svelte
Original file line number Diff line number Diff line change
@@ -1,23 +1,12 @@
<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 { Init } from '@/workers/firehose_master';
import { ModeWatcher, toggleMode } from 'mode-watcher';
import { Home, QuestionMark } from 'radix-icons-svelte';
import { ModeWatcher } from 'mode-watcher';
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';
import { page } from '$app/stores';
onMount(() => {
Init();
});
</script>

<ModeWatcher />
<slot />
69 changes: 5 additions & 64 deletions src/routes/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,66 +1,7 @@
<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)!;
}
for (let [_, item] of m) {
let c = find(item.children, id);
if (c) {
return c;
}
}
}
//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"]);
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, $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}
/>
{/if}
</slot>
</ChatLayout>
import { goto } from "$app/navigation";
import { base } from "$app/paths";
import { onMount } from "svelte";
onMount(()=>{goto(`${base}/messages`)})
</script>
61 changes: 61 additions & 0 deletions src/routes/messages/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<script lang="ts">
import ChatLayout from '@/components/ChatLayout.svelte';
import Kind1 from './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)!;
}
for (let [_, item] of m) {
let c = find(item.children, id);
if (c) {
return c;
}
}
}
//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']);
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, $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}
<Kind1
treeItem={$rThreadParent || $responseFromWorker.recursiveEvents}
bind:newParent={threadParentID}
/>
{/if}
</slot>
</ChatLayout>
69 changes: 69 additions & 0 deletions src/routes/messages/Kind1.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<script lang="ts">
import type { EventTreeItem } from '@/workers/firehose.types';
import { type Writable } from 'svelte/store';
import RenderNoteContent from '../../lib/components/RenderNoteContent.svelte';
import Reply from './Reply.svelte';
import Zap from './Zap.svelte';
import Marcus from './Marcus.svelte';
export let treeItem: EventTreeItem;
export let newParent: Writable<string[]>;
let t: [string, EventTreeItem][];
$: {
let _t = [...treeItem.children.entries()].toSorted((_a, _b): number => {
let [_, a] = _a;
let [__, b] = _b;
return b.children.size - a.children.size;
});
t = _t.filter(([id, item]) => {
return item.event.kind == 1;
});
}
</script>
<div class="mt-2"></div>
{#each t as [id, tree], i (id)}
<div class="w-full">
<div class="grid">
<div class="flex gap-2">
<img
class="w-8 h-8 rounded-full"
src="https://zenquotes.io/img/marcus-aurelius.jpg"
alt="profile pic"
/>
<div class="grid">
<h5 class="text-gray-900 dark:text-orange-600 font-semibold leading-snug pb-1">Marcus</h5>
<div class="grid overflow-hidden mr-2">
<div class="px-3.5 py-2 bg-gray-200 dark:bg-gray-700 rounded-e-xl rounded-es-xl flex flex-col gap-2">
<h5 class="text-sm font-normal text-gray-900 dark:text-white py-2">
<RenderNoteContent inputString={tree.event.content} />
</h5>
<div class="flex justify-between">
<div><Marcus onclick={()=>{alert("implement me!")}} {tree} /></div>

<div>
<Zap onclick={()=>{alert("implement me!")}} {tree}/>
<Reply
onclick={() => {
console.log(48);
newParent.update((existing) => {
existing.push(id);
return existing;
});
}}
{tree}
/>
</div>
</div>
</div>
<div class="justify-end items-center inline-flex mb-2.5">
<h6 class="text-gray-500 text-xs font-normal leading-4 py-1">
{new Date(tree.event.created_at * 1000).toLocaleString()}
</h6>
</div>
</div>
</div>
</div>
</div>
</div>

{/each}
Loading

0 comments on commit 2dfd8ee

Please sign in to comment.