vzcode 2.3.0 → 2.4.0

package/src/client/vzReducer/index.ts

@@ -0,0 +1,250 @@
+import {
+  Pane,
+  PaneId,
+  PresenceIndicator,
+  SearchFileVisibility,
+  SearchResults,
+  ShareDBDoc,
+  Username,
+} from '../../types';
+import { VizFileId, VizContent } from '@vizhub/viz-types';
+import { ThemeLabel } from '../themes';
+import { closeTabsReducer } from './closeTabsReducer';
+import { openTabReducer } from './openTabReducer';
+import { setActiveFileIdReducer } from './setActiveFileIdReducer';
+import {
+  setActiveFileLeftReducer,
+  setActiveFileRightReducer,
+} from './setActiveFileLeftRightReducer';
+import { setIsSettingsOpenReducer } from './setIsSettingsOpenReducer';
+import { setIsDocOpenReducer } from './setIsDocOpenReducer';
+import { setThemeReducer } from './setThemeReducer';
+import { editorNoLongerWantsFocusReducer } from './editorNoLongerWantsFocusReducer';
+import { setUsernameReducer } from './setUsernameReducer';
+import {
+  setIsSearchOpenReducer,
+  setSearchReducer,
+  setSearchResultsReducer,
+  setSearchFileVisibilityReducer,
+  setSearchLineVisibilityReducer,
+  setSearchFocusedIndexReducer,
+  toggleSearchFocusedReducer,
+} from './searchReducer';
+import {
+  setIsAIChatOpenReducer,
+  toggleAIChatFocusedReducer,
+  setAIChatModeReducer,
+} from './aiChatReducer';
+import { toggleAutoFollowReducer } from './toggleAutoFollowReducer';
+import { updatePresenceIndicatorReducer } from './updatePresenceIndicatorReducer';
+import { splitCurrentPaneReducer } from './splitCurrentPaneReducer';
+import { setIsVisualEditorOpenReducer } from './visualEditorReducer';
+export { createInitialState } from './createInitialState';
+
+// The shape of the state managed by the reducer.
+export type VZState = {
+  // The state of the split pane (tree data structure).
+  pane: Pane;
+
+  // The id of the currently active pane.
+  activePaneId: PaneId;
+
+  // 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 visual editor instead of files
+  isVisualEditorOpen: boolean;
+
+  // True to show the AI chat instead of files
+  isAIChatOpen: boolean;
+
+  // True if the AI chat input should focus on the next render.
+  aiChatFocused: boolean;
+
+  // The current AI chat mode: 'ask' or 'edit'
+  aiChatMode: 'ask' | 'edit';
+
+  // True to show the settings modal.
+  isSettingsOpen: boolean;
+
+  isDocOpen: boolean;
+
+  // True if the editor should focus on the next render.
+  editorWantsFocus: boolean;
+
+  // 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 list of remote users and which file they have open,
+  // for presence display in the sidebar.
+  sidebarPresenceIndicators: Array<PresenceIndicator>;
+};
+
+// The shape of the actions that can be dispatched to the reducer.
+export type VZAction =
+  // `set_active_file_id`
+  //  * Sets the active file ID.
+  | { type: 'set_active_file_id'; activeFileId: VizFileId }
+
+  // `set_active_file_left' 'set_active_file_right`
+  //  * Sets the active file ID to be the tab directly to the left or right
+  //  * of the currently active tab.
+  | { type: 'set_active_file_left' }
+  | { type: 'set_active_file_right' }
+
+  // `open_tab`
+  //  * Opens a tab.
+  //  * Also serves to change an already open transient tab to persistent.
+  | {
+      type: 'open_tab';
+      fileId: VizFileId;
+      isTransient?: boolean;
+    }
+
+  // `close_tabs`
+  //  * Closes a set of tabs.
+  | {
+      type: 'close_tabs';
+      fileIdsToClose: Array<VizFileId>;
+      // The pane id to close tabs from.
+    }
+
+  // `set_theme`
+  //  * Sets the theme.
+  | { type: 'set_theme'; themeLabel: ThemeLabel }
+
+  // `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 }
+
+  // `set_is_search_open`
+  //  * Sets whether the search tab is open.
+  | { type: 'set_is_search_open'; value: boolean }
+
+  // `set_is_ai_chat_open`
+  //  * Sets whether the AI chat tab is open.
+  | { type: 'set_is_ai_chat_open'; value: boolean }
+
+  // 'set_is_visual_editor_open'
+  // * Sets whether the Visual Editor is open.
+  | { type: 'set_is_visual_editor_open'; value: boolean }
+
+  // `toggle_ai_chat_focused`
+  // * Toggles focused variable to trigger AI chat input focus
+  | { type: 'toggle_ai_chat_focused' }
+
+  // `set_ai_chat_mode`
+  // * Sets the AI chat mode (ask or edit)
+  | { type: 'set_ai_chat_mode'; mode: 'ask' | 'edit' }
+
+  // `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<VizContent>;
+    }
+
+  // `set_search_results_visibility`
+  //  * Sets the visibility of a current search pattern file
+  | {
+      type: 'set_search_file_visibility';
+      files: ShareDBDoc<VizContent>;
+      id: string;
+      visibility: SearchFileVisibility;
+    }
+
+  // `hide_search_results_line`
+  //  * Hides a current search pattern file's specific matching line
+  | {
+      type: 'hide_search_results_line';
+      files: ShareDBDoc<VizContent>;
+      id: string;
+      line: number;
+    }
+
+  // `set_active_search_index`
+  //  * Sets focused (file) index and child focused (line) index for search results
+  | {
+      type: 'set_active_search_index';
+      focusedIndex: number;
+      childIndex: number;
+    }
+
+  // `toggle_search_focused`
+  // * Toggles focused variable to trigger search input focus
+  | { type: 'toggle_search_focused' }
+
+  // `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 }
+
+  // `toggle_auto_follow`
+  //  * Toggles the auto-follow feature.
+  | { type: 'toggle_auto_follow' }
+
+  // `update_presence_indicator
+  //  * Updates a single presence indicator
+  | {
+      type: 'update_presence_indicator';
+      presenceIndicator: PresenceIndicator;
+    }
+
+  // `split_current_pane`
+  | { type: 'split_current_pane' };
+
+const reducers = [
+  setActiveFileIdReducer,
+  setActiveFileLeftReducer,
+  setActiveFileRightReducer,
+  openTabReducer,
+  closeTabsReducer,
+  setThemeReducer,
+  setSearchReducer,
+  setSearchResultsReducer,
+  setSearchFileVisibilityReducer,
+  setSearchLineVisibilityReducer,
+  setSearchFocusedIndexReducer,
+  toggleSearchFocusedReducer,
+  setIsSearchOpenReducer,
+  setIsAIChatOpenReducer,
+  setIsVisualEditorOpenReducer,
+  toggleAIChatFocusedReducer,
+  setAIChatModeReducer,
+  setIsSettingsOpenReducer,
+  setIsDocOpenReducer,
+  editorNoLongerWantsFocusReducer,
+  setUsernameReducer,
+  toggleAutoFollowReducer,
+  updatePresenceIndicatorReducer,
+  splitCurrentPaneReducer,
+];
+
+export const vzReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  reducers.reduce(
+    (currentState, currentReducer) =>
+      currentReducer(currentState, action),
+    state,
+  );

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

