feat: configure deadline reminder time in device setup (Closes #715)

frontend/dashboard.css

@@ -38,6 +38,9 @@ button { background: linear-gradient(180deg,#1f3a5f,#15324d); border:1px solid #
 .device-setup-list { display:grid; gap:10px; margin:14px 0; padding:0; list-style:none; }
 .device-setup-step { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border:1px solid #2a496e; border-radius:12px; background:#10233a; overflow-wrap:anywhere; }
 .device-setup-step p { margin:5px 0 0; }
+.device-setup-deadline-controls { display:flex; align-items:end; gap:8px; flex-wrap:wrap; }
+.device-setup-deadline-controls label { font-size:12px; color:#bfdbfe; }
+.device-setup-deadline-controls select, .device-setup-deadline-controls button, #push-deadline-hour { min-height:44px; }
 .device-setup-ready { margin:0; padding:12px; border-radius:10px; background:#0f2237; color:#bfdbfe; font-weight:700; }
 .device-readiness-card { display:none; min-width:0; margin:10px 0; padding:12px; border:1px solid #3b82b8; border-radius:12px; background:#102b46; overflow-x:hidden; }
 .device-readiness-card p { margin:5px 0 0; overflow-wrap:anywhere; }

frontend/dashboard.js

@@ -6037,6 +6037,23 @@
     renderMyWork();
     if (workSession.active()) workSession.reconcile();
   });
+  let pushController = null;
+  for (const selector of [qs('#push-deadline-hour'), qs('#device-setup-deadline-hour')]) {
+    for (let hour = 0; hour < 24; hour += 1) {
+      const option = document.createElement('option');
+      option.value = String(hour);
+      option.textContent = `${String(hour).padStart(2, '0')}:00`;
+      selector.appendChild(option);
+    }
+    selector.value = '9';
+  }
+  qs('#push-deadline-hour').addEventListener('change', event => {
+    qs('#device-setup-deadline-hour').value = event.target.value;
+    if (qs('#push-deadlines').checked) pushController?.changeDeadline();
+  });
+  qs('#device-setup-deadline-hour').addEventListener('change', event => {
+    qs('#push-deadline-hour').value = event.target.value;
+  });
   let pushControllerReady = Promise.resolve(null);
   if ('serviceWorker' in navigator) {
     pushControllerReady = navigator.serviceWorker.register('service-worker.js').then(async () => {
@@ -6046,11 +6063,14 @@
         status:qs('#push-update-status'),
         deadlineControl:qs('#push-deadlines'),
         deadlineStatus:qs('#push-deadline-status'),
+        deadlineHour:qs('#push-deadline-hour'),
         notification:window.Notification,
         serviceWorker:navigator.serviceWorker,
         fetchJson:fetchReviewJson,
       });
       await controller.init();
+      pushController = controller;
+      qs('#device-setup-deadline-hour').value = qs('#push-deadline-hour').value;
       return controller;
     }).catch(error => {
       qs('#push-updates').disabled = true;
@@ -6093,6 +6113,14 @@
         qs('#push-updates').checked = true;
         await controller.change();
       },
+      deadlineReadiness:() => pushController?.deadlineReadiness()
+        || {state:'unavailable', detail:'Deadline reminders are unavailable.'},
+      enableDeadline:async () => {
+        const controller = await pushControllerReady;
+        if (!controller) return;
+        qs('#push-deadline-hour').value = qs('#device-setup-deadline-hour').value;
+        await controller.enableDeadline();
+      },
     });
     await deviceSetup.start();
     return deviceSetup;

frontend/index.html

@@ -82,6 +82,14 @@
         <div><strong>Notify me about new updates</strong><p class="small" id="device-setup-push-status" role="status"></p></div>
         <button class="device-setup-action" id="device-setup-push" type="button">Enable</button>
       </li>
+      <li class="device-setup-step">
+        <div><strong>Remind me about deadlines</strong><p class="small" id="device-setup-deadline-status" role="status"></p></div>
+        <div class="device-setup-deadline-controls">
+          <label for="device-setup-deadline-hour">Local hour</label>
+          <select id="device-setup-deadline-hour" aria-label="Deadline reminder local hour"></select>
+          <button class="device-setup-action" id="device-setup-deadline" type="button">Enable</button>
+        </div>
+      </li>
     </ol>
     <p id="device-setup-ready-status" class="device-setup-ready" role="status" aria-live="polite"></p>
   </section>
@@ -130,6 +138,7 @@
             <label class="push-update-control" for="push-updates"><input id="push-updates" type="checkbox" /> Notify me about new updates</label>
             <span class="small" id="push-update-status" role="status" aria-live="polite"></span>
             <label class="push-update-control" for="push-deadlines"><input id="push-deadlines" type="checkbox" /> Notify me about deadlines</label>
+            <label for="push-deadline-hour">Reminder hour <select id="push-deadline-hour" aria-label="Deadline reminder local hour"></select></label>
             <span class="small" id="push-deadline-status" role="status" aria-live="polite"></span>
             <button id="clear-offline-work" type="button">Clear offline work data</button>
             <button id="retry-offline-storage" type="button" hidden>Retry offline saving</button>

frontend/mobile-device-setup.js

@@ -8,6 +8,7 @@
     ['install', options.installButton, options.installStatus, options.install],
     ['offline', options.offlineButton, options.offlineStatus, options.enableOffline],
     ['push', options.pushButton, options.pushStatus, options.enablePush],
+    ['deadline', options.deadlineButton, options.deadlineStatus, options.enableDeadline],
   ];
   let trigger = options.launcher;
 
@@ -100,8 +101,10 @@ function mountMobileDeviceSetup(options) {
     launcher:qs('#open-device-setup'), closeButton:qs('#close-device-setup'),
     sheet:qs('#device-setup-sheet'), installButton:qs('#device-setup-install'),
     offlineButton:qs('#device-setup-offline'), pushButton:qs('#device-setup-push'),
+    deadlineButton:qs('#device-setup-deadline'),
     installStatus:qs('#device-setup-install-status'), offlineStatus:qs('#device-setup-offline-status'),
-    pushStatus:qs('#device-setup-push-status'), readyStatus:qs('#device-setup-ready-status'),
+    pushStatus:qs('#device-setup-push-status'), deadlineStatus:qs('#device-setup-deadline-status'),
+    readyStatus:qs('#device-setup-ready-status'),
     promptCard:qs('#device-readiness-card'), promptSummary:qs('#device-readiness-summary'),
     promptLauncher:qs('#finish-device-setup'), promptDismiss:qs('#dismiss-device-readiness'),
     promptStorage:options.promptStorage,
@@ -118,9 +121,11 @@ function mountMobileDeviceSetup(options) {
         : qs('#push-updates').checked
           ? {state:'complete', detail:'New update notifications are enabled.'}
           : {state:'incomplete', detail:qs('#push-update-status').textContent || 'New update notifications are off.'},
+      deadline:options.deadlineReadiness(),
     }),
     install:() => options.installApp.install(),
     enableOffline:options.enableOffline,
     enablePush:options.enablePush,
+    enableDeadline:options.enableDeadline,
   });
 }

