feat: configure deadline reminder horizon (Closes #727)

frontend/dashboard.css

@@ -40,7 +40,7 @@ button { background: linear-gradient(180deg,#1f3a5f,#15324d); border:1px solid #
 .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-deadline-controls select, .device-setup-deadline-controls button, #push-deadline-hour, #push-deadline-days { 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

@@ -6104,6 +6104,13 @@
   qs('#device-setup-deadline-hour').addEventListener('change', event => {
     qs('#push-deadline-hour').value = event.target.value;
   });
+  qs('#push-deadline-days').addEventListener('change', event => {
+    qs('#device-setup-deadline-days').value = event.target.value;
+    if (qs('#push-deadlines').checked) pushController?.changeDeadline();
+  });
+  qs('#device-setup-deadline-days').addEventListener('change', event => {
+    qs('#push-deadline-days').value = event.target.value;
+  });
   let pushControllerReady = Promise.resolve(null);
   if ('serviceWorker' in navigator) {
     pushControllerReady = navigator.serviceWorker.register('service-worker.js').then(async () => {
@@ -6114,6 +6121,7 @@
         deadlineControl:qs('#push-deadlines'),
         deadlineStatus:qs('#push-deadline-status'),
         deadlineHour:qs('#push-deadline-hour'),
+        deadlineDays:qs('#push-deadline-days'),
         notification:window.Notification,
         serviceWorker:navigator.serviceWorker,
         fetchJson:fetchReviewJson,
@@ -6121,6 +6129,7 @@
       await controller.init();
       pushController = controller;
       qs('#device-setup-deadline-hour').value = qs('#push-deadline-hour').value;
+      qs('#device-setup-deadline-days').value = qs('#push-deadline-days').value;
       return controller;
     }).catch(error => {
       qs('#push-updates').disabled = true;
@@ -6169,6 +6178,7 @@
         const controller = await pushControllerReady;
         if (!controller) return;
         qs('#push-deadline-hour').value = qs('#device-setup-deadline-hour').value;
+        qs('#push-deadline-days').value = qs('#device-setup-deadline-days').value;
         await controller.enableDeadline();
       },
     });

frontend/index.html

@@ -87,6 +87,8 @@
         <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>
+          <label for="device-setup-deadline-days">Warn me</label>
+          <select id="device-setup-deadline-days" aria-label="Deadline reminder horizon"><option value="0">Due today</option><option value="2" selected>Next 2 days</option><option value="7">Next 7 days</option></select>
           <button class="device-setup-action" id="device-setup-deadline" type="button">Enable</button>
         </div>
       </li>
@@ -139,6 +141,7 @@
             <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>
+            <label for="push-deadline-days">Warn me <select id="push-deadline-days" aria-label="Deadline reminder horizon"><option value="0">Due today</option><option value="2" selected>Next 2 days</option><option value="7">Next 7 days</option></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/push-notifications.js

@@ -2,7 +2,7 @@
   if (typeof module === 'object' && module.exports) module.exports = factory;
   else root.createPushNotifications = factory;
 })(typeof self !== 'undefined' ? self : this, function createPushNotifications({
-  control, status, deadlineControl, deadlineStatus, deadlineHour, notification, serviceWorker, fetchJson,
+  control, status, deadlineControl, deadlineStatus, deadlineHour, deadlineDays, notification, serviceWorker, fetchJson,
 }) {
   let configuration = null;
 
@@ -10,12 +10,18 @@
     return `${String(Number(value)).padStart(2, '0')}:00`;
   }
 
+  function enabledDeadlineText(hour, days) {
+    const value = Number(days ?? 2);
+    const horizon = value === 0 ? 'due today' : `next ${value} days`;
+    return `Deadline reminders enabled for ${formattedHour(hour)} local time, ${horizon}.`;
+  }
+
   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:'complete', detail:enabledDeadlineText(configuration.reminder_hour, configuration.reminder_days)}
       : {state:'incomplete', detail:deadlineStatus?.textContent || 'Choose when to receive deadline reminders.'};
   }
 
@@ -84,6 +90,7 @@
   async function changeDeadline() {
     deadlineControl.disabled = true;
     if (deadlineHour) deadlineHour.disabled = true;
+    if (deadlineDays) deadlineDays.disabled = true;
     try {
       const registration = await serviceWorker.ready;
       let subscription = await registration.pushManager.getSubscription();
@@ -95,16 +102,18 @@
       }
       const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
       const reminderHour = Number(deadlineHour?.value ?? configuration?.reminder_hour ?? 9);
+      const reminderDays = Number(deadlineDays?.value ?? configuration?.reminder_days ?? 2);
       await fetchJson('api/v1/push-subscription/deadlines', {
         method:'PUT',
         headers:{'Content-Type':'application/json'},
-        body:JSON.stringify({enabled:deadlineControl.checked, timezone, reminder_hour:reminderHour}),
+        body:JSON.stringify({enabled:deadlineControl.checked, timezone, reminder_hour:reminderHour, reminder_days:reminderDays}),
       });
       configuration.deadline_enabled = deadlineControl.checked;
       configuration.reminder_hour = reminderHour;
+      configuration.reminder_days = reminderDays;
       configuration.timezone = timezone;
       deadlineStatus.textContent = deadlineControl.checked
-        ? `Deadline reminders enabled for ${formattedHour(reminderHour)} local time.`
+        ? enabledDeadlineText(reminderHour, reminderDays)
         : 'Deadline reminders are off for this device.';
       return true;
     } catch (error) {
@@ -114,6 +123,7 @@
     } finally {
       deadlineControl.disabled = false;
       if (deadlineHour) deadlineHour.disabled = false;
+      if (deadlineDays) deadlineDays.disabled = false;
     }
   }
 
@@ -136,11 +146,12 @@
     control.checked = Boolean(configuration.subscribed);
     if (deadlineControl) deadlineControl.checked = Boolean(configuration.deadline_enabled);
     if (deadlineHour) deadlineHour.value = String(configuration.reminder_hour ?? 9);
+    if (deadlineDays) deadlineDays.value = String(configuration.reminder_days ?? 2);
     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 ${formattedHour(configuration.reminder_hour)} local time.`
+      ? enabledDeadlineText(configuration.reminder_hour, configuration.reminder_days)
       : 'Deadline reminders are off for this device.';
   }