ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-07 18:23:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

resizable sidebar

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-21 23:42:41 +00:00
parent f16bb9d671
commit f4540f0e74
1 changed files with 189 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
packages/frontend/src/pages/Timeline.tsx
View File

@@ -10,6 +10,7 @@ import { useSelection } from "@/components/selection-provider";
import { SprintForm } from "@/components/sprint-form"; import { SprintForm } from "@/components/sprint-form";
import StatusTag from "@/components/status-tag"; import StatusTag from "@/components/status-tag";
import TopBar from "@/components/top-bar"; import TopBar from "@/components/top-bar";
import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { BREATHING_ROOM } from "@/lib/layout"; import { BREATHING_ROOM } from "@/lib/layout";
import { import {
useIssues, useIssues,
@@ -21,8 +22,10 @@ import {
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
const DAY_MS = 24 * 60 * 60 * 1000; const DAY_MS = 24 * 60 * 60 * 1000;
const TIMELINE_LABEL_WIDTH = 240; const TIMELINE_LABEL_DEFAULT_SIZE = 420;
const WEEK_COLUMN_WIDTH = 140; const TIMELINE_LABEL_MIN_SIZE = 300;
const TIMELINE_LABEL_MAX_SIZE = "55%";
const WEEK_COLUMN_WIDTH = 160;
const addDays = (value: Date, days: number) => const addDays = (value: Date, days: number) =>
new Date(value.getFullYear(), value.getMonth(), value.getDate() + days); new Date(value.getFullYear(), value.getMonth(), value.getDate() + days);
@@ -176,9 +179,9 @@ export default function Timeline() {
const statuses = selectedOrganisation?.Organisation.statuses ?? {}; const statuses = selectedOrganisation?.Organisation.statuses ?? {};
const gridTemplateColumns = useMemo(() => { const weekGridTemplateColumns = useMemo(() => {
if (weeks.length === 0) return `${TIMELINE_LABEL_WIDTH}px 1fr`; if (weeks.length === 0) return "1fr";
return `${TIMELINE_LABEL_WIDTH}px repeat(${weeks.length}, ${WEEK_COLUMN_WIDTH}px)`; return `repeat(${weeks.length}, ${WEEK_COLUMN_WIDTH}px)`;
}, [weeks.length]); }, [weeks.length]);
const todayMarker = useMemo(() => { const todayMarker = useMemo(() => {
@@ -243,24 +246,51 @@ export default function Timeline() {
{selectedOrganisationId && selectedProjectId && sprints.length > 0 && ( {selectedOrganisationId && selectedProjectId && sprints.length > 0 && (
<div className="border"> <div className="border">
<div className="overflow-x-auto" ref={scrollRef}> <ResizablePanelGroup className="h-full">
<div <ResizablePanel
style={{ id="timeline-labels"
minWidth: `${TIMELINE_LABEL_WIDTH + weeks.length * WEEK_COLUMN_WIDTH}px`, defaultSize={TIMELINE_LABEL_DEFAULT_SIZE}
}} minSize={TIMELINE_LABEL_MIN_SIZE}
maxSize={TIMELINE_LABEL_MAX_SIZE}
className="border-r"
> >
<div className="grid border-b bg-muted/20" style={{ gridTemplateColumns }}> <div className="flex flex-col">
<div <div
className={`px-${BREATHING_ROOM} py-${BREATHING_ROOM} text-xs font-medium text-muted-foreground bg-secondary border-r sticky left-0 z-30`} className={`px-${BREATHING_ROOM} py-${BREATHING_ROOM} text-xs font-medium text-muted-foreground bg-secondary border-b`}
> >
Sprint Sprint
</div> </div>
{weeks.map((week) => ( {sprints.map((sprint) => {
const sprintIssues = issueGroup.issuesBySprint.get(sprint.id) ?? [];
return (
<div
key={sprint.id}
className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} bg-background border-b`}
>
<SprintLabelContent sprint={sprint} sprintIssues={sprintIssues} statuses={statuses} />
</div>
);
})}
<div
className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} bg-background`}
>
<BacklogLabelContent issueGroup={issueGroup} statuses={statuses} />
</div>
</div>
</ResizablePanel>
<ResizablePanel id="timeline-grid">
<div className="overflow-x-auto" ref={scrollRef}>
<div style={{ minWidth: `${weeks.length * WEEK_COLUMN_WIDTH}px` }}>
<div
className="grid border-b bg-muted/20"
style={{ gridTemplateColumns: weekGridTemplateColumns }}
>
{weeks.map((week, index) => (
<div <div
key={week.toISOString()} key={week.toISOString()}
className={cn( className={cn(
`px-${BREATHING_ROOM} py-${BREATHING_ROOM} text-xs text-muted-foreground tabular-nums`, `px-${BREATHING_ROOM} py-${BREATHING_ROOM} text-xs text-muted-foreground tabular-nums`,
"border-l", index === 0 ? "" : "border-l",
)} )}
> >
{formatWeekLabel(week)} {formatWeekLabel(week)}
@@ -273,42 +303,17 @@ export default function Timeline() {
const barStyle = getSprintBarStyle(sprint); const barStyle = getSprintBarStyle(sprint);
const showTodayLabel = sprintIndex === 0; const showTodayLabel = sprintIndex === 0;
return ( return (
<div key={sprint.id} className="grid border-b" style={{ gridTemplateColumns }}> <div key={sprint.id} className="relative border-b">
<div <div
className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} bg-background relative z-30 border-r sticky left-0`} className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} opacity-0 pointer-events-none`}
> >
<div className={`flex items-center justify-between gap-3`}> <SprintLabelContent
<span sprint={sprint}
className="text-sm font-medium" sprintIssues={sprintIssues}
style={{ statuses={statuses}
color: sprint.color || DEFAULT_SPRINT_COLOUR,
}}
>
{sprint.name}
</span>
<div className="text-[12px] text-muted-foreground tabular-nums">
{getSprintDateRange(sprint)}
</div>
</div>
{sprintIssues.length === 0 && (
<div className="text-xs text-muted-foreground text-pretty">No issues assigned.</div>
)}
{sprintIssues.length > 0 && (
<div className={`flex flex-col gap-${BREATHING_ROOM}`}>
{sprintIssues.map((issue) => (
<IssueLine
key={issue.Issue.id}
issue={issue}
statusColour={statuses[issue.Issue.status] ?? DEFAULT_STATUS_COLOUR}
/> />
))}
</div> </div>
)} <div className={cn(`absolute inset-0 py-${BREATHING_ROOM}`)}>
</div>
<div
className={cn(`py-${BREATHING_ROOM} relative min-h-12`)}
style={{ gridColumn: "2 / -1" }}
>
<div <div
className="absolute inset-0 grid z-10 pointer-events-none" className="absolute inset-0 grid z-10 pointer-events-none"
style={{ style={{
@@ -328,7 +333,10 @@ export default function Timeline() {
style={{ left: `${todayMarker.leftPx}px` }} style={{ left: `${todayMarker.leftPx}px` }}
> >
<div <div
className={cn("absolute inset-y-0 w-px bg-primary", showTodayLabel && "mt-1")} className={cn(
"absolute inset-y-0 w-px bg-primary",
showTodayLabel && "mt-1",
)}
/> />
{showTodayLabel && ( {showTodayLabel && (
<div className="absolute -top-1.5"> <div className="absolute -top-1.5">
@@ -360,10 +368,73 @@ export default function Timeline() {
); );
})} })}
<div className="grid" style={{ gridTemplateColumns }}> <div className="relative">
<div <div
className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} bg-background relative z-30 border-r sticky left-0`} className={`px-${BREATHING_ROOM} pt-0.5 py-${BREATHING_ROOM} flex flex-col gap-${BREATHING_ROOM} opacity-0 pointer-events-none`}
> >
<BacklogLabelContent issueGroup={issueGroup} statuses={statuses} />
</div>
</div>
</div>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</div>
)}
</div>
</main>
);
}
function SprintLabelContent({
sprint,
sprintIssues,
statuses,
}: {
sprint: SprintRecord;
sprintIssues: IssueResponse[];
statuses: Record<string, string>;
}) {
return (
<>
<div className="flex items-center justify-between gap-3">
<span
className="text-sm font-medium"
style={{
color: sprint.color || DEFAULT_SPRINT_COLOUR,
}}
>
{sprint.name}
</span>
<div className="text-[12px] text-muted-foreground tabular-nums">{getSprintDateRange(sprint)}</div>
</div>
{sprintIssues.length === 0 && (
<div className="text-xs text-muted-foreground text-pretty">No issues assigned.</div>
)}
{sprintIssues.length > 0 && (
<div className={`flex flex-col gap-${BREATHING_ROOM}`}>
{sprintIssues.map((issue) => (
<IssueLine
key={issue.Issue.id}
issue={issue}
statusColour={statuses[issue.Issue.status] ?? DEFAULT_STATUS_COLOUR}
/>
))}
</div>
)}
</>
);
}
function BacklogLabelContent({
issueGroup,
statuses,
}: {
issueGroup: IssueGroup;
statuses: Record<string, string>;
}) {
return (
<>
<div className="text-sm font-medium">Backlog</div> <div className="text-sm font-medium">Backlog</div>
{issueGroup.unassigned.length === 0 && ( {issueGroup.unassigned.length === 0 && (
<div className="text-xs text-muted-foreground text-pretty">No unassigned issues.</div> <div className="text-xs text-muted-foreground text-pretty">No unassigned issues.</div>
@@ -379,20 +450,7 @@ export default function Timeline() {
))} ))}
</div> </div>
)} )}
</div> </>
<div
className={cn(
`px-${BREATHING_ROOM} py-${BREATHING_ROOM} border-l text-xs text-muted-foreground`,
)}
style={{ gridColumn: "2 / -1" }}
></div>
</div>
</div>
</div>
</div>
)}
</div>
</main>
); );
} }
@@ -412,8 +470,8 @@ function IssueLine({ issue, statusColour }: { issue: IssueResponse; statusColour
"hover:text-foreground cursor-pointer", "hover:text-foreground cursor-pointer",
)} )}
> >
<span className="tabular-nums">{issue.Issue.number.toString().padStart(3, "0")}</span>
<StatusTag status={issue.Issue.status} colour={statusColour} className="text-[10px]" /> <StatusTag status={issue.Issue.status} colour={statusColour} className="text-[10px]" />
<span className="tabular-nums">#{issue.Issue.number.toString().padStart(3, "0")}</span>
<span className="truncate">{issue.Issue.title}</span> <span className="truncate">{issue.Issue.title}</span>
</button> </button>
} }