polish

src/app/space/components/blocks/feed.tsx

@@ -2,6 +2,7 @@ import { getNotesByAuthor } from "@libs/storage";
 import { CancelIcon } from "@shared/icons";
 import { Note } from "@shared/notes/note";
 import { NoteSkeleton } from "@shared/notes/skeleton";
+import { TitleBar } from "@shared/titleBar";
 import { useActiveAccount } from "@stores/accounts";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useEffect, useMemo, useRef } from "react";
@@ -56,20 +57,7 @@ export function FeedBlock({ params }: { params: any }) {
 
 	return (
 		<div className="shrink-0 w-[400px] border-r border-zinc-900">
-			<div
-				data-tauri-drag-region
-				className="h-11 w-full flex items-center justify-between px-3 border-b border-zinc-900"
-			>
-				<div className="w-9 h-6" />
-				<h3 className="font-semibold text-zinc-100">{params.title}</h3>
-				<button
-					type="button"
-					onClick={() => close()}
-					className="inline-flex h-6 w-9 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800"
-				>
-					<CancelIcon width={14} height={14} className="text-zinc-500" />
-				</button>
-			</div>
+			<TitleBar title={params.title} onClick={() => close()} />
 			<div
 				ref={parentRef}
 				className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 pb-20 overflow-y-auto"

src/app/space/components/blocks/following.tsx

@@ -3,6 +3,7 @@ import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { Note } from "@shared/notes/note";
 import { NoteSkeleton } from "@shared/notes/skeleton";
 import { RelayContext } from "@shared/relayProvider";
+import { TitleBar } from "@shared/titleBar";
 import { useActiveAccount } from "@stores/accounts";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { dateToUnix } from "@utils/date";
@@ -94,12 +95,7 @@ export function FollowingBlock({ block }: { block: number }) {
 
 	return (
 		<div className="shrink-0 w-[400px] border-r border-zinc-900">
-			<div
-				data-tauri-drag-region
-				className="h-11 w-full inline-flex items-center justify-center border-b border-zinc-900"
-			>
-				<h3 className="font-semibold text-zinc-100">Following</h3>
-			</div>
+			<TitleBar title="Circle" />
 			<div
 				ref={parentRef}
 				className="scrollbar-hide flex w-full h-full flex-col justify-between gap-1.5 pt-1.5 pb-20 overflow-y-auto"

src/app/space/components/blocks/image.tsx

@@ -1,5 +1,6 @@
 import { CancelIcon } from "@shared/icons";
 import { Image } from "@shared/image";
+import { TitleBar } from "@shared/titleBar";
 import { useActiveAccount } from "@stores/accounts";
 
 export function ImageBlock({ params }: { params: any }) {
@@ -11,20 +12,7 @@ export function ImageBlock({ params }: { params: any }) {
 
 	return (
 		<div className="shrink-0 w-[350px] flex-col flex border-r border-zinc-900">
-			<div
-				data-tauri-drag-region
-				className="h-11 w-full flex items-center justify-between px-3 border-b border-zinc-900"
-			>
-				<div className="w-9 h-6" />
-				<h3 className="font-semibold text-zinc-100">{params.title}</h3>
-				<button
-					type="button"
-					onClick={() => close()}
-					className="inline-flex h-7 w-7 shrink items-center justify-center rounded bg-zinc-900 hover:bg-zinc-800"
-				>
-					<CancelIcon width={14} height={14} className="text-zinc-500" />
-				</button>
-			</div>
+			<TitleBar title={params.title} onClick={() => close()} />
 			<div className="w-full flex-1 p-3">
 				<Image
 					src={params.content}

src/app/space/components/blocks/thread.tsx

@@ -6,6 +6,7 @@ import { NoteMetadata } from "@shared/notes/metadata";
 import { NoteReplyForm } from "@shared/notes/replies/form";
 import { RepliesList } from "@shared/notes/replies/list";
 import { NoteSkeleton } from "@shared/notes/skeleton";
+import { TitleBar } from "@shared/titleBar";
 import { User } from "@shared/user";
 import { useActiveAccount } from "@stores/accounts";
 import { parser } from "@utils/parser";
@@ -24,20 +25,7 @@ export function ThreadBlock({ params }: { params: any }) {
 
 	return (
 		<div className="shrink-0 w-[400px] border-r border-zinc-900">
-			<div
-				data-tauri-drag-region
-				className="h-11 w-full flex items-center justify-between px-3 border-b border-zinc-900"
-			>
-				<button
-					type="button"
-					onClick={() => close()}
-					className="inline-flex h-7 w-7 shrink items-center justify-center rounded bg-zinc-900 hover:bg-zinc-800"
-				>
-					<ArrowLeftIcon width={14} height={14} className="text-zinc-500" />
-				</button>
-				<h3 className="font-semibold text-zinc-100">{params.title}</h3>
-				<div className="w-9 h-6" />
-			</div>
+			<TitleBar title={params.title} onClick={() => close()} />
 			<div className="scrollbar-hide flex w-full h-full flex-col gap-1.5 pt-1.5 pb-20 overflow-y-auto">
 				{!data ? (
 					<div className="px-3 py-1.5">