vzcode 1.11.0 → 1.13.0

package/src/client/vzReducer/closeTabsReducer.ts

@@ -1,5 +1,12 @@
-import { TabState, VZAction, VZState } from '.';
-import { FileId } from '../../types';
+import { VZAction, VZState } from '.';
+import {
+  FileId,
+  Pane,
+  PaneId,
+  TabState,
+} from '../../types';
+import { findPane } from './findPane';
+import { updatePane } from './updatePane';
 
 export const closeTabsReducer = (
   state: VZState,
@@ -9,35 +16,56 @@ export const closeTabsReducer = (
     return state;
   }
 
-  const newTabList: Array<TabState> = state.tabList.filter(
-    (tabState) =>
-      !action.fileIdsToClose.includes(tabState.fileId),
-  );
+  const { pane, activePaneId } = state;
+  const activePane: Pane = findPane(pane, activePaneId);
+
+  if (activePane.type !== 'leafPane') {
+    throw new Error(
+      'closeTabsReducer: activePane is not a leafPane',
+    );
+  }
+
+  // Derive the new tab list by filtering out the tabs to close.
+  const newTabList: Array<TabState> =
+    activePane.tabList.filter(
+      (tabState) =>
+        !action.fileIdsToClose.includes(tabState.fileId),
+    );
 
   // If the active tab wasn't closed, keep it active.
   if (
-    !action.fileIdsToClose.includes(state.activeFileId!)
+    !action.fileIdsToClose.includes(
+      activePane.activeFileId!,
+    )
   ) {
     return {
       ...state,
-      tabList: newTabList,
+      pane: updatePane({
+        pane,
+        activePaneId,
+        newTabList,
+      }),
     };
   }
 
-  const originalIndex = state.tabList.findIndex(
-    (tabState) => tabState.fileId === state.activeFileId,
-  );
-
+  // Otherwise, we'll need to also find a new active tab.
   let newActiveFileId: FileId | null = null;
 
+  // The question becomes: which tab should be active now?
+  // - Either the tab to the left or right of the closed tab.
+
   // Try getting the previous available tab first.
+  const originalIndex = activePane.tabList.findIndex(
+    (tabState) =>
+      tabState.fileId === activePane.activeFileId,
+  );
   for (let i = originalIndex - 1; i >= 0; i--) {
     if (
       !action.fileIdsToClose.includes(
-        state.tabList[i].fileId,
+        activePane.tabList[i].fileId,
       )
     ) {
-      newActiveFileId = state.tabList[i].fileId;
+      newActiveFileId = activePane.tabList[i].fileId;
       break;
     }
   }
@@ -46,15 +74,15 @@ export const closeTabsReducer = (
   if (!newActiveFileId) {
     for (
       let i = originalIndex + 1;
-      i < state.tabList.length;
+      i < activePane.tabList.length;
       i++
     ) {
       if (
         !action.fileIdsToClose.includes(
-          state.tabList[i].fileId,
+          activePane.tabList[i].fileId,
         )
       ) {
-        newActiveFileId = state.tabList[i].fileId;
+        newActiveFileId = activePane.tabList[i].fileId;
         break;
       }
     }
@@ -62,7 +90,11 @@ export const closeTabsReducer = (
 
   return {
     ...state,
-    tabList: newTabList,
-    activeFileId: newActiveFileId,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newTabList,
+      newActiveFileId,
+    }),
   };
 };

package/src/client/vzReducer/createInitialState.ts

@@ -9,14 +9,20 @@ export const createInitialState = ({
   defaultTheme: ThemeLabel;
   initialUsername?: Username;
 }): VZState => ({
-  tabList: [],
-  activeFileId: null,
+  pane: {
+    id: 'root',
+    type: 'leafPane',
+    tabList: [],
+    activeFileId: null,
+  },
+  activePaneId: 'root',
   theme: defaultTheme,
-  search: { pattern: '', results: {} },
+  search: { pattern: '', results: {}, focused: false },
   isSearchOpen: false,
   isSettingsOpen: false,
   isDocOpen: false,
   editorWantsFocus: false,
   username: initialUsername,
   enableAutoFollow: false,
+  sidebarPresenceIndicators: [],
 });

package/src/client/vzReducer/findPane.ts

@@ -0,0 +1,19 @@
+import { Pane, PaneId } from '../../types';
+
+// Recursively finds a pane by id, given a root pane node.
+export const findPane = (
+  pane: Pane,
+  paneId: PaneId,
+): Pane => {
+  if (pane.id === paneId) {
+    return pane;
+  }
+  if (pane.type === 'splitPane') {
+    for (const child of pane.children) {
+      const foundPane = findPane(child, paneId);
+      if (foundPane) {
+        return foundPane;
+      }
+    }
+  }
+};

package/src/client/vzReducer/index.ts

@@ -1,5 +1,8 @@
 import {
   FileId,
+  Pane,
+  PaneId,
+  PresenceIndicator,
   SearchFileVisibility,
   SearchResults,
   ShareDBDoc,
@@ -24,18 +27,20 @@ import {
   setSearchReducer,
   setSearchResultsReducer,
   setSearchFileVisibilityReducer,
+  toggleSearchFocusedReducer,
 } from './searchReducer';
 import { toggleAutoFollowReducer } from './toggleAutoFollowReducer';
+import { updatePresenceIndicatorReducer } from './updatePresenceIndicatorReducer';
+import { splitCurrentPaneReducer } from './splitCurrentPaneReducer';
 export { createInitialState } from './createInitialState';
 
 // The shape of the state managed by the reducer.
 export type VZState = {
-  // The list of open tabs.
-  tabList: Array<TabState>;
+  // The state of the split pane (tree data structure).
+  pane: Pane;
 
-  // The ID of the file that is currently active.
-  // Invariant: `activeFileId` is always in `tabList`.
-  activeFileId: FileId | null;
+  // The id of the currently active pane.
+  activePaneId: PaneId;
 
   // The theme that is currently active.
   theme: ThemeLabel;
@@ -61,6 +66,10 @@ export type VZState = {
   // 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.
@@ -86,7 +95,11 @@ export type VZAction =
 
   // `close_tabs`
   //  * Closes a set of tabs.
-  | { type: 'close_tabs'; fileIdsToClose: Array<FileId> }
+  | {
+      type: 'close_tabs';
+      fileIdsToClose: Array<FileId>;
+      // The pane id to close tabs from.
+    }
 
   // `set_theme`
   //  * Sets the theme.
@@ -121,6 +134,10 @@ export type VZAction =
       visibility: SearchFileVisibility;
     }
 
+  // `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' }
@@ -129,28 +146,19 @@ export type VZAction =
   //  * Sets the username.
   | { type: 'set_username'; username: Username }
 
-  // `toggle_auto_follow
+  // `toggle_auto_follow`
   //  * Toggles the auto-follow feature.
-  | { type: 'toggle_auto_follow' };
-
-// Representation of an open tab.
-export type TabState = {
-  // `fileId`
-  // The ID of the file that the tab represents.
-  fileId: FileId;
-
-  // `isTransient`
-  // Represents whether the tab is temporary or persistent.
-  //  * `true` if the tab is temporary, meaning its text
-  //    appears as italic, and it will be automatically
-  //    closed when the user switches to another file.
-  //    If `true` and the tab is opened, the editor will not focus.
-  //  * `false` or `undefined` if the tab is persistent, meaning its text
-  //    appears as normal, and it will not be automatically
-  //    closed when the user switches to another file.
-  //    If `false` and the tab is opened, the editor will focus.
-  isTransient?: boolean;
-};
+  | { 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,
@@ -162,12 +170,15 @@ const reducers = [
   setSearchReducer,
   setSearchResultsReducer,
   setSearchFileVisibilityReducer,
+  toggleSearchFocusedReducer,
   setIsSearchOpenReducer,
   setIsSettingsOpenReducer,
   setIsDocOpenReducer,
   editorNoLongerWantsFocusReducer,
   setUsernameReducer,
   toggleAutoFollowReducer,
+  updatePresenceIndicatorReducer,
+  splitCurrentPaneReducer,
 ];
 
 export const vzReducer = (

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

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { assert, describe, expect, it } from 'vitest';
 import { openTabReducer } from './openTabReducer';
 import { VZAction, VZState, createInitialState } from '.';
 import { defaultTheme } from '../themes';
@@ -16,16 +16,22 @@ describe('openTabReducer', () => {
     };
     const newState = openTabReducer(initialState, action);
 
-    expect(newState.tabList.length).toBe(1);
-    expect(newState.tabList[0].fileId).toBe('file1');
-    expect(newState.tabList[0].isTransient).toBe(false);
-    expect(newState.activeFileId).toBe('file1');
+    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,
-      tabList: [{ fileId: 'file2', isTransient: true }],
+      pane: {
+        ...initialState.pane,
+        tabList: [{ fileId: 'file2', isTransient: true }],
+      },
     };
     const action: VZAction = {
       type: 'open_tab',
@@ -37,16 +43,20 @@ describe('openTabReducer', () => {
       action,
     );
 
-    expect(newState.tabList.length).toBe(1);
-    expect(newState.tabList[0].fileId).toBe('file1');
-    expect(newState.tabList[0].isTransient).toBe(true);
-    expect(newState.activeFileId).toBe('file1');
+    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,
-      tabList: [{ fileId: 'file1', isTransient: false }],
+      pane: {
+        ...initialState.pane,
+        tabList: [{ fileId: 'file1', isTransient: false }],
+      },
     };
     const action: VZAction = {
       type: 'open_tab',
@@ -58,19 +68,25 @@ describe('openTabReducer', () => {
       action,
     );
 
-    expect(newState.tabList.length).toBe(1);
-    expect(newState.tabList[0].fileId).toBe('file1');
-    expect(newState.tabList[0].isTransient).toBe(false); // should remain non-transient
-    expect(newState.activeFileId).toBe('file1');
+    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,
-      tabList: [
-        { fileId: 'file1', isTransient: false },
-        { fileId: 'file2', isTransient: false },
-      ],
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+        ],
+      },
     };
     const action: VZAction = {
       type: 'open_tab',
@@ -82,8 +98,9 @@ describe('openTabReducer', () => {
       action,
     );
 
-    expect(newState.tabList.length).toBe(2);
-    expect(newState.activeFileId).toBe('file1');
+    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', () => {

package/src/client/vzReducer/openTabReducer.ts

@@ -1,4 +1,7 @@
-import { TabState, VZAction, VZState } from '.';
+import { VZAction, VZState } from '.';
+import { Pane, TabState } from '../../types';
+import { findPane } from './findPane';
+import { updatePane } from './updatePane';
 
 export const openTabReducer = (
   state: VZState,
@@ -6,17 +9,26 @@ export const openTabReducer = (
 ): 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 = state.tabList.findIndex(
+  const existingTabIndex = activePane.tabList.findIndex(
     (tab) => tab.fileId === action.fileId,
   );
   const tabExists = existingTabIndex !== -1;
   const existingTabIsTransient =
     tabExists &&
-    state.tabList[existingTabIndex].isTransient;
+    activePane.tabList[existingTabIndex].isTransient;
 
   // Find if there's any other transient tab.
-  const transientTabIndex = state.tabList.findIndex(
+  const transientTabIndex = activePane.tabList.findIndex(
     (tab) =>
       tab.isTransient && tab.fileId !== action.fileId,
   );
@@ -31,25 +43,29 @@ export const openTabReducer = (
 
   if (tabExists) {
     if (existingTabIsTransient) {
-      newTabList = state.tabList.map((tabState) =>
+      newTabList = activePane.tabList.map((tabState) =>
         tabState.fileId === action.fileId
           ? newTabState
           : tabState,
       );
     } else {
-      newTabList = [...state.tabList];
+      newTabList = [...activePane.tabList];
     }
   } else if (transientTabIndex !== -1) {
-    newTabList = [...state.tabList];
+    newTabList = [...activePane.tabList];
     newTabList[transientTabIndex] = newTabState;
   } else {
-    newTabList = [...state.tabList, newTabState];
+    newTabList = [...activePane.tabList, newTabState];
   }
 
   return {
     ...state,
-    activeFileId: action.fileId,
-    tabList: newTabList,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newTabList,
+      newActiveFileId: action.fileId,
+    }),
 
     // If the tab is persistent, the editor should focus on the next render.
     editorWantsFocus: !action.isTransient,

package/src/client/vzReducer/searchReducer.ts

@@ -74,7 +74,11 @@ export const setSearchReducer = (
   action.type === 'set_search'
     ? {
         ...state,
-        search: { pattern: action.value, results: {} },
+        search: {
+          pattern: action.value,
+          results: {},
+          focused: true,
+        },
       }
     : state;
 
@@ -91,6 +95,7 @@ export const setSearchResultsReducer = (
             action.files,
             state.search.pattern,
           ),
+          focused: state.search.focused,
         },
       }
     : state;
@@ -109,6 +114,21 @@ export const setSearchFileVisibilityReducer = (
             action.id,
             action.visibility,
           ),
+          focused: state.search.focused,
+        },
+      }
+    : 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

@@ -1,9 +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 =>
-  action.type === 'set_active_file_id'
-    ? { ...state, activeFileId: action.activeFileId }
-    : state;
+): 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

@@ -1,4 +1,7 @@
 import { VZAction, VZState } from '.';
+import { Pane } from '../../types';
+import { findPane } from './findPane';
+import { updatePane } from './updatePane';
 
 export const setActiveFileLeftReducer = (
   state: VZState,
@@ -8,18 +11,31 @@ export const setActiveFileLeftReducer = (
     return state;
   }
 
-  let index = state.tabList.findIndex(
-    (tab) => tab.fileId === state.activeFileId,
+  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 = state.tabList.length - 1;
+    index = activePane.tabList.length - 1;
   }
 
   return {
     ...state,
-    activeFileId: state.tabList[index].fileId,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newActiveFileId: activePane.tabList[index].fileId,
+    }),
   };
 };
 
@@ -31,17 +47,30 @@ export const setActiveFileRightReducer = (
     return state;
   }
 
-  let index = state.tabList.findIndex(
-    (tab) => tab.fileId === state.activeFileId,
+  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 > state.tabList.length - 1) {
+  if (index > activePane.tabList.length - 1) {
     index = 0;
   }
 
   return {
     ...state,
-    activeFileId: state.tabList[index].fileId,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newActiveFileId: activePane.tabList[index].fileId,
+    }),
   };
 };

package/src/client/vzReducer/splitCurrentPaneReducer.ts

@@ -0,0 +1,71 @@
+import {
+  PaneId,
+  LeafPane,
+  SplitPane,
+  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,
+  };
+};