utilised resizable panel group for IssuesTable + IssueDetailPane

This commit is contained in:
Oliver Bryan
2025-12-28 01:37:44 +00:00
parent aa2f8fff63
commit 82f39d3c4f

View File

@@ -15,6 +15,7 @@ import {
} from "@/components/ui/dropdown-menu";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { getAuthHeaders } from "@/lib/utils";
import { ResizablePanel, ResizablePanelGroup, ResizableSeparator } from "./components/ui/resizable";
function Index() {
const serverURL = import.meta.env.VITE_SERVER_URL?.trim() || "http://localhost:3000";
@@ -211,26 +212,39 @@ function Index() {
{/* main body */}
<div className="w-full h-full flex items-start justify-between pt-1 gap-1">
{selectedProject && issues.length > 0 && (
<>
{/* issues list (table) */}
<IssuesTable
project={selectedProject}
issuesData={issues}
columns={{ description: false }}
issueSelectAction={setSelectedIssue}
className="border w-full flex-shrink"
/>
<ResizablePanelGroup>
<ResizablePanel id={"left"} minSize={400}>
{/* issues list (table) */}
<IssuesTable
project={selectedProject}
issuesData={issues}
columns={{ description: false }}
issueSelectAction={setSelectedIssue}
className="border w-full flex-shrink"
/>
</ResizablePanel>
{/* issue detail pane */}
{selectedIssue && (
<div className="border w-2xl">
<IssueDetailPane
project={selectedProject}
issueData={selectedIssue}
close={() => setSelectedIssue(null)}
/>
</div>
<>
<ResizableSeparator />
<ResizablePanel
id={"right"}
defaultSize={"30%"}
minSize={360}
maxSize={"60%"}
>
<div className="border">
<IssueDetailPane
project={selectedProject}
issueData={selectedIssue}
close={() => setSelectedIssue(null)}
/>
</div>
</ResizablePanel>
</>
)}
</>
</ResizablePanelGroup>
)}
</div>