@hienlh/ppm 0.9.84 → 0.9.86

package/src/web/components/git/git-graph-row.tsx

@@ -1,167 +0,0 @@
-import {
-  GitBranch as GitBranchIcon,
-  Tag,
-  Copy,
-  RotateCcw,
-  CherryIcon,
-} from "lucide-react";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import { BranchLabel } from "./git-graph-branch-label";
-import { LANE_COLORS, ROW_HEIGHT, relativeDate } from "./git-graph-constants";
-import type { GitCommit, GitBranch } from "../../../types/git";
-
-interface CommitLabel {
-  name: string;
-  type: "branch" | "tag";
-  remotes: string[];
-  current: boolean;
-}
-
-interface GitGraphRowProps {
-  commit: GitCommit;
-  lane: number;
-  isSelected: boolean;
-  isHead: boolean;
-  labels: CommitLabel[];
-  currentBranch: GitBranch | undefined;
-  onSelect: () => void;
-  onCheckout: (ref: string) => void;
-  onCherryPick: (hash: string) => void;
-  onRevert: (hash: string) => void;
-  onMerge: (source: string) => void;
-  onDeleteBranch: (name: string) => void;
-  onPushBranch: (branch: string) => void;
-  onCreatePr: (branch: string) => void;
-  onOpenCreateBranch: (hash: string) => void;
-  onOpenCreateTag: (hash: string) => void;
-  onOpenDiff: () => void;
-  onCopyHash: () => void;
-}
-
-export function GitGraphRow({
-  commit,
-  lane,
-  isSelected,
-  isHead,
-  labels,
-  currentBranch,
-  onSelect,
-  onCheckout,
-  onCherryPick,
-  onRevert,
-  onMerge,
-  onDeleteBranch,
-  onPushBranch,
-  onCreatePr,
-  onOpenCreateBranch,
-  onOpenCreateTag,
-  onOpenDiff,
-  onCopyHash,
-}: GitGraphRowProps) {
-  const color = LANE_COLORS[lane % LANE_COLORS.length]!;
-  const branchLabels = labels.filter((l) => l.type === "branch");
-  const tagLabels = labels.filter((l) => l.type === "tag");
-
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger asChild>
-        <tr
-          className={`hover:bg-muted/50 cursor-pointer border-b border-border/20 ${
-            isSelected ? "bg-primary/10" : ""
-          } ${isHead ? "font-medium" : ""}`}
-          style={{ height: `${ROW_HEIGHT}px` }}
-          onClick={onSelect}
-        >
-          {/* Description column */}
-          <td className="px-2 truncate max-w-0">
-            <div className="flex items-center gap-1.5 min-w-0">
-              {branchLabels.map((label) => (
-                <BranchLabel
-                  key={`branch-${label.name}`}
-                  name={label.name}
-                  type="branch"
-                  remotes={label.remotes}
-                  isCurrent={label.current}
-                  color={color}
-                  currentBranch={currentBranch}
-                  onCheckout={onCheckout}
-                  onMerge={onMerge}
-                  onPush={onPushBranch}
-                  onCreatePr={onCreatePr}
-                  onDelete={onDeleteBranch}
-                />
-              ))}
-              {tagLabels.map((label) => (
-                <BranchLabel
-                  key={`tag-${label.name}`}
-                  name={label.name}
-                  type="tag"
-                  remotes={[]}
-                  isCurrent={false}
-                  color={color}
-                  currentBranch={currentBranch}
-                  onCheckout={onCheckout}
-                  onMerge={onMerge}
-                  onPush={onPushBranch}
-                  onCreatePr={onCreatePr}
-                  onDelete={onDeleteBranch}
-                />
-              ))}
-              <span className="truncate text-xs">{commit.subject}</span>
-            </div>
-          </td>
-
-          {/* Date column */}
-          <td className="px-2 text-xs text-muted-foreground whitespace-nowrap shrink-0">
-            {relativeDate(commit.authorDate)}
-          </td>
-
-          {/* Author column */}
-          <td className="px-2 text-xs text-muted-foreground truncate max-w-[120px]">
-            {commit.authorName}
-          </td>
-
-          {/* Commit hash column (last) */}
-          <td className="px-2 text-xs text-muted-foreground font-mono whitespace-nowrap">
-            {commit.abbreviatedHash}
-          </td>
-        </tr>
-      </ContextMenuTrigger>
-
-      <ContextMenuContent>
-        <ContextMenuItem onClick={() => onCheckout(commit.hash)}>
-          Checkout
-        </ContextMenuItem>
-        <ContextMenuItem onClick={() => onOpenCreateBranch(commit.hash)}>
-          <GitBranchIcon className="size-3" />
-          Create Branch...
-        </ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem onClick={() => onCherryPick(commit.hash)}>
-          <CherryIcon className="size-3" />
-          Cherry Pick
-        </ContextMenuItem>
-        <ContextMenuItem onClick={() => onRevert(commit.hash)}>
-          <RotateCcw className="size-3" />
-          Revert
-        </ContextMenuItem>
-        <ContextMenuItem onClick={() => onOpenCreateTag(commit.hash)}>
-          <Tag className="size-3" />
-          Create Tag...
-        </ContextMenuItem>
-        <ContextMenuSeparator />
-        <ContextMenuItem onClick={onOpenDiff}>View Diff</ContextMenuItem>
-        <ContextMenuItem onClick={onCopyHash}>
-          <Copy className="size-3" />
-          Copy Hash
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-}

