fix: #3104 hide help & closed accounts features

src/extension/features/general/hide-closed-accounts/HideClosedButton.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { l10n, getToolkitStorageKey } from 'toolkit/extension/utils/toolkit';
+import { serviceLookup } from 'toolkit/extension/utils/ember';
+
+interface Props {
+  toggleHiddenState: (state: boolean) => void;
+}
+
+export const HideClosedButton = ({ toggleHiddenState }: Props) => {
+  const isHidden = getToolkitStorageKey('hide-closed', true);
+  const label = isHidden ? l10n('toolkit.show', 'Show') : l10n('app.hide', 'Hide');
+
+  const toggleHidden = () => {
+    toggleHiddenState(!isHidden);
+    serviceLookup<YNABModalService>('modal')?.closeModal?.();
+  };
+
+  return (
+    <li onClick={toggleHidden} id="tk-hide-closed-accounts">
+      <button>
+        <i className="flaticon stroke no" />
+        {` ${label}`} Closed Accounts
+      </button>
+    </li>
+  );
+};

src/extension/features/general/hide-closed-accounts/index.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { componentAppend } from 'toolkit/extension/utils/react';
+import { Feature } from 'toolkit/extension/features/feature';
+import { getToolkitStorageKey, setToolkitStorageKey } from 'toolkit/extension/utils/toolkit';
+import { HideClosedButton } from './HideClosedButton';
+import { serviceLookup } from 'toolkit/extension/utils/ember';
+
+export class HideClosedAccounts extends Feature {
+  injectCSS() {
+    return require('./index.css');
+  }
+
+  shouldInvoke() {
+    return (
+      $('#tk-hide-closed-accounts').length === 0 &&
+      !!serviceLookup<YNABModalService>('modal')?.isModalOpen &&
+      !!document.querySelector('.ynab-new-settings-menu')
+    );
+  }
+
+  invoke() {
+    const initialState = getToolkitStorageKey('hide-closed', true);
+    this.setHiddenState(initialState);
+    const modalElement = document.querySelector('.ynab-new-settings-menu');
+    if (modalElement) this.insertHideClosed(modalElement);
+  }
+
+  destroy() {
+    $('#tk-hide-closed-accounts').remove();
+    $('body').removeClass('tk-hide-closed');
+  }
+
+  observe(nodes: Set<string>) {
+    if (!this.shouldInvoke()) return;
+
+    if (nodes.has('modal-overlay active  ynab-u ynab-new-settings-menu')) {
+      this.invoke();
+    }
+  }
+
+  insertHideClosed(element: Element) {
+    componentAppend(
+      <HideClosedButton toggleHiddenState={this.setHiddenState} />,
+      element.getElementsByClassName('modal-list')[0]
+    );
+  }
+
+  setHiddenState = (state: boolean) => {
+    setToolkitStorageKey('hide-closed', state);
+    if (state) {
+      $('body').addClass('tk-hide-closed');
+    } else {
+      $('body').removeClass('tk-hide-closed');
+    }
+  };
+}

src/extension/features/general/hide-help/HideHelpButton.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { serviceLookup } from 'toolkit/extension/utils/ember';
+import { l10n, getToolkitStorageKey } from 'toolkit/extension/utils/toolkit';
+
+interface Props {
+  toggleHiddenState: (state: boolean) => void;
+}
+
+export const HideHelpButton = ({ toggleHiddenState }: Props) => {
+  const isHidden = getToolkitStorageKey('hide-help', true);
+  const label = isHidden ? l10n('toolkit.show', 'Show') : l10n('app.hide', 'Hide');
+
+  const toggleHidden = () => {
+    toggleHiddenState(!isHidden);
+    serviceLookup<YNABModalService>('modal')?.closeModal?.();
+  };
+
+  return (
+    <li onClick={toggleHidden} id="tk-hide-help">
+      <button>
+        <i className="flaticon stroke help-2" />
+        {` ${label}`} Help Button
+      </button>
+    </li>
+  );
+};

src/extension/features/general/hide-help/index.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { componentAppend } from 'toolkit/extension/utils/react';
+import { Feature } from 'toolkit/extension/features/feature';
+import { getToolkitStorageKey, setToolkitStorageKey } from 'toolkit/extension/utils/toolkit';
+import { HideHelpButton } from './HideHelpButton';
+import { serviceLookup } from 'toolkit/extension/utils/ember';
+
+export class HideHelp extends Feature {
+  injectCSS() {
+    return require('./index.css');
+  }
+
+  shouldInvoke() {
+    return (
+      $('#tk-hide-help').length === 0 &&
+      !!serviceLookup<YNABModalService>('modal')?.isModalOpen &&
+      !!document.querySelector('.ynab-new-settings-menu')
+    );
+  }
+
+  insertHideHelp(element: Element) {
+    if ($('#tk-hide-help', element).length) {
+      return;
+    }
+
+    componentAppend(
+      <HideHelpButton toggleHiddenState={this.setHiddenState} />,
+      element.getElementsByClassName('modal-list')[0]
+    );
+  }
+
+  invoke() {
+    const initialState = getToolkitStorageKey('hide-help', true);
+    this.setHiddenState(initialState);
+    const modalElement = document.querySelector('.ynab-new-settings-menu');
+    if (modalElement) this.insertHideHelp(modalElement);
+  }
+
+  destroy() {
+    $('#tk-hide-help').remove();
+    $('body').removeClass('toolkit-hide-help');
+  }
+
+  observe(nodes: Set<string>) {
+    if (!this.shouldInvoke()) return;
+
+    if (nodes.has('modal-overlay active  ynab-u ynab-new-settings-menu')) {
+      this.invoke();
+    }
+  }
+
+  setHiddenState = (state: boolean) => {
+    setToolkitStorageKey('hide-help', state);
+    if (state) {
+      $('body').addClass('toolkit-hide-help');
+    } else {
+      $('body').removeClass('toolkit-hide-help');
+    }
+  };
+}

src/types/ynab/services/YNABModalService.d.ts

@@ -0,0 +1,4 @@
+interface YNABModalService {
+  isModalOpen?: boolean;
+  closeModal?: (e?: unknown) => void;
+}