Carlos Florêncio
480 lines
14 KiB
TypeScript
480 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
IconGitPullRequest,
|
|
IconCloudUpload,
|
|
IconChevronDown,
|
|
IconChevronRight,
|
|
IconLoader2,
|
|
} from "@tabler/icons-react";
|
|
|
|
import { Button } from "@kandev/ui/button";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@kandev/ui/dropdown-menu";
|
|
import { cn } from "@/lib/utils";
|
|
import type { FileInfo } from "@/lib/state/store";
|
|
import { LineStat } from "@/components/diff-stat";
|
|
import { FileStatusIcon } from "./file-status-icon";
|
|
import { FileRow } from "./changes-panel-file-row";
|
|
import { CommitRow, type CommitItem } from "./commit-row";
|
|
|
|
// --- Timeline visual components ---
|
|
|
|
type ChangedFile = {
|
|
path: string;
|
|
status: FileInfo["status"];
|
|
staged: boolean;
|
|
plus: number | undefined;
|
|
minus: number | undefined;
|
|
oldPath: string | undefined;
|
|
};
|
|
|
|
// --- Timeline section dot colors ---
|
|
const DOT_COLORS = {
|
|
unstaged: "bg-yellow-500",
|
|
staged: "bg-emerald-500",
|
|
commits: "bg-blue-500",
|
|
pr: "bg-purple-500",
|
|
action: "bg-muted-foreground/25",
|
|
} as const;
|
|
|
|
function TimelineDot({ color }: { color: string }) {
|
|
return <div className={cn("relative z-10 size-1.5 rounded-full shrink-0 mt-[5px]", color)} />;
|
|
}
|
|
|
|
function TimelineSection({
|
|
dotColor,
|
|
label,
|
|
count,
|
|
action,
|
|
isLast,
|
|
children,
|
|
collapsible = true,
|
|
"data-testid": testId,
|
|
}: {
|
|
dotColor: string;
|
|
label?: string;
|
|
count?: number;
|
|
action?: React.ReactNode;
|
|
isLast?: boolean;
|
|
children?: React.ReactNode;
|
|
collapsible?: boolean;
|
|
"data-testid"?: string;
|
|
}) {
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const canCollapse = collapsible && !!label;
|
|
|
|
return (
|
|
<div className="relative flex gap-2.5" data-testid={testId}>
|
|
{/* Vertical line + dot */}
|
|
<div className="flex flex-col items-center">
|
|
<TimelineDot color={dotColor} />
|
|
{!isLast && <div className="w-px flex-1 bg-border/60" />}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 min-w-0 pb-3">
|
|
{/* Header */}
|
|
{label && (
|
|
<div className="flex items-center justify-between gap-2 -mt-0.5 mb-1">
|
|
{canCollapse ? (
|
|
<button
|
|
type="button"
|
|
className="flex items-center gap-1 text-[11px] font-medium uppercase tracking-wider text-foreground/70 cursor-pointer hover:text-foreground/90"
|
|
onClick={() => setCollapsed((c) => !c)}
|
|
aria-expanded={!collapsed}
|
|
data-testid={`${testId ?? label.toLowerCase()}-collapse-toggle`}
|
|
>
|
|
{label}
|
|
{typeof count === "number" && (
|
|
<span className="text-muted-foreground/50 font-normal">({count})</span>
|
|
)}
|
|
{collapsed ? (
|
|
<IconChevronRight className="h-3 w-3 text-muted-foreground/50" />
|
|
) : (
|
|
<IconChevronDown className="h-3 w-3 text-muted-foreground/50" />
|
|
)}
|
|
</button>
|
|
) : (
|
|
<span className="text-[11px] font-medium uppercase tracking-wider text-foreground/70">
|
|
{label}
|
|
{typeof count === "number" && (
|
|
<span className="ml-1 text-muted-foreground/50 font-normal">({count})</span>
|
|
)}
|
|
</span>
|
|
)}
|
|
{action}
|
|
</div>
|
|
)}
|
|
|
|
{/* Children (file list, buttons, etc.) */}
|
|
{!collapsed && children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// --- Commits section ---
|
|
|
|
type CommitsSectionProps = {
|
|
commits: CommitItem[];
|
|
isLast: boolean;
|
|
onOpenCommitDetail?: (sha: string) => void;
|
|
onRevertCommit?: (sha: string) => void;
|
|
onAmendCommit?: (currentMessage: string) => void;
|
|
onResetToCommit?: (sha: string) => void;
|
|
};
|
|
|
|
export function CommitsSection({
|
|
commits,
|
|
isLast,
|
|
onOpenCommitDetail,
|
|
onRevertCommit,
|
|
onAmendCommit,
|
|
onResetToCommit,
|
|
}: CommitsSectionProps) {
|
|
// Find the first unpushed commit for context menu actions (amend/revert only on latest unpushed)
|
|
const firstUnpushedIndex = commits.findIndex((c) => c.pushed !== true);
|
|
|
|
return (
|
|
<TimelineSection
|
|
dotColor={DOT_COLORS.commits}
|
|
label="Commits"
|
|
count={commits.length}
|
|
isLast={isLast}
|
|
data-testid="commits-section"
|
|
>
|
|
<ul data-testid="commits-list" className="space-y-0.5">
|
|
{commits.map((commit, index) => (
|
|
<CommitRow
|
|
key={`${commit.commit_sha}-${index}`}
|
|
commit={commit}
|
|
isLatest={index === firstUnpushedIndex}
|
|
onOpenCommitDetail={onOpenCommitDetail}
|
|
onAmendCommit={commit.pushed ? undefined : onAmendCommit}
|
|
onRevertCommit={commit.pushed ? undefined : onRevertCommit}
|
|
onResetToCommit={commit.pushed ? undefined : onResetToCommit}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</TimelineSection>
|
|
);
|
|
}
|
|
|
|
// --- Action buttons section (Create PR / Push) ---
|
|
|
|
type ActionButtonsSectionProps = {
|
|
onOpenPRDialog: () => void;
|
|
onPush: () => void;
|
|
onForcePush: () => void;
|
|
isLoading: boolean;
|
|
loadingOperation: string | null;
|
|
aheadCount: number;
|
|
canPush: boolean;
|
|
canCreatePR: boolean;
|
|
existingPrUrl?: string;
|
|
};
|
|
|
|
export function ActionButtonsSection({
|
|
onOpenPRDialog,
|
|
onPush,
|
|
onForcePush,
|
|
isLoading,
|
|
loadingOperation,
|
|
aheadCount,
|
|
canPush,
|
|
canCreatePR,
|
|
existingPrUrl,
|
|
}: ActionButtonsSectionProps) {
|
|
const prExists = !!existingPrUrl;
|
|
const createPrDisabled = !canCreatePR || prExists || isLoading;
|
|
const pushDisabled = !canPush || isLoading;
|
|
const isPushing = loadingOperation === "push";
|
|
const isCreatingPR = loadingOperation === "create_pr";
|
|
let pushTooltip: string | null = null;
|
|
if (isLoading) pushTooltip = "A git operation is in progress";
|
|
else if (!canPush) pushTooltip = "No commits ahead of remote";
|
|
return (
|
|
<TimelineSection dotColor={DOT_COLORS.action} isLast>
|
|
<div className="flex items-center gap-2 -mt-0.5">
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="h-6 text-[11px] px-2.5 gap-1 cursor-pointer"
|
|
onClick={onOpenPRDialog}
|
|
disabled={createPrDisabled}
|
|
>
|
|
{isCreatingPR ? (
|
|
<IconLoader2 className="h-3 w-3 animate-spin" />
|
|
) : (
|
|
<IconGitPullRequest className="h-3 w-3" />
|
|
)}
|
|
Create PR
|
|
</Button>
|
|
</span>
|
|
</TooltipTrigger>
|
|
{prExists && <TooltipContent>A pull request already exists for this task</TooltipContent>}
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span className="flex items-center">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="h-6 text-[11px] px-2.5 gap-1 cursor-pointer rounded-r-none border-r-0"
|
|
onClick={onPush}
|
|
disabled={pushDisabled}
|
|
>
|
|
{isPushing ? (
|
|
<IconLoader2 className="h-3 w-3 animate-spin" />
|
|
) : (
|
|
<IconCloudUpload className="h-3 w-3" />
|
|
)}
|
|
Push
|
|
{aheadCount > 0 && !isPushing && (
|
|
<span className="text-muted-foreground">{aheadCount} ahead</span>
|
|
)}
|
|
</Button>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="h-6 w-5 px-0 cursor-pointer rounded-l-none"
|
|
disabled={pushDisabled}
|
|
>
|
|
<IconChevronDown className="h-3 w-3" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-48">
|
|
<DropdownMenuItem className="cursor-pointer gap-2 text-xs" onClick={onForcePush}>
|
|
<IconCloudUpload className="h-3.5 w-3.5 shrink-0" />
|
|
Force Push (with lease)
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</span>
|
|
</TooltipTrigger>
|
|
{pushTooltip && <TooltipContent>{pushTooltip}</TooltipContent>}
|
|
</Tooltip>
|
|
</div>
|
|
</TimelineSection>
|
|
);
|
|
}
|
|
|
|
// --- File list sections (Unstaged / Staged) ---
|
|
|
|
type FileListSectionProps = {
|
|
variant: "unstaged" | "staged";
|
|
files: ChangedFile[];
|
|
pendingStageFiles: Set<string>;
|
|
isLast: boolean;
|
|
actionLabel: string;
|
|
isActionLoading?: boolean;
|
|
onAction: () => void;
|
|
secondaryActionLabel?: string;
|
|
isSecondaryActionLoading?: boolean;
|
|
onSecondaryAction?: () => void;
|
|
onOpenDiff: (path: string) => void;
|
|
onEditFile: (path: string) => void;
|
|
onStage: (path: string) => void;
|
|
onUnstage: (path: string) => void;
|
|
onDiscard: (path: string) => void;
|
|
};
|
|
|
|
export function FileListSection({
|
|
variant,
|
|
files,
|
|
pendingStageFiles,
|
|
isLast,
|
|
actionLabel,
|
|
isActionLoading,
|
|
onAction,
|
|
secondaryActionLabel,
|
|
isSecondaryActionLoading,
|
|
onSecondaryAction,
|
|
onOpenDiff,
|
|
onEditFile,
|
|
onStage,
|
|
onUnstage,
|
|
onDiscard,
|
|
}: FileListSectionProps) {
|
|
const dotColor = variant === "unstaged" ? DOT_COLORS.unstaged : DOT_COLORS.staged;
|
|
const label = variant === "unstaged" ? "Unstaged" : "Staged";
|
|
|
|
return (
|
|
<TimelineSection
|
|
dotColor={dotColor}
|
|
label={label}
|
|
count={files.length}
|
|
isLast={isLast}
|
|
data-testid={`${variant}-files-section`}
|
|
>
|
|
{files.length > 0 && (
|
|
<ul data-testid={`${variant}-file-list`} className="space-y-0.5">
|
|
{files.map((file) => (
|
|
<FileRow
|
|
key={file.path}
|
|
file={file}
|
|
isPending={pendingStageFiles.has(file.path)}
|
|
onOpenDiff={onOpenDiff}
|
|
onStage={onStage}
|
|
onUnstage={onUnstage}
|
|
onDiscard={onDiscard}
|
|
onEditFile={onEditFile}
|
|
/>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{files.length > 0 && (
|
|
<div className="mt-1.5 flex items-center gap-1.5">
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="h-6 text-[11px] px-2.5 gap-1 cursor-pointer"
|
|
onClick={onAction}
|
|
disabled={isActionLoading}
|
|
>
|
|
{isActionLoading && <IconLoader2 className="h-3 w-3 animate-spin" />}
|
|
{actionLabel}
|
|
</Button>
|
|
{onSecondaryAction && secondaryActionLabel && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="h-6 text-[11px] px-2.5 gap-1 cursor-pointer"
|
|
onClick={onSecondaryAction}
|
|
disabled={isSecondaryActionLoading}
|
|
>
|
|
{isSecondaryActionLoading && <IconLoader2 className="h-3 w-3 animate-spin" />}
|
|
{secondaryActionLabel}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</TimelineSection>
|
|
);
|
|
}
|
|
|
|
// --- PR files section (read-only, from GitHub PR diff) ---
|
|
|
|
export type PRChangedFile = {
|
|
path: string;
|
|
status: FileInfo["status"];
|
|
plus: number | undefined;
|
|
minus: number | undefined;
|
|
oldPath: string | undefined;
|
|
};
|
|
|
|
type PRFilesSectionProps = {
|
|
files: PRChangedFile[];
|
|
isLast: boolean;
|
|
onOpenDiff: (path: string) => void;
|
|
};
|
|
|
|
export function PRFilesSection({ files, isLast, onOpenDiff }: PRFilesSectionProps) {
|
|
return (
|
|
<TimelineSection
|
|
dotColor={DOT_COLORS.pr}
|
|
label="PR Changes"
|
|
count={files.length}
|
|
isLast={isLast}
|
|
data-testid="pr-changes-section"
|
|
>
|
|
{files.length > 0 && (
|
|
<ul className="space-y-0.5">
|
|
{files.map((file) => (
|
|
<PRFileRow key={file.path} file={file} onOpenDiff={onOpenDiff} />
|
|
))}
|
|
</ul>
|
|
)}
|
|
</TimelineSection>
|
|
);
|
|
}
|
|
|
|
function PRFileRow({
|
|
file,
|
|
onOpenDiff,
|
|
}: {
|
|
file: PRChangedFile;
|
|
onOpenDiff: (path: string) => void;
|
|
}) {
|
|
const lastSlash = file.path.lastIndexOf("/");
|
|
const folder = lastSlash === -1 ? "" : file.path.slice(0, lastSlash);
|
|
const name = lastSlash === -1 ? file.path : file.path.slice(lastSlash + 1);
|
|
|
|
return (
|
|
<li
|
|
className="group flex items-center justify-between gap-2 text-sm rounded-md px-1 py-0.5 -mx-1 hover:bg-muted/60 cursor-pointer"
|
|
onClick={() => onOpenDiff(file.path)}
|
|
>
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<div className="flex-shrink-0 flex items-center justify-center size-4">
|
|
<IconGitPullRequest className="h-3 w-3 text-purple-500" />
|
|
</div>
|
|
<button type="button" className="min-w-0 text-left cursor-pointer" title={file.path}>
|
|
<p className="flex text-foreground text-xs min-w-0">
|
|
{folder && <span className="text-foreground/60 truncate shrink">{folder}/</span>}
|
|
<span className="font-medium text-foreground whitespace-nowrap shrink-0">{name}</span>
|
|
</p>
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<LineStat added={file.plus} removed={file.minus} />
|
|
<FileStatusIcon status={file.status} />
|
|
</div>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
// --- Review progress bar ---
|
|
|
|
type ReviewProgressBarProps = {
|
|
reviewedCount: number;
|
|
totalFileCount: number;
|
|
onOpenReview?: () => void;
|
|
};
|
|
|
|
export function ReviewProgressBar({
|
|
reviewedCount,
|
|
totalFileCount,
|
|
onOpenReview,
|
|
}: ReviewProgressBarProps) {
|
|
const progressPercent = totalFileCount > 0 ? (reviewedCount / totalFileCount) * 100 : 0;
|
|
|
|
if (totalFileCount <= 0) return null;
|
|
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div
|
|
className="shrink-0 flex items-center gap-2 pt-2 border-t border-border/40 cursor-pointer transition-colors"
|
|
onClick={onOpenReview}
|
|
>
|
|
<div className="flex-1 h-0.5 rounded-full bg-muted-foreground/10 overflow-hidden">
|
|
<div
|
|
className="h-full bg-muted-foreground/25 rounded-full transition-all duration-300"
|
|
style={{ width: `${progressPercent}%` }}
|
|
/>
|
|
</div>
|
|
<span className="text-[10px] text-muted-foreground/40 whitespace-nowrap">
|
|
{reviewedCount}/{totalFileCount} reviewed
|
|
</span>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
{reviewedCount} of {totalFileCount} files reviewed
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|