0.10.4: a real Sync button on every Archify page

A labelled Sync button sits top right on every Archify page, also in Source, and opens the Sync menu. On a shared model it turns green and reads Shared. The title-bar icon and the pre-share status bar entry are gone, with their settings.

src/webview/messages.ts

@@ -17,6 +17,8 @@ export type WebviewMessage =
   | { type: 'showModel' }
   | { type: 'liveReady' }
   | { type: 'liveAction'; action: LiveAction }
+  | { type: 'syncMenu' }
+  | { type: 'syncReady' }
   | { type: 'error'; message: string };
 
 /** Column for opening files next to a webview without covering it. */
@@ -66,6 +68,28 @@ async function openSource(
   vscode.window.showWarningMessage(`Archify: source file "${message.path}" was not found in the workspace.`);
 }
 
+/**
+ * Whether the file's model is shared: an .archify-sync file next to its
+ * main.archify. Read from disk, so the sync bundle stays unloaded.
+ */
+async function isShared(file: vscode.Uri): Promise<boolean> {
+  const folder = vscode.workspace.getWorkspaceFolder(file);
+  let dir = vscode.Uri.joinPath(file, '..');
+  for (let depth = 0; depth < 16; depth++) {
+    if (await exists(vscode.Uri.joinPath(dir, '.archify-sync'))) return true;
+    if (await exists(vscode.Uri.joinPath(dir, 'main.archify'))) return false;
+    const parent = vscode.Uri.joinPath(dir, '..');
+    if (!folder || dir.path === folder.uri.path || parent.path === dir.path) return false;
+    dir = parent;
+  }
+  return false;
+}
+
+async function postSyncState(file: vscode.Uri, panel: vscode.WebviewPanel): Promise<void> {
+  const shared = file.scheme === 'file' && (await isShared(file));
+  await Promise.resolve(panel.webview.postMessage({ type: 'syncState', shared })).catch(() => undefined);
+}
+
 export async function handleWebviewMessage(
   message: WebviewMessage,
   context: vscode.Uri,
@@ -99,6 +123,14 @@ export async function handleWebviewMessage(
       case 'error':
         vscode.window.showErrorMessage(`Archify: ${message.message}`);
         break;
+      case 'syncReady':
+        await postSyncState(context, panel);
+        break;
+      case 'syncMenu':
+        await vscode.commands.executeCommand('archify.sync.menu');
+        // Share or Stop may have changed it.
+        await postSyncState(context, panel);
+        break;
       case 'hash':
       case 'openDiagram':
       case 'showGraph':

src/webview/page.ts

@@ -887,6 +887,50 @@ function bridgeScript(options: PageOptions): string {
   onReady(renderDecisionsRail);
   onReady(describeElements);
   onReady(renderModeSwitch);
+
+  // Archify Sync: one labelled button, top right, on every page of an Archify
+  // file (diagram, model, graph, registry, decision). It opens the Sync menu.
+  function renderSyncButton() {
+    if (!(config.source || config.model || config.registry || config.decision || config.graph)) return;
+    if (document.getElementById('archify-sync-button')) return;
+    var style = document.createElement('style');
+    style.textContent = SYNC_BUTTON_STYLE;
+    document.head.appendChild(style);
+    var button = document.createElement('button');
+    button.id = 'archify-sync-button';
+    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' }); });
+    document.body.appendChild(button);
+    showSyncState(false);
+    post({ type: 'syncReady' });
+  }
+  // Not shared: a cloud, "Sync". Shared (the model has an .archify-sync file): broadcast waves, "Shared".
+  var SYNC_ICONS = {
+    off: '<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path fill="currentColor" d="M12.5 13H4.25a3.25 3.25 0 0 1-.6-6.44 4.5 4.5 0 0 1 8.7-.81A3.6 3.6 0 0 1 12.5 13Zm-8.25-1h8.25a2.6 2.6 0 0 0 0-5.2h-.5l-.12-.39a3.5 3.5 0 0 0-6.82.66l-.04.4-.4.05A2.25 2.25 0 0 0 4.25 12Z"/></svg>',
+    on: '<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><circle cx="8" cy="8" r="1.75" fill="currentColor"/><path fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" d="M5.2 5.2a4 4 0 0 0 0 5.6M10.8 5.2a4 4 0 0 1 0 5.6M3.1 3.1a7 7 0 0 0 0 9.8M12.9 3.1a7 7 0 0 1 0 9.8"/></svg>',
+  };
+  function showSyncState(shared) {
+    var button = document.getElementById('archify-sync-button');
+    if (!button) return;
+    button.classList.toggle('is-shared', !!shared);
+    button.innerHTML = (shared ? SYNC_ICONS.on : SYNC_ICONS.off) + '<span>' + (shared ? 'Shared' : 'Sync') + '</span>';
+    button.title = shared
+      ? 'This model is shared with Archify Sync: invite people, publish a version, see versions'
+      : 'Archify Sync: sign in, share this model with others, or join one';
+  }
+  window.addEventListener('message', function (event) {
+    var message = event.data || {};
+    if (message.type === 'syncState') showSyncState(message.shared);
+  });
+  var SYNC_BUTTON_STYLE = '#archify-sync-button { position: fixed; top: 12px; right: 18px; z-index: 1001; display: inline-flex; align-items: center; gap: 6px;'
+    + ' padding: 6px 12px; border-radius: 8px; cursor: pointer; font: 600 13px/1 var(--vscode-font-family, system-ui, sans-serif);'
+    + ' color: var(--vscode-button-foreground, #fff); background: var(--vscode-button-background, #0e639c); border: 1px solid var(--vscode-button-border, transparent); }'
+    + ' #archify-sync-button:hover { background: var(--vscode-button-hoverBackground, #1177bb); }'
+    + ' #archify-sync-button.is-shared { color: #fff; background: #1f8f5f; }'
+    + ' #archify-sync-button.is-shared:hover { background: #23a36c; }'
+    + ' #archify-sync-button:focus-visible { outline: 2px solid var(--vscode-focusBorder, #007fd4); outline-offset: 2px; }';
+  onReady(renderSyncButton);
   if (config.source) {
     // The host answers with the problem count for the Source badge.
     post({ type: 'sourceReady' });

src/webview/source/index.ts

@@ -20,7 +20,7 @@ type HostMessage =
 
 const STYLE = `
 html.archify-source-on .container > :not(.header):not(#archify-source),
-html.archify-source-on body > :not(.toolbar):not(.container):not(.archify-model-head):not(.archify-model-switch-row):not(#archify-source):not(script):not(style):not(.archify-modal-backdrop),
+html.archify-source-on body > :not(.toolbar):not(.container):not(.archify-model-head):not(.archify-model-switch-row):not(#archify-source):not(#archify-sync-button):not(script):not(style):not(.archify-modal-backdrop),
 html.archify-source-on #btn-3d,
 html.archify-source-on .archify-vscode-notice { display: none !important; }
 html:not(.archify-source-on) #archify-source { display: none !important; }