feat: turn cabinet sections into pages

cmd/creator-web/server_test.go

@@ -239,6 +239,11 @@ func TestConsoleAndSecurityHeaders(t *testing.T) {
 		!strings.Contains(response.Body.String(), "К содержимому") ||
 		!strings.Contains(response.Body.String(), "aria-current=\"location\"") ||
 		!strings.Contains(response.Body.String(), "section-nav-link") ||
+		!strings.Contains(response.Body.String(), "data-page=\"overview\"") ||
+		!strings.Contains(response.Body.String(), "data-page=\"diagnostics\"") ||
+		!strings.Contains(response.Body.String(), "data-page=\"operations\"") ||
+		!strings.Contains(response.Body.String(), "data-page=\"learning\"") ||
+		!strings.Contains(response.Body.String(), "data-page=\"settings\"") ||
 		!strings.Contains(response.Body.String(), "satisfaction-dialog") || !strings.Contains(response.Body.String(), "Подтверждаю переход") ||
 		!strings.Contains(response.Body.String(), "action-history") || !strings.Contains(response.Body.String(), "Журнал действий") ||
 		!strings.Contains(response.Body.String(), "advisory-form") || !strings.Contains(response.Body.String(), "Спросить Домового") ||

cmd/creator-web/static/assets/console.css

@@ -123,6 +123,7 @@ button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-
 .session-stamp strong { overflow: hidden; color: var(--muted); font: 10px/1.4 var(--mono); text-overflow: ellipsis; }
 
 .workspace { grid-column: 2; grid-row: 2; width: min(100%, 1740px); justify-self: start; padding: 42px clamp(24px, 3vw, 48px) 64px; min-width: 0; }
+.workspace > [data-page][hidden] { display: none !important; }
 .workspace > section { scroll-margin-top: 94px; }
 .workspace-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
 .workspace-head h1 { margin: 0; font: 400 clamp(34px, 4vw, 50px)/1 var(--serif); letter-spacing: -.035em; }

cmd/creator-web/static/assets/console.js

@@ -20,37 +20,29 @@ let lastAuthorizedActionID = "";
 let advisoryPolicy = {Mode: "deterministic", ExternalEgress: false, AcknowledgementRequired: false};
 let uiSettings = {density: "comfortable", refresh: "off", motion: false};
 
-const sectionNavLinks = Array.from(document.querySelectorAll(".section-nav-link"));
-const cabinetSections = ["overview", "diagnostics", "operations", "learning", "settings"]
-  .map((id) => byId(id))
-  .filter(Boolean);
+const pageNavLinks = Array.from(document.querySelectorAll(".section-nav-link, .topbar-nav a"));
+const pageViews = Array.from(document.querySelectorAll("[data-page]"));
+const cabinetPages = ["overview", "diagnostics", "operations", "learning", "settings"];
 
-function setActiveSection(id) {
-  sectionNavLinks.forEach((link) => {
-    const active = link.getAttribute("href") === `#${id}`;
+function setActivePage(id, updateHistory = false) {
+  const page = cabinetPages.includes(id) ? id : "overview";
+  pageViews.forEach((view) => { view.hidden = view.dataset.page !== page; });
+  document.body.dataset.page = page;
+  pageNavLinks.forEach((link) => {
+    const active = link.getAttribute("href") === `#${page}`;
     link.classList.toggle("active", active);
     if (active) link.setAttribute("aria-current", "location");
     else link.removeAttribute("aria-current");
   });
+  if (updateHistory && window.location.hash !== `#${page}`) window.history.pushState({}, "", `#${page}`);
 }
 
-if ("IntersectionObserver" in window) {
-  const sectionObserver = new IntersectionObserver((entries) => {
-    const visible = entries.filter((entry) => entry.isIntersecting)
-      .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
-    if (visible) setActiveSection(visible.target.id);
-  }, {rootMargin: "-18% 0px -64% 0px", threshold: [0, .25, .6, 1]});
-  cabinetSections.forEach((section) => sectionObserver.observe(section));
-}
-
-sectionNavLinks.forEach((link) => link.addEventListener("click", () => {
-  const id = link.getAttribute("href").slice(1);
-  setActiveSection(id);
+pageNavLinks.forEach((link) => link.addEventListener("click", (event) => {
+  event.preventDefault();
+  setActivePage(link.getAttribute("href").slice(1), true);
 }));
-window.addEventListener("hashchange", () => {
-  const id = window.location.hash.slice(1);
-  if (cabinetSections.some((section) => section.id === id)) setActiveSection(id);
-});
+window.addEventListener("popstate", () => setActivePage(window.location.hash.slice(1)));
+setActivePage(window.location.hash.slice(1));
 
 function setText(id, value, fallback = "—") {
   byId(id).textContent = value === undefined || value === null || value === "" ? fallback : String(value);

cmd/creator-web/static/index.html

@@ -113,7 +113,7 @@
     </aside>
 
     <main class="workspace">
-      <section id="overview" class="workspace-head">
+      <section id="overview" class="workspace-head" data-page="overview">
         <div>
           <p class="eyebrow">операционная картина</p>
           <h1>Состояние сейчас</h1>
@@ -121,14 +121,14 @@
         <p id="last-update" class="last-update">Данные ещё не запрошены</p>
       </section>
 
-      <section class="signal-strip" aria-label="Сводка состояния">
+      <section class="signal-strip" aria-label="Сводка состояния" data-page="overview">
         <div><span>ФОКУС</span><strong id="focus-signal" data-state="idle">ожидает</strong></div>
         <div><span>ЗАДАЧА</span><strong id="task-signal" data-state="idle">ожидает</strong></div>
         <div><span>CONTINUITY</span><strong id="prospective-signal" data-state="idle">ожидает</strong></div>
         <div><span>ВОЗМОЖНОСТЬ</span><strong id="capability-signal" data-state="idle">ожидает</strong></div>
       </section>
 
-      <section id="diagnostics" class="diagnostics-panel" aria-labelledby="diagnostics-title">
+      <section id="diagnostics" class="diagnostics-panel" aria-labelledby="diagnostics-title" data-page="diagnostics">
         <header class="panel-heading">
           <div><p>Проверяемая система</p><h2 id="diagnostics-title">Диагностика кабинета</h2></div>
           <div class="panel-heading-tools"><span id="diagnostic-summary">Проверка ещё не запускалась</span><button id="run-diagnostics" class="secondary-button compact-button" type="button">Проверить всё</button></div>
@@ -142,7 +142,7 @@
         </div>
       </section>
 
-      <section class="advisor-panel" aria-labelledby="advisor-title">
+      <section class="advisor-panel" aria-labelledby="advisor-title" data-page="diagnostics">
         <div class="advisor-intro">
           <p>COGNITIVE / ADVISORY V1</p>
           <h2 id="advisor-title">Спросить Домового</h2>
@@ -170,7 +170,7 @@
         </div>
       </section>
 
-      <section id="operations" class="register-panel" aria-labelledby="register-title">
+      <section id="operations" class="register-panel" aria-labelledby="register-title" data-page="operations">
         <header>
           <div><p>Continuity / ближайшие</p><h2 id="register-title">Реестр ожиданий</h2></div>
           <span id="prospective-count">0 ЗАПИСЕЙ</span>
@@ -180,7 +180,7 @@
         </div>
       </section>
 
-      <section class="activity-panel" aria-labelledby="activity-title">
+      <section class="activity-panel" aria-labelledby="activity-title" data-page="operations">
         <header>
           <div><p>Commit / владелец</p><h2 id="activity-title">Журнал действий</h2></div>
           <div class="activity-tools">
@@ -193,7 +193,7 @@
         </div>
       </section>
 
-      <section id="learning" class="learning-panel" aria-labelledby="learning-title">
+      <section id="learning" class="learning-panel" aria-labelledby="learning-title" data-page="learning">
         <header>
           <div><p>Learning / evidence</p><h2 id="learning-title">Опыт и reflection</h2></div>
           <div class="activity-tools">
@@ -217,7 +217,7 @@
         </div>
       </section>
 
-      <section id="settings" class="settings-panel" aria-labelledby="settings-title">
+      <section id="settings" class="settings-panel" aria-labelledby="settings-title" data-page="settings">
         <header class="panel-heading">
           <div><p>Локальные предпочтения</p><h2 id="settings-title">Настройки рабочего кабинета</h2></div>
           <span id="settings-saved" class="settings-saved">Сохраняются в этом браузере</span>
@@ -230,7 +230,7 @@
         </form>
       </section>
 
-      <section class="data-grid">
+      <section class="data-grid" data-page="overview">
         <article class="data-card focus-card">
           <header><span class="card-number">01</span><div><p>Situation</p><h2>Активный фокус</h2></div><span id="focus-badge" class="status-badge neutral">НЕ ЗАГРУЖЕН</span></header>
           <dl>

dev/ACTIVE_TASK.json

@@ -1,5 +1,5 @@
 {
   "task_file": "dev/tasks/DEV-000074-creator-cabinet-operations.json",
   "task_id": "DEV-000074",
-  "task_revision": 5
+  "task_revision": 6
 }

dev/tasks/DEV-000074-creator-cabinet-operations.json

@@ -1,6 +1,6 @@
 {
   "task_id": "DEV-000074",
-  "task_revision": 5,
+  "task_revision": 6,
   "architecture_revision": "DEV-000073-baseline",
   "base_repo_revision": "dcdc9a2e645e6c34551dc66d98c05220abaf5244",
   "risk_tier": "E",