@hienlh/ppm 0.9.84 → 0.9.86

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

@@ -1,193 +0,0 @@
-import { useState, useRef, useCallback } from "react";
-import { Loader2 } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { LANE_WIDTH, ROW_HEIGHT } from "./git-graph-constants";
-import { useGitGraph } from "./use-git-graph";
-import { useColumnResize } from "./use-column-resize";
-import { GitGraphToolbar } from "./git-graph-toolbar";
-import { GitGraphSvg } from "./git-graph-svg";
-import { GitGraphRow } from "./git-graph-row";
-import { GitGraphDetail } from "./git-graph-detail";
-import { GitGraphDialog } from "./git-graph-dialog";
-import { GitGraphSettingsDialog } from "./git-graph-settings-dialog";
-
-interface GitGraphProps {
-  metadata?: Record<string, unknown>;
-}
-
-export function GitGraph({ metadata }: GitGraphProps) {
-  const projectName = metadata?.projectName as string | undefined;
-  const g = useGitGraph(projectName);
-  const [dialogState, setDialogState] = useState<{
-    type: "branch" | "tag" | null;
-    hash?: string;
-  }>({ type: null });
-  const [showSettings, setShowSettings] = useState(false);
-
-  // Resizable graph column — use ref to avoid stale closure
-  const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
-  const defaultGraphW = (isMobile ? 6 : 10) * LANE_WIDTH + LANE_WIDTH;
-  const [graphColWidth, setGraphColWidth] = useState(defaultGraphW);
-  const graphWidthRef = useRef(defaultGraphW);
-  graphWidthRef.current = graphColWidth;
-  const graphDragging = useRef(false);
-
-  const startGraphResize = (startX: number) => {
-    graphDragging.current = true;
-    const startW = graphWidthRef.current;
-    const onMove = (ev: MouseEvent | TouchEvent) => {
-      if (!graphDragging.current) return;
-      const cx = "touches" in ev ? ev.touches[0]!.clientX : ev.clientX;
-      setGraphColWidth(Math.max(40, startW + cx - startX));
-    };
-    const onUp = () => {
-      graphDragging.current = false;
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
-      window.removeEventListener("touchmove", onMove);
-      window.removeEventListener("touchend", onUp);
-    };
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
-    window.addEventListener("touchmove", onMove, { passive: false });
-    window.addEventListener("touchend", onUp);
-  };
-
-  // Resizable table columns (Date, Author, Commit)
-  const { widths: colW, startResize } = useColumnResize({ date: 80, author: 120, commit: 70 });
-
-  // Infinite scroll — ref-based to avoid stale closure
-  const loadMoreRef = useRef(g.loadMore);
-  loadMoreRef.current = g.loadMore;
-  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-    const el = e.currentTarget;
-    if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
-      loadMoreRef.current();
-    }
-  }, []);
-
-  if (!projectName) return <EmptyState msg="No project selected." />;
-  if (g.loading && !g.data) return <LoadingState />;
-  if (g.error && !g.data) return <ErrorState error={g.error} onRetry={g.fetchGraph} />;
-
-  return (
-    <div className="flex flex-col h-full">
-      <GitGraphToolbar
-        branches={g.data?.branches ?? []} branchFilter={g.branchFilter}
-        onBranchFilterChange={g.setBranchFilter} searchQuery={g.searchQuery}
-        onSearchQueryChange={g.setSearchQuery} showSearch={g.showSearch}
-        onToggleSearch={() => g.setShowSearch(!g.showSearch)}
-        onFetch={g.fetchFromRemotes} onRefresh={g.fetchGraph}
-        onOpenSettings={() => setShowSettings(true)}
-        loading={g.loading} acting={g.acting} projectName={projectName}
-      />
-      {g.error && <div className="px-3 py-1.5 text-xs text-destructive bg-destructive/10">{g.error}</div>}
-
-      <div className="flex-1 overflow-auto" onScroll={handleScroll}>
-        <div className="flex min-w-max md:min-w-0">
-          {/* Graph SVG column — overflow-hidden clips lanes beyond column width */}
-          <div className="sticky left-0 z-10 shrink-0 bg-background relative overflow-hidden" style={{ width: `${graphColWidth}px` }}>
-            <div className="text-[11px] font-semibold text-muted-foreground px-2 border-b bg-background sticky top-0 z-20"
-              style={{ height: `${ROW_HEIGHT}px`, lineHeight: `${ROW_HEIGHT}px` }}>Graph</div>
-            <GitGraphSvg commits={g.filteredCommits} laneMap={g.filteredLanes.laneMap}
-              svgPaths={g.svgPaths} width={(g.filteredLanes.maxLane + 2) * LANE_WIDTH} height={g.svgHeight} headHash={g.headHash} />
-            <div className="absolute top-0 right-0 w-1.5 h-full cursor-col-resize hover:bg-primary/30"
-              onMouseDown={(e) => { e.preventDefault(); startGraphResize(e.clientX); }}
-              onTouchStart={(e) => startGraphResize(e.touches[0]!.clientX)} />
-          </div>
-
-          {/* Commit table */}
-          <div className="flex-1 min-w-[400px]">
-            <table className="w-full border-collapse text-xs" style={{ tableLayout: "fixed" }}>
-              <colgroup>
-                <col />
-                <col style={{ width: `${colW.date}px` }} />
-                <col style={{ width: `${colW.author}px` }} />
-                <col style={{ width: `${colW.commit}px` }} />
-              </colgroup>
-              <thead className="sticky top-0 z-10 bg-background">
-                <tr className="border-b text-[11px] font-semibold text-muted-foreground" style={{ height: `${ROW_HEIGHT}px` }}>
-                  <th className="text-left px-2 font-semibold">Description</th>
-                  <ResizableTh label="Date" colKey="date" onStartResize={startResize} />
-                  <ResizableTh label="Author" colKey="author" onStartResize={startResize} />
-                  <th className="text-left px-2 font-semibold">Commit</th>
-                </tr>
-              </thead>
-              <tbody>
-                {g.filteredCommits.map((commit) => (
-                  <GitGraphRow key={commit.hash} commit={commit}
-                    lane={g.filteredLanes.laneMap.get(commit.hash) ?? 0}
-                    isSelected={g.selectedCommit?.hash === commit.hash}
-                    isHead={commit.hash === g.headHash}
-                    labels={g.commitLabels.get(commit.hash) ?? []}
-                    currentBranch={g.currentBranch}
-                    onSelect={() => g.selectCommit(commit)}
-                    onCheckout={g.handleCheckout} onCherryPick={g.handleCherryPick}
-                    onRevert={g.handleRevert} onMerge={g.handleMerge}
-                    onDeleteBranch={g.handleDeleteBranch} onPushBranch={g.handlePushBranch}
-                    onCreatePr={g.handleCreatePr}
-                    onOpenCreateBranch={(h) => setDialogState({ type: "branch", hash: h })}
-                    onOpenCreateTag={(h) => setDialogState({ type: "tag", hash: h })}
-                    onOpenDiff={() => g.openDiffForCommit(commit)}
-                    onCopyHash={() => g.copyHash(commit.hash)} />
-                ))}
-              </tbody>
-            </table>
-            {g.loadingMore && (
-              <div className="flex items-center justify-center gap-2 py-3 text-xs text-muted-foreground">
-                <Loader2 className="size-3.5 animate-spin" /> Loading more commits...
-              </div>
-            )}
-            {!g.hasMore && g.data && g.data.commits.length > 0 && (
-              <div className="text-center py-2 text-xs text-muted-foreground">
-                {g.data.commits.length} commits loaded
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {g.selectedCommit && projectName && (
-        <GitGraphDetail commit={g.selectedCommit} files={g.commitFiles}
-          loadingDetail={g.loadingDetail} projectName={projectName}
-          onClose={() => g.setSelectedCommit(null)} copyHash={g.copyHash} />
-      )}
-      <GitGraphDialog type={dialogState.type} hash={dialogState.hash}
-        onClose={() => setDialogState({ type: null })}
-        onCreateBranch={g.handleCreateBranch} onCreateTag={g.handleCreateTag} />
-      <GitGraphSettingsDialog open={showSettings} onClose={() => setShowSettings(false)}
-        projectName={projectName} branches={g.data?.branches ?? []} />
-    </div>
-  );
-}
-
-function ResizableTh({ label, colKey, onStartResize }: {
-  label: string; colKey: string; onStartResize: (key: string, x: number) => void;
-}) {
-  return (
-    <th className="text-left px-2 font-semibold relative">
-      {label}
-      <div className="absolute top-0 right-0 w-1.5 h-full cursor-col-resize hover:bg-primary/30"
-        onMouseDown={(e) => { e.preventDefault(); onStartResize(colKey, e.clientX); }}
-        onTouchStart={(e) => onStartResize(colKey, e.touches[0]!.clientX)} />
-    </th>
-  );
-}
-
-function EmptyState({ msg }: { msg: string }) {
-  return <div className="flex items-center justify-center h-full text-muted-foreground text-sm">{msg}</div>;
-}
-function LoadingState() {
-  return (
-    <div className="flex items-center justify-center h-full gap-2 text-muted-foreground">
-      <Loader2 className="size-5 animate-spin" /><span className="text-sm">Loading git graph...</span>
-    </div>
-  );
-}
-function ErrorState({ error, onRetry }: { error: string; onRetry: () => void }) {
-  return (
-    <div className="flex flex-col items-center justify-center h-full gap-2 text-destructive text-sm">
-      <p>{error}</p><Button variant="outline" size="sm" onClick={onRetry}>Retry</Button>
-    </div>
-  );
-}

package/src/web/components/git/use-column-resize.ts

@@ -1,33 +0,0 @@
-import { useState, useRef } from "react";
-
-/** Generic column resize hook — uses refs to avoid stale closures */
-export function useColumnResize(initialWidths: Record<string, number>) {
-  const [widths, setWidths] = useState(initialWidths);
-  const widthsRef = useRef(initialWidths);
-  widthsRef.current = widths;
-  const dragging = useRef(false);
-
-  const startResize = (colKey: string, startX: number) => {
-    dragging.current = true;
-    const startW = widthsRef.current[colKey] ?? 80;
-    const onMove = (ev: MouseEvent | TouchEvent) => {
-      if (!dragging.current) return;
-      const clientX = "touches" in ev ? ev.touches[0]!.clientX : ev.clientX;
-      const newW = Math.max(40, startW + clientX - startX);
-      setWidths((prev) => ({ ...prev, [colKey]: newW }));
-    };
-    const onUp = () => {
-      dragging.current = false;
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
-      window.removeEventListener("touchmove", onMove);
-      window.removeEventListener("touchend", onUp);
-    };
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
-    window.addEventListener("touchmove", onMove, { passive: false });
-    window.addEventListener("touchend", onUp);
-  };
-
-  return { widths, startResize };
-}

package/src/web/components/git/use-git-graph.ts

@@ -1,201 +0,0 @@
-import { useEffect, useState, useCallback, useMemo, useRef } from "react";
-import { api, projectUrl } from "@/lib/api-client";
-import { useTabStore } from "@/stores/tab-store";
-import type { GitGraphData, GitCommit } from "../../../types/git";
-import { buildCommitLabels, computeLanes, computeSvgPaths, ROW_HEIGHT } from "./git-graph-constants";
-
-const PAGE_SIZE = 200;
-
-export function useGitGraph(projectName: string | undefined) {
-  const [data, setData] = useState<GitGraphData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [hasMore, setHasMore] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [acting, setActing] = useState(false);
-  const [selectedCommit, setSelectedCommit] = useState<GitCommit | null>(null);
-  const [commitFiles, setCommitFiles] = useState<
-    Array<{ path: string; additions: number; deletions: number }>
-  >([]);
-  const [loadingDetail, setLoadingDetail] = useState(false);
-  const [branchFilter, setBranchFilter] = useState("__all__");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [showSearch, setShowSearch] = useState(false);
-  const { openTab } = useTabStore();
-  const loadedCountRef = useRef(0);
-
-  const fetchGraph = useCallback(async () => {
-    if (!projectName) return;
-    try {
-      setLoading(true);
-      // Fetch at least PAGE_SIZE, but if we've loaded more via pagination, re-fetch all
-      const count = Math.max(PAGE_SIZE, loadedCountRef.current);
-      const result = await api.get<GitGraphData>(
-        `${projectUrl(projectName)}/git/graph?max=${count}`,
-      );
-      setData(result);
-      loadedCountRef.current = result.commits.length;
-      setHasMore(result.commits.length >= count);
-      setError(null);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to fetch graph");
-    } finally {
-      setLoading(false);
-    }
-  }, [projectName]);
-
-  const loadMore = useCallback(async () => {
-    if (!projectName || loadingMore || !hasMore) return;
-    try {
-      setLoadingMore(true);
-      const skip = loadedCountRef.current;
-      const result = await api.get<GitGraphData>(
-        `${projectUrl(projectName)}/git/graph?max=${PAGE_SIZE}&skip=${skip}`,
-      );
-      if (result.commits.length === 0) {
-        setHasMore(false);
-        return;
-      }
-      setData((prev) => {
-        if (!prev) return result;
-        // Deduplicate by hash
-        const existing = new Set(prev.commits.map((c) => c.hash));
-        const newCommits = result.commits.filter((c) => !existing.has(c.hash));
-        // Merge branches: keep existing + add new remote-only branches
-        const existingBranches = new Set(prev.branches.map((b) => b.name));
-        const newBranches = result.branches.filter((b) => !existingBranches.has(b.name));
-        return {
-          commits: [...prev.commits, ...newCommits],
-          branches: [...prev.branches, ...newBranches],
-          head: prev.head,
-        };
-      });
-      loadedCountRef.current = skip + result.commits.length;
-      setHasMore(result.commits.length >= PAGE_SIZE);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to load more");
-    } finally {
-      setLoadingMore(false);
-    }
-  }, [projectName, loadingMore, hasMore]);
-
-  useEffect(() => {
-    fetchGraph();
-    const interval = setInterval(fetchGraph, 10000);
-    return () => clearInterval(interval);
-  }, [fetchGraph]);
-
-  const gitAction = async (path: string, body: Record<string, unknown>) => {
-    if (!projectName) return;
-    setActing(true);
-    try { await api.post(`${projectUrl(projectName)}${path}`, body); await fetchGraph(); }
-    catch (e) { setError(e instanceof Error ? e.message : "Action failed"); }
-    finally { setActing(false); }
-  };
-
-  const fetchFromRemotes = () => gitAction("/git/fetch", {});
-  const handleCheckout = (ref: string) => gitAction("/git/checkout", { ref });
-  const handleCherryPick = (hash: string) => gitAction("/git/cherry-pick", { hash });
-  const handleRevert = (hash: string) => gitAction("/git/revert", { hash });
-  const handleMerge = (source: string) => gitAction("/git/merge", { source });
-  const handleDeleteBranch = (name: string) => gitAction("/git/branch/delete", { name });
-  const handlePushBranch = (branch: string) => gitAction("/git/push", { branch });
-  const handleCreateTag = (name: string, hash?: string) => gitAction("/git/tag", { name, hash });
-  const copyHash = (hash: string) => navigator.clipboard.writeText(hash);
-
-  const handleCreateBranch = async (name: string, from: string) => {
-    const exists = data?.branches.some((b) => b.name === name || b.name.endsWith(`/${name}`));
-    if (exists) {
-      if (!window.confirm(`Branch "${name}" already exists.\nDelete and recreate from this commit?`)) return;
-      await gitAction("/git/branch/delete", { name });
-    }
-    await gitAction("/git/branch/create", { name, from });
-  };
-
-  const handleCreatePr = async (branch: string) => {
-    if (!projectName) return;
-    try {
-      const r = await api.get<{ url: string | null }>(`${projectUrl(projectName)}/git/pr-url?branch=${encodeURIComponent(branch)}`);
-      if (r.url) window.open(r.url, "_blank");
-    } catch { /* silent */ }
-  };
-
-  const selectCommit = async (commit: GitCommit) => {
-    if (selectedCommit?.hash === commit.hash) { setSelectedCommit(null); return; }
-    setSelectedCommit(commit);
-    setLoadingDetail(true);
-    try {
-      const parent = commit.parents[0] ?? "";
-      const ref1Param = parent ? `ref1=${encodeURIComponent(parent)}&` : "";
-      const files = await api.get<Array<{ path: string; additions: number; deletions: number }>>(
-        `${projectUrl(projectName!)}/git/diff-stat?${ref1Param}ref2=${encodeURIComponent(commit.hash)}`);
-      setCommitFiles(Array.isArray(files) ? files : []);
-    } catch { setCommitFiles([]); }
-    finally { setLoadingDetail(false); }
-  };
-
-  const openDiffForCommit = (commit: GitCommit) => openTab({
-    type: "git-diff", title: `Diff ${commit.abbreviatedHash}`, closable: true,
-    metadata: { projectName, ref1: commit.parents[0] ?? undefined, ref2: commit.hash },
-    projectId: projectName ?? null,
-  });
-
-  // --- Computed ---
-  const commitLabels = useMemo(() => buildCommitLabels(data), [data]);
-  const currentBranch = data?.branches.find((b) => b.current);
-  const headHash = data?.head ?? "";
-
-  const filteredCommits = useMemo(() => {
-    if (!data) return [];
-    let commits = data.commits;
-    if (branchFilter !== "__all__") {
-      const branch = data.branches.find((b) => b.name === branchFilter);
-      if (branch) {
-        const reachable = new Set<string>();
-        const queue = [branch.commitHash];
-        while (queue.length > 0) {
-          const hash = queue.pop()!;
-          if (reachable.has(hash)) continue;
-          reachable.add(hash);
-          const c = data.commits.find((cm) => cm.hash === hash);
-          if (c) queue.push(...c.parents);
-        }
-        commits = commits.filter((c) => reachable.has(c.hash));
-      }
-    }
-    if (searchQuery.trim()) {
-      const q = searchQuery.toLowerCase();
-      commits = commits.filter(
-        (c) =>
-          c.subject.toLowerCase().includes(q) ||
-          c.authorName.toLowerCase().includes(q) ||
-          c.abbreviatedHash.includes(q) ||
-          c.hash.includes(q),
-      );
-    }
-    return commits;
-  }, [data, branchFilter, searchQuery]);
-
-  const filteredData = useMemo(() => (data ? { ...data, commits: filteredCommits } : null), [data, filteredCommits]);
-  const filteredLanes = useMemo(() => computeLanes(filteredData), [filteredData]);
-  const svgHeight = filteredCommits.length * ROW_HEIGHT + ROW_HEIGHT * 2; // extra padding for unloaded-parent lines
-  const svgPaths = useMemo(
-    () => computeSvgPaths(filteredData, filteredLanes.laneMap, filteredLanes.unloadedParentLanes, svgHeight),
-    [filteredData, filteredLanes.laneMap, filteredLanes.unloadedParentLanes, svgHeight]);
-
-  return {
-    data, loading, loadingMore, hasMore, error, acting,
-    selectedCommit, setSelectedCommit,
-    commitFiles, loadingDetail,
-    branchFilter, setBranchFilter,
-    searchQuery, setSearchQuery,
-    showSearch, setShowSearch,
-    fetchGraph, fetchFromRemotes, loadMore,
-    handleCheckout, handleCherryPick, handleRevert,
-    handleMerge, handleDeleteBranch, handlePushBranch,
-    handleCreateBranch, handleCreateTag, handleCreatePr,
-    copyHash, selectCommit, openDiffForCommit,
-    commitLabels, currentBranch, headHash,
-    filteredCommits, filteredLanes, svgHeight, svgPaths,
-  };
-}