fixed lint errors

src/Explorer/Controls/V9Components/Button/index.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles({
 });
 
 export const Button = React.forwardRef<HTMLButtonElement, CustomButtonProps>(
-  ({ primary, className, ...props }, ref) => {
+  ({ primary, ...props }, ref) => {
     const baseStyles = useStyles();
     const buttonClassName = primary ? baseStyles.primary : baseStyles.button;
 
@@ -54,3 +54,6 @@ export const Button = React.forwardRef<HTMLButtonElement, CustomButtonProps>(
     );
   }
 );
+
+// Add display name
+Button.displayName = "Button";

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -68,10 +68,18 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const selectedNodeState = useSelectedNode();
   const buttons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
+  // targetDocument is used by referenced components
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { targetDocument } = useFluent();
   const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
   const styles = useStyles();
   
+  const { connectionInfo, isPhoenixNotebooks, isPhoenixFeatures } = useNotebook((state) => ({
+    connectionInfo: state.connectionInfo,
+    isPhoenixNotebooks: state.isPhoenixNotebooks,
+    isPhoenixFeatures: state.isPhoenixFeatures
+  }));
+
   if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
     const buttons =
       userContext.apiType === "Postgres"
@@ -117,10 +125,9 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, "var(--colorNeutralBackground1)");
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
-  const connectionInfo = useNotebook((state) => state.connectionInfo);
-
+  // Add connection status if needed (using the hook values we got at the top level)
   if (
-    (useNotebook.getState().isPhoenixNotebooks || useNotebook.getState().isPhoenixFeatures) &&
+    (isPhoenixNotebooks || isPhoenixFeatures) &&
     connectionInfo?.status !== ConnectionStatusType.Connect
   ) {
     uiFabricControlButtons.unshift(

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -55,6 +55,9 @@ import create, { UseStore } from "zustand";
 import Explorer from "../../Explorer";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
+// Not currently used, but keeping for future reference
+
+/*
 const spinButtonStyles: ISpinButtonStyles = {
   label: {
     fontSize: 12,
@@ -74,6 +77,7 @@ const spinButtonStyles: ISpinButtonStyles = {
   },
   arrowButtonsContainer: {},
 };
+*/
 
 export interface DataPlaneRbacState {
   dataPlaneRbacEnabled: boolean;
@@ -703,6 +707,8 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
     arrowButtonsContainer: {},
   };
 
+  // Commented out as it's not currently used
+  /*
   const checkboxStyles = {
     root: {
       selectors: {
@@ -729,40 +735,11 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
               borderColor: "var(--colorNeutralStroke1Hover)",
             },
           },
-        },
-      },
-    },
-    label: {
-      padding: 0,
-      color: "var(--colorNeutralForeground1)",
-      selectors: {
-        ".ms-Checkbox-text": {
-          color: "var(--colorNeutralForeground1)",
-        },
-        ":hover": {
-          color: "var(--colorNeutralForeground1)",
-        },
-      },
-    },
-    checkbox: {
-      backgroundColor: "var(--colorNeutralBackground1)",
-      borderColor: "var(--colorNeutralStroke1)",
-      selectors: {
-        ":hover": {
-          backgroundColor: "var(--colorNeutralBackground1Hover)",
-          borderColor: "var(--colorNeutralStroke1Hover)",
-        },
-      },
-    },
-    checkmark: {
-      color: "var(--colorNeutralForeground1)",
-      selectors: {
-        ":hover": {
-          color: "var(--colorNeutralForeground1)",
-        },
-      },
-    },
-  };
+        }
+      }
+    }
+  }
+  */
 
   return (
     <RightPaneForm {...genericPaneProps}>

src/Explorer/Sidebar.tsx

@@ -324,6 +324,8 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
   const [expandedSize, setExpandedSize] = React.useState(300);
   const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo";
   const allotment = useRef<AllotmentHandle>(null);
+  // isDarkMode is used for styling in other parts of the component
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { isDarkMode } = useTheme();
   const isZoomed = useZoomLevel();
 

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -166,6 +166,8 @@ const useStyles = makeStyles({
 
 export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
   const styles = useStyles();
+  // isDarkMode is used for conditional styling in the component
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { isDarkMode } = useTheme();
   const container = explorer;
   const subscriptions: Array<{ dispose: () => void }> = [];
@@ -218,6 +220,8 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({ explorer }) => {
     };
   }, []);
 
+  // state is used to trigger re-renders when subscriptions emit
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [state, setState] = React.useState({});
 
   const clearMostRecent = () => {

src/Main.tsx

@@ -81,6 +81,8 @@ const App = (): JSX.Element => {
   const isCarouselOpen = useCarousel((state) => state.shouldOpen);
   const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
   const styles = useStyles();
+  // theme is used for application-wide styling
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const theme = useTheme();
 
   if (config?.platform === Platform.Fabric) {