From d527078d5c7f80f7d8fab621d979be3f1ab2bc59 Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Wed, 24 Jan 2024 15:08:55 +0700
Subject: [PATCH] feat: redesign column header

---
 packages/ark/src/components/column/header.tsx | 141 +++++++++---------
 .../src/components/column/interestModal.tsx   |   4 +-
 packages/ark/src/components/column/live.tsx   |   8 +-
 packages/icons/index.ts                       |   1 +
 packages/icons/src/arrowUp.tsx                |  24 +++
 packages/icons/src/chevronDown.tsx            |   2 +-
 packages/icons/src/chevronUp.tsx              |  42 +++---
 packages/lume-column-timeline/src/index.tsx   |   2 +-
 8 files changed, 123 insertions(+), 101 deletions(-)
 create mode 100644 packages/icons/src/arrowUp.tsx

diff --git a/packages/ark/src/components/column/header.tsx b/packages/ark/src/components/column/header.tsx
index 961033bb..c7334123 100644
--- a/packages/ark/src/components/column/header.tsx
+++ b/packages/ark/src/components/column/header.tsx
@@ -1,5 +1,5 @@
 import {
-	HorizontalDotsIcon,
+	ChevronDownIcon,
 	MoveLeftIcon,
 	MoveRightIcon,
 	RefreshIcon,
@@ -43,78 +43,73 @@ export function ColumnHeader({
 	};
 
 	return (
-		<div className="flex items-center justify-between w-full px-3 border-b h-11 shrink-0 border-neutral-100 dark:border-neutral-900">
-			<div className="inline-flex items-center gap-4">
-				<div className="inline-flex items-center flex-1 gap-2 text-neutral-800 dark:text-neutral-200">
-					{icon ? icon : <ThreadIcon className="size-4" />}
-					<div className="text-sm font-medium">{title}</div>
-				</div>
+		<DropdownMenu.Root>
+			<div className="flex items-center justify-center gap-2 px-3 w-full border-b h-11 shrink-0 border-neutral-100 dark:border-neutral-900">
+				<DropdownMenu.Trigger asChild>
+					<div className="inline-flex items-center gap-3">
+						<div className="inline-flex items-center gap-2">
+							<div className="text-[13px] font-medium">{title}</div>
+							<ChevronDownIcon className="size-5 mt-px" />
+						</div>
+					</div>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Portal>
+					<DropdownMenu.Content
+						sideOffset={5}
+						className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-white/50 dark:bg-black/50 ring-1 ring-black/10 dark:ring-white/10 backdrop-blur-2xl focus:outline-none"
+					>
+						<DropdownMenu.Item asChild>
+							<button
+								type="button"
+								onClick={refresh}
+								className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
+							>
+								<RefreshIcon className="size-4" />
+								Refresh
+							</button>
+						</DropdownMenu.Item>
+						{queryKey?.[0] === "foryou-9998" ? (
+							<DropdownMenu.Item asChild>
+								<InterestModal
+									queryKey={queryKey}
+									className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
+								/>
+							</DropdownMenu.Item>
+						) : null}
+						<DropdownMenu.Item asChild>
+							<button
+								type="button"
+								onClick={moveLeft}
+								className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
+							>
+								<MoveLeftIcon className="size-4" />
+								Move left
+							</button>
+						</DropdownMenu.Item>
+						<DropdownMenu.Item asChild>
+							<button
+								type="button"
+								onClick={moveRight}
+								className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
+							>
+								<MoveRightIcon className="size-4" />
+								Move right
+							</button>
+						</DropdownMenu.Item>
+						<DropdownMenu.Separator className="h-px my-1 bg-white/10 dark:bg-black/10" />
+						<DropdownMenu.Item asChild>
+							<button
+								type="button"
+								onClick={deleteWidget}
+								className="inline-flex items-center gap-3 px-3 text-sm font-medium text-red-500 rounded-lg h-9 hover:bg-red-500 hover:text-red-50 focus:outline-none"
+							>
+								<TrashIcon className="size-4" />
+								Delete
+							</button>
+						</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu.Portal>
 			</div>
-			<div>
-				<DropdownMenu.Root>
-					<DropdownMenu.Trigger asChild>
-						<button
-							type="button"
-							className="inline-flex items-center justify-center w-6 h-6"
-						>
-							<HorizontalDotsIcon className="size-4" />
-						</button>
-					</DropdownMenu.Trigger>
-					<DropdownMenu.Portal>
-						<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-black/70 dark:bg-white/10 backdrop-blur-xl focus:outline-none">
-							<DropdownMenu.Item asChild>
-								<button
-									type="button"
-									onClick={refresh}
-									className="inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
-								>
-									<RefreshIcon className="size-5" />
-									Refresh
-								</button>
-							</DropdownMenu.Item>
-							{queryKey?.[0] === "foryou-9998" ? (
-								<DropdownMenu.Item asChild>
-									<InterestModal
-										queryKey={queryKey}
-										className="text-sm font-medium text-white/50 hover:bg-black/10 hover:text-white dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
-									/>
-								</DropdownMenu.Item>
-							) : null}
-							<DropdownMenu.Item asChild>
-								<button
-									type="button"
-									onClick={moveLeft}
-									className="inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
-								>
-									<MoveLeftIcon className="size-5" />
-									Move left
-								</button>
-							</DropdownMenu.Item>
-							<DropdownMenu.Item asChild>
-								<button
-									type="button"
-									onClick={moveRight}
-									className="inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
-								>
-									<MoveRightIcon className="size-5" />
-									Move right
-								</button>
-							</DropdownMenu.Item>
-							<DropdownMenu.Separator className="h-px my-1 bg-white/10 dark:bg-black/10" />
-							<DropdownMenu.Item asChild>
-								<button
-									type="button"
-									onClick={deleteWidget}
-									className="inline-flex items-center gap-2 px-3 text-sm font-medium text-red-300 rounded-lg h-9 hover:bg-red-500 hover:text-red-50 focus:outline-none"
-								>
-									<TrashIcon className="size-5" />
-									Delete
-								</button>
-							</DropdownMenu.Item>
-						</DropdownMenu.Content>
-					</DropdownMenu.Portal>
-				</DropdownMenu.Root>
-			</div>
-		</div>
+		</DropdownMenu.Root>
 	);
 }
diff --git a/packages/ark/src/components/column/interestModal.tsx b/packages/ark/src/components/column/interestModal.tsx
index b9f29441..86271b21 100644
--- a/packages/ark/src/components/column/interestModal.tsx
+++ b/packages/ark/src/components/column/interestModal.tsx
@@ -56,7 +56,7 @@ export function InterestModal({
 		<Dialog.Root open={open} onOpenChange={setOpen}>
 			<Dialog.Trigger
 				className={cn(
-					"inline-flex items-center gap-2 px-3 rounded-lg h-9 focus:outline-none",
+					"inline-flex items-center gap-3 px-3 rounded-lg h-9 focus:outline-none",
 					className,
 				)}
 			>
@@ -64,7 +64,7 @@ export function InterestModal({
 					children
 				) : (
 					<>
-						<EditInterestIcon className="size-5" />
+						<EditInterestIcon className="size-4" />
 						Edit interest
 					</>
 				)}
diff --git a/packages/ark/src/components/column/live.tsx b/packages/ark/src/components/column/live.tsx
index ed46ab3f..aa0f7fbd 100644
--- a/packages/ark/src/components/column/live.tsx
+++ b/packages/ark/src/components/column/live.tsx
@@ -1,4 +1,4 @@
-import { ChevronUpIcon } from "@lume/icons";
+import { ArrowUpIcon, ChevronUpIcon } from "@lume/icons";
 import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
 import { useEffect, useState } from "react";
 import { useArk } from "../../hooks/useArk";
@@ -34,14 +34,14 @@ export function ColumnLiveWidget({
 	if (!events.length) return null;
 
 	return (
-		<div className="absolute left-0 z-50 flex items-center justify-center w-full top-11 h-11">
+		<div className="absolute left-0 z-40 flex items-center justify-center w-full top-12 h-11">
 			<button
 				type="button"
 				onClick={update}
-				className="inline-flex items-center justify-center h-8 gap-1 pl-2 pr-2.5 text-sm font-semibold rounded-full w-max bg-neutral-950 dark:bg-neutral-50 hover:bg-neutral-900 dark:hover:bg-neutral-100 text-neutral-50 dark:text-neutral-950"
+				className="inline-flex items-center justify-center h-9 gap-1 pl-4 pr-3 text-sm font-semibold rounded-full w-max bg-neutral-950 dark:bg-neutral-50 hover:bg-neutral-900 dark:hover:bg-neutral-100 text-neutral-50 dark:text-neutral-950"
 			>
-				<ChevronUpIcon className="w-4 h-4" />
 				{events.length} {events.length === 1 ? "new note" : "new notes"}
+				<ArrowUpIcon className="size-4" />
 			</button>
 		</div>
 	);
diff --git a/packages/icons/index.ts b/packages/icons/index.ts
index ee2e00a1..96c9d564 100644
--- a/packages/icons/index.ts
+++ b/packages/icons/index.ts
@@ -111,3 +111,4 @@ export * from "./src/foryou";
 export * from "./src/editInterest";
 export * from "./src/newColumn";
 export * from "./src/searchFilled";
+export * from "./src/arrowUp";
diff --git a/packages/icons/src/arrowUp.tsx b/packages/icons/src/arrowUp.tsx
new file mode 100644
index 00000000..b4f26528
--- /dev/null
+++ b/packages/icons/src/arrowUp.tsx
@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+
+export function ArrowUpIcon(
+	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 9.83a30.23 30.23 0 015.406-5.62A.949.949 0 0112 4m6 5.83a30.233 30.233 0 00-5.406-5.62A.949.949 0 0012 4m0 0v16"
+			/>
+		</svg>
+	);
+}
diff --git a/packages/icons/src/chevronDown.tsx b/packages/icons/src/chevronDown.tsx
index 9311f52d..b4d13eea 100644
--- a/packages/icons/src/chevronDown.tsx
+++ b/packages/icons/src/chevronDown.tsx
@@ -17,7 +17,7 @@ export function ChevronDownIcon(
 				strokeLinecap="round"
 				strokeLinejoin="round"
 				strokeWidth="2"
-				d="M8 10.14a20.36 20.36 0 003.702 3.893c.175.141.42.141.596 0A20.361 20.361 0 0016 10.14"
+				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>
 	);
diff --git a/packages/icons/src/chevronUp.tsx b/packages/icons/src/chevronUp.tsx
index d8144fb6..4caceb20 100644
--- a/packages/icons/src/chevronUp.tsx
+++ b/packages/icons/src/chevronUp.tsx
@@ -1,22 +1,24 @@
-import { SVGProps } from 'react';
+import { SVGProps } from "react";
 
-export function ChevronUpIcon(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="1.5"
-        d="M8 14l3.646-3.646a.5.5 0 01.708 0L16 14"
-      ></path>
-    </svg>
-  );
+export function ChevronUpIcon(
+	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 15a30.617 30.617 0 015.49-5.817.803.803 0 011.02 0A30.616 30.616 0 0118 15"
+			/>
+		</svg>
+	);
 }
diff --git a/packages/lume-column-timeline/src/index.tsx b/packages/lume-column-timeline/src/index.tsx
index 1cc4c821..87946a02 100644
--- a/packages/lume-column-timeline/src/index.tsx
+++ b/packages/lume-column-timeline/src/index.tsx
@@ -30,7 +30,7 @@ export function Timeline({ column }: { column: IColumn }) {
 				id={column.id}
 				queryKey={[colKey]}
 				title="Timeline"
-				icon={<TimelineIcon className="size-4" />}
+				icon={<TimelineIcon className="size-5" />}
 			/>
 			{ark.account.contacts.length ? (
 				<Column.Live