vzcode 2.15.0 → 2.16.0

package/src/client/VZSidebar/VisualEditor/VisualEditor.tsx

@@ -32,21 +32,26 @@ export const VisualEditor = () => {
   >(null);
 
   let configFileId: VizFileId | null = null;
-  for (const fileId in files) {
-    if (files[fileId].name === CONFIG_FILE_NAME) {
-      configFileId = fileId;
-      break;
+  if (files) {
+    for (const fileId in files) {
+      if (files[fileId].name === CONFIG_FILE_NAME) {
+        configFileId = fileId;
+        break;
+      }
     }
   }
 
   const configData = useMemo(() => {
+    if (!files || !configFileId) {
+      return null;
+    }
     try {
       return JSON.parse(files[configFileId].text);
     } catch (_error) {
       console.error('Error parsing config.json:', _error);
       return null;
     }
-  }, [files?.[configFileId]?.text]);
+  }, [configFileId, files]);
 
   const onSliderChange = useCallback(
     (property: string) =>
@@ -78,7 +83,7 @@ export const VisualEditor = () => {
           },
         }));
       },
-    [configData, files, configFileId, setLocalValues],
+    [configData, files, configFileId, submitOperation],
   );
 
   const onCheckboxChange = useCallback(
@@ -109,7 +114,7 @@ export const VisualEditor = () => {
           },
         }));
       },
-    [configData, files, configFileId, setLocalValues],
+    [configData, files, configFileId, submitOperation],
   );
 
   const onTextInputChange = useCallback(
@@ -140,7 +145,7 @@ export const VisualEditor = () => {
           },
         }));
       },
-    [configData, files, configFileId, setLocalValues],
+    [configData, files, configFileId, submitOperation],
   );
 
   const onDropdownChange = useCallback(
@@ -168,7 +173,7 @@ export const VisualEditor = () => {
         },
       }));
     },
-    [configData, files, configFileId, setLocalValues],
+    [configData, files, configFileId, submitOperation],
   );
 
   // Custom dropdown handlers
@@ -228,12 +233,12 @@ export const VisualEditor = () => {
         try {
           const rgbColor = rgb(currentHex);
           hclFromRGB = hcl(rgbColor);
-        } catch (error) {
+        } catch {
           // Fallback to black if conversion fails
           hclFromRGB = hcl('black');
         }
 
-        let hclArray: number[] = [
+        const hclArray: number[] = [
           (localValues[`${property}_h`] as number) ??
             hclFromRGB.h,
           (localValues[`${property}_c`] as number) ??
@@ -262,7 +267,7 @@ export const VisualEditor = () => {
           } else {
             newHex = currentHex;
           }
-        } catch (error) {
+        } catch {
           // Fallback to current color if conversion fails
           newHex = currentHex;
         }
@@ -293,11 +298,20 @@ export const VisualEditor = () => {
           },
         }));
       },
-    [configData, files, configFileId, setLocalValues],
+    [
+      configData,
+      files,
+      configFileId,
+      submitOperation,
+      localValues,
+    ],
   );
 
   const visualEditorWidgets: VisualEditorConfigEntry[] =
-    configData?.visualEditorWidgets ?? [];
+    useMemo(
+      () => configData?.visualEditorWidgets ?? [],
+      [configData],
+    );
 
   // Sync local values with config data when it changes (including remote updates)
   useEffect(() => {
@@ -335,7 +349,7 @@ export const VisualEditor = () => {
                 lch.c;
               newLocalValues[`${widget.property}_l`] =
                 lch.l;
-            } catch (error) {
+            } catch {
               // Fallback values if conversion fails
               newLocalValues[`${widget.property}_l`] = 0;
               newLocalValues[`${widget.property}_c`] = 0;
@@ -346,7 +360,7 @@ export const VisualEditor = () => {
       }
     });
     setLocalValues(newLocalValues);
-  }, [configData]);
+  }, [configData, localValues, visualEditorWidgets]);
 
   if (configFileId === null) {
     return (
@@ -372,8 +386,9 @@ export const VisualEditor = () => {
     return (
       <EmptyState>
         To begin using the visual editor, make sure your
-        config.json has a key called "visualEditorWidgets",
-        whose value is the config for the visual editor.
+        config.json has a key called
+        &quot;visualEditorWidgets&quot;, whose value is the
+        config for the visual editor.
       </EmptyState>
     );
   }
@@ -384,10 +399,11 @@ export const VisualEditor = () => {
   ) {
     return (
       <EmptyState>
-        Your config.json file has "visualEditorWidgets" but
-        it is not an array. Please make sure
-        "visualEditorWidgets" is an array of widget
-        configurations.
+        Your config.json file has
+        &quot;visualEditorWidgets&quot; but it is not an
+        array. Please make sure
+        &quot;visualEditorWidgets&quot; is an array of
+        widget configurations.
       </EmptyState>
     );
   }
@@ -488,7 +504,7 @@ export const VisualEditor = () => {
           try {
             const rgbColor = color(currentHex);
             hclColor = hcl(rgbColor);
-          } catch (error) {
+          } catch {
             hclColor = hcl('black');
           }
 

package/src/client/VZSidebar/VisualEditor/utils.ts

@@ -31,7 +31,7 @@ export const hclOk = (
   try {
     const color = hcl(h, c, l);
     return color.displayable();
-  } catch (e) {
+  } catch {
     return false;
   }
 };

package/src/client/VZSidebar/index.tsx

@@ -167,10 +167,10 @@ export const VZSidebar = ({
   );
   const handleQuestionMarkClick = useCallback(() => {
     setIsDocOpen(true);
-  }, []);
+  }, [setIsDocOpen]);
   const handleSettingsClick = useCallback(() => {
     setIsSettingsOpen(true);
-  }, []);
+  }, [setIsSettingsOpen]);
 
   // State for AI operation feedback
   const [copyButtonText, setCopyButtonText] =
@@ -253,7 +253,7 @@ export const VZSidebar = ({
   // so that they can be displayed in the sidebar.
   useEffect(() => {
     docPresence;
-  }, []);
+  }, [docPresence]);
 
   // Track the presence indicators for display in sidebar
   useEffect(() => {
@@ -281,7 +281,7 @@ export const VZSidebar = ({
         docPresence.off('receive', handleReceive);
       };
     }
-  }, [docPresence]);
+  }, [docPresence, updatePresenceIndicator]);
 
   const [saved, setSaved] = useState(false);
   const [isConnecting, setIsConnecting] = useState(true);
@@ -579,9 +579,10 @@ export const VZSidebar = ({
               {isDragOver ? (
                 <div className="empty drag-over">
                   <div className="empty-text">
-                    It looks like you don't have any files
-                    yet! Click the "Create file" button
-                    above to create your first file.
+                    It looks like you don&apos;t have any
+                    files yet! Click the &quot;Create
+                    file&quot; button above to create your
+                    first file.
                   </div>
                   <div className="empty-text">
                     Drop files here!
@@ -606,9 +607,10 @@ 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
-                    above to create your first file.
+                    It looks like you don&apos;t have any
+                    files yet! Click the &quot;Create
+                    file&quot; button above to create your
+                    first file.
                   </div>
                   <div className="empty-text">
                     Drop files here!