feat: improve relay management

src/commands.ts

@@ -21,9 +21,9 @@ async setBootstrapRelays(relays: string) : Promise<Result<null, string>> {
     else return { status: "error", error: e  as any };
 }
 },
-async getInboxRelays(userId: string) : Promise<Result<string[], string>> {
+async collectInboxRelays(userId: string) : Promise<Result<string[], string>> {
     try {
-    return { status: "ok", data: await TAURI_INVOKE("get_inbox_relays", { userId }) };
+    return { status: "ok", data: await TAURI_INVOKE("collect_inbox_relays", { userId }) };
 } catch (e) {
     if(e instanceof Error) throw e;
     else return { status: "error", error: e  as any };

src/main.tsx

@@ -1,19 +1,29 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { type } from "@tauri-apps/plugin-os";
+import { LRUCache } from "lru-cache";
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import "./global.css";
+import { commands } from "./commands";
 // Import the generated route tree
 import { routeTree } from "./routes.gen";
 
-const queryClient = new QueryClient();
 const platform = type();
+const queryClient = new QueryClient();
+const chatManager = new LRUCache<string, string>({
+	max: 3,
+	dispose: async (v, _) => {
+		console.log("disconnect: ", v);
+		await commands.disconnectInboxRelays(v);
+	},
+});
 
 const router = createRouter({
 	routeTree,
 	context: {
 		queryClient,
+		chatManager,
 		platform,
 	},
 });

src/routes/$account.chats.$id.lazy.tsx

@@ -33,17 +33,8 @@ type EventPayload = {
 
 export const Route = createLazyFileRoute("/$account/chats/$id")({
 	component: Screen,
-	pendingComponent: Pending,
 });
 
-function Pending() {
-	return (
-		<div className="size-full flex items-center justify-center">
-			<Spinner />
-		</div>
-	);
-}
-
 function Screen() {
 	return (
 		<div className="size-full flex flex-col">

src/routes/$account.chats.$id.tsx

@@ -1,14 +1,34 @@
 import { commands } from "@/commands";
+import { Spinner } from "@/components/spinner";
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/$account/chats/$id")({
-	loader: async ({ params }) => {
+	loader: async ({ params, context }) => {
 		const res = await commands.connectInboxRelays(params.id, false);
 
 		if (res.status === "ok") {
+			// Add id to chat manager to unsubscribe later.
+			context.chatManager.set(params.id, params.id);
+
 			return res.data;
 		} else {
 			return [];
 		}
 	},
+	pendingComponent: Pending,
+	pendingMs: 200,
+	pendingMinMs: 100,
 });
+
+function Pending() {
+	return (
+		<div className="size-full flex items-center justify-center">
+			<div className="flex flex-col gap-2 items-center justify-center">
+				<Spinner />
+				<span className="text-xs text-center text-neutral-600 dark:text-neutral-400">
+					Connection in progress. Please wait ...
+				</span>
+			</div>
+		</div>
+	);
+}

src/routes/$account.relays.tsx

@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/$account/relays")({
 	loader: async ({ params }) => {
-		const res = await commands.getInboxRelays(params.account);
+		const res = await commands.collectInboxRelays(params.account);
 
 		if (res.status === "ok") {
 			return res.data;

src/routes/__root.tsx

@@ -2,9 +2,11 @@ import { cn } from "@/commons";
 import type { QueryClient } from "@tanstack/react-query";
 import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
 import type { OsType } from "@tauri-apps/plugin-os";
+import type { LRUCache } from "lru-cache";
 
 interface RouterContext {
 	queryClient: QueryClient;
+	chatManager: LRUCache<string, string, unknown>;
 	platform: OsType;
 }