feat: disabled 2fa feature (#631)

* feat: add dim and blur to unavailable 2fa

* feat: message over disabled 2FA

* feat: 2fa remove overlay and dimming

* fix: add newline to _ui,css

* fix: tsc errors

* Update app/assets/javascripts/preferences/panes/two-factor-auth/TwoFactorAuthView.tsx

Co-authored-by: Vardan Hakobyan <vardan_live@live.com>

* refactor: rename s to status

Co-authored-by: Vardan Hakobyan <vardan_live@live.com>

app/assets/javascripts/preferences/PreferencesMenu.ts

@@ -0,0 +1,71 @@
+import { IconType } from '@/components/Icon';
+import { makeAutoObservable, observable } from 'mobx';
+
+const PREFERENCE_IDS = [
+  'general',
+  'account',
+  'appearance',
+  'security',
+  'listed',
+  'shortcuts',
+  'accessibility',
+  'get-free-month',
+  'help-feedback',
+] as const;
+
+export type PreferenceId = typeof PREFERENCE_IDS[number];
+interface PreferencesMenuItem {
+  readonly id: PreferenceId;
+  readonly icon: IconType;
+  readonly label: string;
+}
+
+/**
+ * Items are in order of appearance
+ */
+const PREFERENCES_MENU_ITEMS: PreferencesMenuItem[] = [
+  { id: 'general', label: 'General', icon: 'settings' },
+  { id: 'account', label: 'Account', icon: 'user' },
+  { id: 'appearance', label: 'Appearance', icon: 'themes' },
+  { id: 'security', label: 'Security', icon: 'security' },
+  { id: 'listed', label: 'Listed', icon: 'listed' },
+  { id: 'shortcuts', label: 'Shortcuts', icon: 'keyboard' },
+  { id: 'accessibility', label: 'Accessibility', icon: 'accessibility' },
+  { id: 'get-free-month', label: 'Get a free month', icon: 'star' },
+  { id: 'help-feedback', label: 'Help & feedback', icon: 'help' },
+];
+
+export class PreferencesMenu {
+  private _selectedPane: PreferenceId = 'general';
+
+  constructor(
+    private readonly _menu: PreferencesMenuItem[] = PREFERENCES_MENU_ITEMS
+  ) {
+    makeAutoObservable<PreferencesMenu, '_selectedPane' | '_twoFactorAuth'>(
+      this,
+      {
+        _twoFactorAuth: observable,
+        _selectedPane: observable,
+      }
+    );
+  }
+
+  get menuItems(): (PreferencesMenuItem & {
+    selected: boolean;
+  })[] {
+    return this._menu.map((p) => ({
+      ...p,
+      selected: p.id === this._selectedPane,
+    }));
+  }
+
+  get selectedPaneId(): PreferenceId {
+    return (
+      this._menu.find((item) => item.id === this._selectedPane)?.id ?? 'general'
+    );
+  }
+
+  selectPane(key: PreferenceId) {
+    this._selectedPane = key;
+  }
+}