delete issue functionality

packages/frontend/src/components/issue-detail-pane.tsx

@@ -1,5 +1,5 @@
 import type { IssueResponse, ProjectResponse, UserRecord } from "@issue/shared";
-import { X } from "lucide-react";
+import { Trash, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useSession } from "@/components/session-provider";
 import SmallUserDisplay from "@/components/small-user-display";
@@ -7,6 +7,7 @@ import { StatusSelect } from "@/components/status-select";
 import StatusTag from "@/components/status-tag";
 import { TimerModal } from "@/components/timer-modal";
 import { Button } from "@/components/ui/button";
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
 import { SelectTrigger } from "@/components/ui/select";
 import { UserSelect } from "@/components/user-select";
 import { issue } from "@/lib/server";
@@ -19,6 +20,7 @@ export function IssueDetailPane({
     statuses,
     close,
     onIssueUpdate,
+    onIssueDelete,
 }: {
     project: ProjectResponse;
     issueData: IssueResponse;
@@ -26,12 +28,14 @@ export function IssueDetailPane({
     statuses: Record<string, string>;
     close: () => void;
     onIssueUpdate?: () => void;
+    onIssueDelete?: (issueId: number) => void | Promise<void>;
 }) {
     const { user } = useSession();
     const [assigneeId, setAssigneeId] = useState<string>(
         issueData.Issue.assigneeId?.toString() ?? "unassigned",
     );
     const [status, setStatus] = useState<string>(issueData.Issue.status);
+    const [deleteOpen, setDeleteOpen] = useState(false);
 
     useEffect(() => {
         setAssigneeId(issueData.Issue.assigneeId?.toString() ?? "unassigned");
@@ -71,6 +75,23 @@ export function IssueDetailPane({
         });
     };
 
+    const handleDelete = () => {
+        setDeleteOpen(true);
+    };
+
+    const handleConfirmDelete = async () => {
+        await issue.delete({
+            issueId: issueData.Issue.id,
+            onSuccess: async () => {
+                await onIssueDelete?.(issueData.Issue.id);
+            },
+            onError: (error) => {
+                console.error("error deleting issue:", error);
+            },
+        });
+        setDeleteOpen(false);
+    };
+
     return (
         <div className="flex flex-col">
             <div className="flex flex-row items-center justify-end border-b h-[25px]">
@@ -79,10 +100,19 @@ export function IssueDetailPane({
                         {issueID(project.Project.key, issueData.Issue.number)}
                     </p>
                 </span>
-
-                <Button variant={"dummy"} onClick={close} className="px-0 py-0 w-6 h-6">
-                    <X />
-                </Button>
+                <div className="flex gap-1 items-center">
+                    <Button
+                        variant="dummy"
+                        size="none"
+                        onClick={handleDelete}
+                        className="text-destructive hover:text-destructive/70"
+                    >
+                        <Trash />
+                    </Button>
+                    <Button variant={"dummy"} onClick={close} className="px-0 py-0 w-6 h-6">
+                        <X />
+                    </Button>
+                </div>
             </div>
 
             <div className="flex flex-col w-full p-2 py-2 gap-2">
@@ -134,6 +164,16 @@ export function IssueDetailPane({
                         <TimerModal issueId={issueData.Issue.id} />
                     </div>
                 )}
+                <ConfirmDialog
+                    open={deleteOpen}
+                    onOpenChange={setDeleteOpen}
+                    onConfirm={handleConfirmDelete}
+                    title="Delete issue"
+                    message="This will permanently delete the issue."
+                    processingText="Deleting..."
+                    confirmText="Delete"
+                    variant="destructive"
+                />
             </div>
         </div>
     );

packages/frontend/src/lib/server/issue/delete.ts

@@ -0,0 +1,30 @@
+import { getCsrfToken, getServerURL } from "@/lib/utils";
+import type { ServerQueryInput } from "..";
+
+export async function remove({
+    issueId,
+    onSuccess,
+    onError,
+}: {
+    issueId: number;
+} & ServerQueryInput) {
+    const url = new URL(`${getServerURL()}/issue/delete`);
+    url.searchParams.set("id", `${issueId}`);
+
+    const csrfToken = getCsrfToken();
+    const headers: HeadersInit = {};
+    if (csrfToken) headers["X-CSRF-Token"] = csrfToken;
+
+    const res = await fetch(url.toString(), {
+        headers,
+        credentials: "include",
+    });
+
+    if (!res.ok) {
+        const error = await res.text();
+        onError?.(error || `failed to delete issue (${res.status})`);
+    } else {
+        const data = await res.text();
+        onSuccess?.(data, res);
+    }
+}

packages/frontend/src/lib/server/issue/index.ts

@@ -1,5 +1,6 @@
 export { byProject } from "@/lib/server/issue/byProject";
 export { create } from "@/lib/server/issue/create";
+export { remove as delete } from "@/lib/server/issue/delete";
 export { replaceStatus } from "@/lib/server/issue/replaceStatus";
 export { statusCount } from "@/lib/server/issue/statusCount";
 export { update } from "@/lib/server/issue/update";

packages/frontend/src/pages/App.tsx

@@ -191,6 +191,12 @@ export default function App() {
         }
     };
 
+    const handleIssueDelete = async (issueId: number) => {
+        setSelectedIssue(null);
+        setIssues((prev) => prev.filter((issue) => issue.Issue.id !== issueId));
+        await refetchIssues();
+    };
+
     // fetch issues when project is selected
     useEffect(() => {
         if (!selectedProject) return;
@@ -318,6 +324,7 @@ export default function App() {
                                         statuses={selectedOrganisation.Organisation.statuses}
                                         close={() => setSelectedIssue(null)}
                                         onIssueUpdate={refetchIssues}
+                                        onIssueDelete={handleIssueDelete}
                                     />
                                 </div>
                             </ResizablePanel>