minor fixes

src/app/note/components/kind1.tsx

@@ -2,21 +2,25 @@ import { MentionNote } from "@app/note/components/mentions/note";
 import { MentionUser } from "@app/note/components/mentions/user";
 import { ImagePreview } from "@app/note/components/preview/image";
 import { VideoPreview } from "@app/note/components/preview/video";
+import { truncateContent } from "@utils/transform";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
-export function Kind1({ content }: { content: any }) {
+export function Kind1({
+	content,
+	truncate = false,
+}: { content: any; truncate?: boolean }) {
 	return (
 		<>
 			<ReactMarkdown
 				remarkPlugins={[[remarkGfm]]}
 				linkTarget="_blank"
-				className="prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:text-[15px] prose-p:leading-tight prose-a:text-[15px] prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-500 prose-a:no-underline hover:prose-a:text-fuchsia-600 hover:prose-a:underline prose-ol:mb-1 prose-ul:mb-1 prose-li:text-[15px] prose-li:leading-tight"
+				className="markdown"
 				components={{
 					em: ({ ...props }) => <MentionUser {...props} />,
 				}}
 			>
-				{content.parsed}
+				{truncate ? truncateContent(content.parsed, 120) : content.parsed}
 			</ReactMarkdown>
 			{Array.isArray(content.images) && content.images.length ? (
 				<ImagePreview urls={content.images} />

src/app/note/components/mentions/note.tsx

@@ -1,7 +1,7 @@
 import { Kind1 } from "@app/note/components/kind1";
 import { Kind1063 } from "@app/note/components/kind1063";
 import { NoteSkeleton } from "@app/note/components/skeleton";
-import { NoteDefaultUser } from "@app/note/components/user/default";
+import { NoteQuoteUser } from "@app/note/components/user/quote";
 import { NoteWrapper } from "@app/note/components/wrapper";
 import { RelayContext } from "@shared/relayProvider";
 import { READONLY_RELAYS } from "@stores/constants";
@@ -44,13 +44,13 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
 	return (
 		<NoteWrapper
 			href={`/app/note?id=${id}`}
-			className="mt-3 rounded-lg border border-zinc-800 px-3 py-3"
+			className="mt-3 rounded-lg border border-zinc-800 px-3 pt-3"
 		>
 			{data ? (
 				<>
-					<NoteDefaultUser pubkey={data.pubkey} time={data.created_at} />
-					<div className="-mt-5 pl-[49px]">
-						{kind1 && <Kind1 content={kind1} />}
+					<NoteQuoteUser pubkey={data.pubkey} time={data.created_at} />
+					<div className="mt-2">
+						{kind1 && <Kind1 content={kind1} truncate={true} />}
 						{kind1063 && <Kind1063 metadata={kind1063} />}
 					</div>
 				</>

src/app/note/components/user/quote.tsx

@@ -0,0 +1,41 @@
+import { Image } from "@shared/image";
+import { DEFAULT_AVATAR } from "@stores/constants";
+import { useProfile } from "@utils/hooks/useProfile";
+import { shortenKey } from "@utils/shortenKey";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
+
+export function NoteQuoteUser({
+	pubkey,
+	time,
+}: {
+	pubkey: string;
+	time: number;
+}) {
+	const { user } = useProfile(pubkey);
+
+	return (
+		<div className="group flex items-center gap-2">
+			<div className="relative h-6 w-6 shrink-0 rounded">
+				<Image
+					src={user?.picture || DEFAULT_AVATAR}
+					alt={pubkey}
+					className="h-6 w-6 rounded object-cover"
+				/>
+			</div>
+			<div className="flex w-full flex-1 items-start justify-between">
+				<div className="flex items-baseline gap-2 text-base">
+					<span className="font-semibold leading-none text-white">
+						{user?.nip05 || user?.name || shortenKey(pubkey)}
+					</span>
+					<span className="leading-none text-zinc-500">·</span>
+					<span className="leading-none text-zinc-500">
+						{dayjs().to(dayjs.unix(time), true)}
+					</span>
+				</div>
+			</div>
+		</div>
+	);
+}

src/app/note/components/user/reply.tsx

@@ -10,7 +10,10 @@ dayjs.extend(relativeTime);
 export function NoteReplyUser({
 	pubkey,
 	time,
-}: { pubkey: string; time: number }) {
+}: {
+	pubkey: string;
+	time: number;
+}) {
 	const { user } = useProfile(pubkey);
 
 	return (
@@ -24,7 +27,7 @@ export function NoteReplyUser({
 			</div>
 			<div className="flex w-full flex-1 items-start justify-between">
 				<div className="flex items-baseline gap-2 text-base">
-					<span className="font-semibold leading-none text-white group-hover:underline">
+					<span className="font-semibold leading-none text-white">
 						{user?.nip05 || user?.name || shortenKey(pubkey)}
 					</span>
 					<span className="leading-none text-zinc-500">·</span>

src/app/space/pages/index.page.tsx

@@ -1,14 +1,19 @@
-import { FeedBlock } from "../components/feed";
+import { FeedBlock } from "@app/space/components/blocks/feed";
+import { FollowingBlock } from "@app/space/components/blocks/following";
+import { ImageBlock } from "@app/space/components/blocks/image";
 import { CreateBlockModal } from "@app/space/components/create";
-import { FollowingBlock } from "@app/space/components/following";
-import { ImageBlock } from "@app/space/components/image";
+import { useActiveAccount } from "@stores/accounts";
 import { getBlocks } from "@utils/storage";
 import useSWR from "swr";
 
-const fetcher = ([, id]) => getBlocks(1);
+const fetcher = ([, id]) => getBlocks(id);
 
 export function Page() {
-	const { data }: any = useSWR("blocks", fetcher);
+	const account = useActiveAccount((state: any) => state.account);
+	const { data }: any = useSWR(
+		account ? ["blocks", account.id] : null,
+		fetcher,
+	);
 
 	return (
 		<div className="h-full w-full flex flex-nowrap overflow-x-auto overflow-y-hidden">

src/app/threads/components/base.tsx

@@ -18,7 +18,7 @@ export function ThreadBase({ event }: { event: any }) {
 					<div className="flex flex-row gap-2">
 						<div className="flex-1">
 							<h3 className="text-white text-lg font-semibold">{title}</h3>
-							<div className="mt-2 prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:text-[15px] prose-p:leading-tight prose-a:text-[15px] prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-500 prose-a:no-underline hover:prose-a:text-fuchsia-600 hover:prose-a:underline prose-ol:mb-1 prose-ul:mb-1 prose-li:text-[15px] prose-li:leading-tight">
+							<div className="mt-2 markdown">
 								<p>{summary}</p>
 							</div>
 						</div>