@hienlh/ppm 0.9.0-beta.6 → 0.9.0-beta.8

package/src/web/components/editor/csv-preview.tsx

@@ -0,0 +1,228 @@
+import { useState, useMemo, useRef, useCallback, useEffect } from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  flexRender,
+  type ColumnDef,
+  type SortingState,
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { parseCsv, serializeCsv } from "@/lib/csv-parser";
+import { ArrowUp, ArrowDown } from "lucide-react";
+
+interface CsvPreviewProps {
+  content: string;
+  onContentChange: (csv: string) => void;
+  wordWrap?: boolean;
+}
+
+export function CsvPreview({ content, onContentChange, wordWrap }: CsvPreviewProps) {
+  const parsed = useMemo(() => parseCsv(content), [content]);
+  const [rows, setRows] = useState<string[][]>(() => parsed.rows);
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const internalEditRef = useRef(false);
+
+  // Sync when content changes externally (e.g. file reload) — skip if we triggered it
+  useEffect(() => {
+    if (internalEditRef.current) {
+      internalEditRef.current = false;
+      return;
+    }
+    setRows(parsed.rows);
+  }, [parsed.rows]);
+
+  const headers = parsed.headers;
+
+  const updateCell = useCallback(
+    (rowIndex: number, colIndex: number, value: string) => {
+      setRows((prev) => {
+        const next = prev.map((r, i) => (i === rowIndex ? [...r] : r));
+        next[rowIndex]![colIndex] = value;
+        internalEditRef.current = true;
+        onContentChange(serializeCsv(headers, next));
+        return next;
+      });
+    },
+    [headers, onContentChange],
+  );
+
+  const columns = useMemo<ColumnDef<string[], string>[]>(
+    () =>
+      headers.map((h, i) => ({
+        id: `col-${i}`,
+        header: h || `Column ${i + 1}`,
+        accessorFn: (row: string[]) => row[i] ?? "",
+        cell: ({ row, getValue }) => (
+          <CsvCell
+            value={getValue()}
+            onSave={(v) => updateCell(row.index, i, v)}
+            wordWrap={wordWrap}
+          />
+        ),
+        size: 150,
+        minSize: 80,
+      })),
+    [headers, updateCell, wordWrap],
+  );
+
+  const table = useReactTable({
+    data: rows,
+    columns,
+    state: { sorting },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    enableColumnResizing: true,
+    columnResizeMode: "onChange",
+  });
+
+  const { rows: tableRows } = table.getRowModel();
+
+  const virtualizer = useVirtualizer({
+    count: tableRows.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 32,
+    overscan: 20,
+  });
+
+  if (headers.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+        Empty CSV file
+      </div>
+    );
+  }
+
+  return (
+    <div ref={scrollRef} className="flex-1 overflow-auto">
+      <table className="w-full text-xs font-mono border-collapse">
+        <thead className="sticky top-0 bg-background z-10 border-b border-border block">
+          {table.getHeaderGroups().map((hg) => (
+            <tr key={hg.id} className="flex w-full">
+              {hg.headers.map((header) => (
+                <th
+                  key={header.id}
+                  className="relative text-left px-2 py-1.5 font-medium text-muted-foreground select-none cursor-pointer hover:bg-muted/50 border-r border-border last:border-r-0"
+                  style={{ width: header.getSize(), minWidth: header.getSize() }}
+                  onClick={header.column.getToggleSortingHandler()}
+                >
+                  <div className="flex items-center gap-1">
+                    <span className="truncate">
+                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    </span>
+                    {header.column.getIsSorted() === "asc" && <ArrowUp className="size-3 shrink-0" />}
+                    {header.column.getIsSorted() === "desc" && <ArrowDown className="size-3 shrink-0" />}
+                  </div>
+                  {/* Resize handle */}
+                  <div
+                    onMouseDown={header.getResizeHandler()}
+                    onTouchStart={header.getResizeHandler()}
+                    onClick={(e) => e.stopPropagation()}
+                    className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary/50 active:bg-primary"
+                  />
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody style={{ height: virtualizer.getTotalSize(), position: "relative", display: "block" }}>
+          {virtualizer.getVirtualItems().map((vRow) => {
+            const row = tableRows[vRow.index]!;
+            return (
+              <tr
+                key={row.id}
+                data-index={vRow.index}
+                ref={(node) => virtualizer.measureElement(node)}
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  transform: `translateY(${vRow.start}px)`,
+                  display: "flex",
+                }}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <td
+                    key={cell.id}
+                    className={`px-2 py-1 border-b border-border/50 border-r border-r-border/30 last:border-r-0 ${wordWrap ? "whitespace-pre-wrap break-words" : "truncate"}`}
+                    style={{ width: cell.column.getSize(), minWidth: cell.column.getSize() }}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function CsvCell({ value, onSave, wordWrap }: { value: string; onSave: (v: string) => void; wordWrap?: boolean }) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize textarea to fit content
+  const autoResize = useCallback((el: HTMLTextAreaElement | null) => {
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, []);
+
+  useEffect(() => {
+    if (editing && textareaRef.current) {
+      textareaRef.current.focus();
+      autoResize(textareaRef.current);
+    }
+  }, [editing, autoResize]);
+
+  if (!editing) {
+    return (
+      <span
+        className={`block cursor-text ${wordWrap ? "whitespace-pre-wrap break-words" : "truncate"}`}
+        onClick={() => {
+          setDraft(value);
+          setEditing(true);
+        }}
+      >
+        {value || "\u00A0"}
+      </span>
+    );
+  }
+
+  const isMultiline = draft.includes("\n");
+
+  return (
+    <textarea
+      ref={textareaRef}
+      className="w-full bg-transparent outline-none border border-primary/50 rounded text-xs font-mono resize-none p-0.5"
+      style={{ minHeight: isMultiline ? 48 : 20 }}
+      rows={1}
+      value={draft}
+      onChange={(e) => {
+        setDraft(e.target.value);
+        autoResize(e.target);
+      }}
+      onBlur={() => {
+        setEditing(false);
+        if (draft !== value) onSave(draft);
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          // Enter = save, Shift+Enter = newline
+          e.preventDefault();
+          setEditing(false);
+          if (draft !== value) onSave(draft);
+        } else if (e.key === "Escape") {
+          setEditing(false);
+          setDraft(value);
+        }
+      }}
+    />
+  );
+}

package/src/web/components/editor/editor-breadcrumb.tsx

@@ -0,0 +1,225 @@
+import { useMemo, useRef, useEffect } from "react";
+import { ChevronRight, Folder, File, FileCode, FileJson, FileText, FileType } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+} from "@/components/ui/dropdown-menu";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useFileStore, type FileNode } from "@/stores/file-store";
+import { useTabStore } from "@/stores/tab-store";
+import { basename } from "@/lib/utils";
+
+const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
+  ts: FileCode, tsx: FileCode, js: FileCode, jsx: FileCode,
+  py: FileCode, rs: FileCode, go: FileCode, html: FileCode,
+  css: FileCode, scss: FileCode,
+  json: FileJson,
+  md: FileText, txt: FileText,
+  yaml: FileType, yml: FileType,
+};
+
+function getIcon(name: string, isDir: boolean) {
+  if (isDir) return Folder;
+  const ext = name.split(".").pop()?.toLowerCase() ?? "";
+  return ICON_MAP[ext] ?? File;
+}
+
+interface BreadcrumbSegment {
+  name: string;
+  fullPath: string;
+  node: FileNode | null;
+  siblings: FileNode[];
+}
+
+function walkTree(tree: FileNode[], segments: string[]): BreadcrumbSegment[] {
+  const result: BreadcrumbSegment[] = [];
+  let current: FileNode[] = tree;
+
+  for (let i = 0; i < segments.length; i++) {
+    const seg = segments[i]!;
+    const fullPath = segments.slice(0, i + 1).join("/");
+    const match = current.find((n) => n.name === seg);
+    result.push({
+      name: seg,
+      fullPath,
+      node: match ?? null,
+      siblings: current,
+    });
+    if (match?.children) {
+      current = match.children;
+    } else {
+      // Remaining segments have no tree data — add as plain
+      for (let j = i + 1; j < segments.length; j++) {
+        result.push({
+          name: segments[j]!,
+          fullPath: segments.slice(0, j + 1).join("/"),
+          node: null,
+          siblings: [],
+        });
+      }
+      break;
+    }
+  }
+  return result;
+}
+
+function sortNodes(nodes: FileNode[]): FileNode[] {
+  return [...nodes].sort((a, b) => {
+    if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+interface EditorBreadcrumbProps {
+  filePath: string;
+  projectName: string;
+  tabId: string;
+  className?: string;
+}
+
+export function EditorBreadcrumb({ filePath, projectName, tabId, className }: EditorBreadcrumbProps) {
+  const tree = useFileStore((s) => s.tree);
+  const { updateTab, openTab } = useTabStore();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const segments = useMemo(
+    () => walkTree(tree, filePath.split("/").filter(Boolean)),
+    [tree, filePath],
+  );
+
+  // Auto-scroll to rightmost segment
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
+    }
+  }, [segments]);
+
+  function handleFileClick(path: string, e: React.MouseEvent) {
+    const name = basename(path);
+    if (e.metaKey || e.ctrlKey) {
+      openTab({ type: "editor", title: name, metadata: { filePath: path, projectName }, projectId: projectName, closable: true });
+    } else {
+      updateTab(tabId, { title: name, metadata: { filePath: path, projectName } });
+    }
+  }
+
+  return (
+    <div ref={scrollRef} className={className}>
+      {segments.map((seg, i) => (
+        <div key={seg.fullPath} className="flex items-center shrink-0">
+          {i > 0 && <ChevronRight className="size-3 text-muted-foreground shrink-0 mx-0.5" />}
+          {seg.siblings.length > 0 ? (
+            <SegmentDropdown
+              segment={seg}
+              isLast={i === segments.length - 1}
+              projectName={projectName}
+              onFileClick={handleFileClick}
+            />
+          ) : (
+            <span className="text-xs text-muted-foreground px-1 py-0.5">{seg.name}</span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface SegmentDropdownProps {
+  segment: BreadcrumbSegment;
+  isLast: boolean;
+  projectName: string;
+  onFileClick: (path: string, e: React.MouseEvent) => void;
+}
+
+function SegmentDropdown({ segment, isLast, projectName, onFileClick }: SegmentDropdownProps) {
+  const sorted = useMemo(() => sortNodes(segment.siblings), [segment.siblings]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className={`text-xs px-1 py-0.5 rounded hover:bg-muted transition-colors truncate max-w-[120px] ${
+            isLast ? "text-foreground font-medium" : "text-muted-foreground"
+          }`}
+        >
+          {segment.name}
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="max-h-[300px] overflow-hidden p-0">
+        <ScrollArea className="max-h-[300px]">
+          <div className="p-1">
+            {sorted.map((node) => (
+              <NodeMenuItem
+                key={node.path}
+                node={node}
+                projectName={projectName}
+                activePath={segment.fullPath}
+                onFileClick={onFileClick}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface NodeMenuItemProps {
+  node: FileNode;
+  projectName: string;
+  activePath: string;
+  onFileClick: (path: string, e: React.MouseEvent) => void;
+}
+
+function NodeMenuItem({ node, projectName, activePath, onFileClick }: NodeMenuItemProps) {
+  const Icon = getIcon(node.name, node.type === "directory");
+  const isActive = node.path === activePath;
+
+  if (node.type === "directory" && node.children && node.children.length > 0) {
+    return (
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger className={`text-xs gap-1.5 ${isActive ? "bg-muted" : ""}`}>
+          <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+          <span className="truncate">{node.name}</span>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent className="max-h-[300px] overflow-hidden p-0">
+          <ScrollArea className="max-h-[300px]">
+            <div className="p-1">
+              {sortNodes(node.children).map((child) => (
+                <NodeMenuItem
+                  key={child.path}
+                  node={child}
+                  projectName={projectName}
+                  activePath={activePath}
+                  onFileClick={onFileClick}
+                />
+              ))}
+            </div>
+          </ScrollArea>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    );
+  }
+
+  return (
+    <DropdownMenuItem
+      className={`text-xs gap-1.5 cursor-pointer ${isActive ? "bg-muted" : ""}`}
+      onSelect={(e) => {
+        // onSelect doesn't give MouseEvent, use click handler for Ctrl detection
+      }}
+      onClick={(e) => {
+        if (node.type === "directory") return;
+        onFileClick(node.path, e);
+      }}
+    >
+      <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+      <span className="truncate">{node.name}</span>
+    </DropdownMenuItem>
+  );
+}

package/src/web/components/editor/editor-toolbar.tsx

@@ -0,0 +1,74 @@
+import { Code, Eye, WrapText, Table } from "lucide-react";
+
+interface EditorToolbarProps {
+  ext: string;
+  mdMode?: "edit" | "preview";
+  onMdModeChange?: (mode: "edit" | "preview") => void;
+  csvMode?: "table" | "raw";
+  onCsvModeChange?: (mode: "table" | "raw") => void;
+  wordWrap: boolean;
+  onToggleWordWrap: () => void;
+  className?: string;
+}
+
+function ToolbarButton({
+  active,
+  onClick,
+  icon: Icon,
+  label,
+}: {
+  active: boolean;
+  onClick: () => void;
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors ${
+        active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"
+      }`}
+    >
+      <Icon className="size-3" />
+      <span className="hidden sm:inline">{label}</span>
+    </button>
+  );
+}
+
+export function EditorToolbar({
+  ext,
+  mdMode,
+  onMdModeChange,
+  csvMode,
+  onCsvModeChange,
+  wordWrap,
+  onToggleWordWrap,
+  className,
+}: EditorToolbarProps) {
+  const isMarkdown = ext === "md" || ext === "mdx";
+  const isCsv = ext === "csv";
+
+  return (
+    <div className={className}>
+      {isMarkdown && onMdModeChange && (
+        <>
+          <ToolbarButton active={mdMode === "edit"} onClick={() => onMdModeChange("edit")} icon={Code} label="Edit" />
+          <ToolbarButton active={mdMode === "preview"} onClick={() => onMdModeChange("preview")} icon={Eye} label="Preview" />
+        </>
+      )}
+      {isCsv && onCsvModeChange && (
+        <>
+          <ToolbarButton active={csvMode === "table"} onClick={() => onCsvModeChange("table")} icon={Table} label="Table" />
+          <ToolbarButton active={csvMode === "raw"} onClick={() => onCsvModeChange("raw")} icon={Code} label="Raw" />
+        </>
+      )}
+      <ToolbarButton
+        active={wordWrap}
+        onClick={onToggleWordWrap}
+        icon={WrapText}
+        label="Wrap"
+      />
+    </div>
+  );
+}