Доработать оглавление канала и отображение дневника

shine-UI/js/services/attachment-format.js

@@ -278,12 +278,25 @@ function createMediaSlide({ item, url, kind, messageTimestampMs, slide, previewU
     openAttachmentViewer({ item, url, kind });
   });
 
+  const bindImageLayout = (img) => {
+    img.addEventListener('load', () => {
+      const naturalWidth = Number(img.naturalWidth || 0);
+      const naturalHeight = Number(img.naturalHeight || 0);
+      const isLandscape = naturalWidth > 0 && naturalHeight > 0 && naturalWidth > naturalHeight;
+      img.classList.toggle('is-landscape', isLandscape);
+      frame.classList.toggle('is-landscape', isLandscape);
+      slide.classList.toggle('has-landscape-media', isLandscape);
+      slide.parentElement?.classList.toggle('has-landscape-media', isLandscape);
+    }, { once: true });
+  };
+
   if (kind === 'image') {
     const img = document.createElement('img');
     img.className = 'message-attachment-media';
     img.src = url;
     img.alt = item.name;
     img.loading = 'lazy';
+    bindImageLayout(img);
     img.addEventListener('error', () => replaceWithUnavailable(slide, messageTimestampMs), { once: true });
     frame.append(img);
   } else if (previewUrl) {
@@ -292,6 +305,7 @@ function createMediaSlide({ item, url, kind, messageTimestampMs, slide, previewU
     img.src = previewUrl;
     img.alt = `${item.name} preview`;
     img.loading = 'lazy';
+    bindImageLayout(img);
     img.addEventListener('error', () => replaceWithUnavailable(slide, messageTimestampMs), { once: true });
     const play = document.createElement('span');
     play.className = 'message-attachment-play';
@@ -351,6 +365,7 @@ export function createAttachmentCarouselElement(attachments = [], { gateway = ''
   next.setAttribute('aria-label', 'Следующее вложение');
   const counter = document.createElement('div');
   counter.className = 'message-attachment-counter';
+  wrap.classList.toggle('has-single-attachment', items.length <= 1);
 
   const render = () => {
     stopVideos(wrap);
@@ -358,6 +373,8 @@ export function createAttachmentCarouselElement(attachments = [], { gateway = ''
     const kind = getAttachmentKind(item);
     const url = buildArweaveDataUrl({ gateway, txId: item.ar });
     const previewUrl = item.preview?.ar ? buildArweaveDataUrl({ gateway, txId: item.preview.ar }) : '';
+    viewport.classList.remove('has-landscape-media');
+    slide.className = 'message-attachment-slide';
     slide.dataset.unavailable = '0';
     slide.replaceChildren();
     slide.append(kind === 'file'
@@ -365,7 +382,8 @@ export function createAttachmentCarouselElement(attachments = [], { gateway = ''
       : createMediaSlide({ item, url, kind, messageTimestampMs, slide, previewUrl }));
     prev.hidden = items.length <= 1 || index <= 0;
     next.hidden = items.length <= 1 || index >= items.length - 1;
-    counter.textContent = `${index + 1} из ${items.length}`;
+    counter.hidden = items.length <= 1;
+    counter.textContent = items.length > 1 ? `${index + 1} из ${items.length}` : '';
   };
 
   const move = (delta) => {