chore: improve lint setup

- update eslint config
- merged eslint rules for JS and TS to avoid duplicates
- extended stricter lint ruleset from typescript-eslint
- corrected wrong setup for certain eslint rulesets
- opt in to reportUnusedDisableDirectives config option
- fix or disable a lot of lint issues throughout codebase
- remove trailingComma: all from prettier config which is default in prettier v3
- add volta configuration to package.json to autoload correct node and pnpm versions
- upgrade all eslint and prettier related dependencies to latest
- remove config options from settings.json which are default anyways
- remove config options from settings.json which are outdated/unknown
- set up prettier as default formatter in settings.json

17 files changed, 153 insertions, 175 deletions

diff --git a/src/components/AppUpdateInfoBar.tsx b/src/components/AppUpdateInfoBar.tsx
index b27578d10..b8e1bb61e 100644
--- a/src/components/AppUpdateInfoBar.tsx
+++ b/src/components/AppUpdateInfoBar.tsx
@@ -38,6 +38,7 @@ const AppUpdateInfoBar = (props: IProps) => {
       type="primary"
       ctaLabel={intl.formatMessage(messages.buttonInstallUpdate)}
       onClick={event => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         !isWinPortable && onInstallUpdate(event);
       }}
       onHide={onHide}
diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx
index 0a95b0565..eaa04256c 100644
--- a/src/components/auth/Login.tsx
+++ b/src/components/auth/Login.tsx
@@ -68,7 +68,6 @@ interface IProps extends WrappedComponentProps {
   isTokenExpired: boolean;
   isServerLogout: boolean;
   signupRoute: string;
-  // eslint-disable-next-line react/no-unused-prop-types
   passwordRoute: string; // TODO: Uncomment this line after fixing password recovery in-app
   error: GlobalError;
 }
