mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-01 09:21:07 +00:00
fix: column overlapped after change account
This commit is contained in:
parent
c682a58842
commit
f94680e487
@ -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]);
|
||||||
|
|
||||||
|
@ -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}
|
||||||
|
@ -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.");
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -242,10 +242,11 @@ 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);
|
||||||
|
|
||||||
|
try {
|
||||||
if (query.status === "ok") {
|
if (query.status === "ok") {
|
||||||
const columns: LumeColumn[] = query.data ? JSON.parse(query.data) : [];
|
const columns: LumeColumn[] = JSON.parse(query.data);
|
||||||
|
|
||||||
if (columns.length < 1) {
|
if (!columns?.length) {
|
||||||
return systemColumns;
|
return systemColumns;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -253,6 +254,9 @@ export class NostrQuery {
|
|||||||
} else {
|
} else {
|
||||||
return systemColumns;
|
return systemColumns;
|
||||||
}
|
}
|
||||||
|
} catch {
|
||||||
|
return systemColumns;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static async setColumns(columns: LumeColumn[]) {
|
static async setColumns(columns: LumeColumn[]) {
|
||||||
|
2
packages/types/index.d.ts
vendored
2
packages/types/index.d.ts
vendored
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user