Improve column management (#221)

* wip: redesign store

* feat: update trending column

* feat: add more functions

apps/desktop2/src/components/column.tsx

@@ -1,8 +1,8 @@
-import { CancelIcon, CheckIcon } from "@lume/icons";
+import { CheckIcon, HorizontalDotsIcon } 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 { Menu, MenuItem, PredefinedMenuItem } from "@tauri-apps/api/menu";
 import { getCurrent } from "@tauri-apps/api/webviewWindow";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 
@@ -86,14 +86,22 @@ export const Column = memo(function Column({
 	return (
 		<div className="h-full w-[480px] shrink-0 p-2">
 			<div className="flex flex-col w-full h-full rounded-xl bg-black/5 dark:bg-white/10">
-				<Header label={column.label} name={column.name} />
+				<Header
+					label={column.label}
+					webview={webviewLabel}
+					name={column.name}
+				/>
 				<div ref={container} className="flex-1 w-full h-full" />
 			</div>
 		</div>
 	);
 });
 
-function Header({ label, name }: { label: string; name: string }) {
+function Header({
+	label,
+	webview,
+	name,
+}: { label: string; webview: string; name: string }) {
 	const [title, setTitle] = useState(name);
 	const [isChanged, setIsChanged] = useState(false);
 
@@ -109,10 +117,56 @@ function Header({ label, name }: { label: string; name: string }) {
 		setIsChanged(false);
 	};
 
-	const close = async () => {
-		const mainWindow = getCurrent();
-		await mainWindow.emit("columns", { type: "remove", label });
-	};
+	const showContextMenu = useCallback(async (e: React.MouseEvent) => {
+		e.preventDefault();
+
+		const menuItems = await Promise.all([
+			MenuItem.new({
+				text: "Reload",
+				action: async () => {
+					await invoke("reload_column", { label: webview });
+				},
+			}),
+			MenuItem.new({
+				text: "Open in new window",
+				action: () => console.log("not implemented."),
+			}),
+			PredefinedMenuItem.new({ item: "Separator" }),
+			MenuItem.new({
+				text: "Move left",
+				action: async () => {
+					await getCurrent().emit("columns", {
+						type: "move",
+						label,
+						direction: "left",
+					});
+				},
+			}),
+			MenuItem.new({
+				text: "Move right",
+				action: async () => {
+					await getCurrent().emit("columns", {
+						type: "move",
+						label,
+						direction: "right",
+					});
+				},
+			}),
+			PredefinedMenuItem.new({ item: "Separator" }),
+			MenuItem.new({
+				text: "Close",
+				action: async () => {
+					await getCurrent().emit("columns", { type: "remove", label });
+				},
+			}),
+		]);
+
+		const menu = await Menu.new({
+			items: menuItems,
+		});
+
+		await menu.popup().catch((e) => console.error(e));
+	}, []);
 
 	useEffect(() => {
 		if (title.length !== name.length) setIsChanged(true);
@@ -121,7 +175,7 @@ function Header({ label, name }: { label: string; name: string }) {
 	return (
 		<div className="flex items-center justify-between w-full px-1 h-9 shrink-0">
 			<div className="size-7" />
-			<div className="flex items-center justify-center shrink-0 h-9">
+			<div className="flex items-center justify-center shrink-0 h-7">
 				<div className="relative flex items-center gap-2">
 					<div
 						contentEditable
@@ -144,10 +198,10 @@ function Header({ label, name }: { label: string; name: string }) {
 			</div>
 			<button
 				type="button"
-				onClick={() => close()}
-				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"
+				onClick={(e) => showContextMenu(e)}
+				className="inline-flex items-center justify-center rounded-lg size-7 hover:bg-black/10 dark:hover:bg-white/10"
 			>
-				<CancelIcon className="size-4" />
+				<HorizontalDotsIcon className="size-5" />
 			</button>
 		</div>
 	);

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

@@ -50,8 +50,8 @@ function Screen() {
 			type: "add",
 			column: {
 				label: "store",
-				name: "Store",
-				content: "/store/official",
+				name: "Column Gallery",
+				content: "/store",
 			},
 		});
 	}, []);
@@ -65,6 +65,23 @@ function Screen() {
 		setColumns((prev) => prev.filter((t) => t.label !== label));
 	}, 150);
 
+	const move = useDebouncedCallback(
+		(label: string, direction: "left" | "right") => {
+			const newCols = [...columns];
+
+			const col = newCols.find((el) => el.label === label);
+			const colIndex = newCols.findIndex((el) => el.label === label);
+
+			newCols.splice(colIndex, 1);
+
+			if (direction === "left") newCols.splice(colIndex - 1, 0, col);
+			if (direction === "right") newCols.splice(colIndex + 1, 0, col);
+
+			setColumns(newCols);
+		},
+		150,
+	);
+
 	const updateName = useDebouncedCallback((label: string, title: string) => {
 		const currentColIndex = columns.findIndex((col) => col.label === label);
 
@@ -135,6 +152,8 @@ function Screen() {
 			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 === "move")
+				move(data.payload.label, data.payload.direction);
 			if (data.payload.type === "set_title")
 				updateName(data.payload.label, data.payload.title);
 		});

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

@@ -34,8 +34,8 @@ function Screen() {
 			type: "add",
 			column: {
 				label: "store",
-				name: "Store",
-				content: "/store/official",
+				name: "Column Gallery",
+				content: "/store",
 			},
 		});
 	};

apps/desktop2/src/routes/global.tsx

@@ -81,11 +81,11 @@ export function Screen() {
 			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
-						<div className="flex items-center justify-center w-full mb-3 h-11 bg-black/10 dark:bg-white/10 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">
-									Fetching new notes...
+									Getting new notes...
 								</span>
 							</div>
 						</div>

apps/desktop2/src/routes/group.tsx

@@ -95,11 +95,11 @@ export function Screen() {
 			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
-						<div className="flex items-center justify-center w-full mb-3 h-11 bg-black/10 dark:bg-white/10 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">
-									Fetching new notes...
+									Getting new notes...
 								</span>
 							</div>
 						</div>

apps/desktop2/src/routes/newsfeed.tsx

@@ -111,7 +111,7 @@ export function Screen() {
 				<Listerner />
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
-						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/10 dark:bg-white/10 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">

apps/desktop2/src/routes/store.community.tsx

@@ -1,21 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/store/community")({
-	component: Screen,
-});
-
-function Screen() {
-	return (
-		<div className="flex h-full flex-col items-center justify-center gap-3 p-3">
-			<div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full">
-				<div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
-			</div>
-			<div className="text-center">
-				<h1 className="font-semibold text-lg">Coming Soon</h1>
-				<p className="text-sm text-neutral-700 dark:text-neutral-300 leading-tight">
-					Enhance your experience <br /> by adding column shared by community.
-				</p>
-			</div>
-		</div>
-	);
-}

apps/desktop2/src/routes/store.official.tsx

@@ -1,69 +0,0 @@
-import type { LumeColumn } from "@lume/types";
-import { createFileRoute } from "@tanstack/react-router";
-import { resolveResource } from "@tauri-apps/api/path";
-import { getCurrent } from "@tauri-apps/api/window";
-import { readTextFile } from "@tauri-apps/plugin-fs";
-
-export const Route = createFileRoute("/store/official")({
-	beforeLoad: async () => {
-		const resourcePath = await resolveResource(
-			"resources/official_columns.json",
-		);
-		const officialColumns: LumeColumn[] = JSON.parse(
-			await readTextFile(resourcePath),
-		);
-
-		return {
-			officialColumns,
-		};
-	},
-	component: Screen,
-});
-
-function Screen() {
-	const { officialColumns } = Route.useRouteContext();
-
-	const install = async (column: LumeColumn) => {
-		const mainWindow = getCurrent();
-		await mainWindow.emit("columns", { type: "add", column });
-	};
-
-	return (
-		<div className="flex flex-col gap-3 p-3">
-			{officialColumns.map((column) => (
-				<div
-					key={column.label}
-					className="relative h-[200px] w-full overflow-hidden rounded-xl bg-gradient-to-tr from-orange-100 to-blue-200 px-3 pt-3"
-				>
-					{column.cover ? (
-						<img
-							src={column.cover}
-							srcSet={column.coverRetina}
-							alt={column.name}
-							loading="lazy"
-							decoding="async"
-							className="absolute left-0 top-0 z-10 h-full w-full object-cover"
-						/>
-					) : null}
-					<div className="absolute bottom-0 left-0 z-20 h-16 w-full bg-black/40 px-3">
-						<div className="flex h-full items-center justify-between">
-							<div>
-								<h1 className="font-semibold text-white">{column.name}</h1>
-								<p className="max-w-[24rem] truncate text-sm text-white/80">
-									{column.description}
-								</p>
-							</div>
-							<button
-								type="button"
-								onClick={() => install(column)}
-								className="inline-flex h-8 w-16 shrink-0 items-center justify-center rounded-full bg-white/20 text-sm font-medium text-white hover:bg-white hover:text-blue-500"
-							>
-								Add
-							</button>
-						</div>
-					</div>
-				</div>
-			))}
-		</div>
-	);
-}

apps/desktop2/src/routes/store.tsx

@@ -1,48 +1,104 @@
-import { GlobalIcon, LaurelIcon } from "@lume/icons";
-import { cn } from "@lume/utils";
-import { Link } from "@tanstack/react-router";
-import { Outlet, createFileRoute } from "@tanstack/react-router";
+import { CommunityIcon, LaurelIcon } from "@lume/icons";
+import type { LumeColumn } from "@lume/types";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { createFileRoute } from "@tanstack/react-router";
+import { resolveResource } from "@tauri-apps/api/path";
+import { getCurrent } from "@tauri-apps/api/window";
+import { readTextFile } from "@tauri-apps/plugin-fs";
 
 export const Route = createFileRoute("/store")({
+	beforeLoad: async () => {
+		const path = "resources/official_columns.json";
+		const resourcePath = await resolveResource(path);
+		const fileContent = await readTextFile(resourcePath);
+		const officialColumns: LumeColumn[] = JSON.parse(fileContent);
+
+		return {
+			officialColumns,
+		};
+	},
 	component: Screen,
 });
 
 function Screen() {
+	const { officialColumns } = Route.useRouteContext();
+
+	const install = async (column: LumeColumn) => {
+		const mainWindow = getCurrent();
+		await mainWindow.emit("columns", { type: "add", column });
+	};
+
 	return (
-		<div className="flex flex-col h-full">
-			<div className="px-3 mt-2 mb-1">
-				<div className="inline-flex items-center w-full gap-1 p-1 rounded-lg shrink-0 bg-black/5 dark:bg-white/5">
-					<Link to="/store/official" className="flex-1">
-						{({ isActive }) => (
-							<div
-								className={cn(
-									"inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md text-sm font-medium leading-tight",
-									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
-								)}
-							>
+		<div className="size-full">
+			<ScrollArea.Root
+				type={"scroll"}
+				scrollHideDelay={300}
+				className="flex-1 overflow-hidden size-full"
+			>
+				<ScrollArea.Viewport className="h-full px-3 ">
+					<div className="flex flex-col gap-3 mb-10">
+						<div className="inline-flex items-center gap-1.5 font-semibold leading-tight">
+							<div className="size-7 rounded-md inline-flex items-center justify-center bg-black/10 dark:bg-white/10">
 								<LaurelIcon className="size-4" />
-								Official
 							</div>
-						)}
-					</Link>
-					<Link to="/store/community" className="flex-1">
-						{({ isActive }) => (
-							<div
-								className={cn(
-									"inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md text-sm font-medium leading-tight",
-									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
-								)}
-							>
-								<GlobalIcon className="size-4" />
-								Community
+							Official
+						</div>
+						<div className="grid grid-cols-3 gap-4">
+							{officialColumns.map((column) => (
+								<div
+									key={column.label}
+									className="relative group flex flex-col w-full aspect-square overflow-hidden bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5"
+								>
+									<div className="hidden group-hover:flex items-center justify-center absolute inset-0 size-full rounded-xl bg-white/20 dark:bg-black/20 backdrop-blur-md">
+										<button
+											type="button"
+											onClick={() => install(column)}
+											className="w-16 h-8 inline-flex items-center justify-center rounded-full bg-black dark:bg-white text-white dark:text-black text-sm font-semibold"
+										>
+											Add
+										</button>
+									</div>
+									<div className="flex-1">
+										{column.cover ? (
+											<img
+												src={column.cover}
+												srcSet={column.coverRetina}
+												alt={column.name}
+												loading="lazy"
+												decoding="async"
+												className="size-full object-cover"
+											/>
+										) : null}
+									</div>
+									<div className="shrink-0 h-9 px-3 flex items-center">
+										<h3 className="text-sm font-semibold truncate w-full">
+											{column.name}
+										</h3>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+					<div className="flex flex-col gap-3">
+						<div className="inline-flex items-center gap-1.5 font-semibold leading-tight">
+							<div className="size-7 rounded-md inline-flex items-center justify-center bg-black/10 dark:bg-white/10">
+								<CommunityIcon className="size-4" />
 							</div>
-						)}
-					</Link>
-				</div>
-			</div>
-			<div className="flex-1 overflow-y-auto scrollbar-none">
-				<Outlet />
-			</div>
+							Community
+						</div>
+						<div className="w-full h-20 rounded-xl flex items-center justify-center text-sm font-medium bg-black/5 dark:bg-white/5">
+							Coming Soon.
+						</div>
+					</div>
+				</ScrollArea.Viewport>
+				<ScrollArea.Scrollbar
+					className="flex select-none touch-none p-0.5 duration-[160ms] ease-out data-[orientation=vertical]:w-2"
+					orientation="vertical"
+				>
+					<ScrollArea.Thumb className="flex-1 bg-black/10 dark:bg-white/10 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]" />
+				</ScrollArea.Scrollbar>
+				<ScrollArea.Corner className="bg-transparent" />
+			</ScrollArea.Root>
 		</div>
 	);
 }

apps/desktop2/src/routes/topic.tsx

@@ -105,11 +105,11 @@ export function Screen() {
 			<ScrollArea.Viewport ref={ref} className="h-full px-3 pb-3">
 				<Virtualizer scrollRef={ref}>
 					{isFetching && !isLoading && !isFetchingNextPage ? (
-						<div className="flex items-center justify-center w-full mb-3 h-11 bg-black/10 dark:bg-white/10 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50">
+						<div className="flex items-center justify-center w-full mb-3 h-12 bg-black/5 dark:bg-white/5 rounded-xl">
 							<div className="flex items-center justify-center gap-2">
 								<Spinner className="size-5" />
 								<span className="text-sm font-medium">
-									Fetching new notes...
+									Getting new notes...
 								</span>
 							</div>
 						</div>

apps/desktop2/src/routes/trending.notes.tsx

@@ -1,11 +1,14 @@
+import { Conversation } from "@/components/conversation";
+import { Quote } from "@/components/quote";
+import { RepostNote } from "@/components/repost";
 import { TextNote } from "@/components/text";
 import { LumeEvent } from "@lume/system";
-import type { NostrEvent } from "@lume/types";
+import { Kind, type NostrEvent } from "@lume/types";
 import { Spinner } from "@lume/ui";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { Await, createFileRoute } from "@tanstack/react-router";
 import { defer } from "@tanstack/react-router";
-import { Suspense, useRef } from "react";
+import { Suspense, useCallback, useRef } from "react";
 import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/trending/notes")({
@@ -21,7 +24,9 @@ export const Route = createFileRoute("/trending/notes")({
 							const events: NostrEvent[] = res.notes.map(
 								(item: { event: NostrEvent }) => item.event,
 							);
-							const lumeEvents = events.map((ev) => new LumeEvent(ev));
+							const lumeEvents = Promise.all(
+								events.map(async (ev) => await LumeEvent.build(ev)),
+							);
 							return lumeEvents;
 						}),
 				),
@@ -35,7 +40,24 @@ export const Route = createFileRoute("/trending/notes")({
 
 export function Screen() {
 	const { data } = Route.useLoaderData();
+
 	const ref = useRef<HTMLDivElement>(null);
+	const renderItem = useCallback((event: LumeEvent) => {
+		if (!event) return;
+		switch (event.kind) {
+			case Kind.Repost:
+				return <RepostNote key={event.id} event={event} className="mb-3" />;
+			default: {
+				if (event.isConversation) {
+					return <Conversation key={event.id} className="mb-3" event={event} />;
+				}
+				if (event.isQuote) {
+					return <Quote key={event.id} event={event} className="mb-3" />;
+				}
+				return <TextNote key={event.id} event={event} className="mb-3" />;
+			}
+		}
+	}, []);
 
 	return (
 		<ScrollArea.Root
@@ -60,11 +82,7 @@ export function Screen() {
 						}
 					>
 						<Await promise={data}>
-							{(notes) =>
-								notes.map((event) => (
-									<TextNote key={event.id} event={event} className="mb-3" />
-								))
-							}
+							{(notes) => notes.map((event) => renderItem(event))}
 						</Await>
 					</Suspense>
 				</Virtualizer>

apps/desktop2/src/routes/trending.tsx

@@ -25,14 +25,14 @@ function Screen() {
 
 	return (
 		<div className="flex flex-col h-full">
-			<div className="inline-flex items-center w-full gap-1 px-3 h-11 shrink-0">
-				<div className="inline-flex items-center w-full h-full gap-1">
+			<div className="shrink-0 h-11 flex items-center w-full gap-1 px-3">
+				<div className="flex w-full h-full gap-1">
 					<Link to="/trending/notes" search={search}>
 						{({ isActive }) => (
 							<div
 								className={cn(
-									"inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
-									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
+									"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
+									isActive ? "bg-black/10 dark:bg-white/10" : "opacity-50",
 								)}
 							>
 								<ArticleIcon className="size-4" />
@@ -44,8 +44,8 @@ function Screen() {
 						{({ isActive }) => (
 							<div
 								className={cn(
-									"inline-flex h-7 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
-									isActive ? "bg-neutral-50 dark:bg-white/10" : "opacity-50",
+									"inline-flex h-8 w-max items-center justify-center gap-2 rounded-full px-3 text-sm font-medium",
+									isActive ? "bg-black/10 dark:bg-white/10" : "opacity-50",
 								)}
 							>
 								<GroupFeedsIcon className="size-4" />
@@ -55,7 +55,7 @@ function Screen() {
 					</Link>
 				</div>
 			</div>
-			<div className="flex-1 w-full h-full p-2 overflow-y-auto scrollbar-none">
+			<div className="flex-1 w-full h-full overflow-y-auto scrollbar-none">
 				<Outlet />
 			</div>
 		</div>