@hienlh/ppm 0.7.41 → 0.8.1

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

@@ -0,0 +1,185 @@
+import type { GitGraphData } from "../../../types/git";
+
+export const LANE_COLORS = [
+  "#0085d9", "#d73a49", "#6f42c1", "#2cbe4e", "#e36209",
+  "#005cc5", "#b31d28", "#5a32a3", "#22863a", "#cb2431",
+];
+
+export const ROW_HEIGHT = 24;
+export const LANE_WIDTH = 16;
+export const NODE_RADIUS = 4;
+
+/** Build commit → branch/tag label map (shows local + remote-only branches) */
+export function buildCommitLabels(data: GitGraphData | null) {
+  const labels = new Map<string, Array<{ name: string; type: "branch" | "tag"; remotes: string[]; current: boolean }>>();
+  if (!data) return labels;
+
+  // Collect which remote branches are already covered by a local branch
+  const coveredRemotes = new Set<string>();
+  for (const branch of data.branches) {
+    if (!branch.remote) {
+      for (const remote of branch.remotes) {
+        coveredRemotes.add(`remotes/${remote}/${branch.name}`);
+      }
+    }
+  }
+
+  for (const branch of data.branches) {
+    if (branch.remote) {
+      // Show remote-only branches (not covered by a local branch)
+      if (coveredRemotes.has(branch.name)) continue;
+      const arr = labels.get(branch.commitHash) ?? [];
+      // Display as "remote/branch" (strip "remotes/" prefix)
+      const displayName = branch.name.replace(/^remotes\//, "");
+      arr.push({ name: displayName, type: "branch", remotes: [], current: false });
+      labels.set(branch.commitHash, arr);
+    } else {
+      const arr = labels.get(branch.commitHash) ?? [];
+      arr.push({ name: branch.name, type: "branch", remotes: branch.remotes, current: branch.current });
+      labels.set(branch.commitHash, arr);
+    }
+  }
+
+  for (const commit of data.commits) {
+    for (const ref of commit.refs) {
+      if (ref.startsWith("tag: ")) {
+        const tagName = ref.replace("tag: ", "");
+        const arr = labels.get(commit.hash) ?? [];
+        arr.push({ name: tagName, type: "tag", remotes: [], current: false });
+        labels.set(commit.hash, arr);
+      }
+    }
+  }
+  return labels;
+}
+
+/** Lane assignment algorithm — recycles freed lanes to keep graph compact */
+export function computeLanes(data: GitGraphData | null) {
+  const map = new Map<string, number>();
+  if (!data) return { laneMap: map, maxLane: 0, unloadedParentLanes: new Map<string, number>() };
+
+  let nextLane = 0;
+  let maxLaneUsed = 0;
+  const activeLanes = new Map<string, number>();
+  const commitSet = new Set(data.commits.map((c) => c.hash));
+  const freeLanes: number[] = [];
+
+  const allocLane = () => {
+    if (freeLanes.length > 0) {
+      freeLanes.sort((a, b) => a - b);
+      return freeLanes.shift()!;
+    }
+    return nextLane++;
+  };
+
+  for (const commit of data.commits) {
+    let lane = activeLanes.get(commit.hash);
+    if (lane === undefined) lane = allocLane();
+    map.set(commit.hash, lane);
+    if (lane > maxLaneUsed) maxLaneUsed = lane;
+    activeLanes.delete(commit.hash);
+
+    let laneReused = false;
+    for (let i = 0; i < commit.parents.length; i++) {
+      const parent = commit.parents[i]!;
+      if (!activeLanes.has(parent)) {
+        if (i === 0) {
+          activeLanes.set(parent, lane);
+          laneReused = true;
+        } else {
+          const newLane = allocLane();
+          activeLanes.set(parent, newLane);
+          if (newLane > maxLaneUsed) maxLaneUsed = newLane;
+        }
+      }
+    }
+    if (!laneReused) freeLanes.push(lane);
+  }
+
+  const unloadedParentLanes = new Map<string, number>();
+  for (const [hash, lane] of activeLanes) {
+    if (!commitSet.has(hash)) unloadedParentLanes.set(hash, lane);
+  }
+
+  return { laneMap: map, maxLane: maxLaneUsed, unloadedParentLanes };
+}
+
+/** Build SVG paths for connections (including unloaded parent extension) */
+export function computeSvgPaths(
+  data: GitGraphData | null,
+  laneMap: Map<string, number>,
+  unloadedParentLanes: Map<string, number>,
+  totalHeight: number,
+) {
+  if (!data) return [];
+  const paths: Array<{ d: string; color: string }> = [];
+  const commitSet = new Set(data.commits.map((c) => c.hash));
+
+  for (let idx = 0; idx < data.commits.length; idx++) {
+    const commit = data.commits[idx]!;
+    const lane = laneMap.get(commit.hash) ?? 0;
+    const color = LANE_COLORS[lane % LANE_COLORS.length]!;
+
+    for (const parentHash of commit.parents) {
+      const parentIdx = data.commits.findIndex((c) => c.hash === parentHash);
+
+      if (parentIdx >= 0) {
+        // Parent is loaded — draw connection
+        const parentLane = laneMap.get(parentHash) ?? 0;
+        const parentColor = LANE_COLORS[parentLane % LANE_COLORS.length]!;
+        const x1 = lane * LANE_WIDTH + LANE_WIDTH / 2;
+        const y1 = idx * ROW_HEIGHT + ROW_HEIGHT / 2;
+        const x2 = parentLane * LANE_WIDTH + LANE_WIDTH / 2;
+        const y2 = parentIdx * ROW_HEIGHT + ROW_HEIGHT / 2;
+
+        let d: string;
+        const isMerge = commit.parents.indexOf(parentHash) > 0;
+        if (x1 === x2) {
+          d = `M ${x1} ${y1} L ${x2} ${y2}`;
+        } else if (isMerge) {
+          const curveEnd = y1 + ROW_HEIGHT;
+          d = `M ${x1} ${y1} C ${x1} ${curveEnd} ${x2} ${y1} ${x2} ${curveEnd} L ${x2} ${y2}`;
+        } else {
+          const curveStart = y2 - ROW_HEIGHT;
+          d = `M ${x1} ${y1} L ${x1} ${curveStart} C ${x1} ${y2} ${x2} ${curveStart} ${x2} ${y2}`;
+        }
+        const lineColor = commit.parents.indexOf(parentHash) === 0 ? color : parentColor;
+        paths.push({ d, color: lineColor });
+      } else if (!commitSet.has(parentHash)) {
+        // Parent NOT loaded — use the parent's assigned lane for the extension line
+        const parentLane = unloadedParentLanes.get(parentHash) ?? lane;
+        const parentColor = LANE_COLORS[parentLane % LANE_COLORS.length]!;
+        const x1 = lane * LANE_WIDTH + LANE_WIDTH / 2;
+        const y1 = idx * ROW_HEIGHT + ROW_HEIGHT / 2;
+        const x2 = parentLane * LANE_WIDTH + LANE_WIDTH / 2;
+
+        if (x1 === x2) {
+          // Same lane — straight down
+          paths.push({ d: `M ${x1} ${y1} L ${x1} ${totalHeight}`, color });
+        } else {
+          // Different lane — curve then straight down
+          const curveEnd = y1 + ROW_HEIGHT;
+          const d = `M ${x1} ${y1} C ${x1} ${curveEnd} ${x2} ${y1} ${x2} ${curveEnd} L ${x2} ${totalHeight}`;
+          paths.push({ d, color: parentColor });
+        }
+      }
+    }
+  }
+  return paths;
+}
+
+export function relativeDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  if (diffMins < 1) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  const diffHours = Math.floor(diffMins / 60);
+  if (diffHours < 24) return `${diffHours}h ago`;
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 30) return `${diffDays}d ago`;
+  const diffMonths = Math.floor(diffDays / 30);
+  if (diffMonths < 12) return `${diffMonths}mo ago`;
+  return `${Math.floor(diffMonths / 12)}y ago`;
+}

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

