feat: sync mobile queue priority across devices (Closes #1464)

frontend/dashboard.css

@@ -1525,6 +1525,9 @@ textarea { resize: vertical; min-height: 120px; }
   .mobile-queue-priority-controls button { min-height:44px; min-width:64px; padding:6px 8px; }
   .mobile-queue-priority-footer { display:grid; gap:6px; padding:10px 12px 12px; }
   .mobile-queue-priority-footer button { min-height:44px; }
+  .mobile-queue-priority-conflict { margin:0 8px 10px; padding:10px; border:1px solid #f59e0b; border-radius:10px; background:#3b2808; }
+  .mobile-queue-priority-conflict p { margin:0 0 8px; }
+  .mobile-queue-priority-conflict button { min-height:44px; margin:4px 4px 0 0; }
   .mobile-queue-group { margin-top:16px; }
   .mobile-queue-group h3 { font-size:1rem; }
   .mobile-queue-all { margin-top:16px; }

frontend/dashboard.js

@@ -433,17 +433,25 @@
   mobileQueuePriority = createMobileQueuePriority({
     storage: localStorage,
     getLogin: () => confirmedOwnerLogin,
+    fetchJson: fetchReviewJson,
     document,
     list: qs('#mobile-queue-priority-list'),
     resetButton: qs('#reset-mobile-queue-priority'),
     status: qs('#mobile-queue-priority-status'),
+    conflict: qs('#mobile-queue-priority-conflict'),
+    keepLocalButton: qs('#keep-local-mobile-queue-priority'),
+    useRemoteButton: qs('#use-remote-mobile-queue-priority'),
     labels: {
       attention:'Attention', today:'Today', update:'Updates', agenda:'Agenda',
       following:'Following', authored:'My PRs', filed:'Filed', later:'Later', draft:'Drafts',
     },
-    onChange: () => renderMobileQueuePresentation(),
+    onChange: () => {
+      renderMobileQueuePresentation();
+      void mobileQueuePriority.sync();
+    },
   });
   mobileQueuePriority.start();
+  window.addEventListener('online', () => { void mobileQueuePriority.sync(); });
   let rR = null;
   function rRC() {
     if (rR) return rR;
@@ -676,6 +684,7 @@
     if (!response.ok) {
       const error = new Error(payload.error || payload.detail?.message || payload.detail || 'Review request failed.');
       error.status = response.status;
+      error.payload = payload;
 
       error.code = payload.detail?.code;
       const retryAfter = response.headers.get('Retry-After');
@@ -5638,6 +5647,7 @@
         confirmedOwnerLogin = activeFlushLogin;
         mobileQueuePriority.render();
         renderMobileQueuePresentation();
+        void mobileQueuePriority.load();
         void refreshPhotoDraftInbox();
         timerView.restore(todaySync.flush());
         restoreReleaseReceipt();

frontend/index.html

@@ -2191,6 +2191,11 @@
         <button id="reset-mobile-queue-priority" type="button">Reset order</button>
         <span id="mobile-queue-priority-status" role="status" aria-live="polite" class="small"></span>
       </div>
+      <div id="mobile-queue-priority-conflict" class="mobile-queue-priority-conflict" hidden>
+        <p class="small">This routine was changed on another device. Choose which complete order to keep.</p>
+        <button id="keep-local-mobile-queue-priority" type="button">Keep this device</button>
+        <button id="use-remote-mobile-queue-priority" type="button">Use other device</button>
+      </div>
     </details>
     <section class="mobile-queue-group" aria-labelledby="mobile-queue-active-heading" hidden>
       <h3 id="mobile-queue-active-heading">Active now</h3>

frontend/mobile-queue-priority.js

@@ -7,9 +7,12 @@
   ];
   const storage = options.storage;
   const getLogin = options.getLogin || (() => '');
+  const fetchJson = options.fetchJson;
   const prefix = 'stackchain-mobile-queue-priority-v1:';
   const labels = options.labels || {};
   const documentRef = options.document || (typeof document !== 'undefined' ? document : null);
+  let memory = null;
+  const syncFlights = new Map();
 
   function key() {
     const login = String(getLogin() || '').trim().toLowerCase();
@@ -19,32 +22,77 @@
   function valid(order) {
     return Array.isArray(order) && order.length === DEFAULT_ORDER.length &&
       new Set(order).size === DEFAULT_ORDER.length &&
-      order.every((name, index) => DEFAULT_ORDER.includes(name) && typeof name === 'string');
+      order.every(name => DEFAULT_ORDER.includes(name) && typeof name === 'string');
   }
 
-  function getOrder() {
+  function fresh() {
+    return {revision:0, order:DEFAULT_ORDER.slice(), pending:false, status:'ready', remote:null};
+  }
+
+  function read() {
     const accountKey = key();
-    if (!accountKey || !storage) return DEFAULT_ORDER.slice();
+    if (!accountKey || !storage) return fresh();
+    if (memory?.key === accountKey) return memory.value;
+    let value = fresh();
     try {
       const saved = JSON.parse(storage.getItem(accountKey) || 'null');
-      return valid(saved) ? saved.slice() : DEFAULT_ORDER.slice();
-    } catch (_error) {
-      return DEFAULT_ORDER.slice();
-    }
+      if (valid(saved)) value = {revision:0, order:saved.slice(), pending:true, status:'pending', remote:null};
+      else if (saved && valid(saved.order) && Number.isInteger(saved.revision) && saved.revision >= 0) {
+        value = {
+          revision:saved.revision, order:saved.order.slice(), pending:Boolean(saved.pending),
+          status:saved.status === 'conflict' ? 'conflict' : (saved.pending ? 'pending' : 'ready'),
+          remote:saved.remote && valid(saved.remote.order) ? {
+            revision:Number(saved.remote.revision) || 0, order:saved.remote.order.slice(),
+          } : null,
+        };
+      }
+    } catch (_error) {}
+    memory = {key:accountKey, value};
+    return value;
   }
 
-  function save(order) {
+  function persist(value) {
     const accountKey = key();
-    if (!accountKey || !storage || !valid(order)) return false;
+    if (!accountKey || !storage) return false;
+    memory = {key:accountKey, value};
     try {
-      storage.setItem(accountKey, JSON.stringify(order));
-      options.onChange?.(order.slice());
+      storage.setItem(accountKey, JSON.stringify(value));
       return true;
     } catch (_error) {
       return false;
     }
   }
 
+  function snapshot() {
+    const value = read();
+    return {
+      revision:value.revision, order:value.order.slice(), pending:value.pending,
+      status:value.status, remote:value.remote ? {revision:value.remote.revision, order:value.remote.order.slice()} : null,
+    };
+  }
+
+  function announce(value) {
+    if (options.status) {
+      options.status.textContent = ({pending:'Sync pending.', conflict:'Routine order changed on another device.',
+        syncing:'Syncing routine order…', error:'Routine order could not sync.', ready:''})[value.status] || '';
+    }
+    options.onState?.(snapshot());
+  }
+
+  function getOrder() {
+    return read().order.slice();
+  }
+
+  function save(order) {
+    if (!key() || !valid(order)) return false;
+    const current = read();
+    const value = {revision:current.revision, order:order.slice(), pending:true, status:'pending', remote:null};
+    if (!persist(value)) return false;
+    options.onChange?.(order.slice());
+    announce(value);
+    return true;
+  }
+
   function move(name, delta) {
     const order = getOrder();
     const index = order.indexOf(name);
@@ -56,15 +104,120 @@
   }
 
   function reset() {
-    const accountKey = key();
-    if (accountKey && storage) {
-      try { storage.removeItem(accountKey); } catch (_error) {}
-    }
     const order = DEFAULT_ORDER.slice();
-    options.onChange?.(order.slice());
+    if (fetchJson && key()) save(order);
+    else {
+      const accountKey = key();
+      if (accountKey && storage) {
+        try { storage.removeItem(accountKey); } catch (_error) {}
+      }
+      memory = null;
+      options.onChange?.(order.slice());
+    }
     return order;
   }
 
+  function adopt(snapshotValue, accountKey = key()) {
+    if (!accountKey || key() !== accountKey) return snapshot();
+    if (!snapshotValue || !Number.isInteger(snapshotValue.revision) || snapshotValue.revision < 0 || !valid(snapshotValue.order)) {
+      throw new Error('Queue priority response is invalid.');
+    }
+    const value = {revision:snapshotValue.revision, order:snapshotValue.order.slice(), pending:false, status:'ready', remote:null};
+    persist(value);
+    options.onChange?.(value.order.slice());
+    announce(value);
+    render();
+    return snapshot();
+  }
+
+  async function load() {
+    const accountKey = key();
+    if (!fetchJson || !accountKey) return snapshot();
+    try {
+      const remote = await fetchJson('api/v1/queue-priority');
+      if (key() !== accountKey) return snapshot();
+      const local = read();
+      if (local.pending) {
+        local.remote = valid(remote?.order) ? {revision:remote.revision, order:remote.order.slice()} : null;
+        persist(local);
+        return sync();
+      }
+      return adopt(remote, accountKey);
+    } catch (_error) {
+      if (key() !== accountKey) return snapshot();
+      const current = read();
+      current.status = current.pending ? 'pending' : 'error';
+      persist(current); announce(current);
+      return snapshot();
+    }
+  }
+
+  async function drain(accountKey) {
+    while (key() === accountKey) {
+      const current = read();
+      if (!current.pending) return snapshot();
+      const sent = {revision:current.revision, order:current.order.slice()};
+      current.status = 'syncing'; persist(current); announce(current);
+      try {
+        const saved = await fetchJson('api/v1/queue-priority', {
+          method:'PUT', headers:{'Content-Type':'application/json'},
+          body:JSON.stringify(sent),
+        });
+        if (key() !== accountKey) return snapshot();
+        if (!saved || !Number.isInteger(saved.revision) || !valid(saved.order)) {
+          throw new Error('Queue priority response is invalid.');
+        }
+        const latest = read();
+        if (latest.order.some((name, index) => name !== sent.order[index])) {
+          latest.revision = saved.revision; latest.pending = true;
+          latest.status = 'pending'; latest.remote = null;
+          persist(latest); announce(latest);
+          continue;
+        }
+        return adopt(saved, accountKey);
+      } catch (error) {
+        if (key() !== accountKey) return snapshot();
+        const latest = read();
+        const remote = error?.status === 409 && error?.payload?.detail?.snapshot;
+        if (remote && valid(remote.order) && Number.isInteger(remote.revision)) {
+          latest.status = 'conflict'; latest.pending = true;
+          latest.remote = {revision:remote.revision, order:remote.order.slice()};
+        } else {
+          latest.status = 'pending'; latest.pending = true;
+        }
+        persist(latest); announce(latest); render();
+        return snapshot();
+      }
+    }
+    return snapshot();
+  }
+
+  function sync() {
+    const accountKey = key();
+    const current = read();
+    if (!fetchJson || !accountKey || !current.pending) return Promise.resolve(snapshot());
+    if (syncFlights.has(accountKey)) return syncFlights.get(accountKey);
+    const flight = drain(accountKey).finally(() => {
+      if (syncFlights.get(accountKey) === flight) syncFlights.delete(accountKey);
+    });
+    syncFlights.set(accountKey, flight);
+    return flight;
+  }
+
+  async function useLocal() {
+    const current = read();
+    if (!current.remote) return snapshot();
+    current.revision = current.remote.revision;
+    current.remote = null; current.pending = true; current.status = 'pending';
+    persist(current);
+    return sync();
+  }
+
+  function useRemote() {
+    const current = read();
+    return current.remote ? adopt(current.remote) : snapshot();
+  }
+
   function displayName(name) {
     return labels[name] || name.charAt(0).toUpperCase() + name.slice(1);
   }
@@ -82,42 +235,37 @@
       const controls = documentRef.createElement('span');
       controls.setAttribute('class', 'mobile-queue-priority-controls');
       const earlier = documentRef.createElement('button');
-      earlier.textContent = 'Earlier';
-      earlier.setAttribute('type', 'button');
+      earlier.textContent = 'Earlier'; earlier.setAttribute('type', 'button');
       earlier.setAttribute('aria-label', 'Move ' + displayName(name) + ' earlier');
       earlier.disabled = !signedIn || index === 0;
       earlier.addEventListener('click', () => {
-        move(name, -1);
-        if (options.status) options.status.textContent = displayName(name) + ' moved earlier.';
-        render();
+        move(name, -1); render();
       });
       const later = documentRef.createElement('button');
-      later.textContent = 'Later';
-      later.setAttribute('type', 'button');
+      later.textContent = 'Later'; later.setAttribute('type', 'button');
       later.setAttribute('aria-label', 'Move ' + displayName(name) + ' later');
       later.disabled = !signedIn || index === order.length - 1;
       later.addEventListener('click', () => {
-        move(name, 1);
-        if (options.status) options.status.textContent = displayName(name) + ' moved later.';
-        render();
+        move(name, 1); render();
       });
-      controls.append(earlier, later);
-      row.append(label, controls);
+      controls.append(earlier, later); row.append(label, controls);
       return row;
     });
     options.list.replaceChildren(...rows);
     if (options.resetButton) options.resetButton.disabled = !signedIn;
+    if (options.conflict) options.conflict.hidden = read().status !== 'conflict';
     return order;
   }
 
   function start() {
     options.resetButton?.addEventListener('click', () => {
-      reset();
-      if (options.status) options.status.textContent = 'Routine order reset.';
-      render();
+      reset(); render();
     });
+    options.keepLocalButton?.addEventListener('click', () => { void useLocal(); });
+    options.useRemoteButton?.addEventListener('click', () => { useRemote(); });
     return render();
   }
 
-  return {getOrder, move, reset, render, start, defaultOrder: () => DEFAULT_ORDER.slice()};
+  return {getOrder, move, reset, render, start, load, sync, useLocal, useRemote,
+    state:snapshot, defaultOrder:() => DEFAULT_ORDER.slice()};
 });