feat: adjust image gallery display style

package-lock.json

@@ -12,6 +12,9 @@
       "dependencies": {
         "@electron-toolkit/preload": "^3.0.1",
         "@electron-toolkit/utils": "^3.0.0",
+        "@nextui-org/image": "^2.0.32",
+        "@nextui-org/system": "^2.2.6",
+        "@nextui-org/theme": "^2.2.11",
         "@radix-ui/react-alert-dialog": "^1.1.2",
         "@radix-ui/react-avatar": "^1.1.1",
         "@radix-ui/react-dialog": "^1.1.2",
@@ -28,6 +31,7 @@
         "clsx": "^2.1.1",
         "dataloader": "^2.2.2",
         "dayjs": "^1.11.13",
+        "framer-motion": "^11.11.17",
         "lru-cache": "^11.0.1",
         "lucide-react": "^0.453.0",
         "nostr-tools": "^2.9.1",
@@ -1224,6 +1228,51 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
     },
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.3.tgz",
+      "integrity": "sha512-aElGmleuReGnk2wtYOzYFmNWYoiWWmf1pPPCYg0oiIQSJj0mjc4eUfzUXaSOJ4S8WzI/cLqnCTWjqz904FT2OQ==",
+      "dependencies": {
+        "@formatjs/fast-memoize": "2.2.3",
+        "@formatjs/intl-localematcher": "0.5.7",
+        "tslib": "2"
+      }
+    },
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.3.tgz",
+      "integrity": "sha512-3jeJ+HyOfu8osl3GNSL4vVHUuWFXR03Iz9jjgI7RwjG6ysu/Ymdr0JRCPHfF5yGbTE6JCrd63EpvX1/WybYRbA==",
+      "dependencies": {
+        "tslib": "2"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.9.3.tgz",
+      "integrity": "sha512-9L99QsH14XjOCIp4TmbT8wxuffJxGK8uLNO1zNhLtcZaVXvv626N0s4A2qgRCKG3dfYWx9psvGlFmvyVBa6u/w==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.2.3",
+        "@formatjs/icu-skeleton-parser": "1.8.7",
+        "tslib": "2"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.7",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.7.tgz",
+      "integrity": "sha512-fI+6SmS2g7h3srfAKSWa5dwreU5zNEfon2uFo99OToiLF6yxGE+WikvFSbsvMAYkscucvVmTYNlWlaDPp0n5HA==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.2.3",
+        "tslib": "2"
+      }
+    },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.7.tgz",
+      "integrity": "sha512-GGFtfHGQVFe/niOZp24Kal5b2i36eE2bNL0xi9Sg/yd0TR8aLjcteApZdHmismP5QQax1cMnZM9yWySUUjJteA==",
+      "dependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1281,6 +1330,39 @@
       "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.6.tgz",
