add image component

src/app/chat/components/item.tsx

@@ -1,3 +1,4 @@
+import { Image } from '@lume/shared/image';
 import { DEFAULT_AVATAR } from '@lume/stores/constants';
 import { usePageContext } from '@lume/utils/hooks/usePageContext';
 import { useProfile } from '@lume/utils/hooks/useProfile';
@@ -32,7 +33,11 @@ export default function ChatsListItem({ pubkey }: { pubkey: string }) {
           )}
         >
           <div className="relative h-5 w-5 shrink-0 rounded">
-            <img src={user.picture || DEFAULT_AVATAR} alt={pubkey} className="h-5 w-5 rounded bg-white object-cover" />
+            <Image
+              src={user.picture || DEFAULT_AVATAR}
+              alt={pubkey}
+              className="h-5 w-5 rounded bg-white object-cover"
+            />
           </div>
           <div>
             <h5 className="truncate text-[13px] font-semibold text-zinc-400 group-hover:text-zinc-200">

src/app/chat/components/messages/user.tsx

@@ -1,3 +1,4 @@
+import { Image } from '@lume/shared/image';
 import { DEFAULT_AVATAR, IMGPROXY_URL } from '@lume/stores/constants';
 import { useProfile } from '@lume/utils/hooks/useProfile';
 import { shortenKey } from '@lume/utils/shortenKey';
@@ -24,12 +25,10 @@ export default function ChatMessageUser({ pubkey, time }: { pubkey: string; time
       ) : (
         <>
           <div className="relative h-9 w-9 shrink rounded-md">
-            <img
+            <Image
               src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
               alt={pubkey}
               className="h-9 w-9 rounded-md object-cover"
-              loading="lazy"
-              decoding="async"
             />
           </div>
           <div className="flex w-full flex-1 items-start justify-between">

src/app/chat/components/self.tsx

@@ -1,3 +1,4 @@
+import { Image } from '@lume/shared/image';
 import { DEFAULT_AVATAR } from '@lume/stores/constants';
 import { useActiveAccount } from '@lume/utils/hooks/useActiveAccount';
 import { usePageContext } from '@lume/utils/hooks/usePageContext';
@@ -33,7 +34,7 @@ export default function ChatsListSelfItem() {
           )}
         >
           <div className="relative h-5 w-5 shrink-0 rounded">
-            <img
+            <Image
               src={profile?.picture || DEFAULT_AVATAR}
               alt={account.pubkey}
               className="h-5 w-5 rounded bg-white object-cover"