wip: tired...

packages/ui/src/column/content.tsx

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { Routes } from "react-router-dom";
+
+export function ColumnContent({ children }: { children: ReactNode }) {
+	return <Routes>{children}</Routes>;
+}

packages/ui/src/column/header.tsx

@@ -0,0 +1,89 @@
+import {
+	ChevronDownIcon,
+	MoveLeftIcon,
+	MoveRightIcon,
+	RefreshIcon,
+	TrashIcon,
+} from "@lume/icons";
+import { useColumn } from "@lume/storage";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { useQueryClient } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { useColumnContext } from "./provider";
+
+export function ColumnHeader({
+	queryKey,
+}: {
+	queryKey?: string[];
+}) {
+	const { t } = useTranslation();
+	const { move, remove } = useColumn();
+
+	const column = useColumnContext();
+	const queryClient = useQueryClient();
+
+	const refresh = async () => {
+		if (queryKey) await queryClient.refetchQueries({ queryKey });
+	};
+
+	return (
+		<DropdownMenu.Root>
+			<div className="flex items-center justify-center gap-2 px-3 w-full border-b h-11 shrink-0 border-neutral-100 dark:border-neutral-900">
+				<DropdownMenu.Trigger asChild>
+					<div className="inline-flex items-center gap-1.5">
+						<div className="text-[13px] font-medium">{column.title}</div>
+						<ChevronDownIcon className="size-5" />
+					</div>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Portal>
+					<DropdownMenu.Content
+						sideOffset={5}
+						className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-white/50 dark:bg-black/50 ring-1 ring-black/10 dark:ring-white/10 backdrop-blur-2xl focus:outline-none"
+					>
+						<DropdownMenu.Item asChild>
+							<button
+								type="button"
+								onClick={refresh}
+								className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
+							>
+								<RefreshIcon className="size-4" />
+								{t("global.refresh")}
+							</button>
+						</DropdownMenu.Item>
+						<DropdownMenu.Item asChild>
+							<button
+								type="button"
+								onClick={() => move(column.id, "left")}
+								className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
+							>
+								<MoveLeftIcon className="size-4" />
+								{t("global.moveLeft")}
+							</button>
+						</DropdownMenu.Item>
+						<DropdownMenu.Item asChild>
+							<button
+								type="button"
+								onClick={() => move(column.id, "right")}
+								className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
+							>
+								<MoveRightIcon className="size-4" />
+								{t("global.moveRight")}
+							</button>
+						</DropdownMenu.Item>
+						<DropdownMenu.Separator className="h-px my-1 bg-black/10 dark:bg-white/10" />
+						<DropdownMenu.Item asChild>
+							<button
+								type="button"
+								onClick={() => remove(column.id)}
+								className="inline-flex items-center gap-3 px-3 text-sm font-medium text-red-500 rounded-lg h-9 hover:bg-red-500 hover:text-red-50 focus:outline-none"
+							>
+								<TrashIcon className="size-4" />
+								{t("global.delete")}
+							</button>
+						</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu.Portal>
+			</div>
+		</DropdownMenu.Root>
+	);
+}

packages/ui/src/column/index.ts

@@ -0,0 +1,15 @@
+import { Route } from "react-router-dom";
+import { ColumnContent } from "./content";
+import { ColumnHeader } from "./header";
+import { ColumnLiveWidget } from "./live";
+import { ColumnProvider } from "./provider";
+import { ColumnRoot } from "./root";
+
+export const Column = {
+	Provider: ColumnProvider,
+	Root: ColumnRoot,
+	Live: ColumnLiveWidget,
+	Header: ColumnHeader,
+	Content: ColumnContent,
+	Route: Route,
+};

packages/ui/src/column/live.tsx

@@ -0,0 +1,46 @@
+import { ArrowUpIcon } from "@lume/icons";
+import { useEffect, useState } from "react";
+
+export function ColumnLiveWidget({
+	filter,
+	onClick,
+}: {
+	filter: NDKFilter;
+	onClick: (event: NDKEvent[]) => void;
+}) {
+	const ark = useArk();
+	const [events, setEvents] = useState<NDKEvent[]>([]);
+
+	const update = async () => {
+		onClick(events);
+		// reset
+		setEvents([]);
+	};
+
+	useEffect(() => {
+		const sub = ark.subscribe({
+			filter,
+			closeOnEose: false,
+			cb: (event: NDKEvent) => setEvents((prev) => [...prev, event]),
+		});
+
+		return () => {
+			if (sub) sub.stop();
+		};
+	}, []);
+
+	if (!events.length) return null;
+
+	return (
+		<div className="absolute left-0 z-40 flex items-center justify-center w-full top-12 h-11">
+			<button
+				type="button"
+				onClick={update}
+				className="inline-flex items-center justify-center h-9 gap-1 pl-4 pr-3 text-sm font-semibold rounded-full w-max bg-neutral-950 dark:bg-neutral-50 hover:bg-neutral-900 dark:hover:bg-neutral-100 text-neutral-50 dark:text-neutral-950"
+			>
+				{events.length} {events.length === 1 ? "new note" : "new notes"}
+				<ArrowUpIcon className="size-4" />
+			</button>
+		</div>
+	);
+}

packages/ui/src/column/provider.tsx

@@ -0,0 +1,23 @@
+import { LumeColumn } from "@lume/types";
+import { ReactNode, createContext, useContext } from "react";
+
+const ColumnContext = createContext<LumeColumn>(null);
+
+export function ColumnProvider({
+	column,
+	children,
+}: { column: LumeColumn; children: ReactNode }) {
+	return (
+		<ColumnContext.Provider value={column}>{children}</ColumnContext.Provider>
+	);
+}
+
+export function useColumnContext() {
+	const context = useContext(ColumnContext);
+	if (!context) {
+		throw new Error(
+			"Please import Column Provider to use useColumnContext() hook",
+		);
+	}
+	return context;
+}

packages/ui/src/column/root.tsx

@@ -0,0 +1,37 @@
+import { cn } from "@lume/utils";
+import { Resizable } from "re-resizable";
+import { ReactNode, useState } from "react";
+import { MemoryRouter, UNSAFE_LocationContext } from "react-router-dom";
+
+export function ColumnRoot({
+	children,
+	className,
+}: {
+	children: ReactNode;
+	className?: string;
+}) {
+	const [width, setWidth] = useState(420);
+
+	return (
+		<UNSAFE_LocationContext.Provider value={null}>
+			<Resizable
+				size={{ width, height: "100%" }}
+				onResizeStart={(e) => e.preventDefault()}
+				onResizeStop={(_e, _direction, _ref, d) => {
+					setWidth((prevWidth) => prevWidth + d.width);
+				}}
+				minWidth={420}
+				maxWidth={600}
+				className={cn(
+					"relative flex flex-col border-r-2 border-neutral-50 hover:border-neutral-100 dark:border-neutral-950 dark:hover:border-neutral-900",
+					className,
+				)}
+				enable={{ right: true }}
+			>
+				<MemoryRouter future={{ v7_startTransition: true }}>
+					{children}
+				</MemoryRouter>
+			</Resizable>
+		</UNSAFE_LocationContext.Provider>
+	);
+}