fix image fallback bug

src/app/auth/components/user.tsx

@@ -22,7 +22,8 @@ export function User({ pubkey }: { pubkey: string }) {
 		<div className="flex items-center gap-2">
 			<div className="relative h-11 w-11 shrink rounded-md">
 				<Image
-					src={user.image || DEFAULT_AVATAR}
+					src={user.image}
+					fallback={DEFAULT_AVATAR}
 					alt={pubkey}
 					className="h-11 w-11 rounded-md object-cover"
 					decoding="async"

src/app/auth/pages/create/step-2/index.page.tsx

@@ -66,6 +66,7 @@ export function Page() {
 							<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
 								<Image
 									src={image}
+									fallback={DEFAULT_AVATAR}
 									alt="avatar"
 									className="relative z-10 h-11 w-11 rounded-md"
 								/>

src/app/channel/components/createModal.tsx

@@ -158,6 +158,7 @@ export function ChannelCreateModal() {
 											<div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
 												<Image
 													src={image}
+													fallback={DEFAULT_AVATAR}
 													alt="channel picture"
 													className="relative z-10 h-11 w-11 rounded-md"
 												/>

src/app/channel/components/member.tsx

@@ -12,7 +12,8 @@ export function Member({ pubkey }: { pubkey: string }) {
 			) : (
 				<Image
 					className="inline-block h-7 w-7 rounded"
-					src={user?.image || DEFAULT_AVATAR}
+					src={user?.image}
+					fallback={DEFAULT_AVATAR}
 					alt={pubkey}
 				/>
 			)}

src/app/channel/components/messages/userMute.tsx

@@ -24,7 +24,8 @@ export function ChannelMessageUserMute({
 				<>
 					<div className="relative h-11 w-11 shrink-0 rounded-md">
 						<Image
-							src={user?.image || DEFAULT_AVATAR}
+							src={user?.image}
+							fallback={DEFAULT_AVATAR}
 							alt={pubkey}
 							className="h-11 w-11 rounded-md object-cover"
 						/>

src/app/channel/components/messages/userReply.tsx

@@ -17,7 +17,8 @@ export function UserReply({ pubkey }: { pubkey: string }) {
 				<>
 					<div className="relative h-9 w-9 shrink overflow-hidden rounded">
 						<Image
-							src={user?.image || DEFAULT_AVATAR}
+							src={user?.image}
+							fallback={DEFAULT_AVATAR}
 							alt={pubkey}
 							className="h-9 w-9 rounded object-cover"
 						/>

src/app/channel/components/metadata.tsx

@@ -19,7 +19,8 @@ export function ChannelMetadata({ id }: { id: string }) {
 		<div className="flex flex-col gap-2">
 			<div className="relative shrink-0 rounded-md h-11 w-11">
 				<Image
-					src={metadata?.picture || DEFAULT_AVATAR}
+					src={metadata?.picture}
+					fallback={DEFAULT_AVATAR}
 					alt={id}
 					className="h-11 w-11 rounded-md object-contain bg-zinc-900"
 				/>

src/app/channel/components/mutedItem.tsx

@@ -41,7 +41,8 @@ export function MutedItem({ data }: { data: any }) {
 					<div className="flex items-center gap-1.5">
 						<div className="relative h-9 w-9 shrink rounded-md">
 							<Image
-								src={user?.image || DEFAULT_AVATAR}
+								src={user?.image}
+								fallback={DEFAULT_AVATAR}
 								alt={data.content}
 								className="h-9 w-9 rounded-md object-cover"
 							/>

src/app/chat/components/item.tsx

@@ -35,7 +35,8 @@ export function ChatsListItem({ data }: { data: any }) {
 				>
 					<div className="inline-flex shrink-0 h-6 w-6 items-center justify-center rounded border-t border-zinc-800/50 bg-zinc-900">
 						<Image
-							src={user?.image || DEFAULT_AVATAR}
+							src={user?.image}
+							fallback={DEFAULT_AVATAR}
 							alt={data.sender_pubkey}
 							className="h-6 w-6 rounded object-cover"
 						/>

src/app/chat/components/self.tsx

@@ -32,7 +32,8 @@ export function ChatsListSelfItem({ data }: { data: any }) {
 				>
 					<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}
+							src={user?.image}
+							fallback={DEFAULT_AVATAR}
 							alt={data.pubkey}
 							className="h-6 w-6 rounded bg-white object-cover"
 						/>

src/app/chat/components/sidebar.tsx

@@ -18,7 +18,8 @@ export function ChatSidebar({ pubkey }: { pubkey: string }) {
 			<div className="flex flex-col gap-3">
 				<div className="relative h-11 w-11 shrink rounded-md">
 					<Image
-						src={user?.image || DEFAULT_AVATAR}
+						src={user?.image}
+						fallback={DEFAULT_AVATAR}
 						alt={pubkey}
 						className="h-11 w-11 rounded-md object-cover"
 					/>

src/app/space/components/addImage.tsx

@@ -4,6 +4,7 @@ import { CancelIcon } from "@shared/icons";
 import { Image } from "@shared/image";
 import { RelayContext } from "@shared/relayProvider";
 import { useActiveAccount } from "@stores/accounts";
+import { DEFAULT_AVATAR } from "@stores/constants";
 import { open } from "@tauri-apps/api/dialog";
 import { Body, fetch } from "@tauri-apps/api/http";
 import { createBlobFromFile } from "@utils/createBlobFromFile";
@@ -206,6 +207,7 @@ export function AddImageBlock({ parentState }: { parentState: any }) {
 										<div className="relative inline-flex h-56 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
 											<Image
 												src={image}
+												fallback={DEFAULT_AVATAR}
 												alt="content"
 												className="relative z-10 max-h-[156px] h-auto w-[150px] object-cover rounded-md"
 											/>

src/app/space/components/blocks/image.tsx

@@ -1,7 +1,7 @@
-import { CancelIcon } from "@shared/icons";
 import { Image } from "@shared/image";
 import { TitleBar } from "@shared/titleBar";
 import { useActiveAccount } from "@stores/accounts";
+import { DEFAULT_AVATAR } from "@stores/constants";
 
 export function ImageBlock({ params }: { params: any }) {
 	const removeBlock = useActiveAccount((state: any) => state.removeBlock);
@@ -16,6 +16,7 @@ export function ImageBlock({ params }: { params: any }) {
 			<div className="w-full flex-1 p-3">
 				<Image
 					src={params.content}
+					fallback={DEFAULT_AVATAR}
 					alt={params.title}
 					className="w-full h-full object-cover rounded-md"
 				/>

src/app/trending/components/profile.tsx

@@ -27,7 +27,8 @@ export function Profile({ data }: { data: any }) {
 			<div className="flex items-center gap-2">
 				<div className="w-12 h-12 shrink-0">
 					<Image
-						src={profile.picture || DEFAULT_AVATAR}
+						src={profile.picture}
+						fallback={DEFAULT_AVATAR}
 						className="w-12 h-12 object-cover rounded"
 					/>
 				</div>

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

@@ -88,7 +88,8 @@ export function Page() {
 			/>
 			<div className="w-full h-56 bg-zinc-100">
 				<Image
-					src={user?.banner || "https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"}
+					src={user?.banner}
+					fallback="https://void.cat/d/QY1myro5tkHVs2nY7dy74b.jpg"
 					alt={"banner"}
 					className="w-full h-full object-cover"
 				/>
@@ -96,7 +97,8 @@ export function Page() {
 			<div className="w-full px-5 -mt-7">
 				<div>
 					<Image
-						src={user?.image || DEFAULT_AVATAR}
+						src={user?.image}
+						fallback={DEFAULT_AVATAR}
 						alt={pubkey}
 						className="w-14 h-14 rounded-md ring-2 ring-black"
 					/>

src/shared/accounts/active.tsx

@@ -67,7 +67,8 @@ export function ActiveAccount({ data }: { data: any }) {
 	return (
 		<button type="button" className="relative inline-block h-9 w-9">
 			<Image
-				src={user?.image || DEFAULT_AVATAR}
+				src={user?.image}
+				fallback={DEFAULT_AVATAR}
 				alt={data.npub}
 				className="h-9 w-9 rounded object-cover"
 			/>

src/shared/accounts/inactive.tsx

@@ -8,7 +8,8 @@ export function InactiveAccount({ data }: { data: any }) {
 	return (
 		<div className="relative h-9 w-9 shrink-0">
 			<Image
-				src={user?.image || DEFAULT_AVATAR}
+				src={user?.image}
+				fallback={DEFAULT_AVATAR}
 				alt={data.npub}
 				className="h-9 w-9 rounded object-cover"
 			/>

src/shared/composer/user.tsx

@@ -9,10 +9,10 @@ export function User({ pubkey }: { pubkey: string }) {
 		<div className="flex items-center gap-2">
 			<div className="h-8 w-8 shrink-0 overflow-hidden rounded bg-zinc-900">
 				<Image
-					src={user?.image || DEFAULT_AVATAR}
+					src={user?.image}
+					fallback={DEFAULT_AVATAR}
 					alt={pubkey}
 					className="h-8 w-8 object-cover"
-					loading="auto"
 				/>
 			</div>
 			<h5 className="text-base font-semibold leading-none text-zinc-100">

src/shared/icons/index.tsx

@@ -36,4 +36,5 @@ export * from "./loader";
 export * from "./trending";
 export * from "./empty";
 export * from "./cmd";
+export * from "./verticalDots";
 // @endindex

src/shared/icons/verticalDots.tsx

@@ -0,0 +1,28 @@
+import { SVGProps } from "react";
+
+export function VerticalDotsIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path
+				fill="currentColor"
+				d="M12 4.75a1 1 0 100-2 1 1 0 000 2zM12 13a1 1 0 100-2 1 1 0 000 2zM12 21.25a1 1 0 100-2 1 1 0 000 2z"
+			/>
+			<path
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth="1.5"
+				d="M12 4.75a1 1 0 100-2 1 1 0 000 2zM12 13a1 1 0 100-2 1 1 0 000 2zM12 21.25a1 1 0 100-2 1 1 0 000 2z"
+			/>
+		</svg>
+	);
+}

src/shared/image.tsx

@@ -1,15 +1,19 @@
-import { DEFAULT_AVATAR } from "@stores/constants";
+import { ImgHTMLAttributes } from "react";
 
-export function Image(props, fallback?) {
+interface Props extends ImgHTMLAttributes<any> {
-	const addImageFallback = (event: { currentTarget: { src: string } }) => {
+	fallback: string;
-		event.currentTarget.src = fallback || DEFAULT_AVATAR;
+}
-	};
 
+export function Image({ src, fallback, ...props }: Props) {
 	return (
 		<img
 			{...props}
+			src={src || fallback}
+			onError={({ currentTarget }) => {
+				currentTarget.onerror = null;
+				currentTarget.src = fallback;
+			}}
 			decoding="async"
-			onError={addImageFallback}
 			alt="lume default img"
 			style={{ contentVisibility: "auto" }}
 		/>

src/shared/multiAccounts.tsx

@@ -1,7 +1,10 @@
+import { Transition } from "@headlessui/react";
 import { getAccounts, getActiveAccount } from "@libs/storage";
 import { ActiveAccount } from "@shared/accounts/active";
 import { InactiveAccount } from "@shared/accounts/inactive";
-import { BellIcon, PlusIcon } from "@shared/icons";
+import { PlusIcon, VerticalDotsIcon } from "@shared/icons";
+import { Link } from "@shared/link";
+import { useState } from "react";
 import useSWR from "swr";
 
 const allFetcher = () => getAccounts();
@@ -11,30 +14,70 @@ export function MultiAccounts() {
 	const { data: accounts }: any = useSWR("allAccounts", allFetcher);
 	const { data: activeAccount }: any = useSWR("activeAccount", fetcher);
 
+	const [open, setOpen] = useState(false);
+
+	const toggleMenu = () => {
+		setOpen((isOpen) => !isOpen);
+	};
+
 	return (
-		<div className="flex items-center gap-2 rounded-xl p-2 border-t border-zinc-800/50 bg-zinc-900/80 backdrop-blur-md">
+		<div className="flex flex-col gap-2 rounded-xl p-2 border-t border-zinc-800/50 bg-zinc-900/80 backdrop-blur-md">
-			{!activeAccount ? (
+			<div className="flex items-center justify-between">
-				<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900" />
+				<div className="flex items-center gap-2">
-			) : (
+					{!activeAccount ? (
-				<ActiveAccount data={activeAccount} />
+						<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900" />
-			)}
+					) : (
-			{!accounts ? (
+						<ActiveAccount data={activeAccount} />
-				<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900" />
+					)}
-			) : (
+					{!accounts ? (
-				accounts.map((account: { is_active: number; pubkey: string }) => (
+						<div className="group relative flex h-9 w-9 shrink animate-pulse items-center justify-center rounded-lg bg-zinc-900" />
-					<InactiveAccount key={account.pubkey} data={account} />
+					) : (
-				))
+						accounts.map((account: { is_active: number; pubkey: string }) => (
-			)}
+							<InactiveAccount key={account.pubkey} data={account} />
-			<button
+						))
-				type="button"
+					)}
-				className="group relative flex h-9 w-9 shrink items-center justify-center rounded border border-dashed border-zinc-600 hover:border-zinc-400"
+					<button
+						type="button"
+						className="group relative flex h-9 w-9 shrink items-center justify-center rounded border border-dashed border-zinc-600 hover:border-zinc-400"
+					>
+						<PlusIcon
+							width={16}
+							height={16}
+							className="text-zinc-400 group-hover:text-zinc-100"
+						/>
+					</button>
+				</div>
+				<button
+					type="button"
+					onClick={() => toggleMenu()}
+					className="inline-flex items-center justify-center w-5 h-5 rounded hover:bg-zinc-800"
+				>
+					<VerticalDotsIcon className="w-4 h-4 text-zinc-100" />
+				</button>
+			</div>
+			<Transition
+				show={open}
+				enter="transition-transform ease-in-out duration-75"
+				enterFrom="translate-y-16"
+				enterTo="translate-y-0"
+				leave="transition-transform ease-in-out duration-150"
+				leaveFrom="translate-y-0"
+				leaveTo="translate-y-16"
+				className="flex flex-col items-start justify-start gap-1 pt-1.5 border-t border-zinc-800 transform"
 			>
-				<PlusIcon
+				<Link
-					width={16}
+					href="/app/settings"
-					height={16}
+					className="w-full py-2 px-2 rounded hover:bg-zinc-800 text-zinc-100 text-start text-sm"
-					className="text-zinc-400 group-hover:text-zinc-100"
+				>
-				/>
+					Settings
-			</button>
+				</Link>
+				<Link
+					href="/app/logout"
+					className="w-full py-2 px-2 rounded hover:bg-zinc-800 text-zinc-100 text-start text-sm"
+				>
+					Logout
+				</Link>
+			</Transition>
 		</div>
 	);
 }

src/shared/notes/contents/kind1063.tsx

@@ -13,6 +13,7 @@ export function Kind1063({ metadata }: { metadata: NDKTag[] }) {
 			{isImage(url) && (
 				<Image
 					src={url}
+					fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
 					alt="image"
 					className="h-auto w-full rounded-lg object-cover"
 				/>

src/shared/notes/preview/image.tsx

@@ -8,6 +8,7 @@ export function ImagePreview({ urls }: { urls: string[] }) {
 					<div key={url} className="min-w-0 grow-0 shrink-0 basis-full">
 						<Image
 							src={url}
+							fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
 							alt="image"
 							className="h-auto w-full rounded-lg object-cover"
 						/>

src/shared/notes/preview/link.tsx

@@ -27,9 +27,9 @@ export function LinkPreview({ urls }: { urls: string[] }) {
 					{data["og:image"] && (
 						<Image
 							src={data["og:image"]}
+							fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
 							alt={urls[0]}
 							className="w-full h-44 object-cover rounded-t-lg bg-white"
-							fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
 						/>
 					)}
 					<div className="flex flex-col gap-2 px-3 py-3">

src/shared/notes/replies/form.tsx

@@ -50,7 +50,8 @@ export function NoteReplyForm({ id }: { id: string }) {
 					<div className="inline-flex items-center gap-2">
 						<div className="relative h-9 w-9 shrink-0 rounded">
 							<Image
-								src={user?.image || DEFAULT_AVATAR}
+								src={user?.image}
+								fallback={DEFAULT_AVATAR}
 								alt={account.npub}
 								className="h-9 w-9 rounded-md bg-white object-cover"
 							/>

src/shared/notes/repost.tsx

@@ -19,7 +19,7 @@ export function Repost({
 	const kind1063 = data?.kind === 1063 ? data.tags : null;
 
 	return (
-		<div className="relative overflow-hidden flex flex-col mt-12 pb-6">
+		<div className="relative overflow-hidden flex flex-col mt-12">
 			{data ? (
 				<>
 					<User pubkey={data.pubkey} time={data.created_at} />

src/shared/user.tsx

@@ -31,7 +31,8 @@ export function User({
 				className={`${avatarWidth} ${avatarHeight} shrink-0 overflow-hidden`}
 			>
 				<Image
-					src={user?.image || DEFAULT_AVATAR}
+					src={user?.image}
+					fallback={DEFAULT_AVATAR}
 					alt={pubkey}
 					className={`${avatarWidth} ${avatarHeight} ${
 						size === "small" ? "rounded" : "rounded-md"
@@ -70,10 +71,10 @@ export function User({
 					<div className="w-full max-w-xs overflow-hidden rounded-md border border-zinc-800/50 bg-zinc-900/90 backdrop-blur-lg">
 						<div className="flex gap-2.5 border-b border-zinc-800 px-3 py-3">
 							<Image
-								src={user?.image || DEFAULT_AVATAR}
+								src={user?.image}
+								fallback={DEFAULT_AVATAR}
 								alt={pubkey}
 								className="h-11 w-11 shrink-0 rounded-lg object-cover"
-								fallback={DEFAULT_AVATAR}
 							/>
 							<div className="flex-1 flex flex-col gap-2">
 								<div className="inline-flex flex-col gap-1">