@@ -0,0 +1,127 @@
+import { assert, describe, expect, it } from 'vitest';
+import { openTabReducer } from './openTabReducer';
+import { VZAction, VZState, createInitialState } from '.';
+import { defaultTheme } from '../themes';
+
+const initialState: VZState = createInitialState({
+  defaultTheme,
+});
+
+describe('openTabReducer', () => {
+  it('Opens a new tab', () => {
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file1',
+      isTransient: false,
+    };
+    const newState = openTabReducer(initialState, action);
+
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(1);
+    expect(newState.pane.tabList[0].fileId).toBe('file1');
+    expect(newState.pane.tabList[0].isTransient).toBe(
+      false,
+    );
+    expect(newState.pane.activeFileId).toBe('file1');
+  });
+
+  it('Replaces a transient tab', () => {
+    const stateWithTransientTab = {
+      ...initialState,
+      pane: {
+        ...initialState.pane,
+        tabList: [{ fileId: 'file2', isTransient: true }],
+      },
+    };
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file1',
+      isTransient: true,
+    };
+    const newState = openTabReducer(
+      stateWithTransientTab,
+      action,
+    );
+
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(1);
+    expect(newState.pane.tabList[0].fileId).toBe('file1');
+    expect(newState.pane.tabList[0].isTransient).toBe(true);
+    expect(newState.pane.activeFileId).toBe('file1');
+  });
+
+  it('Does not modify a non-transient tab', () => {
+    const stateWithNonTransientTab = {
+      ...initialState,
+      pane: {
+        ...initialState.pane,
+        tabList: [{ fileId: 'file1', isTransient: false }],
+      },
+    };
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file1',
+      isTransient: true,
+    };
+    const newState = openTabReducer(
+      stateWithNonTransientTab,
+      action,
+    );
+
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(1);
+    expect(newState.pane.tabList[0].fileId).toBe('file1');
+    expect(newState.pane.tabList[0].isTransient).toBe(
+      false,
+    ); // should remain non-transient
+    expect(newState.pane.activeFileId).toBe('file1');
+  });
+
+  it('Activates an already open tab', () => {
+    const stateWithMultipleTabs = {
+      ...initialState,
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+        ],
+      },
+    };
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file1',
+      isTransient: false,
+    };
+    const newState = openTabReducer(
+      stateWithMultipleTabs,
+      action,
+    );
+
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(2);
+    expect(newState.pane.activeFileId).toBe('file1');
+  });
+
+  it('Sets editorWantsFocus to true for non-transient tabs', () => {
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file3',
+      isTransient: false, // This tab is persistent
+    };
+    const newState = openTabReducer(initialState, action);
+
+    expect(newState.editorWantsFocus).toBe(true);
+  });
+
+  it('Sets editorWantsFocus to false for transient tabs', () => {
+    const action: VZAction = {
+      type: 'open_tab',
+      fileId: 'file4',
+      isTransient: true, // This tab is transient
+    };
+    const newState = openTabReducer(initialState, action);
+
+    expect(newState.editorWantsFocus).toBe(false);
+  });
+});

