Baseline: distribution workspace before observability redesign

2026-06-02 16:08:17 +03:00
commit 055c8ced15
38 changed files with 6001 additions and 0 deletions
--- a/app.js
+++ b/app.js
@@ -0,0 +1,104 @@
+const views = Array.from(document.querySelectorAll(".view"));
+const navItems = Array.from(document.querySelectorAll(".nav-item"));
+const viewLinks = Array.from(document.querySelectorAll("[data-view-link]"));
+
+function showView(name) {
+  views.forEach((view) => {
+    view.classList.toggle("is-active", view.id === `view-${name}`);
+  });
+
+  navItems.forEach((item) => {
+    item.classList.toggle("is-active", item.dataset.view === name);
+  });
+}
+
+navItems.forEach((item) => {
+  item.addEventListener("click", () => showView(item.dataset.view));
+});
+
+viewLinks.forEach((link) => {
+  link.addEventListener("click", () => showView(link.dataset.viewLink));
+});
+
+const appData = {
+  atlas: {
+    name: "Atlas Notes",
+    icon: "AN",
+    iconClass: "app-icon-atlas",
+    subtitle: "com.example.atlas - owner mobile-platform",
+    stable: "2.8.4",
+    downloads: "14,283",
+    platforms: "4",
+  },
+  forge: {
+    name: "Forge Build",
+    icon: "FB",
+    iconClass: "app-icon-forge",
+    subtitle: "io.example.forge - owner release-engineering",
+    stable: "1.12.0",
+    downloads: "7,421",
+    platforms: "3",
+  },
+  field: {
+    name: "FieldKit",
+    icon: "FK",
+    iconClass: "app-icon-field",
+    subtitle: "com.example.fieldkit - owner field-ops",
+    stable: "0.9.8",
+    downloads: "2,906",
+    platforms: "2",
+  },
+  ledger: {
+    name: "LedgerWorks",
+    icon: "LW",
+    iconClass: "app-icon-ledger",
+    subtitle: "net.example.ledger - owner finance-tools",
+    stable: "5.4.1",
+    downloads: "4,108",
+    platforms: "2",
+  },
+};
+
+const appRows = Array.from(document.querySelectorAll(".app-row"));
+const detailIcon = document.getElementById("detail-icon");
+const detailName = document.getElementById("detail-name");
+const detailSubtitle = document.getElementById("detail-subtitle");
+const metricStable = document.getElementById("metric-stable");
+const metricDownloads = document.getElementById("metric-downloads");
+const metricPlatforms = document.getElementById("metric-platforms");
+
+function selectApp(key) {
+  const data = appData[key];
+  if (!data) return;
+
+  appRows.forEach((row) => {
+    row.classList.toggle("is-selected", row.dataset.app === key);
+  });
+
+  detailIcon.className = `app-icon app-icon-large ${data.iconClass}`;
+  detailIcon.textContent = data.icon;
+  detailName.textContent = data.name;
+  detailSubtitle.textContent = data.subtitle;
+  metricStable.textContent = data.stable;
+  metricDownloads.textContent = data.downloads;
+  metricPlatforms.textContent = data.platforms;
+}
+
+appRows.forEach((row) => {
+  row.addEventListener("click", () => selectApp(row.dataset.app));
+});
+
+const methodButtons = Array.from(document.querySelectorAll("#ios-methods button"));
+const methodDetails = Array.from(document.querySelectorAll(".method-detail"));
+
+methodButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    methodButtons.forEach((item) => {
+      item.classList.toggle("is-selected", item === button);
+    });
+
+    methodDetails.forEach((detail) => {
+      detail.classList.toggle("is-hidden", detail.id !== `method-${button.dataset.method}`);
+    });
+  });
+});