isolate history component by using projectStore directly

frontend/src/App.tsx

@@ -593,18 +593,6 @@ function App() {
           )}
           {
             <HistoryDisplay
-              history={appHistory}
-              currentVersion={currentVersion}
-              revertToVersion={(index) => {
-                if (
-                  index < 0 ||
-                  index >= appHistory.length ||
-                  !appHistory[index]
-                )
-                  return;
-                setCurrentVersion(index);
-                setGeneratedCode(appHistory[index].code);
-              }}
               shouldDisableReverts={appState === AppState.CODING}
             />
           }

frontend/src/components/history/HistoryDisplay.tsx

@@ -1,4 +1,3 @@
-import { History } from "./history_types";
 import toast from "react-hot-toast";
 import classNames from "classnames";
 
@@ -11,22 +10,27 @@ import {
 } from "../ui/collapsible";
 import { Button } from "../ui/button";
 import { CaretSortIcon } from "@radix-ui/react-icons";
+import { useProjectStore } from "../../store/project-store";
 
 interface Props {
-  history: History;
-  currentVersion: number | null;
-  revertToVersion: (version: number) => void;
   shouldDisableReverts: boolean;
 }
 
-export default function HistoryDisplay({
+export default function HistoryDisplay({ shouldDisableReverts }: Props) {
-  history,
+  const {
+    appHistory: history,
     currentVersion,
-  revertToVersion,
+    setCurrentVersion,
-  shouldDisableReverts,
+    setGeneratedCode,
-}: Props) {
+  } = useProjectStore();
   const renderedHistory = renderHistory(history, currentVersion);
 
+  const revertToVersion = (index: number) => {
+    if (index < 0 || index >= history.length || !history[index]) return;
+    setCurrentVersion(index);
+    setGeneratedCode(history[index].code);
+  };
+
   return renderedHistory.length === 0 ? null : (
     <div className="flex flex-col h-screen">
       <h1 className="font-bold mb-2">Versions</h1>