update nip-05 and user profile component styles

src/app/personal/index.tsx

@@ -0,0 +1,9 @@
+import { useStorage } from '@libs/storage/provider';
+
+import { UserProfile } from '@shared/userProfile';
+
+export function PersonalScreen() {
+  const { db } = useStorage();
+
+  return <div></div>;
+}

src/app/users/components/profile.tsx

@@ -1,4 +1,6 @@
 import { NDKEvent, NDKKind, NDKUser } from '@nostr-dev-kit/ndk';
+import * as Avatar from '@radix-ui/react-avatar';
+import { minidenticon } from 'minidenticons';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { toast } from 'sonner';
@@ -9,7 +11,6 @@ import { UserStats } from '@app/users/components/stats';
 import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';
 
-import { Image } from '@shared/image';
 import { NIP05 } from '@shared/nip05';
 
 import { useProfile } from '@utils/hooks/useProfile';
@@ -22,6 +23,9 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
 
   const [followed, setFollowed] = useState(false);
 
+  const svgURI =
+    'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50));
+
   const follow = async (pubkey: string) => {
     try {
       const user = ndk.getUser({ hexpubkey: db.account.pubkey });
@@ -85,11 +89,23 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
         )}
       </div>
       <div className="-mt-7 flex w-full flex-col items-center px-5">
-        <Image
-          src={user.picture || user.image}
-          alt={pubkey}
-          className="h-14 w-14 rounded-lg ring-2 ring-neutral-100 dark:ring-neutral-900"
-        />
+        <Avatar.Root className="shrink-0">
+          <Avatar.Image
+            src={user?.picture || user?.image}
+            alt={pubkey}
+            loading="lazy"
+            decoding="async"
+            style={{ contentVisibility: 'auto' }}
+            className="h-14 w-14 rounded-lg bg-white ring-2 ring-neutral-100 dark:ring-neutral-900"
+          />
+          <Avatar.Fallback delayMs={300}>
+            <img
+              src={svgURI}
+              alt={pubkey}
+              className="h-14 w-14 rounded-lg bg-black dark:bg-white"
+            />
+          </Avatar.Fallback>
+        </Avatar.Root>
         <div className="mt-2 flex flex-1 flex-col gap-6">
           <div className="flex flex-col items-center gap-1">
             <div className="inline-flex flex-col items-center">
@@ -100,7 +116,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
                 <NIP05
                   pubkey={pubkey}
                   nip05={user?.nip05}
-                  className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-400"
+                  className="text-neutral-600 dark:text-neutral-400"
                 />
               ) : (
                 <span className="max-w-[15rem] truncate text-sm text-neutral-500 dark:text-neutral-400">

src/app/users/components/stats.tsx

@@ -6,15 +6,22 @@ import { compactNumber } from '@utils/number';
 
 export function UserStats({ pubkey }: { pubkey: string }) {
   const { status, data } = useQuery({
-    queryKey: ['user-metadata', pubkey],
+    queryKey: ['user-stats', pubkey],
+    queryFn: async ({ signal }: { signal: AbortSignal }) => {
+      const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`, {
+        signal,
+      });
 
-    ...async () => {
-      const res = await fetch(`https://api.nostr.band/v0/stats/profile/${pubkey}`);
       if (!res.ok) {
         throw new Error('Error');
       }
+
       return await res.json();
     },
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    staleTime: Infinity,
   });
 
   if (status === 'pending') {

src/app/users/index.tsx

@@ -70,7 +70,6 @@ export function UserScreen() {
 
   return (
     <div className="relative h-full w-full overflow-y-auto">
-      <div data-tauri-drag-region className="absolute left-0 top-0 h-11 w-full" />
       <UserProfile pubkey={pubkey} />
       <div className="mt-6 h-full w-full border-t border-neutral-100 px-1.5 dark:border-neutral-900">
         <h3 className="mb-2 pt-4 text-center text-lg font-semibold leading-none text-neutral-900 dark:text-neutral-100">