vzcode 1.10.0 → 1.12.0

package/src/client/VZSidebar/index.tsx

@@ -35,21 +35,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,
@@ -135,8 +188,9 @@ export const VZSidebar = ({
             }
           >
             <i
-              onClick={() => setIsSearchOpen(false)}
+              id="files-icon"
               className="icon-button icon-button-dark"
+              onClick={() => setIsSearchOpen(false)}
             >
               <FolderSVG />
             </i>
@@ -151,8 +205,9 @@ export const VZSidebar = ({
             }
           >
             <i
-              onClick={() => setIsSearchOpen(true)}
+              id="search-icon"
               className="icon-button icon-button-dark"
+              onClick={() => setIsSearchOpen(true)}
             >
               <SearchSVG />
             </i>
@@ -167,8 +222,9 @@ export const VZSidebar = ({
             }
           >
             <i
-              onClick={handleQuestionMarkClick}
+              id="shortcut-icon"
               className="icon-button icon-button-dark"
+              onClick={handleQuestionMarkClick}
             >
               <QuestionMarkSVG />
             </i>
@@ -187,7 +243,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 +261,9 @@ export const VZSidebar = ({
             }
           >
             <i
-              onClick={handleSettingsClick}
+              id="settings-icon"
               className="icon-button icon-button-dark"
+              onClick={handleSettingsClick}
             >
               <GearSVG />
             </i>
@@ -218,8 +278,9 @@ export const VZSidebar = ({
             }
           >
             <i
-              onClick={handleOpenCreateFileModal}
+              id="new-file-icon"
               className="icon-button icon-button-dark"
+              onClick={handleOpenCreateFileModal}
             >
               <NewSVG />
             </i>
@@ -235,8 +296,9 @@ export const VZSidebar = ({
             }
           >
             <i
-              onClick={handleOpenCreateDirModal}
+              id="new-directory-icon"
               className="icon-button icon-button-dark"
+              onClick={handleOpenCreateDirModal}
             >
               <FileSVG />
             </i>
@@ -248,18 +310,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/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

@@ -4,10 +4,11 @@ import {
   FileId,
   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 +114,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) => {
@@ -175,6 +183,7 @@ export const useActions = (
     setSearch,
     setSearchResults,
     setSearchFileVisibility,
+    toggleSearchFocused,
     setIsSettingsOpen,
     setIsDocOpen,
     closeSettings,

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
   });
 });

package/src/client/vzReducer/closeTabsReducer.ts

@@ -1,5 +1,12 @@
-import { TabState, VZAction, VZState } from '.';
-import { FileId } from '../../types';
+import { VZAction, VZState } from '.';
+import {
+  FileId,
+  Pane,
+  PaneId,
+  TabState,
+} from '../../types';
+import { findPane } from './findPane';
+import { updatePane } from './updatePane';
 
 export const closeTabsReducer = (
   state: VZState,
@@ -9,35 +16,56 @@ export const closeTabsReducer = (
     return state;
   }
 
-  const newTabList: Array<TabState> = state.tabList.filter(
-    (tabState) =>
-      !action.fileIdsToClose.includes(tabState.fileId),
-  );
+  const { pane, activePaneId } = state;
+  const activePane: Pane = findPane(pane, activePaneId);
+
+  if (activePane.type !== 'leafPane') {
+    throw new Error(
+      'closeTabsReducer: activePane is not a leafPane',
+    );
+  }
+
+  // Derive the new tab list by filtering out the tabs to close.
+  const newTabList: Array<TabState> =
+    activePane.tabList.filter(
+      (tabState) =>
+        !action.fileIdsToClose.includes(tabState.fileId),
+    );
 
   // If the active tab wasn't closed, keep it active.
   if (
-    !action.fileIdsToClose.includes(state.activeFileId!)
+    !action.fileIdsToClose.includes(
+      activePane.activeFileId!,
+    )
   ) {
     return {
       ...state,
-      tabList: newTabList,
+      pane: updatePane({
+        pane,
+        activePaneId,
+        newTabList,
+      }),
     };
   }
 
-  const originalIndex = state.tabList.findIndex(
-    (tabState) => tabState.fileId === state.activeFileId,
-  );
-
+  // Otherwise, we'll need to also find a new active tab.
   let newActiveFileId: FileId | null = null;
 
+  // The question becomes: which tab should be active now?
+  // - Either the tab to the left or right of the closed tab.
+
   // Try getting the previous available tab first.
+  const originalIndex = activePane.tabList.findIndex(
+    (tabState) =>
+      tabState.fileId === activePane.activeFileId,
+  );
   for (let i = originalIndex - 1; i >= 0; i--) {
     if (
       !action.fileIdsToClose.includes(
-        state.tabList[i].fileId,
+        activePane.tabList[i].fileId,
       )
     ) {
-      newActiveFileId = state.tabList[i].fileId;
+      newActiveFileId = activePane.tabList[i].fileId;
       break;
     }
   }
@@ -46,15 +74,15 @@ export const closeTabsReducer = (
   if (!newActiveFileId) {
     for (
       let i = originalIndex + 1;
-      i < state.tabList.length;
+      i < activePane.tabList.length;
       i++
     ) {
       if (
         !action.fileIdsToClose.includes(
-          state.tabList[i].fileId,
+          activePane.tabList[i].fileId,
         )
       ) {
-        newActiveFileId = state.tabList[i].fileId;
+        newActiveFileId = activePane.tabList[i].fileId;
         break;
       }
     }
@@ -62,7 +90,11 @@ export const closeTabsReducer = (
 
   return {
     ...state,
-    tabList: newTabList,
-    activeFileId: newActiveFileId,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newTabList,
+      newActiveFileId,
+    }),
   };
 };

package/src/client/vzReducer/createInitialState.ts

@@ -9,10 +9,15 @@ export const createInitialState = ({
   defaultTheme: ThemeLabel;
   initialUsername?: Username;
 }): VZState => ({
-  tabList: [],
-  activeFileId: null,
+  pane: {
+    id: 'root',
+    type: 'leafPane',
+    tabList: [],
+    activeFileId: null,
+  },
+  activePaneId: 'root',
   theme: defaultTheme,
-  search: { pattern: '', results: {} },
+  search: { pattern: '', results: {}, focused: false },
   isSearchOpen: false,
   isSettingsOpen: false,
   isDocOpen: false,

package/src/client/vzReducer/findPane.ts

@@ -0,0 +1,19 @@
+import { Pane, PaneId } from '../../types';
+
+// Recursively finds a pane by id, given a root pane node.
+export const findPane = (
+  pane: Pane,
+  paneId: PaneId,
+): Pane => {
+  if (pane.id === paneId) {
+    return pane;
+  }
+  if (pane.type === 'splitPane') {
+    for (const child of pane.children) {
+      const foundPane = findPane(child, paneId);
+      if (foundPane) {
+        return foundPane;
+      }
+    }
+  }
+};