feat: FASE 2 - Client Base (layout, login, navbar, tema, i18n)

Implementazione completa del frontend Flask: - Layout base.html con TailwindCSS CDN, dark/light theme, flash messages - Navbar responsive role-based (Maker, MeasurementTec, Metrologist, Admin) - Login page professionale con form + API integration - Profilo utente: nome, lingua, tema, badge ruoli - Sistema tema dark/light: CSS variables + Alpine.js store + localStorage - i18n completo IT/EN: Flask-Babel (.po) + alpinejs-i18n (JSON) - API Client riscritto: error handling normalizzato, no crash su 4xx/5xx - CSRF protection con Flask-WTF su tutti i form - Logo aziendale dinamico da system_settings - Asset SVG: tmflow-logo.svg + tmflow-icon.svg (favicon) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-07 01:10:13 +01:00
parent d6508e0ae8
commit edd4580a5a
17 changed files with 2230 additions and 52 deletions
@@ -0,0 +1,126 @@
+/**
+ * TieMeasureFlow - Alpine.js Theme Initialization
+ *
+ * This script MUST load before Alpine.js (which uses defer).
+ * It reads the saved theme from localStorage or the system preference,
+ * applies the 'dark' class to <html> immediately (no flash), and
+ * registers an Alpine.store('theme') for reactive toggling.
+ */
+
+(function () {
+  'use strict';
+
+  // ---- Immediate theme application (before paint) ----
+
+  var STORAGE_KEY = 'tmf-theme';
+
+  /**
+   * Resolve the initial dark-mode state.
+   * Priority: localStorage > system preference > light (default).
+   */
+  function getInitialDark() {
+    var stored = null;
+    try {
+      stored = localStorage.getItem(STORAGE_KEY);
+    } catch (_) {
+      // localStorage may be unavailable (private browsing, etc.)
+    }
+
+    if (stored === 'dark') return true;
+    if (stored === 'light') return false;
+
+    // Fall back to OS preference
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return true;
+    }
+
+    return false;
+  }
+
+  var isDark = getInitialDark();
+
+  // Apply immediately to prevent flash of wrong theme
+  if (isDark) {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+
+  // ---- Enable smooth transitions after first paint ----
+
+  // Use requestAnimationFrame to wait one frame, then enable transitions
+  // so the initial theme application does not animate.
+  if (typeof requestAnimationFrame === 'function') {
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        document.documentElement.classList.add('theme-transitions');
+      });
+    });
+  }
+
+  // ---- Alpine.js Store Registration ----
+
+  // Alpine.store is registered via the alpine:init event, which fires
+  // when Alpine begins initialization but before it processes x-data.
+
+  document.addEventListener('alpine:init', function () {
+    Alpine.store('theme', {
+      dark: isDark,
+
+      toggle: function () {
+        this.dark = !this.dark;
+        this._apply();
+      },
+
+      set: function (dark) {
+        this.dark = dark;
+        this._apply();
+      },
+
+      _apply: function () {
+        if (this.dark) {
+          document.documentElement.classList.add('dark');
+        } else {
+          document.documentElement.classList.remove('dark');
+        }
+        try {
+          localStorage.setItem(STORAGE_KEY, this.dark ? 'dark' : 'light');
+        } catch (_) {
+          // Silently ignore storage errors
+        }
+      }
+    });
+  });
+
+  // ---- Listen for system preference changes ----
+
+  if (window.matchMedia) {
+    try {
+      var mq = window.matchMedia('(prefers-color-scheme: dark)');
+      mq.addEventListener('change', function (e) {
+        // Only auto-switch if the user hasn't manually set a preference
+        var stored = null;
+        try {
+          stored = localStorage.getItem(STORAGE_KEY);
+        } catch (_) {}
+
+        if (!stored) {
+          var newDark = e.matches;
+          if (typeof Alpine !== 'undefined' && Alpine.store('theme')) {
+            Alpine.store('theme').set(newDark);
+          } else {
+            // Alpine not loaded yet, apply directly
+            if (newDark) {
+              document.documentElement.classList.add('dark');
+            } else {
+              document.documentElement.classList.remove('dark');
+            }
+          }
+        }
+      });
+    } catch (_) {
+      // Older browsers may not support addEventListener on matchMedia
+    }
+  }
+
+})();