vzcode 0.88.0 → 1.0.0

package/src/client/VZSidebar/index.tsx

@@ -1,9 +1,4 @@
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-} from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import {
   FileId,
   FileTree,
@@ -12,11 +7,16 @@ import {
 import { Tooltip, OverlayTrigger } from '../bootstrap';
 import { getFileTree } from '../getFileTree';
 import { sortFileTree } from '../sortFileTree';
-import { disableSettings } from '../featureFlags';
 import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
-import { BugSVG, GearSVG, NewSVG, FileSVG } from '../Icons';
-import { Listing } from './Listing';
+import {
+  BugSVG,
+  GearSVG,
+  NewSVG,
+  FileSVG,
+  QuestionMarkSVG,
+} from '../Icons';
 import { VZCodeContext } from '../VZCodeContext';
+import { Listing } from './Listing';
 import { useDragAndDrop } from './useDragAndDrop';
 import './styles.scss';
 
@@ -29,24 +29,20 @@ export const VZSidebar = ({
   createFileTooltipText = 'New File',
   createDirTooltipText = 'New Directory',
   openSettingsTooltipText = 'Open Settings',
+  openKeyboardShortcuts = 'Keyboard Shortcuts',
   reportBugTooltipText = 'Report Bug',
 }: {
   createFileTooltipText?: string;
   createDirTooltipText?: string;
   openSettingsTooltipText?: string;
   reportBugTooltipText?: string;
+  openKeyboardShortcuts?: string;
 }) => {
   const {
     files,
-    renameFile,
-    deleteFile,
-    renameDirectory,
-    deleteDirectory,
-    activeFileId,
     openTab,
     setIsSettingsOpen,
-    isDirectoryOpen,
-    toggleDirectory,
+    setIsDocOpen,
     handleOpenCreateFileModal,
     handleOpenCreateDirModal,
     connected,
@@ -56,7 +52,9 @@ export const VZSidebar = ({
     () => (files ? sortFileTree(getFileTree(files)) : null),
     [files],
   );
-
+  const handleQuestionMarkClick = useCallback(() => {
+    setIsDocOpen(true);
+  }, []);
   const handleSettingsClick = useCallback(() => {
     setIsSettingsOpen(true);
   }, []);
@@ -106,12 +104,26 @@ export const VZSidebar = ({
     >
       <div className="files">
         <div className="full-box">
-          <div className="sidebar-section-hint">
-            Project Files
-          </div>
+          <div className="sidebar-section-hint">Files</div>
           <div className="sidebar-section-buttons">
             <OverlayTrigger
-              placement="left"
+              placement="right"
+              overlay={
+                <Tooltip id="open-keyboard-shortcuts">
+                  {openKeyboardShortcuts}
+                </Tooltip>
+              }
+            >
+              <i
+                onClick={handleQuestionMarkClick}
+                className="icon-button icon-button-dark"
+              >
+                <QuestionMarkSVG />
+              </i>
+            </OverlayTrigger>
+
+            <OverlayTrigger
+              placement="right"
               overlay={
                 <Tooltip id="report-bug-tooltip">
                   {reportBugTooltipText}
@@ -128,23 +140,23 @@ export const VZSidebar = ({
                 </i>
               </a>
             </OverlayTrigger>
-            {disableSettings ? null : (
-              <OverlayTrigger
-                placement="left"
-                overlay={
-                  <Tooltip id="open-settings-tooltip">
-                    {openSettingsTooltipText}
-                  </Tooltip>
-                }
+
+            <OverlayTrigger
+              placement="left"
+              overlay={
+                <Tooltip id="open-settings-tooltip">
+                  {openSettingsTooltipText}
+                </Tooltip>
+              }
+            >
+              <i
+                onClick={handleSettingsClick}
+                className="icon-button icon-button-dark"
               >
-                <i
-                  onClick={handleSettingsClick}
-                  className="icon-button icon-button-dark"
-                >
-                  <GearSVG />
-                </i>
-              </OverlayTrigger>
-            )}
+                <GearSVG />
+              </i>
+            </OverlayTrigger>
+
             <OverlayTrigger
               placement="left"
               overlay={

package/src/client/index.ts

@@ -4,6 +4,7 @@ export type { EditorCache } from './useEditorCache';
 export { VZCodeProvider } from './VZCodeContext';
 export { VZSidebar } from './VZSidebar';
 export { VZSettings } from './VZSettings';
+export { VZKeyboardShortcutsDoc } from './VZKeyboardShortcutsDoc';
 export { VZResizer } from './VZResizer';
 export { VZLeft } from './VZLeft';
 export { VZMiddle } from './VZMiddle';

package/src/client/useActions.ts

@@ -68,10 +68,24 @@ export const useActions = (
     [dispatch],
   );
 
+  const setIsDocOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_is_doc_open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
+
   const closeSettings = useCallback(() => {
     setIsSettingsOpen(false);
   }, [setIsSettingsOpen]);
 
+  const closeDoc = useCallback(() => {
+    setIsDocOpen(false);
+  }, [setIsDocOpen]);
+
   const editorNoLongerWantsFocus = useCallback(() => {
     dispatch({
       type: 'editor_no_longer_wants_focus',
@@ -96,7 +110,9 @@ export const useActions = (
     closeTabs,
     setTheme,
     setIsSettingsOpen,
+    setIsDocOpen,
     closeSettings,
+    closeDoc,
     editorNoLongerWantsFocus,
     setUsername,
   };

package/src/client/vzReducer/createInitialState.ts

@@ -13,6 +13,7 @@ export const createInitialState = ({
   activeFileId: null,
   theme: defaultTheme,
   isSettingsOpen: false,
+  isDocOpen: false,
   editorWantsFocus: false,
   username: initialUsername,
 });

package/src/client/vzReducer/index.ts

@@ -8,6 +8,7 @@ import {
   setActiveFileRightReducer,
 } from './setActiveFileLeftRightReducer';
 import { setIsSettingsOpenReducer } from './setIsSettingsOpenReducer';
+import { setIsDocOpenReducer } from './setIsDocOpenReducer';
 import { setThemeReducer } from './setThemeReducer';
 import { editorNoLongerWantsFocusReducer } from './editorNoLongerWantsFocusReducer';
 import { setUsernameReducer } from './setUsernameReducer';
@@ -29,6 +30,8 @@ export type VZState = {
   // True to show the settings modal.
   isSettingsOpen: boolean;
 
+  isDocOpen: boolean;
+
   // True if the editor should focus on the next render.
   editorWantsFocus: boolean;
 
@@ -68,6 +71,7 @@ export type VZAction =
   // `set_is_settings_open`
   //  * Sets whether the settings modal is open.
   | { type: 'set_is_settings_open'; value: boolean }
+  | { type: 'set_is_doc_open'; value: boolean }
 
   // `editor_no_longer_wants_focus`
   //  * Sets `editorWantsFocus` to `false`.
@@ -104,6 +108,7 @@ const reducers = [
   closeTabsReducer,
   setThemeReducer,
   setIsSettingsOpenReducer,
+  setIsDocOpenReducer,
   editorNoLongerWantsFocusReducer,
   setUsernameReducer,
 ];

package/src/client/vzReducer/setIsDocOpenReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const setIsDocOpenReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_is_doc_open'
+    ? { ...state, isDocOpen: action.value }
+    : state;