From 03acf441a062fb787fef1f5f4222128e3f94ee86 Mon Sep 17 00:00:00 2001
From: "s0wlz (Matthias Puchstein)" <matthias@puchstein.lu>
Date: Sun, 1 Mar 2026 23:11:11 +0100
Subject: [PATCH] [bugfix] Duration needs to be formated

---
 src/features/countdown/components/CountdownPage.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/features/countdown/components/CountdownPage.svelte b/src/features/countdown/components/CountdownPage.svelte
index 38bcb56..14ac5c3 100644
--- a/src/features/countdown/components/CountdownPage.svelte
+++ b/src/features/countdown/components/CountdownPage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import {onMount} from "svelte";
     import {countdownStore} from "../state/countdown.store";
-    import type {Duration} from "../../../shared/time/duration";
+    import {type Duration, formatDuration} from "../../../shared/time/duration";
 
     let label = "";
     let hours = 0;
@@ -45,6 +45,7 @@
 <button on:click={handleCreate}>Create</button>
 <br/>
 <label for="countdown-select">Select Countdown</label>
+<p>SelectedId: {$countdownStore.selectedId}</p>
 <select id="countdown-select"
         on:change={(e) => {countdownStore.select(Number(e.currentTarget.value))}}>
     {#each $countdownStore.items as item (item.id)}
@@ -53,7 +54,7 @@
 </select>
 <br/>
 {#if $countdownStore.selected}
-    <p>{$countdownStore.selected.duration}</p>
+    <p>Duration: {formatDuration($countdownStore.selected.duration)}</p>
     <p>{$countdownStore.selected.state}</p>
     <button on:click={() => {countdownStore.deleteSelected()}}>Delete</button>
     {#if $countdownStore.selected.state === "Idle"}