vzcode 1.11.0 → 1.13.0

package/src/client/VZSidebar/index.tsx

@@ -1,6 +1,7 @@
 import {
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
@@ -8,6 +9,9 @@ import {
   FileId,
   FileTree,
   FileTreeFile,
+  Presence,
+  PresenceId,
+  PresenceIndicator,
 } from '../../types';
 import { Tooltip, OverlayTrigger } from '../bootstrap';
 import { Search } from './Search';
@@ -35,21 +39,74 @@ import './styles.scss';
 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 = (
+    <>
+      <strong>New file</strong>
+      {/* TODO verify that Ctrl + Shift + N works - does not work in Linux */}
+      <div>(Alt + N or Ctrl + Shift + N)</div>
+    </>
+  ),
+  createDirTooltipText = (
+    <div>
+      <strong>New Directory</strong>
+      {/* TODO consider Alt+D, as Ctrl + Shift + D does not work in Linux */}
+      <div>(Ctrl + Shift + D)</div>
+    </div>
+  ),
+  openSettingsTooltipText = (
+    <div>
+      <strong>Open Settings</strong>
+      <div>(Ctrl + Shift + S or Ctrl + ,)</div>
+    </div>
+  ),
+  openKeyboardShortcuts = (
+    <div>
+      <strong>Keyboard Shortcuts</strong>
+      <div>(Ctrl + Shift + K)</div>
+    </div>
+  ),
+  reportBugTooltipText = (
+    <div>
+      <strong>Report Bug</strong>
+      {/* TODO get this keyboard shortcut working? */}
+      {/* <div>(Ctrl + Shift + B)</div> */}
+    </div>
+  ),
+  searchToolTipText = (
+    <div>
+      <strong>Search</strong>
+      <div>(Ctrl + Shift + F)</div>
+    </div>
+  ),
+  filesToolTipText = (
+    <div>
+      <strong>Files</strong>
+      <div>(Ctrl + Shift + E)</div>
+    </div>
+  ),
+  enableAutoFollowTooltipText = (
+    <div>
+      <strong>Enable Auto Follow</strong>
+      <div>(Ctrl + Shift + A)</div>
+    </div>
+  ),
+  disableAutoFollowTooltipText = (
+    <div>
+      <strong>Disable Auto Follow</strong>
+      {/* TODO consider Alt+A, this breaks in Linux */}
+      <div>(Ctrl + Shift + A)</div>
+    </div>
+  ),
 }: {
-  createFileTooltipText?: string;
-  createDirTooltipText?: string;
-  openSettingsTooltipText?: string;
-  reportBugTooltipText?: string;
-  openKeyboardShortcuts?: string;
-  searchToolTipText?: string;
-  filesToolTipText?: string;
+  createFileTooltipText?: React.ReactNode;
+  createDirTooltipText?: React.ReactNode;
+  openSettingsTooltipText?: React.ReactNode;
+  reportBugTooltipText?: React.ReactNode;
+  openKeyboardShortcuts?: React.ReactNode;
+  searchToolTipText?: React.ReactNode;
+  filesToolTipText?: React.ReactNode;
+  enableAutoFollowTooltipText?: React.ReactNode;
+  disableAutoFollowTooltipText?: React.ReactNode;
 }) => {
   const {
     files,
@@ -64,6 +121,9 @@ export const VZSidebar = ({
     sidebarRef,
     enableAutoFollow,
     toggleAutoFollow,
+    docPresence,
+    updatePresenceIndicator,
+    sidebarPresenceIndicators,
   } = useContext(VZCodeContext);
 
   const fileTree = useMemo(
@@ -111,6 +171,42 @@ export const VZSidebar = ({
     handleDrop,
   } = useDragAndDrop();
 
+  // Track presence of remote users across files
+  // so that they can be displayed in the sidebar.
+  useEffect(() => {
+    docPresence;
+  }, []);
+
+  // Track the presence indicators for display in sidebar
+  useEffect(() => {
+    if (docPresence) {
+      const handleReceive = (
+        presenceId: PresenceId,
+        update: Presence,
+      ) => {
+        const presenceIndicator: PresenceIndicator = {
+          username: update.username,
+          fileId: update.start[1] as FileId,
+        };
+
+        console.log('Got presence!');
+        // console.log({presenceId,update})
+        console.log(
+          JSON.stringify(presenceIndicator, null, 2),
+        );
+
+        updatePresenceIndicator(presenceIndicator);
+      };
+
+      docPresence.on('receive', handleReceive);
+      return () => {
+        docPresence.off('receive', handleReceive);
+      };
+    }
+  }, [docPresence]);
+
+  console.log(sidebarPresenceIndicators);
+
   return (
     <div
       className="vz-sidebar"
@@ -135,8 +231,9 @@ export const VZSidebar = ({
             }
           >
             <i
-              onClick={() => setIsSearchOpen(false)}
+              id="files-icon"
               className="icon-button icon-button-dark"
+              onClick={() => setIsSearchOpen(false)}
             >
               <FolderSVG />
             </i>
@@ -151,8 +248,9 @@ export const VZSidebar = ({
             }
           >
             <i
-              onClick={() => setIsSearchOpen(true)}
+              id="search-icon"
               className="icon-button icon-button-dark"
+              onClick={() => setIsSearchOpen(true)}
             >
               <SearchSVG />
             </i>
@@ -167,8 +265,9 @@ export const VZSidebar = ({
             }
           >
             <i
-              onClick={handleQuestionMarkClick}
+              id="shortcut-icon"
               className="icon-button icon-button-dark"
+              onClick={handleQuestionMarkClick}
             >
               <QuestionMarkSVG />
             </i>
@@ -187,7 +286,10 @@ export const VZSidebar = ({
               target="_blank"
               rel="noopener noreferrer"
             >
-              <i className="icon-button icon-button-dark">
+              <i
+                id="bug-icon"
+                className="icon-button icon-button-dark"
+              >
                 <BugSVG />
               </i>
             </a>
@@ -202,8 +304,9 @@ export const VZSidebar = ({
             }
           >
             <i
-              onClick={handleSettingsClick}
+              id="settings-icon"
               className="icon-button icon-button-dark"
+              onClick={handleSettingsClick}
             >
               <GearSVG />
             </i>
@@ -218,8 +321,9 @@ export const VZSidebar = ({
             }
           >
             <i
-              onClick={handleOpenCreateFileModal}
+              id="new-file-icon"
               className="icon-button icon-button-dark"
+              onClick={handleOpenCreateFileModal}
             >
               <NewSVG />
             </i>
@@ -235,8 +339,9 @@ export const VZSidebar = ({
             }
           >
             <i
-              onClick={handleOpenCreateDirModal}
+              id="new-directory-icon"
               className="icon-button icon-button-dark"
+              onClick={handleOpenCreateDirModal}
             >
               <FileSVG />
             </i>
@@ -248,18 +353,19 @@ export const VZSidebar = ({
             overlay={
               <Tooltip id="toggle-auto-follow">
                 {enableAutoFollow
-                  ? 'Disable Auto Follow'
-                  : 'Enable Auto Follow'}
+                  ? disableAutoFollowTooltipText
+                  : enableAutoFollowTooltipText}
               </Tooltip>
             }
           >
             <i
-              onClick={toggleAutoFollow}
+              id="auto-focus-icon"
               className={`icon-button icon-button-dark${
                 enableAutoFollow
                   ? ' vh-color-success-01'
                   : ''
               }`}
+              onClick={toggleAutoFollow}
             >
               <PinSVG />
             </i>

package/src/client/VZSidebar/styles.scss

@@ -253,4 +253,29 @@
       }
     }
   }
+  .name {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    gap: 6px;
+  }
+
+  .presence-indicators {
+    display: flex;
+    gap: 4px;
+    margin-right: 6px; /* Space between the indicators and the file name */
+  }
+
+  .presence-indicator {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    background-color: #ff5733;
+    color: #ffffff;
+  }
 }

package/src/client/tabsSearchParameters.ts

@@ -1,5 +1,4 @@
-import { FileId, VZCodeContent } from '../types';
-import { TabState } from './vzReducer';
+import { FileId, TabState, VZCodeContent } from '../types';
 
 // The delimiter used to separate file names in the `tabs` parameter.
 // We need a character that is both URL-safe (does not get escaped in URLs)

package/src/client/useActions.ts

@@ -2,12 +2,14 @@ import { useCallback } from 'react';
 import { ThemeLabel } from './themes';
 import {
   FileId,
+  PresenceIndicator,
   SearchFileVisibility,
   ShareDBDoc,
+  TabState,
   Username,
   VZCodeContent,
 } from '../types';
-import { TabState, VZAction } from './vzReducer';
+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.
@@ -113,6 +115,13 @@ export const useActions = (
     [dispatch],
   );
 
+  // Toggle the focused variable, which should focus the search input
+  const toggleSearchFocused = useCallback(() => {
+    dispatch({
+      type: 'toggle_search_focused',
+    });
+  }, [dispatch]);
+
   // True to show the settings modal.
   const setIsSettingsOpen = useCallback(
     (value: boolean) => {
@@ -164,6 +173,22 @@ export const useActions = (
     });
   }, [dispatch]);
 
+  const updatePresenceIndicator = useCallback(
+    (presenceIndicator: PresenceIndicator) => {
+      dispatch({
+        type: 'update_presence_indicator',
+        presenceIndicator,
+      });
+    },
+    [dispatch],
+  );
+
+  const splitCurrentPane = useCallback(() => {
+    dispatch({
+      type: 'split_current_pane',
+    });
+  }, [dispatch]);
+
   return {
     setActiveFileId,
     setActiveFileLeft,
@@ -175,6 +200,7 @@ export const useActions = (
     setSearch,
     setSearchResults,
     setSearchFileVisibility,
+    toggleSearchFocused,
     setIsSettingsOpen,
     setIsDocOpen,
     closeSettings,
@@ -182,5 +208,7 @@ export const useActions = (
     editorNoLongerWantsFocus,
     setUsername,
     toggleAutoFollow,
+    updatePresenceIndicator,
+    splitCurrentPane,
   };
 };

package/src/client/useKeyboardShortcuts.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 import { shouldTriggerRun } from './shouldTriggerRun';
 import { syntaxTree } from '@codemirror/language';
 import { SyntaxNode, SyntaxNodeRef } from '@lezer/common';
@@ -151,6 +151,18 @@ function jumpToDefinition(
   }
 }
 
+// Sidebar keyboard shortcuts in form Ctrl + Shift + <key>
+const sideBarKeyBoardMap = {
+  E: 'files-icon',
+  F: 'search-icon',
+  K: 'shortcut-icon',
+  B: 'bug-icon',
+  S: 'settings-icon',
+  N: 'new-file-icon',
+  D: 'new-directory-icon',
+  A: 'auto-focus-icon',
+};
+
 // This module implements the keyboard shortcuts
 // for the VZCode editor.
 // These include:
@@ -166,6 +178,7 @@ export const useKeyboardShortcuts = ({
   handleOpenCreateFileModal,
   setActiveFileLeft,
   setActiveFileRight,
+  toggleSearchFocused,
   runPrettierRef,
   runCodeRef,
   sidebarRef,
@@ -177,6 +190,7 @@ export const useKeyboardShortcuts = ({
   handleOpenCreateFileModal: () => void;
   setActiveFileLeft: () => void;
   setActiveFileRight: () => void;
+  toggleSearchFocused: () => void;
   runPrettierRef: React.MutableRefObject<() => void>;
   runCodeRef: React.MutableRefObject<() => void>;
   sidebarRef: React.RefObject<HTMLDivElement>;
@@ -203,6 +217,22 @@ export const useKeyboardShortcuts = ({
         return;
       }
 
+      if (event.ctrlKey && event.shiftKey) {
+        // Handle keyboard shortcuts related to the side bar icons
+        document
+          .getElementById(sideBarKeyBoardMap[event.key])
+          ?.click();
+
+        // Ensure the search input is always focused
+        if (event.key === 'F') {
+          toggleSearchFocused();
+        }
+      } else if (event.ctrlKey && event.key === ',') {
+        document
+          .getElementById(sideBarKeyBoardMap['S'])
+          ?.click();
+      }
+
       if (event.ctrlKey === true) {
         // On holding CTRL key, search for a potential definition jump using mouse location
         document.addEventListener(

package/src/client/useURLSync.ts

@@ -1,6 +1,5 @@
 import { useSearchParams } from 'react-router-dom';
-import { FileId, VZCodeContent } from '../types';
-import { TabState } from './vzReducer';
+import { FileId, TabState, VZCodeContent } from '../types';
 import { useEffect, useMemo, useRef } from 'react';
 import {
   TabStateParams,

package/src/client/vzReducer/closeTabReducer.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { assert, describe, expect, it } from 'vitest';
 import { closeTabsReducer } from './closeTabsReducer';
 import { VZAction, VZState, createInitialState } from '.';
 import { defaultTheme } from '../themes';
@@ -25,8 +25,9 @@ describe('closeTabsReducer', () => {
       action,
     );
 
-    expect(newState.tabList.length).toBe(0);
-    expect(newState.activeFileId).toBeNull();
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(0);
+    expect(newState.pane.activeFileId).toBeNull();
   });
 
   it('Keeps other tabs open', () => {
@@ -36,11 +37,14 @@ describe('closeTabsReducer', () => {
     };
     const stateWithTabs = {
       ...initialState,
-      tabList: [
-        { fileId: 'file1', isTransient: false },
-        { fileId: 'file2', isTransient: false },
-      ],
-      activeFileId: 'file1',
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+        ],
+        activeFileId: 'file1',
+      },
     };
 
     const newState = closeTabsReducer(
@@ -48,24 +52,29 @@ describe('closeTabsReducer', () => {
       action,
     );
 
-    expect(newState.tabList.length).toBe(1);
-    expect(newState.tabList[0].fileId).toBe('file1');
-    expect(newState.activeFileId).toBe('file1');
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(1);
+    expect(newState.pane.tabList[0].fileId).toBe('file1');
+    expect(newState.pane.activeFileId).toBe('file1');
   });
 
-  it('Activates previous tab after closing an active tab', () => {
+  it.only('Activates previous tab after closing an active tab', () => {
     const action: VZAction = {
       type: 'close_tabs',
       fileIdsToClose: ['file2'],
     };
-    const stateWithTabs = {
+    const stateWithTabs: VZState = {
       ...initialState,
-      tabList: [
-        { fileId: 'file1', isTransient: false },
-        { fileId: 'file2', isTransient: false },
-        { fileId: 'file3', isTransient: false },
-      ],
-      activeFileId: 'file2',
+      pane: {
+        ...initialState.pane,
+        type: 'leafPane',
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+          { fileId: 'file3', isTransient: false },
+        ],
+        activeFileId: 'file2',
+      },
     };
 
     const newState = closeTabsReducer(
@@ -73,8 +82,9 @@ describe('closeTabsReducer', () => {
       action,
     );
 
-    expect(newState.tabList.length).toBe(2);
-    expect(newState.activeFileId).toBe('file1'); // should switch to the previous tab
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(2);
+    expect(newState.pane.activeFileId).toBe('file1'); // should switch to the previous tab
   });
 
   it('Does not modify the state if closing non-existing tabs', () => {
@@ -84,12 +94,15 @@ describe('closeTabsReducer', () => {
     };
     const stateWithTabs = {
       ...initialState,
-      tabList: [
-        { fileId: 'file1', isTransient: false },
-        { fileId: 'file2', isTransient: false },
-        { fileId: 'file3', isTransient: false },
-      ],
-      activeFileId: 'file2',
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+          { fileId: 'file3', isTransient: false },
+        ],
+        activeFileId: 'file2',
+      },
     };
 
     const newState = closeTabsReducer(
@@ -121,8 +134,9 @@ describe('closeTabsReducer', () => {
       action,
     );
 
-    expect(newState.tabList.length).toBe(2);
-    expect(newState.activeFileId).toBe('file3'); // remains unchanged
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(2);
+    expect(newState.pane.activeFileId).toBe('file3'); // remains unchanged
   });
 
   it('Closes the first tab out of many, when it is active', () => {
@@ -146,8 +160,9 @@ describe('closeTabsReducer', () => {
       action,
     );
 
-    expect(newState.tabList.length).toBe(2);
-    expect(newState.activeFileId).toBe('file2'); // switches to the next available tab
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(2);
+    expect(newState.pane.activeFileId).toBe('file2'); // switches to the next available tab
   });
 
   it('Closes multiple tabs at once', () => {
@@ -171,7 +186,8 @@ describe('closeTabsReducer', () => {
       action,
     );
 
-    expect(newState.tabList.length).toBe(1);
-    expect(newState.activeFileId).toBe('file3'); // switches to the next available tab
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(1);
+    expect(newState.pane.activeFileId).toBe('file3'); // switches to the next available tab
   });
 });