add image component

src/app/note/components/formReply.tsx

@@ -1,3 +1,4 @@
+import { Image } from '@lume/shared/image';
 import { RelayContext } from '@lume/shared/relayProvider';
 import { WRITEONLY_RELAYS } from '@lume/stores/constants';
 import { dateToUnix } from '@lume/utils/getDate';
@@ -38,7 +39,7 @@ export default function NoteReplyForm({ id }: { id: string }) {
     <div className="flex gap-3 px-5 py-4">
       <div>
         <div className="relative h-9 w-9 shrink-0 overflow-hidden rounded-md">
-          <img src={profile?.picture} alt={account?.pubkey} className="h-9 w-9 rounded-md object-cover" />
+          <Image src={profile?.picture} alt={account?.pubkey} className="h-9 w-9 rounded-md object-cover" />
         </div>
       </div>
       <div className="relative h-24 w-full flex-1 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">

src/app/note/components/metadata/reply.tsx

@@ -1,4 +1,5 @@
 import ReplyIcon from '@lume/shared/icons/reply';
+import { Image } from '@lume/shared/image';
 import { RelayContext } from '@lume/shared/relayProvider';
 import { WRITEONLY_RELAYS } from '@lume/stores/constants';
 import { dateToUnix } from '@lume/utils/getDate';
@@ -87,7 +88,7 @@ export default function NoteReply({ id, replies }: { id: string; replies: number
                 <div className="flex gap-2">
                   <div>
                     <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-md border border-white/10">
-                      <img src={profile?.picture} alt="user's avatar" className="h-11 w-11 rounded-md object-cover" />
+                      <Image src={profile?.picture} alt="user's avatar" className="h-11 w-11 rounded-md object-cover" />
                     </div>
                   </div>
                   <div className="relative h-24 w-full flex-1 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:opacity-0 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-blue-500/100 dark:focus-within:after:shadow-blue-500/20">

src/app/note/components/preview/image.tsx

@@ -1,26 +1,24 @@
+import { Image } from '@lume/shared/image';
+
 export default function ImagePreview({ urls }: { urls: string[] }) {
   return (
     <div className="mt-2 grid h-full w-full grid-cols-2">
       {urls.length === 1 ? (
         <div className="col-span-2">
-          <img
+          <Image
             src={urls[0]}
             alt="image"
             className="h-auto w-full rounded-lg object-cover"
-            loading="lazy"
-            decoding="async"
             style={{ contentVisibility: 'auto' }}
           />
         </div>
       ) : (
         urls.map((url: string) => (
           <div key={url} className="col-span-1">
-            <img
+            <Image
               src={url}
               alt="image"
               className="h-auto w-full rounded-lg object-cover"
-              loading="lazy"
-              decoding="async"
               style={{ contentVisibility: 'auto' }}
             />
           </div>

src/app/note/components/user/default.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';
@@ -14,7 +15,7 @@ export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number
     <div className="group relative z-10 flex h-11 items-center gap-2">
       {isError || isLoading ? (
         <>
-          <div className="h-11 w-11 shrink animate-pulse overflow-hidden rounded-md bg-white"></div>
+          <div className="h-11 w-11 shrink animate-pulse overflow-hidden rounded-md"></div>
           <div className="flex w-full flex-1 items-start justify-between">
             <div className="flex flex-col gap-1">
               <div className="flex items-baseline gap-2">
@@ -26,13 +27,11 @@ export const NoteDefaultUser = ({ pubkey, time }: { pubkey: string; time: number
         </>
       ) : (
         <>
-          <div className="h-11 w-11 shrink overflow-hidden rounded-md bg-white">
-            <img
+          <div className="h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
+            <Image
               src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
               alt={pubkey}
               className="h-11 w-11 rounded-md object-cover"
-              loading="lazy"
-              fetchpriority="high"
             />
           </div>
           <div className="flex w-full flex-1 items-start justify-between">

src/app/note/components/user/reply.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 NoteReplyUser({ 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/note/components/user/repost.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';
@@ -14,7 +15,7 @@ export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number
     <div className="group flex items-center gap-2">
       {isError || isLoading ? (
         <>
-          <div className="relative h-11 w-11 shrink animate-pulse overflow-hidden rounded-md bg-white"></div>
+          <div className="relative h-11 w-11 shrink animate-pulse overflow-hidden rounded-md"></div>
           <div className="flex w-full flex-1 items-start justify-between">
             <div className="flex flex-col gap-1">
               <div className="flex items-baseline gap-2">
@@ -25,13 +26,11 @@ export const NoteRepostUser = ({ pubkey, time }: { pubkey: string; time: number
         </>
       ) : (
         <>
-          <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-white">
-            <img
+          <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
+            <Image
               src={`${IMGPROXY_URL}/rs:fit:100:100/plain/${user?.picture ? user.picture : DEFAULT_AVATAR}`}
               alt={pubkey}
               className="h-11 w-11 rounded-md object-cover"
-              loading="lazy"
-              fetchpriority="high"
             />
           </div>
           <div className="flex items-baseline gap-2 text-sm">