feat: improve column management

packages/ui/src/column/header.tsx

@@ -1,11 +1,14 @@
-import { ChevronDownIcon, RefreshIcon } from "@lume/icons";
+import { ChevronDownIcon, RefreshIcon, TrashIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { getCurrent } from "@tauri-apps/api/window";
 
 export function ColumnHeader({
+  id,
   name,
   className,
 }: {
+  id: number;
   name: string;
   className?: string;
 }) {
@@ -13,6 +16,11 @@ export function ColumnHeader({
     window.location.reload();
   };
 
+  const close = async () => {
+    const mainWindow = getCurrent();
+    await mainWindow.emit("columns", { type: "remove", id });
+  };
+
   return (
     <DropdownMenu.Root>
       <div
@@ -35,11 +43,18 @@ export function ColumnHeader({
         >
           <DropdownMenu.Item
             onClick={reload}
-            className="inline-flex h-9 items-center gap-3 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"
+            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>

packages/ui/src/column/root.tsx

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

packages/ui/src/user/nip05.tsx

@@ -23,7 +23,7 @@ export function UserNip05({ className }: { className?: string }) {
       <p className={cn("text-sm", className)}>
         {!user.profile?.nip05
           ? displayNpub(user.pubkey, 16)
-          : user.profile?.nip05.length > 16
+          : user.profile?.nip05.length > 50
             ? displayLongHandle(user.profile?.nip05)
             : user.profile.nip05?.replace("_@", "")}
       </p>