Show timer edits immediately upon saving

src/script/components/active-timer.ts

@@ -94,7 +94,7 @@ export class ActiveTimer extends LitElement {
   }
 
   updated() {
-    if (!this.timerState || this.timerState.timer.id !== this.timer.id) {
+    if (!this.timerState || this.timerState.timer !== this.timer) {
       this.timerState = new TimerState(this.timer, () => this.requestUpdate());
     }
   }

src/script/components/timer-form.ts

@@ -2,6 +2,7 @@ import { LitElement, css, html } from 'lit';
 import { property, customElement, query } from 'lit/decorators.js';
 import { durationString, IntervalTimer, parseDuration } from '../timer';
 import { TimerService } from '../timer-service';
+import { TimerSavedEvent } from '../timer-saved-event';
 
 @customElement('timer-form-dialog')
 export class TimerFormDialog extends LitElement {
@@ -119,6 +120,7 @@ export class TimerFormDialog extends LitElement {
     this.saving = false;
     // TODO: Clear form
     this.toggleVisibility();
+    document.dispatchEvent(new TimerSavedEvent(id))
   }
 
   private async delete() {

src/script/pages/app-home.ts

@@ -36,11 +36,18 @@ export class AppHome extends LitElement {
     timerServiceSingleton()
       .then(async timerService => {
         this.timerService = timerService;
-        this.timers = await timerService.getAll();
-        if (!this.selectedTimer) {
-          this.selectedTimer = this.timers[0]?.id;
-        }
+        this.loadTimers()
       });
+    document.addEventListener('timersaved', () => {
+      this.loadTimers()
+    })
+  }
+
+  private async loadTimers() {
+    this.timers = await this.timerService?.getAll() || [];
+    if (!this.selectedTimer) {
+      this.selectedTimer = this.timers[0]?.id;
+    }
   }
 
   private async closeEditor() {

src/script/timer-saved-event.ts

@@ -0,0 +1,14 @@
+export class TimerSavedEvent extends Event {
+  timerId?: number;
+
+  constructor(timerId?: string) {
+    super(
+      'timersaved',
+      {
+        bubbles: true,
+        composed: true
+      }
+    );
+    this.timerId = timerId ? Number.parseInt(timerId) : undefined;
+  }
+}