vzcode 1.5.0 → 1.6.0

package/src/client/VZSidebar/index.tsx

@@ -5,10 +5,13 @@ import {
   FileTreeFile,
 } from '../../types';
 import { Tooltip, OverlayTrigger } from '../bootstrap';
+import { Search } from './Search';
 import { getFileTree } from '../getFileTree';
 import { sortFileTree } from '../sortFileTree';
 import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import {
+  FolderSVG,
+  SearchSVG,
   BugSVG,
   GearSVG,
   NewSVG,
@@ -31,18 +34,24 @@ export const VZSidebar = ({
   openSettingsTooltipText = 'Open Settings',
   openKeyboardShortcuts = 'Keyboard Shortcuts',
   reportBugTooltipText = 'Report Bug',
+  searchToolTipText = 'Search',
+  filesToolTipText = 'Files',
 }: {
   createFileTooltipText?: string;
   createDirTooltipText?: string;
   openSettingsTooltipText?: string;
   reportBugTooltipText?: string;
   openKeyboardShortcuts?: string;
+  searchToolTipText?: string;
+  filesToolTipText?: string;
 }) => {
   const {
     files,
     openTab,
     setIsSettingsOpen,
     setIsDocOpen,
+    isSearchOpen,
+    setIsSearchOpen,
     handleOpenCreateFileModal,
     handleOpenCreateDirModal,
     connected,
@@ -103,126 +112,170 @@ export const VZSidebar = ({
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
-      <div className="files" ref={sidebarRef} tabIndex={-1}>
-        <div className="full-box">
-          <div className="sidebar-section-hint">Files</div>
-          <div className="sidebar-section-buttons">
-            <OverlayTrigger
-              placement="right"
-              overlay={
-                <Tooltip id="open-keyboard-shortcuts">
-                  {openKeyboardShortcuts}
-                </Tooltip>
-              }
+      <div
+        className="full-box"
+        ref={sidebarRef}
+        tabIndex={-1}
+      >
+        <div className="sidebar-section-buttons">
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="files-tooltip">
+                {filesToolTipText}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={() => setIsSearchOpen(false)}
+              className="icon-button icon-button-dark"
             >
-              <i
-                onClick={handleQuestionMarkClick}
-                className="icon-button icon-button-dark"
-              >
-                <QuestionMarkSVG />
-              </i>
-            </OverlayTrigger>
-
-            <OverlayTrigger
-              placement="right"
-              overlay={
-                <Tooltip id="report-bug-tooltip">
-                  {reportBugTooltipText}
-                </Tooltip>
-              }
+              <FolderSVG />
+            </i>
+          </OverlayTrigger>
+
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="search-tooltip">
+                {searchToolTipText}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={() => setIsSearchOpen(true)}
+              className="icon-button icon-button-dark"
             >
-              <a
-                href="https://github.com/vizhub-core/vzcode/issues/new"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <i className="icon-button icon-button-dark">
-                  <BugSVG />
-                </i>
-              </a>
-            </OverlayTrigger>
-
-            <OverlayTrigger
-              placement="left"
-              overlay={
-                <Tooltip id="open-settings-tooltip">
-                  {openSettingsTooltipText}
-                </Tooltip>
-              }
+              <SearchSVG />
+            </i>
+          </OverlayTrigger>
+
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="open-keyboard-shortcuts">
+                {openKeyboardShortcuts}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={handleQuestionMarkClick}
+              className="icon-button icon-button-dark"
             >
-              <i
-                onClick={handleSettingsClick}
-                className="icon-button icon-button-dark"
-              >
-                <GearSVG />
-              </i>
-            </OverlayTrigger>
-
-            <OverlayTrigger
-              placement="left"
-              overlay={
-                <Tooltip id="create-file-tooltip">
-                  {createFileTooltipText}
-                </Tooltip>
-              }
+              <QuestionMarkSVG />
+            </i>
+          </OverlayTrigger>
+
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="report-bug-tooltip">
+                {reportBugTooltipText}
+              </Tooltip>
+            }
+          >
+            <a
+              href="https://github.com/vizhub-core/vzcode/issues/new"
+              target="_blank"
+              rel="noopener noreferrer"
             >
-              <i
-                onClick={handleOpenCreateFileModal}
-                className="icon-button icon-button-dark"
-              >
-                <NewSVG />
+              <i className="icon-button icon-button-dark">
+                <BugSVG />
               </i>
-            </OverlayTrigger>
-
-            {/*Directory Rename*/}
-            <OverlayTrigger
-              placement="left"
-              overlay={
-                <Tooltip id="create-dir-tooltip">
-                  {createDirTooltipText}
-                </Tooltip>
-              }
+            </a>
+          </OverlayTrigger>
+
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="open-settings-tooltip">
+                {openSettingsTooltipText}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={handleSettingsClick}
+              className="icon-button icon-button-dark"
             >
-              <i
-                onClick={handleOpenCreateDirModal}
-                className="icon-button icon-button-dark"
-              >
-                <FileSVG />
-              </i>
-            </OverlayTrigger>
-          </div>
+              <GearSVG />
+            </i>
+          </OverlayTrigger>
+
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="create-file-tooltip">
+                {createFileTooltipText}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={handleOpenCreateFileModal}
+              className="icon-button icon-button-dark"
+            >
+              <NewSVG />
+            </i>
+          </OverlayTrigger>
+
+          {/*Directory Rename*/}
+          <OverlayTrigger
+            placement="right"
+            overlay={
+              <Tooltip id="create-dir-tooltip">
+                {createDirTooltipText}
+              </Tooltip>
+            }
+          >
+            <i
+              onClick={handleOpenCreateDirModal}
+              className="icon-button icon-button-dark"
+            >
+              <FileSVG />
+            </i>
+          </OverlayTrigger>
         </div>
-        {isDragOver ? (
-          <div className="empty">
-            <div className="empty-text">
-              Drop files here!
+
+        <div className="files">
+          {!isSearchOpen ? (
+            <div className="sidebar-files">
+              {isDragOver ? (
+                <div className="empty">
+                  <div className="empty-text">
+                    Drop files here!
+                  </div>
+                </div>
+              ) : 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}
+                      handleFileClick={handleFileClick}
+                      handleFileDoubleClick={
+                        handleFileDoubleClick
+                      }
+                    />
+                  );
+                })
+              ) : (
+                <div className="empty">
+                  <div className="empty-text">
+                    It looks like you don't have any files
+                    yet! Click the "Create file" button
+                    above to create your first file.
+                  </div>
+                </div>
+              )}
             </div>
-          </div>
-        ) : 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}
-                handleFileClick={handleFileClick}
-                handleFileDoubleClick={
-                  handleFileDoubleClick
-                }
-              />
-            );
-          })
-        ) : (
-          <div className="empty">
-            <div className="empty-text">
-              It looks like you don't have any files yet!
-              Click the "Create file" button above to create
-              your first file.
+          ) : (
+            <div className="sidebar-search">
+              <Search />
             </div>
-          </div>
-        )}
+          )}
+        </div>
       </div>
 
       {enableConnectionStatus && (

package/src/client/VZSidebar/styles.scss

@@ -7,20 +7,25 @@
   justify-content: space-between;
 
   .full-box {
-    padding: 4px;
+    width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
+    justify-content: start;
+    align-items: start;
     border-bottom: 2px solid var(--vh-color-neutral-02);
+    overflow: hidden;
   }
 
   .files {
-    overflow: auto;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: start;
+    align-items: start;
     flex: 1;
     outline: none;
+    overflow: auto;
+    height: 100%;
   }
 
   .file-or-directory {
@@ -30,8 +35,8 @@
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
-    margin: 0 10px;
-    padding: 0 4px 0 8px;
+    margin: 0 8px;
+    padding: 0 4px 0 6px;
     border-radius: 4px;
     font-family: var(--vzcode-font-family);
     font-weight: 500;
@@ -46,14 +51,100 @@
   }
 
   .sidebar-section-buttons {
+    border-right: 2px solid var(--vh-color-neutral-02);
+    height: 100%;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     align-items: center;
-    a {
+    gap: 6px;
+    padding: 6px;
+
+    * {
+      color: inherit;
+    }
+  }
+
+  .sidebar-files,
+  .sidebar-search {
+    width: 100%;
+  }
+
+  .sidebar-search {
+    padding: 10px;
+
+    * {
       color: inherit;
     }
   }
 
+  .search-result-lines {
+    margin-top: 10px;
+    margin-left: 20px;
+  }
+
+  .search-file-heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    * {
+      margin: 0px;
+    }
+  }
+
+  .search-file-title,
+  .search-file-name,
+  .search-file-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .search-file-name {
+    font-size: inherit;
+  }
+
+  .search-file-count {
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0px;
+    font-size: 12px;
+    font-weight: bold;
+    text-align: center;
+    background: var(--vh-color-neutral-04);
+    color: var(--vh-color-neutral-01);
+    border-radius: 100%;
+  }
+
+  .search-results {
+    padding: 10px;
+  }
+
+  .search-file-lines {
+    font-size: inherit;
+    margin: 15px 0px 0px 30px;
+  }
+
+  .search-line,
+  .arrow-wrapper,
+  .search-file-close {
+    &:hover {
+      opacity: 0.7;
+      cursor: pointer;
+    }
+  }
+
+  .search-file-lines .search-pattern {
+    background: var(--vh-color-neutral-04);
+    color: var(--vh-color-neutral-01);
+    margin: 0.5px;
+    padding: 1px;
+  }
+
   .new-btn {
     justify-content: right;
     margin-right: 10px;
@@ -82,7 +173,7 @@
     align-items: center;
     white-space: nowrap;
     overflow: hidden;
-    gap: 8px;
+    gap: 6px;
     .file-icon,
     .arrow-wrapper {
       opacity: 0.5;

package/src/client/useActions.ts

@@ -1,6 +1,12 @@
 import { useCallback } from 'react';
 import { ThemeLabel } from './themes';
-import { FileId, Username } from '../types';
+import {
+  FileId,
+  SearchFileVisibility,
+  ShareDBDoc,
+  Username,
+  VZCodeContent,
+} from '../types';
 import { TabState, VZAction } from './vzReducer';
 
 // This is a custom hook that returns a set of functions
@@ -57,6 +63,56 @@ export const useActions = (
     [dispatch],
   );
 
+  // True to show the settings modal.
+  const setIsSearchOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_is_search_open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
+
+  // Update search pattern
+  const setSearch = useCallback(
+    (pattern: string) => {
+      dispatch({
+        type: 'set_search',
+        value: pattern,
+      });
+    },
+    [dispatch],
+  );
+
+  // Update search results based on current pattern
+  const setSearchResults = useCallback(
+    (files: ShareDBDoc<VZCodeContent>) => {
+      dispatch({
+        type: 'set_search_results',
+        files: files,
+      });
+    },
+    [dispatch],
+  );
+
+  // Update search results file visibility based on current pattern
+  const setSearchFileVisibility = useCallback(
+    (
+      files: ShareDBDoc<VZCodeContent>,
+      id: string,
+      visibility: SearchFileVisibility,
+    ) => {
+      dispatch({
+        type: 'set_search_file_visibility',
+        files: files,
+        id: id,
+        visibility: visibility,
+      });
+    },
+    [dispatch],
+  );
+
   // True to show the settings modal.
   const setIsSettingsOpen = useCallback(
     (value: boolean) => {
@@ -109,6 +165,10 @@ export const useActions = (
     openTab,
     closeTabs,
     setTheme,
+    setIsSearchOpen,
+    setSearch,
+    setSearchResults,
+    setSearchFileVisibility,
     setIsSettingsOpen,
     setIsDocOpen,
     closeSettings,

package/src/client/useFileCRUD.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import {
   FileId,
   FileTreePath,

package/src/client/vzReducer/createInitialState.ts

@@ -12,6 +12,8 @@ export const createInitialState = ({
   tabList: [],
   activeFileId: null,
   theme: defaultTheme,
+  search: { pattern: '', results: {} },
+  isSearchOpen: false,
   isSettingsOpen: false,
   isDocOpen: false,
   editorWantsFocus: false,

package/src/client/vzReducer/index.ts

@@ -1,4 +1,11 @@
-import { FileId, Username } from '../../types';
+import {
+  FileId,
+  SearchFileVisibility,
+  SearchResults,
+  ShareDBDoc,
+  Username,
+  VZCodeContent,
+} from '../../types';
 import { ThemeLabel } from '../themes';
 import { closeTabsReducer } from './closeTabsReducer';
 import { openTabReducer } from './openTabReducer';
@@ -12,7 +19,12 @@ import { setIsDocOpenReducer } from './setIsDocOpenReducer';
 import { setThemeReducer } from './setThemeReducer';
 import { editorNoLongerWantsFocusReducer } from './editorNoLongerWantsFocusReducer';
 import { setUsernameReducer } from './setUsernameReducer';
-
+import {
+  setIsSearchOpenReducer,
+  setSearchReducer,
+  setSearchResultsReducer,
+  setSearchFileVisibilityReducer,
+} from './searchReducer';
 export { createInitialState } from './createInitialState';
 
 // The shape of the state managed by the reducer.
@@ -27,6 +39,12 @@ export type VZState = {
   // The theme that is currently active.
   theme: ThemeLabel;
 
+  // Search pattern and most recent results based on the current pattern
+  search: SearchResults;
+
+  // True to show the search instead of files
+  isSearchOpen: boolean;
+
   // True to show the settings modal.
   isSettingsOpen: boolean;
 
@@ -73,6 +91,30 @@ export type VZAction =
   | { type: 'set_is_settings_open'; value: boolean }
   | { type: 'set_is_doc_open'; value: boolean }
 
+  // `set_is_search_open`
+  //  * Sets whether the search tab is open.
+  | { type: 'set_is_search_open'; value: boolean }
+
+  // `set_search`
+  //  * Sets the current search pattern
+  | { type: 'set_search'; value: string }
+
+  // `set_search_results`
+  //  * Sets the current search pattern
+  | {
+      type: 'set_search_results';
+      files: ShareDBDoc<VZCodeContent>;
+    }
+
+  // `set_search_results_visibility`
+  //  * Sets the visibility of a current search pattern file
+  | {
+      type: 'set_search_file_visibility';
+      files: ShareDBDoc<VZCodeContent>;
+      id: string;
+      visibility: SearchFileVisibility;
+    }
+
   // `editor_no_longer_wants_focus`
   //  * Sets `editorWantsFocus` to `false`.
   | { type: 'editor_no_longer_wants_focus' }
@@ -107,6 +149,10 @@ const reducers = [
   openTabReducer,
   closeTabsReducer,
   setThemeReducer,
+  setSearchReducer,
+  setSearchResultsReducer,
+  setSearchFileVisibilityReducer,
+  setIsSearchOpenReducer,
   setIsSettingsOpenReducer,
   setIsDocOpenReducer,
   editorNoLongerWantsFocusReducer,