Event Subscriptions (#218)

* feat: improve create column command

* refactor: thread

* feat: add window virtualized to event screen

* chore: update deps

* fix: window decoration

* feat: improve mention ntoe

* feat: add subscription to event screen

packages/icons/package.json

@@ -9,6 +9,6 @@
 	"devDependencies": {
 		"@lume/tsconfig": "workspace:*",
 		"@types/react": "^18.3.3",
-		"typescript": "^5.4.5"
+		"typescript": "^5.5.2"
 	}
 }

packages/system/package.json

@@ -5,8 +5,8 @@
 	"main": "./src/index.ts",
 	"dependencies": {
 		"@lume/utils": "workspace:^",
-		"@tanstack/query-persist-client-core": "^5.45.0",
-		"@tanstack/react-query": "^5.45.0",
+		"@tanstack/query-persist-client-core": "^5.48.0",
+		"@tanstack/react-query": "^5.48.0",
 		"nostr-tools": "^2.7.0",
 		"react": "^18.3.1"
 	},
@@ -14,6 +14,6 @@
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.3.3",
-		"typescript": "^5.4.5"
+		"typescript": "^5.5.2"
 	}
 }

packages/system/src/event.ts

@@ -1,10 +1,4 @@
-import type {
-	EventTag,
-	EventWithReplies,
-	Kind,
-	Meta,
-	NostrEvent,
-} from "@lume/types";
+import type { EventTag, Kind, Meta, NostrEvent } from "@lume/types";
 import { type Result, commands } from "./commands";
 
 export class LumeEvent {
@@ -110,52 +104,82 @@ export class LumeEvent {
 		}
 	}
 
