Skip to content

Commit

Permalink
problem: scroll position is all over the place
Browse files Browse the repository at this point in the history
  • Loading branch information
@gsovereignty
gsovereignty committed Apr 18, 2024
1 parent f8b96a2 commit 632406c
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 97 deletions.
112 changes: 58 additions & 54 deletions src/lib/views/messages/Messages.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@
//take current threadparentID (or root) and create a derived store of all events. derive antoher one to pipe it through sorting/filtering store.
//
//export let FrontendDataStore: Writable<FrontendData>
//export let FrontendDataStore: Writable<FrontendData>
let threadParentIDChain = writable(['root']);
Expand Down Expand Up @@ -54,49 +53,50 @@
threadParentID.subscribe(() => {
_stableShortlist = [];
stableShortList.set(_stableShortlist)
stableShortList.set(_stableShortlist);
});
renderQueue.subscribe((q) => {});
//remove viewed and add new items that haven't been viewed
let shortListLength = derived([renderQueue, viewed, threadParentID], ([$renderQ, $viewed, $parentID]) => {
let dirty = false;
let updated: NostrEvent[] = [];
for (let e of _stableShortlist) {
if (!$viewed.has(e.id) || $parentID != "root") {
//console.log(72, e.id);
updated.push(e);
} else {
dirty = true;
let shortListLength = derived(
[renderQueue, viewed, threadParentID],
([$renderQ, $viewed, $parentID]) => {
let dirty = false;
let updated: NostrEvent[] = [];
for (let e of _stableShortlist) {
if (!$viewed.has(e.id) || $parentID != 'root') {
//console.log(72, e.id);
updated.push(e);
} else {
dirty = true;
}
}
}
let needed = 6 - updated.length;
if (needed > 0) {
let pushed = 0;
for (let e of $renderQ) {
if (needed > pushed) {
if (!$viewed.has(e.id) && !arrayContainsEvent(updated, e.id)) {
pushed++;
updated.push(e);
//console.log(84, pushed);
dirty = true;
let needed = 6 - updated.length;
if (needed > 0) {
let pushed = 0;
for (let e of $renderQ) {
if (needed > pushed) {
if (!$viewed.has(e.id) && !arrayContainsEvent(updated, e.id)) {
pushed++;
updated.push(e);
//console.log(84, pushed);
dirty = true;
}
}
}
}
if (dirty) {
_stableShortlist = updated;
stableShortList.update((c) => {
c = updated;
return c;
});
//console.log(90);
}
return _stableShortlist.length;
}
if (dirty) {
_stableShortlist = updated;
stableShortList.update((c) => {
c = updated;
return c;
});
//console.log(90);
}
return _stableShortlist.length;
});
);
function arrayContainsEvent(a: NostrEvent[], id: string): boolean {
let inSet = new Set<string>();
Expand All @@ -117,26 +117,30 @@
{/if}
</div>
<slot>
{#if $stableShortList.length > 0 || $threadParentID != "root"}
{#if $threadParentID != "root"}
<RenderKind1AsThreadHead store={FrontendDataStore} note={$FrontendDataStore.rawEvents.get($threadParentID)}/>
{/if}
{#each $stableShortList as event, i (event.id)}<RenderKind1
{#if $stableShortList.length > 0 || $threadParentID != 'root'}
{#if $threadParentID != 'root'}
<RenderKind1AsThreadHead
store={FrontendDataStore}
note={event}
onClickReply={() => {
if ($threadParentID == "root") {
viewed.update((v) => {
v.add(event.id);
return v;
});
}
threadParentIDChain.update((exising) => {
exising.push(event.id);
return exising;
});
}}
/>{/each}
note={$FrontendDataStore.rawEvents.get($threadParentID)}
/>
{/if}
{#each $stableShortList as event, i (event.id)}<RenderKind1 isTop={(event.id == $stableShortList[0].id) && $threadParentID == "root"}
store={FrontendDataStore}
note={event}
onClickReply={() => {
if ($threadParentID == 'root') {
viewed.update((v) => {
v.add(event.id);
return v;
});
}
threadParentIDChain.update((exising) => {
exising.push(event.id);
return exising;
});
}}
/>
{/each}
{:else}
<Coracle />
{/if}
Expand Down
23 changes: 18 additions & 5 deletions src/lib/views/messages/RenderKind1.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,29 @@
import type { FrontendData } from '@/snort_workers/types';
import { inview } from 'svelte-inview';
import { viewed } from '@/workers_snort/firehose_master';
import { onMount } from 'svelte';
export let note: NostrEvent;
export let onClickReply: () => void;
export let store: Writable<FrontendData>;
export let isTop: boolean = false;
let top: HTMLDivElement;
onMount(() => {
if (isTop) {
(async () => {
top.scrollIntoView()
//top.scrollIntoView()
})();
}
});
$: childrenCount = $store?.replies.get(note.id) ? $store.replies.get(note.id)!.size : 0;
</script>

<div class="w-full mt-2">
<div bind:this={top} class="w-full mt-2">
<div class="grid">
<div class="flex gap-2">
<img
Expand Down Expand Up @@ -55,12 +69,11 @@
</div>
</div>
<div class="flex justify-between">
<h6 class="text-gray-500 text-xs font-normal leading-4 py-1">

</h6>
<h6 class="text-gray-500 text-xs font-normal leading-4 py-1"></h6>
<div class="justify-end items-center inline-flex">
<h6 class="text-gray-500 text-xs font-normal leading-4 py-1">
{new Date(note.created_at * 1000).toLocaleString()} {#if $viewed.has(note.id)}✓{/if}
{new Date(note.created_at * 1000).toLocaleString()}
{#if $viewed.has(note.id)}✓{/if}
</h6>
</div>
</div>
Expand Down
87 changes: 49 additions & 38 deletions src/lib/views/messages/RenderKind1AsThreadHead.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,54 @@
<script lang="ts">
import RenderNoteContent from '@/components/RenderNoteContent.svelte';
import Marcus from './Marcus.svelte';
import type { NostrEvent } from 'nostr-tools';
import Zap from './Zap.svelte';
import Reply from './Reply.svelte';
import { derived, type Writable } from 'svelte/store';
import type { FrontendData } from '@/snort_workers/types';
import { viewed } from '@/workers_snort/firehose_master';
import { onMount } from 'svelte';
import RenderNoteContent from "@/components/RenderNoteContent.svelte";
import Marcus from "./Marcus.svelte";
import type { NostrEvent } from "nostr-tools";
import Zap from "./Zap.svelte";
import Reply from "./Reply.svelte";
import { derived, type Writable } from "svelte/store";
import type { FrontendData } from "@/snort_workers/types";
import { viewed } from "@/workers_snort/firehose_master";
export let note: NostrEvent;
export let store: Writable<FrontendData>;
export let note:NostrEvent
export let store: Writable<FrontendData>
let top: HTMLDivElement;
$:childrenCount = $store?.replies.get(note.id)?$store.replies.get(note.id)!.size:0
onMount(() => {
(async () => {
top.scrollIntoView()
//top.scrollIntoView()
})();
});
$: childrenCount = $store?.replies.get(note.id) ? $store.replies.get(note.id)!.size : 0;
</script>
<div class="w-full mt-2">
<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 min-w-56">
<div class="px-3.5 py-2 bg-fuchsia-300 dark:bg-fuchsia-950 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={note.content} />
</h5>
</div>
<div class="justify-end items-center inline-flex">
<h6 class="text-gray-500 text-xs font-normal leading-4 py-1">
{new Date(note.created_at * 1000).toLocaleString()}{#if $viewed.has(note.id)}✓{/if}
</h6>
</div>
</div>
</div>
</div>
</div>
</div>

<div bind:this={top} class="w-full mt-2">
<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 min-w-56">
<div
class="px-3.5 py-2 bg-fuchsia-300 dark:bg-fuchsia-950 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={note.content} />
</h5>
</div>
<div class="justify-end items-center inline-flex">
<h6 class="text-gray-500 text-xs font-normal leading-4 py-1">
{new Date(note.created_at * 1000).toLocaleString()}{#if $viewed.has(note.id)}✓{/if}
</h6>
</div>
</div>
</div>
</div>
</div>
</div>

0 comments on commit 632406c

Please sign in to comment.