@imjp/writenex-astro 0.1.0

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

@@ -0,0 +1,277 @@
+/**
+ * @fileoverview Version Actions component
+ *
+ * Action buttons for version operations: restore, compare, download, delete.
+ * Includes confirmation dialogs for destructive actions.
+ * Includes focus trap for accessibility compliance.
+ *
+ * @module @writenex/astro/client/components/VersionHistory/VersionActions
+ */
+
+import { useState, useEffect, useRef } from "react";
+import {
+  RotateCcw,
+  GitCompare,
+  Download,
+  Trash2,
+  Loader2,
+  AlertTriangle,
+  X,
+} from "lucide-react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
+import type { VersionEntry } from "../../../types";
+import "./VersionActions.css";
+
+/**
+ * Props for the VersionActions component
+ */
+interface VersionActionsProps {
+  /** The selected version */
+  version: VersionEntry;
+  /** Callback to restore the version */
+  onRestore: () => void;
+  /** Callback to compare the version */
+  onCompare: () => void;
+  /** Callback to download the version */
+  onDownload: () => void;
+  /** Callback to delete the version */
+  onDelete: () => void;
+  /** Current loading action */
+  loading: string | null;
+}
+
+/**
+ * Props for ConfirmModal component
+ */
+interface ConfirmModalProps {
+  title: string;
+  message: string;
+  confirmLabel: string;
+  confirmVariant?: "danger" | "primary";
+  onConfirm: () => void;
+  onCancel: () => void;
+  loading?: boolean;
+}
+
+/**
+ * Confirmation modal component with focus trap
+ */
+function ConfirmModal({
+  title,
+  message,
+  confirmLabel,
+  confirmVariant = "danger",
+  onConfirm,
+  onCancel,
+  loading,
+}: ConfirmModalProps): React.ReactElement {
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const cancelButtonRef = useRef<HTMLButtonElement>(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: loading ? undefined : onCancel,
+    returnFocusTo: triggerRef.current,
+  });
+
+  // Focus cancel button when modal opens
+  useEffect(() => {
+    setTimeout(() => {
+      cancelButtonRef.current?.focus();
+    }, 50);
+  }, []);
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget && !loading) onCancel();
+  };
+
+  return (
+    <div className="wn-confirm-overlay" onClick={handleOverlayClick}>
+      <div
+        ref={containerRef}
+        className="wn-confirm-modal"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby="confirm-modal-title"
+        aria-describedby="confirm-modal-message"
+      >
+        <div className="wn-confirm-header">
+          <AlertTriangle size={20} className="wn-confirm-icon" />
+          <h3 id="confirm-modal-title" className="wn-confirm-title">
+            {title}
+          </h3>
+          <button
+            className="wn-confirm-close"
+            onClick={onCancel}
+            disabled={loading}
+            aria-label="Close"
+          >
+            <X size={16} />
+          </button>
+        </div>
+        <p id="confirm-modal-message" className="wn-confirm-message">
+          {message}
+        </p>
+        <div className="wn-confirm-actions">
+          <button
+            ref={cancelButtonRef}
+            className="wn-confirm-btn wn-confirm-btn--cancel"
+            onClick={onCancel}
+            disabled={loading}
+          >
+            Cancel
+          </button>
+          <button
+            className={`wn-confirm-btn wn-confirm-btn--${confirmVariant}`}
+            onClick={onConfirm}
+            disabled={loading}
+          >
+            {loading ? (
+              <>
+                <Loader2 size={14} className="wn-spin" />
+                Processing...
+              </>
+            ) : (
+              confirmLabel
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Version Actions component
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <VersionActions
+ *   version={selectedVersion}
+ *   onRestore={handleRestore}
+ *   onCompare={handleCompare}
+ *   onDownload={handleDownload}
+ *   onDelete={handleDelete}
+ *   loading={actionLoading}
+ * />
+ * ```
+ */
+export function VersionActions({
+  version,
+  onRestore,
+  onCompare,
+  onDownload,
+  onDelete,
+  loading,
+}: VersionActionsProps): React.ReactElement {
+  const [showRestoreConfirm, setShowRestoreConfirm] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  const handleRestoreClick = () => {
+    setShowRestoreConfirm(true);
+  };
+
+  const handleRestoreConfirm = () => {
+    onRestore();
+    setShowRestoreConfirm(false);
+  };
+
+  const handleDeleteClick = () => {
+    setShowDeleteConfirm(true);
+  };
+
+  const handleDeleteConfirm = () => {
+    onDelete();
+    setShowDeleteConfirm(false);
+  };
+
+  const isLoading = loading !== null;
+
+  return (
+    <>
+      <div className="wn-version-actions">
+        <button
+          className="wn-version-action wn-version-action--primary"
+          onClick={handleRestoreClick}
+          disabled={isLoading}
+          title="Restore this version"
+        >
+          {loading === "restore" ? (
+            <Loader2 size={14} className="wn-spin" />
+          ) : (
+            <RotateCcw size={14} />
+          )}
+          Restore
+        </button>
+        <button
+          className="wn-version-action"
+          onClick={onCompare}
+          disabled={isLoading}
+          title="Compare with current"
+        >
+          {loading === "compare" ? (
+            <Loader2 size={14} className="wn-spin" />
+          ) : (
+            <GitCompare size={14} />
+          )}
+          Compare
+        </button>
+        <button
+          className="wn-version-action"
+          onClick={onDownload}
+          disabled={isLoading}
+          title="Download as markdown"
+        >
+          <Download size={14} />
+          Download
+        </button>
+        <button
+          className="wn-version-action wn-version-action--danger"
+          onClick={handleDeleteClick}
+          disabled={isLoading}
+          title="Delete this version"
+        >
+          {loading === "delete" ? (
+            <Loader2 size={14} className="wn-spin" />
+          ) : (
+            <Trash2 size={14} />
+          )}
+          Delete
+        </button>
+      </div>
+
+      {/* Restore Confirmation Modal */}
+      {showRestoreConfirm && (
+        <ConfirmModal
+          title="Restore Version"
+          message="This will replace your current content with this version. A safety snapshot will be created before restoring. Are you sure you want to continue?"
+          confirmLabel="Restore"
+          confirmVariant="primary"
+          onConfirm={handleRestoreConfirm}
+          onCancel={() => setShowRestoreConfirm(false)}
+          loading={loading === "restore"}
+        />
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteConfirm && (
+        <ConfirmModal
+          title="Delete Version"
+          message={`Are you sure you want to delete this version${version.label ? ` "${version.label}"` : ""}? This action cannot be undone.`}
+          confirmLabel="Delete"
+          confirmVariant="danger"
+          onConfirm={handleDeleteConfirm}
+          onCancel={() => setShowDeleteConfirm(false)}
+          loading={loading === "delete"}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,369 @@
+/**
+ * @fileoverview Version History Panel styles
+ *
+ * Styling for the version history slide-in panel.
+ */
+
+/* ============================================================================
+   PANEL CONTAINER
+   ============================================================================ */
+
+.wn-version-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--wn-panel-md);
+  max-width: 100vw;
+  display: flex;
+  flex-direction: column;
+  z-index: var(--wn-z-panel);
+  border-left: 1px solid var(--wn-zinc-700);
+  background-color: var(--wn-zinc-900);
+  box-shadow: var(--wn-shadow-panel);
+  animation: slideIn var(--wn-transition-normal) ease-out;
+  overflow: hidden;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* ============================================================================
+   PANEL HEADER
+   ============================================================================ */
+
+.wn-version-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--wn-space-4) var(--wn-space-5);
+  border-bottom: 1px solid var(--wn-zinc-700);
+  flex-shrink: 0;
+}
+
+.wn-version-panel-title {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  font-size: var(--wn-font-base);
+  font-weight: 600;
+  color: var(--wn-zinc-50);
+  margin: 0;
+}
+
+.wn-version-panel-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-1);
+}
+
+.wn-version-panel-btn {
+  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-400);
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    color var(--wn-transition-fast);
+}
+
+.wn-version-panel-btn:hover {
+  background-color: var(--wn-overlay-10);
+  color: var(--wn-zinc-50);
+}
+
+.wn-version-panel-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.wn-version-panel-btn--danger {
+  color: var(--wn-error-400);
+}
+
+.wn-version-panel-btn--danger:hover:not(:disabled) {
+  background-color: var(--wn-error-alpha-10);
+  color: var(--wn-error-300);
+}
+
+/* ============================================================================
+   PANEL CONTENT
+   ============================================================================ */
+
+.wn-version-panel-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--wn-space-3);
+}
+
+/* ============================================================================
+   LOADING STATE
+   ============================================================================ */
+
+.wn-version-panel-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-4);
+  padding: var(--wn-space-8);
+  color: var(--wn-zinc-500);
+  font-size: var(--wn-font-base);
+}
+
+/* ============================================================================
+   ERROR STATE
+   ============================================================================ */
+
+.wn-version-panel-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--wn-space-4);
+  padding: var(--wn-space-8);
+  text-align: center;
+  color: var(--wn-error-400);
+  font-size: var(--wn-font-base);
+}
+
+.wn-version-panel-error button {
+  padding: var(--wn-space-2) var(--wn-space-4);
+  border: 1px solid var(--wn-zinc-700);
+  border-radius: var(--wn-radius-sm);
+  background-color: transparent;
+  color: var(--wn-zinc-400);
+  font-size: var(--wn-font-xs);
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    color var(--wn-transition-fast);
+}
+
+.wn-version-panel-error button:hover {
+  background-color: var(--wn-overlay-10);
+  color: var(--wn-zinc-50);
+}
+
+/* ============================================================================
+   EMPTY STATE
+   ============================================================================ */
+
+.wn-version-panel-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-3);
+  padding: var(--wn-space-9) var(--wn-space-5);
+  text-align: center;
+  color: var(--wn-zinc-600);
+}
+
+.wn-version-panel-empty p {
+  margin: 0;
+  font-size: var(--wn-font-base);
+  font-weight: 500;
+  color: var(--wn-zinc-500);
+}
+
+.wn-version-panel-empty span {
+  font-size: var(--wn-font-xs);
+}
+
+/* ============================================================================
+   VERSION LIST
+   ============================================================================ */
+
+.wn-version-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-2);
+}
+
+/* ============================================================================
+   VERSION ITEM
+   ============================================================================ */
+
+.wn-version-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-2);
+  width: 100%;
+  padding: var(--wn-space-3) var(--wn-space-4);
+  border: 1px solid transparent;
+  border-radius: var(--wn-radius-md);
+  background-color: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color var(--wn-transition-fast),
+    border-color var(--wn-transition-fast);
+}
+
+.wn-version-item:hover {
+  background-color: var(--wn-overlay-5);
+}
+
+.wn-version-item--selected {
+  border-color: var(--wn-brand-500);
+  background-color: var(--wn-brand-alpha-10);
+}
+
+.wn-version-item-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.wn-version-item-time {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-2);
+  font-size: var(--wn-font-xs);
+  font-weight: 500;
+  color: var(--wn-zinc-50);
+}
+
+.wn-version-item-size {
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-600);
+}
+
+.wn-version-item-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wn-space-1);
+  padding: var(--wn-space-1) var(--wn-space-2);
+  border-radius: var(--wn-radius-sm);
+  background-color: var(--wn-info-alpha-20);
+  font-size: var(--wn-font-xs);
+  font-weight: 500;
+  color: var(--wn-info-400);
+  width: fit-content;
+}
+
+.wn-version-item-preview {
+  margin: 0;
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-500);
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* ============================================================================
+   SPIN ANIMATION
+   ============================================================================ */
+
+.wn-spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================================================================
+   LIGHT MODE OVERRIDES
+   ============================================================================ */
+
+.wn-light .wn-version-panel {
+  border-left-color: var(--wn-zinc-200);
+  background-color: #fff;
+  box-shadow: var(--wn-shadow-panel);
+}
+
+.wn-light .wn-version-panel-header {
+  border-bottom-color: var(--wn-zinc-200);
+}
+
+.wn-light .wn-version-panel-title {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-version-panel-btn {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-version-panel-btn:hover {
+  background-color: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-version-panel-btn--danger {
+  color: var(--wn-error-500);
+}
+
+.wn-light .wn-version-panel-btn--danger:hover:not(:disabled) {
+  background-color: var(--wn-error-alpha-10);
+  color: var(--wn-error-600);
+}
+
+.wn-light .wn-version-panel-loading {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-version-panel-error button {
+  border-color: var(--wn-zinc-200);
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-version-panel-error button:hover {
+  background-color: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-version-panel-empty {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-version-panel-empty p {
+  color: var(--wn-zinc-500);
+}
+
+.wn-light .wn-version-item:hover {
+  background-color: var(--wn-overlay-light-3);
+}
+
+.wn-light .wn-version-item--selected {
+  border-color: var(--wn-brand-500);
+  background-color: var(--wn-brand-alpha-10);
+}
+
+.wn-light .wn-version-item-time {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-version-item-size {
+  color: var(--wn-zinc-400);
+}
+
+.wn-light .wn-version-item-label {
+  background-color: var(--wn-info-alpha-15);
+}
+
+.wn-light .wn-version-item-preview {
+  color: var(--wn-zinc-500);
+}