vzcode 1.5.0 → 1.7.0

package/src/client/VZSidebar/styles.scss

@@ -7,20 +7,26 @@
   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;
+    margin-top: 6px;
     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,9 +36,9 @@
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
-    margin: 0 10px;
+    margin: 0 6px;
     padding: 0 4px 0 8px;
-    border-radius: 4px;
+    border-radius: 8px;
     font-family: var(--vzcode-font-family);
     font-weight: 500;
   }
@@ -46,14 +52,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;
+    gap: 6px;
+    padding: 6px;
+
     a {
       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 +174,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) => {
@@ -102,6 +158,12 @@ export const useActions = (
     [dispatch],
   );
 
+  const toggleAutoFollow = useCallback(() => {
+    dispatch({
+      type: 'toggle_auto_follow',
+    });
+  }, [dispatch]);
+
   return {
     setActiveFileId,
     setActiveFileLeft,
@@ -109,11 +171,16 @@ export const useActions = (
     openTab,
     closeTabs,
     setTheme,
+    setIsSearchOpen,
+    setSearch,
+    setSearchResults,
+    setSearchFileVisibility,
     setIsSettingsOpen,
     setIsDocOpen,
     closeSettings,
     closeDoc,
     editorNoLongerWantsFocus,
     setUsername,
+    toggleAutoFollow,
   };
 };

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,13 @@ import { setIsDocOpenReducer } from './setIsDocOpenReducer';
 import { setThemeReducer } from './setThemeReducer';
 import { editorNoLongerWantsFocusReducer } from './editorNoLongerWantsFocusReducer';
 import { setUsernameReducer } from './setUsernameReducer';
-
+import {
+  setIsSearchOpenReducer,
+  setSearchReducer,
+  setSearchResultsReducer,
+  setSearchFileVisibilityReducer,
+} from './searchReducer';
+import { toggleAutoFollowReducer } from './toggleAutoFollowReducer';
 export { createInitialState } from './createInitialState';
 
 // The shape of the state managed by the reducer.
@@ -27,6 +40,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;
 
@@ -37,6 +56,11 @@ export type VZState = {
 
   // The username of the current user.
   username: Username;
+
+  // True if "auto-follow" is enabled.
+  // This is a feature that automatically scrolls the editor to the
+  // currently active remote user's cursor position.
+  enableAutoFollow: boolean;
 };
 
 // The shape of the actions that can be dispatched to the reducer.
@@ -73,13 +97,41 @@ 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' }
 
   // `set_username`
   //  * Sets the username.
-  | { type: 'set_username'; username: Username };
+  | { type: 'set_username'; username: Username }
+
+  // `toggle_auto_follow
+  //  * Toggles the auto-follow feature.
+  | { type: 'toggle_auto_follow' };
 
 // Representation of an open tab.
 export type TabState = {
@@ -107,10 +159,15 @@ const reducers = [
   openTabReducer,
   closeTabsReducer,
   setThemeReducer,
+  setSearchReducer,
+  setSearchResultsReducer,
+  setSearchFileVisibilityReducer,
+  setIsSearchOpenReducer,
   setIsSettingsOpenReducer,
   setIsDocOpenReducer,
   editorNoLongerWantsFocusReducer,
   setUsernameReducer,
+  toggleAutoFollowReducer,
 ];
 
 export const vzReducer = (

package/src/client/vzReducer/searchReducer.ts

@@ -0,0 +1,114 @@
+import { VZAction, VZState } from '.';
+import {
+  SearchFile,
+  SearchFileVisibility,
+  SearchResult,
+  ShareDBDoc,
+  VZCodeContent,
+} from '../../types';
+
+function searchPattern(
+  shareDBDoc: ShareDBDoc<VZCodeContent>,
+  pattern: string,
+): SearchResult {
+  const files = shareDBDoc.data.files;
+  const fileIds = Object.keys(shareDBDoc.data.files);
+  let results: { [id: string]: SearchFile } = {};
+
+  for (let i = 0; i < fileIds.length; i++) {
+    const file = files[fileIds[i]];
+
+    if (files[fileIds[i]].text) {
+      const fileName = file.name;
+      const lines = file.text.split('\n');
+      const matches = [];
+
+      for (let j = 0; j < lines.length; j++) {
+        const index = lines[j].indexOf(pattern);
+
+        if (index !== -1) {
+          matches.push({
+            line: j + 1,
+            index: index,
+            text: lines[j],
+          });
+        }
+      }
+
+      if (matches.length > 0) {
+        results[fileIds[i]] = {
+          name: fileName,
+          matches: matches,
+          visibility: 'open',
+        };
+      }
+    }
+  }
+
+  return results;
+}
+
+function updateSearchFileVisibility(
+  results: SearchResult,
+  id: string,
+  visibility: SearchFileVisibility,
+): SearchResult {
+  return {
+    ...results,
+    [id]: { ...results[id], visibility: visibility },
+  };
+}
+
+export const setIsSearchOpenReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_is_search_open'
+    ? { ...state, isSearchOpen: action.value }
+    : state;
+
+export const setSearchReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_search'
+    ? {
+        ...state,
+        search: { pattern: action.value, results: {} },
+      }
+    : state;
+
+export const setSearchResultsReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_search_results'
+    ? {
+        ...state,
+        search: {
+          pattern: state.search.pattern,
+          results: searchPattern(
+            action.files,
+            state.search.pattern,
+          ),
+        },
+      }
+    : state;
+
+export const setSearchFileVisibilityReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_search_file_visibility'
+    ? {
+        ...state,
+        search: {
+          pattern: state.search.pattern,
+          results: updateSearchFileVisibility(
+            state.search.results,
+            action.id,
+            action.visibility,
+          ),
+        },
+      }
+    : state;

package/src/client/vzReducer/toggleAutoFollowReducer.ts

@@ -0,0 +1,12 @@
+import { VZAction, VZState } from '.';
+
+export const toggleAutoFollowReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'toggle_auto_follow'
+    ? {
+        ...state,
+        enableAutoFollow: !state.enableAutoFollow,
+      }
+    : state;

package/src/types.ts

@@ -61,6 +61,26 @@ export interface FileTreeFile {
   file: File;
   fileId: FileId;
 }
+export type SearchMatch = Array<{
+  line: number;
+  index: number;
+  text: string;
+}>;
+export type SearchFileVisibility =
+  | 'open'
+  | 'flattened'
+  | 'closed';
+export type SearchResult = { [id: string]: SearchFile };
+
+export interface SearchFile {
+  name: string;
+  matches: SearchMatch;
+  visibility: SearchFileVisibility;
+}
+export interface SearchResults {
+  pattern: string;
+  results: SearchResult;
+}
 
 export type JSONOp = any;