-	public async getAllReplies() {
+	public async getEventReplies() {
 		const query = await commands.getReplies(this.id);
 
 		if (query.status === "ok") {
-			const events = query.data.map((item) => {
-				const nostrEvent: NostrEvent = JSON.parse(item.raw);
+			const events = query.data
+				// Create Lume Events
+				.map((item) => LumeEvent.from(item.raw, item.parsed))
+				// Filter quote event
+				.filter(
+					(ev) =>
+						!ev.tags.filter((t) => t[0] === "q" || t[3] === "mention").length,
+				);
 
-				if (item.parsed) {
-					nostrEvent.meta = item.parsed;
-				} else {
-					nostrEvent.meta = null;
-				}
-
-				const lumeEvent = new LumeEvent(nostrEvent);
-
-				return lumeEvent;
-			});
-
-			if (events.length > 0) {
-				const replies = new Set();
+			if (events.length > 1) {
+				const removeQueues = new Set();
 
 				for (const event of events) {
 					const tags = event.tags.filter(
-						(el) => el[0] === "e" && el[1] !== this.id && el[3] !== "mention",
+						(t) => t[0] === "e" && t[1] !== this.id,
 					);
 
-					if (tags.length > 0) {
-						for (const tag of tags) {
-							const rootIndex = events.findIndex((el) => el.id === tag[1]);
+					if (tags.length === 1) {
+						const index = events.findIndex((ev) => ev.id === tags[0][1]);
 
-							if (rootIndex !== -1) {
-								const rootEvent = events[rootIndex];
+						if (index !== -1) {
+							const rootEvent = events[index];
 
-								if (rootEvent?.replies) {
-									rootEvent.replies.push(event);
-								} else {
-									rootEvent.replies = [event];
+							if (rootEvent.replies?.length) {
+								rootEvent.replies.push(event);
+							} else {
+								rootEvent.replies = [event];
+							}
+
+							// Add current event to queue
+							removeQueues.add(event.id);
+
+							continue;
+						}
+					}
+
+					for (const tag of tags) {
+						const id = tag[1];
+						const rootIndex = events.findIndex((ev) => ev.id === id);
+
+						if (rootIndex !== -1) {
+							const rootEvent = events[rootIndex];
+
+							if (rootEvent.replies?.length) {
+								const childIndex = rootEvent.replies.findIndex(
+									(ev) => ev.id === id,
+								);
+
+								if (childIndex !== -1) {
+									const childEvent = rootEvent.replies[rootIndex];
+
+									if (childEvent.replies?.length) {
+										childEvent.replies.push(event);
+									} else {
+										childEvent.replies = [event];
+									}
+
+									// Add current event to queue
+									removeQueues.add(event.id);
 								}
-
-								replies.add(event.id);
+							} else {
+								rootEvent.replies = [event];
+								// Add current event to queue
+								removeQueues.add(event.id);
 							}
 						}
+
+						break;
 					}
 				}
 
-				return events.filter((ev) => !replies.has(ev.id));
+				return events.filter((ev) => !removeQueues.has(ev.id));
 			}
 
 			return events;
@@ -165,6 +189,26 @@ export class LumeEvent {
 		}
 	}
 
+	public async listenEventReply() {
+		const query = await commands.listenEventReply(this.id);
+
+		if (query.status === "ok") {
+			return query.data;
+		} else {
+			throw new Error(query.error);
+		}
+	}
+
+	public async unlistenEventReply() {
+		const query = await commands.unlistenEventReply(this.id);
+
+		if (query.status === "ok") {
+			return query.data;
+		} else {
+			throw new Error(query.error);
+		}
+	}
+
 	public async zap(amount: number, message: string) {
 		const query = await commands.zapEvent(this.id, amount.toString(), message);
 
@@ -226,4 +270,16 @@ export class LumeEvent {
 			throw new Error(query.error);
 		}
 	}
+
+	static from(raw: string, parsed?: Meta) {
+		const nostrEvent: NostrEvent = JSON.parse(raw);
+
+		if (parsed) {
+			nostrEvent.meta = parsed;
+		} else {
+			nostrEvent.meta = null;
+		}
+
+		return new this(nostrEvent);
+	}
 }

packages/system/src/window.ts

@@ -15,8 +15,8 @@ export class LumeWindow {
 		const reply: string =
 			eTags.find((el) => el[3] === "reply")?.[1] ?? eTags[1]?.[1];
 
-		const label = `event-${event.id}`;
 		const url = `/events/${root ?? reply ?? event.id}`;
+		const label = `event-${root ?? reply ?? event.id}`;
 
 		const query = await commands.openWindow({
 			label,
@@ -26,6 +26,7 @@ export class LumeWindow {
 			height: 800,
 			maximizable: true,
 			minimizable: true,
+			hidden_title: false,
 		});
 
 		if (query.status === "ok") {
@@ -45,6 +46,7 @@ export class LumeWindow {
 			height: 800,
 			maximizable: true,
 			minimizable: true,
+			hidden_title: true,
 		});
 
 		if (query.status === "ok") {
@@ -76,8 +78,9 @@ export class LumeWindow {
 			title: "Editor",
 			width: 560,
 			height: 340,
-			maximizable: true,
+			maximizable: false,
 			minimizable: false,
+			hidden_title: true,
 		});
 
 		if (query.status === "ok") {
@@ -99,6 +102,7 @@ export class LumeWindow {
 				height: 460,
 				maximizable: false,
 				minimizable: false,
+				hidden_title: true,
 			});
 		} else {
 			await LumeWindow.openSettings("bitcoin-connect");
@@ -115,6 +119,7 @@ export class LumeWindow {
 			height: 500,
 			maximizable: false,
 			minimizable: false,
+			hidden_title: true,
 		});
 
 		if (query.status === "ok") {
@@ -134,6 +139,7 @@ export class LumeWindow {
 			height: 600,
 			maximizable: false,
 			minimizable: false,
+			hidden_title: true,
 		});
 
 		if (query.status === "ok") {

packages/types/package.json

@@ -9,6 +9,6 @@
 		"access": "public"
 	},
 	"devDependencies": {
-		"typescript": "^5.4.5"
+		"typescript": "^5.5.2"
 	}
 }

packages/ui/package.json

@@ -16,6 +16,6 @@
 		"@lume/types": "workspace:^",
 		"@types/react": "^18.3.3",
 		"tailwindcss": "^3.4.4",
-		"typescript": "^5.4.5"
+		"typescript": "^5.5.2"
 	}
 }

packages/utils/package.json

@@ -24,6 +24,6 @@
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
 		"tailwind-merge": "^2.3.0",
-		"typescript": "^5.4.5"
+		"typescript": "^5.5.2"
 	}
 }