timer components

packages/frontend/src/components/issue-timer.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { timer } from "@/lib/server";
+import { cn } from "@/lib/utils";
+
+type TimerState = {
+    id: number;
+    workTimeMs: number;
+    breakTimeMs: number;
+    isRunning: boolean;
+    timestamps: string[];
+    endedAt: string | null;
+} | null;
+
+function formatTime(ms: number): string {
+    const totalSeconds = Math.floor(ms / 1000);
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+}
+
+interface IssueTimerProps {
+    issueId: number;
+    onEnd?: (data: TimerState) => void;
+}
+
+export function IssueTimer({ issueId, onEnd }: IssueTimerProps) {
+    const [timerState, setTimerState] = useState<TimerState>(null);
+    const [displayTime, setDisplayTime] = useState(0);
+    const [error, setError] = useState<string | null>(null);
+
+    // fetch current timer state on mount
+    useEffect(() => {
+        timer.get({
+            issueId,
+            onSuccess: (data) => {
+                setTimerState(data);
+                if (data) {
+                    setDisplayTime(data.workTimeMs);
+                }
+            },
+            onError: setError,
+        });
+    }, [issueId]);
+
+    // update display time every second when running
+    useEffect(() => {
+        if (!timerState?.isRunning) return;
+
+        const startTime = Date.now();
+        const baseTime = timerState.workTimeMs;
+
+        const interval = setInterval(() => {
+            setDisplayTime(baseTime + (Date.now() - startTime));
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, [timerState?.isRunning, timerState?.workTimeMs]);
+
+    const handleToggle = () => {
+        timer.toggle({
+            issueId,
+            onSuccess: (data) => {
+                setTimerState(data);
+                setDisplayTime(data.workTimeMs);
+                setError(null);
+            },
+            onError: setError,
+        });
+    };
+
+    const handleEnd = () => {
+        timer.end({
+            issueId,
+            onSuccess: (data) => {
+                setTimerState(data);
+                setDisplayTime(data.workTimeMs);
+                setError(null);
+                onEnd?.(data);
+            },
+            onError: setError,
+        });
+    };
+
+    return (
+        <div className="flex flex-col items-center gap-4">
+            <div className={cn("text-6xl", !timerState?.isRunning && "text-muted-foreground")}>
+                {formatTime(displayTime)}
+            </div>
+
+            {error && <p className="text-red-500 text-sm">{error}</p>}
+
+            <div className="flex gap-4">
+                <Button onClick={handleToggle}>
+                    {!timerState ? "Start" : timerState.isRunning ? "Pause" : "Resume"}
+                </Button>
+                <Button
+                    onClick={handleEnd}
+                    variant="outline"
+                    disabled={!timerState || timerState.endedAt != null}
+                >
+                    End
+                </Button>
+            </div>
+        </div>
+    );
+}

packages/frontend/src/components/timer-modal.tsx

@@ -0,0 +1,23 @@
+import { Timer } from "lucide-react";
+import { useState } from "react";
+import { IssueTimer } from "@/components/issue-timer";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+
+export function TimerModal({ issueId }: { issueId: number }) {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+                <Button variant="outline" size="sm">
+                    <Timer className="size-4" />
+                    Timer
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="w-xs" showCloseButton={false}>
+                <IssueTimer issueId={issueId} onEnd={() => setOpen(false)} />
+            </DialogContent>
+        </Dialog>
+    );
+}

packages/frontend/src/components/ui/dialog.tsx

@@ -34,9 +34,11 @@ function DialogContent({
     className,
     children,
     showCloseButton = true,
+    closePos = "top-right",
     ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
+    closePos?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 }) {
     return (
         <DialogPortal data-slot="dialog-portal">
@@ -59,7 +61,11 @@ function DialogContent({
                         className={cn(
                             "cursor-pointer ring-offset-background focus:ring-ring",
                             "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-                            "absolute top-4 right-4 opacity-70",
+                            "absolute opacity-70",
+                            closePos === "top-left" && "top-4 left-4",
+                            closePos === "top-right" && "top-4 right-4",
+                            closePos === "bottom-left" && "bottom-4 left-4",
+                            closePos === "bottom-right" && "bottom-4 right-4",
                             "hover:opacity-100 focus:ring-2 focus:ring-offset-2 ",
                             "ocus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none",
                             "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",