feat: add import/export functionality for events with modal support

Author: Miodec

src/App.tsx

@@ -14,6 +14,7 @@ function App() {
     filters,
     attachEventListeners,
     clearEvents,
+    importEvents,
     updateFilters,
   } = useKeyboardEvents();
 
@@ -69,6 +70,7 @@ function App() {
           events={allEvents}
           showDelays={showDelays}
           onShowDelaysChange={setShowDelays}
+          onImportEvents={importEvents}
         />
 
         {/* Timeline */}

src/components/EventOptions.tsx

@@ -1,5 +1,7 @@
+import { useState } from "react";
 import type { EventFilters, EventData } from "../types/events";
 import { EVENT_COLORS } from "../utils/eventHelpers";
+import { ExportImportModal } from "./ExportImportModal";
 
 interface EventOptionsProps {
   filters: EventFilters;
@@ -9,6 +11,7 @@ interface EventOptionsProps {
   events: EventData[];
   showDelays: boolean;
   onShowDelaysChange: (showDelays: boolean) => void;
+  onImportEvents: (events: EventData[]) => void;
 }
 
 export function EventOptions({
@@ -19,7 +22,11 @@ export function EventOptions({
   events,
   showDelays,
   onShowDelaysChange,
+  onImportEvents,
 }: EventOptionsProps) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalMode, setModalMode] = useState<"export" | "import">("export");
+
   // Calculate event counts by type
   const eventCounts = events.reduce((counts, event) => {
     counts[event.eventType] = (counts[event.eventType] || 0) + 1;
@@ -76,6 +83,16 @@ export function EventOptions({
     onFiltersChange(allDisabled);
   };
 
+  const handleExport = () => {
+    setModalMode("export");
+    setModalOpen(true);
+  };
+
+  const handleImport = () => {
+    setModalMode("import");
+    setModalOpen(true);
+  };
+
   return (
     <div className="bg-sub-alt rounded-lg p-4 border border-sub/20 space-y-4">
       {/* Header with controls */}
@@ -127,6 +144,19 @@ export function EventOptions({
             </div>
             Show Delays
           </label>
+          <button
+            onClick={handleExport}
+            className="text-xs px-2 py-1 bg-sub/20 hover:bg-sub/30 text-text rounded transition-colors duration-200"
+            disabled={events.length === 0}
+          >
+            Export JSON
+          </button>
+          <button
+            onClick={handleImport}
+            className="text-xs px-2 py-1 bg-sub/20 hover:bg-sub/30 text-text rounded transition-colors duration-200"
+          >
+            Import JSON
+          </button>
         </div>
       </div>
 
@@ -210,6 +240,14 @@ export function EventOptions({
           })}
         </div>
       </div>
+
+      <ExportImportModal
+        isOpen={modalOpen}
+        onClose={() => setModalOpen(false)}
+        events={events}
+        onImportEvents={onImportEvents}
+        mode={modalMode}
+      />
     </div>
   );
 }

src/components/ExportImportModal.tsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import type { EventData } from "../types/events";
+
+interface ExportImportModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  events: EventData[];
+  onImportEvents: (events: EventData[]) => void;
+  mode: "export" | "import";
+}
+
+export function ExportImportModal({
+  isOpen,
+  onClose,
+  events,
+  onImportEvents,
+  mode,
+}: ExportImportModalProps) {
+  const [importText, setImportText] = useState("");
+  const [copySuccess, setCopySuccess] = useState(false);
+
+  const exportJson = JSON.stringify(events, null, 2);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(exportJson);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  const handleImport = () => {
+    try {
+      const importedEvents = JSON.parse(importText);
+      if (Array.isArray(importedEvents)) {
+        onImportEvents(importedEvents);
+        onClose();
+        setImportText("");
+      } else {
+        alert("Invalid format: Expected an array of events");
+      }
+    } catch {
+      alert("Error parsing JSON data");
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-bg border border-sub rounded-lg p-6 max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-bold text-main">
+            {mode === "export" ? "Export Events" : "Import Events"}
+          </h2>
+          <button
+            onClick={onClose}
+            className="text-sub hover:text-text transition-colors"
+          >
+            ✕
+          </button>
+        </div>
+
+        {mode === "export" ? (
+          <div className="flex flex-col flex-1">
+            <div className="flex justify-between items-center mb-2">
+              <p className="text-text">
+                Copy the JSON data below ({events.length} events):
+              </p>
+              <button
+                onClick={handleCopy}
+                className="px-3 py-1 bg-main text-bg rounded hover:bg-main/80 transition-colors"
+              >
+                {copySuccess ? "Copied!" : "Copy"}
+              </button>
+            </div>
+            <textarea
+              value={exportJson}
+              readOnly
+              className="flex-1 bg-bg border border-sub rounded p-3 text-text font-mono text-sm resize-none"
+              style={{ minHeight: "300px" }}
+            />
+          </div>
+        ) : (
+          <div className="flex flex-col flex-1">
+            <p className="text-text mb-2">Paste the JSON data below:</p>
+            <textarea
+              value={importText}
+              onChange={(e) => setImportText(e.target.value)}
+              placeholder="Paste exported JSON data here..."
+              className="flex-1 bg-bg border border-sub rounded p-3 text-text font-mono text-sm resize-none"
+              style={{ minHeight: "300px" }}
+            />
+            <div className="flex justify-end gap-2 mt-4">
+              <button
+                onClick={onClose}
+                className="px-4 py-2 bg-sub/20 hover:bg-sub/30 text-text rounded transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleImport}
+                disabled={!importText.trim()}
+                className="px-4 py-2 bg-main text-bg rounded hover:bg-main/80 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                Import
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/hooks/useKeyboardEvents.ts

@@ -194,6 +194,17 @@ export function useKeyboardEvents() {
     keydownTimestamps.current = {}; // Clear stored keydown timestamps
   }, []);
 
+  const importEvents = useCallback((importedEvents: EventData[]) => {
+    setEvents(importedEvents);
+    // Reset event ID to the highest ID in imported events + 1
+    const maxId = importedEvents.reduce((max, event) => Math.max(max, event.eventId), 0);
+    eventIdRef.current = maxId + 1;
+    // Reset timestamps - they'll be relative to the imported events
+    const firstEvent = importedEvents[0];
+    startTimeRef.current = firstEvent ? firstEvent.timestamp - firstEvent.relativeTime : 0;
+    keydownTimestamps.current = {};
+  }, []);
+
   const updateFilters = useCallback((newFilters: Partial<EventFilters>) => {
     setFilters((prev) => ({ ...prev, ...newFilters }));
   }, []);
@@ -208,6 +219,7 @@ export function useKeyboardEvents() {
     filters,
     attachEventListeners,
     clearEvents,
+    importEvents,
     updateFilters,
   };
 }