Merge pull request #126 from Spythere/development

v1.29.2
chore: additional styles
2026-05-03 05:18:11 +00:00 · 2025-04-15 01:15:42 +02:00 · 2025-04-15 01:10:31 +02:00 · 2025-04-14 21:37:59 +02:00 · 2025-04-14 21:02:46 +02:00 · 2025-04-14 19:24:28 +02:00
88 changed files with 3325 additions and 3092 deletions
@@ -22,11 +22,6 @@

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

-    <link rel="stylesheet" href="fa/css/fontawesome.css" />
-    <link rel="stylesheet" href="fa/css/brands.css" />
-    <link rel="stylesheet" href="fa/css/regular.css" />
-    <link rel="stylesheet" href="fa/css/solid.css" />
-
    <!-- 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/" />
@@ -1,6 +1,6 @@
 {
  "name": "stacjownik",
-  "version": "1.29.0",
+  "version": "1.29.2",
  "private": true,
  "type": "module",
  "scripts": {
@@ -26,7 +26,7 @@
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
-    "@types/node": "^20.14.12",
+    "@types/node": "^22.13.13",
    "@types/showdown": "^2.0.6",
    "@vite-pwa/assets-generator": "^0.2.4",
    "@vitejs/plugin-vue": "^5.1.0",
@@ -167,32 +167,13 @@ export default defineComponent({
 </script>

 <style lang="scss">
-@import './styles/global';
-@import './styles/animations';
-
-.route {
-  margin: 0 0.2em;
-
-  &-active,
-  &[data-active='true'] {
-    color: $accentCol;
-    font-weight: bold;
-  }
-}
+@use './styles/animations';

 // APP
 #app {
  color: white;
-  font-size: 1rem;
  overflow-x: hidden;
-
-  @include smallScreen() {
-    font-size: calc(0.65rem + 0.85vw);
-  }
-
-  @include screenLandscape() {
-    font-size: calc(0.45rem + 0.8vw);
-  }
+  font-size: 1em;
 }

 // CONTAINER
@@ -36,6 +36,4 @@ export default defineComponent({
    }
  }
 });
-</script>
-
-<style scoped></style>
+</script>
@@ -45,17 +45,17 @@
        </span>

        <span class="header_links">
-          <router-link class="route" active-class="route-active" to="/" exact>
+          <router-link class="route-link" active-class="route-link-active" to="/" exact>
            {{ $t('app.sceneries') }}
          </router-link>
          /
-          <router-link class="route" active-class="route-active" to="/trains">{{
+          <router-link class="route-link" active-class="route-link-active" to="/trains">{{
            $t('app.trains')
          }}</router-link>
          /
          <router-link
-            class="route"
-            active-class="route-active"
+            class="route-link"
+            active-class="route-link-active"
            :data-active="$route.path.startsWith('/journal')"
            to="/journal"
          >
@@ -116,9 +116,9 @@ export default defineComponent({
  }
 });
 </script>
+
 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-@import '../../styles/responsive.scss';
+@use '../../styles/responsive';

 // HEADER
 .app_header {
@@ -126,7 +126,7 @@ export default defineComponent({
  justify-content: center;

  position: relative;
-  background-color: $primaryCol;
+  background-color: #2c2c2c;
 }

 .header {
@@ -141,7 +141,7 @@ export default defineComponent({

    border-radius: 0 0 1em 1em;

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

    padding: 0.5em;

-    @include smallScreen {
+    @include responsive.smallScreen{
      transform: translateX(85%);
    }
  }
@@ -6,9 +6,7 @@
 import { computed, defineComponent, ref } from 'vue';
 export default defineComponent({
  name: 'VueClock',
-  data: () => ({
-    timestamp: Date.now()
-  }),
+  data: () => ({ timestamp: Date.now() }),
  setup() {
    let timestamp = ref(Date.now());

@@ -28,8 +26,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
 .clock {
  display: flex;
  align-items: center;
@@ -310,7 +310,7 @@ export default defineComponent({
 </script>

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

 // INDICATOR TOOLTIP ANIMATION
 .tooltip-anim {
@@ -379,7 +379,7 @@ export default defineComponent({
      content: '';
    }

-    @include midScreen() {
+    @include responsive.midScreen() {
      left: auto;
      right: 200%;

@@ -393,7 +393,7 @@ export default defineComponent({
      }
    }

-    @include smallScreen() {
+    @include responsive.smallScreen{
      min-width: 8em;
    }
  }
@@ -73,11 +73,9 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/variables';
-
 ::v-deep(h1) {
  text-align: center;
-  color: $accentCol;
+  color: var(--clr-primary);
 }

 ::v-deep(h2) {
@@ -13,8 +13,7 @@ export default defineComponent({});
 </script>

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

 .button_content {
  display: flex;
@@ -38,5 +38,3 @@ export default defineComponent({
  }
 });
 </script>
-
-<style scoped></style>
@@ -43,7 +43,7 @@ export default defineComponent({
 </script>

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

 .card {
  position: fixed;
@@ -85,7 +85,7 @@ export default defineComponent({
  overflow: auto;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .card {
    align-items: flex-start;
  }
@@ -56,7 +56,7 @@
        </i>
      </div>

-      <div class="actions">
+      <div class="actions-container">
        <a
          class="action a-button btn--image coffee"
          href="https://buycoffee.to/spythere"
@@ -150,8 +150,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-
 .body {
  display: grid;
  grid-template-rows: 1fr auto;
@@ -198,32 +196,28 @@ a.discord {
  }
 }

-.actions > .action {
+.actions-container > .action {
  &.paypal {
-    $btnColor: #254069;
-
-    background-color: $btnColor;
+    background-color: #254069;

    &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #2f5185;
    }
  }

  &.coffee {
-    $btnColor: #009255;
-    background-color: $btnColor;
+    background-color: #009255;

    &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #00a35f;
    }
  }

  &.exit {
-    $btnColor: #686868;
-    background-color: $btnColor;
+    background-color: #686868;

    &:hover {
-      background-color: lighten($btnColor, 5%);
+      background-color: #8d8d8d;
    }
  }
 }
@@ -120,8 +120,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-
 .region-dropdown {
  display: flex;
  align-items: center;
@@ -182,7 +180,7 @@ li.option {
    background: none;

    &:focus + span {
-      color: $accentCol;
+      color: var(--clr-primary);
      font-weight: 800;
    }
  }
@@ -7,7 +7,12 @@
      @keypress="updateValue"
    />

-    <img class="search-exit" src="/images/icon-exit.svg" alt="exit-icon" @click="clearSearchValue" />
+    <img
+      class="search-exit"
+      src="/images/icon-exit.svg"
+      alt="exit-icon"
+      @click="clearSearchValue"
+    />
  </div>
 </template>

@@ -17,21 +22,10 @@ import { defineComponent, ref, watch } from 'vue';
 export default defineComponent({
  emits: ['update:searchedValue', 'clearValue'],
  props: {
-    searchedValue: {
-      type: String,
-      required: true
-    },
-    updateOnInput: {
-      type: Boolean,
-      default: true
-    },
-    titleToTranslate: {
-      type: String,
-      required: true
-    },
-    clearValue: {
-      type: Function
-    }
+    searchedValue: { type: String, required: true },
+    updateOnInput: { type: Boolean, default: true },
+    titleToTranslate: { type: String, required: true },
+    clearValue: { type: Function }
  },

  setup(props, { emit }) {
@@ -56,17 +50,13 @@ export default defineComponent({
        emit('update:searchedValue', compSearchedValue.value);
    };

-    return {
-      compSearchedValue,
-      updateValue,
-      clearSearchValue
-    };
+    return { compSearchedValue, updateValue, clearSearchValue };
  }
 });
 </script>

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

 .search {
  &-box {
@@ -78,7 +68,7 @@ export default defineComponent({

    margin: 0.5em 0 0.5em 0.5em;

-    @include smallScreen() {
+    @include responsive.smallScreen{
      width: 85%;
    }
  }
@@ -20,15 +20,9 @@ import { Status } from '../../typings/common';

 export default defineComponent({
  props: {
-    dispatcherStatus: {
-      type: Number as PropType<Status.ActiveDispatcher | number>
-    },
-    dispatcherTimestamp: {
-      type: Number as PropType<number | null>
-    },
-    isOnline: {
-      type: Boolean
-    }
+    dispatcherStatus: { type: Number as PropType<Status.ActiveDispatcher | number> },
+    dispatcherTimestamp: { type: Number as PropType<number | null> },
+    isOnline: { type: Boolean }
  },
  mixins: [dateMixin],

@@ -22,20 +22,12 @@ export default defineComponent({
  components: { VehicleThumbnail },

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

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

  computed: {
@@ -151,7 +143,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-
 .list-wrapper {
  display: flex;
  justify-content: center;
@@ -51,7 +51,6 @@ function onImageLoad() {

 <style lang="scss" scoped>
 .vehicle-thumbnail {
-  
  position: relative;
  opacity: 0;
  transition: opacity 100ms ease-in-out;
@@ -234,9 +234,9 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/JournalStats.scss';
-@import '../../styles/badge.scss';
+@use '../../styles/animations';
+@use '../../styles/journal-stats';
+@use '../../styles/responsive';

 .daily-stats {
  text-align: left;
@@ -265,7 +265,7 @@ ul.stats-list {
  gap: 0.5em;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  h3 {
    text-align: center;
  }
@@ -121,14 +121,8 @@ import StationStatusBadge from '../../Global/StationStatusBadge.vue';

 export default defineComponent({
  props: {
-    entry: {
-      type: Object as PropType<API.DispatcherHistory.Data>,
-      required: true
-    },
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    }
+    entry: { type: Object as PropType<API.DispatcherHistory.Data>, required: true },
+    showExtraInfo: { type: Boolean, required: true }
  },

  components: { StationStatusBadge },
@@ -136,10 +130,7 @@ export default defineComponent({
  emits: ['toggleShowExtraInfo'],

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

  methods: {
@@ -151,8 +142,8 @@ export default defineComponent({
 </script>

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

 .region-badge {
  padding: 0 0.25em;
@@ -207,7 +198,7 @@ export default defineComponent({
  border-radius: 1em;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .entry-info {
    flex-direction: column;
    justify-content: center;
@@ -32,25 +32,25 @@
        </span>
      </div>

-      <hr class="section-separator" />
+      <hr class="section-separator" v-if="stats.issuedTimetables" />

-      <div class="info-stats">
-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+      <div class="info-stats" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
          <span>{{ $t('journal.dispatcher-stats.timetables-count') }}</span>
          <span>{{ stats.issuedTimetables.count }}</span>
        </span>

-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
          <span>{{ $t('journal.dispatcher-stats.timetables-sum') }}</span>
          <span>{{ stats.issuedTimetables.distanceSum.toFixed(2) }}km</span>
        </span>

-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
          <span>{{ $t('journal.dispatcher-stats.timetables-max') }}</span>
          <span>{{ stats.issuedTimetables.distanceMax.toFixed(2) }}km</span>
        </span>

-        <span class="badge stat-badge" v-if="stats.issuedTimetables">
+        <span class="badge stat-badge">
          <span>{{ $t('journal.dispatcher-stats.timetables-avg') }}</span>
          <span>{{ stats.issuedTimetables.distanceAvg.toFixed(2) }}km</span>
        </span>
@@ -81,5 +81,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/JournalStats.scss';
+@use '../../../styles/journal-stats';
 </style>
@@ -104,6 +104,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/JournalSection.scss';
+@use '../../../styles/journal-section';
 </style>
@@ -1,11 +1,16 @@
 <template>
  <section class="journal-header">
    <div class="journal-type-options">
-      <router-link class="router-link" active-class="route-active" to="/journal/timetables" exact>
+      <router-link
+        class="route-link"
+        active-class="route-link-active"
+        to="/journal/timetables"
+        exact
+      >
        {{ $t('journal.section-timetables') }}
      </router-link>
      &nbsp;&bull;&nbsp;
-      <router-link class="router-link" active-class="route-active" to="/journal/dispatchers">
+      <router-link class="route-link" active-class="route-link-active" to="/journal/dispatchers">
        {{ $t('journal.section-dispatchers') }}
      </router-link>
    </div>
@@ -39,8 +44,4 @@ export default defineComponent({});
  display: flex;
  justify-content: center;
 }
-
-.router-link.active {
-  color: gold;
-}
 </style>
@@ -51,7 +51,7 @@
                  :list="propName.toString()"
                />

-                <button class="search-exit" v-if="!propName.toString().startsWith('search-date')">
+                <button class="btn btn--action search-exit" v-if="!propName.toString().startsWith('search-date')">
                  <img
                    src="/images/icon-exit.svg"
                    alt="exit-icon"
@@ -300,6 +300,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/dropdown';
-@import '../../styles/dropdown_filters';
+@use '../../styles/dropdown';
+@use '../../styles/dropdown-filters';
 </style>
@@ -79,14 +79,12 @@ export default defineComponent({
 </script>

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

 .dropdown_wrapper.dropdown-align-right {
  left: auto;
  right: 0;
  max-width: 700px;
-  // max-width: 100%;
 }
 </style>
@@ -23,7 +23,7 @@

      <div class="g-separator"></div>

-      <div class="stock-specs">
+      <div class="timetable-specs">
        <span class="badge specs-badge" v-if="timetable.authorName">
          <span>{{ $t('journal.dispatcher-name') }}</span>
          <span>{{ timetable.authorName }}</span>
@@ -225,9 +225,8 @@ export default defineComponent({
 </script>

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

 .details-body {
  margin-top: 0.5em;
@@ -250,10 +249,11 @@ export default defineComponent({
  margin-top: 1em;

  button[data-checked='true'] {
-    color: $accentCol;
+    color: var(--clr-primary);
  }
 }

+.timetable-specs,
 .stock-specs {
  display: flex;
  flex-wrap: wrap;
@@ -271,7 +271,7 @@ export default defineComponent({

  span:last-child {
    color: black;
-    background-color: $accentCol;
+    background-color: var(--clr-primary);
    border-radius: 0 0.25em 0.25em 0;
  }
 }
@@ -299,8 +299,8 @@ hr {
  }
 }

-@include smallScreen() {
-  .stock-specs {
+@include responsive.smallScreen{
+  .timetable-specs {
    justify-content: center;
  }

@@ -130,8 +130,8 @@ export default defineComponent({
 </script>

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

 .item-general {
  display: flex;
@@ -191,7 +191,7 @@ export default defineComponent({
  }
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .item-general {
    flex-direction: column;
    justify-content: center;
@@ -59,7 +59,7 @@ export default defineComponent({
 </script>

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

 .entry-status {
  display: flex;
@@ -67,7 +67,7 @@ export default defineComponent({
  flex-wrap: wrap;
  gap: 0.5em;

-  @include smallScreen() {
+  @include responsive.smallScreen{
    justify-content: center;
  }
 }
@@ -187,7 +187,7 @@ export default defineComponent({
 </script>

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

 .entry-stops {
  word-wrap: break-word;
@@ -12,14 +12,6 @@
      <hr class="header-separator" />

      <div class="info-stats">
-        <span class="badge stat-badge">
-          <span>{{ $t('journal.driver-stats.timetables') }}</span>
-          <span
-            >{{ store.driverStatsData._count.fulfilled }} /
-            {{ store.driverStatsData._count._all }}</span
-          >
-        </span>
-
        <span class="badge stat-badge">
          <span>{{ $t('journal.driver-stats.longest-timetable') }}</span>
          <span> {{ store.driverStatsData._max.routeDistance.toFixed(2) }}km </span>
@@ -29,12 +21,43 @@
          <span>{{ $t('journal.driver-stats.avg-timetable') }}</span>
          <span> {{ store.driverStatsData._avg.routeDistance.toFixed(2) }}km </span>
        </span>
+      </div>
+
+      <hr class="section-separator" />
+
+      <div class="info-stats">
+        <span class="badge stat-badge">
+          <span>{{ $t('journal.driver-stats.timetables') }}</span>
+          <span>
+            {{ store.driverStatsData._count.fulfilled }} /
+            {{ store.driverStatsData._count._all }}
+
+            <template v-if="store.driverStatsData._count._all > 0">
+              ({{
+                (
+                  (store.driverStatsData._count.fulfilled / store.driverStatsData._count._all) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
+          </span>
+        </span>

        <span class="badge stat-badge">
          <span>{{ $t('journal.driver-stats.distance') }}</span>
          <span>
            {{ store.driverStatsData._sum.currentDistance.toFixed(2) }} /
            {{ store.driverStatsData._sum.routeDistance.toFixed(2) }}km
+
+            <template v-if="store.driverStatsData._sum.routeDistance > 0">
+              ({{
+                (
+                  (store.driverStatsData._sum.currentDistance /
+                    store.driverStatsData._sum.routeDistance) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
          </span>
        </span>

@@ -43,6 +66,16 @@
          <span>
            {{ store.driverStatsData._sum.confirmedStopsCount }} /
            {{ store.driverStatsData._sum.allStopsCount }}
+
+            <template v-if="store.driverStatsData._sum.allStopsCount > 0">
+              ({{
+                (
+                  (store.driverStatsData._sum.confirmedStopsCount /
+                    store.driverStatsData._sum.allStopsCount) *
+                  100
+                ).toFixed(2)
+              }}%)
+            </template>
          </span>
        </span>
      </div>
@@ -68,5 +101,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/JournalStats.scss';
+@use '../../../styles/journal-stats';
 </style>
@@ -3,14 +3,14 @@
    <!-- General -->
    <EntryGeneral :timetable="timetableEntry" />

+    <!-- Route -->
+    <div class="entry-route">
+      <b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
+    </div>
+
+    <hr />
+
    <div @click="toggleExtraInfo" style="cursor: pointer">
-      <!-- Route -->
-      <div class="entry-route">
-        <b>{{ timetableEntry.route.replace('|', ' - ') }}</b>
-      </div>
-
-      <hr />
-
      <!-- Status -->
      <EntryStatus :timetable="timetableEntry" />
    </div>
@@ -134,15 +134,20 @@ export default defineComponent({
 </script>

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

 .timetable-history-entry {
  background-color: #1a1a1a;
  padding: 1em;
 }

-@include smallScreen {
+.entry-route {
+  display: flex;
+}
+
+@include responsive.smallScreen{
  .entry-route {
+    justify-content: center;
    text-align: center;
  }
 }
@@ -107,10 +107,11 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/JournalSection.scss';
-@import '../../../styles/animations.scss';
+@use '../../../styles/animations';
+@use '../../../styles/journal-section';
+@use '../../../styles/responsive';

-@include smallScreen {
+@include responsive.smallScreen{
  .journal_item-info {
    text-align: center;
  }
@@ -148,8 +148,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/sceneryViewTables.scss';
+@use '../../styles/responsive';
+@use '../../styles/scenery-history-table';

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

-@include smallScreen {
+@include responsive.smallScreen{
  .journal-list > div {
    flex-direction: column;
    justify-content: center;
@@ -35,8 +35,7 @@ export default defineComponent({
 </script>

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

 .info-header {
  margin-top: 1em;
@@ -1,69 +1,11 @@
 <template>
  <div class="scenery-info">
    <section>
-      <div class="scenery-info-general">
-        <SceneryInfoIcons :station="station" />
+      <SceneryInfoIcons :station="station" />
+      <SceneryInfoGeneral :station="station" />
+      <SceneryInfoRoutes v-if="station" :station="station" />
+      <SceneryInfoAuthors :station="station" />

-        <div class="scenery-general-list" v-if="station?.generalInfo">
-          <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
-                )
-              }}
-            </span>
-          </span>
-
-          <span>
-            &bull; <b>{{ $t('controls.title') }}:</b>
-            {{ $t(`controls.${station.generalInfo.controlType}`) }}
-          </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>
-        </div>
-
-        <SceneryInfoRoutes v-if="station" :station="station" />
-
-        <div
-          class="scenery-authors"
-          v-if="station?.generalInfo?.authors && station.generalInfo.authors.length > 0"
-        >
-          <b>
-            {{
-              $t(
-                'scenery.authors-title',
-                { authors: station.generalInfo.authors.length },
-                station.generalInfo.authors.length
-              )
-            }}:
-          </b>
-          {{ station.generalInfo.authors.join(', ') }}
-        </div>
-      </div>

      <div style="margin: 2em 0; height: 2px; background-color: white"></div>

@@ -89,15 +31,20 @@ import SceneryInfoIcons from './SceneryInfo/SceneryInfoIcons.vue';
 import SceneryInfoUserList from './SceneryInfo/SceneryInfoUserList.vue';
 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 { ActiveScenery, Station } from '../../typings/common';

 export default defineComponent({
  components: {
    SceneryInfoDispatcher,
+    SceneryInfoGeneral,
    SceneryInfoIcons,
+    SceneryInfoAuthors,
    SceneryInfoUserList,
    SceneryInfoSpawnList,
-    SceneryInfoRoutes
+    SceneryInfoRoutes,
  },
  props: {
    station: {
@@ -112,8 +59,8 @@ export default defineComponent({
 </script>

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

 h3.section-header {
  margin: 0.5em 0;
@@ -134,20 +81,6 @@ h3.section-header {
  margin-top: 1em;
 }

-.scenery-info-general {
-  margin-top: 1em;
-}
-
-.scenery-general-list {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-
-  span {
-    margin: 0 0.15em;
-  }
-}
-
 .scenery-topic a {
  font-weight: bold;
 }
@@ -0,0 +1,30 @@
+<template>
+  <section
+    class="scenery-authors"
+    v-if="station?.generalInfo?.authors && station.generalInfo.authors.length > 0"
+  >
+    <b>
+      {{
+        $t(
+          'scenery.authors-title',
+          { authors: station.generalInfo.authors.length },
+          station.generalInfo.authors.length
+        )
+      }}:
+    </b>
+    {{ station.generalInfo.authors.join(', ') }}
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { Station } from '../../../typings/common';
+
+export default defineComponent({
+  props: {
+    station: {
+      type: Object as PropType<Station>
+    }
+  }
+});
+</script>
@@ -0,0 +1,92 @@
+<template>
+  <section class="info-general">
+    <div v-if="station?.generalInfo === undefined">
+      <b>{{ $t('scenery.no-data') }}</b>
+    </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
+            )
+          }}
+        </span>
+      </span>
+
+      <span>
+        &bull; <b>{{ $t('controls.title') }}:</b>
+        {{ $t(`controls.${station.generalInfo.controlType}`) }}
+      </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>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { Station } from '../../../typings/common';
+
+export default defineComponent({
+  props: {
+    station: {
+      type: Object as PropType<Station>
+    }
+  },
+
+  computed: {
+    additionalTools() {
+      if (this.$props.station?.generalInfo === undefined) return [];
+      let tools = [];
+
+      if (this.$props.station.generalInfo.SUP) tools.push('SUP');
+      if (this.$props.station.generalInfo.ASDEK) tools.push('ASDEK');
+
+      return tools;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.info-general {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  div {
+    margin: 0 0.15em;
+  }
+}
+</style>
@@ -17,25 +17,6 @@
      {{ station?.generalInfo.reqLevel >= 2 ? station?.generalInfo.reqLevel : 'L' }}
    </span>

-    <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?.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?.availability == 'nonPublic'"
      class="icon-info"
@@ -60,6 +41,33 @@
      :title="$t('sceneries.info.abandoned')"
    />

+    <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?.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?.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"
@@ -75,14 +83,6 @@
      alt="dSAT ASDEK"
      :title="$t('sceneries.info.ASDEK')"
    />
-
-    <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}`"
-    />
  </section>
 </template>

@@ -102,7 +102,7 @@ export default defineComponent({
 </script>

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

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

      <ul class="routes-list">
-        <li
-          v-for="route in oneWayRoutes"
-          :key="route.routeName"
-          @click="setActiveShowLength(route.routeName)"
-        >
+        <li v-for="route in oneWayRoutes" :key="route.routeName">
          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
            {{ route.routeName }}</span
          >
          <span v-if="route.routeSpeed" class="speed">
-            {{
-              activeShowLength.includes(route.routeName)
-                ? route.routeLength + 'm'
-                : route.routeSpeed
-            }}
+            {{ route.routeSpeed }}
+          </span>
+          <span v-if="route.routeLength" class="length">
+            {{ (route.routeLength / 1000).toFixed(1) + 'km' }}
          </span>
          <span v-if="route.isRouteSBL" class="sbl">SBL</span>
        </li>
@@ -25,23 +28,24 @@
    </div>

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

      <ul class="routes-list">
-        <li
-          v-for="route in twoWayRoutes"
-          :key="route.routeName"
-          @click="setActiveShowLength(route.routeName)"
-        >
-          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">{{
-            route.routeName
-          }}</span>
-          <span v-if="route.routeSpeed" class="speed">
-            {{
-              activeShowLength.includes(route.routeName)
-                ? route.routeLength + 'm'
-                : route.routeSpeed
-            }}
+        <li v-for="route in twoWayRoutes" :key="route.routeName">
+          <span :class="{ 'no-catenary': !route.isElectric, internal: route.isInternal }">
+            {{ route.routeName }}
+          </span>
+          <span v-if="route.routeSpeed" class="speed">{{ route.routeSpeed }}</span>
+          <span v-if="route.routeLength" class="length">
+            {{ (route.routeLength / 1000).toFixed(1) + 'km' }}
          </span>
          <span v-if="route.isRouteSBL" class="sbl">SBL</span>
        </li>
@@ -53,6 +57,7 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import { Station } from '../../../typings/common';
+import StorageManager from '../../../managers/storageManager';

 export default defineComponent({
  props: {
@@ -62,27 +67,50 @@ export default defineComponent({
    }
  },

-  methods: {
-    setActiveShowLength(name: string) {
-      if (this.activeShowLength.includes(name))
-        this.activeShowLength.splice(this.activeShowLength.indexOf(name), 1);
-      else this.activeShowLength.push(name);
+  data() {
+    return {
+      showInternalSingleRoutes: false,
+      showInternalDoubleRoutes: false
+    };
+  },
+
+  mounted() {
+    if (StorageManager.getBooleanValue('showInternalDoubleRoutes')) {
+      this.showInternalDoubleRoutes = StorageManager.getBooleanValue('showInternalDoubleRoutes');
+    }
+
+    if (StorageManager.getBooleanValue('showInternalSingleRoutes')) {
+      this.showInternalSingleRoutes = StorageManager.getBooleanValue('showInternalSingleRoutes');
    }
  },

-  data() {
-    return {
-      activeShowLength: [] as string[]
-    };
+  methods: {
+    toggleRoutesVisibility(type: 'single' | 'double') {
+      if (type == 'double') {
+        this.showInternalDoubleRoutes = !this.showInternalDoubleRoutes;
+        StorageManager.setBooleanValue('showInternalDoubleRoutes', this.showInternalDoubleRoutes);
+      } else {
+        this.showInternalSingleRoutes = !this.showInternalSingleRoutes;
+        StorageManager.setBooleanValue('showInternalSingleRoutes', this.showInternalSingleRoutes);
+      }
+    }
  },

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

    twoWayRoutes() {
-      return this.station.generalInfo?.routes.double ?? [];
+      return (
+        this.station.generalInfo?.routes.double
+          .filter((r) => !r.isInternal || r.isInternal == this.showInternalDoubleRoutes)
+          .sort((r1, r2) => r1.routeName.localeCompare(r2.routeName)) ?? []
+      );
    }
  }
 });
@@ -92,20 +120,26 @@ export default defineComponent({
 .info-routes {
  display: flex;
  justify-content: center;
-  flex-wrap: wrap;
+  flex-direction: column;

  margin: 1em 0;
 }

 .routes {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-
  padding: 0.25em;
 }

+.routes > button.routes-btn {
+  margin: 0 auto;
+  display: inline-block;
+
+  i {
+    margin-left: 0.5em;
+    width: 1.25em;
+    height: 1.25em;
+  }
+}
+
 ul.routes-list {
  margin: 0.45em 0.25em;
  display: flex;
@@ -121,7 +155,7 @@ ul.routes-list {
    -webkit-user-select: none;

    span {
-      padding: 0.2em 0.25em;
+      padding: 0.2em;
      background-color: #007599;
      font-weight: bold;

@@ -138,6 +172,10 @@ ul.routes-list {
        color: #cfcfcf;
      }

+      &.length {
+        background-color: #303030;
+        color: #cfcfcf;
+      }
      &.sbl {
        color: var(--clr-primary);
        background-color: #404040;
@@ -53,8 +53,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-
 ul {
  position: relative;
 }
@@ -18,12 +18,15 @@
        :key="train.id"
        :data-status="status"
      >
-        <router-link :to="train.driverRouteLocation" class="a-block">
+        <router-link :to="train.driverRouteLocation">
          <span class="user_train"> {{ train.trainNo }}</span>
          <span class="user_name">
            {{ train.driverName }}
            <i
-              v-if="train.timetableData != undefined && train.lastSeen <= Date.now() - 120000"
+              v-if="
+                train.timetableData != undefined &&
+                (train.lastSeen <= Date.now() - 60000 || !train.online)
+              "
              class="fa-solid fa-user-slash"
              style="color: lightcoral"
              data-tooltip-type="BaseTooltip"
@@ -64,7 +64,7 @@
        </div>

        <router-link
-          class="timetable-item a-block"
+          class="timetable-item"
          v-else
          v-for="(row, i) in sceneryTimetables"
          :key="row.train.id + i"
@@ -130,7 +130,7 @@

            <span class="schedule-stop">
              <span class="stop-connection">
-                {{ row.arrivingLine }}
+                {{ row.currentElement.arrivalRouteExt }}
              </span>

              <span class="stop-time">
@@ -139,7 +139,7 @@
              </span>

              <span class="stop-connection">
-                {{ row.departureLine }}
+                {{ row.currentElement.departureRouteExt }}
              </span>
            </span>

@@ -279,12 +279,9 @@ export default defineComponent({
          return {
            checkpointStop: ct.checkpointStop,
            train: ct.train,
-            prevDepartureLine: ct.previousSceneryElement?.departureRouteExt ?? null,
-            nextArrivalLine: ct.nextSceneryElement?.arrivalRouteExt ?? null,
-            departureLine: ct.timetablePathElement.departureRouteExt ?? null,
-            arrivingLine: ct.timetablePathElement.arrivalRouteExt ?? null,
-            prevStationName: ct.previousSceneryElement?.stationName ?? null,
-            nextStationName: ct.nextSceneryElement?.stationName ?? null,
+            prevElement: ct.previousSceneryElement,
+            nextElement: ct.nextSceneryElement,
+            currentElement: ct.timetablePathElement,
            status: trainStopStatus
          };
        })
@@ -330,9 +327,8 @@ export default defineComponent({
 </script>

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

 .scenery-timetable {
  height: 100%;
@@ -439,7 +435,7 @@ export default defineComponent({

  &.current {
    font-weight: bold;
-    color: $accentCol;
+    color: var(--clr-primary);
  }
 }

@@ -452,7 +448,7 @@ export default defineComponent({
  flex-wrap: wrap;

  .info-number {
-    color: $accentCol;
+    color: var(--clr-primary);
  }

  .info-route {
@@ -488,7 +484,7 @@ export default defineComponent({
      align-self: center;
      font-size: 0.9em;

-      color: $accentCol;
+      color: var(--clr-primary);

      &::after {
        content: '\027F6';
@@ -505,7 +501,7 @@ export default defineComponent({
  font-size: 0.85em;
 }

-@include smallScreen {
+@include responsive.smallScreen {
  .timetable-item {
    grid-template-columns: 1fr;
  }
@@ -188,8 +188,8 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/sceneryViewTables.scss';
+@use '../../styles/responsive';
+@use '../../styles/scenery-history-table';

 .scenery-timetables-history {
  height: 100%;
@@ -2,7 +2,9 @@
  <div class="general-status">
    <span
      :class="computedScheduledTrain.status"
-      :title="computedScheduledTrain.stopStatusDescription"
+      data-tooltip-type="HtmlTooltip"
+      :data-tooltip-content="computedScheduledTrain.stopStatusDescription"
+      @click.prevent="() => {}"
    >
      {{ computedScheduledTrain.stopStatusIndicator }}
    </span>
@@ -24,16 +26,16 @@ export default defineComponent({

  computed: {
    computedScheduledTrain() {
-      const { prevDepartureLine, prevStationName, nextArrivalLine, nextStationName, status } =
-        this.sceneryTimetableRow;
+      const { status, prevElement, currentElement, nextElement } = this.sceneryTimetableRow;

-      const prevDepartureIndicator = prevDepartureLine
-        ? `(${prevDepartureLine}) ${prevStationName}`
-        : '---';
-      const nextArrivalIndicator = nextArrivalLine
-        ? `(${nextArrivalLine}) ${nextStationName}`
+      const prevDepartureIndicator = prevElement?.departureRouteExt
+        ? `(${prevElement.departureRouteExt}) ${prevElement.stationName}`
        : '---';

+      const nextArrivalIndicator = nextElement?.arrivalRouteExt
+        ? `(${nextElement.arrivalRouteExt}) ${nextElement.stationName}`
+        : `${currentElement.stationName}`;
+
      let stopStatusDescription = '',
        stopStatusIndicator = '';

@@ -41,34 +43,45 @@ export default defineComponent({
        case StopStatus.ARRIVING:
          stopStatusIndicator = `${this.$t('timetables.from')}: ${prevDepartureIndicator}`;
          stopStatusDescription = this.$t('timetables.desc-arriving', {
-            prevStationName,
-            prevDepartureLine
+            prevStationName: prevElement?.stationName ?? '',
+            prevDepartureLine: prevElement?.departureRouteExt ?? ''
          });
          break;

        case StopStatus.ONLINE:
        case StopStatus.STOPPED:
-          stopStatusIndicator = nextArrivalLine
+          stopStatusIndicator = nextElement?.arrivalRouteExt
            ? `${this.$t('timetables.to')}: ${nextArrivalIndicator}`
            : `${this.$t('timetables.desc-end')}`;
-          stopStatusDescription = nextArrivalLine
-            ? this.$t(`timetables.desc-${status}`, { nextStationName, nextArrivalLine })
+          stopStatusDescription = nextElement?.arrivalRouteExt
+            ? this.$t(`timetables.desc-${status}`, {
+                nextStationName: nextElement?.stationName,
+                nextArrivalLine: nextElement?.arrivalRouteExt
+              })
            : '';
          break;

        case StopStatus.DEPARTED:
          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
-          stopStatusDescription = this.$t('timetables.desc-departed', {
-            nextStationName,
-            nextArrivalLine
-          });
+
+          if (!nextElement?.stationName) {
+            stopStatusDescription = this.$t('timetables.desc-departed-ends', {
+              nextStationName: currentElement.stationName
+            });
+          } else {
+            stopStatusDescription = this.$t('timetables.desc-departed', {
+              nextStationName: nextElement?.stationName ?? currentElement.stationName,
+              nextArrivalLine: nextElement?.arrivalRouteExt
+            });
+          }
+
          break;

        case StopStatus.DEPARTED_AWAY:
          stopStatusIndicator = `${this.$t('timetables.to')}: ${nextArrivalIndicator}`;
          stopStatusDescription = this.$t('timetables.desc-departed-away', {
-            nextStationName,
-            nextArrivalLine
+            nextStationName: nextElement?.stationName,
+            nextArrivalLine: nextElement?.arrivalRouteExt
          });
          break;

@@ -93,6 +106,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .general-status {
  margin-top: 0.5em;
+  cursor: help;

  span.arriving {
    color: #ccc;
@@ -1,13 +1,10 @@
-import { StopStatus, Train, TrainStop } from '../../typings/common';
+import { StopStatus, TimetablePathElement, Train, TrainStop } from '../../typings/common';

 export interface SceneryTimetableRow {
  checkpointStop: TrainStop;
  train: Train;
-  prevDepartureLine: string | null;
-  nextArrivalLine: string | null;
-  departureLine: string | null;
-  arrivingLine: string | null;
-  prevStationName: string | null;
-  nextStationName: string | null;
+  prevElement: TimetablePathElement | null;
+  nextElement: TimetablePathElement | null;
+  currentElement: TimetablePathElement;
  status: StopStatus;
 }
@@ -66,8 +66,6 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/variables.scss';
-
 label {
  position: relative;
  user-select: none;
@@ -98,7 +96,7 @@ label {
    }

    &:focus-visible + span {
-      outline: 1px solid $accentCol;
+      outline: 1px solid var(--clr-primary);
    }
  }
 }
@@ -121,7 +121,7 @@
          </section>

          <section class="card_sliders">
-            <div class="slider" v-for="(slider, i) in initSliders" :key="i">
+            <div class="slider" v-for="(slider, i) in sliderStates" :key="i">
              <input
                class="slider-input"
                type="range"
@@ -130,7 +130,7 @@
                :min="slider.minRange"
                :max="slider.maxRange"
                :step="slider.step"
-                v-model="filters[slider.id]"
+                v-model.number="filters[slider.id]"
              />
              <span class="slider-value">{{ filters[slider.id] }}</span>
              <div class="slider-content">
@@ -178,7 +178,7 @@ import StorageManager from '../../managers/storageManager';

 import {
  filtersSections,
-  initSliders,
+  sliderStates,
  initFilters,
  getChangedFilters
 } from '../../managers/stationFilterManager';
@@ -197,7 +197,7 @@ export default defineComponent({
    saveOptions: false,

    filtersSections,
-    initSliders,
+    sliderStates,

    minimumHours: 0,
    authors: '',
@@ -379,10 +379,9 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/responsive';
-@import '../../styles/card';
-@import '../../styles/animations';
-@import '../../styles/variables';
+@use '../../styles/responsive';
+@use '../../styles/card';
+@use '../../styles/animations';

 h3.section-header {
  text-align: center;
@@ -432,7 +431,7 @@ h3.section-header {
 .card_title {
  font-size: 2em;
  font-weight: 700;
-  color: $accentCol;
+  color: var(--clr-primary);

  text-align: center;
 }
@@ -453,7 +452,7 @@ h3.section-header {
    span {
      min-width: 120px;
      font-weight: bold;
-      color: $accentCol;
+      color: var(--clr-primary);
    }

    button {
@@ -527,7 +526,7 @@ h3.section-header {
    }

    &:focus-visible + span {
-      outline: 1px solid $accentCol;
+      outline: 1px solid var(--clr-primary);
    }
  }
 }
@@ -567,15 +566,17 @@ h3.section-header {
 }

 .slider {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 50px 1fr;
  align-items: center;
  gap: 0.25em;

  margin-bottom: 1em;

  &-value {
-    color: $accentCol;
+    color: var(--clr-primary);
    padding: 0.1em 0.2em;
+    text-align: center;
  }

  &-input {
@@ -602,13 +603,14 @@ h3.section-header {
      border-radius: 50%;

      background: white;
-      border: 4px solid $accentCol;
+      border: 3px solid var(--clr-primary);
+      background-color: #333;

-      @include smallScreen() {
+      @include responsive.smallScreen{
        width: 15px;
        height: 15px;
        margin-top: -5px;
-        border: 3px solid $accentCol;
+        border: 3px solid var(--clr-primary);
      }
    }

@@ -619,14 +621,14 @@ h3.section-header {
      border-radius: 50%;

      background: white;
-      border: 4px solid $accentCol;
+      border: 4px solid var(--clr-primary);

      cursor: pointer;

-      @include smallScreen() {
+      @include responsive.smallScreen{
        width: 1em;
        height: 1em;
-        border: 3px solid $accentCol;
+        border: 3px solid var(--clr-primary);
      }
    }

@@ -656,14 +658,19 @@ h3.section-header {
  }
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .slider {
+    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    &-input {
      width: 90%;
    }
+
+    &-content {
+      text-align: center;
+    }
  }
 }
 </style>
@@ -8,58 +8,106 @@

    <button class="filter-button btn--filled btn--image" @click="toggleDropdown" ref="button">
      <img src="/images/icon-stats.svg" alt="Open filters icon" />
-      <!-- {{ $t('train-stats.stats-button') }} -->
-      <span>STATYSTYKI</span>
+      {{ $t('station-stats.stats-button') }}
    </button>

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

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

-          <ul class="stats-list">
-            <li>
-              <span>
-                {{ $t('station-stats.u-factor') }}
-                <a
-                  href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
-                  target="_blank"
-                  :data-tooltip="$t('station-stats.u-factor-tooltip')"
-                  >(?)</a
-                >:
-              </span>
-              <b class="u-factor" :style="calculateFactorStyle()">
-                {{ uFactor.toFixed(2) }}
-              </b>
-            </li>
-            <li>
-              {{ $t('station-stats.avg-timetable-count') }}
-              <b>{{ avgTimetableCount.toFixed(2) }}</b>
-            </li>
-            <li>
-              {{ $t('station-stats.single-track-count') }}
-              <b>{{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
-            </li>
-            <li>
-              {{ $t('station-stats.double-track-count') }}
-              <b>{{ trackCount.twoWay }}</b>
-              (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
-            </li>
-            <li>
-              {{ $t('station-stats.cross-sceneries') }}
-              <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
-            </li>
-            <li>
-              {{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
-              <b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
-              <b>{{ spawnCount.all }}</b> - ALL
-            </li>
-          </ul>
+          <div v-if="uFactor > -1 || avgTimetableCount > -1 || trackCount.all > 0">
+            <div class="badges-container">
+              <div class="badge stat-badge">
+                <span>
+                  {{ $t('station-stats.u-factor') }}
+                  <a
+                    href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
+                    target="_blank"
+                    :data-tooltip="$t('station-stats.u-factor-tooltip')"
+                    >(?)</a
+                  >:
+                </span>
+
+                <span>
+                  <b class="u-factor" :style="calculateFactorStyle()">
+                    {{ uFactor >= 0 ? uFactor.toFixed(2) : '---' }}
+                  </b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span>{{ $t('station-stats.avg-timetable-count') }}</span>
+                <span>
+                  <b>{{ avgTimetableCount >= 0 ? avgTimetableCount.toFixed(2) : '---' }}</b>
+                </span>
+              </div>
+            </div>
+
+            <hr style="margin: 0.5em 0" />
+
+            <div class="badges-container">
+              <div class="badge stat-badge">
+                <span>{{ $t('station-stats.single-track-count') }}</span>
+                <span>
+                  <b> {{ trackCount.oneWay }}</b> (<b>{{ trackCount.oneWayElectric }} ⚡</b>)
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span>{{ $t('station-stats.double-track-count') }}</span>
+                <span>
+                  <b>{{ trackCount.twoWay }}</b> (<b>{{ trackCount.twoWayElectric }} ⚡</b>)
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.cross-sceneries') }}</span>
+                <span>
+                  <b>{{ trackCount.crossTrack }}</b> (<b>{{ trackCount.crossTrackElectric }} ⚡</b>)
+                </span>
+              </div>
+            </div>
+
+            <hr style="margin: 0.5em 0" />
+
+            <div class="badges-container">
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-all') }}</span>
+                <span>
+                  <b>{{ spawnCount.all }}</b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-pas') }}</span>
+                <span>
+                  <b>{{ spawnCount.passenger }}</b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-freight') }}</span>
+                <span>
+                  <b>{{ spawnCount.freight }}</b>
+                </span>
+              </div>
+
+              <div class="badge stat-badge">
+                <span> {{ $t('station-stats.open-spawns-loco') }}</span>
+                <span>
+                  <b>{{ spawnCount.loco }}</b>
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="no-data" v-else>{{ $t('station-stats.no-stats') }}</div>
        </div>

        <div tabindex="0" @focus="() => (showDropdown = false)"></div>
@@ -86,9 +134,9 @@ export default defineComponent({
    },

    calculateFactorStyle() {
-      if (this.uFactor == 0) return '';
+      if (this.uFactor <= 0) return '';

-      const norm = this.uFactor == 0 ? 1 : Math.max(Math.min(this.uFactor / 2, 1), 0);
+      const norm = Math.max(Math.min(this.uFactor / 2, 1), 0);
      const lerp = 120 * norm;

      return `color: hsl(${lerp}, 100%, 60%)`;
@@ -105,7 +153,7 @@ export default defineComponent({
        (train) => train.region == this.mainStore.region.id
      );

-      return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : 0;
+      return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : -1;
    },

    avgTimetableCount() {
@@ -118,7 +166,7 @@ export default defineComponent({
        return acc;
      }, 0);

-      if (regionSceneries.length == 0) return 0;
+      if (regionSceneries.length == 0) return -1;

      return timetableCountSum / regionSceneries.length;
    },
@@ -135,6 +183,8 @@ export default defineComponent({
          (acc, st) => {
            const { routes } = st.generalInfo!;

+            acc.all++;
+
            if (
              routes.single.filter((r) => !r.isInternal).length > 0 &&
              routes.double.filter((r) => !r.isInternal).length > 0
@@ -163,7 +213,8 @@ export default defineComponent({
            twoWay: 0,
            twoWayElectric: 0,
            crossTrack: 0,
-            crossTrackElectric: 0
+            crossTrackElectric: 0,
+            all: 0
          }
        );
    },
@@ -190,15 +241,18 @@ export default defineComponent({
 </script>

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

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

-h3 {
-  margin: 0.5em 0;
+.badges-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
 }

 .u-factor {
@@ -219,19 +273,14 @@ h3 {
  }
 }

-ul.stats-list {
-  list-style: disc;
-  padding-left: 1em;
-  margin-top: 1em;
-
-  & > li {
-    margin: 0.25em 0;
-  }
+.no-data {
+  font-size: 1.1em;
+  color: #ccc;
 }

-@include smallScreen {
-  .filter-button span {
-    display: none;
+@include responsive.smallScreen {
+  h1.stats-title {
+    text-align: center;
  }
 }
 </style>
@@ -400,9 +400,10 @@ export default defineComponent({
 </script>

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

 $rowCol: #424242;

@@ -429,14 +430,16 @@ table {
  min-width: 1250px;
  white-space: wrap;

+  thead {
+    position: sticky;
+    top: 0;
+  }
+
  thead tr {
-    background-color: $bgCol;
+    background-color: var(--clr-bg3);
  }

  thead th {
-    position: sticky;
-    top: 0;
-
    &.station {
      width: 12em;
    }
@@ -475,7 +478,7 @@ table {
    }

    padding: 0.5em 0.25em;
-    background-color: $bgCol;
+    background-color: var(--clr-bg3);
    white-space: pre-wrap;

    cursor: pointer;
@@ -502,13 +505,13 @@ tr,
  vertical-align: middle;

  &:nth-child(even) {
-    background-color: lighten($rowCol, 5);
+    background-color: color.adjust($rowCol, $lightness: 5%);
    color: white;
  }

  &:hover,
  &:focus {
-    background-color: lighten($rowCol, 20);
+    background-color: color.adjust($rowCol, $lightness: 15%);
  }

  td {
@@ -522,7 +525,7 @@ tr,
      opacity: 0.2;
    }

-    @include smallScreen() {
+    @include responsive.smallScreen{
      margin: 0;
      padding: 0.3em 0.5em;
      font-size: 1em;
@@ -535,7 +538,7 @@ tr,
  max-width: 200px;

  &.default {
-    color: $accentCol;
+    color: var(--clr-primary);
  }

  &.nonPublic {
@@ -120,6 +120,8 @@ 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);
+
  return (
    filters['minLevel'] > reqLevel + (otherAvailability ? 1 : 0) ||
    filters['maxLevel'] < reqLevel + (otherAvailability ? 1 : 0) ||
@@ -130,7 +132,13 @@ function filterSliderValues(filters: Record<string, any>, generalInfo: StationGe
    filters['minOneWayCatenary'] > routes.singleElectrifiedNames.length ||
    filters['minOneWay'] > routes.singleOtherNames.length ||
    filters['minTwoWayCatenary'] > routes.doubleElectrifiedNames.length ||
-    filters['minTwoWay'] > routes.doubleOtherNames.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
  );
 }

@@ -235,7 +243,7 @@ export const sortStations = (a: Station, b: Station, sorter: ActiveSorter) => {
  return a.name.localeCompare(b.name);
 };

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

@@ -0,0 +1,39 @@
+<template>
+  <div class="tooltip-content">
+    <span v-html="tooltipStore.content"></span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5em;
+  white-space: pre-line;
+
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #1f1f1f;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+
+img {
+  height: 1em;
+}
+</style>
@@ -12,11 +12,19 @@ import VehiclePreviewTooltip from './VehiclePreviewTooltip.vue';
 import BaseTooltip from './BaseTooltip.vue';
 import SpawnsTooltip from './SpawnsTooltip.vue';
 import UsersTooltip from './UsersTooltip.vue';
+import HtmlTooltip from './HtmlTooltip.vue';

 const BOX_PADDING_PX = 20;

 export default defineComponent({
-  components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip, SpawnsTooltip, UsersTooltip },
+  components: {
+    DonatorTooltip,
+    VehiclePreviewTooltip,
+    BaseTooltip,
+    SpawnsTooltip,
+    UsersTooltip,
+    HtmlTooltip
+  },

  data() {
    return {
@@ -187,17 +187,12 @@ import { defineComponent } from 'vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import { Train } from '../../typings/common';
-import speedLimits from '../../data/speedLimits.json';
 import styleMixin from '../../mixins/styleMixin';
 import trainInfoMixin from '../../mixins/trainInfoMixin';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import ProgressBar from '../Global/ProgressBar.vue';
 import StockList from '../Global/StockList.vue';
-
-export type SpeedLimitLocoType = keyof typeof speedLimits;
-
-const isCompatibleLoco = (locoType: string): locoType is SpeedLimitLocoType =>
-  locoType in speedLimits;
+import { speedLimits } from '../../data/speedLimits';

 export default defineComponent({
  mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
@@ -239,19 +234,22 @@ export default defineComponent({

      const headLoco = this.train.stockList[0].slice(0, this.train.stockList[0].indexOf('-'));

-      if (!isCompatibleLoco(headLoco)) return vehicleMaxSpeed;
+      if (speedLimits[headLoco] === undefined) return vehicleMaxSpeed;

      if (this.train.stockList.length == 1) return speedLimits[headLoco]['none'];

-      const speedTable = speedLimits[headLoco][isPassenger ? 'passenger' : 'cargo'];
+      const speedTable: Record<string, number> =
+        speedLimits[headLoco][isPassenger ? 'passenger' : 'cargo'];

      if (!speedTable) return vehicleMaxSpeed;

-      let massKey = Object.keys(speedTable).findLast(
+      const massKey = Object.keys(speedTable).findLast(
        (massKey) => this.train.mass >= Number(massKey)
      );

-      return massKey ? ((speedTable as any)[massKey] as number) : vehicleMaxSpeed;
+      const massMaxSpeed = massKey ? speedTable[massKey] : Infinity;
+
+      return Math.min(massMaxSpeed, vehicleMaxSpeed);
    },
    journalRouteLocation() {
      return {
@@ -266,7 +264,7 @@ export default defineComponent({
 </script>

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

 .image-warning {
  height: 1em;
@@ -299,6 +297,7 @@ export default defineComponent({
 .train-info {
  display: flex;
  flex-direction: column;
+  font-size: 1em;
  gap: 0.25em;

  background-color: #1a1a1a;
@@ -24,31 +24,26 @@
                @blur="preventKeyDown = false"
                :placeholder="$t(`options.search-train`)"
              />
-              <button class="search-exit">
-                <img
-                  src="/images/icon-exit.svg"
-                  alt="Trains search clear icon"
-                  @click="onInputClear('train')"
-                />
+              <button class="btn btn--action search-exit" @click="onInputClear('train')">
+                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
              </button>
            </div>

            <div class="search-box">
-              <input
-                v-model="searchedDriver"
+              <select
                class="search-input"
-                id="driver-search"
-                name="driver-search"
-                @focus="preventKeyDown = true"
-                @blur="preventKeyDown = false"
-                :placeholder="$t(`options.search-driver`)"
-              />
-              <button class="search-exit">
-                <img
-                  src="/images/icon-exit.svg"
-                  alt="Driver search clear icon"
-                  @click="onInputClear('driver')"
-                />
+                name="active-trains"
+                id="active-trains"
+                v-model="searchedDriver"
+              >
+                <option value="">{{ $t('options.search-driver') }}</option>
+                <option v-for="driverName in activeDriverNames" :value="driverName">
+                  {{ driverName }}
+                </option>
+              </select>
+
+              <button class="btn btn--action search-exit" @click="onInputClear('driver')">
+                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
              </button>
            </div>
          </div>
@@ -101,6 +96,7 @@
 import { defineComponent, inject, PropType } from 'vue';
 import keyMixin from '../../mixins/keyMixin';
 import { TrainFilter, TrainFilterSection } from './typings';
+import { useMainStore } from '../../store/mainStore';

 export default defineComponent({
  mixins: [keyMixin],
@@ -120,6 +116,7 @@ export default defineComponent({
  data() {
    return {
      showOptions: false,
+      store: useMainStore(),
      lastSelectedFilter: null as TrainFilter | null,
      TrainFilterSection
    };
@@ -141,6 +138,16 @@ export default defineComponent({
        id,
        value: this.$t(`options.sort-${id}`)
      }));
+    },
+
+    activeDriverNames() {
+      const driverNameSet = new Set<string>();
+
+      this.store.trainList.forEach((train) => {
+        driverNameSet.add(train.driverName);
+      });
+
+      return [...driverNameSet].sort((a, b) => a.localeCompare(b));
    }
  },

@@ -195,8 +202,8 @@ export default defineComponent({
 </script>

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

 .search_content > div {
  margin: 0.5em auto;
@@ -3,11 +3,11 @@
    <div class="schedule-wrapper" v-if="train.timetableData">
      <div class="stops">
        <div
-          v-for="(stop, i) in scheduleStopsV2"
+          v-for="(stop, i) in scheduleStops"
          :key="i"
          class="stop"
          :data-status="stop.status"
-          :data-sbl="stop.isSBL && stop.sceneryName == scheduleStopsV2[i + 1]?.sceneryName"
+          :data-sbl="stop.isSBL && stop.sceneryName == scheduleStops[i + 1]?.sceneryName"
          :data-position="stop.position"
          :data-delayed="stop.departureDelay > 0"
          :data-stop-type="stop.type"
@@ -34,7 +34,7 @@
            <div></div>

            <div class="progress">
-              <div class="line line_connection" v-if="i < scheduleStopsV2.length - 1"></div>
+              <div class="line line_connection" v-if="i < scheduleStops.length - 1"></div>
            </div>

            <div class="bottom-line-info">
@@ -48,9 +48,9 @@
              <span
                v-if="
                  stop.departureLine &&
-                  (scheduleStopsV2[i + 1]?.arrivalLineInfo?.routeSpeed !=
+                  (scheduleStops[i + 1]?.arrivalLineInfo?.routeSpeed !=
                    stop.arrivalLineInfo?.routeSpeed ||
-                    stop.sceneryName != scheduleStopsV2[i + 1]?.sceneryName)
+                    stop.sceneryName != scheduleStops[i + 1]?.sceneryName)
                "
              >
                <div class="scenery-route">
@@ -85,13 +85,13 @@
                </div>

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

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

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

-                  <span v-if="scheduleStopsV2[i + 1].arrivalLineInfo">
-                    <span> | {{ scheduleStopsV2[i + 1].arrivalLineInfo!.routeSpeed }} </span>
+                  <span v-if="scheduleStops[i + 1].arrivalLineInfo">
+                    <span> | {{ scheduleStops[i + 1].arrivalLineInfo!.routeSpeed }} </span>

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

                    <img
-                      v-if="scheduleStopsV2[i + 1].arrivalLineInfo!.isRouteSBL"
+                      v-if="scheduleStops[i + 1].arrivalLineInfo!.isRouteSBL"
                      src="/images/icon-sbl-transparent.svg"
                      width="14"
                      data-tooltip-type="BaseTooltip"
@@ -206,7 +206,7 @@ export default defineComponent({
  },

  computed: {
-    scheduleStopsV2() {
+    scheduleStops() {
      if (!this.train.timetableData) return [];

      const { timetablePath, followingStops } = this.train.timetableData;
@@ -224,20 +224,18 @@ export default defineComponent({
      let isActive = false;

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

      for (const stop of followingStops) {
        let isExternal = false;

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

+          departureLineInfo = pathData?.arrivalLineData ?? null;
+
          if (pathData?.arrivalLineData) {
            arrivalLineInfo = pathData.arrivalLineData;
          }
@@ -282,8 +280,7 @@ export default defineComponent({
          departureLineInfo,

          isExternal,
-
-          isActive: isActive,
+          isActive,

          isSBL: /sbl/gi.test(stop.stopName),
          position: stop.beginsHere ? 'begin' : stop.terminatesHere ? 'end' : 'en-route',
@@ -312,11 +309,7 @@ export default defineComponent({

        stopRows.push(rowData);

-        if (
-          stop.departureLine &&
-          currentPath.departureRouteExt &&
-          stop.departureLine == currentPath.departureRouteExt
-        ) {
+        if (stop.departureLine === currentPath.departureRouteExt) {
          // Reverse search for last scenery checkpoint
          if (pathData?.departureLineData) {
            stopRows[stopRows.length - 1].isExternal = true;
@@ -374,7 +367,7 @@ export default defineComponent({
 </script>

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

 $barClr: #b1b1b1;
 $confirmedClr: #4ae24a;
@@ -80,7 +80,11 @@
            <h3>{{ $t('train-stats.top-units') }}</h3>

            <transition-group tag="ul" name="stats-anim">
-              <li class="badge stat-badge" v-for="top in stats.topUnits.slice(0, 7)" :key="top.name">
+              <li
+                class="badge stat-badge"
+                v-for="top in stats.topUnits.slice(0, 7)"
+                :key="top.name"
+              >
                <span>{{ top.name }}</span>
                <span>{{ top.count }}</span>
              </li>
@@ -221,9 +225,9 @@ export default defineComponent({
 </script>

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

 h1 img {
  vertical-align: text-bottom;
@@ -248,7 +252,7 @@ h3 {
  max-width: 600px;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .no-data {
    text-align: center;
  }
@@ -19,7 +19,7 @@
        >)
      </div>

-      <transition-group name="list-anim" tag="ul">
+      <transition-group name="list-anim" tag="div" class="list_wrapper">
        <TrainTableItem v-for="train in trains" :key="train.id" :train="train" />
      </transition-group>
    </div>
@@ -93,8 +93,8 @@ export default defineComponent({
 </script>

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

 .train-table {
  height: calc(100vh - 11em);
@@ -105,6 +105,10 @@ export default defineComponent({
  overflow-x: hidden;
 }

+.list_wrapper {
+  padding: 2px; // ensures focused items outline visibility
+}
+
 .table-warning {
  text-align: center;

@@ -1,29 +1,27 @@
 <template>
-  <li class="train-item">
-    <router-link class="a-block" :to="train.driverRouteLocation">
-      <div class="item-wrapper">
-        <TrainInfo :train="train" />
+  <router-link :to="train.driverRouteLocation" class="train-item">
+    <div class="item-wrapper">
+      <TrainInfo :train="train" />

-        <div class="train-stats">
-          <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+      <div class="train-stats">
+        <StockList :trainStockList="train.stockList" :tractionOnly="true" />
+
+        <div>
+          <span>{{ train.speed }}km/h</span>

          <div>
-            <span>{{ train.speed }}km/h</span>
-
-            <div>
-              <span> {{ train.length }}m</span>
+            <span> {{ train.length }}m</span>
+            &bull;
+            <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
+            <span v-if="train.stockList.length > 1">
              &bull;
-              <span> {{ (train.mass / 1000).toFixed(1) }}t</span>
-              <span v-if="train.stockList.length > 1">
-                &bull;
-                {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
-              </span>
-            </div>
+              {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
+            </span>
          </div>
        </div>
      </div>
-    </router-link>
-  </li>
+    </div>
+  </router-link>
 </template>

 <script setup lang="ts">
@@ -41,9 +39,10 @@ defineProps({
 </script>

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

 .train-item {
+  display: block;
  background-color: #1a1a1a;
  margin-bottom: 1em;
  width: 100%;
@@ -67,7 +66,7 @@ defineProps({
  line-height: 1.5em;
 }

-@include smallScreen() {
+@include responsive.smallScreen {
  .item-wrapper {
    grid-template-columns: 1fr;
    gap: 1em 0;
@@ -1,156 +0,0 @@
-{
-   "EU07": {
-      "passenger": {
-         "650000": 125
-      },
-      "cargo": {
-         "2000000": 70
-      },
-      "none": 110
-   },
-   "4E": {
-      "passenger": {
-         "650000": 125
-      },
-      "cargo": {
-         "2000000": 70
-      },
-      "none": 110
-   },
-   "EU07E": {
-      "passenger": {
-         "650000": 125
-      },
-      "cargo": {
-         "2000000": 70
-      },
-      "none": 110
-   },
-   "EP07": {
-      "passenger": {
-         "650000": 125
-      },
-      "cargo": null,
-      "none": 110
-   },
-   "EP08": {
-      "passenger": {
-         "650000": 140
-      },
-      "cargo": null,
-      "none": 110
-   },
-   "EP09": {
-      "passenger": {
-         "650000": 160
-      },
-      "cargo": null,
-      "none": 160
-   },
-   "ET22": {
-      "passenger": {
-         "650000": 125
-      },
-      "cargo": {
-         "1200000": 100,
-         "3100000": 70
-      },
-      "none": 125
-   },
-   "201E": {
-      "passenger": {
-         "650000": 125
-      },
-      "cargo": {
-         "1200000": 100,
-         "3100000": 70
-      },
-      "none": 125
-   },
-   "ET41": {
-      "passenger": {
-         "700000": 125
-      },
-      "cargo": {
-         "4000000": 70,
-         "3500000": 80,
-         "2500000": 90,
-         "2000000": 100
-      },
-      "none": 110
-   },
-   "SM42": {
-      "passenger": {
-         "95000": 90,
-         "200000": 80,
-         "300000": 70,
-         "450000": 60,
-         "750000": 50,
-         "1130000": 40,
-         "1720000": 30,
-         "2400000": 20
-      },
-      "cargo": {
-         "95000": 90,
-         "200000": 80,
-         "300000": 70,
-         "450000": 60,
-         "750000": 50,
-         "1130000": 40,
-         "1720000": 30,
-         "2400000": 20
-      },
-      "none": 90
-   },
-   "M62": {
-      "passenger": {
-         "500000": 100,
-         "800000": 80,
-         "1200000": 60,
-         "2000000": 40,
-         "3000000": 20
-      },
-      "cargo": {
-         "500000": 100,
-         "800000": 80,
-         "1200000": 60,
-         "2000000": 40,
-         "3000000": 20
-      },
-      "none": 100
-   },
-   "ST44": {
-      "passenger": {
-         "500000": 100,
-         "800000": 80,
-         "1200000": 60,
-         "2000000": 40,
-         "3000000": 20
-      },
-      "cargo": {
-         "500000": 100,
-         "800000": 80,
-         "1200000": 60,
-         "2000000": 40,
-         "3000000": 20
-      },
-      "none": 100
-   },
-   "CTLR4C": {
-      "passenger": {
-         "500000": 100,
-         "800000": 80,
-         "1200000": 60,
-         "2000000": 40,
-         "3000000": 20
-      },
-      "cargo": {
-         "500000": 100,
-         "800000": 80,
-         "1200000": 60,
-         "2000000": 40,
-         "3000000": 20
-      },
-      "none": 100
-   }
-}
@@ -0,0 +1,158 @@
+export const speedLimits: Record<string, any> = {
+  EU07: {
+    passenger: {
+      '650000': 125
+    },
+    cargo: {
+      '2000000': 70
+    },
+    none: 110
+  },
+  '4E': {
+    passenger: {
+      '650000': 125
+    },
+    cargo: {
+      '2000000': 70
+    },
+    none: 110
+  },
+  EU07E: {
+    passenger: {
+      '650000': 125
+    },
+    cargo: {
+      '2000000': 70
+    },
+    none: 110
+  },
+  EP07: {
+    passenger: {
+      '650000': 125
+    },
+    cargo: null,
+    none: 110
+  },
+  EP08: {
+    passenger: {
+      '650000': 140
+    },
+    cargo: null,
+    none: 110
+  },
+  EP09: {
+    passenger: {
+      '650000': 160
+    },
+    cargo: null,
+    none: 160
+  },
+  ET22: {
+    passenger: {
+      '650000': 125
+    },
+    cargo: {
+      '1200000': 100,
+      '1800000': 90,
+      '2500000': 80,
+      '3100000': 70
+    },
+    none: 100
+  },
+  '201E': {
+    passenger: {
+      '650000': 125
+    },
+    cargo: {
+      '1200000': 100,
+      '3100000': 70
+    },
+    none: 125
+  },
+  ET41: {
+    passenger: {
+      '700000': 125
+    },
+    cargo: {
+      '4000000': 70,
+      '3500000': 80,
+      '2500000': 90,
+      '2000000': 100
+    },
+    none: 110
+  },
+  SM42: {
+    passenger: {
+      '95000': 90,
+      '200000': 80,
+      '300000': 70,
+      '450000': 60,
+      '750000': 50,
+      '1130000': 40,
+      '1720000': 30,
+      '2400000': 20
+    },
+    cargo: {
+      '95000': 90,
+      '200000': 80,
+      '300000': 70,
+      '450000': 60,
+      '750000': 50,
+      '1130000': 40,
+      '1720000': 30,
+      '2400000': 20
+    },
+    none: 90
+  },
+  M62: {
+    passenger: {
+      '500000': 100,
+      '800000': 80,
+      '1200000': 60,
+      '2000000': 40,
+      '3000000': 20
+    },
+    cargo: {
+      '500000': 100,
+      '800000': 80,
+      '1200000': 60,
+      '2000000': 40,
+      '3000000': 20
+    },
+    none: 100
+  },
+  ST44: {
+    passenger: {
+      '500000': 100,
+      '800000': 80,
+      '1200000': 60,
+      '2000000': 40,
+      '3000000': 20
+    },
+    cargo: {
+      '500000': 100,
+      '800000': 80,
+      '1200000': 60,
+      '2000000': 40,
+      '3000000': 20
+    },
+    none: 100
+  },
+  CTLR4C: {
+    passenger: {
+      '500000': 100,
+      '800000': 80,
+      '1200000': 60,
+      '2000000': 40,
+      '3000000': 20
+    },
+    cargo: {
+      '500000': 100,
+      '800000': 80,
+      '1200000': 60,
+      '2000000': 40,
+      '3000000': 20
+    },
+    none: 100
+  }
+};
@@ -157,9 +157,8 @@
    "sort-title": "SORT BY:",
    "filter-title": "FILTER BY:",
    "search-title": "SEARCH:",
-    "search-train-no": "Train no. / #",
-    "search-train": "Train no.",
-    "search-driver": "Driver name",
+    "search-train": "Train no. / #",
+    "search-driver": "Choose a driver...",
    "search-dispatcher": "Dispatcher name",
    "search-station": "Scenery name / #",
    "search-author": "Timetable author name",
@@ -271,7 +270,11 @@
      "minOneWayCatenary": "MIN. CATENARY SINGLE TRACK ROUTES",
      "minOneWay": "MIN. OTHER SINGLE TRACK ROUTES",
      "minTwoWayCatenary": "MIN. CATENARY DOUBLE TRACK ROUTES",
-      "minTwoWay": "MIN. OTHER 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"
    },
    "sceneries-search": "SCENERY SEARCH:",
    "sceneries-placeholder": "Enter scenery name...",
@@ -328,13 +331,19 @@
    "active-filters": "Attention! You got active filters!"
  },
  "station-stats": {
+    "title": "ONLINE SCENERIES STATS",
+    "stats-button": "STATISTICS",
    "u-factor": "U-factor",
    "u-factor-tooltip": "(?) Current server traffic factor (driver count divided by dispatcher count)",
-    "avg-timetable-count": "Average count of scenery timetables:",
+    "avg-timetable-count": "TT average:",
    "single-track-count": "Single track routes:",
    "double-track-count": "Double track routes:",
-    "cross-sceneries": "Cross-track sceneries (1-track <-> 2-track)",
-    "open-spawns": "Open spawns:"
+    "cross-sceneries": "Cross-track sceneries",
+    "open-spawns-all": "Spawns (ALL):",
+    "open-spawns-pas": "Spawns (PAS):",
+    "open-spawns-freight": "Spawns (TOW):",
+    "open-spawns-loco": "Spawns (LOK):",
+    "no-stats": "No statistics available for the current region!"
  },
  "trains": {
    "no-trains": "No trains to show here!",
@@ -390,7 +399,7 @@
  },
  "train-stats": {
    "stats-button": "STATISTICS",
-    "title": "STATISTICS ONLINE",
+    "title": "ONLINE TRAINS STATS",
    "timetable-count": "ACTIVE TIMETABLES",
    "avg-speed": "AVG SPEED",
    "avg-timetable": "AVG TIMETABLE",
@@ -507,8 +516,10 @@
    "abbrev": "Station symbol:",
    "lines-title": "Real lines",
    "project-title": "Project name",
-    "one-way-routes": "One way routes",
-    "two-way-routes": "Two way routes",
+    "additional-tools-title": "Additional tools",
+    "one-way-routes": "Signle track routes",
+    "two-way-routes": "Double track routes",
+    "no-data": "No available data about this scenery",
    "option-active-timetables": "Active timetables",
    "option-timetables-history": "Timetables history PL1",
    "option-dispatchers-history": "Dispatchers history PL1",
@@ -525,7 +536,9 @@
    "forum-topic": "Official {name} forum topic",
    "pragotron-link": "Timetable pallet board",
    "tablice-link": "Timetable summary board (by Thundo)",
-    "bottom-info": "Show full history in the Journal tab"
+    "bottom-info": "Show full history in the Journal tab",
+    "btn-show-internal-routes": "Show internal routes",
+    "btn-hide-internal-routes": "Hide internal routes"
  },
  "availability": {
    "title": "Availability",
@@ -543,12 +556,13 @@
    "terminates": "TERMINATES\nHERE",
    "from": "FROM",
    "to": "TO",
-    "desc-arriving": "The train is not here yet. It's going to come from: {prevStationName} (szlak {prevDepartureLine})",
-    "desc-online": "The train is at the station. It's going to leave to: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-stopped": "The train is at the station and is stopped. It's going to leave towards: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-next-arrival": "Leaves towards: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-departed": "The train is at the station and it's been departed. Leaves towards: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-departed-away": "The train has been departed to: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-arriving": "The train is not here yet.\nIt's going to come from: <b>{prevStationName} (route {prevDepartureLine})</b>",
+    "desc-online": "The train is at the station.\nIt's going to leave to: <b>{nextStationName} (route {nextArrivalLine})</b>",
+    "desc-stopped": "The train is at the station and is stopped.\nIt's going to leave towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
+    "desc-next-arrival": "Leaves towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
+    "desc-departed": "The train is at the station and it's been departed.\nLeaves towards: <b>{nextStationName} (route {nextArrivalLine})</b>",
+    "desc-departed-ends": "The train is at the station and it's been departed.\nLeaves towards station: <b>{nextStationName}</b>",
+    "desc-departed-away": "The train has been departed to:\n<b>{nextStationName} (route {nextArrivalLine})</b>",
    "desc-end": "The train terminates here",
    "desc-terminated": "The train has been terminated"
  },
@@ -154,9 +154,8 @@
    "sort-title": "SORTUJ WG:",
    "filter-title": "FILTRUJ WG:",
    "search-title": "SZUKAJ:",
-    "search-train-no": "Nr pociągu",
    "search-train": "Nr pociągu / #",
-    "search-driver": "Nick maszynisty",
+    "search-driver": "Wybierz maszynistę...",
    "search-dispatcher": "Nick dyżurnego",
    "search-station": "Nazwa scenerii / #",
    "search-author": "Nick autora rozkładu jazdy",
@@ -269,7 +268,11 @@
      "minOneWayCatenary": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
      "minOneWay": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
      "minTwoWayCatenary": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
-      "minTwoWay": "SZLAKI DWUTOROWE NIEZELEKTR. (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)"
    },
    "sceneries-search": "WYSZUKAJ SCENERIĘ:",
    "sceneries-placeholder": "Wpisz nazwę scenerii...",
@@ -324,13 +327,19 @@
    "active-filters": "Uwaga! Masz obecnie aktywne filtry!"
  },
  "station-stats": {
+    "title": "STATYSTYKI AKTYWNYCH SCENERII",
+    "stats-button": "STATYSTYKI",
    "u-factor": "Współczynnik Ugla",
    "u-factor-tooltip": "(?) Współczynnik ruchu na serwerze (liczba maszynistów online dzielona na liczbę dyżurnych ruchu)",
-    "avg-timetable-count": "Średnia liczba rozkładów jazdy na sceneriach:",
+    "avg-timetable-count": "Średnia RJ:",
    "single-track-count": "Szlaki jednotorowe:",
    "double-track-count": "Szlaki dwutorowe:",
-    "cross-sceneries": "Scenerie przejściowe (1-tor <-> 2-tor):",
-    "open-spawns": "Otwarte spawny:"
+    "cross-sceneries": "Scenerie przejściowe:",
+    "open-spawns-all": "Spawny (ALL):",
+    "open-spawns-pas": "Spawny (PAS):",
+    "open-spawns-freight": "Spawny (TOW):",
+    "open-spawns-loco": "Spawny (LOK):",
+    "no-stats": "Brak statystyk online dla wybranego serwera!"
  },
  "trains": {
    "no-trains": "Brak pociągów do wyświetlenia!",
@@ -377,7 +386,7 @@
  },
  "train-stats": {
    "stats-button": "STATYSTYKI",
-    "title": "STATYSTYKI ONLINE",
+    "title": "STATYSTYKI AKTYWNYCH POCIĄGÓW",
    "timetable-count": "AKTYWNE RJ",
    "avg-speed": "ŚREDNIA PRĘDKOŚĆ",
    "avg-timetable": "ŚREDNI RJ",
@@ -493,8 +502,10 @@
    "abbrev": "Skrót posterunku:",
    "lines-title": "Rzeczywiste linie",
    "project-title": "Projekt",
+    "additional-tools-title": "Dodatkowe narzędzia",
    "one-way-routes": "Szlaki jednotorowe",
    "two-way-routes": "Szlaki dwutorowe",
+    "no-data": "Brak informacji o tej scenerii",
    "option-active-timetables": "Aktywne rozkłady jazdy",
    "option-timetables-history": "Historia rozkładów PL1",
    "option-dispatchers-history": "Historia dyżurów PL1",
@@ -511,7 +522,9 @@
    "forum-topic": "Oficjalny wątek scenerii {name}",
    "pragotron-link": "Paletowa tablica informacyjna",
    "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)",
-    "bottom-info": "Pokaż pełną historię w zakładce Dziennika"
+    "bottom-info": "Pokaż pełną historię w zakładce Dziennika",
+    "btn-show-internal-routes": "Pokazuj szlaki wewnętrzne",
+    "btn-hide-internal-routes": "Ukrywaj szlaki wewnętrzne"
  },
  "availability": {
    "title": "Dostępność",
@@ -529,12 +542,13 @@
    "terminates": "KOŃCZY BIEG",
    "from": "Z",
    "to": "DO",
-    "desc-arriving": "Pociągu nie ma jeszcze na tej scenerii. Przyjedzie z: {prevStationName} (szlak {prevDepartureLine})",
-    "desc-online": "Pociąg jest na tej scenerii. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-stopped": "Pociąg jest na tej scenerii i odbywa postój. Odjedzie do: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-next-arrival": "Odjeżdża do: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-departed": "Pociąg jest na tej scenerii i został odprawiony. Odjeżdża do: {nextStationName} (szlak {nextArrivalLine})",
-    "desc-departed-away": "Pociąg został odprawiony i odjechał do: {nextStationName} (szlak {nextArrivalLine})",
+    "desc-arriving": "Pociągu nie ma jeszcze na tej scenerii.\nPrzyjedzie z: <b>{prevStationName} (szlak {prevDepartureLine})</b>",
+    "desc-online": "Pociąg jest na tej scenerii.\nOdjedzie w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
+    "desc-stopped": "Pociąg jest na tej scenerii i odbywa postój.\nOdjedzie w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
+    "desc-next-arrival": "Odjeżdża do:\n<b>{nextStationName} (szlak {nextArrivalLine})</b>",
+    "desc-departed": "Pociąg jest na tej scenerii i został odprawiony.\nOdjeżdża w kierunku: <b>{nextStationName} (szlak {nextArrivalLine})</b>",
+    "desc-departed-ends": "Pociąg jest na tej scenerii i został odprawiony.\nOdjechał w kierunku stacji: <b>{nextStationName}</b>",
+    "desc-departed-away": "Pociąg został odprawiony i odjechał do:\n<b>{nextStationName} (szlak {nextArrivalLine})</b>",
    "desc-end": "Pociąg kończy bieg",
    "desc-terminated": "Pociąg skończył bieg"
  },
@@ -59,22 +59,29 @@ export const initFilters = {
  onlineFromHours: 0,
  minLevel: 0,
  maxLevel: 20,
-  minOneWayCatenary: 0,
  minOneWay: 0,
+  minOneWayCatenary: 0,
  minTwoWayCatenary: 0,
-  minTwoWay: 0,
+  minOneWayInt: 0,
+  minOneWayCatenaryInt: 0,
+  minTwoWayCatenaryInt: 0,
+  // minTwoWay: 0,
  authors: ''
 };

-export const initSliders = [
+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: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
  { id: 'minOneWay', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minOneWayCatenary', minRange: 0, maxRange: 5, step: 1 },
  { id: 'minTwoWayCatenary', minRange: 0, maxRange: 5, step: 1 },
-  { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 }
+  { id: 'minOneWayInt', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minOneWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
+  { id: 'minTwoWayCatenaryInt', minRange: 0, maxRange: 5, step: 1 },
+  // { id: 'minTwoWay', minRange: 0, maxRange: 5, step: 1 },
+  // { id: 'minTwoWayInt', minRange: 0, maxRange: 5, step: 1 }
 ];

 export type StationFilter = keyof typeof initFilters;
@@ -109,7 +116,7 @@ export function setupFilters(currentFilters: Record<string, any>) {
  });
 }

-export function getChangedFilters(currentFilters: Record<string, any>): string[] {
+export function getChangedFilters(currentFilters: Record<string, any>): string[] {  
  return (
    Object.keys(currentFilters).filter(
      (filterKey) =>
@@ -53,8 +53,6 @@ export const useApiStore = defineStore('apiStore', {
    },

    updateTick(t: number) {
-      if (this.dataStatuses.connection == Status.Data.Offline) return;
-
      // Static data refresh
      if (t >= this.nextDataCheckTime) {
        this.fetchDonatorsData();
@@ -42,8 +42,13 @@ export const useMainStore = defineStore('mainStore', {
      checkpointsTrains.clear();
      sceneriesTrains.clear();

-      return (apiStore.activeData?.trains ?? [])
-        .filter((train) => train.timetable || train.lastSeen >= Date.now() - 60000)
+      const dateNow = new Date();
+
+      const x = (apiStore.activeData?.trains ?? [])
+        .filter(
+          (train) =>
+            train.timetable || train.lastSeen >= dateNow.getTime() - 60000 || train.online == 1
+        )
        .map((train) => {
          const stock = train.stockString.split(';');
          const locoType = stock ? stock[0] : train.stockString;
@@ -163,6 +168,8 @@ export const useMainStore = defineStore('mainStore', {

          return trainObj;
        });
+
+      return x;
    },

    // computed active sceneries
@@ -7,7 +7,8 @@ export const tooltipKeys = [
  'BaseTooltip',
  'VehiclePreviewTooltip',
  'SpawnsTooltip',
-  'UsersTooltip'
+  'UsersTooltip',
+  'HtmlTooltip'
 ] as const;

 export type TooltipType = (typeof tooltipKeys)[number];
@@ -1,5 +1,4 @@
-@import 'variables.scss';
-@import 'responsive.scss';
+@use 'responsive';

 .badge {
  font-weight: 600;
@@ -9,7 +8,7 @@

  margin: 0.25em;

-  span {
+  & > span {
    display: inline-block;
    background: #585858;
    padding: 0.2em 0.4em;
@@ -23,7 +22,7 @@

    text-align: center;

-    @include smallScreen() {
+    @include responsive.smallScreen{
      font-size: 1em;
    }
  }
@@ -131,7 +130,7 @@
  color: white;

  & > span:first-child {
-    background-color: $accentCol;
+    background-color: var(--clr-primary);
    color: black;
  }
 }
@@ -1,5 +1,4 @@
-@import './variables.scss';
-@import './responsive.scss';
+@use 'responsive';

 .card-dimmer {
  position: fixed;
@@ -46,7 +45,7 @@
  }
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .card {
    max-height: 85vh;
  }
@@ -1,6 +1,5 @@
-@import 'search_box.scss';
-@import 'responsive.scss';
-@import 'variables.scss';
+@use 'search-box';
+@use 'responsive';

 .actions-bar {
  display: flex;
@@ -51,7 +50,7 @@ h1.option-title {
 }

 .sort-option[data-selected='true'] {
-  color: $accentCol;
+  color: var(--clr-primary);
  font-weight: bold;
 }

@@ -73,15 +72,6 @@ h1.option-title {
  .search {
    margin: 0.5em auto;
  }
-
-  .search-box {
-    .search-exit {
-      position: absolute;
-      transform: translateY(-50%);
-      top: 50%;
-      right: 0;
-    }
-  }
 }

 .options_actions {
@@ -95,7 +85,7 @@ h1.option-title {
  }
 }

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

@@ -1,5 +1,4 @@
-@import 'responsive.scss';
-@import 'variables.scss';
+@use 'responsive';

 .dropdown-anim {
  &-enter-from,
@@ -29,9 +28,9 @@
  left: 0;
  top: calc(100% + 0.5em);

-  background-color: $bgCol;
+  background-color: var(--clr-bg3);
  // box-shadow: 0 5px 10px 2px #0f0f0f;
-  box-shadow: 0 0 5px 1px $accentCol;
+  box-shadow: 0 0 5px 1px var(--clr-primary);

  width: 100%;
  max-width: 550px;
@@ -40,7 +39,7 @@
  z-index: 100;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .dropdown_wrapper {
    font-size: 1.1em;
    max-width: 100%;
@@ -1,6 +1,5 @@
-@import 'fonts';
-@import 'variables';
-@import 'responsive';
+@use 'fonts';
+@use 'responsive';

 :root {
  --clr-primary: #ffc014;
@@ -8,6 +7,7 @@

  --clr-bg: #4d4d4d;
  --clr-bg2: #1b1b1b;
+  --clr-bg3: #1d1d1d;

  --clr-accent: #1085b3;
  --clr-accent2: #ff3d5d;
@@ -18,7 +18,7 @@
  --clr-pn: #ffd000;

  --clr-error: #fa3636;
-  --clr-warning: #c59429;
+  --clr-warning: #ffe15b;

  --clr-donator: #f7a4ff;

@@ -60,11 +60,21 @@ body {
  overflow-x: hidden;
  position: relative;

+  font-size: 16px;
+
+  @include responsive.smallScreen {
+    font-size: calc(0.65rem + 0.85vw);
+  }
+
+  @include responsive.screenLandscape {
+    font-size: calc(0.45rem + 0.8vw);
+  }
+
  &.no-scroll {
    overflow-y: hidden;
    padding-right: var(--no-scroll-padding);

-    @include smallScreen() {
+    @include responsive.smallScreen {
      padding: 0;
    }
  }
@@ -108,11 +118,11 @@ input {
 }

 *:focus-visible {
-  outline: 1px solid $accentCol;
+  outline: 1px solid var(--clr-primary);
 }

 .title {
-  color: $accentCol;
+  color: var(--clr-primary);
  font-weight: 600;

  padding: 0.35em 0;
@@ -130,26 +140,29 @@ a {
  color: inherit;
 }

-a:not(.a-block):not(.a-button):not(.a-row) {
-  display: inline-block;
-
-  transition: color 0.3s;
-
-  &:hover,
-  &:focus {
-    color: $accentCol;
-    border: none;
-  }
-}
-
-a.a-block {
-  display: block;
-}
-
 a.a-row {
  display: table-row;
 }

+a:focus-visible {
+  outline: 1px solid var(--clr-primary);
+}
+
+.route-link {
+  margin: 0 0.2em;
+  transition: color 100ms;
+
+  &-active,
+  &[data-active='true'] {
+    color: var(--clr-primary);
+    font-weight: bold;
+  }
+
+  &:hover {
+    color: var(--clr-primary);
+  }
+}
+
 ul {
  padding: 0;
  list-style: none;
@@ -292,7 +305,7 @@ a.a-button {
    width: 1.3em;
  }

-  @include smallScreen() {
+  @include responsive.smallScreen {
    bottom: 1em;
    right: 0;
    left: 50%;
@@ -330,7 +343,7 @@ a.a-button {
  cursor: help;
 }

-@include smallScreen {
+@include responsive.smallScreen {
  ::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
@@ -1,5 +1,5 @@
-@import 'responsive.scss';
-@import 'animations.scss';
+@use 'responsive';
+@use 'animations';

 .journal-list {
  display: flex;
@@ -12,7 +12,7 @@
 .list_wrapper {
  overflow-y: auto;
  height: calc(100vh - 12.5em);
-  min-height: 500px;
+  min-height: 650px;
  margin-top: 0.5em;
  position: relative;

@@ -68,7 +68,7 @@
  font-size: 1.2em;
 }

-@include smallScreen() {
+@include responsive.smallScreen{
  .journal_top-bar {
    justify-content: center;
    flex-wrap: wrap;
@@ -1,6 +1,5 @@
-@import 'variables.scss';
-@import 'responsive.scss';
-@import 'badge.scss';
+@use 'responsive';
+@use 'badge';

 .stats-tab {
  position: absolute;
@@ -11,7 +10,7 @@
  width: 100%;

  background-color: #1a1a1a;
-  box-shadow: 0 0 5px 1px $accentCol;
+  box-shadow: 0 0 5px 1px var(--clr-primary);

  padding: 1em;
  display: flex;
@@ -33,7 +32,7 @@ hr.section-separator {
  gap: 0.5em;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .journal-stats {
    text-align: center;
  }
@@ -1,4 +1,4 @@
-@import 'responsive.scss';
+@use 'responsive';

 .search {
  label {
@@ -11,8 +11,9 @@
    position: relative;

    display: flex;
+    align-items: center;
+    gap: 0.25em;

-    border-radius: 0.5em;
    min-width: 200px;
    margin-right: 0.25em;
  }
@@ -20,6 +21,8 @@
  &-input {
    border: none;
    background-color: #424242;
+    color: white;
+    border-radius: 0.5em;

    padding: 0.35em 0.5em;
    width: 100%;
@@ -27,6 +30,7 @@

  &-exit {
    background-color: #424242;
+    border-radius: 0.5em;

    img {
      vertical-align: middle;
@@ -39,7 +43,7 @@
    max-width: 300px;
  }

-  @include smallScreen {
+  @include responsive.smallScreen {
    &-box,
    &-button {
      margin: 0.5em 0 0 0;
@@ -50,3 +54,15 @@
    }
  }
 }
+
+.search-box > i {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  padding-right: 0.5em;
+}
+
+select.search-input {
+
+}
@@ -1,11 +0,0 @@
-$primaryCol: #2c2c2c;
-$secondaryCol: #01e733;
-
-$bgCol: #1d1d1d;
-$bgLigtherCol: #5b5b5b;
-
-$errorCol: #ff1919;
-$warningCol: #ffe15b;
-
-$accentCol: #ffc014;
-$accent2Col: #ff3d5d;
@@ -147,7 +147,8 @@ function copyStockToClipboard() {
 </script>

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

 $viewBgCol: #1a1a1a;

@@ -176,7 +177,7 @@ $viewBgCol: #1a1a1a;
  border-radius: 0.5em 0.5em 0 0;

  &:hover {
-    background-color: lighten($viewBgCol, 10);
+    background-color: color.adjust($viewBgCol, $lightness: 10%);
  }
 }

@@ -209,7 +210,7 @@ $viewBgCol: #1a1a1a;
  gap: 0.5em;
 }

-@include smallScreen {
+@include responsive.smallScreen{
  span.hidable {
    display: none;
  }
@@ -332,5 +332,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
+@use '../styles/journal-section';
 </style>
@@ -482,5 +482,5 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../styles/JournalSection.scss';
+@use '../styles/journal-section';
 </style>
@@ -13,7 +13,7 @@
          :station="stationInfo"
          :onlineScenery="onlineSceneryInfo"
        />
-        
+
        <SceneryInfo :station="stationInfo" :onlineScenery="onlineSceneryInfo" />
      </div>

@@ -173,8 +173,7 @@ export default defineComponent({
 </script>

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

 button.back-btn {
  img {
@@ -193,7 +192,7 @@ button.back-btn {
    text-align: center;
    padding: 2em 1em;

-    color: $warningCol;
+    color: var(--clr-warning);

    display: inline-block;

@@ -275,7 +274,7 @@ button.back-btn {
  .checkpoint_item {
    &.current {
      font-weight: bold;
-      color: $accentCol;
+      color: var(--clr-primary);
    }

    &:not(:last-child)::after {
@@ -286,7 +285,7 @@ button.back-btn {
  }
 }

-@include midScreen {
+@include responsive.midScreen {
  .scenery-wrapper {
    grid-template-columns: 1fr;
    gap: 0;
@@ -304,7 +303,7 @@ button.back-btn {
  }
 }

-@include smallScreen {
+@include responsive.smallScreen{
  .scenery-left {
    max-height: 100vh;
  }
@@ -4,7 +4,7 @@
      <div class="stations-options">
        <StationFilterCard
          :showCard="filterCardOpen"
-          :exit="(filterCardOpen = false)"
+          :exit="filterCardOpen = false"
          ref="filterCardRef"
        />

@@ -78,8 +78,7 @@ export default defineComponent({
 </script>

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

 .stations-view {
  position: relative;
@@ -107,15 +106,13 @@ export default defineComponent({
 button.btn-donation {
  margin-left: auto;

-  $btnColor: #254069;
-
-  background-color: $btnColor;
+  background-color: #254069;

  &:hover {
-    background-color: lighten($btnColor, 5%);
+    background-color: #2e4f81;
  }

-  @include smallScreen {
+  @include responsive.smallScreen {
    span {
      display: none;
    }
@@ -114,7 +114,7 @@ export default defineComponent({
 </script>

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

 .trains-view {
  position: relative;
@@ -134,7 +134,7 @@ export default defineComponent({
  margin-bottom: 0.5em;
 }

-@include smallScreen {
+@include responsive.smallScreen {
  .trains_topbar {
    justify-content: space-between;
  }
@@ -1,17 +1,22 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { VitePWA } from 'vite-plugin-pwa';
+import path from 'path';

 export default defineConfig({
-  server: {
-    port: 5001,
-    open: true
-  },
-  preview: {
-    port: 4001,
-    open: true
-  },
+  server: { port: 5123, open: true },
+  preview: { port: 4001, open: true },
  publicDir: 'public',
+  css: {
+    preprocessorOptions: {
+      scss: { additionalData: `@use '@/styles/global';`, silenceDeprecations: ['legacy-js-api'] }
+    }
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src')
+    }
+  },
  plugins: [
    vue(),
    VitePWA({
@@ -26,20 +31,15 @@ export default defineConfig({
          {
            urlPattern:
              /^https:\/\/stacjownik.spythere.eu\/api\/(getVehicles|getDonators|getSceneries)/i,
-            handler: 'StaleWhileRevalidate',
+            handler: 'NetworkFirst',
            options: {
              cacheName: 'stacjownik-api-cache',
-              cacheableResponse: {
-                statuses: [0, 200]
-              }
+              cacheableResponse: { statuses: [0, 200] }
            }
-          },
+          }
        ]
      },
-      devOptions: {
-        enabled: true,
-        suppressWarnings: true
-      }
+      devOptions: { enabled: true, suppressWarnings: true }
    })
  ],
  build: {
Author	SHA1	Message	Date
Spythere	16b3bb3683	Merge pull request #126 from Spythere/development v1.29.2	2025-04-15 01:15:42 +02:00
Spythere	93e242c0f5	chore: additional styles	2025-04-15 01:10:31 +02:00
Spythere	861206a5ab	chore: updated look of station stats; minor layout improvements	2025-04-14 21:37:59 +02:00
Spythere	a47399fe1b	chore: added driver stats percentage	2025-04-14 21:02:46 +02:00
Spythere	8e196c8279	chore: switched drivers filter from text to select input (TrainsView); updated inputs clear buttons	2025-04-14 19:24:28 +02:00
Spythere	be55bac9fe	chore: updated networking settings	2025-04-14 19:24:24 +02:00
Spythere	c5e53057eb	hotfix: post-upgrade adjustments	2025-03-29 16:08:34 +01:00
Spythere	4ba5d544af	bump: v1.29.2	2025-03-26 18:04:19 +01:00
Spythere	22b6177560	restruct: updated sass version and rules	2025-03-26 18:04:00 +01:00
Spythere	9b6c6ee756	Merge pull request #125 from Spythere/development v1.29.1	2025-03-24 14:58:12 +01:00
Spythere	829059d35b	chore: added saving the routes visibility state in localStorage	2025-03-23 16:27:56 +01:00
Spythere	b56e114ef9	restruct: scenery info components	2025-03-23 16:20:38 +01:00
Spythere	71b4cc3bdb	fix: sticky table header bug	2025-03-22 16:10:37 +01:00
Spythere	8cc773ffb5	fix: filter card responsiveness	2025-03-22 16:08:35 +01:00
Spythere	427b4c03e4	chore: added hiding & showing internal routes in scenery view	2025-03-22 15:57:48 +01:00
Spythere	46dc43d652	bump: v1.29.1	2025-03-17 14:15:09 +01:00
Spythere	6435d12090	fix: resetting slider filters values	2025-03-17 14:14:13 +01:00
Spythere	e41b8cfa98	chore: added internal station routes filters	2025-03-17 14:04:43 +01:00
Spythere	bc81bb2a38	Merge pull request #124 from Spythere/development v1.29.0 hotfixes	2025-02-13 18:39:53 +01:00
Spythere	e6c064d15d	fix: reworked train stop statuses descriptions and their tooltip styles	2025-02-13 18:38:32 +01:00
Spythere	4d1df5165c	hotfix: proper schedule line tracks changing	2025-02-13 17:55:19 +01:00
Spythere	43ac2be3e7	Merge pull request #123 from Spythere/development Development	2025-02-05 14:32:24 +01:00
Spythere	75c4e56183	fix: badge layout	2025-02-05 14:31:06 +01:00
Spythere	931f6b9fbd	fix: train speed limits	2025-02-05 14:29:18 +01:00
Spythere	21fa1f8699	Merge pull request #122 from Spythere/development hotfix: donation card actions layout	2025-02-04 23:34:13 +01:00
Spythere	877ef50a97	hotfix: donation card actions layout	2025-02-04 23:33:27 +01:00
Spythere	933be53630	Merge pull request #121 from Spythere/development hotfix: lastSeen data filtering synchronization	2025-02-04 22:59:09 +01:00
Spythere	eef4103960	hotfix: lastSeen data filtering synchronization	2025-02-04 22:57:27 +01:00