diff --git a/CHANGELOG.md b/CHANGELOG.md index 47e66d2..2c50d14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## 0.10.8 — 2026-11-08 - **A model opens as its outline.** On `main.archify` the top-level panels (Shared, Diagrams, Registries, Decisions) start collapsed; open the one you need. What you open or close is kept while the page is open. +- **Sync button in line on every page.** On the model, registry and decision pages it sits next to Model | Graph | Source instead of floating above it, and on the Graph page it comes after Export PNG instead of covering it. It takes the height of the controls beside it. ## 0.10.7 — 2026-11-08 diff --git a/src/webview/page.ts b/src/webview/page.ts index 5901d75..7c5fa02 100644 --- a/src/webview/page.ts +++ b/src/webview/page.ts @@ -902,14 +902,23 @@ function bridgeScript(options: PageOptions): string { button.type = 'button'; button.title = 'Archify Sync: sign in, share this model with others, or join one'; button.addEventListener('click', function (event) { event.stopPropagation(); post({ type: 'syncMenu' }); }); - // A diagram page has Archify's toolbar at the top right: the button goes - // last in it, after Export. Other pages have nothing there; it floats. - var toolbar = document.querySelector('body > .toolbar'); - if (toolbar) { + // Last in the row that holds the view switch: Archify's toolbar on a + // diagram (after Export), the Graph page's header actions (after Export, + // built a moment later by graph.js), next to the switch on the other + // pages. It floats only while there is no such row. + document.body.appendChild(button); + function place() { + var modeSwitch = document.getElementById('archify-mode-switch'); + var row = document.querySelector('.ag-actions') || (modeSwitch && modeSwitch.parentElement) || document.querySelector('body > .toolbar'); + if (!row || row === document.body) return false; button.classList.add('in-toolbar'); - toolbar.appendChild(button); - } else { - document.body.appendChild(button); + row.classList.add('archify-sync-row'); + row.appendChild(button); + return true; + } + if (!place() && window.MutationObserver) { + var watch = new MutationObserver(function () { if (place()) watch.disconnect(); }); + watch.observe(document.body, { childList: true, subtree: true }); } showSyncState(false); post({ type: 'syncReady' }); @@ -940,7 +949,9 @@ function bridgeScript(options: PageOptions): string { + ' display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; cursor: pointer !important;' + ' color: #fff !important; background: var(--vscode-button-background, #0e639c) !important; border: 1px solid var(--vscode-contrastBorder, transparent) !important;' + ' box-shadow: 0 1px 4px rgba(0,0,0,.35) !important; }' + + ' .archify-model-switch-row.archify-sync-row { display: flex !important; align-items: center !important; gap: 0.5rem !important; }' + ' #archify-sync-button.in-toolbar { position: relative !important; top: auto !important; right: auto !important; align-self: center !important; flex: none !important; width: 36px !important; height: 36px !important; }' + + ' .ag-actions #archify-sync-button.in-toolbar, .archify-model-switch-row #archify-sync-button.in-toolbar { align-self: stretch !important; height: auto !important; width: auto !important; aspect-ratio: 1 / 1 !important; }' + ' body.vscode-high-contrast #archify-sync-button:not(.is-shared) { background: #0e639c !important; }' + ' #archify-sync-button svg { display: block !important; width: 16px !important; height: 16px !important; flex: none !important; }' + ' #archify-sync-button:hover { background: var(--vscode-button-hoverBackground, #1177bb) !important; }'