feat: migrate alpine ui into app shell

2026-03-30 00:15:02 +03:00
parent f33aa29c88
commit 7070231c3e
84 changed files with 12530 additions and 92 deletions
@@ -0,0 +1,73 @@
+// Populate profile from stored user
+try {
+  var u = JSON.parse(localStorage.getItem('crank_user'));
+  if (u) {
+    document.getElementById('profile-avatar').textContent = u.initials || 'AT';
+    document.getElementById('profile-display-name').textContent = u.name || 'Operator';
+    document.getElementById('profile-email').textContent = u.email || '';
+    var fi = document.getElementById('field-firstname');
+    var fe = document.getElementById('field-email');
+    if (fi && u.name) fi.value = u.name;
+    if (fe && u.email) fe.value = u.email;
+  }
+} catch (e) {}
+
+// Inject language switcher into section-profile card body, before Save button
+(function() {
+  var profileSection = document.getElementById('section-profile');
+  if (!profileSection) return;
+  var cardBody = profileSection.querySelector('.section-card-body');
+  if (!cardBody) return;
+  fetch('html/fragments/lang-switcher.html')
+    .then(function(r) { return r.text(); })
+    .then(function(html) {
+      var saveRow = cardBody.querySelector('div[style*="justify-content:flex-end"]');
+      if (saveRow) {
+        saveRow.insertAdjacentHTML('beforebegin', html);
+      } else {
+        cardBody.insertAdjacentHTML('beforeend', html);
+      }
+      if (typeof applyLang === 'function') applyLang();
+    });
+})();
+
+// Settings sidebar navigation
+var navItems = document.querySelectorAll('.settings-nav-item[data-section]');
+navItems.forEach(function(btn) {
+  btn.addEventListener('click', function() {
+    navItems.forEach(function(b) { b.classList.remove('active'); });
+    this.classList.add('active');
+    var target = document.getElementById('section-' + this.dataset.section);
+    if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  });
+});
+
+// Hash navigation (e.g. settings.html#security)
+if (window.location.hash) {
+  var hash = window.location.hash.slice(1);
+  var btn = document.querySelector('.settings-nav-item[data-section="' + hash + '"]');
+  if (btn) setTimeout(function() { btn.click(); }, 100);
+}
+// Default: scroll to profile
+else {
+  var profileBtn = document.querySelector('.settings-nav-item[data-section="profile"]');
+  if (profileBtn) profileBtn.classList.add('active');
+}
+
+// IntersectionObserver scroll-spy: highlight active sidebar item as user scrolls
+var observer = new IntersectionObserver(function(entries) {
+  entries.forEach(function(entry) {
+    if (entry.isIntersecting) {
+      var sectionId = entry.target.id; // e.g. "section-profile"
+      var name = sectionId.replace('section-', ''); // e.g. "profile"
+      document.querySelectorAll('.settings-nav-item[data-section]').forEach(function(b) {
+        b.classList.toggle('active', b.dataset.section === name);
+      });
+    }
+  });
+}, { threshold: 0.3 });
+
+// Observe all visible sections (not hidden ones)
+document.querySelectorAll('[id^="section-"]').forEach(function(el) {
+  if (el.style.display !== 'none') observer.observe(el);
+});