diff --git a/src/components/auth/Welcome.tsx b/src/components/auth/Welcome.tsx
index 1aa8da4d6..047512ea4 100644
--- a/src/components/auth/Welcome.tsx
+++ b/src/components/auth/Welcome.tsx
@@ -44,10 +44,6 @@ interface IProps extends Partial<StoresProps>, WrappedComponentProps {
 @inject('actions')
 @observer
 class Welcome extends Component<IProps> {
-  constructor(props: IProps) {
-    super(props);
-  }
-
   useLocalServer(): void {
     serverlessLogin(this.props.actions);
   }
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 2b1e87023..ceb9cfff9 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -205,133 +205,131 @@ class Sidebar extends Component<IProps, IState> {
           hibernateService={this.props.hibernateService}
           wakeUpService={this.props.wakeUpService}
         />
-        <>
-          {numberActiveButtons <= 1 || hideCollapseButton ? null : (
-            <button
-              type="button"
-              onClick={() => toggleCollapseMenu()}
-              className="sidebar__button sidebar__button--hamburger-menu"
-            >
-              {isMenuCollapsed ? <Icon icon={mdiMenu} size={1.5} /> : null}
+        {numberActiveButtons <= 1 || hideCollapseButton ? null : (
+          <button
+            type="button"
+            onClick={() => toggleCollapseMenu()}
+            className="sidebar__button sidebar__button--hamburger-menu"
+          >
+            {isMenuCollapsed ? <Icon icon={mdiMenu} size={1.5} /> : null}
 
-              {!isMenuCollapsed && !useHorizontalStyle ? (
-                <Icon icon={mdiChevronDown} size={1.5} />
-              ) : null}
+            {!isMenuCollapsed && !useHorizontalStyle ? (
+              <Icon icon={mdiChevronDown} size={1.5} />
+            ) : null}
 
-              {!isMenuCollapsed && useHorizontalStyle ? (
-                <Icon icon={mdiChevronRight} size={1.5} />
-              ) : null}
-            </button>
-          )}
-          {!hideRecipesButton && !isMenuCollapsed ? (
-            <button
-              type="button"
-              onClick={() => openSettings({ path: 'recipes' })}
-              className="sidebar__button sidebar__button--new-service"
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
-                messages.addNewService,
-              )} (${addNewServiceShortcutKey(false)})`}
-            >
-              <Icon icon={mdiPlusBox} size={1.5} />
-            </button>
-          ) : null}
-          {!hideSplitModeButton && !isMenuCollapsed ? (
-            <button
-              type="button"
-              onClick={() => {
-                actions!.settings.update({
-                  type: 'app',
-                  data: {
-                    splitMode: !splitMode,
-                  },
-                });
-              }}
-              className="sidebar__button sidebar__button--split-mode-toggle"
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
-                messages.splitModeToggle,
-              )} (${splitModeToggleShortcutKey(false)})`}
-            >
-              <Icon icon={mdiViewSplitVertical} size={1.5} />
-            </button>
-          ) : null}
-          {!hideWorkspacesButton && !isMenuCollapsed ? (
-            <button
-              type="button"
-              onClick={() => {
-                toggleWorkspaceDrawer();
-                this.updateToolTip();
-              }}
-              className={`sidebar__button sidebar__button--workspaces ${
-                isWorkspaceDrawerOpen ? 'is-active' : ''
-              }`}
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
-                workspaceToggleMessage,
-              )} (${workspaceToggleShortcutKey(false)})`}
-            >
-              <Icon icon={mdiViewGrid} size={1.5} />
-            </button>
-          ) : null}
-          {!hideNotificationsButton && !isMenuCollapsed ? (
-            <button
-              type="button"
-              onClick={() => {
-                toggleMuteApp();
-                this.updateToolTip();
-              }}
-              className={`sidebar__button sidebar__button--audio ${
-                isAppMuted ? 'is-muted' : ''
-              }`}
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
-                isAppMuted ? messages.unmute : messages.mute,
-              )} (${muteFerdiumShortcutKey(false)})`}
-            >
-              <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} />
-            </button>
-          ) : null}
-          {todosStore.isFeatureEnabledByUser && !isMenuCollapsed ? (
-            <button
-              type="button"
-              onClick={() => {
-                todoActions.toggleTodosPanel();
-                this.updateToolTip();
-              }}
-              disabled={isTodosServiceActive}
-              className={`sidebar__button sidebar__button--todos ${
-                todosStore.isTodosPanelVisible ? 'is-active' : ''
-              }`}
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
-                todosToggleMessage,
-              )} (${todosToggleShortcutKey(false)})`}
-            >
-              <Icon icon={mdiCheckAll} size={1.5} />
-            </button>
-          ) : null}
-          {stores!.settings.all.app.lockingFeatureEnabled ? (
-            <button
-              type="button"
-              className="sidebar__button"
-              onClick={() => {
-                actions!.settings.update({
-                  type: 'app',
-                  data: {
-                    locked: true,
-                  },
-                });
-              }}
-              data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
-                messages.lockFerdium,
-              )} (${lockFerdiumShortcutKey(false)})`}
-            >
-              <Icon icon={mdiLock} size={1.5} />
-            </button>
-          ) : null}
-        </>
+            {!isMenuCollapsed && useHorizontalStyle ? (
+              <Icon icon={mdiChevronRight} size={1.5} />
+            ) : null}
+          </button>
+        )}
+        {!hideRecipesButton && !isMenuCollapsed ? (
+          <button
+            type="button"
+            onClick={() => openSettings({ path: 'recipes' })}
+            className="sidebar__button sidebar__button--new-service"
+            data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-content={`${intl.formatMessage(
+              messages.addNewService,
+            )} (${addNewServiceShortcutKey(false)})`}
+          >
+            <Icon icon={mdiPlusBox} size={1.5} />
+          </button>
+        ) : null}
+        {!hideSplitModeButton && !isMenuCollapsed ? (
+          <button
+            type="button"
+            onClick={() => {
+              actions!.settings.update({
+                type: 'app',
+                data: {
+                  splitMode: !splitMode,
+                },
+              });
+            }}
+            className="sidebar__button sidebar__button--split-mode-toggle"
+            data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-content={`${intl.formatMessage(
+              messages.splitModeToggle,
+            )} (${splitModeToggleShortcutKey(false)})`}
+          >
+            <Icon icon={mdiViewSplitVertical} size={1.5} />
+          </button>
+        ) : null}
+        {!hideWorkspacesButton && !isMenuCollapsed ? (
+          <button
+            type="button"
+            onClick={() => {
+              toggleWorkspaceDrawer();
+              this.updateToolTip();
+            }}
+            className={`sidebar__button sidebar__button--workspaces ${
+              isWorkspaceDrawerOpen ? 'is-active' : ''
+            }`}
+            data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-content={`${intl.formatMessage(
+              workspaceToggleMessage,
+            )} (${workspaceToggleShortcutKey(false)})`}
+          >
+            <Icon icon={mdiViewGrid} size={1.5} />
+          </button>
+        ) : null}
+        {!hideNotificationsButton && !isMenuCollapsed ? (
+          <button
+            type="button"
+            onClick={() => {
+              toggleMuteApp();
+              this.updateToolTip();
+            }}
+            className={`sidebar__button sidebar__button--audio ${
+              isAppMuted ? 'is-muted' : ''
+            }`}
+            data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-content={`${intl.formatMessage(
+              isAppMuted ? messages.unmute : messages.mute,
+            )} (${muteFerdiumShortcutKey(false)})`}
+          >
+            <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} />
+          </button>
+        ) : null}
+        {todosStore.isFeatureEnabledByUser && !isMenuCollapsed ? (
+          <button
+            type="button"
+            onClick={() => {
+              todoActions.toggleTodosPanel();
+              this.updateToolTip();
+            }}
+            disabled={isTodosServiceActive}
+            className={`sidebar__button sidebar__button--todos ${
+              todosStore.isTodosPanelVisible ? 'is-active' : ''
+            }`}
+            data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-content={`${intl.formatMessage(
+              todosToggleMessage,
+            )} (${todosToggleShortcutKey(false)})`}
+          >
+            <Icon icon={mdiCheckAll} size={1.5} />
+          </button>
+        ) : null}
+        {stores!.settings.all.app.lockingFeatureEnabled ? (
+          <button
+            type="button"
+            className="sidebar__button"
+            onClick={() => {
+              actions!.settings.update({
+                type: 'app',
+                data: {
+                  locked: true,
+                },
+              });
+            }}
+            data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-content={`${intl.formatMessage(
+              messages.lockFerdium,
+            )} (${lockFerdiumShortcutKey(false)})`}
+          >
+            <Icon icon={mdiLock} size={1.5} />
+          </button>
+        ) : null}
         {this.state.tooltipEnabled && (
           <ReactTooltip
             id="tooltip-sidebar-button"
diff --git a/src/components/services/tabs/TabBarSortableList.tsx b/src/components/services/tabs/TabBarSortableList.tsx
index 5f711c30d..a30587470 100644
--- a/src/components/services/tabs/TabBarSortableList.tsx
+++ b/src/components/services/tabs/TabBarSortableList.tsx
@@ -51,7 +51,7 @@ class TabBarSortableList extends Component<IProps> {
         {services.map((service, index) => (
           <TabItem
             key={service.id}
-            // @ts-ignore
+            // @ts-expect-error Fix me
             clickHandler={() => setActive({ serviceId: service.id })}
             service={service}
             index={index}
diff --git a/src/components/services/tabs/TabItem.tsx b/src/components/services/tabs/TabItem.tsx
index c25af4427..287dedfcb 100644
--- a/src/components/services/tabs/TabItem.tsx
+++ b/src/components/services/tabs/TabItem.tsx
@@ -234,7 +234,7 @@ class TabItem extends Component<IProps, IState> {
     } = this.props;
     const { intl } = this.props;
 
-    const menuTemplate: Array<MenuItemConstructorOptions> = [
+    const menuTemplate: MenuItemConstructorOptions[] = [
       {
         label: service.name || service.recipe.name,
         enabled: false,
@@ -295,7 +295,7 @@ class TabItem extends Component<IProps, IState> {
             ? messages.wakeUpService
             : messages.hibernateService,
         ),
-        // eslint-disable-next-line no-confusing-arrow
+
         click: () =>
           service.isHibernating ? wakeUpService() : hibernateService(),
         enabled: service.isEnabled && service.canHibernate,
@@ -311,7 +311,7 @@ class TabItem extends Component<IProps, IState> {
       {
         label: intl.formatMessage(messages.deleteService),
         click: () => {
-          // @ts-ignore
+          // @ts-expect-error Fix me
           const selection = dialog.showMessageBoxSync(app.mainWindow, {
             type: 'question',
             message: intl.formatMessage(messages.deleteService),
@@ -417,6 +417,6 @@ class TabItem extends Component<IProps, IState> {
 }
 
 export default injectIntl(
-  // @ts-ignore
+  // @ts-expect-error Fix me
   SortableElement(injectSheet(styles, { injectTheme: true })(TabItem)),
 );
diff --git a/src/components/services/tabs/Tabbar.tsx b/src/components/services/tabs/Tabbar.tsx
index f09877b2f..d19a4b8de 100644
--- a/src/components/services/tabs/Tabbar.tsx
+++ b/src/components/services/tabs/Tabbar.tsx
@@ -99,7 +99,7 @@ class TabBar extends Component<IProps> {
     return (
       <div>
         <TabBarSortableList
-          // @ts-ignore
+          // @ts-expect-error Fix me
           services={services}
           setActive={setActive}
           onSortEnd={this.onSortEnd}
diff --git a/src/components/settings/navigation/SettingsNavigation.tsx b/src/components/settings/navigation/SettingsNavigation.tsx
index 6ffaa411f..66763c6a6 100644
--- a/src/components/settings/navigation/SettingsNavigation.tsx
+++ b/src/components/settings/navigation/SettingsNavigation.tsx
@@ -53,10 +53,6 @@ interface IProps extends Partial<StoresProps>, WrappedComponentProps {
 @inject('stores', 'actions')
 @observer
 class SettingsNavigation extends Component<IProps> {
-  constructor(props: IProps) {
-    super(props);
-  }
-
   handleLogout(): void {
     const isUsingWithoutAccount =
       this.props.stores!.settings.app.server === LOCAL_SERVER;
@@ -186,7 +182,7 @@ class SettingsNavigation extends Component<IProps> {
         <span className="settings-navigation__expander" />
         <button
           type="button"
-          // @ts-ignore
+          // @ts-expect-error  Fix me
           to="/auth/logout" // TODO: [TS DEBT] Need to check if button take this prop
           className="settings-navigation__link"
           onClick={this.handleLogout.bind(this)}
diff --git a/src/components/settings/supportFerdium/SupportFerdiumDashboard.tsx b/src/components/settings/supportFerdium/SupportFerdiumDashboard.tsx
index f3b7c718c..065690fb5 100644
--- a/src/components/settings/supportFerdium/SupportFerdiumDashboard.tsx
+++ b/src/components/settings/supportFerdium/SupportFerdiumDashboard.tsx
@@ -50,7 +50,7 @@ const SupportFerdiumDashboard = () => {
                 src="https://img.shields.io/github/stars/ferdium/ferdium-app?style=social"
               />
             </a>
-            <a target="_blank" href={FERDIUM_TRANSLATION}>
+            <a target="_blank" href={FERDIUM_TRANSLATION} rel="noreferrer">
               <img
                 src="https://badges.crowdin.net/ferdium-app/localized.svg"
                 alt="Crowdin"
diff --git a/src/components/ui/AppLoader/index.tsx b/src/components/ui/AppLoader/index.tsx
index f4d9b8e73..64c840aaa 100644
--- a/src/components/ui/AppLoader/index.tsx
+++ b/src/components/ui/AppLoader/index.tsx
@@ -61,18 +61,17 @@ class AppLoader extends Component<IProps, IState> {
         className={classes.component}
         spinnerColor={theme.colorAppLoaderSpinner}
       >
-        {texts &&
-          texts.map((text, i) => (
-            <span
-              key={text}
-              className={classnames({
-                [`${classes.slogan}`]: true,
-                [`${classes.visible}`]: step === i,
-              })}
-            >
-              {text}
-            </span>
-          ))}
+        {texts?.map((text, i) => (
+          <span
+            key={text}
+            className={classnames({
+              [`${classes.slogan}`]: true,
+              [`${classes.visible}`]: step === i,
+            })}
+          >
+            {text}
+          </span>
+        ))}
       </FullscreenLoader>
     );
   }
diff --git a/src/components/ui/Link.tsx b/src/components/ui/Link.tsx
index b5890ebd1..a9a429d3a 100644
--- a/src/components/ui/Link.tsx
+++ b/src/components/ui/Link.tsx
@@ -20,10 +20,6 @@ interface IProps extends Partial<StoresProps> {
 @inject('stores')
 @observer
 class Link extends Component<IProps> {
-  constructor(props: IProps) {
-    super(props);
-  }
-
   onClick(e: MouseEvent<HTMLAnchorElement>): void {
     const { disabled = false, target = '', to } = this.props;
     if (disabled) {
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index 8ae2945ce..a2ed4216f 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -24,10 +24,6 @@ class Select extends Component<IProps> {
   private element: RefObject<HTMLSelectElement> =
     createRef<HTMLSelectElement>();
 
-  constructor(props: IProps) {
-    super(props);
-  }
-
   multipleChange(e: ChangeEvent<HTMLSelectElement>): void {
     e.preventDefault();
     if (!this.element.current) {
diff --git a/src/components/ui/Tabs/Tabs.tsx b/src/components/ui/Tabs/Tabs.tsx
index 2c34d7e24..d7f75c8b8 100644
--- a/src/components/ui/Tabs/Tabs.tsx
+++ b/src/components/ui/Tabs/Tabs.tsx
@@ -41,6 +41,7 @@ class Tab extends Component<IProps, IState> {
         <div className="content-tabs__tabs">
           {Children.map(children, (child, i) => (
             <button
+              // eslint-disable-next-line react/no-array-index-key
               key={i}
               className={classnames({
                 'content-tabs__item': true,
@@ -56,6 +57,7 @@ class Tab extends Component<IProps, IState> {
         <div className="content-tabs__content">
           {Children.map(children, (child, i) => (
             <div
+              // eslint-disable-next-line react/no-array-index-key
               key={i}
               className={classnames({
                 'content-tabs__item': true,
diff --git a/src/components/ui/WebviewLoader/index.tsx b/src/components/ui/WebviewLoader/index.tsx
index 81923b6ca..c4e9c724c 100644
--- a/src/components/ui/WebviewLoader/index.tsx
+++ b/src/components/ui/WebviewLoader/index.tsx
@@ -32,7 +32,7 @@ class WebviewLoader extends Component<IProps> {
     return (
       <FullscreenLoader
         className={classes.component}
-        title={`${intl.formatMessage(messages.loading, { service: name })}`}
+        title={intl.formatMessage(messages.loading, { service: name })}
         loaded={loaded}
       />
     );
diff --git a/src/components/ui/colorPickerInput/index.tsx b/src/components/ui/colorPickerInput/index.tsx
index 9bab6efec..2367175bd 100644
--- a/src/components/ui/colorPickerInput/index.tsx
+++ b/src/components/ui/colorPickerInput/index.tsx
@@ -25,7 +25,7 @@ class ColorPickerInput extends Component<IProps> {
 
   componentDidMount(): void {
     const { focus = false } = this.props;
-    if (focus && this.inputElement && this.inputElement.current) {
+    if (focus && this.inputElement?.current) {
       this.inputElement.current.focus();
     }
   }
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx
index bebd8adcf..424190a6a 100644
--- a/src/components/ui/headline/index.tsx
+++ b/src/components/ui/headline/index.tsx
@@ -67,12 +67,11 @@ class HeadlineComponent extends Component<IProps> {
 }
 
 const Headline = injectStyle(styles, { injectTheme: true })(HeadlineComponent);
-const createH = (level: number) => (props: Omit<IProps, 'classes'>) =>
-  (
-    <Headline level={level} {...props}>
-      {props.children}
-    </Headline>
-  );
+const createH = (level: number) => (props: Omit<IProps, 'classes'>) => (
+  <Headline level={level} {...props}>
+    {props.children}
+  </Headline>
+);
 
 export const H1 = createH(1);
 export const H2 = createH(2);
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
index 017de5423..902eb7748 100644
--- a/src/components/ui/select/index.tsx
+++ b/src/components/ui/select/index.tsx
@@ -301,11 +301,7 @@ class SelectComponent extends Component<IProps, IState> {
         this.select(Object.keys(options!)[selected]);
       }
 
-      if (
-        this.activeOptionRef?.current &&
-        this.scrollContainerRef &&
-        this.scrollContainerRef.current
-      ) {
+      if (this.activeOptionRef?.current && this.scrollContainerRef?.current) {
         const containerTopOffset = this.scrollContainerRef.current.offsetTop;
         const optionTopOffset = this.activeOptionRef.current.offsetTop;