From 2faba0388f93d8e4fb86219eba7883b331d501ff Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Wed, 24 Dec 2025 05:45:22 +0000
Subject: Add versioning to files

---
 .../components/files/VersionHistoryDropdown.tsx    | 263 +++++++++++++++++++++
 1 file changed, 263 insertions(+)
 create mode 100644 makima/frontend/src/components/files/VersionHistoryDropdown.tsx

(limited to 'makima/frontend/src/components/files/VersionHistoryDropdown.tsx')

diff --git a/makima/frontend/src/components/files/VersionHistoryDropdown.tsx b/makima/frontend/src/components/files/VersionHistoryDropdown.tsx
new file mode 100644
index 0000000..50e6f0a
--- /dev/null
+++ b/makima/frontend/src/components/files/VersionHistoryDropdown.tsx
@@ -0,0 +1,263 @@
+import { useState, useEffect, useRef } from "react";
+import type { FileVersionSummary, FileVersion, VersionSource } from "../../lib/api";
+
+interface VersionHistoryDropdownProps {
+  currentVersion: number;
+  versions: FileVersionSummary[];
+  loading: boolean;
+  selectedVersion: FileVersion | null;
+  loadingVersion: boolean;
+  onSelectVersion: (version: number) => void;
+  onRestoreVersion: (version: number) => void;
+  onClearSelection: () => void;
+  restoring: boolean;
+}
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function getSourceLabel(source: VersionSource): string {
+  switch (source) {
+    case "user":
+      return "User";
+    case "llm":
+      return "AI";
+    case "system":
+      return "System";
+  }
+}
+
+function getSourceColor(source: VersionSource): string {
+  switch (source) {
+    case "user":
+      return "text-blue-400";
+    case "llm":
+      return "text-purple-400";
+    case "system":
+      return "text-gray-400";
+  }
+}
+
+export function VersionHistoryDropdown({
+  currentVersion,
+  versions,
+  loading,
+  selectedVersion,
+  loadingVersion,
+  onSelectVersion,
+  onRestoreVersion,
+  onClearSelection,
+  restoring,
+}: VersionHistoryDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [versionToRestore, setVersionToRestore] = useState<number | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleVersionClick = (version: number) => {
+    if (version === currentVersion) return;
+    onSelectVersion(version);
+    setIsOpen(false);
+  };
+
+  const handleRestoreClick = (version: number) => {
+    setVersionToRestore(version);
+    setShowConfirm(true);
+  };
+
+  const handleConfirmRestore = () => {
+    if (versionToRestore !== null) {
+      onRestoreVersion(versionToRestore);
+    }
+    setShowConfirm(false);
+    setVersionToRestore(null);
+  };
+
+  const handleCancelRestore = () => {
+    setShowConfirm(false);
+    setVersionToRestore(null);
+    onClearSelection();
+  };
+
+  // If showing the selected version preview
+  if (selectedVersion) {
+    return (
+      <div className="border border-[#3f6fb3]/50 bg-[#0d1b2d] p-4">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <span className="font-mono text-xs text-[#75aafc] uppercase">Viewing Version</span>
+            <span className="font-mono text-sm text-[#dbe7ff] font-bold">
+              v{selectedVersion.version}
+            </span>
+            <span className={`font-mono text-xs ${getSourceColor(selectedVersion.source)}`}>
+              ({getSourceLabel(selectedVersion.source)})
+            </span>
+          </div>
+          <button
+            onClick={onClearSelection}
+            className="font-mono text-xs text-[#555] hover:text-white/70"
+          >
+            Close
+          </button>
+        </div>
+
+        <div className="text-[10px] font-mono text-[#555] mb-3">
+          {formatDate(selectedVersion.createdAt)}
+          {selectedVersion.changeDescription && (
+            <span className="ml-2 text-[#9bc3ff]">- {selectedVersion.changeDescription}</span>
+          )}
+        </div>
+
+        {/* Preview of version content */}
+        <div className="max-h-48 overflow-y-auto mb-4 border border-[#333] bg-black/20 p-3">
+          {selectedVersion.body.length === 0 ? (
+            <div className="text-[#555] text-xs italic">No content</div>
+          ) : (
+            <div className="space-y-2">
+              {selectedVersion.body.map((element, index) => (
+                <div key={index} className="font-mono text-xs text-white/70">
+                  {element.type === "heading" && (
+                    <div className="text-[#9bc3ff] font-bold">
+                      {"#".repeat(element.level)} {element.text}
+                    </div>
+                  )}
+                  {element.type === "paragraph" && (
+                    <div className="text-white/60">{element.text}</div>
+                  )}
+                  {element.type === "chart" && (
+                    <div className="text-purple-400">[Chart: {element.title || element.chartType}]</div>
+                  )}
+                  {element.type === "image" && (
+                    <div className="text-green-400">[Image: {element.alt || element.src}]</div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Restore button */}
+        {!showConfirm ? (
+          <button
+            onClick={() => handleRestoreClick(selectedVersion.version)}
+            disabled={restoring}
+            className="w-full px-3 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] transition-colors disabled:opacity-50"
+          >
+            {restoring ? "Restoring..." : "Restore This Version"}
+          </button>
+        ) : (
+          <div className="border border-yellow-500/30 bg-yellow-500/10 p-3">
+            <div className="font-mono text-xs text-yellow-400 mb-2">
+              Are you sure you want to restore to version {versionToRestore}?
+            </div>
+            <div className="font-mono text-[10px] text-white/50 mb-3">
+              This will create a new version with the content from v{versionToRestore}.
+              Your current changes will be preserved as a separate version.
+            </div>
+            <div className="flex gap-2">
+              <button
+                onClick={handleConfirmRestore}
+                disabled={restoring}
+                className="flex-1 px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-yellow-600/50 border border-yellow-500/50 hover:bg-yellow-600/70 transition-colors disabled:opacity-50"
+              >
+                {restoring ? "Restoring..." : "Confirm Restore"}
+              </button>
+              <button
+                onClick={handleCancelRestore}
+                disabled={restoring}
+                className="px-3 py-1.5 font-mono text-xs text-[#555] border border-[#333] hover:text-white/70"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div ref={dropdownRef} className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-3 py-1.5 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
+      >
+        <span>v{currentVersion}</span>
+        <svg
+          width="10"
+          height="6"
+          viewBox="0 0 10 6"
+          fill="none"
+          className={`transition-transform ${isOpen ? "rotate-180" : ""}`}
+        >
+          <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full left-0 mt-1 w-64 max-h-72 overflow-y-auto bg-[#0d1b2d] border border-[#3f6fb3]/50 shadow-lg z-50">
+          <div className="p-2 border-b border-[#333] font-mono text-[10px] text-[#555] uppercase">
+            Version History
+          </div>
+
+          {loading ? (
+            <div className="p-4 text-center font-mono text-xs text-[#555]">Loading...</div>
+          ) : versions.length === 0 ? (
+            <div className="p-4 text-center font-mono text-xs text-[#555]">No versions found</div>
+          ) : (
+            <div>
+              {versions.map((version) => (
+                <button
+                  key={version.version}
+                  onClick={() => handleVersionClick(version.version)}
+                  disabled={version.version === currentVersion || loadingVersion}
+                  className={`w-full text-left px-3 py-2 font-mono text-xs transition-colors ${
+                    version.version === currentVersion
+                      ? "bg-[#0f3c78]/50 text-[#dbe7ff]"
+                      : "hover:bg-[#0f3c78]/30 text-white/70"
+                  } ${loadingVersion ? "opacity-50" : ""}`}
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="font-bold">v{version.version}</span>
+                    <span className={getSourceColor(version.source)}>
+                      {getSourceLabel(version.source)}
+                    </span>
+                  </div>
+                  <div className="text-[10px] text-[#555] mt-0.5">
+                    {formatDate(version.createdAt)}
+                  </div>
+                  {version.changeDescription && (
+                    <div className="text-[10px] text-[#75aafc] mt-0.5 truncate">
+                      {version.changeDescription}
+                    </div>
+                  )}
+                  {version.version === currentVersion && (
+                    <div className="text-[10px] text-green-400 mt-0.5">(current)</div>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
-- 
cgit v1.2.3