feat: improve performance (#234)

* feat: use negentropy as much as possible

* update

* update

src/components/note/buttons/open.tsx

@@ -1,5 +1,5 @@
 import { LumeWindow } from "@/system";
-import { FrameCorners } from "@phosphor-icons/react";
+import { ListPlus } from "@phosphor-icons/react";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { useNoteContext } from "../provider";
 
@@ -15,7 +15,7 @@ export function NoteOpenThread() {
 						onClick={() => LumeWindow.openEvent(event)}
 						className="group inline-flex h-7 w-14 bg-neutral-100 dark:bg-white/10 rounded-full items-center justify-center text-sm font-medium text-neutral-800 dark:text-neutral-200 hover:text-blue-500 hover:bg-neutral-200 dark:hover:bg-white/20"
 					>
-						<FrameCorners className="shrink-0 size-4" />
+						<ListPlus className="shrink-0 size-4" />
 					</button>
 				</Tooltip.Trigger>
 				<Tooltip.Portal>

src/components/note/content.tsx

@@ -7,7 +7,6 @@ import { Hashtag } from "./mentions/hashtag";
 import { MentionNote } from "./mentions/note";
 import { MentionUser } from "./mentions/user";
 import { Images } from "./preview/images";
-import { Videos } from "./preview/videos";
 import { useNoteContext } from "./provider";
 
 export function NoteContent({
@@ -102,14 +101,9 @@ export function NoteContent({
 				{content}
 			</div>
 			{visible ? (
-				<>
-					{event.meta?.images.length ? (
-						<Images urls={event.meta.images} />
-					) : null}
-					{event.meta?.videos.length ? (
-						<Videos urls={event.meta.videos} />
-					) : null}
-				</>
+				event.meta?.images.length ? (
+					<Images urls={event.meta.images} />
+				) : null
 			) : null}
 		</div>
 	);

src/components/note/contentLarge.tsx

@@ -6,7 +6,6 @@ import { Hashtag } from "./mentions/hashtag";
 import { MentionNote } from "./mentions/note";
 import { MentionUser } from "./mentions/user";
 import { ImagePreview } from "./preview/image";
-import { VideoPreview } from "./preview/video";
 import { useNoteContext } from "./provider";
 
 export function NoteContentLarge({
@@ -18,7 +17,7 @@ export function NoteContentLarge({
 	const content = useMemo(() => {
 		try {
 			// Get parsed meta
-			const { images, videos, hashtags, events, mentions } = event.meta;
+			const { images, hashtags, events, mentions } = event.meta;
 
 			// Define rich content
 			let richContent: ReactNode[] | string = event.content;
@@ -48,12 +47,6 @@ export function NoteContentLarge({
 				));
 			}
 
-			for (const video of videos) {
-				richContent = reactStringReplace(richContent, video, (match, i) => (
-					<VideoPreview key={match + i} url={match} />
-				));
-			}
-
 			richContent = reactStringReplace(
 				richContent,
 				/(https?:\/\/\S+)/gi,
@@ -75,8 +68,7 @@ export function NoteContentLarge({
 			));
 
 			return richContent;
-		} catch (e) {
-			console.log("[parser]: ", e);
+		} catch {
 			return event.content;
 		}
 	}, [event.content]);

src/components/user/avatar.tsx

@@ -15,8 +15,7 @@ export function UserAvatar({ className }: { className?: string }) {
 
 	const picture = useMemo(() => {
 		if (service?.length && user.profile?.picture?.length) {
-			const url = `${service}?url=${user.profile?.picture}&w=100&h=100&default=1&n=-1`;
-			return url;
+			return `${service}?url=${user.profile?.picture}&w=100&h=100&n=-1&default=${user.profile?.picture}`;
 		} else {
 			return user.profile?.picture;
 		}

src/components/user/followButton.tsx

@@ -59,10 +59,10 @@ export function UserFollowButton({ className }: { className?: string }) {
 			type="button"
 			disabled={isPending}
 			onClick={() => toggleFollow()}
-			className={cn("w-max", className)}
+			className={cn("w-max gap-1", className)}
 		>
 			{isError ? "Error" : null}
-			{isPending || isLoading ? <Spinner className="size-4" /> : null}
+			{isPending || isLoading ? <Spinner className="size-3" /> : null}
 			{isFollow ? "Unfollow" : "Follow"}
 		</button>
 	);