WEB - DELETE ISSUE

pkg/web/components/dashboard.templ

@@ -57,7 +57,28 @@ templ DashboardPage(props DashboardPageProps) {
 
 			<div class="w-full lg:w-1/2 xl:w-[55%] p-4 overflow-auto">
 				if props.SelectedIssue != nil {
-					<div class="max-w-2xl">
+					<div class="max-w-2xl space-y-4">
+						<div class="flex flex-wrap items-center gap-2">
+							<a
+								class="btn btn-ghost btn-sm"
+								href={ "/issues/" + props.SelectedIssue.ID }
+								hx-get={ "/issues/" + props.SelectedIssue.ID }
+								hx-target="main"
+								hx-swap="innerHTML"
+								hx-push-url="true"
+							>
+								View full page
+							</a>
+							<button
+								type="button"
+								class="btn btn-error btn-sm btn-outline"
+								hx-delete={ "/issues/" + props.SelectedIssue.ID }
+								hx-confirm="Are you sure you want to delete this issue? This action cannot be undone."
+								hx-target="body"
+							>
+								Delete issue
+							</button>
+						</div>
 						@IssueDetailCard(IssueDetailCardProps{
 							Issue:           *props.SelectedIssue,
 							DisplayOwner:    props.DisplayOwner,

pkg/web/components/issue.templ

@@ -92,6 +92,7 @@ templ IssueTable(props IssueTableProps) {
 			base.PlainText("Status"),
 			base.PlainText("Type"),
 			base.PlainText("Priority"),
+			base.PlainText("Actions"),
 		},
 		[]templ.Component{
 			IssueRows(props.Issues),
@@ -124,6 +125,18 @@ templ IssueRows(issues []models.Issue) {
 			<td class="px-4 py-2 border">{ string(issue.Status) }</td>
 			<td class="px-4 py-2 border">{ string(issue.IssueType) }</td>
 			<td class="px-4 py-2 border">{ fmt.Sprintf("P%d", issue.Priority) }</td>
+			<td class="px-4 py-2 border">
+				<button
+					type="button"
+					class="btn btn-error btn-xs btn-ghost"
+					hx-delete={ "/issues/" + issue.ID }
+					hx-confirm="Are you sure you want to delete this issue? This action cannot be undone."
+					hx-target="body"
+					title="Delete issue"
+				>
+					Delete
+				</button>
+			</td>
 		</tr>
 	}
 }

pkg/web/components/issue_detail_card.templ

@@ -29,6 +29,17 @@ templ IssueDetailCard(props IssueDetailCardProps) {
 				</div>
 			}
 			<div class="divider my-2"></div>
+			<div class="flex flex-wrap gap-2 mt-2">
+				<button
+					type="button"
+					class="btn btn-error btn-sm btn-outline"
+					hx-delete={ "/issues/" + props.Issue.ID }
+					hx-confirm="Are you sure you want to delete this issue? This action cannot be undone."
+					hx-target="body"
+				>
+					Delete issue
+				</button>
+			</div>
 			<div class="grid grid-cols-2 gap-2 text-sm">
 				<div class="bg-base-200 rounded-lg p-2">
 					<span class="text-xs opacity-70 block">Created</span>

pkg/web/handler/issues.go

@@ -176,6 +176,7 @@ func UpdateIssue(w http.ResponseWriter, r *http.Request) {
 
 func DeleteIssue(w http.ResponseWriter, r *http.Request) {
 	issue := r.Context().Value(issueKey).(*models.Issue)
+	hx := HTMX(r)
 
 	app := App(r)
 	if err := app.Issues.DeleteIssue(r.Context(), issue.ID); err != nil {
@@ -183,7 +184,9 @@ func DeleteIssue(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	w.Header().Set("Content-Type", "application/json")
+	if hx.IsHxRequest() {
+		w.Header().Set("HX-Redirect", "/dashboard")
+	}
 	w.WriteHeader(http.StatusNoContent)
 }
 

pkg/web/routes/issue_detail.templ

@@ -14,7 +14,7 @@ type IssueDetailProps struct {
 
 templ IssueDetailContent(props IssueDetailProps) {
 	<div class="container mx-auto px-4 py-6">
-		<div class="mb-4">
+		<div class="mb-4 flex flex-wrap items-center gap-2">
 			<a
 				class="btn btn-ghost btn-sm"
 				hx-get="/"
@@ -25,6 +25,15 @@ templ IssueDetailContent(props IssueDetailProps) {
 				@components.IconBack()
 				Back to Issues
 			</a>
+			<button
+				type="button"
+				class="btn btn-error btn-sm btn-outline"
+				hx-delete={ "/issues/" + props.Issue.ID }
+				hx-confirm="Are you sure you want to delete this issue? This action cannot be undone."
+				hx-target="body"
+			>
+				Delete issue
+			</button>
 		</div>
 		<div class="mb-6">
 			@components.IssueDetailCard(components.IssueDetailCardProps{Issue: props.Issue, DisplayOwner: props.DisplayOwner, DisplayAssignee: props.DisplayAssignee})