Add system info dashboard to settings

- New /api/system-info endpoint returning DB size, table sizes, photo/file counts, uploads stats, disk usage
- System info cards in settings page (responsive grid)
- Replaced inline onclick handlers with data attributes + event delegation in groups.html

public/settings.html

@@ -65,6 +65,16 @@
         </div>
         <div class="restore-status" id="restoreStatus"></div>
       </div>
+
+      <div class="settings-card">
+        <div class="card-head">
+          <div class="ic">📊</div>
+          <h3>Системная информация</h3>
+        </div>
+        <div id="systemInfo" class="sys-grid">
+          <div class="sys-card loading">Загрузка…</div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -132,6 +142,72 @@ async function loadSettings() {
   } else {
     document.getElementById('dataStats').innerHTML = '';
   }
+
+  const siRes = await fetch(`${API}/api/system-info`, { headers: hdr() });
+  if (siRes.ok) {
+    const si = await siRes.json();
+    renderSystemInfo(si);
+  } else {
+    document.getElementById('systemInfo').innerHTML = '<div class="sys-card err">Ошибка загрузки</div>';
+  }
+}
+
+function renderSystemInfo(si) {
+  const db = si.database || {};
+  const photos = si.photos || {};
+  const files = si.files || {};
+  const uploads = si.uploads || {};
+  const disk = si.disk;
+
+  let tablesHtml = '';
+  if (db.tables && db.tables.length) {
+    tablesHtml = '<details class="sys-details"><summary>Таблицы БД</summary><div class="sys-table-list">' +
+      db.tables.map(t => `<div class="sys-table-row"><span>${t.name}</span><span>${t.size}</span></div>`).join('') +
+      '</div></details>';
+  }
+
+  let diskHtml = '';
+  if (disk) {
+    const pct = disk.used_pct;
+    const color = pct > 90 ? '#ef4444' : pct > 70 ? '#f59e0b' : '#16a34a';
+    diskHtml = `
+      <div class="sys-item">
+        <span class="sys-label">Диск</span>
+        <span class="sys-value">${disk.used} / ${disk.total}</span>
+      </div>
+      <div class="sys-bar-wrap">
+        <div class="sys-bar" style="width:${pct}%; background:${color}"></div>
+      </div>
+      <div class="sys-meta">Свободно: ${disk.free} (${100 - pct}%)</div>
+    `;
+  }
+
+  document.getElementById('systemInfo').innerHTML = `
+    <div class="sys-card">
+      <div class="sys-title">База данных</div>
+      <div class="sys-item"><span class="sys-label">Размер</span><span class="sys-value">${db.size || '—'}</span></div>
+      ${tablesHtml}
+    </div>
+    <div class="sys-card">
+      <div class="sys-title">Фото</div>
+      <div class="sys-item"><span class="sys-label">Фото групп</span><span class="sys-value">${photos.group_photos?.count || 0}</span></div>
+      <div class="sys-item"><span class="sys-label">Фото в записях</span><span class="sys-value">${photos.entry_photos?.count || 0}</span></div>
+      <div class="sys-item"><span class="sys-label">Всего</span><span class="sys-value"><b>${photos.total_count || 0}</b></span></div>
+    </div>
+    <div class="sys-card">
+      <div class="sys-title">Файлы</div>
+      <div class="sys-item"><span class="sys-label">Проектные файлы</span><span class="sys-value">${files.project_files?.count || 0}</span></div>
+    </div>
+    <div class="sys-card">
+      <div class="sys-title">Загрузки</div>
+      <div class="sys-item"><span class="sys-label">Файлов</span><span class="sys-value">${uploads.count || 0}</span></div>
+      <div class="sys-item"><span class="sys-label">Размер</span><span class="sys-value">${uploads.size || '0 B'}</span></div>
+    </div>
+    <div class="sys-card">
+      <div class="sys-title">Диск</div>
+      ${diskHtml || '<div class="sys-meta">Недоступно</div>'}
+    </div>
+  `;
 }
 
 async function saveSettings() {