+      "integrity": "sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/message": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.5.tgz",
+      "integrity": "sha512-hjEpLKFlYA3m5apldLqzHqw531qqfOEq0HlTWdfyZmcloWiUbWsYXD6YTiUmQmOtarthzhdjCAwMVrB8a4E7uA==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0",
+        "intl-messageformat": "^10.1.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.5.4",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.5.4.tgz",
+      "integrity": "sha512-h9huwWjNqYyE2FXZZewWqmCdkw1HeFds5q4Siuoms3hUQC5iPJK3aBmkFZoDSLN4UD0Bl8G22L/NdHpeOr+/7A==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/string": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.4.tgz",
+      "integrity": "sha512-BcyadXPn89Ae190QGZGDUZPqxLj/xsP4U1Br1oSy8yfIjmpJ8cJtGYleaodqW/EmzFjwELtwDojLkf3FhV6SjA==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1486,6 +1568,145 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/@nextui-org/image": {
+      "version": "2.0.32",
+      "resolved": "https://registry.npmjs.org/@nextui-org/image/-/image-2.0.32.tgz",
+      "integrity": "sha512-JpE0O8qAeJpQA61ZnXNLH76to+dbx93PR5tTOxSvmTxtnuqVg4wl5ar/SBY3czibJPr0sj33k8Mv2EfULjoH7Q==",
+      "dependencies": {
+        "@nextui-org/react-utils": "2.0.17",
+        "@nextui-org/shared-utils": "2.0.8",
+        "@nextui-org/use-image": "2.0.6"
+      },
+      "peerDependencies": {
+        "@nextui-org/system": ">=2.0.0",
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/react-rsc-utils": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/@nextui-org/react-rsc-utils/-/react-rsc-utils-2.0.14.tgz",
+      "integrity": "sha512-s0GVgDhScyx+d9FtXd8BXf049REyaPvWsO4RRr7JDHrk91NlQ11Mqxka9o+8g5NX0rphI0rbe3/b1Dz+iQRx3w==",
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/react-utils": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@nextui-org/react-utils/-/react-utils-2.0.17.tgz",
+      "integrity": "sha512-U/b49hToVfhOM4dg4n57ZyUjLpts4JogQ139lfQBYPTb8z/ATNsJ3vLIqW5ZvDK6L0Er+JT11UVQ+03m7QMvaQ==",
+      "dependencies": {
+        "@nextui-org/react-rsc-utils": "2.0.14",
+        "@nextui-org/shared-utils": "2.0.8"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/shared-utils": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@nextui-org/shared-utils/-/shared-utils-2.0.8.tgz",
+      "integrity": "sha512-ZEtoMPXS+IjT8GvpJTS9IWDnT1JNCKV+NDqqgysAf1niJmOFLyJgl6dh/9n4ufcGf1GbSEQN+VhJasEw7ajYGQ=="
+    },
+    "node_modules/@nextui-org/system": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/system/-/system-2.2.6.tgz",
+      "integrity": "sha512-tjIkOI0w32g68CGWleuSyIbEz8XBbeoNogR2lu7MWk3QovHCqgr4VVrP1cwMRYnwDPFQP3OpmH+NR9yzt+pIfg==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@nextui-org/react-utils": "2.0.17",
+        "@nextui-org/system-rsc": "2.1.6",
+        "@react-aria/i18n": "3.11.1",
+        "@react-aria/overlays": "3.22.1",
+        "@react-aria/utils": "3.24.1",
+        "@react-stately/utils": "3.10.1"
+      },
+      "peerDependencies": {
+        "framer-motion": ">=10.17.0",
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/system-rsc": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/system-rsc/-/system-rsc-2.1.6.tgz",
+      "integrity": "sha512-Wl2QwEFjYwuvw26R1RH3ZY81PD8YmfgtIjFvJZRP2VEIT6rPvlQ4ojgqdrkVkQZQ0L/K+5ZLbTKgLEFkj5ysdQ==",
+      "dependencies": {
+        "@react-types/shared": "3.23.1",
+        "clsx": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@nextui-org/theme": ">=2.1.0",
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/system-rsc/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@nextui-org/theme": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmjs.org/@nextui-org/theme/-/theme-2.2.11.tgz",
+      "integrity": "sha512-bg9+KNnFxcP3w/ugivEJtvQibODbTxfl6UdVvx7TCY8Rd269U7F2+nhnw1Qd1xJT5yZQnX6m//9wOoGtJV+6Kg==",
+      "dependencies": {
+        "clsx": "^1.2.1",
+        "color": "^4.2.3",
+        "color2k": "^2.0.2",
+        "deepmerge": "4.3.1",
+        "flat": "^5.0.2",
+        "lodash.foreach": "^4.5.0",
+        "lodash.get": "^4.4.2",
+        "lodash.kebabcase": "^4.1.1",
+        "lodash.mapkeys": "^4.6.0",
+        "lodash.omit": "^4.5.0",
+        "tailwind-merge": "^1.14.0",
+        "tailwind-variants": "^0.1.20"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.4.0"
+      }
+    },
+    "node_modules/@nextui-org/theme/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@nextui-org/theme/node_modules/tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/@nextui-org/use-image": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-image/-/use-image-2.0.6.tgz",
+      "integrity": "sha512-VelN9y3vzwIpPfubFMh00YRQ0f4+I5FElcAvAqoo0Kfb0K7sGrTo1lZNApHm6yBN2gJMMeccG9u7bZB+wcDGZQ==",
+      "dependencies": {
+        "@nextui-org/use-safe-layout-effect": "2.0.6"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@nextui-org/use-safe-layout-effect": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@nextui-org/use-safe-layout-effect/-/use-safe-layout-effect-2.0.6.tgz",
+      "integrity": "sha512-xzEJXf/g9GaSqjLpQ4+Z2/pw1GPq2Fc5cWRGqEXbGauEMXuH8UboRls1BmIV1RuOpqI6FgxkEmxL1EuVIRVmvQ==",
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
     "node_modules/@noble/ciphers": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-0.5.3.tgz",
@@ -2463,6 +2684,301 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
       "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
     },
+    "node_modules/@react-aria/focus": {
+      "version": "3.18.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.4.tgz",
+      "integrity": "sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.22.4",
+        "@react-aria/utils": "^3.25.3",
+        "@react-types/shared": "^3.25.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/focus/node_modules/@react-aria/utils": {
+      "version": "3.25.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.3.tgz",
+      "integrity": "sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.6",
+        "@react-stately/utils": "^3.10.4",
+        "@react-types/shared": "^3.25.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/focus/node_modules/@react-stately/utils": {
+      "version": "3.10.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.4.tgz",
+      "integrity": "sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/focus/node_modules/@react-types/shared": {
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.25.0.tgz",
+      "integrity": "sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/i18n": {
+      "version": "3.11.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.11.1.tgz",
+      "integrity": "sha512-vuiBHw1kZruNMYeKkTGGnmPyMnM5T+gT8bz97H1FqIq1hQ6OPzmtBZ6W6l6OIMjeHI5oJo4utTwfZl495GALFQ==",
+      "dependencies": {
+        "@internationalized/date": "^3.5.4",
+        "@internationalized/message": "^3.1.4",
+        "@internationalized/number": "^3.5.3",
+        "@internationalized/string": "^3.2.3",
+        "@react-aria/ssr": "^3.9.4",
+        "@react-aria/utils": "^3.24.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.4.tgz",
+      "integrity": "sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.6",
+        "@react-aria/utils": "^3.25.3",
+        "@react-types/shared": "^3.25.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/interactions/node_modules/@react-aria/utils": {
+      "version": "3.25.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.3.tgz",
+      "integrity": "sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.6",
+        "@react-stately/utils": "^3.10.4",
+        "@react-types/shared": "^3.25.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/interactions/node_modules/@react-stately/utils": {
+      "version": "3.10.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.4.tgz",
+      "integrity": "sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/interactions/node_modules/@react-types/shared": {
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.25.0.tgz",
+      "integrity": "sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/overlays": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/overlays/-/overlays-3.22.1.tgz",
+      "integrity": "sha512-GHiFMWO4EQ6+j6b5QCnNoOYiyx1Gk8ZiwLzzglCI4q1NY5AG2EAmfU4Z1+Gtrf2S5Y0zHbumC7rs9GnPoGLUYg==",
+      "dependencies": {
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/i18n": "^3.11.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@react-aria/ssr": "^3.9.4",
+        "@react-aria/utils": "^3.24.1",
+        "@react-aria/visually-hidden": "^3.8.12",
+        "@react-stately/overlays": "^3.6.7",
+        "@react-types/button": "^3.9.4",
+        "@react-types/overlays": "^3.8.7",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.6",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.6.tgz",
+      "integrity": "sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.24.1.tgz",
+      "integrity": "sha512-O3s9qhPMd6n42x9sKeJ3lhu5V1Tlnzhu6Yk8QOvDuXf7UGuUjXf9mzfHJt1dYzID4l9Fwm8toczBzPM9t0jc8Q==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.4",
+        "@react-stately/utils": "^3.10.1",
+        "@react-types/shared": "^3.23.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-aria/visually-hidden": {
+      "version": "3.8.17",
+      "resolved": "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.8.17.tgz",
+      "integrity": "sha512-WFgny1q2CbxxU6gu46TGQXf1DjsnuSk+RBDP4M7bm1mUVZzoCp7U7AtjNmsBrWg0NejxUdgD7+7jkHHCQ91qRA==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.22.4",
+        "@react-aria/utils": "^3.25.3",
+        "@react-types/shared": "^3.25.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/visually-hidden/node_modules/@react-aria/utils": {
+      "version": "3.25.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.3.tgz",
+      "integrity": "sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.6",
+        "@react-stately/utils": "^3.10.4",
+        "@react-types/shared": "^3.25.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/visually-hidden/node_modules/@react-stately/utils": {
+      "version": "3.10.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.4.tgz",
+      "integrity": "sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/visually-hidden/node_modules/@react-types/shared": {
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.25.0.tgz",
+      "integrity": "sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/overlays": {
+      "version": "3.6.11",
+      "resolved": "https://registry.npmjs.org/@react-stately/overlays/-/overlays-3.6.11.tgz",
+      "integrity": "sha512-usuxitwOx4FbmOW7Og4VM8R8ZjerbHZLLbFaxZW7pWLs7Ypway1YhJ3SWcyNTYK7NEk4o602kSoU6MSev1Vgag==",
+      "dependencies": {
+        "@react-stately/utils": "^3.10.4",
+        "@react-types/overlays": "^3.8.10",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/overlays/node_modules/@react-stately/utils": {
+      "version": "3.10.4",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.4.tgz",
+      "integrity": "sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.1.tgz",
+      "integrity": "sha512-VS/EHRyicef25zDZcM/ClpzYMC5i2YGN6uegOeQawmgfGjb02yaCX0F0zR69Pod9m2Hr3wunTbtpgVXvYbZItg==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-types/button": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@react-types/button/-/button-3.10.0.tgz",
+      "integrity": "sha512-rAyU+N9VaHLBdZop4zasn8IDwf9I5Q1EzHUKMtzIFf5aUlMUW+K460zI/l8UESWRSWAXK9/WPSXGxfcoCEjvAA==",
+      "dependencies": {
+        "@react-types/shared": "^3.25.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/button/node_modules/@react-types/shared": {
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.25.0.tgz",
+      "integrity": "sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/overlays": {
+      "version": "3.8.10",
+      "resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.10.tgz",
+      "integrity": "sha512-IcnB+VYfAJazRjWhBKZTmVMh3KTp/B1rRbcKkPx6t8djP9UQhKcohP7lAALxjJ56Jjz/GFC6rWyUcnYH0NFVRA==",
+      "dependencies": {
+        "@react-types/shared": "^3.25.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/overlays/node_modules/@react-types/shared": {
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.25.0.tgz",
+      "integrity": "sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.23.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.23.1.tgz",
+      "integrity": "sha512-5d+3HbFDxGZjhbMBeFHRQhexMFt4pUce3okyRtUVKbbedQFUrtXSBg9VszgF2RTeQDKDkMCIQDtz5ccP/Lk1gw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.24.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.0.tgz",
@@ -2729,6 +3245,14 @@
         "url": "https://github.com/sindresorhus/is?sponsor=1"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
@@ -4155,6 +4679,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4171,6 +4707,20 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color2k": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz",
+      "integrity": "sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog=="
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -4449,6 +4999,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/defer-to-connect": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
@@ -5618,6 +6176,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -5689,6 +6255,30 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.11.17",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.17.tgz",
+      "integrity": "sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -6300,6 +6890,17 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/intl-messageformat": {
+      "version": "10.7.6",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.6.tgz",
+      "integrity": "sha512-IsMU/hqyy3FJwNJ0hxDfY2heJ7MteSuFvcnCebxRp67di4Fhx1gKKE+qS0bBwUF8yXkX9SsPUhLeX/B6h5SKUA==",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.2.3",
+        "@formatjs/fast-memoize": "2.2.3",
+        "@formatjs/icu-messageformat-parser": "2.9.3",
+        "tslib": "2"
+      }
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -6324,6 +6925,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -7007,6 +7613,16 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/lodash.foreach": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
+      "integrity": "sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ=="
+    },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="
+    },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -7014,12 +7630,27 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/lodash.kebabcase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
+      "integrity": "sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g=="
+    },
+    "node_modules/lodash.mapkeys": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapkeys/-/lodash.mapkeys-4.6.0.tgz",
+      "integrity": "sha512-0Al+hxpYvONWtg+ZqHpa/GaVzxuN3V7Xeo2p+bY06EaK/n+Y9R7nBePPN2o1LxmL0TWQSwP8LYZ008/hc9JzhA=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg=="
+    },
     "node_modules/lodash.union": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
@@ -8525,6 +9156,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/simple-update-notifier": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
@@ -8886,6 +9525,30 @@
         "url": "https://github.com/sponsors/dcastil"
       }
     },
+    "node_modules/tailwind-variants": {
+      "version": "0.1.20",
+      "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.1.20.tgz",
+      "integrity": "sha512-AMh7x313t/V+eTySKB0Dal08RHY7ggYK0MSn/ad8wKWOrDUIzyiWNayRUm2PIJ4VRkvRnfNuyRuKbLV3EN+ewQ==",
+      "dependencies": {
+        "tailwind-merge": "^1.14.0"
+      },
+      "engines": {
+        "node": ">=16.x",
+        "pnpm": ">=7.x"
+      },
+      "peerDependencies": {
+        "tailwindcss": "*"
+      }
+    },
+    "node_modules/tailwind-variants/node_modules/tailwind-merge": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz",
+      "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",

package.json

@@ -30,6 +30,9 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
+    "@nextui-org/image": "^2.0.32",
+    "@nextui-org/system": "^2.2.6",
+    "@nextui-org/theme": "^2.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
@@ -46,6 +49,7 @@
     "clsx": "^2.1.1",
     "dataloader": "^2.2.2",
     "dayjs": "^1.11.13",
+    "framer-motion": "^11.11.17",
     "lru-cache": "^11.0.1",
     "lucide-react": "^0.453.0",
     "nostr-tools": "^2.9.1",

src/renderer/src/components/ImageGallery/index.tsx

@@ -1,9 +1,9 @@
-import { ScrollArea, ScrollBar } from '@renderer/components/ui/scroll-area'
+import { Image } from '@nextui-org/image'
+import { cn } from '@renderer/lib/utils'
 import { useState } from 'react'
 import Lightbox from 'yet-another-react-lightbox'
 import Zoom from 'yet-another-react-lightbox/plugins/zoom'
 import NsfwOverlay from '../NsfwOverlay'
-import { cn } from '@renderer/lib/utils'
 
 export default function ImageGallery({
   className,
@@ -23,32 +23,56 @@ export default function ImageGallery({
     setIndex(current)
   }
 
+  const maxHight = size === 'small' ? 'h-[15vh]' : images.length < 3 ? 'h-[30vh]' : 'h-[20vh]'
+
   return (
-    <div className={cn('relative', className)} onClick={(e) => e.stopPropagation()}>
-      <ScrollArea className="w-full">
-        <div className="flex space-x-2">
-          {images.map((src, index) => {
-            return (
-              <img
-                className={`rounded-lg object-cover h-fit cursor-pointer ${size === 'small' ? 'max-h-[15vh]' : 'max-h-[30vh]'}`}
-                key={index}
-                src={src}
-                onClick={(e) => handlePhotoClick(e, index)}
-              />
-            )
-          })}
-        </div>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
+    <div className={className} onClick={(e) => e.stopPropagation()}>
+      <div className="flex flex-wrap gap-2">
+        {images.map((src, index) => (
+          <ImageWithNsfwOverlay
+            key={index}
+            src={src}
+            isNsfw={isNsfw}
+            className={maxHight}
+            onClick={(e) => handlePhotoClick(e, index)}
+          />
+        ))}
+      </div>
       <Lightbox
         index={index}
         slides={images.map((src) => ({ src }))}
         plugins={[Zoom]}
         open={index >= 0}
         close={() => setIndex(-1)}
-        controller={{ closeOnBackdropClick: true, closeOnPullUp: true, closeOnPullDown: true }}
+        controller={{
+          closeOnBackdropClick: true,
+          closeOnPullUp: true,
+          closeOnPullDown: true
+        }}
         styles={{ toolbar: { paddingTop: '2.25rem' } }}
       />
+    </div>
+  )
+}
+
+function ImageWithNsfwOverlay({
+  src,
+  isNsfw = false,
+  className,
+  onClick
+}: {
+  src: string
+  isNsfw: boolean
+  className?: string
+  onClick?: (e: React.MouseEvent) => void
+}) {
+  return (
+    <div className="relative" onClick={onClick}>
+      <Image
+        className={cn('rounded-lg object-cover aspect-square', className)}
+        src={src}
+        removeWrapper
+      />
       {isNsfw && <NsfwOverlay className="rounded-lg" />}
     </div>
   )

src/renderer/src/components/NoteCard/RepostNoteCard.tsx

@@ -6,7 +6,11 @@ import ShortTextNoteCard from './ShortTextNoteCard'
 
 export default function RepostNoteCard({ event, className }: { event: Event; className?: string }) {
   const targetEvent = event.content ? (JSON.parse(event.content) as Event) : null
-  if (!targetEvent || !verifyEvent(targetEvent) || targetEvent.kind !== kinds.ShortTextNote) {
+  try {
+    if (!targetEvent || !verifyEvent(targetEvent) || targetEvent.kind !== kinds.ShortTextNote) {
+      return null
+    }
+  } catch {
     return null
   }
 

tailwind.config.js

@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/renderer/**/*.{ts,tsx}'],
+  content: [
+    './src/renderer/**/*.{ts,tsx}',
+    './node_modules/@nextui-org/theme/dist/components/image.js'
+  ],
   prefix: '',
   theme: {
     container: {
@@ -49,5 +52,5 @@ module.exports = {
       }
     }
   },
-  plugins: [require('tailwindcss-animate')]
+  plugins: [require('tailwindcss-animate'), require('@nextui-org/theme')]
 }