chore: clean up

packages/ark/src/components/note/thread.tsx

@@ -1,6 +1,9 @@
+import { PinIcon } from "@lume/icons";
+import { COL_TYPES } from "@lume/utils";
 import { Link } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 import { Note } from ".";
+import { useColumnContext } from "../column";
 
 export function NoteThread({
 	thread,
@@ -9,23 +12,40 @@ export function NoteThread({
 	thread: { rootEventId: string; replyEventId: string };
 	className?: string;
 }) {
+	const { addColumn } = useColumnContext();
+
 	if (!thread) return null;
 
 	return (
 		<div className={twMerge("w-full px-3", className)}>
-			<div className="flex h-min w-full flex-col gap-3 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+			<div className="flex flex-col w-full gap-3 p-3 rounded-lg h-min bg-neutral-100 dark:bg-neutral-900">
 				{thread.rootEventId ? (
 					<Note.Child eventId={thread.rootEventId} isRoot />
 				) : null}
 				{thread.replyEventId ? (
 					<Note.Child eventId={thread.replyEventId} />
 				) : null}
-				<Link
-					to={`/events/${thread?.rootEventId || thread?.replyEventId}`}
-					className="self-start text-blue-500 hover:text-blue-600"
-				>
-					Show thread
-				</Link>
+				<div className="inline-flex items-center justify-between">
+					<Link
+						to={`/events/${thread?.rootEventId || thread?.replyEventId}`}
+						className="self-start text-blue-500 hover:text-blue-600"
+					>
+						Show thread
+					</Link>
+					<button
+						type="button"
+						onClick={async () =>
+							await addColumn({
+								kind: COL_TYPES.thread,
+								title: "Thread",
+								content: thread?.rootEventId || thread?.replyEventId,
+							})
+						}
+						className="inline-flex items-center justify-center rounded-md text-neutral-600 dark:text-neutral-400 size-6 bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
+					>
+						<PinIcon className="size-4" />
+					</button>
+				</div>
 			</div>
 		</div>
 	);