vzcode 2.3.0 → 2.4.0

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

@@ -0,0 +1,292 @@
+import { describe, expect, it } from 'vitest';
+import { setSearchResultsReducer } from './searchReducer';
+import { VZAction, VZState, createInitialState } from '.';
+import { defaultTheme } from '../themes';
+import { ShareDBDoc } from '../../types';
+import { VizContent } from '@vizhub/viz-types';
+
+// Mock ShareDBDoc for testing
+const createMockShareDBDoc = (
+  files: any,
+): ShareDBDoc<VizContent> => ({
+  data: { files, id: 'mock-id' },
+  ingestSnapshot: (snapshot: any, callback: any) => {
+    // No-op for testing
+    if (callback) callback();
+  },
+  subscribe: (callback: any) => {
+    // No-op for testing
+    if (callback) callback();
+  },
+  on: (
+    event: string,
+    callback: (op: any, source: boolean) => void,
+  ) => {
+    // No-op for testing
+  },
+  off: (
+    event: string,
+    callback: (op: any, source: boolean) => void,
+  ) => {
+    // No-op for testing
+  },
+  removeListener: (
+    event: string,
+    callback: (op: any, source: boolean) => void,
+  ) => {
+    // No-op for testing
+  },
+  submitOp: (
+    op: any,
+    options?: any,
+    callback?: () => void,
+  ) => {
+    // No-op for testing
+    if (callback) callback();
+  },
+  whenNothingPending: (callback: () => void) => {
+    // No-op for testing
+    if (callback) callback();
+  },
+});
+
+const initialState: VZState = createInitialState({
+  defaultTheme,
+});
+
+describe('searchReducer', () => {
+  describe('setSearchResultsReducer', () => {
+    it('should find case-insensitive matches', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const Hello = "world";\nconst goodbye = "HELLO";',
+        },
+        'file2.js': {
+          name: 'file2.js',
+          text: 'function hello() {\n  return "Hello World";\n}',
+        },
+      };
+
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'hello', // lowercase search pattern
+        },
+      };
+
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+
+      // Should find matches in both files despite different cases
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(2);
+
+      // Check file1.js results
+      const file1Results =
+        newState.search.results['file1.js'];
+      expect(file1Results).toBeDefined();
+      expect(file1Results.matches).toHaveLength(2); // "Hello" and "HELLO"
+      expect(file1Results.matches[0].line).toBe(1);
+      expect(file1Results.matches[0].index).toBe(6); // position of "Hello"
+      expect(file1Results.matches[1].line).toBe(2);
+      expect(file1Results.matches[1].index).toBe(17); // position of "HELLO"
+
+      // Check file2.js results
+      const file2Results =
+        newState.search.results['file2.js'];
+      expect(file2Results).toBeDefined();
+      expect(file2Results.matches).toHaveLength(2); // "hello" and "Hello"
+      expect(file2Results.matches[0].line).toBe(1);
+      expect(file2Results.matches[0].index).toBe(9); // position of "hello"
+      expect(file2Results.matches[1].line).toBe(2);
+      expect(file2Results.matches[1].index).toBe(10); // position of "Hello"
+    });
+
+    it('should find exact case matches', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const hello = "world";',
+        },
+      };
+
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'hello', // exact case match
+        },
+      };
+
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(1);
+      const file1Results =
+        newState.search.results['file1.js'];
+      expect(file1Results.matches).toHaveLength(1);
+      expect(file1Results.matches[0].line).toBe(1);
+      expect(file1Results.matches[0].index).toBe(6);
+    });
+
+    it('should not find matches when pattern does not exist', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const world = "test";',
+        },
+      };
+
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'hello',
+        },
+      };
+
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(0);
+    });
+
+    it('should handle uppercase search pattern', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const Hello = "world";\nfunction hello() {}',
+        },
+      };
+
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'HELLO', // uppercase search pattern
+        },
+      };
+
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(1);
+      const file1Results =
+        newState.search.results['file1.js'];
+      expect(file1Results.matches).toHaveLength(2); // Should find both "Hello" and "hello"
+    });
+
+    it('should handle mixed case search pattern', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const HeLLo = "world";\nconst hello = "test";\nconst HELLO = "end";',
+        },
+      };
+
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'HeLLo', // mixed case search pattern
+        },
+      };
+
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(1);
+      const file1Results =
+        newState.search.results['file1.js'];
+      expect(file1Results.matches).toHaveLength(3); // Should find all three variations
+    });
+
+    it('should skip files without text content', () => {
+      const mockFiles = {
+        'file1.js': {
+          name: 'file1.js',
+          text: 'const hello = "world";',
+        },
+        'file2.js': {
+          name: 'file2.js',
+          // no text property
+        },
+      };
+
+      const stateWithSearch = {
+        ...initialState,
+        search: {
+          ...initialState.search,
+          pattern: 'hello',
+        },
+      };
+
+      const action: VZAction = {
+        type: 'set_search_results',
+        files: createMockShareDBDoc(mockFiles),
+      };
+
+      const newState = setSearchResultsReducer(
+        stateWithSearch,
+        action,
+      );
+
+      // Should only find results in file1.js
+      expect(
+        Object.keys(newState.search.results),
+      ).toHaveLength(1);
+      expect(
+        newState.search.results['file1.js'],
+      ).toBeDefined();
+      expect(
+        newState.search.results['file2.js'],
+      ).toBeUndefined();
+    });
+  });
+});

