From 5f8d049de31a967fb1641e5bbaedbb23a31cfff3 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Wed, 21 Jan 2026 13:09:04 +0000
Subject: [PATCH] table rows as links

---
 .../frontend/src/components/issues-table.tsx  | 96 +++++++++++++------
 1 file changed, 69 insertions(+), 27 deletions(-)

diff --git a/packages/frontend/src/components/issues-table.tsx b/packages/frontend/src/components/issues-table.tsx
index aeee09d..aa0f6ae 100644
--- a/packages/frontend/src/components/issues-table.tsx
+++ b/packages/frontend/src/components/issues-table.tsx
@@ -3,7 +3,7 @@ import Avatar from "@/components/avatar";
 import { useSelection } from "@/components/selection-provider";
 import StatusTag from "@/components/status-tag";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { useIssues, useSelectedOrganisation } from "@/lib/query/hooks";
+import { useIssues, useSelectedOrganisation, useSelectedProject } from "@/lib/query/hooks";
 import { cn } from "@/lib/utils";
 
 export function IssuesTable({
@@ -16,10 +16,28 @@ export function IssuesTable({
     const { selectedProjectId, selectedIssueId, selectIssue } = useSelection();
     const { data: issuesData = [] } = useIssues(selectedProjectId);
     const selectedOrganisation = useSelectedOrganisation();
+    const selectedProject = useSelectedProject();
     const statuses = selectedOrganisation?.Organisation.statuses ?? {};
 
     const issues = useMemo(() => [...issuesData].reverse(), [issuesData]);
 
+    const getIssueUrl = (issueNumber: number) => {
+        if (!selectedOrganisation || !selectedProject) return "#";
+        const params = new URLSearchParams();
+        params.set("o", selectedOrganisation.Organisation.slug.toLowerCase());
+        params.set("p", selectedProject.Project.key.toLowerCase());
+        params.set("i", issueNumber.toString());
+        return `/app?${params.toString()}`;
+    };
+
+    const handleLinkClick = (e: React.MouseEvent) => {
+        if (e.metaKey || e.ctrlKey || e.shiftKey) {
+            e.stopPropagation();
+            return;
+        }
+        e.preventDefault();
+    };
+
     return (
         <Table className={cn("table-fixed", className)}>
             <TableHeader>
@@ -51,13 +69,23 @@ export function IssuesTable({
                         }}
                     >
                         {(columns.id == null || columns.id === true) && (
-                            <TableCell className="font-medium border-r text-right">
-                                {issueData.Issue.number.toString().padStart(3, "0")}
+                            <TableCell className="font-medium border-r text-right p-0">
+                                <a
+                                    href={getIssueUrl(issueData.Issue.number)}
+                                    onClick={handleLinkClick}
+                                    className="block w-full h-full px-2 py-1 text-inherit hover:underline decoration-transparent"
+                                >
+                                    {issueData.Issue.number.toString().padStart(3, "0")}
+                                </a>
                             </TableCell>
                         )}
                         {(columns.title == null || columns.title === true) && (
-                            <TableCell className="min-w-0">
-                                <div className="flex items-center gap-2 min-w-0">
+                            <TableCell className="min-w-0 p-0">
+                                <a
+                                    href={getIssueUrl(issueData.Issue.number)}
+                                    onClick={handleLinkClick}
+                                    className="flex items-center gap-2 min-w-0 w-full h-full px-2 py-1 text-inherit hover:underline decoration-transparent"
+                                >
                                     {(columns.status == null || columns.status === true) && (
                                         <StatusTag
                                             status={issueData.Issue.status}
@@ -65,33 +93,47 @@ export function IssuesTable({
                                         />
                                     )}
                                     <span className="truncate">{issueData.Issue.title}</span>
-                                </div>
+                                </a>
                             </TableCell>
                         )}
                         {(columns.description == null || columns.description === true) && (
-                            <TableCell className="overflow-hidden">{issueData.Issue.description}</TableCell>
+                            <TableCell className="overflow-hidden p-0">
+                                <a
+                                    href={getIssueUrl(issueData.Issue.number)}
+                                    onClick={handleLinkClick}
+                                    className="block w-full h-full px-2 py-1 text-inherit hover:underline decoration-transparent"
+                                >
+                                    {issueData.Issue.description}
+                                </a>
+                            </TableCell>
                         )}
                         {(columns.assignee == null || columns.assignee === true) && (
-                            <TableCell className={"flex items-center justify-end py-0 h-[32px]"}>
-                                {issueData.Assignees && issueData.Assignees.length > 0 && (
-                                    <div className="flex items-center -space-x-2 pr-1.5">
-                                        {issueData.Assignees.slice(0, 3).map((assignee) => (
-                                            <Avatar
-                                                key={assignee.id}
-                                                name={assignee.name}
-                                                username={assignee.username}
-                                                avatarURL={assignee.avatarURL}
-                                                textClass="text-xs"
-                                                className="ring-1 ring-background"
-                                            />
-                                        ))}
-                                        {issueData.Assignees.length > 3 && (
-                                            <span className="flex items-center justify-center w-6 h-6 text-[10px] font-medium bg-muted text-muted-foreground rounded-full ring-1 ring-background">
-                                                +{issueData.Assignees.length - 3}
-                                            </span>
-                                        )}
-                                    </div>
-                                )}
+                            <TableCell className="h-[32px] p-0">
+                                <a
+                                    href={getIssueUrl(issueData.Issue.number)}
+                                    onClick={handleLinkClick}
+                                    className="flex items-center justify-end w-full h-full px-2"
+                                >
+                                    {issueData.Assignees && issueData.Assignees.length > 0 && (
+                                        <div className="flex items-center -space-x-2 pr-1.5">
+                                            {issueData.Assignees.slice(0, 3).map((assignee) => (
+                                                <Avatar
+                                                    key={assignee.id}
+                                                    name={assignee.name}
+                                                    username={assignee.username}
+                                                    avatarURL={assignee.avatarURL}
+                                                    textClass="text-xs"
+                                                    className="ring-1 ring-background"
+                                                />
+                                            ))}
+                                            {issueData.Assignees.length > 3 && (
+                                                <span className="flex items-center justify-center w-6 h-6 text-[10px] font-medium bg-muted text-muted-foreground rounded-full ring-1 ring-background">
+                                                    +{issueData.Assignees.length - 3}
+                                                </span>
+                                            )}
+                                        </div>
+                                    )}
+                                </a>
                             </TableCell>
                         )}
                     </TableRow>