Merge pull request #158 from Spythere/development

v1.33.0
chore(scenery): added scenery's forum link to general info
2026-05-03 05:18:11 +00:00 · 2026-03-22 23:17:43 +01:00 · 2026-03-22 15:16:09 +01:00 · 2026-03-22 14:10:27 +01:00 · 2026-03-22 14:04:49 +01:00 · 2026-03-21 19:24:38 +01:00
116 changed files with 6311 additions and 11015 deletions
@@ -0,0 +1,23 @@
+name: Build & Deploy to VPS
+
+on:
+  push:
+    branches:
+      - main
+
+env:
+  PROJECT_NAME: stacjownik-td2
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:    
+      - uses: actions/checkout@v3
+      - name: Build the app
+        run: yarn && yarn build
+      - name: Setup SSH key for connection with the server
+        run: |
+            mkdir -p ~/.ssh
+            echo "${{ secrets.VPS_SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa && chmod 600 ~/.ssh/id_rsa
+      - name: Send new files
+        run: rsync -avP -e "ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa -p 2022" ./dist/ ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }}:/var/www/$PROJECT_NAME --delete
@@ -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)

@@ -15,8 +15,8 @@ app.get('/api/getSceneries', (_, res) => {
  res.sendFile(path.join(cwd(), 'endpoints', 'getSceneries.json'));
 });