package/src/client/vzReducer/searchReducer.ts

@@ -0,0 +1,181 @@
+import { VZAction, VZState } from '.';
+import {
+  SearchFile,
+  SearchFileVisibility,
+  SearchResult,
+  ShareDBDoc,
+} from '../../types';
+import { VizContent } from '@vizhub/viz-types';
+
+function searchPattern(
+  shareDBDoc: ShareDBDoc<VizContent>,
+  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]
+          .toLowerCase()
+          .indexOf(pattern.toLowerCase());
+
+        if (index !== -1) {
+          matches.push({
+            line: j + 1,
+            index: index,
+            text: lines[j],
+            isClosed: false,
+          });
+        }
+      }
+
+      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: {
+          ...state.search,
+          pattern: action.value,
+          results: {},
+          focusedIndex: 0,
+          focusedChildIndex: null,
+          focused: true,
+        },
+      }
+    : state;
+
+export const setSearchResultsReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_search_results'
+    ? {
+        ...state,
+        search: {
+          ...state.search,
+          pattern: state.search.pattern,
+          results: searchPattern(
+            action.files,
+            state.search.pattern,
+          ),
+          focused: state.search.focused,
+        },
+      }
+    : state;
+
+export const setSearchFileVisibilityReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_search_file_visibility'
+    ? {
+        ...state,
+        search: {
+          ...state.search,
+          pattern: state.search.pattern,
+          results: updateSearchFileVisibility(
+            state.search.results,
+            action.id,
+            action.visibility,
+          ),
+        },
+      }
+    : state;
+
+export const setSearchLineVisibilityReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'hide_search_results_line'
+    ? {
+        ...state,
+        search: {
+          ...state.search,
+          results: {
+            ...state.search.results,
+            [action.id]: {
+              ...state.search.results[action.id],
+              matches: state.search.results[
+                action.id
+              ].matches.filter(
+                (match, index) =>
+                  match.line !== action.line,
+              ),
+            },
+          },
+        },
+      }
+    : state;
+
+export const setSearchFocusedIndexReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_active_search_index'
+    ? {
+        ...state,
+        search: {
+          ...state.search,
+          focusedIndex: action.focusedIndex,
+          focusedChildIndex: action.childIndex,
+        },
+      }
+    : state;
+
+export const toggleSearchFocusedReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'toggle_search_focused'
+    ? {
+        ...state,
+        search: {
+          ...state.search,
+          focused: !state.search.focused,
+        },
+      }
+    : state;

package/src/client/vzReducer/setActiveFileIdReducer.ts

@@ -0,0 +1,28 @@
+import { VZAction, VZState } from '.';
+import { Pane } from '../../types';
+import { findPane } from './findPane';
+import { updatePane } from './updatePane';
+
+export const setActiveFileIdReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type !== 'set_active_file_id') return state;
+
+  const { pane, activePaneId } = state;
+  const activePane: Pane = findPane(pane, activePaneId);
+
+  if (activePane.type !== 'leafPane') {
+    throw new Error(
+      'closeTabsReducer: activePane is not a leafPane',
+    );
+  }
+  return {
+    ...state,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newActiveFileId: action.activeFileId,
+    }),
+  };
+};

