implemented issue identifiers (<project_blob>-<issue_number>)

packages/frontend/src/Index.tsx

@@ -78,8 +78,11 @@ function Index() {
             </div>
             {/* main body */}
             <div className="w-full h-full flex items-start justify-between pt-2 gap-2">
+                {selectedProject && issues.length > 0 && (
+                    <>
                         {/* issues list (table) */}
                         <IssuesTable
+                            project={selectedProject}
                             issues={issues}
                             columns={{ description: false }}
                             issueSelectAction={setSelectedIssue}
@@ -88,9 +91,15 @@ function Index() {
                         {/* issue detail pane */}
                         {selectedIssue && (
                             <div className="border w-2xl">
-                        <IssueDetailPane issue={selectedIssue} close={() => setSelectedIssue(null)} />
+                                <IssueDetailPane
+                                    project={selectedProject}
+                                    issue={selectedIssue}
+                                    close={() => setSelectedIssue(null)}
+                                />
                             </div>
                         )}
+                    </>
+                )}
             </div>
         </main>
     );

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

@@ -1,13 +1,28 @@
-import type { IssueRecord } from "@issue/shared";
+import type { IssueRecord, ProjectRecord } from "@issue/shared";
 import { X } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { issueID } from "@/lib/utils";
 
-export function IssueDetailPane({ issue, close }: { issue: IssueRecord; close: () => void }) {
+export function IssueDetailPane({
+    project,
+    issue,
+    close,
+}: {
+    project: ProjectRecord;
+    issue: IssueRecord;
+    close: () => void;
+}) {
     return (
-        <div className="flex flex-col items-end">
+        <div className="flex flex-col">
+            <div className="flex flex-row items-center justify-end border-b">
+                <span className="w-full px-0.5">
+                    <p className="text-sm w-fit px-0.75">{issueID(project.blob, issue.number)}</p>
+                </span>
+
                 <Button variant={"dummy"} onClick={close} className="px-0 py-0 w-6 h-6">
                     <X />
                 </Button>
+            </div>
 
             <div className="flex flex-col w-full p-2 gap-2">
                 <h1 className="text-md">{issue.title}</h1>

packages/frontend/src/components/issues-table.tsx

@@ -1,25 +1,26 @@
-import type { IssueRecord } from "@issue/shared";
+import type { IssueRecord, ProjectRecord } from "@issue/shared";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { cn } from "@/lib/utils";
+import { cn, issueID } from "@/lib/utils";
 
 export function IssuesTable({
+    project,
     issues,
     columns = {},
     issueSelectAction,
     className,
 }: {
+    project: ProjectRecord;
     issues: IssueRecord[];
     columns?: { id?: boolean; title?: boolean; description?: boolean; assignee?: boolean };
     issueSelectAction?: (issue: IssueRecord) => void;
     className: string;
 }) {
-    if (issues.length === 0) return;
     return (
         <Table className={cn(className)}>
             <TableHeader>
                 <TableRow hoverEffect={false}>
                     {(columns.id == null || columns.id === true) && (
-                        <TableHead className="w-[1px] border-r">ID</TableHead>
+                        <TableHead className="text-right w-[1px] border-r">ID</TableHead>
                     )}
                     {(columns.title == null || columns.title === true) && <TableHead>Title</TableHead>}
                     {(columns.description == null || columns.description === true) && (
@@ -39,8 +40,8 @@ export function IssuesTable({
                         }}
                     >
                         {(columns.id == null || columns.id === true) && (
-                            <TableCell className="font-medium border-r">
+                            <TableCell className="font-medium border-r text-right">
-                                {String(issue.id).padStart(3, "0")}
+                                {issue.number.toString().padStart(3, "0")}
                             </TableCell>
                         )}
                         {(columns.title == null || columns.title === true) && (