Make Lume Faster

apps/desktop2/package.json

@@ -23,23 +23,24 @@
 		"@radix-ui/react-switch": "^1.0.3",
 		"@radix-ui/react-tabs": "^1.0.4",
 		"@radix-ui/react-tooltip": "^1.0.7",
-		"@tanstack/query-sync-storage-persister": "^5.40.0",
-		"@tanstack/react-query": "^5.40.1",
-		"@tanstack/react-query-persist-client": "^5.40.1",
-		"@tanstack/react-router": "^1.35.3",
+		"@tanstack/query-persist-client-core": "^5.45.0",
+		"@tanstack/react-query": "^5.45.0",
+		"@tanstack/react-router": "^1.38.1",
+		"embla-carousel-react": "^8.1.5",
 		"i18next": "^23.11.5",
 		"i18next-resources-to-backend": "^1.2.1",
 		"minidenticons": "^4.2.1",
 		"nanoid": "^5.0.7",
+		"nostr-tools": "^2.7.0",
 		"react": "^18.3.1",
 		"react-currency-input-field": "^3.8.0",
 		"react-dom": "^18.3.1",
-		"react-hook-form": "^7.51.5",
+		"react-hook-form": "^7.52.0",
 		"react-hotkeys-hook": "^4.5.0",
 		"react-i18next": "^14.1.2",
 		"react-string-replace": "^1.1.1",
 		"slate": "^0.103.0",
-		"slate-react": "^0.104.0",
+		"slate-react": "^0.105.0",
 		"sonner": "^1.5.0",
 		"use-debounce": "^10.0.1",
 		"virtua": "^0.31.0"
@@ -48,16 +49,16 @@
 		"@lume/tailwindcss": "workspace:^",
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
-		"@tanstack/router-devtools": "^1.35.3",
-		"@tanstack/router-vite-plugin": "^1.35.4",
+		"@tanstack/router-devtools": "^1.38.1",
+		"@tanstack/router-vite-plugin": "^1.38.0",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
 		"@vitejs/plugin-react-swc": "^3.7.0",
 		"autoprefixer": "^10.4.19",
 		"postcss": "^8.4.38",
 		"tailwindcss": "^3.4.4",
 		"typescript": "^5.4.5",
-		"vite": "^5.2.13",
+		"vite": "^5.3.1",
 		"vite-plugin-top-level-await": "^1.4.1",
 		"vite-tsconfig-paths": "^4.3.2"
 	}

apps/desktop2/src/app.tsx

