refactor: global shared state and function (#79)

* refactor: expose i18n instance

* feat: add global app utility function

* refactor: use global utility function

* refactor: avoid undefined when use outside vue

refactor: avoid undefined when use outside vue

* refactor: remove dup code and use util

* refactor: auto fetch option when use store

src/layouts/ProfileMenu.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useQuasar } from 'quasar';
-// import useOption from 'stores/option';
 
-// const optionStore = useOption();
-import { getName, getRealm, getRole, isLoggedIn } from 'src/services/keycloak';
+import { getName, getRole, isLoggedIn } from 'src/services/keycloak';
+import { initTheme, setTheme, Theme } from 'src/utils/ui';
 
 const $q = useQuasar();
 
@@ -18,9 +17,7 @@ defineProps<{
 const inputFile = document.createElement('input');
 inputFile.type = 'file';
 inputFile.accept = 'image/*';
-// const profileFile = ref<File | undefined>(undefined);
 
-const currentTheme = ref();
 const options = ref([
   {
     icon: 'mdi-account',
@@ -45,96 +42,22 @@ const options = ref([
 const themeMode = ref([
   {
     label: 'light',
-    value: 'light',
-    isActive: false,
+    value: Theme.Light,
   },
   {
     label: 'dark',
-    value: 'dark',
-    isActive: false,
+    value: Theme.Dark,
   },
   {
     label: 'baseOnDevice',
-    value: 'baseOnDevice',
-    isActive: false,
+    value: Theme.Auto,
   },
 ]);
 
-// inputFile.addEventListener('change', async (e) => {
-//   profileFile.value = await (e.currentTarget as HTMLInputElement).files?.[0];
-//   if (profileFile.value) {
-//     await storageStore.uploadProfile(profileFile.value);
-//   }
-//   userImage.value = (await storageStore.getProfile()) ?? '';
-// });
-
-function changeMode(mode: string) {
-  if (mode === 'light') {
-    localStorage.setItem('currentTheme', 'light');
-    themeMode.value[0].isActive = true;
-    themeMode.value[1].isActive = false;
-    themeMode.value[2].isActive = false;
-    currentTheme.value = 'light';
-    $q.dark.set(false);
-    return;
-  }
-
-  if (mode === 'dark') {
-    localStorage.setItem('currentTheme', 'dark');
-    themeMode.value[0].isActive = false;
-    themeMode.value[1].isActive = true;
-    themeMode.value[2].isActive = false;
-    currentTheme.value = 'dark';
-    $q.dark.set(true);
-    return;
-  }
-
-  if (mode === 'baseOnDevice') {
-    localStorage.setItem('currentTheme', 'baseOnDevice');
-    themeMode.value[0].isActive = false;
-    themeMode.value[1].isActive = false;
-    themeMode.value[2].isActive = true;
-    currentTheme.value = 'baseOnDevice';
-
-    if (
-      window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
-    ) {
-      $q.dark.set(true);
-    } else {
-      $q.dark.set(false);
-    }
-    return;
-  }
-}
-
-function themeChange() {
-  if (themeMode.value[2].isActive) changeMode('baseOnDevice');
-}
-
-onUnmounted(() => {
-  window
-    .matchMedia('(prefers-color-scheme: dark)')
-    .removeEventListener('change', themeChange);
-});
+const theme = ref<Theme>();
 
 onMounted(async () => {
-  window
-    .matchMedia('(prefers-color-scheme: dark)')
-    .addEventListener('change', themeChange);
-  //   if (isLoggedIn()) {
-  //     userImage.value = (await storageStore.getProfile()) ?? '';
-  //   }
-  currentTheme.value = localStorage.getItem('currentTheme');
-  if (
-    currentTheme.value === 'light' ||
-    currentTheme.value === 'dark' ||
-    currentTheme.value === 'baseOnDevice'
-  ) {
-    changeMode(currentTheme.value);
-  } else {
-    changeMode('light');
-  }
+  theme.value = initTheme();
 
   const userRoles = getRole();
   if (userRoles) {
@@ -373,7 +296,11 @@ onMounted(async () => {
                         {{ $t(op.label) }}
                       </span>
                       <span class="app-text-muted-2">
-                        {{ $t(`general.${currentTheme}`) }}
+                        {{
+                          $t(
+                            `general.${theme === Theme.Auto ? 'baseOnDevice' : theme}`,
+                          )
+                        }}
                         <q-icon name="mdi-chevron-right" />
                       </span>
                     </div>
@@ -388,20 +315,16 @@ onMounted(async () => {
                     style="width: 160px"
                   >
                     <div v-for="(mode, index) in themeMode" :key="index">
-                      <q-item
-                        clickable
-                        @click="
-                          () => {
-                            changeMode(mode.value);
-                          }
-                        "
-                      >
+                      <q-item clickable @click="theme = setTheme(mode.value)">
                         <q-item-section>
                           <div class="row justify-between">
                             <span>
                               {{ $t(`general.${mode.label}`) }}
                             </span>
-                            <q-icon v-if="mode.isActive" name="mdi-check" />
+                            <q-icon
+                              v-if="mode.value === theme"
+                              name="mdi-check"
+                            />
                           </div>
                         </q-item-section>
                       </q-item>