From 0c79b1e8363311bafff1ae4e13d6a63e78a8bf36 Mon Sep 17 00:00:00 2001
From: zeudev <coding@zeu.dev>
Date: Sun, 12 Apr 2026 00:01:23 -0700
Subject: [PATCH] init duration dialog

---
 src/lib/TaskItem.svelte   | 40 ++++++++++++++++++++++++++++++++++++++-
 src/routes/+layout.svelte |  4 ++--
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/lib/TaskItem.svelte b/src/lib/TaskItem.svelte
index 59dd83f..3afd799 100644
--- a/src/lib/TaskItem.svelte
+++ b/src/lib/TaskItem.svelte
@@ -1,3 +1,7 @@
+<script module>
+  let selectedTab = $state("set");
+</script>
+
 <script lang="ts">
   import { useInterval } from "runed";
   import type { Task } from "./stores.svelte";
@@ -20,8 +24,40 @@
       interval.resume();
     }
   }
+
+  function handleOpenTimer() {
+
+  }
+
+  let hourInput = $state(0);
+  let minuteInput = $state(0);
+  let secondsInput = $state(0);
 </script>
 
+<dialog id={`timer_${task.id}`} class="fixed inset-0 m-auto w-1/2 p-8">
+  <form method="dialog" class="w-fit">
+    <div class="flex gap-8 items-center text-lg">
+      <button type="button" onclick={() => selectedTab = "set"} class={[selectedTab === "set" && "border border-red-500"]}>
+        Set
+      </button>
+      <button type="button" onclick={() => selectedTab = "add"} class={[selectedTab === "add" && "border border-red-500"]}>
+        Add
+      </button>
+    </div>
+
+    <div class="flex w-fit items-center justify-center">
+      <label>
+        hr
+        <input type="number" min="0" bind:value={hourInput} class="w-12" /> 
+      </label>
+      <p class="mr-4">:</p>
+      <input type="number" min="0" max="59" bind:value={minuteInput} class="w-12" /> 
+      <p class="mr-4">:</p>
+      <input type="number" min="0" max="59" bind:value={secondsInput} class="w-12" /> 
+    </div>
+  </form>
+</dialog>
+
 <li class="group flex justify-between items-center gap-4">
   <div class="flex w-full gap-4 items-center pr-4 py-2">
     <input 
@@ -38,7 +74,9 @@
 
   <div class="flex gap-4 w-fit items-center">
     <button
-      onclick={toggleInterval} 
+      command="show-modal"
+      commandfor={`timer_${task.id}`}
+      onclick={handleOpenTimer} 
       class="w-fit h-fit tabular-nums text-lg"
     >
       {formatSecondsToDuration(task.duration!)}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b0917c0..c5cd6a7 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -32,8 +32,8 @@
   });
 </script>
 
-<div class={`${theme_style} font-apfel flex flex-col w-full h-full min-w-screen min-h-screen p-8 overflow-auto`}>
-  <section class="p-4 w-full h-full">
+<div class={`${theme_style} font-apfel flex flex-col items-center justify-center w-full h-full min-w-screen min-h-screen p-8 overflow-auto`}>
+  <section class="relative w-full h-full">
     {@render children()}
   </section>
 
-- 
2.51.2