fix: column overlapped after change account

This commit is contained in:
reya 2024-05-31 15:25:47 +07:00
parent c682a58842
commit f94680e487
7 changed files with 59 additions and 36 deletions

View File

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

View File

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

View File

@ -22,15 +22,10 @@ import * as Popover from "@radix-ui/react-popover";
import { LumeWindow, NostrAccount, NostrQuery } from "@lume/system"; import { LumeWindow, NostrAccount, NostrQuery } from "@lume/system";
import { Link } from "@tanstack/react-router"; import { Link } from "@tanstack/react-router";
type AccountSearch = {
accounts?: string[];
};
export const Route = createFileRoute("/$account")({ export const Route = createFileRoute("/$account")({
validateSearch: (search: Record<string, unknown>): AccountSearch => { beforeLoad: async () => {
return { const accounts = await NostrAccount.getAccounts();
accounts: (search?.accounts as string[]) || [], return { accounts };
};
}, },
component: Screen, component: Screen,
}); });
@ -50,7 +45,7 @@ function Screen() {
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Accounts /> <Accounts />
<Link <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" 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" /> <PlusIcon className="size-5" />
@ -84,7 +79,7 @@ function Screen() {
} }
function Accounts() { function Accounts() {
const { accounts } = Route.useSearch(); const { accounts } = Route.useRouteContext();
const { account } = Route.useParams(); const { account } = Route.useParams();
const [windowWidth, setWindowWidth] = useState<number>(null); const [windowWidth, setWindowWidth] = useState<number>(null);
@ -108,11 +103,20 @@ function Accounts() {
return await LumeWindow.openProfile(account); return await LumeWindow.openProfile(account);
} }
// change current account and update signer // Change current account and update signer
const select = await NostrAccount.loadAccount(npub); const select = await NostrAccount.loadAccount(npub);
if (select) { 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 { } else {
toast.warning("Something wrong."); toast.warning("Something wrong.");
} }

View File

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

View File

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

View File

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

View File

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