-app.get('/api/getVehicles', (_, res) => {
-  res.sendFile(path.join(cwd(), 'endpoints', 'getVehicles.json'));
+app.get('/api/getVehiclesData', (_, res) => {
+  res.sendFile(path.join(cwd(), 'endpoints', 'getVehiclesData.json'));
 });

 app.get('/api/getDonators', (_, res) => {
@@ -20,26 +20,88 @@
    <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" />
-    <link rel="stylesheet" href="fa/css/regular.css" />
-    <link rel="stylesheet" href="fa/css/solid.css" />
+    <link rel="stylesheet" href="/fa/css/fontawesome.css" />
+    <link rel="stylesheet" href="/fa/css/brands.css" />
+    <link rel="stylesheet" href="/fa/css/regular.css" />
+    <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-Light.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Medium.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <link
+      rel="preload"
+      href="/fonts/Quicksand-SemiBold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+
+    <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-desc.svg" />
+    <link rel="preload" as="image" href="/images/icon-pojazdownik.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
      property="og:description"
      content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2"
    />
+
    <meta
      property="og:image"
      content="https://raw.githubusercontent.com/Spythere/api/main/thumbnails/stacjownik.jpg"
    />
+
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:site_name" content="Stacjownik" />
@@ -1,6 +1,6 @@
 {
  "name": "stacjownik",
-  "version": "1.30.2",
+  "version": "1.33.0",
  "private": true,
  "type": "module",
  "scripts": {
@@ -17,7 +17,7 @@
  },
  "dependencies": {
    "core-js": "^3.42.0",
-    "dotenv": "^16.5.0",
+    "dotenv": "^17.2.2",
    "pinia": "^3.0.2",
    "sass": "^1.87.0",
    "showdown": "^2.1.0",
@@ -26,17 +26,17 @@
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
-    "@types/node": "^22.15.15",
+    "@types/node": "^24.3.1",
    "@types/showdown": "^2.0.6",
    "@vite-pwa/assets-generator": "^1.0.0",
-    "@vitejs/plugin-vue": "^5.1.0",
-    "@vue/tsconfig": "^0.7.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": "^6.3.5",
+    "vite": "^7.1.4",
    "vite-plugin-pwa": "^1.0.0",
-    "vue-tsc": "^2.0.28"
+    "vue-tsc": "^3.0.6"
  },
  "browserslist": [
    "> 1%",
@@ -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-gb" viewBox="0 0 640 480">
+  <path fill="#012169" d="M0 0h640v480H0z"/>
+  <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0z"/>
+  <path fill="#C8102E" d="m424 281 216 159v40L369 281zm-184 20 6 35L54 480H0zM640 0v3L391 191l2-44L590 0zM0 0l239 176h-60L0 42z"/>
+  <path fill="#FFF" d="M241 0v480h160V0zM0 160v160h640V160z"/>
+  <path fill="#C8102E" d="M0 193v96h640v-96zM273 0v480h96V0z"/>
+</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,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-pl" viewBox="0 0 640 480">
+  <g fill-rule="evenodd">
+    <path fill="#fff" d="M640 480H0V0h640z"/>
+    <path fill="#dc143c" d="M640 480H0V240h640z"/>
+  </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>
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+  <path d="M12 9v4" />
+  <path d="M12 17h.01" />
+</svg>
@@ -0,0 +1,60 @@
+<svg width="79" height="127" viewBox="0 0 79 127" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-loading">
+<g id="Rectangle 37">
+<rect id="Rectangle 38" x="36.9999" y="79" width="6" height="16" fill="#FF0000"/>
+<rect id="Rectangle 40" x="36.9999" y="111" width="6" height="16" fill="#FF0000"/>
+<rect id="Rectangle 39" x="36.9999" y="95" width="6" height="16" fill="white"/>
+</g>
+<g id="Group 8">
+<path id="Vector 15" d="M59.5018 41.0003H23.0018C-1.49817 41.0003 -0.498171 79.5003 23.0018 79.5003H59.5018C83.0018 79.5003 84.0018 41.0003 59.5018 41.0003Z" fill="#3F3E3E"/>
+<g id="Group 51">
+<circle id="light-left" cx="22.9999" cy="60" r="9" fill="#FF1313" fill-opacity="1"/>
+
+<animate
+    attributeType="XML"
+    attributeName="opacity"
+    values="0.25;1;1;0.25;0.25"
+    dur="1s"
+    repeatCount="indefinite"
+/>
+</g>
+
+<g id="Group 51">
+<circle id="light-right" cx="57.9999" cy="60" r="9" fill="#FF1313" fill-opacity="1"/>
+
+<animate
+    attributeType="XML"
+    attributeName="opacity"
+    values="1;0.25;0.25;1;1"
+    dur="1s"
+    repeatCount="indefinite"
+/>
+</g>
+
+
+</g>
+<g id="Group 52">
+<rect id="Rectangle 36" x="37.9999" y="10" width="4" height="31" fill="#525252"/>
+<g id="Vector 23">
+<path id="Rectangle 28" d="M4.09756 32.3241L10.9579 29.2933L14.1908 36.611L7.33047 39.6418L3.42724 36.9932L4.09756 32.3241Z" fill="#FF0000"/>
+<path id="Rectangle 30" d="M10.9579 29.2933L20.105 25.2522L23.3379 32.5698L14.1908 36.611L12.5743 32.9521L10.9579 29.2933Z" fill="white"/>
+<path id="Rectangle 34" d="M20.105 25.2522L29.2521 21.211L32.485 28.5287L23.3379 32.5698L21.7214 28.911L20.105 25.2522Z" fill="#FF0000"/>
+<path id="Rectangle 35" d="M47.5463 13.1288L56.6934 9.08762L59.9263 16.4053L50.7792 20.4464L49.1627 16.7876L47.5463 13.1288Z" fill="#FF0000"/>
+<path id="Rectangle 31" d="M29.2521 21.211L38.3992 17.1699L41.6321 24.4876L32.485 28.5287L30.8685 24.8699L29.2521 21.211Z" fill="white"/>
+<path id="Rectangle 32" d="M38.3992 17.1699L47.5463 13.1288L50.7792 20.4464L41.6321 24.4876L40.0156 20.8287L38.3992 17.1699Z" fill="white"/>
+<path id="Rectangle 33" d="M56.6934 9.08762L65.8404 5.04649L69.0734 12.3642L59.9263 16.4053L58.3098 12.7465L56.6934 9.08762Z" fill="white"/>
+<path id="Rectangle 29" d="M73.1581 1.81359L65.8405 5.04649L69.0734 12.3642L76.391 9.13126L76.604 4.6642L73.1581 1.81359Z" fill="#FF0000"/>
+</g>
+<g id="Vector 24">
+<path id="Rectangle 28_2" d="M6.36567 3.47438L13.3598 6.18222L10.4714 13.6426L3.47731 10.9348L2.59012 6.30195L6.36567 3.47438Z" fill="#FF0000"/>
+<path id="Rectangle 30_2" d="M13.3597 6.18222L22.6852 9.79268L19.7969 17.2531L10.4714 13.6426L11.9156 9.91241L13.3597 6.18222Z" fill="white"/>
+<path id="Rectangle 34_2" d="M22.6853 9.79268L32.0108 13.4031L29.1224 20.8635L19.7969 17.2531L21.2411 13.5229L22.6853 9.79268Z" fill="#FF0000"/>
+<path id="Rectangle 35_2" d="M50.6617 20.6241L59.9872 24.2345L57.0989 31.6949L47.7734 28.0844L49.2176 24.3542L50.6617 20.6241Z" fill="#FF0000"/>
+<path id="Rectangle 31_2" d="M32.0107 13.4031L41.3362 17.0136L38.4479 24.474L29.1224 20.8635L30.5666 17.1333L32.0107 13.4031Z" fill="white"/>
+<path id="Rectangle 32_2" d="M41.3363 17.0136L50.6618 20.6241L47.7734 28.0844L38.4479 24.474L39.8921 20.7438L41.3363 17.0136Z" fill="white"/>
+<path id="Rectangle 33_2" d="M59.9872 24.2345L69.3127 27.845L66.4243 35.3054L57.0988 31.6949L58.543 27.9647L59.9872 24.2345Z" fill="white"/>
+<path id="Rectangle 29_2" d="M76.7731 30.7333L69.3127 27.845L66.4243 35.3054L73.8847 38.1937L77.194 35.1856L76.7731 30.7333Z" fill="#FF0000"/>
+</g>
+</g>
+</g>
+</svg>
@@ -1,4 +0,0 @@
-<svg width="39" height="23" viewBox="0 0 39 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="39" height="23" fill="#FF0F0F"/>
-<rect width="39" height="11.5" fill="white"/>
-</svg>
@@ -9,11 +9,11 @@

    <Tooltip />

-    <AppHeader :current-lang="store.currentLocale" @change-lang="changeLang" />
+    <AppHeader />

    <main class="app_main">
      <router-view v-slot="{ Component }">
-        <keep-alive exclude="SceneryView">
+        <keep-alive>
          <component :is="Component" :key="$route.name" />
        </keep-alive>
      </router-view>
@@ -71,7 +71,7 @@ export default defineComponent({
    isUpdateCardOpen: false,
    isWelcomeCardOpen: false,

-    isOnProductionHost: location.hostname == 'stacjownik-td2.web.app'
+    isOnProductionHost: /(stacjownik-td2)(\.web\.app|\.spythere\.eu)/.test(location.hostname)
  }),

  created() {
@@ -159,18 +159,11 @@ export default defineComponent({
      this.apiStore.connectToAPI();
    },

-    changeLang(lang: string) {
-      this.$i18n.locale = lang;
-      this.store.currentLocale = lang;
-
-      StorageManager.setStringValue('lang', lang);
-    },
-
    loadLang() {
      const storageLang = StorageManager.getStringValue('lang');

      if (storageLang) {
-        this.changeLang(storageLang);
+        this.store.changeLocale(storageLang);
        return;
      }

@@ -179,7 +172,7 @@ export default defineComponent({
      const naviLanguage = window.navigator.language.toString();

      if (!naviLanguage.startsWith('pl')) {
-        this.changeLang('en');
+        this.store.changeLocale('en');
        return;
      }
    },
@@ -194,6 +187,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>
@@ -1,18 +1,6 @@
 <template>
  <header class="app_header">
    <div class="header_container">
-      <div class="header_icons">
-        <span class="icons-top">
-          <img
-            src="/images/icon-pl.svg"
-            alt="icon-pl"
-            @click="changeLang('en')"
-            v-if="currentLang == 'pl'"
-          />
-          <img src="/images/icon-en.jpg" alt="icon-en" @click="changeLang('pl')" v-else />
-        </span>
-      </div>
-
      <div class="header_body">
        <StatusIndicator />

@@ -76,27 +64,12 @@ import RegionDropdown from '../Global/RegionDropdown.vue';
 export default defineComponent({
  components: { StatusIndicator, Clock, RegionDropdown },

-  emits: ['changeLang'],
-
-  props: {
-    currentLang: {
-      type: String,
-      required: true
-    }
-  },
-
  setup() {
    return {
      store: useMainStore()
    };
  },

-  methods: {
-    changeLang(lang: string) {
-      this.$emit('changeLang', lang);
-    }
-  },
-
  computed: {
    onlineTrainsCount() {
      return this.store.trainList.filter((train) => train.region == this.store.region.id).length;
@@ -111,7 +84,7 @@ export default defineComponent({
    isChristmas() {
      const date = new Date();

-      return date.getUTCMonth() == 11 && date.getUTCDate() >= 20 && date.getUTCDate() <= 31;
+      return date.getUTCMonth() == 11 && date.getUTCDate() >= 6 && date.getUTCDate() <= 31;
    }
  }
 });
@@ -141,7 +114,7 @@ export default defineComponent({

    border-radius: 0 0 1em 1em;

-    @include responsive.smallScreen{
+    @include responsive.smallScreen {
      position: relative;
      margin-top: 0.5em;
    }
@@ -180,20 +153,12 @@ export default defineComponent({

    padding: 0.5em;

-    @include responsive.smallScreen{
+    @include responsive.smallScreen {
      transform: translateX(85%);
    }
  }
 }

-// ICONS
-.icons-top {
-  img {
-    width: 2.5em;
-    cursor: pointer;
-  }
-}
-
 // COUNTER
 .info_counter {
  display: flex;
@@ -4,12 +4,12 @@
      <h1>{{ $t('welcome.title') }}</h1>

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

-        <button :data-active="$i18n.locale == 'en'" @click="changeLang('en')">
-          <img src="/images/icon-en.jpg" alt="" width="45" />
+        <button :data-active="$i18n.locale == 'en'" @click="store.changeLocale('en')">
+          <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>
@@ -114,12 +114,10 @@
 </template>

 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import Card from '../Global/Card.vue';
 import { useMainStore } from '../../store/mainStore';
-import StorageManager from '../../managers/storageManager';
+import FlagIcon from '../Global/FlagIcon.vue';

-const i18n = useI18n();
 const store = useMainStore();

 const emit = defineEmits(['toggleCard']);
@@ -130,13 +128,6 @@ const props = defineProps({
 function toggleCard(state: boolean) {
  emit('toggleCard', state);
 }
-
-function changeLang(localeName: string) {
-  i18n.locale.value = localeName;
-  store.currentLocale = localeName;
-
-  StorageManager.setStringValue('lang', localeName);
-}
 </script>

 <style lang="scss" scoped>
@@ -167,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,7 +1,7 @@
 <template>
  <Card :is-open="isUpdateCardOpen" @toggle-card="toggleCard(false)">
-    <div class="content">
-      <h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>
+    <div class="content" tabindex="0" ref="content">
+      <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>
@@ -13,7 +13,14 @@
      <p class="bottom-info">
        {{ $t('update.info-1') }}
        <br />
-        <span v-html="$t('update.info-2')"></span>
+
+        <i18n-t keypath="update.info-2">
+          <template v-slot:link>
+            <a href="https://github.com/Spythere/stacjownik/releases" target="_blank">{{
+              $t('update.info-2-link-text')
+            }}</a>
+          </template>
+        </i18n-t>
      </p>
    </div>
  </Card>
@@ -51,7 +58,7 @@ export default defineComponent({
  watch: {
    isUpdateCardOpen(val: boolean) {
      this.$nextTick(() => {
-        if (val) (this.$refs['confirm-btn'] as HTMLElement).focus();
+        if (val) (this.$refs['content'] as HTMLElement).focus();
      });
    }
  },
@@ -79,13 +86,13 @@ export default defineComponent({
 }

 ::v-deep(h2) {
-  padding: 0.25em 0;
+  padding: 0.5em 0;
  border-bottom: 1px solid #aaa;
 }

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

@@ -100,12 +107,25 @@ 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;
 }

 button {
-  margin: 0 auto;
+  margin: 0.5em auto;
  padding: 0.5em 0.75em;
  font-size: 1.1em;
 }
@@ -117,5 +137,6 @@ p.bottom-info {

 a {
  text-decoration: underline;
+  color: white;
 }
 </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>
@@ -63,7 +63,7 @@
      </div>
    </transition>

-    <StockList :trainStockList="chosenTrain.stockList" />
+    <StockList :trainStockList="chosenTrain.stockList" :key="chosenTrain.id" :showPreviews="true" />
    <TrainSchedule :train="chosenTrain" />
  </div>
 </template>
@@ -205,7 +205,7 @@ const availableCategories = computed(() => {
  for (const stockName of stockList) {
    const [vehicleName, ...cargoList] = stockName.split(':');

-    const vehicleData = apiStore.vehiclesData?.find((v) => v.name == vehicleName);
+    const vehicleData = apiStore.vehiclesData?.vehicles.find((v) => v.name == vehicleName);

    if (!vehicleData) continue;

@@ -1,23 +0,0 @@
-<template>
-  <button class="action-btn btn--filled">
-    <div class="button_content">
-      <slot></slot>
-    </div>
-  </button>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({});
-</script>
-
-<style lang="scss">
-@use '../../styles/responsive';
-
-.button_content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-</style>
@@ -81,13 +81,8 @@ export default defineComponent({

  background-color: #1a1a1a;
  box-shadow: 0 0 15px 10px #0e0e0e;
+  border-radius: 1em;

  overflow: auto;
 }
-
-@include responsive.smallScreen{
-  .card {
-    align-items: flex-start;
-  }
-}
 </style>
@@ -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,7 @@
          :vehicle-string="vehicleString"
          :images="images"
          :image-fallbacks="imagesFallbacks"
+          :show-previews="showPreviews"
        />
      </li>
    </ul>
@@ -23,7 +24,8 @@ 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 }
  },

  data() {
@@ -9,9 +9,10 @@
      <img
        v-for="(thumbnailImage, imageIndex) in images"
        :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
-        height="60"
+        height="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"
@@ -26,7 +27,8 @@ 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 }
 });

 const thumbRef = ref(null) as Ref<HTMLElement | null>;
@@ -56,16 +58,17 @@ function onImageLoad() {
  transition: opacity 100ms ease-in-out;

  &[data-load-status='loading'] {
-    min-height: 60px;
+    min-height: 70px;
    min-width: 200px;
  }
 }

 .stock-text {
+  max-width: 90%;
  text-align: center;
  color: #aaa;
-  font-size: 0.9em;
-  margin-bottom: 0.25em;
+  font-size: 0.85em;
+  margin: 0 auto;
  padding: 0.25em 0;
 }

@@ -73,8 +76,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,23 +1,22 @@
 <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)"
            data-tooltip-type="DonatorTooltip"
@@ -37,7 +36,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 +121,7 @@ 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';

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

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

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

+.dispatcher-language {
+  display: inline-block;
+  vertical-align: middle;
+}
+
 .entry-info {
  display: flex;
  justify-content: space-between;
@@ -185,6 +194,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 +216,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>
@@ -330,4 +330,16 @@ 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: 530px;
+}
+
+.options_content {
+  overflow: auto;
+}
 </style>
@@ -2,87 +2,70 @@
  <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';

-.dropdown_wrapper.dropdown-align-right {
+.dropdown_wrapper {
  left: auto;
  right: 0;
  max-width: 700px;
@@ -19,209 +19,239 @@
    <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',
+      {
+        params: {
+          timetableId: props.timetableEntry.id,
+          returnType: 'detailed'
+        }
+      }
+    );
+
+    if (!responseData || responseData.data.length != 1) {
+      timetableDetails.value = null;
+      return;
+    }
+
+    timetableDetails.value = responseData.data[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 +329,7 @@ hr {
  }
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .timetable-specs {
    justify-content: center;
  }
@@ -71,6 +71,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 +87,7 @@
      </b>

      <b
-        class="info-badge"
+        class="timetable-status-badge"
        :class="{
          fulfilled: timetable.fulfilled,
          terminated: timetable.terminated && !timetable.fulfilled,
@@ -110,8 +114,10 @@ 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';

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

  data() {
@@ -122,7 +128,7 @@ export default defineComponent({

  props: {
    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
+      type: Object as PropType<API.TimetableHistory.DataShort>,
      required: true
    }
  }
@@ -165,23 +171,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 +180,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'
@@ -10,6 +11,7 @@ export namespace Journal {
    | 'search-train'
    | 'search-date-from'
    | 'search-dispatcher'
+    | 'search-includesScenery'
    | 'search-issuedFrom'
    | 'search-terminatingAt'
    | 'search-via'
@@ -61,19 +63,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,392 @@
+<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 }">
+            <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';
+
+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 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>
@@ -96,6 +96,7 @@ export default defineComponent({
  data() {
    return {
      historyList: [] as API.DispatcherHistory.Response,
+      lastStationName: '',
      dataStatus: Status.Data.Loading,
      DataStatus: Status.Data,
      apiStore: useApiStore()
@@ -103,10 +104,10 @@ export default defineComponent({
  },

  async activated() {
-    // if (this.historyList.length == 0) {
+    this.historyList.length = 0;
+
    const fetchedHistory = await this.fetchAPIData();
    if (fetchedHistory) this.historyList = fetchedHistory;
-    // }
  },

  methods: {
@@ -150,6 +151,7 @@ export default defineComponent({
 <style lang="scss" scoped>
@use '../../styles/responsive';
@use '../../styles/scenery-history-table';
+@use '../../styles/badge';

 .scenery-dispatchers-history {
  height: 100%;
@@ -194,7 +196,7 @@ export default defineComponent({
  color: springgreen;
 }

-@include responsive.smallScreen{
+@include responsive.smallScreen {
  .journal-list > div {
    flex-direction: column;
    justify-content: center;
@@ -1,61 +1,89 @@
 <template>
  <section class="info-header">
-    <a class="scenery-name" :href="station?.generalInfo?.url" target="_blank">
-      {{ stationName.replace(/_/g, ' ') }}
-    </a>
+    <button class="btn btn-return" :title="$t('scenery.return-btn')" @click="onReturnButtonClick">
+      <img src="/images/icon-back.svg" alt="return button" />
+    </button>

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

    <div class="scenery-hash" v-if="onlineScenery?.hash">#{{ onlineScenery.hash }}</div>
  </section>
 </template>

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

-export default defineComponent({
-  props: {
-    station: {
-      type: Object as PropType<Station>
-    },
+const route = useRoute();
+const router = useRouter();

-    stationName: {
-      type: String,
-      required: true
-    },
+const prevPath = ref('/');

-    onlineScenery: {
-      type: Object as PropType<ActiveScenery>
-    }
+onMounted(() => {
+  prevPath.value = (route.meta['prevPath'] as string) ?? '/';
+});
+
+defineProps({
+  station: {
+    type: Object as PropType<Station>
+  },
+
+  stationName: {
+    type: String,
+    required: true
+  },
+
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
  }
 });
+
+function onReturnButtonClick() {
+  router.push(prevPath.value);
+}
 </script>

 <style lang="scss" scoped>
@use '../../styles/responsive';
+@use 'sass:color';

-.info-header {
-  margin-top: 1em;
+.btn-return {
+  $bgColor: #2b2b2b;
+  background-color: $bgColor;
+
+  &:hover {
+    background-color: color.adjust($color: $bgColor, $lightness: 15%);
+  }
+
+  img {
+    height: 2em;
+  }
 }

 .scenery-name {
  font-weight: bold;
  font-size: 3em;

+  text-align: center;
+
  text-transform: uppercase;
 }

-.scenery-abbrev {
-  font-size: 1.3em;
-  color: #aaa;
-}
-
 .scenery-hash {
-  margin-top: 0.5em;
  color: #aaa;
  font-size: 1.2em;
 }
+
+@include responsive.smallScreen {
+  .scenery-name {
+    font-size: 2.5em;
+  }
+}
 </style>
@@ -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,47 +35,34 @@ 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>

-<style lang="scss">
+<style lang="scss" scoped>
@use '../../styles/responsive';
-@use '../../styles/badge';
-
-h3.section-header {
-  margin: 0.5em 0;
-  padding: 0.3em;

+.info-station-loading {
  display: flex;
-  justify-content: center;
  align-items: center;
+  justify-content: center;

-  font-size: 1.2em;
+  min-height: 300px;
 }

-.info-lists {
+.info-online-lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
@@ -80,6 +70,12 @@ h3.section-header {
  margin-top: 1em;
 }

+.info-divider {
+  margin: 1em 0;
+  height: 3px;
+  background-color: #5b5b5b;
+}
+
 .scenery-topic a {
  font-weight: bold;
 }
@@ -8,10 +8,7 @@
        {{ 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--donator"
          v-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
@@ -21,6 +18,8 @@
        </span>
        <span v-else>{{ onlineScenery.dispatcherName }}</span>
      </router-link>
+
+      <FlagIcon :languageId="onlineScenery.dispatcherLanguageId" width="1.25em" />
    </div>

    <div class="info-bottom">
@@ -51,9 +50,11 @@ 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';

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

  data() {
    return {
@@ -66,8 +67,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 {
@@ -118,6 +117,7 @@ export default defineComponent({
  align-items: center;

  width: 3em;
+  height: 3em;
  margin: 0.25em;

  border: 2px solid #4e4e4e;
@@ -5,7 +5,7 @@
        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>
@@ -32,7 +32,7 @@
        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>
@@ -43,7 +43,12 @@
          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
            {{ route.routeName }}
          </span>
-          <span v-if="route.routeSpeed" class="speed">{{ route.routeSpeed }}</span>
+          <span v-if="route.routeSpeed" class="speed">
+            <span>{{ route.routeSpeed }}</span>
+            <span v-if="route.routeSpeedExit && route.routeSpeedExit != route.routeSpeed">
+              | {{ route.routeSpeedExit }}
+            </span>
+          </span>
          <span v-if="route.routeLength" class="length">
            {{ (route.routeLength / 1000).toFixed(1) + 'km' }}
          </span>
@@ -155,7 +160,7 @@ ul.routes-list {
    -moz-user-select: none;
    -webkit-user-select: none;

-    span {
+    & > span {
      padding: 0.2em;
      background-color: #007599;
      font-weight: bold;
@@ -1,6 +1,6 @@
 <template>
  <section class="info-spawn-list">
-    <h3 class="spawn-header section-header">
+    <h3 class="spawn-header">
      <img src="/images/icon-spawn.svg" alt="Open spawns icon" />
      &nbsp;{{ $t('scenery.spawns') }} &nbsp;
      <span class="text--primary">{{ onlineScenery?.spawns.length || '0' }}</span>
@@ -53,10 +53,23 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
+@use '../../../styles/badge';
+
 ul {
  position: relative;
 }

+h3.spawn-header {
+  margin: 0.5em 0;
+  padding: 0.3em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.2em;
+}
+
 .spawns-anim {
  &-move,
  &-enter-active,
@@ -1,6 +1,6 @@
 <template>
  <section class="info-user-list">
-    <h3 class="user-header section-header">
+    <h3 class="user-header">
      <img src="/images/icon-user.svg" alt="Users icon" />
      &nbsp;{{ $t('scenery.users') }} &nbsp;
      <span class="text--primary">{{ onlineScenery?.stationTrains?.length || 0 }}</span
@@ -18,7 +18,11 @@
        :key="train.id"
        :data-status="status"
      >
-        <router-link :to="train.driverRouteLocation">
+        <router-link
+          :to="train.driverRouteLocation"
+          data-tooltip-type="TrainInfoTooltip"
+          :data-tooltip-content="train.id"
+        >
          <span class="user_train"> {{ train.trainNo }}</span>
          <span class="user_name">
            {{ train.driverName }}
@@ -83,7 +87,8 @@ export default defineComponent({
        const stop = train.timetableData?.followingStops.find(
          (stop) =>
            stop.stopNameRAW.toLowerCase() == name.toLowerCase() ||
-            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW)
+            this.station?.generalInfo?.checkpoints.includes(stop.stopNameRAW) ||
+            this.onlineScenery?.missingCheckpoints.includes(stop.stopNameRAW)
        );

        const sceneryName =
@@ -106,6 +111,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
+@use '../../../styles/badge';
+
 $no-timetable: #aaa;
 $departed: springgreen;
 $stopped: #ffa600;
@@ -113,6 +120,17 @@ $online: gold;
 $terminated: salmon;
 $disconnected: slategray;

+h3.user-header {
+  margin: 0.5em 0;
+  padding: 0.3em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.2em;
+}
+
 .info-user-list {
  width: 100%;
 }
@@ -1,195 +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>
-
-    <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">
-                <b
-                  data-tooltip-type="BaseTooltip"
-                  :data-tooltip-content="getCategoryExplanation(row.train.timetableData!.category)"
-                  class="text--primary tooltip-help"
-                >
-                  {{ row.train.timetableData!.category }}
-                </b>
-                <span>&nbsp;</span>
-                <b>{{ row.train.trainNo }}</b>
-                <span>&nbsp;&bull;&nbsp;</span>
-                <span>{{ row.train.driverName }}</span>
-                <span
-                  v-if="row.checkpointStop.comments"
-                  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>

@@ -197,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 } from '../../typings/common';
-import { getTrainStopStatus, stopStatusPriority } from './utils';
+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],

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

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

  activated() {
@@ -247,6 +71,7 @@ export default defineComponent({

    const chosenCheckpoint = ref(
      props.station?.generalInfo?.checkpoints[0] ??
+        props.onlineScenery?.missingCheckpoints[0] ??
        props.station?.name ??
        route.query['station']?.toString() ??
        ''
@@ -260,273 +85,42 @@ 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() {
-      if (!this.station) return;
-
-      if (!this.station.generalInfo) {
-        this.chosenCheckpoint = this.station.name;
-        return;
-      }
-
      const queryCheckpoint = this.$route.query['checkpoint']?.toString();

-      this.chosenCheckpoint =
-        this.station.generalInfo.checkpoints.find(
-          (ch) => ch.toLocaleLowerCase() === queryCheckpoint?.toLocaleLowerCase()
-        ) ??
-        this.station.generalInfo.checkpoints[0] ??
-        this.station.name;
-    },
+      let checkpointsListRef: string[] | null = null;
+      let sceneryName = '';

-    setCheckpoint(cp: string) {
-      this.chosenCheckpoint = cp;
+      if (this.station && this.station.generalInfo) {
+        checkpointsListRef = this.station.generalInfo.checkpoints;
+        sceneryName = this.station.name;
+      } else if (this.onlineScenery) {
+        checkpointsListRef = this.onlineScenery.missingCheckpoints;
+        sceneryName = this.onlineScenery.name;
+      } else if (this.station) {
+        this.chosenCheckpoint = this.station.name;
+        sceneryName = this.station.name;
+      }
+
+      if (checkpointsListRef) {
+        this.chosenCheckpoint =
+          checkpointsListRef.find(
+            (ch) => ch.toLocaleLowerCase() === queryCheckpoint?.toLocaleLowerCase()
+          ) ??
+          checkpointsListRef[0] ??
+          sceneryName;
+      }
    }
  }
 });
 </script>

 <style lang="scss" scoped>
-@use '../../styles/responsive';
-@use '../../styles/animations';
-
 .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-wrap: wrap;
-
-  .info-number {
-    color: var(--clr-primary);
-  }
-
-  .info-route {
-    width: 100%;
-  }
-
-  img {
-    height: 0.9em;
-    vertical-align: middle;
-    margin: 0 0.25em;
-  }
-}
-
-.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" />
+          </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.web.app/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>
@@ -0,0 +1,146 @@
+<template>
+  <div class="general-status">
+    <router-link
+      v-if="computedScheduledTrain.stationNameHref"
+      :to="`/scenery?station=${computedScheduledTrain.stationNameHref}`"
+      :class="computedScheduledTrain.status"
+      v-html="computedScheduledTrain.stopStatusIndicator"
+    >
+    </router-link>
+
+    <span
+      v-else
+      :class="computedScheduledTrain.status"
+      v-html="computedScheduledTrain.stopStatusIndicator"
+    ></span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { StopStatus } from '../../../typings/common';
+import { SceneryTimetableRow } from '../typings';
+
+export default defineComponent({
+  props: {
+    sceneryTimetableRow: {
+      type: Object as PropType<SceneryTimetableRow>,
+      required: true
+    }
+  },
+
+  computed: {
+    computedScheduledTrain() {
+      const { status, prevElement, currentElement, nextElement } = this.sceneryTimetableRow;
+
+      let stopStatusIndicator = '';
+      let stationNameHref = '';
+
+      switch (status) {
+        case StopStatus.ARRIVING:
+          if (prevElement) {
+            stopStatusIndicator = this.$t('timetables.desc-arriving', {
+              prevStationName: prevElement?.stationName ?? '',
+              prevDepartureLine: prevElement?.departureRouteExt ?? ''
+            });
+
+            stationNameHref = prevElement?.stationName ?? '';
+          } else {
+            stopStatusIndicator = this.$t('timetables.desc-beginning');
+          }
+          break;
+
+        case StopStatus.ONLINE:
+        case StopStatus.STOPPED:
+          stopStatusIndicator = nextElement?.arrivalRouteExt
+            ? this.$t(`timetables.desc-${status}`, {
+                nextStationName: nextElement?.stationName,
+                nextArrivalLine: nextElement?.arrivalRouteExt
+              })
+            : this.$t(`timetables.desc-end`);
+
+          stationNameHref = nextElement?.stationName ?? '';
+
+          break;
+
+        case StopStatus.DEPARTED:
+          if (!nextElement?.stationName) {
+            stopStatusIndicator = this.$t('timetables.desc-departed-ends', {
+              nextStationName: currentElement.stationName
+            });
+
+            stationNameHref = nextElement?.stationName ?? '';
+          } else {
+            stopStatusIndicator = this.$t('timetables.desc-departed', {
+              nextStationName: nextElement?.stationName ?? currentElement.stationName,
+              nextArrivalLine: nextElement?.arrivalRouteExt
+            });
+
+            stationNameHref = nextElement?.stationName ?? '';
+          }
+
+          break;
+
+        case StopStatus.DEPARTED_AWAY:
+          stopStatusIndicator = this.$t('timetables.desc-departed-away', {
+            nextStationName: nextElement?.stationName,
+            nextArrivalLine: nextElement?.arrivalRouteExt
+          });
+
+          stationNameHref = nextElement?.stationName ?? '';
+          break;
+
+        case StopStatus.TERMINATED:
+          stopStatusIndicator = this.$t('timetables.desc-terminated');
+          break;
+
+        default:
+          break;
+      }
+      return {
+        ...this.sceneryTimetableRow,
+        stationNameHref,
+        stopStatusIndicator
+      };
+    }
+  },
+
+  methods: {
+    navigateToScenery(sceneryName?: string) {
+      if (!sceneryName) return;
+
+      this.$router.push(`/scenery?station=${sceneryName}`);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.general-status {
+  margin-top: 0.5em;
+
+  & > .arriving {
+    color: #ccc;
+  }
+
+  & > .departed {
+    color: lime;
+
+    &-away {
+      color: #5ecc5e;
+    }
+  }
+
+  & > .stopped {
+    color: #ffa600;
+  }
+
+  & > .online {
+    color: gold;
+  }
+
+  & > .terminated {
+    color: salmon;
+  }
+}
+</style>
@@ -40,36 +40,28 @@
              <span>
                {{ $t('scenery.timetable-issued-date') }}
                <b>
-                  {{
-                    localeDateTime(
-                      timetableHistory.createdAt > timetableHistory.beginDate
-                        ? timetableHistory.beginDate
-                        : timetableHistory.createdAt,
-                      $i18n.locale
-                    )
-                  }}
-                </b></span
-              >
-              <span v-if="timetableHistory.authorName">
-                {{ $t('scenery.timetable-issued-by') }}
-                <b>
-                  <router-link
-                    :to="`/journal/timetables?search-dispatcher=${timetableHistory.authorName}`"
-                  >
-                    {{ timetableHistory.authorName }}
-                  </router-link>
+                  {{ parseCreatedDate(timetableHistory, $i18n.locale) }}
                </b>
              </span>

              <span>
                {{ $t('scenery.timetable-issued-for') }}
-                <b>
-                  <router-link
-                    :to="`/journal/timetables?search-driver=${timetableHistory.driverName}`"
-                  >
-                    {{ timetableHistory.driverName }}
-                  </router-link>
-                </b>
+                <router-link
+                  class="journal-link"
+                  :to="`/journal/timetables?search-driver=${timetableHistory.driverName}`"
+                >
+                  {{ timetableHistory.driverName }}
+                </router-link>
+              </span>
+
+              <span v-if="timetableHistory.authorName">
+                {{ $t('scenery.timetable-issued-by') }}
+                <router-link
+                  class="journal-link"
+                  :to="`/journal/timetables?search-dispatcher=${timetableHistory.authorName}`"
+                >
+                  {{ timetableHistory.authorName }}
+                </router-link>
              </span>
            </div>
          </span>
@@ -106,7 +98,7 @@ import { useApiStore } from '../../store/apiStore';
 import routerMixin from '../../mixins/routerMixin';
 import { useMainStore } from '../../store/mainStore';

-const historyModeList = ['via', 'issuedFrom', 'terminatingAt'] as const;
+const historyModeList = ['includesScenery', 'issuedFrom', 'via', 'terminatingAt'] as const;
 type HistoryMode = (typeof historyModeList)[number];

 export default defineComponent({
@@ -123,7 +115,7 @@ export default defineComponent({

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

      apiStore: useApiStore(),
@@ -131,17 +123,19 @@ export default defineComponent({
      dataStatus: Status.Data.Loading,
      DataStatus: Status.Data,

-      checkedHistoryMode: 'via' as HistoryMode
+      checkedHistoryMode: 'includesScenery' as HistoryMode
    };
  },

  async activated() {
+    this.checkedHistoryMode = 'includesScenery';
    this.fetchAPIData();
  },

  methods: {
    async fetchAPIData() {
      const stationName = this.$route.query['station'];
+      this.dataStatus = Status.Data.Loading;

      if (!stationName) {
        this.historyList = [];
@@ -152,9 +146,10 @@ export default defineComponent({
      const requestFilters: Record<string, any> = {};
      requestFilters[this.checkedHistoryMode] = stationName.toString();
      requestFilters.countLimit = 30;
+      requestFilters['returnType'] = 'short';

      try {
-        const response: API.TimetableHistory.Response = await (
+        const response: API.TimetableHistory.ResponseShort = await (
          await this.apiStore.client!.get('api/getTimetables', {
            params: requestFilters
          })
@@ -165,12 +160,12 @@ export default defineComponent({
        this.dataStatus = Status.Data.Loaded;
      } catch (error) {
        console.error(error);
+        this.dataStatus = Status.Data.Error;
      }
    },

    checkHistoryMode(mode: HistoryMode) {
      this.checkedHistoryMode = mode;
-      this.dataStatus = Status.Data.Loading;
      this.fetchAPIData();
    },

@@ -181,6 +176,18 @@ export default defineComponent({
          [`search-${this.checkedHistoryMode}`]: this.station?.name || this.onlineScenery?.name
        }
      });
+    },
+
+    parseCreatedDate(timetable: API.TimetableHistory.DataShort, locale: string) {
+      const createdDate =
+        timetable.createdAt > timetable.beginDate
+          ? new Date(timetable.beginDate)
+          : new Date(timetable.createdAt);
+
+      return createdDate.toLocaleString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
+        timeStyle: 'short',
+        dateStyle: 'medium'
+      });
    }
  },
  components: { Loading }
@@ -215,7 +222,15 @@ export default defineComponent({

  button {
    padding: 0.35em;
-    min-width: 120px;
+  }
+}
+
+.journal-link {
+  font-weight: bold;
+  color: #eee;
+
+  &:hover {
+    color: var(--clr-primary);
  }
 }

@@ -1,139 +0,0 @@
-<template>
-  <div class="general-status">
-    <span
-      :class="computedScheduledTrain.status"
-      data-tooltip-type="HtmlTooltip"
-      :data-tooltip-content="computedScheduledTrain.stopStatusDescription"
-      @click.prevent="() => {}"
-    >
-      {{ computedScheduledTrain.stopStatusIndicator }}
-    </span>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { StopStatus } from '../../typings/common';
-import { SceneryTimetableRow } from './typings';
-
-export default defineComponent({
-  props: {
-    sceneryTimetableRow: {
-      type: Object as PropType<SceneryTimetableRow>,
-      required: true
-    }
-  },
-
-  computed: {
-    computedScheduledTrain() {
-      const { status, prevElement, currentElement, nextElement } = this.sceneryTimetableRow;
-
-      const prevDepartureIndicator = prevElement?.departureRouteExt
-        ? `(${prevElement.departureRouteExt}) ${prevElement.stationName}`
-        : '---';
-
-      const nextArrivalIndicator = nextElement?.arrivalRouteExt
-        ? `(${nextElement.arrivalRouteExt}) ${nextElement.stationName}`
-        : `${currentElement.stationName}`;
-
-      let stopStatusDescription = '',
-        stopStatusIndicator = '';
-
-      switch (status) {
-        case StopStatus.ARRIVING:
-          stopStatusIndicator = `${this.$t('timetables.from')}: ${prevDepartureIndicator}`;
-          stopStatusDescription = this.$t('timetables.desc-arriving', {
-            prevStationName: prevElement?.stationName ?? '',
-            prevDepartureLine: prevElement?.departureRouteExt ?? ''
-          });
-          break;
-
-        case StopStatus.ONLINE:
-        case StopStatus.STOPPED:
-          stopStatusIndicator = nextElement?.arrivalRouteExt
-            ? `${this.$t('timetables.to')}: ${nextArrivalIndicator}`
-            : `${this.$t('timetables.desc-end')}`;
-          stopStatusDescription = nextElement?.arrivalRouteExt
-            ? this.$t(`timetables.desc-${status}`, {
-                nextStationName: nextElement?.stationName,
-                nextArrivalLine: nextElement?.arrivalRouteExt
-              })
-            : '';
-          break;
-
-        case StopStatus.DEPARTED:
-          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
-
-          if (!nextElement?.stationName) {
-            stopStatusDescription = this.$t('timetables.desc-departed-ends', {
-              nextStationName: currentElement.stationName
-            });
-          } else {
-            stopStatusDescription = this.$t('timetables.desc-departed', {
-              nextStationName: nextElement?.stationName ?? currentElement.stationName,
-              nextArrivalLine: nextElement?.arrivalRouteExt
-            });
-          }
-
-          break;
-
-        case StopStatus.DEPARTED_AWAY:
-          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
-          stopStatusDescription = this.$t('timetables.desc-departed-away', {
-            nextStationName: nextElement?.stationName,
-            nextArrivalLine: nextElement?.arrivalRouteExt
-          });
-          break;
-
-        case StopStatus.TERMINATED:
-          stopStatusIndicator = `X ${this.$t('timetables.desc-terminated')}`;
-          stopStatusDescription = this.$t('timetables.desc-terminated');
-          break;
-
-        default:
-          break;
-      }
-      return {
-        ...this.sceneryTimetableRow,
-        stopStatusDescription,
-        stopStatusIndicator
-      };
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.general-status {
-  margin-top: 0.5em;
-  cursor: help;
-
-  span.arriving {
-    color: #ccc;
-  }
-
-  span.departed {
-    color: lime;
-    font-weight: bold;
-
-    &-away {
-      font-weight: bold;
-      color: #5ecc5e;
-    }
-  }
-
-  span.stopped {
-    color: #ffa600;
-    font-weight: bold;
-  }
-
-  span.online {
-    color: gold;
-  }
-
-  span.terminated {
-    color: salmon;
-    font-weight: bold;
-  }
-}
-</style>
@@ -1,6 +1,6 @@
 import { StopStatus, TrainStop } from '../../typings/common';

-export const stopStatusPriority = [
+export const stopStatusPriorities = [
  StopStatus.ONLINE,
  StopStatus.STOPPED,
  StopStatus.DEPARTED,
@@ -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>
@@ -21,9 +21,7 @@
            <template v-else>{{ $t('filters.no-changed-filters') }}</template>
          </div>

-          <section class="card_sceneries-search">
-            <h3 class="section-header">{{ $t('filters.sceneries-search') }}</h3>
-
+          <section class="card_input-search">
            <datalist id="sceneries">
              <option
                v-for="scenery in sortedStationList"
@@ -32,18 +30,59 @@
              ></option>
            </datalist>

-            <form action="javascript:void(0);" @submit="handleSceneriesInput">
-              <input
-                v-model="chosenSearchScenery"
-                id="scenery-search"
-                list="sceneries"
-                :placeholder="$t('filters.sceneries-placeholder')"
-                @focus="preventKeyDown = true"
-                @blur="preventKeyDown = false"
-              />
+            <input
+              v-model="chosenSearchScenery"
+              id="scenery-search"
+              list="sceneries"
+              :placeholder="$t('filters.sceneries-placeholder')"
+              @change="handleSceneriesInput"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
+            />

-              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
-            </form>
+            <button class="btn--action" @click="handleSceneriesInput">
+              {{ $t('filters.search-button-title') }}
+            </button>
+          </section>
+
+          <section class="card_input-search">
+            <input
+              v-model="filters['lines']"
+              id="line-numbers-search"
+              :placeholder="$t('filters.line-numbers-placeholder')"
+              @focus="preventKeyDown = true"
+              @blur="preventKeyDown = false"
+            />
+
+            <button class="btn--action btn--image" @click="resetLineNumbersInput">
+              <img src="/images/icon-exit.svg" alt="reset line numbers search" />
+            </button>
+          </section>
+
+          <section class="card_input-search">
+            <select id="author" name="authors" v-model="filters['authors']">
+              <option value="">{{ $t('filters.authors-placeholder') }}</option>
+              <option v-for="(author, i) in authorsOptions" :key="i" :value="author">
+                {{ author }}
+              </option>
+            </select>
+
+            <button class="btn--action btn--image" @click="resetAuthorsInput">
+              <img src="/images/icon-exit.svg" alt="reset authors search" />
+            </button>
+          </section>
+
+          <section class="card_input-search">
+            <select id="projects" name="projects" v-model="filters['projects']">
+              <option value="">{{ $t('filters.projects-placeholder') }}</option>
+              <option v-for="(project, i) in projectsOptions" :key="i" :value="project">
+                {{ project }}
+              </option>
+            </select>
+
+            <button class="btn--action btn--image" @click="resetProjectsInput">
+              <img src="/images/icon-exit.svg" alt="reset projects search" />
+            </button>
          </section>

          <section class="card_options">
@@ -52,7 +91,7 @@
              v-for="(sectionFilters, sectionKey) in filtersSections"
              :key="sectionKey"
            >
-              <h3 class="text--primary">
+              <h3 class="section-header">
                <span class="active-indicator" v-if="!areSectionFiltersDefault(sectionKey)"></span>
                {{ $t(`filters.sections.${sectionKey}`) }}
                <button @click="resetSectionFilters(sectionKey)">RESET</button>
@@ -82,7 +121,7 @@
          </section>

          <section class="card_timestamp">
-            <h3 class="section-header">{{ $t('filters.minimum-hours-title') }}</h3>
+            <h3 class="hours-section-header">{{ $t('filters.minimum-hours-title') }}</h3>

            <span class="clock">
              <button class="btn--action" @click="subHour">-</button>
@@ -97,44 +136,17 @@
            </span>
          </section>

-          <section class="card_authors-search">
-            <h3 class="section-header">{{ $t('filters.authors-search') }}</h3>
-
-            <datalist id="authors" name="authors">
-              <option v-for="(author, i) in authorsHint" :key="i" :value="author"></option>
-            </datalist>
-
-            <form action="javascript:void(0);" @submit="handleAuthorsInput">
-              <input
-                type="text"
-                id="author"
-                list="authors"
-                name="authors"
-                v-model="authors"
-                :placeholder="$t('filters.authors-placeholder')"
-                @focus="preventKeyDown = true"
-                @blur="preventKeyDown = false"
-              />
-
-              <button class="btn--action">{{ $t('filters.search-button-title') }}</button>
-            </form>
-          </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>
@@ -174,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';
@@ -190,17 +204,17 @@ 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,
-    authors: '',

    currentRegion: { id: '', value: '' },

@@ -255,13 +269,11 @@ export default defineComponent({
        .sort((s1, s2) => (s1.name > s2.name ? 1 : -1));
    },

-    currentOptionsActive() {
-      return true;
-    },
-
-    authorsHint() {
+    authorsOptions() {
      return this.store.stationList
        .reduce((acc, station) => {
+          if (station.generalInfo?.hidden === true) return acc;
+
          station.generalInfo?.authors?.forEach((author) => {
            if (author.trim() != '' && !acc.includes(author.toLocaleLowerCase()))
              acc.push(author.toLocaleLowerCase());
@@ -270,6 +282,19 @@ export default defineComponent({
          return acc;
        }, [] as string[])
        .sort((a, b) => a.localeCompare(b));
+    },
+
+    projectsOptions() {
+      return this.store.stationList
+        .reduce((acc, station) => {
+          if (!station.generalInfo || !station.generalInfo.project || station.generalInfo.hidden)
+            return acc;
+          if (!acc.includes(station.generalInfo.project.trim()))
+            acc.push(station.generalInfo.project.trim());
+
+          return acc;
+        }, [] as string[])
+        .sort((a, b) => a.localeCompare(b));
    }
  },

@@ -294,8 +319,16 @@ export default defineComponent({
      this.scrollTop = (e.target as HTMLElement).scrollTop;
    },

-    handleAuthorsInput() {
-      this.filters['authors'] = this.authors;
+    resetAuthorsInput() {
+      this.filters['authors'] = '';
+    },
+
+    resetProjectsInput() {
+      this.filters['projects'] = '';
+    },
+
+    resetLineNumbersInput() {
+      this.filters['lines'] = '';
    },

    handleSceneriesInput() {
@@ -340,7 +373,6 @@ export default defineComponent({

      // Reset local model values
      this.minimumHours = 0;
-      this.authors = '';

      // Reset global filters
      Object.keys(this.filters).forEach((filterKey) => {
@@ -384,6 +416,14 @@ export default defineComponent({
@use '../../styles/animations';

 h3.section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25em;
+  gap: 0.5em;
+  color: var(--clr-primary);
+}
+
+h3.hours-section-header {
  text-align: center;
  margin: 0.5em 0;
 }
@@ -456,33 +496,26 @@ h3.section-header {
  }
 }

-.card_authors-search,
-.card_sceneries-search {
-  margin: 1em 0;
+.card_input-search {
  display: flex;
-  flex-direction: column;
  align-items: center;
+  gap: 0.5em;

-  form {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 0.5em;
-    width: 100%;
-    margin-top: 1em;
+  button {
+    height: 100%;
  }

-  input {
-    width: 70%;
-    max-width: 400px;
+  input,
+  select {
+    width: 100%;
    padding: 0.5em;
-    outline: 1px solid white;
+    border: 1px solid #aaa;
  }
 }

 .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;
 }
@@ -494,9 +527,11 @@ h3.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;
@@ -548,124 +583,40 @@ h3.section-header {
 }

 .option-section h3 {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25em;
-
-  gap: 0.5em;
-
  button {
    padding: 0.15em;
    color: coral;
  }
 }

-.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 {
@@ -14,10 +14,10 @@
    <transition name="dropdown-anim">
      <div class="dropdown_wrapper" v-if="showDropdown">
        <div>
-          <h1 class="stats-title text--primary">
+          <h2 class="stats-title text--primary">
            <img src="/images/icon-stats.svg" alt="Open filters icon" height="28" />
            {{ $t('station-stats.title') }}
-          </h1>
+          </h2>

          <hr style="margin: 0.5em 0" />

@@ -245,7 +245,7 @@ export default defineComponent({
@use '../../styles/badge';
@use '../../styles/responsive';

-h1.stats-title img {
+.stats-title img {
  vertical-align: text-bottom;
 }

@@ -279,7 +279,7 @@ h1.stats-title img {
 }

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

@@ -14,7 +14,7 @@
            class="header-text"
            :class="headerName"
          >
-            <span class="header_wrapper">
+            <div class="header_wrapper">
              <div v-html="$t(`sceneries.headers.${headerName}`)"></div>

              <img
@@ -23,7 +23,7 @@
                :src="`/images/icon-arrow-${activeSorter.dir == 1 ? 'asc' : 'desc'}.svg`"
                alt="sort icon"
              />
-            </span>
+            </div>
          </th>

          <th
@@ -33,12 +33,12 @@
            class="header-image"
            :class="headerName"
          >
-            <span class="header_wrapper">
-              <img
-                :src="`/images/icon-${headerName}.svg`"
-                :alt="headerName"
-                :title="$t(`sceneries.headers.${headerName}`)"
-              />
+            <span
+              class="header_wrapper"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t(`sceneries.headers.${headerName}`)"
+            >
+              <img :src="`/images/icon-${headerName}.svg`" :alt="headerName" />

              <img
                class="sort-icon"
@@ -52,14 +52,14 @@
      </thead>

      <tbody>
-        <router-link
+        <tr
          v-for="station in filteredStationList"
          class="a-row"
-          role="row"
+          tabindex="0"
          :key="station.name"
          @click.right.prevent="openForumSite($event, station.generalInfo?.url)"
-          @keydown.space.prevent="openForumSite($event, station.generalInfo?.url)"
-          :to="getSceneryRoute(station)"
+          @click="getSceneryRoute(station)"
+          @keydown.enter="getSceneryRoute(station)"
        >
          <td class="station-name" :class="station.generalInfo?.availability">
            <b v-if="station.generalInfo?.project" style="color: salmon">{{
@@ -76,37 +76,49 @@
                  station.generalInfo.availability != 'nonPublic' &&
                  station.generalInfo.availability != 'unavailable'
                "
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t(`sceneries.info.${station.generalInfo.availability}`)} (${$t(
+                  'sceneries.info.req-level',
+                  { lvl: station.generalInfo.reqLevel },
+                  station.generalInfo.reqLevel
+                )})`"
                :style="calculateExpStyle(station.generalInfo.reqLevel)"
              >
                {{ station.generalInfo.reqLevel >= 2 ? station.generalInfo.reqLevel : 'L' }}
              </span>

-              <span v-else-if="station.generalInfo.availability == 'abandoned'">
-                <img
-                  src="/images/icon-abandoned.svg"
-                  alt="non-public"
-                  :title="$t('sceneries.info.abandoned')"
-                />
+              <span
+                v-else-if="station.generalInfo.availability == 'abandoned'"
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="$t('sceneries.info.abandoned')"
+              >
+                <img src="/images/icon-abandoned.svg" alt="non-public" />
              </span>

-              <span v-else-if="station.generalInfo.availability == 'nonPublic'">
-                <img
-                  src="/images/icon-lock.svg"
-                  alt="non-public"
-                  :title="$t('sceneries.info.non-public')"
-                />
+              <span
+                v-else-if="station.generalInfo.availability == 'nonPublic'"
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="$t('sceneries.info.non-public')"
+              >
+                <img src="/images/icon-lock.svg" alt="non-public" />
              </span>

-              <span v-else>
-                <img
-                  src="/images/icon-unavailable.svg"
-                  alt="unavailable"
-                  :title="$t('sceneries.info.unavailable')"
-                />
+              <span
+                v-else
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="$t('sceneries.info.unavailable')"
+              >
+                <img src="/images/icon-unavailable.svg" alt="unavailable" />
              </span>
            </span>

-            <span v-else> ? </span>
+            <span
+              v-else
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.unknown')"
+            >
+              ?
+            </span>
          </td>

          <td class="station-status">
@@ -120,7 +132,6 @@
            <span v-if="station.onlineInfo?.dispatcherName">
              <b
                v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
-                @click.prevent="openDonationCard"
                data-tooltip-type="DonatorTooltip"
                :data-tooltip-content="$t('donations.dispatcher-message')"
              >
@@ -134,6 +145,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"
@@ -153,7 +172,8 @@
              <span
                v-if="station.generalInfo.routes.singleElectrifiedNames.length != 0"
                class="track catenary"
-                :title="`${$t('sceneries.info.single-track-routes-catenary')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.single-track-routes-catenary')}${
                  station.generalInfo.routes.singleElectrifiedNames.length
                }`"
              >
@@ -163,7 +183,8 @@
              <span
                v-if="station.generalInfo.routes.singleOtherNames.length != 0"
                class="track no-catenary"
-                :title="`${$t('sceneries.info.single-track-routes-other')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.single-track-routes-other')}${
                  station.generalInfo.routes.singleOtherNames.length
                }`"
              >
@@ -177,7 +198,8 @@
              <span
                v-if="station.generalInfo.routes.doubleElectrifiedNames.length != 0"
                class="track catenary"
-                :title="`${$t('sceneries.info.double-track-routes-catenary')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.double-track-routes-catenary')}${
                  station.generalInfo.routes.doubleElectrifiedNames.length
                }`"
              >
@@ -187,7 +209,8 @@
              <span
                v-if="station.generalInfo.routes.doubleOtherNames.length != 0"
                class="track no-catenary"
-                :title="`${$t('sceneries.info.double-track-routes-other')}${
+                data-tooltip-type="BaseTooltip"
+                :data-tooltip-content="`${$t('sceneries.info.double-track-routes-other')}${
                  station.generalInfo.routes.doubleOtherNames.length
                }`"
              >
@@ -201,7 +224,8 @@
              v-if="station.generalInfo?.signalType"
              class="scenery-icon icon-info"
              :class="station.generalInfo?.controlType.replace('+', '-')"
-              :title="
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="
                $t('sceneries.info.control-type') +
                $t(`controls.${station.generalInfo?.controlType}`)
              "
@@ -214,7 +238,8 @@
              class="icon-info"
              :src="`/images/icon-${station.generalInfo.signalType}.svg`"
              :alt="station.generalInfo.signalType"
-              :title="
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="
                $t('sceneries.info.signals-type') + $t(`signals.${station.generalInfo.signalType}`)
              "
            />
@@ -224,7 +249,8 @@
              class="icon-info"
              src="/images/icon-SUP.svg"
              alt="SUP (RASP-UZK)"
-              :title="$t('sceneries.info.SUP')"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.SUP')"
            />

            <img
@@ -232,7 +258,8 @@
              class="icon-info"
              src="/images/icon-ASDEK.svg"
              alt="dSAT ASDEK"
-              :title="$t('sceneries.info.ASDEK')"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.ASDEK')"
            />

            <img
@@ -240,7 +267,8 @@
              class="icon-info"
              src="/images/icon-unknown.svg"
              alt="icon-unknown"
-              :title="$t('sceneries.info.unknown')"
+              data-tooltip-type="BaseTooltip"
+              :data-tooltip-content="$t('sceneries.info.unknown')"
            />
          </td>

@@ -248,7 +276,7 @@
            class="station-users"
            :class="{ inactive: !station.onlineInfo }"
            data-tooltip-type="UsersTooltip"
-            :data-tooltip-content="JSON.stringify(station.onlineInfo?.stationTrains ?? [])"
+            :data-tooltip-content="getUsersTooltipContent(station.onlineInfo?.stationTrains ?? [])"
          >
            <span class="text--primary">{{
              station.onlineInfo?.stationTrains?.length ?? '-'
@@ -293,7 +321,7 @@
          >
            {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
          </td>
-        </router-link>
+        </tr>
      </tbody>
    </table>

@@ -318,16 +346,18 @@ import dateMixin from '../../mixins/dateMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { useApiStore } from '../../store/apiStore';
 import { useMainStore } from '../../store/mainStore';
-import { Station, Status } from '../../typings/common';
+import { Station, Status, TooltipUserTrain, Train } from '../../typings/common';
 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';

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

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

  data: () => ({
@@ -363,15 +393,13 @@ export default defineComponent({

  methods: {
    getSceneryRoute(station: Station) {
-      // TODO: Hide tooltips when navigating away
-
-      return {
+      this.$router.push({
        name: 'SceneryView',
        query: {
          station: station.name,
          region: this.$route.query.region || undefined
        }
-      };
+      });
    },

    openDonationCard(e: Event) {
@@ -394,6 +422,15 @@ export default defineComponent({
      else this.activeSorter.dir = 1;

      this.activeSorter.headerName = headerName;
+    },
+
+    getUsersTooltipContent(stationTrains: Train[]): string {
+      const usersTrains: TooltipUserTrain[] = stationTrains.map((train) => ({
+        driverName: train.driverName,
+        trainNo: train.trainNo
+      }));
+
+      return JSON.stringify(usersTrains);
    }
  }
 });
@@ -408,7 +445,7 @@ export default defineComponent({
 $rowCol: #424242;

 .station_table {
-  height: calc(100vh - 11em);
+  height: calc(100vh - 17em);
  max-height: 2000px;
  min-height: 500px;
  overflow: auto;
@@ -429,78 +466,82 @@ table {
  width: 100%;
  min-width: 1250px;
  white-space: wrap;
+}

-  thead {
-    position: sticky;
-    top: 0;
+thead {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+thead tr {
+  background-color: var(--clr-bg3);
+}
+
+thead th {
+  background-color: var(--clr-bg3);
+  white-space: pre-wrap;
+  padding: 0.5em 0.25em;
+
+  cursor: pointer;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  &.station {
+    width: 12em;
  }

-  thead tr {
-    background-color: var(--clr-bg3);
+  &.min-lvl {
+    width: 4em;
  }

-  thead th {
-    &.station {
-      width: 12em;
-    }
+  &.status {
+    width: 10em;
+  }

-    &.min-lvl {
-      width: 4em;
-    }
+  &.dispatcher {
+    width: 12em;
+  }

-    &.status {
-      width: 10em;
-    }
+  &.dispatcher-lang {
+    width: 6em;
+  }

-    &.dispatcher {
-      width: 12em;
-    }
+  &.dispatcher-lvl {
+    width: 6em;
+  }

-    &.dispatcher-lvl {
-      width: 6em;
-    }
+  &.routes-double,
+  &.routes-single {
+    width: 7em;
+  }

-    &.routes-double,
-    &.routes-single {
-      width: 7em;
-    }
+  &.general {
+    width: 11em;
+  }

-    &.general {
-      width: 11em;
-    }
+  &.header-image {
+    width: 3.5em;

-    &.header-image {
-      width: 3.5em;
-
-      &.user {
-        width: 5em;
-      }
-    }
-
-    padding: 0.5em 0.25em;
-    background-color: var(--clr-bg3);
-    white-space: pre-wrap;
-
-    cursor: pointer;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    span {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      img {
-        width: 1.5em;
-        vertical-align: middle;
-      }
+    &.user {
+      width: 5em;
    }
  }
 }

-tr,
-.a-row {
+thead th .header_wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 1.5em;
+    vertical-align: middle;
+  }
+}
+
+tbody tr {
  background-color: $rowCol;
  vertical-align: middle;

@@ -520,6 +561,7 @@ tr,
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
+    height: 2.5em;

    &.inactive {
      opacity: 0.2;
@@ -536,6 +578,7 @@ tr,
 .station-name {
  font-weight: bold;
  max-width: 200px;
+  padding: 0.25em;

  &.default {
    color: var(--clr-primary);
@@ -10,6 +10,7 @@ export const headIds = [
  'min-lvl',
  'status',
  'dispatcher',
+  'dispatcher-lang',
  'dispatcher-lvl',
  'routes-single',
  'routes-double',
@@ -120,35 +120,70 @@ 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
-  );
+  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) {
-  return (
+  if (
    filters['authors'].length > 3 &&
-    !generalInfo.authors
-      ?.map((a) => a.toLocaleLowerCase())
-      .includes(filters['authors'].toLocaleLowerCase())
-  );
+    generalInfo.authors &&
+    !generalInfo.authors.some(
+      (a) => a.toLocaleLowerCase() == filters['authors'].toLocaleLowerCase()
+    )
+  )
+    return true;
+
+  if (filters['projects'].length > 0 && generalInfo.project != filters['projects']) return true;
+
+  if (filters['lines'].length > 0) {
+    const linesNumbers = (filters['lines'] as string)
+      .split(',')
+      .map((l) => Number(l))
+      .filter((l) => !isNaN(l) && l != 0);
+
+    if (
+      !generalInfo.lines
+        ?.split(',')
+        .map((l) => Number(l))
+        .some((l) => linesNumbers.includes(l))
+    )
+      return true;
+  }
+
+  return false;
 }

 export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
@@ -187,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) -
@@ -243,7 +283,7 @@ export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
  return a.name.localeCompare(b.name);
 };

-export const filterStations = (station: Station, filters: Record<string, any>) => {  
+export const filterStations = (station: Station, filters: Record<string, any>) => {
  if (filters['free'] && (!station.onlineInfo || station.onlineInfo.dispatcherId == -1))
    return false;

@@ -13,6 +13,7 @@ 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";

 const BOX_PADDING_PX = 20;

@@ -23,7 +24,8 @@ export default defineComponent({
    BaseTooltip,
    SpawnsTooltip,
    UsersTooltip,
-    HtmlTooltip
+    HtmlTooltip,
+    TrainInfoTooltip
  },

  data() {
@@ -0,0 +1,78 @@
+<template>
+  <div class="tooltip-content">
+    <span v-if="trainInfo">
+      <b v-if="trainInfo.timetableData" style="text-transform: uppercase">
+        <span class="text--primary">{{ trainInfo.timetableData.category }}</span>
+        {{ getCategoryExplanation(trainInfo.timetableData.category) }}
+      </b>
+
+      <div class="text--primary">
+        <b>{{ trainInfo.stockList[0] }}</b> &bull; {{ trainInfo.length }}m &bull;
+        {{ (trainInfo.mass / 1000).toFixed(2) }}t
+        <span v-if="trainInfo.timetableData">
+          &bull; vRJ:
+          {{
+            trainInfo.timetableData?.trainMaxSpeed ||
+            getStockSpeedLimit(trainInfo.stockList, trainInfo.mass)
+          }}km/h
+        </span>
+        <span v-else class="text--grayed font--italic">
+          &bull; vMax:
+          {{ getStockSpeedLimit(trainInfo.stockList, trainInfo.mass) }}km/h
+        </span>
+      </div>
+
+      <div class="text--grayed">
+        {{ displayTrainPosition(trainInfo) }} - {{ trainInfo.speed }}km/h
+        <span v-if="!trainInfo.online" style="color: salmon">
+          - offline {{ lastSeenMessage(trainInfo.lastSeen) }}</span
+        >
+      </div>
+
+      <div></div>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
+import trainInfoMixin from '../../mixins/trainInfoMixin';
+import { useMainStore } from '../../store/mainStore';
+
+export default defineComponent({
+  mixins: [trainCategoryMixin, trainInfoMixin],
+
+  data: () => ({
+    tooltipStore: useTooltipStore(),
+    mainStore: useMainStore()
+  }),
+
+  computed: {
+    trainInfo() {
+      if (this.tooltipStore.content == '') return null;
+
+      // Passed "content" string should be the desired train's ID
+      return this.mainStore.trainList.find((t) => t.id === this.tooltipStore.content);
+    },
+
+    lastSceneryStatus() {}
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #1f1f1f;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+
+img {
+  height: 1em;
+}
+</style>
@@ -10,7 +10,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
-import { Train } from '../../typings/common';
+import { TooltipUserTrain } from '../../typings/common';

 export default defineComponent({
  data() {
@@ -23,7 +23,7 @@ export default defineComponent({
    trains() {
      if (this.tooltipStore.content == '') return [];

-      const parsedTrains = JSON.parse(this.tooltipStore.content) as Train[];
+      const parsedTrains = JSON.parse(this.tooltipStore.content) as TooltipUserTrain[];
      return (parsedTrains ?? []).sort((a, b) => a.trainNo - b.trainNo);
    }
  }
@@ -18,9 +18,9 @@
      <span v-if="vehicleCargo">({{ vehicleCargo.id }})</span>
    </div>

-    <div class="vehicle-props" v-if="vehicleData">
-      {{ vehicleData.group.speed }}km/h &bull; {{ vehicleData.group.length }}m &bull;
-      {{ (vehicleData.group.weight / 1000).toFixed(1) }}t
+    <div class="vehicle-props" v-if="vehicleGroup">
+      {{ vehicleGroup.speed }}km/h &bull; {{ vehicleGroup.length }}m &bull;
+      {{ (vehicleGroup.weight / 1000).toFixed(1) }}t
      <span v-if="vehicleCargo">(+{{ (vehicleCargo.weight / 1000).toFixed(1) }}t)</span>
    </div>
  </div>
@@ -73,12 +73,18 @@ export default defineComponent({
      return this.tooltipStore.content.split(':')[0];
    },

-    vehicleData() {
-      return this.apiStore.vehiclesData?.find((v) => v.name == this.vehicleName);
+    vehicleGroup() {
+      if (!this.apiStore.vehiclesData) return null;
+
+      const vehicle = this.apiStore.vehiclesData.vehicles.find((v) => v.name == this.vehicleName);
+
+      if (!vehicle) return null;
+
+      return this.apiStore.vehiclesData.vehicleGroups.find((g) => g.id == vehicle?.vehicleGroupsId);
    },

    vehicleCargo() {
-      const x = this.vehicleData?.group.cargoTypes?.find(
+      const x = this.vehicleGroup?.cargoTypes?.find(
        (c) => c.id == this.tooltipStore.content.split(':')[1]
      );

@@ -66,6 +66,10 @@

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

@@ -110,7 +114,10 @@
          {{ $t('trains.scenery-offline') }}
        </div>

-        <div v-if="!train.online" class="train-badge offline">
+        <div
+          v-if="!train.online && train.lastSeen <= Date.now() - 60000"
+          class="train-badge offline"
+        >
          <i class="fa-solid fa-user-slash"></i>
          Offline {{ lastSeenMessage(train.lastSeen) }}
        </div>
@@ -132,7 +139,11 @@
        <img src="/images/icon-speed.svg" alt="speed icon" />
        {{ train.speed }} km/h

-        <span v-if="stockSpeedLimit != Infinity">
+        <span v-if="train.timetableData">
+          &bull; vRJ: {{ train.timetableData.trainMaxSpeed }} km/h
+        </span>
+
+        <span v-else-if="stockSpeedLimit != Infinity">
          &bull;
          <em
            class="text--grayed"
@@ -192,10 +203,11 @@ 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';

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

  props: {
    train: {
@@ -216,57 +228,9 @@ export default defineComponent({

  computed: {
    stockSpeedLimit() {
-      let isPassenger = true;
-
-      // Check the whole consist speed limit
-      const vehicleMaxSpeed = this.train.stockList.reduce((acc, stockName, i) => {
-        const [vehicleName, vehicleCargo] = stockName.split(':');
-
-        const vehicleData = this.apiStore.vehiclesData?.find((v) => v.name == vehicleName);
-
-        if (!vehicleData) return acc;
-
-        let vehicleSpeed = vehicleData.group.speed;
-
-        if (vehicleData.type == 'wagon-freight') {
-          isPassenger = false;
-
-          if (vehicleCargo !== undefined && vehicleData.group.speedLoaded) {
-            vehicleSpeed = vehicleData.group.speedLoaded;
-          }
-        }
-
-        return Math.min(vehicleSpeed, acc);
-      }, Infinity);
-
-      // Check the head vehicle speed limit
-      const headLocoName = this.train.stockList[0];
-      const headLocoVehicleData = this.apiStore.vehiclesData?.find((v) => v.name == headLocoName);
-
-      // Omit speed check for head vehicle if there's no data for it
-      if (!headLocoName || !headLocoVehicleData || !headLocoVehicleData.group.massSpeeds)
-        return vehicleMaxSpeed;
-
-      const massSpeeds =
-        headLocoVehicleData.group.massSpeeds[
-          this.train.stockList.length == 1 ? 'none' : isPassenger ? 'passenger' : 'cargo'
-        ];
-
-      // Omit speed check if there's no data on mass speeds
-      if (!massSpeeds) return vehicleMaxSpeed;
-
-      // Number type for locomotives alone
-      if (typeof massSpeeds === 'number') return massSpeeds;
-
-      // Record type for passenger or cargo, find the closest range
-      const massKey = Object.keys(massSpeeds).findLast(
-        (massKey) => this.train.mass >= Number(massKey)
-      );
-
-      const massMaxSpeed = massKey ? massSpeeds[massKey] : Infinity;
-
-      return Math.min(massMaxSpeed, vehicleMaxSpeed);
+      return this.getStockSpeedLimit(this.train.stockList, this.train.mass);
    },
+
    journalRouteLocation() {
      return {
        path: '/journal/timetables',
@@ -394,6 +358,7 @@ export default defineComponent({
 .status-badges {
  display: flex;
  flex-wrap: wrap;
+  margin-left: 0.25em;

  gap: 0.25em;

@@ -30,17 +30,22 @@
            </div>

            <div class="search-box">
-              <select
-                class="search-input"
-                name="active-trains"
-                id="active-trains"
-                v-model="searchedDriver"
-              >
-                <option value="">{{ $t('options.select-driver') }}</option>
+              <datalist id="search-active-driver">
                <option v-for="driverName in activeDriverNames" :value="driverName">
                  {{ driverName }}
                </option>
-              </select>
+              </datalist>
+
+              <input
+                class="search-input"
+                list="search-active-driver"
+                name="search-active-driver"
+                id="search-active-driver"
+                :placeholder="$t(`options.search-driver`)"
+                v-model="searchedDriver"
+                @focus="preventKeyDown = true"
+                @blur="preventKeyDown = false"
+              />

              <button class="btn btn--action search-exit" @click="onInputClear('driver')">
                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
@@ -12,8 +12,16 @@
          :data-delayed="stop.departureDelay > 0"
          :data-stop-type="stop.type"
          :data-is-active="stop.isActive"
-          :data-track-count-departure="stop.departureLineInfo?.routeTracks ?? 2"
-          :data-track-count-arrival="stop.arrivalLineInfo?.routeTracks ?? 2"
+          :data-track-count-departure="
+            stop.departureLineInfo?.routeTracks ??
+            stop.nextPointRef?.arrivalLineInfo?.routeTracks ??
+            2
+          "
+          :data-track-count-arrival="
+            stop.arrivalLineInfo?.routeTracks ??
+            scheduleStops[i - 1]?.departureLineInfo?.routeTracks ??
+            2
+          "
        >
          <span class="stop_info">
            <span class="distance">
@@ -57,7 +65,15 @@
                  <span>{{ stop.departureLine }}</span>

                  <span v-if="stop.departureLineInfo">
-                    <span> | {{ stop.departureLineInfo.routeSpeed }}</span>
+                    <span>
+                      |
+                      {{
+                        stop.departureLineInfo.routeSpeedExit &&
+                        stop.departureLineInfo.routeSpeedExit != stop.departureLineInfo.routeSpeed
+                          ? `${stop.departureLineInfo.routeSpeedExit} (${stop.departureLineInfo.routeSpeed})`
+                          : stop.departureLineInfo.routeSpeed
+                      }}</span
+                    >

                    <img
                      :src="
@@ -85,13 +101,13 @@
                </div>

                <div
-                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
+                  v-if="stop.nextPointRef && stop.sceneryName != stop.nextPointRef.sceneryName"
                  class="scenery-change-name"
                >
-                  <span>{{ scheduleStops[i + 1].sceneryName }}</span>
+                  <span>{{ stop.nextPointRef.sceneryName }}</span>

                  <i
-                    v-if="!scheduleStops[i + 1].isSceneryOnline"
+                    v-if="!stop.nextPointRef.isSceneryOnline"
                    class="fa-solid fa-ban fa-sm"
                    data-tooltip-type="BaseTooltip"
                    :data-tooltip-content="$t('app.tooltip-scenery-offline')"
@@ -101,30 +117,39 @@

                <div
                  class="scenery-route"
-                  v-if="stop.sceneryName != scheduleStops[i + 1]?.sceneryName"
+                  v-if="stop.nextPointRef && stop.sceneryName != stop.nextPointRef.sceneryName"
                >
-                  <span> {{ scheduleStops[i + 1].arrivalLine }}</span>
+                  <span> {{ stop.nextPointRef.arrivalLine }}</span>

-                  <span v-if="scheduleStops[i + 1].arrivalLineInfo">
-                    <span> | {{ scheduleStops[i + 1].arrivalLineInfo!.routeSpeed }} </span>
+                  <span v-if="stop.nextPointRef.arrivalLineInfo">
+                    <span> | {{ stop.nextPointRef.arrivalLineInfo.routeSpeed }}</span>
+                    <span
+                      v-if="
+                        stop.nextPointRef.arrivalLineInfo.routeSpeedExit &&
+                        stop.nextPointRef.arrivalLineInfo.routeSpeedExit !=
+                          stop.nextPointRef.arrivalLineInfo.routeSpeed
+                      "
+                    >
+                      ({{ stop.nextPointRef.arrivalLineInfo.routeSpeedExit }})
+                    </span>

                    <img
                      :src="
-                        scheduleStops[i + 1].arrivalLineInfo?.isElectric
+                        stop.nextPointRef.arrivalLineInfo?.isElectric
                          ? '/images/icon-catenary.svg'
                          : '/images/icon-we4a.png'
                      "
                      data-tooltip-type="BaseTooltip"
                      :data-tooltip-content="
                        $t(
-                          `trains.${!scheduleStops[i + 1].arrivalLineInfo?.isElectric ? 'no-' : ''}catenary-tooltip`
+                          `trains.${!stop.nextPointRef.arrivalLineInfo?.isElectric ? 'no-' : ''}catenary-tooltip`
                        )
                      "
                      width="14"
                    />

                    <img
-                      v-if="scheduleStops[i + 1].arrivalLineInfo!.isRouteSBL"
+                      v-if="stop.nextPointRef.arrivalLineInfo!.isRouteSBL"
                      src="/images/icon-sbl-transparent.svg"
                      width="14"
                      data-tooltip-type="BaseTooltip"
@@ -176,26 +201,28 @@ export default defineComponent({
      const sceneryData =
        this.store.stationList?.find((sc) => sc.name == pathEl.stationName) ?? null;

-      if (!sceneryData || !sceneryData.generalInfo) return null;
-
      const activeScenery = this.apiStore.activeData?.activeSceneries?.find(
        (sc) => sc.stationName == pathEl.stationName
      );

-      const arrivalLineData = pathEl.arrivalRouteExt
-        ? (sceneryData.generalInfo.routes.all.find(
-            (rt) => rt.routeName == pathEl.arrivalRouteExt
-          ) ?? null)
+      const arrivalLineData = sceneryData?.generalInfo
+        ? pathEl.arrivalRouteExt
+          ? (sceneryData.generalInfo.routes.all.find(
+              (rt) => rt.routeName == pathEl.arrivalRouteExt
+            ) ?? null)
+          : null
        : null;

-      const departureLineData = pathEl.departureRouteExt
-        ? (sceneryData.generalInfo.routes.all.find(
-            (rt) => rt.routeName == pathEl.departureRouteExt
-          ) ?? null)
+      const departureLineData = sceneryData?.generalInfo
+        ? pathEl.departureRouteExt
+          ? (sceneryData.generalInfo.routes.all.find(
+              (rt) => rt.routeName == pathEl.departureRouteExt
+            ) ?? null)
+          : null
        : null;

      return {
-        generalInfo: sceneryData.generalInfo,
+        generalInfo: sceneryData?.generalInfo ?? null,
        isOnline:
          activeScenery &&
          (activeScenery.isOnline == 1 || activeScenery.lastSeen >= Date.now() - 60000),
@@ -224,33 +251,27 @@ export default defineComponent({
      let isActive = false;

      if (pathData?.departureLineData) {
-        // arrivalLineInfo = pathData.departureLineData;
+        arrivalLineInfo = pathData.departureLineData;
        departureLineInfo = pathData.departureLineData;
      }

-      for (const stop of followingStops) {
+      followingStops.forEach((stop, i) => {
        let isExternal = false;

        if (stop.arrivalLine === currentPath.arrivalRouteExt) {
          isExternal = true;

          departureLineInfo = pathData?.arrivalLineData ?? null;
-
-          if (pathData?.arrivalLineData) {
-            arrivalLineInfo = pathData.arrivalLineData;
-          }
+          arrivalLineInfo = pathData.arrivalLineData;
        }

-        let correctedDepartureLineData: StationRoutesInfo | null = null;
-
        const internalRouteInfo = stop.departureLine
-          ? pathData?.generalInfo.routes.all.find(
+          ? pathData?.generalInfo?.routes.all.find(
              (route) => route.isInternal && route.routeName == stop.departureLine
            )
          : undefined;

        if (internalRouteInfo) {
-          correctedDepartureLineData = internalRouteInfo;
          departureLineInfo = internalRouteInfo;
        }

@@ -287,7 +308,9 @@ export default defineComponent({
          status: stop.confirmed ? 'confirmed' : stop.stopped ? 'stopped' : 'unconfirmed',

          sceneryName: currentPath.stationName,
-          isSceneryOnline: pathData?.isOnline ?? false
+          isSceneryOnline: pathData?.isOnline ?? false,
+
+          nextPointRef: null
        };

        if (internalRouteInfo) {
@@ -309,6 +332,11 @@ export default defineComponent({

        stopRows.push(rowData);

+        // Assign this row data object to the last one as reference
+        if (i != 0) {
+          stopRows[i - 1].nextPointRef = rowData;
+        }
+
        if (stop.departureLine === currentPath.departureRouteExt) {
          // Reverse search for last scenery checkpoint
          if (pathData?.departureLineData) {
@@ -328,7 +356,7 @@ export default defineComponent({
          currentPath = timetablePath[++currentPathIndex];
          pathData = this.getPathSceneryData(currentPath);
        }
-      }
+      });

      return stopRows;
    },
@@ -13,10 +13,10 @@

    <transition name="dropdown-anim">
      <div class="dropdown_wrapper" v-if="showOptions">
-        <h1 class="text--primary">
+        <h2 class="stats-title text--primary">
          <img src="/images/icon-stats.svg" alt="Open filters icon" height="28" />
          {{ $t('train-stats.title') }}
-        </h1>
+        </h2>

        <hr style="margin: 0.5em 0" />

@@ -229,7 +229,7 @@ export default defineComponent({
@use '../../styles/badge';
@use '../../styles/responsive';

-h1 img {
+.stats-title img {
  vertical-align: text-bottom;
 }

@@ -257,7 +257,7 @@ h3 {
    text-align: center;
  }

-  h1 {
+  .stats-title {
    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>
@@ -196,4 +196,6 @@ export interface TrainSchedulePoint {
  isSBL: boolean;
  sceneryName: string | null;
  isSceneryOnline: boolean;
+
+  nextPointRef: TrainSchedulePoint | null;
 }
@@ -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'
+  });
+}
@@ -22,7 +22,7 @@
      "TRE", "TRS", 
      "TSE", "TSS",
      "THE", "THS",
-      "LPE", 
+      "LPE", "LPS",
      "LTE", "LTS",
      "LSS",
      "LZE", "LZS", 
@@ -56,11 +56,12 @@
    "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",
-    "info-2": "The full app changelog available on <a href='https://github.com/Spythere/stacjownik' target='_blank'>the project's GitHub</a>"
+    "info-2": "The full app changelog available on {link}",
+    "info-2-link-text": "the project's GitHub page"
  },
  "app": {
    "sceneries": "SCENERIES",
@@ -76,15 +77,14 @@
    "tooltip-driver-offline": "Driver is offline",
    "tooltip-scenery-offline": "Scenery is offline",
    "pojazdownik-link-content": "POJAZDOWNIK",
-    "gnr-link-content": "TRAIN ORDERS <br> GENERATOR"
-  },
-  "footer": {
-    "discord": "Stacjownik Discord server"
+    "language-tooltip-content": "JĘZYK / LANGUAGE",
+    "gnr-link-content": "TRAIN ORDERS <br> GENERATOR",
+    "discord-link-content": "STACJOWNIK <br> DISCORD SERVER"
  },
  "categories": {
    "EI": "domestic express",
    "EC": "international express",
-    "EN": "domestic night express",
+    "EN": "international night express",
    "MP": "intervoivodeship bullet",
    "MO": "intervoivodeship regio",
    "MM": "international bullet",
@@ -142,7 +142,7 @@
    "title": "Control type",
    "SPK": "SPK",
    "SCS": "SCS",
-    "SCS-SPK": "SCS/SPK",
+    "SCS-SPK": "SCS + SPK",
    "SPE": "SPE",
    "ręczne": "manual",
    "ręczne+SPK": "manual + SPK",
@@ -153,7 +153,7 @@
    "abbrevs": {
      "SPK": "SPK",
      "SCS": "SCS",
-      "SCS-SPK": "S/S",
+      "SCS-SPK": "S+S",
      "SPE": "SPE",
      "ręczne": "R",
      "ręczne+SPK": "R",
@@ -186,9 +186,11 @@
    "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",
+    "search-includesScenery": "Includes scenery name",
    "search-issuedFrom": "Issuing scenery name",
    "search-via": "Via scenery name",
    "search-terminatingAt": "Terminating scenery name",
@@ -247,7 +249,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",
@@ -271,6 +275,7 @@
    "SCS": "SCS",
    "SCS-R": "SCS + MANUAL",
    "SCS-M": "SCS + MECH.",
+    "SCS-SPK": "SCS + SPK",
    "SPE": "SPE",
    "manual": "MANUAL",
    "mechanical": "MECHANICAL",
@@ -290,30 +295,37 @@
    "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-search": "SCENERY SEARCH:",
-    "sceneries-placeholder": "Enter scenery name...",
-    "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
-    "authors-placeholder": "Enter the author nickname...",
+    "sceneries-placeholder": "Search for scenery",
+    "line-numbers-placeholder": "Line numbers (separated by commas)",
+    "authors-placeholder": "Scenery author",
+    "projects-placeholder": "Scenery project",
    "search-button-title": "SEARCH",
    "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
    "now": "NOW",
    "hour": "h",
    "no-limit": "NO LIMIT",
-    "include-selected": "INCLUDE SELECTED",
    "save": "REMEMBER FILTERS",
    "reset": "RESET FILTERS",
    "close": "CLOSE FILTERS"
@@ -324,6 +336,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",
@@ -337,18 +350,20 @@
    },
    "info": {
      "control-type": "Control type: ",
-      "signals-type": "Signals type: ",
-      "SBL": "This scenery has automatic block signalling (ABS/SBL) system on following routes: ",
+      "signals-type": "Signalling type: ",
+      "SBL": "A scenery with automatic block signalling (ABS/SBL) on routes: ",
      "SUP": "Requires the SUP program (level crossing remote control)",
-      "ASDEK": "Requires the ASDEK program (defect detection of moving rolling stock)",
+      "ASDEK": "ASDEK program available (defect detection of moving rolling stock)",
      "TWB-all": "This scenery has two-way route blockade on all routes",
      "TWB-routes": "This scenery has two-way route blockade on following routes: ",
-      "default": "This scenery is available by default",
-      "non-public": "This scenery is not public",
-      "unavailable": "This scenery is unavailable",
-      "abandoned": "This scenery is no longer supported by its creators",
-      "unknown": "This scenery isn't recognizable right now",
-      "real": "Scenery with real lines: ",
+      "default": "Scenery available in the game package",
+      "nonDefault": "Scenery available to download from the forum site",
+      "req-level": "all dispatcher levels | requries {lvl} dispatcher lvl | requires {lvl} dispatcher lvl",
+      "non-public": "Non-public scenery",
+      "unavailable": "Unavailable scenery",
+      "abandoned": "Abandoned scenery",
+      "unknown": "Unknown scenery",
+      "real": "Scenery with real Polish routes: ",
      "double-track-routes-catenary": "Electrified double-track routes count: ",
      "single-track-routes-catenary": "Electrified single-track routes count: ",
      "double-track-routes-other": "Not electrified double-track routes count: ",
@@ -412,7 +427,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! :/",
@@ -543,7 +558,7 @@
    "no-users": "NO ACTIVE PLAYERS",
    "no-spawns": "NO OPEN SPAWNS",
    "no-scenery": "Oops! This scenery doesn't exist!",
-    "return-btn": "Return",
+    "return-btn": "BACK TO THE MAIN SITE",
    "history-btn": "View the dispatcher history",
    "info-btn": "Return to the scenery view",
    "authors-title": "Scenery author | Scenery authors",
@@ -557,17 +572,20 @@
    "option-active-timetables": "Active timetables",
    "option-timetables-history": "Timetables history PL1",
    "option-dispatchers-history": "Dispatchers history PL1",
-    "timetable-via": "ALL TIMETABLES",
+    "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",
-    "timetable-terminatingAt": "TERMINATES HERE",
+    "timetable-terminatingAt": "ENDS HERE",
    "timetable-issued-date": "Issued",
    "timetable-issued-by": " by:",
-    "timetable-issued-for": " for driver:",
+    "timetable-issued-for": " for:",
    "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",
+    "forum-topic": "Scenery's forum topic",
    "gnr-link": "Train orders generator",
    "pragotron-link": "Timetable pallet board",
    "tablice-link": "Timetable summary board <br> (by Thundo)",
@@ -589,21 +607,67 @@
    "terminated": "Timetable terminated",
    "begins": "BEGINS HERE",
    "terminates": "TERMINATES\nHERE",
-    "from": "FROM",
-    "to": "TO",
-    "desc-arriving": "The train is not here yet.\nIt's going to come from: <b>{prevStationName} (route {prevDepartureLine})</b>",
-    "desc-online": "The train is at the station.\nIt's going to leave to: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-stopped": "The train is at the station and is stopped.\nIt's going to leave towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-next-arrival": "Leaves towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-departed": "The train is at the station and it's been departed.\nLeaves towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
-    "desc-departed-ends": "The train is at the station and it's been departed.\nLeaves towards station: <b>{nextStationName}</b>",
-    "desc-departed-away": "The train has been departed to:\n<b>{nextStationName} (route {nextArrivalLine})</b>",
+    "from": "Arrives from",
+    "to": "Departs to",
+    "desc-beginning": "Outside scenery / begins here",
+    "desc-arriving": "Arrives from: <b><u>{prevStationName} ({prevDepartureLine})</u></b>",
+    "desc-online": "On scenery / direction: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-stopped": "On scenery - stopped / direction: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-next-arrival": "On scenery / direction: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed": "On scenery / departed to: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed-ends": "On scenery / departed to: <b><u>{nextStationName}</u></b>",
+    "desc-departed-away": "Departed to: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
    "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 :("
+    }
  }
-}
+}
@@ -56,11 +56,12 @@
    "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",
-    "info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/stacjownik' target='_blank'>GitHubie projektu</a>"
+    "info-2": "Pełny changelog dostępny na {link}",
+    "info-2-link-text": "GitHubie projektu"
  },
  "app": {
    "sceneries": "SCENERIE",
@@ -73,15 +74,14 @@
    "tooltip-driver-offline": "Maszynista offline",
    "tooltip-scenery-offline": "Sceneria offline",
    "pojazdownik-link-content": "POJAZDOWNIK",
-    "gnr-link-content": "GENERATOR <br> ROZKAZÓW PISEMNYCH"
-  },
-  "footer": {
-    "discord": "Serwer Discord Stacjownika"
+    "language-tooltip-content": "JĘZYK / LANGUAGE",
+    "gnr-link-content": "GENERATOR <br> ROZKAZÓW PISEMNYCH",
+    "discord-link-content": "SERWER DISCORD <br> STACJOWNIKA"
  },
  "categories": {
    "EI": "ekspres krajowy",
    "EC": "ekspres międzynarodowy",
-    "EN": "ekspres krajowy nocny",
+    "EN": "ekspres międzynarodowy nocny",
    "MP": "międzywojewódzki pospieszny",
    "MO": "międzywojewódzki osobowy",
    "MM": "międzynarodowy pospieszny",
@@ -139,7 +139,7 @@
    "title": "Sterowanie",
    "SPK": "SPK",
    "SCS": "SCS",
-    "SCS-SPK": "SCS/SPK",
+    "SCS-SPK": "SCS + SPK",
    "SPE": "SPE",
    "ręczne": "ręczne",
    "ręczne+SPK": "ręczne z SPK",
@@ -150,7 +150,7 @@
    "abbrevs": {
      "SPK": "SPK",
      "SCS": "SCS",
-      "SCS-SPK": "S/S",
+      "SCS-SPK": "S+S",
      "SPE": "SPE",
      "ręczne": "R",
      "ręczne+SPK": "R",
@@ -183,9 +183,11 @@
    "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",
+    "search-includesScenery": "Zawiera scenerię",
    "search-issuedFrom": "Sceneria początkowa",
    "search-via": "Przez scenerię",
    "search-terminatingAt": "Sceneria końcowa",
@@ -245,7 +247,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",
@@ -269,6 +273,7 @@
    "SCS": "SCS",
    "SCS-R": "SCS + RĘCZNE",
    "SCS-M": "SCS + MECH.",
+    "SCS-SPK": "SCS + SPK",
    "SPE": "SPE",
    "manual": "RĘCZNE",
    "SUP": "SUP (RASP-UZK)",
@@ -288,30 +293,37 @@
    "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-search": "WYSZUKAJ SCENERIĘ:",
-    "sceneries-placeholder": "Wpisz nazwę scenerii...",
-    "authors-search": "WYSZUKAJ AUTORA (uwzględnia inne filtry):",
-    "authors-placeholder": "Wpisz nick autora...",
+    "sceneries-placeholder": "Wyszukaj scenerię",
+    "line-numbers-placeholder": "Numery linii (oddzielone przecinkami)",
+    "authors-placeholder": "Autor scenerii",
+    "projects-placeholder": "Projekt scenerii",
    "search-button-title": "SZUKAJ",
    "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
    "now": "TERAZ",
    "hour": " godz.",
    "no-limit": "BEZ LIMITU",
-    "include-selected": "POKAŻ ZAZNACZONE",
    "save": "ZAPAMIĘTAJ FILTRY",
    "reset": "RESETUJ FILTRY",
    "close": "ZAMKNIJ FILTRY"
@@ -322,6 +334,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",
@@ -338,8 +351,10 @@
      "signals-type": "Sygnalizacja: ",
      "SBL": "Sceneria posiada SBL na szlakach: ",
      "SUP": "Wymaga programu SUP do kontroli systemu RASP-UZK",
-      "ASDEK": "Wymaga programu ASDEK do detekcji stanów awaryjnych taboru w ruchu",
+      "ASDEK": "Dostępny program ASDEK do detekcji stanów awaryjnych taboru w ruchu",
      "default": "Sceneria dostępna domyślnie w paczce z grą",
+      "nonDefault": "Sceneria dostępna do pobrania z forum symulatora",
+      "req-level": "ogólnodostępna | od {lvl} poz. DR | od {lvl} poz. DR",
      "non-public": "Sceneria niepubliczna",
      "unavailable": "Sceneria niedostępna",
      "abandoned": "Sceneria wycofana z rozgrywki",
@@ -399,7 +414,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! :/",
@@ -529,7 +544,7 @@
    "no-users": "BRAK AKTYWNYCH GRACZY",
    "no-spawns": "BRAK OTWARTYCH SPAWNÓW",
    "no-scenery": "Ups! Ta sceneria nie istnieje!",
-    "return-btn": "Powrót",
+    "return-btn": "POWRÓT DO STRONY GŁÓWNEJ",
    "history-btn": "Przejdź do widoku historii dyżurnych ruchu",
    "info-btn": "Wróć do widoku scenerii",
    "authors-title": "Autor scenerii | Autorzy scenerii",
@@ -543,17 +558,20 @@
    "option-active-timetables": "Aktywne rozkłady jazdy",
    "option-timetables-history": "Historia rozkładów PL1",
    "option-dispatchers-history": "Historia dyżurów PL1",
-    "timetable-via": "WSZYSTKIE RJ",
+    "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",
    "timetable-terminatingAt": "KOŃCZY BIEG",
-    "timetable-issued-date": "Wystawiony",
+    "timetable-issued-date": "Wystawiony: ",
    "timetable-issued-by": " przez:",
-    "timetable-issued-for": " dla maszynisty:",
+    "timetable-issued-for": " dla:",
    "dispatcher-rate": "Ocena:",
    "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)",
@@ -575,19 +593,67 @@
    "terminated": "Rozkład jazdy zakończony",
    "begins": "ROZPOCZYNA\nBIEG",
    "terminates": "KOŃCZY BIEG",
-    "from": "Z",
-    "to": "DO",
-    "desc-arriving": "Pociągu nie ma jeszcze na tej scenerii.\nPrzyjedzie z: <b>{prevStationName} (szlak {prevDepartureLine})</b>",
-    "desc-online": "Pociąg jest na tej scenerii.\nOdjedzie w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-stopped": "Pociąg jest na tej scenerii i odbywa postój.\nOdjedzie w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-next-arrival": "Odjeżdża do:\n<b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-departed": "Pociąg jest na tej scenerii i został odprawiony.\nOdjeżdża w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
-    "desc-departed-ends": "Pociąg jest na tej scenerii i został odprawiony.\nOdjechał w kierunku stacji: <b>{nextStationName}</b>",
-    "desc-departed-away": "Pociąg został odprawiony i odjechał do:\n<b>{nextStationName} (szlak {nextArrivalLine})</b>",
+    "from": "Przyjedzie z",
+    "to": "Odjeżdża do",
+    "desc-beginning": "Poza scenerią / rozpoczyna bieg",
+    "desc-arriving": "Przyjedzie z: <b><u>{prevStationName} ({prevDepartureLine})</u></b>",
+    "desc-online": "Na scenerii / kierunek: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-stopped": "Na scenerii - postój / kierunek: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-next-arrival": "Na scenerii / kierunek: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed": "Na scenerii / odprawiony do: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
+    "desc-departed-ends": "Na scenerii / odprawiony do: <b><u>{nextStationName}</u></b>",
+    "desc-departed-away": "Odprawiony do: <b><u>{nextStationName} ({nextArrivalLine})</u></b>",
    "desc-end": "Pociąg kończy bieg",
-    "desc-terminated": "Pociąg skoń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 = {
@@ -31,15 +52,13 @@ export const initFilters = {
  mechanical: false,
  'SPK-M': false,
  'SCS-M': false,
+  'SCS-SPK': false,
  modern: false,
  semaphores: false,
  historical: false,
  mixed: false,
  SBL: false,
  PBL: false,
-  'include-selected': false,
-  'no-1track': false,
-  'no-2track': false,
  free: true,
  occupied: false,
  nonPublic: false,
@@ -59,31 +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,
-  minTwoWayCatenary: 0,
-  minOneWayInt: 0,
  minOneWayCatenaryInt: 0,
+  minOneWayInt: 0,
+  minTwoWay: 0,
+  minTwoWayCatenary: 0,
+  minTwoWayInt: 0,
  minTwoWayCatenaryInt: 0,
-  // minTwoWay: 0,
-  authors: ''
+  maxOneWay: 5,
+  maxOneWayCatenary: 5,
+  maxOneWayInt: 5,
+  maxOneWayCatenaryInt: 5,
+  maxTwoWay: 5,
+  maxTwoWayCatenary: 5,
+  maxTwoWayInt: 5,
+  maxTwoWayCatenaryInt: 5,
+  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: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minOneWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
-  // { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
-  // { id: 'minTwoWayInt', 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: 10 },
+    { id: 'maxVmax', minRange: 0, maxRange: 200, step: 10 }
+  ],
+  level: [
+    { id: 'minLevel', minRange: 0, maxRange: 20, step: 1 },
+    { id: 'maxLevel', minRange: 0, maxRange: 20, step: 1 }
+  ],
+  routeOneWay: [
+    { id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 },
+    { id: 'maxOneWay', minRange: 0, maxRange: 5, step: 1 }
+  ],
+  routeOneWayCatenary: [
+    { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
+    { id: 'maxOneWayCatenary', minRange: 0, maxRange: 5, step: 1 }
+  ],
+  routeOneWayInternal: [
+    { id: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 },
+    { id: 'maxOneWayInt', minRange: 0, maxRange: 5, step: 1 }
+  ],
+  routeOneWayInternalCatenary: [
+    {
+      id: 'minOneWayCatenaryInt',
+      minRange: 0,
+      maxRange: 5,
+      step: 1
+    },
+    {
+      id: 'maxOneWayCatenaryInt',
+      minRange: 0,
+      maxRange: 5,
+      step: 1
+    }
+  ],
+  routeTwoWay: [
+    { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
+    { id: 'maxTwoWay', minRange: 0, maxRange: 5, step: 1 }
+  ],
+  routeTwoWayCatenary: [
+    { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
+    { id: 'maxTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 }
+  ],
+  routeTwoWayInternal: [
+    { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 },
+    { id: 'maxTwoWayInt', minRange: 0, maxRange: 5, step: 1 }
+  ],
+  routeTwoWayInternalCatenary: [
+    {
+      id: 'minTwoWayCatenaryInt',
+      minRange: 0,
+      maxRange: 5,
+      step: 1
+    },
+    {
+      id: 'maxTwoWayCatenaryInt',
+      minRange: 0,
+      maxRange: 5,
+      step: 1
+    }
+  ]
+};
+
 export type StationFilter = keyof typeof initFilters;
 export type StationFilterSection = (typeof sections)[number];

@@ -95,9 +194,22 @@ export const filtersSections: Record<StationFilterSection, StationFilter[]> = {
  stationType: ['junction', 'nonJunction'],
  access: ['nonPublic', 'unavailable', 'abandoned'],
  addons: ['SUP', 'ASDEK', 'noSUP', 'noASDEK'],
-  control: ['SPK', 'SCS', 'SPE', 'SPK-M', 'SCS-M', 'mechanical', 'SPK-R', 'SCS-R', 'manual'],
+  control: [
+    'SPK',
+    'SCS',
+    'SPE',
+    'SCS-SPK',
+    'SPK-M',
+    'SCS-M',
+    'mechanical',
+    'SPK-R',
+    'SCS-R',
+    '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>) {
@@ -116,11 +228,12 @@ export function setupFilters(currentFilters: Record<string, any>) {
  });
 }

-export function getChangedFilters(currentFilters: Record<string, any>): string[] {  
+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()
    ) ?? []
  );
 }
@@ -1,45 +1,10 @@
 import { defineComponent } from 'vue';
 import { Train, TrainStop } from '../typings/common';
+import { useApiStore } from '../store/apiStore';

 export default defineComponent({
  data: () => ({
-    STATS: {
-      main: [
-        {
-          name: 'speed',
-          unit: 'km/h'
-        },
-        {
-          name: 'length',
-          unit: 'm'
-        },
-        {
-          name: 'mass',
-          unit: 't',
-          multiplier: 0.001
-        }
-      ],
-
-      position: [
-        {
-          name: 'scenery',
-          prop: 'currentStationName'
-        },
-        {
-          name: 'route',
-          prop: 'connectedTrack'
-        },
-        {
-          name: 'signal',
-          prop: 'signal'
-        },
-        {
-          name: 'distance',
-          prop: 'distance',
-          unit: 'm'
-        }
-      ]
-    }
+    apiStore: useApiStore()
  }),

  methods: {
@@ -150,6 +115,74 @@ export default defineComponent({
      if (distance < 1000) return `${distance}m`;

      return `${(distance / 1000).toPrecision(2)}km`;
+    },
+
+    getStockSpeedLimit(stockList: string[], trainMass: number) {
+      let isPassenger = true;
+
+      // Check the whole consist speed limit
+      const vehicleMaxSpeed = stockList.reduce((acc, stockName, i) => {
+        if (!this.apiStore.vehiclesData) return acc;
+
+        const [vehicleName, vehicleCargo] = stockName.split(':');
+
+        const vehicle = this.apiStore.vehiclesData.vehicles.find((v) => v.name == vehicleName);
+
+        if (!vehicle) return acc;
+
+        const vehicleGroup = this.apiStore.vehiclesData.vehicleGroups.find(
+          (g) => g.id == vehicle.vehicleGroupsId
+        );
+
+        if (!vehicleGroup) return acc;
+
+        let vehicleSpeed = vehicleGroup.speed;
+
+        if (vehicle.type == 'wagon-freight') {
+          isPassenger = false;
+
+          if (vehicleCargo !== undefined && vehicleGroup.speedLoaded) {
+            vehicleSpeed = vehicleGroup.speedLoaded;
+          }
+        }
+
+        return Math.min(vehicleSpeed, acc);
+      }, Infinity);
+
+      // Check the head vehicle speed limit
+      const headLocoName = stockList[0];
+
+      const headLocoVehicle = this.apiStore.vehiclesData!.vehicles.find(
+        (v) => v.name == headLocoName
+      );
+
+      const headLocoVehicleGroup = this.apiStore.vehiclesData!.vehicleGroups.find(
+        (g) => g.id == headLocoVehicle?.vehicleGroupsId
+      );
+
+      if (!headLocoVehicleGroup) return vehicleMaxSpeed;
+
+      // Omit speed check for head vehicle if there's no data for it
+      if (!headLocoName || !headLocoVehicle || !headLocoVehicleGroup.massSpeeds)
+        return vehicleMaxSpeed;
+
+      const massSpeeds =
+        headLocoVehicleGroup.massSpeeds[
+          stockList.length == 1 ? 'none' : isPassenger ? 'passenger' : 'cargo'
+        ];
+
+      // Omit speed check if there's no data on mass speeds
+      if (!massSpeeds) return vehicleMaxSpeed;
+
+      // Number type for locomotives alone
+      if (typeof massSpeeds === 'number') return massSpeeds;
+
+      // Record type for passenger or cargo, find the closest range
+      const massKey = Object.keys(massSpeeds).findLast((massKey) => trainMass >= Number(massKey));
+
+      const massMaxSpeed = massKey ? massSpeeds[massKey] : Infinity;
+
+      return Math.min(massMaxSpeed, vehicleMaxSpeed);
    }
  }
 });
@@ -36,7 +36,10 @@ const routes: Array<RouteRecordRaw> = [
    props: (route) => ({
      region: route.query.region,
      station: route.query.station
-    })
+    }),
+    beforeEnter: (to, from) => {
+      to.meta['prevPath'] = from.fullPath;
+    }
  },
  {
    path: '/journal',
@@ -58,6 +61,11 @@ const routes: Array<RouteRecordRaw> = [
      region: route.query.region
    })
  },
+  {
+    path: '/profile',
+    name: 'PlayerProfileView',
+    component: () => import('../views/PlayerProfileView.vue')
+  },
  {
    path: '/:catchAll(.*)',
    redirect: '/'
@@ -67,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: `.scenery-left`, behavior: 'instant', top: 3 };
+      return { el: `.app_main`, behavior: 'smooth', top: 0 };

    if (savedPosition) return savedPosition;
  },
@@ -7,17 +7,21 @@ import axios, { AxiosInstance } from 'axios';
 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,
-    vehiclesData: undefined as API.Vehicles.Response | undefined,
+    vehiclesData: undefined as API.VehiclesData.Response | undefined,

    donatorsData: [] as API.Donators.Response,
    sceneryData: [] as StationJSONData[],

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

@@ -52,26 +56,29 @@ 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 {
@@ -111,7 +118,7 @@ export const useApiStore = defineStore('apiStore', {

    async fetchVehiclesInfo() {
      try {
-        const response = await this.client!.get<API.Vehicles.Response>('api/getVehicles');
+        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;
@@ -119,6 +126,21 @@ export const useApiStore = defineStore('apiStore', {
        this.dataStatuses.vehicles = Status.Data.Error;
        console.error('Ups! Wystąpił błąd podczas pobierania informacji o pojazdach:', error);
      }
+    },
+
+    async fetchDailyStats() {
+      try {
+        const res: API.DailyStats.Response = await (
+          await this.client!.get('api/getDailyStats')
+        ).data;
+
+        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;
+      }
    }
  }
 });
@@ -11,8 +11,11 @@ import {
 } from '../typings/common';
 import { useApiStore } from './apiStore';
 import { MainStoreState } from './typings';
+import i18n from '../i18n';
+import StorageManager from '../managers/storageManager';

 const checkpointsTrains: Map<string, CheckpointTrain[]> = new Map();
+const unknownSceneryCheckpoints: Map<string, Set<string>> = new Map();
 const sceneriesTrains: Map<string, Train[]> = new Map();

 export const useMainStore = defineStore('mainStore', {
@@ -23,25 +26,28 @@ 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'
    }) as MainStoreState,

+  actions: {
+    changeLocale(localeName: string) {
+      (i18n.global.locale.value as any) = localeName;
+      this.currentLocale = localeName;
+
+      StorageManager.setStringValue('lang', localeName);
+    }
+  },
+
  getters: {
    trainList(): Train[] {
      const apiStore = useApiStore();

      checkpointsTrains.clear();
      sceneriesTrains.clear();
+      unknownSceneryCheckpoints.clear();

      const dateNow = new Date();

@@ -71,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,
@@ -133,8 +140,13 @@ export const useMainStore = defineStore('mainStore', {

          // Checkpoints trains map
          if (trainObj.timetableData) {
-            let currentSceneryIndex = 0;
            const timetablePath = trainObj.timetableData.timetablePath;
+            let currentSceneryIndex = 0;
+
+            let currentSceneryData: Station | null =
+              this.stationList.find(
+                (s) => s.name == timetablePath[currentSceneryIndex].stationName
+              ) ?? null;

            trainObj.timetableData.followingStops.forEach((stop, i) => {
              if (/strong|podg|pe/.test(stop.stopName)) {
@@ -153,16 +165,41 @@ export const useMainStore = defineStore('mainStore', {
                  timetablePathElement: timetablePath[currentSceneryIndex]
                };

+                // Adding missing sceneries checkpoints as a fallback when scenery data is missing (and "generalInfo" is unavailable)
+                if (!currentSceneryData) {
+                  const sceneryCheckpointsSet = unknownSceneryCheckpoints.get(
+                    checkpointTrain.timetablePathElement.stationName
+                  );
+
+                  if (!sceneryCheckpointsSet) {
+                    unknownSceneryCheckpoints.set(
+                      checkpointTrain.timetablePathElement.stationName,
+                      new Set([stop.stopNameRAW])
+                    );
+                  } else {
+                    sceneryCheckpointsSet.add(stop.stopNameRAW);
+                  }
+                }
+
+                // Adding trains to their corresponding checkpoints
                if (checkpointsTrains.has(stop.stopNameRAW.toLowerCase())) {
                  checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [
                    ...checkpointsTrains.get(stop.stopNameRAW.toLowerCase())!,
                    checkpointTrain
                  ]);
-                } else checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [checkpointTrain]);
+                } else {
+                  checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [checkpointTrain]);
+                }
              }

-              if (timetablePath[currentSceneryIndex].departureRouteExt == stop.departureLine)
+              if (timetablePath[currentSceneryIndex].departureRouteExt == stop.departureLine) {
                currentSceneryIndex++;
+
+                currentSceneryData =
+                  this.stationList.find(
+                    (s) => s.name == timetablePath[currentSceneryIndex].stationName
+                  ) ?? null;
+              }
            });
          }

@@ -212,6 +249,7 @@ export const useMainStore = defineStore('mainStore', {
            dispatcherIsSupporter: false,
            dispatcherStatus: Status.ActiveDispatcher.FREE,
            dispatcherTimestamp: -1,
+            dispatcherLanguageId: -1,

            isOnline: false,

@@ -222,7 +260,9 @@ export const useMainStore = defineStore('mainStore', {
              all: 0,
              confirmed: 0,
              unconfirmed: 0
-            }
+            },
+
+            missingCheckpoints: []
          });
        });

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

          isOnline: scenery.isOnline == 1,

@@ -266,7 +307,9 @@ export const useMainStore = defineStore('mainStore', {
            all: 0,
            confirmed: 0,
            unconfirmed: 0
-          }
+          },
+
+          missingCheckpoints: []
        });

        return list;
@@ -277,7 +320,7 @@ export const useMainStore = defineStore('mainStore', {
      for (let i = 0, n = allActiveSceneries.length; i < n; i++) {
        const scenery = allActiveSceneries[i];

-        const station = this.stationList.find((s) => s.name === scenery.name);
+        let station = this.stationList.find((s) => s.name === scenery.name);

        let checkpointsSet: Set<string> = new Set();

@@ -293,6 +336,18 @@ export const useMainStore = defineStore('mainStore', {
        scenery.stationTrains =
          sceneriesTrains.get(scenery.name)?.filter((sc) => sc.region == this.region.id) ?? [];

+        // Missing checkpoints as a fallback for sceneries without generalInfo & checkpoints property
+        const missingCheckpointsToAdd = unknownSceneryCheckpoints.get(scenery.name);
+
+        if (missingCheckpointsToAdd) {
+          [...missingCheckpointsToAdd].forEach((cp) => {
+            if (cp.toLowerCase() == scenery.name.toLowerCase()) return;
+
+            checkpoints.push(cp);
+            scenery.missingCheckpoints.push(cp);
+          });
+        }
+
        const uniqueTrainIds: string[] = [];
        checkpoints.forEach((cp) => {
          const scheduledTrains = checkpointsTrains.get(cp.toLowerCase());
@@ -336,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 =
@@ -355,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
@@ -370,7 +434,6 @@ export const useMainStore = defineStore('mainStore', {

        return {
          name: scenery.name,
-
          generalInfo: {
            ...scenery,
            authors: scenery.authors?.split(',').map((a) => a.trim()),
@@ -385,7 +448,7 @@ export const useMainStore = defineStore('mainStore', {
    },

    allStationInfo(): Station[] {
-      const onlineUnsavedStations = this.activeSceneryList
+      const onlineUnsavedStations: Station[] = this.activeSceneryList
        .filter(
          (scenery) =>
            this.stationList.findIndex((st) => st.name == scenery.name) == -1 &&
@@ -8,7 +8,8 @@ export const tooltipKeys = [
  'VehiclePreviewTooltip',
  'SpawnsTooltip',
  'UsersTooltip',
-  'HtmlTooltip'
+  'HtmlTooltip',
+  'TrainInfoTooltip'
 ] as const;

 export type TooltipType = (typeof tooltipKeys)[number];
@@ -33,6 +34,7 @@ export const useTooltipStore = defineStore('tooltipStore', {
      this.content = '';
    },

+    // Tooltip handler reading attributes of DOM elements
    handle(e: MouseEvent) {
      const targetEl = e
        .composedPath()
@@ -44,6 +46,7 @@ export const useTooltipStore = defineStore('tooltipStore', {
        return;
      }

+      // Tooltip content is a string but may be parsed to objects / html in corresponding tooltip type components
      const tooltipType = targetEl.getAttribute('data-tooltip-type');
      const tooltipContent = targetEl.getAttribute('data-tooltip-content');

@@ -5,11 +5,6 @@ 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;
@@ -23,6 +18,7 @@ export interface StationJSONData {
  project: string;
  projectUrl: string;
  hash: string;
+  hidden: boolean;

  reqLevel: number;

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

 // List animation
@@ -135,3 +135,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;
+  }
+}
@@ -78,7 +78,7 @@ h1.option-title {
  display: flex;
  gap: 0.5em;
  width: 100%;
-  margin-top: 1em;
+  margin-top: 0.5em;

  button {
    width: 100%;
@@ -40,10 +40,3 @@
  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;
@@ -89,7 +94,8 @@ select {
  font-size: 1em;
 }

-input {
+input,
+select {
  background: none;
  color: white;
  font-size: 1em;
@@ -225,6 +231,12 @@ ul {
  }
 }

+.font {
+  &--italic {
+    font-style: italic;
+  }
+}
+
 button,
 a.a-button {
  cursor: pointer;
@@ -297,48 +309,6 @@ a.a-button {
  }
 }

-.return-btn {
-  display: none;
-  justify-content: center;
-  align-items: center;
-
-  position: fixed;
-  right: 2.5rem;
-  bottom: 4rem;
-
-  z-index: 100;
-
-  width: 3.5rem;
-
-  font-size: 3rem;
-
-  background-color: #555;
-  outline: 3px solid #222;
-  color: white;
-
-  border-radius: 50%;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #3c3c3c;
-  }
-
-  img {
-    width: 1.3em;
-  }
-
-  @include responsive.smallScreen {
-    bottom: 1em;
-    right: 0;
-    left: 50%;
-
-    width: 1em;
-    height: 1em;
-
-    transform: translateX(-50%);
-  }
-}
-
 // Basic tooltip
 [data-tooltip] {
  cursor: help;
@@ -366,19 +336,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);
@@ -394,3 +351,22 @@ a.a-button {
  background-color: #aaa;
  margin: 0.5em 0;
 }
+
+.g-checkbox {
+  position: relative;
+  display: inline-block;
+
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+  }
+}
@@ -36,6 +36,6 @@
  }

  &.SCS-SPK {
-    color: white;
+    color: #aefff8;
  }
 }
--- a/Show More
+++ b/Show More