@@ -1,6 +1,4 @@
-import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
-import { QueryClient } from "@tanstack/react-query";
-import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import React, { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
@@ -10,11 +8,8 @@ import i18n from "./locale";
 import { routeTree } from "./router.gen"; // auto generated file
 import { type } from "@tauri-apps/plugin-os";
 
-const os = await type();
 const queryClient = new QueryClient();
-const persister = createSyncStoragePersister({
-	storage: window.localStorage,
-});
+const os = await type();
 
 // Set up a Router instance
 const router = createRouter({
@@ -26,12 +21,9 @@ const router = createRouter({
 	Wrap: ({ children }) => {
 		return (
 			<I18nextProvider i18n={i18n} defaultNS={"translation"}>
-				<PersistQueryClientProvider
-					client={queryClient}
-					persistOptions={{ persister }}
-				>
+				<QueryClientProvider client={queryClient}>
 					{children}
-				</PersistQueryClientProvider>
+				</QueryClientProvider>
 			</I18nextProvider>
 		);
 	},

apps/desktop2/src/components/column.tsx

@@ -2,53 +2,57 @@ import { CancelIcon, CheckIcon } from "@lume/icons";
 import type { LumeColumn } from "@lume/types";
 import { cn } from "@lume/utils";
 import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
 import { getCurrent } from "@tauri-apps/api/webviewWindow";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+type WindowEvent = {
+	scroll: boolean;
+	resize: boolean;
+};
 
 export function Column({
 	column,
 	account,
-	isScroll,
-	isResize,
 }: {
 	column: LumeColumn;
 	account: string;
-	isScroll: boolean;
-	isResize: boolean;
 }) {
 	const container = useRef<HTMLDivElement>(null);
-	const webviewLabel = useMemo(
-		() => `column-${account}_${column.label}`,
-		[account],
-	);
+	const webviewLabel = `column-${account}_${column.label}`;
 
 	const [isCreated, setIsCreated] = useState(false);
 
-	const repositionWebview = async () => {
+	const repositionWebview = useCallback(async () => {
 		const newRect = container.current.getBoundingClientRect();
 		await invoke("reposition_column", {
 			label: webviewLabel,
 			x: newRect.x,
 			y: newRect.y,
 		});
-	};
+	}, []);
 
-	const resizeWebview = async () => {
+	const resizeWebview = useCallback(async () => {
 		const newRect = container.current.getBoundingClientRect();
 		await invoke("resize_column", {
 			label: webviewLabel,
 			width: newRect.width,
 			height: newRect.height,
 		});
-	};
+	}, []);
 
 	useEffect(() => {
-		if (isCreated) resizeWebview();
-	}, [isResize]);
+		if (!isCreated) return;
 
-	useEffect(() => {
-		if (isScroll && isCreated) repositionWebview();
-	}, [isScroll]);
+		const unlisten = listen<WindowEvent>("window", (data) => {
+			if (data.payload.scroll) repositionWebview();
+			if (data.payload.resize) resizeWebview();
+		});
+
+		return () => {
+			unlisten.then((f) => f());
+		};
+	}, [isCreated]);
 
 	useEffect(() => {
 		if (!container?.current) return;
@@ -78,7 +82,7 @@ export function Column({
 	}, [account]);
 
 	return (
-		<div className="h-full w-[440px] shrink-0 p-2">
+		<div className="h-full w-[500px] shrink-0 p-2">
 			<div
 				className={cn(
 					"flex flex-col w-full h-full rounded-xl",
@@ -87,9 +91,7 @@ export function Column({
 						: "",
 				)}
 			>
-				{column.label !== "open" ? (
-					<Header label={column.label} name={column.name} />
-				) : null}
+				<Header label={column.label} name={column.name} />
 				<div ref={container} className="flex-1 w-full h-full" />
 			</div>
 		</div>
@@ -122,10 +124,10 @@ function Header({ label, name }: { label: string; name: string }) {
 	}, [title]);
 
 	return (
-		<div className="h-9 w-full flex items-center justify-between shrink-0 px-1">
+		<div className="flex items-center justify-between w-full px-1 h-9 shrink-0">
 			<div className="size-7" />
-			<div className="shrink-0 h-9 flex items-center justify-center">
-				<div className="relative flex gap-2 items-center">
+			<div className="flex items-center justify-center shrink-0 h-9">
+				<div className="relative flex items-center gap-2">
 					<div
 						contentEditable
 						suppressContentEditableWarning={true}
@@ -148,7 +150,7 @@ function Header({ label, name }: { label: string; name: string }) {
 			<button
 				type="button"
 				onClick={() => close()}
-				className="size-7 inline-flex hover:bg-black/10 rounded-lg dark:hover:bg-white/10 items-center justify-center text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
+				className="inline-flex items-center justify-center rounded-lg size-7 hover:bg-black/10 dark:hover:bg-white/10 text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
 			>
 				<CancelIcon className="size-4" />
 			</button>

apps/desktop2/src/components/conversation.tsx

@@ -1,23 +1,17 @@
 import { ThreadIcon } from "@lume/icons";
-import type { NostrEvent } from "@lume/types";
 import { Note } from "@/components/note";
 import { cn } from "@lume/utils";
-import { LumeEvent } from "@lume/system";
+import type { LumeEvent } from "@lume/system";
 import { useMemo } from "react";
 
 export function Conversation({
 	event,
-	gossip,
 	className,
 }: {
-	event: NostrEvent;
-	gossip?: boolean;
+	event: LumeEvent;
 	className?: string;
 }) {
-	const thread = useMemo(
-		() => LumeEvent.getEventThread(event.tags, gossip),
-		[event],
-	);
+	const thread = useMemo(() => event.thread, [event]);
 
 	return (
 		<Note.Provider event={event}>
@@ -28,23 +22,23 @@ export function Conversation({
 				)}
 			>
 				<div className="flex flex-col gap-3">
-					{thread?.root ? <Note.Child eventId={thread?.root} isRoot /> : null}
+					{thread?.root?.id ? <Note.Child event={thread?.root} isRoot /> : null}
 					<div className="flex items-center gap-2 px-3">
 						<div className="inline-flex items-center gap-1.5 shrink-0 text-sm font-medium text-neutral-600 dark:text-neutral-400">
 							<ThreadIcon className="size-4" />
 							Thread
 						</div>
 						<div className="flex-1 h-px bg-neutral-100 dark:bg-white/5" />
 					</div>
-					{thread?.reply ? <Note.Child eventId={thread?.reply} /> : null}
+					{thread?.reply?.id ? <Note.Child event={thread?.reply} /> : null}
 					<div>
-						<div className="px-3 h-14 flex items-center justify-between">
+						<div className="flex items-center justify-between px-3 h-14">
 							<Note.User />
 						</div>
 						<Note.Content className="px-3" />
 					</div>
 				</div>
-				<div className="flex items-center h-14 px-3">
+				<div className="flex items-center px-3 h-14">
 					<Note.Open />
 				</div>
 			</Note.Root>

apps/desktop2/src/components/note/buttons/repost.tsx

@@ -76,7 +76,7 @@ export function NoteRepost({ large = false }: { large?: boolean }) {
 						<button
 							type="button"
 							onClick={() => repost()}
-							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
+							className="inline-flex items-center gap-2 px-3 text-sm font-medium text-white rounded-lg h-9 hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
 						>
 							<RepostIcon className="size-4" />
 							{t("note.buttons.repost")}
@@ -85,8 +85,8 @@ export function NoteRepost({ large = false }: { large?: boolean }) {
 					<DropdownMenu.Item asChild>
 						<button
 							type="button"
-							onClick={() => LumeWindow.openEditor(event.id, true)}
-							className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-white hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
+							onClick={() => LumeWindow.openEditor(null, event.id)}
+							className="inline-flex items-center gap-2 px-3 text-sm font-medium text-white rounded-lg h-9 hover:bg-neutral-900 focus:outline-none dark:text-black dark:hover:bg-neutral-100"
 						>
 							<QuoteIcon className="size-4" />
 							{t("note.buttons.quote")}

apps/desktop2/src/components/note/buttons/zap.tsx

@@ -1,14 +1,10 @@
 import { ZapIcon } from "@lume/icons";
-import { useRouteContext } from "@tanstack/react-router";
 import { useNoteContext } from "../provider";
 import { cn } from "@lume/utils";
 import { LumeWindow } from "@lume/system";
 
 export function NoteZap({ large = false }: { large?: boolean }) {
 	const event = useNoteContext();
-	const { settings } = useRouteContext({ strict: false });
-
-	if (!settings.zap) return null;
 
 	return (
 		<button