frontend/push-notifications.js

@@ -2,10 +2,23 @@
   if (typeof module === 'object' && module.exports) module.exports = factory;
   else root.createPushNotifications = factory;
 })(typeof self !== 'undefined' ? self : this, function createPushNotifications({
-  control, status, deadlineControl, deadlineStatus, notification, serviceWorker, fetchJson,
+  control, status, deadlineControl, deadlineStatus, deadlineHour, notification, serviceWorker, fetchJson,
 }) {
   let configuration = null;
 
+  function formattedHour(value) {
+    return `${String(Number(value)).padStart(2, '0')}:00`;
+  }
+
+  function deadlineReadiness() {
+    if (!configuration?.available || deadlineControl?.disabled) {
+      return {state:'unavailable', detail:deadlineStatus?.textContent || 'Deadline reminders are unavailable.'};
+    }
+    return configuration.deadline_enabled
+      ? {state:'complete', detail:`Deadline reminders enabled for ${formattedHour(configuration.reminder_hour)} local time.`}
+      : {state:'incomplete', detail:deadlineStatus?.textContent || 'Choose when to receive deadline reminders.'};
+  }
+
   function applicationServerKey(value) {
     const padded = value.replace(/-/g, '+').replace(/_/g, '/') + '='.repeat((4 - value.length % 4) % 4);
     if (typeof atob === 'function') {
@@ -25,12 +38,12 @@
     if (deadlineStatus) deadlineStatus.textContent = 'Deadline reminders are off for this device.';
   }
 
-  async function enable() {
+  async function ensureSubscription() {
     const permission = await notification.requestPermission();
     if (permission !== 'granted') {
       control.checked = false;
       status.textContent = 'Notifications are blocked. Allow them in your browser settings to enable updates.';
-      return;
+      return null;
     }
     const registration = await serviceWorker.ready;
     let subscription = await registration.pushManager.getSubscription();
@@ -47,6 +60,12 @@
     });
     control.checked = true;
     status.textContent = 'New update notifications enabled for this device.';
+    configuration.subscribed = true;
+    return subscription;
+  }
+
+  async function enable() {
+    await ensureSubscription();
   }
 
   async function change() {
@@ -64,31 +83,45 @@
 
   async function changeDeadline() {
     deadlineControl.disabled = true;
+    if (deadlineHour) deadlineHour.disabled = true;
     try {
       const registration = await serviceWorker.ready;
-      const subscription = await registration.pushManager.getSubscription();
+      let subscription = await registration.pushManager.getSubscription();
+      if (deadlineControl.checked && !subscription) subscription = await ensureSubscription();
       if (deadlineControl.checked && !subscription) {
         deadlineControl.checked = false;
-        deadlineStatus.textContent = 'Enable new update notifications first.';
-        return;
+        deadlineStatus.textContent = status.textContent;
+        return false;
       }
       const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+      const reminderHour = Number(deadlineHour?.value ?? configuration?.reminder_hour ?? 9);
       await fetchJson('api/v1/push-subscription/deadlines', {
         method:'PUT',
         headers:{'Content-Type':'application/json'},
-        body:JSON.stringify({enabled:deadlineControl.checked, timezone, reminder_hour:9}),
+        body:JSON.stringify({enabled:deadlineControl.checked, timezone, reminder_hour:reminderHour}),
       });
+      configuration.deadline_enabled = deadlineControl.checked;
+      configuration.reminder_hour = reminderHour;
+      configuration.timezone = timezone;
       deadlineStatus.textContent = deadlineControl.checked
-        ? 'Deadline reminders enabled for 9:00 local time.'
+        ? `Deadline reminders enabled for ${formattedHour(reminderHour)} local time.`
         : 'Deadline reminders are off for this device.';
+      return true;
     } catch (error) {
       deadlineControl.checked = !deadlineControl.checked;
       deadlineStatus.textContent = 'Could not change deadline reminders. Check your connection and try again.';
+      return false;
     } finally {
       deadlineControl.disabled = false;
+      if (deadlineHour) deadlineHour.disabled = false;
     }
   }
 
+  async function enableDeadline() {
+    deadlineControl.checked = true;
+    return changeDeadline();
+  }
+
   async function init() {
     if (!control || !notification || !serviceWorker) return;
     control.addEventListener('change', change);
@@ -102,13 +135,14 @@
     }
     control.checked = Boolean(configuration.subscribed);
     if (deadlineControl) deadlineControl.checked = Boolean(configuration.deadline_enabled);
+    if (deadlineHour) deadlineHour.value = String(configuration.reminder_hour ?? 9);
     status.textContent = configuration.subscribed
       ? 'New update notifications enabled for this device.'
       : 'New update notifications are off for this device.';
     if (deadlineStatus) deadlineStatus.textContent = configuration.deadline_enabled
-      ? `Deadline reminders enabled for ${configuration.reminder_hour}:00 local time.`
+      ? `Deadline reminders enabled for ${formattedHour(configuration.reminder_hour)} local time.`
       : 'Deadline reminders are off for this device.';
   }
 
-  return {init, change, changeDeadline};
+  return {init, change, changeDeadline, enableDeadline, deadlineReadiness};
 });

frontend/service-worker.js

@@ -1,6 +1,6 @@
 const BASE = new URL('./', self.location.href).pathname;
 importScripts(BASE + 'static/background-issue-sync.js');
-const CACHE = 'stackchain-dashboard-shell-v98';
+const CACHE = 'stackchain-dashboard-shell-v99';
 const OFFLINE_LEASE_URL = new URL(BASE + '__offline-session-lease', self.location.origin).href;
 const OUTAGE_STATUSES = new Set([500, 502, 503, 504]);
 const NAVIGATION_TIMEOUT_MS = self.__STACKCHAIN_NAVIGATION_TIMEOUT_MS || 4000;