move some state over to zustand store

frontend/src/App.tsx

@@ -42,17 +42,24 @@ import TipLink from "./components/core/TipLink";
 import SelectAndEditModeToggleButton from "./components/select-and-edit/SelectAndEditModeToggleButton";
 import { useAppStore } from "./store/app-store";
 import KeyboardShortcutBadge from "./components/core/KeyboardShortcutBadge";
+import { useProjectStore } from "./store/project-store";
 
 function App() {
   const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
-  const [generatedCode, setGeneratedCode] = useState<string>("");
 
-  const [inputMode, setInputMode] = useState<"image" | "video">("image");
+  const {
+    inputMode,
+    setInputMode,
+    isImportedFromCode,
+    setIsImportedFromCode,
+    referenceImages,
+    setReferenceImages,
+    generatedCode,
+    setGeneratedCode,
+  } = useProjectStore();
 
-  const [referenceImages, setReferenceImages] = useState<string[]>([]);
   const [executionConsole, setExecutionConsole] = useState<string[]>([]);
   const [updateInstruction, setUpdateInstruction] = useState("");
-  const [isImportedFromCode, setIsImportedFromCode] = useState<boolean>(false);
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 

frontend/src/store/project-store.ts

@@ -0,0 +1,45 @@
+import { create } from "zustand";
+import { History } from "../components/history/history_types";
+
+// Store for app-wide state
+interface ProjectStore {
+  // Inputs
+  inputMode: "image" | "video";
+  setInputMode: (mode: "image" | "video") => void;
+  isImportedFromCode: boolean;
+  setIsImportedFromCode: (imported: boolean) => void;
+  referenceImages: string[];
+  setReferenceImages: (images: string[]) => void;
+
+  // Outputs and other state
+  generatedCode: string;
+  setGeneratedCode: (
+    updater: string | ((currentCode: string) => string)
+  ) => void;
+  currentVersion: number | null;
+  setCurrentVersion: (version: number | null) => void;
+  appHistory: History[];
+  setAppHistory: (history: History[]) => void;
+}
+
+export const useProjectStore = create<ProjectStore>((set) => ({
+  // Inputs and their setters
+  inputMode: "image",
+  setInputMode: (mode) => set({ inputMode: mode }),
+  isImportedFromCode: false,
+  setIsImportedFromCode: (imported) => set({ isImportedFromCode: imported }),
+  referenceImages: [],
+  setReferenceImages: (images) => set({ referenceImages: images }),
+
+  // Outputs and other state
+  generatedCode: "",
+  setGeneratedCode: (updater) =>
+    set((state) => ({
+      generatedCode:
+        typeof updater === "function" ? updater(state.generatedCode) : updater,
+    })),
+  currentVersion: null,
+  setCurrentVersion: (version) => set({ currentVersion: version }),
+  appHistory: [],
+  setAppHistory: (history) => set({ appHistory: history }),
+}));