Persist countdown inputs and show completion bell in tab title

Co-authored-by: Shelley <shelley@exe.dev>

site/countdown/main.js

@@ -1,4 +1,5 @@
 import { Countdown, integer, adjustTime } from './timer.mjs';
+import { SETTINGS_KEY, serializeSettings, parseSettings } from './settings.mjs';
 
 const timer = new Countdown();
 const minutes = document.querySelector('#minutes');
@@ -8,8 +9,17 @@ const startStop = document.querySelector('#start-stop');
 const reset = document.querySelector('#reset');
 const status = document.querySelector('#status');
 const fields = [minutes, seconds];
+const title = document.title;
 let ticker;
 
+function saveSettings() {
+    try {
+        localStorage.setItem(SETTINGS_KEY, serializeSettings(minutes.value, seconds.value));
+    } catch {
+        // The timer still works when storage is disabled or full.
+    }
+}
+
 function resize(field) {
     field.style.width = `${Math.max(field === seconds ? 2 : 1, field.value.length)}ch`;
     field.dataset.valid = field.value;
@@ -26,6 +36,7 @@ function render(updateFields = true) {
         resize(field);
     });
     counter.classList.toggle('finished', timer.finished);
+    document.title = timer.finished ? `🔔 ${title}` : title;
     startStop.textContent = timer.state === 'running' ? 'Stop' : 'Start';
     const message = timer.finished ? 'Countdown finished' :
         timer.state === 'running' ? 'Running' :
@@ -39,6 +50,7 @@ function render(updateFields = true) {
 
 function edited() {
     timer.edit(minutes.value, seconds.value);
+    saveSettings();
     render(false);
 }
 
@@ -93,4 +105,12 @@ document.addEventListener('visibilitychange', () => {
     }
 });
 
-render();
+try {
+    const saved = parseSettings(localStorage.getItem(SETTINGS_KEY));
+    minutes.value = saved.minutes;
+    seconds.value = saved.seconds;
+    timer.edit(minutes.value, seconds.value);
+} catch {
+    // Storage may be unavailable; retain the default idle countdown.
+}
+render(false);