It's a todo list.
1<script module>
2 let selectedTab = $state("set");
3</script>
4
5<script lang="ts">
6 import { useInterval } from "runed";
7 import type { Task } from "./stores.svelte";
8 import { formatSecondsToDuration } from "./utils";
9
10 let { task = $bindable(), onDelete }: { task: Task, onDelete: (taskId: string) => void } = $props();
11
12 const interval = useInterval(1000, {
13 immediate: false,
14 callback: () => {
15 task.duration++;
16 }
17 });
18
19 function toggleInterval() {
20 if (interval.isActive) {
21 interval.pause();
22 }
23 else {
24 interval.resume();
25 }
26 }
27
28 function handleOpenTimer() {
29
30 }
31
32 let hourInput = $state(0);
33 let minuteInput = $state(0);
34 let secondsInput = $state(0);
35</script>
36
37<dialog id={`timer_${task.id}`} class="fixed inset-0 m-auto w-1/2 p-8">
38 <form method="dialog" class="w-fit">
39 <div class="flex gap-8 items-center text-lg">
40 <button type="button" onclick={() => selectedTab = "set"} class={[selectedTab === "set" && "border border-red-500"]}>
41 Set
42 </button>
43 <button type="button" onclick={() => selectedTab = "add"} class={[selectedTab === "add" && "border border-red-500"]}>
44 Add
45 </button>
46 </div>
47
48 <div class="flex w-fit items-center justify-center">
49 <label>
50 hr
51 <input type="number" min="0" bind:value={hourInput} class="w-12" />
52 </label>
53 <p class="mr-4">:</p>
54 <input type="number" min="0" max="59" bind:value={minuteInput} class="w-12" />
55 <p class="mr-4">:</p>
56 <input type="number" min="0" max="59" bind:value={secondsInput} class="w-12" />
57 </div>
58 </form>
59</dialog>
60
61<li class="group flex justify-between items-center gap-4">
62 <div class="flex w-full gap-4 items-center pr-4 py-2">
63 <input
64 type="checkbox"
65 bind:checked={task.completed}
66 class="w-6 h-6 bg-transparent"
67 />
68 <input
69 type="text"
70 bind:value={task.description}
71 class={`w-full hover:underline text-ellipsis overflow-hidden bg-transparent ${task.completed && "text-white/50"}`}
72 />
73 </div>
74
75 <div class="flex gap-4 w-fit items-center">
76 <button
77 command="show-modal"
78 commandfor={`timer_${task.id}`}
79 onclick={handleOpenTimer}
80 class="w-fit h-fit tabular-nums text-lg"
81 >
82 {formatSecondsToDuration(task.duration!)}
83 </button>
84 <button
85 onclick={() => onDelete(task.id)}
86 class="px-4 py-2 bg-red-500 rounded-xl text-white"
87 >
88 -
89 </button>
90 </div>
91</li>