From e247fdf54c48681906622bc357e59eecb293b219 Mon Sep 17 00:00:00 2001 From: kisfenyo Date: Wed, 18 Feb 2026 16:04:12 +0100 Subject: [PATCH] v0.13.1 UI Polish Fixes (Round 2) --- TASK.md | 428 +++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 268 insertions(+), 160 deletions(-) diff --git a/TASK.md b/TASK.md index 681ba79..608d733 100644 --- a/TASK.md +++ b/TASK.md @@ -1,211 +1,319 @@ -# TASK.md — v0.13.0 UI Polish Fixes +# TASK.md — v0.13.1 UI Polish Fixes (Round 2) -**Version:** v0.13.0 -**Type:** UI polish — 8 independent fixes -**Files likely affected:** `dashboard.html`, `backups.html`, `deploy.html`, `monitoring.html`, `style.css`, `handlers.go`, `alerts.go` +**Version:** v0.13.1 +**Type:** UI polish — 4 fixes +**Files likely affected:** `deploy.html`, `backups.html`, `dashboard.html`, `monitoring.html`, `layout.html`, `style.css`, `handlers.go`, `alerts.go`, `funcmap.go` Read `CLAUDE.md`, `controller/README.md`, and `CONTEXT.md` before starting. --- -## Fix 1: Dashboard backup card missing border +## Fix 1: Backup section on deploy page needs card/box styling -**Problem:** The "Biztonsági mentés" card on the Vezérlőpult page has no visible border/box, unlike all other sections on the page (stats-grid, system-info-card, stack-list). It looks out of place. +**Problem:** The "Biztonsági mentés" section on app deploy/settings pages (e.g., `/stacks/immich/deploy`) has no visible border or card styling, unlike the "Adattárolás" section above it and other card sections on the page. It looks flat and out of place. -**Solution:** The `.backup-status-card` in `dashboard.html` needs the same card styling as `.system-info-card` — a border, background, and border-radius consistent with the dark card style used throughout the UI. +**Where:** `deploy.html` line ~96: `
` and the `.deploy-cross-drive` CSS class in `style.css`. -**Where:** -- `style.css`: Check if `.backup-status-card` already has card-like styling. If not, add `border: 1px solid var(--border)`, `background: var(--card-bg)`, `border-radius: 12px`, `padding` — match whatever `.system-info-card` or `.monitor-card` uses. +**Solution:** Add card-like styling to `.deploy-cross-drive` in `style.css`. Look at how `.deploy-storage-info` (the "Adattárolás" card above it on the same page) is styled and match it: +- `border: 1px solid var(--border)` +- `background: var(--card-bg)` +- `border-radius: 12px` +- `padding: 1.5rem` + +If `.deploy-cross-drive` already exists in CSS, add the missing border/background properties. If it doesn't exist, create it with the above properties. --- -## Fix 2: Show auto-generated env values on deploy page +## Fix 2: Clean up auto-generated env values section on deploy page -**Problem:** When an app is already deployed, auto-generated values (Domain, DB password, etc.) only show a label + "✓ Automatikusan generálva" green badge. The actual values are hidden. Users need to see what was generated (e.g., to configure DNS, or to log into the app's DB). +**Problem:** The "Automatikusan generált értékek" section on the deploy page is cluttered. Each field currently shows: input + "Megjelenítés" button (for passwords) + "Másolás" button + badge. Too many elements stacked together. -**Solution:** Show the actual values in read-only fields. Passwords should be masked by default with a show/hide toggle (eye icon button), like the restic password on the backup page. Non-secret values (like Domain) should be shown in plain text. +**Current code location:** `deploy.html` lines ~254-281, inside the `{{if .AutoFields}}` block. -**Where:** -- `deploy.html`: In the "Automatikusan generált értékek" section, replace the simple badge-only display with actual field values. For each auto field: - - If the field type is `password` or the key contains `PASSWORD`/`SECRET`/`KEY`: render a read-only `` with a toggle-visibility button (eye icon). Use the same pattern as the restic password field in `backups.html` ("Megjelenítés" / "Elrejtés" toggle button). - - Otherwise (domain, non-secret values): render a read-only `` showing the value, plus a "Másolás" (copy) button. - - Keep the "✓ Automatikusan generálva" badge too, but next to the field, not replacing it. -- `handlers.go` (`deployHandler`): The auto field values need to be passed to the template. Currently `AutoFields` comes from `meta.AutoGeneratedFields()`. Check if the values are already populated from `app.yaml` for deployed apps. If not, read them from the stack's `.env` file or `app.yaml` `env_values` map. The values must be available in the template data. -- `style.css`: Add styling for the auto-field display (read-only input + button group), keeping it consistent with the rest of the deploy form. +**Current structure per field:** +```html +
+ + {{if and $isDeployed $val}} + {{if eq .Type "secret"}} +
+ + + +
+ {{else}} +
+ + +
+ {{end}} + {{end}} + ✓ Automatikusan generálva +
+``` -**Important:** Only show values for already-deployed apps. For new deployments (not yet deployed), keep the current behavior (just show the badge, since values haven't been generated yet). +**Changes:** + +1. **Remove ALL "Másolás" buttons** — users can select+copy natively, dedicated button adds clutter +2. **Keep** the "Megjelenítés"/"Elrejtés" toggle button for secret/password fields (essential) +3. **Move the badge inline with the label** — instead of on a separate line below the input, put it next to the label text + +**New structure per field:** +```html +
+ + {{if and $isDeployed $val}} + {{if eq .Type "secret"}} +
+ + +
+ {{else}} + + {{end}} + {{end}} +
+``` + +4. **Remove the `copyAutoField` JS function** — search for `function copyAutoField` in deploy.html's `