Remove button appearance settings and related code

- Delete button appearance configuration from SettingsMenu - Remove dynamic button display logic from AppHeader - Clean up related code in AppHeaderActions and SettingsStore - Simplify button rendering across components
nodetool-ai · Feb 3, 2025 · fcf21bd · fcf21bd
1 parent eaf0556
commit fcf21bd
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 95 deletions.
diff --git a/web/src/components/menus/SettingsMenu.tsx b/web/src/components/menus/SettingsMenu.tsx
@@ -255,7 +255,6 @@ function SettingsMenu() {
     setSelectionMode,
     setWorkflowLayout,
     setTimeFormat,
-    setButtonAppearance,
     setSelectNodesOnDrag,
     setShowWelcomeOnStartup,
     setEnableComfy,
@@ -272,7 +271,6 @@ function SettingsMenu() {
     setSelectionMode: state.setSelectionMode,
     setWorkflowLayout: state.setWorkflowLayout,
     setTimeFormat: state.setTimeFormat,
-    setButtonAppearance: state.setButtonAppearance,
     setSelectNodesOnDrag: state.setSelectNodesOnDrag,
     setShowWelcomeOnStartup: state.setShowWelcomeOnStartup
   }));
@@ -550,30 +548,6 @@ function SettingsMenu() {
                 </Typography>
               </div>
 
-              <div className="settings-item">
-                <FormControl>
-                  <InputLabel htmlFor={id}>Top Panel Button Display</InputLabel>
-                  <Select
-                    id={id}
-                    labelId={id}
-                    value={settings.buttonAppearance || "both"}
-                    variant="standard"
-                    onChange={(e) =>
-                      setButtonAppearance(
-                        e.target.value as "text" | "icon" | "both"
-                      )
-                    }
-                  >
-                    <MenuItem value={"text"}>Show Text only</MenuItem>
-                    <MenuItem value={"icon"}>Show Icon only</MenuItem>
-                    <MenuItem value={"both"}>Show Text and Icon</MenuItem>
-                  </Select>
-                </FormControl>
-                <Typography className="description">
-                  Change the display of the buttons in the top and center panel.
-                </Typography>
-              </div>
-
               {user && user.auth_token && (
                 <>
                   <Typography variant="h3">Nodetool API</Typography>

diff --git a/web/src/components/panels/AppHeader.tsx b/web/src/components/panels/AppHeader.tsx
@@ -177,35 +177,11 @@ const AppHeader: React.FC<AppHeaderProps> = React.memo(() => {
   const navigate = useNavigate();
   const path = useLocation().pathname;
 
-  const globalButtonAppearance = useSettingsStore(
-    (state) => state.settings.buttonAppearance
-  );
-
-  const [buttonAppearance, setButtonAppearance] = useState(
-    globalButtonAppearance
-  );
-
   const { helpOpen, handleCloseHelp, handleOpenHelp } = useAppHeaderStore();
 
   const { handlePanelToggle, collapsed: panelLeftCollapsed } =
     useResizePanel("left");
 
-  const handleResize = useCallback(() => {
-    if (window.innerWidth <= 1200) {
-      setButtonAppearance("icon");
-    } else {
-      setButtonAppearance(globalButtonAppearance);
-    }
-  }, [globalButtonAppearance]);
-
-  useEffect(() => {
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [handleResize]);
-
   const NavigationButtons = useMemo(
     () => (
       <Box className="nav-buttons">
@@ -225,7 +201,7 @@ const AppHeader: React.FC<AppHeaderProps> = React.memo(() => {
                 : ThemeNodetool.palette.c_white
             }}
           >
-            {buttonAppearance !== "text" && <ExamplesIcon />}
+            <ExamplesIcon />
             Examples
           </Button>
         </Tooltip>
@@ -249,27 +225,25 @@ const AppHeader: React.FC<AppHeaderProps> = React.memo(() => {
                 : ThemeNodetool.palette.c_white
             }}
           >
-            {buttonAppearance !== "text" && (
-              <IconForType
-                iconName="asset"
-                showTooltip={false}
-                svgProps={{
-                  fill: path.startsWith("/assets")
-                    ? ThemeNodetool.palette.c_hl1
-                    : ThemeNodetool.palette.c_white
-                }}
-                containerStyle={{
-                  borderRadius: "0 0 3px 0",
-                  marginLeft: "0.1em",
-                  marginTop: "0"
-                }}
-                bgStyle={{
-                  backgroundColor: "transparent",
-                  width: "30px",
-                  height: "20px"
-                }}
-              />
-            )}
+            <IconForType
+              iconName="asset"
+              showTooltip={false}
+              svgProps={{
+                fill: path.startsWith("/assets")
+                  ? ThemeNodetool.palette.c_hl1
+                  : ThemeNodetool.palette.c_white
+              }}
+              containerStyle={{
+                borderRadius: "0 0 3px 0",
+                marginLeft: "0.1em",
+                marginTop: "0"
+              }}
+              bgStyle={{
+                backgroundColor: "transparent",
+                width: "30px",
+                height: "20px"
+              }}
+            />
             Assets
           </Button>
         </Tooltip>
@@ -307,7 +281,7 @@ const AppHeader: React.FC<AppHeaderProps> = React.memo(() => {
         )}
       </Box>
     ),
-    [path, buttonAppearance, navigate, panelLeftCollapsed, handlePanelToggle]
+    [path, navigate, panelLeftCollapsed, handlePanelToggle]
   );
 
   const RightSideButtons = useMemo(
@@ -357,14 +331,7 @@ const AppHeader: React.FC<AppHeaderProps> = React.memo(() => {
         <SettingsMenu />
       </Box>
     ),
-    [
-      path,
-      buttonAppearance,
-      helpOpen,
-      handleCloseHelp,
-      navigate,
-      handleOpenHelp
-    ]
+    [path, helpOpen, handleCloseHelp, navigate, handleOpenHelp]
   );
 
   return (

diff --git a/web/src/components/panels/AppHeaderActions.tsx b/web/src/components/panels/AppHeaderActions.tsx
@@ -337,9 +337,6 @@ const RunAsAppButton = memo(() => {
 const AppHeaderActions: React.FC = () => {
   const openNodeMenu = useNodeMenuStore((state) => state.openNodeMenu);
   const path = useLocation().pathname;
-  const buttonAppearance = useSettingsStore(
-    (state) => state.settings.buttonAppearance
-  );
   const { autoLayout } = useNodes((state) => ({
     autoLayout: state.autoLayout
   }));

diff --git a/web/src/stores/SettingsStore.ts b/web/src/stores/SettingsStore.ts
@@ -12,7 +12,6 @@ export interface Settings {
   assetsOrder: "name" | "date";
   assetItemSize: number;
   timeFormat: "12h" | "24h";
-  buttonAppearance: "text" | "icon" | "both";
   alertBeforeTabClose: boolean;
   selectNodesOnDrag: boolean;
   showWelcomeOnStartup: boolean;
@@ -35,7 +34,6 @@ interface SettingsStore {
   setAssetsOrder: (value: "name" | "date") => void;
   setAssetItemSize: (value: number) => void;
   setTimeFormat: (value: "12h" | "24h") => void;
-  setButtonAppearance: (value: "text" | "icon" | "both") => void;
   setAlertBeforeTabClose: (value: boolean) => void;
   setSelectNodesOnDrag: (value: boolean) => void;
   setShowWelcomeOnStartup: (value: boolean) => void;
@@ -52,7 +50,6 @@ export const defaultSettings: Settings = {
   assetsOrder: "name",
   assetItemSize: 2,
   timeFormat: "12h",
-  buttonAppearance: "both",
   alertBeforeTabClose: true,
   selectNodesOnDrag: false,
   showWelcomeOnStartup: true
@@ -152,14 +149,6 @@ export const useSettingsStore = create<SettingsStore>()(
 
       resetSettings: () => set({ settings: { ...defaultSettings } }),
 
-      setButtonAppearance: (value: "text" | "icon" | "both") =>
-        set((state) => ({
-          settings: {
-            ...state.settings,
-            buttonAppearance: value || defaultSettings.buttonAppearance
-          }
-        })),
-
       setAlertBeforeTabClose: (value: boolean) =>
         set((state) => ({
           settings: {