From 6d97b1241dfe0809b0571aafc45852919bea58f5 Mon Sep 17 00:00:00 2001
From: Javier Izquierdo Hernandez <javizqh@gmail.com>
Date: Fri, 10 Jan 2025 14:55:12 +0100
Subject: [PATCH] Improving accent color

---
 frontend/src/App.tsx                          |  7 ---
 .../components/file_browser/FileBrowser.js    |  6 ---
 .../file_explorer/FileExplorer.jsx            |  9 +---
 .../file_explorer/MoreActionsMenu.jsx         |  1 -
 .../{TreeNode.jsx => TreeNode.tsx}            | 43 ++++++++++++-------
 frontend/src/components/options/Options.tsx   |  8 ++--
 .../settings_popup/SettingsModal.jsx          |  8 +---
 7 files changed, 34 insertions(+), 48 deletions(-)
 rename frontend/src/components/file_browser/file_explorer/{TreeNode.jsx => TreeNode.tsx} (67%)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fac959b6d..43f55d933 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -25,16 +25,12 @@ const App = ({ isUnibotics }: { isUnibotics: boolean }) => {
   const [forceSaveCurrent, setForcedSaveCurrent] = useState<boolean>(false);
   const [currentProjectname, setCurrentProjectname] = useState<string>("");
   const [currentUniverseName, setCurrentUniverseName] = useState<string>("");
-  const [actionNodesData, setActionNodesData] = useState<Record<string, any>>(
-    {},
-  );
   const [saveCurrentDiagram, setSaveCurrentDiagram] = useState<boolean>(false);
   const [updateFileExplorer, setUpdateFileExplorer] = useState<boolean>(false);
   const [isErrorModalOpen, setErrorModalOpen] = useState<boolean>(false);
   const [projectChanges, setProjectChanges] = useState<boolean>(false);
   const [gazeboEnabled, setGazeboEnabled] = useState<boolean>(false);
   const [manager, setManager] = useState<CommsManager | null>(null);
-  const [diagramEditorReady, setDiagramEditorReady] = useState<boolean>(false);
   const [showSim, setSimVisible] = useState<boolean>(false);
   const [showTerminal, setTerminalVisible] = useState<boolean>(false);
 
@@ -190,9 +186,6 @@ const App = ({ isUnibotics }: { isUnibotics: boolean }) => {
                 currentFilename={currentFilename}
                 currentProjectname={currentProjectname}
                 setProjectChanges={setProjectChanges}
-                actionNodesData={actionNodesData}
-                showAccentColor={"editorShowAccentColors"}
-                diagramEditorReady={diagramEditorReady}
                 setAutosave={setAutosave}
                 forceSaveCurrent={forceSaveCurrent}
                 setForcedSaveCurrent={setForcedSaveCurrent}
diff --git a/frontend/src/components/file_browser/FileBrowser.js b/frontend/src/components/file_browser/FileBrowser.js
index 8493066ae..0d81b7f01 100644
--- a/frontend/src/components/file_browser/FileBrowser.js
+++ b/frontend/src/components/file_browser/FileBrowser.js
@@ -41,9 +41,6 @@ const FileBrowser = ({
   currentFilename,
   currentProjectname,
   setProjectChanges,
-  actionNodesData,
-  showAccentColor,
-  diagramEditorReady,
   setAutosave,
   forceSaveCurrent,
   setForcedSaveCurrent,
@@ -395,9 +392,6 @@ const FileBrowser = ({
           currentFilename={currentFilename}
           currentProjectname={currentProjectname}
           setSelectedEntry={setSelectedEntry}
-          actionNodesData={actionNodesData}
-          showAccentColor={showAccentColor}
-          diagramEditorReady={diagramEditorReady}
           fileList={fileList}
           fetchFileList={fetchFileList}
           onDelete={handleDeleteModal}
diff --git a/frontend/src/components/file_browser/file_explorer/FileExplorer.jsx b/frontend/src/components/file_browser/file_explorer/FileExplorer.jsx
index 51d7cdc8b..de716d32e 100644
--- a/frontend/src/components/file_browser/file_explorer/FileExplorer.jsx
+++ b/frontend/src/components/file_browser/file_explorer/FileExplorer.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import "./FileExplorer.css";
-import TreeNode from "./TreeNode.jsx";
+import TreeNode from "./TreeNode";
 import MoreActionsMenu, { ContextMenuProps } from "./MoreActionsMenu.jsx";
 
 const FileExplorer = ({
@@ -9,9 +9,6 @@ const FileExplorer = ({
   currentFilename,
   currentProjectname,
   setSelectedEntry,
-  actionNodesData,
-  showAccentColor,
-  diagramEditorReady,
   fileList,
   fetchFileList,
   onDelete,
@@ -65,9 +62,6 @@ const FileExplorer = ({
             depth={0}
             parentGroup=""
             currentFilename={currentFilename}
-            showAccentColor={showAccentColor}
-            diagramEditorReady={diagramEditorReady}
-            actionNodesData={actionNodesData}
             handleFileClick={handleFileClick}
             handleFolderClick={handleFolderClick}
             menuProps={MenuProps}
@@ -76,7 +70,6 @@ const FileExplorer = ({
         {showMenu && (
           <MoreActionsMenu
             menuProps={MenuProps}
-            actionNodesData={actionNodesData}
             onDelete={onDelete}
             onCreateFile={onCreateFile}
             onCreateFolder={onCreateFolder}
diff --git a/frontend/src/components/file_browser/file_explorer/MoreActionsMenu.jsx b/frontend/src/components/file_browser/file_explorer/MoreActionsMenu.jsx
index 3f756d6d4..bc63ce09e 100644
--- a/frontend/src/components/file_browser/file_explorer/MoreActionsMenu.jsx
+++ b/frontend/src/components/file_browser/file_explorer/MoreActionsMenu.jsx
@@ -4,7 +4,6 @@ import "./MoreActionsMenu.css";
 
 function MoreActionsMenu({
   menuProps,
-  actionNodesData,
   onDelete,
   onCreateFile,
   onCreateFolder,
diff --git a/frontend/src/components/file_browser/file_explorer/TreeNode.jsx b/frontend/src/components/file_browser/file_explorer/TreeNode.tsx
similarity index 67%
rename from frontend/src/components/file_browser/file_explorer/TreeNode.jsx
rename to frontend/src/components/file_browser/file_explorer/TreeNode.tsx
index 2cd5abc45..cd2dc931a 100644
--- a/frontend/src/components/file_browser/file_explorer/TreeNode.jsx
+++ b/frontend/src/components/file_browser/file_explorer/TreeNode.tsx
@@ -1,22 +1,40 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 
 import { ReactComponent as ActionIcon } from "./img/action.svg";
 import FileIcon from "./FileIcon.jsx";
+import { OptionsContext } from "../../options/Options";
+import { ContextMenuProps } from "./MoreActionsMenu";
+import {
+  getActionFrame,
+} from "../../helper/TreeEditorHelper";
+
+interface Entry {
+  name: string;
+  is_dir: boolean;
+  path: string;
+  files: Entry[];
+}
 
 function TreeNode({
   node,
   depth,
   parentGroup,
   currentFilename,
-  showAccentColor,
-  diagramEditorReady,
-  actionNodesData,
   handleFileClick,
   handleFolderClick,
   menuProps,
+}: {
+  node: Entry;
+  depth: number;
+  parentGroup: string;
+  currentFilename: string;
+  handleFileClick: Function;
+  handleFolderClick: Function;
+  menuProps: ContextMenuProps;
 }) {
-  const [isCollapsed, setCollapsed] = useState(false);
-  const [group, setGroup] = useState(parentGroup);
+  const [isCollapsed, setCollapsed] = useState<boolean>(false);
+  const [group, setGroup] = useState<string>(parentGroup);
+  const settings = React.useContext(OptionsContext);
 
   useEffect(() => {
     if (node.is_dir) {
@@ -25,7 +43,7 @@ function TreeNode({
       }
     }
   }, []);
-
+  
   const handleClick = () => {
     if (node.is_dir) {
       setCollapsed(!isCollapsed);
@@ -61,17 +79,15 @@ function TreeNode({
               menuProps.showMoreActionsMenu(
                 e,
                 node,
-                parentGroup === "" ? group : parentGroup,
+                parentGroup === "" ? group : parentGroup
               );
             }}
           />
-          {showAccentColor && diagramEditorReady && (
+          {settings.editorShowAccentColors.value && (
             <div
               className="bt-accent-color"
               style={{
-                backgroundColor: actionNodesData[node.name.replace(".py", "")]
-                  ? actionNodesData[node.name.replace(".py", "")]["color"]
-                  : "none",
+                backgroundColor: getActionFrame(node.name.replace(".py", "")) ? getActionFrame(node.name.replace(".py", ""))?.getColor() : "none",
               }}
             />
           )}
@@ -84,9 +100,6 @@ function TreeNode({
             depth={depth + 1}
             parentGroup={group}
             currentFilename={currentFilename}
-            showAccentColor={showAccentColor}
-            diagramEditorReady={diagramEditorReady}
-            actionNodesData={actionNodesData}
             handleFileClick={handleFileClick}
             handleFolderClick={handleFolderClick}
             menuProps={menuProps}
diff --git a/frontend/src/components/options/Options.tsx b/frontend/src/components/options/Options.tsx
index 1f4daf768..ff3d6c4fd 100644
--- a/frontend/src/components/options/Options.tsx
+++ b/frontend/src/components/options/Options.tsx
@@ -3,8 +3,8 @@ import { createContext, useState } from "react";
 const OptionsContext = createContext<SettingsData>({
   editorShowAccentColors: {
     setter: () => {},
-    value: true,
-    default_value: true,
+    value: false,
+    default_value: false,
   },
   theme: { setter: () => {}, value: "dark", default_value: "dark" },
   btOrder: {
@@ -30,7 +30,7 @@ export interface SettingsData {
 
 const OptionsProvider = ({ children }: { children: any }) => {
   // TODO: try to not repeat the default values
-  const [editorShowAccentColors, setEditorShowAccentColors] = useState(true);
+  const [editorShowAccentColors, setEditorShowAccentColors] = useState(false);
   const [theme, setTheme] = useState("dark");
   const [btOrder, setBtOrder] = useState("bottom-to-top");
 
@@ -39,7 +39,7 @@ const OptionsProvider = ({ children }: { children: any }) => {
     editorShowAccentColors: {
       setter: setEditorShowAccentColors,
       value: editorShowAccentColors,
-      default_value: true,
+      default_value: false,
     },
     theme: { setter: setTheme, value: theme, default_value: "dark" },
     btOrder: {
diff --git a/frontend/src/components/settings_popup/SettingsModal.jsx b/frontend/src/components/settings_popup/SettingsModal.jsx
index 8d92ebd77..25005aff6 100644
--- a/frontend/src/components/settings_popup/SettingsModal.jsx
+++ b/frontend/src/components/settings_popup/SettingsModal.jsx
@@ -17,15 +17,9 @@ import { OptionsContext } from "../options/Options";
 import { saveProjectConfig } from "./../../api_helper/TreeWrapper";
 
 const SettingsModal = ({ onSubmit, isOpen, onClose, currentProjectname }) => {
-  const [color, setColor] = useColor("rgb(128 0 128)");
-  const [open, setOpen] = useState(false);
-
+  // const [color, setColor] = useColor("rgb(128 0 128)");
   const settings = React.useContext(OptionsContext);
 
-  useEffect(() => {
-    // Load settings
-  }, [isOpen]);
-
   // useEffect(() => {
   //   console.log("rgb("+Math.round(color.rgb.r)+","+Math.round(color.rgb.g)+","+Math.round(color.rgb.b)+")")
   //   document.documentElement.style.setProperty("--header", "rgb("+Math.round(color.rgb.r)+","+Math.round(color.rgb.g)+","+Math.round(color.rgb.b)+")");