feat: improve column management

packages/icons/src/cancel.tsx

@@ -4,8 +4,8 @@ export function CancelIcon(props: JSX.IntrinsicElements["svg"]) {
       <path
         stroke="currentColor"
         strokeLinecap="round"
-        strokeWidth="2"
-        d="m5 5 14 14m0-14L5 19"
+        strokeWidth="1.5"
+        d="m4.75 4.75 14.5 14.5m0-14.5-14.5 14.5"
       />
     </svg>
   );

packages/icons/src/trash.tsx

@@ -1,18 +1,10 @@
-export function TrashIcon(props: JSX.IntrinsicElements['svg']) {
+export function TrashIcon(props: JSX.IntrinsicElements["svg"]) {
   return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="m16 6-1.106-2.211a3.236 3.236 0 0 0-5.788 0L8 6M4 6h16m-10 5v5m4-5v5M6 6h12v9c0 1.864 0 2.796-.305 3.53a4 4 0 0 1-2.164 2.165C14.796 21 13.864 21 12 21s-2.796 0-3.53-.305a4 4 0 0 1-2.166-2.164C6 17.796 6 16.864 6 15V6Z" />
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="m5.63 19.379.748-.049-.749.049Zm12.74 0-.748-.049.749.049ZM2.75 5a.75.75 0 0 0 0 1.5V5Zm18.5 1.5a.75.75 0 0 0 0-1.5v1.5Zm-6.102-.563a.75.75 0 1 0 1.452-.374l-1.452.374ZM4.002 5.798l.879 13.63 1.497-.098-.88-13.628-1.496.096ZM7.625 22h8.75v-1.5h-8.75V22Zm11.494-2.573L20 5.798l-1.497-.096-.88 13.629 1.497.096ZM19.25 5H4.75v1.5h14.5V5ZM2.75 6.5h2V5h-2v1.5Zm16.5 0h2V5h-2v1.5ZM16.375 22a2.75 2.75 0 0 0 2.744-2.573l-1.497-.096a1.25 1.25 0 0 1-1.247 1.169V22ZM4.88 19.427A2.75 2.75 0 0 0 7.625 22v-1.5a1.25 1.25 0 0 1-1.247-1.17l-1.497.097ZM12 3.5a3.252 3.252 0 0 1 3.148 2.437l1.452-.374A4.752 4.752 0 0 0 12 2v1.5ZM8.852 5.937A3.252 3.252 0 0 1 12 3.5V2a4.752 4.752 0 0 0-4.6 3.563l1.452.374Z"
+      />
     </svg>
   );
 }

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>