From f0ac39a438c92a24a702bcb54d143654954b3aa0 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Sat, 18 Jan 2025 16:08:39 -0800
Subject: [PATCH] Fixed indexing on version history and now state history fully
 works

---
 .../components/history-dropdown-item.tsx      |  8 ++++++-
 app/w/components/control-bar/control-bar.tsx  | 23 +++++++++++++------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/w/components/control-bar/components/history-dropdown-item.tsx b/app/w/components/control-bar/components/history-dropdown-item.tsx
index fcf325d5c4..6e30f19283 100644
--- a/app/w/components/control-bar/components/history-dropdown-item.tsx
+++ b/app/w/components/control-bar/components/history-dropdown-item.tsx
@@ -7,12 +7,14 @@ interface HistoryDropdownItemProps {
   action: string
   timestamp: number
   onClick?: () => void
+  isCurrent?: boolean
 }
 
 export function HistoryDropdownItem({
   action,
   timestamp,
   onClick,
+  isCurrent = false,
 }: HistoryDropdownItemProps) {
   const timeAgo = formatDistanceToNow(timestamp, { addSuffix: true })
 
@@ -24,7 +26,11 @@ export function HistoryDropdownItem({
       <Clock className="h-4 w-4 text-muted-foreground" />
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
-          <span className="text-xs text-muted-foreground">{timeAgo}</span>
+          {isCurrent ? (
+            <span className="text-xs text-muted-foreground">Current</span>
+          ) : (
+            <span className="text-xs text-muted-foreground">{timeAgo}</span>
+          )}
         </div>
         <p className="text-sm text-foreground">{action}</p>
       </div>
diff --git a/app/w/components/control-bar/control-bar.tsx b/app/w/components/control-bar/control-bar.tsx
index c4805bab86..6c0e767040 100644
--- a/app/w/components/control-bar/control-bar.tsx
+++ b/app/w/components/control-bar/control-bar.tsx
@@ -39,21 +39,30 @@ export function ControlBar() {
           </DropdownMenuTrigger>
 
           {history.past.length === 0 ? (
-            <DropdownMenuContent align="end" className="w-50">
+            <DropdownMenuContent align="end" className="w-40">
               <DropdownMenuItem className="text-sm text-muted-foreground">
                 No history available
               </DropdownMenuItem>
             </DropdownMenuContent>
           ) : (
             <DropdownMenuContent align="end" className="w-60">
-              {[...history.past].reverse().map((entry) => (
+              <>
                 <HistoryDropdownItem
-                  key={entry.timestamp}
-                  action={entry.action}
-                  timestamp={entry.timestamp}
-                  onClick={undo}
+                  key={history.present.timestamp}
+                  action={history.present.action}
+                  timestamp={history.present.timestamp}
+                  isCurrent={true}
+                  onClick={() => {}}
                 />
-              ))}
+                {[...history.past].reverse().map((entry) => (
+                  <HistoryDropdownItem
+                    key={entry.timestamp}
+                    action={entry.action}
+                    timestamp={entry.timestamp}
+                    onClick={undo}
+                  />
+                ))}
+              </>
             </DropdownMenuContent>
           )}
         </DropdownMenu>