package/src/web/components/git/git-graph-settings-dialog.tsx

@@ -1,104 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import type { GitBranch } from "../../../types/git";
-
-interface GitGraphSettingsDialogProps {
-  open: boolean;
-  onClose: () => void;
-  projectName: string;
-  branches: GitBranch[];
-}
-
-export function GitGraphSettingsDialog({
-  open,
-  onClose,
-  projectName,
-  branches,
-}: GitGraphSettingsDialogProps) {
-  const localBranches = branches.filter((b) => !b.remote);
-  const remoteBranches = branches.filter((b) => b.remote);
-
-  // Extract unique remotes from remote branch names
-  const remotes = new Map<string, string[]>();
-  for (const b of remoteBranches) {
-    const stripped = b.name.replace(/^remotes\//, "");
-    const slashIdx = stripped.indexOf("/");
-    if (slashIdx < 0) continue;
-    const remoteName = stripped.slice(0, slashIdx);
-    const branchName = stripped.slice(slashIdx + 1);
-    const arr = remotes.get(remoteName) ?? [];
-    arr.push(branchName);
-    remotes.set(remoteName, arr);
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={(o) => { if (!o) onClose(); }}>
-      <DialogContent className="max-w-md">
-        <DialogHeader>
-          <DialogTitle>Repository Settings</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-4 text-sm">
-          {/* General */}
-          <Section title="General">
-            <Row label="Name" value={projectName} />
-            <Row label="Branches" value={`${localBranches.length} local, ${remoteBranches.length} remote`} />
-          </Section>
-
-          {/* Local branches */}
-          <Section title="Local Branches">
-            {localBranches.map((b) => (
-              <div key={b.name} className="flex items-center gap-2 py-0.5">
-                <span className={`text-xs ${b.current ? "font-semibold text-primary" : "text-foreground"}`}>
-                  {b.name}
-                </span>
-                {b.current && <span className="text-[10px] text-muted-foreground italic">HEAD</span>}
-                {b.remotes.length > 0 && (
-                  <span className="text-[10px] text-muted-foreground">
-                    ({b.remotes.join(", ")})
-                  </span>
-                )}
-              </div>
-            ))}
-          </Section>
-
-          {/* Remotes */}
-          <Section title="Remotes">
-            {[...remotes.entries()].map(([name, rBranches]) => (
-              <div key={name} className="py-0.5">
-                <span className="text-xs font-medium">{name}</span>
-                <span className="text-[10px] text-muted-foreground ml-2">
-                  {rBranches.length} branch{rBranches.length !== 1 ? "es" : ""}
-                </span>
-              </div>
-            ))}
-            {remotes.size === 0 && (
-              <span className="text-xs text-muted-foreground">No remotes configured</span>
-            )}
-          </Section>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div>
-      <h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1.5">{title}</h4>
-      <div className="pl-1">{children}</div>
-    </div>
-  );
-}
-
-function Row({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex items-center gap-3 py-0.5">
-      <span className="text-xs text-muted-foreground w-16 shrink-0">{label}</span>
-      <span className="text-xs">{value}</span>
-    </div>
-  );
-}

package/src/web/components/git/git-graph-svg.tsx

@@ -1,54 +0,0 @@
-import { LANE_COLORS, LANE_WIDTH, ROW_HEIGHT, NODE_RADIUS } from "./git-graph-constants";
-import type { GitCommit } from "../../../types/git";
-
-interface GitGraphSvgProps {
-  commits: GitCommit[];
-  laneMap: Map<string, number>;
-  svgPaths: Array<{ d: string; color: string }>;
-  width: number;
-  height: number;
-  headHash: string;
-}
-
-export function GitGraphSvg({
-  commits,
-  laneMap,
-  svgPaths,
-  width,
-  height,
-  headHash,
-}: GitGraphSvgProps) {
-  return (
-    <svg width={width} height={height}>
-      {/* Connection lines */}
-      {svgPaths.map((p, i) => (
-        <path
-          key={i}
-          d={p.d}
-          stroke={p.color}
-          strokeWidth={2}
-          fill="none"
-        />
-      ))}
-      {/* Commit dots */}
-      {commits.map((c, ci) => {
-        const cLane = laneMap.get(c.hash) ?? 0;
-        const cx = cLane * LANE_WIDTH + LANE_WIDTH / 2;
-        const cy = ci * ROW_HEIGHT + ROW_HEIGHT / 2;
-        const cColor = LANE_COLORS[cLane % LANE_COLORS.length]!;
-        const isHead = c.hash === headHash;
-        return (
-          <circle
-            key={c.hash}
-            cx={cx}
-            cy={cy}
-            r={isHead ? NODE_RADIUS + 1 : NODE_RADIUS}
-            fill={cColor}
-            stroke={isHead ? "#000" : "none"}
-            strokeWidth={isHead ? 2 : 0}
-          />
-        );
-      })}
-    </svg>
-  );
-}

package/src/web/components/git/git-graph-toolbar.tsx

@@ -1,195 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import {
-  RefreshCw,
-  Download,
-  Search,
-  Settings,
-  X,
-  ChevronDown,
-  Check,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import type { GitBranch } from "../../../types/git";
-
-interface GitGraphToolbarProps {
-  branches: GitBranch[];
-  branchFilter: string;
-  onBranchFilterChange: (value: string) => void;
-  searchQuery: string;
-  onSearchQueryChange: (value: string) => void;
-  showSearch: boolean;
-  onToggleSearch: () => void;
-  onFetch: () => void;
-  onRefresh: () => void;
-  onOpenSettings?: () => void;
-  loading: boolean;
-  acting: boolean;
-  projectName?: string;
-}
-
-export function GitGraphToolbar({
-  branches,
-  branchFilter,
-  onBranchFilterChange,
-  searchQuery,
-  onSearchQueryChange,
-  showSearch,
-  onToggleSearch,
-  onFetch,
-  onRefresh,
-  onOpenSettings,
-  loading,
-  acting,
-  projectName,
-}: GitGraphToolbarProps) {
-  const localBranches = branches.filter((b) => !b.remote);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [branchSearch, setBranchSearch] = useState("");
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  // Close dropdown on outside click
-  useEffect(() => {
-    if (!dropdownOpen) return;
-    const handler = (e: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
-        setDropdownOpen(false);
-        setBranchSearch("");
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [dropdownOpen]);
-
-  const filteredBranches = branchSearch
-    ? localBranches.filter((b) =>
-        b.name.toLowerCase().includes(branchSearch.toLowerCase()),
-      )
-    : localBranches;
-
-  const selectedLabel =
-    branchFilter === "__all__"
-      ? "Show All"
-      : localBranches.find((b) => b.name === branchFilter)?.name ?? "Show All";
-
-  return (
-    <div className="border-b bg-background">
-      <div className="flex items-center gap-1.5 px-2 py-1.5">
-        {/* Repo (single for now) */}
-        <div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
-          <span className="font-semibold">Repo:</span>
-          <span className="font-medium text-foreground truncate max-w-[120px]">
-            {projectName ?? "—"}
-          </span>
-        </div>
-
-        <div className="w-px h-4 bg-border mx-1" />
-
-        {/* Branch filter — custom searchable dropdown */}
-        <div className="relative shrink-0" ref={dropdownRef}>
-          <button
-            type="button"
-            className="flex items-center gap-1 h-6 px-2 text-xs border rounded-md bg-transparent hover:bg-muted/50"
-            onClick={() => { setDropdownOpen((o) => !o); setBranchSearch(""); }}
-          >
-            <span className="font-semibold text-muted-foreground">Branches:</span>
-            <span className="max-w-[100px] truncate">{selectedLabel}</span>
-            <ChevronDown className="size-3 opacity-50" />
-          </button>
-          {dropdownOpen && (
-            <div className="absolute top-full left-0 mt-1 z-50 w-[220px] rounded-md border bg-popover shadow-md">
-              <div className="p-1.5">
-                <Input
-                  className="h-6 text-xs px-2"
-                  placeholder="Filter branches..."
-                  value={branchSearch}
-                  onChange={(e) => setBranchSearch(e.target.value)}
-                  autoFocus
-                />
-              </div>
-              <div className="max-h-[200px] overflow-y-auto p-1">
-                <BranchDropdownItem
-                  label="Show All"
-                  selected={branchFilter === "__all__"}
-                  onClick={() => { onBranchFilterChange("__all__"); setDropdownOpen(false); }}
-                />
-                {filteredBranches.map((b) => (
-                  <BranchDropdownItem
-                    key={b.name}
-                    label={b.name}
-                    current={b.current}
-                    selected={branchFilter === b.name}
-                    onClick={() => { onBranchFilterChange(b.name); setDropdownOpen(false); }}
-                  />
-                ))}
-                {filteredBranches.length === 0 && branchSearch && (
-                  <div className="px-2 py-1.5 text-xs text-muted-foreground">No branches found</div>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="flex-1" />
-
-        {/* Search input (toggled) */}
-        {showSearch && (
-          <div className="flex items-center gap-1">
-            <Input
-              className="h-6 text-xs w-[160px] px-2"
-              placeholder="Search commits..."
-              value={searchQuery}
-              onChange={(e) => onSearchQueryChange(e.target.value)}
-              autoFocus
-            />
-            <Button variant="ghost" size="icon-xs" onClick={onToggleSearch}>
-              <X className="size-3" />
-            </Button>
-          </div>
-        )}
-
-        {/* Action buttons */}
-        {!showSearch && (
-          <Button variant="ghost" size="icon-xs" onClick={onToggleSearch} title="Find">
-            <Search className="size-3.5" />
-          </Button>
-        )}
-        <Button variant="ghost" size="icon-xs" onClick={onOpenSettings} title="Settings">
-          <Settings className="size-3.5" />
-        </Button>
-        <Button variant="ghost" size="icon-xs" onClick={onFetch} disabled={acting} title="Fetch">
-          <Download className="size-3.5" />
-        </Button>
-        <Button variant="ghost" size="icon-xs" onClick={onRefresh} disabled={acting} title="Refresh">
-          <RefreshCw className={`size-3.5 ${loading ? "animate-spin" : ""}`} />
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function BranchDropdownItem({
-  label,
-  selected,
-  current,
-  onClick,
-}: {
-  label: string;
-  selected: boolean;
-  current?: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      className="flex items-center gap-2 w-full px-2 py-1 text-xs rounded-sm hover:bg-accent hover:text-accent-foreground text-left"
-      onClick={onClick}
-    >
-      <Check className={`size-3 shrink-0 ${selected ? "opacity-100" : "opacity-0"}`} />
-      <span className="truncate flex-1">{label}</span>
-      {current && (
-        <span className="text-[10px] text-muted-foreground italic">current</span>
-      )}
-    </button>
-  );
-}