package/src/client/vzReducer/setActiveFileLeftRightReducer.ts

@@ -0,0 +1,76 @@
+import { VZAction, VZState } from '.';
+import { Pane } from '../../types';
+import { findPane } from './findPane';
+import { updatePane } from './updatePane';
+
+export const setActiveFileLeftReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type !== 'set_active_file_left') {
+    return state;
+  }
+
+  const { pane, activePaneId } = state;
+  const activePane: Pane = findPane(pane, activePaneId);
+
+  if (activePane.type !== 'leafPane') {
+    throw new Error(
+      'closeTabsReducer: activePane is not a leafPane',
+    );
+  }
+
+  let index = activePane.tabList.findIndex(
+    (tab) => tab.fileId === activePane.activeFileId,
+  );
+
+  index -= 1;
+  if (index < 0) {
+    index = activePane.tabList.length - 1;
+  }
+
+  return {
+    ...state,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newActiveFileId: activePane.tabList[index].fileId,
+    }),
+  };
+};
+
+export const setActiveFileRightReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type !== 'set_active_file_right') {
+    return state;
+  }
+
+  const { pane, activePaneId } = state;
+  const activePane: Pane = findPane(pane, activePaneId);
+
+  if (activePane.type !== 'leafPane') {
+    throw new Error(
+      'closeTabsReducer: activePane is not a leafPane',
+    );
+  }
+
+  let index = activePane.tabList.findIndex(
+    (tab) => tab.fileId === activePane.activeFileId,
+  );
+
+  index += 1;
+  if (index > activePane.tabList.length - 1) {
+    index = 0;
+  }
+
+  return {
+    ...state,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newActiveFileId: activePane.tabList[index].fileId,
+    }),
+  };
+};

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;

package/src/client/vzReducer/setIsSettingsOpenReducer.ts

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

package/src/client/vzReducer/setThemeReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const setThemeReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_theme'
+    ? { ...state, theme: action.themeLabel }
+    : state;

package/src/client/vzReducer/setUsernameReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const setUsernameReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'set_username'
+    ? { ...state, username: action.username }
+    : state;

package/src/client/vzReducer/splitCurrentPaneReducer.ts

@@ -0,0 +1,66 @@
+import { PaneId, Pane } from '../../types';
+import { VZAction, VZState } from '.';
+import { updatePane } from './updatePane';
+
+export const splitCurrentPaneReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  // console.log('splitCurrentPaneReducer');
+  if (action.type !== 'split_current_pane') {
+    return state;
+  }
+
+  const activePaneId = state.activePaneId;
+
+  const newLeafPane1: Pane = {
+    id: `${activePaneId}-1`, // Generate unique IDs for new panes
+    type: 'leafPane',
+    tabList: [],
+    activeFileId: null,
+  };
+
+  const newLeafPane2: Pane = {
+    id: `${activePaneId}-2`,
+    type: 'leafPane',
+    tabList: [],
+    activeFileId: null,
+  };
+
+  const newSplitPane: Pane = {
+    id: activePaneId,
+    type: 'splitPane',
+    orientation: 'horizontal',
+    children: [newLeafPane1, newLeafPane2],
+  };
+
+  const updatedPane = updatePane({
+    pane: state.pane,
+    activePaneId,
+    newTabList: undefined,
+    newActiveFileId: undefined,
+  });
+
+  const updateSplitPane = (pane: Pane, id: PaneId): Pane =>
+    pane.id === id
+      ? newSplitPane
+      : pane.type === 'splitPane'
+        ? {
+            ...pane,
+            children: pane.children.map((child) =>
+              updateSplitPane(child, id),
+            ),
+          }
+        : pane;
+
+  const finalPane = updateSplitPane(
+    updatedPane,
+    activePaneId,
+  );
+
+  return {
+    ...state,
+    pane: finalPane,
+    activePaneId: newLeafPane1.id,
+  };
+};

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;