Release v4.1 (#229)

* refactor: remove custom icon packs

* fix: command not work on windows

* fix: make open_window command async

* feat: improve commands

* feat: improve

* refactor: column

* feat: improve thread column

* feat: improve

* feat: add stories column

* feat: improve

* feat: add search column

* feat: add reset password

* feat: add subscription

* refactor: settings

* chore: improve commands

* fix: crash on production

* feat: use tauri store plugin for cache

* feat: new icon

* chore: update icon for windows

* chore: improve some columns

* chore: polish code

src/components/note/mentions/note.tsx

@@ -1,76 +1,65 @@
-import { Spinner } from "@/components";
-import { LinkIcon } from "@/components";
+import { replyTime } from "@/commons";
+import { Note, Spinner } from "@/components";
 import { User } from "@/components/user";
 import { LumeWindow, useEvent } from "@/system";
+import { memo } from "react";
 
-export function MentionNote({
+export const MentionNote = memo(function MentionNote({
 	eventId,
-	openable = true,
 }: {
 	eventId: string;
-	openable?: boolean;
 }) {
-	const { isLoading, isError, data } = useEvent(eventId);
-
-	if (isLoading) {
-		return (
-			<div className="py-2">
-				<div className="pl-4 py-3 flex flex-col w-full border-l-2 border-black/5 dark:border-white/5">
-					<Spinner className="size-5" />
-				</div>
-			</div>
-		);
-	}
-
-	if (isError || !data) {
-		return (
-			<div className="py-2">
-				<div className="pl-4 py-3 flex flex-col w-full border-l-2 border-black/5 dark:border-white/5">
-					<p className="text-sm font-medium text-red-500">
-						Event not found with your current relay set
-					</p>
-				</div>
-			</div>
-		);
-	}
+	const { isLoading, isError, error, data: event } = useEvent(eventId);
 
 	return (
-		<div className="py-2">
-			<div className="pl-4 py-3 flex flex-col w-full border-l-2 border-black/5 dark:border-white/5">
-				<User.Provider pubkey={data.pubkey}>
-					<User.Root className="flex items-center gap-2 h-8">
-						<User.Avatar className="rounded-full size-6" />
-						<div className="inline-flex items-center flex-1 gap-2">
-							<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
-							<span className="text-neutral-600 dark:text-neutral-400">·</span>
-							<User.Time
-								time={data.created_at}
-								className="text-neutral-600 dark:text-neutral-400"
-							/>
-						</div>
-					</User.Root>
-				</User.Provider>
-				<div className="select-text text-pretty line-clamp-3 content-break leading-normal">
-					{data.content}
-				</div>
-				{openable ? (
-					<div className="flex items-center justify-start mt-3">
-						<button
-							type="button"
-							onClick={(e) => {
-								e.stopPropagation();
-								LumeWindow.openEvent(data);
-							}}
-							className="inline-flex items-center gap-1 text-blue-500 text-sm"
-						>
-							View post
-							<LinkIcon className="size-3" />
-						</button>
-					</div>
+		<div className="relative my-2">
+			<div className="pl-3 before:content-[''] before:absolute before:top-1.5 before:bottom-1.5 before:left-0 before:border-l-[2px] before:border-black/10 dark:before:border-white/10">
+				{isLoading ? (
+					<Spinner />
+				) : isError || !event ? (
+					<p className="text-sm font-medium text-red-500">
+						{error.message ||
+							"Quoted note is not found with your current relay set"}
+					</p>
 				) : (
-					<div className="h-3" />
+					<Note.Provider event={event}>
+						<User.Provider pubkey={event.pubkey}>
+							<div className="group flex flex-col gap-1">
+								<div>
+									<User.Root className="inline">
+										<User.Name
+											className="font-medium text-blue-500"
+											suffix=":"
+										/>
+									</User.Root>
+									<div className="pl-2 inline select-text text-balance content-break overflow-hidden">
+										{event.content.length > 120
+											? `${event.content.substring(0, 120)}...`
+											: event.content}
+									</div>
+								</div>
+								<div className="flex-1 flex items-center justify-between">
+									<span className="text-sm text-neutral-500">
+										{replyTime(event.created_at)}
+									</span>
+									<div className="invisible group-hover:visible flex items-center justify-end gap-3">
+										<button
+											type="button"
+											onClick={() => LumeWindow.openEvent(event)}
+											className="text-sm font-medium text-blue-500 hover:text-blue-600"
+										>
+											Show all
+										</button>
+										<Note.Reply />
+										<Note.Repost />
+										<Note.Zap />
+									</div>
+								</div>
+							</div>
+						</User.Provider>
+					</Note.Provider>
 				)}
 			</div>
 		</div>
 	);
-}
+});