Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(migrate): tighten card header + give the empty state a real CTA

Browse Source 
The Migrate tab carried two walls of explanation text — a 3-line hint
under the h2 ("Pulls a snapshot taken on another host…") and an even
longer empty-state paragraph ("Either no other LibrePortal has backed
up to a location this host can see, or this is the only host using its
locations…"). Both spelled out diagnosis the user can infer from the
empty list itself, and the tone didn't match the rest of the backup
page (cards elsewhere have a short title + a 4-6 word hint, with any
long explanation as a hover title attribute).

Three changes:

1. h2 down to "Cross-host migrate" with a small ℹ️ carrying the full
   explanation as a title= tooltip — matches the existing tooltip
   pattern in the Locations form (BACKUP_RETENTION_PRESET_META).
   The short subtitle "Restore an app from another LibrePortal" stays
   as backup-card-hint, mirroring "Per-app status / Latest backup per
   app on this host" elsewhere on the page.

2. The empty state is now the standard `<div class="backup-empty-state">`
   container (same shape Locations + Snapshots use), one trimmed line
   ("No backups from other hosts visible in any enabled location.
   Add a shared backup location on both hosts to enable cross-host
   migrate.") instead of two paragraphs.

3. Added an "Open Locations" CTA button inside the empty state — the
   #1 next-step for a user staring at this empty list is to add a
   shared location, which lives one tab over. New data-action
   "go-to-locations" wired through the existing event-delegation
   handler in backup-page.js calling switchTab('locations').

The renderMigrate JS still toggles #backup-migrate-empty.hidden — the
wrapper id is unchanged, only its inner markup tightened. No
behavioural change beyond the CTA + tab switch.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-26 23:58:52 +01:00
parent 8fa13ae52b
commit 88b431ee86
2 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
containers/libreportal/frontend/html/backup-content.html
View File

@ -154,20 +154,17 @@
<section class="backup-tabpanel" id="backup-panel-migrate">
<div class="backup-card backup-migrate-card">
<div class="backup-card-header">
<h2>Restore an app from another LibrePortal</h2>
<span class="backup-card-hint">
Pulls a snapshot taken on another host out of a shared backup location and
lays it down here. The destination's existing copy of the app is snapshotted
first (rollback safety), then replaced.
</span>
<h2>Cross-host migrate <span class="tooltip" title="Pulls a snapshot taken on another host out of a shared backup location and lays it down here. The destination's existing copy of the app is snapshotted first (rollback safety), then replaced." style="font-size:.75em;opacity:.7;cursor:help">ℹ️</span></h2>
<span class="backup-card-hint">Restore an app from another LibrePortal</span>
</div>
<div class="backup-migrate-empty" id="backup-migrate-empty" hidden>
<p>No backups from other hosts found in any enabled location.</p>
<p class="backup-card-hint">
Either no other LibrePortal has backed up to a location this host can see,
or this is the only host using its locations. Add a shared backup location
on both hosts to enable cross-host migrate.
</p>
<div class="backup-empty-state">
No backups from other hosts visible in any enabled location.<br>
Add a <strong>shared backup location</strong> on both hosts to enable cross-host migrate.
<div style="margin-top:12px">
<button type="button" class="backup-primary-btn" data-action="go-to-locations">Open Locations</button>
</div>
</div>
</div>
<div class="backup-migrate-body" id="backup-migrate-body"></div>
</div>

3
containers/libreportal/frontend/js/components/backup/backup-page.js
View File

@ -282,6 +282,9 @@ class BackupPage {
const exportBtn = e.target.closest('[data-action="export-passwords"]');
if (exportBtn) { this.toggleExportMenu(false); this.exportRepositoryPasswords(exportBtn); return; }
const goToLocations = e.target.closest('[data-action="go-to-locations"]');
if (goToLocations) { this.switchTab('locations'); return; }
const dismissWarn = e.target.closest('[data-action="dismiss-config-warning"]');
if (dismissWarn) {
window.Dismissible?.dismiss('backup-config-warning');