vzcode 1.12.0 → 1.14.0

package/src/client/vzReducer/createInitialState.ts

@@ -24,4 +24,5 @@ export const createInitialState = ({
   editorWantsFocus: false,
   username: initialUsername,
   enableAutoFollow: false,
+  sidebarPresenceIndicators: [],
 });

package/src/client/vzReducer/index.ts

@@ -2,6 +2,7 @@ import {
   FileId,
   Pane,
   PaneId,
+  PresenceIndicator,
   SearchFileVisibility,
   SearchResults,
   ShareDBDoc,
@@ -29,6 +30,8 @@ import {
   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.
@@ -63,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.
@@ -139,9 +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' };
+  | { 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,
@@ -160,6 +177,8 @@ const reducers = [
   editorNoLongerWantsFocusReducer,
   setUsernameReducer,
   toggleAutoFollowReducer,
+  updatePresenceIndicatorReducer,
+  splitCurrentPaneReducer,
 ];
 
 export const vzReducer = (

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/updatePresenceIndicatorReducer.ts

@@ -0,0 +1,30 @@
+import { VZAction, VZState } from '.';
+
+export const updatePresenceIndicatorReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type === 'update_presence_indicator') {
+    // True if there's already an entry for this user.
+    const needsUpdate =
+      state.sidebarPresenceIndicators.find(
+        (d) =>
+          d.username === action.presenceIndicator.username,
+      );
+
+    return {
+      ...state,
+      sidebarPresenceIndicators: needsUpdate
+        ? state.sidebarPresenceIndicators.map((d) =>
+            d.username === action.presenceIndicator.username
+              ? action.presenceIndicator
+              : d,
+          )
+        : [
+            ...state.sidebarPresenceIndicators,
+            action.presenceIndicator,
+          ],
+    };
+  }
+  return state;
+};

package/src/types.ts

@@ -192,13 +192,36 @@ export type VZCodeContent = {
   isInteracting?: boolean;
 };
 // Example Presence object, from ShareDB:
-// {"start":["files","69064344","text",183],"end":["files","69064344","text",183],"username":"Jim"}
+// {
+//   "start": [
+//     "files",
+//     "71898298",
+//     "text",
+//     415
+//   ],
+//   "end": [
+//     "files",
+//     "71898298",
+//     "text",
+//     415
+//   ],
+//   "username": "Tim"
+// }
 export type Presence = {
   start: Array<string | number>;
   end: Array<string | number>;
   username: Username;
 };
 
+// An item in the list of sidebar presence indicators.
+// It needs to know:
+// * What user the presence is associated with
+// * What file the presence is associated with
+export type PresenceIndicator = {
+  username: Username;
+  fileId: FileId;
+};
+
 // An id used for presence.
 export type PresenceId = string;