feat: update default column informations

packages/ui/src/column/header.tsx

@@ -1,4 +1,6 @@
+import { ChevronDownIcon, RefreshIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 
 export function ColumnHeader({
   name,
@@ -7,16 +9,40 @@ export function ColumnHeader({
   name: string;
   className?: string;
 }) {
+  const reload = () => {
+    window.location.reload();
+  };
+
   return (
-    <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,
-      )}
-    >
-      <div className="inline-flex items-center gap-1.5">
-        <div className="text-[13px] font-medium">{name}</div>
+    <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>
-    </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"
+        >
+          <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"
+          >
+            <RefreshIcon className="size-4" />
+            Reload
+          </DropdownMenu.Item>
+          <DropdownMenu.Arrow className="fill-black dark:fill-white" />
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
   );
 }

packages/ui/src/user/nip05.tsx

@@ -1,5 +1,5 @@
 import { VerifiedIcon } from "@lume/icons";
-import { cn, displayNpub } from "@lume/utils";
+import { cn, displayLongHandle, displayNpub } from "@lume/utils";
 import { useQuery } from "@tanstack/react-query";
 import { useUserContext } from "./provider";
 import { useArk } from "@lume/ark";
@@ -23,7 +23,9 @@ export function UserNip05({ className }: { className?: string }) {
       <p className={cn("text-sm", className)}>
         {!user.profile?.nip05
           ? displayNpub(user.pubkey, 16)
-          : user.profile?.nip05.replace("_@", "")}
+          : user.profile?.nip05.length > 16
+            ? displayLongHandle(user.profile?.nip05)
+            : user.profile.nip05?.replace("_@", "")}
       </p>
       {!isLoading && verified ? (
         <VerifiedIcon className="size-4 text-teal-500" />