feat: add nstore

packages/ui/src/column/header.tsx

@@ -1,16 +1,18 @@
-import { ChevronDownIcon, RefreshIcon, TrashIcon } from "@lume/icons";
+import { CancelIcon, RefreshIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { getCurrent } from "@tauri-apps/api/window";
+import { ReactNode } from "react";
 
 export function ColumnHeader({
-  id,
+  label,
   name,
   className,
+  children,
 }: {
-  id: number;
+  label: string;
   name: string;
   className?: string;
+  children?: ReactNode;
 }) {
   const reload = () => {
     window.location.reload();
@@ -18,46 +20,37 @@ export function ColumnHeader({
 
   const close = async () => {
     const mainWindow = getCurrent();
-    await mainWindow.emit("columns", { type: "remove", id });
+    await mainWindow.emit("columns", { type: "remove", label });
   };
 
   return (
-    <DropdownMenu.Root>
-      <div
-        className={cn(
-          "flex h-11 w-full shrink-0 items-center justify-center gap-2 border-b border-neutral-100 dark:border-neutral-900",
-          className,
-        )}
-      >
-        <DropdownMenu.Trigger asChild>
-          <button type="button" className="inline-flex items-center gap-2">
-            <div className="text-[13px] font-medium">{name}</div>
-            <ChevronDownIcon className="size-4" />
-          </button>
-        </DropdownMenu.Trigger>
-      </div>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          sideOffset={5}
-          className="flex w-[200px] flex-col overflow-hidden rounded-xl bg-black p-1 focus:outline-none dark:bg-white"
+    <div
+      className={cn(
+        "h-11 w-full flex items-center justify-between shrink-0 px-3 border-b border-neutral-100 dark:border-neutral-900",
+        className,
+      )}
+    >
+      {!children ? (
+        <div className="text-[13px] font-medium">{name}</div>
+      ) : (
+        children
+      )}
+      <div className="inline-flex items-center gap-1">
+        <button
+          type="button"
+          onClick={reload}
+          className="size-7 inline-flex hover:bg-neutral-100 rounded-md dark:hover:bg-neutral-900 items-center justify-center text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
         >
-          <DropdownMenu.Item
-            onClick={reload}
-            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"
-          >
-            <RefreshIcon className="size-4" />
-            Reload
-          </DropdownMenu.Item>
-          <DropdownMenu.Item
-            onClick={close}
-            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"
-          >
-            <TrashIcon className="size-4" />
-            Close
-          </DropdownMenu.Item>
-          <DropdownMenu.Arrow className="fill-black dark:fill-white" />
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+          <RefreshIcon className="size-4" />
+        </button>
+        <button
+          type="button"
+          onClick={close}
+          className="size-7 inline-flex items-center hover:bg-neutral-100 rounded-md dark:hover:bg-neutral-900 justify-center text-neutral-600 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"
+        >
+          <CancelIcon className="size-4" />
+        </button>
+      </div>
+    </div>
   );
 }

packages/ui/src/column/root.tsx

@@ -3,20 +3,20 @@ import { ReactNode } from "react";
 
 export function ColumnRoot({
   children,
-  shadow = true,
-  background = true,
   className,
+  background = true,
+  shadow = true,
 }: {
   children: ReactNode;
-  shadow?: boolean;
-  background?: boolean;
   className?: string;
+  background?: boolean;
+  shadow?: boolean;
 }) {
   return (
     <div className="h-full w-full p-2">
       <div
         className={cn(
-          "relative flex h-full w-full flex-col rounded-xl",
+          "relative flex h-full w-full flex-col rounded-xl overflow-hidden",
           shadow ? "shadow-primary" : "",
           background ? "bg-white dark:bg-black" : "",
           className,