refactor: code organization

src/App.vue

@@ -1,17 +1,18 @@
 <template>
-  <PopUpCard v-if="store.alertMessage || store.confirmMessage" />
+  <PopUpCard />
 
-  <router-view v-if="!tokenLoading"></router-view>
+  <router-view></router-view>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import PopUpCard from './components/PopUpCard.vue';
-import { RouterView } from 'vue-router';
-import { useStore } from './store';
 import useLocalStorage from './mixins/useLocalStorage';
-import { IUser } from './types/types';
 import client from './common/http';
+import { IUser } from './types/auth.types';
+import { LoadingState } from './types/common.types';
+import { useAuthStore } from './stores/auth.store';
+import { useSceneriesStore } from './stores/sceneries.store';
 
 export default defineComponent({
   components: { PopUpCard },
@@ -22,26 +23,26 @@ export default defineComponent({
     setupStorage();
 
     return {
-      store: useStore(),
-      tokenLoading: false,
+      authStore: useAuthStore(),
+      sceneriesStore: useSceneriesStore(),
+
+      tokenState: LoadingState.LOADING,
+      LoadingState,
     };
   },
 
   methods: {
     async autoLogin() {
       try {
-        this.tokenLoading = true;
-
+        this.tokenState = LoadingState.LOADING;
         const response = await client.post<IUser>('/auth/token');
-
-        this.store.setUserData(response.data);
-        // this.$router.push('/');
+        this.authStore.setUserData(response.data);
+        this.tokenState = LoadingState.SUCCESS;
       } catch (error) {
-        this.store.removeUserData();
+        this.authStore.removeUserData();
         this.$router.push('/login');
+        this.tokenState = LoadingState.ERROR;
       }
-
-      this.tokenLoading = false;
     },
   },
 
@@ -49,138 +50,13 @@ export default defineComponent({
     this.autoLogin();
 
     if (window.localStorage.getItem('notifyDiscord') !== null) {
-      this.store.notifyDiscord = Boolean(Number(window.localStorage.getItem('notifyDiscord')));
+      this.sceneriesStore.notifyDiscord = Boolean(Number(window.localStorage.getItem('notifyDiscord')));
     }
   },
 });
 </script>
 
 <style lang="scss">
+@import './styles/global.scss';
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');
-
-a {
-  color: white;
-  text-decoration: none;
-}
-
-a:visited {
-  color: rgb(124, 164, 218);
-}
-
-* {
-  font-family: 'Inter', sans-serif;
-}
-
-body,
-html {
-  padding: 0 0.25em;
-  margin: 0;
-  background-color: #1e2341;
-  color: white;
-
-  @media screen and (max-width: 700px) {
-    font-size: calc(0.7vw + 0.7rem);
-  }
-
-  font-size: 16px;
-}
-
-button,
-select,
-input {
-  font-size: inherit;
-}
-
-button {
-  appearance: none;
-  outline: none;
-  border: none;
-
-  background-color: #3c5a89;
-  color: white;
-
-  padding: 0.5em 0.5em;
-
-  font-weight: bold;
-  font-size: 0.9em;
-
-  cursor: pointer;
-  transition: all 75ms;
-
-  &:hover:not([data-disabled='true']),
-  &:focus-visible {
-    background-color: lighten($color: #3c5a89, $amount: 10%);
-  }
-
-  &[data-disabled='true'] {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    color: #999;
-  }
-
-  &.btn--icon {
-    background-color: transparent;
-    padding: 0;
-  }
-
-  &:focus-visible {
-    outline: 1px solid gold;
-  }
-}
-
-// Text
-.text {
-  &--accent {
-    color: gold;
-  }
-}
-
-// Card modal
-.g-card {
-  position: fixed;
-  z-index: 999;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  width: 90vw;
-  max-width: 550px;
-
-  padding: 0.5em 1em;
-
-  border-radius: 1em;
-
-  background-color: #1d1c33;
-  box-shadow: 0 0 6px 1px #414141;
-}
-
-// Scrollbar
-/* width */
-::-webkit-scrollbar {
-  width: 7px;
-  height: 7px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: #333;
-}
-
-/* Corner */
-::-webkit-scrollbar-corner {
-  background: #333;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 1rem;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #aaa;
-}
 </style>