resizable sidebar

2026-02-07 18:23:03 +00:00 · 2026-01-21 23:42:41 +00:00
parent f16bb9d671
commit f4540f0e74
1 changed files with 189 additions and 131 deletions
--- a/packages/frontend/src/pages/Timeline.tsx
+++ b/packages/frontend/src/pages/Timeline.tsx
@@ -10,6 +10,7 @@ import { useSelection } from "@/components/selection-provider";
 import { SprintForm } from "@/components/sprint-form";
 import StatusTag from "@/components/status-tag";
 import TopBar from "@/components/top-bar";
+import { ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { BREATHING_ROOM } from "@/lib/layout";
 import {
  useIssues,
@@ -21,8 +22,10 @@ import {
 import { cn } from "@/lib/utils";

 const DAY_MS = 24 * 60 * 60 * 1000;
-const TIMELINE_LABEL_WIDTH = 240;
-const WEEK_COLUMN_WIDTH = 140;
+const TIMELINE_LABEL_DEFAULT_SIZE = 420;
+const TIMELINE_LABEL_MIN_SIZE = 300;
+const TIMELINE_LABEL_MAX_SIZE = "55%";
+const WEEK_COLUMN_WIDTH = 160;

 const addDays = (value: Date, days: number) =>
  new Date(value.getFullYear(), value.getMonth(), value.getDate() + days);
@@ -176,9 +179,9 @@ export default function Timeline() {

  const statuses = selectedOrganisation?.Organisation.statuses ?? {};

-  const gridTemplateColumns = useMemo(() => {
-    if (weeks.length === 0) return `${TIMELINE_LABEL_WIDTH}px 1fr`;
-    return `${TIMELINE_LABEL_WIDTH}px repeat(${weeks.length}, ${WEEK_COLUMN_WIDTH}px)`;
+  const weekGridTemplateColumns = useMemo(() => {
+    if (weeks.length === 0) return "1fr";
+    return `repeat(${weeks.length}, ${WEEK_COLUMN_WIDTH}px)`;
  }, [weeks.length]);

  const todayMarker = useMemo(() => {
@@ -243,24 +246,51 @@ export default function Timeline() {

        {selectedOrganisationId && selectedProjectId && sprints.length > 0 && (
          <div className="border">
-            <div className="overflow-x-auto" ref={scrollRef}>
-              <div
-                style={{
-                  minWidth: `${TIMELINE_LABEL_WIDTH + weeks.length * WEEK_COLUMN_WIDTH}px`,
-                }}
+            <ResizablePanelGroup className="h-full">
+              <ResizablePanel
+                id="timeline-labels"
+                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
-                    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
                  </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
                          key={week.toISOString()}
                          className={cn(
                            `px-${BREATHING_ROOM} py-${BREATHING_ROOM} text-xs text-muted-foreground tabular-nums`,
-                        "border-l",
+                            index === 0 ? "" : "border-l",
                          )}
                        >
                          {formatWeekLabel(week)}
@@ -273,42 +303,17 @@ export default function Timeline() {
                      const barStyle = getSprintBarStyle(sprint);
                      const showTodayLabel = sprintIndex === 0;
                      return (
-                    <div key={sprint.id} className="grid border-b" style={{ gridTemplateColumns }}>
+                        <div key={sprint.id} className="relative border-b">
                          <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`}>
-                          <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}
+                            <SprintLabelContent
+                              sprint={sprint}
+                              sprintIssues={sprintIssues}
+                              statuses={statuses}
                            />
-                            ))}
                          </div>
-                        )}
-                      </div>
-                      <div
-                        className={cn(`py-${BREATHING_ROOM} relative min-h-12`)}
-                        style={{ gridColumn: "2 / -1" }}
-                      >
+                          <div className={cn(`absolute inset-0 py-${BREATHING_ROOM}`)}>
                            <div
                              className="absolute inset-0 grid z-10 pointer-events-none"
                              style={{
@@ -328,7 +333,10 @@ export default function Timeline() {
                                style={{ left: `${todayMarker.leftPx}px` }}
                              >
                                <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 && (
                                  <div className="absolute -top-1.5">
@@ -360,10 +368,73 @@ export default function Timeline() {
                      );
                    })}

-                <div className="grid" style={{ gridTemplateColumns }}>
+                    <div className="relative">
                      <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>
      {issueGroup.unassigned.length === 0 && (
        <div className="text-xs text-muted-foreground text-pretty">No unassigned issues.</div>
@@ -379,20 +450,7 @@ export default function Timeline() {
          ))}
        </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",
          )}
        >
+          <span className="tabular-nums">{issue.Issue.number.toString().padStart(3, "0")}</span>
          <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>
        </button>
      }