npm - vzcode - Versions diffs - 0.58.0 → 0.59.0 - Mend

vzcode 0.58.0 → 0.59.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/assets/{index-NAjxbACe.js → index-iYQ0qHNs.js} +43 -43
package/dist/assets/{index-aQVpCjcB.css → index-yDxNPcIh.css} +1 -1
package/dist/assets/worker-DzDiglXJ.js +233 -0
package/dist/index.html +2 -6
package/package.json +2 -2
package/src/client/VZSidebar/Item.tsx +35 -9
package/src/client/VZSidebar/index.tsx +52 -35
package/src/client/VZSidebar/styles.scss +1 -1
package/src/client/index.ts +2 -0
package/src/client/useURLSync.ts +39 -36
package/dist/assets/worker-Cl_j3b6K.js +0 -233

package/dist/index.html CHANGED Viewed

@@ -20,12 +20,8 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <link
-      href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
-      rel="stylesheet"
-    />
-    <script type="module" crossorigin src="/assets/index-NAjxbACe.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-aQVpCjcB.css">
+    <script type="module" crossorigin src="/assets/index-iYQ0qHNs.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-yDxNPcIh.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "0.58.0",
+  "version": "0.59.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -116,7 +116,7 @@
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "^4.2.1",
     "concurrently": "^8.2.2",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "sass": "^1.70.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",

package/src/client/VZSidebar/Item.tsx CHANGED Viewed

@@ -6,6 +6,8 @@ import {
 } from 'react';
 import { EditSVG, FileSVG, TrashSVG } from '../Icons';
+import { Tooltip, OverlayTrigger } from '../bootstrap';
 // TODO consider moving this up to a higher level of the component tree
 import { DeleteConfirmationModal } from './DeleteConfirmationModal';
