From 12cbeccb05ce56562bc9b1207058e3532b7f01f9 Mon Sep 17 00:00:00 2001
From: Musa Khalid <Mkothman.jr@gmail.com>
Date: Wed, 29 Jul 2026 22:29:39 +0100
Subject: [PATCH 1/2] feat: Enhance version control by reversing history and
 adding unique history IDs

---
 src/components/cms/VersionControl.tsx | 18 +++++++++---------
 src/store/cmsStore.ts                 | 13 ++++++++++---
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/cms/VersionControl.tsx b/src/components/cms/VersionControl.tsx
index 45bca71b..632d008c 100644
--- a/src/components/cms/VersionControl.tsx
+++ b/src/components/cms/VersionControl.tsx
@@ -1,11 +1,12 @@
 'use client';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useCMS } from '@/hooks/useCMS';
 import { History, RotateCcw, Clock, CheckCircle2 } from 'lucide-react';
 
 export const VersionControl: React.FC = () => {
   const { history, historyIndex, undo, redo, course } = useCMS();
+  const reversedHistory = useMemo(() => history.slice().reverse(), [history]);
 
   return (
     <div className="flex flex-col h-full bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
@@ -21,13 +22,13 @@ export const VersionControl: React.FC = () => {
             <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700" />
 
             <div className="space-y-8 relative">
-              {history
-                .map((snapshot, index) => {
-                  const isCurrent = index === historyIndex;
-                  const isPast = index < historyIndex;
+              {reversedHistory.map((snapshot, reversedIndex) => {
+                  const originalIndex = history.length - 1 - reversedIndex;
+                  const isCurrent = originalIndex === historyIndex;
+                  const isPast = originalIndex < historyIndex;
 
                   return (
-                    <div key={index} className="flex gap-4 items-start pl-2">
+                    <div key={snapshot.historyId} className="flex gap-4 items-start pl-2">
                       <div
                         className={`z-10 w-4 h-4 rounded-full mt-1.5 border-2 ${
                           isCurrent
@@ -47,7 +48,7 @@ export const VersionControl: React.FC = () => {
                       >
                         <div className="flex justify-between items-start mb-1">
                           <div className="text-sm font-semibold text-gray-800 dark:text-white">
-                            {isCurrent ? 'Current Version' : `Version ${index + 1}`}
+                            {isCurrent ? 'Current Version' : `Version ${originalIndex + 1}`}
                           </div>
                           <div className="text-[10px] text-gray-500 flex items-center gap-1">
                             <Clock className="w-3 h-3" />
@@ -81,8 +82,7 @@ export const VersionControl: React.FC = () => {
                       </div>
                     </div>
                   );
-                })
-                .reverse()}{' '}
+                })}{' '}
               {/* Show newest first */}
             </div>
           </div>
diff --git a/src/store/cmsStore.ts b/src/store/cmsStore.ts
index 61662c9e..137e6747 100644
--- a/src/store/cmsStore.ts
+++ b/src/store/cmsStore.ts
@@ -2,9 +2,11 @@ import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { CMSCourse, MediaUploadTask, ContentTemplate } from '../types/cms';
 
+type CMSHistoryEntry = CMSCourse & { historyId: string };
+
 interface CMSState {
   course: CMSCourse;
-  history: CMSCourse[];
+  history: CMSHistoryEntry[];
   historyIndex: number;
   mediaQueue: MediaUploadTask[];
   templates: ContentTemplate[];
@@ -30,6 +32,11 @@ interface CMSState {
   setTemplates: (templates: ContentTemplate[]) => void;
 }
 
+const createHistoryEntry = (course: CMSCourse): CMSHistoryEntry => ({
+  ...course,
+  historyId: `history-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`,
+});
+
 export const useCMSStore = create<CMSState>()(
   persist(
     (set) => ({
@@ -48,7 +55,7 @@ export const useCMSStore = create<CMSState>()(
       setCourse: (course) => {
         set((state) => {
           let newHistory = state.history.slice(0, state.historyIndex + 1);
-          newHistory.push(course);
+          newHistory.push(createHistoryEntry(course));
 
           if (newHistory.length > 20) {
             newHistory = newHistory.slice(newHistory.length - 20);
@@ -67,7 +74,7 @@ export const useCMSStore = create<CMSState>()(
           const updatedCourse = { ...state.course, ...updates };
           let newHistory = state.history.slice(0, state.historyIndex + 1);
 
-          newHistory.push(updatedCourse);
+          newHistory.push(createHistoryEntry(updatedCourse));
 
           if (newHistory.length > 20) {
             newHistory = newHistory.slice(newHistory.length - 20);

From bafe8e52971282b15f3fef611f3288c6b3d9602b Mon Sep 17 00:00:00 2001
From: Musa Khalid <Mkothman.jr@gmail.com>
Date: Wed, 29 Jul 2026 22:29:49 +0100
Subject: [PATCH 2/2] feat: Improve version control UI by enhancing history
 display and interaction

---
 src/components/cms/VersionControl.tsx | 104 +++++++++++++-------------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/src/components/cms/VersionControl.tsx b/src/components/cms/VersionControl.tsx
index 632d008c..05f29e2c 100644
--- a/src/components/cms/VersionControl.tsx
+++ b/src/components/cms/VersionControl.tsx
@@ -23,66 +23,66 @@ export const VersionControl: React.FC = () => {
 
             <div className="space-y-8 relative">
               {reversedHistory.map((snapshot, reversedIndex) => {
-                  const originalIndex = history.length - 1 - reversedIndex;
-                  const isCurrent = originalIndex === historyIndex;
-                  const isPast = originalIndex < historyIndex;
+                const originalIndex = history.length - 1 - reversedIndex;
+                const isCurrent = originalIndex === historyIndex;
+                const isPast = originalIndex < historyIndex;
 
-                  return (
-                    <div key={snapshot.historyId} className="flex gap-4 items-start pl-2">
-                      <div
-                        className={`z-10 w-4 h-4 rounded-full mt-1.5 border-2 ${
-                          isCurrent
-                            ? 'bg-blue-500 border-blue-200 dark:border-blue-800 animate-pulse'
-                            : isPast
+                return (
+                  <div key={snapshot.historyId} className="flex gap-4 items-start pl-2">
+                    <div
+                      className={`z-10 w-4 h-4 rounded-full mt-1.5 border-2 ${
+                        isCurrent
+                          ? 'bg-blue-500 border-blue-200 dark:border-blue-800 animate-pulse'
+                          : isPast
                             ? 'bg-green-500 border-green-200 dark:border-green-800'
                             : 'bg-gray-300 border-white dark:border-gray-800'
-                        }`}
-                      />
+                      }`}
+                    />
 
-                      <div
-                        className={`flex-1 p-3 rounded-lg border transition-all ${
-                          isCurrent
-                            ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
-                            : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 hover:border-gray-300'
-                        }`}
-                      >
-                        <div className="flex justify-between items-start mb-1">
-                          <div className="text-sm font-semibold text-gray-800 dark:text-white">
-                            {isCurrent ? 'Current Version' : `Version ${originalIndex + 1}`}
-                          </div>
-                          <div className="text-[10px] text-gray-500 flex items-center gap-1">
-                            <Clock className="w-3 h-3" />
-                            Just now
-                          </div>
+                    <div
+                      className={`flex-1 p-3 rounded-lg border transition-all ${
+                        isCurrent
+                          ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
+                          : 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 hover:border-gray-300'
+                      }`}
+                    >
+                      <div className="flex justify-between items-start mb-1">
+                        <div className="text-sm font-semibold text-gray-800 dark:text-white">
+                          {isCurrent ? 'Current Version' : `Version ${originalIndex + 1}`}
                         </div>
-                        <p className="text-xs text-gray-500 dark:text-gray-400">
-                          {snapshot.modules.length} modules,{' '}
-                          {snapshot.modules.reduce((acc, m) => acc + m.lessons.length, 0)} lessons
-                        </p>
+                        <div className="text-[10px] text-gray-500 flex items-center gap-1">
+                          <Clock className="w-3 h-3" />
+                          Just now
+                        </div>
+                      </div>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">
+                        {snapshot.modules.length} modules,{' '}
+                        {snapshot.modules.reduce((acc, m) => acc + m.lessons.length, 0)} lessons
+                      </p>
 
-                        {!isCurrent && (
-                          <button
-                            onClick={() => {
-                              // Logic to jump to this specific history index
-                              // In a full implementation, the store would handle this
-                            }}
-                            className="mt-2 text-[10px] font-medium text-blue-600 hover:text-blue-700 flex items-center gap-1"
-                          >
-                            <RotateCcw className="w-3 h-3" />
-                            Preview & Rollback
-                          </button>
-                        )}
+                      {!isCurrent && (
+                        <button
+                          onClick={() => {
+                            // Logic to jump to this specific history index
+                            // In a full implementation, the store would handle this
+                          }}
+                          className="mt-2 text-[10px] font-medium text-blue-600 hover:text-blue-700 flex items-center gap-1"
+                        >
+                          <RotateCcw className="w-3 h-3" />
+                          Preview & Rollback
+                        </button>
+                      )}
 
-                        {isCurrent && (
-                          <div className="mt-2 text-[10px] font-medium text-green-600 flex items-center gap-1">
-                            <CheckCircle2 className="w-3 h-3" />
-                            Active
-                          </div>
-                        )}
-                      </div>
+                      {isCurrent && (
+                        <div className="mt-2 text-[10px] font-medium text-green-600 flex items-center gap-1">
+                          <CheckCircle2 className="w-3 h-3" />
+                          Active
+                        </div>
+                      )}
                     </div>
-                  );
-                })}{' '}
+                  </div>
+                );
+              })}{' '}
               {/* Show newest first */}
             </div>
           </div>