Merge pull request #158 from Spythere/development

v1.33.0
chore(scenery): added scenery's forum link to general info
2026-05-03 13:28: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
44 changed files with 1360 additions and 1104 deletions
@@ -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)

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

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

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

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

    <link
      rel="preload"
@@ -77,13 +83,13 @@
    <link rel="preload" as="image" href="/images/icon-timetableUnconfirmed.svg" />
    <link rel="preload" as="image" href="/images/icon-timetableConfirmed.svg" />
    <link rel="preload" as="image" href="/images/icon-discord.png" />
-    
+
    <link rel="prefetch" as="image" href="/images/icon-arrow-asc.svg" />
    <link rel="prefetch" as="image" href="/images/icon-diamond.svg" />

    <!-- Static OpenGraph meta -->
    <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
-    <meta property="og:url" content="https://stacjownik-td2.web.app/" />
+    <meta property="og:url" content="https://stacjownik-td2.spythere.eu/" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Stacjownik" />
    <meta
@@ -1,6 +1,6 @@
 {
  "name": "stacjownik",
-  "version": "1.32.0",
+  "version": "1.33.0",
  "private": true,
  "type": "module",
  "scripts": {
@@ -50,7 +50,6 @@ import AppWelcomeCard from './components/App/AppWelcomeCard.vue';

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

 export default defineComponent({
  components: {
@@ -92,7 +91,6 @@ export default defineComponent({
      this.setupOfflineHandling();
      this.checkAppVersion();
      this.handleQueries();
-      this.handleMigrateInfo();

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

    async checkAppVersion() {
@@ -165,13 +159,6 @@ export default defineComponent({
      this.apiStore.connectToAPI();
    },

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

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

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

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

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

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

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

+.content-title {
+  color: var(--clr-primary);
+  color: transparent;
+
+  background: var(--clr-primary);
+  background: linear-gradient(90deg, var(--clr-primary) 30%, #ffffff 90%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  text-shadow: var(--clr-primary) 0 0 10px;
+}
+
 .no-features {
  text-align: center;
 }
@@ -13,7 +13,7 @@
      <div class="actions actions-right">
        <a
          class="a-button btn--filled btn--image"
-          :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
+          :href="`https://srjp-td2.spythere.eu/?id=${chosenTrain.id}`"
          target="_blank"
        >
          <span class="hidable">
@@ -63,7 +63,7 @@
      </div>
    </transition>

-    <StockList :trainStockList="chosenTrain.stockList" />
+    <StockList :trainStockList="chosenTrain.stockList" :key="chosenTrain.id" :showPreviews="true" />
    <TrainSchedule :train="chosenTrain" />
  </div>
 </template>
@@ -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() {
@@ -11,7 +11,8 @@
        :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
        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"
@@ -20,13 +21,14 @@
  </div>
 </template>

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

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

 const thumbRef = ref(null) as Ref<HTMLElement | null>;
@@ -74,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>
@@ -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,9 +330,16 @@ export default defineComponent({
 <style lang="scss" scoped>
@use '../../styles/dropdown';
@use '../../styles/dropdown-filters';
+@use '../../styles/responsive';

-.filters-options > .dropdown_wrapper {
-  height: calc(100vh - 19em);
-  min-height: 500px;
+.dropdown_wrapper {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  overflow: hidden;
+  max-height: 530px;
+}
+
+.options_content {
+  overflow: auto;
 }
 </style>
@@ -129,6 +129,7 @@
                  : stockHistory[currentHistoryIndex].stockString
                ).split(';')
              "
+              :showPreviews="true"
            />
          </div>
        </div>
@@ -25,7 +25,7 @@
 </template>

 <script lang="ts" setup>
-import { computed, onMounted, PropType, ref, useTemplateRef } from 'vue';
+import { PropType, ref, useTemplateRef } from 'vue';
 import { Status } from '../../typings/common';
 import Loading from '../Global/Loading.vue';
 import { Td2API } from '../../typings/api';
@@ -36,10 +36,6 @@ const props = defineProps({
  }
 });

-onMounted(() => {
-  console.log(avatarImageRef.value);
-});
-
 const avatarImageRef = useTemplateRef('avatarImageRef');
 const avatarLoadingStatus = ref<Status.Data>(Status.Data.Loading);

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

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

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

    <div class="scenery-hash" v-if="onlineScenery?.hash">#{{ onlineScenery.hash }}</div>
@@ -61,15 +57,14 @@ function onReturnButtonClick() {
 .btn-return {
  $bgColor: #2b2b2b;
  background-color: $bgColor;
-  margin-bottom: 0.5em;
-
-  img {
-    width: 2em;
-  }

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

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

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

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

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

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

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

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

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

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

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

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

+.info-divider {
+  margin: 1em 0;
+  height: 3px;
+  background-color: #5b5b5b;
+}
+
 .scenery-topic a {
  font-weight: bold;
 }
@@ -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 {
@@ -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>
@@ -1,247 +1,18 @@
 <template>
  <section class="scenery-timetable">
-    <div class="timetable-header">
-      <h3>
-        <img src="/images/icon-timetable.svg" alt="icon-timetable" />
-        <span>{{ $t('scenery.timetables') }}</span>
+    <SceneryTimetableHeader
+      :station="station"
+      :onlineScenery="onlineScenery"
+      :chosenCheckpoint="chosenCheckpoint"
+      :showStockThumbnails="showStockThumbnails"
+    />

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

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

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

 export default defineComponent({
  name: 'SceneryTimetable',

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

  mixins: [dateMixin, routerMixin, trainCategoryMixin],

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

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

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

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

 <style lang="scss" scoped>
-@use '../../styles/responsive';
-@use '../../styles/animations';
-@use '../../styles/badge';
-
 .scenery-timetable {
+  display: grid;
  height: 100%;
-  overflow-y: scroll;
-  padding: 0 0.5em;
-}
-
-.timetable-header {
-  position: sticky;
-  top: 0;
-  z-index: 99;
-
-  background-color: #181818;
-
-  padding: 0.5em;
-
-  img {
-    width: 25px;
-    vertical-align: middle;
-  }
-
-  h3 {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    align-items: center;
-
-    gap: 0.5em;
-    font-size: 1.3em;
-  }
-}
-
-.header_links {
-  display: flex;
-  gap: 0.25em;
-  margin-left: 0.5em;
-}
-
-.timetable {
-  &-count {
-    margin-left: 0.5em;
-  }
-
-  &-item {
-    margin: 0.5em auto;
-    padding: 0.5em;
-    max-width: 1100px;
-
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 1.2em 0.5em;
-
-    overflow: hidden;
-
-    background: #353535;
-
-    z-index: 10;
-
-    &.empty {
-      padding: 1rem;
-      font-size: 1.2em;
-      color: #bbb;
-    }
-  }
-
-  &-general {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    text-align: left;
-  }
-
-  &-schedule {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.2em;
-    align-items: center;
-
-    width: 100%;
-    max-width: 400px;
-    margin: 0 auto;
-  }
-}
-
-.timetable-checkpoints {
-  display: flex;
-  justify-content: center;
-  gap: 0.5em;
-
-  flex-wrap: wrap;
-  font-size: 1.1em;
-
-  margin-top: 0.5em;
-}
-
-.checkpoint-item {
-  color: #aaa;
-  display: inline;
-
-  &:hover {
-    color: white;
-  }
-
-  &.current {
-    font-weight: bold;
-    color: var(--clr-primary);
-  }
-}
-
-.timetable-list {
-  position: relative;
-}
-
-.general-info {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-}
-
-.info-train {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25em;
-}
-
-.info-train > .train-badge {
-  font-size: 0.85em;
-}
-
-.info-number {
-  color: var(--clr-primary);
-}
-
-.info-route {
-  width: 100%;
-  margin-top: 0.25em;
-}
-
-.stop-comments-icon > img {
-  width: 1.3em;
-  vertical-align: top;
-}
-
-.schedule {
-  &-arrival,
-  &-departure {
-    font-size: 1.15em;
-  }
-
-  &-stop {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.5em;
-    align-items: end;
-
-    .stop-connection {
-      font-size: 0.95em;
-    }
-
-    .stop-time {
-      position: relative;
-      inline-size: max-content;
-      align-self: center;
-      font-size: 0.9em;
-
-      color: var(--clr-primary);
-
-      &::after {
-        content: '\027F6';
-        display: block;
-        font-size: 2.2em;
-        line-height: 0.65em;
-      }
-    }
-  }
-}
-
-.arrival-time.begins,
-.departure-time.terminates {
-  font-size: 0.85em;
-}
-
-@include responsive.smallScreen {
-  .timetable-item {
-    grid-template-columns: 1fr;
-  }
+  overflow: hidden;
+  grid-template-rows: auto 1fr;
 }
 </style>
@@ -0,0 +1,54 @@
+<template>
+  <div class="scenery-timetable-header">
+    <h3>
+      <img src="/images/icon-timetable.svg" alt="icon-timetable" />
+      <span>{{ $t('scenery.timetables') }}</span>
+
+      <span>
+        <span class="text--primary">{{ onlineScenery?.scheduledTrainCount.all ?? 0 }}</span>
+        <span> / </span>
+        <span class="text--grayed">
+          {{ onlineScenery?.scheduledTrainCount.confirmed ?? 0 }}
+        </span>
+      </span>
+    </h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, PropType } from 'vue';
+import { Station, ActiveScenery } from '../../../typings/common';
+import { useMainStore } from '../../../store/mainStore';
+
+const props = defineProps({
+  station: {
+    type: Object as PropType<Station>
+  },
+
+  onlineScenery: {
+    type: Object as PropType<ActiveScenery>
+  },
+
+  chosenCheckpoint: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.scenery-timetable-header {
+  background-color: #181818;
+  padding: 0.5em;
+}
+
+h3 {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: center;
+
+  gap: 0.5em;
+  font-size: 1.3em;
+}
+</style>
@@ -0,0 +1,567 @@
+<template>
+  <div class="scenery-timetable-list">
+    <!-- Checkpoints derived from station data -->
+
+    <div
+      class="timetable-checkpoints"
+      v-if="station?.generalInfo && station.generalInfo.checkpoints.length > 0"
+    >
+      <template v-for="(ch, i) in station.generalInfo.checkpoints" :key="i">
+        <template v-if="i > 0">&bull;</template>
+        <router-link
+          class="checkpoint-item"
+          :class="{ current: chosenCheckpoint === ch }"
+          :to="`/scenery?station=${station.name}&checkpoint=${ch}`"
+        >
+          {{ ch }}
+        </router-link>
+      </template>
+    </div>
+
+    <!-- Missing checkpoints if scenery is not in database -->
+    <div
+      class="timetable-checkpoints"
+      v-else-if="onlineScenery && onlineScenery.missingCheckpoints.length > 0"
+    >
+      <template v-for="(ch, i) in onlineScenery.missingCheckpoints" :key="i">
+        <template v-if="i > 0">&bull;</template>
+        <router-link
+          class="checkpoint-item"
+          :class="{ current: chosenCheckpoint === ch }"
+          :to="`/scenery?station=${onlineScenery.name}&checkpoint=${ch}`"
+        >
+          {{ ch }}
+        </router-link>
+      </template>
+    </div>
+
+    <div v-else></div>
+
+    <div class="list-container">
+      <transition-group name="list-anim">
+        <div
+          v-if="apiStore.dataStatuses.connection == 0 && sceneryTimetables.length == 0"
+          style="padding-bottom: 5em"
+          key="list-loading"
+        >
+          <Loading />
+        </div>
+
+        <div
+          class="timetable-item empty"
+          v-else-if="sceneryTimetables.length == 0 && !onlineScenery"
+          key="list-offline"
+        >
+          {{ $t('scenery.offline') }}
+        </div>
+
+        <div
+          class="timetable-item empty"
+          v-else-if="sceneryTimetables.length == 0"
+          key="list-no-timetables"
+        >
+          {{ $t('scenery.no-timetables') }}
+        </div>
+
+        <router-link
+          v-for="row in sceneryTimetables"
+          class="timetable-item"
+          :to="row.train.driverRouteLocation"
+          :key="row.train.id"
+        >
+          <div class="item-top">
+            <div class="top-general">
+              <span class="general-info">
+                <div class="info-train">
+                  <!-- Cargo warnings & details badges -->
+                  <span
+                    class="train-badge twr"
+                    v-if="row.train.timetableData!.twr"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="$t('warnings.TWR')"
+                  >
+                    TWR
+                  </span>
+
+                  <span
+                    class="train-badge tn"
+                    v-if="row.train.timetableData!.hasDangerousCargo"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="$t('warnings.TN')"
+                  >
+                    TN
+                  </span>
+
+                  <span
+                    class="train-badge pn"
+                    v-if="row.train.timetableData!.hasExtraDeliveries"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="$t('warnings.PN')"
+                  >
+                    PN
+                  </span>
+
+                  <!-- Train info -->
+                  <span
+                    data-tooltip-type="TrainInfoTooltip"
+                    :data-tooltip-content="row.train.id"
+                    class="tooltip-help"
+                  >
+                    <b class="text--primary">
+                      {{ row.train.timetableData!.category }}
+                    </b>
+
+                    <b>&nbsp;{{ row.train.trainNo }}</b>
+                    &bull;
+                    {{ row.train.driverName }}
+
+                    <i
+                      class="fa-solid fa-user-slash"
+                      style="color: salmon"
+                      v-if="!row.train.online && row.train.lastSeen <= Date.now() - 60000"
+                    ></i>
+                  </span>
+
+                  <!-- Train stop comments -->
+                  <span
+                    v-if="row.checkpointStop.comments"
+                    class="stop-comments-icon"
+                    data-tooltip-type="BaseTooltip"
+                    :data-tooltip-content="row.checkpointStop.comments"
+                  >
+                    <img src="/images/icon-warning.svg" />
+                  </span>
+                </div>
+
+                <div class="info-route">
+                  <strong>{{ row.train.timetableData!.route.replace('|', ' - ') }}</strong>
+                </div>
+
+                <ScheduledTrainStatus :sceneryTimetableRow="row" />
+              </span>
+            </div>
+
+            <div class="top-schedule">
+              <span class="schedule-arrival">
+                <span class="arrival-time begins" v-if="row.checkpointStop.beginsHere">
+                  {{ $t('timetables.begins') }}
+                </span>
+
+                <span class="arrival-time" v-else>
+                  <div v-if="row.checkpointStop.arrivalDelay == 0">
+                    <span>{{ timestampToTimeString(row.checkpointStop.arrivalTimestamp) }}</span>
+                  </div>
+                  <div v-else>
+                    <div>
+                      <s style="margin-right: 0.2em" class="text--grayed">{{
+                        timestampToTimeString(row.checkpointStop.arrivalTimestamp)
+                      }}</s>
+                    </div>
+
+                    <span>
+                      {{ timestampToTimeString(row.checkpointStop.arrivalRealTimestamp) }}
+                      ({{ row.checkpointStop.arrivalDelay > 0 ? '+' : ''
+                      }}{{ row.checkpointStop.arrivalDelay }})
+                    </span>
+                  </div>
+                </span>
+              </span>
+
+              <span class="schedule-stop">
+                <span class="stop-connection">
+                  {{ row.currentElement.arrivalRouteExt }}
+                </span>
+
+                <span class="stop-time">
+                  {{ row.checkpointStop.stopTime || '' }}
+                  {{ row.checkpointStop.stopTime ? row.checkpointStop.stopType || 'pt' : '' }}
+                </span>
+
+                <span class="stop-connection">
+                  {{ row.currentElement.departureRouteExt }}
+                </span>
+              </span>
+
+              <span class="schedule-departure">
+                <span class="departure-time terminates" v-if="row.checkpointStop.terminatesHere">
+                  {{ $t('timetables.terminates') }}
+                </span>
+
+                <span class="departure-time" v-else>
+                  <div v-if="row.checkpointStop.departureDelay == 0">
+                    <span>{{ timestampToTimeString(row.checkpointStop.departureTimestamp) }}</span>
+                  </div>
+                  <div v-else>
+                    <div>
+                      <s style="margin-right: 0.2em" class="text--grayed">{{
+                        timestampToTimeString(row.checkpointStop.departureTimestamp)
+                      }}</s>
+                    </div>
+
+                    <span>
+                      {{ timestampToTimeString(row.checkpointStop.departureRealTimestamp) }}
+                      ({{ row.checkpointStop.departureDelay > 0 ? '+' : ''
+                      }}{{ row.checkpointStop.departureDelay }})
+                    </span>
+                  </div>
+                </span>
+              </span>
+            </div>
+          </div>
+
+          <div class="item-stock-list" v-if="showStockThumbnails">
+            <StockList :trainStockList="row.train.stockList" />
+          </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>
@@ -18,8 +18,8 @@

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

 export default defineComponent({
  props: {
@@ -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>
@@ -137,20 +137,16 @@
          </section>

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

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

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

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

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

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

    filtersSections,
-    sliderStates,
+    sliderGroups,
+    sliderGroupsOptions,

    minimumHours: 0,

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

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

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

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

  margin-bottom: 1em;
+}

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

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

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

  .card_controls > button > p {
@@ -578,6 +578,7 @@ tbody tr {
 .station-name {
  font-weight: bold;
  max-width: 200px;
+  padding: 0.25em;

  &.default {
    color: var(--clr-primary);
@@ -120,28 +120,40 @@ function filterSliderValues(filters: Record<string, any>, generalInfo: StationGe
  const otherAvailability =
    availability == 'nonPublic' || availability == 'unavailable' || availability == 'abandoned';

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

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

 function filterInputValues(filters: Record<string, any>, generalInfo: StationGeneralInfo) {
@@ -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>
@@ -35,3 +35,10 @@ export function dateToLocaleString(date: Date, dateOptions: Intl.DateTimeFormatO

  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'
+  });
+}
@@ -23,15 +23,6 @@
    "bottom-text": "Enjoy!\n~Spythere",
    "button-confirm": "Start using the app!"
  },
-  "migrate-info": {
-    "tooltip-content": "Information about migration of\nStacjownik site!",
-    "header-text": "Attention!",
-    "paragraph-1-html": "Due to the growing interest in Stacjownik and other applications I have made, <b>as of January 1, 2026, Stacjownik will be <u>permanently moved</u> to a new dedicated domain:</b>",
-    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
-    "paragraph-3-text": "This website will no longer receive future updates and after the New Year it will only redirect to the address above.",
-    "paragraph-4-italic-text": "\"Why are you messing this up? It's been fine for so long!\"",
-    "paragraph-4-html": "<i>\"Why are you messing this up? It's been fine for so long!\"</i> <br /> The change is mainly caused by the growing website interest and exceeding the free limit plan of the current Google hosting, which forces additional fees for each use of the service above a certain threshold (or otherwise blocks access to it). By moving the site to a dedicated domain (which has already been purchased and is maintained with the financial help of <span class=\"text--donator\">Supporters</span>), I will get rid of unnecessary expenses for a large corporation that can shut down my application at any given time."
-  },
  "donations": {
    "button-title": "TOSS A COIN",
    "header": "Toss a coin to Stacjownik!",
@@ -65,7 +56,7 @@
    "refresh": "REFRESH"
  },
  "update": {
-    "title": "Stacjownik update!",
+    "title": "Stacjownik has been updated!",
    "confirm": "ROGER THAT!",
    "no-data": "No data about the latest app update has been found",
    "info-1": "This changelog will be available to see once again after clicking the version number in the footer",
@@ -258,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",
@@ -302,19 +295,27 @@
    "withoutActiveTimetables": "NO ACTIVE",
    "junction": "JUNCTIONS",
    "nonJunction": "OTHER",
+
+    "oneWay": "OTHER SINGLE TRACK",
+    "oneWayCatenary": "CATENARY SINGLE TRACK",
+    "twoWayCatenary": "CATENARY DOUBLE TRACK",
+    "twoWay": "OTHER DOUBLE TRACK",
+    "oneWayCatenaryInt": "CATENARY SINGLE TRACK",
+    "oneWayInt": "OTHER SINGLE TRACK",
+    "twoWayCatenaryInt": "CATENARY DOUBLE TRACK",
+    "twoWayInt": "OTHER DOUBLE TRACK",
+
    "sliders": {
-      "minLevel": "MIN. REQUIRED DISPATCHER LEVEL",
-      "maxLevel": "MAX. REQUIRED DISPATCHER LEVEL",
-      "minVmax": "MIN. SCENERY ROUTE SPEED",
-      "maxVmax": "MAX. SCENERY ROUTE SPEED",
-      "minOneWayCatenary": "MIN. CATENARY SINGLE TRACK ROUTES",
-      "minOneWay": "MIN. OTHER SINGLE TRACK ROUTES",
-      "minTwoWayCatenary": "MIN. CATENARY DOUBLE TRACK ROUTES",
-      "minTwoWay": "MIN. OTHER DOUBLE TRACK ROUTES",
-      "minOneWayCatenaryInt": "MIN. INTERNAL CATENARY SINGLE TRACK ROUTES",
-      "minOneWayInt": "MIN. INTERNAL OTHER SINGLE TRACK ROUTES",
-      "minTwoWayCatenaryInt": "MIN. INTERNAL CATENARY DOUBLE TRACK ROUTES",
-      "minTwoWayInt": "MIN. INTERNAL OTHER DOUBLE TRACK ROUTES"
+      "vMax": "ROUTE SPEED",
+      "level": "REQUIRED DISPATCHER LEVEL",
+      "routeOneWay": "SINGLE TRACK ROUTES (OTHER)",
+      "routeOneWayCatenary": "SINGLE TRACK ROUTES (CATENARY)",
+      "routeTwoWayCatenary": "DOUBLE TRACK ROUTES (CATENARY)",
+      "routeTwoWay": "DOUBLE TRACK ROUTES (OTHER)",
+      "routeOneWayInternalCatenary": "INTERNAL SINGLE TRACK ROUTES (CATENARY)",
+      "routeOneWayInternal": "INTERNAL SINGLE TRACK ROUTES (OTHER)",
+      "routeTwoWayInternalCatenary": "INTERNAL DOUBLE TRACK ROUTES (CATENARY)",
+      "routeTwoWayInternal": "INTERNAL DOUBLE TRACK ROUTES (OTHER)"
    },
    "sceneries-placeholder": "Search for scenery",
    "line-numbers-placeholder": "Line numbers (separated by commas)",
@@ -325,7 +326,6 @@
    "now": "NOW",
    "hour": "h",
    "no-limit": "NO LIMIT",
-    "include-selected": "INCLUDE SELECTED",
    "save": "REMEMBER FILTERS",
    "reset": "RESET FILTERS",
    "close": "CLOSE FILTERS"
@@ -558,7 +558,7 @@
    "no-users": "NO ACTIVE PLAYERS",
    "no-spawns": "NO OPEN SPAWNS",
    "no-scenery": "Oops! This scenery doesn't exist!",
-    "return-btn": "BACK TO THE LAST SITE",
+    "return-btn": "BACK TO THE MAIN SITE",
    "history-btn": "View the dispatcher history",
    "info-btn": "Return to the scenery view",
    "authors-title": "Scenery author | Scenery authors",
@@ -572,6 +572,8 @@
    "option-active-timetables": "Active timetables",
    "option-timetables-history": "Timetables history PL1",
    "option-dispatchers-history": "Dispatchers history PL1",
+    "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",
@@ -583,7 +585,7 @@
    "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)",
@@ -23,14 +23,6 @@
    "bottom-text": "Miłego korzystania\n~Spythere",
    "button-confirm": "Zacznij korzystać z aplikacji!"
  },
-  "migrate-info": {
-    "tooltip-content": "Informacja o migracji\nstrony Stacjownika!",
-    "header-text": "Uwaga!",
-    "paragraph-1-html": "Ze względu na coraz większe zainteresowanie Stacjownikiem oraz innymi aplikacjami mojego autorstwa <b>z dniem 1 stycznia 2026r. Stacjownik zostaje <u>permamentnie przeniesiony</u> na nową dedykowaną domenę:</b>",
-    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
-    "paragraph-3-text": "Obecna strona nie będzie otrzymywać już przyszłych aktualizacji, a po Nowym Roku będzie jedynie przenosić na powyższy adres.",
-    "paragraph-4-html": "<i>\"Po co psujesz? Przecież było dobrze tyle czasu!\"</i> <br /> Zmiana podyktowana jest głównie wzrostem zainteresowania stroną i przekraczaniem darmowego limitu obecnego hostingu Google'a, który wymusza płatność za każde użycie serwisu ponad określoną wartość (lub w przeciwnym wypadku blokuje do niego dostęp). Przenosząc stronę na dedykowaną domenę (która jest już wykupiona i utrzymywana dzięki pomocy <span class=\"text--donator\">Wspierających</span>), pozbędę się niepotrzebnego wydatku dla wielkiej korporacji, która w każdej chwili może mi wyłączyć aplikację."
-  },
  "donations": {
    "button-title": "GROSZA DAJ",
    "header": "Grosza daj Stacjownikowi!",
@@ -64,7 +56,7 @@
    "refresh": "ODŚWIEŻ"
  },
  "update": {
-    "title": "Aktualizacja Stacjownika!",
+    "title": "Stacjownik został zaktualizowany!",
    "confirm": "PRZYJĄŁEM!",
    "no-data": "Nie znaleziono informacji o ostatnich zmianach w aplikacji",
    "info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
@@ -255,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",
@@ -299,19 +293,27 @@
    "withoutActiveTimetables": "BEZ AKTYWNYCH",
    "junction": "WĘZŁOWE",
    "nonJunction": "INNE",
+
+    "oneWay": "JEDNOTOROWE NIEZELEKTRYFIKOWANE",
+    "oneWayCatenary": "JEDNOTOROWE ZELEKTRYFIKOWANE",
+    "twoWayCatenary": "DWUTOROWE ZELEKTRYFIKOWANE",
+    "twoWay": "DWUTOROWE NIEZELEKTRYFIKOWANE",
+    "oneWayCatenaryInt": "JEDNOTOROWE ZELEKTRYFIKOWANE",
+    "oneWayInt": "JEDNOTOROWE NIEZELEKTRYFIKOWANE",
+    "twoWayCatenaryInt": "DWUTOROWE ZELEKTRYFIKOWANE",
+    "twoWayInt": "DWUTOROWE NIEZELEKTRYFIKOWANE",
+
    "sliders": {
-      "minLevel": "MIN. WYMAGANY POZIOM DYŻURNEGO",
-      "maxLevel": "MAKS. WYMAGANY POZIOM DYŻURNEGO",
-      "minVmax": "MIN. PRĘDKOŚĆ SZLAKOWA",
-      "maxVmax": "MAKS. PRĘDKOŚĆ SZLAKOWA",
-      "minOneWayCatenary": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
-      "minOneWay": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
-      "minTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
-      "minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)",
-      "minOneWayCatenaryInt": "SZLAKI JEDNOTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
-      "minOneWayInt": "SZLAKI JEDNOTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)",
-      "minTwoWayCatenaryInt": "SZLAKI DWUTOROWE ZELEKTR. WEWNĘTRZNE (MINIMUM)",
-      "minTwoWayInt": "SZLAKI DWUTOROWE NIEZELEKTR. WEWNĘTRZNE (MINIMUM)"
+      "vMax": "PRĘDKOŚĆ SZLAKOWA",
+      "level": "WYMAGANY POZIOM DYŻURNEGO",
+      "routeOneWay": "SZLAKI 1-TOROWE NIEZELEKTR.",
+      "routeOneWayCatenary": "SZLAKI 1-TOROWE ZELEKTR.",
+      "routeTwoWayCatenary": "SZLAKI 2-TOROWE ZELEKTR.",
+      "routeTwoWay": "SZLAKI 2-TOROWE NIEZELEKTR.",
+      "routeOneWayInternalCatenary": "SZLAKI WEWN. 1-TOROWE ZELEKTR.",
+      "routeOneWayInternal": "SZLAKI WEWN. 1-TOROWE NIEZELEKTR.",
+      "routeTwoWayInternalCatenary": "SZLAKI WEWN. 2-TOROWE ZELEKTR.",
+      "routeTwoWayInternal": "SZLAKI WEWN. 2-TOROWE NIEZELEKTR."
    },
    "sceneries-placeholder": "Wyszukaj scenerię",
    "line-numbers-placeholder": "Numery linii (oddzielone przecinkami)",
@@ -322,7 +324,6 @@
    "now": "TERAZ",
    "hour": " godz.",
    "no-limit": "BEZ LIMITU",
-    "include-selected": "POKAŻ ZAZNACZONE",
    "save": "ZAPAMIĘTAJ FILTRY",
    "reset": "RESETUJ FILTRY",
    "close": "ZAMKNIJ FILTRY"
@@ -543,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 DO POPRZEDNIEJ STRONY",
+    "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",
@@ -557,6 +558,8 @@
    "option-active-timetables": "Aktywne rozkłady jazdy",
    "option-timetables-history": "Historia rozkładów PL1",
    "option-dispatchers-history": "Historia dyżurów PL1",
+    "btn-show-timetable-thumbnails": "Pokazuj podglądy składów",
+    "btn-hide-timetable-thumbnails": "Ukrywaj podglądy składów",
    "timetable-includesScenery": "WSZYSTKIE RJ",
    "timetable-via": "PRZEJEŻDŻA",
    "timetable-issuedFrom": "ROZPOCZYNA BIEG",
@@ -568,7 +571,7 @@
    "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)",
@@ -1,5 +1,24 @@
 import StorageManager from './storageManager';

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

 export const initFilters = {
@@ -38,9 +59,6 @@ export const initFilters = {
  mixed: false,
  SBL: false,
  PBL: false,
-  'include-selected': false,
-  'no-1track': false,
-  'no-2track': false,
  free: true,
  occupied: false,
  nonPublic: false,
@@ -60,34 +78,111 @@ export const initFilters = {
  onlineFromHours: 0,
  minLevel: 0,
  maxLevel: 20,
+  oneWay: false,
+  oneWayCatenary: false,
+  twoWay: false,
+  twoWayCatenary: false,
+  oneWayCatenaryInt: false,
+  oneWayInt: false,
+  twoWayInt: false,
+  twoWayCatenaryInt: false,
  minOneWay: 0,
  minOneWayCatenary: 0,
-  minOneWayInt: 0,
  minOneWayCatenaryInt: 0,
+  minOneWayInt: 0,
  minTwoWay: 0,
  minTwoWayCatenary: 0,
  minTwoWayInt: 0,
  minTwoWayCatenaryInt: 0,
+  maxOneWay: 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: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minOneWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 }
+export const sliderGroups: SliderGroup[] = [
+  'vMax',
+  'level',
+  'routeOneWayCatenary',
+  'routeOneWay',
+  'routeTwoWayCatenary',
+  'routeTwoWay',
+  'routeOneWayInternalCatenary',
+  'routeOneWayInternal',
+  'routeTwoWayInternalCatenary',
+  'routeTwoWayInternal'
 ];

+export const sliderGroupsOptions: Record<SliderGroup, SliderOptions[]> = {
+  vMax: [
+    { id: 'minVmax', minRange: 0, maxRange: 200, step: 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];

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

 export function setupFilters(currentFilters: Record<string, any>) {
@@ -135,7 +232,8 @@ export function getChangedFilters(currentFilters: Record<string, any>): string[]
  return (
    Object.keys(currentFilters).filter(
      (filterKey) =>
-        currentFilters[filterKey] !== initFilters[filterKey as keyof typeof initFilters]
+        currentFilters[filterKey].toString() !==
+        initFilters[filterKey as keyof typeof initFilters].toString()
    ) ?? []
  );
 }
@@ -7,6 +7,7 @@ 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,
@@ -55,19 +56,21 @@ 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();
+        await this.fetchActiveData();
        this.nextUpdateTime = t + 31000;
      }

@@ -75,6 +78,7 @@ export const useApiStore = defineStore('apiStore', {
    },

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

      try {
@@ -29,9 +29,7 @@ export const useMainStore = defineStore('mainStore', {
      chosenModalTrainId: undefined,

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

  actions: {
@@ -393,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 =
@@ -412,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
@@ -8,7 +8,6 @@ export interface MainStoreState {
  chosenModalTrainId?: string;
  modalLastClickedTarget: EventTarget | null;
  currentLocale: string;
-  isMigrateInfoCardOpen: boolean;
 }

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

 // List animation
@@ -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%;
-  }
-}
@@ -130,6 +130,12 @@ export interface StationRoutes {
  singleOtherNames: string[];
  doubleElectrifiedNames: string[];
  doubleOtherNames: string[];
+
+  singleElectrifiedInternalNames: string[];
+  singleOtherInternalNames: string[];
+  doubleElectrifiedInternalNames: string[];
+  doubleOtherInternalNames: string[];
+
  sblNames: string[];

  minRouteSpeed: number;
@@ -241,4 +247,4 @@ export interface TooltipTrainInfo {
  headVehicleName: string;
  stockCount: number;
  trainTimetableCategory?: string;
-}
+}
@@ -184,7 +184,7 @@ function setViewMode(componentName: string) {

  background-color: #181818;
  border-radius: 0.5em;
-  padding: 1em 0.5em;
+  padding: 0.5em;
 }

 .scenery-left {
@@ -239,7 +239,7 @@ function setViewMode(componentName: string) {
  .scenery-view {
    height: auto;
  }
-  
+
  .scenery-wrapper {
    grid-template-columns: 1fr;
    gap: 0;
@@ -13,16 +13,6 @@
        </div>

        <div class="topbar-links">
-          <button
-            v-if="isOldStacjownikDomain"
-            class="btn--image migrate-info-button"
-            @click="toggleMigrateInfoCard(true)"
-            data-tooltip-type="HtmlTooltip"
-            :data-tooltip-content="`<b>${$t('migrate-info.tooltip-content')}</b>`"
-          >
-            <img :src="`/images/icon-alert-triangle.svg`" alt="show migrate info card" />
-          </button>
-
          <button
            class="btn--image lang-button"
            @click="toggleLocales()"
@@ -44,7 +34,7 @@

          <a
            class="a-button btn--image gnr-link"
-            href="https://generator-td2.web.app/"
+            href="https://generator-td2.spythere.eu/"
            target="_blank"
            data-tooltip-type="HtmlTooltip"
            :data-tooltip-content="`<b>${$t('app.gnr-link-content')}</b>`"
@@ -54,7 +44,7 @@

          <a
            class="a-button btn--image pojazdownik-link"
-            href="https://pojazdownik-td2.web.app/"
+            href="https://pojazdownik-td2.spythere.eu/"
            target="_blank"
            data-tooltip-type="HtmlTooltip"
            :data-tooltip-content="`<b>${$t('app.pojazdownik-link-content')}</b>`"
@@ -129,19 +119,9 @@ export default defineComponent({
      this.isDonationCardOpen = value;
    },

-    toggleMigrateInfoCard(value: boolean) {
-      this.mainStore.isMigrateInfoCardOpen = value;
-    },
-
    toggleLocales() {
      this.mainStore.changeLocale(this.mainStore.currentLocale == 'pl' ? 'en' : 'pl');
    }
-  },
-
-  computed: {
-    isOldStacjownikDomain() {
-      return location.hostname == 'stacjownik-td2.web.app';
-    }
  }
 });
 </script>
@@ -200,11 +180,6 @@ button.lang-button {
  background-color: #111;
 }

-button.migrate-info-button {
-  padding: 0 0.5em;
-  background-color: var(--clr-primary);
-}
-
 a.pojazdownik-link {
  background-color: #1f263b;

@@ -29,7 +29,7 @@ export default defineConfig({
          {
            urlPattern:
              /^https:\/\/stacjownik.spythere.eu\/api\/(getVehiclesData|getDonators|getSceneries)/i,
-            handler: 'NetworkFirst',
+            handler: 'CacheFirst',
            options: {
              cacheName: 'stacjownik-api-cache',
              cacheableResponse: { statuses: [0, 200] }
@@ -1907,9 +1907,9 @@ call-bound@^1.0.2, call-bound@^1.0.3, call-bound@^1.0.4:
    get-intrinsic "^1.3.0"

 caniuse-lite@^1.0.30001737:
-  version "1.0.30001741"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001741.tgz#67fb92953edc536442f3c9da74320774aa523143"
-  integrity sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==
+  version "1.0.30001777"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001777.tgz"
+  integrity sha512-tmN+fJxroPndC74efCdp12j+0rk0RHwV5Jwa1zWaFVyw2ZxAuPeG8ZgWC3Wz7uSjT3qMRQ5XHZ4COgQmsCMJAQ==

 chokidar@^4.0.0:
  version "4.0.3"
Author	SHA1	Message	Date
Spythere	a34eef098b	Merge pull request #158 from Spythere/development v1.33.0	2026-03-22 23:17:43 +01:00
Spythere	c8c1a15191	chore(scenery): added scenery's forum link to general info	2026-03-22 15:16:09 +01:00
Spythere	89b6361a1c	chore: offline mode improvements; changed to CacheFirst strategy	2026-03-22 14:10:27 +01:00
Spythere	eae62a8064	refactor(scenery): improved components visibility on API data loading	2026-03-22 14:04:49 +01:00
Spythere	d643259102	chore(scenery): improved thumbnails toggle button appearance	2026-03-21 19:24:38 +01:00
Spythere	966b36e39f	chore: code cleanup from obsolote logs	2026-03-17 22:36:48 +01:00
Spythere	cbc812bdec	refactor(scenery): changed position of links and actions for active timetables to the bottom of the list	2026-03-17 22:36:28 +01:00
Spythere	c7d2128bd9	fix(options): dropdown responsiveness	2026-03-17 22:05:40 +01:00
Spythere	836d9d03d9	chore(locales): added missing locales	2026-03-17 21:33:38 +01:00
Spythere	e23c334791	bump(version): v1.33.0	2026-03-15 23:53:27 +01:00
Spythere	3d6267fa8e	Merge pull request #157 from Spythere/v1.32.1 v1.32.1	2026-03-15 23:50:14 +01:00
Spythere	f7499fe431	chore: added hiding rolling stock preview on hover	2026-03-15 23:18:36 +01:00
Spythere	dc0b0315e0	chore(scenery): added saving showing thumbnails state to local storage	2026-03-15 23:06:27 +01:00
Spythere	5e31948a5d	chore: added missing translations; improved route filters order	2026-03-15 00:51:32 +01:00
Spythere	4f42c0d878	refactor(scenery): moved thumbnails toggler to header	2026-03-14 22:32:50 +01:00
Spythere	7dda21e2a2	fix(filters): added minimum height for option sliders in statation filter card to even out spacings	2026-03-14 01:54:30 +01:00
Spythere	74df349a44	chore(stations): added station name padding	2026-03-14 01:51:35 +01:00
Spythere	c901b14715	chore(scenery): improved thumbnails checkbox design and elements' padding	2026-03-14 01:50:48 +01:00
Spythere	41dda1e592	fix(locales): return button text	2026-03-13 23:26:20 +01:00
Spythere	6f51f79c4c	chore: added parallel static data refresh	2026-03-13 23:24:10 +01:00
Spythere	a39acc1cc9	fix(scenery): incorrect link to tablice-td2	2026-03-13 19:18:03 +01:00
Spythere	f699be197b	fix(filters): detecting changed filters for numeric values	2026-03-13 19:17:00 +01:00
Spythere	45947cd491	chore(filters): filter card responsiveness; slider appearance and functionality	2026-03-13 19:14:18 +01:00
Spythere	1bf7596b80	chore(scenery): added checkbox for switching thumbnails display (wip)	2026-03-12 22:28:35 +01:00
Spythere	ffee0d980e	chore(scenery): adjusted card paddings	2026-03-12 22:20:06 +01:00
Spythere	1f48e8d80b	feat(scenery): added optional displaying active timetables' rolling stock thumbnails	2026-03-12 22:19:53 +01:00
Spythere	27b9e8253b	hotfix: refreshing stock list thumbnails loading on train change	2026-03-12 22:07:15 +01:00
Spythere	5d088a0fac	fix(api): update tick awaiting for all static data to refresh before requesting active data	2026-03-12 22:03:24 +01:00
Spythere	ffe26a8fd2	chore(filters): added station filtering by route types and maximum count	2026-03-12 21:59:53 +01:00
Spythere	1a39c9054b	chore(filters): added filtering stations by external and internal route groups; changed sliders to min & max range	2026-03-11 18:17:12 +01:00
Spythere	7073c0687c	chore(app): removed migration info card & obsolete data	2026-03-10 23:40:45 +01:00
Spythere	c1fa2a13e1	chore(url): updated old urls for other external apps	2026-03-10 23:37:30 +01:00
Spythere	1b8053faa3	chore: updated readme site URL	2026-03-10 23:36:03 +01:00
Spythere	a5d7bfd037	refactor: scenery view code organization in separate components with minor fixes	2026-03-10 23:35:00 +01:00
Spythere	9c87ff28b4	chore(app): improved update card appearance	2026-03-10 18:23:59 +01:00
Spythere	1faef31b12	bump(version): v1.32.1	2026-03-10 18:11:09 +01:00
Spythere	97a829a21c	Merge pull request #156 from Spythere/development v1.32.0 hotfixes	2026-02-27 00:32:11 +01:00
Spythere	83070ca391	fix(fonts): preload absolute path	2026-02-27 00:31:02 +01:00
Spythere	67ce9c7365	fix(journal): journal filter options max height	2026-02-27 00:27:16 +01:00