include project owner

packages/backend/src/routes/project/all.ts

@@ -1,9 +1,9 @@
 import type { BunRequest } from "bun";
-import { getAllProjects } from "../../db/queries";
+import { getProjectsWithOwners } from "../../db/queries";
 
 // /projects/all
 export default async function projectsAll(req: BunRequest) {
-    const projects = await getAllProjects();
+    const projects = await getProjectsWithOwners();
 
     return Response.json(projects);
 }

packages/frontend/src/Index.tsx

@@ -1,12 +1,13 @@
-import type { IssueResponse, ProjectRecord } from "@issue/shared";
+import type { IssueResponse, ProjectResponse } from "@issue/shared";
 import { useEffect, useRef, useState } from "react";
 import { IssueDetailPane } from "@/components/issue-detail-pane";
 import { IssuesTable } from "@/components/issues-table";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import SmallUserDisplay from "./components/small-user-display";
 
 function Index() {
-    const [selectedProject, setSelectedProject] = useState<ProjectRecord | null>(null);
-    const [projects, setProjects] = useState<ProjectRecord[]>([]);
+    const [selectedProject, setSelectedProject] = useState<ProjectResponse | null>(null);
+    const [projects, setProjects] = useState<ProjectResponse[]>([]);
     const projectsRef = useRef(false);
 
     useEffect(() => {
@@ -15,7 +16,7 @@ function Index() {
 
         fetch("http://localhost:3000/projects/all")
             .then((res) => res.json())
-            .then((data: ProjectRecord[]) => {
+            .then((data: ProjectResponse[]) => {
                 setProjects(data);
             })
             .catch((err) => {
@@ -31,11 +32,10 @@ function Index() {
     useEffect(() => {
         if (!selectedProject) return;
 
-        fetch(`${serverURL}/issues/${selectedProject.blob}`)
+        fetch(`${serverURL}/issues/${selectedProject.Project.blob}`)
             .then((res) => res.json())
             .then((data: IssueResponse[]) => {
                 setIssues(data);
-                console.log(data);
             })
             .catch((err) => {
                 console.error("error fetching issues:", err);
@@ -45,7 +45,7 @@ function Index() {
     return (
         <main className="w-full h-full p-1">
             {/* header area */}
-            <div className="flex gap-2">
+            <div className="flex gap-4 items-center">
                 <Select
                     onValueChange={(value) => {
                         if (value === "NONE") {
@@ -53,7 +53,7 @@ function Index() {
                             setSelectedIssue(null);
                             setIssues([]);
                         }
-                        const project = projects.find((p) => p.id === Number(value));
+                        const project = projects.find((p) => p.Project.id === Number(value));
                         if (!project) {
                             // TODO: toast here
                             console.error(`NO PROJECT FOUND FOR ID: ${value}`);
@@ -65,20 +65,27 @@ function Index() {
                 >
                     <SelectTrigger className="h-8 lg:flex">
                         <SelectValue
-                            placeholder={selectedProject ? `P: ${selectedProject.name}` : "Select Project"}
+                            placeholder={
+                                selectedProject ? `P: ${selectedProject.Project.name}` : "Select Project"
+                            }
                         />
                     </SelectTrigger>
                     <SelectContent side="bottom" position="popper">
                         {projects.map((project) => (
-                            <SelectItem key={project.id} value={`${project.id}`}>
-                                {project.name}
+                            <SelectItem key={project.Project.id} value={`${project.Project.id}`}>
+                                {project.Project.name}
                             </SelectItem>
                         ))}
                     </SelectContent>
                 </Select>
+                {selectedProject && (
+                    <div className="flex items-center gap-2">
+                        Owner: <SmallUserDisplay user={selectedProject?.User} />
+                    </div>
+                )}
             </div>
             {/* main body */}
-            <div className="w-full h-full flex items-start justify-between pt-2 gap-2">
+            <div className="w-full h-full flex items-start justify-between pt-1 gap-2">
                 {selectedProject && issuesData.length > 0 && (
                     <>
                         {/* issues list (table) */}

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

@@ -1,14 +1,15 @@
-import type { IssueResponse, ProjectRecord } from "@issue/shared";
+import type { IssueResponse, ProjectResponse } from "@issue/shared";
 import { X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { issueID } from "@/lib/utils";
+import SmallUserDisplay from "./small-user-display";
 
 export function IssueDetailPane({
     project,
     issueData,
     close,
 }: {
-    project: ProjectRecord;
+    project: ProjectResponse;
     issueData: IssueResponse;
     close: () => void;
 }) {
@@ -16,7 +17,9 @@ export function IssueDetailPane({
         <div className="flex flex-col">
             <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">{issueID(project.blob, issueData.Issue.number)}</p>
+                    <p className="text-sm w-fit px-1">
+                        {issueID(project.Project.blob, issueData.Issue.number)}
+                    </p>
                 </span>
 
                 <Button variant={"dummy"} onClick={close} className="px-0 py-0 w-6 h-6">
@@ -28,10 +31,12 @@ export function IssueDetailPane({
                 <h1 className="text-md">{issueData.Issue.title}</h1>
                 <p className="text-sm">{issueData.Issue.description}</p>
 
-                <p className="text-sm">
-                    Assignee:{" "}
-                    {issueData.User ? `${issueData.User.name} (${issueData.User.username})` : "Unassigned"}
-                </p>
+                {issueData.User && (
+                    <div className="flex items-center gap-2">
+                        Assignee:
+                        {issueData.User ? <SmallUserDisplay user={issueData.User} /> : "Unassigned"}
+                    </div>
+                )}
             </div>
         </div>
     );

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

@@ -1,4 +1,4 @@
-import type { IssueResponse, ProjectRecord } from "@issue/shared";
+import type { IssueResponse, ProjectResponse } from "@issue/shared";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { cn } from "@/lib/utils";
 
@@ -9,7 +9,7 @@ export function IssuesTable({
     issueSelectAction,
     className,
 }: {
-    project: ProjectRecord;
+    project: ProjectResponse;
     issuesData: IssueResponse[];
     columns?: { id?: boolean; title?: boolean; description?: boolean; assignee?: boolean };
     issueSelectAction?: (issue: IssueResponse) => void;

packages/shared/src/index.ts

@@ -22,6 +22,7 @@ export {
 } from "./schema";
 
 // Responses
-export {
+export type {
     IssueResponse,
+    ProjectResponse,
 } from "./schema"

packages/shared/src/schema.ts

@@ -65,3 +65,8 @@ export type IssueResponse = {
     Issue: IssueRecord;
     User?: UserRecord;
 };
+
+export type ProjectResponse = {
+    Project: ProjectRecord;
+    User: UserRecord;
+};