From 06bac090a2fceb05753d5968f27341eb557fe4f5 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Tue, 20 Jan 2026 17:04:24 +0000
Subject: [PATCH] switched issue and timer flows to mutations

---
 .../src/components/issue-detail-pane.tsx      | 384 +++++++++---------
 .../frontend/src/components/issue-modal.tsx   | 125 +++---
 .../frontend/src/components/issue-timer.tsx   |  79 ++--
 .../frontend/src/components/timer-display.tsx |  84 ++--
 4 files changed, 305 insertions(+), 367 deletions(-)

diff --git a/packages/frontend/src/components/issue-detail-pane.tsx b/packages/frontend/src/components/issue-detail-pane.tsx
index fbeddcd..c52ffbc 100644
--- a/packages/frontend/src/components/issue-detail-pane.tsx
+++ b/packages/frontend/src/components/issue-detail-pane.tsx
@@ -1,9 +1,11 @@
-import type { IssueResponse, ProjectResponse, SprintRecord, UserRecord } from "@sprint/shared";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { MultiAssigneeSelect } from "@/components/multi-assignee-select";
+import { useSelection } from "@/components/selection-provider";
 import { useSession } from "@/components/session-provider";
+import SmallSprintDisplay from "@/components/small-sprint-display";
 import SmallUserDisplay from "@/components/small-user-display";
+import { SprintSelect } from "@/components/sprint-select";
 import { StatusSelect } from "@/components/status-select";
 import StatusTag from "@/components/status-tag";
 import { TimerDisplay } from "@/components/timer-display";
@@ -11,16 +13,23 @@ import { TimerModal } from "@/components/timer-modal";
 import { Button } from "@/components/ui/button";
 import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import Icon from "@/components/ui/icon";
+import { IconButton } from "@/components/ui/icon-button";
 import { Input } from "@/components/ui/input";
 import { SelectTrigger } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
-import { issue } from "@/lib/server";
+import {
+    useDeleteIssue,
+    useOrganisationMembers,
+    useSelectedIssue,
+    useSelectedOrganisation,
+    useSelectedProject,
+    useSprints,
+    useUpdateIssue,
+} from "@/lib/query/hooks";
+import { parseError } from "@/lib/server";
 import { cn, issueID } from "@/lib/utils";
-import SmallSprintDisplay from "./small-sprint-display";
-import { SprintSelect } from "./sprint-select";
-import { IconButton } from "./ui/icon-button";
 
