polish

src/shared/activeLink.tsx

@@ -1,3 +1,4 @@
+import { Link } from "@shared/link";
 import { usePageContext } from "@utils/hooks/usePageContext";
 import { twMerge } from "tailwind-merge";
 
@@ -16,11 +17,11 @@ export function ActiveLink({
 	const pathName = pageContext.urlPathname;
 
 	return (
-		<a
+		<Link
 			href={href}
 			className={twMerge(className, href === pathName ? activeClassName : "")}
 		>
 			{children}
-		</a>
+		</Link>
 	);
 }

src/shared/image.tsx

@@ -1,8 +1,14 @@
 import { DEFAULT_AVATAR } from "@stores/constants";
+import { ClassAttributes, ImgHTMLAttributes, JSX } from "react";
 
-export function Image(props) {
-	const addImageFallback = (event) => {
-		event.currentTarget.src = DEFAULT_AVATAR;
+export function Image(
+	props: JSX.IntrinsicAttributes &
+		ClassAttributes<HTMLImageElement> &
+		ImgHTMLAttributes<HTMLImageElement>,
+	fallback = undefined,
+) {
+	const addImageFallback = (event: { currentTarget: { src: string } }) => {
+		event.currentTarget.src = fallback ? fallback : DEFAULT_AVATAR;
 	};
 
 	return (

src/shared/link.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { navigate } from "vite-plugin-ssr/client/router";
+
+export function Link({
+	href,
+	className,
+	children,
+}: { href: string; className?: string; children: ReactNode }) {
+	const goto = () => {
+		navigate(href, { keepScrollPosition: true });
+	};
+
+	return (
+		<button type="button" onClick={() => goto()} className={className}>
+			{children}
+		</button>
+	);
+}

src/shared/navigation.tsx

@@ -13,7 +13,7 @@ export function Navigation() {
 	return (
 		<div className="flex w-[232px] flex-col gap-3 border-r border-zinc-900">
 			<AppHeader />
-			<div className="flex flex-col gap-5 h-full overflow-y-auto scrollbar-hide">
+			<div className="flex flex-col gap-5 overflow-y-auto scrollbar-hide">
 				<div className="inlin-lflex h-8 px-3.5">
 					<Composer />
 				</div>
@@ -30,7 +30,7 @@ export function Navigation() {
 							className="flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200"
 							activeClassName="bg-zinc-900/50"
 						>
-							<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
+							<span className="inline-flex h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
 								<SpaceIcon width={12} height={12} className="text-zinc-100" />
 							</span>
 							<span className="font-medium">Spaces</span>
@@ -40,7 +40,7 @@ export function Navigation() {
 							className="flex h-9 items-center gap-2.5 rounded-md px-2.5 text-zinc-200"
 							activeClassName="bg-zinc-900/50"
 						>
-							<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
+							<span className="inline-flex h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
 								<TrendingIcon
 									width={12}
 									height={12}

src/shared/notes/mentions/user.tsx

@@ -1,3 +1,4 @@
+import { Link } from "@shared/link";
 import { useProfile } from "@utils/hooks/useProfile";
 import { shortenKey } from "@utils/shortenKey";
 
@@ -5,11 +6,11 @@ export function MentionUser({ pubkey }: { pubkey: string }) {
 	const { user } = useProfile(pubkey);
 
 	return (
-		<a
+		<Link
 			href={`/user?pubkey=${pubkey}`}
 			className="text-fuchsia-500 hover:text-fuchsia-600 no-underline font-normal"
 		>
 			@{user?.name || user?.displayName || shortenKey(pubkey)}
-		</a>
+		</Link>
 	);
 }

src/shared/titleBar.tsx

@@ -0,0 +1,27 @@
+import { CancelIcon } from "@shared/icons";
+
+export function TitleBar({
+	title,
+	onClick = undefined,
+}: { title: string; onClick?: () => void }) {
+	return (
+		<div
+			data-tauri-drag-region
+			className="group overflow-hidden h-11 w-full flex items-center justify-between px-3 border-b border-zinc-900"
+		>
+			<div className="w-6" />
+			<h3 className="text-sm font-medium text-zinc-200">{title}</h3>
+			{onClick ? (
+				<button
+					type="button"
+					onClick={onClick}
+					className="inline-flex h-6 w-6 shrink items-center justify-center rounded hover:bg-zinc-900 transform translate-y-8 group-hover:translate-y-0 transition-transform ease-in-out duration-150"
+				>
+					<CancelIcon width={12} height={12} className="text-zinc-300" />
+				</button>
+			) : (
+				<div className="w-6" />
+			)}
+		</div>
+	);
+}

src/shared/user.tsx

@@ -1,5 +1,6 @@
 import { Popover, Transition } from "@headlessui/react";
 import { Image } from "@shared/image";
+import { Link } from "@shared/link";
 import { DEFAULT_AVATAR } from "@stores/constants";
 import { useProfile } from "@utils/hooks/useProfile";
 import { shortenKey } from "@utils/shortenKey";
@@ -92,18 +93,18 @@ export function User({
 							</div>
 						</div>
 						<div className="flex items-center gap-2 px-3 py-3">
-							<a
+							<Link
 								href={`/app/user?pubkey=${pubkey}`}
 								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-700 hover:bg-fuchsia-500 text-sm font-medium"
 							>
 								View profile
-							</a>
-							<a
+							</Link>
+							<Link
 								href={`/app/chat?pubkey=${pubkey}`}
 								className="inline-flex h-10 flex-1 items-center justify-center rounded-md bg-zinc-700 hover:bg-fuchsia-500 text-sm font-medium"
 							>
 								Message
-							</a>
+							</Link>
 						</div>
 					</div>
 				</Popover.Panel>