feat: enhance image layout and handling

Improved image display by introducing a responsive grid layout for image lists, optimizing the first image's placement in odd-numbered lists to span across both columns. This change enhances visual appeal and usability, especially on larger screens. Additionally, refactored image retrieval logic to wrap images in a container, dynamically adjusting the class based on the number of images for tailored styling.

src/assets/item.css

@@ -1,6 +1,18 @@
 .content {
   word-break: break-word;
 
+  .image-list-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: masonry;
+
+    &.image-list-odd {
+      :first-child {
+        grid-column: 1 / 3;
+      }
+    }
+  }
+
   img {
     width: calc(100% - var(--box-margin));
   }

src/lib/telegram/index.js

@@ -33,7 +33,7 @@ function getImageStickers($, item, { staticProxy, index }) {
 }
 
 function getImages($, item, { staticProxy, id, index, title }) {
-  return $(item).find('.tgme_widget_message_photo_wrap')?.map((_index, photo) => {
+  const images = $(item).find('.tgme_widget_message_photo_wrap')?.map((_index, photo) => {
     const url = $(photo).attr('style').match(/url\(["'](.*?)["']/)?.[1]
     const popoverId = `modal-${id}-${_index}`
     return `
@@ -44,7 +44,8 @@ function getImages($, item, { staticProxy, id, index, title }) {
         <img class="modal-img" src="${staticProxy + url}" alt="${title}" loading="${index > 15 ? 'eager' : 'lazy'}" />
       </button>
     `
-  })?.get()?.join('')
+  })?.get()
+  return `<div class="image-list-container ${images.length % 2 === 0 ? 'image-list-even' : 'image-list-odd'}">${images?.join('')}</div>`
 }
 
 function getVideo($, item, { staticProxy, index }) {