crank/apps/ui/js/settings.js

function populateProfile() {
  try {
    var user = JSON.parse(localStorage.getItem('crank_user'));
    if (!user) {
      return;
    }

    document.getElementById('profile-avatar').textContent = user.initials || 'AT';
    document.getElementById('profile-display-name').textContent = user.name || 'Operator';
    document.getElementById('profile-email').textContent = user.email || '';

    var firstName = document.getElementById('field-firstname');
    var email = document.getElementById('field-email');
    if (firstName && user.name) {
      firstName.value = user.name;
    }
    if (email && user.email) {
      email.value = user.email;
    }
  } catch (_error) {
  }
}

function injectLanguageSwitcher() {
  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(response) { return response.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();
      }
    });
}

function bindSectionNavigation() {
  var navItems = document.querySelectorAll('.settings-nav-item[data-section]');
  navItems.forEach(function (button) {
    button.addEventListener('click', function () {
      navItems.forEach(function (item) { item.classList.remove('active'); });
      this.classList.add('active');
      var target = document.getElementById('section-' + this.dataset.section);
      if (target) {
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });

  var initialSection = window.location.hash ? window.location.hash.slice(1) : 'profile';
  var initialButton = document.querySelector('.settings-nav-item[data-section="' + initialSection + '"]')
    || document.querySelector('.settings-nav-item[data-section="profile"]');
  if (initialButton) {
    setTimeout(function () { initialButton.click(); }, 50);
  }

  var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (!entry.isIntersecting) {
        return;
      }
      var section = entry.target.id.replace('section-', '');
      document.querySelectorAll('.settings-nav-item[data-section]').forEach(function (button) {
        button.classList.toggle('active', button.dataset.section === section);
      });
    });
  }, { threshold: 0.3 });

  document.querySelectorAll('[id^="section-"]').forEach(function (section) {
    if (section.style.display !== 'none') {
      observer.observe(section);
    }
  });
}

async function loadWorkspaceSettings() {
  if (!window.CrankApi || !window.whenWorkspacesReady) {
    return;
  }

  await window.whenWorkspacesReady();
  var workspace = window.getCurrentWorkspace ? window.getCurrentWorkspace() : null;
  if (!workspace) {
    return;
  }

  try {
    var record = await window.CrankApi.getWorkspace(workspace.id);
    var item = record.workspace;
    var settings = item.settings || {};

    document.getElementById('settings-ws-slug').value = item.slug || '';
    document.getElementById('settings-ws-display-name').value = item.display_name || '';
    document.getElementById('settings-ws-description').value = settings.description || '';
    document.getElementById('settings-ws-timezone').value = settings.timezone || 'UTC';
    document.getElementById('settings-ws-protocol').value = settings.default_protocol || 'rest';

    document.querySelectorAll('#section-workspace .lang-btn').forEach(function (button) {
      button.classList.toggle('active', button.dataset.lang === (settings.language || (localStorage.getItem('crank_lang') || 'en')));
    });

    var saveButton = document.getElementById('settings-ws-save-btn');
    if (saveButton.dataset.bound === 'true') {
      return;
    }
    saveButton.dataset.bound = 'true';

    saveButton.addEventListener('click', async function () {
      var saveButton = this;
      var original = saveButton.textContent;
      saveButton.disabled = true;
      saveButton.textContent = 'Saving…';

      try {
        await window.CrankApi.updateWorkspace(item.id, {
          slug: document.getElementById('settings-ws-slug').value.trim(),
          display_name: document.getElementById('settings-ws-display-name').value.trim(),
          settings: {
            description: document.getElementById('settings-ws-description').value.trim(),
            timezone: document.getElementById('settings-ws-timezone').value,
            default_protocol: document.getElementById('settings-ws-protocol').value,
            language: localStorage.getItem('crank_lang') || 'en',
            color: (workspace.settings && workspace.settings.color) || '#0d9488',
          },
        });

        if (window.refreshWorkspaces) {
          var workspaces = await window.refreshWorkspaces();
          var updated = workspaces.find(function (entry) { return entry.id === item.id; });
          if (updated && window.setCurrentWorkspace) {
            window.setCurrentWorkspace(updated);
          }
        }

        saveButton.textContent = 'Saved ✓';
      } catch (error) {
        alert(error.message || 'Failed to save workspace settings');
        saveButton.textContent = original;
      } finally {
        setTimeout(function () {
          saveButton.disabled = false;
          saveButton.textContent = original;
        }, 1200);
      }
    });
  } catch (_error) {
  }
}

document.addEventListener('DOMContentLoaded', function () {
  populateProfile();
  injectLanguageSwitcher();
  bindSectionNavigation();
  loadWorkspaceSettings();
});