refactor(ark): rename widget to column

packages/ark/src/components/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/ark/src/components/column/header.tsx

@@ -0,0 +1,112 @@
+import {
+	ArrowLeftIcon,
+	ArrowRightIcon,
+	HorizontalDotsIcon,
+	RefreshIcon,
+	ThreadIcon,
+	TrashIcon,
+} from "@lume/icons";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { useQueryClient } from "@tanstack/react-query";
+import { ReactNode } from "react";
+import { useWidget } from "../../hooks/useWidget";
+
+export function ColumnHeader({
+	id,
+	title,
+	queryKey,
+	icon,
+}: {
+	id: string;
+	title: string;
+	queryKey?: string[];
+	icon?: ReactNode;
+}) {
+	const queryClient = useQueryClient();
+	const { removeWidget } = useWidget();
+
+	const refresh = async () => {
+		if (queryKey) await queryClient.refetchQueries({ queryKey });
+	};
+
+	const moveLeft = async () => {
+		removeWidget.mutate(id);
+	};
+
+	const moveRight = async () => {
+		removeWidget.mutate(id);
+	};
+
+	const deleteWidget = async () => {
+		removeWidget.mutate(id);
+	};
+
+	return (
+		<div className="flex h-11 w-full shrink-0 items-center justify-between border-b border-neutral-100 px-3 dark:border-neutral-900">
+			<div className="inline-flex items-center gap-4">
+				<div className="h-5 w-1 shrink-0 rounded-full bg-blue-500" />
+				<div className="text-neutral-800 dark:text-neutral-200 inline-flex items-center gap-2 flex-1">
+					{icon ? icon : <ThreadIcon className="size-4" />}
+					<div className="text-sm font-medium">{title}</div>
+				</div>
+			</div>
+			<div>
+				<DropdownMenu.Root>
+					<DropdownMenu.Trigger asChild>
+						<button
+							type="button"
+							className="inline-flex h-6 w-6 items-center justify-center"
+						>
+							<HorizontalDotsIcon className="size-4" />
+						</button>
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Portal>
+						<DropdownMenu.Content className="flex w-[220px] flex-col overflow-hidden rounded-xl border border-neutral-100 bg-white p-2 shadow-lg shadow-neutral-200/50 focus:outline-none dark:border-neutral-900 dark:bg-neutral-950 dark:shadow-neutral-900/50">
+							<DropdownMenu.Item asChild>
+								<button
+									type="button"
+									onClick={refresh}
+									className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-neutral-700 hover:bg-blue-100 hover:text-blue-500 focus:outline-none dark:text-neutral-300 dark:hover:bg-neutral-900 dark:hover:text-neutral-50"
+								>
+									<RefreshIcon className="size-5" />
+									Refresh
+								</button>
+							</DropdownMenu.Item>
+							<DropdownMenu.Item asChild>
+								<button
+									type="button"
+									onClick={moveLeft}
+									className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-neutral-700 hover:bg-blue-100 hover:text-blue-500 focus:outline-none dark:text-neutral-300 dark:hover:bg-neutral-900 dark:hover:text-neutral-50"
+								>
+									<ArrowLeftIcon className="size-5" />
+									Move left
+								</button>
+							</DropdownMenu.Item>
+							<DropdownMenu.Item asChild>
+								<button
+									type="button"
+									onClick={moveRight}
+									className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-neutral-700 hover:bg-blue-100 hover:text-blue-500 focus:outline-none dark:text-neutral-300 dark:hover:bg-neutral-900 dark:hover:text-neutral-50"
+								>
+									<ArrowRightIcon className="size-5" />
+									Move right
+								</button>
+							</DropdownMenu.Item>
+							<DropdownMenu.Separator className="my-1 h-px bg-neutral-100 dark:bg-neutral-900" />
+							<DropdownMenu.Item asChild>
+								<button
+									type="button"
+									onClick={deleteWidget}
+									className="inline-flex h-9 items-center gap-2 rounded-lg px-3 text-sm font-medium text-red-500 hover:bg-red-500 hover:text-red-50 focus:outline-none"
+								>
+									<TrashIcon className="size-5" />
+									Delete
+								</button>
+							</DropdownMenu.Item>
+						</DropdownMenu.Content>
+					</DropdownMenu.Portal>
+				</DropdownMenu.Root>
+			</div>
+		</div>
+	);
+}

packages/ark/src/components/column/index.ts

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

packages/ark/src/components/column/live.tsx

@@ -0,0 +1,42 @@
+import { ChevronUpIcon } from "@lume/icons";
+import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
+import { useEffect, useState } from "react";
+import { useArk } from "../../provider";
+
+export function ColumnLiveWidget({
+	filter,
+	onClick,
+}: {
+	filter: NDKFilter;
+	onClick: () => void;
+}) {
+	const ark = useArk();
+	const [events, setEvents] = useState<NDKEvent[]>([]);
+
+	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 top-11 z-50 flex h-11 w-full items-center justify-center">
+			<button
+				type="button"
+				onClick={onClick}
+				className="inline-flex h-9 w-max items-center justify-center gap-1 rounded-full bg-blue-500 px-2.5 text-sm font-semibold text-white hover:bg-blue-600"
+			>
+				<ChevronUpIcon className="h-4 w-4" />
+				{events.length} {events.length === 1 ? "event" : "events"}
+			</button>
+		</div>
+	);
+}

packages/ark/src/components/column/root.tsx

@@ -0,0 +1,37 @@
+import { Resizable } from "re-resizable";
+import { ReactNode, useState } from "react";
+import { MemoryRouter, UNSAFE_LocationContext } from "react-router-dom";
+import { twMerge } from "tailwind-merge";
+
+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={twMerge(
+					"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>
+	);
+}