chore: codebase improvements (#1930)

1 files changed, 117 insertions, 0 deletions

diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
new file mode 100644
index 000000000..ec48eeb40
--- /dev/null
+++ b/src/stores/UIStore.ts
@@ -0,0 +1,117 @@
+import { action, observable, computed, reaction } from 'mobx';
+import { theme, ThemeType } from '@meetfranz/theme';
+import { nativeTheme, systemPreferences } from '@electron/remote';
+
+import Store from './lib/Store';
+import { isMac, isWindows } from '../environment';
+
+export default class UIStore extends Store {
+  actions: any;
+
+  stores: any;
+
+  @observable showServicesUpdatedInfoBar = false;
+
+  @observable isOsDarkThemeActive = nativeTheme.shouldUseDarkColors;
+
+  constructor(...args) {
+    super(...args);
+
+    // Register action handlers
+    this.actions.ui.openSettings.listen(this._openSettings.bind(this));
+    this.actions.ui.closeSettings.listen(this._closeSettings.bind(this));
+    this.actions.ui.toggleServiceUpdatedInfoBar.listen(
+      this._toggleServiceUpdatedInfoBar.bind(this),
+    );
+
+    // Listen for theme change on MacOS
+    if (isMac) {
+      systemPreferences.subscribeNotification(
+        'AppleInterfaceThemeChangedNotification',
+        () => {
+          this.isOsDarkThemeActive = nativeTheme.shouldUseDarkColors;
+          this.actions.service.shareSettingsWithServiceProcess();
+        },
+      );
+    }
+
+    if (isWindows) {
+      nativeTheme.on('updated', () => {
+        this.isOsDarkThemeActive = nativeTheme.shouldUseDarkColors;
+        this.actions.service.shareSettingsWithServiceProcess();
+      });
+    }
+  }
+
+  setup() {
+    reaction(
+      () => this.isDarkThemeActive,
+      () => {
+        this._setupThemeInDOM();
+      },
+      { fireImmediately: true },
+    );
+  }
+
+  @computed get showMessageBadgesEvenWhenMuted() {
+    const settings = this.stores.settings.all;
+
+    return (
+      (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) ||
+      !settings.app.isAppMuted
+    );
+  }
+
+  @computed get isDarkThemeActive() {
+    const isWithAdaptableInDarkMode =
+      this.stores.settings.all.app.adaptableDarkMode &&
+      this.isOsDarkThemeActive;
+    const isWithoutAdaptableInDarkMode =
+      this.stores.settings.all.app.darkMode &&
+      !this.stores.settings.all.app.adaptableDarkMode;
+    const isInDarkMode = this.stores.settings.all.app.darkMode;
+    return !!(
+      isWithAdaptableInDarkMode ||
+      isWithoutAdaptableInDarkMode ||
+      isInDarkMode
+    );
+  }
+
+  @computed get theme() {
+    const themeId =
+      this.isDarkThemeActive || this.stores.settings.app.darkMode
+        ? ThemeType.dark
+        : ThemeType.default;
+    const { accentColor } = this.stores.settings.app;
+    return theme(themeId, accentColor);
+  }
+
+  // Actions
+  @action _openSettings({ path = '/settings' }) {
+    const settingsPath = path !== '/settings' ? `/settings/${path}` : path;
+    this.stores.router.push(settingsPath);
+  }
+
+  @action _closeSettings() {
+    this.stores.router.push('/');
+  }
+
+  @action _toggleServiceUpdatedInfoBar({ visible }) {
+    let visibility = visible;
+    if (visibility === null) {
+      visibility = !this.showServicesUpdatedInfoBar;
+    }
+    this.showServicesUpdatedInfoBar = visibility;
+  }
+
+  // Reactions
+  _setupThemeInDOM() {
+    const body = document.querySelector('body');
+
+    if (!this.isDarkThemeActive) {
+      body?.classList.remove('theme__dark');
+    } else {
+      body?.classList.add('theme__dark');
+    }
+  }
+}