Fix repository action layout

webgui/Backupper.page

@@ -9,10 +9,10 @@ Tag="backup restic snapshots restore"
 <?php
 $pluginRoot = '/plugins/backupper';
 ?>
-<link rel="stylesheet" href="<?= $pluginRoot ?>/assets/backupper.css?v=8">
+<link rel="stylesheet" href="<?= $pluginRoot ?>/assets/backupper.css?v=9">
 <div id="backupper-app" data-api="<?= $pluginRoot ?>/api.php">
   <header class="bu-header">
-    <div><h1>Backupper <span class="bu-version">0.1.8</span></h1><p>Encrypted Restic backups for Unraid</p></div>
+    <div><h1>Backupper <span class="bu-version">0.1.9</span></h1><p>Encrypted Restic backups for Unraid</p></div>
     <div id="bu-health" class="bu-health" tabindex="0" data-tooltip="Zeigt, ob die Backupper-Hintergrundkomponente erreichbar ist. Beispiel: 'Daemon online' bedeutet, dass Jobs gestartet werden können.">Connecting...</div>
   </header>
   <nav class="bu-tabs" aria-label="Backupper sections">
@@ -29,4 +29,4 @@ $pluginRoot = '/plugins/backupper';
   <div id="bu-tooltip" role="tooltip" aria-hidden="true"></div>
 </div>
 <script>window.BACKUPPER_CSRF = <?= json_encode($var['csrf_token'] ?? '') ?>;</script>
-<script src="<?= $pluginRoot ?>/assets/backupper-0.1.8.js"></script>
+<script src="<?= $pluginRoot ?>/assets/backupper-0.1.9.js"></script>

webgui/assets/backupper.css

@@ -60,6 +60,8 @@
 #backupper-app .bu-muted { color: var(--bu-muted) !important; opacity: .72; }
 .bu-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-bottom: 14px; }
 .bu-actions { display: flex; flex-wrap: wrap; gap: 7px; }
+.bu-table-actions { align-items: flex-start; min-width: 310px; }
+.bu-table-actions .bu-button { flex: 0 0 auto; }
 .bu-warning { color: var(--bu-bad) !important; display: block; font-size: 13px; font-weight: 700; margin-top: 5px; }
 
 #backupper-app .bu-button {
@@ -166,5 +168,6 @@
   .bu-form { grid-template-columns: 1fr; }
   .bu-header { align-items: flex-start; flex-direction: column; gap: 12px; }
   .bu-table { display: block; overflow-x: auto; }
+  .bu-table-actions { min-width: 240px; }
   #bu-tooltip { font-size: 13px; }
 }

webgui/assets/backupper.js

@@ -103,6 +103,8 @@
   };
   const status = (value) => `<span class="bu-status ${esc(value)}" tabindex="0"${tipAttr(`Status dieses Vorgangs. Beispiel: success = erfolgreich, warning = mit Warnung, failed = fehlgeschlagen, running = läuft.`)}>${esc(value)}</span>`;
   const button = (label, action, kind = '') => `<button class="bu-button ${kind}" data-action="${esc(action)}"${tipAttr(actionTooltip(action, label))}>${esc(label)}</button>`;