-function assigneesToStringArray(assignees: UserRecord[]): string[] {
+function assigneesToStringArray(assignees: { id: number }[]): string[] {
     if (assignees.length === 0) return ["unassigned"];
     return assignees.map((a) => a.id.toString());
 }
@@ -29,44 +38,39 @@ function stringArrayToAssigneeIds(assigneeIds: string[]): number[] {
     return assigneeIds.filter((id) => id !== "unassigned").map((id) => Number(id));
 }
 
-export function IssueDetailPane({
-    project,
-    sprints,
-    issueData,
-    members,
-    statuses,
-    close,
-    onIssueUpdate,
-    onIssueDelete,
-}: {
-    project: ProjectResponse;
-    sprints: SprintRecord[];
-    issueData: IssueResponse;
-    members: UserRecord[];
-    statuses: Record<string, string>;
-    close: () => void;
-    onIssueUpdate?: () => void;
-    onIssueDelete?: (issueId: number) => void | Promise<void>;
-}) {
+export function IssueDetailPane() {
     const { user } = useSession();
-    const [assigneeIds, setAssigneeIds] = useState<string[]>(assigneesToStringArray(issueData.Assignees));
-    const [sprintId, setSprintId] = useState<string>(issueData.Issue.sprintId?.toString() ?? "unassigned");
-    const [status, setStatus] = useState<string>(issueData.Issue.status);
+    const { selectIssue } = useSelection();
+    const selectedOrganisation = useSelectedOrganisation();
+    const selectedProject = useSelectedProject();
+    const issueData = useSelectedIssue();
+    const { data: sprints = [] } = useSprints(selectedProject?.Project.id);
+    const { data: membersData = [] } = useOrganisationMembers(selectedOrganisation?.Organisation.id);
+    const updateIssue = useUpdateIssue();
+    const deleteIssue = useDeleteIssue();
+
+    const members = useMemo(() => membersData.map((member) => member.User), [membersData]);
+    const statuses = selectedOrganisation?.Organisation.statuses ?? {};
+
+    const [assigneeIds, setAssigneeIds] = useState<string[]>([]);
+    const [sprintId, setSprintId] = useState<string>("unassigned");
+    const [status, setStatus] = useState<string>("");
     const [deleteOpen, setDeleteOpen] = useState(false);
     const [linkCopied, setLinkCopied] = useState(false);
     const copyTimeoutRef = useRef<number | null>(null);
 
-    const [title, setTitle] = useState(issueData.Issue.title);
-    const [originalTitle, setOriginalTitle] = useState(issueData.Issue.title);
+    const [title, setTitle] = useState("");
+    const [originalTitle, setOriginalTitle] = useState("");
     const [isSavingTitle, setIsSavingTitle] = useState(false);
 
-    const [description, setDescription] = useState(issueData.Issue.description);
-    const [originalDescription, setOriginalDescription] = useState(issueData.Issue.description);
+    const [description, setDescription] = useState("");
+    const [originalDescription, setOriginalDescription] = useState("");
     const [isEditingDescription, setIsEditingDescription] = useState(false);
     const [isSavingDescription, setIsSavingDescription] = useState(false);
     const descriptionRef = useRef<HTMLTextAreaElement>(null);
 
     useEffect(() => {
+        if (!issueData) return;
         setSprintId(issueData.Issue.sprintId?.toString() ?? "unassigned");
         setAssigneeIds(assigneesToStringArray(issueData.Assignees));
         setStatus(issueData.Issue.status);
@@ -85,51 +89,51 @@ export function IssueDetailPane({
         };
     }, []);
 
+    if (!issueData || !selectedProject || !selectedOrganisation) {
+        return null;
+    }
+
     const handleSprintChange = async (value: string) => {
         setSprintId(value);
         const newSprintId = value === "unassigned" ? null : Number(value);
 
-        await issue.update({
-            issueId: issueData.Issue.id,
-            sprintId: newSprintId,
-            onSuccess: () => {
-                onIssueUpdate?.();
-
-                toast.success(
-                    <>
-                        Successfully updated sprint to{" "}
-                        {value === "unassigned" ? (
-                            "Unassigned"
-                        ) : (
-                            <SmallSprintDisplay sprint={sprints.find((s) => s.id === newSprintId)} />
-                        )}{" "}
-                        for {issueID(project.Project.key, issueData.Issue.number)}
-                    </>,
-                    {
-                        dismissible: false,
-                    },
-                );
-            },
-            onError: (error) => {
-                console.error("error updating sprint:", error);
-                setSprintId(issueData.Issue.sprintId?.toString() ?? "unassigned");
-
-                toast.error(
-                    <>
-                        Error updating sprint to{" "}
-                        {value === "unassigned" ? (
-                            "Unassigned"
-                        ) : (
-                            <SmallSprintDisplay sprint={sprints.find((s) => s.id === newSprintId)} />
-                        )}{" "}
-                        for {issueID(project.Project.key, issueData.Issue.number)}
-                    </>,
-                    {
-                        dismissible: false,
-                    },
-                );
-            },
-        });
+        try {
+            await updateIssue.mutateAsync({
+                id: issueData.Issue.id,
+                sprintId: newSprintId,
+            });
+            toast.success(
+                <>
+                    Successfully updated sprint to{" "}
+                    {value === "unassigned" ? (
+                        "Unassigned"
+                    ) : (
+                        <SmallSprintDisplay sprint={sprints.find((s) => s.id === newSprintId)} />
+                    )}{" "}
+                    for {issueID(selectedProject.Project.key, issueData.Issue.number)}
+                </>,
+                {
+                    dismissible: false,
+                },
+            );
+        } catch (error) {
+            console.error("error updating sprint:", error);
+            setSprintId(issueData.Issue.sprintId?.toString() ?? "unassigned");
+            toast.error(
+                <>
+                    Error updating sprint to{" "}
+                    {value === "unassigned" ? (
+                        "Unassigned"
+                    ) : (
+                        <SmallSprintDisplay sprint={sprints.find((s) => s.id === newSprintId)} />
+                    )}{" "}
+                    for {issueID(selectedProject.Project.key, issueData.Issue.number)}
+                </>,
+                {
+                    dismissible: false,
+                },
+            );
+        }
     };
 
     const handleAssigneeChange = async (newAssigneeIds: string[]) => {
@@ -147,64 +151,58 @@ export function IssueDetailPane({
             return;
         }
 
-        await issue.update({
-            issueId: issueData.Issue.id,
-            assigneeIds: newAssigneeIdNumbers,
-            onSuccess: () => {
-                const assignedUsers = members.filter((m) => newAssigneeIdNumbers.includes(m.id));
-                const displayText =
-                    assignedUsers.length === 0
-                        ? "Unassigned"
-                        : assignedUsers.length === 1
-                          ? assignedUsers[0].name
-                          : `${assignedUsers.length} assignees`;
-                toast.success(
-                    <div className={"flex items-center gap-2"}>
-                        Updated assignees to {displayText} for{" "}
-                        {issueID(project.Project.key, issueData.Issue.number)}
-                    </div>,
-                    {
-                        dismissible: false,
-                    },
-                );
-                onIssueUpdate?.();
-            },
-            onError: (error) => {
-                console.error("error updating assignees:", error);
-                setAssigneeIds(previousAssigneeIds);
-
-                toast.error(`Error updating assignees: ${error}`, {
+        try {
+            await updateIssue.mutateAsync({
+                id: issueData.Issue.id,
+                assigneeIds: newAssigneeIdNumbers,
+            });
+            const assignedUsers = members.filter((member) => newAssigneeIdNumbers.includes(member.id));
+            const displayText =
+                assignedUsers.length === 0
+                    ? "Unassigned"
+                    : assignedUsers.length === 1
+                      ? assignedUsers[0].name
+                      : `${assignedUsers.length} assignees`;
+            toast.success(
+                <div className={"flex items-center gap-2"}>
+                    Updated assignees to {displayText} for{" "}
+                    {issueID(selectedProject.Project.key, issueData.Issue.number)}
+                </div>,
+                {
                     dismissible: false,
-                });
-            },
-        });
+                },
+            );
+        } catch (error) {
+            console.error("error updating assignees:", error);
+            setAssigneeIds(previousAssigneeIds);
+            toast.error(`Error updating assignees: ${parseError(error as Error)}`, {
+                dismissible: false,
+            });
+        }
     };
 
     const handleStatusChange = async (value: string) => {
         setStatus(value);
 
-        await issue.update({
-            issueId: issueData.Issue.id,
-            status: value,
-            onSuccess: () => {
-                toast.success(
-                    <>
-                        {issueID(project.Project.key, issueData.Issue.number)}'s status updated to{" "}
-                        <StatusTag status={value} colour={statuses[value]} />
-                    </>,
-                    { dismissible: false },
-                );
-                onIssueUpdate?.();
-            },
-            onError: (error) => {
-                console.error("error updating status:", error);
-                setStatus(issueData.Issue.status);
-
-                toast.error(`Error updating status: ${error}`, {
-                    dismissible: false,
-                });
-            },
-        });
+        try {
+            await updateIssue.mutateAsync({
+                id: issueData.Issue.id,
+                status: value,
+            });
+            toast.success(
+                <>
+                    {issueID(selectedProject.Project.key, issueData.Issue.number)}'s status updated to{" "}
+                    <StatusTag status={value} colour={statuses[value]} />
+                </>,
+                { dismissible: false },
+            );
+        } catch (error) {
+            console.error("error updating status:", error);
+            setStatus(issueData.Issue.status);
+            toast.error(`Error updating status: ${parseError(error as Error)}`, {
+                dismissible: false,
+            });
+        }
     };
 
     const handleDelete = () => {
@@ -235,21 +233,19 @@ export function IssueDetailPane({
         }
 
         setIsSavingTitle(true);
-        await issue.update({
-            issueId: issueData.Issue.id,
-            title: trimmedTitle,
-            onSuccess: () => {
-                setOriginalTitle(trimmedTitle);
-                toast.success(`${issueID(project.Project.key, issueData.Issue.number)} Title updated`);
-                onIssueUpdate?.();
-                setIsSavingTitle(false);
-            },
-            onError: (error) => {
-                console.error("error updating title:", error);
-                setTitle(originalTitle);
-                setIsSavingTitle(false);
-            },
-        });
+        try {
+            await updateIssue.mutateAsync({
+                id: issueData.Issue.id,
+                title: trimmedTitle,
+            });
+            setOriginalTitle(trimmedTitle);
+            toast.success(`${issueID(selectedProject.Project.key, issueData.Issue.number)} Title updated`);
+        } catch (error) {
+            console.error("error updating title:", error);
+            setTitle(originalTitle);
+        } finally {
+            setIsSavingTitle(false);
+        }
     };
 
     const handleDescriptionSave = async () => {
@@ -262,52 +258,50 @@ export function IssueDetailPane({
         }
 
         setIsSavingDescription(true);
-        await issue.update({
-            issueId: issueData.Issue.id,
-            description: trimmedDescription,
-            onSuccess: () => {
-                setOriginalDescription(trimmedDescription);
-                setDescription(trimmedDescription);
-                toast.success(`${issueID(project.Project.key, issueData.Issue.number)} Description updated`);
-                onIssueUpdate?.();
-                setIsSavingDescription(false);
-                if (trimmedDescription === "") {
-                    setIsEditingDescription(false);
-                }
-            },
-            onError: (error) => {
-                console.error("error updating description:", error);
-                setDescription(originalDescription);
-                setIsSavingDescription(false);
-            },
-        });
+        try {
+            await updateIssue.mutateAsync({
+                id: issueData.Issue.id,
+                description: trimmedDescription,
+            });
+            setOriginalDescription(trimmedDescription);
+            setDescription(trimmedDescription);
+            toast.success(
+                `${issueID(selectedProject.Project.key, issueData.Issue.number)} Description updated`,
+            );
+            if (trimmedDescription === "") {
+                setIsEditingDescription(false);
+            }
+        } catch (error) {
+            console.error("error updating description:", error);
+            setDescription(originalDescription);
+        } finally {
+            setIsSavingDescription(false);
+        }
     };
 
     const handleConfirmDelete = async () => {
-        await issue.delete({
-            issueId: issueData.Issue.id,
-            onSuccess: async () => {
-                await onIssueDelete?.(issueData.Issue.id);
-
-                toast.success(`Deleted issue ${issueID(project.Project.key, issueData.Issue.number)}`, {
+        try {
+            await deleteIssue.mutateAsync(issueData.Issue.id);
+            selectIssue(null);
+            toast.success(`Deleted issue ${issueID(selectedProject.Project.key, issueData.Issue.number)}`, {
+                dismissible: false,
+            });
+        } catch (error) {
+            console.error(
+                `error deleting issue ${issueID(selectedProject.Project.key, issueData.Issue.number)}`,
+                error,
+            );
+            toast.error(
+                `Error deleting issue ${issueID(selectedProject.Project.key, issueData.Issue.number)}: ${parseError(
+                    error as Error,
+                )}`,
+                {
                     dismissible: false,
-                });
-            },
-            onError: (error) => {
-                console.error(
-                    `error deleting issue ${issueID(project.Project.key, issueData.Issue.number)}`,
-                    error,
-                );
-
-                toast.error(
-                    `Error deleting issue ${issueID(project.Project.key, issueData.Issue.number)}: ${error}`,
-                    {
-                        dismissible: false,
-                    },
-                );
-            },
-        });
-        setDeleteOpen(false);
+                },
+            );
+        } finally {
+            setDeleteOpen(false);
+        }
     };
 
     return (
@@ -315,7 +309,7 @@ export function IssueDetailPane({
             <div className="flex flex-row items-center justify-end border-b h-[25px]">
                 <span className="w-full">
                     <p className="text-sm w-fit px-1 font-700">
-                        {issueID(project.Project.key, issueData.Issue.number)}
+                        {issueID(selectedProject.Project.key, issueData.Issue.number)}
                     </p>
                 </span>
                 <div className="flex items-center">
@@ -325,7 +319,7 @@ export function IssueDetailPane({
                     <IconButton variant="destructive" onClick={handleDelete} title={"Delete issue"}>
                         <Icon icon="trash" />
                     </IconButton>
-                    <IconButton onClick={close} title={"Close"}>
+                    <IconButton onClick={() => selectIssue(null)} title={"Close"}>
                         <Icon icon="x" />
                     </IconButton>
                 </div>
@@ -355,14 +349,14 @@ export function IssueDetailPane({
                     <div className="flex w-full items-center min-w-0">
                         <Input
                             value={title}
-                            onChange={(e) => setTitle(e.target.value)}
+                            onChange={(event) => setTitle(event.target.value)}
                             onBlur={handleTitleSave}
-                            onKeyDown={(e) => {
-                                if (e.key === "Enter") {
-                                    e.currentTarget.blur();
-                                } else if (e.key === "Escape") {
+                            onKeyDown={(event) => {
+                                if (event.key === "Enter") {
+                                    event.currentTarget.blur();
+                                } else if (event.key === "Escape") {
                                     setTitle(originalTitle);
-                                    e.currentTarget.blur();
+                                    event.currentTarget.blur();
                                 }
                             }}
                             disabled={isSavingTitle}
@@ -378,15 +372,15 @@ export function IssueDetailPane({
                     <Textarea
                         ref={descriptionRef}
                         value={description}
-                        onChange={(e) => setDescription(e.target.value)}
+                        onChange={(event) => setDescription(event.target.value)}
                         onBlur={handleDescriptionSave}
-                        onKeyDown={(e) => {
-                            if (e.key === "Escape" || (e.ctrlKey && e.key === "Enter")) {
+                        onKeyDown={(event) => {
+                            if (event.key === "Escape" || (event.ctrlKey && event.key === "Enter")) {
                                 setDescription(originalDescription);
                                 if (originalDescription === "") {
                                     setIsEditingDescription(false);
                                 }
-                                e.currentTarget.blur();
+                                event.currentTarget.blur();
                             }
                         }}
                         placeholder="Add a description..."
diff --git a/packages/frontend/src/components/issue-modal.tsx b/packages/frontend/src/components/issue-modal.tsx
index e9f348f..34f0731 100644
--- a/packages/frontend/src/components/issue-modal.tsx
+++ b/packages/frontend/src/components/issue-modal.tsx
@@ -1,14 +1,10 @@
-import {
-    ISSUE_DESCRIPTION_MAX_LENGTH,
-    ISSUE_TITLE_MAX_LENGTH,
-    type SprintRecord,
-    type UserRecord,
-} from "@sprint/shared";
+import { ISSUE_DESCRIPTION_MAX_LENGTH, ISSUE_TITLE_MAX_LENGTH } from "@sprint/shared";
 
-import { type FormEvent, useState } from "react";
+import { type FormEvent, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { MultiAssigneeSelect } from "@/components/multi-assignee-select";
 import { useAuthenticatedSession } from "@/components/session-provider";
+import { SprintSelect } from "@/components/sprint-select";
 import { StatusSelect } from "@/components/status-select";
 import StatusTag from "@/components/status-tag";
 import { Button } from "@/components/ui/button";
@@ -23,35 +19,35 @@ import {
 import { Field } from "@/components/ui/field";
 import { Label } from "@/components/ui/label";
 import { SelectTrigger } from "@/components/ui/select";
-import { issue, parseError } from "@/lib/server";
-import { cn } from "@/lib/utils";
-import { SprintSelect } from "./sprint-select";
+import {
+    useCreateIssue,
+    useOrganisationMembers,
+    useSelectedOrganisation,
+    useSelectedProject,
+    useSprints,
+} from "@/lib/query/hooks";
+import { parseError } from "@/lib/server";
+import { cn, issueID } from "@/lib/utils";
 
-export function IssueModal({
-    projectId,
-    sprints,
-    members,
-    statuses,
-    trigger,
-    completeAction,
-    errorAction,
-}: {
-    projectId?: number;
-    sprints?: SprintRecord[];
-    members?: UserRecord[];
-    statuses: Record<string, string>;
-    trigger?: React.ReactNode;
-    completeAction?: (issueNumber: number) => void | Promise<void>;
-    errorAction?: (errorMessage: string) => void | Promise<void>;
-}) {
+export function IssueModal({ trigger }: { trigger?: React.ReactNode }) {
     const { user } = useAuthenticatedSession();
+    const selectedOrganisation = useSelectedOrganisation();
+    const selectedProject = useSelectedProject();
+    const { data: sprints = [] } = useSprints(selectedProject?.Project.id);
+    const { data: membersData = [] } = useOrganisationMembers(selectedOrganisation?.Organisation.id);
+    const createIssue = useCreateIssue();
+
+    const members = useMemo(() => membersData.map((member) => member.User), [membersData]);
+    const statuses = selectedOrganisation?.Organisation.statuses ?? {};
+    const statusOptions = useMemo(() => Object.keys(statuses), [statuses]);
+    const defaultStatus = statusOptions[0] ?? "";
 
     const [open, setOpen] = useState(false);
     const [title, setTitle] = useState("");
     const [description, setDescription] = useState("");
     const [sprintId, setSprintId] = useState<string>("unassigned");
     const [assigneeIds, setAssigneeIds] = useState<string[]>(["unassigned"]);
-    const [status, setStatus] = useState<string>(Object.keys(statuses)[0] ?? "");
+    const [status, setStatus] = useState<string>(defaultStatus);
     const [submitAttempted, setSubmitAttempted] = useState(false);
     const [submitting, setSubmitting] = useState(false);
     const [error, setError] = useState<string | null>(null);
@@ -61,7 +57,7 @@ export function IssueModal({
         setDescription("");
         setSprintId("unassigned");
         setAssigneeIds(["unassigned"]);
-        setStatus(statuses?.[0] ?? "");
+        setStatus(defaultStatus);
         setSubmitAttempted(false);
         setSubmitting(false);
         setError(null);
@@ -74,8 +70,8 @@ export function IssueModal({
         }
     };
 
-    const handleSubmit = async (e: FormEvent) => {
-        e.preventDefault();
+    const handleSubmit = async (event: FormEvent) => {
+        event.preventDefault();
         setError(null);
         setSubmitAttempted(true);
 
@@ -92,7 +88,7 @@ export function IssueModal({
             return;
         }
 
-        if (!projectId) {
+        if (!selectedProject) {
             setError("select a project first");
             return;
         }
@@ -100,42 +96,26 @@ export function IssueModal({
         setSubmitting(true);
 
         try {
-            await issue.create({
-                projectId,
+            const data = await createIssue.mutateAsync({
+                projectId: selectedProject.Project.id,
                 title,
                 description,
                 sprintId: sprintId === "unassigned" ? null : Number(sprintId),
                 assigneeIds: assigneeIds.filter((id) => id !== "unassigned").map((id) => Number(id)),
                 status: status.trim() === "" ? undefined : status,
-                onSuccess: async (data) => {
-                    setOpen(false);
-                    reset();
-                    try {
-                        await completeAction?.(data.number);
-                    } catch (actionErr) {
-                        console.error(actionErr);
-                    }
-                },
-                onError: async (err) => {
-                    const message = parseError(err);
-                    setError(message);
-                    setSubmitting(false);
-
-                    toast.error(`Error creating issue: ${message}`, {
-                        dismissible: false,
-                    });
-
-                    try {
-                        await errorAction?.(message);
-                    } catch (actionErr) {
-                        console.error(actionErr);
-                    }
-                },
+            });
+            setOpen(false);
+            reset();
+            toast.success(`Created ${issueID(selectedProject.Project.key, data.number)}`, {
+                dismissible: false,
             });
         } catch (err) {
-            console.error(err);
-            setError("failed to create issue");
+            const message = parseError(err as Error);
+            setError(message);
             setSubmitting(false);
+            toast.error(`Error creating issue: ${message}`, {
+                dismissible: false,
+            });
         }
     };
 
@@ -143,7 +123,7 @@ export function IssueModal({
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogTrigger asChild>
                 {trigger || (
-                    <Button variant="outline" disabled={!projectId}>
+                    <Button variant="outline" disabled={!selectedProject}>
                         Create Issue
                     </Button>
                 )}
@@ -156,15 +136,14 @@ export function IssueModal({
 
                 <form onSubmit={handleSubmit}>
                     <div className="grid">
-                        {statuses && Object.keys(statuses).length > 0 && (
+                        {statusOptions.length > 0 && (
                             <div className="flex items-center gap-2 mb-4">
                                 <Label>Status</Label>
                                 <StatusSelect
                                     statuses={statuses}
                                     value={status}
                                     onChange={(newValue) => {
-                                        if (newValue.trim() === "") return; // TODO: handle this better
-                                        // unsure why an empty value is being sent, but preventing it this way for now
+                                        if (newValue.trim() === "") return;
                                         setStatus(newValue);
                                     }}
                                     trigger={({ isOpen, value }) => (
@@ -188,11 +167,11 @@ export function IssueModal({
                         <Field
                             label="Title"
                             value={title}
-                            onChange={(e) => setTitle(e.target.value)}
-                            validate={(v) =>
-                                v.trim() === ""
+                            onChange={(event) => setTitle(event.target.value)}
+                            validate={(value) =>
+                                value.trim() === ""
                                     ? "Cannot be empty"
-                                    : v.trim().length > ISSUE_TITLE_MAX_LENGTH
+                                    : value.trim().length > ISSUE_TITLE_MAX_LENGTH
                                       ? `Too long (${ISSUE_TITLE_MAX_LENGTH} character limit)`
                                       : undefined
                             }
@@ -203,9 +182,9 @@ export function IssueModal({
                         <Field
                             label="Description (optional)"
                             value={description}
-                            onChange={(e) => setDescription(e.target.value)}
-                            validate={(v) =>
-                                v.trim().length > ISSUE_DESCRIPTION_MAX_LENGTH
+                            onChange={(event) => setDescription(event.target.value)}
+                            validate={(value) =>
+                                value.trim().length > ISSUE_DESCRIPTION_MAX_LENGTH
                                     ? `Too long (${ISSUE_DESCRIPTION_MAX_LENGTH} character limit)`
                                     : undefined
                             }
@@ -214,14 +193,14 @@ export function IssueModal({
                             maxLength={ISSUE_DESCRIPTION_MAX_LENGTH}
                         />
 
-                        {sprints && sprints.length > 0 && (
+                        {sprints.length > 0 && (
                             <div className="flex items-center gap-2 mt-0">
                                 <Label className="text-sm">Sprint</Label>
                                 <SprintSelect sprints={sprints} value={sprintId} onChange={setSprintId} />
                             </div>
                         )}
 
-                        {members && members.length > 0 && (
+                        {members.length > 0 && (
                             <div className="flex items-start gap-2 mt-4">
                                 <Label className="text-sm pt-2">Assignees</Label>
                                 <MultiAssigneeSelect
diff --git a/packages/frontend/src/components/issue-timer.tsx b/packages/frontend/src/components/issue-timer.tsx
index b24c7f7..8a5ca91 100644
--- a/packages/frontend/src/components/issue-timer.tsx
+++ b/packages/frontend/src/components/issue-timer.tsx
@@ -1,29 +1,23 @@
 import type { TimerState } from "@sprint/shared";
 import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
-import { parseError, timer } from "@/lib/server";
+import { useEndTimer, useTimerState, useToggleTimer } from "@/lib/query/hooks";
+import { parseError } from "@/lib/server";
 import { cn, formatTime } from "@/lib/utils";
 
 export function IssueTimer({ issueId, onEnd }: { issueId: number; onEnd?: (data: TimerState) => void }) {
-    const [timerState, setTimerState] = useState<TimerState>(null);
+    const { data: timerState, error } = useTimerState(issueId);
+    const toggleTimer = useToggleTimer();
+    const endTimer = useEndTimer();
     const [displayTime, setDisplayTime] = useState(0);
-    const [error, setError] = useState<string | null>(null);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-    // fetch current timer state on mount
     useEffect(() => {
-        timer.get({
-            issueId,
-            onSuccess: (data) => {
-                setTimerState(data);
-                if (data) {
-                    setDisplayTime(data.workTimeMs);
-                }
-            },
-            onError: (err) => setError(parseError(err)),
-        });
-    }, [issueId]);
+        if (timerState) {
+            setDisplayTime(timerState.workTimeMs);
+        }
+    }, [timerState]);
 
-    // update display time every second when running
     useEffect(() => {
         if (!timerState?.isRunning) return;
 
@@ -37,33 +31,34 @@ export function IssueTimer({ issueId, onEnd }: { issueId: number; onEnd?: (data:
         return () => clearInterval(interval);
     }, [timerState?.isRunning, timerState?.workTimeMs]);
 
-    const handleToggle = () => {
-        timer.toggle({
-            issueId,
-            onSuccess: (data) => {
-                if (data) {
-                    setTimerState(data);
-                    setDisplayTime(data.workTimeMs);
-                }
-                setError(null);
-            },
-            onError: (err) => setError(parseError(err)),
-        });
+    useEffect(() => {
+        if (!error) return;
+        setErrorMessage(parseError(error as Error));
+    }, [error]);
+
+    const handleToggle = async () => {
+        try {
+            const data = await toggleTimer.mutateAsync({ issueId });
+            if (data) {
+                setDisplayTime(data.workTimeMs);
+            }
+            setErrorMessage(null);
+        } catch (err) {
+            setErrorMessage(parseError(err as Error));
+        }
     };
 
-    const handleEnd = () => {
-        timer.end({
-            issueId,
-            onSuccess: (data) => {
-                if (data) {
-                    setTimerState(data);
-                    setDisplayTime(data.workTimeMs);
-                    onEnd?.(data);
-                }
-                setError(null);
-            },
-            onError: (err) => setError(parseError(err)),
-        });
+    const handleEnd = async () => {
+        try {
+            const data = await endTimer.mutateAsync({ issueId });
+            if (data) {
+                setDisplayTime(data.workTimeMs);
+                onEnd?.(data);
+            }
+            setErrorMessage(null);
+        } catch (err) {
+            setErrorMessage(parseError(err as Error));
+        }
     };
 
     return (
@@ -72,7 +67,7 @@ export function IssueTimer({ issueId, onEnd }: { issueId: number; onEnd?: (data:
                 {formatTime(displayTime)}
             </div>
 
-            {error && <p className="text-red-500 text-sm">{error}</p>}
+            {errorMessage && <p className="text-red-500 text-sm">{errorMessage}</p>}
 
             <div className="flex gap-4">
                 <Button onClick={handleToggle}>
diff --git a/packages/frontend/src/components/timer-display.tsx b/packages/frontend/src/components/timer-display.tsx
index 3c5d790..4fd461d 100644
--- a/packages/frontend/src/components/timer-display.tsx
+++ b/packages/frontend/src/components/timer-display.tsx
@@ -1,72 +1,37 @@
-import type { TimerState } from "@sprint/shared";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
-import { parseError, timer } from "@/lib/server";
+import { useInactiveTimers, useTimerState } from "@/lib/query/hooks";
+import { parseError } from "@/lib/server";
 import { formatTime } from "@/lib/utils";
 
 const FALLBACK_TIME = "--:--:--";
 const REFRESH_INTERVAL_MS = 10000;
 
 export function TimerDisplay({ issueId }: { issueId: number }) {
-    const [timerState, setTimerState] = useState<TimerState>(null);
+    const { data: timerState, error: timerError } = useTimerState(issueId, {
+        refetchInterval: REFRESH_INTERVAL_MS,
+    });
+    const { data: inactiveTimers = [], error: inactiveError } = useInactiveTimers(issueId, {
+        refetchInterval: REFRESH_INTERVAL_MS,
+    });
+
     const [workTimeMs, setWorkTimeMs] = useState(0);
-    const [inactiveWorkTimeMs, setInactiveWorkTimeMs] = useState(0);
     const [error, setError] = useState<string | null>(null);
 
+    const combinedError = timerError ?? inactiveError;
+
     useEffect(() => {
-        let isMounted = true;
-
-        const fetchTimer = () => {
-            timer.get({
-                issueId,
-                onSuccess: (data) => {
-                    if (!isMounted) return;
-                    setTimerState(data);
-                    setWorkTimeMs(data?.workTimeMs ?? 0);
-                    setError(null);
-                },
-                onError: (err) => {
-                    if (!isMounted) return;
-                    const message = parseError(err);
-                    setError(message);
-
-                    toast.error(`Error fetching timer data: ${message}`, {
-                        dismissible: false,
-                    });
-                },
+        if (combinedError) {
+            const message = parseError(combinedError as Error);
+            setError(message);
+            toast.error(`Error fetching timer data: ${message}`, {
+                dismissible: false,
             });
-
-            timer.getInactive({
-                issueId,
-                onSuccess: (data) => {
-                    if (!isMounted) return;
-                    const totalWorkTime = data.reduce(
-                        (total, session) => total + (session?.workTimeMs ?? 0),
-                        0,
-                    );
-                    setInactiveWorkTimeMs(totalWorkTime);
-                    setError(null);
-                },
-                onError: (err) => {
-                    if (!isMounted) return;
-                    const message = parseError(err);
-                    setError(message);
-
-                    toast.error(`Error fetching timer data: ${message}`, {
-                        dismissible: false,
-                    });
-                },
-            });
-        };
-
-        fetchTimer();
-        const refreshInterval = window.setInterval(fetchTimer, REFRESH_INTERVAL_MS);
-
-        return () => {
-            isMounted = false;
-            window.clearInterval(refreshInterval);
-        };
-    }, [issueId]);
+            return;
+        }
+        setError(null);
+        setWorkTimeMs(timerState?.workTimeMs ?? 0);
+    }, [combinedError, timerState]);
 
     useEffect(() => {
         if (!timerState?.isRunning) return;
@@ -80,6 +45,11 @@ export function TimerDisplay({ issueId }: { issueId: number }) {
         return () => window.clearInterval(interval);
     }, [timerState?.isRunning, timerState?.workTimeMs]);
 
+    const inactiveWorkTimeMs = useMemo(
+        () => inactiveTimers.reduce((total, session) => total + (session?.workTimeMs ?? 0), 0),
+        [inactiveTimers],
+    );
+
     const totalWorkTimeMs = inactiveWorkTimeMs + workTimeMs;
     const displayWorkTime = error ? FALLBACK_TIME : formatTime(totalWorkTimeMs);