[dx] update settings-store structure

src/shared/stores/settings/constants.ts

@@ -0,0 +1,6 @@
+
+export const THEME_MODES = {
+  LIGHT: "light",
+  DARK: "dark",
+};
+

src/shared/stores/settings/index.ts

@@ -0,0 +1,2 @@
+export {useSettingsStore} from './settings-store'
+export * from './constants'

src/shared/stores/settings/local-storage-actions.ts

@@ -0,0 +1,69 @@
+import {LOCAL_STORAGE_KEYS} from "../../types";
+import {THEME_MODES} from "./constants";
+
+export const checkIfThemeActive = () => {
+  if (!process.client) {
+    return THEME_MODES.LIGHT;
+  }
+
+  const isStoredDarkTheme = window?.localStorage.getItem(LOCAL_STORAGE_KEYS.THEME) === THEME_MODES.DARK;
+  const isSystemDarkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  if (isStoredDarkTheme || isSystemDarkTheme) {
+    document?.documentElement?.classList?.add(THEME_MODES.DARK);
+
+    return THEME_MODES.DARK
+  }
+
+  document?.documentElement?.classList?.remove(THEME_MODES.DARK);
+
+  return THEME_MODES.LIGHT
+};
+
+export const syncThemeLocalStorage = (themeName: string) => {
+  window?.localStorage.setItem(LOCAL_STORAGE_KEYS.THEME, themeName);
+
+  if (themeName === THEME_MODES.LIGHT) {
+    window?.document?.documentElement?.classList?.remove(THEME_MODES.DARK);
+  } else {
+    window?.document?.documentElement?.classList?.add(THEME_MODES.DARK);
+  }
+}
+
+export const getFixedHeaderState = () => {
+  if (!process.client) {
+    return  false;
+  }
+
+  const storedValue: string = window?.localStorage.getItem(LOCAL_STORAGE_KEYS.NAVBAR) || "true";
+
+  const isFixed: boolean = storedValue === "true"
+
+  if (isFixed) {
+    document?.documentElement?.classList?.add("navbar-fixed");
+  } else {
+    document?.documentElement?.classList?.remove("navbar-fixed");
+  }
+
+  return isFixed;
+}
+
+export const syncFixedHeaderLocalStorage = (state: boolean) => {
+  window?.localStorage.setItem(LOCAL_STORAGE_KEYS.NAVBAR, String(state));
+
+  if (state) {
+    window?.document?.documentElement?.classList?.add("navbar-fixed");
+  } else {
+    window?.document?.documentElement?.classList?.remove("navbar-fixed");
+  }
+}
+
+export const getEventsCountVisibleState = (): boolean => {
+  const storageValue = window?.localStorage?.getItem(LOCAL_STORAGE_KEYS.EVENT_COUNTS) || "true";
+
+  return storageValue === "true";
+};
+
+export const syncEventsCountVisibleLocalStorage = (state: boolean) => {
+  window?.localStorage?.setItem(LOCAL_STORAGE_KEYS.EVENT_COUNTS, String(state));
+}

src/shared/stores/settings/settings-store.ts

@@ -0,0 +1,55 @@
+import {defineStore} from "pinia";
+import {useSettings} from "../../lib/use-settings";
+import type { TSettings } from "../../types";
+import {THEME_MODES} from "./constants";
+import {
+  getEventsCountVisibleState,
+  getFixedHeaderState,
+  checkIfThemeActive, syncEventsCountVisibleLocalStorage, syncFixedHeaderLocalStorage, syncThemeLocalStorage
+} from "./local-storage-actions";
+
+export const useSettingsStore = defineStore("settingsStore", {
+  state: () => ({
+    apiVersion: '',
+    auth: {
+      isEnabled: false,
+      loginUrl: '/login',
+    },
+    themeType: checkIfThemeActive(),
+    isFixedHeader: getFixedHeaderState(),
+    isVisibleEventCounts: getEventsCountVisibleState(),
+  }),
+  actions: {
+    changeTheme() {
+      this.themeType = this.themeType === THEME_MODES.DARK
+        ? THEME_MODES.LIGHT
+        : THEME_MODES.DARK;
+
+      syncThemeLocalStorage(this.themeType)
+    },
+    changeNavbar() {
+      this.isFixedHeader = !this.isFixedHeader;
+
+      syncFixedHeaderLocalStorage(this.isFixedHeader)
+    },
+    changeEventCountsVisibility() {
+      this.isVisibleEventCounts = !this.isVisibleEventCounts;
+
+      syncEventsCountVisibleLocalStorage(this.isVisibleEventCounts)
+    },
+    initialize() {
+      const {api: { getSettings }} = useSettings();
+
+      getSettings().then(({ version, auth } = {} as TSettings) => {
+        if (version) {
+          this.apiVersion = version
+        }
+
+        if (auth) {
+          this.auth.isEnabled = auth.enabled;
+          this.auth.loginUrl = auth.login_url;
+        }
+      })
+    }
+  },
+});