chore(app): added the Creator badge

bump(version): v1.35.0
chore(DriverView): improved propositions locale texts
2026-05-03 05:18:11 +00:00 · 2026-05-02 15:40:05 +02:00 · 2026-04-29 13:43:07 +02:00 · 2026-04-28 14:34:04 +02:00 · 2026-04-28 14:33:34 +02:00 · 2026-04-28 14:32:48 +02:00
113 changed files with 6037 additions and 4007 deletions
@@ -15,13 +15,12 @@ pnpm-debug.log*

 # Editor directories and files
 .idea
-.vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
-node_modules
+.vscode/settings.json

 *.log

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none"
+}
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "esbenp.prettier-vscode"]
+}
@@ -1,4 +1,4 @@
-# [STACJOWNIK TD2](https://stacjownik-td2.web.app)
+# [STACJOWNIK TD2](https://stacjownik-td2.spythere.eu)

 ODŚWIEŻANA LISTA SCENERII I SKŁADÓW ONLINE DLA [SYMULATORA TRAIN DRIVER 2](https://td2.info.pl)

@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -20,7 +20,7 @@
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
    <meta name="msapplication-TileColor" content="#da532c" />

-    <link rel="icon" href="favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />

    <link rel="stylesheet" href="/fa/css/fontawesome.css" />
    <link rel="stylesheet" href="/fa/css/brands.css" />
@@ -28,7 +28,13 @@
    <link rel="stylesheet" href="/fa/css/solid.css" />

    <!-- Preloads -->
-    <link rel="preload" href="fonts/Quicksand-Bold.woff2" as="font" type="font/woff2" crossorigin />
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Bold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />

    <link
      rel="preload"
@@ -62,28 +68,28 @@
      crossorigin
    />

-    <link rel="preload" as="image" href="/images/icon-pl.svg" />
    <link rel="preload" as="image" href="/images/stacjownik-header-logo.svg" />
    <link rel="preload" as="image" href="/images/icon-dispatcher.svg" />
    <link rel="preload" as="image" href="/images/icon-train.svg" />
-    <link rel="preload" as="image" href="/images/icon-arrow-asc.svg" />
    <link rel="preload" as="image" href="/images/icon-arrow-desc.svg" />
-    <link rel="preload" as="image" href="/images/icon-filter2.svg" />
-    <link rel="preload" as="image" href="/images/icon-stats.svg" />
-    <link rel="preload" as="image" href="/images/icon-gnr.svg" />
    <link rel="preload" as="image" href="/images/icon-pojazdownik.svg" />
-    <link rel="preload" as="image" href="/images/icon-diamond.svg" />
+    <link rel="preload" as="image" href="/images/icon-stats.svg" />
+    <link rel="preload" as="image" href="/images/icon-filter2.svg" />
    <link rel="preload" as="image" href="/images/icon-user.svg" />
    <link rel="preload" as="image" href="/images/icon-like.svg" />
+    <link rel="preload" as="image" href="/images/icon-gnr.svg" />
    <link rel="preload" as="image" href="/images/icon-spawn.svg" />
    <link rel="preload" as="image" href="/images/icon-timetableAll.svg" />
    <link rel="preload" as="image" href="/images/icon-timetableUnconfirmed.svg" />
    <link rel="preload" as="image" href="/images/icon-timetableConfirmed.svg" />
    <link rel="preload" as="image" href="/images/icon-discord.png" />

+    <link rel="prefetch" as="image" href="/images/icon-arrow-asc.svg" />
+    <link rel="prefetch" as="image" href="/images/icon-diamond.svg" />
+
    <!-- Static OpenGraph meta -->
    <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
-    <meta property="og:url" content="https://stacjownik-td2.web.app/" />
+    <meta property="og:url" content="https://stacjownik-td2.spythere.eu/" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Stacjownik" />
    <meta
@@ -1,6 +1,6 @@
 {
  "name": "stacjownik",
-  "version": "1.31.0",
+  "version": "1.35.0",
  "private": true,
  "type": "module",
  "scripts": {
@@ -26,12 +26,12 @@
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
-    "@types/node": "^24.3.1",
+    "@tsconfig/node24": "^24.0.4",
+    "@types/node": "^24.12.0",
    "@types/showdown": "^2.0.6",
    "@vite-pwa/assets-generator": "^1.0.0",
    "@vitejs/plugin-vue": "^6.0.1",
    "@vue/tsconfig": "^0.8.1",
-    "axios": "^1.9.0",
    "prettier": "^3.3.3",
    "typescript": "^5.5.4",
    "vite": "^7.1.4",
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-cz" viewBox="0 0 640 480">
+  <path fill="#fff" d="M0 0h640v240H0z"/>
+  <path fill="#d7141a" d="M0 240h640v240H0z"/>
+  <path fill="#11457e" d="M360 240 0 0v480z"/>
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-de" viewBox="0 0 640 480">
+  <path fill="#fc0" d="M0 320h640v160H0z"/>
+  <path fill="#000001" d="M0 0h640v160H0z"/>
+  <path fill="red" d="M0 160h640v160H0z"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-it" viewBox="0 0 640 480">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="#fff" d="M0 0h640v480H0z"/>
+    <path fill="#009246" d="M0 0h213.3v480H0z"/>
+    <path fill="#ce2b37" d="M426.7 0H640v480H426.7z"/>
+  </g>
+</svg>
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ru" viewBox="0 0 640 480">
+  <path fill="#fff" d="M0 0h640v160H0z"/>
+  <path fill="#0039a6" d="M0 160h640v160H0z"/>
+  <path fill="#d52b1e" d="M0 320h640v160H0z"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-se" viewBox="0 0 640 480">
+  <path fill="#005293" d="M0 0h640v480H0z"/>
+  <path fill="#fecb00" d="M176 0v192H0v96h176v192h96V288h368v-96H272V0z"/>
+</svg>
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-sk" viewBox="0 0 640 480">
+  <path fill="#ee1c25" d="M0 0h640v480H0z"/>
+  <path fill="#0b4ea2" d="M0 0h640v320H0z"/>
+  <path fill="#fff" d="M0 0h640v160H0z"/>
+  <path fill="#fff" d="M233 370.8c-43-20.7-104.6-61.9-104.6-143.2 0-81.4 4-118.4 4-118.4h201.3s3.9 37 3.9 118.4S276 350 233 370.8"/>
+  <path fill="#ee1c25" d="M233 360c-39.5-19-96-56.8-96-131.4s3.6-108.6 3.6-108.6h184.8s3.5 34 3.5 108.6C329 303.3 272.5 341 233 360"/>
+  <path fill="#fff" d="M241.4 209c10.7.2 31.6.6 50.1-5.6 0 0-.4 6.7-.4 14.4s.5 14.4.5 14.4c-17-5.7-38.1-5.8-50.2-5.7v41.2h-16.8v-41.2c-12-.1-33.1 0-50.1 5.7 0 0 .5-6.7.5-14.4s-.5-14.4-.5-14.4c18.5 6.2 39.4 5.8 50 5.6v-25.9c-9.7 0-23.7.4-39.6 5.7 0 0 .5-6.6.5-14.4 0-7.7-.5-14.4-.5-14.4 15.9 5.3 29.9 5.8 39.6 5.7-.5-16.4-5.3-37-5.3-37s9.9.7 13.8.7 13.8-.7 13.8-.7-4.8 20.6-5.3 37c9.7.1 23.7-.4 39.6-5.7 0 0-.5 6.7-.5 14.4s.5 14.4.5 14.4a119 119 0 0 0-39.7-5.7v26z"/>
+  <path fill="#0b4ea2" d="M233 263.3c-19.9 0-30.5 27.5-30.5 27.5s-6-13-22.2-13c-11 0-19 9.7-24.2 18.8 20 31.7 51.9 51.3 76.9 63.4 25-12 57-31.7 76.9-63.4-5.2-9-13.2-18.8-24.2-18.8-16.2 0-22.2 13-22.2 13S253 263.3 233 263.3"/>
+</svg>
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ua" viewBox="0 0 640 480">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="gold" d="M0 0h640v480H0z"/>
+    <path fill="#0057b8" d="M0 0h640v240H0z"/>
+  </g>
+</svg>
@@ -7,11 +7,6 @@

    <AppWelcomeCard :is-card-open="isWelcomeCardOpen" @toggle-card="closeWelcomeCard" />

-    <MigrateInfoCard
-      :is-open="store.isMigrateInfoCardOpen"
-      @toggle-card="closeMigrateInfoCard"
-    ></MigrateInfoCard>
-
    <Tooltip />

    <AppHeader />
@@ -35,7 +30,6 @@

 <script lang="ts">
 import { defineComponent } from 'vue';
-import axios from 'axios';

 import { version } from '../package.json';
 import { Status } from './typings/common';
@@ -52,11 +46,9 @@ import UpdateCard from './components/App/UpdateCard.vue';
 import StorageManager from './managers/storageManager';
 import AppFooter from './components/App/AppFooter.vue';
 import AppWelcomeCard from './components/App/AppWelcomeCard.vue';
-import MigrateInfoCard from './components/App/MigrateInfoCard.vue';

 const STORAGE_VERSION_KEY = 'app_version';
 const WELCOME_CARD_SEEN_KEY = 'welcome_card_seen';
-const MIGRATE_INFO_CARD_SEEN_KEY = 'migrate_info_card_seen';

 export default defineComponent({
  components: {
@@ -66,7 +58,6 @@ export default defineComponent({
    AppFooter,
    UpdateCard,
    AppWelcomeCard,
-    MigrateInfoCard,
    Tooltip
  },

@@ -99,7 +90,6 @@ export default defineComponent({
      this.setupOfflineHandling();
      this.checkAppVersion();
      this.handleQueries();
-      this.handleMigrateInfo();

      this.apiStore.setupAPIData();
    },
@@ -110,10 +100,6 @@ export default defineComponent({
      if (query.get('welcomeCard') == '1') {
        this.isWelcomeCardOpen = true;
      }
-
-      if (query.get('migrateCard') == '1') {
-        this.store.isMigrateInfoCardOpen = true;
-      }
    },

    async checkAppVersion() {
@@ -127,11 +113,15 @@ export default defineComponent({
      }

      try {
-        const releaseData = await (
-          await axios.get('https://api.github.com/repos/Spythere/stacjownik/releases/latest')
-        ).data;
+        const response = await fetch(
+          'https://api.github.com/repos/Spythere/stacjownik/releases/latest'
+        );

-        if (!releaseData) return;
+        if (!response.ok) {
+          throw new Error('Failed to fetch release data from repository!');
+        }
+
+        const releaseData = await response.json();

        this.store.appUpdate = {
          version,
@@ -143,7 +133,7 @@ export default defineComponent({
          (storageVersion != '' && storageVersion != version && this.isOnProductionHost) ||
          import.meta.env.VITE_UPDATE_TEST === 'test';
      } catch (error) {
-        console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
+        console.error(error);
      }

      StorageManager.setStringValue(STORAGE_VERSION_KEY, version);
@@ -172,13 +162,6 @@ export default defineComponent({
      this.apiStore.connectToAPI();
    },

-    handleMigrateInfo() {
-      if (location.hostname != 'stacjownik-td2.web.app') return;
-      if (StorageManager.getBooleanValue(MIGRATE_INFO_CARD_SEEN_KEY) === true) return;
-
-      this.store.isMigrateInfoCardOpen = true;
-    },
-
    loadLang() {
      const storageLang = StorageManager.getStringValue('lang');

@@ -200,11 +183,6 @@ export default defineComponent({
    closeWelcomeCard() {
      this.isWelcomeCardOpen = false;
      StorageManager.setBooleanValue(WELCOME_CARD_SEEN_KEY, true);
-    },
-
-    closeMigrateInfoCard() {
-      this.store.isMigrateInfoCardOpen = false;
-      StorageManager.setBooleanValue(MIGRATE_INFO_CARD_SEEN_KEY, true);
    }
  }
 });
@@ -212,6 +190,7 @@ export default defineComponent({

 <style lang="scss">
@use './styles/animations';
+@use './styles/global';

 // APP
 #app {
@@ -7,13 +7,6 @@
      v{{ version }}{{ isOnProductionHost ? '' : 'dev' }}
    </button>

-    <br />
-    <a href="https://discord.gg/x2mpNN3svk">
-      <img src="/images/icon-discord.png" alt="discord logo icon" />&nbsp;<b class="text--discord">
-        {{ $t('footer.discord') }}
-      </b>
-    </a>
-
    <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
  </footer>
 </template>
@@ -5,11 +5,11 @@

      <div class="language-select">
        <button :data-active="$i18n.locale == 'pl'" @click="store.changeLocale('pl')">
-          <img src="/images/icon-pl.svg" alt="" width="45" />
+          <FlagIcon :language-id="0" width="2.5em" />
        </button>

        <button :data-active="$i18n.locale == 'en'" @click="store.changeLocale('en')">
-          <img src="/images/icon-en.svg" alt="" width="45" />
+          <FlagIcon :language-id="1" width="2.5em" />
        </button>
      </div>

@@ -63,19 +63,19 @@
        </b>

        <div class="apps-grid">
-          <a class="app-item" href="https://pojazdownik-td2.web.app/" target="_blank">
+          <a class="app-item" href="https://pojazdownik-td2.spythere.eu/" target="_blank">
            <img src="/images/icon-pojazdownik.svg" alt="pojazdownik app logo" />
            <h3 class="text--primary">Pojazdownik</h3>
            <p>{{ $t('welcome.pojazdownik-desc') }}</p>
          </a>

-          <a class="app-item" href="https://generator-td2.web.app/" target="_blank">
+          <a class="app-item" href="https://generator-td2.spythere.eu/" target="_blank">
            <img src="/images/icon-gnr.svg" alt="generator app logo" />
            <h3 class="text--primary">GeneraTOR</h3>
            <p>{{ $t('welcome.generator-desc') }}</p>
          </a>

-          <a class="app-item" href="https://srjp-td2.web.app/" target="_blank">
+          <a class="app-item" href="https://srjp-td2.spythere.eu/" target="_blank">
            <img src="/images/icon-srjp.svg" alt="srjp app logo" />
            <h3 class="text--primary">Rozkładownik</h3>
            <p>{{ $t('welcome.srjp-desc') }}</p>
@@ -116,6 +116,7 @@
 <script setup lang="ts">
 import Card from '../Global/Card.vue';
 import { useMainStore } from '../../store/mainStore';
+import FlagIcon from '../Global/FlagIcon.vue';

 const store = useMainStore();

@@ -157,7 +158,7 @@ a.link {
  justify-content: center;
  margin: 0.5em 0;

-  button[data-active='false'] img {
+  button[data-active='false'] ::v-deep(img) {
    opacity: 0.5;
  }
 }
@@ -1,94 +0,0 @@
-<template>
-  <Card :is-open="isOpen" @toggle-card="toggleCard">
-    <div class="body-content">
-      <div class="content-top">
-        <img src="/images/icon-loading.svg" alt="loading" height="125" />
-        <h1>{{ t('migrate-info.header-text') }}</h1>
-      </div>
-
-      <div>
-        <p v-html="t('migrate-info.paragraph-1-html')"></p>
-
-        <p>
-          <a class="new-link" href="https://stacjownik-td2.spythere.eu/" target="_blank">
-            {{ t('migrate-info.paragraph-2-link-text') }}
-          </a>
-        </p>
-
-        <p>
-          {{ t('migrate-info.paragraph-3-text') }}
-        </p>
-
-        <p class="info-bottom" v-html="t('migrate-info.paragraph-4-html')"></p>
-      </div>
-
-      <div class="content-actions">
-        <button class="btn btn--action" @click="toggleCard">PRZYJĄŁEM!</button>
-      </div>
-    </div>
-  </Card>
-</template>
-
-<script lang="ts" setup>
-import { useI18n } from 'vue-i18n';
-import Card from '../Global/Card.vue';
-
-const { t } = useI18n();
-
-defineProps({
-  isOpen: {
-    type: Boolean,
-    required: true
-  }
-});
-
-const emit = defineEmits(['toggleCard']);
-
-function toggleCard() {
-  emit('toggleCard');
-}
-</script>
-
-<style lang="scss" scoped>
-.body-content {
-  max-width: 800px;
-  min-height: 500px;
-  padding: 1em 0.5em;
-
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  gap: 0.5em;
-
-  text-align: center;
-  font-size: 1.1em;
-}
-
-p {
-  padding: 0.5em 0;
-}
-
-a.new-link {
-  font-size: 1.2em;
-  color: var(--clr-primary);
-  color: transparent;
-
-  background: var(--clr-primary);
-  background: linear-gradient(90deg, var(--clr-primary), #ffffff);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-
-  text-shadow: var(--clr-primary) 0 0 10px;
-}
-
-.info-bottom {
-  font-size: 0.9em;
-  color: #ccc;
-}
-
-.content-actions {
-  display: flex;
-  justify-content: center;
-  font-size: 1.2em;
-}
-</style>
@@ -1,7 +1,9 @@
 <template>
  <Card :is-open="isUpdateCardOpen" @toggle-card="toggleCard(false)">
    <div class="content" tabindex="0" ref="content">
-      <h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>
+      <h1 class="content-title">
+        <i class="fa-solid fa-wand-sparkles"></i> {{ $t('update.title') }}
+      </h1>

      <div class="features-body" v-if="htmlChangelog != ''" v-html="htmlChangelog"></div>
      <div class="no-features" v-else>{{ $t('update.no-data') }}</div>
@@ -16,7 +18,7 @@

        <i18n-t keypath="update.info-2">
          <template v-slot:link>
-            <a href="https://github.com/Spythere/stacjownik" target="_blank">{{
+            <a href="https://github.com/Spythere/stacjownik/releases" target="_blank">{{
              $t('update.info-2-link-text')
            }}</a>
          </template>
@@ -86,19 +88,28 @@ export default defineComponent({
 }

 ::v-deep(h2) {
-  margin-top: 1em;
  padding: 0.5em 0;
-  border-bottom: 1px solid #aaa;
+
+  &::after {
+    content: '';
+    display: block;
+    height: 2px;
+    width: 100%;
+    background-color: #aaa;
+    margin-top: 0.25em;
+  }
 }

 ::v-deep(h3) {
-  padding: 0.5em 0;
+  padding-bottom: 0.25em;
 }

 ::v-deep(ul) {
  list-style: disc;
-  padding: 0 1.5em;
  line-height: 1.5em;
+  padding: 0 1.5em;
+
+  padding-bottom: 0.5em;
 }

 .content {
@@ -112,6 +123,19 @@ export default defineComponent({
  max-width: 700px;
 }

+.content-title {
+  color: var(--clr-primary);
+  color: transparent;
+
+  background: var(--clr-primary);
+  background: linear-gradient(90deg, var(--clr-primary) 30%, #ffffff 90%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  text-shadow: var(--clr-primary) 0 0 10px;
+}
+
 .no-features {
  text-align: center;
 }
@@ -0,0 +1,325 @@
+<template>
+  <div class="driver-propositions">
+    <h3>{{ t('trains.number-propositions-header') }}</h3>
+
+    <div class="categories-select">
+      <button
+        v-for="(category, i) in availableCategories"
+        class="btn btn--option btn--action"
+        @click="selectCategory(i)"
+        :class="{ checked: i == chosenCategoryIndex }"
+      >
+        {{ category }}
+      </button>
+    </div>
+
+    <div v-if="numberPropositions.length > 0" class="propositions-numbers">
+      <div v-if="chosenCategory">
+        <b>{{ chosenCategory }} </b> -
+        {{ t(`categories.${chosenCategory.slice(0, 2)}`) }}
+        ({{ t(`categories.${chosenCategory.slice(2)}`) }})
+      </div>
+
+      <div v-if="chosenCategoryRules">
+        <span v-if="chosenCategoryRules[0]"
+          >{{ t('trains.number-propositions-third-number') }}
+          <b class="text--primary">{{ chosenCategoryRules[0] }}</b> &bull;
+        </span>
+
+        <span
+          >{{
+            t('trains.number-propositions-last-nums', {
+              count: chosenCategoryRules[1].length
+            })
+          }}
+          <b class="text--primary">{{ chosenCategoryRules[1] }}</b> -
+          <b class="text--primary">{{ chosenCategoryRules[2] }}</b></span
+        >
+      </div>
+
+      <div style="margin-top: 0.5em">
+        <b>{{ t('trains.number-propositions-title') }}&nbsp;</b>
+        <i>{{ numberPropositions.join(', ') }}</i>
+      </div>
+    </div>
+
+    <div class="no-propositions" v-else>{{ t('trains.number-propositions-empty') }}</div>
+
+    <div class="cargo-warnings" v-if="getCargoWarnings.size > 0">
+      <hr />
+      <h3>{{ t('cargo-warnings.title') }}</h3>
+
+      <div class="warnings-container">
+        <div
+          v-for="warning in getCargoWarnings"
+          class="train-badge"
+          :class="`${warning.split('-')[0]}`"
+        >
+          {{ t('cargo-warnings.' + warning) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, PropType, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Train } from '../../typings/common';
+import rulesJSON from '../../data/trainNumberRules.json';
+import { useApiStore } from '../../store/apiStore';
+
+const { t } = useI18n();
+const apiStore = useApiStore();
+
+const props = defineProps({
+  chosenTrain: {
+    type: Object as PropType<Train>,
+    required: true
+  }
+});
+
+const emits = defineEmits(['selectCategory']);
+
+const chosenCategoryIndex = ref(0);
+
+const numberPropositions = ref<string[]>([]);
+const chosenCategoryRules = ref<any[]>([]);
+
+watch(
+  computed(() => props.chosenTrain.trainNo),
+  () => {
+    chosenCategoryIndex.value = 0;
+    generateNumberPropositions();
+  }
+);
+
+onMounted(() => {
+  generateNumberPropositions();
+});
+
+function generateNumberPropositions() {
+  const categoryCode = chosenCategory.value?.slice(0, 2);
+  const trainNoStr = props.chosenTrain.trainNo.toString();
+
+  // Get category rules
+  const rules = categoryCode
+    ? ((rulesJSON.categoriesRules as any)[categoryCode] as any[])
+    : undefined;
+
+  if (!categoryCode || !rules) {
+    numberPropositions.value.length = 0;
+    chosenCategoryRules.value.length = 0;
+
+    return;
+  }
+
+  const [thirdNumber, minRange, maxRange] = rules;
+
+  const propositionsArr: string[] = [];
+
+  for (let i = 0; i < 5; i++) {
+    let generatedNumStr = '';
+
+    generatedNumStr += trainNoStr[0] ?? Math.floor(Math.random() * 10);
+    generatedNumStr += trainNoStr[1] ?? Math.floor(Math.random() * 10);
+
+    // Third number
+    generatedNumStr += thirdNumber ?? '';
+
+    // Remaining numbers
+    const rangeNums = minRange?.length ?? 3;
+
+    const randRange = Math.floor(
+      Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)
+    ).toString();
+
+    const leadingZeros = new Array(Math.abs(randRange.toString().length - rangeNums))
+      .fill('0')
+      .join('');
+
+    generatedNumStr += `${leadingZeros}${randRange}`;
+
+    const isNumberTaken =
+      apiStore.activeData?.trains?.some((t) => t.trainNo.toString() == generatedNumStr) ?? false;
+
+    if (!isNumberTaken) {
+      propositionsArr.push(generatedNumStr);
+    } else {
+      i--;
+    }
+
+    if (Number(randRange) > Number(maxRange)) break;
+  }
+
+  numberPropositions.value = propositionsArr;
+  chosenCategoryRules.value = rules;
+}
+
+const chosenCategory = computed(() => {
+  return availableCategories.value[chosenCategoryIndex.value];
+});
+
+const getCargoWarnings = computed(() => {
+  const stockList = props.chosenTrain.stockList;
+
+  let warnings: Set<string> = new Set();
+
+  stockList.forEach((stockVehicle) => {
+    const [vehicleName, vehicleCargo] = stockVehicle.split(':');
+
+    if (vehicleName.startsWith('WB117')) warnings.add(vehicleCargo ? 'twr-un1965' : 'tn-un1965');
+    else if (vehicleName.startsWith('445Rb'))
+      warnings.add(vehicleCargo ? 'tn-un1202' : 'tn-un1202-empty');
+    else if (vehicleName.startsWith('EDK80')) warnings.add('pn-edk80');
+
+    if (vehicleCargo) {
+      if (vehicleCargo.startsWith('wt_20')) warnings.add('pn-innofreight');
+      else if (/^(tank|vehicles_01|truck)/.test(vehicleCargo)) warnings.add('pn-military');
+    }
+  });
+
+  return warnings;
+});
+
+const availableCategories = computed(() => {
+  const stockList = props.chosenTrain.stockList;
+  const headVehicle = stockList[0]?.split('-')[0] ?? '';
+
+  let availableCategories: string[] = [];
+  let categoryTraction = 'E';
+
+  let vehicleTypesSet = new Set<string>();
+  let wagonsNamesSet = new Set<string>();
+  let cargoNamesSet = new Set<string>();
+
+  for (const stockName of stockList) {
+    const [vehicleName, ...cargoList] = stockName.split(':');
+
+    const vehicleData = apiStore.vehiclesData?.vehicles.find((v) => v.name == vehicleName);
+
+    if (!vehicleData) continue;
+
+    vehicleTypesSet.add(vehicleData.type);
+
+    if (vehicleData.type.startsWith('wagon-')) wagonsNamesSet.add(vehicleData.name.split('_')[0]);
+
+    if (cargoList !== undefined) cargoList.forEach((c) => cargoNamesSet.add(c.split('_')[0]));
+  }
+
+  let vehicleTypesArr = [...vehicleTypesSet];
+  let wagonsNamesArr = [...wagonsNamesSet];
+
+  // Traction
+  if (vehicleTypesArr[0] == 'loco-electric') categoryTraction = 'E';
+  else if (vehicleTypesArr[0] == 'loco-diesel') categoryTraction = 'S';
+  else if (vehicleTypesArr[0] == 'unit-electric') categoryTraction = 'J';
+  else categoryTraction = 'M';
+
+  // EMU / DMU - M*, R*, P*
+  if (vehicleTypesArr.length == 1 && (categoryTraction == 'J' || categoryTraction == 'M')) {
+    availableCategories.push('MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
+  }
+  // Only locos (up to 3) - LT, LP, LS
+  else if (stockList.length <= 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
+    if (/^(EU|ET|201E|4E|SU|ST|M62|CTLR4C)/.test(headVehicle)) availableCategories.push('LT');
+    if (/^(EU|EP|SU|SP)/.test(headVehicle)) availableCategories.push('LP');
+    if (/^(SM)/.test(headVehicle)) availableCategories.push('LS');
+  }
+  // Only locos (more than 3) - TH
+  else if (stockList.length > 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
+    availableCategories.push('TH');
+  }
+  // Loco(s) + passenger only wagons - M*, R*, E*, P*
+  else if (vehicleTypesArr.every((v) => v.startsWith('loco-') || v == 'wagon-passenger')) {
+    availableCategories.push('EI', 'EC', 'EN', 'MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
+  }
+  // Loco(s) + cargo only / mixed wagons - T*, Z*
+  else {
+    if (wagonsNamesArr.every((v) => /^(627Z|412Z)/.test(v)))
+      availableCategories.push('TC', 'TD', 'TS');
+    else if (stockList.slice(1).every((v) => /PKPE/.test(v))) {
+      availableCategories.push('ZU', 'ZN');
+    } else if (wagonsNamesArr.length < 3 || cargoNamesSet.size < 3) {
+      availableCategories.push('TM', 'TG', 'TS', 'TK');
+    } else {
+      availableCategories.push('TN', 'TR', 'TS', 'TK');
+    }
+  }
+
+  return availableCategories.map((c) => `${c}${categoryTraction}`);
+});
+
+function selectCategory(i: number) {
+  chosenCategoryIndex.value = i;
+  generateNumberPropositions();
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+@use '../../styles/badge';
+
+.driver-propositions {
+  margin-bottom: 1em;
+  padding: 0.5em;
+  background-color: #111;
+}
+
+.categories-select {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 0.5em;
+
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: calc(-0.5em);
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+    background-color: #aaa;
+  }
+}
+
+.propositions-numbers {
+  margin-top: 1em;
+}
+
+.no-propositions {
+  margin-top: 1em;
+  color: #ccc;
+}
+
+.cargo-warnings {
+  margin-top: 0.5em;
+
+  h3 {
+    margin: 0.5em 0;
+  }
+}
+
+.warnings-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+@include responsive.smallScreen {
+  .driver-propositions {
+    text-align: center;
+  }
+
+  .categories-select {
+    justify-content: center;
+  }
+
+  .warnings-container {
+    justify-content: center;
+  }
+}
+</style>
@@ -1,37 +1,41 @@
 <template>
-    <div class="driver-top-actions">
-        <div class="actions-container">
-            <div class="actions actions-left">
-                <button class="a-button btn--filled btn--image" @click="routerReturn">
-                    <img src="/images/icon-back.svg" alt="train icon" />
-                    <span>
-                        {{ t('trains.driver-return-link') }}
-                    </span>
-                </button>
-            </div>
+  <div class="driver-top-actions">
+    <div class="actions-container">
+      <div class="actions actions-left">
+        <button class="a-button btn--filled btn--image" @click="routerReturn">
+          <img src="/images/icon-back.svg" alt="train icon" />
+          <span>
+            {{ t('trains.driver-return-link') }}
+          </span>
+        </button>
+      </div>

-            <div class="actions actions-right">
-                <a class="a-button btn--filled btn--image" :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
-                    target="_blank">
-                    <span class="hidable">
-                        {{ t('trains.driver-srjp-link') }}
-                    </span>
+      <div class="actions actions-right">
+        <a
+          class="a-button btn--filled btn--image"
+          :href="`https://srjp-td2.spythere.eu/?id=${chosenTrain.id}`"
+          target="_blank"
+        >
+          <span class="hidable">
+            {{ t('trains.driver-srjp-link') }}
+          </span>

-                    <img src="/images/icon-srjp.svg" alt="srjp icon" />
-                </a>
+          <img src="/images/icon-srjp.svg" alt="srjp icon" />
+        </a>

-                <router-link :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
-                    class="a-button btn--filled btn--image">
-                    <span class="hidable">
-                        {{ t('trains.driver-journal-link') }}
-                    </span>
-
-                    <img src="/images/icon-train.svg" alt="train icon" />
-                </router-link>
-            </div>
-        </div>
+        <router-link
+          :to="`/profile?playerId=${chosenTrain.driverId}`"
+          class="a-button btn--filled btn--image"
+        >
+          <span class="hidable">
+            {{ t('trains.driver-profile-link') }}
+          </span>

+          <img src="/images/icon-user.svg" alt="user icon" />
+        </router-link>
+      </div>
    </div>
+  </div>
 </template>

 <script setup lang="ts">
@@ -44,42 +48,40 @@ const router = useRouter();
 const { t } = useI18n();

 defineProps({
-    chosenTrain: {
-        type: Object as PropType<Train>,
-        required: true
-    }
+  chosenTrain: {
+    type: Object as PropType<Train>,
+    required: true
+  }
 });

 function routerReturn() {
-    router.back();
+  router.back();
 }
 </script>

-
 <style lang="scss" scoped>
@use '../../styles/responsive';

-
 .actions-container {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    gap: 0.5em;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.5em;
 }

 .actions {
-    display: flex;
-    gap: 0.5em;
+  display: flex;
+  gap: 0.5em;
 }

-.actions-container>.actions>.a-button {
-    padding: 0.5em;
-    border-radius: 0.5em 0.5em 0 0;
+.actions-container > .actions > .a-button {
+  padding: 0.5em;
+  border-radius: 0.5em 0.5em 0 0;
 }

@include responsive.smallScreen {
-    span.hidable {
-        display: none;
-    }
+  span.hidable {
+    display: none;
+  }
 }
-</style>
+</style>
@@ -4,66 +4,21 @@

    <!-- Train action buttons -->
    <div class="train-stock-actions">
-      <button class="btn btn--action" style="margin: 1em 0" @click="copyStockToClipboard()">
+      <button class="btn btn--action" @click="copyStockToClipboard()">
        <i class="fa-regular fa-copy"></i> {{ i18n.t('trains.stock-copy') }}
      </button>

-      <button class="btn btn--action" style="margin: 1em 0" @click="toggleNumberPropositions()">
+      <button class="btn btn--action" @click="toggleNumberPropositions()">
        <i class="fa-regular fa-lightbulb"></i> {{ i18n.t('trains.number-propositions') }}
      </button>
    </div>

    <!-- Proposed numbers container -->
-    <transition name="view-anim" class="propositions-container">
-      <div v-if="arePropositionsVisible">
-        <h3 style="margin-bottom: 0.5em">{{ i18n.t('trains.number-propositions-header') }}</h3>
-
-        <div class="categories-select">
-          <button
-            v-for="(category, i) in availableCategories"
-            class="btn btn--option btn--action"
-            @click="selectCategory(i)"
-            :class="{ checked: i == chosenCategoryIndex }"
-          >
-            {{ category }}
-          </button>
-        </div>
-
-        <div v-if="numberPropositions.length > 0" class="propositions-numbers">
-          <div v-if="chosenCategory">
-            <b>{{ chosenCategory }} </b> -
-            {{ i18n.t(`categories.${chosenCategory.slice(0, 2)}`) }}
-            ({{ i18n.t(`categories.${chosenCategory.slice(2)}`) }})
-          </div>
-
-          <div v-if="chosenCategoryRules">
-            <span v-if="chosenCategoryRules[0]"
-              >{{ i18n.t('trains.number-propositions-third-number') }}
-              <b class="text--primary">{{ chosenCategoryRules[0] }}</b> &bull;
-            </span>
-
-            <span
-              >{{
-                i18n.t('trains.number-propositions-last-nums', {
-                  count: chosenCategoryRules[1].length
-                })
-              }}
-              <b class="text--primary">{{ chosenCategoryRules[1] }}</b> -
-              <b class="text--primary">{{ chosenCategoryRules[2] }}</b></span
-            >
-          </div>
-
-          <div style="margin-top: 0.5em">
-            <b>{{ i18n.t('trains.number-propositions-title') }}&nbsp;</b>
-            <i>{{ numberPropositions.join(', ') }}</i>
-          </div>
-        </div>
-
-        <div class="no-propositions" v-else>{{ i18n.t('trains.number-propositions-empty') }}</div>
-      </div>
+    <transition name="view-anim">
+      <DriverPropositions :chosenTrain="chosenTrain" v-if="arePropositionsVisible" />
    </transition>

-    <StockList :trainStockList="chosenTrain.stockList" />
+    <StockList :trainStockList="chosenTrain.stockList" :key="chosenTrain.id" :showPreviews="true" />
    <TrainSchedule :train="chosenTrain" />
  </div>
 </template>
@@ -72,25 +27,15 @@
 import { PropType, ref } from 'vue';
 import { Train } from '../../typings/common';
 import { useI18n } from 'vue-i18n';
-import { useApiStore } from '../../store/apiStore';

 import StockList from '../Global/StockList.vue';
 import TrainSchedule from '../TrainsView/TrainSchedule.vue';
 import TrainInfo from '../TrainsView/TrainInfo.vue';
-
-import rulesJSON from '../../data/trainNumberRules.json';
-import { computed } from 'vue';
-import { watch } from 'vue';
-
-const apiStore = useApiStore();
+import DriverPropositions from './DriverPropositions.vue';

 const i18n = useI18n();

 const arePropositionsVisible = ref(false);
-const chosenCategoryIndex = ref(0);
-
-const numberPropositions = ref<string[]>([]);
-const chosenCategoryRules = ref<any[]>([]);

 const props = defineProps({
  chosenTrain: {
@@ -119,153 +64,7 @@ function copyStockToClipboard() {

 function toggleNumberPropositions() {
  arePropositionsVisible.value = !arePropositionsVisible.value;
-
-  if (arePropositionsVisible.value) generateNumberPropositions();
 }
-
-function selectCategory(i: number) {
-  chosenCategoryIndex.value = i;
-
-  generateNumberPropositions();
-}
-
-function generateNumberPropositions() {
-  const categoryCode = chosenCategory.value?.slice(0, 2);
-  const trainNoStr = props.chosenTrain.trainNo.toString();
-
-  // Get category rules
-  const rules = categoryCode
-    ? ((rulesJSON.categoriesRules as any)[categoryCode] as any[])
-    : undefined;
-
-  if (!categoryCode || !rules) {
-    numberPropositions.value.length = 0;
-    chosenCategoryRules.value.length = 0;
-
-    return;
-  }
-
-  const [thirdNumber, minRange, maxRange] = rules;
-
-  const propositionsArr: string[] = [];
-
-  for (let i = 0; i < 5; i++) {
-    let generatedNumStr = '';
-
-    generatedNumStr += trainNoStr.at(0) ?? Math.floor(Math.random() * 10);
-    generatedNumStr += trainNoStr.at(1) ?? Math.floor(Math.random() * 10);
-
-    // Third number
-    generatedNumStr += thirdNumber ?? '';
-
-    // Remaining numbers
-    const rangeNums = minRange?.length ?? 3;
-
-    const randRange = Math.floor(
-      Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)
-    ).toString();
-
-    const leadingZeros = new Array(Math.abs(randRange.toString().length - rangeNums))
-      .fill('0')
-      .join('');
-
-    generatedNumStr += `${leadingZeros}${randRange}`;
-
-    const isNumberTaken =
-      apiStore.activeData?.trains?.some((t) => t.trainNo.toString() == generatedNumStr) ?? false;
-
-    if (!isNumberTaken) {
-      propositionsArr.push(generatedNumStr);
-    } else {
-      i--;
-    }
-
-    if (Number(randRange) > Number(maxRange)) break;
-  }
-
-  numberPropositions.value = propositionsArr;
-  chosenCategoryRules.value = rules;
-}
-
-const chosenCategory = computed(() => {
-  return availableCategories.value.at(chosenCategoryIndex.value);
-});
-
-const availableCategories = computed(() => {
-  const stockList = props.chosenTrain.stockList;
-  const headVehicle = stockList.at(0)?.split('-')[0] ?? '';
-
-  let availableCategories: string[] = [];
-  let categoryTraction = 'E';
-
-  let vehicleTypesSet = new Set<string>();
-  let wagonsNamesSet = new Set<string>();
-  let cargoNamesSet = new Set<string>();
-
-  for (const stockName of stockList) {
-    const [vehicleName, ...cargoList] = stockName.split(':');
-
-    const vehicleData = apiStore.vehiclesData?.vehicles.find((v) => v.name == vehicleName);
-
-    if (!vehicleData) continue;
-
-    vehicleTypesSet.add(vehicleData.type);
-
-    if (vehicleData.type.startsWith('wagon-')) wagonsNamesSet.add(vehicleData.name.split('_')[0]);
-
-    if (cargoList !== undefined) cargoList.forEach((c) => cargoNamesSet.add(c.split('_')[0]));
-  }
-
-  let vehicleTypesArr = [...vehicleTypesSet];
-  let wagonsNamesArr = [...wagonsNamesSet];
-
-  // Traction
-  if (vehicleTypesArr[0] == 'loco-electric') categoryTraction = 'E';
-  else if (vehicleTypesArr[0] == 'loco-diesel') categoryTraction = 'S';
-  else if (vehicleTypesArr[0] == 'unit-electric') categoryTraction = 'J';
-  else categoryTraction = 'M';
-
-  // EMU / DMU - M*, R*, P*
-  if (vehicleTypesArr.length == 1 && (categoryTraction == 'J' || categoryTraction == 'M')) {
-    availableCategories.push('MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
-  }
-  // Only locos (up to 3) - LT, LP, LS
-  else if (stockList.length <= 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
-    if (/^(EU|ET|201E|4E|SU|ST|M62|CTLR4C)/.test(headVehicle)) availableCategories.push('LT');
-    if (/^(EU|EP|SU|SP)/.test(headVehicle)) availableCategories.push('LP');
-    if (/^(SM)/.test(headVehicle)) availableCategories.push('LS');
-  }
-  // Only locos (more than 3) - TH
-  else if (stockList.length > 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
-    availableCategories.push('TH');
-  }
-  // Loco(s) + passenger only wagons - M*, R*, E*, P*
-  else if (vehicleTypesArr.every((v) => v.startsWith('loco-') || v == 'wagon-passenger')) {
-    availableCategories.push('EI', 'EC', 'EN', 'MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
-  }
-  // Loco(s) + cargo only / mixed wagons - T*, Z*
-  else {
-    if (wagonsNamesArr.every((v) => /^(627Z|412Z)/.test(v)))
-      availableCategories.push('TC', 'TD', 'TS');
-    else if (stockList.slice(1).every((v) => /PKPE/.test(v))) {
-      availableCategories.push('ZU', 'ZN');
-    } else if (wagonsNamesArr.length < 3 || cargoNamesSet.size < 3) {
-      availableCategories.push('TM', 'TG', 'TS', 'TK');
-    } else {
-      availableCategories.push('TN', 'TR', 'TS', 'TK');
-    }
-  }
-
-  return availableCategories.map((c) => `${c}${categoryTraction}`);
-});
-
-watch(
-  computed(() => `${props.chosenTrain.trainNo}`),
-  () => {
-    chosenCategoryIndex.value = 0;
-    generateNumberPropositions();
-  }
-);
 </script>

 <style lang="scss" scoped>
@@ -279,49 +78,13 @@ watch(

 .train-stock-actions {
  display: flex;
-  gap: 0.5em;
-}
-
-.propositions-container {
-  margin-bottom: 1em;
-  padding: 0.5em;
-  background-color: #111;
-}
-
-.categories-select {
-  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5em;
-
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: calc(-0.5em);
-    left: 0;
-
-    width: 100%;
-    height: 2px;
-    background-color: #aaa;
-  }
-}
-
-.propositions-numbers {
-  margin-top: 1em;
-}
-
-.no-propositions {
-  margin-top: 1em;
-  color: #ccc;
+  margin: 1em 0;
 }

@include responsive.smallScreen {
-  .propositions-container {
-    text-align: center;
-  }
-
-  .categories-select {
+  .train-stock-actions {
    justify-content: center;
  }
 }
@@ -0,0 +1,43 @@
+<template>
+  <div class="flag-icon">
+    <img
+      :src="languageFlagSrc"
+      alt="language flag"
+      :style="{
+        width: width
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getLanguageNameById } from '../../utils/languageUtils';
+
+const props = defineProps({
+  languageId: {
+    type: Number,
+    required: true
+  },
+
+  width: {
+    type: String
+  }
+});
+
+const languageFlagSrc = computed(
+  () => `/images/flags/${getLanguageNameById(props.languageId)}.svg`
+);
+</script>
+
+<style scoped>
+.flag-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flag-icon img {
+  vertical-align: middle;
+}
+</style>
@@ -160,7 +160,7 @@ ul.options {

  height: auto;

-  z-index: 100;
+  z-index: 150;
  width: 100%;

  font-size: 0.9em;
@@ -7,6 +7,8 @@
          :vehicle-string="vehicleString"
          :images="images"
          :image-fallbacks="imagesFallbacks"
+          :show-previews="showPreviews"
+          :thumbnail-size="thumbnailSize"
        />
      </li>
    </ul>
@@ -23,7 +25,9 @@ export default defineComponent({

  props: {
    trainStockList: { type: Array as PropType<string[]>, required: true },
-    tractionOnly: { type: Boolean, required: false }
+    tractionOnly: { type: Boolean, required: false },
+    showPreviews: { type: Boolean },
+    thumbnailSize: { type: Number }
  },

  data() {
@@ -9,9 +9,10 @@
      <img
        v-for="(thumbnailImage, imageIndex) in images"
        :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
-        height="70"
+        :height="thumbnailSize || 70"
        loading="lazy"
-        data-tooltip-type="VehiclePreviewTooltip"
+        :data-crosshair-cursor="showPreviews"
+        :data-tooltip-type="showPreviews ? 'VehiclePreviewTooltip' : ''"
        :data-tooltip-content="vehicleString"
        @error="onImageError($event, imageFallbacks[imageIndex])"
        @load="onImageLoad"
@@ -20,13 +21,15 @@
  </div>
 </template>

-<script setup lang="ts">    
+<script setup lang="ts">
 import { computed, PropType, Ref, ref } from 'vue';

 const props = defineProps({
  vehicleString: { type: String, required: true },
  images: { type: Object as PropType<string[]>, required: true },
-  imageFallbacks: { type: Object as PropType<string[]>, required: true }
+  imageFallbacks: { type: Object as PropType<string[]>, required: true },
+  showPreviews: { type: Boolean },
+  thumbnailSize: { type: Number }
 });

 const thumbRef = ref(null) as Ref<HTMLElement | null>;
@@ -65,7 +68,7 @@ function onImageLoad() {
  max-width: 90%;
  text-align: center;
  color: #aaa;
-  font-size: 0.85em;
+  font-size: 0.8em;
  margin: 0 auto;
  padding: 0.25em 0;
 }
@@ -74,8 +77,10 @@ function onImageLoad() {
  display: flex;
  justify-content: center;
  align-items: flex-end;
-  cursor: crosshair;
-
  padding: 0.5em 0;
+
+  &[data-crosshair-cursor='true'] {
+    cursor: crosshair;
+  }
 }
 </style>
@@ -1,6 +1,6 @@
 <template>
  <section class="daily-stats">
-    <span :data-active="statsStatus">
+    <span :data-active="apiStore.dataStatuses.dailyStatsData">
      <h3>
        {{ $t('journal.daily-stats.title') }}
        <b class="text--primary">{{ new Date().toLocaleDateString($i18n.locale) }}</b>
@@ -8,11 +8,11 @@

      <hr class="header-separator" />

-      <b v-if="statsStatus == Status.Data.Loading">
+      <b v-if="apiStore.dataStatuses.dailyStatsData == Status.Data.Loading">
        {{ $t('app.loading') }}
      </b>

-      <b class="text--error" v-else-if="statsStatus == Status.Data.Error">
+      <b class="text--error" v-else-if="apiStore.dataStatuses.dailyStatsData == Status.Data.Error">
        {{ $t('journal.stats-error') }}
      </b>

@@ -20,42 +20,48 @@
        {{ $t('journal.daily-stats.info') }}
      </b>

-      <div v-else>
+      <div v-else-if="apiStore.dailyStatsData">
        <ul class="stats-list">
-          <li v-if="stats.totalTimetables">
+          <li v-if="apiStore.dailyStatsData.totalTimetables">
            <i18n-t keypath="journal.daily-stats.total">
              <template #count>
                <b class="text--primary">
-                  {{ stats.totalTimetables }}
-                  {{ $t('journal.daily-stats.count', stats.totalTimetables) }}
+                  {{ apiStore.dailyStatsData.totalTimetables }}
+                  {{ $t('journal.daily-stats.count', apiStore.dailyStatsData.totalTimetables) }}
                </b>
              </template>

              <template #distance>
-                <b class="text--primary"> {{ stats.distanceSum?.toFixed(2) }} km</b>
+                <b class="text--primary">
+                  {{ apiStore.dailyStatsData.distanceSum?.toFixed(2) }} km</b
+                >
              </template>
            </i18n-t>
          </li>

-          <li v-if="stats.maxTimetable">
+          <li v-if="apiStore.dailyStatsData.maxTimetable">
            <i18n-t keypath="journal.daily-stats.longest">
              <template #id>
-                <router-link :to="`/journal/timetables?search-train=%23${stats.maxTimetable.id}`">
-                  <b>{{ stats.maxTimetable.id }}</b>
+                <router-link
+                  :to="`/journal/timetables?search-train=%23${apiStore.dailyStatsData.maxTimetable.id}`"
+                >
+                  <b>{{ apiStore.dailyStatsData.maxTimetable.id }}</b>
                </router-link>
              </template>
              <template #author>
                <router-link
-                  :to="`/journal/timetables?search-dispatcher=${stats.maxTimetable.authorName}`"
+                  :to="`/journal/timetables?search-dispatcher=${apiStore.dailyStatsData.maxTimetable.authorName}`"
                >
-                  <b>{{ stats.maxTimetable.authorName }}</b>
+                  <b>{{ apiStore.dailyStatsData.maxTimetable.authorName }}</b>
                </router-link>
              </template>
              <template #driver>
-                <b class="text--primary">{{ stats.maxTimetable.driverName }}</b>
+                <b class="text--primary">{{ apiStore.dailyStatsData.maxTimetable.driverName }}</b>
              </template>
              <template #distance>
-                <b class="text--primary">{{ stats.maxTimetable.routeDistance }} km</b>
+                <b class="text--primary"
+                  >{{ apiStore.dailyStatsData.maxTimetable.routeDistance }} km</b
+                >
              </template>
            </i18n-t>
          </li>
@@ -101,35 +107,37 @@
            </i18n-t>
          </li>

-          <li v-if="stats.longestDuties.length > 0">
+          <li v-if="apiStore.dailyStatsData.longestDuties.length > 0">
            <i18n-t keypath="journal.daily-stats.longest-duties">
              <template #dispatcher>
                <router-link
-                  :to="`/journal/dispatchers?search-dispatcher=${stats.longestDuties[0].name}`"
+                  :to="`/journal/dispatchers?search-dispatcher=${apiStore.dailyStatsData.longestDuties[0].name}`"
                >
-                  <b>{{ stats.longestDuties[0].name }}</b>
+                  <b>{{ apiStore.dailyStatsData.longestDuties[0].name }}</b>
                </router-link>
              </template>

-              <template #station>{{ stats.longestDuties[0].station }}</template>
+              <template #station>{{ apiStore.dailyStatsData.longestDuties[0].station }}</template>

              <template #duration>
-                {{ calculateDuration(stats.longestDuties[0].duration) }}
+                {{ humanizeDuration(apiStore.dailyStatsData.longestDuties[0].duration) }}
              </template>
            </i18n-t>
          </li>

-          <li v-if="stats.mostActiveDrivers.length > 0">
+          <li v-if="apiStore.dailyStatsData.mostActiveDrivers.length > 0">
            <i18n-t keypath="journal.daily-stats.most-active-driver">
              <template #driver>
                <router-link
-                  :to="`/journal/timetables?search-driver=${stats.mostActiveDrivers[0].name}`"
+                  :to="`/journal/timetables?search-driver=${apiStore.dailyStatsData.mostActiveDrivers[0].name}`"
                >
-                  <b>{{ stats.mostActiveDrivers[0].name }}</b>
+                  <b>{{ apiStore.dailyStatsData.mostActiveDrivers[0].name }}</b>
                </router-link>
              </template>
              <template #distance>
-                <b class="text--primary">{{ stats.mostActiveDrivers[0].distance.toFixed(2) }} km</b>
+                <b class="text--primary"
+                  >{{ apiStore.dailyStatsData.mostActiveDrivers[0].distance.toFixed(2) }} km</b
+                >
              </template>
            </i18n-t>
          </li>
@@ -151,7 +159,11 @@
          >
            <span>{{ $t(`journal.daily-stats.${key}`) }}</span>
            <span>
-              {{ Object.entries(stats.globalDiff).find(([k, v]) => k == key)?.[1] || '--' }}
+              {{
+                Object.entries(apiStore.dailyStatsData.globalDiff).find(
+                  ([k, v]) => k == key
+                )?.[1] || '--'
+              }}
            </span>
          </span>
        </div>
@@ -160,76 +172,25 @@
  </section>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-
-import { API } from '../../typings/api';
-import { Status } from '../../typings/common';
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue';
 import { useApiStore } from '../../store/apiStore';
+import { Status } from '../../typings/common';
+import { humanizeDuration } from '../../composables/time';

-export default defineComponent({
-  name: 'journal-daily-stats',
+onMounted(() => {
+  apiStore.fetchDailyStats();
+});

-  mixins: [dateMixin],
+const apiStore = useApiStore();

-  data() {
-    return {
-      Status,
-      statsStatus: Status.Data.Loading,
-      intervalId: -1,
+const topDispatchers = computed(() => {
+  if (!apiStore.dailyStatsData || apiStore.dailyStatsData.mostActiveDispatchers.length == 0)
+    return [];

-      stats: {} as API.DailyStats.Response,
-      apiStore: useApiStore()
-    };
-  },
+  const maxCount = apiStore.dailyStatsData.mostActiveDispatchers[0].count;

-  activated() {
-    this.startFetchingDailyStats();
-  },
-
-  deactivated() {
-    this.stopFetchingDailyStats();
-  },
-
-  computed: {
-    topDispatchers() {
-      if (this.stats.mostActiveDispatchers.length == 0) return [];
-      const maxCount = this.stats.mostActiveDispatchers[0].count;
-
-      return this.stats.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
-    }
-  },
-
-  methods: {
-    async fetchDailyTimetableStats() {
-      try {
-        const res: API.DailyStats.Response = await (
-          await this.apiStore.client!.get('api/getDailyStats')
-        ).data;
-
-        this.stats = res;
-
-        this.statsStatus = Status.Data.Loaded;
-      } catch (error) {
-        console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
-        this.statsStatus = Status.Data.Error;
-      }
-    },
-
-    startFetchingDailyStats() {
-      this.fetchDailyTimetableStats();
-
-      if (this.intervalId != -1) return;
-
-      this.intervalId = window.setInterval(this.fetchDailyTimetableStats, 60000);
-    },
-
-    stopFetchingDailyStats() {
-      clearInterval(this.intervalId);
-      this.intervalId = -1;
-    }
-  }
+  return apiStore.dailyStatsData.mostActiveDispatchers.filter((disp) => disp.count === maxCount);
 });
 </script>

@@ -265,7 +226,7 @@ ul.stats-list {
  gap: 0.5em;
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  h3 {
    text-align: center;
  }
@@ -1,25 +1,37 @@
 <template>
  <li class="dispatcher-history-entry">
    <div class="entry-info">
-      <span>
-        <span>
+      <span class="entry-info-left">
+        <div class="station-info">
          <router-link :to="`/journal/dispatchers?search-station=${entry.stationName}`">
            <b>{{ entry.stationName }}</b>
          </router-link>

          <b class="text--grayed"> #{{ entry.stationHash }}</b>
-        </span>
-        &bull;
-        <b
-          v-if="entry.dispatcherLevel !== null"
-          class="level-badge dispatcher"
-          :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
-        >
-          {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
-        </b>
-        <b style="margin-left: 5px">
+          &bull;
+          <b
+            v-if="entry.dispatcherLevel !== null"
+            class="level-badge dispatcher"
+            :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
+          >
+            {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
+          </b>
+
          <span
-            v-if="apiStore.donatorsData.includes(entry.dispatcherName)"
+            v-if="isCreator(entry.dispatcherName)"
+            data-tooltip-type="CreatorTooltip"
+            :data-tooltip-content="$t('donations.creator-message')"
+          >
+            <router-link
+              class="text--creator"
+              :to="`/journal/dispatchers?search-dispatcher=${entry.dispatcherName}`"
+            >
+              {{ entry.dispatcherName }}
+            </router-link>
+          </span>
+
+          <span
+            v-else-if="apiStore.donatorsData.includes(entry.dispatcherName)"
            data-tooltip-type="DonatorTooltip"
            :data-tooltip-content="$t('donations.dispatcher-message')"
          >
@@ -37,7 +49,11 @@
          >
            {{ entry.dispatcherName }}
          </router-link>
-        </b>
+
+          <span class="dispatcher-language" v-if="entry.dispatcherLanguageId != null">
+            <FlagIcon :language-id="entry.dispatcherLanguageId" width="1.75em" />
+          </span>
+        </div>

        <div>
          <span v-if="entry.timestampTo">
@@ -118,6 +134,8 @@ import dateMixin from '../../../mixins/dateMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
+import FlagIcon from '../../Global/FlagIcon.vue';
+import { isCreator } from '../../../utils/userUtils';

 export default defineComponent({
  props: {
@@ -125,12 +143,12 @@ export default defineComponent({
    showExtraInfo: { type: Boolean, required: true }
  },

-  components: { StationStatusBadge },
+  components: { StationStatusBadge, FlagIcon },
  mixins: [dateMixin, styleMixin],
  emits: ['toggleShowExtraInfo'],

  data() {
-    return { regions, apiStore: useApiStore() };
+    return { regions, apiStore: useApiStore(), isCreator };
  },

  methods: {
@@ -164,6 +182,11 @@ export default defineComponent({
  padding: 1em;
 }

+.dispatcher-language {
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .entry-info {
  display: flex;
  justify-content: space-between;
@@ -185,6 +208,15 @@ export default defineComponent({
  margin-top: 1em;
 }

+.station-info {
+  display: flex;
+  flex-wrap: wrap;
+  text-align: center;
+  align-items: center;
+  gap: 0.25em;
+  font-weight: bold;
+}
+
 .status-list {
  display: flex;
  overflow: auto;
@@ -198,11 +230,15 @@ export default defineComponent({
  border-radius: 1em;
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .entry-info {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
+
+  .station-info {
+    justify-content: center;
+  }
 }
 </style>
@@ -1,85 +0,0 @@
-<template>
-  <div class="journal-stats dispatcher" v-if="dispatcherName && stats">
-    <span class="loading" v-if="!stats.issuedTimetables && !stats.services">
-      {{ $t('journal.dispatcher-stats.empty') }}
-    </span>
-
-    <span v-else>
-      <h3>
-        <i18n-t keypath="journal.dispatcher-stats.title">
-          <template #name>
-            <span class="text--primary">{{ dispatcherName.toUpperCase() }}</span>
-          </template>
-        </i18n-t>
-      </h3>
-
-      <hr class="header-separator" />
-
-      <div class="info-stats">
-        <span class="badge stat-badge" v-if="stats.services">
-          <span>{{ $t('journal.dispatcher-stats.services-count') }}</span>
-          <span>{{ stats.services.count }}</span>
-        </span>
-
-        <span class="badge stat-badge" v-if="stats.services">
-          <span>{{ $t('journal.dispatcher-stats.service-max') }}</span>
-          <span>{{ calculateDuration(stats.services.durationMax) }}</span>
-        </span>
-
-        <span class="badge stat-badge" v-if="stats.services">
-          <span>{{ $t('journal.dispatcher-stats.service-avg') }}</span>
-          <span>{{ calculateDuration(stats.services.durationAvg) }}</span>
-        </span>
-      </div>
-
-      <hr class="section-separator" v-if="stats.issuedTimetables" />
-
-      <div class="info-stats" v-if="stats.issuedTimetables">
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.dispatcher-stats.timetables-count') }}</span>
-          <span>{{ stats.issuedTimetables.count }}</span>
-        </span>
-
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.dispatcher-stats.timetables-sum') }}</span>
-          <span>{{ stats.issuedTimetables.distanceSum.toFixed(2) }}km</span>
-        </span>
-
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.dispatcher-stats.timetables-max') }}</span>
-          <span>{{ stats.issuedTimetables.distanceMax.toFixed(2) }}km</span>
-        </span>
-
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.dispatcher-stats.timetables-avg') }}</span>
-          <span>{{ stats.issuedTimetables.distanceAvg.toFixed(2) }}km</span>
-        </span>
-      </div>
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import dateMixin from '../../../mixins/dateMixin';
-import { useMainStore } from '../../../store/mainStore';
-
-export default defineComponent({
-  name: 'journal-dispatcher-stats',
-
-  mixins: [dateMixin],
-
-  setup() {
-    const store = useMainStore();
-
-    return {
-      stats: store.dispatcherStatsData,
-      dispatcherName: store.dispatcherStatsName
-    };
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/journal-stats';
-</style>
@@ -1,5 +1,5 @@
 <template>
-  <div class="filters-options dropdown" @keydown.esc="showOptions = false">
+  <div class="dropdown filters-options" @keydown.esc="showOptions = false">
    <div class="dropdown_background" v-if="showOptions" @click="showOptions = false"></div>

    <div class="actions-bar">
@@ -57,7 +57,7 @@
                <label v-if="propName == 'search-date-from'" for="search-date">{{
                  $t(`options.search-${optionsType}-date`)
                }}</label>
-                
+
                <div class="search-box">
                  <input
                    class="search-input"
@@ -120,15 +120,15 @@
              </div>
            </section>
          </div>
+        </div>

-          <div class="options_actions">
-            <button class="btn--action" @click="onResetButtonClick">
-              {{ $t('options.reset-button') }}
-            </button>
-            <button class="btn--action" @click="onSearchButtonConfirm">
-              {{ $t('options.search-button') }}
-            </button>
-          </div>
+        <div class="options_actions">
+          <button class="btn--action" @click="onResetButtonClick">
+            {{ $t('options.reset-button') }}
+          </button>
+          <button class="btn--action" @click="onSearchButtonConfirm">
+            {{ $t('options.search-button') }}
+          </button>
        </div>
      </div>
    </transition>
@@ -269,9 +269,9 @@ export default defineComponent({

      this.searchTimeout = window.setTimeout(async () => {
        try {
-          const suggestions: string[] = await (
-            await this.apiStore.client!.get(`api/get${type}Suggestions?name=${value}`)
-          ).data;
+          const suggestions: string[] = await this.apiStore.client.get(
+            `api/get${type}Suggestions?name=${value}`
+          );

          this[`${type}Suggestions`] = suggestions;
        } catch (error) {
@@ -330,4 +330,23 @@ export default defineComponent({
 <style lang="scss" scoped>
@use '../../styles/dropdown';
@use '../../styles/dropdown-filters';
+@use '../../styles/responsive';
+
+.dropdown_wrapper {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow: hidden;
+  max-height: calc(100% - 4.5em);
+  top: 3.5em;
+  padding: 1em 0;
+}
+
+.options_content {
+  overflow: auto;
+  padding: 0 1em;
+}
+
+.options_actions {
+  padding: 0 1em;
+}
 </style>
@@ -2,89 +2,80 @@
  <div
    class="journal-stats dropdown"
    v-if="!mainStore.isOffline"
-    @keydown.esc="currentStatsTab = null"
+    @keydown.esc="isDropdownOpen = false"
  >
-    <div
-      class="dropdown_background"
-      v-if="currentStatsTab !== null"
-      @click="currentStatsTab = null"
-    ></div>
+    <div class="dropdown_background" v-if="isDropdownOpen" @click="isDropdownOpen = false"></div>

    <div class="actions-bar">
+      <button class="btn--filled btn--image" @click="toggleDropdown">
+        <img :src="`/images/icon-stats.svg`" alt="stats icon" />
+        {{ $t('journal.daily-stats.button') }}
+      </button>
+
      <button
-        v-for="button in statsButtons"
-        :key="button.tab"
        class="btn--filled btn--image"
-        :data-selected="button.tab == currentStatsTab"
-        :data-disabled="button.disabled"
-        :disabled="button.disabled"
-        @click="onTabButtonClick(button.tab)"
+        :data-disabled="chosenPlayerId == -1"
+        @click="navigateToProfile"
      >
-        <img
-          v-if="button.iconName"
-          :src="`/images/icon-${button.iconName}.svg`"
-          :alt="button.iconName"
-        />
-        {{ $t(button.localeKey) }}
+        <img :src="`/images/icon-user.svg`" alt="user icon" />
+        {{ $t('profile.journal-button') }}
      </button>
    </div>

    <transition name="dropdown-anim">
-      <div
-        class="dropdown_wrapper"
-        :class="{ 'dropdown-align-right': true }"
-        v-if="currentStatsTab !== null"
-      >
+      <div class="dropdown_wrapper" v-if="isDropdownOpen">
        <keep-alive>
-          <component :is="currentStatsTab" :key="currentStatsTab"></component>
+          <JournalDailyStats />
        </keep-alive>
      </div>
    </transition>
  </div>
 </template>

-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 import { useMainStore } from '../../store/mainStore';
-import StorageManager from '../../managers/storageManager';
-import { Journal } from './typings';
 import JournalDailyStats from './JournalDailyStats.vue';
-import JournalDispatcherStats from '../JournalView/JournalDispatchers/JournalDispatcherStats.vue';
-import JournalDriverStats from '../JournalView/JournalTimetables/JournalDriverStats.vue';
+import { useRouter } from 'vue-router';

-export default defineComponent({
-  components: { JournalDailyStats, JournalDriverStats, JournalDispatcherStats },
-  props: {
-    statsButtons: {
-      type: Array as PropType<Journal.StatsButton[]>,
-      required: true
-    }
-  },
-  data() {
-    return {
-      Journal,
-      mainStore: useMainStore(),
-      currentStatsTab: null as Journal.StatsTab | null
-    };
-  },
+const router = useRouter();

-  methods: {
-    onTabButtonClick(tab: Journal.StatsTab) {
-      this.currentStatsTab = tab == this.currentStatsTab ? null : tab;
-
-      StorageManager.setStringValue('journalStatsTab', this.currentStatsTab ?? '');
-    }
+const props = defineProps({
+  chosenPlayerId: {
+    type: Number,
+    required: true
  }
 });
+
+const mainStore = useMainStore();
+const isDropdownOpen = ref(false);
+
+function toggleDropdown() {
+  isDropdownOpen.value = !isDropdownOpen.value;
+}
+
+function navigateToProfile() {
+  if (props.chosenPlayerId == -1) return;
+
+  router.push(`/profile?playerId=${props.chosenPlayerId}`);
+}
 </script>

 <style lang="scss" scoped>
@use '../../styles/dropdown';
@use '../../styles/dropdown-filters';
+@use '../../styles/responsive';

-.dropdown_wrapper.dropdown-align-right {
+.dropdown_wrapper {
  left: auto;
  right: 0;
  max-width: 700px;
+  top: 3.5em;
+}
+
+@include responsive.smallScreen {
+  .dropdown_wrapper {
+    top: 6.25em;
+  }
 }
 </style>
@@ -19,209 +19,237 @@
    <div class="details-body" v-if="showExtraInfo">
      <div class="g-separator"></div>

-      <EntryStops :timetable="timetable" />
+      <div v-if="timetableDetails">
+        <EntryStops :timetable="timetableDetails" />

-      <div class="g-separator"></div>
-
-      <div class="timetable-specs">
-        <span class="badge specs-badge" v-if="timetable.authorName">
-          <span>{{ $t('journal.dispatcher-name') }}</span>
-          <span>{{ timetable.authorName }}</span>
-        </span>
-
-        <span class="badge specs-badge" v-if="timetable.trainMaxSpeed">
-          <span>{{ $t('journal.stock-timetable-speed') }}</span>
-          <span> {{ timetable.trainMaxSpeed }}km/h </span>
-        </span>
-
-        <span class="badge specs-badge" v-if="timetable.maxSpeed">
-          <span>{{ $t('journal.stock-max-speed') }}</span>
-          <span>{{ timetable.maxSpeed }}km/h</span>
-        </span>
-      </div>
-
-      <div class="stock-dangers" v-if="timetable.warningNotes">
        <div class="g-separator"></div>

-        <b>{{ $t('journal.stock-dangers') }}:</b>
-
-        <ul>
-          <li v-if="timetable.twr">
-            <b class="text--primary">{{ $t('warnings.TWR') }} (TWR)</b>
-          </li>
-
-          <li v-if="timetable.skr">
-            <b class="text--primary">{{ $t('warnings.SKR') }}</b>
-          </li>
-
-          <li v-if="timetable.hasDangerousCargo">
-            <b class="text--primary">{{ $t('warnings.TN') }}</b>
-          </li>
-
-          <li v-if="timetable.hasExtraDeliveries">
-            <b class="text--primary">{{ $t('warnings.PN') }}</b>
-          </li>
-        </ul>
-
-        <div class="dangers-notes" v-if="timetable.warningNotes">
-          <h4>{{ $t('warnings.header-title') }}</h4>
-          <p>
-            <i>{{ timetable.warningNotes }}</i>
-          </p>
-        </div>
-      </div>
-
-      <!-- Historia zmian w składzie -->
-      <div v-if="timetable.stockString || stockHistory.length != 0">
-        <div class="g-separator"></div>
-
-        <b>{{ $t('journal.stock-preview') }}:</b>
-
-        <div class="stock-specs" style="margin-top: 0.5em">
-          <span class="badge specs-badge" v-if="timetable.stockLength">
-            <span>{{ $t('journal.stock-length') }}</span>
-            <span>
-              {{
-                currentHistoryIndex == 0
-                  ? timetable.stockLength
-                  : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
-              }}m
-            </span>
+        <div class="timetable-specs">
+          <span class="badge specs-badge" v-if="timetableDetails.authorName">
+            <span>{{ $t('journal.dispatcher-name') }}</span>
+            <span>{{ timetableDetails.authorName }}</span>
          </span>

-          <span class="badge specs-badge" v-if="timetable.stockMass">
-            <span>{{ $t('journal.stock-mass') }}</span>
-            <span>
-              {{
-                Math.floor(
-                  (currentHistoryIndex == 0
-                    ? timetable.stockMass
-                    : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
-                )
-              }}t
-            </span>
+          <span class="badge specs-badge" v-if="timetableDetails.trainMaxSpeed">
+            <span>{{ $t('journal.stock-timetable-speed') }}</span>
+            <span> {{ timetableDetails.trainMaxSpeed }}km/h </span>
+          </span>
+
+          <span class="badge specs-badge" v-if="timetableDetails.maxSpeed">
+            <span>{{ $t('journal.stock-max-speed') }}</span>
+            <span>{{ timetableDetails.maxSpeed }}km/h</span>
          </span>
        </div>

-        <div class="stock-history">
-          <button class="btn btn--action" @click="copyStockToClipboard()">
-            <i class="fa-regular fa-copy"></i> {{ $t('journal.stock-copy') }}
-          </button>
+        <div class="stock-dangers" v-if="timetableDetails.warningNotes">
+          <div class="g-separator"></div>

-          <button
-            v-for="(sh, i) in stockHistory"
-            :key="i"
-            class="btn--action"
-            :data-checked="i == currentHistoryIndex"
-            @click.stop="currentHistoryIndex = i"
-          >
-            {{ sh.updatedAt }}
-          </button>
+          <b>{{ $t('journal.stock-dangers') }}:</b>
+
+          <ul>
+            <li v-if="timetableDetails.twr">
+              <b class="text--primary">{{ $t('warnings.TWR') }} (TWR)</b>
+            </li>
+
+            <li v-if="timetableDetails.skr">
+              <b class="text--primary">{{ $t('warnings.SKR') }}</b>
+            </li>
+
+            <li v-if="timetableDetails.hasDangerousCargo">
+              <b class="text--primary">{{ $t('warnings.TN') }}</b>
+            </li>
+
+            <li v-if="timetableDetails.hasExtraDeliveries">
+              <b class="text--primary">{{ $t('warnings.PN') }}</b>
+            </li>
+          </ul>
+
+          <div class="dangers-notes" v-if="timetableDetails.warningNotes">
+            <h4>{{ $t('warnings.header-title') }}</h4>
+            <p>
+              <i>{{ timetableDetails.warningNotes }}</i>
+            </p>
+          </div>
        </div>

-        <div v-if="timetable.stockString" style="margin-top: 1em">
-          <StockList
-            :trainStockList="
-              (currentHistoryIndex == 0
-                ? timetable.stockString
-                : stockHistory[currentHistoryIndex].stockString
-              ).split(';')
-            "
-          />
+        <!-- Historia zmian w składzie -->
+        <div v-if="timetableDetails.stockString || stockHistory.length != 0">
+          <div class="g-separator"></div>
+
+          <b>{{ $t('journal.stock-preview') }}:</b>
+
+          <div class="stock-specs" style="margin-top: 0.5em">
+            <span class="badge specs-badge" v-if="timetableDetails.stockLength">
+              <span>{{ $t('journal.stock-length') }}</span>
+              <span>
+                {{
+                  currentHistoryIndex == 0
+                    ? timetableDetails.stockLength
+                    : stockHistory[currentHistoryIndex].stockLength || timetableDetails.stockLength
+                }}m
+              </span>
+            </span>
+
+            <span class="badge specs-badge" v-if="timetableDetails.stockMass">
+              <span>{{ $t('journal.stock-mass') }}</span>
+              <span>
+                {{
+                  Math.floor(
+                    (currentHistoryIndex == 0
+                      ? timetableDetails.stockMass
+                      : stockHistory[currentHistoryIndex].stockMass || timetableDetails.stockMass) /
+                      1000
+                  )
+                }}t
+              </span>
+            </span>
+          </div>
+
+          <div class="stock-history">
+            <button class="btn btn--action" @click="copyStockToClipboard()">
+              <i class="fa-regular fa-copy"></i> {{ $t('journal.stock-copy') }}
+            </button>
+
+            <button
+              v-for="(sh, i) in stockHistory"
+              :key="i"
+              class="btn--action"
+              :data-checked="i == currentHistoryIndex"
+              @click.stop="currentHistoryIndex = i"
+            >
+              {{ sh.updatedAt }}
+            </button>
+          </div>
+
+          <div v-if="timetableDetails.stockString" style="margin-top: 1em">
+            <StockList
+              :trainStockList="
+                (currentHistoryIndex == 0
+                  ? timetableDetails.stockString
+                  : stockHistory[currentHistoryIndex].stockString
+                ).split(';')
+              "
+              :showPreviews="true"
+            />
+          </div>
        </div>
      </div>
    </div>
  </div>
 </template>

-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import StockList from '../../Global/StockList.vue';
-import { API } from '../../../typings/api';
+<script lang="ts" setup>
+import { computed, PropType, ref } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
-import EntryStops from './EntryStops.vue';
 import { useI18n } from 'vue-i18n';

-export default defineComponent({
-  components: { StockList, EntryStops },
+import StockList from '../../Global/StockList.vue';
+import EntryStops from './EntryStops.vue';
+import { API } from '../../../typings/api';
+import { useApiStore } from '../../../store/apiStore';

-  emits: ['toggleExtraInfo'],
+const i18n = useI18n();
+const apiStore = useApiStore();

-  props: {
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    },
-    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
-      required: true
-    }
+const props = defineProps({
+  showExtraInfo: {
+    type: Boolean,
+    required: true
  },
-  data() {
-    return {
-      currentHistoryIndex: 0,
-      i18n: useI18n()
-    };
-  },
-  computed: {
-    stockHistory() {
-      return this.timetable.stockHistory
-        .slice()
-        .reverse()
-        .map((h) => {
-          const historyData = h.split('@');
-          return {
-            updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
-              hour: '2-digit',
-              minute: '2-digit'
-            }),
-            stockString: historyData[1],
-            stockMass: Number(historyData[2]) || undefined,
-            stockLength: Number(historyData[3]) || undefined
-          };
-        });
-    },

-    driverRouteLocation(): RouteLocationRaw | null {
-      if (this.timetable.terminated) return null;
-      return {
-        name: 'DriverView',
-        query: {
-          trainId: `${this.timetable.driverId}|${this.timetable.trainNo}|eu`
-        }
-      };
-    }
-  },
-  methods: {
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = '/images/icon-unknown.png';
-    },
-
-    toggleExtraInfo() {
-      this.$emit('toggleExtraInfo', this.timetable.id);
-    },
-
-    copyStockToClipboard() {
-      const currentStockString =
-        this.stockHistory[this.currentHistoryIndex]?.stockString ?? this.timetable.stockString;
-
-      if (!currentStockString) {
-        alert(this.i18n.t('journal.stock-clipboard-failure'));
-        return;
-      }
-
-      navigator.clipboard
-        .writeText(currentStockString)
-        .then(() => {
-          prompt(this.i18n.t('journal.stock-clipboard-success'), currentStockString);
-        })
-        .catch(() => {
-          alert(this.i18n.t('journal.stock-clipboard-failure'));
-        });
-    }
+  timetableEntry: {
+    type: Object as PropType<API.TimetableHistory.DataShort>,
+    required: true
  }
 });
+
+const emits = defineEmits(['toggleExtraInfo']);
+const currentHistoryIndex = ref(0);
+
+const timetableDetails = ref<API.TimetableHistory.Data | null>(null);
+
+const stockHistory = computed(() => {
+  return (
+    timetableDetails.value?.stockHistory
+      .slice()
+      .reverse()
+      .map((h) => {
+        const historyData = h.split('@');
+        return {
+          updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(i18n.locale.value, {
+            hour: '2-digit',
+            minute: '2-digit'
+          }),
+          stockString: historyData[1],
+          stockMass: Number(historyData[2]) || undefined,
+          stockLength: Number(historyData[3]) || undefined
+        };
+      }) ?? []
+  );
+});
+
+const driverRouteLocation = computed<RouteLocationRaw | null>(() => {
+  if (props.timetableEntry.terminated) return null;
+
+  return {
+    name: 'DriverView',
+    query: {
+      trainId: `${props.timetableEntry.driverId}|${props.timetableEntry.trainNo}|eu`
+    }
+  };
+});
+
+async function fetchTimetableDetails() {
+  try {
+    const responseData = await apiStore.client.get<API.TimetableHistory.Response>(
+      'api/getTimetables',
+      {
+        timetableId: props.timetableEntry.id,
+        returnType: 'detailed'
+      }
+    );
+
+    if (!responseData || responseData.length != 1) {
+      timetableDetails.value = null;
+      return;
+    }
+
+    timetableDetails.value = responseData[0];
+  } catch (error) {
+    // this.dataStatus = Status.Data.Error;
+    console.error(error);
+  }
+}
+
+async function toggleExtraInfo() {
+  if (props.showExtraInfo == false) {
+    await fetchTimetableDetails();
+  }
+
+  emits('toggleExtraInfo', timetableDetails.value);
+}
+
+function copyStockToClipboard() {
+  if (!timetableDetails.value) return;
+
+  const currentStockString =
+    stockHistory.value[currentHistoryIndex.value]?.stockString ??
+    timetableDetails.value.stockString;
+
+  if (!currentStockString) {
+    alert(i18n.t('journal.stock-clipboard-failure'));
+    return;
+  }
+
+  navigator.clipboard
+    .writeText(currentStockString)
+    .then(() => {
+      prompt(i18n.t('journal.stock-clipboard-success'), currentStockString);
+    })
+    .catch(() => {
+      alert(i18n.t('journal.stock-clipboard-failure'));
+    });
+}
 </script>

 <style lang="scss" scoped>
@@ -299,7 +327,7 @@ hr {
  }
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .timetable-specs {
    justify-content: center;
  }
@@ -59,7 +59,17 @@
      </strong>

      <router-link
-        v-if="apiStore.donatorsData.includes(timetable.driverName)"
+        v-if="isCreator(timetable.driverName)"
+        class="text--creator"
+        data-tooltip-type="CreatorTooltip"
+        :data-tooltip-content="$t('donations.creator-message')"
+        :to="`/journal/timetables?search-driver=${timetable.driverName}`"
+      >
+        <strong>{{ timetable.driverName }}</strong>
+      </router-link>
+
+      <router-link
+        v-else-if="apiStore.donatorsData.includes(timetable.driverName)"
        class="text--donator"
        data-tooltip-type="DonatorTooltip"
        :data-tooltip-content="$t('donations.driver-message')"
@@ -71,6 +81,10 @@
      <router-link v-else :to="`/journal/timetables?search-driver=${timetable.driverName}`">
        <strong>{{ timetable.driverName }}</strong>
      </router-link>
+
+      <div v-if="timetable.driverLanguageId != null">
+        <FlagIcon :language-id="timetable.driverLanguageId" width="1.75em" />
+      </div>
    </span>

    <span class="general-time">
@@ -83,7 +97,7 @@
      </b>

      <b
-        class="info-badge"
+        class="timetable-status-badge"
        :class="{
          fulfilled: timetable.fulfilled,
          terminated: timetable.terminated && !timetable.fulfilled,
@@ -110,19 +124,23 @@ import dateMixin from '../../../mixins/dateMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
+import FlagIcon from '../../Global/FlagIcon.vue';
+import { isCreator } from '../../../utils/userUtils';

 export default defineComponent({
+  components: { FlagIcon },
  mixins: [dateMixin, styleMixin, trainCategoryMixin],

  data() {
    return {
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      isCreator
    };
  },

  props: {
    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
+      type: Object as PropType<API.TimetableHistory.DataShort>,
      required: true
    }
  }
@@ -165,23 +183,6 @@ export default defineComponent({
  gap: 0.25em;
 }

-.info-badge {
-  padding: 0.05em 0.35em;
-  color: black;
-
-  &.terminated {
-    background-color: salmon;
-  }
-
-  &.fulfilled {
-    background-color: lightgreen;
-  }
-
-  &.active {
-    background-color: lightblue;
-  }
-}
-
 .btn-timetable {
  display: flex;
  padding: 0.2em 0.5em;
@@ -191,7 +192,7 @@ export default defineComponent({
  }
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .item-general {
    flex-direction: column;
    justify-content: center;
@@ -51,7 +51,7 @@ export default defineComponent({
  components: { ProgressBar },
  props: {
    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
+      type: Object as PropType<API.TimetableHistory.DataShort>,
      required: true
    }
  }
@@ -1,105 +0,0 @@
-<template>
-  <div class="journal-stats driver" v-if="store.driverStatsData">
-    <span>
-      <h3>
-        <i18n-t keypath="journal.driver-stats.title">
-          <template #name>
-            <span class="text--primary">{{ store.driverStatsName.toUpperCase() }}</span>
-          </template>
-        </i18n-t>
-      </h3>
-
-      <hr class="header-separator" />
-
-      <div class="info-stats">
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.longest-timetable') }}</span>
-          <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
-        </span>
-
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
-          <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
-        </span>
-      </div>
-
-      <hr class="section-separator" />
-
-      <div class="info-stats">
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.timetables') }}</span>
-          <span>
-            {{ store.driverStatsData._count.fulfilled }} /
-            {{ store.driverStatsData._count._all }}
-
-            <template v-if="store.driverStatsData._count._all > 0">
-              ({{
-                (
-                  (store.driverStatsData._count.fulfilled / store.driverStatsData._count._all) *
-                  100
-                ).toFixed(2)
-              }}%)
-            </template>
-          </span>
-        </span>
-
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.distance') }}</span>
-          <span>
-            {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
-            {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
-
-            <template v-if="store.driverStatsData._sum.routeDistance > 0">
-              ({{
-                (
-                  (store.driverStatsData._sum.currentDistance /
-                    store.driverStatsData._sum.routeDistance) *
-                  100
-                ).toFixed(2)
-              }}%)
-            </template>
-          </span>
-        </span>
-
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.stations') }}</span>
-          <span>
-            {{ store.driverStatsData._sum.confirmedStopsCount }} /
-            {{ store.driverStatsData._sum.allStopsCount }}
-
-            <template v-if="store.driverStatsData._sum.allStopsCount > 0">
-              ({{
-                (
-                  (store.driverStatsData._sum.confirmedStopsCount /
-                    store.driverStatsData._sum.allStopsCount) *
-                  100
-                ).toFixed(2)
-              }}%)
-            </template>
-          </span>
-        </span>
-      </div>
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useMainStore } from '../../../store/mainStore';
-import { Status } from '../../../typings/common';
-
-export default defineComponent({
-  name: 'journal-driver-stats',
-
-  data() {
-    return {
-      store: useMainStore(),
-      Status: Status
-    };
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@use '../../../styles/journal-stats';
-</style>
@@ -10,14 +10,14 @@

    <hr />

-    <div @click="toggleExtraInfo" style="cursor: pointer">
+    <div style="cursor: pointer">
      <!-- Status -->
      <EntryStatus :timetable="timetableEntry" />
    </div>

    <!-- Extra -->
    <EntryDetails
-      :timetable="timetableEntry"
+      :timetableEntry="timetableEntry"
      :show-extra-info="showExtraInfo"
      @toggle-extra-info="toggleExtraInfo"
    />
@@ -28,7 +28,6 @@
 import { defineComponent, PropType } from 'vue';
 import { API } from '../../../typings/api';
 import { useApiStore } from '../../../store/apiStore';
-import { Journal } from '../typings';

 import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
 import dateMixin from '../../../mixins/dateMixin';
@@ -41,7 +40,7 @@ import EntryDetails from './EntryDetails.vue';
 export default defineComponent({
  props: {
    timetableEntry: {
-      type: Object as PropType<API.TimetableHistory.Data>,
+      type: Object as PropType<API.TimetableHistory.DataShort>,
      required: true
    },
    showExtraInfo: {
@@ -60,74 +59,9 @@ export default defineComponent({
    };
  },

-  computed: {
-    timetablePathDetails() {
-      if (!this.timetableEntry.path || this.timetableEntry.path == '') return null;
-
-      return this.timetableEntry.path.split(';').map((pathEl, i) => {
-        const [arrival, name, departure] = pathEl.split(',');
-        const sceneryName = name.split(' ').slice(0, -1).join(' ');
-        const sceneryHash = name.split(' ').pop()?.replace('.sc', '') ?? '';
-
-        return {
-          arrival,
-          sceneryName,
-          sceneryHash,
-          departure,
-          isVisited: this.timetableEntry.visitedSceneries?.includes(sceneryHash) ?? false
-        };
-      });
-    },
-
-    timetableStops(): Journal.TimetableStopDetails[] {
-      const timetableEntry = this.timetableEntry;
-
-      const stopNames = timetableEntry.sceneriesString.split('%');
-
-      return stopNames.reduce<Journal.TimetableStopDetails[]>((acc, stopName, i, arr) => {
-        const arrivalDate =
-          i == arr.length - 1
-            ? (timetableEntry.checkpointArrivals.at(i) ?? timetableEntry.endDate)
-            : timetableEntry.checkpointArrivals.at(i);
-
-        const scheduledArrivalDate =
-          i == arr.length - 1
-            ? (timetableEntry.checkpointArrivalsScheduled.at(i) ?? timetableEntry.scheduledEndDate)
-            : timetableEntry.checkpointArrivalsScheduled.at(i);
-
-        const departureDate =
-          i == 0
-            ? (timetableEntry.checkpointDepartures.at(i) ?? timetableEntry.beginDate)
-            : timetableEntry.checkpointDepartures.at(i);
-
-        const scheduledDepartureDate =
-          i == 0
-            ? (timetableEntry.checkpointDeparturesScheduled.at(i) ??
-              timetableEntry.scheduledBeginDate)
-            : timetableEntry.checkpointDeparturesScheduled.at(i);
-
-        const stopTime = Number(timetableEntry.checkpointStopTypes.at(i)?.split(',')[0]) || 0;
-        const stopType = timetableEntry.checkpointStopTypes.at(i)?.split(',')[1] || '';
-
-        acc.push({
-          stopName,
-          arrivalTimestamp: this.dateStringToTimestamp(arrivalDate),
-          scheduledArrivalTimestamp: this.dateStringToTimestamp(scheduledArrivalDate),
-          departureTimestamp: this.dateStringToTimestamp(departureDate),
-          scheduledDepartureTimestamp: this.dateStringToTimestamp(scheduledDepartureDate),
-          stopTime,
-          stopType,
-          isConfirmed: i < timetableEntry.confirmedStopsCount
-        });
-
-        return acc;
-      }, []);
-    }
-  },
-
  methods: {
-    toggleExtraInfo() {
-      this.$emit('toggleShowExtraInfo');
+    toggleExtraInfo(data: API.TimetableHistory.Data | null) {
+      this.$emit('toggleShowExtraInfo', data);
    }
  }
 });
@@ -145,7 +79,7 @@ export default defineComponent({
  display: flex;
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .entry-route {
    justify-content: center;
    text-align: center;
@@ -20,7 +20,7 @@
          v-for="(timetableEntry, i) in timetableHistory"
          :key="timetableEntry.id"
          :timetableEntry="timetableEntry"
-          :onToggleShowExtraInfo="() => toggleExtraInfo(timetableEntry.id)"
+          :onToggleShowExtraInfo="toggleExtraInfo"
          :showExtraInfo="extraInfoIndexes.includes(timetableEntry.id)"
        />
      </transition-group>
@@ -59,9 +59,11 @@ export default defineComponent({
    JournalTimetableEntry
  },

+  emits: ['toggleExtraInfo'],
+
  props: {
    timetableHistory: {
-      type: Array as PropType<API.TimetableHistory.Response>,
+      type: Array as PropType<API.TimetableHistory.ResponseShort>,
      required: true
    },
    scrollNoMoreData: {
@@ -75,32 +77,23 @@ export default defineComponent({
    },
    dataStatus: {
      type: Number as PropType<Status.Data>
+    },
+    extraInfoIndexes: {
+      type: Object as PropType<number[]>,
+      required: true
    }
  },

  data() {
    return {
      Status,
-      store: useMainStore(),
-      extraInfoIndexes: [] as number[]
+      store: useMainStore()
    };
  },

-  watch: {
-    '$route.query': {
-      deep: true,
-      handler() {
-        this.extraInfoIndexes.length = 0;
-      }
-    }
-  },
-  
  methods: {
-    toggleExtraInfo(id: number) {
-      const existingIdx = this.extraInfoIndexes.indexOf(id);
-
-      if (existingIdx != -1) this.extraInfoIndexes.splice(existingIdx, 1);
-      else this.extraInfoIndexes.push(id);
+    toggleExtraInfo(data: API.TimetableHistory.Data | null) {
+      this.$emit('toggleExtraInfo', data);
    }
  }
 });
@@ -111,7 +104,7 @@ export default defineComponent({
@use '../../../styles/journal-section';
@use '../../../styles/responsive';

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .journal_item-info {
    text-align: center;
  }
@@ -1,5 +1,6 @@
 export namespace Journal {
  export type DispatcherSearchKey =
+    | 'search-duty-id'
    | 'search-dispatcher'
    | 'search-station'
    | 'search-date-from'
@@ -14,7 +15,8 @@ export namespace Journal {
    | 'search-issuedFrom'
    | 'search-terminatingAt'
    | 'search-via'
-    | 'select-categoryCode';
+    | 'select-categoryCode'
+    | 'search-headUnit';

  export type TimetableSearchType = {
    [key in TimetableSearchKey]: string;
@@ -62,19 +64,6 @@ export namespace Journal {
    default: boolean;
  }

-  export enum StatsTab {
-    DRIVER_STATS = 'journal-driver-stats',
-    DISPATCHER_STATS = 'journal-dispatcher-stats',
-    DAILY_STATS = 'journal-daily-stats'
-  }
-
-  export interface StatsButton {
-    tab: StatsTab;
-    localeKey: string;
-    iconName: string;
-    disabled: boolean;
-  }
-
  export interface TimetableStopDetails {
    stopName: string;
    arrivalTimestamp: number;
@@ -0,0 +1,298 @@
+<template>
+  <section class="profile-history-list">
+    <div class="list-header">
+      <div class="history-menu">
+        <button
+          v-for="(filterState, filterKey) in activeFilterTypes"
+          class="menu-btn btn--option"
+          :data-active="filterState"
+          @click="toggleFilter(filterKey)"
+        >
+          {{ t(`profile.filters.${filterKey}`) }}
+        </button>
+      </div>
+    </div>
+
+    <div class="history-list-box">
+      <Loading v-if="journalStatus == Status.Data.Loading" />
+
+      <div v-else-if="combinedJournal.length == 0" class="no-recent-history">
+        {{ t('profile.list.no-recent-history') }}
+      </div>
+
+      <router-link
+        v-else
+        v-for="entry in combinedJournal"
+        :to="
+          'trainNo' in entry.value
+            ? `/journal/timetables?search-train=%23${entry.value.id}`
+            : `/journal/dispatchers?search-duty-id=${entry.value.id}`
+        "
+      >
+        <!-- Date -->
+        <div class="entry-top-date">
+          <img
+            v-if="entry.type == 'Dispatcher'"
+            src="/images/icon-user.svg"
+            width="25"
+            alt="user icon"
+          />
+
+          <img
+            v-else-if="entry.type == 'Timetable'"
+            src="/images/icon-train.svg"
+            width="25"
+            alt="train icon"
+          />
+
+          <img v-else src="/images/icon-timetable.svg" width="25" alt="timetable icon" />
+
+          <b
+            class="timestamp-indicator"
+            :data-online="
+              'isOnline' in entry.value
+                ? entry.value.isOnline
+                : !entry.value.terminated && entry.type != 'IssuedTimetable'
+            "
+          >
+            {{ dateToLocaleString(entry.date, { dateStyle: 'long', timeStyle: 'short' }) }}
+            <span v-if="'timestampTo' in entry.value && entry.value.timestampTo">
+              -
+              <span v-if="new Date(entry.value.timestampTo).getDay() == entry.date.getDay()">{{
+                dateToLocaleString(new Date(entry.value.timestampTo), {
+                  timeStyle: 'short'
+                })
+              }}</span>
+              <span v-else>{{
+                dateToLocaleString(new Date(entry.value.timestampTo), {
+                  dateStyle: 'long',
+                  timeStyle: 'short'
+                })
+              }}</span>
+            </span>
+          </b>
+        </div>
+
+        <!-- Timetables -->
+        <div v-if="'trainNo' in entry.value">
+          <b class="text--primary">
+            {{ entry.value.trainCategoryCode }}
+          </b>
+          {{ ' ' }}
+          <b>{{ entry.value.trainNo }}</b>
+          <b class="text--grayed" v-if="entry.type == 'IssuedTimetable'">
+            {{ ' ' }} {{ t('profile.list.for') }}: {{ entry.value.driverName }}
+          </b>
+          {{ ' ' }}
+          <b>{{ entry.value.route.replace('|', ' > ') }}</b>
+          {{ ' ' }}
+          <b class="text--primary">{{ entry.value.currentDistance }} km</b>
+          <b> / {{ entry.value.routeDistance }} km</b>
+        </div>
+
+        <!-- Dispatchers -->
+        <div v-else>
+          <b class="text--primary">{{ entry.value.stationName }}</b>
+          {{ ' - ' }}
+          <b class="timestamp-indicator" :data-online="entry.value.isOnline">
+            <span v-if="entry.value.isOnline">{{ t('profile.list.online-since') }}: </span>
+            <span>{{
+              humanizeDuration((entry.value.timestampTo || Date.now()) - entry.value.timestampFrom)
+            }}</span>
+          </b>
+        </div>
+      </router-link>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  PropType,
+  reactive,
+  ref
+} from 'vue';
+import { dateToLocaleString, humanizeDuration } from '../../composables/time';
+import { API } from '../../typings/api';
+import { useI18n } from 'vue-i18n';
+import { useApiStore } from '../../store/apiStore';
+import { onBeforeRouteUpdate, useRoute } from 'vue-router';
+import { Status } from '../../typings/common';
+import Loading from '../Global/Loading.vue';
+
+type JournalEntryType = 'Timetable' | 'Dispatcher' | 'IssuedTimetable';
+
+interface JournalEntry {
+  type: JournalEntryType;
+  date: Date;
+  value: API.TimetableHistory.DataShort | API.DispatcherHistory.Data;
+}
+
+const props = defineProps({
+  playerName: {
+    type: String
+  },
+
+  playerJournal: {
+    type: Object as PropType<API.PlayerJournal.Data>,
+  },
+
+  journalStatus: {
+    type: Number as PropType<Status.Data>,
+    required: true
+  }
+});
+
+const { t } = useI18n();
+
+const activeFilterTypes = reactive<Record<JournalEntryType, boolean>>({
+  Timetable: true,
+  Dispatcher: true,
+  IssuedTimetable: true
+});
+
+const combinedJournal = computed<JournalEntry[]>(() => {
+  if (!props.playerJournal || !props.playerName) return [];
+
+  const list = [
+    ...props.playerJournal.timetables,
+    ...props.playerJournal.duties,
+    ...props.playerJournal.issuedTimetables
+  ]
+    .reduce<JournalEntry[]>((acc, v) => {
+      // Timetable or dispatcher type
+      if ('trainNo' in v) {
+        const isIssued = v.authorName == props.playerName;
+
+        if (!isIssued && !activeFilterTypes['Timetable']) return acc;
+        if (isIssued && !activeFilterTypes['IssuedTimetable']) return acc;
+
+        acc.push({
+          date: new Date(v.createdAt),
+          type: isIssued ? 'IssuedTimetable' : 'Timetable',
+          value: v
+        });
+      } else {
+        if (!activeFilterTypes['Dispatcher']) return acc;
+
+        acc.push({
+          date: new Date(v.timestampFrom),
+          type: 'Dispatcher',
+          value: v
+        });
+      }
+
+      return acc;
+    }, [])
+    .sort((a, b) => {
+      return a.date.getTime() - b.date.getTime() > 0 ? -1 : 1;
+    });
+
+  return list;
+});
+
+function toggleFilter(filterType: JournalEntryType) {
+  const toggledState = !activeFilterTypes[filterType];
+
+  // Prevent switching off all filters at the same time (at least one must be active)
+  if (
+    toggledState === false &&
+    Object.values(activeFilterTypes).filter((v) => v === false).length ==
+      Object.values(activeFilterTypes).length - 1
+  )
+    return;
+
+  activeFilterTypes[filterType] = toggledState;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+
+.profile-history-list {
+  overflow-y: scroll;
+  height: 100%;
+}
+
+.list-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+
+  & > h3 {
+    padding: 0.5em;
+    margin-bottom: 0.5em;
+  }
+}
+
+.history-menu {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1em;
+  background-color: var(--clr-tile);
+  padding: 0.5em;
+}
+
+.menu-btn {
+  padding: 0.5em;
+  font-weight: bold;
+  color: #aaa;
+
+  &[data-active='true'] {
+    color: var(--clr-success);
+  }
+}
+
+.history-list-box {
+  padding: 0 0.5em;
+  position: relative;
+}
+
+.history-list-box > a {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+
+  background-color: var(--clr-bg-light);
+  padding: 0.5em;
+
+  margin-bottom: 0.5em;
+  text-align: initial;
+
+  &:hover {
+    background-color: #333;
+  }
+}
+
+.no-recent-history {
+  padding: 1em;
+  font-size: 1.25em;
+  font-weight: bold;
+  color: #aaa;
+}
+
+.entry-top-date {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+}
+
+.timestamp-indicator {
+  color: #ccc;
+
+  &[data-online='true'] {
+    color: var(--clr-success);
+  }
+}
+
+@include responsive.midScreen {
+  .profile-history-list {
+    height: 100vh;
+  }
+}
+</style>
@@ -0,0 +1,76 @@
+<template>
+  <div class="player-avatar">
+    <img
+      v-if="props.playerTD2Info && props.playerTD2Info.avatar"
+      :src="`https://td2.info.pl/index.php?action=dlattach;attach=${props.playerTD2Info.avatar};type=avatar`"
+      class="player-avatar-image"
+      ref="avatarImageRef"
+      alt="player image"
+      @load="onAvatarLoadSuccess"
+      @error="onAvatarLoadError"
+    />
+
+    <img
+      v-if="
+        avatarLoadingStatus == Status.Data.Error ||
+        (props.playerTD2Info && !props.playerTD2Info.avatar)
+      "
+      class="img-placeholder"
+      height="100"
+      src="/images/default-avatar.jpg"
+    />
+
+    <Loading v-else-if="avatarLoadingStatus == Status.Data.Loading" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, ref, useTemplateRef } from 'vue';
+import { Status } from '../../typings/common';
+import Loading from '../Global/Loading.vue';
+import { Td2API } from '../../typings/api';
+
+const props = defineProps({
+  playerTD2Info: {
+    type: Object as PropType<Td2API.UsersInfoByName.UserInfo>
+  }
+});
+
+const avatarImageRef = useTemplateRef('avatarImageRef');
+const avatarLoadingStatus = ref<Status.Data>(Status.Data.Loading);
+
+function onAvatarLoadSuccess() {
+  if (!avatarImageRef.value) return;
+
+  avatarLoadingStatus.value = Status.Data.Loaded;
+  avatarImageRef.value.style.opacity = '1';
+}
+
+function onAvatarLoadError() {
+  if (!avatarImageRef.value) return;
+
+  avatarLoadingStatus.value = Status.Data.Error;
+  avatarImageRef.value.src = '/images/default-avatar.jpg';
+  avatarImageRef.value.style.opacity = '1';
+}
+</script>
+
+<style lang="scss" scoped>
+.player-avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  position: relative;
+  min-height: 110px;
+
+  .loading {
+    top: 50%;
+    margin: 0;
+  }
+
+  img.player-avatar-image {
+    opacity: 0;
+  }
+}
+</style>
@@ -0,0 +1,107 @@
+<template>
+  <section class="profile-recent-stats">
+    <h2 class="stats-header">
+      <img src="/images/icon-stats.svg" width="30" alt="stats icon" />
+      {{ t('profile.recent-stats.header') }}
+    </h2>
+
+    <div class="month-stats-box">
+      <div class="month-stat">
+        <div><img src="/images/icon-train.svg" width="30" alt="train icon" /></div>
+        <div>
+          <h3 class="text--primary">{{ playerInfo.driverStatsLastMonth.countAll }}</h3>
+        </div>
+        <div>{{ t('profile.recent-stats.timetables') }}</div>
+      </div>
+
+      <div class="month-stat">
+        <div><img src="/images/icon-spawn.svg" width="30" alt="spawn icon" /></div>
+        <div>
+          <h3 class="text--primary">
+            {{ playerInfo.driverStatsLastMonth.currentDistanceTotal?.toFixed(2) || 0 }}
+          </h3>
+        </div>
+        <div>{{ t('profile.recent-stats.distance') }}</div>
+      </div>
+
+      <div class="month-stat">
+        <div><img src="/images/icon-user.svg" width="30" alt="user icon" /></div>
+        <div>
+          <h3 class="text--primary">
+            {{ playerInfo.dispatcherStatsLastMonth.services?.count || 0 }}
+          </h3>
+        </div>
+        <div>{{ t('profile.recent-stats.duties') }}</div>
+      </div>
+
+      <div class="month-stat">
+        <div><img src="/images/icon-timetable.svg" width="30" alt="timetable icon" /></div>
+        <div>
+          <h3 class="text--primary">
+            {{ playerInfo.dispatcherStatsLastMonth.issuedTimetables?.count || 0 }}
+          </h3>
+        </div>
+        <div>{{ t('profile.recent-stats.created-timetables') }}</div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { API } from '../../typings/api';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+defineProps({
+  playerInfo: {
+    type: Object as PropType<API.PlayerInfo.Data>,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+
+.profile-recent-stats {
+  overflow: hidden;
+}
+
+.stats-header {
+  padding: 1em;
+
+  img {
+    vertical-align: text-bottom;
+  }
+}
+
+.month-stats-box {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5em;
+  padding: 0.5em;
+}
+
+.month-stat {
+  background-color: var(--clr-bg-light);
+  border-radius: 0.5em;
+  padding: 0.5em;
+
+  h3 {
+    font-size: 1.3em;
+  }
+
+  div:nth-child(3) {
+    margin-top: 0.5em;
+    font-size: 0.9em;
+  }
+}
+
+@include responsive.smallScreen {
+  .month-stats-box {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>
@@ -0,0 +1,398 @@
+<template>
+  <section class="profile-summary">
+    <div class="player-info">
+      <div class="info-main">
+        <ProfilePlayerAvatar :playerTD2Info="playerTD2Info" />
+
+        <div>
+          <h2
+            class="player-name-header"
+            :class="{ 'text--donator': isPlayerDonator, 'text--creator': isPlayerCreator }"
+          >
+            <a :href="`https://td2.info.pl/profile/?u=${route.query.playerId}`" target="_blank">
+              <img
+                v-if="isPlayerDonator"
+                src="/images/icon-diamond.svg"
+                width="25"
+                alt="diamond icon"
+              />
+              {{ playerName }}
+            </a>
+          </h2>
+
+          <div class="player-badges">
+            <div class="badge-container" v-if="playerInfo.driverStats.driverLevel != null">
+              <span
+                class="level-badge driver"
+                :style="calculateExpStyles(playerInfo.driverStats.driverLevel)"
+              >
+                {{
+                  playerInfo.driverStats.driverLevel > 1 ? playerInfo.driverStats.driverLevel : 'L'
+                }}
+              </span>
+              {{ t('profile.stats.driver') }}
+            </div>
+
+            <div class="badge-container" v-if="playerInfo.dispatcherStats.dispatcherLevel != null">
+              <span
+                class="level-badge dispatcher"
+                :style="calculateExpStyles(playerInfo.dispatcherStats.dispatcherLevel)"
+              >
+                {{
+                  playerInfo.dispatcherStats.dispatcherLevel > 1
+                    ? playerInfo.dispatcherStats.dispatcherLevel
+                    : 'L'
+                }}
+              </span>
+              {{ t('profile.stats.dispatcher') }}
+            </div>
+          </div>
+
+          <div class="player-journal-links">
+            <router-link
+              class="a-button btn--action"
+              :to="`/journal/timetables?search-driver=${playerInfo.driverStats.driverName}`"
+            >
+              {{ t('profile.stats.timetables-journal') }}
+            </router-link>
+
+            <router-link
+              class="a-button btn--action"
+              :to="`/journal/dispatchers?search-dispatcher=${playerInfo.dispatcherStats.dispatcherName}`"
+            >
+              {{ t('profile.stats.dispatchers-journal') }}
+            </router-link>
+
+            <a
+              class="a-button btn--action"
+              :href="`https://td2.info.pl/profile/?u=${route.query.playerId}`"
+              target="_blank"
+            >
+              {{ t('profile.stats.forum-profile') }}
+            </a>
+          </div>
+
+          <!-- Current activities -->
+          <div
+            class="player-activities-box"
+            v-if="activeDispatches.length > 0 || activeTrains.length > 0"
+          >
+            <div class="info-activity" v-if="activeDispatches.length > 0">
+              <router-link
+                v-for="d in activeDispatches"
+                class="dispatcher-badge"
+                :to="`/scenery?station=${d.stationName}&region=${d.region}`"
+              >
+                <img src="/images/icon-user.svg" width="25" alt="user icon" />
+                <b>{{ d.stationName }} ({{ getRegionNameById(d.region) }})</b>
+                <StationStatusBadge :isOnline="true" :dispatcherStatus="d.dispatcherStatus" />
+              </router-link>
+            </div>
+
+            <div class="info-activity" v-if="activeTrains.length > 0">
+              <router-link
+                v-for="t in activeTrains"
+                :to="`/driver?trainId=${t.id}`"
+                class="driver-badge"
+              >
+                <img src="/images/icon-train.svg" width="25" alt="train icon" />
+                <span v-if="t.timetable" class="text--primary">{{ t.timetable.category }}</span>
+                <span>{{ t.trainNo }}</span>
+                &bull;
+                <span>{{ t.currentStationName }} ({{ getRegionNameById(t.region) }})</span>
+                &bull;
+                <span class="text--grayed">{{ t.stockString.split(';')[0] }}</span>
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="player-stats">
+      <div class="stats-driver">
+        <h3 class="stats-header">
+          <img src="/images/icon-train.svg" width="30" alt="train icon" />
+          {{ t('profile.stats.header-driver') }}
+        </h3>
+        <hr />
+
+        <div v-if="playerInfo.driverStats.countAll > 0">
+          <div>
+            <b class="text--primary">
+              {{ playerInfo.driverStats.countFulfilled }} /
+              {{ playerInfo.driverStats.countAll }} ({{
+                getCountPercentage(
+                  playerInfo.driverStats.countFulfilled,
+                  playerInfo.driverStats.countAll,
+                  2
+                )
+              }}%)
+            </b>
+            - {{ t('profile.stats.fulfilled-timetables') }}
+          </div>
+          <div>
+            <b class="text--primary">
+              {{ playerInfo.driverStats.currentDistanceTotal?.toFixed(2) }} /
+              {{ playerInfo.driverStats.routeDistanceTotal?.toFixed(2) }} ({{
+                getCountPercentage(
+                  playerInfo.driverStats.currentDistanceTotal || 0,
+                  playerInfo.driverStats.routeDistanceTotal || 0,
+                  2
+                )
+              }}%)
+            </b>
+            - {{ t('profile.stats.route-distance') }}
+          </div>
+          <div>
+            <b class="text--primary">
+              {{ playerInfo.driverStats.confirmedStopsTotal }} /
+              {{ playerInfo.driverStats.allStopsTotal }} ({{
+                getCountPercentage(
+                  playerInfo.driverStats.confirmedStopsTotal || 0,
+                  playerInfo.driverStats.allStopsTotal || 0,
+                  2
+                )
+              }}%)
+            </b>
+            - {{ t('profile.stats.confirmed-stops') }}
+          </div>
+          <div>
+            <b class="text--primary">{{ playerInfo.driverStats.routeDistanceMax || 0 }}km</b> -
+            {{ t('profile.stats.longest-timetable') }}
+          </div>
+          <div>
+            <b class="text--primary">
+              {{ playerInfo.driverStats.routeDistanceAvg?.toFixed(2) || 0 }}km
+            </b>
+            - {{ t('profile.stats.avg-timetable-length') }}
+          </div>
+        </div>
+
+        <div class="text--grayed" v-else>
+          {{ t('profile.stats.no-timetable-stats') }}
+        </div>
+      </div>
+
+      <div
+        class="stats-dispatcher"
+        v-if="playerInfo.dispatcherStats && playerInfo.dispatcherStats.services?.count"
+      >
+        <h3 class="stats-header">
+          <img src="/images/icon-user.svg" width="30" alt="user icon" />
+          {{ t('profile.stats.header-dispatcher') }}
+        </h3>
+
+        <hr />
+
+        <div>
+          <b class="text--primary">{{ playerInfo.dispatcherStats.services.count }}</b> -
+          {{ t('profile.stats.duties-count') }}
+        </div>
+        <div>
+          <b class="text--primary">{{
+            humanizeDuration(playerInfo.dispatcherStats.services.durationMax)
+          }}</b>
+          - {{ t('profile.stats.longest-duty') }}
+        </div>
+
+        <div v-if="playerInfo.dispatcherStats.issuedTimetables">
+          <div>
+            <b class="text--primary">{{ playerInfo.dispatcherStats.issuedTimetables.count }}</b>
+            - {{ t('profile.stats.created-timetables-count') }}
+          </div>
+          <div>
+            <b class="text--primary">
+              {{ playerInfo.dispatcherStats.issuedTimetables.distanceMax }}km
+            </b>
+            - {{ t('profile.stats.longest-created-timetable') }}
+          </div>
+          <div>
+            <b class="text--primary">
+              {{ playerInfo.dispatcherStats.issuedTimetables.distanceSum.toFixed(2) }}km
+            </b>
+            - {{ t('profile.stats.created-timetables-length-sum') }}
+          </div>
+        </div>
+
+        <div class="text--grayed" v-else>
+          {{ t('profile.stats.no-dispatcher-stats') }}
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { computed, onActivated, onMounted, PropType, ref, watch } from 'vue';
+import { API, Td2API } from '../../typings/api';
+import { calculateExpStyles } from '../../composables/badge';
+import { getCountPercentage } from '../../utils/calcUtils';
+import { humanizeDuration } from '../../composables/time';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useApiStore } from '../../store/apiStore';
+import StationStatusBadge from '../Global/StationStatusBadge.vue';
+import ProfilePlayerAvatar from './ProfilePlayerAvatar.vue';
+import { getRegionNameById } from '../../utils/regionUtils';
+import { isCreator } from '../../utils/userUtils';
+
+const { t } = useI18n();
+
+const route = useRoute();
+const apiStore = useApiStore();
+
+const props = defineProps({
+  playerInfo: {
+    type: Object as PropType<API.PlayerInfo.Data>,
+    required: true
+  },
+
+  playerTD2Info: {
+    type: Object as PropType<Td2API.UsersInfoByName.UserInfo>
+  },
+
+  playerName: {
+    type: String
+  }
+});
+
+const isPlayerDonator = computed(() =>
+  props.playerName ? apiStore.donatorsData.includes(props.playerName) : false
+);
+
+const isPlayerCreator = computed(() => (props.playerName ? isCreator(props.playerName) : false));
+
+const activeDispatches = computed(() => {
+  if (!props.playerName) return [];
+  if (!apiStore.activeData || !apiStore.activeData.activeSceneries) return [];
+
+  return apiStore.activeData.activeSceneries.filter(
+    (sc) =>
+      sc.dispatcherName == props.playerName && (sc.lastSeen >= Date.now() - 60000 || sc.isOnline)
+  );
+});
+
+const activeTrains = computed(() => {
+  if (!props.playerName) return [];
+  if (!apiStore.activeData || !apiStore.activeData.trains) return [];
+
+  return apiStore.activeData.trains.filter(
+    (t) => t.driverName == props.playerName && (t.lastSeen >= Date.now() - 60000 || t.online)
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/badge';
+@use '../../styles/responsive';
+
+.profile-summary {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  overflow: auto;
+}
+
+.player-name-header {
+  margin: 0.5em 0;
+
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.25em;
+  }
+}
+
+.player-badges {
+  display: flex;
+  justify-content: center;
+  gap: 1em;
+}
+
+.badge-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25em;
+
+  font-weight: bold;
+
+  & > .level-badge {
+    font-size: 1.15em;
+  }
+}
+
+.player-journal-links {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 1em;
+}
+
+.info-activity {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1em;
+  margin-top: 1em;
+
+  .dispatcher-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.25em;
+  }
+
+  .driver-badge {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+
+    gap: 0.25em;
+    font-weight: bold;
+    border-radius: 0.5em;
+  }
+}
+
+.player-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+
+  hr {
+    margin: 0.5em 0;
+  }
+}
+
+.player-info,
+.player-stats > div {
+  background-color: var(--clr-tile);
+  border-radius: 0.5em;
+  padding: 1em;
+}
+
+.stats-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25em;
+}
+
+@include responsive.midScreen {
+  .player-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+  }
+}
+
+@include responsive.smallScreen {
+  .player-stats {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+}
+</style>
@@ -127,9 +127,8 @@ export default defineComponent({
          this.station?.name || this.onlineScenery?.name
        }&countFrom=${countFrom}&countLimit=${countLimit}`;

-        const historyAPIData: API.DispatcherHistory.Response = await (
-          await this.apiStore.client!.get(requestString)
-        ).data;
+        const historyAPIData: API.DispatcherHistory.Response =
+          await this.apiStore.client.get(requestString);

        this.dataStatus = Status.Data.Loaded;
        return historyAPIData;
@@ -1,19 +1,15 @@
 <template>
  <section class="info-header">
-    <button
-      class="btn btn-return"
-      :title="$t('scenery.return-btn')"
-      @click="onReturnButtonClick"
-    >
+    <button class="btn btn-return" :title="$t('scenery.return-btn')" @click="onReturnButtonClick">
      <img src="/images/icon-back.svg" alt="return button" />
    </button>

-    <a class="scenery-name" :href="station?.generalInfo?.url" target="_blank">
-      {{ stationName.replace(/_/g, ' ') }}
-    </a>
+    <div class="scenery-name">
+      <a v-if="station?.generalInfo" :href="station.generalInfo.url" target="_blank">
+        {{ stationName.replace(/_/g, ' ') }}
+      </a>

-    <div class="scenery-abbrev" v-if="station?.generalInfo?.abbr">
-      {{ $t('scenery.abbrev') }} <b>{{ station.generalInfo.abbr }}</b>
+      <span v-else> {{ stationName.replace(/_/g, ' ') }}</span>
    </div>

    <div class="scenery-hash" v-if="onlineScenery?.hash">#{{ onlineScenery.hash }}</div>
@@ -28,12 +24,6 @@ import { useRoute, useRouter } from 'vue-router';
 const route = useRoute();
 const router = useRouter();

-const prevPath = ref('/');
-
-onMounted(() => {
-  prevPath.value = (route.meta['prevPath'] as string) ?? '/';
-});
-
 defineProps({
  station: {
    type: Object as PropType<Station>
@@ -50,7 +40,7 @@ defineProps({
 });

 function onReturnButtonClick() {
-  router.push(prevPath.value);
+  router.push('/');
 }
 </script>

@@ -61,15 +51,14 @@ function onReturnButtonClick() {
 .btn-return {
  $bgColor: #2b2b2b;
  background-color: $bgColor;
-  margin-bottom: 0.5em;
-
-  img {
-    width: 2em;
-  }

  &:hover {
    background-color: color.adjust($color: $bgColor, $lightness: 15%);
  }
+
+  img {
+    height: 2em;
+  }
 }

 .scenery-name {
@@ -81,13 +70,7 @@ function onReturnButtonClick() {
  text-transform: uppercase;
 }

-.scenery-abbrev {
-  font-size: 1.3em;
-  color: #aaa;
-}
-
 .scenery-hash {
-  margin-top: 0.5em;
  color: #aaa;
  font-size: 1.2em;
 }
@@ -1,29 +1,32 @@
 <template>
  <div class="scenery-info">
    <section>
-      <SceneryInfoIcons :station="station" />
-      <SceneryInfoGeneral :station="station" />
-      <SceneryInfoRoutes v-if="station" :station="station" />
-      <SceneryInfoAuthors :station="station" />
+      <div class="info-station-data" v-if="apiStore.dataStatuses.sceneries == Status.Data.Loaded">
+        <SceneryInfoIcons :station="station" />
+        <SceneryInfoGeneral :station="station" />
+        <SceneryInfoRoutes v-if="station" :station="station" />
+        <SceneryInfoAuthors :station="station" />
+      </div>

-      <div style="margin: 1em 0; height: 2px; background-color: white"></div>
+      <div class="info-station-loading" v-else>
+        <Loading />
+      </div>
+
+      <div class="info-divider"></div>

-      <!-- info dispatcher -->
      <SceneryInfoDispatcher :onlineScenery="onlineScenery" />

-      <div class="info-lists">
-        <!-- user list -->
+      <div class="info-online-lists">
        <SceneryInfoUserList :onlineScenery="onlineScenery" :station="station" />
-
-        <!-- spawn list -->
        <SceneryInfoSpawnList :onlineScenery="onlineScenery" />
      </div>
    </section>
  </div>
 </template>

-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { ActiveScenery, Station, Status } from '../../typings/common';

 import SceneryInfoDispatcher from './SceneryInfo/SceneryInfoDispatcher.vue';
 import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
@@ -32,27 +35,18 @@ import SceneryInfoSpawnList from './SceneryInfo/SceneryInfoSpawnList.vue';
 import SceneryInfoRoutes from './SceneryInfo/SceneryInfoRoutes.vue';
 import SceneryInfoGeneral from './SceneryInfo/SceneryInfoGeneral.vue';
 import SceneryInfoAuthors from './SceneryInfo/SceneryInfoAuthors.vue';
+import { useApiStore } from '../../store/apiStore';
+import Loading from '../Global/Loading.vue';

-import { ActiveScenery, Station } from '../../typings/common';
+const apiStore = useApiStore();

-export default defineComponent({
-  components: {
-    SceneryInfoDispatcher,
-    SceneryInfoGeneral,
-    SceneryInfoIcons,
-    SceneryInfoAuthors,
-    SceneryInfoUserList,
-    SceneryInfoSpawnList,
-    SceneryInfoRoutes
+defineProps({
+  station: {
+    type: Object as PropType<Station>
  },
-  props: {
-    station: {
-      type: Object as PropType<Station>
-    },

-    onlineScenery: {
-      type: Object as PropType<ActiveScenery>
-    }
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
  }
 });
 </script>
@@ -60,7 +54,15 @@ export default defineComponent({
 <style lang="scss" scoped>
@use '../../styles/responsive';

-.info-lists {
+.info-station-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-height: 300px;
+}
+
+.info-online-lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
@@ -68,6 +70,12 @@ export default defineComponent({
  margin-top: 1em;
 }

+.info-divider {
+  margin: 1em 0;
+  height: 3px;
+  background-color: #5b5b5b;
+}
+
 .scenery-topic a {
  font-weight: bold;
 }
@@ -8,19 +8,25 @@
        {{ onlineScenery.dispatcherExp > 1 ? onlineScenery.dispatcherExp : 'L' }}
      </span>

-      <router-link
-        class="dispatcher-name"
-        :to="`/journal/dispatchers?search-dispatcher=${onlineScenery.dispatcherName}`"
-      >
+      <router-link class="dispatcher-name" :to="`/profile?playerId=${onlineScenery.dispatcherId}`">
+        <span
+          class="text--creator"
+          v-if="isCreator(onlineScenery.dispatcherName)"
+          :title="$t('donations.creator-message')"
+        >
+          {{ onlineScenery.dispatcherName }}
+        </span>
        <span
          class="text--donator"
-          v-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
+          v-else-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
          :title="$t('donations.dispatcher-message')"
        >
          {{ onlineScenery.dispatcherName }}
        </span>
        <span v-else>{{ onlineScenery.dispatcherName }}</span>
      </router-link>
+
+      <FlagIcon :languageId="onlineScenery.dispatcherLanguageId" width="1.25em" />
    </div>

    <div class="info-bottom">
@@ -51,13 +57,17 @@ import styleMixin from '../../../mixins/styleMixin';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
 import { ActiveScenery } from '../../../typings/common';
 import { useApiStore } from '../../../store/apiStore';
+import FlagIcon from '../../Global/FlagIcon.vue';
+import { isCreator } from '../../../utils/userUtils';

 export default defineComponent({
  mixins: [styleMixin, dateMixin, routerMixin],
+  components: { StationStatusBadge, FlagIcon },

  data() {
    return {
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      isCreator
    };
  },

@@ -66,8 +76,7 @@ export default defineComponent({
      type: Object as PropType<ActiveScenery>,
      required: false
    }
-  },
-  components: { StationStatusBadge }
+  }
 });
 </script>

@@ -5,51 +5,69 @@
    </div>

    <div v-else>
-      <span>
-        <b>{{ $t('availability.title') }}:</b>
-        {{ $t(`availability.${station.generalInfo.availability}`) }}
-
-        <span v-if="station.generalInfo.reqLevel > -1">
-          -
-          {{
-            $t(
-              'scenery.req-level',
-              { lvl: station.generalInfo.reqLevel },
-              station.generalInfo.reqLevel
-            )
-          }}
+      <div>
+        <span>
+          <a
+            v-if="station?.generalInfo"
+            :href="station.generalInfo.url"
+            class="forum-link"
+            target="_blank"
+          >
+            {{ $t('scenery.forum-topic') }}
+          </a>
        </span>
-      </span>

-      <span>
-        &bull; <b>{{ $t('controls.title') }}:</b>
-        {{ $t(`controls.${station.generalInfo.controlType}`) }}
-      </span>
+        <span>
+          &bull;
+          <b>{{ $t('scenery.abbrev') }}</b> {{ station.generalInfo.abbr }}
+        </span>

-      <span>
-        &bull; <b>{{ $t('signals.title') }}:</b>
-        {{ $t(`signals.${station.generalInfo.signalType}`) }}
-      </span>
+        <span>
+          &bull; <b>{{ $t('availability.title') }}:</b>
+          {{ $t(`availability.${station.generalInfo.availability}`) }}

-      <span v-if="station.generalInfo.lines">
-        &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
-      </span>
+          <span v-if="station.generalInfo.reqLevel > -1">
+            -
+            {{
+              $t(
+                'scenery.req-level',
+                { lvl: station.generalInfo.reqLevel },
+                station.generalInfo.reqLevel
+              )
+            }}
+          </span>
+        </span>

-      <span v-if="station.generalInfo.project">
-        &bull; <b>{{ $t('scenery.project-title') }}: </b>
-        <a
-          style="color: salmon; text-decoration: underline; font-weight: bold"
-          :href="station.generalInfo.projectUrl"
-          target="_blank"
-        >
-          {{ station.generalInfo.project }}
-        </a>
-      </span>
+        <span>
+          &bull; <b>{{ $t('controls.title') }}:</b>
+          {{ $t(`controls.${station.generalInfo.controlType}`) }}
+        </span>

-      <span v-if="additionalTools.length != 0">
-        &bull; <b>{{ $t('scenery.additional-tools-title') }}: </b>
-        {{ additionalTools.join(', ') }}
-      </span>
+        <span>
+          &bull; <b>{{ $t('signals.title') }}:</b>
+          {{ $t(`signals.${station.generalInfo.signalType}`) }}
+        </span>
+
+        <span v-if="station.generalInfo.lines">
+          &bull; <b>{{ $t('scenery.lines-title') }}:</b> {{ station.generalInfo.lines }}
+        </span>
+
+        <span v-if="station.generalInfo.project">
+          &bull; <b>{{ $t('scenery.project-title') }}: </b>
+          <a
+            style="color: salmon; text-decoration: underline; font-weight: bold"
+            :href="station.generalInfo.projectUrl"
+            target="_blank"
+          >
+            {{ station.generalInfo.project }}
+          </a>
+        </span>
+
+        <span v-if="additionalTools.length != 0">
+          &bull; <b>{{ $t('scenery.additional-tools-title') }}: </b>
+          {{ additionalTools.join(', ') }}
+        </span>
+      </div>
    </div>
  </section>
 </template>
@@ -84,9 +102,14 @@ export default defineComponent({
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
+}

-  div {
-    margin: 0 0.15em;
-  }
+.scenery-abbrev {
+  font-size: 1.05em;
+}
+
+a.forum-link {
+  text-decoration: underline;
+  font-weight: bold;
 }
 </style>
@@ -1,102 +1,101 @@
 <template>
-  <section class="info-icons">
-    <span v-if="!station || !station.generalInfo">
+  <section class="info-icons-section">
+    <div class="icons-box">
+      <span v-if="!station || !station.generalInfo">
+        <img
+          class="icon-info"
+          src="/images/icon-unknown.svg"
+          alt="icon-unknown"
+          :title="$t('sceneries.info.unknown')"
+        />
+      </span>
+
+      <span
+        v-if="station?.generalInfo && station?.generalInfo.reqLevel >= 0"
+        class="scenery-icon icon-info level"
+        :style="calculateExpStyles(station?.generalInfo.reqLevel)"
+      >
+        {{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
+      </span>
+
      <img
+        v-if="station?.generalInfo?.availability == 'nonPublic'"
        class="icon-info"
-        src="/images/icon-unknown.svg"
-        alt="icon-unknown"
-        :title="$t('sceneries.info.unknown')"
+        src="/images/icon-lock.svg"
+        alt="Non-public scenery"
+        :title="$t('sceneries.info.non-public')"
      />
-    </span>

-    <span
-      v-if="station?.generalInfo && station?.generalInfo.reqLevel >= 0"
-      class="scenery-icon icon-info level"
-      :style="calculateExpStyle(station?.generalInfo.reqLevel)"
-    >
-      {{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
-    </span>
+      <img
+        v-if="station?.generalInfo?.availability == 'unavailable'"
+        class="icon-info"
+        src="/images/icon-unavailable.svg"
+        alt="Unavailable scenery"
+        :title="$t('sceneries.info.unavailable')"
+      />

-    <img
-      v-if="station?.generalInfo?.availability == 'nonPublic'"
-      class="icon-info"
-      src="/images/icon-lock.svg"
-      alt="Non-public scenery"
-      :title="$t('sceneries.info.non-public')"
-    />
+      <img
+        v-if="station?.generalInfo?.availability == 'abandoned'"
+        class="icon-info"
+        src="/images/icon-abandoned.svg"
+        alt="Abandoned scenery"
+        :title="$t('sceneries.info.abandoned')"
+      />

-    <img
-      v-if="station?.generalInfo?.availability == 'unavailable'"
-      class="icon-info"
-      src="/images/icon-unavailable.svg"
-      alt="Unavailable scenery"
-      :title="$t('sceneries.info.unavailable')"
-    />
+      <span
+        v-if="station?.generalInfo"
+        class="scenery-icon icon-info"
+        :class="station?.generalInfo.controlType.replace('+', '-')"
+        :title="
+          $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
+        "
+      >
+        {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
+      </span>

-    <img
-      v-if="station?.generalInfo?.availability == 'abandoned'"
-      class="icon-info"
-      src="/images/icon-abandoned.svg"
-      alt="Abandoned scenery"
-      :title="$t('sceneries.info.abandoned')"
-    />
+      <img
+        v-if="station?.generalInfo?.signalType"
+        class="icon-info"
+        :src="`/images/icon-${station.generalInfo.signalType}.svg`"
+        :alt="station.generalInfo.signalType"
+        :title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
+      />

-    <span
-      v-if="station?.generalInfo"
-      class="scenery-icon icon-info"
-      :class="station?.generalInfo.controlType.replace('+', '-')"
-      :title="
-        $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
-      "
-    >
-      {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
-    </span>
+      <img
+        v-if="station?.generalInfo?.lines"
+        class="icon-info"
+        src="/images/icon-real.svg"
+        alt="real scenery"
+        :title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
+      />

-    <img
-      v-if="station?.generalInfo?.signalType"
-      class="icon-info"
-      :src="`/images/icon-${station.generalInfo.signalType}.svg`"
-      :alt="station.generalInfo.signalType"
-      :title="$t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)"
-    />
+      <img
+        v-if="station?.generalInfo?.SUP"
+        class="icon-info"
+        src="/images/icon-SUP.svg"
+        alt="SUP (RASP-UZK)"
+        :title="$t('sceneries.info.SUP')"
+      />

-    <img
-      v-if="station?.generalInfo?.lines"
-      class="icon-info"
-      src="/images/icon-real.svg"
-      alt="real scenery"
-      :title="`${$t('sceneries.info.real')} ${station.generalInfo.lines}`"
-    />
-
-    <img
-      v-if="station?.generalInfo?.SUP"
-      class="icon-info"
-      src="/images/icon-SUP.svg"
-      alt="SUP (RASP-UZK)"
-      :title="$t('sceneries.info.SUP')"
-    />
-
-    <img
-      v-if="station?.generalInfo?.ASDEK"
-      class="icon-info"
-      src="/images/icon-ASDEK.svg"
-      alt="dSAT ASDEK"
-      :title="$t('sceneries.info.ASDEK')"
-    />
+      <img
+        v-if="station?.generalInfo?.ASDEK"
+        class="icon-info"
+        src="/images/icon-ASDEK.svg"
+        alt="dSAT ASDEK"
+        :title="$t('sceneries.info.ASDEK')"
+      />
+    </div>
  </section>
 </template>

-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import styleMixin from '../../../mixins/styleMixin';
+<script lang="ts" setup>
+import { PropType } from 'vue';
 import { Station } from '../../../typings/common';
+import { calculateExpStyles } from '../../../composables/badge';

-export default defineComponent({
-  mixins: [styleMixin],
-  props: {
-    station: {
-      type: Object as PropType<Station>
-    }
+defineProps({
+  station: {
+    type: Object as PropType<Station>
  }
 });
 </script>
@@ -104,12 +103,12 @@ export default defineComponent({
 <style lang="scss" scoped>
@use '../../../styles/icons';

-.info-icons {
+.icons-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

-  margin: 1em;
+  margin: 0.5em;
 }

 .icon-info {
@@ -1,18 +1,18 @@
 <template>
  <section class="info-routes" v-if="station.generalInfo">
-    <div class="routes one-way" v-if="oneWayRoutes.length > 0">
+    <div class="routes one-way" v-if="singleRoutesAvailable.length > 0">
      <button
        class="routes-btn"
        @click="toggleRoutesVisibility('single')"
        data-tooltip-type="BaseTooltip"
-        :data-tooltip-content="`${showInternalSingleRoutes ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
+        :data-tooltip-content="`${showInternalSingleRoutes ? $t('scenery.btn-show-internal-routes') : $t('scenery.btn-hide-internal-routes')}`"
      >
        <b>{{ $t('scenery.one-way-routes') }}</b>
        <i class="fa-solid" :class="`${showInternalSingleRoutes ? 'fa-eye' : 'fa-eye-slash'}`"></i>
      </button>

      <ul class="routes-list">
-        <li v-for="route in oneWayRoutes" :key="route.routeName">
+        <li v-for="route in singleRoutesFiltered" :key="route.routeName">
          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
            {{ route.routeName }}</span
          >
@@ -24,22 +24,29 @@
          </span>
          <span v-if="route.isRouteSBL" class="sbl">SBL</span>
        </li>
+
+        <li v-if="singleRoutesFiltered.length == 0">
+          <span class="routes-hidden">
+            <i class="fa-solid fa-eye-slash"></i>
+            {{ $t('scenery.routes-hidden') }}
+          </span>
+        </li>
      </ul>
    </div>

-    <div class="routes two-way" v-if="twoWayRoutes.length > 0">
+    <div class="routes two-way" v-if="doubleRoutesAvailable.length > 0">
      <button
        class="routes-btn"
        @click="toggleRoutesVisibility('double')"
        data-tooltip-type="BaseTooltip"
-        :data-tooltip-content="`${showInternalDoubleRoutes ? $t('scenery.btn-hide-internal-routes') : $t('scenery.btn-show-internal-routes')}`"
+        :data-tooltip-content="`${showInternalDoubleRoutes ? $t('scenery.btn-show-internal-routes') : $t('scenery.btn-hide-internal-routes')}`"
      >
        <b>{{ $t('scenery.two-way-routes') }}</b>
        <i class="fa-solid" :class="`${showInternalDoubleRoutes ? 'fa-eye' : 'fa-eye-slash'}`"></i>
      </button>

      <ul class="routes-list">
-        <li v-for="route in twoWayRoutes" :key="route.routeName">
+        <li v-for="route in doubleRoutesFiltered" :key="route.routeName">
          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
            {{ route.routeName }}
          </span>
@@ -54,6 +61,13 @@
          </span>
          <span v-if="route.isRouteSBL" class="sbl">SBL</span>
        </li>
+
+        <li v-if="doubleRoutesFiltered.length == 0">
+          <span class="routes-hidden">
+            <i class="fa-solid fa-eye-slash"></i>
+            {{ $t('scenery.routes-hidden') }}
+          </span>
+        </li>
      </ul>
    </div>
  </section>
@@ -102,20 +116,32 @@ export default defineComponent({
  },

  computed: {
-    oneWayRoutes() {
+    singleRoutesAvailable() {
      return (
        this.station.generalInfo?.routes.single
-          .filter((r) => !r.isInternal || r.isInternal == this.showInternalSingleRoutes)
+          .filter((r) => !r.hidden)
          .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
      );
    },

-    twoWayRoutes() {
+    doubleRoutesAvailable() {
      return (
        this.station.generalInfo?.routes.double
-          .filter((r) => !r.isInternal || r.isInternal == this.showInternalDoubleRoutes)
+          .filter((r) => !r.hidden)
          .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
      );
+    },
+
+    singleRoutesFiltered() {
+      return this.singleRoutesAvailable.filter(
+        (r) => this.showInternalSingleRoutes || !r.isInternal
+      );
+    },
+
+    doubleRoutesFiltered() {
+      return this.doubleRoutesAvailable.filter(
+        (r) => this.showInternalDoubleRoutes || !r.isInternal
+      );
    }
  }
 });
@@ -154,11 +180,6 @@ ul.routes-list {

  li {
    margin: 0.5em 0.25em;
-    cursor: pointer;
-
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;

    & > span {
      padding: 0.2em;
@@ -182,11 +203,16 @@ ul.routes-list {
        background-color: #303030;
        color: #cfcfcf;
      }
+
      &.sbl {
        color: var(--clr-primary);
        background-color: #404040;
      }

+      &.routes-hidden {
+        background-color: #4b4b4b;
+      }
+
      &:last-child {
        border-radius: 0 0.5em 0.5em 0;
      }
@@ -29,7 +29,8 @@
            <i
              v-if="
                train.timetableData != undefined &&
-                (train.lastSeen <= Date.now() - 60000 || !train.online)
+                train.lastSeen <= Date.now() - 60000 &&
+                !train.online
              "
              class="fa-solid fa-user-slash"
              style="color: lightcoral"
@@ -1,247 +1,18 @@
 <template>
  <section class="scenery-timetable">
-    <div class="timetable-header">
-      <h3>
-        <img src="/images/icon-timetable.svg" alt="icon-timetable" />
-        <span>{{ $t('scenery.timetables') }}</span>
+    <SceneryTimetableHeader
+      :station="station"
+      :onlineScenery="onlineScenery"
+      :chosenCheckpoint="chosenCheckpoint"
+      :showStockThumbnails="showStockThumbnails"
+    />

-        <span>
-          <span class="text--primary">{{ onlineScenery?.scheduledTrainCount.all ?? 0 }}</span>
-          <span> / </span>
-          <span class="text--grayed">
-            {{ onlineScenery?.scheduledTrainCount.confirmed ?? 0 }}
-          </span>
-        </span>
-
-        <span class="header_links" v-if="station && onlineScenery">
-          <a
-            :href="generatorHref"
-            target="_blank"
-            data-tooltip-type="HtmlTooltip"
-            :data-tooltip-content="`<b>${$t('scenery.gnr-link')}</b>`"
-          >
-            <img src="/images/icon-gnr.svg" alt="GeneraTOR app icon" />
-          </a>
-
-          <a
-            :href="pragotronHref"
-            target="_blank"
-            data-tooltip-type="HtmlTooltip"
-            :data-tooltip-content="`<b>${$t('scenery.pragotron-link')}</b>`"
-          >
-            <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
-          </a>
-
-          <a
-            :href="tabliceZbiorczeHref"
-            target="_blank"
-            data-tooltip-type="HtmlTooltip"
-            :data-tooltip-content="`<b>${$t('scenery.tablice-link')}</b>`"
-          >
-            <img src="/images/icon-tablice.ico" alt="icon-tablice" />
-          </a>
-        </span>
-      </h3>
-
-      <div class="timetable-checkpoints" v-if="station?.generalInfo?.checkpoints">
-        <template v-for="(ch, i) in station.generalInfo.checkpoints" :key="i">
-          <template v-if="i > 0">&bull;</template>
-          <router-link
-            class="checkpoint-item"
-            :class="{ current: chosenCheckpoint === ch }"
-            :to="`/scenery?station=${station.name}&checkpoint=${ch}`"
-            >{{ ch }}</router-link
-          >
-        </template>
-      </div>
-
-      <div class="timetable-checkpoints" v-else-if="onlineScenery">
-        <template v-for="(ch, i) in onlineScenery.missingCheckpoints" :key="i">
-          <template v-if="i > 0">&bull;</template>
-          <router-link
-            class="checkpoint-item"
-            :class="{ current: chosenCheckpoint === ch }"
-            :to="`/scenery?station=${onlineScenery.name}&checkpoint=${ch}`"
-            >{{ ch }}</router-link
-          >
-        </template>
-      </div>
-    </div>
-
-    <div class="timetable-list">
-      <transition-group name="list-anim">
-        <div
-          v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
-          style="padding-bottom: 5em"
-          key="list-loading"
-        >
-          <Loading />
-        </div>
-
-        <span
-          class="timetable-item empty"
-          v-else-if="sceneryTimetables.length == 0 && !onlineScenery"
-          key="list-offline"
-        >
-          {{ $t('scenery.offline') }}
-        </span>
-
-        <div
-          class="timetable-item empty"
-          v-else-if="sceneryTimetables.length == 0"
-          key="list-no-timetables"
-        >
-          {{ $t('scenery.no-timetables') }}
-        </div>
-
-        <router-link
-          class="timetable-item"
-          v-else
-          v-for="(row, i) in sceneryTimetables"
-          :key="row.train.id + i"
-          tabindex="0"
-          :to="row.train.driverRouteLocation"
-        >
-          <span class="timetable-general">
-            <span class="general-info">
-              <div class="info-train">
-                <!-- Cargo warnings & details badges -->
-                <span
-                  class="train-badge twr"
-                  v-if="row.train.timetableData!.twr"
-                  data-tooltip-type="BaseTooltip"
-                  :data-tooltip-content="$t('warnings.TWR')"
-                >
-                  TWR
-                </span>
-
-                <span
-                  class="train-badge tn"
-                  v-if="row.train.timetableData!.hasDangerousCargo"
-                  data-tooltip-type="BaseTooltip"
-                  :data-tooltip-content="$t('warnings.TN')"
-                >
-                  TN
-                </span>
-
-                <span
-                  class="train-badge pn"
-                  v-if="row.train.timetableData!.hasExtraDeliveries"
-                  data-tooltip-type="BaseTooltip"
-                  :data-tooltip-content="$t('warnings.PN')"
-                >
-                  PN
-                </span>
-
-                <!-- Train info -->
-                <span
-                  data-tooltip-type="TrainInfoTooltip"
-                  :data-tooltip-content="row.train.id"
-                  class="tooltip-help"
-                >
-                  <b class="text--primary">
-                    {{ row.train.timetableData!.category }}
-                  </b>
-
-                  <b>&nbsp;{{ row.train.trainNo }}</b>
-                  &bull;
-                  {{ row.train.driverName }}
-
-                  <i
-                    class="fa-solid fa-user-slash"
-                    style="color: salmon"
-                    v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000"
-                  ></i>
-                </span>
-
-                <!-- Train stop comments -->
-                <span
-                  v-if="row.checkpointStop.comments"
-                  class="stop-comments-icon"
-                  data-tooltip-type="BaseTooltip"
-                  :data-tooltip-content="row.checkpointStop.comments"
-                >
-                  <img src="/images/icon-warning.svg" />
-                </span>
-              </div>
-
-              <div class="info-route">
-                <strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
-              </div>
-
-              <ScheduledTrainStatus :sceneryTimetableRow="row" />
-            </span>
-          </span>
-
-          <span class="timetable-schedule">
-            <span class="schedule-arrival">
-              <span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
-                {{ $t('timetables.begins') }}
-              </span>
-
-              <span class="arrival-time" v-else>
-                <div v-if="row.checkpointStop.arrivalDelay == 0">
-                  <span>{{ timestampToString(row.checkpointStop.arrivalTimestamp) }}</span>
-                </div>
-                <div v-else>
-                  <div>
-                    <s style="margin-right: 0.2em" class="text--grayed">{{
-                      timestampToString(row.checkpointStop.arrivalTimestamp)
-                    }}</s>
-                  </div>
-
-                  <span>
-                    {{ timestampToString(row.checkpointStop.arrivalRealTimestamp) }}
-                    ({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
-                    }}{{ row.checkpointStop.arrivalDelay }})
-                  </span>
-                </div>
-              </span>
-            </span>
-
-            <span class="schedule-stop">
-              <span class="stop-connection">
-                {{ row.currentElement.arrivalRouteExt }}
-              </span>
-
-              <span class="stop-time">
-                {{ row.checkpointStop.stopTime || '' }}
-                {{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
-              </span>
-
-              <span class="stop-connection">
-                {{ row.currentElement.departureRouteExt }}
-              </span>
-            </span>
-
-            <span class="schedule-departure">
-              <span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
-                {{ $t('timetables.terminates') }}
-              </span>
-
-              <span class="departure-time" v-else>
-                <div v-if="row.checkpointStop.departureDelay == 0">
-                  <span>{{ timestampToString(row.checkpointStop.departureTimestamp) }}</span>
-                </div>
-                <div v-else>
-                  <div>
-                    <s style="margin-right: 0.2em" class="text--grayed">{{
-                      timestampToString(row.checkpointStop.departureTimestamp)
-                    }}</s>
-                  </div>
-
-                  <span>
-                    {{ timestampToString(row.checkpointStop.departureRealTimestamp) }}
-                    ({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
-                    }}{{ row.checkpointStop.departureDelay }})
-                  </span>
-                </div>
-              </span>
-            </span>
-          </span>
-        </router-link>
-      </transition-group>
-    </div>
+    <SceneryTimetableList
+      :station="station"
+      :onlineScenery="onlineScenery"
+      :chosenCheckpoint="chosenCheckpoint"
+      :showStockThumbnails="showStockThumbnails"
+    />
  </section>
 </template>

@@ -249,21 +20,21 @@
 import { computed, defineComponent, PropType, ref } from 'vue';
 import { useRoute } from 'vue-router';

-import Loading from '../Global/Loading.vue';
+import SceneryTimetableHeader from './SceneryTimetable/SceneryTimetableHeader.vue';
+
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
-import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
-import { SceneryTimetableRow } from './typings';
-import { ActiveScenery, Station, TooltipTrainInfo, Train } from '../../typings/common';
-import { getTrainStopStatus, stopStatusPriority } from './utils';
+import { ActiveScenery, Station } from '../../typings/common';
+import SceneryTimetableList from './SceneryTimetable/SceneryTimetableList.vue';
+import StorageManager from '../../managers/storageManager';

 export default defineComponent({
  name: 'SceneryTimetable',

-  components: { Loading, ScheduledTrainStatus },
+  components: { SceneryTimetableHeader, SceneryTimetableList },

  mixins: [dateMixin, routerMixin, trainCategoryMixin],

@@ -277,7 +48,8 @@ export default defineComponent({
  },

  data: () => ({
-    listOpen: false
+    listOpen: false,
+    showStockThumbnails: false
  }),

  activated() {
@@ -313,69 +85,6 @@ export default defineComponent({
    };
  },

-  computed: {
-    tabliceZbiorczeHref() {
-      let url = `https://tablice-td2.web.app/?station=${this.station!.name}`;
-      if (this.chosenCheckpoint) url += `&checkpoint=${this.chosenCheckpoint}`;
-
-      return url;
-    },
-
-    pragotronHref() {
-      let url = `https://pragotron-td2.web.app/board?name=${this.station!.name}&region=${this.mainStore.region.id}`;
-      if (this.chosenCheckpoint) url += `&checkpoint=${this.chosenCheckpoint}`;
-
-      return url;
-    },
-
-    generatorHref() {
-      return `https://generator-td2.web.app/?sceneryId=${this.onlineScenery!.name}|${this.onlineScenery!.region}`;
-    },
-
-    sceneryTimetables(): SceneryTimetableRow[] {
-      if (!this.onlineScenery) return [];
-
-      const sceneryName = this.$route.query['station']?.toString().replace(/_/g, ' ') ?? '';
-
-      return this.onlineScenery.scheduledTrains
-        .filter(
-          (ct) =>
-            // ct.timetablePathElement.stationName == sceneryName &&
-            ct.train.region == this.mainStore.region.id &&
-            this.chosenCheckpoint &&
-            ct.checkpointStop.stopNameRAW.toLowerCase() == this.chosenCheckpoint.toLowerCase()
-        )
-        .map((ct) => {
-          const trainStopStatus = getTrainStopStatus(
-            ct.checkpointStop,
-            ct.train.currentStationName,
-            sceneryName
-          );
-
-          return {
-            checkpointStop: ct.checkpointStop,
-            train: ct.train,
-            prevElement: ct.previousSceneryElement,
-            nextElement: ct.nextSceneryElement,
-            currentElement: ct.timetablePathElement,
-            status: trainStopStatus
-          };
-        })
-        .sort((a, b) => {
-          if (stopStatusPriority.indexOf(a.status) - stopStatusPriority.indexOf(b.status) < 0)
-            return -1;
-
-          if (stopStatusPriority.indexOf(a.status) - stopStatusPriority.indexOf(b.status) > 0)
-            return 1;
-
-          if (a.checkpointStop.arrivalTimestamp > b.checkpointStop.arrivalTimestamp) return 1;
-          if (a.checkpointStop.arrivalTimestamp < b.checkpointStop.arrivalTimestamp) return -1;
-
-          return a.checkpointStop.departureTimestamp > b.checkpointStop.departureTimestamp ? 1 : -1;
-        });
-    }
-  },
-
  methods: {
    loadSelectedOption() {
      const queryCheckpoint = this.$route.query['checkpoint']?.toString();
@@ -402,205 +111,16 @@ export default defineComponent({
          checkpointsListRef[0] ??
          sceneryName;
      }
-    },
-
-    setCheckpoint(cp: string) {
-      this.chosenCheckpoint = cp;
    }
  }
 });
 </script>

 <style lang="scss" scoped>
-@use '../../styles/responsive';
-@use '../../styles/animations';
-@use '../../styles/badge';
-
 .scenery-timetable {
+  display: grid;
  height: 100%;
-  overflow-y: scroll;
-  padding: 0 0.5em;
-}
-
-.timetable-header {
-  position: sticky;
-  top: 0;
-  z-index: 99;
-
-  background-color: #181818;
-
-  padding: 0.5em;
-
-  img {
-    width: 25px;
-    vertical-align: middle;
-  }
-
-  h3 {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    align-items: center;
-
-    gap: 0.5em;
-    font-size: 1.3em;
-  }
-}
-
-.header_links {
-  display: flex;
-  gap: 0.25em;
-  margin-left: 0.5em;
-}
-
-.timetable {
-  &-count {
-    margin-left: 0.5em;
-  }
-
-  &-item {
-    margin: 0.5em auto;
-    padding: 0.5em;
-    max-width: 1100px;
-
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 1.2em 0.5em;
-
-    overflow: hidden;
-
-    background: #353535;
-
-    z-index: 10;
-
-    &.empty {
-      padding: 1rem;
-      font-size: 1.2em;
-      color: #bbb;
-    }
-  }
-
-  &-general {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    text-align: left;
-  }
-
-  &-schedule {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.2em;
-    align-items: center;
-
-    width: 100%;
-    max-width: 400px;
-    margin: 0 auto;
-  }
-}
-
-.timetable-checkpoints {
-  display: flex;
-  justify-content: center;
-  gap: 0.5em;
-
-  flex-wrap: wrap;
-  font-size: 1.1em;
-
-  margin-top: 0.5em;
-}
-
-.checkpoint-item {
-  color: #aaa;
-  display: inline;
-
-  &:hover {
-    color: white;
-  }
-
-  &.current {
-    font-weight: bold;
-    color: var(--clr-primary);
-  }
-}
-
-.timetable-list {
-  position: relative;
-}
-
-.general-info {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-}
-
-.info-train {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25em;
-}
-
-.info-train > .train-badge {
-  font-size: 0.85em;
-}
-
-.info-number {
-  color: var(--clr-primary);
-}
-
-.info-route {
-  width: 100%;
-  margin-top: 0.25em;
-}
-
-.stop-comments-icon > img {
-  width: 1.3em;
-  vertical-align: top;
-}
-
-.schedule {
-  &-arrival,
-  &-departure {
-    font-size: 1.15em;
-  }
-
-  &-stop {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.5em;
-    align-items: end;
-
-    .stop-connection {
-      font-size: 0.95em;
-    }
-
-    .stop-time {
-      position: relative;
-      inline-size: max-content;
-      align-self: center;
-      font-size: 0.9em;
-
-      color: var(--clr-primary);
-
-      &::after {
-        content: '\027F6';
-        display: block;
-        font-size: 2.2em;
-        line-height: 0.65em;
-      }
-    }
-  }
-}
-
-.arrival-time.begins,
-.departure-time.terminates {
-  font-size: 0.85em;
-}
-
-@include responsive.smallScreen {
-  .timetable-item {
-    grid-template-columns: 1fr;
-  }
+  overflow: hidden;
+  grid-template-rows: auto 1fr;
 }
 </style>
@@ -0,0 +1,54 @@
+<template>
+  <div class="scenery-timetable-header">
+    <h3>
+      <img src="/images/icon-timetable.svg" alt="icon-timetable" />
+      <span>{{ $t('scenery.timetables') }}</span>
+
+      <span>
+        <span class="text--primary">{{ onlineScenery?.scheduledTrainCount.all ?? 0 }}</span>
+        <span> / </span>
+        <span class="text--grayed">
+          {{ onlineScenery?.scheduledTrainCount.confirmed ?? 0 }}
+        </span>
+      </span>
+    </h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, PropType } from 'vue';
+import { Station, ActiveScenery } from '../../../typings/common';
+import { useMainStore } from '../../../store/mainStore';
+
+const props = defineProps({
+  station: {
+    type: Object as PropType<Station>
+  },
+
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
+  },
+
+  chosenCheckpoint: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.scenery-timetable-header {
+  background-color: #181818;
+  padding: 0.5em;
+}
+
+h3 {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: center;
+
+  gap: 0.5em;
+  font-size: 1.3em;
+}
+</style>
@@ -0,0 +1,567 @@
+<template>
+  <div class="scenery-timetable-list">
+    <!-- Checkpoints derived from station data -->
+
+    <div
+      class="timetable-checkpoints"
+      v-if="station?.generalInfo && station.generalInfo.checkpoints.length > 0"
+    >
+      <template v-for="(ch, i) in station.generalInfo.checkpoints" :key="i">
+        <template v-if="i > 0">&bull;</template>
+        <router-link
+          class="checkpoint-item"
+          :class="{ current: chosenCheckpoint === ch }"
+          :to="`/scenery?station=${station.name}&checkpoint=${ch}`"
+        >
+          {{ ch }}
+        </router-link>
+      </template>
+    </div>
+
+    <!-- Missing checkpoints if scenery is not in database -->
+    <div
+      class="timetable-checkpoints"
+      v-else-if="onlineScenery && onlineScenery.missingCheckpoints.length > 0"
+    >
+      <template v-for="(ch, i) in onlineScenery.missingCheckpoints" :key="i">
+        <template v-if="i > 0">&bull;</template>
+        <router-link
+          class="checkpoint-item"
+          :class="{ current: chosenCheckpoint === ch }"
+          :to="`/scenery?station=${onlineScenery.name}&checkpoint=${ch}`"
+        >
+          {{ ch }}
+        </router-link>
+      </template>
+    </div>
+
+    <div v-else></div>
+
+    <div class="list-container">
+      <transition-group name="list-anim">
+        <div
+          v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
+          style="padding-bottom: 5em"
+          key="list-loading"
+        >
+          <Loading />
+        </div>
+
+        <div
+          class="timetable-item empty"
+          v-else-if="sceneryTimetables.length == 0 && !onlineScenery"
+          key="list-offline"
+        >
+          {{ $t('scenery.offline') }}
+        </div>
+
+        <div
+          class="timetable-item empty"
+          v-else-if="sceneryTimetables.length == 0"
+          key="list-no-timetables"
+        >
+          {{ $t('scenery.no-timetables') }}
+        </div>
+
+        <router-link
+          v-for="row in sceneryTimetables"
+          class="timetable-item"
+          :to="row.train.driverRouteLocation"
+          :key="row.train.id"
+        >
+          <div class="item-top">
+            <div class="top-general">
+              <span class="general-info">
+                <div class="info-train">
+                  <!-- Cargo warnings & details badges -->
+                  <span
+                    class="train-badge twr"
+                    v-if="row.train.timetableData!.twr"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="$t('warnings.TWR')"
+                  >
+                    TWR
+                  </span>
+
+                  <span
+                    class="train-badge tn"
+                    v-if="row.train.timetableData!.hasDangerousCargo"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="$t('warnings.TN')"
+                  >
+                    TN
+                  </span>
+
+                  <span
+                    class="train-badge pn"
+                    v-if="row.train.timetableData!.hasExtraDeliveries"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="$t('warnings.PN')"
+                  >
+                    PN
+                  </span>
+
+                  <!-- Train info -->
+                  <span
+                    data-tooltip-type="TrainInfoTooltip"
+                    :data-tooltip-content="row.train.id"
+                    class="tooltip-help"
+                  >
+                    <b class="text--primary">
+                      {{ row.train.timetableData!.category }}
+                    </b>
+
+                    <b>&nbsp;{{ row.train.trainNo }}</b>
+                    &bull;
+                    {{ row.train.driverName }}
+
+                    <i
+                      class="fa-solid fa-user-slash"
+                      style="color: salmon"
+                      v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000"
+                    ></i>
+                  </span>
+
+                  <!-- Train stop comments -->
+                  <span
+                    v-if="row.checkpointStop.comments"
+                    class="stop-comments-icon"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="row.checkpointStop.comments"
+                  >
+                    <img src="/images/icon-warning.svg" />
+                  </span>
+                </div>
+
+                <div class="info-route">
+                  <strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
+                </div>
+
+                <ScheduledTrainStatus :sceneryTimetableRow="row" />
+              </span>
+            </div>
+
+            <div class="top-schedule">
+              <span class="schedule-arrival">
+                <span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
+                  {{ $t('timetables.begins') }}
+                </span>
+
+                <span class="arrival-time" v-else>
+                  <div v-if="row.checkpointStop.arrivalDelay == 0">
+                    <span>{{ timestampToTimeString(row.checkpointStop.arrivalTimestamp) }}</span>
+                  </div>
+                  <div v-else>
+                    <div>
+                      <s style="margin-right: 0.2em" class="text--grayed">{{
+                        timestampToTimeString(row.checkpointStop.arrivalTimestamp)
+                      }}</s>
+                    </div>
+
+                    <span>
+                      {{ timestampToTimeString(row.checkpointStop.arrivalRealTimestamp) }}
+                      ({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
+                      }}{{ row.checkpointStop.arrivalDelay }})
+                    </span>
+                  </div>
+                </span>
+              </span>
+
+              <span class="schedule-stop">
+                <span class="stop-connection">
+                  {{ row.currentElement.arrivalRouteExt }}
+                </span>
+
+                <span class="stop-time">
+                  {{ row.checkpointStop.stopTime || '' }}
+                  {{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
+                </span>
+
+                <span class="stop-connection">
+                  {{ row.currentElement.departureRouteExt }}
+                </span>
+              </span>
+
+              <span class="schedule-departure">
+                <span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
+                  {{ $t('timetables.terminates') }}
+                </span>
+
+                <span class="departure-time" v-else>
+                  <div v-if="row.checkpointStop.departureDelay == 0">
+                    <span>{{ timestampToTimeString(row.checkpointStop.departureTimestamp) }}</span>
+                  </div>
+                  <div v-else>
+                    <div>
+                      <s style="margin-right: 0.2em" class="text--grayed">{{
+                        timestampToTimeString(row.checkpointStop.departureTimestamp)
+                      }}</s>
+                    </div>
+
+                    <span>
+                      {{ timestampToTimeString(row.checkpointStop.departureRealTimestamp) }}
+                      ({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
+                      }}{{ row.checkpointStop.departureDelay }})
+                    </span>
+                  </div>
+                </span>
+              </span>
+            </div>
+          </div>
+
+          <div class="item-stock-list" v-if="showStockThumbnails">
+            <StockList :trainStockList="row.train.stockList" :thumbnailSize="45" />
+          </div>
+        </router-link>
+      </transition-group>
+    </div>
+
+    <div class="list-actions" v-if="station && onlineScenery">
+      <a
+        :href="generatorHref"
+        target="_blank"
+        data-tooltip-type="HtmlTooltip"
+        :data-tooltip-content="`<b>${$t('scenery.gnr-link')}</b>`"
+      >
+        <img src="/images/icon-gnr.svg" alt="GeneraTOR app icon" />
+      </a>
+
+      <a
+        :href="pragotronHref"
+        target="_blank"
+        data-tooltip-type="HtmlTooltip"
+        :data-tooltip-content="`<b>${$t('scenery.pragotron-link')}</b>`"
+      >
+        <img src="/images/icon-pragotron.svg" alt="icon-pragotron" />
+      </a>
+
+      <a
+        :href="tabliceZbiorczeHref"
+        target="_blank"
+        data-tooltip-type="HtmlTooltip"
+        :data-tooltip-content="`<b>${$t('scenery.tablice-link')}</b>`"
+      >
+        <img src="/images/icon-tablice.ico" alt="icon-tablice" />
+      </a>
+
+      <div class="list-divider"></div>
+
+      <button
+        class="thumbnails-btn"
+        data-tooltip-type="HtmlTooltip"
+        :data-tooltip-content="`<b>${$t(`scenery.btn-${showStockThumbnails ? 'show' : 'hide'}-timetable-thumbnails`)}</b>`"
+        @click="toggleThumbnails"
+      >
+        <i class="fa-solid" :class="`${showStockThumbnails ? 'fa-expand' : 'fa-compress'}`"></i>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ComputedRef, onMounted, PropType, ref } from 'vue';
+import { Station, ActiveScenery } from '../../../typings/common';
+import { SceneryTimetableRow } from '../typings';
+import { getTrainStopStatus, stopStatusPriorities } from '../utils';
+import { useRoute } from 'vue-router';
+import { useMainStore } from '../../../store/mainStore';
+import { useApiStore } from '../../../store/apiStore';
+import { timestampToTimeString } from '../../../composables/time';
+import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
+import Loading from '../../Global/Loading.vue';
+import StockList from '../../Global/StockList.vue';
+import StorageManager from '../../../managers/storageManager';
+
+const props = defineProps({
+  station: {
+    type: Object as PropType<Station>
+  },
+
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
+  },
+
+  chosenCheckpoint: {
+    type: String,
+    required: true
+  }
+});
+
+const route = useRoute();
+const mainStore = useMainStore();
+const apiStore = useApiStore();
+
+const showStockThumbnails = ref(false);
+
+onMounted(() => {
+  handleStockThumbnails();
+});
+
+const sceneryTimetables: ComputedRef<SceneryTimetableRow[]> = computed(() => {
+  if (!props.onlineScenery) return [];
+
+  const sceneryName = route.query['station']?.toString().replace(/_/g, ' ') ?? '';
+
+  return props.onlineScenery.scheduledTrains
+    .filter(
+      (ct) =>
+        // ct.timetablePathElement.stationName == sceneryName &&
+        ct.train.region == mainStore.region.id &&
+        props.chosenCheckpoint &&
+        ct.checkpointStop.stopNameRAW.toLowerCase() == props.chosenCheckpoint.toLowerCase()
+    )
+    .map((ct) => {
+      const trainStopStatus = getTrainStopStatus(
+        ct.checkpointStop,
+        ct.train.currentStationName,
+        sceneryName
+      );
+
+      return {
+        checkpointStop: ct.checkpointStop,
+        train: ct.train,
+        prevElement: ct.previousSceneryElement,
+        nextElement: ct.nextSceneryElement,
+        currentElement: ct.timetablePathElement,
+        status: trainStopStatus
+      };
+    })
+    .sort((a, b) => {
+      if (stopStatusPriorities.indexOf(a.status) - stopStatusPriorities.indexOf(b.status) < 0)
+        return -1;
+
+      if (stopStatusPriorities.indexOf(a.status) - stopStatusPriorities.indexOf(b.status) > 0)
+        return 1;
+
+      if (a.checkpointStop.arrivalTimestamp > b.checkpointStop.arrivalTimestamp) return 1;
+      if (a.checkpointStop.arrivalTimestamp < b.checkpointStop.arrivalTimestamp) return -1;
+
+      return a.checkpointStop.departureTimestamp > b.checkpointStop.departureTimestamp ? 1 : -1;
+    });
+});
+
+const tabliceZbiorczeHref = computed(() => {
+  let url = `https://tablice-td2.web.app/?station=${props.station!.name}`;
+  if (props.chosenCheckpoint) url += `&checkpoint=${props.chosenCheckpoint}`;
+
+  return url;
+});
+
+const pragotronHref = computed(() => {
+  let url = `https://pragotron-td2.spythere.eu/board?name=${props.station!.name}&region=${mainStore.region.id}`;
+  if (props.chosenCheckpoint) url += `&checkpoint=${props.chosenCheckpoint}`;
+
+  return url;
+});
+
+const generatorHref = computed(() => {
+  return `https://generator-td2.spythere.eu/?sceneryId=${props.onlineScenery!.name}|${props.onlineScenery!.region}`;
+});
+
+function handleStockThumbnails() {
+  const storageVal = StorageManager.getBooleanValue('showStockThumbnails');
+
+  showStockThumbnails.value = storageVal;
+}
+
+function toggleThumbnails() {
+  showStockThumbnails.value = !showStockThumbnails.value;
+
+  StorageManager.setBooleanValue('showStockThumbnails', showStockThumbnails.value);
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../../styles/responsive';
+@use '../../../styles/animations';
+@use '../../../styles/badge';
+
+.scenery-timetable-list {
+  display: grid;
+  grid-template-rows: auto 1fr 40px;
+  overflow: hidden;
+}
+
+.top-general {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  text-align: left;
+}
+
+.top-schedule {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.2em;
+  align-items: center;
+
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.timetable-checkpoints {
+  display: flex;
+  justify-content: center;
+  gap: 0.5em;
+
+  flex-wrap: wrap;
+  font-size: 1.1em;
+
+  margin: 0.5em 0;
+}
+
+.checkpoint-item {
+  color: #aaa;
+  display: inline;
+
+  &:hover {
+    color: white;
+  }
+
+  &.current {
+    font-weight: bold;
+    color: var(--clr-primary);
+  }
+}
+
+.list-container {
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  margin-top: 0.5em;
+  padding: 2px;
+  width: 100%;
+}
+
+.timetable-item {
+  display: block;
+
+  margin-bottom: 0.5em;
+  padding: 0.35em;
+  width: 100%;
+
+  overflow: hidden;
+  background: #353535;
+
+  &.empty {
+    padding: 1rem;
+    font-size: 1.2em;
+    color: #bbb;
+  }
+}
+
+.timetable-item > .item-top {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.2em 0.5em;
+}
+
+.timetable-item > .item-stock-list {
+  margin-top: 1em;
+}
+
+.general-info {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.info-train {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25em;
+}
+
+.info-train > .train-badge {
+  font-size: 0.85em;
+}
+
+.info-number {
+  color: var(--clr-primary);
+}
+
+.info-route {
+  width: 100%;
+  margin-top: 0.25em;
+}
+
+.stop-comments-icon > img {
+  width: 1.3em;
+  vertical-align: top;
+}
+
+.schedule-arrival,
+.schedule-departure {
+  font-size: 1.15em;
+}
+
+.schedule-stop {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5em;
+  align-items: end;
+
+  .stop-connection {
+    font-size: 0.95em;
+  }
+
+  .stop-time {
+    position: relative;
+    inline-size: max-content;
+    align-self: center;
+    font-size: 0.9em;
+
+    color: var(--clr-primary);
+
+    &::after {
+      content: '\027F6';
+      display: block;
+      font-size: 2.2em;
+      line-height: 0.65em;
+    }
+  }
+}
+
+.arrival-time.begins,
+.departure-time.terminates {
+  font-size: 0.85em;
+}
+
+.list-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  margin-top: 0.5em;
+
+  .list-divider {
+    height: 80%;
+    width: 3px;
+    background-color: #6b6b6b;
+  }
+
+  img {
+    width: 25px;
+    height: 25px;
+    vertical-align: middle;
+  }
+
+  .thumbnails-btn {
+    width: 25px;
+    height: 25px;
+    font-size: 25px;
+  }
+}
+
+@include responsive.smallScreen {
+  .timetable-item {
+    grid-template-columns: 1fr;
+  }
+
+  .list-actions {
+    justify-content: center;
+  }
+}
+</style>
@@ -18,8 +18,8 @@

 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { StopStatus } from '../../typings/common';
-import { SceneryTimetableRow } from './typings';
+import { StopStatus } from '../../../typings/common';
+import { SceneryTimetableRow } from '../typings';

 export default defineComponent({
  props: {
@@ -115,7 +115,7 @@ export default defineComponent({

  data() {
    return {
-      historyList: [] as API.TimetableHistory.Response,
+      historyList: [] as API.TimetableHistory.ResponseShort,
      historyModeList,

      apiStore: useApiStore(),
@@ -149,11 +149,12 @@ export default defineComponent({
      requestFilters['returnType'] = 'short';

      try {
-        const response: API.TimetableHistory.Response = await (
-          await this.apiStore.client!.get('api/getTimetables', {
-            params: requestFilters
-          })
-        ).data;
+        const response: API.TimetableHistory.ResponseShort = await this.apiStore.client.get(
+          'api/getTimetables',
+          requestFilters
+        );
+
+        console.log(response);

        this.historyList = response;

@@ -178,7 +179,7 @@ export default defineComponent({
      });
    },

-    parseCreatedDate(timetable: API.TimetableHistory.Data, locale: string) {
+    parseCreatedDate(timetable: API.TimetableHistory.DataShort, locale: string) {
      const createdDate =
        timetable.createdAt > timetable.beginDate
          ? new Date(timetable.beginDate)
@@ -0,0 +1,213 @@
+<template>
+  <div class="scenery-top-list">
+    <h2 class="header">{{ t('scenery.top-list.header') }}</h2>
+
+    <div class="top-actions">
+      <div class="actions-modes">
+        <button
+          v-for="mode in availableModes"
+          :class="`btn btn--option ${mode == currentListMode ? 'checked' : ''}`"
+          @click="selectListMode(mode)"
+        >
+          {{ t(`scenery.top-list.mode-${mode}`) }}
+        </button>
+      </div>
+
+      <div class="actions-scopes">
+        <button
+          v-for="scope in availableScopes"
+          :class="`btn btn--option ${scope == currentListScope ? 'checked' : ''}`"
+          @click="selectListScope(scope)"
+        >
+          {{ t(`scenery.top-list.scope-${scope}`) }}
+        </button>
+      </div>
+    </div>
+
+    <div class="rating-list-wrapper">
+      <Loading v-if="listState == Status.Data.Loading" />
+      <div v-else-if="listState == Status.Data.Error">Ups, coś poszło nie tak...</div>
+
+      <ul v-else-if="bestScoreList.length > 0">
+        <li v-for="(value, i) in bestScoreList">
+          <div>
+            {{ t('ordinal', { count: i + 1 }) }} {{ t('scenery.top-list.place') }} -
+            <router-link :to="`/profile?playerId=${value.dispatcherId}`">{{
+              value.dispatcherName
+            }}</router-link>
+          </div>
+
+          <div>
+            <b class="text--primary" v-if="currentListMode == 'dutyCount'">{{
+              t('scenery.top-list.duty-count', value.value)
+            }}</b>
+
+            <b class="text--primary" v-else-if="currentListMode == 'dispatcherRating'">{{
+              t('scenery.top-list.dispatcher-rating', value.value)
+            }}</b>
+
+            <b class="text--primary" v-else>
+              {{ t('scenery.top-list.duration') }}
+              {{ humanizeDuration(value.value) }}
+            </b>
+          </div>
+        </li>
+      </ul>
+
+      <div v-else class="no-data">
+        <span v-if="currentListScope == 'name'">{{ t('scenery.top-list.no-data-general') }}</span>
+        <span v-else>{{ t('scenery.top-list.no-data-current-hash') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onActivated, PropType, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useApiStore } from '../../store/apiStore';
+import { Station, ActiveScenery, Status } from '../../typings/common';
+import Loading from '../Global/Loading.vue';
+import { humanizeDuration } from '../../composables/time';
+
+interface SceneryBestScoreItem {
+  dispatcherName: string;
+  dispatcherId: number;
+  value: number;
+}
+
+const { t } = useI18n();
+
+const apiStore = useApiStore();
+
+defineOptions({
+  name: 'SceneryTopList'
+});
+
+const props = defineProps({
+  station: {
+    type: Object as PropType<Station>
+  },
+
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
+  }
+});
+
+const availableModes = ['dutyCount', 'dispatcherRating', 'dutyDuration'] as const;
+const availableScopes = ['name', 'hash'] as const;
+
+type ListMode = (typeof availableModes)[number];
+type ListScope = (typeof availableScopes)[number];
+
+const currentListMode = ref<ListMode>('dutyCount');
+const currentListScope = ref<ListScope>('name');
+
+const listState = ref<Status.Data>(Status.Data.Loading);
+
+const bestScoreList = ref<SceneryBestScoreItem[]>([]);
+
+onActivated(() => {
+  fetchTopDispatchersList();
+});
+
+function selectListMode(mode: ListMode) {
+  currentListMode.value = mode;
+  fetchTopDispatchersList();
+}
+
+function selectListScope(scope: ListScope) {
+  currentListScope.value = scope;
+  fetchTopDispatchersList();
+}
+
+async function fetchTopDispatchersList() {
+  const searchedStationValue =
+    currentListScope.value == 'name'
+      ? props.station?.name
+      : apiStore.sceneryData.find((sc) => sc.name == props.station!.name)?.hash;
+
+  bestScoreList.value = [];
+
+  if (!searchedStationValue) {
+    listState.value = Status.Data.Loaded;
+    return;
+  }
+
+  try {
+    listState.value = Status.Data.Loading;
+
+    const response: SceneryBestScoreItem[] = await apiStore.client.get(`api/getSceneryBestScores`, {
+      [currentListScope.value]: searchedStationValue,
+      type: currentListMode.value,
+      countLimit: 40
+    });
+
+    bestScoreList.value = response;
+    listState.value = Status.Data.Loaded;
+  } catch (error) {
+    listState.value = Status.Data.Error;
+    console.error(error);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scenery-top-list {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  overflow: hidden;
+  gap: 1em;
+}
+
+.top-actions {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em 1.5em;
+}
+
+.actions-modes,
+.actions-scopes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  font-weight: bold;
+}
+
+.rating-list-wrapper {
+  overflow: auto;
+}
+
+.rating-list-wrapper > ul {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  align-items: center;
+  gap: 0.65em;
+  padding-right: 0.5em;
+}
+
+.rating-list-wrapper > ul > li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  padding: 0.25em;
+  background-color: #2b2b2b;
+  height: 100%;
+
+  line-height: 1.5em;
+
+  a {
+    font-weight: bold;
+  }
+}
+
+.no-data {
+  padding: 1em 0.5em;
+  font-size: 1.1em;
+  background-color: #333;
+  color: #ccc;
+}
+</style>
@@ -1,6 +1,6 @@
 import { StopStatus, TrainStop } from '../../typings/common';

-export const stopStatusPriority = [
+export const stopStatusPriorities = [
  StopStatus.ONLINE,
  StopStatus.STOPPED,
  StopStatus.DEPARTED,
@@ -18,23 +18,31 @@ export function getTrainStopStatus(
    return StopStatus.TERMINATED;
  }

-  if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName == sceneryName) {
+  if (
+    !stopInfo.terminatesHere &&
+    stopInfo.confirmed &&
+    currentStationName.startsWith(sceneryName)
+  ) {
    return StopStatus.DEPARTED;
  }

-  if (!stopInfo.terminatesHere && stopInfo.confirmed && currentStationName != sceneryName) {
+  if (
+    !stopInfo.terminatesHere &&
+    stopInfo.confirmed &&
+    !currentStationName.startsWith(sceneryName)
+  ) {
    return StopStatus.DEPARTED_AWAY;
  }

-  if (currentStationName == sceneryName && !stopInfo.stopped) {
+  if (currentStationName.startsWith(sceneryName) && !stopInfo.stopped) {
    return StopStatus.ONLINE;
  }

-  if (currentStationName == sceneryName && stopInfo.stopped) {
+  if (currentStationName.startsWith(sceneryName) && stopInfo.stopped) {
    return StopStatus.STOPPED;
  }

-  if (currentStationName != sceneryName) {
+  if (!currentStationName.startsWith(sceneryName)) {
    return StopStatus.ARRIVING;
  }

@@ -0,0 +1,154 @@
+<template>
+  <div class="filter-slider-container">
+    <input
+      class="slider"
+      v-for="slider in sliderGroupsOptions[sliderGroup]"
+      type="range"
+      :name="slider.id"
+      :id="slider.id"
+      :min="slider.minRange"
+      :max="slider.maxRange"
+      :step="slider.step"
+      v-model="filters[slider.id]"
+    />
+
+    <div class="slider-track" @click="moveCloserSliderToMousePos"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject, PropType } from 'vue';
+import { SliderGroup, sliderGroupsOptions } from '../../managers/stationFilterManager';
+
+const filters = inject('StationsView_filters') as Record<string, any>;
+
+const props = defineProps({
+  sliderGroup: {
+    type: String as PropType<SliderGroup>,
+    required: true
+  }
+});
+
+// Change slider value that's the closest one to the mouse position on the slider track click
+function moveCloserSliderToMousePos(e: MouseEvent) {
+  const { clientX, target } = e;
+  const { minRange, maxRange, step } = sliderGroupsOptions[props.sliderGroup][0];
+
+  const boundingRect = (target as HTMLElement).getBoundingClientRect();
+  const mouseX = clientX - boundingRect.left;
+
+  const leftSliderValue = filters[sliderGroupsOptions[props.sliderGroup][0].id];
+  const rightSliderValue = filters[sliderGroupsOptions[props.sliderGroup][1].id];
+
+  let mouseValue = Math.round((maxRange - minRange) * (mouseX / boundingRect.width));
+
+  // Adjust mouse value to the closest step point (divide by 10, get rounded number, then multiply by step)
+  mouseValue = Math.round(mouseValue / step) * step;
+
+  let sliderIndex =
+    Math.abs(leftSliderValue - mouseValue) < Math.abs(rightSliderValue - mouseValue) ? 0 : 1;
+
+  filters[sliderGroupsOptions[props.sliderGroup][sliderIndex].id] = mouseValue;
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+
+.filter-slider-container {
+  position: relative;
+  padding: 0.5em;
+  height: 1.25em;
+}
+
+.slider-track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  border-radius: 1em;
+  z-index: 10;
+
+  cursor: pointer;
+  background-color: #444;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #4d4d4d;
+  }
+}
+
+.slider {
+  width: 100%;
+  height: 1.25em;
+  background: none;
+  outline: none;
+  border-radius: 1em;
+  padding: 0;
+
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+
+  z-index: 100;
+
+  pointer-events: none;
+  cursor: pointer;
+
+  -webkit-appearance: none;
+  appearance: none;
+
+  &:hover ~ .slider-track {
+    background-color: #4d4d4d;
+  }
+
+  &:focus-visible {
+    outline: 1px solid white;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+
+    position: relative;
+    z-index: 100;
+
+    width: 1.25em;
+    height: 1.25em;
+    border-radius: 1em;
+    background: var(--clr-primary);
+
+    pointer-events: all;
+  }
+
+  &::-moz-range-thumb {
+    width: 1.25em;
+    height: 1.25em;
+    border-radius: 1em;
+    background: var(--clr-primary);
+
+    pointer-events: all;
+  }
+
+  // &:first-child::-webkit-slider-runnable-track {
+  // }
+
+  &::-moz-range-track {
+    position: relative;
+    z-index: -1;
+
+    width: 100%;
+    height: 5px;
+    cursor: pointer;
+    background: none;
+    border-radius: 1em;
+  }
+
+  // &:first-child::-moz-range-track {
+  //   background: var(--clr-primary);
+  // }
+}
+</style>
@@ -137,20 +137,16 @@
          </section>

          <section class="card_sliders">
-            <div class="slider" v-for="(slider, i) in sliderStates" :key="i">
-              <input
-                class="slider-input"
-                type="range"
-                :name="slider.id"
-                :id="slider.id"
-                :min="slider.minRange"
-                :max="slider.maxRange"
-                :step="slider.step"
-                v-model.number="filters[slider.id]"
-              />
-              <span class="slider-value">{{ filters[slider.id] }}</span>
+            <div class="option-slider" v-for="(sliderGroup, i) in sliderGroups" :key="i">
+              <FilterSlider :sliderGroup="sliderGroup" />
+
+              <span class="slider-value">
+                {{ filters[sliderGroupsOptions[sliderGroup][0].id] }} -
+                {{ filters[sliderGroupsOptions[sliderGroup][1].id] }}
+              </span>
+
              <div class="slider-content">
-                {{ $t(`filters.sliders.${slider.id}`) }}
+                {{ $t(`filters.sliders.${sliderGroups[i]}`) }}
              </div>
            </div>
          </section>
@@ -190,13 +186,15 @@ import routerMixin from '../../mixins/routerMixin';
 import { useMainStore } from '../../store/mainStore';

 import FilterOption from './FilterOption.vue';
+import FilterSlider from './FilterSlider.vue';
 import StorageManager from '../../managers/storageManager';

 import {
  filtersSections,
-  sliderStates,
  initFilters,
-  getChangedFilters
+  sliderGroups,
+  getChangedFilters,
+  sliderGroupsOptions
 } from '../../managers/stationFilterManager';

 import { StationFilterSection } from '../../managers/stationFilterManager';
@@ -206,14 +204,15 @@ import { watch } from 'vue';
 const STORAGE_KEY = 'options_saved';

 export default defineComponent({
-  components: { FilterOption },
+  components: { FilterOption, FilterSlider },
  mixins: [keyMixin, routerMixin],

  data: () => ({
    saveOptions: false,

    filtersSections,
-    sliderStates,
+    sliderGroups,
+    sliderGroupsOptions,

    minimumHours: 0,

@@ -516,7 +515,7 @@ h3.hours-section-header {

 .section-filters {
  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.5em;
  margin: 1em 0;
 }
@@ -528,9 +527,11 @@ h3.hours-section-header {
  -moz-user-select: none;

  span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
    cursor: pointer;
-    display: inline-block;
-    width: 100%;
    text-align: center;
    padding: 0.25em;
    font-weight: bold;
@@ -588,112 +589,34 @@ h3.hours-section-header {
  }
 }

-.slider {
+.card_sliders {
+  margin-top: 1em;
+}
+
+.option-slider {
  display: grid;
-  grid-template-columns: 1fr 50px 1fr;
  align-items: center;
+  grid-template-columns: 250px 100px 1fr;
  gap: 0.25em;
+  min-height: 35px;

  margin-bottom: 1em;
+}

-  &-value {
-    color: var(--clr-primary);
-    padding: 0.1em 0.2em;
-    text-align: center;
-  }
-
-  &-input {
-    -webkit-appearance: none;
-    appearance: none;
-    background: none;
-    border: none;
-    outline: none;
-
-    min-width: 25%;
-
-    &:focus-visible ~ * {
-      color: gold;
-    }
-
-    &::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-
-      height: 20px;
-      width: 20px;
-      margin-top: -7px;
-
-      border-radius: 50%;
-
-      background: white;
-      border: 3px solid var(--clr-primary);
-      background-color: #333;
-
-      @include responsive.smallScreen {
-        width: 15px;
-        height: 15px;
-        margin-top: -5px;
-        border: 3px solid var(--clr-primary);
-      }
-    }
-
-    &::-moz-range-thumb {
-      height: 1em;
-      width: 1em;
-
-      border-radius: 50%;
-
-      background: white;
-      border: 4px solid var(--clr-primary);
-
-      cursor: pointer;
-
-      @include responsive.smallScreen {
-        width: 1em;
-        height: 1em;
-        border: 3px solid var(--clr-primary);
-      }
-    }
-
-    &::-webkit-slider-runnable-track {
-      width: 100%;
-      height: 5px;
-      cursor: pointer;
-      background: #ffffff;
-      border-radius: 1em;
-    }
-
-    &::-moz-range-track {
-      width: 100%;
-      height: 5px;
-      cursor: pointer;
-      background: #ffffff;
-      border-radius: 1em;
-    }
-
-    &::-ms-track {
-      width: 100%;
-      height: 5px;
-      cursor: pointer;
-      background: #ffffff;
-      border-radius: 1em;
-    }
-  }
+.slider-value {
+  color: var(--clr-primary);
+  padding: 0.1em 0.2em;
+  text-align: center;
+  font-weight: bold;
 }

@include responsive.smallScreen {
-  .slider {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+  .option-slider {
+    grid-template-columns: 1fr;
+  }

-    &-input {
-      width: 90%;
-    }
-
-    &-content {
-      text-align: center;
-    }
+  .slider-content {
+    text-align: center;
  }

  .card_controls > button > p {
@@ -278,6 +278,10 @@ export default defineComponent({
  color: #ccc;
 }

+.dropdown_wrapper {
+  top: 2.5em;
+}
+
@include responsive.smallScreen {
  .stats-title {
    text-align: center;
@@ -286,5 +290,9 @@ export default defineComponent({
  .filter-button > span {
    display: none;
  }
+
+  .no-data {
+    text-align: center;
+  }
 }
 </style>
@@ -1,5 +1,5 @@
 <template>
-  <section class="station_table">
+  <section class="station_table" @scroll="onScroll" ref="tableRef">
    <Loading
      v-if="apiStore.dataStatuses.connection == Status.Loading && filteredStationList.length == 0"
    />
@@ -131,8 +131,16 @@
          <td class="station-dispatcher-name">
            <span v-if="station.onlineInfo?.dispatcherName">
              <b
-                v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-                @click.prevent="openDonationCard"
+                v-if="isCreator(station.onlineInfo.dispatcherName)"
+                data-tooltip-type="CreatorTooltip"
+                :data-tooltip-content="$t('donations.creator-message')"
+              >
+                <img src="/images/icon-creator.png" alt="creator icon" />
+                <span class="text--creator">&nbsp;{{ station.onlineInfo.dispatcherName }}</span>
+              </b>
+
+              <b
+                v-else-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
                data-tooltip-type="DonatorTooltip"
                :data-tooltip-content="$t('donations.dispatcher-message')"
              >
@@ -146,6 +154,14 @@
            </span>
          </td>

+          <td class="station-dispatcher-lang">
+            <FlagIcon
+              v-if="station.onlineInfo && station.onlineInfo.dispatcherLanguageId != -1"
+              :language-id="station.onlineInfo.dispatcherLanguageId"
+              width="2.25em"
+            />
+          </td>
+
          <td class="station-dispatcher-exp">
            <span
              v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
@@ -344,17 +360,22 @@ import { useTooltipStore } from '../../store/tooltipStore';
 import { getChangedFilters } from '../../managers/stationFilterManager';
 import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
 import { filterStations, sortStations } from './utils';
+import { getLanguageNameById } from '../../utils/languageUtils';
+import FlagIcon from '../Global/FlagIcon.vue';
+import { isCreator } from '../../utils/userUtils';

 export default defineComponent({
  emits: ['toggleDonationCard'],

-  components: { Loading, StationStatusBadge },
+  components: { Loading, StationStatusBadge, FlagIcon },
  mixins: [styleMixin, dateMixin],

  data: () => ({
    headIconsIds,
    headIds,
-    getChangedFilters
+    scrollTop: 0,
+    getChangedFilters,
+    isCreator
  }),

  setup() {
@@ -382,6 +403,10 @@ export default defineComponent({
    };
  },

+  activated() {
+    (this.$refs['tableRef'] as HTMLElement).scrollTop = this.scrollTop;
+  },
+
  methods: {
    getSceneryRoute(station: Station) {
      this.$router.push({
@@ -422,6 +447,10 @@ export default defineComponent({
      }));

      return JSON.stringify(usersTrains);
+    },
+
+    onScroll(e: Event) {
+      this.scrollTop = (e.target as HTMLElement).scrollTop;
    }
  }
 });
@@ -436,7 +465,7 @@ export default defineComponent({
 $rowCol: #424242;

 .station_table {
-  height: calc(100vh - 11em);
+  height: calc(100vh - 17em);
  max-height: 2000px;
  min-height: 500px;
  overflow: auto;
@@ -495,6 +524,10 @@ thead th {
    width: 12em;
  }

+  &.dispatcher-lang {
+    width: 6em;
+  }
+
  &.dispatcher-lvl {
    width: 6em;
  }
@@ -565,6 +598,7 @@ tbody tr {
 .station-name {
  font-weight: bold;
  max-width: 200px;
+  padding: 0.25em;

  &.default {
    color: var(--clr-primary);
@@ -599,8 +633,8 @@ tbody tr {

 .station-dispatcher-name {
  img {
-    max-width: 1.35em;
-    vertical-align: text-bottom;
+    max-height: 1.3em;
+    vertical-align: text-top;
  }
 }

@@ -10,6 +10,7 @@ export const headIds = [
  'min-lvl',
  'status',
  'dispatcher',
+  'dispatcher-lang',
  'dispatcher-lvl',
  'routes-single',
  'routes-double',
@@ -120,28 +120,40 @@ function filterSliderValues(filters: Record<string, any>, generalInfo: StationGe
  const otherAvailability =
    availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned';

-  const internalRoutes = routes.all.filter((r) => r.isInternal && !r.isRouteSBL && !r.hidden);
+  if (filters['minLevel'] > reqLevel + (otherAvailability ? 1 : 0)) return true;
+  if (filters['maxLevel'] < reqLevel + (otherAvailability ? 1 : 0)) return true;
+  if (filters['minVmax'] > routes.maxRouteSpeed) return true;
+  if (filters['maxVmax'] < routes.minRouteSpeed) return true;

-  return (
-    filters['minLevel'] > reqLevel + (otherAvailability ? 1 : 0) ||
-    filters['maxLevel'] < reqLevel + (otherAvailability ? 1 : 0) ||
-    filters['minVmax'] > routes.maxRouteSpeed ||
-    filters['maxVmax'] < routes.minRouteSpeed ||
-    (filters['no-1track'] && routes.single.length != 0) ||
-    (filters['no-2track'] && routes.double.length != 0) ||
-    filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length ||
-    filters['minOneWay'] > routes.singleOtherNames.length ||
-    filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length ||
-    filters['minTwoWay'] > routes.doubleOtherNames.length ||
-    filters['minOneWayCatenaryInt'] >
-      internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == true).length ||
-    filters['minOneWayInt'] >
-      internalRoutes.filter((r) => r.routeTracks == 1 && r.isElectric == false).length ||
-    filters['minTwoWayCatenaryInt'] >
-      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == true).length ||
-    filters['minTwoWayInt'] >
-      internalRoutes.filter((r) => r.routeTracks == 2 && r.isElectric == false).length
-  );
+  if (filters['oneWay'] && routes.singleOtherNames.length > 0) return true;
+  if (filters['oneWayCatenary'] && routes.singleElectrifiedNames.length > 0) return true;
+  if (filters['twoWay'] && routes.doubleOtherNames.length > 0) return true;
+  if (filters['twoWayCatenary'] && routes.doubleElectrifiedNames.length > 0) return true;
+
+  if (filters['minOneWay'] > routes.singleOtherNames.length) return true;
+  if (filters['maxOneWay'] < routes.singleOtherNames.length) return true;
+  if (filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length) return true;
+  if (filters['maxOneWayCatenary'] < routes.singleElectrifiedNames.length) return true;
+  if (filters['minTwoWay'] > routes.doubleOtherNames.length) return true;
+  if (filters['maxTwoWay'] < routes.doubleOtherNames.length) return true;
+  if (filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length) return true;
+  if (filters['maxTwoWayCatenary'] < routes.doubleElectrifiedNames.length) return true;
+
+  if (filters['oneWayInt'] && routes.singleOtherInternalNames.length > 0) return true;
+  if (filters['oneWayCatenaryInt'] && routes.singleElectrifiedInternalNames.length > 0) return true;
+  if (filters['twoWayInt'] && routes.doubleOtherInternalNames.length > 0) return true;
+  if (filters['twoWayCatenaryInt'] && routes.doubleElectrifiedInternalNames.length > 0) return true;
+
+  // Internal routes
+  if (filters['minOneWayInt'] > routes.singleOtherInternalNames.length) return true;
+  if (filters['maxOneWayInt'] < routes.singleOtherInternalNames.length) return true;
+  if (filters['minOneWayCatenaryInt'] > routes.singleElectrifiedInternalNames.length) return true;
+  if (filters['maxOneWayCatenaryInt'] < routes.singleElectrifiedInternalNames.length) return true;
+
+  if (filters['minTwoWayInt'] > routes.doubleOtherInternalNames.length) return true;
+  if (filters['maxTwoWayInt'] < routes.doubleOtherInternalNames.length) return true;
+  if (filters['minTwoWayCatenaryInt'] > routes.doubleElectrifiedInternalNames.length) return true;
+  if (filters['maxTwoWayCatenaryInt'] < routes.doubleElectrifiedInternalNames.length) return true;
 }

 function filterInputValues(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
@@ -210,6 +222,11 @@ export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
      diff = (a.onlineInfo?.dispatcherExp || 0) - (b.onlineInfo?.dispatcherExp || 0);
      break;

+    case 'dispatcher-lang':
+      diff =
+        (a.onlineInfo?.dispatcherLanguageId ?? -1) - (b.onlineInfo?.dispatcherLanguageId ?? -1);
+      break;
+
    case 'routes-single':
      diff =
        (a.generalInfo?.routes.single.filter((r) => !r.hidden && !r.isInternal).length ?? -1) -
@@ -0,0 +1,36 @@
+<template>
+  <div class="tooltip-content">
+    <img src="/images/icon-creator.png" alt="creator icon" />
+    <b class="text--creator">&nbsp;{{ tooltipStore.content }}</b>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  padding: 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+
+  background-color: #333;
+  box-shadow: 0 0 10px 2px #aaa;
+}
+
+img {
+  vertical-align: text-bottom;
+  height: 1.25em;
+}
+</style>
@@ -1,7 +1,7 @@
 <template>
  <div class="tooltip-content">
    <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
-    <span>{{ tooltipStore.content }}</span>
+    <b class="text--donator">&nbsp;{{ tooltipStore.content }}</b>
  </div>
 </template>

@@ -20,11 +20,6 @@ export default defineComponent({

 <style lang="scss" scoped>
 .tooltip-content {
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  flex-wrap: wrap;
-
  padding: 0.5em;
  border-radius: 0.25em;

@@ -35,7 +30,7 @@ export default defineComponent({
 }

 img {
-  vertical-align: middle;
-  height: 1em;
+  vertical-align: text-bottom;
+  height: 1.25em;
 }
 </style>
@@ -8,12 +8,13 @@
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
 import DonatorTooltip from './DonatorTooltip.vue';
+import CreatorTooltip from './CreatorTooltip.vue';
 import VehiclePreviewTooltip from './VehiclePreviewTooltip.vue';
 import BaseTooltip from './BaseTooltip.vue';
 import SpawnsTooltip from './SpawnsTooltip.vue';
 import UsersTooltip from './UsersTooltip.vue';
 import HtmlTooltip from './HtmlTooltip.vue';
-import TrainInfoTooltip from "./TrainInfoTooltip.vue";
+import TrainInfoTooltip from './TrainInfoTooltip.vue';

 const BOX_PADDING_PX = 20;

@@ -25,7 +26,8 @@ export default defineComponent({
    SpawnsTooltip,
    UsersTooltip,
    HtmlTooltip,
-    TrainInfoTooltip
+    TrainInfoTooltip,
+    CreatorTooltip
  },

  data() {
@@ -56,16 +56,29 @@
          </b>

          <b
-            v-if="apiStore.donatorsData.includes(train.driverName)"
+            v-if="isCreator(train.driverName)"
+            data-tooltip-type="CreatorTooltip"
+            :data-tooltip-content="$t('donations.creator-message')"
+          >
+            <img src="/images/icon-creator.png" alt="creator icon" />
+            <span class="text--creator">&nbsp;{{ train.driverName }}</span>
+          </b>
+
+          <b
+            v-else-if="apiStore.donatorsData.includes(train.driverName)"
            data-tooltip-type="DonatorTooltip"
            :data-tooltip-content="$t('donations.driver-message')"
          >
-            <span class="text--donator">{{ train.driverName }}&nbsp;</span>
            <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
+            <span class="text--donator">&nbsp;{{ train.driverName }}</span>
          </b>

          <span v-else>{{ train.driverName }}</span>
        </div>
+
+        <div class="train-language-flag">
+          <FlagIcon :language-id="train.driverLanguageId" width="1.75em" />
+        </div>
      </div>
    </div>

@@ -199,10 +212,12 @@ import trainInfoMixin from '../../mixins/trainInfoMixin';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import ProgressBar from '../Global/ProgressBar.vue';
 import StockList from '../Global/StockList.vue';
+import FlagIcon from '../Global/FlagIcon.vue';
+import { isCreator } from '../../utils/userUtils';

 export default defineComponent({
  mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
-  components: { ProgressBar, StockList },
+  components: { ProgressBar, StockList, FlagIcon },

  props: {
    train: {
@@ -217,7 +232,8 @@ export default defineComponent({
  data() {
    return {
      store: useMainStore(),
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      isCreator
    };
  },

@@ -273,8 +289,6 @@ export default defineComponent({
  display: flex;
  flex-direction: column;
  font-size: 1em;
-  gap: 0.25em;
-
  background-color: #1a1a1a;
  gap: 0.5em;
 }
@@ -353,8 +367,6 @@ export default defineComponent({
 .status-badges {
  display: flex;
  flex-wrap: wrap;
-  margin-left: 0.25em;
-
  gap: 0.25em;

  img {
@@ -367,7 +379,7 @@ export default defineComponent({
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
-  padding: 0.5em 0;
+  padding: 0.25em 0;
 }

 .progress-distance {
@@ -210,6 +210,10 @@ export default defineComponent({
@use '../../styles/dropdown';
@use '../../styles/dropdown-filters';

+.dropdown_wrapper {
+  top: 2.5em;
+}
+
 .search_content > div {
  margin: 0.5em auto;
 }
@@ -250,9 +250,10 @@ h3 {

 .dropdown_wrapper {
  max-width: 600px;
+  top: 2.5em;
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .no-data {
    text-align: center;
  }
@@ -97,7 +97,7 @@ export default defineComponent({
@use '../../styles/animations';

 .train-table {
-  height: calc(100vh - 11em);
+  height: calc(100vh - 17em);
  min-height: 500px;

  position: relative;
@@ -4,7 +4,7 @@
      <TrainInfo :train="train" />

      <div class="train-stats">
-        <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+        <StockList :trainStockList="train.stockList" :tractionOnly="true" :showPreviews="true" />

        <div>
          <span>{{ train.speed }}km/h</span>
@@ -0,0 +1,8 @@
+export function calculateExpStyles(exp: number, isSupporter = false) {
+  const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  85%, 50%)`) : '#666';
+
+  const fontColor = exp > 14 || exp == -1 ? 'white' : 'black';
+  const boxShadow = isSupporter ? `0 0 6px 2px ${bgColor};` : '';
+
+  return { 'background-color': bgColor, color: fontColor, 'box-shadow': boxShadow };
+}
@@ -0,0 +1,44 @@
+import { useI18n } from 'vue-i18n';
+
+export function calculateDuration(timestampMs: number) {
+  const secondsTotal = Math.floor(timestampMs / 1000);
+  const minsTotal = Math.round(timestampMs / 60000);
+  const hoursTotal = Math.floor(minsTotal / 60);
+  const minsInHour = minsTotal % 60;
+
+  return {
+    secondsTotal,
+    minsTotal,
+    hoursTotal,
+    minsInHour
+  };
+}
+
+export function humanizeDuration(timestampMs: number, showSeconds = false) {
+  const { t } = useI18n();
+
+  const duration = calculateDuration(timestampMs);
+
+  return duration.minsTotal >= 60
+    ? `${t('journal.hours', { value: duration.hoursTotal }, duration.hoursTotal)} ${t(
+        'journal.minutes',
+        { value: duration.minsInHour },
+        duration.minsInHour
+      )}`
+    : showSeconds && duration.secondsTotal <= 60
+      ? t('journal.seconds', { value: duration.secondsTotal }, duration.secondsTotal)
+      : t('journal.minutes', { value: duration.minsTotal }, duration.minsTotal);
+}
+
+export function dateToLocaleString(date: Date, dateOptions: Intl.DateTimeFormatOptions) {
+  const { locale } = useI18n();
+
+  return date.toLocaleString(locale.value == 'pl' ? 'pl-PL' : 'en-GB', dateOptions);
+}
+
+export function timestampToTimeString(timestamp: number) {
+  return new Date(timestamp).toLocaleTimeString('pl-PL', {
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+}
@@ -0,0 +1,23 @@
+export class HttpClient {
+  constructor(private readonly baseURL: string) {}
+
+  async get<T>(url: string, params?: Record<string, any>): Promise<T> {
+    const absoluteURL = new URL(this.baseURL + '/' + url);
+
+    if (params) {
+      Object.keys(params).forEach((key) => {
+        if (params[key] === undefined) return;
+
+        absoluteURL.searchParams.append(key, params[key]);
+      });
+    }
+
+    const data = await fetch(absoluteURL);
+
+    if (!data.ok) {
+      throw new Error(`Cannot fetch ${absoluteURL}: ${data.statusText}`);
+    }
+
+    return data.json();
+  }
+}
@@ -9,9 +9,43 @@ const i18n = createI18n({
  warnHtmlMessage: false,
  fallbackLocale: 'pl',

+  pluralizationRules: {
+    en: {
+      ordinal: (ctx: { named: (arg0: string) => number }) => {
+        const number = ctx.named('count');
+
+        const suffixes: Record<number, string> = {
+          1: 'st',
+          2: 'nd',
+          3: 'rd'
+        };
+        const suffix = suffixes[number % 10] || 'th';
+
+        return `${number}${suffix}`;
+      }
+    }
+  },
+
  messages: {
-    en: enLang,
-    pl: plLang
+    en: {
+      ...enLang,
+      ordinal: (ctx: { named: (arg0: string) => number }) => {
+        const number = ctx.named('count');
+
+        const suffixes: Record<number, string> = {
+          1: 'st',
+          2: 'nd',
+          3: 'rd'
+        };
+        const suffix = suffixes[number % 10] || 'th';
+
+        return `${number}${suffix}`;
+      }
+    },
+    pl: {
+      ...plLang,
+      ordinal: '{count}.'
+    }
  },
  enableLegacy: false
 });
@@ -23,15 +23,6 @@
    "bottom-text": "Enjoy!\n~Spythere",
    "button-confirm": "Start using the app!"
  },
-  "migrate-info": {
-    "tooltip-content": "Information about migration of\nStacjownik site!",
-    "header-text": "Attention!",
-    "paragraph-1-html": "Due to the growing interest in Stacjownik and other applications I have made, <b>as of January 1, 2026, Stacjownik will be <u>permanently moved</u> to a new dedicated domain:</b>",
-    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
-    "paragraph-3-text": "This website will no longer receive future updates and after the New Year it will only redirect to the address above.",
-    "paragraph-4-italic-text": "\"Why are you messing this up? It's been fine for so long!\"",
-    "paragraph-4-html": "<i>\"Why are you messing this up? It's been fine for so long!\"</i> <br /> The change is mainly caused by the growing website interest and exceeding the free limit plan of the current Google hosting, which forces additional fees for each use of the service above a certain threshold (or otherwise blocks access to it). By moving the site to a dedicated domain (which has already been purchased and is maintained with the financial help of <span class=\"text--donator\">Supporters</span>), I will get rid of unnecessary expenses for a large corporation that can shut down my application at any given time."
-  },
  "donations": {
    "button-title": "TOSS A COIN",
    "header": "Toss a coin to Stacjownik!",
@@ -51,7 +42,8 @@
    "action-paypal": "DONATE WITH PAYPAL",
    "action-buycoffee": "BUY ME A COFFEE!",
    "dispatcher-message": "Dispatcher supporting the Stacjownik project!",
-    "driver-message": "Driver supporting the Stacjownik project!"
+    "driver-message": "Driver supporting the Stacjownik project!",
+    "creator-message": "Creator of the Stacjownik project"
  },
  "warnings": {
    "TWR": "Train with high risk cargo",
@@ -65,7 +57,7 @@
    "refresh": "REFRESH"
  },
  "update": {
-    "title": "Stacjownik update!",
+    "title": "Stacjownik has been updated!",
    "confirm": "ROGER THAT!",
    "no-data": "No data about the latest app update has been found",
    "info-1": "This changelog will be available to see once again after clicking the version number in the footer",
@@ -87,10 +79,8 @@
    "tooltip-scenery-offline": "Scenery is offline",
    "pojazdownik-link-content": "POJAZDOWNIK",
    "language-tooltip-content": "JĘZYK / LANGUAGE",
-    "gnr-link-content": "TRAIN ORDERS <br> GENERATOR"
-  },
-  "footer": {
-    "discord": "Stacjownik Discord server"
+    "gnr-link-content": "TRAIN ORDERS <br> GENERATOR",
+    "discord-link-content": "STACJOWNIK <br> DISCORD SERVER"
  },
  "categories": {
    "EI": "domestic express",
@@ -197,6 +187,7 @@
    "search-train": "Train no. / #",
    "select-driver": "Choose a driver...",
    "search-driver": "Driver name",
+    "search-duty-id": "Duty ID",
    "search-dispatcher": "Dispatcher name",
    "search-station": "Scenery name / #",
    "search-author": "Timetable author name",
@@ -209,6 +200,7 @@
    "search-date-from": "Date (UTC+2 / CEST)",
    "search-date-to": "Date (UTC+2 / CEST)",
    "select-categoryCode": "Train category",
+    "search-headUnit": "Traction unit (e.g. EP09, ET22-401)",
    "sort-mass": "mass",
    "sort-speed": "speed",
    "sort-length": "length",
@@ -259,7 +251,9 @@
      "blockades": "BLOCK SIGNALLING",
      "status": "ONLINE STATUS",
      "timetables": "ACTIVE TIMETABLES",
-      "spawns": "OPEN SPAWNS"
+      "spawns": "OPEN SPAWNS",
+      "externalRoutes": "EXTERNAL ROUTES",
+      "internalRoutes": "INTERNAL ROUTES"
    },
    "changed-filters-count": "Changed filters:",
    "no-changed-filters": "No changed filters",
@@ -303,19 +297,27 @@
    "withoutActiveTimetables": "NO ACTIVE",
    "junction": "JUNCTIONS",
    "nonJunction": "OTHER",
+
+    "oneWay": "OTHER SINGLE TRACK",
+    "oneWayCatenary": "CATENARY SINGLE TRACK",
+    "twoWayCatenary": "CATENARY DOUBLE TRACK",
+    "twoWay": "OTHER DOUBLE TRACK",
+    "oneWayCatenaryInt": "CATENARY SINGLE TRACK",
+    "oneWayInt": "OTHER SINGLE TRACK",
+    "twoWayCatenaryInt": "CATENARY DOUBLE TRACK",
+    "twoWayInt": "OTHER DOUBLE TRACK",
+
    "sliders": {
-      "minLevel": "MIN. REQUIRED DISPATCHER LEVEL",
-      "maxLevel": "MAX. REQUIRED DISPATCHER LEVEL",
-      "minVmax": "MIN. SCENERY ROUTE SPEED",
-      "maxVmax": "MAX. SCENERY ROUTE SPEED",
-      "minOneWayCatenary": "MIN. CATENARY SINGLE TRACK ROUTES",
-      "minOneWay": "MIN. OTHER SINGLE TRACK ROUTES",
-      "minTwoWayCatenary": "MIN. CATENARY DOUBLE TRACK ROUTES",
-      "minTwoWay": "MIN. OTHER DOUBLE TRACK ROUTES",
-      "minOneWayCatenaryInt": "MIN. INTERNAL CATENARY SINGLE TRACK ROUTES",
-      "minOneWayInt": "MIN. INTERNAL OTHER SINGLE TRACK ROUTES",
-      "minTwoWayCatenaryInt": "MIN. INTERNAL CATENARY DOUBLE TRACK ROUTES",
-      "minTwoWayInt": "MIN. INTERNAL OTHER DOUBLE TRACK ROUTES"
+      "vMax": "ROUTE SPEED",
+      "level": "REQUIRED DISPATCHER LEVEL",
+      "routeOneWay": "SINGLE TRACK ROUTES (OTHER)",
+      "routeOneWayCatenary": "SINGLE TRACK ROUTES (CATENARY)",
+      "routeTwoWayCatenary": "DOUBLE TRACK ROUTES (CATENARY)",
+      "routeTwoWay": "DOUBLE TRACK ROUTES (OTHER)",
+      "routeOneWayInternalCatenary": "INTERNAL SINGLE TRACK ROUTES (CATENARY)",
+      "routeOneWayInternal": "INTERNAL SINGLE TRACK ROUTES (OTHER)",
+      "routeTwoWayInternalCatenary": "INTERNAL DOUBLE TRACK ROUTES (CATENARY)",
+      "routeTwoWayInternal": "INTERNAL DOUBLE TRACK ROUTES (OTHER)"
    },
    "sceneries-placeholder": "Search for scenery",
    "line-numbers-placeholder": "Line numbers (separated by commas)",
@@ -326,7 +328,6 @@
    "now": "NOW",
    "hour": "h",
    "no-limit": "NO LIMIT",
-    "include-selected": "INCLUDE SELECTED",
    "save": "REMEMBER FILTERS",
    "reset": "RESET FILTERS",
    "close": "CLOSE FILTERS"
@@ -337,6 +338,7 @@
      "min-lvl": "Scenery\nlevel",
      "status": "Status",
      "dispatcher": "Dispatcher",
+      "dispatcher-lang": "Language",
      "dispatcher-lvl": "Dispatcher\nlevel",
      "routes-single": "1-track\nroutes",
      "routes-double": "2-track\nroutes",
@@ -427,7 +429,7 @@
    "last-seen-ago": "since {minutes} minutes",
    "scenery-offline": "Offline ride",
    "timeout": "An error occured while trying to refresh SWDR timetable data!",
-    "driver-journal-link": "DRIVER JOURNAL",
+    "driver-profile-link": "PLAYER'S PROFILE",
    "driver-srjp-link": "SRJP",
    "driver-return-link": "RETURN",
    "driver-not-found-header": "Train not found! :/",
@@ -437,15 +439,25 @@
    "driver-not-found-others": "Player {driver} is online as:",
    "driver-not-found-return": "RETURN TO THE MAIN SITE",
    "stock-copy": "COPY THE STOCK",
-    "number-propositions": "PROPOSE NUMBER",
+    "number-propositions": "NUMBER & WARNINGS SUGGESTIONS",
    "stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard!",
    "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/",
-    "number-propositions-header": "Generate number examples for selected category:",
+    "number-propositions-header": "Generate number examples for a train category:",
    "number-propositions-third-number": "Third digit:",
    "number-propositions-last-nums": "{count} last digits from the range of:",
    "number-propositions-title": "Propositions:",
    "number-propositions-empty": "No propositions available for the chosen category! :/"
  },
+  "cargo-warnings": {
+    "title": "Additional cargo warnings:",
+    "pn-innofreight": "PN: Innofreight C45: exceeded gauge",
+    "twr-un1965": "TWR: UN1965 (LPG)",
+    "tn-un1965": "TN: unclean tanks after UN1965",
+    "tn-un1202": "TN: UN1202 (diesel fuel)",
+    "tn-un1202-empty": "TN: unclean tanks after UN1202",
+    "pn-military": "PN: military transport",
+    "pn-edk80": "PN: EDK80 railway crane"
+  },
  "train-stats": {
    "stats-button": "STATISTICS",
    "title": "ONLINE TRAINS STATS",
@@ -558,7 +570,7 @@
    "no-users": "NO ACTIVE PLAYERS",
    "no-spawns": "NO OPEN SPAWNS",
    "no-scenery": "Oops! This scenery doesn't exist!",
-    "return-btn": "BACK TO THE LAST SITE",
+    "return-btn": "BACK TO SCENERIES",
    "history-btn": "View the dispatcher history",
    "info-btn": "Return to the scenery view",
    "authors-title": "Scenery author | Scenery authors",
@@ -568,10 +580,14 @@
    "additional-tools-title": "Additional tools",
    "one-way-routes": "Single track routes",
    "two-way-routes": "Double track routes",
+    "routes-hidden": "Hidden internal routes",
    "no-data": "No available data about this scenery",
    "option-active-timetables": "Active timetables",
    "option-timetables-history": "Timetables history PL1",
    "option-dispatchers-history": "Dispatchers history PL1",
+    "option-top-list": "Scenery records",
+    "btn-show-timetable-thumbnails": "Show rolling stock thumbnails",
+    "btn-hide-timetable-thumbnails": "Hide rolling stock thumbnails",
    "timetable-includesScenery": "ALL TIMETABLES",
    "timetable-via": "PASSES THROUGH",
    "timetable-issuedFrom": "BEGINS HERE",
@@ -582,14 +598,30 @@
    "dispatcher-rate": "Rate:",
    "dispatcher-status-changes": "Status changes:",
    "req-level": "all dispatcher levels | dispatcher level {lvl} required | dispatcher level {lvl} required",
-    "history-list-empty": "No recorded scenery history!",
-    "forum-topic": "Official {name} forum topic",
+    "history-list-empty": "No saved scenery history!",
+    "forum-topic": "Scenery's forum topic",
    "gnr-link": "Train orders generator",
    "pragotron-link": "Timetable pallet board",
    "tablice-link": "Timetable summary board <br> (by Thundo)",
    "bottom-info": "Show full history in the Journal tab",
    "btn-show-internal-routes": "Show internal routes",
-    "btn-hide-internal-routes": "Hide internal routes"
+    "btn-hide-internal-routes": "Hide internal routes",
+    "top-list": {
+      "header": "RECORDS ON THE SCENERY (PL1)",
+      "mode-dutyCount": "DUTIES",
+      "mode-dispatcherRating": "RATING",
+      "mode-dutyDuration": "DUTY DURATION",
+      "scope-name": "GENERAL",
+      "scope-hash": "CURRENT HASH",
+
+      "place": "place",
+      "dispatcher-rating": "Rating: {n}",
+      "duty-count": "No duties | 1 duty | Duties: {n}",
+      "duration": "Duration:",
+
+      "no-data-general": "No best scores for this scenery on the PL1 server!",
+      "no-data-current-hash": "No best scores for the current scenery hash on the PL1 server!"
+    }
  },
  "availability": {
    "title": "Availability",
@@ -618,9 +650,54 @@
    "desc-end": "The train terminates here",
    "desc-terminated": "The train has been terminated"
  },
-  "history": {
-    "title": "TIMETABLE JOURNAL",
-    "search-train": "Train no.",
-    "search-driver": "Driver name"
+  "profile": {
+    "journal-button": "PLAYER'S PROFILE",
+    "no-player-found": "Player not found! :/",
+    "return-to-main": "Return to the main site",
+
+    "filters": {
+      "Timetable": "TIMETABLES",
+      "Dispatcher": "DISPATCHER DUTIES",
+      "IssuedTimetable": "ISSUED TIMETABLES"
+    },
+
+    "stats": {
+      "timetables-journal": "TIMETABLE JOURNAL",
+      "dispatchers-journal": "DISPATCHER JOURNAL",
+      "forum-profile": "FORUM PROFILE",
+
+      "driver": "DRIVER",
+      "dispatcher": "DISPATCHER",
+
+      "header-driver": "DRIVER'S STATS",
+      "fulfilled-timetables": "fulfilled timetables",
+      "route-distance": "confirmed timetables distance",
+      "confirmed-stops": "confirmed stations in timetables",
+      "longest-timetable": "longest timetable",
+      "avg-timetable-length": "average distance of all timetables",
+      "no-timetable-stats": "This player does not have any registered timetables in Stacjownik!",
+
+      "header-dispatcher": "DISPATCHER'S STATS",
+      "duties-count": "duties as dispatcher",
+      "longest-duty": "longest duty",
+      "created-timetables-count": "issued timetables as dispatcher",
+      "longest-created-timetable": "longest issued timetable",
+      "created-timetables-length-sum": "distance sum of issued timetables",
+      "no-dispatcher-stats": "No registered dispatcher duties in Stacjownik!"
+    },
+
+    "recent-stats": {
+      "header": "ACTIVITY STATISTICS (30 LAST DAYS)",
+      "timetables": "TIMETABLES",
+      "distance": "MADE KILOMETERS",
+      "duties": "DISPATCHER DUTIES",
+      "created-timetables": "ISSUED TIMETABLES"
+    },
+
+    "list": {
+      "for": "for",
+      "online-since": "online since",
+      "no-recent-history": "No recent activity in the simulator :("
+    }
  }
 }
@@ -23,14 +23,6 @@
    "bottom-text": "Miłego korzystania\n~Spythere",
    "button-confirm": "Zacznij korzystać z aplikacji!"
  },
-  "migrate-info": {
-    "tooltip-content": "Informacja o migracji\nstrony Stacjownika!",
-    "header-text": "Uwaga!",
-    "paragraph-1-html": "Ze względu na coraz większe zainteresowanie Stacjownikiem oraz innymi aplikacjami mojego autorstwa <b>z dniem 1 stycznia 2026r. Stacjownik zostaje <u>permamentnie przeniesiony</u> na nową dedykowaną domenę:</b>",
-    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
-    "paragraph-3-text": "Obecna strona nie będzie otrzymywać już przyszłych aktualizacji, a po Nowym Roku będzie jedynie przenosić na powyższy adres.",
-    "paragraph-4-html": "<i>\"Po co psujesz? Przecież było dobrze tyle czasu!\"</i> <br /> Zmiana podyktowana jest głównie wzrostem zainteresowania stroną i przekraczaniem darmowego limitu obecnego hostingu Google'a, który wymusza płatność za każde użycie serwisu ponad określoną wartość (lub w przeciwnym wypadku blokuje do niego dostęp). Przenosząc stronę na dedykowaną domenę (która jest już wykupiona i utrzymywana dzięki pomocy <span class=\"text--donator\">Wspierających</span>), pozbędę się niepotrzebnego wydatku dla wielkiej korporacji, która w każdej chwili może mi wyłączyć aplikację."
-  },
  "donations": {
    "button-title": "GROSZA DAJ",
    "header": "Grosza daj Stacjownikowi!",
@@ -50,7 +42,8 @@
    "action-paypal": "PRZELEJ PAYPALEM",
    "action-buycoffee": "POSTAW KAWĘ!",
    "dispatcher-message": "Dyżurny wspierający projekt Stacjownika!",
-    "driver-message": "Maszynista wspierający projekt Stacjownika!"
+    "driver-message": "Maszynista wspierający projekt Stacjownika!",
+    "creator-message": "Twórca projektu Stacjownik"
  },
  "warnings": {
    "TWR": "Pociąg z towarami niebezpiecznymi wysokiego ryzyka",
@@ -64,7 +57,7 @@
    "refresh": "ODŚWIEŻ"
  },
  "update": {
-    "title": "Aktualizacja Stacjownika!",
+    "title": "Stacjownik został zaktualizowany!",
    "confirm": "PRZYJĄŁEM!",
    "no-data": "Nie znaleziono informacji o ostatnich zmianach w aplikacji",
    "info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
@@ -83,10 +76,8 @@
    "tooltip-scenery-offline": "Sceneria offline",
    "pojazdownik-link-content": "POJAZDOWNIK",
    "language-tooltip-content": "JĘZYK / LANGUAGE",
-    "gnr-link-content": "GENERATOR <br> ROZKAZÓW PISEMNYCH"
-  },
-  "footer": {
-    "discord": "Serwer Discord Stacjownika"
+    "gnr-link-content": "GENERATOR <br> ROZKAZÓW PISEMNYCH",
+    "discord-link-content": "SERWER DISCORD <br> STACJOWNIKA"
  },
  "categories": {
    "EI": "ekspres krajowy",
@@ -193,6 +184,7 @@
    "search-train": "Nr pociągu / #",
    "search-driver": "Nick maszynisty",
    "select-driver": "Wybierz maszynistę...",
+    "search-duty-id": "ID służby",
    "search-dispatcher": "Nick dyżurnego",
    "search-station": "Nazwa scenerii / #",
    "search-author": "Nick autora rozkładu jazdy",
@@ -205,6 +197,7 @@
    "search-date-from": "Data (UTC+2 / CEST)",
    "search-date-to": "Data (UTC+2 / CEST)",
    "select-categoryCode": "Kategoria pociągu",
+    "search-headUnit": "Pojazd trakcyjny (np. EP09, ET22-137)",
    "sort-routeDistance": "kilometraż",
    "sort-allStopsCount": "stacje",
    "sort-beginDate": "data",
@@ -256,7 +249,9 @@
      "blockades": "BLOKADY LINIOWE",
      "status": "STATUS ONLINE",
      "timetables": "AKTYWNE ROZKŁADY JAZDY",
-      "spawns": "OTWARTE SPAWNY"
+      "spawns": "OTWARTE SPAWNY",
+      "externalRoutes": "SZLAKI ZEWNĘTRZNE",
+      "internalRoutes": "SZLAKI WEWNĘTRZNE"
    },
    "changed-filters-count": "Zmienione filtry:",
    "no-changed-filters": "Brak zmienionych filtrów",
@@ -300,19 +295,27 @@
    "withoutActiveTimetables": "BEZ AKTYWNYCH",
    "junction": "WĘZŁOWE",
    "nonJunction": "INNE",
+
+    "oneWay": "JEDNOTOROWE NIEZELEKTRYFIKOWANE",
+    "oneWayCatenary": "JEDNOTOROWE ZELEKTRYFIKOWANE",
+    "twoWayCatenary": "DWUTOROWE ZELEKTRYFIKOWANE",
+    "twoWay": "DWUTOROWE NIEZELEKTRYFIKOWANE",
+    "oneWayCatenaryInt": "JEDNOTOROWE ZELEKTRYFIKOWANE",
+    "oneWayInt": "JEDNOTOROWE NIEZELEKTRYFIKOWANE",
+    "twoWayCatenaryInt": "DWUTOROWE ZELEKTRYFIKOWANE",
+    "twoWayInt": "DWUTOROWE NIEZELEKTRYFIKOWANE",
+
    "sliders": {
-      "minLevel": "MIN. WYMAGANY POZIOM DYŻURNEGO",
-      "maxLevel": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
-      "minVmax": "MIN. PRĘDKOŚĆ SZLAKOWA",
-      "maxVmax": "MAKS. PRĘDKOŚĆ SZLAKOWA",
-      "minOneWayCatenary": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
-      "minOneWay": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
-      "minTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
-      "minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)",
-      "minOneWayCatenaryInt": "SZLAKI JEDNOTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
-      "minOneWayInt": "SZLAKI JEDNOTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)",
-      "minTwoWayCatenaryInt": "SZLAKI DWUTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
-      "minTwoWayInt": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)"
+      "vMax": "PRĘDKOŚĆ SZLAKOWA",
+      "level": "WYMAGANY POZIOM DYŻURNEGO",
+      "routeOneWay": "SZLAKI 1-TOROWE NIEZELEKTR.",
+      "routeOneWayCatenary": "SZLAKI 1-TOROWE ZELEKTR.",
+      "routeTwoWayCatenary": "SZLAKI 2-TOROWE ZELEKTR.",
+      "routeTwoWay": "SZLAKI 2-TOROWE NIEZELEKTR.",
+      "routeOneWayInternalCatenary": "SZLAKI WEWN. 1-TOROWE ZELEKTR.",
+      "routeOneWayInternal": "SZLAKI WEWN. 1-TOROWE NIEZELEKTR.",
+      "routeTwoWayInternalCatenary": "SZLAKI WEWN. 2-TOROWE ZELEKTR.",
+      "routeTwoWayInternal": "SZLAKI WEWN. 2-TOROWE NIEZELEKTR."
    },
    "sceneries-placeholder": "Wyszukaj scenerię",
    "line-numbers-placeholder": "Numery linii (oddzielone przecinkami)",
@@ -323,7 +326,6 @@
    "now": "TERAZ",
    "hour": " godz.",
    "no-limit": "BEZ LIMITU",
-    "include-selected": "POKAŻ ZAZNACZONE",
    "save": "ZAPAMIĘTAJ FILTRY",
    "reset": "RESETUJ FILTRY",
    "close": "ZAMKNIJ FILTRY"
@@ -334,6 +336,7 @@
      "min-lvl": "Poziom\nscenerii",
      "status": "Status",
      "dispatcher": "Dyżurny",
+      "dispatcher-lang": "Język",
      "dispatcher-lvl": "Poziom\ndyżurnego",
      "routes-single": "Szlaki\n1-torowe",
      "routes-double": "Szlaki\n2-torowe",
@@ -413,7 +416,7 @@
    "last-seen-ago": "od {minutes} minut",
    "scenery-offline": "Przejazd offline",
    "timeout": "Wystąpił problem z aktualizacją rozkładów jazdy z SWDR",
-    "driver-journal-link": "DZIENNIK MASZYNISTY",
+    "driver-profile-link": "PROFIL GRACZA",
    "driver-srjp-link": "SRJP",
    "driver-return-link": "POWRÓT",
    "driver-not-found-header": "Nie znaleziono pociągu! :/",
@@ -423,15 +426,25 @@
    "driver-not-found-others": "Gracz {driver} jest online jako:",
    "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ",
    "stock-copy": "SKOPIUJ SKŁAD",
-    "number-propositions": "ZAPROPONUJ NUMER",
+    "number-propositions": "PROPOZYCJE NUMERÓW I UWAG",
    "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka!",
    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/",
-    "number-propositions-header": "Wygeneruj propozycje numerów dla kategorii pociągu:",
+    "number-propositions-header": "Wygeneruj propozycje numerów dla pociągu kategorii:",
    "number-propositions-third-number": "Trzecia cyfra:",
    "number-propositions-last-nums": "{count} ostatnie cyfry z przedziału:",
    "number-propositions-title": "Propozycje:",
    "number-propositions-empty": "Brak propozycji dla wybranej kategorii! :/"
  },
+  "cargo-warnings": {
+    "title": "Dodatkowe uwagi przewozowe:",
+    "pn-innofreight": "PN: Innofreight C45: przekroczona skrajnia",
+    "twr-un1965": "TWR: UN1965 (LPG)",
+    "tn-un1965": "TN: brudne cysterny po UN1965",
+    "tn-un1202": "TN: UN1202 (olej napędowy)",
+    "tn-un1202-empty": "TN: brudne cysterny po UN1202",
+    "pn-military": "PN: transport wojskowy",
+    "pn-edk80": "PN: żuraw kolejowy EDK80"
+  },
  "train-stats": {
    "stats-button": "STATYSTYKI",
    "title": "STATYSTYKI AKTYWNYCH POCIĄGÓW",
@@ -543,7 +556,7 @@
    "no-users": "BRAK AKTYWNYCH GRACZY",
    "no-spawns": "BRAK OTWARTYCH SPAWNÓW",
    "no-scenery": "Ups! Ta sceneria nie istnieje!",
-    "return-btn": "POWRÓT DO POPRZEDNIEJ STRONY",
+    "return-btn": "POWRÓT DO SCENERII",
    "history-btn": "Przejdź do widoku historii dyżurnych ruchu",
    "info-btn": "Wróć do widoku scenerii",
    "authors-title": "Autor scenerii | Autorzy scenerii",
@@ -553,10 +566,14 @@
    "additional-tools-title": "Dodatkowe narzędzia",
    "one-way-routes": "Szlaki jednotorowe",
    "two-way-routes": "Szlaki dwutorowe",
+    "routes-hidden": "Ukryto szlaki wewnętrzne",
    "no-data": "Brak informacji o tej scenerii",
    "option-active-timetables": "Aktywne rozkłady jazdy",
    "option-timetables-history": "Historia rozkładów PL1",
    "option-dispatchers-history": "Historia dyżurów PL1",
+    "option-top-list": "Rekordy scenerii",
+    "btn-show-timetable-thumbnails": "Pokazuj podglądy składów",
+    "btn-hide-timetable-thumbnails": "Ukrywaj podglądy składów",
    "timetable-includesScenery": "WSZYSTKIE RJ",
    "timetable-via": "PRZEJEŻDŻA",
    "timetable-issuedFrom": "ROZPOCZYNA BIEG",
@@ -568,13 +585,29 @@
    "dispatcher-status-changes": "Zmiany statusów:",
    "req-level": "ogólnodostępna | minimum {lvl} poziom dyżurnego | minimum {lvl} poziom dyżurnego",
    "history-list-empty": "Brak historii dla tej scenerii!",
-    "forum-topic": "Oficjalny wątek scenerii {name}",
+    "forum-topic": "Wątek scenerii",
    "gnr-link": "Generator rozkazów pisemnych",
    "pragotron-link": "Paletowa tablica informacyjna",
    "tablice-link": "Tablica informacyjna zbiorcza <br> (autorstwa Thundo)",
    "bottom-info": "Pokaż pełną historię w zakładce Dziennika",
    "btn-show-internal-routes": "Pokazuj szlaki wewnętrzne",
-    "btn-hide-internal-routes": "Ukrywaj szlaki wewnętrzne"
+    "btn-hide-internal-routes": "Ukrywaj szlaki wewnętrzne",
+    "top-list": {
+      "header": "REKORDY NA SCENERII (PL1)",
+      "mode-dutyCount": "DYŻURY",
+      "mode-dispatcherRating": "OCENA",
+      "mode-dutyDuration": "CZAS DYŻURU",
+      "scope-name": "OGÓLNIE",
+      "scope-hash": "OBECNY HASH",
+
+      "place": "miejsce",
+      "dispatcher-rating": "Ocena: {n}",
+      "duty-count": "Brak dyżurów | 1 dyżur | Dyżury: {n}",
+      "duration": "Czas:",
+
+      "no-data-general": "Brak zapisanych rekordów scenerii na serwerze PL1!",
+      "no-data-current-hash": "Brak zapisanych rekordów scenerii z obecnym hashem na serwerze PL1!"
+    }
  },
  "availability": {
    "title": "Dostępność",
@@ -603,7 +636,54 @@
    "desc-end": "Pociąg kończy bieg",
    "desc-terminated": "Pociąg zakończył bieg"
  },
-  "history": {
-    "title": "DZIENNIK ROZKŁADÓW JAZDY"
+  "profile": {
+    "journal-button": "PROFIL GRACZA",
+    "no-player-found": "Nie znaleziono gracza! :/",
+    "return-to-main": "Powrót do strony głównej",
+
+    "filters": {
+      "Timetable": "ROZKŁADY JAZDY",
+      "Dispatcher": "SŁUŻBY DYŻURNEGO",
+      "IssuedTimetable": "WYSTAWIONE RJ"
+    },
+
+    "stats": {
+      "timetables-journal": "DZIENNIK RJ",
+      "dispatchers-journal": "DZIENNIK DR",
+      "forum-profile": "PROFIL FORUM",
+
+      "driver": "MASZYNISTA",
+      "dispatcher": "DYŻURNY RUCHU",
+
+      "header-driver": "STATYSTYKI MASZYNISTY",
+      "fulfilled-timetables": "wypełnione rozkłady jazdy",
+      "route-distance": "zatwierdzony kilometraż w RJ",
+      "confirmed-stops": "potwierdzonych stacji w RJ",
+      "longest-timetable": "najdłuższy rozkład jazdy",
+      "avg-timetable-length": "średnia długość wszystkich rozkładów",
+      "no-timetable-stats": "Ten użytkownik nie posiada statystyk maszynisty zarejestrowanych przez Stacjownik!",
+
+      "header-dispatcher": "STATYSTYKI DYŻURNEGO RUCHU",
+      "duties-count": "służby jako dyżurny ruchu",
+      "longest-duty": "najdłuższa służba",
+      "created-timetables-count": "wystawione RJ jako dyżurny ruchu",
+      "longest-created-timetable": "najdłuższy wystawiony RJ",
+      "created-timetables-length-sum": "suma długości wystawionych RJ",
+      "no-dispatcher-stats": "Ten użytkownik nie posiada statystyk dyżurnego zarejestrowanych przez Stacjownik!"
+    },
+
+    "recent-stats": {
+      "header": "STATYSTYKI AKTYWNOŚCI (30 DNI)",
+      "timetables": "ROZKŁADÓW JAZDY",
+      "distance": "POKONANYCH KILOMETRÓW",
+      "duties": "SŁUŻB DYŻURNEGO",
+      "created-timetables": "WYSTAWIONYCH ROZKŁADÓW"
+    },
+
+    "list": {
+      "for": "dla",
+      "online-since": "online od",
+      "no-recent-history": "Brak ostatniej aktywności w symulatorze :("
+    }
  }
 }
@@ -1,5 +1,24 @@
 import StorageManager from './storageManager';

+export type SliderGroup =
+  | 'vMax'
+  | 'level'
+  | 'routeOneWay'
+  | 'routeOneWayCatenary'
+  | 'routeOneWayInternal'
+  | 'routeOneWayInternalCatenary'
+  | 'routeTwoWay'
+  | 'routeTwoWayCatenary'
+  | 'routeTwoWayInternal'
+  | 'routeTwoWayInternalCatenary';
+
+export interface SliderOptions {
+  id: string;
+  minRange: number;
+  maxRange: number;
+  step: number;
+}
+
 export const sections = [
  'status',
  'timetables',
@@ -10,7 +29,9 @@ export const sections = [
  'control',
  'blockades',
  'signals',
-  'addons'
+  'addons',
+  'externalRoutes',
+  'internalRoutes'
 ] as const;

 export const initFilters = {
@@ -38,9 +59,6 @@ export const initFilters = {
  mixed: false,
  SBL: false,
  PBL: false,
-  'include-selected': false,
-  'no-1track': false,
-  'no-2track': false,
  free: true,
  occupied: false,
  nonPublic: false,
@@ -60,34 +78,111 @@ export const initFilters = {
  onlineFromHours: 0,
  minLevel: 0,
  maxLevel: 20,
+  oneWay: false,
+  oneWayCatenary: false,
+  twoWay: false,
+  twoWayCatenary: false,
+  oneWayCatenaryInt: false,
+  oneWayInt: false,
+  twoWayInt: false,
+  twoWayCatenaryInt: false,
  minOneWay: 0,
  minOneWayCatenary: 0,
-  minOneWayInt: 0,
  minOneWayCatenaryInt: 0,
+  minOneWayInt: 0,
  minTwoWay: 0,
  minTwoWayCatenary: 0,
  minTwoWayInt: 0,
  minTwoWayCatenaryInt: 0,
+  maxOneWay: 10,
+  maxOneWayCatenary: 10,
+  maxOneWayInt: 20,
+  maxOneWayCatenaryInt: 20,
+  maxTwoWay: 10,
+  maxTwoWayCatenary: 10,
+  maxTwoWayInt: 20,
+  maxTwoWayCatenaryInt: 20,
  authors: '',
  projects: '',
  lines: ''
 };

-export const sliderStates = [
-  { id: 'maxVmax', minRange: 0, maxRange: 200, step: 10 },
-  { id: 'minVmax', minRange: 0, maxRange: 200, step: 10 },
-  { id: 'minLevel', minRange: 0, maxRange: 20, step: 1 },
-  { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 },
-  { id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minOneWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 }
+export const sliderGroups: SliderGroup[] = [
+  'vMax',
+  'level',
+  'routeOneWayCatenary',
+  'routeOneWay',
+  'routeTwoWayCatenary',
+  'routeTwoWay',
+  'routeOneWayInternalCatenary',
+  'routeOneWayInternal',
+  'routeTwoWayInternalCatenary',
+  'routeTwoWayInternal'
 ];

+export const sliderGroupsOptions: Record<SliderGroup, SliderOptions[]> = {
+  vMax: [
+    { id: 'minVmax', minRange: 0, maxRange: 200, step: 20 },
+    { id: 'maxVmax', minRange: 0, maxRange: 200, step: 20 }
+  ],
+  level: [
+    { id: 'minLevel', minRange: 0, maxRange: 20, step: 1 },
+    { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 }
+  ],
+  routeOneWay: [
+    { id: 'minOneWay', minRange: 0, maxRange: 10, step: 1 },
+    { id: 'maxOneWay', minRange: 0, maxRange: 10, step: 1 }
+  ],
+  routeOneWayCatenary: [
+    { id: 'minOneWayCatenary', minRange: 0, maxRange: 10, step: 1 },
+    { id: 'maxOneWayCatenary', minRange: 0, maxRange: 10, step: 1 }
+  ],
+  routeOneWayInternal: [
+    { id: 'minOneWayInt', minRange: 0, maxRange: 20, step: 1 },
+    { id: 'maxOneWayInt', minRange: 0, maxRange: 20, step: 1 }
+  ],
+  routeOneWayInternalCatenary: [
+    {
+      id: 'minOneWayCatenaryInt',
+      minRange: 0,
+      maxRange: 20,
+      step: 1
+    },
+    {
+      id: 'maxOneWayCatenaryInt',
+      minRange: 0,
+      maxRange: 20,
+      step: 1
+    }
+  ],
+  routeTwoWay: [
+    { id: 'minTwoWay', minRange: 0, maxRange: 10, step: 1 },
+    { id: 'maxTwoWay', minRange: 0, maxRange: 10, step: 1 }
+  ],
+  routeTwoWayCatenary: [
+    { id: 'minTwoWayCatenary', minRange: 0, maxRange: 10, step: 1 },
+    { id: 'maxTwoWayCatenary', minRange: 0, maxRange: 10, step: 1 }
+  ],
+  routeTwoWayInternal: [
+    { id: 'minTwoWayInt', minRange: 0, maxRange: 20, step: 1 },
+    { id: 'maxTwoWayInt', minRange: 0, maxRange: 20, step: 1 }
+  ],
+  routeTwoWayInternalCatenary: [
+    {
+      id: 'minTwoWayCatenaryInt',
+      minRange: 0,
+      maxRange: 20,
+      step: 1
+    },
+    {
+      id: 'maxTwoWayCatenaryInt',
+      minRange: 0,
+      maxRange: 20,
+      step: 1
+    }
+  ]
+};
+
 export type StationFilter = keyof typeof initFilters;
 export type StationFilterSection = (typeof sections)[number];

@@ -112,7 +207,9 @@ export const filtersSections: Record<StationFilterSection, StationFilter[]> = {
    'manual'
  ],
  blockades: ['SBL', 'PBL'],
-  signals: ['modern', 'semaphores', 'mixed', 'historical']
+  signals: ['modern', 'semaphores', 'mixed', 'historical'],
+  externalRoutes: ['oneWayCatenary', 'oneWay', 'twoWayCatenary', 'twoWay'],
+  internalRoutes: ['oneWayCatenaryInt', 'oneWayInt', 'twoWayCatenaryInt', 'twoWayInt']
 };

 export function setupFilters(currentFilters: Record<string, any>) {
@@ -135,7 +232,8 @@ export function getChangedFilters(currentFilters: Record<string, any>): string[]
  return (
    Object.keys(currentFilters).filter(
      (filterKey) =>
-        currentFilters[filterKey] !== initFilters[filterKey as keyof typeof initFilters]
+        currentFilters[filterKey].toString() !==
+        initFilters[filterKey as keyof typeof initFilters].toString()
    ) ?? []
  );
 }
@@ -61,6 +61,11 @@ const routes: Array<RouteRecordRaw> = [
      region: route.query.region
    })
  },
+  {
+    path: '/profile',
+    name: 'PlayerProfileView',
+    component: () => import('../views/PlayerProfileView.vue')
+  },
  {
    path: '/:catchAll(.*)',
    redirect: '/'
@@ -70,12 +75,12 @@ const routes: Array<RouteRecordRaw> = [
 const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (
-      (to.name == 'SceneryView' || to.name == 'DriverView') &&
+      (to.name == 'SceneryView' || to.name == 'DriverView' || to.name == 'PlayerProfileView') &&
      from.name !== to.name &&
      from.query['view'] === undefined &&
      !savedPosition
    )
-      return { el: `.app_main`, behavior: 'instant', top: -13 };
+      return { el: `.app_main`, behavior: 'smooth', top: 0 };

    if (savedPosition) return savedPosition;
  },
@@ -2,14 +2,29 @@ import { defineStore } from 'pinia';
 import { API } from '../typings/api';
 import { Status } from '../typings/common';
 import { StationJSONData } from './typings';
-import axios, { AxiosInstance } from 'axios';
+import { HttpClient } from '../http';
+
+let baseURL = 'https://stacjownik.spythere.eu';
+
+switch (import.meta.env.VITE_API_MODE) {
+  case 'development':
+    baseURL = 'http://localhost:3001';
+    break;
+  case 'mocking':
+    baseURL = 'http://localhost:3123';
+    break;
+  default:
+    break;
+}

 export const useApiStore = defineStore('apiStore', {
  state: () => ({
    dataStatuses: {
+      allData: Status.Data.Loading,
      connection: Status.Data.Loading,
      sceneries: Status.Data.Loading,
-      vehicles: Status.Data.Loading
+      vehicles: Status.Data.Loading,
+      dailyStatsData: Status.Data.Loading
    },

    activeData: undefined as API.ActiveData.Response | undefined,
@@ -18,33 +33,18 @@ export const useApiStore = defineStore('apiStore', {
    donatorsData: [] as API.Donators.Response,
    sceneryData: [] as StationJSONData[],

+    dailyStatsData: null as API.DailyStats.Response | null,
+
    nextUpdateTime: 0,
    nextDataCheckTime: 0,

-    client: undefined as AxiosInstance | undefined,
+    client: new HttpClient(baseURL),

    activeDataScheduler: undefined as number | undefined
  }),

  actions: {
    async setupAPIData() {
-      let baseURL = 'https://stacjownik.spythere.eu';
-
-      switch (import.meta.env.VITE_API_MODE) {
-        case 'development':
-          baseURL = 'http://localhost:3001';
-          break;
-        case 'mocking':
-          baseURL = 'http://localhost:3123';
-          break;
-        default:
-          break;
-      }
-
-      this.client = axios.create({
-        baseURL
-      });
-
      this.connectToAPI();
    },

@@ -52,32 +52,35 @@ export const useApiStore = defineStore('apiStore', {
      window.requestAnimationFrame(this.updateTick);
    },

-    updateTick(t: number) {
+    async updateTick(t: number) {
      // Static data refresh
      if (t >= this.nextDataCheckTime) {
-        this.fetchDonatorsData();
-        this.fetchVehiclesInfo();
-        this.fetchStationsGeneralInfo();
+        await Promise.all([
+          this.fetchStationsGeneralInfo(),
+          this.fetchVehiclesInfo(),
+          this.fetchDonatorsData()
+        ]);

        this.nextDataCheckTime = t + 3600000;
      }

      // Active data fefresh
      if (t >= this.nextUpdateTime) {
-        this.fetchActiveData();
-        this.nextUpdateTime = t + 20000;
+        await this.fetchActiveData();
+        this.nextUpdateTime = t + 31000;
      }

      window.requestAnimationFrame(this.updateTick);
    },

    async fetchActiveData() {
+      if (this.dataStatuses.connection == Status.Data.Offline) return;
      if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;

      try {
-        const response = await this.client!.get<API.ActiveData.Response>('api/getActiveData');
+        const response = await this.client.get<API.ActiveData.Response>('api/getActiveData');

-        this.activeData = response.data;
+        this.activeData = response;
        this.dataStatuses.connection = Status.Data.Loaded;
      } catch (error) {
        this.dataStatuses.connection = Status.Data.Error;
@@ -87,9 +90,9 @@ export const useApiStore = defineStore('apiStore', {

    async fetchDonatorsData() {
      try {
-        const response = await this.client!.get<API.Donators.Response>('api/getDonators');
+        const response = await this.client.get<API.Donators.Response>('api/getDonators');

-        this.donatorsData = response.data;
+        this.donatorsData = response;
      } catch (error) {
        console.error('Ups! Wystąpił błąd podczas pobierania informacji o donatorach:', error);
      }
@@ -97,9 +100,7 @@ export const useApiStore = defineStore('apiStore', {

    async fetchStationsGeneralInfo() {
      try {
-        const sceneryData: StationJSONData[] = (
-          await this.client!.get<StationJSONData[]>(`api/getSceneries`)
-        ).data;
+        const sceneryData = await this.client.get<StationJSONData[]>(`api/getSceneries`);

        this.dataStatuses.sceneries = Status.Data.Loaded;
        this.sceneryData = sceneryData;
@@ -111,14 +112,27 @@ export const useApiStore = defineStore('apiStore', {

    async fetchVehiclesInfo() {
      try {
-        const response = await this.client!.get<API.VehiclesData.Response>('api/getVehiclesData');
+        const response = await this.client.get<API.VehiclesData.Response>('api/getVehiclesData');

-        this.vehiclesData = response.data;
-        this.dataStatuses.vehicles = response.data ? Status.Data.Loaded : Status.Data.Warning;
+        this.vehiclesData = response;
+        this.dataStatuses.vehicles = response ? Status.Data.Loaded : Status.Data.Warning;
      } catch (error) {
        this.dataStatuses.vehicles = Status.Data.Error;
        console.error('Ups! Wystąpił błąd podczas pobierania informacji o pojazdach:', error);
      }
+    },
+
+    async fetchDailyStats() {
+      try {
+        const res = await this.client.get<API.DailyStats.Response>('api/getDailyStats');
+
+        this.dailyStatsData = res;
+
+        this.dataStatuses.dailyStatsData = Status.Data.Loaded;
+      } catch (error) {
+        console.error('Ups! Wystąpił błąd podczas pobierania statystyk rozkładów jazdy...');
+        this.dataStatuses.dailyStatsData = Status.Data.Error;
+      }
    }
  }
 });
@@ -26,20 +26,10 @@ export const useMainStore = defineStore('mainStore', {
      isOffline: false,
      appUpdate: null,

-      dispatcherStatsName: '',
-      dispatcherStatsStatus: Status.Data.Initialized,
-
-      driverStatsName: '',
-      driverStatsData: undefined,
-      driverStatsStatus: Status.Data.Initialized,
-
      chosenModalTrainId: undefined,

      modalLastClickedTarget: null,
-      currentLocale: 'pl',
-
-      isMigrateInfoCardOpen: false,
-      pinnedStationNames: []
+      currentLocale: 'pl'
    }) as MainStoreState,

  actions: {
@@ -87,6 +77,7 @@ export const useMainStore = defineStore('mainStore', {
            online: Boolean(train.online),
            driverId: train.driverId,
            driverName: train.driverName,
+            driverLanguageId: train.driverLanguageId,
            currentStationName: train.currentStationName,
            currentStationHash: train.currentStationHash,
            connectedTrack: train.connectedTrack,
@@ -258,6 +249,7 @@ export const useMainStore = defineStore('mainStore', {
            dispatcherIsSupporter: false,
            dispatcherStatus: Status.ActiveDispatcher.FREE,
            dispatcherTimestamp: -1,
+            dispatcherLanguageId: -1,

            isOnline: false,

@@ -304,6 +296,7 @@ export const useMainStore = defineStore('mainStore', {
          dispatcherIsSupporter: scenery.dispatcherIsSupporter,
          dispatcherStatus: scenery.dispatcherStatus,
          dispatcherTimestamp: dispatcherTimestamp,
+          dispatcherLanguageId: scenery.dispatcherLanguageId,

          isOnline: scenery.isOnline == 1,

@@ -398,11 +391,13 @@ export const useMainStore = defineStore('mainStore', {

            const tracksKey = route.routeTracks == 2 ? 'double' : 'single';
            const isElectric = route.isElectric;
+
            const routesKey: keyof StationRoutes = `${tracksKey}${
              !isElectric ? 'Other' : 'Electrified'
-            }Names`;
+            }${route.isInternal ? 'Internal' : ''}Names`;
+            
+            acc[routesKey].push(route.routeName);

-            if (!route.isInternal) acc[routesKey].push(route.routeName);
            if (route.isRouteSBL) acc['sblNames'].push(route.routeName);

            acc.minRouteSpeed =
@@ -417,14 +412,21 @@ export const useMainStore = defineStore('mainStore', {
            return acc;
          },
          {
+            all: [],
            single: [],
+            double: [],
+
            singleElectrifiedNames: [],
            singleOtherNames: [],
-            double: [],
            doubleElectrifiedNames: [],
            doubleOtherNames: [],
+
+            singleElectrifiedInternalNames: [],
+            singleOtherInternalNames: [],
+            doubleElectrifiedInternalNames: [],
+            doubleOtherInternalNames: [],
+
            sblNames: [],
-            all: [],
            minRouteSpeed: 0,
            maxRouteSpeed: 0
          } as StationRoutes
@@ -9,7 +9,8 @@ export const tooltipKeys = [
  'SpawnsTooltip',
  'UsersTooltip',
  'HtmlTooltip',
-  'TrainInfoTooltip'
+  'TrainInfoTooltip',
+  'CreatorTooltip'
 ] as const;

 export type TooltipType = (typeof tooltipKeys)[number];
@@ -5,15 +5,9 @@ export interface MainStoreState {
  region: { id: string; value: string; name: string };
  isOffline: boolean;
  appUpdate: { version: string; changelog: string; releaseURL: string } | null;
-  dispatcherStatsName: string;
-  dispatcherStatsData?: API.DispatcherStats.Response;
-  driverStatsName: string;
-  driverStatsData?: API.DriverStats.Response;
-  driverStatsStatus: Status.Data;
  chosenModalTrainId?: string;
  modalLastClickedTarget: EventTarget | null;
  currentLocale: string;
-  isMigrateInfoCardOpen: boolean;
 }

 export interface StationJSONData {
@@ -1,4 +1,4 @@
-$animDuration: 95ms;
+$animDuration: 120ms;
 $animType: ease-in-out;

 // List animation
@@ -85,7 +85,6 @@
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
  font-weight: bold;
-  user-select: none;

  &.twr {
    background-color: var(--clr-twr);
@@ -135,3 +134,20 @@
    color: black;
  }
 }
+
+.timetable-status-badge {
+  padding: 0.05em 0.35em;
+  color: black;
+
+  &.terminated {
+    background-color: salmon;
+  }
+
+  &.fulfilled {
+    background-color: lightgreen;
+  }
+
+  &.active {
+    background-color: lightblue;
+  }
+}
@@ -85,7 +85,7 @@ h1.option-title {
  }
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  h1 {
    text-align: center;

@@ -26,7 +26,7 @@
 .dropdown_wrapper {
  position: absolute;
  left: 0;
-  top: calc(100% + 0.5em);
+  top: 0;

  background-color: var(--clr-bg3);
  box-shadow: 0 0 5px 1px var(--clr-primary);
@@ -34,16 +34,8 @@
  width: 100%;
  max-width: 550px;

-  max-height: 750px;
  overflow: auto;

  padding: 1em;
  z-index: 100;
 }
-
-@include responsive.smallScreen {
-  .dropdown_wrapper {
-    font-size: 1.1em;
-    max-width: 100%;
-  }
-}
@@ -9,6 +9,9 @@
  --clr-bg2: #1b1b1b;
  --clr-bg3: #1d1d1d;
  --clr-view-bg: #1a1a1a;
+  --clr-bg-light: #2b2b2b;
+
+  --clr-tile: #181818;

  --clr-accent: #1085b3;
  --clr-accent2: #ff3d5d;
@@ -23,6 +26,8 @@

  --clr-donator: #f7a4ff;

+  --clr-success: springgreen;
+
  --no-scroll-padding: 17px;
  --max-container-width: 1700px;

@@ -30,9 +35,8 @@
 }

 ::-webkit-scrollbar {
-  width: var(--no-scroll-padding);
-  height: var(--no-scroll-padding);
-  background-color: transparent;
+  // width: var(--no-scroll-padding);
+  // height: var(--no-scroll-padding);

  &-track {
    background-color: #333;
@@ -49,6 +53,7 @@

 body {
  background: var(--clr-bg);
+  color-scheme: dark;

  margin: 0;
  padding: 0;
@@ -212,6 +217,19 @@ ul {
    text-shadow: #f050ff 0 0 10px;
  }

+  &--creator {
+    color: var(--clr-primary);
+    color: transparent;
+
+    background: var(--clr-primary);
+    background: linear-gradient(90deg, gold 30%, #ffffff 70%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    text-shadow: gold 0 0 10px;
+  }
+
  &--discord {
    color: var(--clr-donator);
    color: transparent;
@@ -331,19 +349,6 @@ a.a-button {
 }

@include responsive.smallScreen {
-  ::-webkit-scrollbar {
-    width: 0.5em;
-    height: 0.5em;
-
-    &-track {
-      background-color: #222;
-    }
-
-    &-thumb {
-      background-color: #777;
-    }
-  }
-
  [data-tooltip]:hover::after,
  [data-tooltip]:focus::after {
    transform: translate(-50%, 2em);
@@ -11,8 +11,8 @@

 .list_wrapper {
  overflow-y: auto;
-  height: calc(100vh - 12.5em);
-  min-height: 700px;
+  height: calc(100vh - 21em);
+  min-height: 500px;
  margin-top: 0.5em;
  position: relative;

@@ -24,8 +24,8 @@
  width: 100%;

  margin: 0 auto;
-
  padding: 1em 0;
+  position: relative;
 }

 .journal_refreshed-date {
@@ -57,7 +57,6 @@
  justify-content: space-between;
  align-items: center;
  gap: 0.5em;
-  position: relative;
 }

 .btn--load-data {
@@ -68,7 +67,7 @@
  font-size: 1.2em;
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .journal_top-bar {
    justify-content: center;
    flex-wrap: wrap;
@@ -15,7 +15,6 @@
    gap: 0.25em;

    min-width: 200px;
-    margin-right: 0.25em;
  }

  &-input {
@@ -61,4 +60,4 @@
  top: 50%;
  transform: translateY(-50%);
  padding-right: 0.5em;
-}
+}
@@ -1,3 +1,4 @@
+import { Journal } from '../components/JournalView/typings';
 import { Status, Vehicle, VehicleGroup } from './common';

 export enum APIDataStatus {
@@ -27,17 +28,29 @@ export namespace API {
    }
  }

+  export namespace PlayerActivity {
+    export interface Data {
+      dispatcher: API.ActiveSceneries.Data[];
+      driver: API.ActiveTrains.Data | null;
+    }
+
+    export type Response = Data;
+  }
+
  export namespace DispatcherHistory {
    export type Response = Data[];

    export interface Data {
      id: number;
+      createdAt: string;
+      updatedAt: string;
      currentDuration: number;
      dispatcherId: number;
      dispatcherName: string;
      dispatcherLevel: number | null;
      dispatcherRate: number;
      dispatcherIsSupporter: boolean;
+      dispatcherLanguageId: number | null;
      dispatcherStatus?: number;
      isOnline: boolean;
      lastOnlineTimestamp: number;
@@ -51,61 +64,64 @@ export namespace API {
  }

  export namespace DispatcherStats {
-    export interface DistanceStat {
-      routeDistance: number | null;
+    export interface Services {
+      count: number;
+      durationMax: number;
+      durationAvg: number;
    }

-    export interface DurationStat {
-      currentDuration: number | null;
+    export interface IssuedTimetables {
+      count: number;
+      distanceMax: number;
+      distanceAvg: number;
+      distanceSum: number;
    }

-    export interface Count {
-      _all: number;
+    export interface Data {
+      dispatcherId: number | null;
+      dispatcherName: string | null;
+      dispatcherLevel: number | null;
+      services: Services | null;
+      issuedTimetables: IssuedTimetables | null;
    }

-    export interface Response {
-      services: {
-        count: number;
-        durationMax: number;
-        durationAvg: number;
-      } | null;
-
-      issuedTimetables: {
-        count: number;
-        distanceMax: number;
-        distanceAvg: number;
-        distanceSum: number;
-      } | null;
-    }
+    export type Response = Data;
  }

  export namespace DriverStats {
-    export interface SumStats {
-      routeDistance: number;
-      confirmedStopsCount: number;
-      allStopsCount: number;
-      currentDistance: number;
+    export interface Data {
+      driverName: string | null;
+      driverId: number | null;
+      driverLevel: number | null;
+      countAll: number;
+      countTerminated: number;
+      countFulfilled: number;
+      routeDistanceTotal: number | null;
+      routeDistanceAvg: number | null;
+      routeDistanceMax: number | null;
+      currentDistanceTotal: number | null;
+      confirmedStopsTotal: number | null;
+      allStopsTotal: number | null;
    }

-    export interface CountStats {
-      fulfilled: number;
-      terminated: number;
-      _all: number;
-    }
+    export type Response = Data;
+  }

-    export interface MaxStats {
-      routeDistance: number;
+  export namespace PlayerInfo {
+    export interface Data {
+      currentActivity: PlayerActivity.Data;
+      dispatcherStats: DispatcherStats.Data;
+      dispatcherStatsLastMonth: DispatcherStats.Data;
+      driverStats: DriverStats.Data;
+      driverStatsLastMonth: DriverStats.Data;
    }
+  }

-    export interface AvdStats {
-      routeDistance: number;
-    }
-
-    export interface Response {
-      _sum: SumStats;
-      _count: CountStats;
-      _max: MaxStats;
-      _avg: AvdStats;
+  export namespace PlayerJournal {
+    export interface Data {
+      timetables: TimetableHistory.DataShort[];
+      issuedTimetables: TimetableHistory.DataShort[];
+      duties: DispatcherHistory.Data[];
    }
  }

@@ -114,6 +130,7 @@ export namespace API {
      dispatcherId: number;
      dispatcherName: string;
      dispatcherIsSupporter: boolean;
+      dispatcherLanguageId: number;
      stationName: string;
      stationHash: string;
      region: string;
@@ -152,6 +169,7 @@ export namespace API {
      driverId: number;
      driverIsSupporter: boolean;
      driverLevel?: number;
+      driverLanguageId: number;

      currentStationName: string;
      currentStationHash?: string;
@@ -208,24 +226,60 @@ export namespace API {
  }

  export namespace TimetableHistory {
-    export interface Data {
+    export interface QueryParams {
+      driverName?: string;
+      trainNo?: string;
+      timetableId?: string;
+      categoryCode?: string;
+
+      authorName?: string;
+
+      dateFrom?: string;
+      dateTo?: string;
+
+      issuedFrom?: string;
+      terminatingAt?: string;
+      via?: string;
+      includesScenery?: string;
+
+      countFrom?: number;
+      countLimit?: number;
+
+      fulfilled?: number;
+      terminated?: number;
+
+      twr?: number;
+      skr?: number;
+      pn?: number;
+      tn?: number;
+
+      headUnitName?: string;
+      headUnitType?: string;
+
+      returnType?: 'all' | 'short' | 'detailed';
+      sortBy?: Journal.TimetableSorter['id'];
+    }
+
+    export interface Data extends DataShort, DataDetailsOnly {
+      updatedAt: string;
+    }
+
+    export interface DataShort {
      id: number;
      createdAt: string;
-      updatedAt: string;
-
-      timetableId: number;
      trainNo: number;
      trainCategoryCode: string;
+      timetableId: number;

      driverId: number;
      driverName: string;
      driverLevel: number | null;
      driverIsSupporter: boolean;
+      driverLanguageId: number | null;

      route: string;
      twr: number;
      skr: number;
-      sceneriesString: string;
      currentLocation: string[];

      routeDistance: number;
@@ -236,7 +290,6 @@ export namespace API {

      beginDate: string;
      endDate: string;
-
      scheduledBeginDate: string;
      scheduledEndDate: string;

@@ -246,15 +299,25 @@ export namespace API {
      authorName?: string;
      authorId?: number;

+      currentSceneryName?: string;
+      currentSceneryHash?: string;
+      hasDangerousCargo: boolean;
+      hasExtraDeliveries: boolean;
+    }
+
+    export interface DataDetailsOnly {
+      id: number;
+      timetableId: number;
+
+      sceneriesString: string;
      stockString?: string;
      stockHistory: string[];

      stockMass?: number;
      stockLength?: number;
      maxSpeed?: number;
+      trainMaxSpeed?: number;

-      currentSceneryName?: string;
-      currentSceneryHash?: string;
      routeSceneries: string;
      checkpointArrivals: string[];
      checkpointDepartures: string[];
@@ -264,14 +327,20 @@ export namespace API {
      checkpointComments: string[];
      visitedSceneries: string[];
      sceneryNames: string[];
+
      path: string;
      warningNotes: string | null;
-      hasDangerousCargo: boolean;
-      hasExtraDeliveries: boolean;
-      trainMaxSpeed?: number;
+
+      authorId?: number;
+      authorName?: string;
+      driverId: number;
+      driverName: string;
+      driverLanguageId: number | null;
    }

    export type Response = Data[];
+    export type ResponseShort = DataShort[];
+    export type ResponseDetailsOnly = DataDetailsOnly[];
  }

  export namespace DailyStats {
@@ -423,6 +492,62 @@ export namespace GithubAPI {
  }
 }

+export namespace Td2API {
+  export namespace UsersInfoByName {
+    export interface UserStat {
+      variable: string;
+      value: number;
+      position: number;
+      server_total: number;
+      server_max: number;
+      server_min: number;
+      server_avg: number;
+    }
+
+    export interface Levels {
+      driver: number;
+      dispatcher: number;
+    }
+
+    export interface UserGroup {
+      id_group: number;
+      group_name: string;
+      description: string;
+      online_color: string;
+      min_posts: number;
+      max_messages: number;
+      stars: string;
+      group_type: number;
+      hidden: number;
+      id_parent: number;
+    }
+
+    export interface UserInfo {
+      id_member: number;
+      id_group: number;
+      additional_groups: string;
+      member_name: string;
+      karma_bad: number;
+      karma_good: number;
+      date_registered: number;
+      last_login: number;
+      avatar: number;
+      lngfile: string;
+      user_stats: UserStat[];
+      levels: Levels;
+      user_groups: UserGroup[];
+    }
+
+    export type Message = UserInfo[];
+
+    export interface Response {
+      success: boolean;
+      respCode: number;
+      message: Message;
+    }
+  }
+}
+
 export namespace Websocket {
  export interface Payload {
    activeSceneries: API.ActiveSceneries.Response;
@@ -60,6 +60,7 @@ export interface Train {
  distance: number;
  connectedTrack: string;
  driverId: number;
+  driverLanguageId: number;
  trainNo: number;
  driverName: string;
  driverLevel: number;
@@ -129,6 +130,12 @@ export interface StationRoutes {
  singleOtherNames: string[];
  doubleElectrifiedNames: string[];
  doubleOtherNames: string[];
+
+  singleElectrifiedInternalNames: string[];
+  singleOtherInternalNames: string[];
+  doubleElectrifiedInternalNames: string[];
+  doubleOtherInternalNames: string[];
+
  sblNames: string[];

  minRouteSpeed: number;
@@ -162,6 +169,7 @@ export interface ActiveScenery {
  dispatcherIsSupporter: boolean;
  dispatcherStatus: Status.ActiveDispatcher | number;
  dispatcherTimestamp: number | null;
+  dispatcherLanguageId: number;
  isOnline: boolean;
  stationTrains: Train[];
  scheduledTrains: CheckpointTrain[];
@@ -218,6 +226,7 @@ export interface CheckpointTrain {
 export type Vehicle = API.VehiclesData.VehicleObject;
 export type VehicleGroup = API.VehiclesData.VehicleGroupObject;

+// Train Tooltip Info
 export interface TooltipUserTrain {
  driverName: string;
  trainNo: number;
@@ -0,0 +1,5 @@
+export function getCountPercentage(partCount: number, allCount: number, fixedDigits: number) {
+  if (allCount == 0) return 0;
+
+  return ((partCount / allCount) * 100).toFixed(fixedDigits);
+}
@@ -0,0 +1,5 @@
+export const languageFlagNames = ['pl', 'en', 'de', 'cz', 'sk', 'ru', 'se', 'ua', 'it'];
+
+export function getLanguageNameById(languageId: number) {
+  return languageFlagNames[languageId] ?? 'pl';
+}
@@ -0,0 +1,19 @@
+export enum ServerRegion {
+  'eu' = 'PL1',
+  'cae' = 'PL2',
+  'usw' = 'DE',
+  'us' = 'CZE',
+  'ru' = 'ENG'
+}
+
+export const regions: Record<string, string> = {
+  eu: 'PL1',
+  cae: 'PL2',
+  usw: 'DE',
+  us: 'CZE',
+  ru: 'ENG'
+};
+
+export function getRegionNameById(id: string) {
+  return regions[id] ?? 'PL1';
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Spythere	d8d8a00fd9	chore(app): added the Creator badge	2026-05-02 15:40:05 +02:00
Spythere	6765c075a5	bump(version): v1.35.0	2026-04-29 13:43:07 +02:00
Spythere	eb0821046c	chore(DriverView): improved propositions locale texts	2026-04-28 14:34:04 +02:00
Spythere	676cb206c8	fix(TrainInfo): element layout and padding	2026-04-28 14:33:34 +02:00
Spythere	42bef618b4	fix(DriverView): action buttons layout	2026-04-28 14:32:48 +02:00
Spythere	0ea96700b3	fix(UpdateCard): adjusted deep style paddings	2026-04-28 14:06:15 +02:00
Spythere	642efec141	fix(stats): increased dropdown offset for small devices	2026-04-27 14:47:00 +02:00
Spythere	08ee303886	chore(sceneries): added preserving scroll state in the stations table after leaving the view	2026-04-27 13:57:32 +02:00
Spythere	c4decd1003	chore(scenery): make return button redirect to Sceneries tab	2026-04-27 13:56:29 +02:00
Spythere	21725d4019	chore(driver): updated cargo warnings in propositions	2026-04-27 13:51:58 +02:00
Spythere	9b917a7b3b	chore: added cargo warnings to driver propositions	2026-04-26 22:18:28 +02:00
Spythere	db720d11f5	refactor(driver): moved driver propositions card to separate component	2026-04-22 02:12:44 +02:00
Spythere	8f430f1f8d	fix(driver): es2022 features	2026-04-22 02:01:30 +02:00
Spythere	cda1516424	chore(locale): added custom messages rule for English ordinal numbers	2026-04-22 01:57:31 +02:00
Spythere	104a094fd8	chore(scenery): removed default bold text from top list action buttons	2026-04-22 01:42:11 +02:00
Spythere	19a6929e6f	chore(scenery): added info box about no available best scores in scenery top list	2026-04-22 01:41:28 +02:00
Spythere	0602c12914	fix(scenery): changed request's property currentLimit to countLimit	2026-04-19 01:06:07 +02:00
Spythere	9d7e70c7e2	chore(locales): improved top list translations	2026-04-19 01:05:01 +02:00
Spythere	88b02b20a5	chore(stock): added stock vehicle thumbnails size variable; changed scenery timetable stock previews to 45	2026-04-18 22:38:58 +02:00
Spythere	2b16213531	chore(scenery): added recognizing offline train rides as active in scenery's timetables	2026-04-17 21:16:10 +02:00
Spythere	69c604f1e7	fix(scenery): incorrect statement for detecting offline user on scenery	2026-04-17 20:42:36 +02:00
Spythere	5386820b24	chore(scenery): updated pragotron app link to a new domain	2026-04-17 20:38:40 +02:00
Spythere	c185a8a22e	chore: added settings.json to gitignore	2026-04-17 20:38:17 +02:00
Spythere	7af08f3cb8	refactor(sceneries): changed to new api call for top list; added duty duration mode option	2026-04-17 03:02:03 +02:00
Spythere	5a684ddc66	chore(locales): improved locales	2026-04-16 22:39:32 +02:00
Spythere	5b5c0ea5c2	hotfix(station): station stats text alignment for smalls creens	2026-04-16 22:38:07 +02:00
Spythere	119d79b071	chore(dropdown): improved dropdown relative elements and alignment	2026-04-16 22:37:04 +02:00
Spythere	91ab3ad8ab	feat(journal): fitlering journal timetables by head vehicle unit name or type	2026-04-16 22:25:33 +02:00
Spythere	af12a299b6	chore(scenery): added links to players' profiles in top lists	2026-04-16 22:02:16 +02:00
Spythere	221bba32d2	chore: improved option dropdowns responsiveness	2026-04-16 14:45:12 +02:00
Spythere	987819d42e	chore(locales): updated missing locales; added Polish pluralization rules	2026-04-16 02:55:42 +02:00
Spythere	125b43be4a	chore(scenery): added grid layout to scenery top list; expanded to 40 items	2026-04-16 02:49:38 +02:00
Spythere	cdc188c5b0	chore(scenery): top list styling	2026-04-16 00:54:16 +02:00
Spythere	d10283c183	chore(config): updated config files	2026-04-12 01:00:02 +02:00
Spythere	14dfa97cc5	bump(version): v1.34.0	2026-04-09 02:06:18 +02:00
Spythere	6f99de8ec3	chore(config): updated tsconfig	2026-04-09 02:05:52 +02:00
Spythere	b999e84b15	feat(scenery): added the scenery top records list mode	2026-04-09 02:05:32 +02:00
Spythere	e1f4a740ac	refactor(http): removed axios; changed all requests to native fetch	2026-04-01 15:00:57 +02:00
Spythere	ef105f680d	hotfix(config): changed caching strategy to StaleWhileRevalidate	2026-03-29 14:09:12 +02:00
Spythere	9337cb011c	chore(scenery): added information about hidden internal routes	2026-03-23 13:36:42 +01:00
Spythere	85aefd850b	fix(filters): extended route maximum values to 20 (internal) and 10 (external)	2026-03-23 13:19:14 +01:00
Spythere	c8c1a15191	chore(scenery): added scenery's forum link to general info	2026-03-22 15:16:09 +01:00
Spythere	89b6361a1c	chore: offline mode improvements; changed to CacheFirst strategy	2026-03-22 14:10:27 +01:00
Spythere	eae62a8064	refactor(scenery): improved components visibility on API data loading	2026-03-22 14:04:49 +01:00
Spythere	d643259102	chore(scenery): improved thumbnails toggle button appearance	2026-03-21 19:24:38 +01:00
Spythere	966b36e39f	chore: code cleanup from obsolote logs	2026-03-17 22:36:48 +01:00
Spythere	cbc812bdec	refactor(scenery): changed position of links and actions for active timetables to the bottom of the list	2026-03-17 22:36:28 +01:00
Spythere	c7d2128bd9	fix(options): dropdown responsiveness	2026-03-17 22:05:40 +01:00
Spythere	836d9d03d9	chore(locales): added missing locales	2026-03-17 21:33:38 +01:00
Spythere	e23c334791	bump(version): v1.33.0	2026-03-15 23:53:27 +01:00
Spythere	3d6267fa8e	Merge pull request #157 from Spythere/v1.32.1 v1.32.1	2026-03-15 23:50:14 +01:00
Spythere	f7499fe431	chore: added hiding rolling stock preview on hover	2026-03-15 23:18:36 +01:00
Spythere	dc0b0315e0	chore(scenery): added saving showing thumbnails state to local storage	2026-03-15 23:06:27 +01:00
Spythere	5e31948a5d	chore: added missing translations; improved route filters order	2026-03-15 00:51:32 +01:00
Spythere	4f42c0d878	refactor(scenery): moved thumbnails toggler to header	2026-03-14 22:32:50 +01:00
Spythere	7dda21e2a2	fix(filters): added minimum height for option sliders in statation filter card to even out spacings	2026-03-14 01:54:30 +01:00
Spythere	74df349a44	chore(stations): added station name padding	2026-03-14 01:51:35 +01:00
Spythere	c901b14715	chore(scenery): improved thumbnails checkbox design and elements' padding	2026-03-14 01:50:48 +01:00
Spythere	41dda1e592	fix(locales): return button text	2026-03-13 23:26:20 +01:00
Spythere	6f51f79c4c	chore: added parallel static data refresh	2026-03-13 23:24:10 +01:00
Spythere	a39acc1cc9	fix(scenery): incorrect link to tablice-td2	2026-03-13 19:18:03 +01:00
Spythere	f699be197b	fix(filters): detecting changed filters for numeric values	2026-03-13 19:17:00 +01:00
Spythere	45947cd491	chore(filters): filter card responsiveness; slider appearance and functionality	2026-03-13 19:14:18 +01:00
Spythere	1bf7596b80	chore(scenery): added checkbox for switching thumbnails display (wip)	2026-03-12 22:28:35 +01:00
Spythere	ffee0d980e	chore(scenery): adjusted card paddings	2026-03-12 22:20:06 +01:00
Spythere	1f48e8d80b	feat(scenery): added optional displaying active timetables' rolling stock thumbnails	2026-03-12 22:19:53 +01:00
Spythere	27b9e8253b	hotfix: refreshing stock list thumbnails loading on train change	2026-03-12 22:07:15 +01:00
Spythere	5d088a0fac	fix(api): update tick awaiting for all static data to refresh before requesting active data	2026-03-12 22:03:24 +01:00
Spythere	ffe26a8fd2	chore(filters): added station filtering by route types and maximum count	2026-03-12 21:59:53 +01:00
Spythere	1a39c9054b	chore(filters): added filtering stations by external and internal route groups; changed sliders to min & max range	2026-03-11 18:17:12 +01:00
Spythere	7073c0687c	chore(app): removed migration info card & obsolete data	2026-03-10 23:40:45 +01:00
Spythere	c1fa2a13e1	chore(url): updated old urls for other external apps	2026-03-10 23:37:30 +01:00
Spythere	1b8053faa3	chore: updated readme site URL	2026-03-10 23:36:03 +01:00
Spythere	a5d7bfd037	refactor: scenery view code organization in separate components with minor fixes	2026-03-10 23:35:00 +01:00
Spythere	9c87ff28b4	chore(app): improved update card appearance	2026-03-10 18:23:59 +01:00
Spythere	1faef31b12	bump(version): v1.32.1	2026-03-10 18:11:09 +01:00
Spythere	83070ca391	fix(fonts): preload absolute path	2026-02-27 00:31:02 +01:00
Spythere	67ce9c7365	fix(journal): journal filter options max height	2026-02-27 00:27:16 +01:00
Spythere	a5f9f8901b	chore(profile): redirecting to main site when player is not found	2026-02-26 14:26:31 +01:00
Spythere	0276e0754b	fix(profile): improper image loading when switching between users	2026-02-25 21:38:43 +01:00
Spythere	0d495ede2d	fix(profile): filtering online trains and dispatches	2026-02-25 21:16:44 +01:00
Spythere	48c0a32017	fix(profile): player avatar loading	2026-02-25 21:16:19 +01:00
Spythere	26f2ced266	chore(app): improved API refresh times at about 31-32s	2026-02-24 22:21:02 +01:00
Spythere	4f17b1a704	refactor(profile): moved fetching data to view root to ensure proper loading on activating	2026-02-24 22:13:52 +01:00
Spythere	50068a239c	bump(version): v1.32.0	2026-02-23 22:10:02 +01:00
Spythere	662748f705	Merge pull request #154 from Spythere/feature/user-profile Feature: Player Profile	2026-02-23 22:06:54 +01:00
Spythere	65c1ab809f	chore(views): adjusted viewport heights and scrolls	2026-02-23 22:03:49 +01:00
Spythere	e7c8ba62d7	fix(app): region dropdown z-index	2026-02-23 21:36:51 +01:00
Spythere	38a9f1987f	chore(profile): added activity region	2026-02-23 21:35:41 +01:00
Spythere	f90dfd3cc8	chore(css): enabled dark mode and restored default scrollbar design	2026-02-23 21:25:46 +01:00
Spythere	9b765c7fdd	chore(profile): added periodic player info & history updates	2026-02-20 02:13:52 +01:00
Spythere	0f7e3e8820	chore(profile): minor design fixes	2026-02-20 02:01:13 +01:00
Spythere	1735444176	refactor(profile): data loading indicators	2026-02-20 01:58:29 +01:00
Spythere	1d95b26e9c	chore(app): moved discord link from footer to stations view	2026-02-20 01:38:13 +01:00
Spythere	86fbaa2510	chore(profile): moved player avatar and its logic to separate component	2026-02-20 01:27:35 +01:00
Spythere	b7db3edd9b	chore(app): removed migration card rendering	2026-02-18 23:56:32 +01:00
Spythere	72fa9523e8	refactor(stats): moved fetching daily stats data to store	2026-02-18 02:51:33 +01:00
Spythere	7b07a43715	fix(profile): wrapping journal links	2026-02-18 02:32:28 +01:00
Spythere	448c6e387e	chore(profile): added information about no recent history	2026-02-18 02:31:47 +01:00
Spythere	527c929b53	chore(profile): added TD2 forum profile link button	2026-02-18 02:23:08 +01:00
Spythere	b622df19f6	chore(profile): added stacjownik donator indicator	2026-02-18 02:20:47 +01:00
Spythere	03e69b315c	chore(profile): design & layout adjustments	2026-02-18 02:14:30 +01:00
Spythere	f2c11bf2cf	chore(profile): date formatting from utils	2026-02-18 01:55:59 +01:00
Spythere	92c73b9ed9	chore(profile): added missing translations	2026-02-18 01:55:34 +01:00
Spythere	acc15619a9	chore(profile): improved responsiveness & design	2026-02-17 23:00:53 +01:00
Spythere	3705325a9a	chore(profile): added links to player journals; merged player activity into main info	2026-02-17 22:37:16 +01:00
Spythere	1655aa2c94	chore(profile): moved fetching history journal to separate component	2026-02-17 22:19:54 +01:00
Spythere	f38ad8fa81	chore(journal): added dispatcher filtering by duty id	2026-02-17 21:56:40 +01:00
Spythere	1a7801259f	chore(profile): added router links for history list	2026-02-17 17:06:14 +01:00
Spythere	abd1c8b684	fix(journal): timetable entries minor fixes	2026-02-17 16:47:06 +01:00
Spythere	7f315b549e	chore(journal): added synching detailed timetable data with basic	2026-02-17 02:17:32 +01:00
Spythere	329c85b858	refactor(journal): fetching heavy timetable details separately on demand	2026-02-16 02:16:22 +01:00
Spythere	dcef8cdac8	chore(profile): improved history list design	2026-02-15 17:50:52 +01:00
Spythere	298f8a5f23	chore(driver): changed button to navigate to player's profile	2026-02-15 17:22:12 +01:00
Spythere	51d952ffee	chore(profile): improved profile player stats header	2026-02-15 17:18:17 +01:00
Spythere	83b22e5978	chore(profile): player activity section design	2026-02-15 17:13:42 +01:00
Spythere	87ad7b8ede	chore(stations): disabled opening donation modal on clicking nickname	2026-02-15 16:28:58 +01:00
Spythere	440e11bdd9	fix(profile): i18n keys	2026-02-15 16:27:16 +01:00
Spythere	84ecd3c175	chore(profile): added i18n translation bindings & pl locale keys	2026-02-14 02:27:03 +01:00
Spythere	72b3aef045	refactor(profile): moved view sections and their logic to separate components	2026-02-14 00:53:45 +01:00
Spythere	36ae24fdaf	refactor(profile): moved view sections and their logic to separate components	2026-02-14 00:53:19 +01:00
Spythere	41e3d018e6	chore: profile	2026-02-13 00:52:02 +01:00
Spythere	d9faa486d2	chore(app): improved scrolling into view for main tabs	2026-02-12 03:32:01 +01:00
Spythere	89dc265e1b	hotfix(app): caching CSS files; reusing global styles in App.vue	2026-02-11 23:24:23 +01:00
Spythere	200e994ae6	chore(profile): change appearance of activity history entries	2026-02-10 00:28:57 +01:00
Spythere	150b7749ae	chore(profile): added level badges for player summary	2026-02-09 00:52:11 +01:00
Spythere	0f8932b53c	refactor(journal): removed seperate driver & dispatcher stats dropdowns; added button leading to player profile view	2026-02-08 22:00:15 +01:00
Spythere	1365140802	chore(profile): added loading status	2026-02-08 01:34:59 +01:00
Spythere	ce8bbe4c67	chore(profile): updated api objects; replaced mock data with api results	2026-02-07 20:54:03 +01:00
Spythere	1d49de1c6b	chore(profile): organized fetching data; added link to profile in scenery view	2026-02-07 01:18:28 +01:00
Spythere	b8574f9ea1	chore(profile): translation setup	2026-02-06 17:15:29 +01:00
Spythere	ecced14cca	chore(profile): generating menu buttons from object	2026-02-06 17:12:58 +01:00
Spythere	212a87126d	chore(profile): changed routing from params to query	2026-02-06 17:05:21 +01:00
Spythere	41e50b8207	chore(profile): view container responsiveness	2026-02-06 17:00:12 +01:00
Spythere	565b0dfd8c	chore(profile): journal history list design	2026-02-06 03:20:25 +01:00
Spythere	40a0b47984	chore(profile): added combined journal with timetables and dispatchers; added journal filters	2026-02-06 01:49:18 +01:00
Spythere	ccca1c8752	chore(profile): added grid layout & cleaned up styles	2026-02-06 01:16:32 +01:00
Spythere	cf51045343	chore(player profile): added typings for player info response object	2026-02-04 01:02:57 +01:00
Spythere	23a8b9e8d4	feature: player profile view	2026-02-02 03:12:40 +01:00
Spythere	b34f8229cc	bump(version): v1.31.1	2026-01-15 17:32:53 +01:00
Spythere	f1eee97d46	chore(stations): added sorting by dispatcher language id	2026-01-15 17:30:35 +01:00
Spythere	d93be0b9be	fix(stations): fixed displaying dispatcher flag for inactive sceneries	2026-01-15 17:27:11 +01:00
Spythere	5190eed7ee	fix(journal): restored bold font for journal dispatcher entry	2026-01-14 21:22:53 +01:00
Spythere	a6f284270e	chore(flags): adjusted flags styles	2026-01-14 21:21:09 +01:00
Spythere	08422caa96	chore(journal): added language flags to journal entries	2026-01-14 20:57:22 +01:00
Spythere	3a70d8f6a6	chore(index): changed some images from preloads to prefetches	2026-01-14 20:38:18 +01:00
Spythere	e3e5eb3460	refactor: added language flag component	2026-01-14 20:29:02 +01:00
Spythere	1819569234	feat: user communication flags	2026-01-14 00:14:35 +01:00