vzcode 0.25.0 → 0.27.0

package/src/client/PresenceNotifications/index.tsx

@@ -1,145 +1,158 @@
 import { useState, useEffect, useRef } from 'react';
+import { PresenceId, Username } from '../../types';
 import './style.scss';
 
-type PresenceId = string;
-
-// A presence notification is a message that is displayed when a user joins or leaves a session.
-// It has the following properties:
-// - `user` is the username of the user who joined or left the session.
-// - `join` is a boolean value that indicates whether the user joined or left the session.
-//   - `true` means user has joined the session.
-//   - `false` means user has left the session.
 type PresenceNotification = {
-  user: string;
+  user: Username;
   join: boolean;
   presenceId: PresenceId;
 };
 
+export const extractTimestampFromId = (
+  id: string,
+): number => {
+  const [timestampPart] = id.split('-');
+  return parseInt(timestampPart, 36);
+};
+
+export const shouldShowNotification = (
+  remotePresenceId: PresenceId,
+  localPresenceId: PresenceId,
+): boolean => {
+  const remotePresenceTimestamp = extractTimestampFromId(
+    remotePresenceId,
+  );
+  const localPresenceTimestamp =
+    extractTimestampFromId(localPresenceId);
+  return remotePresenceTimestamp > localPresenceTimestamp;
+};
+
+export const handleJoin = (
+  presenceId: PresenceId,
+  username: Username,
+  alreadyJoined: React.MutableRefObject<
+    Map<PresenceId, Username>
+  >,
+  setPresenceNotifications: any,
+) => {
+  if (!alreadyJoined.current.has(presenceId)) {
+    alreadyJoined.current.set(presenceId, username);
+    setPresenceNotifications(
+      (prev: PresenceNotification[]) => [
+        ...prev,
+        { user: username, join: true, presenceId },
+      ],
+    );
+  } else {
+    alreadyJoined.current.set(presenceId, username); // Update in case username changed
+  }
+};
+
+export const handleLeave = (
+  presenceId: PresenceId,
+  alreadyJoined: React.MutableRefObject<
+    Map<PresenceId, Username>
+  >,
+  setPresenceNotifications: any,
+) => {
+  const user = alreadyJoined.current.get(presenceId);
+  if (user) {
+    alreadyJoined.current.delete(presenceId);
+    setPresenceNotifications(
+      (prev: PresenceNotification[]) => [
+        ...prev,
+        { user, join: false, presenceId },
+      ],
+    );
+  }
+};
+
 export const PresenceNotifications = ({
   docPresence,
+  localPresence,
 }: {
   docPresence?: any;
+  localPresence?: any;
 }) => {
+  // `presenceNotifications`:
+  // - State variable containing a list of user presence notifications.
+  // - Each notification indicates if a user has joined or left a session.
   const [presenceNotifications, setPresenceNotifications] =
-    useState<Array<PresenceNotification>>([]);
-
-  // const [presenceIds, setPresenceIds] = useState<
-  //   Array<any>
-  // >([]);
-  const alreadyJoinedPresenceIds = useRef<Set<PresenceId>>(
-    new Set(),
+    useState<PresenceNotification[]>([]);
+
+  // `alreadyJoined`:
+  // - Ref (persistent across re-renders) containing a Map.
+  // - Map's key: `PresenceId` (unique identifier for user's presence).
+  // - Map's value: `Username` of the associated user.
+  // - Tracks users who have joined the session and their possible username changes.
+  const alreadyJoined = useRef<Map<PresenceId, Username>>(
+    new Map(),
   );
 
   useEffect(() => {
-    // console.log('useEffect triggered.');
     if (docPresence) {
-      // See https://share.github.io/sharedb/presence
-      docPresence.on('receive', (presenceId, update) => {
-        // Reason for notifications appearing on every cursor movement:
-        //  code doesn't check if a notification about a user joining was previously sent
-
-        // Attempted solutions:
-        //  - create an array called presenceIds that keeps track of the presences that join and leave
-        //      - if presenceId is in presenceIds: local user was already alerted that a remote user joined
-        //      - if presenceId is not in presenceIds: local user needs to be notified about a new user
-        //      - problems:
-        //          - the array is always empty inside useEffect (array works outside of useEffect)
-        //              - causes check to fail
-        //  - check docPresence.remotePresences, which keeps track of all the remote presences on the doc
-        //      - see https://share.github.io/sharedb/api/presence
-        //      - if presenceId is in docPresence.remotePresences: local user was already alerted that a remote user joined
-        //      - if presenceId is not in docPresence.remotePresences: local user needs to be notified about a new user
-        //      - problems:
-        //          - useEffects is called when docPresence changes (in some cases, it's when the remote presence changes)
-        //          - remotePresences already has the remote presence in the array, so check fails
-        //      - could add another property to presence (true: already notified, false: need to be notified)
-        //          - doesn't seem like an ideal solution
-
-        // console.log('docPresence:', docPresence);
-        // console.log('docPresence remotePresences:', docPresence.remotePresences);
-        // console.log('check for presence:', docPresence.remotePresences[presenceId]);
-
-        // TODO figure out how to get username from `presenceId`.
-        const user = 'someone';
-
-        // `true` means user has joined the session.
-        // `false` means user has left the session.
+      const handleReceive = (
+        presenceId: PresenceId,
+        update: any,
+      ) => {
         const join = update !== null;
-
-        console.log('join', join);
-
-        // Figure out if we have ever seen this user before.
-
-        // if (join && docPresence.remotePresences[presenceId] === undefined){
-        if (join) {
-          if (
-            !alreadyJoinedPresenceIds.current.has(
+        if (
+          shouldShowNotification(
+            presenceId,
+            localPresence.presenceId,
+          )
+        ) {
+          if (join) {
+            const username =
+              docPresence.remotePresences[presenceId]
+                ?.username;
+            handleJoin(
               presenceId,
-            )
-          ) {
-            alreadyJoinedPresenceIds.current.add(
+              username,
+              alreadyJoined,
+              setPresenceNotifications,
+            );
+          } else {
+            handleLeave(
               presenceId,
+              alreadyJoined,
+              setPresenceNotifications,
             );
-            setPresenceNotifications((prev) => [
-              ...prev,
-              { user, join, presenceId },
-            ]);
-
-            // Remove it after 5 seconds.
-            setTimeout(() => {
-              setPresenceNotifications((prev) =>
-                prev.filter(
-                  (notification) =>
-                    notification.presenceId !==
-                      presenceId &&
-                    notification.join !== join,
-                ),
-              );
-            }, 5000);
           }
-        } else if (!join) {
-          setPresenceNotifications((prev) => [
-            ...prev,
-            { user, join, presenceId },
-          ]);
 
-          // Remove it after 5 seconds.
-          // TODO clean up this duplication.
-          setTimeout(() => {
+          const timeoutId = setTimeout(() => {
             setPresenceNotifications((prev) =>
-              prev.filter(
-                (notification) =>
-                  notification.presenceId !== presenceId &&
-                  notification.join !== join,
-              ),
+              prev.slice(1),
             );
           }, 5000);
+
+          return () => {
+            clearTimeout(timeoutId);
+          };
         }
-      });
-    }
-  }, [docPresence]);
+      };
 
-  // console.log(
-  //   'presenceNotifications',
-  //   presenceNotifications,
-  // );
-  // console.log(
-  //   'presenceIds',
-  //   presenceIds,
-  // );
+      docPresence.on('receive', handleReceive);
+      return () => {
+        docPresence.off('receive', handleReceive);
+      };
+    }
+  }, [docPresence, localPresence]);
 
   return presenceNotifications.length > 0 ? (
     <div className="vz-notification">
-      {presenceNotifications.map((notification, i) => {
-        const { user, join } = notification;
-        return (
-          <div key={i} className="vz-notification-item">
+      {presenceNotifications.map(
+        ({ user, join, presenceId }) => (
+          <div
+            key={presenceId}
+            className="vz-notification-item"
+          >
             {join
               ? `${user} has joined the session.`
               : `${user} has left the session.`}
           </div>
-        );
-      })}
+        ),
+      )}
     </div>
   ) : null;
 };

package/src/client/SplitPaneResizeContext.tsx

@@ -6,13 +6,6 @@ import {
   useEffect,
 } from 'react';
 
-export const SplitPaneResizeContext = createContext<{
-  codeEditorWidth: number;
-  moveSplitPane: (a: number) => void;
-  isDragging: boolean;
-  setIsDragging: (a: boolean) => void;
-}>(null);
-
 // The amount of time to wait idle before writing to localStorage.
 // This is to avoid writing to localStorage on every resize event.
 // MS = milliseconds
@@ -38,6 +31,18 @@ if (typeof window !== 'undefined') {
   // If we're not in the browser, use the default initial width.
 }
 
+export const SplitPaneResizeContext = createContext<{
+  codeEditorWidth: number;
+  moveSplitPane: (a: number) => void;
+  isDragging: boolean;
+  setIsDragging: (a: boolean) => void;
+}>({
+  codeEditorWidth: initialWidth,
+  moveSplitPane: () => {},
+  isDragging: false,
+  setIsDragging: () => {},
+});
+
 const add = (a: number, b: number) => a + b;
 
 export const SplitPaneResizeProvider = ({ children }) => {

package/src/client/TabList/Tab.tsx

@@ -0,0 +1,70 @@
+import { useCallback, useMemo } from 'react';
+import type { FileId } from '../../types';
+import type { TabState } from '../vzReducer';
+
+// Supports adding the file's containing folder to the tab name
+const fileNameSplit = (fileName: string) => {
+  const split = fileName.split('/');
+  if (split.length === 1) return split[split.length - 1];
+  return (
+    split[split.length - 2] + '/' + split[split.length - 1]
+  );
+};
+
+export const Tab = ({
+  fileId,
+  isTransient,
+  isActive,
+  setActiveFileId,
+  openTab,
+  closeTabs,
+  fileName,
+}: {
+  fileId: FileId;
+  isTransient: boolean;
+  isActive: boolean;
+  setActiveFileId: (fileId: FileId) => void;
+  openTab: (tabState: TabState) => void;
+  closeTabs: (fileIds: FileId[]) => void;
+  fileName: string;
+}) => {
+  const handleCloseClick = useCallback(
+    (event: React.MouseEvent) => {
+      // Stop propagation so that the outer listener doesn't fire.
+      event.stopPropagation();
+
+      closeTabs([fileId]);
+    },
+    [closeTabs, fileId],
+  );
+
+  const tabName = useMemo(
+    () => fileNameSplit(fileName),
+    [fileName],
+  );
+
+  const handleClick = useCallback(() => {
+    setActiveFileId(fileId);
+  }, [fileId, setActiveFileId]);
+
+  // Double-clicking a transient tab makes it a persistent tab.
+  const handleDoubleClick = useCallback(() => {
+    openTab({ fileId, isTransient: false });
+  }, [fileId, openTab]);
+
+  return (
+    <div
+      className={`tab user-select-none ${
+        isActive ? 'active' : ''
+      } ${isTransient ? 'transient' : ''}`}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+    >
+      {tabName}
+      <div
+        className={'bx bx-x tab-close'}
+        onClick={handleCloseClick}
+      ></div>
+    </div>
+  );
+};

package/src/client/TabList/index.tsx

@@ -1,89 +1,45 @@
-import { useCallback, useMemo, useEffect } from 'react';
-import { FileId, Files } from '../../types';
+import { useCallback, useEffect } from 'react';
+import type { TabState } from '../vzReducer';
+import type { FileId, Files } from '../../types';
+import { Tab } from './Tab';
 import './style.scss';
 
-// Supports adding the file's containing folder to the tab name
-const fileNameSplit = (fileName) => {
-  const split = fileName.split('/');
-  if (split.length === 1) return split[split.length - 1];
-  return (
-    split[split.length - 2] + '/' + split[split.length - 1]
-  );
-};
-
-const Tab = ({
-  fileId,
-  isActive,
-  setActiveFileId,
-  closeTab,
-  fileName,
-}: {
-  fileId: FileId;
-  isActive: boolean;
-  setActiveFileId: (fileId: FileId) => void;
-  closeTab: (fileId: FileId) => void;
-  fileName: string;
-}) => {
-  const handleCloseClick = useCallback(
-    (event: React.MouseEvent) => {
-      // Stop propagation so that the outer listener doesn't fire.
-      event.stopPropagation();
-
-      closeTab(fileId);
-    },
-    [closeTab, fileId],
-  );
-
-  const tabName = useMemo(
-    () => fileNameSplit(fileName),
-    [fileName],
-  );
-
-  return (
-    <div
-      className={isActive ? 'tab active' : 'tab'}
-      onClick={() => {
-        setActiveFileId(fileId);
-      }}
-    >
-      {tabName}
-      <div
-        className={isActive ? 'bx bx-x tab-close' : ''}
-        onClick={handleCloseClick}
-      ></div>
-    </div>
-  );
-};
-
 // Displays the list of tabs above the code editor.
 export const TabList = ({
   files,
   tabList,
   activeFileId,
   setActiveFileId,
-  closeTab,
+  openTab,
+  closeTabs,
+  createFile,
 }: {
   files: Files;
-  tabList: FileId[];
+  tabList: Array<TabState>;
   activeFileId: FileId;
   setActiveFileId: (fileId: FileId) => void;
-  closeTab: (fileId: FileId) => void;
+  openTab: (tabState: TabState) => void;
+  closeTabs: (fileIds: FileId[]) => void;
+  createFile: () => void;
 }) => {
-  //Create a function to perform the logic to delete the current tab
+  // Close the active tab on alt+w
   const handleKeyPress = useCallback(
     (event: { altKey: boolean; key: string }) => {
       if (event.altKey == true) {
         if (event.key == 'w') {
-          closeTab(activeFileId);
+          closeTabs([activeFileId]);
+        }
+        if (event.key == 'n') {
+          createFile();
         }
       }
     },
-    [closeTab, activeFileId],
+    [createFile, closeTabs, activeFileId],
   );
+
+  // Add the global keydown event listener
   useEffect(() => {
-    // attach the event listener
     document.addEventListener('keydown', handleKeyPress);
-    // remove the event listener
     return () => {
       document.removeEventListener(
         'keydown',
@@ -91,17 +47,20 @@ export const TabList = ({
       );
     };
   }, [handleKeyPress]);
+
   return (
     <div className="vz-tab-list">
       {files &&
-        tabList.map((fileId: FileId) => (
+        tabList.map((tabState: TabState) => (
           <Tab
-            key={fileId}
-            fileId={fileId}
-            isActive={fileId === activeFileId}
+            key={tabState.fileId}
+            fileId={tabState.fileId}
+            isTransient={tabState.isTransient}
+            isActive={tabState.fileId === activeFileId}
             setActiveFileId={setActiveFileId}
-            closeTab={closeTab}
-            fileName={files[fileId].name}
+            openTab={openTab}
+            closeTabs={closeTabs}
+            fileName={files[tabState.fileId].name}
           />
         ))}
     </div>

package/src/client/TabList/style.scss

@@ -1,20 +1,20 @@
 .vz-tab-list {
   display: flex;
-  background-color: rgb(37, 37, 38);
+  background-color: #33415b;
   // When the tab list becomes too large, a horizontal scroll bar appears.
   overflow-x: auto;
 
   .tab {
-    background: rgb(45, 45, 45);
+    // background: #47546b;
     color: #fff;
     font-family: var(--vzcode-font-family);
     align-items: center;
     display: flex;
     padding-top: 2px;
-    padding-left: 10px;
-    padding-right: 10px;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
+    padding-left: 8px;
+    padding-right: 5px;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
     margin-top: 5px;
     margin-left: 2px;
     margin-right: 2px;
@@ -22,15 +22,32 @@
     // Make sure text doesn't wrap within tabs.
     white-space: nowrap;
 
+    // TODO unify with styles in code error overlay dismiss button
     .tab-close {
       margin-left: 5px;
+      margin-bottom: 2px;
     }
     .tab-close:hover {
-      border-radius: 30%;
-      background-color: rgb(37, 37, 38);
+      border-radius: 50%;
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    // No left margin for first child
+    &:first-child {
+      margin-left: 0;
+    }
+
+    // on hover
+    &:hover {
+      background-color: #47546b;
     }
   }
+
   .tab.active {
-    background-color: rgb(41, 44, 52);
+    background-color: #202e46;
+  }
+
+  .tab.transient {
+    font-style: italic;
   }
 }

package/src/client/{Settings.tsx → VZSettings.tsx}

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from 'react';
 import { Button, Modal, Form } from './bootstrap';
 import { ThemeLabel, themes } from './themes';
+import { Username } from '../types';
 
 // const saveTimes = [
 //   { value: 1, label: '1 second' },
@@ -9,18 +10,25 @@ import { ThemeLabel, themes } from './themes';
 //   { value: 30, label: '30 seconds' },
 // ];
 
-export let username = 'Anonymous';
-
-export const Settings = ({
+export const VZSettings = ({
   show,
   onClose,
-  setTheme,
   theme,
+  setTheme,
+  username,
+  setUsername,
+
+  enableUsernameField = true,
 }: {
   show: boolean;
   onClose: () => void;
-  setTheme: (theme: ThemeLabel) => void;
   theme: ThemeLabel;
+  setTheme: (theme: ThemeLabel) => void;
+  username: Username;
+  setUsername: (username: Username) => void;
+
+  // Feature flag to enable/disable username field
+  enableUsernameField?: boolean;
 }) => {
   const handleThemeChange = useCallback((event) => {
     const selectedValue = event.target.value;
@@ -44,10 +52,10 @@ export const Settings = ({
   // );
 
   const usernameRef = useRef<HTMLInputElement>(null);
-  const handleUsernameChange = () => {
-    const usernameValue = usernameRef.current?.value;
-    username = usernameValue;
-  };
+
+  const handleUsernameChange = useCallback(() => {
+    setUsername(usernameRef.current?.value || '');
+  }, [setUsername]);
 
   return show ? (
     <Modal
@@ -60,18 +68,23 @@ export const Settings = ({
         <Modal.Title>Settings</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <Form.Group className="mb-3" controlId="formFork">
-          <Form.Label>Username</Form.Label>
-          <Form.Control
-            type="text"
-            ref={usernameRef}
-            onChange={handleUsernameChange}
-            placeholder="Enter username"
-          />
-          <Form.Text className="text-muted">
-            Enter a username to be displayed on your cursor
-          </Form.Text>
-        </Form.Group>
+        {enableUsernameField ? (
+          <Form.Group className="mb-3" controlId="formFork">
+            <Form.Label>Username</Form.Label>
+            <Form.Control
+              type="text"
+              ref={usernameRef}
+              onChange={handleUsernameChange}
+              placeholder="Enter username"
+              value={username}
+            />
+            <Form.Text className="text-muted">
+              Enter a username to be displayed on your
+              cursor
+            </Form.Text>
+          </Form.Group>
+        ) : null}
+
         <Form.Group className="mb-3" controlId="formFork">
           <Form.Label>Theme</Form.Label>