polish

src/app/chat/components/self.tsx

@@ -1,4 +1,5 @@
 import { Image } from "@shared/image";
+import { Link } from "@shared/link";
 import { DEFAULT_AVATAR } from "@stores/constants";
 import { usePageContext } from "@utils/hooks/usePageContext";
 import { useProfile } from "@utils/hooks/useProfile";
@@ -16,24 +17,24 @@ export function ChatsListSelfItem({ data }: { data: any }) {
 		<>
 			{isLoading && !user ? (
 				<div className="inline-flex h-9 items-center gap-2.5 rounded-md px-2.5">
-					<div className="relative h-5 w-5 shrink-0 animate-pulse rounded bg-zinc-800" />
+					<div className="relative h-6 w-6 shrink-0 animate-pulse rounded bg-zinc-800" />
 					<div>
 						<div className="h-2.5 w-full animate-pulse truncate rounded bg-zinc-800 text-base font-medium" />
 					</div>
 				</div>
 			) : (
-				<a
+				<Link
 					href={`/app/chat?pubkey=${data.pubkey}`}
 					className={twMerge(
 						"inline-flex h-9 items-center gap-2.5 rounded-md px-2.5",
 						pagePubkey === data.pubkey ? "bg-zinc-900 text-zinc-100" : "",
 					)}
 				>
-					<div className="relative h-5 w-5 shrink-0 rounded">
+					<div className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
 						<Image
 							src={user?.image || DEFAULT_AVATAR}
 							alt={data.pubkey}
-							className="h-5 w-5 rounded bg-white object-cover"
+							className="h-6 w-6 rounded bg-white object-cover"
 						/>
 					</div>
 					<div className="inline-flex items-baseline gap-1">
@@ -42,7 +43,7 @@ export function ChatsListSelfItem({ data }: { data: any }) {
 						</h5>
 						<span className="text-zinc-500">(you)</span>
 					</div>
-				</a>
+				</Link>
 			)}
 		</>
 	);