+  const disabledButton = (label, help) => `<button class="bu-button" type="button" disabled${tipAttr(help)}>${esc(label)}</button>`;
+  const actionGroup = (buttons) => `<div class="bu-actions bu-table-actions">${buttons}</div>`;
 
   function setTooltip(element, text) {
     if (!element || !text || element.dataset.tooltip) return;
@@ -205,7 +207,7 @@
   }
 
   function renderJobs() {
-    const rows = state.config.jobs.map(j => `<tr><td><strong>${esc(j.name)}</strong><br><span class="bu-muted">${esc(j.id)}</span></td><td>${esc(j.type)}</td><td>${esc(repoName(j.repositoryId))}</td><td>${esc(j.schedule?.cron || 'manual')}</td><td>${j.enabled ? status('success') : status('cancelled')}</td><td class="bu-actions">${button('Run',`run-job:${j.id}`,'primary')}${button('Edit',`edit-job:${j.id}`)}${button('Duplicate',`duplicate-job:${j.id}`)}${button('Delete',`delete-job:${j.id}`,'danger')}</td></tr>`).join('');
+    const rows = state.config.jobs.map(j => `<tr><td><strong>${esc(j.name)}</strong><br><span class="bu-muted">${esc(j.id)}</span></td><td>${esc(j.type)}</td><td>${esc(repoName(j.repositoryId))}</td><td>${esc(j.schedule?.cron || 'manual')}</td><td>${j.enabled ? status('success') : status('cancelled')}</td><td>${actionGroup(button('Run',`run-job:${j.id}`,'primary')+button('Edit',`edit-job:${j.id}`)+button('Duplicate',`duplicate-job:${j.id}`)+button('Delete',`delete-job:${j.id}`,'danger'))}</td></tr>`).join('');
     return `<div class="bu-toolbar"><div><h2>Backup Jobs</h2><div class="bu-muted">One isolated Restic repository per job.</div></div>${button('New job','new-job','primary')}</div>
       <section class="bu-card">${rows ? `<table class="bu-table"><thead><tr><th>Job</th><th>Type</th><th>Repository</th><th>Schedule</th><th>Enabled</th><th>Actions</th></tr></thead><tbody>${rows}</tbody></table>` : '<div class="bu-empty">No backup jobs configured.</div>'}</section>`;
   }
@@ -228,7 +230,11 @@
   }
 
   function renderRepositories() {
-    const rows = state.config.repositories.map(r => `<tr><td><strong>${esc(r.name)}</strong><br><span class="bu-muted">${esc(r.id)}</span></td><td>${esc(r.type)}</td><td>${esc(r.location)}${volatileLocation(r)?'<span class="bu-warning">Volatile path: data is lost after reboot. Use /mnt/user/...</span>':''}</td><td>${r.mount?.managed?'Managed':'Direct / external'}</td><td class="bu-actions">${button('Initialize',`init-repo:${r.id}`,'primary')}${button('Test',`test-repo:${r.id}`)}${button('Snapshots',`repo-snapshots:${r.id}`)}${button('Check',`maint:check:${r.id}`)}${button('Prune',`maint:prune:${r.id}`)}${button('Edit',`edit-repo:${r.id}`)}${button('Delete',`delete-repo:${r.id}`,'danger')}</td></tr>`).join('');
+    const rows = state.config.repositories.map(r => {
+      const initialize = volatileLocation(r) ? disabledButton('Initialize','Dieses Ziel liegt im flüchtigen RAM. Zuerst über Edit einen dauerhaften Pfad wie /mnt/user/Backups/HomeServer eintragen.') : button('Initialize',`init-repo:${r.id}`,'primary');
+      const actions = initialize+button('Test',`test-repo:${r.id}`)+button('Snapshots',`repo-snapshots:${r.id}`)+button('Check',`maint:check:${r.id}`)+button('Prune',`maint:prune:${r.id}`)+button('Edit',`edit-repo:${r.id}`)+button('Delete',`delete-repo:${r.id}`,'danger');
+      return `<tr><td><strong>${esc(r.name)}</strong><br><span class="bu-muted">${esc(r.id)}</span></td><td>${esc(r.type)}</td><td>${esc(r.location)}${volatileLocation(r)?'<span class="bu-warning">Volatile path: data is lost after reboot. Use /mnt/user/...</span>':''}</td><td>${r.mount?.managed?'Managed':'Direct / external'}</td><td>${actionGroup(actions)}</td></tr>`;
+    }).join('');
     return `<div class="bu-toolbar"><div><h2>Repositories</h2><div class="bu-muted">Local, SMB, NFS and SFTP destinations.</div></div>${button('New repository','new-repo','primary')}</div><section class="bu-card">${rows ? `<table class="bu-table"><thead><tr><th>Name</th><th>Type</th><th>Location</th><th>Mount</th><th>Actions</th></tr></thead><tbody>${rows}</tbody></table>` : '<div class="bu-empty">No repositories configured.</div>'}</section>`;
   }