Poprawki wyglądu; cleanup kodu

src/App.vue

@@ -1,67 +1,12 @@
 <template>
   <div class="app_container">
-    <UpdateModal />
-
     <transition name="modal-anim">
       <keep-alive>
         <TrainModal v-if="store.chosenModalTrainId" />
       </keep-alive>
     </transition>
 
-    <header class="app_header">
-      <div class="header_container">
-        <div class="header_icons">
-          <span class="icons-top">
-            <img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
-            <img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
-          </span>
-          <span class="icons-bottom">
-            <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
-              <img :src="getIcon('dollar')" alt="icon paypal" />
-            </a>
-
-            <a href="https://discord.gg/x2mpNN3svk" target="_blank">
-              <img :src="getIcon('discord', 'png')" alt="icon discord" />
-            </a>
-          </span>
-        </div>
-
-        <div class="header_body">
-          <status-indicator />
-          <span class="header_brand">
-            <img :src="getImage('stacjownik-header-logo.svg')" alt="Stacjownik" />
-          </span>
-
-          <span class="header_info">
-            <Clock />
-
-            <div class="info_counter">
-              <img :src="getIcon('dispatcher')" alt="icon dispatcher" />
-              <span class="text--primary">{{ onlineDispatchers.length }}</span>
-              <span class="text--grayed"> / </span>
-              <span class="text--primary">{{ trainList.length }}</span>
-              <img :src="getIcon('train')" alt="icon train" />
-            </div>
-
-            <span class="info_region">
-              <SelectBox :itemList="computedRegions" :defaultItemIndex="0" @selected="changeRegion" />
-            </span>
-          </span>
-
-          <span class="header_links">
-            <router-link class="route" active-class="route-active" to="/" exact>
-              {{ $t('app.sceneries') }}
-            </router-link>
-            /
-            <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }}</router-link>
-            /
-            <router-link class="route" active-class="route-active" to="/journal/timetables">
-              {{ $t('app.journal') }}
-            </router-link>
-          </span>
-        </div>
-      </div>
-    </header>
+    <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
 
     <main class="app_main">
       <router-view v-slot="{ Component }">
@@ -87,23 +32,22 @@ import { computed, defineComponent, provide, ref, watch } from 'vue';
 import Clock from './components/App/Clock.vue';
 
 import packageInfo from '.././package.json';
-import options from './data/options.json';
 
 import StatusIndicator from './components/App/StatusIndicator.vue';
 import SelectBox from './components/Global/SelectBox.vue';
 import { useStore } from './store/store';
-import UpdateModal from './components/App/UpdateModal.vue';
 import TrainModal from './components/Global/TrainModal.vue';
 import StorageManager from './scripts/managers/storageManager';
 import imageMixin from './mixins/imageMixin';
+import AppHeader from './components/App/AppHeader.vue';
 
 export default defineComponent({
   components: {
     Clock,
     StatusIndicator,
     SelectBox,
-    UpdateModal,
     TrainModal,
+    AppHeader,
   },
 
   mixins: [imageMixin],
@@ -127,30 +71,8 @@ export default defineComponent({
     };
   },
 
-  computed: {
-    trainList() {
-      return this.store.trainList.filter((train) => train.online);
-    },
-
-    computedRegions() {
-      return this.options.regions.map((region) => {
-        const regionStationCount =
-          this.store.apiData.stations?.filter((station) => station.region == region.id && station.isOnline).length || 0;
-        const regionTrainCount =
-          this.store.apiData.trains?.filter((train) => train.region == region.id && train.online).length || 0;
-
-        return {
-          id: region.id,
-          value: `${region.value} <div class='text--grayed'>${regionStationCount} / ${regionTrainCount}</div>`,
-          selectedValue: region.value,
-        };
-      });
-    },
-  },
-
   data: () => ({
     VERSION: packageInfo.version,
-    options,
 
     currentLang: 'pl',
     releaseURL: '',
@@ -164,37 +86,20 @@ export default defineComponent({
     this.updateStorage();
     this.setReleaseURL();
 
-    function preventScroll(e: Event) {
-      e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-
-      return false;
-    }
-
     watch(
       () => this.store.blockScroll,
       (value) => {
         if (value) {
           document.body.classList.add('no-scroll');
-          // document.querySelector('#app')!.addEventListener('wheel', preventScroll, { passive: false,  });
-          // document.querySelector('#app')!.addEventListener('touchmove', preventScroll, { passive: false });
           return;
         }
 
         document.body.classList.remove('no-scroll');
-
-        // document.querySelector('#app')!.removeEventListener('wheel', preventScroll);
-        // document.querySelector('#app')!.removeEventListener('touchmove', preventScroll);
       }
     );
   },
 
   methods: {
-    changeRegion(region: { id: string; value: string }) {
-      this.store.changeRegion(region);
-    },
-
     changeLang(lang: string) {
       this.$i18n.locale = lang;
       this.currentLang = lang;