vzcode 0.26.0 → 0.27.0

package/src/client/VZSidebar/{ConfirmationBox.tsx → DeleteConfirmationModal.tsx}

@@ -1,32 +1,35 @@
-import React from 'react';
 import { Button, Modal } from '../bootstrap';
 
+// Confirmation modal for deleting a file or directory.
 // Inspired by https://react-bootstrap.netlify.app/docs/components/modal/#live-demo
-export const ConfirmationBox = ({
+export const DeleteConfirmationModal = ({
   show,
   onClose,
   onConfirm,
+  isDirectory,
+  name,
 }) => (
-  <Modal
-    show={show}
-    onHide={onClose}
-    // confirm={onConfirm}
-    centered
-  >
+  <Modal show={show} onHide={onClose} centered>
     <Modal.Header closeButton onClick={onClose}>
-      <Modal.Title>Delete File</Modal.Title>
+      <Modal.Title>
+        Delete {isDirectory ? 'Directory' : 'File'}
+      </Modal.Title>
     </Modal.Header>
 
     <Modal.Body>
-      <p>Are you sure you want to delete this file?</p>
+      <p>
+        This will delete the{' '}
+        {isDirectory ? 'directory' : 'file'}{' '}
+        <strong>{name}</strong>.
+      </p>
     </Modal.Body>
 
     <Modal.Footer>
-      <Button variant="primary" onClick={onConfirm}>
-        Yes
-      </Button>
       <Button variant="secondary" onClick={onClose}>
-        No
+        Cancel
+      </Button>
+      <Button variant="primary" onClick={onConfirm}>
+        Delete
       </Button>
     </Modal.Footer>
   </Modal>

package/src/client/VZSidebar/DirectoryListing.tsx

@@ -2,44 +2,44 @@ import { useCallback, useMemo } from 'react';
 import { Item } from './Item';
 import { Listing } from './Listing';
 import { DirectoryArrowSVG } from './DirectoryArrowSVG';
-import { FileTree, FileTreeFile } from '../../types';
+import type {
+  FileTree,
+  FileTreeFile,
+  FileTreePath,
+} from '../../types';
 
 export const DirectoryListing = ({
   name,
   path,
   children,
-  handleRenameFileClick,
-  handleDeleteFileClick,
+  renameFile,
+  deleteFile,
+  deleteDirectory,
   handleFileClick,
+  handleFileDoubleClick,
   isDirectoryOpen,
   toggleDirectory,
+  activeFileId,
 }: {
   name: string;
   path: string;
   children: Array<FileTree | FileTreeFile>;
-  handleRenameFileClick: (
-    fileId: string,
-    newName: string,
-  ) => void;
-  handleDeleteFileClick: (
-    fileId: string,
-    event: React.MouseEvent,
-  ) => void;
+  renameFile: (fileId: string, newName: string) => void;
+  deleteFile: (fileId: string) => void;
+  deleteDirectory: (path: FileTreePath) => void;
   handleFileClick: (fileId: string) => void;
+  handleFileDoubleClick: (fileId: string) => void;
   isDirectoryOpen: (path: string) => boolean;
   toggleDirectory: (path: string) => void;
+  activeFileId: string;
 }) => {
   const handleClick = useCallback(() => {
     toggleDirectory(path);
-  }, [toggleDirectory]);
+  }, [toggleDirectory, path]);
 
-  const handleDeleteClick = useCallback(
-    (event) => {
-      // https://github.com/vizhub-core/vzcode/issues/102
-      handleDeleteFileClick(path, event);
-    },
-    [handleDeleteFileClick, path],
-  );
+  const handleDeleteClick = useCallback(() => {
+    deleteDirectory(path);
+  }, [deleteDirectory, path]);
 
   const handleRenameClick = useCallback(() => {
     // https://github.com/vizhub-core/vzcode/issues/103
@@ -58,7 +58,7 @@ export const DirectoryListing = ({
         handleClick={handleClick}
         handleDeleteClick={handleDeleteClick}
         handleRenameClick={handleRenameClick}
-        isDir={true}
+        isDirectory={true}
       >
         <div
           className="arrow-wrapper"
@@ -79,15 +79,16 @@ export const DirectoryListing = ({
               <Listing
                 entity={entity}
                 key={fileId || path}
-                handleRenameFileClick={
-                  handleRenameFileClick
-                }
-                handleDeleteFileClick={
-                  handleDeleteFileClick
-                }
+                renameFile={renameFile}
+                deleteFile={deleteFile}
+                deleteDirectory={deleteDirectory}
                 handleFileClick={handleFileClick}
+                handleFileDoubleClick={
+                  handleFileDoubleClick
+                }
                 isDirectoryOpen={isDirectoryOpen}
                 toggleDirectory={toggleDirectory}
+                activeFileId={activeFileId}
               />
             );
           })}

package/src/client/VZSidebar/FileListing.tsx

@@ -5,49 +5,46 @@ import { FileId } from '../../types';
 export const FileListing = ({
   name,
   fileId,
-  handleRenameFileClick,
-  handleDeleteFileClick,
+  renameFile,
+  deleteFile,
   handleFileClick,
+  handleFileDoubleClick,
   isActive,
 }: {
   name: string;
   fileId: FileId;
-  handleRenameFileClick: (
-    fileId: FileId,
-    newName: string,
-  ) => void;
-  handleDeleteFileClick: (
-    fileId: FileId,
-    event: React.MouseEvent,
-  ) => void;
+  renameFile: (fileId: FileId, newName: string) => void;
+  deleteFile: (fileId: FileId) => void;
   handleFileClick: (fileId: FileId) => void;
+  handleFileDoubleClick: (fileId: FileId) => void;
   isActive: boolean;
 }) => {
   const handleClick = useCallback(() => {
     handleFileClick(fileId);
   }, [fileId, handleFileClick]);
 
-  const handleDeleteClick = useCallback(
-    (event: React.MouseEvent) => {
-      handleDeleteFileClick(fileId, event);
-    },
-    [fileId, handleDeleteFileClick],
-  );
+  const handleDoubleClick = useCallback(() => {
+    handleFileDoubleClick(fileId);
+  }, [fileId, handleFileDoubleClick]);
+
+  const handleDeleteClick = useCallback(() => {
+    deleteFile(fileId);
+  }, [fileId, deleteFile]);
 
   const handleRenameClick = useCallback(
     (newName: string) => {
-      handleRenameFileClick(fileId, newName);
+      renameFile(fileId, newName);
     },
-    [fileId, handleRenameFileClick],
+    [fileId, renameFile],
   );
 
   return (
     <Item
       name={name}
       handleClick={handleClick}
+      handleDoubleClick={handleDoubleClick}
       handleDeleteClick={handleDeleteClick}
       handleRenameClick={handleRenameClick}
-      isDir={false}
       isActive={isActive}
     >
       {name}

package/src/client/VZSidebar/Item.tsx

@@ -1,14 +1,36 @@
-import { useState, useCallback, useMemo } from 'react';
-import { ConfirmationBox } from './ConfirmationBox';
+import {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+} from 'react';
 
+// TODO consider moving this up to a higher level of the component tree
+import { DeleteConfirmationModal } from './DeleteConfirmationModal';
+
+// TODO support renaming directories
+// See https://github.com/vizhub-core/vzcode/issues/103
+const enableRenameDirectory = false;
+
+// A file or directory in the sidebar.
 export const Item = ({
   name,
   children,
   handleClick,
+  handleDoubleClick,
   handleRenameClick,
   handleDeleteClick,
-  isDir,
+  isDirectory = false,
   isActive = false,
+}: {
+  name: string;
+  children: React.ReactNode;
+  handleClick: (event: React.MouseEvent) => void;
+  handleDoubleClick?: (event: React.MouseEvent) => void;
+  handleRenameClick: (newName: string) => void;
+  handleDeleteClick: () => void;
+  isDirectory?: boolean;
+  isActive?: boolean;
 }) => {
   // Tracks whether the mouse is hovering over the file or directory
   const [isHovered, setIsHovered] = useState(false);
@@ -19,28 +41,48 @@ export const Item = ({
   // Tracks the value of the input field when renaming
   const [renameValue, setRenameValue] = useState('');
 
-  const onKeyDown = useCallback((event) => {
-    if (event.key === 'Escape') {
-      setIsRenaming(false);
-    } else if (event.key === 'Enter') {
-      event.target.blur();
-    }
-  }, []);
+  // Tracks whether the delete confirmation modal is open
+  const [showModal, setShowModal] = useState(false);
+
+  // Ref to track the input DOM, so that we can focus and blur it
+  const renameInputRef = useRef(null);
 
-  const onBlur = useCallback(
-    (event: React.FocusEvent<HTMLInputElement>) => {
-      if (event.target.value.trim() === '') {
-        // setEditingValue(value);
-        console.log('TODO: handle empty rename');
-      } else {
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Escape') {
         setIsRenaming(false);
-        handleRenameClick(event.target.value);
+      } else if (event.key === 'Enter') {
+        renameInputRef.current.blur();
       }
     },
-    [handleRenameClick],
+    [],
   );
 
-  const [showModal, setShowModal] = useState(false);
+  const onBlur = useCallback(() => {
+    setIsRenaming(false);
+    if (renameInputRef.current.value.trim() === '') {
+      // Renaming to empty signals deletion
+      setShowModal(true);
+    } else {
+      handleRenameClick(renameInputRef.current.value);
+    }
+  }, [handleRenameClick]);
+
+  const handleRenameIconClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      setIsRenaming(!isRenaming);
+      setRenameValue(name);
+    },
+    [name, isRenaming],
+  );
+
+  // Focus the input field when renaming
+  useEffect(() => {
+    if (isRenaming) {
+      renameInputRef.current.focus();
+    }
+  }, [isRenaming]);
 
   // Function to open the delete file confirmation modal
   const handleModalOpen = useCallback(
@@ -74,25 +116,28 @@ export const Item = ({
     setIsHovered(false);
   }, []);
 
-  const onChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setRenameValue(event.target.value);
-    },
-    [],
-  );
+  const onChange = useCallback(() => {
+    setRenameValue(renameInputRef.current.value);
+  }, []);
 
   return (
     <div
-      className={`full-box file-or-directory ${
+      className={`full-box file-or-directory user-select-none ${
         isActive ? 'active-file' : ''
       }`}
       onClick={isRenaming ? null : handleClick}
+      onDoubleClick={
+        isRenaming || !handleDoubleClick
+          ? null
+          : handleDoubleClick
+      }
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       <div className="name">
         {isRenaming ? (
           <input
+            ref={renameInputRef}
             type="text"
             aria-label="Field name"
             value={renameValue}
@@ -104,17 +149,16 @@ export const Item = ({
           children
         )}
       </div>
-      {isHovered ? (
+      {isHovered && !isRenaming ? (
         <div className="utils">
-          <i
-            className="bx bxs-edit utilities"
-            style={{ color: '#9edcff' }}
-            onClick={(event: React.MouseEvent) => {
-              event.stopPropagation();
-              setIsRenaming(!isRenaming);
-              setRenameValue(isDir ? name : children);
-            }}
-          ></i>
+          {(isDirectory ? enableRenameDirectory : true) ? (
+            <i
+              className="bx bxs-edit utilities"
+              style={{ color: '#9edcff' }}
+              onClick={handleRenameIconClick}
+            ></i>
+          ) : null}
+
           <i
             className="bx bx-trash utilities"
             style={{ color: '#ff006b' }}
@@ -123,10 +167,12 @@ export const Item = ({
         </div>
       ) : null}
 
-      <ConfirmationBox
+      <DeleteConfirmationModal
         show={showModal}
         onClose={handleModalClose}
         onConfirm={handleConfirmModal}
+        isDirectory={isDirectory}
+        name={name}
       />
     </div>
   );

package/src/client/VZSidebar/Listing.tsx

@@ -3,6 +3,7 @@ import {
   FileId,
   FileTree,
   FileTreeFile,
+  FileTreePath,
 } from '../../types';
 import { FileListing } from './FileListing';
 
@@ -10,23 +11,21 @@ import { FileListing } from './FileListing';
 // that appears in the Sidebar.
 export const Listing = ({
   entity,
-  handleRenameFileClick,
-  handleDeleteFileClick,
+  renameFile,
+  deleteFile,
+  deleteDirectory,
   handleFileClick,
+  handleFileDoubleClick,
   isDirectoryOpen,
   toggleDirectory,
   activeFileId,
 }: {
   entity: FileTree | FileTreeFile;
-  handleRenameFileClick: (
-    fileId: FileId,
-    newName: string,
-  ) => void;
-  handleDeleteFileClick: (
-    fileId: FileId,
-    event: React.MouseEvent,
-  ) => void;
+  renameFile: (fileId: FileId, newName: string) => void;
+  deleteFile: (fileId: FileId) => void;
+  deleteDirectory: (path: FileTreePath) => void;
   handleFileClick: (fileId: FileId) => void;
+  handleFileDoubleClick: (fileId: FileId) => void;
   isDirectoryOpen: (path: string) => boolean;
   toggleDirectory: (path: string) => void;
   activeFileId: FileId;
@@ -37,9 +36,10 @@ export const Listing = ({
     <FileListing
       fileId={fileId}
       name={name}
-      handleRenameFileClick={handleRenameFileClick}
-      handleDeleteFileClick={handleDeleteFileClick}
+      renameFile={renameFile}
+      deleteFile={deleteFile}
       handleFileClick={handleFileClick}
+      handleFileDoubleClick={handleFileDoubleClick}
       isActive={fileId === activeFileId}
     />
   ) : (
@@ -47,11 +47,14 @@ export const Listing = ({
       name={name}
       path={path}
       children={children}
-      handleRenameFileClick={handleRenameFileClick}
-      handleDeleteFileClick={handleDeleteFileClick}
+      renameFile={renameFile}
+      deleteFile={deleteFile}
+      deleteDirectory={deleteDirectory}
       handleFileClick={handleFileClick}
+      handleFileDoubleClick={handleFileDoubleClick}
       isDirectoryOpen={isDirectoryOpen}
       toggleDirectory={toggleDirectory}
+      activeFileId={activeFileId}
     />
   );
 };

package/src/client/VZSidebar/index.tsx

@@ -3,6 +3,7 @@ import {
   FileId,
   FileTree,
   FileTreeFile,
+  FileTreePath,
   Files,
 } from '../../types';
 import { getFileTree } from '../getFileTree';
@@ -13,30 +14,32 @@ import { Listing } from './Listing';
 import './styles.scss';
 
 export const VZSidebar = ({
-  createFile,
   files,
-  handleRenameFileClick,
-  handleDeleteFileClick,
-  handleFileClick,
+  createFile,
+  renameFile,
+  deleteFile,
+  deleteDirectory,
+  openTab,
   setIsSettingsOpen,
   isDirectoryOpen,
   toggleDirectory,
   activeFileId,
 }: {
   files: Files;
-  createFile?: () => void;
-  handleRenameFileClick?: (
-    fileId: FileId,
-    newName: string,
-  ) => void;
-  handleDeleteFileClick?: (
-    fileId: FileId,
-    event: React.MouseEvent,
-  ) => void;
-  handleFileClick?: (fileId: FileId) => void;
-  setIsSettingsOpen?: (isSettingsOpen: boolean) => void;
-  isDirectoryOpen?: (path: string) => boolean;
-  toggleDirectory?: (path: string) => void;
+  createFile: () => void;
+  renameFile: (fileId: FileId, newName: string) => void;
+  deleteFile: (fileId: FileId) => void;
+  deleteDirectory: (path: FileTreePath) => void;
+  openTab: ({
+    fileId,
+    isTransient,
+  }: {
+    fileId: FileId;
+    isTransient?: boolean;
+  }) => void;
+  setIsSettingsOpen: (isSettingsOpen: boolean) => void;
+  isDirectoryOpen: (path: string) => boolean;
+  toggleDirectory: (path: string) => void;
   activeFileId?: FileId;
 }) => {
   const fileTree = useMemo(
@@ -52,6 +55,22 @@ 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],
+  );
+
   return (
     <div
       className="vz-sidebar"
@@ -75,15 +94,15 @@ export const VZSidebar = ({
               const key = fileId ? fileId : path;
               return (
                 <Listing
-                  entity={entity}
                   key={key}
-                  handleRenameFileClick={
-                    handleRenameFileClick
-                  }
-                  handleDeleteFileClick={
-                    handleDeleteFileClick
-                  }
+                  entity={entity}
+                  renameFile={renameFile}
+                  deleteFile={deleteFile}
+                  deleteDirectory={deleteDirectory}
                   handleFileClick={handleFileClick}
+                  handleFileDoubleClick={
+                    handleFileDoubleClick
+                  }
                   isDirectoryOpen={isDirectoryOpen}
                   toggleDirectory={toggleDirectory}
                   activeFileId={activeFileId}

package/src/client/style.scss

@@ -1,6 +1,9 @@
 :root {
   --vzcode-font-family: ui-monospace, SFMono-Regular,
     'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace !important;
+
+  --vzcode-font-size: 16px;
+
   /* Variable for the background color */
   --vz-bg-color: rgb(
     41,

package/src/client/useActions.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { ThemeLabel } from './themes';
-import { FileId } from '../types';
-import { VZAction } from './vzReducer';
+import { FileId, Username } from '../types';
+import { TabState, VZAction } from './vzReducer';
 
 // This is a custom hook that returns a set of functions
 // that can be used to dispatch actions to the reducer.
@@ -19,20 +19,21 @@ export const useActions = (
   );
 
   const openTab = useCallback(
-    (fileId: FileId) => {
+    (tabState: TabState): void => {
       dispatch({
         type: 'open_tab',
-        fileId,
+        fileId: tabState.fileId,
+        isTransient: tabState.isTransient,
       });
     },
     [dispatch],
   );
 
   const closeTabs = useCallback(
-    (idsToDelete: Array<FileId>) => {
+    (fileIdsToClose: Array<FileId>) => {
       dispatch({
         type: 'close_tabs',
-        idsToDelete,
+        fileIdsToClose,
       });
     },
     [dispatch],
@@ -63,6 +64,22 @@ export const useActions = (
     setIsSettingsOpen(false);
   }, [setIsSettingsOpen]);
 
+  const editorNoLongerWantsFocus = useCallback(() => {
+    dispatch({
+      type: 'editor_no_longer_wants_focus',
+    });
+  }, [dispatch]);
+
+  const setUsername = useCallback(
+    (username: Username) => {
+      dispatch({
+        type: 'set_username',
+        username,
+      });
+    },
+    [dispatch],
+  );
+
   return {
     setActiveFileId,
     openTab,
@@ -70,5 +87,7 @@ export const useActions = (
     setTheme,
     setIsSettingsOpen,
     closeSettings,
+    editorNoLongerWantsFocus,
+    setUsername,
   };
 };

package/src/client/useEditorCache.ts

@@ -1,8 +1,9 @@
 import { useRef } from 'react';
 import { FileId } from '../types';
+import { EditorView } from 'codemirror';
 
 export type EditorCacheValue = {
-  editor: any;
+  editor: EditorView;
   themeCompartment: any;
 };