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>
 	);