v0.11.9 UI Polish Fixes for backup section

- Fix 1: margin-bottom 1rem→1.5rem on .deploy-cross-drive
- Fix 2: info tooltip on "Módszer"; rename restic to "Titkosított mentés"
- Fix 3: replace disabled checkbox with green/gray dot status indicator
- Fix 4: progressive disclosure — dest/method/schedule selects disabled
  until "Engedélyezve" checked; backend preserves config when disabling
- Fix 5: remove all emoji from deploy.html and backups.html backup sections

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

controller/internal/web/handlers.go

@@ -519,23 +519,31 @@ func (s *Server) settingsCrossBackupHandler(w http.ResponseWriter, r *http.Reque
 	_ = r.ParseForm()
 
 	enabled := r.FormValue("cross_drive_enabled") == "on"
-	method := r.FormValue("cross_drive_method")
-	destPath := r.FormValue("cross_drive_dest")
-	schedule := r.FormValue("cross_drive_schedule")
 
-	// Validate method and schedule
-	if method != "rsync" && method != "restic" {
-		method = "rsync"
-	}
-	if schedule != "daily" && schedule != "weekly" && schedule != "manual" {
-		schedule = "daily"
-	}
-
-	// Preserve existing runtime status fields
+	// Preserve existing runtime status fields and config when disabling
 	existing := s.settings.GetCrossDriveConfig(name)
 
+	var method, destPath, schedule string
+	if enabled {
+		method = r.FormValue("cross_drive_method")
+		destPath = r.FormValue("cross_drive_dest")
+		schedule = r.FormValue("cross_drive_schedule")
+		// Validate method and schedule
+		if method != "rsync" && method != "restic" {
+			method = "rsync"
+		}
+		if schedule != "daily" && schedule != "weekly" && schedule != "manual" {
+			schedule = "daily"
+		}
+	} else if existing != nil {
+		// Preserve existing settings when disabling
+		method = existing.Method
+		destPath = existing.DestinationPath
+		schedule = existing.Schedule
+	}
+
 	var cfg *settings.CrossDriveBackup
-	if destPath != "" {
+	if destPath != "" || existing != nil {
 		cfg = &settings.CrossDriveBackup{
 			Enabled:         enabled,
 			Method:          method,

controller/internal/web/templates/backups.html

@@ -307,10 +307,10 @@
                     <span class="meta-badge">{{.MethodLabel}}</span>
                     {{if .DestLabel}}<span class="meta-badge meta-badge-storage">→ {{.DestLabel}}</span>
                     {{else if .DestPath}}<span class="meta-badge meta-badge-storage">→ {{.DestPath}}</span>{{end}}
-                    {{if eq .LastStatus "ok"}}<span class="meta-badge meta-badge-ok">✅ {{.LastRunShort}}</span>
-                    {{else if eq .LastStatus "error"}}<span class="meta-badge meta-badge-fail">❌ Hiba</span>
-                    {{else if eq .LastStatus "running"}}<span class="meta-badge">⏳ Fut...</span>
-                    {{else}}<span class="meta-badge" style="color:var(--text-muted)">⏰ {{.ScheduleLabel}}</span>{{end}}
+                    {{if eq .LastStatus "ok"}}<span class="meta-badge meta-badge-ok">{{.LastRunShort}}</span>
+                    {{else if eq .LastStatus "error"}}<span class="meta-badge meta-badge-fail">Hiba</span>
+                    {{else if eq .LastStatus "running"}}<span class="meta-badge">Fut...</span>
+                    {{else}}<span class="meta-badge" style="color:var(--text-muted)">{{.ScheduleLabel}}</span>{{end}}
                     {{if .SizeHuman}}<span class="mono" style="font-size:.8rem;color:var(--text-muted)">{{.SizeHuman}}</span>{{end}}
                 </div>
             </div>
@@ -321,7 +321,7 @@
 
     {{if .Backup.UnconfiguredApps}}
     <div style="font-size:.85rem;color:var(--yellow);margin-bottom:1rem">
-        ⚠️ {{len .Backup.UnconfiguredApps}} alkalmazáshoz nincs beállítva:
+        {{len .Backup.UnconfiguredApps}} alkalmazáshoz nincs beállítva:
         {{range .Backup.UnconfiguredApps}}
         <a href="/stacks/{{.StackName}}/deploy" style="color:var(--accent-blue)">{{.DisplayName}}</a>
         {{end}}
@@ -495,7 +495,7 @@ function triggerAllCrossDrive(btn) {
             btn.textContent = 'Összes futtatása most';
             return;
         }
-        btn.textContent = '⏳ Mentések futnak...';
+        btn.textContent = 'Mentések futnak...';
         setTimeout(function() { location.reload(); }, 5000);
     })
     .catch(function(e) {

controller/internal/web/templates/deploy.html

@@ -62,7 +62,7 @@
     {{end}}
     {{if .StaleData}}
     <div class="deploy-stale-data">
-        <h4>🗑️ Korábbi adatok</h4>
+        <h4>Korábbi adatok</h4>
         <p class="form-hint" style="margin-bottom:1rem">
             Az alkalmazás adatainak másolata megtalálható egy másik tárolón is.
             Ez általában áthelyezés után marad hátra.
@@ -84,7 +84,7 @@
                 </div>
             </div>
             <button class="btn btn-sm btn-danger" onclick="deleteStaleData('{{$.Meta.Slug}}', '{{.Path}}', this)">
-                🗑️ Korábbi adatok törlése
+                Korábbi adatok törlése
             </button>
         </div>
         {{end}}
@@ -95,13 +95,17 @@
     {{if .AlreadyDeployed}}
     {{if .StorageInfo}}
     <div class="deploy-cross-drive">
-        <h4>🔒 Biztonsági mentés</h4>
+        <h4>Biztonsági mentés</h4>
 
         <div class="cross-drive-nightly">
-            <label class="toggle">
-                <input type="checkbox" id="app-backup-enabled" {{if .AppBackupEnabled}}checked{{end}} disabled>
+            <div class="cross-drive-nightly-status">
+                {{if .AppBackupEnabled}}
+                <span class="nightly-status-indicator nightly-enabled"></span>
+                {{else}}
+                <span class="nightly-status-indicator nightly-disabled"></span>
+                {{end}}
                 <span class="toggle-label">Napi mentésbe foglalás (restic, helyi)</span>
-            </label>
+            </div>
             <span class="form-hint" style="display:block;margin-top:.25rem">
                 Az alkalmazás adatai bekerülnek az éjszakai biztonsági mentésbe.
                 <a href="/backups" style="color:var(--accent-blue)">Beállítás a mentési oldalon</a>
@@ -113,7 +117,7 @@
         <p style="font-weight:500;margin-bottom:1rem">Másolat másik meghajtóra:</p>
 
         {{if .BackupDestWarning}}
-        <div class="alert alert-warning" style="margin-bottom:1rem">⚠️ {{.BackupDestWarning}}</div>
+        <div class="alert alert-warning" style="margin-bottom:1rem">{{.BackupDestWarning}}</div>
         {{end}}
 
         {{if not .BackupDestPaths}}
@@ -128,13 +132,15 @@
                     <span class="settings-label">Engedélyezve</span>
                     <label class="toggle" style="margin:0">
                         <input type="checkbox" name="cross_drive_enabled" id="cross-drive-enabled"
-                            {{if and .CrossDriveConfig .CrossDriveConfig.Enabled}}checked{{end}}>
+                            {{if and .CrossDriveConfig .CrossDriveConfig.Enabled}}checked{{end}}
+                            onchange="toggleCrossDriveFields()">
                         <span class="toggle-label">Igen</span>
                     </label>
                 </div>
                 <div class="settings-row">
                     <span class="settings-label">Cél tárhely</span>
-                    <select name="cross_drive_dest" class="form-control" style="max-width:20rem">
+                    <select name="cross_drive_dest" id="cd-dest" class="form-control cross-drive-field" style="max-width:20rem"
+                        {{if not (and .CrossDriveConfig .CrossDriveConfig.Enabled)}}disabled{{end}}>
                         {{range .BackupDestPaths}}
                         <option value="{{.Path}}"
                             {{if and $.CrossDriveConfig (eq $.CrossDriveConfig.DestinationPath .Path)}}selected{{end}}>
@@ -145,19 +151,34 @@
                     </select>
                 </div>
                 <div class="settings-row">
-                    <span class="settings-label">Módszer</span>
-                    <select name="cross_drive_method" class="form-control" style="max-width:20rem">
+                    <span class="settings-label">
+                        Módszer
+                        <span class="info-tooltip" tabindex="0">
+                            <span class="info-icon">i</span>
+                            <span class="info-tooltip-text">
+                                <strong>Egyszerű másolat (rsync):</strong> Tükörszerű másolat, a fájlok közvetlenül böngészhetők.
+                                Nem titkosított, nem verziózott — mindig a legfrissebb állapotot tartalmazza.
+                                <br><br>
+                                <strong>Titkosított mentés (restic):</strong> Titkosított, tömörített, verziózott mentés.
+                                Korábbi állapotok visszaállíthatók. Nem böngészhető közvetlenül —
+                                visszaállításhoz a vezérlőpult szükséges.
+                            </span>
+                        </span>
+                    </span>
+                    <select name="cross_drive_method" id="cd-method" class="form-control cross-drive-field" style="max-width:20rem"
+                        {{if not (and .CrossDriveConfig .CrossDriveConfig.Enabled)}}disabled{{end}}>
                         <option value="rsync" {{if and .CrossDriveConfig (eq .CrossDriveConfig.Method "rsync")}}selected{{end}}>
                             Egyszerű másolat (rsync)
                         </option>
                         <option value="restic" {{if and .CrossDriveConfig (eq .CrossDriveConfig.Method "restic")}}selected{{end}}>
-                            Verziózott mentés (restic)
+                            Titkosított mentés (restic)
                         </option>
                     </select>
                 </div>
                 <div class="settings-row">
                     <span class="settings-label">Ütemezés</span>
-                    <select name="cross_drive_schedule" class="form-control" style="max-width:20rem">
+                    <select name="cross_drive_schedule" id="cd-schedule" class="form-control cross-drive-field" style="max-width:20rem"
+                        {{if not (and .CrossDriveConfig .CrossDriveConfig.Enabled)}}disabled{{end}}>
                         <option value="daily" {{if and .CrossDriveConfig (eq .CrossDriveConfig.Schedule "daily")}}selected{{end}}>
                             Naponta (03:30)
                         </option>
@@ -175,7 +196,7 @@
             {{if .CrossDriveConfig.LastRun}}
             <div class="form-hint" style="margin-bottom:.75rem">
                 Utolsó futás: {{.CrossDriveConfig.LastRun}}
-                {{if eq .CrossDriveConfig.LastStatus "ok"}}✅ Sikeres{{else if eq .CrossDriveConfig.LastStatus "error"}}❌ Hiba: {{.CrossDriveConfig.LastError}}{{else if eq .CrossDriveConfig.LastStatus "running"}}⏳ Fut...{{end}}
+                {{if eq .CrossDriveConfig.LastStatus "ok"}}Sikeres{{else if eq .CrossDriveConfig.LastStatus "error"}}Hiba: {{.CrossDriveConfig.LastError}}{{else if eq .CrossDriveConfig.LastStatus "running"}}Fut...{{end}}
                 {{if .CrossDriveConfig.LastDuration}} ({{.CrossDriveConfig.LastDuration}}){{end}}
                 {{if .CrossDriveConfig.LastSizeHuman}} — {{.CrossDriveConfig.LastSizeHuman}}{{end}}
             </div>
@@ -194,7 +215,7 @@
         </form>
 
         <div class="form-hint" style="margin-top:.75rem;color:var(--text-muted)">
-            ⚠️ A cél meghajtó legyen más fizikai eszköz, mint az alkalmazás adattárolója.
+            A cél meghajtó legyen más fizikai eszköz, mint az alkalmazás adattárolója.
         </div>
         {{end}}
     </div>
@@ -353,6 +374,14 @@
 </div>
 
 <script>
+function toggleCrossDriveFields() {
+    var enabled = document.getElementById('cross-drive-enabled').checked;
+    var fields = document.querySelectorAll('.cross-drive-field');
+    for (var i = 0; i < fields.length; i++) {
+        fields[i].disabled = !enabled;
+    }
+}
+
 function triggerCrossDriveBackup(stackName, btn) {
     btn.disabled = true;
     btn.textContent = 'Mentés folyamatban...';
@@ -365,7 +394,7 @@ function triggerCrossDriveBackup(stackName, btn) {
             btn.textContent = 'Mentés most';
             return;
         }
-        btn.textContent = '⏳ Mentés folyamatban...';
+        btn.textContent = 'Mentés folyamatban...';
         // Poll status
         var poll = setInterval(function() {
             fetch('/api/stacks/' + stackName + '/cross-backup/status')
@@ -376,9 +405,9 @@ function triggerCrossDriveBackup(stackName, btn) {
                     clearInterval(poll);
                     var status = s.data.last_status;
                     if (status === 'ok') {
-                        btn.textContent = '✅ Mentés kész';
+                        btn.textContent = 'Mentés kész';
                     } else {
-                        btn.textContent = '❌ Hiba';
+                        btn.textContent = 'Hiba';
                         alert('Hiba: ' + (s.data.last_error || 'Ismeretlen hiba'));
                     }
                     setTimeout(function() { location.reload(); }, 2000);
@@ -439,12 +468,12 @@ function deleteStaleData(stackName, stalePath, btn) {
         if (!data.ok) {
             alert('Hiba: ' + (data.error || 'Ismeretlen hiba'));
             btn.disabled = false;
-            btn.textContent = '🗑️ Korábbi adatok törlése';
+            btn.textContent = 'Korábbi adatok törlése';
             return;
         }
-        var msg = '✅ Korábbi adatok törölve!\n\nFelszabadított hely: ' + (data.freed_human || '?');
+        var msg = 'Korábbi adatok törölve!\n\nFelszabadított hely: ' + (data.freed_human || '?');
         if (data.errors && data.errors.length > 0) {
-            msg += '\n\n⚠️ Néhány hiba történt:\n' + data.errors.join('\n');
+            msg += '\n\nNéhány hiba történt:\n' + data.errors.join('\n');
         }
         alert(msg);
         // Remove the stale data card from DOM

controller/internal/web/templates/style.css

@@ -2274,7 +2274,7 @@ a.stat-card:hover {
     border-radius: var(--radius);
     padding: 1.5rem;
     margin-top: 1rem;
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
 }
 
 .deploy-cross-drive h4 {
@@ -2330,3 +2330,95 @@ a.stat-card:hover {
     gap: .5rem;
     flex-wrap: wrap;
 }
+
+/* Info tooltip (i icon with hover popup) */
+.info-tooltip {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin-left: .35rem;
+    cursor: help;
+}
+
+.info-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 1px solid var(--text-muted);
+    color: var(--text-muted);
+    font-size: .65rem;
+    font-weight: 700;
+    font-style: italic;
+    font-family: Georgia, serif;
+    line-height: 1;
+}
+
+.info-tooltip-text {
+    display: none;
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    width: 320px;
+    padding: .75rem 1rem;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    font-size: .8rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--text-secondary);
+    z-index: 100;
+    white-space: normal;
+}
+
+.info-tooltip:hover .info-tooltip-text,
+.info-tooltip:focus .info-tooltip-text,
+.info-tooltip:focus-within .info-tooltip-text {
+    display: block;
+}
+
+.info-tooltip-text::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: var(--border-color);
+}
+
+/* Nightly backup status indicator (non-interactive) */
+.cross-drive-nightly-status {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+}
+
+.nightly-status-indicator {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.nightly-enabled {
+    background: var(--green);
+    box-shadow: 0 0 4px rgba(35, 134, 54, 0.4);
+}
+
+.nightly-disabled {
+    background: var(--text-muted);
+    opacity: 0.5;
+}
+
+/* meta-badge-fail */
+.meta-badge-fail {
+    background: var(--red-bg);
+    color: var(--red);
+}