From c61ac72b476052765fddf04e3e9262d1f77b984f Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 21 Jan 2025 18:17:41 -0800
Subject: [PATCH] Added accurate last saved in control bar

---
 app/w/components/control-bar/control-bar.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/w/components/control-bar/control-bar.tsx b/app/w/components/control-bar/control-bar.tsx
index 6c0e767040..a38d1330e2 100644
--- a/app/w/components/control-bar/control-bar.tsx
+++ b/app/w/components/control-bar/control-bar.tsx
@@ -12,17 +12,29 @@ import { useNotificationStore } from '@/stores/notifications/notifications-store
 import { NotificationDropdownItem } from './components/notification-dropdown-item'
 import { useWorkflowStore } from '@/stores/workflow/workflow-store'
 import { HistoryDropdownItem } from './components/history-dropdown-item'
+import { formatDistanceToNow } from 'date-fns'
+import { useEffect, useState } from 'react'
 
 export function ControlBar() {
   const { notifications } = useNotificationStore()
   const { history, undo, redo } = useWorkflowStore()
+  const [, forceUpdate] = useState({})
+
+  // Update the time display every minute
+  useEffect(() => {
+    const interval = setInterval(() => forceUpdate({}), 60000)
+    return () => clearInterval(interval)
+  }, [])
 
   return (
     <div className="flex h-16 w-full items-center justify-between bg-background px-6 border-b">
       {/* Left Section - Workflow Info */}
       <div className="flex flex-col gap-[2px]">
         <h2 className="font-semibold text-sm">Workflow 1</h2>
-        <p className="text-xs text-muted-foreground">Saved 2 minutes ago</p>
+        <p className="text-xs text-muted-foreground">
+          Saved{' '}
+          {formatDistanceToNow(history.present.timestamp, { addSuffix: true })}
+        </p>
       </div>
 
       {/* Middle Section - Reserved for future use */}