crank/apps/ui/js/nav.js

(function () {
  var STORAGE_KEY = 'crank_user';
  function tKey(key) {
    return typeof t === 'function' ? t(key) : key;
  }

  function roleLabel(role) {
    var normalized = String(role || 'viewer').toLowerCase();
    if (normalized === 'operator' || normalized === 'developer') return tKey('workspace_setup.role.operator');
    if (normalized === 'owner') return tKey('workspace_setup.role.owner');
    if (normalized === 'admin') return tKey('workspace_setup.role.admin');
    if (normalized === 'viewer') return tKey('workspace_setup.role.viewer');
    return normalized.replace(/^\w/, function (character) {
      return character.toUpperCase();
    });
  }

  function currentUser() {
    try {
      return JSON.parse(localStorage.getItem(STORAGE_KEY));
    } catch (_error) {
      return null;
    }
  }

  function fillUserInfo() {
    var user = currentUser();
    if (!user) {
      return;
    }

    document.querySelectorAll('.nav-avatar').forEach(function (element) {
      element.textContent = user.initials || 'CR';
    });

    var nameElement = document.querySelector('.user-dropdown-name');
    var roleElement = document.querySelector('.user-dropdown-role');

    if (nameElement) {
      nameElement.textContent = user.name || tKey('nav.user_fallback');
    }

    if (roleElement) {
      roleElement.textContent = roleLabel(user.role) + ' · ' + (user.workspace || tKey('nav.workspace_fallback'));
    }
  }

  function initNav() {
    fillUserInfo();

    var dropdown = document.querySelector('.user-dropdown');
    var avatar = document.querySelector('.nav-avatar');
    var hamburger = document.querySelector('.nav-hamburger');
    var mobileNav = document.querySelector('.mobile-nav');

    if (dropdown) {
      dropdown.style.display = 'none';
    }
    if (mobileNav) {
      mobileNav.style.display = 'none';
    }

    if (avatar && dropdown) {
      avatar.addEventListener('click', function (event) {
        event.stopPropagation();
        dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
      });
    }

    if (hamburger && mobileNav) {
      hamburger.addEventListener('click', function (event) {
        event.stopPropagation();
        mobileNav.style.display = mobileNav.style.display === 'none' ? 'block' : 'none';
        hamburger.classList.toggle('open', mobileNav.style.display !== 'none');
      });
    }

    document.addEventListener('click', function (event) {
      if (dropdown && !event.target.closest('.user-menu')) {
        dropdown.style.display = 'none';
      }
      if (mobileNav && !event.target.closest('.navbar') && !event.target.closest('.mobile-nav')) {
        mobileNav.style.display = 'none';
        if (hamburger) {
          hamburger.classList.remove('open');
        }
      }
    });

    document.querySelectorAll('[data-action="logout"]').forEach(function (button) {
      button.addEventListener('click', function () {
        window.CrankAuth.logout();
      });
    });

    document.querySelectorAll('[data-action="profile"]').forEach(function (button) {
      button.addEventListener('click', function () {
        if (dropdown) {
          dropdown.style.display = 'none';
        }
        window.location.href = ((window.CrankRoutes && window.CrankRoutes.settings) || '/settings') + '#profile';
      });
    });

    document.querySelectorAll('[data-action="settings-link"]').forEach(function (button) {
      button.addEventListener('click', function () {
        if (dropdown) {
          dropdown.style.display = 'none';
        }
        window.location.href = (window.CrankRoutes && window.CrankRoutes.settings) || '/settings';
      });
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initNav);
  } else {
    initNav();
  }
})();