Saved status

src/client/VZCodeContext.tsx

@@ -140,6 +140,8 @@ export type VZCodeContextValue = {
   sidebarRef: React.RefObject<HTMLDivElement>;
 
   codeEditorRef: React.RefObject<HTMLDivElement>;
+  savingStatus: string;
+  setSavingStatus: (status: string) => void;
 
   connected: boolean;
 
@@ -355,6 +357,9 @@ export const VZCodeProvider = ({
   const [hoveredItemId, setHoveredItemId] =
     useState<ItemId | null>(null);
 
+  // Implement the saving/saved status
+  const [savingStatus, setSavingStatus] = useState('All changes saved');
+
   // The value provided by this context.
   const value: VZCodeContextValue = {
     content,
@@ -426,6 +431,8 @@ export const VZCodeProvider = ({
     codeEditorRef,
 
     connected,
+    savingStatus,
+    setSavingStatus,
 
     hoveredItemId,
     setHoveredItemId,

src/client/VZSidebar/VZCodeContext.tsx

@@ -0,0 +1,60 @@
+import { createContext, useState, useEffect, useRef } from 'react';
+
+export let VZCodeContext: React.Context<unknown>;
+// @ts-ignore
+VZCodeContext = createContext();
+
+export const VZCodeProvider = ({ children }) => {
+  const [files, setFiles] = useState(null);
+  const [openTab, setOpenTab] = useState(null);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isDocOpen, setIsDocOpen] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [connected, setConnected] = useState(true);
+  const [enableAutoFollow, setEnableAutoFollow] = useState(false);
+  const [savingStatus, setSavingStatus] = useState('saved'); // New state for saving status
+  const sidebarRef = useRef(null);
+
+  // Mock function to simulate saving process
+  const saveChanges = () => {
+    setSavingStatus('Saving...');
+    setTimeout(() => {
+      setSavingStatus('Saved');
+    }, 2000);
+  };
+
+  // Mock effect to simulate connection status check
+  useEffect(() => {
+    const interval = setInterval(() => {
+      // Simulate connection check
+      setConnected(navigator.onLine);
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <VZCodeContext.Provider
+      value={{
+        files,
+        openTab,
+        setOpenTab,
+        isSettingsOpen,
+        setIsSettingsOpen,
+        isDocOpen,
+        setIsDocOpen,
+        isSearchOpen,
+        setIsSearchOpen,
+        connected,
+        sidebarRef,
+        enableAutoFollow,
+        setEnableAutoFollow,
+        toggleAutoFollow: () => setEnableAutoFollow(prev => !prev),
+        savingStatus, // Expose saving status in the context
+        saveChanges,  // Expose the save function in the context
+      }}
+    >
+      {children}
+    </VZCodeContext.Provider>
+  );
+};