fix: column overlapped after change account

apps/desktop2/src/components/column.tsx

@@ -3,7 +3,7 @@ import type { LumeColumn } from "@lume/types";
 import { cn } from "@lume/utils";
 import { invoke } from "@tauri-apps/api/core";
 import { getCurrent } from "@tauri-apps/api/webviewWindow";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 export function Column({
 	column,
@@ -17,7 +17,10 @@ export function Column({
 	isResize: boolean;
 }) {
 	const container = useRef<HTMLDivElement>(null);
-	const webviewLabel = `column-${account}_${column.label}`;
+	const webviewLabel = useMemo(
+		() => `column-${account}_${column.label}`,
+		[account],
+	);
 
 	const [isCreated, setIsCreated] = useState(false);
 
@@ -48,6 +51,8 @@ export function Column({
 	}, [isScroll]);
 
 	useEffect(() => {
+		if (!container?.current) return;
+
 		const rect = container.current.getBoundingClientRect();
 		const url = `${column.content}?account=${account}&label=${column.label}&name=${column.name}`;
 
@@ -59,11 +64,16 @@ export function Column({
 			width: rect.width,
 			height: rect.height,
 			url,
-		}).then(() => setIsCreated(true));
+		}).then(() => {
+			console.log("created: ", webviewLabel);
+			setIsCreated(true);
+		});
 
 		// close webview when unmounted
 		return () => {
-			invoke("close_column", { label: webviewLabel });
+			invoke("close_column", { label: webviewLabel }).then(() => {
+				console.log("closed: ", webviewLabel);
+			});
 		};
 	}, [account]);
 

apps/desktop2/src/routes/$account.home.tsx

@@ -13,9 +13,11 @@ import { VList, type VListHandle } from "virtua";
 
 export const Route = createFileRoute("/$account/home")({
 	loader: async () => {
-		const columns = NostrQuery.getColumns();
+		const columns = await NostrQuery.getColumns();
 		return columns;
 	},
+	gcTime: 0,
+	shouldReload: false,
 	component: Screen,
 });
 
@@ -24,11 +26,16 @@ function Screen() {
 	const initialColumnList = Route.useLoaderData();
 	const vlistRef = useRef<VListHandle>(null);
 
+	const [columns, setColumns] = useState<LumeColumn[]>(null);
 	const [selectedIndex, setSelectedIndex] = useState(-1);
-	const [columns, setColumns] = useState([]);
 	const [isScroll, setIsScroll] = useState(false);
 	const [isResize, setIsResize] = useState(false);
 
+	const reset = () => {
+		setColumns(null);
+		setSelectedIndex(-1);
+	};
+
 	const goLeft = () => {
 		const prevIndex = Math.max(selectedIndex - 1, 0);
 		setSelectedIndex(prevIndex);
@@ -64,7 +71,7 @@ function Screen() {
 
 		// scroll to the newest column
 		vlistRef.current.scrollToIndex(newCols.length - 1, {
-			align: "end",
+			align: "center",
 		});
 	}, 150);
 
@@ -103,12 +110,15 @@ function Screen() {
 	}, [initialColumnList]);
 
 	useEffect(() => {
-		// save state
-		NostrQuery.setColumns(columns);
+		// save current state
+		if (columns?.length) {
+			NostrQuery.setColumns(columns).then(() => console.log("saved"));
+		}
 	}, [columns]);
 
 	useEffect(() => {
 		const unlistenColEvent = listen<EventColumns>("columns", (data) => {
+			if (data.payload.type === "reset") reset();
 			if (data.payload.type === "add") add(data.payload.column);
 			if (data.payload.type === "remove") remove(data.payload.label);
 			if (data.payload.type === "set_title")
@@ -137,9 +147,9 @@ function Screen() {
 				onScrollEnd={() => setIsScroll(false)}
 				className="scrollbar-none h-full w-full overflow-x-auto focus:outline-none"
 			>
-				{columns.map((column) => (
+				{columns?.map((column) => (
 					<Column
-						key={column.label}
+						key={account + column.label}
 						column={column}
 						account={account}
 						isScroll={isScroll}

apps/desktop2/src/routes/$account.tsx

@@ -22,15 +22,10 @@ import * as Popover from "@radix-ui/react-popover";
 import { LumeWindow, NostrAccount, NostrQuery } from "@lume/system";
 import { Link } from "@tanstack/react-router";
 
-type AccountSearch = {
-	accounts?: string[];
-};
-
 export const Route = createFileRoute("/$account")({
-	validateSearch: (search: Record<string, unknown>): AccountSearch => {
-		return {
-			accounts: (search?.accounts as string[]) || [],
-		};
+	beforeLoad: async () => {
+		const accounts = await NostrAccount.getAccounts();
+		return { accounts };
 	},
 	component: Screen,
 });
@@ -50,7 +45,7 @@ function Screen() {
 				<div className="flex items-center gap-3">
 					<Accounts />
 					<Link
-						to="/landing/"
+						to="/landing"
 						className="inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-black/10 text-neutral-800 hover:bg-black/20 dark:bg-white/10 dark:text-neutral-200 dark:hover:bg-white/20"
 					>
 						<PlusIcon className="size-5" />
@@ -84,7 +79,7 @@ function Screen() {
 }
 
 function Accounts() {
-	const { accounts } = Route.useSearch();
+	const { accounts } = Route.useRouteContext();
 	const { account } = Route.useParams();
 
 	const [windowWidth, setWindowWidth] = useState<number>(null);
@@ -108,11 +103,20 @@ function Accounts() {
 			return await LumeWindow.openProfile(account);
 		}
 
-		// change current account and update signer
+		// Change current account and update signer
 		const select = await NostrAccount.loadAccount(npub);
 
 		if (select) {
-			return navigate({ to: "/$account/home", params: { account: npub } });
+			// Reset current columns
+			await getCurrent().emit("columns", { type: "reset" });
+
+			// Redirect to new account
+			return navigate({
+				to: "/$account/home",
+				params: { account: npub },
+				resetScroll: true,
+				replace: true,
+			});
 		} else {
 			toast.warning("Something wrong.");
 		}

apps/desktop2/src/routes/auth/$account.settings.tsx

@@ -1,5 +1,5 @@
 import { LaurelIcon } from "@lume/icons";
-import { NostrAccount, NostrQuery } from "@lume/system";
+import { NostrQuery } from "@lume/system";
 import { Spinner } from "@lume/ui";
 import * as Switch from "@radix-ui/react-switch";
 import { createFileRoute } from "@tanstack/react-router";
@@ -54,13 +54,11 @@ function Screen() {
 
 			// publish settings
 			const eventId = await NostrQuery.setSettings(newSettings);
-			const allAccounts = await NostrAccount.getAccounts();
 
 			if (eventId) {
 				return navigate({
 					to: "/$account/home",
 					params: { account },
-					search: { accounts: [...new Set([account, ...allAccounts])] },
 					replace: true,
 				});
 			}

apps/desktop2/src/routes/index.tsx

@@ -41,9 +41,6 @@ function Screen() {
 				return navigate({
 					to: "/$account/home",
 					params: { account: npub },
-					search: {
-						accounts: context.accounts,
-					},
 					replace: true,
 				});
 			}

packages/system/src/query.ts

@@ -242,15 +242,19 @@ export class NostrQuery {
 		const systemColumns: LumeColumn[] = JSON.parse(resourceFile);
 		const query = await commands.getNstore(NSTORE_KEYS.columns);
 
-		if (query.status === "ok") {
-			const columns: LumeColumn[] = query.data ? JSON.parse(query.data) : [];
+		try {
+			if (query.status === "ok") {
+				const columns: LumeColumn[] = JSON.parse(query.data);
 
-			if (columns.length < 1) {
+				if (!columns?.length) {
+					return systemColumns;
+				}
+
+				return columns;
+			} else {
 				return systemColumns;
 			}
-
-			return columns;
-		} else {
+		} catch {
 			return systemColumns;
 		}
 	}

packages/types/index.d.ts

@@ -110,7 +110,7 @@ export interface LumeColumn {
 }
 
 export interface EventColumns {
-	type: "add" | "remove" | "update" | "left" | "right" | "set_title";
+	type: "reset" | "add" | "remove" | "update" | "left" | "right" | "set_title";
 	label?: string;
 	title?: string;
 	column?: LumeColumn;