From 1722e70e7f8fbedee25f26224b66e4283ffb8175 Mon Sep 17 00:00:00 2001
From: Ulas <ulas@kalayci.cloud>
Date: Sun, 5 Apr 2026 13:23:16 +0200
Subject: [PATCH] fix(ux): microinteraction fixes - swipe hint, locale loading,
 haptics, weather toast, FAB backdrop

- tasks.js: add maybeShowSwipeHint (long loop, max 3x) - matches shopping.js pattern
- tasks.js: vibrate(15) on task status toggle
- oikos-locale-picker: show disabled/loading state for both reload and setLocale paths
- dashboard: show success toast after weather refresh (all 4 locales)
- dashboard: add semi-transparent FAB backdrop to signal open mode
---
 public/components/oikos-locale-picker.js |  4 ++--
 public/locales/de.json                   |  1 +
 public/locales/en.json                   |  1 +
 public/locales/it.json                   |  1 +
 public/locales/sv.json                   |  1 +
 public/pages/dashboard.js                |  9 ++++++--
 public/pages/tasks.js                    | 26 ++++++++++++++++++++++++
 public/styles/dashboard.css              | 15 ++++++++++++++
 8 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/public/components/oikos-locale-picker.js b/public/components/oikos-locale-picker.js
index 394c07b..fe8fd8c 100644
--- a/public/components/oikos-locale-picker.js
+++ b/public/components/oikos-locale-picker.js
@@ -54,9 +54,9 @@ class OikosLocalePicker extends HTMLElement {
     }
 
     select.addEventListener('change', () => {
+      select.disabled = true;
+      select.style.opacity = '0.5';
       if (select.value === 'system') {
-        select.disabled = true;
-        select.style.opacity = '0.5';
         localStorage.removeItem('oikos-locale');
         // Kurze Verzögerung damit der Browser den disabled-Zustand rendert
         setTimeout(() => location.reload(), 60);
diff --git a/public/locales/de.json b/public/locales/de.json
index 4d895c0..b3b2f8c 100644
--- a/public/locales/de.json
+++ b/public/locales/de.json
@@ -65,6 +65,7 @@
     "loadError": "Dashboard konnte nicht vollständig geladen werden.",
     "weatherRefresh": "Wetter aktualisieren",
     "weatherRefreshTitle": "Aktualisieren",
+    "weatherUpdated": "Wetter aktualisiert",
     "weatherFeelsLike": "Gefühlt {{temp}}° · {{humidity}}% · Wind {{wind}} km/h",
     "fabTaskLabel": "Aufgabe hinzufügen",
     "fabCalendarLabel": "Termin hinzufügen",
diff --git a/public/locales/en.json b/public/locales/en.json
index 71891f8..f441e44 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -65,6 +65,7 @@
     "loadError": "Dashboard could not be fully loaded.",
     "weatherRefresh": "Refresh weather",
     "weatherRefreshTitle": "Refresh",
+    "weatherUpdated": "Weather updated",
     "weatherFeelsLike": "Feels like {{temp}}° · {{humidity}}% · Wind {{wind}} km/h",
     "fabTaskLabel": "Add task",
     "fabCalendarLabel": "Add event",
diff --git a/public/locales/it.json b/public/locales/it.json
index fdff221..70818a2 100644
--- a/public/locales/it.json
+++ b/public/locales/it.json
@@ -65,6 +65,7 @@
     "loadError": "Impossibile caricare completamente la dashboard.",
     "weatherRefresh": "Aggiorna meteo",
     "weatherRefreshTitle": "Aggiorna",
+    "weatherUpdated": "Meteo aggiornato",
     "weatherFeelsLike": "Percepiti {{temp}}° · {{humidity}}% · Vento {{wind}} km/h",
     "fabTaskLabel": "Aggiungi compito",
     "fabCalendarLabel": "Aggiungi evento",
diff --git a/public/locales/sv.json b/public/locales/sv.json
index 3b364c2..a7c43a5 100644
--- a/public/locales/sv.json
+++ b/public/locales/sv.json
@@ -65,6 +65,7 @@
     "loadError": "Instrumentpanelen kunde inte laddas helt.",
     "weatherRefresh": "Uppdatera vädret",
     "weatherRefreshTitle": "Uppdatera",
+    "weatherUpdated": "Väder uppdaterat",
     "weatherFeelsLike": "Känns som {{temp}}° · {{humidity}}% · Vind {{wind}} km/h",
     "fabTaskLabel": "Lägg till uppgift",
     "fabCalendarLabel": "Lägg till händelse",
diff --git a/public/pages/dashboard.js b/public/pages/dashboard.js
index 90ce761..3d4f195 100644
--- a/public/pages/dashboard.js
+++ b/public/pages/dashboard.js
@@ -390,6 +390,7 @@ function renderFab() {
   `).join('');
 
   return `
+    <div class="fab-backdrop" id="fab-backdrop"></div>
     <div class="fab-container" id="fab-container">
       <button class="fab-main" id="fab-main" aria-label="${t('nav.quickActions')}" aria-expanded="false">
         <i data-lucide="plus" aria-hidden="true"></i>
@@ -402,8 +403,9 @@ function renderFab() {
 }
 
 function initFab(container, signal) {
-  const fabMain    = container.querySelector('#fab-main');
-  const fabActions = container.querySelector('#fab-actions');
+  const fabMain     = container.querySelector('#fab-main');
+  const fabActions  = container.querySelector('#fab-actions');
+  const fabBackdrop = container.querySelector('#fab-backdrop');
   if (!fabMain) return;
 
   let open = false;
@@ -414,6 +416,7 @@ function initFab(container, signal) {
     fabMain.setAttribute('aria-expanded', String(open));
     fabActions.classList.toggle('fab-actions--visible', open);
     fabActions.setAttribute('aria-hidden', String(!open));
+    fabBackdrop?.classList.toggle('fab-backdrop--visible', open);
     fabActions.querySelectorAll('[role="button"]').forEach((el) => {
       el.tabIndex = open ? 0 : -1;
     });
@@ -538,6 +541,7 @@ export async function render(container, { user }) {
           const newWidget = container.querySelector('#weather-widget');
           if (newWidget && window.lucide) window.lucide.createIcons({ el: newWidget });
           wireWeatherRefresh(container);
+          window.oikos?.showToast(t('dashboard.weatherUpdated'), 'success', 1500);
         }
       } catch { /* silently ignore */ }
     };
@@ -564,6 +568,7 @@ function wireWeatherRefresh(container) {
         const newWidget = container.querySelector('#weather-widget');
         if (newWidget && window.lucide) window.lucide.createIcons({ el: newWidget });
         wireWeatherRefresh(container);
+        window.oikos?.showToast(t('dashboard.weatherUpdated'), 'success', 1500);
       }
     } catch { /* silently ignore */ }
   };
diff --git a/public/pages/tasks.js b/public/pages/tasks.js
index c799f3f..7eb44c5 100644
--- a/public/pages/tasks.js
+++ b/public/pages/tasks.js
@@ -656,6 +656,7 @@ function renderTaskList(container) {
   stagger(listEl.querySelectorAll('.swipe-row, .kanban-card'));
   updateOverdueBadge();
   wireSwipeGestures(container);
+  maybeShowSwipeHint(container);
 }
 
 function renderFilters(container) {
@@ -728,6 +729,9 @@ const SWIPE_THRESHOLD    = 80;   // px - Mindestweg für Aktion
 const SWIPE_MAX_VERT     = 12;   // px - vertikaler Bewegungs-Toleranzbereich (darunter: kein Scroll-Abbruch)
 const SWIPE_LOCK_VERT    = 30;   // px - ab diesem Weg gilt es als Scroll (Swipe abgebrochen)
 
+const SWIPE_HINT_KEY = 'oikos:swipeHintSeen';
+const SWIPE_HINT_MAX = 3;
+
 function wireSwipeGestures(container) {
   const listEl = container.querySelector('#task-list');
   if (!listEl) return;
@@ -850,6 +854,27 @@ function wireSwipeGestures(container) {
   });
 }
 
+// --------------------------------------------------------
+// Swipe-Affordance Hint (Long Loop)
+// Zeigt den Nudge-Hinweis maximal 3x (gespeichert in localStorage).
+// --------------------------------------------------------
+
+function maybeShowSwipeHint(container) {
+  if (window.innerWidth >= 1024) return; // Desktop: Swipe nicht relevant
+  const count = parseInt(localStorage.getItem(SWIPE_HINT_KEY) ?? '0', 10);
+  if (count >= SWIPE_HINT_MAX) return;
+
+  const firstRow = container.querySelector('.swipe-row');
+  if (!firstRow) return;
+
+  firstRow.classList.add('swipe-row--hint');
+  firstRow.addEventListener('animationend', () => {
+    firstRow.classList.remove('swipe-row--hint');
+  }, { once: true });
+
+  localStorage.setItem(SWIPE_HINT_KEY, String(count + 1));
+}
+
 // --------------------------------------------------------
 // Event-Verdrahtung
 // --------------------------------------------------------
@@ -921,6 +946,7 @@ function wireTaskList(container) {
 
     if (action === 'toggle-status') {
       const status = target.dataset.status;
+      vibrate(15);
       target.classList.toggle('task-status-btn--done', status !== 'done');
       target.closest('.task-card')?.classList.toggle('task-card--done', status !== 'done');
       try {
diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css
index 7f55381..4b1e583 100644
--- a/public/styles/dashboard.css
+++ b/public/styles/dashboard.css
@@ -936,6 +936,21 @@
   background-color: var(--neutral-600);
 }
 
+.fab-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.25);
+  z-index: calc(var(--z-nav) - 10);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-base);
+}
+
+.fab-backdrop--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 .fab-actions {
   display: flex;
   flex-direction: column;