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,64 @@
+/* ═══════════════════════════════════════════════════
+   Crank — workspace switcher
+   ═══════════════════════════════════════════════════ */
+
+var WS_LIST = [
+  { slug: 'acme-workspace', name: 'acme-workspace', role: 'Owner',     letter: 'A', color: '#0d9488' },
+  { slug: 'startup-demo',   name: 'startup-demo',   role: 'Developer', letter: 'S', color: '#7c3aed' },
+  { slug: 'personal',       name: 'personal',        role: 'Owner',     letter: 'P', color: '#0891b2' },
+];
+
+function getCurrentWs() {
+  var slug = localStorage.getItem('crank_workspace') || 'acme-workspace';
+  return WS_LIST.find(function(w) { return w.slug === slug; }) || WS_LIST[0];
+}
+
+function initWorkspaceSwitcher() {
+  var ws = getCurrentWs();
+  var nameEl = document.getElementById('ws-current-name');
+  var dotEl  = document.getElementById('ws-dot');
+  if (nameEl) nameEl.textContent = ws.name;
+  if (dotEl)  { dotEl.textContent = ws.letter; dotEl.style.background = ws.color; }
+
+  var list = document.getElementById('ws-dropdown-list');
+  if (!list) return;
+
+  list.innerHTML = WS_LIST.map(function(w) {
+    var active = w.slug === ws.slug;
+    return '<div class="ws-dropdown-item' + (active ? ' active' : '') + '" onclick="switchWorkspace(\'' + w.slug + '\')">' +
+      '<div class="ws-item-dot" style="background:' + w.color + '">' + w.letter + '</div>' +
+      '<div class="ws-item-info">' +
+        '<div class="ws-item-name">' + w.name + '</div>' +
+        '<div class="ws-item-role">' + w.role + '</div>' +
+      '</div>' +
+      (active ? '<svg width="12" height="12"><use href="' + (window.APP_BASE||'') + 'icons/general/check.svg#icon"/></svg>' : '') +
+    '</div>';
+  }).join('') +
+  '<div class="ws-dropdown-divider"></div>' +
+  '<a class="ws-dropdown-mgmt-link" href="' + (window.APP_BASE||'') + 'html/workspace-setup.html" onclick="var dd=document.getElementById(\'ws-dropdown\');if(dd)dd.style.display=\'none\'">' +
+    '<svg width="14" height="14"><use href="' + (window.APP_BASE||'') + 'icons/general/settings.svg#icon"/></svg>' +
+    'Workspace settings' +
+  '</a>';
+}
+
+function toggleWsSwitcher(e) {
+  e.stopPropagation();
+  var dd = document.getElementById('ws-dropdown');
+  if (dd) dd.style.display = dd.style.display === 'none' ? '' : 'none';
+}
+
+function switchWorkspace(slug) {
+  localStorage.setItem('crank_workspace', slug);
+  var dd = document.getElementById('ws-dropdown');
+  if (dd) dd.style.display = 'none';
+  initWorkspaceSwitcher();
+}
+
+document.addEventListener('DOMContentLoaded', initWorkspaceSwitcher);
+
+document.addEventListener('click', function(e) {
+  if (!e.target.closest('#ws-switcher')) {
+    var dd = document.getElementById('ws-dropdown');
+    if (dd) dd.style.display = 'none';
+  }
+});