@@ -0,0 +1,107 @@
+import { Button } from "@/components/ui/button";
+import { useTabStore } from "@/stores/tab-store";
+import { basename } from "@/lib/utils";
+import type { GitCommit } from "../../../types/git";
+
+interface GitGraphDetailProps {
+  commit: GitCommit;
+  files: Array<{ path: string; additions: number; deletions: number }>;
+  loadingDetail: boolean;
+  projectName: string;
+  onClose: () => void;
+  copyHash: (hash: string) => void;
+}
+
+export function GitGraphDetail({
+  commit,
+  files,
+  loadingDetail,
+  projectName,
+  onClose,
+  copyHash,
+}: GitGraphDetailProps) {
+  const { openTab } = useTabStore();
+
+  return (
+    <div className="border-t bg-muted/30 max-h-[40%] overflow-auto">
+      <div className="px-3 py-2 border-b flex items-center justify-between">
+        <span className="text-sm font-medium truncate">
+          {commit.abbreviatedHash} — {commit.subject}
+        </span>
+        <Button variant="ghost" size="icon-xs" onClick={onClose}>
+          ✕
+        </Button>
+      </div>
+      <div className="px-3 py-2 text-xs space-y-1">
+        <div className="flex gap-4">
+          <span className="text-muted-foreground w-12 shrink-0">Author</span>
+          <span>
+            {commit.authorName} &lt;{commit.authorEmail}&gt;
+          </span>
+        </div>
+        <div className="flex gap-4">
+          <span className="text-muted-foreground w-12 shrink-0">Date</span>
+          <span>{new Date(commit.authorDate).toLocaleString()}</span>
+        </div>
+        <div className="flex gap-4">
+          <span className="text-muted-foreground w-12 shrink-0">Hash</span>
+          <span
+            className="font-mono cursor-pointer hover:text-primary"
+            onClick={() => copyHash(commit.hash)}
+          >
+            {commit.hash}
+          </span>
+        </div>
+        {commit.parents.length > 0 && (
+          <div className="flex gap-4">
+            <span className="text-muted-foreground w-12 shrink-0">Parents</span>
+            <span className="font-mono">
+              {commit.parents.map((p) => p.slice(0, 7)).join(", ")}
+            </span>
+          </div>
+        )}
+        {commit.body && (
+          <div className="mt-2 p-2 bg-background rounded text-xs whitespace-pre-wrap">
+            {commit.body}
+          </div>
+        )}
+      </div>
+      {/* Changed files */}
+      <div className="px-3 py-1 border-t">
+        <div className="text-xs text-muted-foreground py-1">
+          {loadingDetail
+            ? "Loading files..."
+            : `${files.length} file${files.length !== 1 ? "s" : ""} changed`}
+        </div>
+        {files.map((file) => (
+          <div
+            key={file.path}
+            className="flex items-center gap-2 py-0.5 text-xs hover:bg-muted/50 rounded px-1 cursor-pointer"
+            onClick={() =>
+              openTab({
+                type: "git-diff",
+                title: `Diff ${basename(file.path)}`,
+                closable: true,
+                metadata: {
+                  projectName,
+                  ref1: commit.parents[0] ?? undefined,
+                  ref2: commit.hash,
+                  filePath: file.path,
+                },
+                projectId: projectName,
+              })
+            }
+          >
+            <span className="flex-1 truncate font-mono">{file.path}</span>
+            {file.additions > 0 && (
+              <span className="text-green-500">+{file.additions}</span>
+            )}
+            {file.deletions > 0 && (
+              <span className="text-red-500">-{file.deletions}</span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+interface GitGraphDialogProps {
+  type: "branch" | "tag" | null;
+  hash?: string;
+  onClose: () => void;
+  onCreateBranch: (name: string, from: string) => void;
+  onCreateTag: (name: string, hash?: string) => void;
+}
+
+export function GitGraphDialog({
+  type,
+  hash,
+  onClose,
+  onCreateBranch,
+  onCreateTag,
+}: GitGraphDialogProps) {
+  const [inputValue, setInputValue] = useState("");
+
+  const handleSubmit = () => {
+    if (!inputValue.trim()) return;
+    if (type === "branch") {
+      onCreateBranch(inputValue.trim(), hash!);
+    } else {
+      onCreateTag(inputValue.trim(), hash);
+    }
+    onClose();
+  };
+
+  return (
+    <Dialog
+      open={type !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {type === "branch" ? "Create Branch" : "Create Tag"}
+          </DialogTitle>
+        </DialogHeader>
+        <Input
+          placeholder={type === "branch" ? "Branch name" : "Tag name"}
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleSubmit();
+          }}
+          autoFocus
+        />
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button disabled={!inputValue.trim()} onClick={handleSubmit}>
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,167 @@
+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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,54 @@
+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>
+  );
+}