From d2fffd4a71ee76bc2c7cb7e28dc83c398c45a5be Mon Sep 17 00:00:00 2001
From: Andrei Kuchuk <kreezag@gmail.com>
Date: Sun, 30 Jun 2024 19:53:35 +0400
Subject: [PATCH 1/5] [dx] use api-version from settings request

---
 layouts/blank.vue                             |  2 ++
 layouts/default.vue                           |  2 ++
 pages/login.vue                               |  2 +-
 src/shared/lib/use-settings/use-settings.ts   | 24 +++++++++++----
 src/shared/stores/profile.ts                  |  7 +++--
 src/shared/stores/settings.ts                 | 21 ++++++++++++-
 src/shared/types/index.ts                     |  2 +-
 src/shared/types/profile.ts                   |  5 ----
 src/shared/types/settings.ts                  | 13 ++++++++
 .../ui/layout-sidebar/layout-sidebar.vue      | 30 +++++++------------
 10 files changed, 71 insertions(+), 37 deletions(-)
 delete mode 100644 src/shared/types/profile.ts
 create mode 100644 src/shared/types/settings.ts

diff --git a/layouts/blank.vue b/layouts/blank.vue
index 464dd586..cb0b77a1 100644
--- a/layouts/blank.vue
+++ b/layouts/blank.vue
@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="main-layout">
     <slot />
diff --git a/layouts/default.vue b/layouts/default.vue
index dfeb0a9a..8f8eb121 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,7 +3,9 @@ import { onMounted } from "vue";
 import { LayoutSidebar } from "~/src/widgets/ui";
 import { useEvents } from "~/src/shared/lib/use-events";
 import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
+import { useSettingsStore } from "~/src/shared/stores";
 
