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/user/avatar.tsx

@@ -1,20 +1,21 @@
-import { cn } from "@/commons";
+import { appSettings, cn } from "@/commons";
 import * as Avatar from "@radix-ui/react-avatar";
-import { useRouteContext } from "@tanstack/react-router";
+import { useStore } from "@tanstack/react-store";
 import { minidenticon } from "minidenticons";
 import { useMemo } from "react";
 import { useUserContext } from "./provider";
 
 export function UserAvatar({ className }: { className?: string }) {
+	const [service, visible] = useStore(appSettings, (state) => [
+		state.image_resize_service,
+		state.display_avatar,
+	]);
+
 	const user = useUserContext();
-	const { settings } = useRouteContext({ strict: false });
 
 	const picture = useMemo(() => {
-		if (
-			settings?.image_resize_service?.length &&
-			user.profile?.picture?.length
-		) {
-			const url = `${settings.image_resize_service}?url=${user.profile?.picture}&w=100&h=100&default=1&n=-1`;
+		if (service?.length && user.profile?.picture?.length) {
+			const url = `${service}?url=${user.profile?.picture}&w=100&h=100&default=1&n=-1`;
 			return url;
 		} else {
 			return user.profile?.picture;
@@ -29,27 +30,6 @@ export function UserAvatar({ className }: { className?: string }) {
 		[user.pubkey],
 	);
 
-	if (settings && !settings.display_avatar) {
-		return (
-			<Avatar.Root
-				className={cn(
-					"shrink-0 block overflow-hidden bg-neutral-200 dark:bg-neutral-800",
-					className,
-				)}
-			>
-				<Avatar.Fallback delayMs={120}>
-					<img
-						src={fallback}
-						alt={user.pubkey}
-						loading="lazy"
-						decoding="async"
-						className="size-full bg-black dark:bg-white outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
-					/>
-				</Avatar.Fallback>
-			</Avatar.Root>
-		);
-	}
-
 	return (
 		<Avatar.Root
 			className={cn(
@@ -57,13 +37,14 @@ export function UserAvatar({ className }: { className?: string }) {
 				className,
 			)}
 		>
-			<Avatar.Image
-				src={picture}
-				alt={user.pubkey}
-				loading="lazy"
-				decoding="async"
-				className="w-full aspect-square object-cover outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
-			/>
+			{visible ? (
+				<Avatar.Image
+					src={picture}
+					alt={user.pubkey}
+					decoding="async"
+					className="w-full aspect-square object-cover outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
+				/>
+			) : null}
 			<Avatar.Fallback>
 				<img
 					src={fallback}

src/components/user/cover.tsx

@@ -18,7 +18,7 @@ export function UserCover({ className }: { className?: string }) {
 	if (user && !user.profile?.banner) {
 		return (
 			<div
-				className={cn("bg-gradient-to-b from-blue-400 to-teal-200", className)}
+				className={cn("bg-gradient-to-b from-blue-200 to-teal-200", className)}
 			/>
 		);
 	}

src/components/user/followButton.tsx

@@ -1,7 +1,9 @@
+import { commands } from "@/commands.gen";
 import { cn } from "@/commons";
 import { Spinner } from "@/components";
 import { NostrAccount } from "@/system";
-import { useEffect, useState } from "react";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useEffect, useState, useTransition } from "react";
 import { useUserContext } from "./provider";
 
 export function UserFollowButton({
@@ -13,18 +15,20 @@ export function UserFollowButton({
 }) {
 	const user = useUserContext();
 
-	const [loading, setLoading] = useState(false);
 	const [followed, setFollowed] = useState(false);
+	const [isPending, startTransition] = useTransition();
 
-	const toggleFollow = async () => {
-		setLoading(true);
+	const toggleFollow = () => {
+		startTransition(async () => {
+			const res = await commands.toggleContact(user.pubkey, null);
 
-		const toggle = await NostrAccount.toggleContact(user.pubkey);
-
-		if (toggle) {
-			setFollowed((prev) => !prev);
-			setLoading(false);
-		}
+			if (res.status === "ok") {
+				setFollowed((prev) => !prev);
+			} else {
+				await message(res.error, { kind: "error" });
+				return;
+			}
+		});
 	};
 
 	useEffect(() => {
@@ -42,11 +46,11 @@ export function UserFollowButton({
 	return (
 		<button
 			type="button"
-			disabled={loading}
+			disabled={isPending}
 			onClick={() => toggleFollow()}
 			className={cn("w-max", className)}
 		>
-			{loading ? (
+			{isPending ? (
 				<Spinner className="size-4" />
 			) : followed ? (
 				!simple ? (

src/components/user/name.tsx

@@ -4,18 +4,21 @@ import { useUserContext } from "./provider";
 export function UserName({
 	className,
 	prefix,
+	suffix,
 }: {
 	className?: string;
 	prefix?: string;
+	suffix?: string;
 }) {
 	const user = useUserContext();
 
 	return (
-		<div className={cn("max-w-[12rem] truncate", className)}>
+		<span className={cn("max-w-[12rem] truncate", className)}>
 			{prefix}
 			{user.profile?.display_name ||
 				user.profile?.name ||
 				displayNpub(user.pubkey, 16)}
-		</div>
+			{suffix}
+		</span>
 	);
 }

src/components/user/nip05.tsx

@@ -1,8 +1,7 @@
 import { displayLongHandle, displayNpub } from "@/commons";
-import { VerifiedIcon } from "@/components";
 import { NostrQuery } from "@/system";
+import { SealCheck } from "@phosphor-icons/react";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { experimental_createPersister } from "@tanstack/query-persist-client-core";
 import { useQuery } from "@tanstack/react-query";
 import { useUserContext } from "./provider";
 
@@ -20,16 +19,12 @@ export function UserNip05() {
 
 			return verify;
 		},
-		enabled: !!user.profile?.nip05,
+		enabled: !!user.profile?.nip05?.length,
 		refetchOnMount: false,
 		refetchOnWindowFocus: false,
 		refetchOnReconnect: false,
 		staleTime: Number.POSITIVE_INFINITY,
 		retry: false,
-		persister: experimental_createPersister({
-			storage: localStorage,
-			maxAge: 1000 * 60 * 60 * 72, // 72 hours
-		}),
 	});
 
 	if (!user.profile?.nip05?.length) return;
@@ -39,7 +34,7 @@ export function UserNip05() {
 			<Tooltip.Root delayDuration={150}>
 				<Tooltip.Trigger>
 					{!isLoading && verified ? (
-						<VerifiedIcon className="text-teal-500 size-4" />
+						<SealCheck className="text-green-500 size-4" weight="fill" />
 					) : null}
 				</Tooltip.Trigger>
 				<Tooltip.Portal>