vzcode 0.26.0 → 0.28.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';
@@ -12,31 +13,44 @@ import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { Listing } from './Listing';
 import './styles.scss';
 
+const CreateFileButton = ({ createFile }) => {
+  return (
+    <i
+      className="bx bxs-file-plus new-btn"
+      style={{ color: '#dbdde1' }}
+      onClick={createFile}
+      // TODO better tooltip
+      title="Create file"
+    ></i>
+  );
+};
 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 +66,28 @@ 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 &&
+    fileTree.children.length > 0;
+
   return (
     <div
       className="vz-sidebar"
@@ -61,36 +97,42 @@ export const VZSidebar = ({
         <div className="full-box">
           <div className="sidebar-section-hint">Files</div>
           <div>
-            <i
-              className="bx bxs-file-plus new-btn"
-              style={{ color: '#dbdde1' }}
-              onClick={createFile}
-            ></i>
+            <CreateFileButton createFile={createFile} />
           </div>
         </div>
-        {fileTree
-          ? fileTree.children.map((entity) => {
-              const { fileId } = entity as FileTreeFile;
-              const { path } = entity as FileTree;
-              const key = fileId ? fileId : path;
-              return (
-                <Listing
-                  entity={entity}
-                  key={key}
-                  handleRenameFileClick={
-                    handleRenameFileClick
-                  }
-                  handleDeleteFileClick={
-                    handleDeleteFileClick
-                  }
-                  handleFileClick={handleFileClick}
-                  isDirectoryOpen={isDirectoryOpen}
-                  toggleDirectory={toggleDirectory}
-                  activeFileId={activeFileId}
-                />
-              );
-            })
-          : null}
+        {filesExist ? (
+          fileTree.children.map((entity) => {
+            const { fileId } = entity as FileTreeFile;
+            const { path } = entity as FileTree;
+            const key = fileId ? fileId : path;
+            return (
+              <Listing
+                key={key}
+                entity={entity}
+                renameFile={renameFile}
+                deleteFile={deleteFile}
+                deleteDirectory={deleteDirectory}
+                handleFileClick={handleFileClick}
+                handleFileDoubleClick={
+                  handleFileDoubleClick
+                }
+                isDirectoryOpen={isDirectoryOpen}
+                toggleDirectory={toggleDirectory}
+                activeFileId={activeFileId}
+              />
+            );
+          })
+        ) : (
+          <div className="empty">
+            <div className="empty-text">
+              It looks like you don't have any files yet!
+              Click the "Create file" button below to create
+              your first file.
+            </div>
+
+            <CreateFileButton createFile={createFile} />
+          </div>
+        )}
       </div>
       {disableSettings ? null : (
         <div

package/src/client/VZSidebar/styles.scss

@@ -16,6 +16,9 @@
 
   .files {
     overflow: auto;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
   }
 
   .file-or-directory {
@@ -46,7 +49,6 @@
     gap: 8px;
   }
   .utilities {
-    // margin-right: 3px;
     transform: scale(1.2);
   }
 
@@ -85,4 +87,22 @@
     margin: 10px;
     border-radius: 4px;
   }
+
+  /* Empty state for when there are no files */
+  .empty {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    margin: 10px;
+    padding: 20px;
+    border: 1px dashed rgba(255, 255, 255, 0.5); /* White dashed outline */
+    border-radius: 10px;
+  }
+
+  .empty-text {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
 }

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,