Keyboard shortcuts for mail and a shortcut list, offline help and refresh on return, push alerts for new mail

public/shell.js

@@ -4,10 +4,24 @@
   // ---- Offline notice
   const bar = document.createElement('div');
   bar.id = 'offline'; bar.setAttribute('role', 'status'); bar.hidden = true;
-  bar.textContent = 'You are offline. Showing what was saved on this device; changes will not sync until you are back online.';
+  bar.innerHTML = 'You are offline. <button type="button" id="offinfo" style="background:none;border:0;color:inherit;text-decoration:underline;font:inherit;cursor:pointer;padding:0 0 0 6px;min-height:0">What still works?</button>';
   document.body.appendChild(bar);
   const sync = () => { bar.hidden = navigator.onLine; };
-  addEventListener('online', sync); addEventListener('offline', sync); sync();
+  bar.querySelector('#offinfo').onclick = () => {
+    const el = openSheet('You are offline', 'The app opens, and these still work from what this device has saved:', `<ul style="line-height:1.7;padding-left:18px">
+      <li><b>Mail</b>: your last message lists and every message you have opened. Deleting and replying wait until you are back online.</li>
+      <li><b>Files</b>: folders you have opened, and the saved list of documents.</li>
+      <li><b>Calendar, tasks, reminders</b>: what was loaded last time.</li>
+      <li><b>Music, video, Signal</b>: need the connection (the song or movie streams from your server).</li></ul>
+      <p class="sub">Nothing is lost: it all catches up when you reconnect.</p><div class="bar"><button class="btn ghost" id="offx" style="flex:1;justify-content:center">Close</button></div>`);
+    el.querySelector('#offx').onclick = closeSheet;
+  };
+  // Back online, or coming back to the app after a while away: refresh what is on screen quietly.
+  let hiddenAt = 0;
+  const refresh = () => { try { if (typeof mailPoll === 'function') mailPoll(); if (location.hash.startsWith('#/mail') && typeof mailLoadList === 'function' && typeof mail !== 'undefined' && mail.st && $('#mrows') && !mail.msg) mailLoadList(true); else if (/^#\/(home|planner|calendar|tasks)?$/.test(location.hash) && typeof route === 'function' && !document.getElementById('sheet')) route(); } catch {} };
+  addEventListener('online', () => { sync(); refresh(); });
+  document.addEventListener('visibilitychange', () => { if (document.hidden) hiddenAt = Date.now(); else if (hiddenAt && Date.now() - hiddenAt > 60e3 && navigator.onLine) { hiddenAt = 0; refresh(); } });
+  addEventListener('offline', sync); sync();
 
   // ---- Skip link and landmarks
   const skip = document.createElement('a');