diff --git a/CLAUDE.md b/CLAUDE.md index 44cbe58..4ae10e1 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -101,8 +101,9 @@ git add -A && git commit -m "" && git push ### Step 2: Build + push the container image on the build server -The build server (192.168.0.180) has the build toolchain. The version tag should be incremented -from the current running version. +The build server (192.168.0.180) has the build toolchain. The version tag should be incremented from the current running version. + +!! Important: use "kisfenyo" user for SSH, as written below First, check the current running version: ```bash diff --git a/TASK.md b/TASK.md index 3b70646..22cb746 100644 --- a/TASK.md +++ b/TASK.md @@ -1,392 +1,204 @@ -# TASK — v0.11.9 UI Polish Fixes +# TASK — Simplify Backup Page "Alkalmazás adatok" Section -## Context +## Goal -These are UI-only fixes for the deploy/settings page backup section introduced in v0.11.8. No backend changes needed. All changes are in `deploy.html` and `style.css`. +Replace the current complex app data section on the backup page (checkboxes, paths, docker volumes, save button) with a simple, read-only status list of all deployed apps. -**Important design principle:** Use minimal emojis in the UI. The project prefers a clean, professional look. Replace emoji indicators with text or CSS-styled elements instead. +## Current state (v0.11.9) -## Files to modify +The backup page shows an "Alkalmazás adatok" section with: +- Checkboxes per app to toggle backup on/off +- Full HDD path listings with sizes +- Docker volume names with "(nem mentett)" labels +- DB dump status per app +- A "Mentés" (save) button -- `internal/web/templates/deploy.html` -- `internal/web/templates/style.css` -- `internal/web/templates/backups.html` (emoji cleanup in cross-drive summary section) +**Problems:** +- Too much detail for the customer — confusing +- Docker volume names shown as "nem mentett" can mislead users into thinking DB data isn't backed up (it is, via DB dump) +- Backup enable/disable should be configured on the app's own settings page, not here +- The section should be informational only on this page ---- +## Desired state -## Fix 1: Spacing between cards and "Automatikusan generált értékek" +A clean, read-only list of ALL deployed apps (including those without user data) showing a simple status per app: -**Problem:** No clear visual separation between the last card above the deploy form (`deploy-cross-drive` or `deploy-stale-data`) and the "Automatikusan generált értékek" section inside `.deploy-form`. - -**Root cause:** `.deploy-cross-drive` has `margin-bottom: 1rem` which doesn't provide enough separation before the next card. When stale data card exists without cross-drive, it's also tight. - -**Fix in `style.css`:** - -```css -/* Change margin-bottom from 1rem to 1.5rem */ -.deploy-cross-drive { - /* ... existing ... */ - margin-bottom: 1.5rem; /* was 1rem */ -} +``` +┌────────────────────────────────────────────────────────┐ +│ Alkalmazás adatok │ +│ Az alkalmazások felhasználói adatainak mentési │ +│ állapota. Beállítás az alkalmazás oldalán. │ +│ │ +│ Immich Külső tárhely (hdd_1) ● Aktív │ +│ Paperless-ngx Külső tárhely (hdd_p.) ○ Inaktív │ +│ Gokapi — N/A │ +│ Mealie — N/A │ +│ RoMM Külső tárhely (hdd_p.) ○ Inaktív │ +└────────────────────────────────────────────────────────┘ ``` -No change needed for `.deploy-stale-data` — it already has `margin-bottom: 1.5rem`. But verify the margin is actually applied (check if another element is overriding it or if the stale data card is inside a container that collapses margins). +Each app name links to its deploy/settings page where backup can be configured. ---- +**Status indicators (no emoji, just styled text/dots):** +- `● Aktív` — green dot + text — backup enabled for this app (has HDD data and toggle is on) +- `○ Inaktív` — gray dot + text — has HDD data but backup not enabled +- `— N/A` — muted dash + text — no user data folder, backup not applicable (this is fine, not a warning) -## Fix 2: Rename restic method + add info tooltip on "Módszer" +**Optional:** For apps with "Aktív" status, show the data size in muted text next to the storage label (e.g., `47.9 MB`). -**Problem:** "Verziózott mentés (restic)" doesn't highlight the most important differentiator (encryption). Users should also understand the tradeoffs before picking. +## Changes -**Fix in `deploy.html` — method dropdown (around line 16934-16942):** +### 1. `backups.html` — Replace Section 4 + +Replace everything from `` through the closing `{{end}}` (lines 16199-16247) with: -Replace: ```html -
- Módszer - -
-``` - -With: -```html -
- - Módszer - - i - - Egyszerű másolat (rsync): 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. -

- Titkosított mentés (restic): 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. - - - - -
-``` - -**Add to `style.css`:** - -```css -/* 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; -} - -/* Show on hover or focus (for keyboard) */ -.info-tooltip:hover .info-tooltip-text, -.info-tooltip:focus .info-tooltip-text, -.info-tooltip:focus-within .info-tooltip-text { - display: block; -} - -/* Arrow pointing down from tooltip */ -.info-tooltip-text::after { - content: ''; - position: absolute; - top: 100%; - left: 50%; - transform: translateX(-50%); - border: 6px solid transparent; - border-top-color: var(--border-color); -} -``` - ---- - -## Fix 3: Cursor on "Napi mentésbe foglalás" label - -**Problem:** The `