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/index.tsx

@@ -1,9 +1,7 @@
-import {
+import React, {
   useCallback,
   useContext,
-  useMemo,
-  useState,
-} from 'react';
+  useMemo } from 'react';
 import {
   FileId,
   FileTree,
@@ -29,28 +27,17 @@ import { Listing } from './Listing';
 import { useDragAndDrop } from './useDragAndDrop';
 import './styles.scss';
 
-// TODO turn this UI back on when we are actually detecting
-// the connection status.
-// See https://github.com/vizhub-core/vzcode/issues/456
 const enableConnectionStatus = true;
 
 export const VZSidebar = ({
-  createFileTooltipText = 'New File',
-  createDirTooltipText = 'New Directory',
-  openSettingsTooltipText = 'Open Settings',
-  openKeyboardShortcuts = 'Keyboard Shortcuts',
-  reportBugTooltipText = 'Report Bug',
-  searchToolTipText = 'Search',
-  filesToolTipText = 'Files',
-}: {
-  createFileTooltipText?: string;
-  createDirTooltipText?: string;
-  openSettingsTooltipText?: string;
-  reportBugTooltipText?: string;
-  openKeyboardShortcuts?: string;
-  searchToolTipText?: string;
-  filesToolTipText?: string;
-}) => {
+                            createFileTooltipText = 'New File',
+                            createDirTooltipText = 'New Directory',
+                            openSettingsTooltipText = 'Open Settings',
+                            openKeyboardShortcuts = 'Keyboard Shortcuts',
+                            reportBugTooltipText = 'Report Bug',
+                            searchToolTipText = 'Search',
+                            filesToolTipText = 'Files',
+                          }) => {
   const {
     files,
     openTab,
@@ -64,15 +51,18 @@ export const VZSidebar = ({
     sidebarRef,
     enableAutoFollow,
     toggleAutoFollow,
+    savingStatus,
   } = useContext(VZCodeContext);
 
   const fileTree = useMemo(
     () => (files ? sortFileTree(getFileTree(files)) : null),
     [files],
   );
+
   const handleQuestionMarkClick = useCallback(() => {
     setIsDocOpen(true);
   }, []);
+
   const handleSettingsClick = useCallback(() => {
     setIsSettingsOpen(true);
   }, []);
@@ -81,23 +71,20 @@ export const VZSidebar = ({
     SplitPaneResizeContext,
   );
 
-  // On single-click, open the file in a transient tab.
   const handleFileClick = useCallback(
     (fileId: FileId) => {
       openTab({ fileId, isTransient: true });
     },
     [openTab],
   );
 
-  // On double-click, open the file in a persistent tab.
   const handleFileDoubleClick = useCallback(
     (fileId: FileId) => {
       openTab({ fileId, isTransient: false });
     },
     [openTab],
   );
 
-  // True if files exist.
   const filesExist =
     fileTree &&
     fileTree.children &&
@@ -225,7 +212,6 @@ export const VZSidebar = ({
             </i>
           </OverlayTrigger>
 
-          {/*Directory Rename*/}
           <OverlayTrigger
             placement="right"
             overlay={
@@ -242,7 +228,6 @@ export const VZSidebar = ({
             </i>
           </OverlayTrigger>
 
-          {/*Toggle Follow*/}
           <OverlayTrigger
             placement="right"
             overlay={
@@ -310,14 +295,19 @@ export const VZSidebar = ({
       </div>
 
       {enableConnectionStatus && (
-        <div className="connection-status">
-          {connected ? 'Connected' : 'Connection Lost'}
-          <div className="connection">
-            <div
-              className={`connection-status-indicator ${
-                connected ? 'connected' : 'disconnected'
-              }`}
-            />
+        <div className="status-bar">
+          <div className="connection-status">
+            {connected ? 'Connected' : 'Connection Lost'}
+            <div className="connection">
+              <div
+                className={`connection-status-indicator ${
+                  connected ? 'connected' : 'disconnected'
+                }`}
+              />
+            </div>
+          </div>
+          <div className="saving-status">
+            {savingStatus}
           </div>
         </div>
       )}

src/client/VZSidebar/saveChanges.tsx

@@ -0,0 +1,25 @@
+// DRAFT: DO NOT USE
+// Some file handling component
+// import { useContext } from 'react';
+// import { VZCodeContext } from '../VZCodeContext';
+//
+// const FileEditor = () => {
+//   const { saveChanges } = useContext(VZCodeContext);
+//
+//   const handleFileChange = (newContent) => {
+//     // Handle file content change logic...
+//     saveChanges(); // Trigger saving process
+//   };
+//
+//   return (
+//     <div className="file-editor">
+//       <textarea
+//         value={useContext}
+//         onChange={saveChanges}
+//         className="file-editor-textarea"
+//       />
+//     </div>
+//   );
+// };
+//
+// export default FileEditor;