more changes

src/webpage/channel.ts

@@ -1239,35 +1239,45 @@ class Channel extends SnowFlake {
 			return new Message(json[0], this);
 		}
 	}
-	async focus(id: string) {
-		const m = this.messages.get(id);
-		if (m && m.div) {
-			if (document.contains(m.div)) {
-				m.div.scrollIntoView({
-					behavior: "smooth",
-					block: "center",
-				});
-				await new Promise((resolve) => {
-					setTimeout(resolve, 1000);
-				});
-				m.div.classList.remove("jumped");
-				await new Promise((resolve) => {
-					setTimeout(resolve, 100);
-				});
-				m.div.classList.add("jumped");
-				return;
+	async getMessages(id: string) {
+		const m = await this.getmessage(id);
+		if (!m) return;
+		const waits: Promise<unknown>[] = [];
+		let m1: string | undefined = m.id;
+		for (let i = 0; i <= 10; i++) {
+			if (!m1) {
+				waits.push(this.grabBefore(id));
+				break;
 			}
+			m1 = this.idToNext.get(m1);
 		}
-		console.log(await this.getmessage(id));
+		m1 = m.id;
+		for (let i = 0; i <= 10; i++) {
+			if (!m1) {
+				waits.push(this.grabAfter(id));
+				break;
+			}
+			m1 = this.idToPrev.get(m1);
+		}
+		await Promise.all(waits);
+	}
+	async focus(id: string) {
+		const prom = this.getMessages(id);
 
-		if (this.localuser.channelfocus === this) {
-			this.localuser.channelfocus?.infinite.delete();
-			this.localuser.channelfocus = undefined;
+		if (await Promise.race([prom, new Promise((res) => setTimeout(() => res(true), 300))])) {
+			const loading = document.getElementById("loadingdiv") as HTMLDivElement;
+			Channel.regenLoadingMessages();
+			loading.classList.add("loading");
+			await prom;
+			loading.classList.remove("loading");
 		}
-		await this.getHTML(true);
-		console.warn(id);
+
+		if (this.localuser.channelfocus !== this) {
+			await this.getHTML(true);
+		}
+
 		try {
-			await this.buildmessages(id);
+			await this.infinite.focus(id);
 		} catch {}
 		this.infinite.focus(id, true, true);
 	}

src/webpage/infiniteScroller.ts

@@ -68,6 +68,16 @@ class InfiniteScroller {
 			},
 			{root, threshold: 0.1},
 		);
+		root.addEventListener("scroll", () => {
+			if (this.scrollBottom < 5) {
+				const scroll = this.scroller;
+				if (!scroll) return;
+				const last = this.weakElmId.get(Array.from(scroll.children).at(-1) as HTMLElement);
+				if (!last) return;
+				if (this.backElm.get(last) || !this.backElm.has(last)) return;
+				this.reachesBottom();
+			}
+		});
 	}
 
 	async getDiv(initialId: string, flash = false): Promise<HTMLDivElement> {
@@ -83,23 +93,40 @@ class InfiniteScroller {
 		this.focus(initialId, flash, true);
 		return div;
 	}
+	private get scrollBottom() {
+		if (this.div) {
+			return this.div.scrollHeight - this.div.scrollTop - this.div.clientHeight;
+		} else {
+			return 0;
+		}
+	}
 
 	async addedBottom(): Promise<void> {
+		const snap = this.snapBottom();
 		const scroll = this.scroller;
 		if (!scroll) return;
 		const last = this.weakElmId.get(Array.from(scroll.children).at(-1) as HTMLElement);
 		if (!last) return;
 		this.backElm.delete(last);
-		this.fillIn();
+		await this.fillIn();
+		snap();
 	}
 
 	snapBottom(): () => void {
-		const scrollBottom = this.scrollBottom;
-		return () => {
-			if (this.div && scrollBottom < 4) {
-				this.div.scrollTop = this.div.scrollHeight;
-			}
-		};
+		const nothing = () => {};
+		const scroll = this.scroller;
+		if (!scroll) return nothing;
+		const last = this.weakElmId.get(Array.from(scroll.children).at(-1) as HTMLElement);
+		if (!last) return nothing;
+		if (this.backElm.get(last) || !this.backElm.has(last)) return nothing;
+		if (this.div) {
+			const trigger = this.scrollBottom < 4;
+			return () => {
+				if (this.div && trigger) this.div.scrollTop = this.div.scrollHeight;
+			};
+		} else {
+			return nothing;
+		}
 	}
 
 	async deleteId(id: string) {
@@ -261,28 +288,29 @@ class InfiniteScroller {
 			if (this.filling === fill) {
 				this.filling = undefined;
 			}
-			this.checkIDs();
 		});
 		this.filling = fill;
 		return fill;
 	}
 
 	async focus(id: string, flash = true, sec = false): Promise<void> {
+		// debugger;
 		const scroller = this.scroller;
 		if (!scroller) return;
-		await this.clearElms();
 
 		let div = this.curElms.get(id);
+		if (div && !document.contains(div)) div = undefined;
 		let had = true;
+		this.curFocID = id;
 
 		if (!div) {
+			await this.clearElms();
 			had = false;
 			const obj = await this.getFromID(id);
 			scroller.append(obj);
-			this.curFocID = id;
-			await this.fillIn(true);
 			div = obj;
 		}
+		await this.fillIn(true);
 		if (had && !sec) {
 			div.scrollIntoView({
 				behavior: "smooth",
@@ -290,12 +318,21 @@ class InfiniteScroller {
 				block: "center",
 			});
 		} else {
+			console.log(had, sec);
 			div.scrollIntoView({
 				block: "center",
 			});
 		}
 
 		if (flash) {
+			await new Promise((resolve) => {
+				setTimeout(resolve, 1000);
+			});
+			div.classList.remove("jumped");
+			await new Promise((resolve) => {
+				setTimeout(resolve, 100);
+			});
+			div.classList.add("jumped");
 		}
 	}
 

src/webpage/localuser.ts

@@ -4314,9 +4314,7 @@ class Localuser {
 						html.addEventListener("click", async () => {
 							try {
 								sideContainDiv.classList.add("hideSearchDiv");
-								(await message.channel.getmessage(message.id))?.deleteDiv();
-
-								await message.channel.getHTML(true, true, message.id);
+								await message.channel.focus(message.id);
 							} catch (e) {
 								console.error(e);
 							}

src/webpage/message.ts

@@ -773,7 +773,7 @@ class Message extends SnowFlake {
 			reply.onclick = (_) => {
 				if (!this.message_reference) return;
 				// TODO: FIX this
-				this.channel.infinite.focus(this.message_reference.message_id);
+				this.channel.focus(this.message_reference.message_id);
 			};
 			div.appendChild(replyline);
 		}