add collapse toggle settings

src/components/CustomNode/TextNode.tsx

@@ -4,6 +4,7 @@ import { NodeData } from "reaflow/dist/types";
 import { ConditionalWrapper, CustomNodeProps } from "src/components/CustomNode";
 import useConfig from "src/hooks/store/useConfig";
 import useGraph from "src/hooks/store/useGraph";
+import useStored from "src/hooks/store/useStored";
 import styled from "styled-components";
 import * as Styled from "./styles";
 
@@ -35,6 +36,7 @@ const TextNode: React.FC<CustomNodeProps<string> & { node: NodeData }> = ({
   y,
 }) => {
   const performanceMode = useConfig((state) => state.performanceMode);
+  const hideCollapse = useStored((state) => state.hideCollapse);
   const expand = useConfig((state) => state.expand);
   const expandNodes = useGraph((state) => state.expandNodes);
   const collapseNodes = useGraph((state) => state.collapseNodes);
@@ -63,7 +65,12 @@ const TextNode: React.FC<CustomNodeProps<string> & { node: NodeData }> = ({
       data-nodeid={node.id}
     >
       <ConditionalWrapper condition={performanceMode}>
-        <Styled.StyledText parent={isParent} width={width} height={height}>
+        <Styled.StyledText
+          hideCollapse={hideCollapse}
+          parent={isParent}
+          width={width}
+          height={height}
+        >
           <Styled.StyledKey
             data-x={x}
             data-y={y}
@@ -76,7 +83,7 @@ const TextNode: React.FC<CustomNodeProps<string> & { node: NodeData }> = ({
           </Styled.StyledKey>
         </Styled.StyledText>
       </ConditionalWrapper>
-      {isParent && (
+      {isParent && !hideCollapse && (
         <StyledExpand onClick={handleExpand}>
           <MdCompareArrows size={18} />
         </StyledExpand>

src/components/CustomNode/styles.tsx

@@ -23,10 +23,11 @@ export const StyledTextWrapper = styled.div`
   cursor: pointer;
 `;
 
-export const StyledText = styled.pre<{
+export const StyledText = styled.div<{
   width: number;
   height: number;
   parent: boolean;
+  hideCollapse: boolean;
 }>`
   display: flex;
   justify-content: center;
@@ -35,7 +36,7 @@ export const StyledText = styled.pre<{
   height: ${({ height }) => height};
   min-height: 50;
   color: ${({ theme }) => theme.TEXT_NORMAL};
-  padding-right: ${({ parent }) => parent && "20px"};
+  padding-right: ${({ parent, hideCollapse }) => parent && !hideCollapse && "20px"};
 `;
 
 export const StyledForeignObject = styled.foreignObject`

src/components/Sidebar/index.tsx

@@ -27,6 +27,7 @@ import useConfig from "src/hooks/store/useConfig";
 import { getNextLayout } from "src/containers/Editor/LiveEditor/helpers";
 import { HiHeart } from "react-icons/hi";
 import shallow from "zustand/shallow";
+import { IoAlertCircleSharp } from "react-icons/io5";
 
 const StyledSidebar = styled.div`
   display: flex;
@@ -143,8 +144,8 @@ export const Sidebar: React.FC = () => {
   const [shareVisible, setShareVisible] = React.useState(false);
   const { push } = useRouter();
 
-  const [expand, performanceMode, layout] = useConfig(
-    (state) => [state.expand, state.performanceMode, state.layout],
+  const [expand, layout] = useConfig(
+    (state) => [state.expand, state.layout],
     shallow
   );
 
@@ -162,19 +163,6 @@ export const Sidebar: React.FC = () => {
     toast(`${expand ? "Collapsed" : "Expanded"} nodes.`);
   };
 
-  const togglePerformance = () => {
-    const toastMsg = performanceMode
-      ? "Disabled Performance Mode\nSearch Node & Save Image enabled."
-      : "Enabled Performance Mode\nSearch Node & Save Image disabled.";
-
-    toast(toastMsg, {
-      icon: <StyledAlertIcon size={36} />,
-      duration: 3000,
-    });
-
-    setConfig("performanceMode", !performanceMode);
-  };
-
   const toggleLayout = () => {
     const nextLayout = getNextLayout(layout);
     setConfig("layout", nextLayout);
@@ -209,15 +197,6 @@ export const Sidebar: React.FC = () => {
             {expand ? <CgArrowsMergeAltH /> : <CgArrowsShrinkH />}
           </StyledElement>
         </Tooltip>
-        <Tooltip
-          title={`${
-            performanceMode ? "Disable" : "Enable"
-          } Performance Mode (Beta)`}
-        >
-          <StyledElement onClick={togglePerformance} beta>
-            <CgPerformance color={performanceMode ? "#0073FF" : undefined} />
-          </StyledElement>
-        </Tooltip>
         <Tooltip title="Save JSON">
           <StyledElement onClick={handleSave}>
             <AiOutlineSave />

src/components/Toggle/index.tsx

@@ -5,7 +5,7 @@ import { IoIosCheckmarkCircle, IoMdCloseCircle } from "react-icons/io";
 interface ToggleProps {
   checked?: boolean;
   children?: React.ReactNode;
-  onChange?: () => void;
+  onChange?: (value: boolean) => void;
 }
 
 const StyledToggleWrapper = styled.div`
@@ -49,7 +49,7 @@ const Toggle: React.FC<ToggleProps> = ({
 
   const handleClick = () => {
     setIsChecked(!isChecked);
-    if (onChange) onChange();
+    if (onChange) onChange(!isChecked);
   };
 
   return (

src/containers/Editor/Settings.tsx

@@ -3,9 +3,10 @@ import toast from "react-hot-toast";
 import { IoAlertCircleSharp } from "react-icons/io5";
 import { Modal } from "src/components/Modal";
 import Toggle from "src/components/Toggle";
-import { useConfig } from "src/hocs/config";
-import { ConfigActionType } from "src/reducer/reducer";
+import useConfig from "src/hooks/store/useConfig";
+import useStored from "src/hooks/store/useStored";
 import styled from "styled-components";
+import shallow from "zustand/shallow";
 
 const StyledToggle = styled(Toggle)`
   flex-flow: row-reverse;
@@ -16,14 +17,25 @@ const StyledAlertIcon = styled(IoAlertCircleSharp)`
   color: ${({ theme }) => theme.ORANGE};
 `;
 
+const StyledModalWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
 export const Settings: React.FC<{
   visible: boolean;
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }> = ({ visible, setVisible }) => {
-  const { settings, dispatch } = useConfig();
+  const performanceMode = useConfig((state) => state.performanceMode);
+  const [toggleHideCollapse, hideCollapse] = useStored(
+    (state) => [state.toggleHideCollapse, state.hideCollapse],
+    shallow
+  );
+  const setConfig = useConfig((state) => state.setConfig);
 
   const togglePerformance = () => {
-    const toastMsg = settings.performance
+    const toastMsg = performanceMode
       ? "Disabled Performance Mode\nSearch Node & Save Image enabled."
       : "Enabled Performance Mode\nSearch Node & Save Image disabled.";
 
@@ -32,19 +44,21 @@ export const Settings: React.FC<{
       duration: 3000,
     });
 
-    dispatch({ type: ConfigActionType.TOGGLE_PERFORMANCE });
+    setConfig("performanceMode", !performanceMode);
   };
 
   return (
     <Modal visible={visible} setVisible={setVisible}>
       <Modal.Header>Settings</Modal.Header>
       <Modal.Content>
-        <StyledToggle
-          onChange={togglePerformance}
-          checked={settings.performance}
-        >
-          Performance Mode (Experimental)
-        </StyledToggle>
+        <StyledModalWrapper>
+          <StyledToggle onChange={toggleHideCollapse} checked={hideCollapse}>
+            Hide Collapse/Expand Button
+          </StyledToggle>
+          <StyledToggle onChange={togglePerformance} checked={performanceMode}>
+            Performance Mode (Experimental)
+          </StyledToggle>
+        </StyledModalWrapper>
       </Modal.Content>
       <Modal.Controls setVisible={setVisible} />
     </Modal>

src/hooks/store/useGraph.tsx

@@ -27,12 +27,11 @@ const initialStates: Graph = {
 const useGraph = create<Graph & GraphActions>((set) => ({
   ...initialStates,
   setGraphValue: (key, value) =>
-    set((state) => ({
-      ...state,
+    set({
       collapsedNodes: [],
       collapsedEdges: [],
       [key]: value,
-    })),
+    }),
   expandNodes: (nodeId) =>
     set((state) => {
       const childrenNodes = findNodeChildren(nodeId, state.nodes, state.edges);

src/hooks/store/useStored.tsx

@@ -17,37 +17,37 @@ function getTomorrow() {
 
 export interface Config {
   lightmode: boolean;
+  hideCollapse: boolean;
   sponsors: {
     users: Sponsor[];
     nextDate: number;
   };
   setSponsors: (sponsors: Sponsor[]) => void;
   setLightTheme: (theme: boolean) => void;
+  toggleHideCollapse: (value: boolean) => void;
 }
 
 const useStored = create(
   persist<Config>(
     (set) => ({
       lightmode: false,
+      hideCollapse: false,
       sponsors: {
         users: [],
         nextDate: Date.now(),
       },
       setLightTheme: (enabled: boolean) =>
-        set((state) => {
-          return {
-            ...state,
-            lightmode: enabled,
-          };
+        set({
+          lightmode: enabled,
         }),
       setSponsors: (users) =>
-        set((state) => ({
-          ...state,
+        set({
           sponsors: {
             users,
             nextDate: getTomorrow(),
           },
-        })),
+        }),
+      toggleHideCollapse: (value: boolean) => set({ hideCollapse: value }),
     }),
     {
       name: "config",