@imjp/writenex-astro 0.1.0

package/src/client/components/VersionHistory/DiffViewer.tsx

@@ -0,0 +1,383 @@
+/**
+ * @fileoverview Diff Viewer component
+ *
+ * Side-by-side or inline diff display for comparing version content.
+ * Highlights additions and deletions with color coding.
+ * Includes focus trap and ARIA attributes for accessibility compliance.
+ *
+ * @module @writenex/astro/client/components/VersionHistory/DiffViewer
+ */
+
+import { useState, useMemo, useEffect, useRef } from "react";
+import { X, Columns, AlignLeft } from "lucide-react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+import "./DiffViewer.css";
+
+/**
+ * Props for the DiffViewer component
+ */
+interface DiffViewerProps {
+  /** Old content (version) */
+  oldContent: string;
+  /** New content (current) */
+  newContent: string;
+  /** Label for old content */
+  oldLabel: string;
+  /** Label for new content */
+  newLabel: string;
+  /** Callback to close the viewer */
+  onClose: () => void;
+}
+
+/**
+ * Diff line type
+ */
+type DiffLineType = "unchanged" | "added" | "removed";
+
+/**
+ * Diff line data
+ */
+interface DiffLine {
+  type: DiffLineType;
+  content: string;
+  oldLineNum?: number;
+  newLineNum?: number;
+}
+
+/**
+ * Simple line-by-line diff algorithm
+ * Uses longest common subsequence approach
+ */
+function computeDiff(oldText: string, newText: string): DiffLine[] {
+  const oldLines = oldText.split("\n");
+  const newLines = newText.split("\n");
+  const result: DiffLine[] = [];
+
+  // Build LCS table
+  const m = oldLines.length;
+  const n = newLines.length;
+  const dp: number[][] = Array(m + 1)
+    .fill(null)
+    .map(() => Array(n + 1).fill(0));
+
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (oldLines[i - 1] === newLines[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1] + 1;
+      } else {
+        dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
+      }
+    }
+  }
+
+  // Backtrack to find diff
+  let i = m;
+  let j = n;
+  const stack: DiffLine[] = [];
+
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldLines[i - 1] === newLines[j - 1]) {
+      stack.push({
+        type: "unchanged",
+        content: oldLines[i - 1],
+        oldLineNum: i,
+        newLineNum: j,
+      });
+      i--;
+      j--;
+    } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
+      stack.push({
+        type: "added",
+        content: newLines[j - 1],
+        newLineNum: j,
+      });
+      j--;
+    } else if (i > 0) {
+      stack.push({
+        type: "removed",
+        content: oldLines[i - 1],
+        oldLineNum: i,
+      });
+      i--;
+    }
+  }
+
+  // Reverse to get correct order
+  while (stack.length > 0) {
+    result.push(stack.pop()!);
+  }
+
+  return result;
+}
+
+/**
+ * Diff Viewer component
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <DiffViewer
+ *   oldContent={versionContent}
+ *   newContent={currentContent}
+ *   oldLabel="Version: 2h ago"
+ *   newLabel="Current"
+ *   onClose={() => setShowDiff(false)}
+ * />
+ * ```
+ */
+export function DiffViewer({
+  oldContent,
+  newContent,
+  oldLabel,
+  newLabel,
+  onClose,
+}: DiffViewerProps): React.ReactElement {
+  const [viewMode, setViewMode] = useState<"split" | "unified">("split");
+  const triggerRef = useRef<HTMLElement | null>(null);
+
+  // Store the trigger element when modal mounts
+  useEffect(() => {
+    triggerRef.current = document.activeElement as HTMLElement;
+  }, []);
+
+  // Focus trap for accessibility
+  const { containerRef } = useFocusTrap({
+    enabled: true,
+    onEscape: onClose,
+    returnFocusTo: triggerRef.current,
+  });
+
+  const diffLines = useMemo(
+    () => computeDiff(oldContent, newContent),
+    [oldContent, newContent]
+  );
+
+  const stats = useMemo(() => {
+    let additions = 0;
+    let deletions = 0;
+    for (const line of diffLines) {
+      if (line.type === "added") additions++;
+      if (line.type === "removed") deletions++;
+    }
+    return { additions, deletions };
+  }, [diffLines]);
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+
+  return (
+    <div className="wn-diff-overlay" onClick={handleOverlayClick}>
+      <div
+        ref={containerRef}
+        className="wn-diff-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="diff-viewer-title"
+      >
+        {/* Header */}
+        <div className="wn-diff-header">
+          <div className="wn-diff-header-left">
+            <h2 id="diff-viewer-title" className="wn-diff-title">
+              Compare Versions
+            </h2>
+            <div className="wn-diff-stats">
+              <span className="wn-diff-stat wn-diff-stat--added">
+                +{stats.additions}
+              </span>
+              <span className="wn-diff-stat wn-diff-stat--removed">
+                -{stats.deletions}
+              </span>
+            </div>
+          </div>
+          <div className="wn-diff-header-right">
+            <div
+              className="wn-diff-view-toggle"
+              role="group"
+              aria-label="View mode"
+            >
+              <button
+                className={`wn-diff-view-btn ${viewMode === "split" ? "wn-diff-view-btn--active" : ""}`}
+                onClick={() => setViewMode("split")}
+                title="Split view"
+                aria-pressed={viewMode === "split"}
+                aria-label="Split view"
+              >
+                <Columns size={14} />
+              </button>
+              <button
+                className={`wn-diff-view-btn ${viewMode === "unified" ? "wn-diff-view-btn--active" : ""}`}
+                onClick={() => setViewMode("unified")}
+                title="Unified view"
+                aria-pressed={viewMode === "unified"}
+                aria-label="Unified view"
+              >
+                <AlignLeft size={14} />
+              </button>
+            </div>
+            <button
+              className="wn-diff-close"
+              onClick={onClose}
+              title="Close"
+              aria-label="Close diff viewer"
+            >
+              <X size={16} />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="wn-diff-content">
+          {viewMode === "split" ? (
+            <SplitView
+              diffLines={diffLines}
+              oldLabel={oldLabel}
+              newLabel={newLabel}
+            />
+          ) : (
+            <UnifiedView
+              diffLines={diffLines}
+              oldLabel={oldLabel}
+              newLabel={newLabel}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Split view component
+ */
+function SplitView({
+  diffLines,
+  oldLabel,
+  newLabel,
+}: {
+  diffLines: DiffLine[];
+  oldLabel: string;
+  newLabel: string;
+}): React.ReactElement {
+  return (
+    <div className="wn-diff-split">
+      {/* Old content column */}
+      <div className="wn-diff-column">
+        <div className="wn-diff-column-header">{oldLabel}</div>
+        <div className="wn-diff-column-content">
+          {diffLines.map((line, idx) => {
+            if (line.type === "added") {
+              return (
+                <div key={idx} className="wn-diff-line wn-diff-line--empty">
+                  <span className="wn-diff-line-num"></span>
+                  <span className="wn-diff-line-content"></span>
+                </div>
+              );
+            }
+            return (
+              <div
+                key={idx}
+                className={`wn-diff-line ${line.type === "removed" ? "wn-diff-line--removed" : ""}`}
+              >
+                <span className="wn-diff-line-num">{line.oldLineNum}</span>
+                <span className="wn-diff-line-content">
+                  {line.type === "removed" && (
+                    <span className="wn-diff-line-marker">-</span>
+                  )}
+                  {line.content}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* New content column */}
+      <div className="wn-diff-column">
+        <div className="wn-diff-column-header">{newLabel}</div>
+        <div className="wn-diff-column-content">
+          {diffLines.map((line, idx) => {
+            if (line.type === "removed") {
+              return (
+                <div key={idx} className="wn-diff-line wn-diff-line--empty">
+                  <span className="wn-diff-line-num"></span>
+                  <span className="wn-diff-line-content"></span>
+                </div>
+              );
+            }
+            return (
+              <div
+                key={idx}
+                className={`wn-diff-line ${line.type === "added" ? "wn-diff-line--added" : ""}`}
+              >
+                <span className="wn-diff-line-num">{line.newLineNum}</span>
+                <span className="wn-diff-line-content">
+                  {line.type === "added" && (
+                    <span className="wn-diff-line-marker">+</span>
+                  )}
+                  {line.content}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Unified view component
+ */
+function UnifiedView({
+  diffLines,
+  oldLabel,
+  newLabel,
+}: {
+  diffLines: DiffLine[];
+  oldLabel: string;
+  newLabel: string;
+}): React.ReactElement {
+  return (
+    <div className="wn-diff-unified">
+      <div className="wn-diff-unified-header">
+        <span className="wn-diff-unified-label wn-diff-unified-label--old">
+          {oldLabel}
+        </span>
+        <span className="wn-diff-unified-arrow">→</span>
+        <span className="wn-diff-unified-label wn-diff-unified-label--new">
+          {newLabel}
+        </span>
+      </div>
+      <div className="wn-diff-unified-content">
+        {diffLines.map((line, idx) => (
+          <div
+            key={idx}
+            className={`wn-diff-line ${
+              line.type === "added"
+                ? "wn-diff-line--added"
+                : line.type === "removed"
+                  ? "wn-diff-line--removed"
+                  : ""
+            }`}
+          >
+            <span className="wn-diff-line-num wn-diff-line-num--old">
+              {line.oldLineNum ?? ""}
+            </span>
+            <span className="wn-diff-line-num wn-diff-line-num--new">
+              {line.newLineNum ?? ""}
+            </span>
+            <span className="wn-diff-line-content">
+              {line.type !== "unchanged" && (
+                <span className="wn-diff-line-marker">
+                  {line.type === "added" ? "+" : "-"}
+                </span>
+              )}
+              {line.content}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/client/components/VersionHistory/VersionActions.css

@@ -0,0 +1,318 @@
+/**
+ * @fileoverview Version Actions styles
+ *
+ * Styling for version action buttons and confirmation modals.
+ */
+
+/* ============================================================================
+   VERSION ACTIONS BAR
+   ============================================================================ */
+
+.wn-version-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wn-space-2);
+  padding: var(--wn-space-4);
+  border-top: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-zinc-950);
+  flex-shrink: 0;
+}
+
+.wn-version-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-2);
+  flex: 1 1 calc(50% - 0.1875rem);
+  min-width: 0;
+  padding: var(--wn-space-3) var(--wn-space-2);
+  border: 1px solid var(--wn-zinc-700);
+  border-radius: var(--wn-radius-sm);
+  background-color: transparent;
+  font-size: var(--wn-font-xs);
+  font-weight: 500;
+  color: var(--wn-zinc-400);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition:
+    background-color var(--wn-transition-fast),
+    border-color var(--wn-transition-fast),
+    color var(--wn-transition-fast);
+}
+
+.wn-version-action:hover:not(:disabled) {
+  background-color: var(--wn-overlay-5);
+  border-color: var(--wn-zinc-600);
+  color: var(--wn-zinc-50);
+}
+
+.wn-version-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.wn-version-action--primary {
+  border-color: var(--wn-brand-500);
+  background-color: var(--wn-brand-alpha-10);
+  color: var(--wn-brand-400);
+}
+
+.wn-version-action--primary:hover:not(:disabled) {
+  background-color: var(--wn-brand-alpha-20);
+  border-color: var(--wn-brand-400);
+  color: #93c5fd;
+}
+
+.wn-version-action--danger {
+  border-color: var(--wn-error-500);
+  background-color: var(--wn-error-alpha-10);
+  color: var(--wn-error-400);
+}
+
+.wn-version-action--danger:hover:not(:disabled) {
+  background-color: var(--wn-error-alpha-20);
+  border-color: var(--wn-error-400);
+  color: #fca5a5;
+}
+
+/* ============================================================================
+   CONFIRMATION MODAL
+   ============================================================================ */
+
+.wn-confirm-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--wn-z-confirm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--wn-backdrop);
+  animation: fadeIn var(--wn-transition-fast) ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.wn-confirm-modal {
+  width: 100%;
+  max-width: var(--wn-modal-sm);
+  padding: var(--wn-space-6);
+  border-radius: var(--wn-radius-lg);
+  border: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-zinc-900);
+  box-shadow: var(--wn-shadow-lg);
+  animation: zoomIn var(--wn-transition-fast) ease-out;
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.wn-confirm-header {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  margin-bottom: var(--wn-space-4);
+}
+
+.wn-confirm-icon {
+  color: var(--wn-warning-400);
+  flex-shrink: 0;
+}
+
+.wn-confirm-title {
+  flex: 1;
+  margin: 0;
+  font-size: var(--wn-font-md);
+  font-weight: 600;
+  color: var(--wn-zinc-50);
+}
+
+.wn-confirm-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-md);
+  height: var(--wn-icon-btn-md);
+  padding: 0;
+  border: none;
+  border-radius: var(--wn-radius-sm);
+  background-color: transparent;
+  color: var(--wn-zinc-500);
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    color var(--wn-transition-fast);
+}
+
+.wn-confirm-close:hover:not(:disabled) {
+  background-color: var(--wn-overlay-10);
+  color: var(--wn-zinc-50);
+}
+
+.wn-confirm-close:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.wn-confirm-message {
+  margin: 0 0 var(--wn-space-6);
+  font-size: var(--wn-font-base);
+  line-height: 1.5;
+  color: var(--wn-zinc-400);
+}
+
+.wn-confirm-actions {
+  display: flex;
+  gap: var(--wn-space-3);
+  justify-content: flex-end;
+}
+
+.wn-confirm-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-2);
+  padding: var(--wn-space-3) var(--wn-space-5);
+  border-radius: var(--wn-radius-md);
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    border-color var(--wn-transition-fast);
+}
+
+.wn-confirm-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.wn-confirm-btn--cancel {
+  border: 1px solid var(--wn-zinc-700);
+  background-color: transparent;
+  color: var(--wn-zinc-400);
+}
+
+.wn-confirm-btn--cancel:hover:not(:disabled) {
+  background-color: var(--wn-overlay-5);
+  border-color: var(--wn-zinc-600);
+  color: var(--wn-zinc-50);
+}
+
+.wn-confirm-btn--primary {
+  border: 1px solid var(--wn-brand-500);
+  background-color: var(--wn-brand-500);
+  color: #fff;
+}
+
+.wn-confirm-btn--primary:hover:not(:disabled) {
+  background-color: var(--wn-brand-600);
+  border-color: var(--wn-brand-600);
+}
+
+.wn-confirm-btn--danger {
+  border: 1px solid var(--wn-error-500);
+  background-color: var(--wn-error-500);
+  color: #fff;
+}
+
+.wn-confirm-btn--danger:hover:not(:disabled) {
+  background-color: var(--wn-error-600);
+  border-color: var(--wn-error-600);
+}
+
+/* ============================================================================
+   LIGHT MODE OVERRIDES
+   ============================================================================ */
+
+.wn-light .wn-version-actions {
+  border-top-color: var(--wn-zinc-200);
+  background-color: var(--wn-zinc-50);
+}
+
+.wn-light .wn-version-action {
+  border-color: var(--wn-zinc-200);
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-version-action:hover:not(:disabled) {
+  background-color: var(--wn-overlay-light-3);
+  border-color: var(--wn-zinc-300);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-version-action--primary {
+  border-color: var(--wn-brand-500);
+  background-color: var(--wn-brand-alpha-10);
+  color: var(--wn-brand-600);
+}
+
+.wn-light .wn-version-action--primary:hover:not(:disabled) {
+  background-color: var(--wn-brand-alpha-15);
+  border-color: var(--wn-brand-600);
+  color: #1d4ed8;
+}
+
+.wn-light .wn-version-action--danger {
+  border-color: var(--wn-error-500);
+  background-color: var(--wn-error-alpha-10);
+  color: var(--wn-error-600);
+}
+
+.wn-light .wn-version-action--danger:hover:not(:disabled) {
+  background-color: var(--wn-error-alpha-15);
+  border-color: var(--wn-error-600);
+  color: #b91c1c;
+}
+
+.wn-light .wn-confirm-overlay {
+  background-color: var(--wn-backdrop-light);
+}
+
+.wn-light .wn-confirm-modal {
+  border-color: var(--wn-zinc-200);
+  background-color: #fff;
+}
+
+.wn-light .wn-confirm-title {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-confirm-close {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-confirm-close:hover:not(:disabled) {
+  background-color: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-confirm-message {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-confirm-btn--cancel {
+  border-color: var(--wn-zinc-200);
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-confirm-btn--cancel:hover:not(:disabled) {
+  background-color: var(--wn-overlay-light-3);
+  border-color: var(--wn-zinc-300);
+  color: var(--wn-zinc-900);
+}