feat: update default column informations

packages/icons/src/chevronDown.tsx

@@ -1,24 +1,17 @@
 import { SVGProps } from "react";
 
 export function ChevronDownIcon(
-	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) {
-	return (
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			fill="none"
-			viewBox="0 0 24 24"
-			{...props}
-		>
-			<path
-				stroke="currentColor"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-				strokeWidth="2"
-				d="M6 9a30.618 30.618 0 005.49 5.817c.3.244.72.244 1.02 0A30.617 30.617 0 0018 9"
-			/>
-		</svg>
-	);
+  return (
+    <svg width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="m20 9-6.586 6.586a2 2 0 0 1-2.828 0L4 9"
+      />
+    </svg>
+  );
 }

packages/types/index.d.ts

@@ -86,8 +86,10 @@ export interface LumeColumn {
 	content: URL | string;
 	description?: string;
 	author?: string;
-	logo?: URL | string;
-	cover?: URL | string;
+	logo?: string;
+	cover?: string;
+	coverRetina?: string;
+	featured?: boolean;
 }
 
 export interface EventColumns {

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" />

packages/utils/src/formater.ts

@@ -65,6 +65,14 @@ export function displayNpub(pubkey: string, len: number) {
 	);
 }
 
+export function displayLongHandle(str: string) {
+	const split = str.split("@");
+	const handle = split[0];
+	const service = split[1];
+
+	return handle.substring(0, 16) + "..." + "@" + service;
+}
+
 // convert number to K, M, B, T, etc.
 export const compactNumber = Intl.NumberFormat("en", { notation: "compact" });