+useSettingsStore().initialize();
 SfdumpWrap(window.document);
 
 onMounted(() => {
diff --git a/pages/login.vue b/pages/login.vue
index b6bbe7ef..568dfe9b 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -4,7 +4,7 @@ import { REST_API_URL } from "~/src/shared/lib/io";
 import { useProfileStore, useSettingsStore } from "~/src/shared/stores";
 import { IconSvg } from "~/src/shared/ui";
 
-useSettingsStore();
+useSettingsStore().initialize();
 setPageLayout("blank");
 
 const app = useNuxtApp();
diff --git a/src/shared/lib/use-settings/use-settings.ts b/src/shared/lib/use-settings/use-settings.ts
index 4962d672..3413cec4 100644
--- a/src/shared/lib/use-settings/use-settings.ts
+++ b/src/shared/lib/use-settings/use-settings.ts
@@ -1,13 +1,13 @@
 import { useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import type { Profile } from "../../types";
+import type { TProfile, TSettings } from "../../types";
 import { REST_API_URL } from "../io";
 
 
 type TUseSettings = {
   api: {
     getVersion: () => Promise<string>
-    getProfile: () => Promise<Profile>
-    getSettings: () => Promise<unknown>
+    getProfile: () => Promise<TProfile>
+    getSettings: () => Promise<TSettings>
   }
 }
 
@@ -18,17 +18,29 @@ export const useSettings = (): TUseSettings => {
   const getAppVersion = () => fetch(`${REST_API_URL}/api/version`)
     .then((response) => response.json())
     .then((response) => response?.version || 'unknown')
-    .catch(() => 'unknown');
+    .catch((e) => {
+      console.error(e);
+
+      return null
+    });
 
   const getAppSettings = () => fetch(`${REST_API_URL}/api/settings`)
     .then((response) => response.json())
-    .catch(() => 'unknown');
+    .catch((e) => {
+      console.error(e);
+
+      return null
+    });
 
   const getProfile = () => fetch(`${REST_API_URL}/api/me`, {
     headers: {"X-Auth-Token": nuxtApp.$authToken.token || ""}
   })
     .then((response) => response.json())
-    .catch(() => 'unknown');
+    .catch((e) => {
+      console.error(e);
+
+      return null
+    });
 
   return {
     api: {
diff --git a/src/shared/stores/profile.ts b/src/shared/stores/profile.ts
index 2cb4a1da..d77af062 100644
--- a/src/shared/stores/profile.ts
+++ b/src/shared/stores/profile.ts
@@ -1,12 +1,12 @@
 import { defineStore } from "pinia";
-import type { Profile } from "../types";
+import type {TProfile} from "../types";
 
 const STORAGE_KEY = "token";
 
 export const useProfileStore = defineStore("profileStore", {
   state: () => ({
     token: '' as string,
-    profile: undefined as Profile | undefined,
+    profile: undefined as TProfile | undefined,
   }),
   getters: {
     isAuthenticated(): boolean {
@@ -19,9 +19,10 @@ export const useProfileStore = defineStore("profileStore", {
 
       this.token = token;
       localStorage?.setItem(STORAGE_KEY, token);
+
       app.$authToken.token = token;
     },
-    setProfile(profile: Profile): void {
+    setProfile(profile: TProfile): void {
       this.profile = profile;
     },
     fetchToken(): void {
diff --git a/src/shared/stores/settings.ts b/src/shared/stores/settings.ts
index 0a110c0b..cd5a7de1 100644
--- a/src/shared/stores/settings.ts
+++ b/src/shared/stores/settings.ts
@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
-import { LOCAL_STORAGE_KEYS} from "../types";
+import {useSettings} from "../lib/use-settings";
+import {LOCAL_STORAGE_KEYS, type TSettings} from "../types";
 
 export const THEME_MODES = {
   LIGHT: "light",
@@ -50,6 +51,11 @@ const checkIfEventsCountVisible = (): boolean => {
 
 export const useSettingsStore = defineStore("settingsStore", {
   state: () => ({
+    apiVersion: '',
+    auth: {
+      enabled: false,
+      login_url: '/login',
+    },
     themeType: checkThemeActive(),
     isFixedHeader: checkHeaderFixed(),
     isVisibleEventCounts: checkIfEventsCountVisible(),
@@ -83,6 +89,19 @@ export const useSettingsStore = defineStore("settingsStore", {
       this.isVisibleEventCounts = !this.isVisibleEventCounts;
 
       localStorage?.setItem(LOCAL_STORAGE_KEYS.EVENT_COUNTS, String(this.isVisibleEventCounts));
+    },
+    initialize() {
+      const {api: { getSettings }} = useSettings();
+
+      getSettings().then(({ version, auth } = {} as TSettings) => {
+        if (version) {
+          this.apiVersion = version
+        }
+
+        if (auth) {
+          this.auth = auth;
+        }
+      })
     }
   },
 });
diff --git a/src/shared/types/index.ts b/src/shared/types/index.ts
index d97b4ccf..8c1daea2 100644
--- a/src/shared/types/index.ts
+++ b/src/shared/types/index.ts
@@ -1,5 +1,5 @@
 export * from "./events";
-export * from "./profile";
+export * from "./settings";
 export * from "./generics";
 export * from "./local-storage";
 export * from "./partials";
diff --git a/src/shared/types/profile.ts b/src/shared/types/profile.ts
deleted file mode 100644
index 7dfb72c8..00000000
--- a/src/shared/types/profile.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface Profile {
-  username: string,
-  email: string,
-  avatar: string,
-}
diff --git a/src/shared/types/settings.ts b/src/shared/types/settings.ts
new file mode 100644
index 00000000..39252090
--- /dev/null
+++ b/src/shared/types/settings.ts
@@ -0,0 +1,13 @@
+export type TProfile =  {
+  username: string,
+  email: string,
+  avatar: string,
+}
+
+export type TSettings = {
+  auth: {
+    enabled: boolean,
+    login_url: string,
+  },
+  version: string
+}
diff --git a/src/widgets/ui/layout-sidebar/layout-sidebar.vue b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
index c5d0735b..b1c51fb5 100644
--- a/src/widgets/ui/layout-sidebar/layout-sidebar.vue
+++ b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import { storeToRefs } from "pinia";
-import { computed, onMounted, ref } from "vue";
+import { computed, ref } from "vue";
 import { useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { useEvents } from "~/src/shared/lib/use-events";
-import { useSettings } from "~/src/shared/lib/use-settings";
 import { useSettingsStore } from "~/src/shared/stores";
 import { useConnectionStore } from "~/src/shared/stores/connections";
 import { useProfileStore } from "~/src/shared/stores/profile";
@@ -60,26 +59,17 @@ const path = computed(() => useRoute().path);
 
 const isAuthEnabled = computed(() => app?.$appSettings?.auth?.enabled);
 
-const {
-  api: { getVersion },
-} = useSettings();
+const { apiVersion } = storeToRefs(useSettingsStore());
 
-const apiVersion = ref("");
 const clientVersion = ref(
   !version || version === "0.0.1" ? "@dev" : `v${version}`
 );
 
-const getApiVersion = async () => {
-  const data = await getVersion();
-
-  apiVersion.value = String(data).match(/^[0-9.]+.*$/)
-    ? `v${data}`
-    : `@${data}`;
-};
-
-onMounted(() => {
-  getApiVersion();
-});
+const serverVersion = computed(() =>
+  String(apiVersion.value).match(/^[0-9.]+.*$/)
+    ? `v${apiVersion.value}`
+    : `@${apiVersion.value}`
+);
 </script>
 
 <template>
@@ -156,11 +146,11 @@ onMounted(() => {
 
       <div class="layout-sidebar__versions">
         <div
-          v-if="apiVersion"
+          v-if="serverVersion"
           class="layout-sidebar__nav-version"
-          :title="`Api version: ${apiVersion}`"
+          :title="`Api version: ${serverVersion}`"
         >
-          {{ apiVersion }}
+          {{ serverVersion }}
         </div>
 
         <div

From 21824a77182420b76a490203b942c7a802cf307d Mon Sep 17 00:00:00 2001
From: Andrei Kuchuk <kreezag@gmail.com>
Date: Sun, 30 Jun 2024 19:56:17 +0400
Subject: [PATCH 2/5] [dx] remove unnecessary version rest point

---
 src/shared/lib/use-settings/use-settings.ts | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/shared/lib/use-settings/use-settings.ts b/src/shared/lib/use-settings/use-settings.ts
index 3413cec4..ef664d72 100644
--- a/src/shared/lib/use-settings/use-settings.ts
+++ b/src/shared/lib/use-settings/use-settings.ts
@@ -5,7 +5,6 @@ import { REST_API_URL } from "../io";
 
 type TUseSettings = {
   api: {
-    getVersion: () => Promise<string>
     getProfile: () => Promise<TProfile>
     getSettings: () => Promise<TSettings>
   }
@@ -14,16 +13,6 @@ type TUseSettings = {
 export const useSettings = (): TUseSettings => {
   const nuxtApp = useNuxtApp()
 
-  // todo: we can get version from settings
-  const getAppVersion = () => fetch(`${REST_API_URL}/api/version`)
-    .then((response) => response.json())
-    .then((response) => response?.version || 'unknown')
-    .catch((e) => {
-      console.error(e);
-
-      return null
-    });
-
   const getAppSettings = () => fetch(`${REST_API_URL}/api/settings`)
     .then((response) => response.json())
     .catch((e) => {
@@ -44,7 +33,6 @@ export const useSettings = (): TUseSettings => {
 
   return {
     api: {
-      getVersion: getAppVersion,
       getProfile,
       getSettings: getAppSettings
     }

From 69971adac1767b5e60e5673b1a8db8b7b5d46204 Mon Sep 17 00:00:00 2001
From: Andrei Kuchuk <kreezag@gmail.com>
Date: Sun, 30 Jun 2024 21:24:42 +0400
Subject: [PATCH 3/5] [dx] move settings init to app.vue file

---
 app.vue             | 3 +++
 layouts/default.vue | 2 --
 pages/login.vue     | 3 +--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app.vue b/app.vue
index 1b19bfa6..276aa0ed 100644
--- a/app.vue
+++ b/app.vue
@@ -5,4 +5,7 @@
 <script lang="ts" setup>
 import "./src/assets/index.css";
 import "./src/assets/vendor";
+import { useSettingsStore } from "~/src/shared/stores";
+
+useSettingsStore().initialize();
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
index 8f8eb121..dfeb0a9a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,9 +3,7 @@ import { onMounted } from "vue";
 import { LayoutSidebar } from "~/src/widgets/ui";
 import { useEvents } from "~/src/shared/lib/use-events";
 import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
-import { useSettingsStore } from "~/src/shared/stores";
 
-useSettingsStore().initialize();
 SfdumpWrap(window.document);
 
 onMounted(() => {
diff --git a/pages/login.vue b/pages/login.vue
index 568dfe9b..e4489490 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { useNuxtApp, navigateTo, setPageLayout } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { REST_API_URL } from "~/src/shared/lib/io";
-import { useProfileStore, useSettingsStore } from "~/src/shared/stores";
+import { useProfileStore } from "~/src/shared/stores";
 import { IconSvg } from "~/src/shared/ui";
 
-useSettingsStore().initialize();
 setPageLayout("blank");
 
 const app = useNuxtApp();

From 489f8401fd91d447c7d7b33512994be90c798440 Mon Sep 17 00:00:00 2001
From: Andrei Kuchuk <kreezag@gmail.com>
Date: Sun, 30 Jun 2024 21:37:25 +0400
Subject: [PATCH 4/5] [dx] reduce nuxt plugins usage

---
 middleware/auth.global.ts                     |  1 +
 pages/login.vue                               | 12 +++++++----
 plugins/auth.ts                               |  1 +
 src/shared/stores/settings.ts                 |  7 ++++---
 .../ui/layout-sidebar/layout-sidebar.vue      | 21 ++++++++++++-------
 5 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
index f97fe903..f3ea2dd8 100644
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@@ -5,6 +5,7 @@ import { useProfileStore } from "~/src/shared/stores/profile"
 export default defineNuxtRouteMiddleware(async (to) => {
   const app = useNuxtApp()
 
+  // TODO: need to use settingsStore instead of nuxt plugin
   if (!app.$appSettings?.auth?.enabled) {
     return undefined
   }
diff --git a/pages/login.vue b/pages/login.vue
index e4489490..d236c64b 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,20 +1,24 @@
 <script setup lang="ts">
-import { useNuxtApp, navigateTo, setPageLayout } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+import { navigateTo, setPageLayout } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { REST_API_URL } from "~/src/shared/lib/io";
-import { useProfileStore } from "~/src/shared/stores";
+import { useProfileStore, useSettingsStore } from "~/src/shared/stores";
 import { IconSvg } from "~/src/shared/ui";
 
 setPageLayout("blank");
 
-const app = useNuxtApp();
 const store = useProfileStore();
+const { auth } = storeToRefs(useSettingsStore());
 
 if (store.isAuthenticated) {
   await navigateTo("/");
 }
 
+const loginUrl = computed(() => `${REST_API_URL}/${auth.value.loginUrl}`);
+
 const redirect = async () => {
-  await navigateTo(`${REST_API_URL}/${app.$appSettings.auth.login_url}`, {
+  await navigateTo(loginUrl.value, {
     external: true,
   });
 };
diff --git a/plugins/auth.ts b/plugins/auth.ts
index 7d5943bc..48e6433c 100644
--- a/plugins/auth.ts
+++ b/plugins/auth.ts
@@ -15,6 +15,7 @@ export default defineNuxtPlugin(async () => {
   }
 
   try {
+    // TODO: remove duplicated request with settings-store
     settings = await api.getSettings() as { auth: { enabled: boolean; login_url: string }; version: string };
   } catch (e) {
     console.error('Server is not available!')
diff --git a/src/shared/stores/settings.ts b/src/shared/stores/settings.ts
index cd5a7de1..b6546f77 100644
--- a/src/shared/stores/settings.ts
+++ b/src/shared/stores/settings.ts
@@ -53,8 +53,8 @@ export const useSettingsStore = defineStore("settingsStore", {
   state: () => ({
     apiVersion: '',
     auth: {
-      enabled: false,
-      login_url: '/login',
+      isEnabled: false,
+      loginUrl: '/login',
     },
     themeType: checkThemeActive(),
     isFixedHeader: checkHeaderFixed(),
@@ -99,7 +99,8 @@ export const useSettingsStore = defineStore("settingsStore", {
         }
 
         if (auth) {
-          this.auth = auth;
+          this.auth.isEnabled = auth.enabled;
+          this.auth.loginUrl = auth.login_url;
         }
       })
     }
diff --git a/src/widgets/ui/layout-sidebar/layout-sidebar.vue b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
index b1c51fb5..c418ea89 100644
--- a/src/widgets/ui/layout-sidebar/layout-sidebar.vue
+++ b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
-import { useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { useEvents } from "~/src/shared/lib/use-events";
 import { useSettingsStore } from "~/src/shared/stores";
 import { useConnectionStore } from "~/src/shared/stores/connections";
@@ -10,10 +10,8 @@ import { BadgeNumber, IconSvg } from "~/src/shared/ui";
 import { version } from "../../../../package.json";
 import { EVENTS_LINKS_MAP, EVENTS_NAV_ORDER } from "./constants";
 
-const app = useNuxtApp();
-
 const { isConnectedWS } = storeToRefs(useConnectionStore());
-const { isVisibleEventCounts } = storeToRefs(useSettingsStore());
+const { isVisibleEventCounts, auth } = storeToRefs(useSettingsStore());
 
 const profileStore = useProfileStore();
 const { profile } = storeToRefs(useProfileStore());
@@ -40,6 +38,12 @@ const avatar = computed(() => {
   return profile.value.avatar;
 });
 
+const profileEmail = computed(() => {
+  if (!profile.value) return null;
+
+  return profile.value.email;
+});
+
 const connectionText = computed(
   () => `WS connection is ${connectionStatus.value}`
 );
@@ -57,7 +61,7 @@ const logout = () => {
 
 const path = computed(() => useRoute().path);
 
-const isAuthEnabled = computed(() => app?.$appSettings?.auth?.enabled);
+const isAuthEnabled = computed(() => auth.value.isEnabled);
 
 const { apiVersion } = storeToRefs(useSettingsStore());
 
@@ -117,8 +121,11 @@ const serverVersion = computed(() =>
     <div>
       <div v-if="isAuthEnabled" class="layout-sidebar__profile">
         <div v-if="!isHidden" class="layout-sidebar__profile-dropdown">
-          <div class="profile-dropdown-item profile-dropdown-item--email">
-            {{ profile.email }}
+          <div
+            v-if="profileEmail"
+            class="profile-dropdown-item profile-dropdown-item--email"
+          >
+            {{ profileEmail }}
           </div>
           <div
             class="profile-dropdown-item profile-dropdown-item--logout"

From 28c7517e8a7e7972d0b58fb4d5e689281dd952d3 Mon Sep 17 00:00:00 2001
From: Andrei Kuchuk <kreezag@gmail.com>
Date: Sun, 30 Jun 2024 21:52:02 +0400
Subject: [PATCH 5/5] [dx] update settings-store structure

---
 src/shared/stores/settings.ts                 | 108 ------------------
 src/shared/stores/settings/constants.ts       |   6 +
 src/shared/stores/settings/index.ts           |   2 +
 .../stores/settings/local-storage-actions.ts  |  69 +++++++++++
 src/shared/stores/settings/settings-store.ts  |  55 +++++++++
 5 files changed, 132 insertions(+), 108 deletions(-)
 delete mode 100644 src/shared/stores/settings.ts
 create mode 100644 src/shared/stores/settings/constants.ts
 create mode 100644 src/shared/stores/settings/index.ts
 create mode 100644 src/shared/stores/settings/local-storage-actions.ts
 create mode 100644 src/shared/stores/settings/settings-store.ts

diff --git a/src/shared/stores/settings.ts b/src/shared/stores/settings.ts
deleted file mode 100644
index b6546f77..00000000
--- a/src/shared/stores/settings.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { defineStore } from "pinia";
-import {useSettings} from "../lib/use-settings";
-import {LOCAL_STORAGE_KEYS, type TSettings} from "../types";
-
-export const THEME_MODES = {
-  LIGHT: "light",
-  DARK: "dark",
-};
-
-const checkThemeActive = () => {
-  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
-};
-
-const checkHeaderFixed = () => {
-  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;
-}
-const checkIfEventsCountVisible = (): boolean => {
-  const storageValue = localStorage?.getItem(LOCAL_STORAGE_KEYS.EVENT_COUNTS) || "true";
-
-  return storageValue === "true";
-};
-
-export const useSettingsStore = defineStore("settingsStore", {
-  state: () => ({
-    apiVersion: '',
-    auth: {
-      isEnabled: false,
-      loginUrl: '/login',
-    },
-    themeType: checkThemeActive(),
-    isFixedHeader: checkHeaderFixed(),
-    isVisibleEventCounts: checkIfEventsCountVisible(),
-  }),
-  actions: {
-    changeTheme() {
-      this.themeType = this.themeType === THEME_MODES.DARK
-        ? THEME_MODES.LIGHT
-        : THEME_MODES.DARK;
-
-      window?.localStorage.setItem(LOCAL_STORAGE_KEYS.THEME, this.themeType);
-
-      if (this.themeType === THEME_MODES.LIGHT) {
-        document?.documentElement?.classList?.remove(THEME_MODES.DARK);
-      } else {
-        document?.documentElement?.classList?.add(THEME_MODES.DARK);
-      }
-    },
-    changeNavbar() {
-      this.isFixedHeader = !this.isFixedHeader;
-
-      window?.localStorage.setItem(LOCAL_STORAGE_KEYS.NAVBAR, String(this.isFixedHeader));
-
-      if (this.isFixedHeader) {
-        document?.documentElement?.classList?.add("navbar-fixed");
-      } else {
-        document?.documentElement?.classList?.remove("navbar-fixed");
-      }
-    },
-    changeEventCountsVisibility() {
-      this.isVisibleEventCounts = !this.isVisibleEventCounts;
-
-      localStorage?.setItem(LOCAL_STORAGE_KEYS.EVENT_COUNTS, String(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;
-        }
-      })
-    }
-  },
-});
diff --git a/src/shared/stores/settings/constants.ts b/src/shared/stores/settings/constants.ts
new file mode 100644
index 00000000..e6dd0c9a
--- /dev/null
+++ b/src/shared/stores/settings/constants.ts
@@ -0,0 +1,6 @@
+
+export const THEME_MODES = {
+  LIGHT: "light",
+  DARK: "dark",
+};
+
diff --git a/src/shared/stores/settings/index.ts b/src/shared/stores/settings/index.ts
new file mode 100644
index 00000000..ff43c80f
--- /dev/null
+++ b/src/shared/stores/settings/index.ts
@@ -0,0 +1,2 @@
+export {useSettingsStore} from './settings-store'
+export * from './constants'
diff --git a/src/shared/stores/settings/local-storage-actions.ts b/src/shared/stores/settings/local-storage-actions.ts
new file mode 100644
index 00000000..a078764b
--- /dev/null
+++ b/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));
+}
diff --git a/src/shared/stores/settings/settings-store.ts b/src/shared/stores/settings/settings-store.ts
new file mode 100644
index 00000000..794dd049
--- /dev/null
+++ b/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;
+        }
+      })
+    }
+  },
+});