diff --git a/apps/desktop2/src/components/column.tsx b/apps/desktop2/src/components/column.tsx index a6add5e0..6e58f595 100644 --- a/apps/desktop2/src/components/column.tsx +++ b/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(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]); diff --git a/apps/desktop2/src/routes/$account.home.tsx b/apps/desktop2/src/routes/$account.home.tsx index 3b4d5174..689ccf97 100644 --- a/apps/desktop2/src/routes/$account.home.tsx +++ b/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(null); + const [columns, setColumns] = useState(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("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) => ( ): AccountSearch => { - return { - accounts: (search?.accounts as string[]) || [], - }; + beforeLoad: async () => { + const accounts = await NostrAccount.getAccounts(); + return { accounts }; }, component: Screen, }); @@ -50,7 +45,7 @@ function Screen() {
@@ -84,7 +79,7 @@ function Screen() { } function Accounts() { - const { accounts } = Route.useSearch(); + const { accounts } = Route.useRouteContext(); const { account } = Route.useParams(); const [windowWidth, setWindowWidth] = useState(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."); } diff --git a/apps/desktop2/src/routes/auth/$account.settings.tsx b/apps/desktop2/src/routes/auth/$account.settings.tsx index 6c91a4c1..65bb096e 100644 --- a/apps/desktop2/src/routes/auth/$account.settings.tsx +++ b/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, }); } diff --git a/apps/desktop2/src/routes/index.tsx b/apps/desktop2/src/routes/index.tsx index 25f52b12..7e11d38b 100644 --- a/apps/desktop2/src/routes/index.tsx +++ b/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, }); } diff --git a/packages/system/src/query.ts b/packages/system/src/query.ts index 23684308..c37b5014 100644 --- a/packages/system/src/query.ts +++ b/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; } } diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts index 85266f23..3f853063 100644 --- a/packages/types/index.d.ts +++ b/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;