vzcode 0.25.0 → 0.26.0

package/src/client/TabList/style.scss

@@ -1,20 +1,20 @@
 .vz-tab-list {
   display: flex;
-  background-color: rgb(37, 37, 38);
+  background-color: #33415b;
   // When the tab list becomes too large, a horizontal scroll bar appears.
   overflow-x: auto;
 
   .tab {
-    background: rgb(45, 45, 45);
+    // background: #47546b;
     color: #fff;
     font-family: var(--vzcode-font-family);
     align-items: center;
     display: flex;
     padding-top: 2px;
-    padding-left: 10px;
-    padding-right: 10px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
+    padding-left: 8px;
+    padding-right: 5px;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
     margin-top: 5px;
     margin-left: 2px;
     margin-right: 2px;
@@ -24,13 +24,25 @@
 
     .tab-close {
       margin-left: 5px;
+      margin-bottom: 2px;
     }
     .tab-close:hover {
-      border-radius: 30%;
-      background-color: rgb(37, 37, 38);
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    // No left margin for first child
+    &:first-child {
+      margin-left: 0;
+    }
+
+    // on hover
+    &:hover {
+      background-color: #47546b;
     }
   }
+
   .tab.active {
-    background-color: rgb(41, 44, 52);
+    background-color: #202e46;
   }
 }

package/src/client/{Settings.tsx → VZSettings.tsx}

@@ -11,7 +11,7 @@ import { ThemeLabel, themes } from './themes';
 
 export let username = 'Anonymous';
 
-export const Settings = ({
+export const VZSettings = ({
   show,
   onClose,
   setTheme,

package/src/client/{Sidebar → VZSidebar}/FileListing.tsx

@@ -8,6 +8,7 @@ export const FileListing = ({
   handleRenameFileClick,
   handleDeleteFileClick,
   handleFileClick,
+  isActive,
 }: {
   name: string;
   fileId: FileId;
@@ -20,6 +21,7 @@ export const FileListing = ({
     event: React.MouseEvent,
   ) => void;
   handleFileClick: (fileId: FileId) => void;
+  isActive: boolean;
 }) => {
   const handleClick = useCallback(() => {
     handleFileClick(fileId);
@@ -46,6 +48,7 @@ export const FileListing = ({
       handleDeleteClick={handleDeleteClick}
       handleRenameClick={handleRenameClick}
       isDir={false}
+      isActive={isActive}
     >
       {name}
     </Item>

package/src/client/{Sidebar → VZSidebar}/Item.tsx

@@ -8,6 +8,7 @@ export const Item = ({
   handleRenameClick,
   handleDeleteClick,
   isDir,
+  isActive = false,
 }) => {
   // Tracks whether the mouse is hovering over the file or directory
   const [isHovered, setIsHovered] = useState(false);
@@ -82,7 +83,9 @@ export const Item = ({
 
   return (
     <div
-      className="full-box file-or-directory"
+      className={`full-box file-or-directory ${
+        isActive ? 'active-file' : ''
+      }`}
       onClick={isRenaming ? null : handleClick}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
@@ -105,7 +108,7 @@ export const Item = ({
         <div className="utils">
           <i
             className="bx bxs-edit utilities"
-            style={{ color: '#abdafb' }}
+            style={{ color: '#9edcff' }}
             onClick={(event: React.MouseEvent) => {
               event.stopPropagation();
               setIsRenaming(!isRenaming);
@@ -113,8 +116,8 @@ export const Item = ({
             }}
           ></i>
           <i
-            className="bx bx-trash"
-            style={{ color: '#eb336c' }}
+            className="bx bx-trash utilities"
+            style={{ color: '#ff006b' }}
             onClick={handleModalOpen}
           ></i>
         </div>

package/src/client/{Sidebar → VZSidebar}/Listing.tsx

@@ -15,6 +15,7 @@ export const Listing = ({
   handleFileClick,
   isDirectoryOpen,
   toggleDirectory,
+  activeFileId,
 }: {
   entity: FileTree | FileTreeFile;
   handleRenameFileClick: (
@@ -28,6 +29,7 @@ export const Listing = ({
   handleFileClick: (fileId: FileId) => void;
   isDirectoryOpen: (path: string) => boolean;
   toggleDirectory: (path: string) => void;
+  activeFileId: FileId;
 }) => {
   const { name, file, fileId } = entity as FileTreeFile;
   const { path, children } = entity as FileTree;
@@ -38,6 +40,7 @@ export const Listing = ({
       handleRenameFileClick={handleRenameFileClick}
       handleDeleteFileClick={handleDeleteFileClick}
       handleFileClick={handleFileClick}
+      isActive={fileId === activeFileId}
     />
   ) : (
     <DirectoryListing

package/src/client/{Sidebar → VZSidebar}/index.tsx

@@ -12,7 +12,7 @@ import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { Listing } from './Listing';
 import './styles.scss';
 
-export const Sidebar = ({
+export const VZSidebar = ({
   createFile,
   files,
   handleRenameFileClick,
@@ -21,6 +21,7 @@ export const Sidebar = ({
   setIsSettingsOpen,
   isDirectoryOpen,
   toggleDirectory,
+  activeFileId,
 }: {
   files: Files;
   createFile?: () => void;
@@ -36,6 +37,7 @@ export const Sidebar = ({
   setIsSettingsOpen?: (isSettingsOpen: boolean) => void;
   isDirectoryOpen?: (path: string) => boolean;
   toggleDirectory?: (path: string) => void;
+  activeFileId?: FileId;
 }) => {
   const fileTree = useMemo(
     () => (files ? sortFileTree(getFileTree(files)) : null),
@@ -57,11 +59,7 @@ export const Sidebar = ({
     >
       <div className="files">
         <div className="full-box">
-          <div>
-            <a className="link-name" href="#">
-              Files
-            </a>
-          </div>
+          <div className="sidebar-section-hint">Files</div>
           <div>
             <i
               className="bx bxs-file-plus new-btn"
@@ -88,6 +86,7 @@ export const Sidebar = ({
                   handleFileClick={handleFileClick}
                   isDirectoryOpen={isDirectoryOpen}
                   toggleDirectory={toggleDirectory}
+                  activeFileId={activeFileId}
                 />
               );
             })

package/src/client/{Sidebar → VZSidebar}/styles.scss

@@ -1,12 +1,13 @@
 .vz-sidebar {
   height: 100%;
-  background: rgb(54, 65, 89);
+  color: #d6d9de;
+  background: #33415b;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 
   .full-box {
-    padding: 7px;
+    padding: 3px 6px;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -24,16 +25,14 @@
     justify-content: space-between;
     cursor: pointer;
     margin: 0 10px;
-    color: rgb(219, 221, 225);
-    border-radius: 5px;
+    border-radius: 4px;
   }
 
-  .link-name {
-    margin-top: 30px;
+  .sidebar-section-hint {
+    // margin-top: 30px;
     margin-left: 10px;
-    color: rgb(154, 160, 172);
     font-size: 12px;
-    text-decoration: none;
+    color: #99a0ad;
   }
 
   .new-btn {
@@ -44,14 +43,21 @@
 
   .utils {
     display: flex;
+    gap: 8px;
   }
   .utilities {
-    margin-right: 3px;
+    // margin-right: 3px;
+    transform: scale(1.2);
   }
 
   .file-or-directory:hover,
   .settings:hover {
-    background-color: rgb(74, 84, 105);
+    background-color: #47546b;
+  }
+
+  .active-file,
+  .active-file:hover {
+    background-color: #202e46;
   }
 
   .name {
@@ -71,13 +77,12 @@
 
   .settings {
     height: 30px;
-    color: rgb(219, 221, 225);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 14px 0;
     margin: 10px;
-    border-radius: 5px;
+    border-radius: 4px;
   }
 }

package/src/client/bootstrap.ts

@@ -5,4 +5,7 @@ import Form from 'react-bootstrap/cjs/Form.js';
 import Button from 'react-bootstrap/cjs/Button.js';
 import Modal from 'react-bootstrap/cjs/Modal.js';
 
+// Pull in custom CSS from vizhub-ui.
+import 'vizhub-ui/dist/vizhub-ui.css';
+
 export { Form, Button, Modal };

package/src/client/style.scss

@@ -1,6 +1,7 @@
 :root {
   --vzcode-font-family: ui-monospace, SFMono-Regular,
-    SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace !important;
+  /* Variable for the background color */
   --vz-bg-color: rgb(
     41,
     44,
@@ -36,7 +37,9 @@ body,
 
 .app {
   background-color: var(--vz-bg-color);
-  font-family: 'Poppins', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    'Noto Sans', Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji';
   display: flex;
 
   /* To support Resizer, which is position: absolute */

package/src/client/useActions.ts

@@ -0,0 +1,74 @@
+import { useCallback } from 'react';
+import { ThemeLabel } from './themes';
+import { FileId } from '../types';
+import { VZAction } from './vzReducer';
+
+// This is a custom hook that returns a set of functions
+// that can be used to dispatch actions to the reducer.
+export const useActions = (
+  dispatch: (action: VZAction) => void,
+) => {
+  const setActiveFileId = useCallback(
+    (activeFileId: FileId) => {
+      dispatch({
+        type: 'set_active_file_id',
+        activeFileId,
+      });
+    },
+    [dispatch],
+  );
+
+  const openTab = useCallback(
+    (fileId: FileId) => {
+      dispatch({
+        type: 'open_tab',
+        fileId,
+      });
+    },
+    [dispatch],
+  );
+
+  const closeTabs = useCallback(
+    (idsToDelete: Array<FileId>) => {
+      dispatch({
+        type: 'close_tabs',
+        idsToDelete,
+      });
+    },
+    [dispatch],
+  );
+
+  const setTheme = useCallback(
+    (themeLabel: ThemeLabel) => {
+      dispatch({
+        type: 'set_theme',
+        themeLabel: themeLabel,
+      });
+    },
+    [dispatch],
+  );
+
+  // True to show the settings modal.
+  const setIsSettingsOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_is_settings_open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
+
+  const closeSettings = useCallback(() => {
+    setIsSettingsOpen(false);
+  }, [setIsSettingsOpen]);
+
+  return {
+    setActiveFileId,
+    openTab,
+    closeTabs,
+    setTheme,
+    setIsSettingsOpen,
+    closeSettings,
+  };
+};

package/src/client/useFileCRUD.ts

@@ -0,0 +1,101 @@
+import { useCallback } from 'react';
+import { FileId, VZCodeContent } from '../types';
+import { randomId } from '../randomId';
+
+// CRUD operations for files and directories
+// CRUD = Create, Read, Update, Delete
+export const useFileCRUD = ({
+  submitOperation,
+  closeTabs,
+}) => {
+  // Create a new file
+  const createFile = useCallback(() => {
+    // TODO use Bootstrap modals not native prompts
+    // See https://github.com/vizhub-core/vzcode/issues/252
+    const name = prompt('Enter new file name');
+    if (name) {
+      submitOperation((document: VZCodeContent) => ({
+        ...document,
+        files: {
+          ...document.files,
+          [randomId()]: { name, text: '' },
+        },
+      }));
+    }
+  }, [submitOperation]);
+
+  // Called when a file in the sidebar is renamed.
+  const handleRenameFileClick = useCallback(
+    (fileId: FileId, newName: string) => {
+      submitOperation((document) => ({
+        ...document,
+        files: {
+          ...document.files,
+          [fileId]: {
+            ...document.files[fileId],
+            name: newName,
+          },
+        },
+      }));
+    },
+    [submitOperation],
+  );
+
+  // Deletes a file
+  const deleteFile = useCallback(
+    (fileId: FileId) => {
+      closeTabs([fileId]);
+      submitOperation((document) => {
+        const updatedFiles = { ...document.files };
+        delete updatedFiles[fileId];
+        return { ...document, files: updatedFiles };
+      });
+    },
+    [submitOperation, closeTabs],
+  );
+
+  // Deletes a directory and all files within it
+  const deleteDirectory = useCallback(
+    (path: FileId) => {
+      const tabsToClose: Array<FileId> = [];
+      submitOperation((document: VZCodeContent) => {
+        const updatedFiles = { ...document.files };
+        for (const key in updatedFiles) {
+          if (updatedFiles[key].name.includes(path)) {
+            tabsToClose.push(key);
+            delete updatedFiles[key];
+          }
+        }
+        return { ...document, files: updatedFiles };
+      });
+      closeTabs(tabsToClose);
+    },
+    [submitOperation, closeTabs],
+  );
+
+  // Generic delete function that calls either deleteFile or deleteDirectory
+  // TODO consider if there is a cleaner way to do this
+  //  - Ideally we would have a separate function for deleting files and directories
+  //  - When we click the delete button, we should be able to tell if it is a file or directory
+  const handleDeleteClick = useCallback(
+    (key: string) => {
+      // Regex to identify if the key is a file path or a file id.
+      if (/^[0-9]*$/.test(key)) {
+        if (key.length == 8) {
+          deleteFile(key);
+        } else {
+          deleteDirectory(key);
+        }
+      } else {
+        deleteDirectory(key);
+      }
+    },
+    [deleteFile, deleteDirectory],
+  );
+
+  return {
+    createFile,
+    handleRenameFileClick,
+    handleDeleteClick,
+  };
+};

package/src/client/useOpenDirectories.ts

@@ -17,6 +17,7 @@ import { useState, useCallback } from 'react';
 
 // Inspired by
 // https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/useOpenDirectories.js
+// TODO move this into reducer
 export const useOpenDirectories = () => {
   // The set of open directories by path/
   const [openDirectories, setOpenDirectories] = useState<
@@ -30,14 +31,31 @@ export const useOpenDirectories = () => {
       [openDirectories],
     );
 
-  // Toggle whether a directory is open.
+  /**
+   * Toggles the state of a directory (open/close).
+   * If the directory is currently open, it will close it.
+   * If it's closed, it will open it.
+   */
   const toggleDirectory = useCallback(
-    (path) => {
-      const newOpenDirectories = new Set(openDirectories);
-      newOpenDirectories[
-        isDirectoryOpen(path) ? 'delete' : 'add'
-      ](path);
-      setOpenDirectories(newOpenDirectories);
+    (directoryPath: string) => {
+      // Create a copy of the currently open directories
+      const updatedOpenDirectories = new Set(
+        openDirectories,
+      );
+
+      // Check if the directory is currently open
+      const directoryIsOpen =
+        isDirectoryOpen(directoryPath);
+
+      // Toggle the directory's state
+      if (directoryIsOpen) {
+        updatedOpenDirectories.delete(directoryPath);
+      } else {
+        updatedOpenDirectories.add(directoryPath);
+      }
+
+      // Update the state with the modified set of open directories
+      setOpenDirectories(updatedOpenDirectories);
     },
     [openDirectories, isDirectoryOpen],
   );

package/src/client/useSubmitOperation.ts

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { ShareDBDoc, VZCodeContent } from '../types';
+import { diff } from './diff';
+
+// A helper function to submit diff-based operations to ShareDB
+export const useSubmitOperation = (
+  shareDBDoc: ShareDBDoc<VZCodeContent>,
+): ((
+  next: (content: VZCodeContent) => VZCodeContent,
+) => void) => {
+  const submitOperation: (
+    next: (content: VZCodeContent) => VZCodeContent,
+  ) => void = useCallback(
+    (next) => {
+      const content: VZCodeContent = shareDBDoc.data;
+      const op = diff(content, next(content));
+      if (op && shareDBDoc) {
+        shareDBDoc.submitOp(op);
+      }
+    },
+    [shareDBDoc],
+  );
+
+  return submitOperation;
+};

package/src/client/{reducer.ts → vzReducer.ts}

@@ -1,17 +1,27 @@
 import { FileId } from '../types';
-import { act } from 'react-dom/test-utils';
+import { ThemeLabel } from './themes';
 
-export const reducer = (state, action) => {
-  switch (action.type) {
-    // TODO phase this out
+export type VZState = {
+  tabList: Array<FileId>;
+  activeFileId: FileId | null;
+  theme: ThemeLabel;
+  isSettingsOpen: boolean;
+};
 
-    // The ordered list of tabs.
-    // TODO make this a URL param
-    case 'set_tab_list': {
-      return { ...state, tabList: action.tabList };
-    }
-    // TODO make this a URL param
-    case 'set_active_fileId': {
+export type VZAction =
+  | { type: 'set_active_file_id'; activeFileId: FileId }
+  | { type: 'open_tab'; fileId: FileId }
+  | { type: 'close_tab'; fileIdToRemove: FileId }
+  | { type: 'close_tabs'; idsToDelete: Array<FileId> }
+  | { type: 'set_theme'; themeLabel: ThemeLabel }
+  | { type: 'set_is_settings_open'; value: boolean };
+
+export const vzReducer = (
+  state: VZState,
+  action: VZAction,
+) => {
+  switch (action.type) {
+    case 'set_active_file_id': {
       return {
         ...state,
         activeFileId: action.activeFileId,
@@ -33,7 +43,8 @@ export const reducer = (state, action) => {
     }
     case 'close_tab': {
       const i = state.tabList.findIndex(
-        (fileId) => fileId === action.fileIdToRemove,
+        (fileId: FileId) =>
+          fileId === action.fileIdToRemove,
       );
       if (i != -1) {
         const newTabList = [
@@ -68,52 +79,40 @@ export const reducer = (state, action) => {
         ...state,
       };
     }
-    case 'multi_close_tab': {
-      let newTabList = [...state.tabList]; // Create a copy of the tabList array.
-      let newActiveFileId: FileId = state.activeFileId;
-      action.idsToDelete.forEach((id) => {
-        const i = newTabList.findIndex(
-          (fileId) => fileId === id,
-        );
-        if (i !== -1) {
-          // Remove the tab from the tab list.
-          newTabList = [
-            ...newTabList.slice(0, i),
-            ...newTabList.slice(i + 1),
-          ];
-          // If we are closing the active file,
-          if (newActiveFileId === id) {
-            // set the new active file to the next tab over,
-            if (newTabList.length > 0) {
-              newActiveFileId =
-                i === 0 ? newTabList[i] : newTabList[i - 1];
-            } else {
-              // or clear out the active file if we've closed the last tab.
-              newActiveFileId = null;
-            }
-          }
-        }
-      });
+    case 'close_tabs': {
+      const newTabList = state.tabList.filter(
+        (fileId: FileId) =>
+          !action.idsToDelete.includes(fileId),
+      );
+
+      let newActiveFileId: FileId | null =
+        state.activeFileId;
+
+      if (action.idsToDelete.includes(newActiveFileId)) {
+        const index =
+          state.tabList.indexOf(newActiveFileId);
+        newActiveFileId = newTabList[index]
+          ? newTabList[index]
+          : newTabList[index - 1] || null;
+      }
+
       return {
         ...state,
         tabList: newTabList,
         activeFileId: newActiveFileId,
       };
     }
-    // The current theme.
-    // TODO persist this in local storage
-    case 'set_Theme': {
+    case 'set_theme': {
       return {
         ...state,
         theme: action.themeLabel,
       };
     }
-    case 'set_Is_Settings_Open': {
+    case 'set_is_settings_open': {
       return {
         ...state,
         isSettingsOpen: action.value,
       };
     }
   }
-  throw Error('Unknown action: ' + action.type);
 };