add download button to image

src/libs/storage.tsx

@@ -482,7 +482,7 @@ export async function getUserMetadata(pubkey: string) {
   const db = await connect();
   const result = await db.select(`SELECT * FROM metadata WHERE pubkey = "${pubkey}";`);
   if (result[0]) {
-    return JSON.parse(result[0].content) as Profile;
+    return { ...result[0], ...JSON.parse(result[0].content) } as Profile;
   } else {
     return null;
   }

src/shared/icons/download.tsx

@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+export function DownloadIcon(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
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M20.25 14.75v4.5a1 1 0 01-1 1H4.75a1 1 0 01-1-1v-4.5M12 15V3.75M12 15l-3.5-3.5M12 15l3.5-3.5"
+      ></path>
+    </svg>
+  );
+}

src/shared/icons/index.tsx

@@ -46,4 +46,5 @@ export * from './unfollow';
 export * from './reaction';
 export * from './thread';
 export * from './strangers';
+export * from './download';
 // @endindex

src/shared/notes/preview/image.tsx

@@ -1,11 +1,21 @@
+import { downloadDir } from '@tauri-apps/api/path';
+import { download } from 'tauri-plugin-upload-api';
+
+import { DownloadIcon } from '@shared/icons';
 import { Image } from '@shared/image';
 
 export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: boolean }) {
+  const downloadImage = async (url: string) => {
+    const downloadDirPath = await downloadDir();
+    const filename = url.substring(url.lastIndexOf('/') + 1);
+    return await download(url, downloadDirPath + `/${filename}`);
+  };
+
   return (
     <div className="mb-2 mt-3 max-w-[420px] overflow-hidden">
       <div className="flex flex-col gap-2">
         {urls.map((url) => (
-          <div key={url} className="relative min-w-0 shrink-0 grow-0 basis-full">
+          <div key={url} className="group relative min-w-0 shrink-0 grow-0 basis-full">
             <Image
               src={url}
               fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
@@ -14,6 +24,13 @@ export function ImagePreview({ urls, truncate }: { urls: string[]; truncate?: bo
                 truncate ? 'h-auto max-h-[300px]' : 'h-auto'
               } w-full rounded-lg border border-zinc-800/50 object-cover`}
             />
+            <button
+              type="button"
+              onClick={() => downloadImage(url)}
+              className="absolute right-3 top-3 hidden h-7 w-7 items-center justify-center rounded-md bg-black/70 backdrop-blur-md hover:bg-fuchsia-500 group-hover:inline-flex"
+            >
+              <DownloadIcon className="h-4 w-4 text-zinc-100" />
+            </button>
           </div>
         ))}
       </div>

src/shared/notification/user.tsx

@@ -21,16 +21,16 @@ export function NotiUser({ pubkey }: { pubkey: string }) {
 
   return (
     <div className="flex shrink-0 items-start justify-start gap-2">
-      <div className="w-88 relative h-8 shrink rounded-md">
+      <div className="w-88 relative h-8 shrink-0 rounded-md">
         <Image
-          src={user.image}
+          src={user?.picture || user?.image}
           fallback={DEFAULT_AVATAR}
           alt={pubkey}
           className="w-88 h-8 rounded-md object-cover"
         />
       </div>
-      <span className="max-w-[10rem] truncate leading-none text-zinc-200">
-        {user.nip05 || user.name || user.displayName || displayNpub(pubkey, 16)}
+      <span className="max-w-[10rem] flex-1 truncate leading-none text-zinc-200">
+        {user?.nip05 || user?.name || user?.displayName || displayNpub(pubkey, 16)}
       </span>
     </div>
   );

src/shared/user.tsx

@@ -115,12 +115,12 @@ export function User({
                       <div className="h-3 w-20 animate-pulse rounded-sm bg-zinc-700" />
                     )}
                   </h5>
-                  <span className="max-w-[15rem] truncate text-sm leading-none text-zinc-500">
+                  <span className="max-w-[10rem] truncate text-sm leading-none text-zinc-500">
                     {user?.nip05 || shortenKey(pubkey)}
                   </span>
                 </div>
                 <div>
-                  <p className="line-clamp-3 break-words leading-tight text-zinc-100">
+                  <p className="line-clamp-3 break-all leading-tight text-zinc-100">
                     {user?.about}
                   </p>
                 </div>