@@ -23,6 +25,10 @@ export const Item = ({
   handleDeleteClick,
   isDirectory = false,
   isActive = false,
+  renameFileTooltipText = 'Rename File',
+  deleteFileTooltipText = isDirectory
+    ? 'Delete Directory'
+    : 'Delete File',
 }: {
   name: string;
   children: React.ReactNode;
@@ -32,6 +38,8 @@ export const Item = ({
   handleDeleteClick: () => void;
   isDirectory?: boolean;
   isActive?: boolean;
+  renameFileTooltipText?: string;
+  deleteFileTooltipText?: string;
 }) => {
   // Tracks whether the mouse is hovering over the file or directory
   const [isHovered, setIsHovered] = useState(false);
@@ -159,19 +167,37 @@ export const Item = ({
           style={{ position: 'relative' }}
         >
           {(isDirectory ? enableRenameDirectory : true) ? (
+            <OverlayTrigger
+              placement="top"
+              overlay={
+                <Tooltip id="rename-file-tooltip">
+                  {renameFileTooltipText}
+                </Tooltip>
+              }
+            >
+              <i
+                onClick={handleRenameIconClick}
+                className="icon-button"
+              >
+                <EditSVG />
+              </i>
+            </OverlayTrigger>
+          ) : null}
+          <OverlayTrigger
+            placement="top"
+            overlay={
+              <Tooltip id="delete-file-tooltip">
+                {deleteFileTooltipText}
+              </Tooltip>
+            }
+          >
             <i
-              onClick={handleRenameIconClick}
+              onClick={handleModalOpen}
               className="icon-button"
             >
-              <EditSVG />
+              <TrashSVG />
             </i>
-          ) : null}
-          <i
-            onClick={handleModalOpen}
-            className="icon-button"
-          >
-            <TrashSVG />
-          </i>
+          </OverlayTrigger>
         </div>
       ) : null}

package/src/client/VZSidebar/index.tsx CHANGED Viewed

@@ -12,6 +12,7 @@ import {
   FileTreePath,
   Files,
 } from '../../types';
+import { Tooltip, OverlayTrigger } from '../bootstrap';
 import { getFileTree } from '../getFileTree';
 import { sortFileTree } from '../sortFileTree';
 import { disableSettings } from '../featureFlags';
@@ -26,20 +27,10 @@ import './styles.scss';
 // See https://github.com/vizhub-core/vzcode/issues/456
 const enableConnectionStatus = false;
-const CreateFileButton = ({ handleCreateFile }) => {
-  return (
-    <i
-      className="bx bxs-file-plus new-btn"
-      style={{ color: '#dbdde1' }}
-      onClick={handleCreateFile}
-      // TODO better tooltip
-      title="Create file"
-    ></i>
-  );
-};
 export const VZSidebar = ({
   files,
   createFile,
+  createFileTooltipText = 'New File',
   renameFile,
   deleteFile,
   deleteDirectory,
@@ -49,9 +40,12 @@ export const VZSidebar = ({
   isDirectoryOpen,
   toggleDirectory,
   activeFileId,
+  openSettingsTooltipText = 'Open Settings',
+  reportBugTooltipText = 'Report Bug',
 }: {
   files: Files;
   createFile: (fileName) => void;
+  createFileTooltipText?: string;
   renameFile: (fileId: FileId, newName: string) => void;
   deleteFile: (fileId: FileId) => void;
   deleteDirectory: (path: FileTreePath) => void;
@@ -67,6 +61,8 @@ export const VZSidebar = ({
   isDirectoryOpen: (path: string) => boolean;
   toggleDirectory: (path: string) => void;
   activeFileId?: FileId;
+  openSettingsTooltipText?: string;
+  reportBugTooltipText?: string;
 }) => {
   const fileTree = useMemo(
     () => (files ? sortFileTree(getFileTree(files)) : null),
@@ -156,31 +152,56 @@ export const VZSidebar = ({
             Project Files
           </div>
           <div className="sidebar-section-buttons">
-            <a
-              href="https://github.com/vizhub-core/vzcode/issues/new"
-              target="_blank"
-              rel="noopener noreferrer"
+            <OverlayTrigger
+              placement="left"
+              overlay={
+                <Tooltip id="report-bug-tooltip">
+                  {reportBugTooltipText}
+                </Tooltip>
+              }
             >
-              <i className="icon-button">
-                <BugSVG />
-              </i>
-            </a>
+              <a
+                href="https://github.com/vizhub-core/vzcode/issues/new"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <i className="icon-button">
+                  <BugSVG />
+                </i>
+              </a>
+            </OverlayTrigger>
             {disableSettings ? null : (
+              <OverlayTrigger
+                placement="left"
+                overlay={
+                  <Tooltip id="open-settings-tooltip">
+                    {openSettingsTooltipText}
+                  </Tooltip>
+                }
+              >
+                <i
+                  onClick={handleSettingsClick}
+                  className="icon-button"
+                >
+                  <GearSVG />
+                </i>
+              </OverlayTrigger>
+            )}
+            <OverlayTrigger
+              placement="left"
+              overlay={
+                <Tooltip id="create-file-tooltip">
+                  {createFileTooltipText}
+                </Tooltip>
+              }
+            >
               <i
-                onClick={handleSettingsClick}
+                onClick={handleCreateFile}
                 className="icon-button"
               >
-                <GearSVG />
+                <NewSVG />
               </i>
-            )}
-            <i
-              onClick={handleCreateFile}
-              className="icon-button"
-            >
-              <NewSVG />
-            </i>
+            </OverlayTrigger>
           </div>
         </div>
         {filesExist ? (
@@ -209,13 +230,9 @@ export const VZSidebar = ({
           <div className="empty">
             <div className="empty-text">
               It looks like you don't have any files yet!
-              Click the "Create file" button below to create
+              Click the "Create file" button above to create
               your first file.
             </div>
-            <CreateFileButton
-              handleCreateFile={handleCreateFile}
-            />
           </div>
         )}
       </div>

package/src/client/VZSidebar/styles.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 .vz-sidebar {
   height: 100%;
   color: var(--vh-color-neutral-04);
-  background: #1f2022;
+  background: var(--vh-color-neutral-01);
   display: flex;
   flex-direction: column;
   justify-content: space-between;

package/src/client/index.ts CHANGED Viewed

@@ -13,3 +13,5 @@ export {
 } from './SplitPaneResizeContext';
 export { useSubmitOperation } from './useSubmitOperation';
 export { shouldTriggerRun } from './shouldTriggerRun';
+export * from './Icons';

package/src/client/useURLSync.ts CHANGED Viewed

@@ -78,6 +78,14 @@ export const useURLSync = ({
     contentRef.current = content;
   }, [content]);
+  // track setSearchParams in a ref so that we can use it in the
+  // effect below without triggering the effect on each render.
+  // The definition of `setSearchParams` changes on every render.
+  const setSearchParamsRef = useRef(setSearchParams);
+  useEffect(() => {
+    setSearchParamsRef.current = setSearchParams;
+  }, [setSearchParams]);
   // Update the URL to match the current state whenever
   // the active file or tab list changes.
   useEffect(() => {
@@ -93,42 +101,37 @@ export const useURLSync = ({
       content: contentRef.current,
     });
-    if (
-      tabStateParams.file !== newTabStateParams.file ||
-      tabStateParams.tabs !== newTabStateParams.tabs
-    ) {
-      // Update the URL if the search parameters have changed.
-      setSearchParams(
-        (oldSearchParams: URLSearchParams) => {
-          // Create a copy of the old search params
-          const updatedSearchParams = new URLSearchParams(
-            oldSearchParams,
+    // Update the URL if the search parameters have changed.
+    setSearchParamsRef.current(
+      (oldSearchParams: URLSearchParams) => {
+        // Create a copy of the old search params
+        const updatedSearchParams = new URLSearchParams(
+          oldSearchParams,
+        );
+        // Set the 'file' parameter
+        if (newTabStateParams.file) {
+          updatedSearchParams.set(
+            'file',
+            newTabStateParams.file,
           );
+        } else {
+          updatedSearchParams.delete('file'); // Remove 'file' if it's not present in newTabStateParams
+        }
-          // Set the 'file' parameter
-          if (newTabStateParams.file) {
-            updatedSearchParams.set(
-              'file',
-              newTabStateParams.file,
-            );
-          } else {
-            updatedSearchParams.delete('file'); // Remove 'file' if it's not present in newTabStateParams
-          }
-          // Set the 'tabs' parameter
-          if (newTabStateParams.tabs) {
-            updatedSearchParams.set(
-              'tabs',
-              newTabStateParams.tabs,
-            );
-          } else {
-            updatedSearchParams.delete('tabs'); // Remove 'tabs' if it's not present in newTabStateParams
-          }
-          // Return the updated search params
-          return updatedSearchParams;
-        },
-      );
-    }
-  }, [searchParams, tabList, activeFileId]);
+        // Set the 'tabs' parameter
+        if (newTabStateParams.tabs) {
+          updatedSearchParams.set(
+            'tabs',
+            newTabStateParams.tabs,
+          );
+        } else {
+          updatedSearchParams.delete('tabs'); // Remove 'tabs' if it's not present in newTabStateParams
+        }
+        // Return the updated search params
+        return updatedSearchParams;
+      },
+    );
+  }, [tabList, activeFileId]);
 };