package/src/client/vzReducer/openTabReducer.ts

@@ -0,0 +1,74 @@
+import { VZAction, VZState } from '.';
+import { Pane, TabState } from '../../types';
+import { findPane } from './findPane';
+import { updatePane } from './updatePane';
+
+export const openTabReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type !== 'open_tab') 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',
+    );
+  }
+
+  // Check if the tab is already open and if it's transient.
+  const existingTabIndex = activePane.tabList.findIndex(
+    (tab) => tab.fileId === action.fileId,
+  );
+  const tabExists = existingTabIndex !== -1;
+  const existingTabIsTransient =
+    tabExists &&
+    activePane.tabList[existingTabIndex].isTransient;
+
+  // Find if there's any other transient tab.
+  const transientTabIndex = activePane.tabList.findIndex(
+    (tab) =>
+      tab.isTransient && tab.fileId !== action.fileId,
+  );
+
+  // The new tab state.
+  const newTabState: TabState = {
+    fileId: action.fileId,
+    isTransient: action.isTransient,
+  };
+
+  let newTabList: Array<TabState>;
+
+  if (tabExists) {
+    if (existingTabIsTransient) {
+      newTabList = activePane.tabList.map((tabState) =>
+        tabState.fileId === action.fileId
+          ? newTabState
+          : tabState,
+      );
+    } else {
+      newTabList = [...activePane.tabList];
+    }
+  } else if (transientTabIndex !== -1) {
+    newTabList = [...activePane.tabList];
+    newTabList[transientTabIndex] = newTabState;
+  } else {
+    newTabList = [...activePane.tabList, newTabState];
+  }
+
+  // If the tab is persistent, the editor should focus on the next render.
+  const editorWantsFocus = !action.isTransient;
+
+  return {
+    ...state,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newTabList,
+      newActiveFileId: action.fileId,
+    }),
+    editorWantsFocus,
+  };
+};