vzcode 2.3.0 → 2.4.0

package/src/client/usernameLocalStorage.ts

@@ -0,0 +1,43 @@
+// This module deals with storing and accessing the
+// username in local storage.
+import { useEffect, useRef } from 'react';
+import { Username } from '../types';
+
+const localStoragePropertyName = 'vzCodeUsername';
+
+const initialUsernameDefault = 'Anonymous';
+
+// Gets the username from local storage.
+export const useInitialUsername = (): Username => {
+  let initialUsername: Username = initialUsernameDefault;
+
+  // If we're in the browser,
+  if (typeof window !== 'undefined') {
+    //check localStorage for a previously stored width.
+    const initialUsernameFromLocalStorage: string | null =
+      window.localStorage.getItem(localStoragePropertyName);
+
+    // If there is a previously stored width,
+    if (initialUsernameFromLocalStorage !== null) {
+      // use it as the initial width.
+      initialUsername = initialUsernameFromLocalStorage;
+    }
+  } else {
+    // If we're not in the browser, use the default initial width.
+  }
+  return initialUsername;
+};
+
+// Stores the username to local storage.
+export const usePersistUsername = (username: Username) => {
+  const previousUsername = useRef<Username>(username);
+  useEffect(() => {
+    if (previousUsername.current !== username) {
+      previousUsername.current = username;
+      window.localStorage.setItem(
+        'vzCodeUsername',
+        username,
+      );
+    }
+  }, [username]);
+};

package/src/client/utils/fileExtension.ts

@@ -0,0 +1,10 @@
+/**
+ * Utility function to extract file extension from a file name.
+ * @param fileName - The name of the file (e.g., "index.html", "script.js")
+ * @returns The file extension without the dot (e.g., "html", "js") or undefined if no extension
+ */
+export const getFileExtension = (
+  fileName: string,
+): string | undefined => {
+  return fileName.split('.').pop();
+};

package/src/client/utils/isImageFile.ts

@@ -0,0 +1,12 @@
+/**
+ * Utility function to check if a file is an image based on its name.
+ * @param fileName - The name of the file (e.g., "image.png", "photo.jpg")
+ * @returns true if the file is an image, false otherwise
+ */
+export const isImageFile = (fileName: string): boolean => {
+  return (
+    fileName.match(
+      /\.(png|jpg|jpeg|gif|bmp|svg|webp)$/i,
+    ) !== null
+  );
+};

package/src/client/vzReducer/aiChatReducer.ts

@@ -0,0 +1,44 @@
+import { VZState, VZAction } from '.';
+
+export const setIsAIChatOpenReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type === 'set_is_ai_chat_open') {
+    return {
+      ...state,
+      isAIChatOpen: action.value,
+      // When opening AI chat, close search
+      isSearchOpen: action.value
+        ? false
+        : state.isSearchOpen,
+    };
+  }
+  return state;
+};
+
+export const toggleAIChatFocusedReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type === 'toggle_ai_chat_focused') {
+    return {
+      ...state,
+      aiChatFocused: !state.aiChatFocused,
+    };
+  }
+  return state;
+};
+
+export const setAIChatModeReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type === 'set_ai_chat_mode') {
+    return {
+      ...state,
+      aiChatMode: action.mode,
+    };
+  }
+  return state;
+};

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

