vzcode 0.25.0 → 0.27.0

package/src/client/{Sidebar/ConfirmationBox.tsx → VZSidebar/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/{Sidebar → 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/{Sidebar → VZSidebar}/FileListing.tsx

@@ -5,47 +5,47 @@ 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}
     </Item>

package/src/client/VZSidebar/Item.tsx

@@ -0,0 +1,179 @@
+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,
+  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);
+
+  // Tracks whether the file is being renamed (inline text input)
+  const [isRenaming, setIsRenaming] = useState(false);
+
+  // Tracks the value of the input field when renaming
+  const [renameValue, setRenameValue] = useState('');
+
+  // 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 onKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Escape') {
+        setIsRenaming(false);
+      } else if (event.key === 'Enter') {
+        renameInputRef.current.blur();
+      }
+    },
+    [],
+  );
+
+  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(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      setShowModal(true);
+    },
+    [],
+  );
+
+  // Function to close the modal
+  const handleModalClose = useCallback(() => {
+    setShowModal(false);
+  }, []);
+
+  // Function to handle confirmation on modal
+  const handleConfirmModal = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation();
+      setShowModal(false);
+      handleDeleteClick();
+    },
+    [handleDeleteClick],
+  );
+
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  const onChange = useCallback(() => {
+    setRenameValue(renameInputRef.current.value);
+  }, []);
+
+  return (
+    <div
+      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}
+            onKeyDown={onKeyDown}
+            onBlur={onBlur}
+            onChange={onChange}
+          />
+        ) : (
+          children
+        )}
+      </div>
+      {isHovered && !isRenaming ? (
+        <div className="utils">
+          {(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' }}
+            onClick={handleModalOpen}
+          ></i>
+        </div>
+      ) : null}
+
+      <DeleteConfirmationModal
+        show={showModal}
+        onClose={handleModalClose}
+        onConfirm={handleConfirmModal}
+        isDirectory={isDirectory}
+        name={name}
+      />
+    </div>
+  );
+};

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

@@ -3,6 +3,7 @@ import {
   FileId,
   FileTree,
   FileTreeFile,
+  FileTreePath,
 } from '../../types';
 import { FileListing } from './FileListing';
 
@@ -10,24 +11,24 @@ 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;
 }) => {
   const { name, file, fileId } = entity as FileTreeFile;
   const { path, children } = entity as FileTree;
@@ -35,20 +36,25 @@ export const Listing = ({
     <FileListing
       fileId={fileId}
       name={name}
-      handleRenameFileClick={handleRenameFileClick}
-      handleDeleteFileClick={handleDeleteFileClick}
+      renameFile={renameFile}
+      deleteFile={deleteFile}
       handleFileClick={handleFileClick}
+      handleFileDoubleClick={handleFileDoubleClick}
+      isActive={fileId === activeFileId}
     />
   ) : (
     <DirectoryListing
       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/{Sidebar → VZSidebar}/index.tsx

@@ -3,6 +3,7 @@ import {
   FileId,
   FileTree,
   FileTreeFile,
+  FileTreePath,
   Files,
 } from '../../types';
 import { getFileTree } from '../getFileTree';
@@ -12,30 +13,34 @@ import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { Listing } from './Listing';
 import './styles.scss';
 
-export const Sidebar = ({
-  createFile,
+export const VZSidebar = ({
   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(
     () => (files ? sortFileTree(getFileTree(files)) : null),
@@ -50,6 +55,22 @@ export const Sidebar = ({
     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"
@@ -57,11 +78,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"
@@ -77,17 +94,18 @@ export const Sidebar = ({
               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/{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,10 @@
 :root {
   --vzcode-font-family: ui-monospace, SFMono-Regular,
-    SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace !important;
+
+  --vzcode-font-size: 16px;
+
+  /* Variable for the background color */
   --vz-bg-color: rgb(
     41,
     44,
@@ -36,7 +40,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 */