feat(KAN-65): add signed macOS updates and DMG distribution

native/ui/index.html

@@ -13,6 +13,7 @@
             <img class="brand" src="./mark.svg" alt="" width="48" height="48" />
             <p class="eyebrow" data-i18n="appName"></p>
             <h1 data-i18n="title"></h1>
+            <button id="update-notice" type="button" data-i18n="updateNotice" hidden></button>
             <p class="description" data-i18n="description"></p>
             <form id="server-form" novalidate>
                 <label for="server-url" data-i18n="serverLabel"></label>

native/ui/locales/en.js

@@ -1,4 +1,44 @@
 export const en = {
+    updatesTitle: 'Software updates',
+    installedVersion: 'Installed version',
+    version: 'Version',
+    build: 'build',
+    checkUpdates: 'Check For Updates…',
+    installUpdate: 'Install Update…',
+    installAndRestart: 'Install and restart',
+    installWarning:
+        'Save your work before continuing. KanbanGit will download and verify the update, then install it and restart. Unsaved inputs will be lost. Your server settings and stored sessions are kept.',
+    updatePreferences: 'Update preferences',
+    automaticUpdates: 'Automatically check for updates',
+    checkInterval: 'Check interval',
+    hourly: 'Every hour',
+    sixHourly: 'Every 6 hours',
+    daily: 'Every day',
+    updatesPrivacy:
+        'Checks run at startup and at the selected interval. Downloads and restarts only happen after your confirmation.',
+    noReleaseNotes: 'No release notes provided.',
+    update_idle: 'Check for the latest stable version of KanbanGit.',
+    update_checking: 'Checking for updates…',
+    update_available: 'A new version of KanbanGit is available.',
+    update_current: 'KanbanGit is up to date.',
+    update_downloading: 'Downloading update…',
+    update_verifying: 'Verifying update…',
+    update_installing: 'Installing update…',
+    update_restarting: 'Restarting KanbanGit…',
+    update_error: 'The update could not be completed.',
+    networkError:
+        'Unable to contact the update service or finish the download. Check your connection and try again.',
+    metadataError:
+        'The update information is invalid or does not match this Mac. Try checking again later.',
+    signatureError:
+        'The update signature could not be verified. Nothing was installed. Try again or contact support.',
+    verificationError:
+        'The downloaded app does not match the announced version, architecture or publisher. Nothing was installed.',
+    installationError:
+        'The update could not be installed. Move KanbanGit to Applications, check available disk space and permissions, then try again.',
+    preferencesError:
+        'Update preferences could not be read or saved. Check your local storage permissions and select your preferences again.',
+    updateNotice: 'An update is available. View update…',
     appName: 'KanbanGit',
     title: 'Choose your workspace.',
     description: 'Connect to your KanbanGit installation over HTTPS.',

native/ui/main.js

@@ -98,3 +98,10 @@ document.querySelector('#appearance').addEventListener('change', (event) => {
 if (window.nativeLauncher) {
     action('ready');
 }
+
+window.updateAvailable = (available) => {
+    document.querySelector('#update-notice').hidden = !available;
+};
+document
+    .querySelector('#update-notice')
+    .addEventListener('click', () => action('updates'));

native/ui/updates-state.js

@@ -0,0 +1,17 @@
+export function updatePresentation(state) {
+    const busy = [
+        'checking',
+        'downloading',
+        'verifying',
+        'installing',
+        'restarting',
+    ].includes(state.phase);
+    return {
+        busy,
+        message: `update_${state.phase}`,
+        canInstall: Boolean(state.version) && !busy,
+        showProgress: ['downloading', 'verifying', 'installing'].includes(
+            state.phase,
+        ),
+    };
+}

native/ui/updates.css

@@ -0,0 +1,12 @@
+body { display: block; padding: 28px; }
+main { margin: 0 auto; width: min(100%, 460px); }
+.brand { margin-bottom: 16px; }
+h2 { font-size: 18px; }
+#release-notes { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; }
+progress { width: 100%; accent-color: var(--primary); }
+fieldset { margin: 28px 0 0; padding: 16px; border: 1px solid var(--border); border-radius: 6px; }
+.automatic { display: flex; align-items: center; gap: 10px; }
+.automatic input { display: inline-block; width: 18px; min-height: 18px; margin: 0; }
+.appearance { margin-top: 16px; }
+#install-confirmation { margin-top: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; }
+#confirm-install { background: var(--primary); color: var(--surface); }

native/ui/updates.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <title>KanbanGit Updates</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="./updates.css" />
+    <script type="module" src="./updates.js"></script>
+</head>
+<body>
+<main>
+    <img class="brand" src="./mark.svg" alt="" width="48" height="48" />
+    <p class="eyebrow" data-i18n="appName"></p>
+    <h1 data-i18n="updatesTitle"></h1>
+    <p id="installed" class="description"></p>
+    <p id="update-status" role="status" aria-live="polite"></p>
+    <p id="update-error" class="description" role="alert" hidden></p>
+    <section id="release" hidden>
+        <h2 id="available-version"></h2>
+        <p id="release-notes" class="description"></p>
+    </section>
+    <progress id="download-progress" hidden></progress>
+    <p id="download-size" class="description" hidden></p>
+    <button id="check" type="button" data-i18n="checkUpdates"></button>
+    <button id="install" type="button" data-i18n="installUpdate" hidden></button>
+    <section id="install-confirmation" hidden>
+        <p class="description" data-i18n="installWarning"></p>
+        <button id="confirm-install" type="button" data-i18n="installAndRestart"></button>
+        <button id="cancel-install" type="button" data-i18n="cancel"></button>
+    </section>
+    <fieldset id="preferences">
+        <legend data-i18n="updatePreferences"></legend>
+        <label class="automatic"><input id="automatic" type="checkbox" checked /><span data-i18n="automaticUpdates"></span></label>
+        <label class="appearance" for="interval"><span data-i18n="checkInterval"></span>
+            <select id="interval"><option value="1" data-i18n="hourly"></option><option value="6" data-i18n="sixHourly"></option><option value="24" data-i18n="daily"></option></select>
+        </label>
+        <p class="description" data-i18n="updatesPrivacy"></p>
+    </fieldset>
+</main>
+</body>
+</html>

native/ui/updates.js

@@ -0,0 +1,70 @@
+import { en } from './locales/en.js';
+import { updatePresentation } from './updates-state.js';
+
+for (const element of document.querySelectorAll('[data-i18n]')) {
+    element.textContent = en[element.dataset.i18n];
+}
+const element = (id) => document.getElementById(id);
+const action = (name, params = {}) => {
+    const url = new URL(`/updates/${name}`, location.href);
+    for (const [key, value] of Object.entries(params)) {
+        url.searchParams.set(key, value);
+    }
+    location.href = url.href;
+};
+let state;
+window.updateStatus = (next) => {
+    state = next;
+    const view = updatePresentation(state);
+    element('installed').textContent =
+        `${en.installedVersion} ${state.currentVersion} (${en.build} ${state.build})`;
+    element('update-status').textContent = en[view.message];
+    element('update-error').hidden = !state.error;
+    element('update-error').textContent = en[state.error] ?? '';
+    element('check').disabled = view.busy;
+    element('preferences').disabled = view.busy;
+    element('release').hidden = !state.version;
+    element('available-version').textContent =
+        `${en.version} ${state.version ?? ''}`;
+    element('release-notes').textContent = state.notes || en.noReleaseNotes;
+    element('install').hidden = !view.canInstall;
+    element('download-progress').hidden = !view.showProgress;
+    element('download-progress').max = state.total || 1;
+    if (state.total) {
+        element('download-progress').value = state.downloaded;
+    } else {
+        element('download-progress').removeAttribute('value');
+    }
+    element('download-size').hidden = !view.showProgress;
+    element('download-size').textContent =
+        `${(state.downloaded / 1048576).toFixed(1)} MB${state.total ? ` / ${(state.total / 1048576).toFixed(1)} MB` : ''}`;
+    element('automatic').checked = state.preferences.automatic;
+    element('interval').value = String(state.preferences.intervalHours);
+    element('interval').disabled = !state.preferences.automatic;
+    if (view.busy || !view.canInstall) {
+        element('install-confirmation').hidden = true;
+    }
+};
+element('check').addEventListener('click', () => action('check'));
+element('install').addEventListener('click', () => {
+    element('install-confirmation').hidden = false;
+    element('confirm-install').focus();
+});
+element('cancel-install').addEventListener('click', () => {
+    element('install-confirmation').hidden = true;
+    element('install').focus();
+});
+element('confirm-install').addEventListener('click', () => {
+    if (state && updatePresentation(state).canInstall) {
+        element('install-confirmation').hidden = true;
+        action('install', { version: state.version });
+    }
+});
+for (const id of ['automatic', 'interval']) {
+    element(id).addEventListener('change', () =>
+        action('preferences', {
+            automatic: String(element('automatic').checked),
+            interval: element('interval').value,
+        }),
+    );
+}