add soft delete with trash page and group photo chronology with styling

public/share.html

@@ -28,11 +28,10 @@ body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;background
 .card .desc{font-size:.9rem;line-height:1.45;color:#4a4f5a;white-space:pre-wrap;word-break:break-word}
 .files-block{margin-top:10px}
 .files-label{font-size:.7rem;font-weight:800;color:var(--gray);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
-.card .files{display:flex;flex-direction:column;gap:6px}
-.card .files a{display:flex;align-items:center;gap:8px;background:#F6F6F6;border:1px solid #EBEBEB;color:#3a3f4a;text-decoration:none;border-radius:12px;padding:6px 10px;transition:border .15s,color .15s,background .15s}
+.card .files{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
+.card .files a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:#F6F6F6;border:1px solid #EBEBEB;color:#3a3f4a;text-decoration:none;border-radius:12px;transition:border .15s,color .15s,background .15s}
 .card .files a:hover{border-color:var(--yellow);color:var(--dark);background:#fff}
-.card .files .ficon{font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;flex-shrink:0}
-.card .files .fname{font-size:.74rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.card .files .ficon{font-size:1.25rem;line-height:1;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;flex-shrink:0}
 .card .files a.ftype-image .ficon{background:#EAF4E8}
 .card .files a.ftype-music .ficon{background:#EAEEF6}
 .card .files a.ftype-document .ficon{background:#F6F0E0}
@@ -45,9 +44,16 @@ body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;background
 .lightbox{position:fixed;inset:0;background:rgba(12,14,20,.92);display:none;align-items:center;justify-content:center;z-index:100;cursor:zoom-out;padding:24px}
 .lightbox.open{display:flex}
 .lightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
-@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
-@media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
-@media(max-width:480px){.grid{grid-template-columns:1fr}}
+#photosBlock{display:none;margin-bottom:44px}
+.photos-label{font-size:.78rem;font-weight:800;color:var(--gray);text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
+.photos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
+.gphoto{position:relative;border-radius:18px;overflow:hidden;background:#fff;display:block;box-shadow:0 1px 3px rgba(20,30,40,.06);text-decoration:none}
+.gphoto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;cursor:zoom-in;transition:transform .18s ease}
+.gphoto:hover img{transform:scale(1.03)}
+.gcap{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;font-size:.74rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+@media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}.photos-grid{grid-template-columns:repeat(3,1fr)}}
+@media(max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}.photos-grid{grid-template-columns:repeat(2,1fr)}}
+@media(max-width:480px){.grid{grid-template-columns:1fr}.photos-grid{grid-template-columns:1fr}}
 </style>
 </head>
 <body>
@@ -56,6 +62,10 @@ body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;background
   <div class="chips" id="chips"></div>
 </section>
 <main class="wrap">
+  <div id="photosBlock">
+    <div class="photos-label">Фото группы</div>
+    <div class="photos-grid" id="photosGrid"></div>
+  </div>
   <div class="grid" id="grid"><div class="loading">Карточки загружаются...</div></div>
 </main>
 <div class="lightbox" id="lightbox" onclick="this.classList.remove('open')"><img id="lightboxImg" alt=""></div>
@@ -82,11 +92,10 @@ function filesHTML(files){
     <div class="files-label">Работы резидента</div>
     <div class="files">${files.map(f=>{
       const t = fileType(f.name);
-      return `<a class="ftype-${t}" ${isImageFile(f.name)
-        ?`href="#" onclick="showImg('/api/files/${f.token}');return false;" title="Открыть"`
-        :`href="/api/files/${f.token}" download title="Скачать"`}>
-        <span class="ficon">${fileIcon(t)}</span>
-        <span class="fname">${esc(f.name)}</span>
+      return `<a class="ftype-${t}" title="${esc(f.name)}" ${isImageFile(f.name)
+        ?`href="#" onclick="showImg('/api/files/${f.token}');return false;"`
+        :`href="/api/files/${f.token}" download`}>
+        <span class="ficon" alt="${esc(f.name)}">${fileIcon(t)}</span>
       </a>`;
     }).join('')}</div>
   </div>`;
@@ -106,6 +115,19 @@ function filesHTML(files){
     if (data.date_from || data.date_to) chips.push(`Период: <b>${fmt(data.date_from)}</b> — <b>${fmt(data.date_to)}</b>`);
     document.getElementById('chips').innerHTML = chips.map(c => `<span class="chip">${c}</span>`).join('');
 
+    const pb = document.getElementById('photosBlock');
+    if (data.photos && data.photos.length) {
+      document.getElementById('photosGrid').innerHTML = data.photos.map(p => `
+        <a class="gphoto" href="#" onclick="showImg('${p.photo_path}');return false;">
+          <img src="${p.photo_path}" alt="${esc(p.caption || '')}" loading="lazy">
+          ${p.caption ? `<div class="gcap">${esc(p.caption)}</div>` : ''}
+        </a>
+      `).join('');
+      pb.style.display = 'block';
+    } else {
+      pb.style.display = 'none';
+    }
+
     const grid = document.getElementById('grid');
     if (!data.entries.length) {
       grid.innerHTML = '<div class="empty"><div class="big">🎈</div>Записей пока нет</div>';