@@ -0,0 +1,205 @@
+import { assert, describe, expect, it } from 'vitest';
+import { closeTabsReducer } from './closeTabsReducer';
+import { VZAction, VZState, createInitialState } from '.';
+import { defaultTheme } from '../themes';
+
+const initialState: VZState = createInitialState({
+  defaultTheme,
+});
+
+describe('closeTabsReducer', () => {
+  it('Closes an existing tab', () => {
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file1'],
+    };
+
+    const stateWithTabs = {
+      ...initialState,
+      pane: {
+        ...initialState.pane,
+        tabList: [{ fileId: 'file1', isTransient: false }],
+        activeFileId: 'file1',
+      },
+    };
+
+    const newState = closeTabsReducer(
+      stateWithTabs,
+      action,
+    );
+
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(0);
+    expect(newState.pane.activeFileId).toBeNull();
+  });
+
+  it('Keeps other tabs open', () => {
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file2'],
+    };
+    const stateWithTabs = {
+      ...initialState,
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+        ],
+        activeFileId: 'file1',
+      },
+    };
+
+    const newState = closeTabsReducer(
+      stateWithTabs,
+      action,
+    );
+
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(1);
+    expect(newState.pane.tabList[0].fileId).toBe('file1');
+    expect(newState.pane.activeFileId).toBe('file1');
+  });
+
+  it('Activates previous tab after closing an active tab', () => {
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file2'],
+    };
+    const stateWithTabs: VZState = {
+      ...initialState,
+      pane: {
+        ...initialState.pane,
+        type: 'leafPane',
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+          { fileId: 'file3', isTransient: false },
+        ],
+        activeFileId: 'file2',
+      },
+    };
+
+    const newState = closeTabsReducer(
+      stateWithTabs,
+      action,
+    );
+
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(2);
+    expect(newState.pane.activeFileId).toBe('file1'); // should switch to the previous tab
+  });
+
+  it('Does not modify the state if closing non-existing tabs', () => {
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file4'],
+    };
+    const stateWithTabs = {
+      ...initialState,
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+          { fileId: 'file3', isTransient: false },
+        ],
+        activeFileId: 'file2',
+      },
+    };
+
+    const newState = closeTabsReducer(
+      stateWithTabs,
+      action,
+    );
+
+    expect(newState).toEqual(stateWithTabs);
+  });
+
+  it('Closes a tab that is not currently active', () => {
+    const stateWithMultipleTabs = {
+      ...initialState,
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+          { fileId: 'file3', isTransient: false },
+        ],
+        activeFileId: 'file3',
+      },
+    };
+
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file2'],
+    };
+
+    const newState = closeTabsReducer(
+      stateWithMultipleTabs,
+      action,
+    );
+
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(2);
+    expect(newState.pane.activeFileId).toBe('file3'); // remains unchanged
+  });
+
+  it('Closes the first tab out of many, when it is active', () => {
+    const stateWithMultipleTabs = {
+      ...initialState,
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+          { fileId: 'file3', isTransient: false },
+        ],
+        activeFileId: 'file1',
+      },
+    };
+
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file1'],
+    };
+
+    const newState = closeTabsReducer(
+      stateWithMultipleTabs,
+      action,
+    );
+
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(2);
+    expect(newState.pane.activeFileId).toBe('file2'); // switches to the next available tab
+  });
+
+  it('Closes multiple tabs at once', () => {
+    const stateWithMultipleTabs = {
+      ...initialState,
+      pane: {
+        ...initialState.pane,
+        tabList: [
+          { fileId: 'file1', isTransient: false },
+          { fileId: 'file2', isTransient: false },
+          { fileId: 'file3', isTransient: false },
+        ],
+        activeFileId: 'file2',
+      },
+    };
+
+    const action: VZAction = {
+      type: 'close_tabs',
+      fileIdsToClose: ['file1', 'file2'],
+    };
+
+    const newState = closeTabsReducer(
+      stateWithMultipleTabs,
+      action,
+    );
+
+    assert(newState.pane.type === 'leafPane');
+    expect(newState.pane.tabList.length).toBe(1);
+    expect(newState.pane.activeFileId).toBe('file3'); // switches to the next available tab
+  });
+});

package/src/client/vzReducer/closeTabsReducer.ts

@@ -0,0 +1,96 @@
+import { VZAction, VZState } from '.';
+import { Pane, PaneId, TabState } from '../../types';
+import { VizFileId } from '@vizhub/viz-types';
+import { findPane } from './findPane';
+import { updatePane } from './updatePane';
+
+export const closeTabsReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type !== 'close_tabs') {
+    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',
+    );
+  }
+
+  // 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(
+      activePane.activeFileId!,
+    )
+  ) {
+    return {
+      ...state,
+      pane: updatePane({
+        pane,
+        activePaneId,
+        newTabList,
+      }),
+    };
+  }
+
+  // Otherwise, we'll need to also find a new active tab.
+  let newActiveFileId: VizFileId | 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(
+        activePane.tabList[i].fileId,
+      )
+    ) {
+      newActiveFileId = activePane.tabList[i].fileId;
+      break;
+    }
+  }
+
+  // If no previous tab available, get the next available one.
+  if (!newActiveFileId) {
+    for (
+      let i = originalIndex + 1;
+      i < activePane.tabList.length;
+      i++
+    ) {
+      if (
+        !action.fileIdsToClose.includes(
+          activePane.tabList[i].fileId,
+        )
+      ) {
+        newActiveFileId = activePane.tabList[i].fileId;
+        break;
+      }
+    }
+  }
+
+  return {
+    ...state,
+    pane: updatePane({
+      pane,
+      activePaneId,
+      newTabList,
+      newActiveFileId,
+    }),
+  };
+};

package/src/client/vzReducer/createInitialState.ts

@@ -0,0 +1,38 @@
+import { VZState } from '.';
+import { Username } from '../../types';
+import { ThemeLabel } from '../themes';
+
+export const createInitialState = ({
+  defaultTheme,
+  initialUsername = 'Anonymous',
+}: {
+  defaultTheme: ThemeLabel;
+  initialUsername?: Username;
+}): VZState => ({
+  pane: {
+    id: 'root',
+    type: 'leafPane',
+    tabList: [],
+    activeFileId: null,
+  },
+  activePaneId: 'root',
+  theme: defaultTheme,
+  search: {
+    pattern: '',
+    results: {},
+    focused: false,
+    focusedIndex: null,
+    focusedChildIndex: null,
+  },
+  isVisualEditorOpen: false,
+  isSearchOpen: false,
+  isAIChatOpen: true,
+  aiChatFocused: false,
+  aiChatMode: 'edit',
+  isSettingsOpen: false,
+  isDocOpen: false,
+  editorWantsFocus: false,
+  username: initialUsername,
+  enableAutoFollow: true,
+  sidebarPresenceIndicators: [],
+});

package/src/client/vzReducer/editorNoLongerWantsFocusReducer.ts

@@ -0,0 +1,9 @@
+import { VZAction, VZState } from '.';
+
+export const editorNoLongerWantsFocusReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState =>
+  action.type === 'editor_no_longer_wants_focus'
+    ? { ...state, editorWantsFocus: false }
+    : state;

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;
+      }
+    }
+  }
+};