Merge pull request #64 from Spythere/development

Stock generator list update
chore(generator): updated generator list with 411V wagons
2026-05-03 11:45:34 +00:00 · 2026-05-03 13:45:05 +02:00 · 2026-05-03 13:43:03 +02:00 · 2026-04-19 01:37:16 +02:00 · 2026-04-19 01:32:09 +02:00 · 2026-04-19 01:26:20 +02:00
63 changed files with 2767 additions and 9854 deletions
@@ -0,0 +1,23 @@
+name: Build & Deploy to VPS
+
+on:
+  push:
+    branches:
+      - main
+
+env:
+  PROJECT_NAME: pojazdownik-td2
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:    
+      - uses: actions/checkout@v3
+      - name: Build the app
+        run: yarn && yarn build
+      - name: Setup SSH key for connection with the server
+        run: |
+            mkdir -p ~/.ssh
+            echo "${{ secrets.VPS_SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa && chmod 600 ~/.ssh/id_rsa
+      - name: Send new files
+        run: rsync -avP -e "ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa -p 2022" ./dist/ ${{ secrets.VPS_USER }}@${{ secrets.VPS_HOST }}:/var/www/$PROJECT_NAME --delete
@@ -5,13 +5,13 @@ name: Deploy to Firebase Hosting on merge
 'on':
  push:
    branches:
-      - main
+      - main-old
 jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
-      - run: npm ci && npm run build
+      - run: yarn && yarn build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
@@ -9,7 +9,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
-      - run: npm ci && npm run build
+      - run: yarn && yarn build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
@@ -24,8 +24,8 @@ pnpm-debug.log*
 *.sw?
 node_modules

+# Lock files
+*.lock
+
 # Dev files
 stockInfoDev.json
-
-# Lock files
-yarn.lock
@@ -2,5 +2,5 @@
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
-  "printWidth": 100
+  "printWidth": 150
 }
@@ -1,27 +1,56 @@
 <!doctype html>
 <html>
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

-    <title>Pojazdownik</title>
-    <meta name="description" content="Edytor pociągów online do symulatora Train Driver 2" />
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />

-    <link rel="icon" href="/favicon.ico" sizes="any" />
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-    <link rel="manifest" href="/site.webmanifest" />
+  <title>Pojazdownik</title>
+  <meta name="description" content="Edytor składów online dla symulatora Train Driver 2" />
+
+  <link rel="icon" href="/favicon.ico" sizes="any" />
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+  <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+  <link rel="manifest" href="/site.webmanifest" />
+
+  <meta name="msapplication-TileColor" content="#da532c" />
+  <meta name="theme-color" content="#111" />
+
+  <!-- Static OpenGraph meta -->
+  <meta name="description" content="Edytor składów online dla symulatora Train Driver 2" />
+  <meta property="og:url" content="https://pojazdownik-td2.web.app/" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Pojazdownik" />
+  <meta property="og:description" content="Edytor składów online dla symulatora Train Driver 2" />
+  <meta property="og:image"
+    content="https://raw.githubusercontent.com/Spythere/api/refs/heads/main/thumbnails/pojazdownik-banner.png" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta property="og:site_name" content="Pojazdownik" />
+
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Pojazdownik" />
+  <meta name="twitter:description" content="Edytor składów online dla symulatora Train Driver 2" />
+  <meta name="twitter:image"
+    content="https://raw.githubusercontent.com/Spythere/api/refs/heads/main/thumbnails/pojazdownik-banner.png" />
+
+  <!-- Preload -->
+  <link rel="preload" href="/fonts/Lato-Bold.woff2" as="font" type="font/woff2" crossorigin />
+  <link rel="preload" href="/fonts/Lato-Regular.woff2" as="font" type="font/woff2" crossorigin />
+
+  <link rel="preload" as="image" href="/logo-pl.svg" />
+  <link rel="preload" as="image" href="/logo-en.svg" />
+</head>
+
+<body>
+  <noscript>
+    <strong> We're sorry but Pojazdownik doesn't work properly without JavaScript enabled. Please enable it to continue.
+    </strong>
+  </noscript>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>

-    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#111" />
-  </head>
-  <body>
-    <noscript>
-      <strong> We're sorry but Pojazdownik doesn't work properly without JavaScript enabled. Please enable it to continue. </strong>
-    </noscript>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
 </html>
@@ -1,6 +1,6 @@
 {
  "name": "pojazdownik",
-  "version": "1.8.9",
+  "version": "1.10.0",
  "private": true,
  "type": "module",
  "scripts": {
@@ -12,25 +12,27 @@
    "format": "prettier --write src/"
  },
  "dependencies": {
-    "axios": "^1.4.0",
-    "pinia": "^2.0.17",
+    "lucide-vue-next": "^0.576.0",
+    "pinia": "^3.0.3",
    "prettier": "^3.0.3",
    "vue": "^3.2.37",
-    "vue-i18n": "9.11.0"
+    "vue-i18n": "11.2.8",
+    "vue-router": "5.0.3"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
-    "@vite-pwa/assets-generator": "^0.2.3",
-    "@vitejs/plugin-vue": "^5.0.3",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "@types/node": "^25.3.3",
+    "@vite-pwa/assets-generator": "^1.0.2",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/tsconfig": "^0.9.0",
+    "eslint": "^10.0.2",
+    "eslint-plugin-vue": "^10.5.1",
    "sass": "^1.59.3",
    "typescript": "^5.0.2",
-    "vite": "^5.0.12",
-    "vite-plugin-pwa": "^0.17.5",
-    "vue-tsc": "^1.2.0"
+    "vite": "^7.1.12",
+    "vite-plugin-pwa": "^1.1.0",
+    "vue-tsc": "^3.1.3"
  }
 }
@@ -1,48 +1,86 @@
 <template>
  <AppModals />
  <ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
-  <AppContainerView />
+
+  <transition name="slide-bottom-anim">
+    <MigrationInfo v-if="store.isMigrationInfoOpen" />
+  </transition>
+
+  <router-view></router-view>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import { useStore } from './store';
 import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
-import AppContainerView from './views/AppContainerView.vue';
 import AppModals from './components/app/AppModals.vue';
+import { computed, onMounted, watchEffect } from 'vue';
+import { registerSW } from 'virtual:pwa-register';
+import MigrationInfo from './components/app/MigrationInfo.vue';

-export default defineComponent({
-  components: { ImageFullscreenPreview, AppContainerView, AppModals },
-  data() {
-    return {
-      store: useStore(),
-    };
-  },
+const store = useStore();

-  async created() {
-    this.store.handleRouting();
-    this.store.setupAPIData();
-  },
+registerSW({
+  immediate: true,
 });
+
+onMounted(() => {
+  loadStockDataFromStorage();
+  handleMigrationInfo();
+  store.setupAPIData();
+});
+
+const currentStockString = computed(() => store.stockString);
+
+watchEffect(() => {
+  if (currentStockString.value != store.chosenStorageStockString) {
+    store.chosenStorageStockName = '';
+  }
+});
+
+function handleMigrationInfo() {
+  // Show only on old domain
+  if (location.hostname !== 'pojazdownik-td2.web.app') return;
+
+  const showInfo = localStorage.getItem('showMigrationInfo');
+
+  // Do not show if already acknowledged
+  if (showInfo === 'false') return;
+
+  setTimeout(() => {
+    store.isMigrationInfoOpen = true;
+  }, 2000);
+}
+
+function loadStockDataFromStorage() {
+  const savedData = localStorage.getItem('savedStockData');
+
+  if (!savedData) {
+    localStorage.setItem('savedStockData', JSON.stringify({}));
+    return;
+  }
+
+  try {
+    store.storageStockData = JSON.parse(savedData);
+  } catch (error) {
+    console.error('Wystąpił błąd podczas przetwarzania danych o składach z localStorage!', error);
+  }
+}
 </script>

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

 /* APP */
 #app {
  margin: 0 auto;

-  color: $textColor;
+  color: var(--textColor);
  font-size: 1em;
  padding: 0;

-  @media screen and (max-width: $breakpointMd) {
+  @include responsive.midScreen {
    font-size: calc(0.7rem + 0.75vw);
  }
-
-  @media screen and (orientation: landscape) and (max-width: $breakpointMd) {
-    font-size: calc(0.75rem + 0.4vw);
-  }
 }
 </style>
@@ -6,19 +6,9 @@
  </div>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import { useStore } from '../../store';
 import RealStockCard from '../cards/RealStockCard.vue';

-export default defineComponent({
-  components: { RealStockCard },
-  data() {
-    return {
-      store: useStore(),
-    };
-  },
-});
+const store = useStore();
 </script>
-
-<style scoped></style>
@@ -1,21 +1,20 @@
 <template>
  <footer>
-    <i18n-t keypath="footer.disclaimer" tag="div" class="text--grayed">
-      <template #tos>
-        <a style="color: #ccc" :href="$t('footer.tos-href')" target="_blank">
-          {{ $t('footer.tos') }}
-        </a>
-      </template>
-    </i18n-t>
-
-    <div class="text--grayed" v-if="store.vehiclesData">
-      {{ $t('footer.version-check', { version: store.compatibleSimulatorVersion }) }}
-    </div>
-
    <div>
      &copy;
      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
+      {{ new Date().getUTCFullYear() }} |
+      <a class="release-link" :href="githubReleaseHref" target="_blank">v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}</a>
+    </div>
+
+    <div class="text--grayed" v-if="store.vehiclesData">
+      {{
+        $t('footer.vehicles-count', {
+          all: vehiclesCounters.all,
+          units: vehiclesCounters.units,
+          cars: vehiclesCounters.cars,
+        })
+      }}
    </div>
  </footer>
 </template>
@@ -28,17 +27,50 @@ import { useStore } from '../../store';
 export default defineComponent({
  data() {
    return {
-      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
+      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app' || location.hostname == 'pojazdownik-td2.spythere.eu',
      VERSION: packageInfo.version,
      store: useStore(),
    };
  },
+
+  computed: {
+    githubReleaseHref() {
+      return `https://github.com/Spythere/pojazdownik/releases/tag/${this.VERSION}`;
+    },
+
+    vehiclesCounters() {
+      let counters = {
+        all: 0,
+        cars: 0,
+        units: 0,
+      };
+
+      if (!this.store.vehiclesData) return counters;
+
+      this.store.vehiclesData?.forEach((v) => {
+        counters.all += 1;
+
+        if (v.group.locoProps !== null) counters.units += 1;
+        else counters.cars += 1;
+      });
+
+      return counters;
+    },
+  },
 });
 </script>

 <style lang="scss" scoped>
 footer {
  text-align: center;
-  padding: 1em 1em 0 1em;
+  padding: 0 0.5em 0.5em 0.5em;
+}
+
+.release-link {
+  color: var(--accentColor);
+
+  &:hover {
+    color: white;
+  }
 }
 </style>
@@ -3,7 +3,7 @@
    <LogoSection />
    <InputsSection />
    <TrainImageSection />
-    <StockSection />
+    <TabsSection />
  </main>
 </template>

@@ -12,39 +12,37 @@ import { defineComponent } from 'vue';
 import LogoSection from '../sections/LogoSection.vue';
 import InputsSection from '../sections/InputsSection.vue';
 import TrainImageSection from '../sections/TrainImageSection.vue';
-import StockSection from '../sections/StockSection.vue';
+import TabsSection from '../sections/TabsSection.vue';

 export default defineComponent({
-  components: { LogoSection, InputsSection, TrainImageSection, StockSection },
+  components: { LogoSection, InputsSection, TrainImageSection, TabsSection },
 });
 </script>

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

 main {
  display: grid;
  gap: 1em;

-  width: 100%;
-  max-width: 1350px;
+  width: 100vw;
+  max-width: 1600px;

-  grid-template-columns: 1fr 2fr;
-  grid-template-rows: auto 360px minmax(300px, 1fr);
+  grid-template-columns: minmax(380px, 1fr) 3fr;
+  grid-template-rows: auto 350px minmax(300px, 1fr);

-  background-color: darken($color: $bgColor, $amount: 5);
  border-radius: 1em;
-
-  min-height: 950px;
-
+  overflow: hidden;
  padding: 1em;
 }

-@media screen and (max-width: $breakpointMd) {
+@include responsive.midScreen {
  main {
    display: flex;
    flex-direction: column;
    gap: 1em;
+    height: auto;
  }
 }
 </style>
@@ -0,0 +1,59 @@
+<template>
+  <div class="migrate-info">
+    <div class="info-content">
+      <i18n-t keypath="migrate-info.line-1" for="migrate-info" tag="div">
+        <a href="https://pojazdownik-td2.spythere.eu/" target="_blank">{{ t('migrate-info.link') }}</a>
+      </i18n-t>
+      <button class="btn accept-btn" @click="onAcceptButtonClick">{{ t('migrate-info.accept-btn') }}</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useStore } from '../../store';
+
+const store = useStore();
+const { t } = useI18n();
+
+function onAcceptButtonClick() {
+  store.isMigrationInfoOpen = false;
+  localStorage.setItem('showMigrationInfo', 'false');
+}
+</script>
+
+<style lang="scss" scoped>
+.migrate-info {
+  position: fixed;
+  z-index: 100;
+  bottom: 0;
+  left: 0;
+
+  padding: 0.25em;
+  text-align: center;
+
+  width: 100%;
+  background-color: var(--accentColor);
+  color: black;
+  font-weight: bold;
+
+  font-size: 1.1em;
+}
+
+.info-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+a {
+  color: black;
+  text-decoration: underline;
+
+  &:hover {
+    color: black;
+  }
+}
+</style>
@@ -76,7 +76,7 @@
              <div class="thumbnail-container">
                <div>{{ stockType }}</div>
                <img
-                  :src="`https://static.spythere.eu/thumbnails/${stockType}.png`"
+                  :src="`https://stacjownik.spythere.eu/static/thumbnails/${stockType}.png`"
                  :title="stockType"
                  style="opacity: 0"
                  @error="(e) => onStockItemError(e, stockType)"
@@ -100,7 +100,7 @@ import { useStore } from '../../store';
 import imageMixin from '../../mixins/imageMixin';
 import stockMixin from '../../mixins/stockMixin';

-import { IRealComposition, VehicleGroupType } from '../../types';
+import { IRealComposition, VehicleGroupType } from '../../types/common.types';

 function getVehicleType(stockType: string): VehicleGroupType {
  if (/^E/.test(stockType)) return 'loco-electric';
@@ -220,7 +220,7 @@ export default defineComponent({
 </script>

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

 .action-exit {
  display: flex;
@@ -249,7 +249,7 @@ export default defineComponent({

  z-index: 100;

-  @media screen and (max-width: $breakpointSm) {
+  @include responsive.smallScreen {
    height: 80vh;
  }
 }
@@ -281,7 +281,7 @@ export default defineComponent({
    width: 35%;
  }

-  @media screen and (max-width: $breakpointSm) {
+  @include responsive.smallScreen {
    flex-wrap: wrap;

    input {
@@ -309,7 +309,7 @@ ul {
    padding: 0.1em;

    &[data-last-selected='true'] .stock-title {
-      border: 1px solid $accentColor;
+      border: 1px solid var(--accentColor);
    }

    .stock-title {
@@ -325,7 +325,7 @@ ul {
      background: #222;
    }

-    @media screen and (max-width: $breakpointSm) {
+    @include responsive.smallScreen {
      grid-template-columns: 1fr;
      // grid-template-rows: 1fr 1fr;
    }
@@ -1,9 +1,9 @@
 <template>
  <section class="inputs-section">
    <div class="input_container">
-      <h2 class="input_header">{{ $t('inputs.title') }}</h2>
-
      <div class="input_list type">
+        <label for="cargo-select">{{ $t('inputs.vehicles-title') }}</label>
+
        <div class="vehicle-types locos">
          <button
            v-for="locoType in locomotiveTypeList"
@@ -35,6 +35,8 @@
      </div>

      <div class="input_list type">
+        <label for="cargo-select">{{ $t('inputs.carwagons-title') }}</label>
+
        <div class="vehicle-types carwagons">
          <button
            v-for="carType in carTypeList"
@@ -126,7 +128,7 @@ import imageMixin from '../../mixins/imageMixin';
 import { useStore } from '../../store';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
 import stockMixin from '../../mixins/stockMixin';
-import { LocoGroupType, WagonGroupType } from '../../types';
+import { LocoGroupType, WagonGroupType } from '../../types/common.types';

 export default defineComponent({
  mixins: [imageMixin, stockPreviewMixin, stockMixin],
@@ -134,33 +136,15 @@ export default defineComponent({
  data: () => ({
    store: useStore(),
    locomotiveTypeList: [
-      {
-        id: 'loco-electric',
-        desc: 'ELEKTRYCZNE',
-      },
-      {
-        id: 'loco-diesel',
-        desc: 'SPALINOWE',
-      },
-      {
-        id: 'unit-electric',
-        desc: 'ELEKTR. ZESPOŁY TRAKCYJNE',
-      },
-      {
-        id: 'unit-diesel',
-        desc: 'SPAL. ZESPOŁY TRAKCYJNE',
-      },
+      { id: 'loco-electric', desc: 'ELEKTRYCZNE' },
+      { id: 'loco-diesel', desc: 'SPALINOWE' },
+      { id: 'unit-electric', desc: 'ELEKTR. ZESPOŁY TRAKCYJNE' },
+      { id: 'unit-diesel', desc: 'SPAL. ZESPOŁY TRAKCYJNE' },
    ] as { id: LocoGroupType; desc: string }[],

    carTypeList: [
-      {
-        id: 'wagon-passenger',
-        desc: 'PASAŻERSKIE',
-      },
-      {
-        id: 'wagon-freight',
-        desc: 'TOWAROWE',
-      },
+      { id: 'wagon-passenger', desc: 'PASAŻERSKIE' },
+      { id: 'wagon-freight', desc: 'TOWAROWE' },
    ] as { id: WagonGroupType; desc: string }[],
  }),

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

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

 .inputs-section {
  display: flex;
@@ -255,16 +239,12 @@ export default defineComponent({
  max-width: 380px;
 }

-.input_header {
-  margin-bottom: 1em;
-}
-
 button.btn--choice {
  font-size: 0.9em;
  padding: 0.3em 0.6em;

  &[data-selected='true'] {
-    background-color: $accentColor;
+    background-color: var(--accentColor);
    color: black;
  }

@@ -282,12 +262,12 @@ button.btn--choice {
    display: block;

    font-weight: bold;
-    color: $accentColor;
+    color: var(--accentColor);
    margin-bottom: 0.3em;
  }

  select:focus {
-    border-color: $accentColor;
+    border-color: var(--accentColor);
  }
 }

@@ -306,9 +286,13 @@ button.btn--choice {
  gap: 0.25em;

  margin-bottom: 0.5em;
+
+  button {
+    width: 100%;
+  }
 }

-@media screen and (max-width: $breakpointMd) {
+@include responsive.midScreen {
  .inputs-section {
    justify-content: center;
    text-align: center;
@@ -21,14 +21,8 @@ export default {
  data() {
    return {
      localeActions: [
-        {
-          name: 'POLSKI',
-          locale: 'pl',
-        },
-        {
-          name: 'ENGLISH',
-          locale: 'en',
-        },
+        { name: 'POLSKI', locale: 'pl' },
+        { name: 'ENGLISH', locale: 'en' },
      ],
    };
  },
@@ -46,8 +40,6 @@ export default {
 </script>

 <style lang="scss" scoped>
-@import '../../styles/global.scss';
-
 .logo-section {
  grid-row: 1;
  grid-column: 1;
@@ -66,7 +58,7 @@ export default {

  button[data-selected='true'] {
    font-weight: bold;
-    color: $accentColor;
+    color: var(--accentColor);
    text-decoration: underline;
  }
 }
@@ -1,143 +0,0 @@
-<template>
-  <section class="stock-section">
-    <div class="section_modes">
-      <button
-        v-for="(id, i) in sectionModes"
-        :key="id"
-        class="btn"
-        ref="sectionButtonRefs"
-        @click="chooseSection(id)"
-        :data-selected="store.stockSectionMode == id"
-      >
-        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${id}`) }}
-        <span v-if="id == 'stock-list'">({{ store.stockList.length }})</span>
-      </button>
-    </div>
-
-    <transition name="tab-change" mode="out-in">
-      <keep-alive>
-        <component :is="chosenSectionComponent"></component>
-      </keep-alive>
-    </transition>
-  </section>
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
-import { useStore } from '../../store';
-import StockListTab from '../tabs/StockListTab.vue';
-import StockGeneratorTab from '../tabs/StockGeneratorTab.vue';
-import NumberGeneratorTab from '../tabs/NumberGeneratorTab.vue';
-import WikiListTab from '../tabs/WikiListTab.vue';
-
-const sectionButtonRefs = ref([]);
-
-const store = useStore();
-type SectionMode = typeof store.stockSectionMode;
-
-const sectionModes: SectionMode[] = [
-  'stock-list',
-  'wiki-list',
-  'number-generator',
-  'stock-generator',
-];
-
-onMounted(() => {
-  window.addEventListener('keydown', (e) => {
-    if (e.target instanceof HTMLInputElement) return;
-
-    if (/^[1234]$/.test(e.key)) {
-      const keyNum = Number(e.key);
-
-      store.stockSectionMode = sectionModes[keyNum - 1];
-      (sectionButtonRefs.value[keyNum - 1] as HTMLButtonElement)?.focus();
-    }
-  });
-});
-
-const chosenSectionComponent = computed(() => {
-  switch (store.stockSectionMode) {
-    case 'stock-list':
-      return StockListTab;
-
-    case 'wiki-list':
-      return WikiListTab;
-
-    case 'stock-generator':
-      return StockGeneratorTab;
-
-    case 'number-generator':
-      return NumberGeneratorTab;
-
-    default:
-      return StockListTab;
-  }
-});
-
-function chooseSection(sectionId: SectionMode) {
-  store.stockSectionMode = sectionId;
-}
-</script>
-
-<style lang="scss">
-@import '../../styles/global.scss';
-
-// Tab change animation
-.tab-change {
-  &-enter-from,
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-enter-active,
-  &-leave-active {
-    transition: all 100ms ease-in-out;
-  }
-}
-
-// Section styles
-.stock-section {
-  grid-row: 1 / 4;
-  grid-column: 2;
-
-  overflow: hidden;
-  padding: 1px;
-}
-
-.section_modes {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-
-  gap: 0.5em;
-
-  margin-bottom: 1em;
-
-  button {
-    position: relative;
-    border-radius: 0.5em 0.5em 0 0;
-
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-
-      content: '';
-      width: 0;
-      height: 2px;
-      transition: all 100ms;
-      background-color: $accentColor;
-    }
-
-    &[data-selected='true']::after {
-      width: 100%;
-    }
-  }
-}
-
-@media screen and (max-width: 650px) {
-  .section_modes {
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  }
-}
-</style>
@@ -0,0 +1,123 @@
+<template>
+  <section class="tabs-section">
+    <div class="tabs-modes">
+      <router-link v-for="(route, i) in routes" :key="route.name" class="link-btn" :to="route.href" :style="{ 'grid-area': route.name }">
+        <span class="text--accent">{{ i + 1 }}.</span> {{ $t(`topbar.${route.name}`) }}
+        <span class="text--grayed" v-if="route.name == 'stock'">({{ store.stockList.length }})</span>
+      </router-link>
+    </div>
+
+    <transition name="tab-change" mode="out-in">
+      <keep-alive>
+        <component :is="route.meta.viewMode"></component>
+      </keep-alive>
+    </transition>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { useStore } from '../../store';
+import { useRoute, useRouter } from 'vue-router';
+
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+
+const routes = [
+  {
+    name: 'stock',
+    href: '/',
+  },
+  {
+    name: 'wiki',
+    href: '/wiki',
+  },
+  {
+    name: 'storage',
+    href: '/storage',
+  },
+  {
+    name: 'numgen',
+    href: '/numgen',
+  },
+  {
+    name: 'stockgen',
+    href: '/stockgen',
+  },
+];
+
+onMounted(() => {
+  window.addEventListener('keydown', (e) => {
+    if (e.target instanceof HTMLInputElement) return;
+
+    if (/^[12345]$/.test(e.key)) {
+      const keyNum = Number(e.key);
+
+      router.push(routes[keyNum - 1].href);
+    }
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/responsive';
+
+// Tab change animation
+.tab-change {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 100ms ease-in-out;
+  }
+}
+
+// Section styles
+.tabs-section {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 1em;
+
+  grid-row: 1 / 4;
+  grid-column: 2;
+
+  overflow: hidden;
+  padding: 1px;
+}
+
+.tabs-modes {
+  display: grid;
+  gap: 0.5em;
+  grid-template-areas: 'stock wiki storage numgen stockgen';
+
+  padding: 1px;
+}
+
+@media only screen and (max-width: 1200px) {
+  .tabs-modes {
+    grid-template-areas:
+      'stock stock wiki wiki storage storage'
+      'numgen numgen numgen stockgen stockgen stockgen';
+  }
+}
+
+@include responsive.smallScreen {
+  .tabs-modes {
+    grid-template-areas:
+      'stock wiki'
+      'storage storage'
+      'numgen stockgen';
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@include responsive.midScreen {
+  .tabs-section {
+    min-height: 100vh;
+  }
+}
+</style>
@@ -4,11 +4,8 @@
      <div class="image-wrapper">
        <img
          :src="getThumbnailURL(store.chosenVehicle.type, 'small')"
-          :data-preview-active="store.chosenVehicle !== null"
-          :data-sponsor-only="
-            store.chosenVehicle.sponsorOnlyTimestamp &&
-            store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
-          "
+          :data-preview-available="isDataPreviewAvailable"
+          :data-sponsor-only="store.chosenVehicle.sponsorOnlyTimestamp && store.chosenVehicle.sponsorOnlyTimestamp > Date.now()"
          :data-team-only="store.chosenVehicle.teamOnly"
          @click="onImageClick"
          @keydown.enter="onImageClick"
@@ -21,23 +18,15 @@
      <div class="image-info">
        <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
        <b style="color: #ccc">
-          {{
-            $t(
-              `preview.${isTractionUnit(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`
-            )
-          }}
+          {{ $t(`preview.${isTractionUnit(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}`) }}
        </b>

        <div style="color: #ccc">
          <div>
-            {{ store.chosenVehicle.length }}m |
-            {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t |
-            {{ store.chosenVehicle.maxSpeed }} km/h
+            {{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t | {{ store.chosenVehicle.maxSpeed }} km/h
          </div>

-          <div v-if="isTractionUnit(store.chosenVehicle)">
-            {{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
-          </div>
+          <div v-if="isTractionUnit(store.chosenVehicle)">{{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}</div>

          <div v-else>
            {{
@@ -47,18 +36,10 @@
            }}
          </div>

-          <b
-            v-if="
-              store.chosenVehicle.sponsorOnlyTimestamp &&
-              store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
-            "
-            class="sponsor-only"
-          >
+          <b v-if="store.chosenVehicle.sponsorOnlyTimestamp && store.chosenVehicle.sponsorOnlyTimestamp > Date.now()" class="sponsor-only">
            {{
              $t('preview.sponsor-only', [
-                new Date(store.chosenVehicle.sponsorOnlyTimestamp).toLocaleDateString(
-                  $i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'
-                ),
+                new Date(store.chosenVehicle.sponsorOnlyTimestamp).toLocaleDateString($i18n.locale == 'pl' ? 'pl-PL' : 'en-GB'),
              ])
            }}
          </b>
@@ -111,37 +92,48 @@ export default defineComponent({
    };
  },

+  computed: {
+    isDataPreviewAvailable() {
+      return this.imageStatus == 'loaded' && this.store.chosenVehicle != null;
+    },
+  },
+
  methods: {
    isTractionUnit,

    onImageError(e: Event) {
      const el = e.target as HTMLImageElement;
-      if (el.src == '/images/placeholder.jpg') return;
+      if (el.src == '/images/no-vehicle-image.png') return;

-      el.src = '/images/placeholder.jpg';
+      el.src = '/images/no-vehicle-image.png';
      this.imageStatus = 'error';
    },

    onImageLoad(e: Event) {
+      if (this.imageStatus == 'error') return;
+
      this.imageStatus = 'loaded';
    },

    onImageClick(e: Event) {
-      const target = e.target as HTMLElement;
+      const target = e.target as HTMLImageElement;

      const chosenVehicle = this.store.chosenVehicle;

      if (!chosenVehicle) return;

      this.store.lastFocusedElement = target;
-      this.store.vehiclePreviewSrc = this.getThumbnailURL(chosenVehicle.type, 'large');
+
+      if (this.isDataPreviewAvailable) {
+        this.store.vehiclePreviewSrc = this.getThumbnailURL(chosenVehicle.type, 'large');
+      }
    },
  },
 });
 </script>

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

 .train-image-section {
  display: flex;
@@ -153,25 +145,25 @@ export default defineComponent({

  & > div {
    position: relative;
-    max-width: 100%;
-    width: 380px;
+    width: 100%;
+    max-width: 380px;
  }
 }

 img {
  width: 100%;

-  &[data-preview-active='true'] {
+  &[data-preview-available='true'] {
    border: 1px solid white;
    cursor: zoom-in;
  }

  &[data-sponsor-only='true'] {
-    border: 1px solid $sponsorColor;
+    border: 1px solid var(--accentColor);
  }

  &[data-team-only='true'] {
-    border: 1px solid $teamColor;
+    border: 1px solid var(--teamColor);
  }
 }

@@ -205,25 +197,25 @@ img {
  width: 100%;
  max-width: 380px;

-  background-color: $secondaryColor;
+  background-color: var(--secondaryColor);
  font-weight: bold;
 }

 .placeholder {
  height: 250px;

-  background-color: $bgColor;
+  background-color: var(--bgColor);
 }

 .sponsor-only {
-  color: $sponsorColor;
+  color: var(--accentColor);
 }

 .team-only {
-  color: $teamColor;
+  color: var(--teamColor);
 }

-@media screen and (max-width: $breakpointMd) {
+@include responsive.midScreen {
  .train-image-section {
    justify-content: center;
  }
@@ -1,5 +1,5 @@
 <template>
-  <div class="number-generator tab">
+  <div class="number-generator-tab">
    <div class="tab_header">
      <h2>{{ $t('numgen.title') }}</h2>
      <h3>{{ $t('numgen.subtitle') }}</h3>
@@ -224,8 +224,15 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 </script>

 <style lang="scss" scoped>
-@import '../../styles/tab.scss';
-@import '../../styles/global.scss';
+@use '@/styles/tab';
+@use '@/styles/responsive';
+
+.number-generator-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  overflow: auto;
+}

 .category-select {
  select {
@@ -264,7 +271,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {

  margin: 0.5em 0;
  padding: 0.5em;
-  background-color: $secondaryColor;
+  background-color: var(--secondaryColor);
 }

 .category-rules {
@@ -282,13 +289,13 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
  margin: 0.25em 0;
 }

-@media screen and (max-width: $breakpointMd) {
-  .number-generator {
+@include responsive.midScreen {
+  .number-generator-tab {
    min-height: 100vh;
  }
 }

-@media screen and (max-width: $breakpointSm) {
+@include responsive.smallScreen {
  .regions-select {
    flex-wrap: wrap;
  }
@@ -1,114 +1,96 @@
 <template>
-  <div class="stock-generator tab">
-    <div class="tab_header">
-      <h2>{{ $t('stockgen.title') }}</h2>
-    </div>
+  <div class="stock-generator-tab">
+    <div>
+      <h2>{{ $t('stockgen.properties-title') }}</h2>

-    <div class="tab_content">
-      <div>
-        <h2>{{ $t('stockgen.properties-title') }}</h2>
+      <b class="text--accent">
+        {{ $t('stockgen.properties-desc') }}
+      </b>

-        <b class="text--accent">
-          {{ $t('stockgen.properties-desc') }}
-        </b>
+      <div class="inputs">
+        <label>
+          <span>{{ $t('stockgen.input-mass') }}</span>
+          <input type="number" v-model="maxTons" step="100" max="4000" min="0" />
+        </label>

-        <div class="inputs">
-          <label>
-            <span>{{ $t('stockgen.input-mass') }}</span>
-            <input type="number" v-model="maxTons" step="100" max="4000" min="0" />
-          </label>
+        <label>
+          <span>{{ $t('stockgen.input-length') }}</span>
+          <input type="number" v-model="maxLength" step="25" max="650" min="0" />
+        </label>

-          <label>
-            <span>{{ $t('stockgen.input-length') }}</span>
-            <input type="number" v-model="maxLength" step="25" max="650" min="0" />
-          </label>
+        <label>
+          <span>{{ $t('stockgen.input-carcount') }}</span>
+          <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
+        </label>
+      </div>

-          <label>
-            <span>{{ $t('stockgen.input-carcount') }}</span>
-            <input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
-          </label>
-        </div>
+      <!-- <hr style="margin: 1em 0" /> -->

-        <!-- <hr style="margin: 1em 0" /> -->
-
-        <!-- <div class="generator_options">
+      <!-- <div class="generator_options">
          <Checkbox v-model="isCarGroupingEnabled">Grupuj wylosowane wagony (ustawia podobne wagony obok siebie w składzie)</Checkbox>
        </div>  -->
+    </div>
+
+    <div>
+      <h2>{{ $t('stockgen.cargo-title') }}</h2>
+      <b>{{ $t('stockgen.cargo-desc') }}</b>
+    </div>
+
+    <div class="generator_cargo">
+      <button
+        v-for="cargo in computedCargoData"
+        :key="cargo.name"
+        class="btn"
+        :data-chosen="chosenCargoTypes.includes(cargo.name)"
+        @click="toggleCargoChosen(cargo.name, cargo.cargoList)"
+      >
+        {{ $t(`cargo.${cargo.name}`) }}
+      </button>
+    </div>
+
+    <div>
+      <h2>{{ $t('stockgen.chosen-title') }}</h2>
+
+      <div class="generator_warning">
+        <span v-if="computedChosenCarTypes.size == 0">
+          {{ $t('stockgen.chosen-empty-warning') }}
+        </span>
+
+        <span v-else>
+          {{ $t('stockgen.chosen-warning') }}
+        </span>
      </div>
+    </div>

-      <div>
-        <h2>{{ $t('stockgen.cargo-title') }}</h2>
-        <b>{{ $t('stockgen.cargo-desc') }}</b>
-      </div>
+    <div class="generator_vehicles" v-if="computedChosenCarTypes.size != 0">
+      <button
+        :data-chosen="true"
+        :data-excluded="excludedCarTypes.includes(carType)"
+        class="btn"
+        v-for="carType in computedChosenCarTypes"
+        :key="carType"
+        @mouseover="onMouseHover(carType)"
+        @mouseleave="onMouseLeave"
+        @click="toggleCarExclusion(carType)"
+      >
+        {{ carType }}
+      </button>
+    </div>

-      <div class="generator_cargo">
-        <button
-          v-for="cargo in computedCargoData"
-          :key="cargo.name"
-          class="btn"
-          :data-chosen="chosenCargoTypes.includes(cargo.name)"
-          @click="toggleCargoChosen(cargo.name, cargo.cargoList)"
-        >
-          {{ $t(`cargo.${cargo.name}`) }}
-        </button>
-      </div>
+    <hr />

-      <div>
-        <h2>{{ $t('stockgen.chosen-title') }}</h2>
+    <div class="tab_actions">
+      <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
+        {{ $t('stockgen.action-generate') }}
+      </button>

-        <div class="generator_warning">
-          <span v-if="computedChosenCarTypes.size == 0">
-            {{ $t('stockgen.chosen-empty-warning') }}
-          </span>
+      <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
+        {{ $t('stockgen.action-generate-empty') }}
+      </button>

-          <span v-else>
-            {{ $t('stockgen.chosen-warning') }}
-          </span>
-        </div>
-      </div>
-
-      <div class="generator_vehicles" v-if="computedChosenCarTypes.size != 0">
-        <button
-          :data-chosen="true"
-          :data-excluded="excludedCarTypes.includes(carType)"
-          class="btn"
-          v-for="carType in computedChosenCarTypes"
-          :key="carType"
-          @mouseover="onMouseHover(carType)"
-          @mouseleave="onMouseLeave"
-          @click="toggleCarExclusion(carType)"
-        >
-          {{ carType }}
-        </button>
-      </div>
-
-      <hr />
-
-      <div class="tab_actions">
-        <button
-          class="btn"
-          :data-disabled="computedChosenCarTypes.size == 0"
-          @click="generateStock()"
-        >
-          {{ $t('stockgen.action-generate') }}
-        </button>
-
-        <button
-          class="btn"
-          :data-disabled="computedChosenCarTypes.size == 0"
-          @click="generateStock(true)"
-        >
-          {{ $t('stockgen.action-generate-empty') }}
-        </button>
-
-        <button
-          class="btn"
-          :data-disabled="computedChosenCarTypes.size == 0"
-          @click="resetChosenCargo"
-        >
-          {{ $t('stockgen.action-reset') }}
-        </button>
-      </div>
+      <button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
+        {{ $t('stockgen.action-reset') }}
+      </button>
    </div>
  </div>
 </template>
@@ -118,7 +100,7 @@ import { defineComponent } from 'vue';
 import { useStore } from '../../store';

 import stockMixin from '../../mixins/stockMixin';
-import { ICargo, ICarWagon, IStock } from '../../types';
+import { ICargo, ICarWagon, IStock } from '../../types/common.types';
 import { isTractionUnit } from '../../utils/vehicleUtils';

 import generatorDataJSON from '../../data/generatorData.json';
@@ -187,9 +169,7 @@ export default defineComponent({
      if (!this.isCarGroupingEnabled) return false;

      stockList.sort((s1, s2) => {
-        return (s1.vehicleRef.constructionType + s1.cargo?.id).localeCompare(
-          s2.vehicleRef.constructionType + s2.cargo?.id
-        );
+        return (s1.vehicleRef.constructionType + s1.cargo?.id).localeCompare(s2.vehicleRef.constructionType + s2.cargo?.id);
      });
    },

@@ -206,14 +186,11 @@ export default defineComponent({

              if (!cargoType || empty) cargoObjs.push(undefined);
              else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]!.cargoTypes);
-              else
-                cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));
+              else cargoObjs.push(carWagonObjs[0]?.cargoTypes.find((cargo) => cargo.id == cargoType));

              carWagonObjs.forEach((cw) => {
                cargoObjs.forEach((cargoObj) => {
-                  const chosenStock = acc.find((a) =>
-                    a.constructionType.includes(cw.constructionType)
-                  );
+                  const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));

                  if (!chosenStock)
                    acc.push({
@@ -227,36 +204,21 @@ export default defineComponent({

          return acc;
        },
-        [] as {
-          constructionType: string;
-          carPool: { carWagon: ICarWagon; cargo?: ICargo }[];
-        }[]
+        [] as { constructionType: string; carPool: { carWagon: ICarWagon; cargo?: ICargo }[] }[]
      );

-      let bestGeneration: { stockList: IStock[]; value: number } = {
-        stockList: [],
-        value: 0,
-      };
+      let bestGeneration: { stockList: IStock[]; value: number } = { stockList: [], value: 0 };

      for (let i = 0; i < 10; i++) {
-        this.store.stockList.splice(
-          this.store.stockList.length > 0 && isTractionUnit(this.store.stockList[0].vehicleRef)
-            ? 1
-            : 0
-        );
+        this.store.stockList.splice(this.store.stockList.length > 0 && isTractionUnit(this.store.stockList[0].vehicleRef) ? 1 : 0);

        let carCount = 0;
-        const maxWeight =
-          this.store.acceptableWeight > 0
-            ? Math.min(this.store.acceptableWeight, this.maxTons * 1000)
-            : this.maxTons * 1000;
+        const maxWeight = this.store.acceptableWeight > 0 ? Math.min(this.store.acceptableWeight, this.maxTons * 1000) : this.maxTons * 1000;

        // eslint-disable-next-line no-constant-condition
        while (true) {
-          const randomStockType =
-            generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
-          const { carWagon, cargo } =
-            randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
+          const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
+          const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];

          if (
            this.store.totalWeight + (carWagon.weight + (cargo?.weight ?? 0)) > maxWeight ||
@@ -280,10 +242,9 @@ export default defineComponent({

      const bestStockList = bestGeneration.stockList;

-      this.groupStock(bestStockList);
-
      this.store.stockList = bestGeneration.stockList;
-      this.store.stockSectionMode = 'stock-list';
+      this.groupStock(bestStockList);
+      this.$router.push('/');
    },

    previewCar(type: string) {
@@ -325,8 +286,15 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/global.scss';
-@import '../../styles/tab.scss';
+@use '@/styles/tab';
+
+.stock-generator-tab {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  overflow: auto;
+  padding: 0.5em;
+}

 h2 {
  margin-top: 0;
@@ -347,8 +315,6 @@ h2 {
    text-transform: uppercase;
    font-weight: bold;

-    background-color: $secondaryColor;
-
    &[data-excluded='true'] {
      background-color: gray;
      box-shadow: none;
@@ -361,7 +327,7 @@ h2 {
      padding: 5px;

      transform: translate(-8px, -50%);
-      background-color: $bgColor;
+      background-color: var(--bgColor);
      color: white;
    }
  }
@@ -402,7 +368,7 @@ h2 {
 }

 .generator_warning {
-  background-color: $accentColor;
+  background-color: var(--accentColor);
  padding: 0.5em;
  text-align: justify;
  font-weight: bold;
@@ -1,702 +1,57 @@
 <template>
  <section class="stock-list-tab">
-    <div class="tab_header">
-      <h2>{{ $t('stocklist.title') }}</h2>
-    </div>
+    <!-- Stock Actions -->
+    <StockActions />

-    <div class="tab_content">
-      <div class="stock_actions">
-        <button class="btn btn--image" @click="clickFileInput">
-          <input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
-          <img src="/images/icon-upload.svg" alt="upload icon" />
-          {{ $t('stocklist.action-upload') }}
-        </button>
+    <!-- Stock Specs -->
+    <StockSpecs />

-        <button
-          class="btn btn--image"
-          :data-disabled="stockIsEmpty"
-          :disabled="stockIsEmpty"
-          @click="downloadStock"
-        >
-          <img src="/images/icon-download.svg" alt="download icon" />
-          {{ $t('stocklist.action-download') }}
-        </button>
+    <!-- Stock Spawn Settings -->
+    <StockSpawnSettings />

-        <button
-          class="btn btn--image"
-          :data-disabled="stockIsEmpty"
-          :disabled="stockIsEmpty"
-          @click="copyToClipboard"
-        >
-          <img src="/images/icon-copy.svg" alt="copy icon" />
-          {{ $t('stocklist.action-copy') }}
-        </button>
+    <!-- Stock Warnings -->
+    <StockWarnings />

-        <button
-          class="btn btn--image"
-          :data-disabled="stockIsEmpty"
-          :disabled="stockIsEmpty"
-          @click="resetStock"
-        >
-          <img src="/images/icon-reset.svg" alt="reset icon" />
-          {{ $t('stocklist.action-reset') }}
-        </button>
-
-        <button
-          class="btn btn--image"
-          :data-disabled="stockIsEmpty"
-          :disabled="stockIsEmpty"
-          @click="shuffleCars"
-        >
-          <img src="/images/icon-shuffle.svg" alt="shuffle icon" />
-          {{ $t('stocklist.action-shuffle') }}
-        </button>
-      </div>
-
-      <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
-        <button
-          class="btn btn--image"
-          :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
-          @click="moveUpStock(store.chosenStockListIndex)"
-        >
-          <img :src="getIconURL('higher')" alt="move up vehicle" />
-          {{ $t('stocklist.action-move-up') }}
-        </button>
-
-        <button
-          class="btn btn--image"
-          :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
-          @click="moveDownStock(store.chosenStockListIndex)"
-        >
-          <img :src="getIconURL('lower')" alt="move down vehicle" />
-          {{ $t('stocklist.action-move-down') }}
-        </button>
-
-        <button
-          class="btn btn--image"
-          :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
-          @click="removeStock(store.chosenStockListIndex)"
-        >
-          <img :src="getIconURL('remove')" alt="remove vehicle" />
-          {{ $t('stocklist.action-remove') }}
-        </button>
-      </div>
-
-      <div class="stock_specs">
-        <b class="real-stock-info" v-if="chosenRealComposition">
-          <span class="text--accent">
-            <img :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
-            {{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
-          </span>
-          |
-        </b>
-
-        <span>
-          {{ $t('stocklist.mass') }}
-          <span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span>
-          ({{ $t('stocklist.mass-accepted') }}:
-          <span class="text--accent">{{
-            store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-'
-          }}</span
-          >) - {{ $t('stocklist.length') }}:
-          <span class="text--accent">{{ store.totalLength }}m</span>
-          - {{ $t('stocklist.vmax') }}
-          <span tabindex="0" :data-tooltip="$t('stocklist.disclaimer')">(?)</span>:
-          <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
-        </span>
-      </div>
-
-      <div></div>
-
-      <div class="stock_spawn-settings">
-        <Checkbox :disabled="!store.stockSupportsColdStart" v-model="store.isColdStart">
-          {{ $t('stocklist.coldstart-info') }}
-        </Checkbox>
-
-        <Checkbox :disabled="!store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
-          {{ $t('stocklist.doublemanning-info') }}
-        </Checkbox>
-      </div>
-
-      <div class="stock_warnings" v-if="hasAnyWarnings">
-        <div class="warning" v-if="locoNotSuitable">
-          (!) {{ $t('stocklist.warning-not-suitable') }}
-        </div>
-
-        <div class="warning" v-if="lengthExceeded && store.isTrainPassenger">
-          (!) {{ $t('stocklist.warning-passenger-too-long') }}
-        </div>
-
-        <div class="warning" v-if="lengthExceeded && !store.isTrainPassenger">
-          (!) {{ $t('stocklist.warning-freight-too-long') }}
-        </div>
-
-        <div class="warning" v-if="teamOnlyVehicles.length > 0">
-          (!)
-          {{
-            $t('stocklist.warning-team-only-vehicle', [
-              teamOnlyVehicles.map((v) => v.vehicleRef.type).join(', '),
-            ])
-          }}
-        </div>
-
-        <div class="warning" v-if="weightExceeded">
-          (!)
-          <i18n-t keypath="stocklist.warning-too-heavy">
-            <template #href>
-              <a
-                target="_blank"
-                href="https://docs.google.com/spreadsheets/d/1BvTU-U7huIaEheov22TrhTtROUM4MwVfdbq03GVAEM8"
-              >
-                {{ $t('stocklist.acceptable-mass-docs') }}
-              </a>
-            </template>
-          </i18n-t>
-        </div>
-
-        <div class="warning" v-if="locoCountExceeded">
-          {{ $t('stocklist.warning-too-many-locos') }}
-        </div>
-      </div>
-
-      <StockThumbnails :onListItemClick="onListItemClick" />
-
-      <!-- Stock list -->
-      <div class="list-wrapper">
-        <div v-if="stockIsEmpty" class="list-empty">
-          <div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
-        </div>
-
-        <ul v-else>
-          <transition-group name="stock-list-anim">
-            <li
-              v-for="(stock, i) in store.stockList"
-              :key="stock.id"
-              :class="{ loco: isTractionUnit(stock.vehicleRef) }"
-              tabindex="0"
-              @click="onListItemClick(i)"
-              @keydown.enter="onListItemClick(i)"
-              @keydown.w="moveUpStock(i)"
-              @keydown.s="moveDownStock(i)"
-              @keydown.backspace="removeStock(i)"
-              ref="itemRefs"
-            >
-              <div
-                class="stock-info"
-                @dragstart="onDragStart(i)"
-                @drop="onDrop($event, i)"
-                @dragover="allowDrop"
-                draggable="true"
-              >
-                <span class="stock-info-no" :data-selected="i == store.chosenStockListIndex">
-                  <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
-                  {{ i + 1 }}.
-                </span>
-
-                <span
-                  class="stock-info-type"
-                  :data-sponsor-only="
-                    stock.vehicleRef.sponsorOnlyTimestamp &&
-                    stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
-                  "
-                  :data-team-only="stock.vehicleRef.teamOnly"
-                >
-                  {{
-                    isTractionUnit(stock.vehicleRef)
-                      ? stock.vehicleRef.type
-                      : getCarSpecFromType(stock.vehicleRef.type)
-                  }}
-                </span>
-
-                <span class="stock-info-cargo" v-if="stock.cargo">
-                  {{ stock.cargo.id }}
-                </span>
-
-                <span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
-
-                <span class="stock-info-mass">
-                  {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
-                </span>
-                <span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
-              </div>
-            </li>
-          </transition-group>
-        </ul>
-      </div>
-    </div>
+    <!-- Stock List -->
+    <StockList />
  </section>
 </template>

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

-import { useStore } from '../../store';
-
-import imageMixin from '../../mixins/imageMixin';
-import stockPreviewMixin from '../../mixins/stockPreviewMixin';
-import StockThumbnails from '../utils/StockThumbnails.vue';
-import stockMixin from '../../mixins/stockMixin';
-import Checkbox from '../common/Checkbox.vue';
-import { isTractionUnit } from '../../utils/vehicleUtils';
+import StockActions from './stock-list/StockActions.vue';
+import StockSpecs from './stock-list/StockSpecs.vue';
+import StockSpawnSettings from './stock-list/StockSpawnSettings.vue';
+import StockWarnings from './stock-list/StockWarnings.vue';
+import StockList from './stock-list/StockList.vue';

 export default defineComponent({
  name: 'stock-list',
-  components: { StockThumbnails, Checkbox },

-  mixins: [imageMixin, stockMixin, stockPreviewMixin],
-
-  setup() {
-    const store = useStore();
-
-    return {
-      store,
-    };
-  },
-
-  data: () => ({
-    imageOffsetY: 0,
-    draggedVehicleID: -1,
-
-    stockActions: [{}],
-  }),
-
-  computed: {
-    chosenRealComposition() {
-      const currentStockString = this.store.stockList.map((s) => s.vehicleRef.type).join(';');
-
-      return this.store.realCompositionList.find((rc) => rc.stockString == currentStockString);
-    },
-
-    stockString() {
-      if (this.store.stockList.length == 0) return '';
-
-      const includeColdStart = this.store.isColdStart && this.store.stockSupportsColdStart;
-      const includeDoubleManned =
-        this.store.isDoubleManned && this.store.stockSupportsDoubleManning;
-
-      return this.store.stockList
-        .map((stock, i) => {
-          let stockTypeStr =
-            isTractionUnit(stock.vehicleRef) || !stock.cargo
-              ? stock.vehicleRef.type
-              : `${stock.vehicleRef.type}:${stock.cargo.id}`;
-
-          if (i == 0 && (includeColdStart || includeDoubleManned))
-            return `${stockTypeStr},${includeColdStart ? 'c' : ''}${includeDoubleManned ? 'd' : ''}`;
-
-          return stockTypeStr;
-        })
-        .join(';');
-    },
-
-    stockIsEmpty() {
-      return this.store.stockList.length == 0;
-    },
-
-    chosenStockVehicle() {
-      return this.store.chosenStockListIndex == -1
-        ? undefined
-        : this.store.stockList[this.store.chosenStockListIndex];
-    },
-
-    lengthExceeded() {
-      return (
-        (this.store.totalLength > 350 && this.store.isTrainPassenger) ||
-        (this.store.totalLength > 650 && !this.store.isTrainPassenger)
-      );
-    },
-
-    weightExceeded() {
-      return this.store.acceptableWeight && this.store.totalWeight > this.store.acceptableWeight;
-    },
-
-    locoNotSuitable() {
-      return (
-        !this.store.isTrainPassenger &&
-        this.store.stockList.length > 1 &&
-        !this.store.stockList.every((stock) => isTractionUnit(stock.vehicleRef)) &&
-        this.store.stockList.some(
-          (stock) => isTractionUnit(stock.vehicleRef) && stock.vehicleRef.type.startsWith('EP')
-        )
-      );
-    },
-
-    locoCountExceeded() {
-      return (
-        this.store.stockList.reduce((acc, stock) => {
-          if (isTractionUnit(stock.vehicleRef)) acc += 1;
-          return acc;
-        }, 0) > 2
-      );
-    },
-
-    teamOnlyVehicles() {
-      return this.store.stockList.filter((stock) => stock.vehicleRef.teamOnly);
-    },
-
-    hasAnyWarnings() {
-      return (
-        this.locoCountExceeded ||
-        this.weightExceeded ||
-        this.lengthExceeded ||
-        this.locoNotSuitable ||
-        this.teamOnlyVehicles
-      );
-    },
-  },
-
-  methods: {
-    isTractionUnit,
-
-    copyToClipboard() {
-      navigator.clipboard.writeText(this.stockString);
-
-      setTimeout(() => {
-        alert(this.$t('stocklist.alert-copied'));
-      }, 20);
-    },
-
-    clickFileInput() {
-      (this.$refs['conFile'] as HTMLInputElement).click();
-    },
-
-    onListItemClick(stockID: number) {
-      const stock = this.store.stockList[stockID];
-
-      this.store.chosenStockListIndex =
-        this.store.chosenStockListIndex == stockID &&
-        this.store.chosenVehicle?.type == stock.vehicleRef.type
-          ? -1
-          : stockID;
-
-      if (this.store.chosenStockListIndex == -1) {
-        this.store.chosenVehicle = null;
-        return;
-      }
-
-      if (this.store.swapVehicles) this.store.swapVehicles = false;
-
-      this.previewStock(stock);
-    },
-
-    getCarSpecFromType(typeStr: string) {
-      const specArray = typeStr.split('_');
-
-      if (specArray.length == 0) return null;
-
-      /* 111a_Grafitti_1 */
-      if (specArray.length == 3) return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
-
-      /* 111a_PKP_Bnouz_01 */
-      return `${specArray[0]} ${specArray[2]}-${specArray[3]} (${specArray[1]})`;
-    },
-
-    resetStock() {
-      this.store.stockList.length = 0;
-      this.store.chosenStockListIndex = -1;
-    },
-
-    removeStock(index: number) {
-      if (index == -1) return;
-
-      this.store.stockList = this.store.stockList.filter((stock, i) => i != index);
-
-      if (this.store.stockList.length < index + 1) this.store.chosenStockListIndex = -1;
-    },
-
-    moveUpStock(index: number) {
-      if (index < 1) return;
-
-      const tempStock = this.store.stockList[index];
-
-      this.store.stockList[index] = this.store.stockList[index - 1];
-      this.store.stockList[index - 1] = tempStock;
-
-      this.store.chosenStockListIndex = index - 1;
-    },
-
-    moveDownStock(index: number) {
-      if (index == -1) return;
-      if (index > this.store.stockList.length - 2) return;
-
-      const tempStock = this.store.stockList[index];
-
-      this.store.stockList[index] = this.store.stockList[index + 1];
-      this.store.stockList[index + 1] = tempStock;
-
-      this.store.chosenStockListIndex = index + 1;
-    },
-
-    shuffleCars() {
-      const availableIndexes = this.store.stockList.reduce((acc, stock, i) => {
-        if (!isTractionUnit(stock.vehicleRef)) acc.push(i);
-
-        return acc;
-      }, [] as number[]);
-
-      for (let i = 0; i < this.store.stockList.length; i++) {
-        if (!availableIndexes.includes(i)) continue;
-
-        availableIndexes.splice(i, -1);
-
-        const randAvailableIndex =
-          availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
-        const tempSwap = this.store.stockList[randAvailableIndex];
-
-        this.store.stockList[randAvailableIndex] = this.store.stockList[i];
-        this.store.stockList[i] = tempSwap;
-      }
-    },
-
-    downloadStock() {
-      if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
-
-      const defaultName = `${this.chosenRealComposition ? this.chosenRealComposition.stockId + ' ' : ''}${this.store.stockList[0].vehicleRef.type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
-        this.store.totalLength
-      }m; vmax ${this.store.maxStockSpeed}`;
-
-      const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);
-
-      if (!fileName) return;
-
-      const blob = new Blob([this.stockString]);
-      const file = fileName + '.con';
-
-      var e = document.createEvent('MouseEvents'),
-        a = document.createElement('a');
-      a.download = file;
-      a.href = window.URL.createObjectURL(blob);
-      a.dataset.downloadurl = ['', a.download, a.href].join(':');
-      e.initEvent('click', true, false);
-      a.dispatchEvent(e);
-    },
-
-    uploadStock() {
-      const inputEl = this.$refs['conFile'] as HTMLInputElement;
-      const files = inputEl.files;
-
-      if (files?.length != 1) return;
-      if (!/\.con$/.test(files[0].name)) return;
-
-      const reader = new FileReader();
-      reader.readAsText(files[0]);
-
-      reader.onload = (res) => {
-        const stockString = res.target?.result;
-
-        if (!stockString || typeof stockString !== 'string') return;
-
-        this.loadStockFromString(stockString);
-      };
-
-      reader.onerror = (err) => console.error(err);
-
-      inputEl.value = '';
-    },
-
-    onDragStart(vehicleIndex: number) {
-      this.draggedVehicleID = vehicleIndex;
-    },
-
-    onDrop(e: DragEvent, vehicleIndex: number) {
-      e.preventDefault();
-
-      let targetEl = (this.$refs['itemRefs'] as Element[])[vehicleIndex];
-
-      if (!targetEl) return;
-
-      const tempVehicle = this.store.stockList[vehicleIndex];
-
-      this.store.stockList[vehicleIndex] = this.store.stockList[this.draggedVehicleID];
-      this.store.stockList[this.draggedVehicleID] = tempVehicle;
-
-      this.store.chosenStockListIndex = vehicleIndex;
-    },
-
-    allowDrop(e: DragEvent) {
-      e.preventDefault();
-    },
+  components: {
+    StockActions,
+    StockSpecs,
+    StockSpawnSettings,
+    StockWarnings,
+    StockList,
  },
 });
 </script>

 <style lang="scss" scoped>
-@import '../../styles/global';
-@import '../../styles/tab.scss';
+@use '../../styles/tab';
+
+.stock-list-tab {
+  display: grid;
+  grid-template-rows: auto auto auto auto 1fr;
+  gap: 0.5em;
+  overflow: hidden;
+}

 .tab_content {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
 }
-
-.warning {
-  padding: 0.25em;
-  margin: 0.25em 0;
-  background: $accentColor;
-  color: black;
-
-  font-weight: bold;
-
-  a {
-    color: black;
-    text-decoration: underline;
-  }
-}
-
-.stock_controls {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-
-  gap: 0.5em;
-
-  padding: 0.5em;
-
-  background-color: #353a57;
-
-  &[data-disabled='true'] {
-    opacity: 0.8;
-
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    pointer-events: none;
-  }
-}
-
-.stock_actions {
-  display: grid;
-  gap: 0.5em;
-
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-
-  button {
-    width: 100%;
-
-    input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-  }
-}
-
-.stock_spawn-settings {
-  display: flex;
-  gap: 0.5em;
-}
-
-.real-stock-info {
-  img {
-    height: 1.3ch;
-  }
-}
-
-.list-wrapper {
-  position: relative;
-}
-
-.list-empty {
-  background-color: $secondaryColor;
-  border-radius: 0.5em;
-  padding: 0.75em;
-  font-weight: bold;
-}
-
-ul {
-  overflow-y: scroll;
-  height: 500px;
-}
-
-ul > li {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-width: 500px;
-
-  margin: 0.25em 0;
-
-  outline: none;
-  cursor: pointer;
-
-  &:focus-visible {
-    outline: 1px solid white;
-  }
-}
-
-li > .stock-info {
-  display: flex;
-  gap: 0.25em;
-
-  color: white;
-  font-weight: 700;
-
-  transition: color 100ms;
-
-  & > span {
-    padding: 0.5em;
-  }
-}
-
-.stock-info-no,
-.stock-info-type {
-  background-color: $secondaryColor;
-
-  &[data-team-only='true'] {
-    color: $teamColor;
-  }
-
-  &[data-sponsor-only='true'] {
-    color: $sponsorColor;
-  }
-}
-
-.stock-info-no {
-  min-width: 3.5em;
-  text-align: right;
-
-  &[data-selected='true'] {
-    color: $accentColor;
-  }
-}
-
-.stock-info-cargo {
-  background-color: #333;
-}
-
-.stock-info-length,
-.stock-info-mass,
-.stock-info-speed {
-  background-color: #555;
-}
-
-.stock-list-anim {
-  &-move, /* apply transition to moving elements */
-  &-enter-active,
-  &-leave-active {
-    transition: all 250ms ease;
-  }
-
-  &-enter-from {
-    opacity: 0;
-    transform: translateY(-25px);
-  }
-
-  &-leave-to {
-    opacity: 0;
-  }
-
-  &-leave-active {
-    position: absolute;
-  }
-}
-
-@media screen and (max-width: $breakpointMd) {
-  ul {
-    min-height: auto;
-  }
-}
 </style>
@@ -0,0 +1,232 @@
+<template>
+  <section class="storage-tab">
+    <div class="tab_header">
+      <h2>{{ $t('storage.title') }}</h2>
+      <h3>{{ $t('storage.subtitle') }}</h3>
+    </div>
+
+    <div class="tab_content">
+      <transition-group name="storage-list-anim" tag="ul" class="storage-list">
+        <li v-for="storageEntry in storageStockDataList" :key="storageEntry.id">
+          <div class="storage-item-top">
+            <h3>
+              {{ storageEntry.id }}
+            </h3>
+
+            <div class="storage-item-top-actions">
+              <button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)">
+                <LogIn />
+              </button>
+
+              <button class="btn btn--icon" @click="toggleStorageEntryExpand(storageEntry.id)">
+                <ChevronDown v-if="!expandedEntries.includes(storageEntry.id)" />
+                <ChevronUp v-else />
+              </button>
+
+              <button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
+                <Trash2 />
+              </button>
+            </div>
+          </div>
+
+          <div class="storage-item-expandable" v-if="expandedEntries.includes(storageEntry.id)">
+            <i>
+              {{ $t('storage.created-at') }}
+              {{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i
+            >
+            <i v-if="storageEntry.updatedAt">
+              &bull; {{ $t('storage.updated-at') }} {{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
+            >
+
+            <div style="margin-top: 0.5em">
+              <i>{{ $t('storage.stock-title') }} </i>
+              {{ shortenStockString(storageEntry.stockString) }}
+            </div>
+          </div>
+        </li>
+
+        <li v-if="Object.keys(storageStockDataList).length == 0" class="storage-no-entries">
+          {{ $t('storage.no-entires') }}
+        </li>
+      </transition-group>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import { useStore } from '../../store';
+import stockMixin from '../../mixins/stockMixin';
+import { ChevronDown, ChevronUp, LogIn, Trash2 } from 'lucide-vue-next';
+
+export default defineComponent({
+  components: {
+    ChevronDown,
+    ChevronUp,
+    LogIn,
+    Trash2,
+  },
+
+  mixins: [stockMixin],
+
+  data: () => ({
+    store: useStore(),
+    expandedEntries: [] as string[],
+  }),
+
+  computed: {
+    storageStockDataList() {
+      return Object.values(this.store.storageStockData)
+        .sort((a, b) => (b.updatedAt ?? b.createdAt) - (a.updatedAt ?? a.createdAt))
+        .map((data) => ({
+          ...data,
+          isExpanded: false,
+        }));
+    },
+  },
+
+  methods: {
+    shortenStockString(stockString: string) {
+      return Array.from(
+        stockString.split(';').reduce(
+          (acc, s) => {
+            const stockName = s.split(/:|,/)[0];
+            acc.set(stockName, (acc.get(stockName) ?? 0) + 1);
+
+            return acc;
+          },
+          new Map() as Map<string, number>
+        )
+      )
+        .map(([stockName, count]) => `${count}x ${stockName.replace(/_/g, ' ')}`)
+        .join(', ');
+    },
+    removeStockIndexFromStorage(stockName: string) {
+      let removeConfirm = confirm(this.$t('storage.remove-confirm'));
+
+      if (!removeConfirm) return;
+
+      delete this.store.storageStockData[stockName];
+      this.store.chosenStorageStockName = '';
+      this.store.chosenStorageStockString = '';
+
+      try {
+        localStorage.setItem('savedStockData', JSON.stringify(this.store.storageStockData));
+      } catch (error) {
+        console.error('Wystąpił błąd podczas usuwania składu z localStorage!', error);
+      }
+    },
+
+    chooseStorageStock(stockName: string) {
+      try {
+        this.loadStockFromString(this.store.storageStockData[stockName].stockString);
+        this.store.chosenStorageStockName = stockName;
+        this.store.chosenStorageStockString = this.store.storageStockData[stockName].stockString;
+
+        this.$router.push('/');
+      } catch (error) {
+        console.log(error);
+      }
+    },
+
+    toggleStorageEntryExpand(stockName: string) {
+      const stockIndex = this.expandedEntries.indexOf(stockName);
+
+      if (stockIndex == -1) this.expandedEntries.push(stockName);
+      else this.expandedEntries.splice(stockIndex, 1);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/tab';
+
+.storage-tab {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  overflow: hidden;
+}
+
+.tab_actions {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.tab_content {
+  overflow: auto;
+  margin-top: 1em;
+  position: relative;
+}
+
+ul.storage-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+ul.storage-list > li {
+  padding: 0.5em;
+  background-color: var(--secondaryColor);
+
+  &[data-current='true'] {
+    background-color: #3b3b3b;
+  }
+}
+
+.storage-item-top {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.storage-item-top > h3 {
+  min-width: 350px;
+  text-align: left;
+  margin: 0;
+}
+
+.storage-item-top-actions {
+  display: flex;
+  gap: 0.5em;
+
+  & > button {
+    background-color: #333;
+  }
+}
+
+.storage-item-expandable {
+  margin-top: 0.5em;
+}
+
+.storage-no-entries {
+  padding: 1em;
+  font-size: 1.15em;
+  font-weight: bold;
+  text-align: center;
+}
+
+.storage-list-anim {
+  &-move,
+  &-enter-active,
+  &-leave-active {
+    transition: all 100ms ease-in-out;
+  }
+
+  &-enter-from {
+    opacity: 0;
+    transform: translateY(-25px);
+  }
+
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-leave-active {
+    position: absolute;
+    width: 100%;
+  }
+}
+</style>
@@ -1,85 +1,86 @@
 <template>
-  <section class="wiki-list tab">
-    <div class="tab_header">
-      <h2>{{ $t('wiki.title') }}</h2>
-    </div>
-
-    <div class="tab_content">
-      <div class="actions">
-        <label>
-          <span>{{ $t('wiki.labels.search-vehicle') }}</span>
-          <input
-            type="text"
-            :placeholder="$t('wiki.labels.search-vehicle-placeholder')"
-            v-model="searchedVehicleTypeName"
-          />
-        </label>
-
-        <label>
-          <span>{{ $t('wiki.labels.vehicles') }}</span>
-          <select name="filter-type" id="filter-type" v-model="filterType">
-            <option v-for="filter in filters" :key="filter" :value="filter">
-              {{ $t(`wiki.filters.${filter}`) }}
-            </option>
-          </select>
-        </label>
-
-        <label>
-          <span>{{ $t('wiki.labels.sort-by') }}</span>
-          <select name="sorter-type" id="sorter-type" v-model="sorterType">
-            <option v-for="sorter in sorters" :key="sorter" :value="sorter">
-              {{ $t(`wiki.sort-by.${sorter}`) }}
-            </option>
-          </select>
-        </label>
-
-        <label>
-          <span>{{ $t('wiki.labels.sort-direction') }}</span>
-
-          <select name="sorter-direction" id="sorter-direction" v-model="sorterDirection">
-            <option value="asc">{{ $t('wiki.sort-direction.asc') }}</option>
-            <option value="desc">{{ $t('wiki.sort-direction.desc') }}</option>
-          </select>
+  <section class="wiki-list-tab">
+    <div class="actions">
+      <div class="action action-input">
+        <label for="search-vehicle">
+          {{ $t('wiki.labels.search-vehicle') }}
+          <button class="reset-btn" @click="resetSearchInput">
+            <img src="/images/icon-exit.svg" alt="reset vehicle input icon" />
+          </button>
        </label>
+        <input
+          type="text"
+          id="search-vehicle"
+          name="search-vehicle"
+          :placeholder="$t('wiki.labels.search-vehicle-placeholder')"
+          v-model="searchedVehicleTypeName"
+        />
      </div>

-      <ul class="vehicles" ref="vehicles">
-        <li
-          v-for="vehicle in computedVehicles"
-          :key="vehicle.type"
-          :data-preview="vehicle.type === store.chosenVehicle?.type"
-          @click="previewVehicle(vehicle)"
-          @dblclick="addVehicle(vehicle)"
-          @keydown.enter="onVehicleSelect(vehicle)"
-          tabindex="0"
-        >
-          <img loading="lazy" width="120" :src="getThumbnailURL(vehicle.type, 'small')" />
+      <div class="action action-select">
+        <label for="filter-type">{{ $t('wiki.labels.vehicles') }}</label>
+        <select name="filter-type" id="filter-type" v-model="filterType">
+          <option v-for="filter in filters" :key="filter" :value="filter">
+            {{ $t(`wiki.filters.${filter}`) }}
+          </option>
+        </select>
+      </div>

-          <span>
-            <span
-              class="vehicle-name"
-              :class="{
-                'sponsor-only':
-                  vehicle.sponsorOnlyTimestamp && vehicle.sponsorOnlyTimestamp > Date.now(),
-                'team-only': vehicle.teamOnly,
-              }"
-            >
-              <b>{{ vehicle.type.replace(/_/g, ' ') }}</b>
-            </span>
+      <div class="action action-select">
+        <label for="sorter-type">{{ $t('wiki.labels.sort-by') }}</label>
+        <select name="sorter-type" id="sorter-type" v-model="sorterType">
+          <option v-for="sorter in sorters" :key="sorter" :value="sorter">
+            {{ $t(`wiki.sort-by.${sorter}`) }}
+          </option>
+        </select>
+      </div>

-            <div class="vehicle-group">
-              {{ $t(`wiki.${vehicle.group}`) }} |
-              {{ isTractionUnit(vehicle) ? vehicle.cabinType : vehicle.constructionType }}
-            </div>
+      <div class="action action-select">
+        <label for="sorter-direction">{{ $t('wiki.labels.sort-direction') }}</label>

-            <div class="vehicle-props">
-              {{ vehicle.length }}m | {{ (vehicle.weight / 1000).toFixed(1) }}t |
-              {{ vehicle.maxSpeed }}km/h
-            </div>
-          </span>
-        </li>
-      </ul>
+        <select name="sorter-direction" id="sorter-direction" v-model="sorterDirection">
+          <option value="asc">{{ $t('wiki.sort-direction.asc') }}</option>
+          <option value="desc">{{ $t('wiki.sort-direction.desc') }}</option>
+        </select>
+      </div>
    </div>
+
+    <div class="no-vehicles-warning" v-if="computedVehicles.length == 0">
+      {{ $t('wiki.no-vehicles') }}
+    </div>
+    
+    <ul class="vehicles" ref="vehicles">
+      <li
+        v-for="vehicle in computedVehicles"
+        :key="vehicle.type"
+        :data-preview="vehicle.type === store.chosenVehicle?.type"
+        @click="previewVehicle(vehicle)"
+        @dblclick="addVehicle(vehicle)"
+        @keydown.enter="onVehicleSelect(vehicle)"
+        tabindex="0"
+      >
+        <img loading="lazy" width="120" :src="getThumbnailURL(vehicle.type, 'small')" @error="onThumbnailImageError" />
+
+        <span>
+          <span
+            class="vehicle-name"
+            :class="{
+              'sponsor-only': vehicle.sponsorOnlyTimestamp && vehicle.sponsorOnlyTimestamp > Date.now(),
+              'team-only': vehicle.teamOnly,
+            }"
+          >
+            <b>{{ vehicle.type.replace(/_/g, ' ') }}</b>
+          </span>
+
+          <div class="vehicle-group">
+            {{ $t(`wiki.${vehicle.group}`) }} |
+            {{ isTractionUnit(vehicle) ? vehicle.cabinType : vehicle.constructionType }}
+          </div>
+
+          <div class="vehicle-props">{{ vehicle.length }}m | {{ (vehicle.weight / 1000).toFixed(1) }}t | {{ vehicle.maxSpeed }}km/h</div>
+        </span>
+      </li>
+    </ul>
  </section>
 </template>

@@ -87,19 +88,28 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../../store';
 import stockPreviewMixin from '../../mixins/stockPreviewMixin';
-import { IVehicle } from '../../types';
+import { IVehicle } from '../../types/common.types';
 import { isTractionUnit } from '../../utils/vehicleUtils';
 import stockMixin from '../../mixins/stockMixin';
 import imageMixin from '../../mixins/imageMixin';

 const sorters = ['type', 'group', 'length', 'weight', 'maxSpeed'] as const;
-const filters = ['vehicles-all', 'vehicles-traction', 'vehicles-wagon'] as const;
+
+enum VehicleFilter {
+  AllVehicles = 'vehicles-all',
+  AllTractions = 'vehicles-tractions-all',
+  ElectricTraction = 'vehicles-tractions-electric',
+  DieselTraction = 'vehicles-tractions-diesel',
+  EmuTraction = 'vehicles-tractions-emu',
+  DmuTraction = 'vehicles-tractions-dmu',
+  AllWagons = 'vehicles-wagons-all',
+  PassengerWagons = 'vehicles-wagons-passenger',
+  FreightWagons = 'vehicles-wagons-freight',
+}

 type SorterType = (typeof sorters)[number];
 type SorterDirection = 'asc' | 'desc';

-type FilterType = (typeof filters)[number];
-
 export default defineComponent({
  mixins: [stockPreviewMixin, stockMixin, imageMixin],

@@ -109,14 +119,14 @@ export default defineComponent({
      observer: null as IntersectionObserver | null,

      sorters: sorters,
-      filters: filters,
+      filters: Object.values(VehicleFilter),

      searchedVehicleTypeName: '',

      sorterType: 'type' as SorterType,
      sorterDirection: 'asc' as SorterDirection,

-      filterType: 'vehicles-all' as FilterType,
+      filterType: VehicleFilter.AllVehicles,

      lastScrollTop: 0,
    };
@@ -143,28 +153,52 @@ export default defineComponent({
  methods: {
    isTractionUnit,

+    onThumbnailImageError(e: Event) {
+      const el = e.target as HTMLImageElement;
+
+      if (el.src == '/images/no-vehicle-image.png') return;
+      el.src = '/images/no-vehicle-image.png';
+    },
+
    onVehicleSelect(vehicle: IVehicle) {
      if (this.store.chosenVehicle?.type === vehicle.type) this.addVehicle(vehicle);
      this.previewVehicle(vehicle);
    },

+    resetSearchInput() {
+      this.searchedVehicleTypeName = '';
+    },
+
    filterVehicles(v: IVehicle) {
-      if (this.searchedVehicleTypeName)
-        return v.type
-          .toLocaleLowerCase()
-          .includes(this.searchedVehicleTypeName.toLocaleLowerCase());
+      if (this.searchedVehicleTypeName != '' && !v.type.toLocaleLowerCase().includes(this.searchedVehicleTypeName.toLocaleLowerCase())) return false;

      switch (this.filterType) {
-        case 'vehicles-all':
-          return true;
-        case 'vehicles-traction':
+        case VehicleFilter.AllTractions:
          return isTractionUnit(v);
-        case 'vehicles-wagon':
+
+        case VehicleFilter.ElectricTraction:
+          return isTractionUnit(v) && v.group == 'loco-electric';
+
+        case VehicleFilter.DieselTraction:
+          return isTractionUnit(v) && v.group == 'loco-diesel';
+
+        case VehicleFilter.EmuTraction:
+          return isTractionUnit(v) && v.group == 'unit-electric';
+
+        case VehicleFilter.DmuTraction:
+          return isTractionUnit(v) && v.group == 'unit-diesel';
+
+        case VehicleFilter.AllWagons:
          return !isTractionUnit(v);

-        default:
-          return false;
+        case VehicleFilter.PassengerWagons:
+          return !isTractionUnit(v) && v.group == 'wagon-passenger';
+
+        case VehicleFilter.FreightWagons:
+          return !isTractionUnit(v) && v.group == 'wagon-freight';
      }
+
+      return true;
    },

    sortVehicles(v1: IVehicle, v2: IVehicle) {
@@ -180,21 +214,6 @@ export default defineComponent({
        case 'maxSpeed':
          return Math.sign(v1[this.sorterType] - v2[this.sorterType]) * direction;

-        // case 'cargoCount':
-        //   return (
-        //     Math.sign(
-        //       (!isTractionUnit(v1) ? v1.cargoTypes.length || -1 : -1) -
-        //         (!isTractionUnit(row2.vehicle) ? row2.vehicle.cargoTypes.length || -1 : -1)
-        //     ) * direction
-        //   );
-
-        // case 'coldStart':
-        //   return (
-        //     ((isTractionUnit(v1) && v1.coldStart ? 1 : -1) -
-        //       (isTractionUnit(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) *
-        //     direction
-        //   );
-
        default:
          return v1.type.localeCompare(v2.type) * direction;
      }
@@ -210,7 +229,15 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-@import '../../styles/tab.scss';
+@use '@/styles/tab';
+@use '@/styles/responsive';
+
+.wiki-list-tab {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  gap: 0.5em;
+  overflow: hidden;
+}

 .actions {
  display: grid;
@@ -220,26 +247,36 @@ export default defineComponent({
  gap: 0.5em;
 }

-.actions > label {
+.action {
  display: flex;
  flex-direction: column;
-  gap: 0.25em;
+  gap: 0.5em;

-  span {
+  label {
    color: #ccc;
+    position: relative;
  }
 }

+.action.action-input label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.reset-btn {
+  display: flex;
+  background-color: #161c2e;
+  border-radius: 0.25em;
+}
+
 .vehicles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0.5em;
  overflow: auto;

-  max-height: 730px;
-
-  margin-top: 0.75em;
-  padding: 0.25em;
+  margin-top: 1em;
 }

 .vehicles > li {
@@ -249,7 +286,6 @@ export default defineComponent({
  background-color: #161c2e;
  padding: 0.5em;

-  min-height: 75px;
  cursor: pointer;

  &[data-preview='true'] {
@@ -271,7 +307,7 @@ export default defineComponent({
 }

 .sponsor-only {
-  color: $sponsorColor;
+  color: var(--accentColor);

  &::after {
    content: '*';
@@ -279,7 +315,7 @@ export default defineComponent({
 }

 .team-only {
-  color: $teamColor;
+  color: var(--teamColor);

  &::after {
    content: '*';
@@ -290,7 +326,19 @@ export default defineComponent({
  color: #ccc;
 }

-@media screen and (max-width: $breakpointSm) {
+.no-vehicles-warning {
+  text-align: center;
+  width: 100%;
+  padding: 1em;
+  background-color: #161c2e;
+}
+
+@include responsive.midScreen {
+  .vehicles {
+    height: 100vh;
+    min-height: 400px;
+  }
+
  .actions-panel {
    align-items: stretch;
    flex-direction: column;
@@ -0,0 +1,366 @@
+<template>
+  <div class="stock_actions">
+    <div class="actions-top">
+      <button class="btn btn--image" @click="clickFileInput" :data-button-tooltip="$t('stocklist.action-upload-file')">
+        <input type="file" @change="uploadStockFromFile" ref="conFile" accept=".con,.txt" />
+        <FolderUp :stroke-width="2.5" />
+      </button>
+
+      <button class="btn btn--image" @click="uploadStockFromClipboard" :data-button-tooltip="$t('stocklist.action-upload-clipboard')">
+        <ClipboardPaste :stroke-width="2.5" />
+      </button>
+
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="downloadStock"
+        :data-button-tooltip="$t('stocklist.action-download')"
+      >
+        <FolderDown :stroke-width="2.5" />
+      </button>
+
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="copyToClipboard"
+        :data-button-tooltip="$t('stocklist.action-copy')"
+      >
+        <ClipboardCopy :stroke-width="2.5" />
+      </button>
+
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="saveStockDataToStorage"
+        :data-button-tooltip="$t('stocklist.action-bookmark')"
+      >
+        <Bookmark :stroke-width="2.5" />
+      </button>
+
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="resetStock"
+        :data-button-tooltip="$t('stocklist.action-reset')"
+      >
+        <ListRestart :stroke-width="2.5" />
+      </button>
+
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="shuffleCars"
+        :data-button-tooltip="$t('stocklist.action-shuffle')"
+      >
+        <Shuffle :stroke-width="2.5" />
+      </button>
+
+      <button
+        class="btn btn--image"
+        :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="turnAroundCars"
+        :data-button-tooltip="$t('stocklist.action-switch')"
+      >
+        <Repeat :stroke-width="2.5" />
+      </button>
+    </div>
+
+    <div class="actions-bottom" :data-disabled="store.chosenStockListIndex == -1">
+      <button
+        class="btn btn--image"
+        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+        @click="stockListUtils.moveUpStock(store.chosenStockListIndex)"
+      >
+        <ChevronUp :stroke-width="2.5" />
+        {{ $t('stocklist.action-move-up') }}
+      </button>
+
+      <button
+        class="btn btn--image"
+        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+        @click="stockListUtils.moveDownStock(store.chosenStockListIndex)"
+      >
+        <ChevronDown :stroke-width="2.5" />
+        {{ $t('stocklist.action-move-down') }}
+      </button>
+
+      <button
+        class="btn btn--image"
+        :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
+        @click="stockListUtils.removeStock(store.chosenStockListIndex)"
+      >
+        <Trash2 :stroke-width="2.5" />
+        {{ $t('stocklist.action-remove') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../../store';
+
+import { isTractionUnit } from '../../../utils/vehicleUtils';
+import stockMixin from '../../../mixins/stockMixin';
+import { useStockListUtils } from '../../../utils/stockListUtils';
+
+import { getCurrentStockFileName } from '../../../composables/file';
+
+import {
+  Bookmark,
+  ChevronDown,
+  ChevronUp,
+  ClipboardCopy,
+  ClipboardPaste,
+  Download,
+  FolderDown,
+  FolderUp,
+  ListRestart,
+  Repeat,
+  Shuffle,
+  Trash2,
+} from 'lucide-vue-next';
+
+export default defineComponent({
+  mixins: [stockMixin],
+
+  components: {
+    Bookmark,
+    ChevronDown,
+    ChevronUp,
+    ClipboardCopy,
+    ClipboardPaste,
+    Download,
+    FolderUp,
+    ListRestart,
+    Repeat,
+    Shuffle,
+    FolderDown,
+    Trash2,
+  },
+
+  data: () => ({
+    store: useStore(),
+  }),
+
+  setup() {
+    const stockListUtils = useStockListUtils();
+
+    return {
+      stockListUtils,
+      getCurrentStockFileName,
+    };
+  },
+
+  computed: {
+    stockIsEmpty() {
+      return this.store.stockList.length == 0;
+    },
+  },
+
+  methods: {
+    copyToClipboard() {
+      navigator.clipboard.writeText(this.store.stockString);
+
+      setTimeout(() => {
+        alert(this.$t('stocklist.alert-copied'));
+      }, 20);
+    },
+
+    clickFileInput() {
+      (this.$refs['conFile'] as HTMLInputElement).click();
+    },
+
+    resetStock() {
+      this.store.stockList.length = 0;
+      this.store.chosenStockListIndex = -1;
+    },
+
+    shuffleCars() {
+      const availableIndexes = this.store.stockList.reduce((acc, stock, i) => {
+        if (!isTractionUnit(stock.vehicleRef)) acc.push(i);
+
+        return acc;
+      }, [] as number[]);
+
+      for (let i = 0; i < this.store.stockList.length; i++) {
+        if (!availableIndexes.includes(i)) continue;
+
+        availableIndexes.splice(i, -1);
+
+        const randAvailableIndex = availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
+        const tempSwap = this.store.stockList[randAvailableIndex];
+
+        this.store.stockList[randAvailableIndex] = this.store.stockList[i];
+        this.store.stockList[i] = tempSwap;
+      }
+    },
+
+    turnAroundCars() {
+      if (this.store.stockList.length <= 1) return;
+
+      const isFirstTractionUnit = isTractionUnit(this.store.stockList[0].vehicleRef);
+
+      const sliceToSwap = isFirstTractionUnit ? this.store.stockList.slice(1) : this.store.stockList.slice();
+
+      sliceToSwap.reverse();
+
+      if (isFirstTractionUnit) sliceToSwap.unshift(this.store.stockList[0]);
+
+      this.store.stockList = sliceToSwap;
+    },
+
+    downloadStock() {
+      if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
+
+      const defaultName = this.getCurrentStockFileName();
+      const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);
+
+      if (!fileName) return;
+
+      const blob = new Blob([this.store.stockString]);
+      const file = fileName + '.con';
+
+      var e = document.createEvent('MouseEvents'),
+        a = document.createElement('a');
+      a.download = file;
+      a.href = window.URL.createObjectURL(blob);
+      a.dataset.downloadurl = ['', a.download, a.href].join(':');
+      e.initEvent('click', true, false);
+      a.dispatchEvent(e);
+    },
+
+    uploadStockFromFile() {
+      const inputEl = this.$refs['conFile'] as HTMLInputElement;
+      const files = inputEl.files;
+
+      if (files?.length != 1) return;
+      if (!/\.con$/.test(files[0].name)) return;
+
+      const reader = new FileReader();
+      reader.readAsText(files[0]);
+
+      reader.onload = (res) => {
+        const stockString = res.target?.result;
+
+        if (!stockString || typeof stockString !== 'string') return;
+
+        this.loadStockFromString(stockString);
+      };
+
+      reader.onerror = (err) => console.error(err);
+
+      inputEl.value = '';
+    },
+
+    saveStockDataToStorage() {
+      if (this.store.stockList.length == 0) return;
+
+      const defaultName = this.getCurrentStockFileName();
+      const entryName = prompt(this.$t('stocklist.prompt-bookmark'), defaultName);
+
+      if (!entryName) return;
+
+      if (entryName in this.store.storageStockData) {
+        const overwriteDataConfirm = confirm(this.$t('stocklist.prompt-bookmark-overwrite'));
+
+        if (!overwriteDataConfirm) return;
+
+        this.store.storageStockData[entryName]['updatedAt'] = Date.now();
+        this.store.storageStockData[entryName]['stockString'] = this.store.stockString;
+      } else {
+        this.store.storageStockData[entryName] = {
+          id: entryName,
+          createdAt: Date.now(),
+          stockString: this.store.stockString,
+        };
+      }
+
+      try {
+        localStorage.setItem('savedStockData', JSON.stringify(this.store.storageStockData));
+        this.store.chosenStorageStockName = entryName;
+        this.store.chosenStorageStockString = this.store.stockString;
+      } catch (error) {
+        console.error('Wystąpił błąd podczas zapisywania składu do localStorage!', error);
+      }
+    },
+
+    async uploadStockFromClipboard() {
+      try {
+        const content = await navigator.clipboard.readText();
+        this.loadStockFromString(content);
+      } catch (error) {
+        console.error(error);
+
+        switch (error) {
+          case 'stock-loading-error':
+            alert(this.$t('stocklist.stock-loading-error'));
+            break;
+
+          default:
+            alert(this.$t('stocklist.stock-clipboard-error'));
+            break;
+        }
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.stock_actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.actions-bottom {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+
+  gap: 0.5em;
+
+  padding: 0.5em;
+
+  background-color: #353a57;
+
+  &[data-disabled='true'] {
+    opacity: 0.8;
+
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    pointer-events: none;
+  }
+}
+
+.actions-top {
+  display: grid;
+  gap: 0.5em;
+
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+
+  button {
+    width: 100%;
+
+    &[data-button-tooltip] {
+      font-size: 0.85em;
+    }
+
+    input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+  }
+}
+</style>
@@ -0,0 +1,250 @@
+<template>
+  <div class="list-wrapper">
+    <StockThumbnails :onListItemClick="onListItemClick" />
+
+    <ul>
+      <transition-group name="stock-list-anim">
+        <li v-if="stockIsEmpty" class="list-empty">
+          {{ $t('stocklist.list-empty') }}
+        </li>
+
+        <li
+          v-for="(stock, i) in store.stockList"
+          :key="stock.id"
+          class="stock-item"
+          :class="{ loco: isTractionUnit(stock.vehicleRef) }"
+          tabindex="0"
+          @click="onListItemClick(i)"
+          @keydown.enter="onListItemClick(i)"
+          @keydown.w="stockListUtils.moveUpStock(i)"
+          @keydown.s="stockListUtils.moveDownStock(i)"
+          @keydown.backspace="stockListUtils.removeStock(i)"
+          ref="itemRefs"
+        >
+          <div class="stock-info" @dragstart="onDragStart(i)" @drop="onDrop($event, i)" @dragover="allowDrop" draggable="true">
+            <span class="stock-info-no" :data-selected="i == store.chosenStockListIndex">
+              <span v-if="i == store.chosenStockListIndex">&bull;&nbsp;</span>
+              {{ i + 1 }}.
+            </span>
+
+            <span
+              class="stock-info-type"
+              :data-sponsor-only="stock.vehicleRef.sponsorOnlyTimestamp && stock.vehicleRef.sponsorOnlyTimestamp > Date.now()"
+              :data-team-only="stock.vehicleRef.teamOnly"
+            >
+              {{ isTractionUnit(stock.vehicleRef) ? stock.vehicleRef.type : getCarSpecFromType(stock.vehicleRef.type) }}
+            </span>
+
+            <span class="stock-info-cargo" v-if="stock.cargo">
+              {{ stock.cargo.id }}
+            </span>
+
+            <span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
+
+            <span class="stock-info-mass"> {{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t </span>
+            <span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
+          </div>
+        </li>
+      </transition-group>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../../store';
+import { isTractionUnit } from '../../../utils/vehicleUtils';
+import { useStockListUtils } from '../../../utils/stockListUtils';
+import stockPreviewMixin from '../../../mixins/stockPreviewMixin';
+import StockThumbnails from './StockThumbnails.vue';
+
+export default defineComponent({
+  mixins: [stockPreviewMixin],
+  components: { StockThumbnails },
+
+  setup() {
+    const stockListUtils = useStockListUtils();
+
+    return { stockListUtils };
+  },
+
+  data: () => ({
+    store: useStore(),
+    draggedVehicleID: -1,
+  }),
+
+  computed: {
+    stockIsEmpty() {
+      return this.store.stockList.length == 0;
+    },
+  },
+
+  methods: {
+    isTractionUnit,
+
+    onDragStart(vehicleIndex: number) {
+      this.draggedVehicleID = vehicleIndex;
+    },
+
+    onDrop(e: DragEvent, vehicleIndex: number) {
+      e.preventDefault();
+
+      let targetEl = (this.$refs['itemRefs'] as Element[])[vehicleIndex];
+
+      if (!targetEl) return;
+
+      const tempVehicle = this.store.stockList[vehicleIndex];
+
+      this.store.stockList[vehicleIndex] = this.store.stockList[this.draggedVehicleID];
+      this.store.stockList[this.draggedVehicleID] = tempVehicle;
+
+      this.store.chosenStockListIndex = vehicleIndex;
+    },
+
+    allowDrop(e: DragEvent) {
+      e.preventDefault();
+    },
+
+    onListItemClick(stockID: number) {
+      const stock = this.store.stockList[stockID];
+
+      this.store.chosenStockListIndex =
+        this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.vehicleRef.type ? -1 : stockID;
+
+      if (this.store.chosenStockListIndex == -1) {
+        this.store.chosenVehicle = null;
+        return;
+      }
+
+      if (this.store.swapVehicles) this.store.swapVehicles = false;
+
+      this.previewStock(stock);
+    },
+
+    getCarSpecFromType(typeStr: string) {
+      const specArray = typeStr.split('_');
+
+      if (specArray.length == 0) return null;
+
+      /* 111a_Grafitti_1 */
+      if (specArray.length == 3) return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
+
+      /* 111a_PKP_Bnouz_01 */
+      return `${specArray[0]} ${specArray[2]}-${specArray[3]} (${specArray[1]})`;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/responsive';
+
+.list-wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  position: relative;
+  overflow: hidden;
+}
+
+.list-empty {
+  background-color: var(--secondaryColor);
+  border-radius: 0.5em;
+  padding: 0.75em;
+  font-weight: bold;
+  width: 100%;
+}
+
+ul {
+  overflow-y: auto;
+}
+
+ul > li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  white-space: nowrap;
+
+  margin: 0.25em 0;
+
+  outline: none;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 1px solid white;
+  }
+}
+
+li > .stock-info {
+  display: flex;
+  gap: 0.25em;
+
+  color: white;
+  font-weight: 700;
+
+  transition: color 100ms;
+
+  & > span {
+    padding: 0.5em;
+  }
+}
+
+.stock-info-no,
+.stock-info-type {
+  background-color: var(--secondaryColor);
+
+  &[data-team-only='true'] {
+    color: var(--teamColor);
+  }
+
+  &[data-sponsor-only='true'] {
+    color: var(--accentColor);
+  }
+}
+
+.stock-info-no {
+  min-width: 3.5em;
+  text-align: right;
+
+  &[data-selected='true'] {
+    color: var(--accentColor);
+  }
+}
+
+.stock-info-cargo {
+  background-color: #333;
+}
+
+.stock-info-length,
+.stock-info-mass,
+.stock-info-speed {
+  background-color: #555;
+}
+
+.stock-list-anim {
+  &-move, /* apply transition to moving elements */
+  &-enter-active,
+  &-leave-active {
+    transition: all 250ms ease;
+  }
+
+  &-enter-from {
+    opacity: 0;
+    transform: translateY(-25px);
+  }
+
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-leave-active {
+    position: absolute;
+  }
+}
+
+@include responsive.midScreen {
+  ul {
+    height: 100vh;
+    min-height: 400px;
+  }
+}
+</style>
@@ -0,0 +1,32 @@
+<template>
+  <div class="stock_spawn-settings">
+    <Checkbox :disabled="!store.stockSupportsColdStart" v-model="store.isColdStart">
+      {{ $t('stocklist.coldstart-info') }}
+    </Checkbox>
+
+    <Checkbox :disabled="!store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
+      {{ $t('stocklist.doublemanning-info') }}
+    </Checkbox>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../../store';
+import Checkbox from '../../common/Checkbox.vue';
+
+export default defineComponent({
+  components: { Checkbox },
+
+  data: () => ({
+    store: useStore(),
+  }),
+});
+</script>
+
+<style scoped>
+.stock_spawn-settings {
+  display: flex;
+  gap: 0.5em;
+}
+</style>
@@ -0,0 +1,68 @@
+<template>
+  <div class="stock-specs">
+    <div v-if="store.chosenStorageStockName || chosenRealComposition">
+      <b v-if="store.chosenStorageStockName">
+        <span class="text--accent" :title="store.chosenStorageStockName.length > 41 ? store.chosenStorageStockName : ''">
+          <BookmarkCheck :size="19" />
+          {{ store.chosenStorageStockName.slice(0, 40) }}
+          {{ store.chosenStorageStockName.length > 41 ? '...' : '' }}
+        </span>
+      </b>
+
+      <span v-if="store.chosenStorageStockName && chosenRealComposition"> | </span>
+
+      <b class="real-stock-info" v-if="chosenRealComposition">
+        <span class="text--accent">
+          <img class="real-stock-icon" :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
+          {{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
+        </span>
+      </b>
+    </div>
+
+    <span>
+      {{ $t('stocklist.mass') }}
+      <span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span>
+      ({{ $t('stocklist.mass-accepted') }}:
+      <span class="text--accent">{{ store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-' }}</span
+      >) - {{ $t('stocklist.length') }}:
+      <span class="text--accent">{{ store.totalLength }}m</span>
+      - {{ $t('stocklist.vmax') }} <span tabindex="0" :data-tooltip="$t('stocklist.disclaimer')">(?)</span>:
+      <span class="text--accent">{{ isFinite(store.maxStockSpeed) ? store.maxStockSpeed : '--' }} km/h</span>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../../store';
+import imageMixin from '../../../mixins/imageMixin';
+import { BookmarkCheck } from 'lucide-vue-next';
+
+export default defineComponent({
+  components: { BookmarkCheck },
+
+  mixins: [imageMixin],
+
+  data: () => ({
+    store: useStore(),
+  }),
+
+  computed: {
+    chosenRealComposition() {
+      const currentStockString = this.store.stockList.map((s) => s.vehicleRef.type).join(';');
+
+      return this.store.realCompositionList.find((rc) => rc.stockString == currentStockString);
+    },
+  },
+});
+</script>
+
+<style scoped>
+.real-stock-icon {
+  height: 1.3ch;
+}
+
+.stock-specs svg {
+  vertical-align: text-top;
+}
+</style>
@@ -28,7 +28,7 @@
            v-for="thumbnail in getVehicleThumbnails(stock.vehicleRef.type)"
            draggable="false"
            style="min-width: 200px"
-            :src="`https://static.spythere.eu/thumbnails/v2/${thumbnail.src}.png`"
+            :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnail.src}.png`"
            :alt="stock.vehicleRef.type"
            :title="stock.vehicleRef.type"
            @load="($event) => (($event.target as HTMLImageElement).style.minWidth = 'auto')"
@@ -46,7 +46,7 @@

 <script setup lang="ts">
 import { Ref, computed, nextTick, ref, watch } from 'vue';
-import { useStore } from '../../store';
+import { useStore } from '../../../store';

 const store = useStore();
 const emit = defineEmits(['listItemClick']);
@@ -173,8 +173,6 @@ const getVehicleThumbnails = (vehicleString: string) => {
 </script>

 <style lang="scss" scoped>
-@import '../../styles/global.scss';
-
 .stock-thumbnails {
  overflow: auto;
  background-color: #353a57;
@@ -201,11 +199,11 @@ ul {
  }

  &[data-sponsor-only='true'] > b {
-    color: $sponsorColor;
+    color: var(--accentColor);
  }

  &[data-team-only='true'] > b {
-    color: $teamColor;
+    color: var(--teamColor);
  }

  img {
@@ -0,0 +1,108 @@
+<template>
+  <div class="stock_warnings" v-if="hasAnyWarnings">
+    <div class="warning" v-if="locoNotSuitable"><TriangleAlertIcon :size="20" :stroke-width="2" /> {{ $t('stocklist.warning-not-suitable') }}</div>
+
+    <div class="warning" v-if="lengthExceeded && store.isTrainPassenger">
+      <TriangleAlertIcon :size="20" :stroke-width="2" /> {{ $t('stocklist.warning-passenger-too-long') }}
+    </div>
+
+    <div class="warning" v-if="lengthExceeded && !store.isTrainPassenger">
+      <TriangleAlertIcon :size="20" :stroke-width="2" /> {{ $t('stocklist.warning-freight-too-long') }}
+    </div>
+
+    <div class="warning" v-if="teamOnlyVehicles.length > 0">
+      <TriangleAlertIcon :size="20" :stroke-width="2" />
+      {{ $t('stocklist.warning-team-only-vehicle', [teamOnlyVehicles.map((v) => v.vehicleRef.type).join(', ')]) }}
+    </div>
+
+    <div class="warning" v-if="store.cargoWarnings.size > 0">
+      <TriangleAlertIcon :size="20" :stroke-width="2" /> <b>{{ $t('cargo-warnings.title') }}</b>
+      {{ [...store.cargoWarnings].map((v) => $t(`cargo-warnings.${v}`)).join('; ') }}
+    </div>
+
+    <div class="warning" v-if="!isRearPRSM4">
+      <TriangleAlertIcon :size="20" :stroke-width="2" /> {{ $t('stocklist.warning-prsm4-not-at-the-rear') }}
+    </div>
+
+    <div class="warning" v-if="weightExceeded">
+      <TriangleAlertIcon :size="20" :stroke-width="2" />
+      <i18n-t keypath="stocklist.warning-too-heavy">
+        <template #href>
+          <a target="_blank" href="https://docs.google.com/spreadsheets/d/1BvTU-U7huIaEheov22TrhTtROUM4MwVfdbq03GVAEM8">
+            {{ $t('stocklist.acceptable-mass-docs') }}
+          </a>
+        </template>
+      </i18n-t>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../../store';
+import { isTractionUnit } from '../../../utils/vehicleUtils';
+import { TriangleAlertIcon } from 'lucide-vue-next';
+
+export default defineComponent({
+  components: { TriangleAlertIcon },
+
+  data: () => ({
+    store: useStore(),
+  }),
+
+  computed: {
+    teamOnlyVehicles() {
+      return this.store.stockList.filter((stock) => stock.vehicleRef.teamOnly);
+    },
+
+    hasAnyWarnings() {
+      return this.weightExceeded || this.lengthExceeded || this.locoNotSuitable || this.teamOnlyVehicles;
+    },
+
+    lengthExceeded() {
+      return (this.store.totalLength > 350 && this.store.isTrainPassenger) || (this.store.totalLength > 650 && !this.store.isTrainPassenger);
+    },
+
+    weightExceeded() {
+      return this.store.acceptableWeight && this.store.totalWeight > this.store.acceptableWeight;
+    },
+
+    locoNotSuitable() {
+      return (
+        !this.store.isTrainPassenger &&
+        this.store.stockList.length > 1 &&
+        !this.store.stockList.every((stock) => isTractionUnit(stock.vehicleRef)) &&
+        this.store.stockList.some((stock) => isTractionUnit(stock.vehicleRef) && stock.vehicleRef.type.startsWith('EP'))
+      );
+    },
+
+    isRearPRSM4() {
+      if (this.store.stockList.length <= 1) return true;
+
+      const index = this.store.stockList.findIndex((stock) => stock.vehicleRef.type.startsWith('PRSM4'));
+
+      return index != -1 ? index == this.store.stockList.length - 1 : true;
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.warning {
+  padding: 0.25em;
+  margin: 0.25em 0;
+  background: var(--accentColor);
+  color: black;
+
+  font-weight: bold;
+
+  .lucide {
+    vertical-align: text-bottom;
+  }
+
+  a {
+    color: black;
+    text-decoration: underline;
+  }
+}
+</style>
@@ -5,7 +5,7 @@
    @keydown.esc="store.vehiclePreviewSrc = ''"
    tabindex="0"
  >
-    <img :src="store.vehiclePreviewSrc" alt="preview" />
+    <img :src="store.vehiclePreviewSrc" alt="preview" @error="onImageError" />
  </div>
 </template>

@@ -23,6 +23,14 @@ export default defineComponent({
  mounted() {
    this.$el.focus();
  },
+
+  methods: {
+    onImageError(event: Event) {
+      if(!event.target || !(event.target instanceof HTMLImageElement)) return
+
+      event.target.src = '/images/no-vehicle-image.png';
+    },
+  },
 });
 </script>

@@ -0,0 +1,51 @@
+import { useStore } from '../store';
+import { additionalCargoTypes } from '../utils/vehicleUtils';
+
+export function getCurrentStockFileName() {
+  const store = useStore();
+
+  let fileName = '';
+
+  if (store.chosenStorageStockName.trim() != '') {
+    return store.chosenStorageStockName;
+  }
+
+  const currentStockString = store.stockList.map((s) => s.vehicleRef.type).join(';');
+
+  const currentRealComp = store.realCompositionList.find((rc) => rc.stockString == currentStockString);
+
+  // Append real composition to the name if chosen
+  if (currentRealComp != undefined) {
+    fileName += `${currentRealComp.stockId} `;
+  }
+
+  // Append default props
+  fileName += `${store.stockList[0].vehicleRef.type} ${(store.totalWeight / 1000).toFixed(1)}t; ${store.totalLength}m; vmax ${store.maxStockSpeed}`;
+
+  return fileName;
+}
+
+// UNUSED - PARSES ADDITIONAL CARGO FOR INTERMODALS
+export function getStockStringOutput() {
+  const store = useStore();
+
+  const stockEntries = store.stockString.split(';');
+
+  const parsedEntries = store.stockList.map((stockVehicle, i) => {
+    if (stockVehicle.cargo && /412Z|627Z/.test(stockVehicle.vehicleRef.constructionType)) {
+      const additionalCargo = additionalCargoTypes.find(
+        (c) => c.groupType == stockVehicle.vehicleRef.constructionType && c.id == stockVehicle.cargo!.id
+      );
+
+      if (additionalCargo) {
+        let cargoString = additionalCargo.cargoStringVariations[Math.floor(Math.random() * additionalCargo.cargoStringVariations.length)];
+
+        return stockEntries[i].replace(stockVehicle.cargo.id, cargoString);
+      }
+    }
+
+    return stockEntries[i];
+  });
+
+  return parsedEntries.join(';');
+}
@@ -7,5 +7,12 @@
  "EP08": [650000, 650000],
  "EP09": [800000, 800000],
  "ET41": [700000, 4000000],
-  "SM42": [2400000, 2400000]
+  "SM42": [2400000, 2400000],
+  "ET22": [650000, 3100000],
+  "201E": [650000, 3100000],
+  "ST44": [3000000, 3000000],
+  "M62": [3000000, 3000000],
+  "CTLR4C": [3000000, 3000000],
+  "SU45": [1500000, 1500000],
+  "SP45": [1500000, 1500000]
 }
@@ -43,19 +43,22 @@
    "PW": ["6", "000", "899"],
    "PX": ["6", "000", "899"],

-    "TC": ["0", "000", "899"],
+    "TM": ["4", "000", "899"],
+    "TN": ["3", "000", "899"],
+    "TK": ["3", "000", "899"],
+    "TD": ["2", "000", "899"],
    "TG": ["1", "000", "899"],
    "TR": ["1", "000", "899"],
-    "TD": ["2", "000", "899"],
-    "TK": ["3", "000", "899"],
-    "TN": ["3", "000", "899"],
-    "TM": ["4", "000", "899"],
+    "TC": ["0", "000", "899"],
    "TS": ["5", "000", "899"],
+    "TH": ["5", "000", "899"],

    "LT": ["5", "000", "899"],
    "LP": ["6", "000", "899"],
    "LS": ["9", "000", "899"],
+    "LZ": ["9", "000", "899"],

-    "ZN": ["9", "000", "899"]
+    "ZN": ["9", "000", "899"],
+    "ZU": ["9", "000", "899"]
  }
 }
@@ -1,102 +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
-    },
-    "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
-  }
-}
@@ -1,11 +1,32 @@
 {
  "cargo": {
-    "kontenery": ["627Z:all", "412Z:all"],
-    "chłodnia": ["202Lc:all"],
-    "drobnica": ["426S:all", "208Kf:all", "401Ka_PKP_Gags:all", "401Ka_PKPC_Gags:all"],
-    "węgiel": ["412W:coal_01", "413S:coal_413S", "429W:coal_01", "401Zb:coal_02"],
-    "ruda": ["412W:ore_01", "401Zl:ore_35", "429W:ore_01"],
-    "piasek": [
+    "containers": ["412Z:sc_20", "412Z:sc_40", "627Z:sc_20", "627Z:sc_40"],
+    "food": ["412Z:tc_20_loaded", "627Z:tc_20_loaded"],
+    "food-empty": ["412Z:tc_20_empty", "627Z:tc_20_empty"],
+    "intermodal": [
+      "627Z:sc_20",
+      "627Z:sc_40",
+      "627Z:tc_20_empty",
+      "627Z:tc_20_loaded",
+      "627Z:wt_20_empty",
+      "627Z:wt_20_biomass",
+      "412Z:sc_20",
+      "412Z:sc_40",
+      "412Z:tc_20_empty",
+      "412Z:tc_20_loaded",
+      "412Z:wt_20_empty",
+      "412Z:wt_20_biomass"
+    ],
+    "biomass": ["412Z:wt_20_biomass", "627Z:wt_20_biomass"],
+    "biomass-empty": [
+      "412Z:wt_20_empty",
+      "627Z:wt_20_empty"
+    ],
+    "cold-storage": ["202Lc:all"],
+    "loose-cargo": ["426S:all", "208Kf:all", "401Ka_PKP_Gags:all", "401Ka_PKPC_Gags:all", "411V_PKPC_Facc:all", "411V_ALU_Faccpp:all", "411V_DOLWR_Facc:all", "411V_PKP_Facc:all", "411V_PNUIK_Facc:all"],
+    "coal": ["412W:coal_01", "413S:coal_413S", "429W:coal_01", "401Zb:coal_02"],
+    "ore": ["412W:ore_01", "401Zl:ore_35", "429W:ore_01"],
+    "sand": [
      "412W:sand_01",
      "412W:sand_02",
      "413S:sand_413S",
@@ -13,45 +34,34 @@
      "429W:sand_01",
      "429W:sand_02",
      "401Zb:sand_03",
+      "409Va:sand_409Va",
      "418Va:sand_418V",
      "418Vb:sand_418V"
    ],
-    "kreda": ["413S:chalk_413S"],
-    "kamień": [
-      "412W:stone_01",
-      "412W:stone_50",
-      "401Zl:stone_25",
-      "429W:stone_01",
-      "401Zb:stone_02",
-      "418Va:stone_418V",
-      "418Vb:stone_418V"
-    ],
-    "złom": ["412W:scrap_01", "412W:scrap_02", "429W:scrap_01", "429W:scrap_02"],
-    "paliwo": ["29R_CTLL:all", "29R_PKP:all", "445Rb:all"],
-    "melasa": ["29R_PLPOL:all"],
-    "żwir": ["441V"],
-    "koła": ["424Z:wheels_01"],
-    "drewno": ["424Z:woods_01", "424Z:woods_02"],
-    "szyny": ["424Z:rails_01"],
-    "kable": ["424Z:cables_01", "24Z:cables_Ks", "401Ze:cables_02"],
-    "kruszywo": ["59WS:all"],
-    "techniczne": ["209c", "304Ca", "102a_PKPE", "401Ka_PKP_XGa:all"],
-    "poczta": ["211K:all"],
-    "cement": [
-      "408S:cement_4",
-      "206S_CEMET:cement_3",
-      "206S_SPEED:cement_3",
-      "220S_CEMET:cement_3"
-    ],
-    "wapno": ["408S:lime_4", "206S_CEMET:lime_3", "206S_SPEED:lime_3", "220S_CEMET:lime_3"],
+    "chalk": ["413S:chalk_413S"],
+    "stone": ["412W:stone_01", "412W:stone_50", "401Zl:stone_25", "429W:stone_01", "401Zb:stone_02", "418Va:stone_418V", "418Vb:stone_418V"],
+    "scrap": ["412W:scrap_01", "412W:scrap_02", "429W:scrap_01", "429W:scrap_02"],
+    "fuel": ["29R_CTLL:all", "29R_PKP:all", "445Rb:all"],
+    "molasses": ["29R_PLPOL:all"],
+    "gravel": ["441V"],
+    "wheels": ["424Z:wheels_01"],
+    "wood": ["424Z:woods_01", "424Z:woods_02"],
+    "rails": ["424Z:rails_01"],
+    "cables": ["424Z:cables_01", "24Z:cables_Ks", "401Ze:cables_02"],
+    "aggregate": ["59WS:all"],
+    "technical": ["209c", "304Ca", "102a_PKPE", "401Ka_PKP_XGa:all"],
+    "mail": ["211K:all"],
+    "concrete": ["408S:cement_4", "206S_CEMET:cement_3", "206S_SPEED:cement_3", "220S_CEMET:cement_3"],
+    "lime": ["408S:lime_4", "206S_CEMET:lime_3", "206S_SPEED:lime_3", "220S_CEMET:lime_3"],
    "soda": ["408S:soda_4", "206S_CEMET:soda_3", "206S_SPEED:soda_3", "220S_CEMET:soda_3"],
-    "pszenica": ["206Sh_PKP_Ugpps:wheat_3", "206Sh_PKPC_Ugpps:wheat_3"],
-    "kukurydza": ["206Sh_PKP_Ugpps:corn_3", "206Sh_PKPC_Ugpps:corn_3"],
-    "pasza": ["206Sh_PKP_Ugpps:forage_3", "206Sh_PKPC_Ugpps:forage_3"],
-    "pojazdy": ["426Z:tank_01", "426Z:truck_01", "426Z:vehicles_01"],
-    "karbid": ["421S:carbide_01"],
-    "wrażliwe": ["425S:all", "421S:carbide_01"],
-    "stal": ["401Ze:steel_01", "401Ze:steel_02"],
-    "gaz": ["WB117:all"]
+    "wheat": ["206Sh_PKP_Ugpps:wheat_3", "206Sh_PKPC_Ugpps:wheat_3"],
+    "corn": ["206Sh_PKP_Ugpps:corn_3", "206Sh_PKPC_Ugpps:corn_3"],
+    "fodder": ["206Sh_PKP_Ugpps:forage_3", "206Sh_PKPC_Ugpps:forage_3"],
+    "military": ["426Z:tank_01", "426Z:truck_01", "426Z:vehicles_01"],
+    "vehicles_nysa": ["424Z:vehicles_nysa", "426Z:vehicles_02"],
+    "carbide": ["421S:carbide_01"],
+    "sensitive": ["425S:all", "421S:carbide_01"],
+    "steel": ["401Ze:steel_01", "401Ze:steel_02"],
+    "gas": ["WB117:all"]
  }
 }
@@ -1,10 +1,23 @@
-import axios from 'axios';
+export class HttpClient {
+  constructor(private readonly baseURL: string) {}

-const http = axios.create({
-  baseURL:
-    import.meta.env.VITE_API_DEV === '1' && import.meta.env.DEV
-      ? 'http://localhost:3001'
-      : 'https://stacjownik.spythere.eu',
-});
+  async get<T>(url: string, params?: Record<string, any>): Promise<T> {
+    const absoluteURL = new URL(this.baseURL + '/' + url);

-export default http;
+    if (params) {
+      Object.keys(params).forEach((key) => {
+        if (params[key] === undefined) return;
+
+        absoluteURL.searchParams.append(key, params[key]);
+      });
+    }
+
+    const data = await fetch(absoluteURL);
+
+    if (!data.ok) {
+      throw new Error(`Cannot fetch: ${absoluteURL}`);
+    }
+
+    return data.json();
+  }
+}
@@ -6,13 +6,16 @@
    "disclaimer": "This site has only an informational intent. The author does not carry any responsibility for creating trains against {tos}!",
    "tos": "Train Driver 2 simulator rules",
    "tos-href": "https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit#heading=h.1ldcvhomwjp9",
-    "version-check": "Site is complete for version {version} of Train Driver 2 simulator"
+    "version-check": "Site is complete for version {version} of Train Driver 2 simulator",
+    "vehicles-count": "Site contains currently {all} vehicles - including {units} traction units and {cars} car wagons!"
  },
  "inputs": {
    "title": "CHOOSE A VEHICLE",
    "input-vehicle": "Choose a traction unit",
    "input-carwagon": "Choose a carriage",
-    "cargo-title": "Cargo (only selected freight cars)",
+    "vehicles-title": "Traction units",
+    "carwagons-title": "Car wagons",
+    "cargo-title": "Available cargo",
    "no-cargo-available": "no cargo available",
    "cargo-empty": "empty",
    "loco-electric": "ELECTR.",
@@ -41,10 +44,11 @@
    "construction": "Construction type:"
  },
  "topbar": {
-    "stock-list": "STOCK",
-    "wiki-list": "VEHICLES",
-    "number-generator": "NUMBER GEN.",
-    "stock-generator": "STOCK GEN."
+    "stock": "STOCK",
+    "wiki": "VEHICLES",
+    "numgen": "NUMBER GEN.",
+    "stockgen": "STOCK GEN.",
+    "storage": "SAVED STOCKS"
  },
  "stocklist": {
    "title": "STOCK EDITOR",
@@ -52,16 +56,21 @@
    "alert-copied": "The rolling stock has been copied to your clipboard!",
    "alert-empty": "Lista pojazdów jest pusta!",
    "prompt-file": "Name a file and download it to the Presets folder (Documents/TTSK/TrainDriver2):",
+    "prompt-bookmark": "Enter the name of this composition:",
+    "prompt-bookmark-overwrite": "A composition with this name is already bookmarked! Do you want to overwrite it?",
    "vehicle-no": "VEHICLE NO.",
    "no-vehicle-chosen": "NO VEHICLE CHOSEN",
    "action-move-up": "MOVE UP",
    "action-move-down": "MOVE DOWN",
    "action-remove": "REMOVE",
-    "action-upload": "LOAD",
-    "action-download": "DOWNLOAD",
-    "action-copy": "COPY",
+    "action-upload-file": "LOAD FILE",
+    "action-upload-clipboard": "LOAD CLIPBOARD",
+    "action-download": "DOWNLOAD TO FILE",
+    "action-copy": "COPY TO CLIPBOARD",
    "action-reset": "RESET",
    "action-shuffle": "SHUFFLE",
+    "action-switch": "TURN AROUND",
+    "action-bookmark": "BOOKMARK",
    "mass": "Mass",
    "mass-accepted": "accepted",
    "length": "Length",
@@ -69,14 +78,16 @@
    "coldstart-info": "Locomotive cold start",
    "doublemanning-info": "Double manning",
    "list-empty": "Stock list is empty!",
-
    "warning-not-suitable": "EP series locomotives are designed for passenger traffic only!",
    "warning-passenger-too-long": "Maximum length of a passenger train may not be greater than 350m!",
    "warning-freight-too-long": "Maximum length of a freight train may not be greater than 650m!",
    "warning-too-many-locos": "This train has too many traction units!",
    "warning-too-heavy": "This train is too heavy! Check {href}",
    "warning-team-only-vehicle": "There's at least one vehicle available only for TD2 team members in your stock composition! ({0})",
-    "acceptable-mass-docs": "acceptable rolling stock masses (PL)"
+    "warning-prsm4-not-at-the-rear": "PRSM4 welding car must be at the end of a train!",
+    "acceptable-mass-docs": "acceptable rolling stock masses (PL)",
+    "stock-loading-error": "An error occurred: cannot parse data from the file - make sure it's in a proper format!",
+    "stock-clipboard-error": "An error occurred: cannot read data from the clipboard - make sure the site has been granted right permissions for this action!"
  },
  "stockgen": {
    "title": "FREIGHT TRAIN GENERATOR",
@@ -91,7 +102,7 @@
    "chosen-empty-warning": "Choose at least one cargo type to see available cars!",
    "chosen-warning": "Cars containing chosen cargo are shown below. Hover over a type to see a preview of the car. Click it to include/exclude it from a drawing (only highlighted types will be included).",
    "action-generate": "GENERATE",
-    "action-generate-empty": "GENERATE EMPTY",
+    "action-generate-empty": "GENERATE CARS ALONE",
    "action-reset": "RESET CARGO"
  },
  "numgen": {
@@ -108,7 +119,6 @@
    "action-random-region": "DRAW REGIONS",
    "action-random-number": "DRAW LAST DIGITS",
    "action-random-category": "DRAW A CATEGORY",
-
    "rules": {
      "first-digit": "First digit:",
      "second-digit": "Second digit:",
@@ -123,45 +133,40 @@
      "for-region-end": "for the terminating construction region",
      "from-range": "from range of"
    },
-
    "categories": {
      "EI": "EI - domestic express",
      "EC": "EC - international express",
-      "EN": "EN - domestic night express",
-
+      "EN": "EN - international night express",
      "MP": "MP - intervoivodeship bullet",
-      "RP": "RP - voivodeship bullet",
      "MO": "MO - intervoivodeship regio",
-      "RO": "RO - voivodeship regio",
-
      "MM": "MM - international bullet",
-      "MH": "MH - intervoivodeship bullet (night / hotel)",
+      "MH": "MH - intervoivodeship night bullet",
+      "RP": "RP - voivodeship bullet",
      "RM": "RM - international voivodeship regio",
+      "RO": "RO - voivodeship regio",
      "RA": "RA - voivodeship regio (urban)",
-
      "PW": "PW - empty passenger",
      "PX": "PX - empty passenger test drive",
-
      "TC": "TC - international freight (intermodal)",
-      "TG": "TG - international freight (cargo)",
-      "TR": "TR - international freight (no cargo)",
+      "TG": "TG - international freight (organized cargo)",
+      "TR": "TR - international freight (unorganized cargo)",
      "TD": "TD - domestic freight (intermodal)",
-      "TM": "TM - domestic freight (cargo)",
-      "TN": "TN - domestic freight (no cargo)",
-      "TK": "TK - freight (stations & sidings)",
+      "TM": "TM - domestic freight (organized cargo)",
+      "TN": "TN - domestic freight (unorganized cargo)",
+      "TK": "TK - freight (for stations & sidings)",
      "TS": "TS - empty freight test drive",
-
-      "LT": "LT - locomotive only",
-      "LT-new": "LT - freight locomotive only",
-
+      "TH": "TH - locomotive rolling stock (over 3 vehicles)",
+      "LT": "LT - freight locomotive only",
      "LP": "LP - passenger locomotive only",
-      "LS": "LS - shunting locomotive",
-
-      "ZN": "ZN - inspection / diagnostic"
+      "LS": "LS - shunting locomotive only",
+      "LZ": "LS - shunting locomotive only",
+      "ZN": "ZN - inspection / diagnostic type",
+      "ZU": "ZU - other maintenance type"
    }
  },
  "wiki": {
    "title": "LIST OF AVAILABLE VEHICLES",
+    "no-vehicles": "No vehicles to show with the selected filters!",
    "labels": {
      "vehicles": "Vehicles",
      "sort-by": "Sort by",
@@ -171,8 +176,14 @@
    },
    "filters": {
      "vehicles-all": "all",
-      "vehicles-traction": "traction units",
-      "vehicles-wagon": "wagons"
+      "vehicles-tractions-all": "traction units - all",
+      "vehicles-tractions-electric": "electric locomotives",
+      "vehicles-tractions-diesel": "diesel locomotives",
+      "vehicles-tractions-emu": "electric units",
+      "vehicles-tractions-dmu": "diesel units",
+      "vehicles-wagons-all": "wagons - all",
+      "vehicles-wagons-passenger": "wagons - passenger",
+      "vehicles-wagons-freight": "wagons - freight"
    },
    "sort-by": {
      "type": "name",
@@ -200,37 +211,52 @@
    "search-stock": "Search by vehicles",
    "action-reset": "RESET"
  },
+  "storage": {
+    "title": "BOOKMARKED COMPOSITIONS",
+    "subtitle": "Manage your rolling stock compositions saved locally in the browser memory",
+    "remove-confirm": "Are you sure you want to delete this entry?",
+    "no-entires": "No bookmarked compositions - save a new one in the Stock tab",
+    "created-at": "Created at:",
+    "updated-at": "Updated at:",
+    "stock-title": "Rolling stock:"
+  },
  "cargo": {
-    "kontenery": "containers",
-    "chłodnia": "refrigerator",
-    "drobnica": "loose cargo",
-    "węgiel": "coal",
-    "ruda": "ore",
-    "piasek": "sand",
-    "kreda": "chalk",
-    "kamień": "stone",
-    "złom": "scrap",
-    "paliwo": "fuel",
-    "melasa": "molasses",
-    "żwir": "gravel",
-    "koła": "wheels",
-    "drewno": "wood",
-    "szyny": "rails",
-    "kable": "cables",
-    "kruszywo": "aggregate",
-    "techniczne": "technical",
-    "poczta": "mail",
-    "cement": "concrete",
-    "wapno": "lime",
+    "containers": "containers",
+    "food": "food tanks",
+    "food-empty": "food tanks (empty)",
+    "biomass": "biomass",
+    "biomass-empty": "biomass (empty)",
+    "cold-storage": "cold storage",
+    "loose-cargo": "loose cargo",
+    "coal": "coal",
+    "ore": "ore",
+    "sand": "sand",
+    "chalk": "chalk",
+    "stone": "stone",
+    "scrap": "scrap",
+    "fuel": "fuel",
+    "molasses": "molasses",
+    "gravel": "gravel",
+    "wheels": "wheels",
+    "wood": "wood",
+    "rails": "rails",
+    "cables": "cables",
+    "aggregate": "aggregate",
+    "technical": "technical",
+    "mail": "mail",
+    "concrete": "concrete",
+    "lime": "lime",
    "soda": "soda",
-    "pszenica": "wheat",
-    "kukurydza": "corn",
-    "pasza": "fodder",
-    "karbid": "carbide",
-    "pojazdy": "vehicles",
-    "wrażliwe": "sensitive",
-    "stal": "steel",
-    "gaz": "gas"
+    "wheat": "wheat",
+    "corn": "corn",
+    "fodder": "fodder",
+    "carbide": "carbide",
+    "vehicles_nysa": "vehicles (nysa)",
+    "military": "vehicles (military)",
+    "sensitive": "sensitive",
+    "steel": "steel",
+    "gas": "gas",
+    "intermodal": "intermodalne"
  },
  "usage": {
    "Gor89": "passenger carriage",
@@ -282,6 +308,7 @@
    "401Ze_PKESA": "concrete panels, cable reels, steel",
    "401Zl": "heavy loose cargo",
    "408S": "cement, lime, fly ash, slag",
+    "409Va": "loose cargo (sand)",
    "412W": "loose cargo, coal",
    "412Z": "containers",
    "413S": "coal, chalk, sand",
@@ -291,6 +318,7 @@
    "426Z": "solid cargo, vehicles",
    "426S": "loose cargo",
    "429W": "weatherproof cargo (coal, ore)",
+    "411V": "loose cargo (track ballast)",
    "441V": "hard coal, gravel",
    "627Z": "containers",
    "WB117": "gas, gas mixtures",
@@ -303,6 +331,25 @@
    "418Vb_PKPC": "loose cargo (sand, stone)",
    "418Vb_WIEBE": "loose cargo (sand, stone)",
    "418Vb_ZOS": "loose cargo (sand, stone)",
-    "418Vb_ZUE": "loose cargo (sand, stone)"
+    "418Vb_ZUE": "loose cargo (sand, stone)",
+    "PRSM4": "rail welding car",
+    "Luban_XH_short": "short residential car",
+    "Luban_XH_long": "long residential car",
+    "Luban_XH_workshop": "workshop car",
+    "EDK80": "railway crane car"
+  },
+  "cargo-warnings": {
+    "title": "Rolling stock containing extra cargo warnings:",
+    "warning_wt_20_pn": "PN: exceeded gauge (Innofreight - C45)",
+    "warning_un1965_twr": "TWR: LPG (UN 1965)",
+    "warning_un1965_tn": "TN: LPG - empty tank (UN 1965)",
+    "warning_un1202_tn": "TN: diesel fuel (UN 1202)",
+    "warning_military_pn": "PN: military transport",
+    "warning_edk80_pn": "PN: railway crane EDK80"
+  },
+  "migrate-info": {
+    "line-1": "Pojazdownik is being moved to a new domain - {0}! You can still use the current website, but it will no longer be updated and will be shut down in the nearest future!",
+    "link": "https://pojazdownik-td2.spythere.eu/",
+    "accept-btn": "ROGER THAT!"
  }
 }
@@ -6,13 +6,16 @@
    "disclaimer": "Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z {tos}!",
    "tos": "regulaminem symulatora Train Driver 2",
    "tos-href": "https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit",
-    "version-check": "Strona jest kompletna dla wersji {version} symulatora TD2"
+    "version-check": "Strona jest kompletna dla wersji {version} symulatora TD2",
+    "vehicles-count": "Strona zawiera obecnie {all} pojazdów - w tym {units} jednostek trakcyjnych i {cars} wagonów!"
  },
  "inputs": {
    "title": "WYBIERZ POJAZD",
    "input-vehicle": "Wybierz pojazd trakcyjny",
    "input-carwagon": "Wybierz wagon",
-    "cargo-title": "Ładunek (tylko wybrane towarowe)",
+    "vehicles-title": "Pojazdy trakcyjne",
+    "carwagons-title": "Wagony",
+    "cargo-title": "Dostępne ładunki",
    "no-cargo-available": "brak dostępnych ładunków",
    "cargo-empty": "próżny",
    "loco-electric": "ELEKTR.",
@@ -41,10 +44,11 @@
    "construction": "Typ konstrukcji:"
  },
  "topbar": {
-    "stock-list": "SKŁAD",
-    "wiki-list": "POJAZDY",
-    "number-generator": "GNR NUMERU",
-    "stock-generator": "GNR SKŁADU"
+    "stock": "SKŁAD",
+    "wiki": "POJAZDY",
+    "numgen": "GNR NUMERU",
+    "stockgen": "GNR SKŁADU",
+    "storage": "ZAPISANE SKŁADY"
  },
  "stocklist": {
    "title": "EDYTOR SKŁADU",
@@ -52,16 +56,21 @@
    "alert-copied": "Skład został skopiowany do twojego schowka!",
    "alert-empty": "Lista pojazdów jest pusta!",
    "prompt-file": "Nazwij plik, a następnie pobierz do folderu Presets (Dokumenty/TTSK/TrainDriver2):",
+    "prompt-bookmark": "Nazwij skład do zapisania:",
+    "prompt-bookmark-overwrite": "Skład o tej nazwie jest już zapisany. Czy chcesz go podmienić?",
    "vehicle-no": "POJAZD NR",
    "no-vehicle-chosen": "NIE WYBRANO POJAZDU",
    "action-move-up": "PRZENIEŚ WYŻEJ",
    "action-move-down": "PRZENIEŚ NIŻEJ",
    "action-remove": "USUŃ",
-    "action-upload": "WCZYTAJ",
-    "action-download": "POBIERZ",
-    "action-copy": "SKOPIUJ",
+    "action-upload-file": "WCZYTAJ Z PLIKU",
+    "action-upload-clipboard": "WCZYTAJ ZE SCHOWKA",
+    "action-download": "POBIERZ DO PLIKU",
+    "action-copy": "SKOPIUJ DO SCHOWKA",
    "action-reset": "ZRESETUJ",
    "action-shuffle": "PRZETASUJ",
+    "action-switch": "ODWRÓĆ",
+    "action-bookmark": "ZAPISZ",
    "mass": "Masa",
    "mass-accepted": "dopuszczalna",
    "length": "Długość",
@@ -69,14 +78,16 @@
    "coldstart-info": "Zimny start",
    "doublemanning-info": "Podwójna obsada",
    "list-empty": "Lista pojazdów jest pusta!",
-
    "warning-not-suitable": "Lokomotywy serii EP są przeznaczone jedynie do ruchu pasażerskiego!",
    "warning-passenger-too-long": "Maksymalna długość składów pasażerskich nie może przekraczać 350m!",
    "warning-freight-too-long": "Maksymalna długość składów innych niż pasażerskie nie może przekraczać 650m!",
    "warning-too-many-locos": "Ten skład posiada za dużo pojazdów trakcyjnych!",
    "warning-too-heavy": "Ten skład jest za ciężki! Sprawdź {href}",
    "warning-team-only-vehicle": "W zestawieniu znajduje się co najmniej jeden pojazd dostępny tylko dla członków zespołu TD2! ({0})",
-    "acceptable-mass-docs": "dopuszczalne masy składów"
+    "warning-prsm4-not-at-the-rear": "Zgrzewarka PRSM4 może znajdować się jedynie na końcu składu w przypadku jazdy pociągowej!",
+    "acceptable-mass-docs": "dopuszczalne masy składów",
+    "stock-loading-error": "Wystąpił błąd: nie można przetworzyć danych ze schowka! Upewnij się, że są one w poprawnym formacie!",
+    "stock-clipboard-error": "Wystąpił błąd: nie można odczytać danych ze schowka! Upewnij się, że nadałeś uprawnienia stronie do tej akcji!"
  },
  "stockgen": {
    "title": "GENERATOR SKŁADU TOWAROWEGO",
@@ -91,7 +102,7 @@
    "chosen-empty-warning": "Wybierz co najmniej jeden ładunek, aby zobaczyć wagony, które go posiadają!",
    "chosen-warning": "Wagony posiadające wybrane ładunki. Najedź na nazwę, aby zobaczyć podgląd wagonu. Kliknij, aby wyłączyć z losowania (tylko podświetlone nazwy będą uwzględnione).",
    "action-generate": "WYGENERUJ",
-    "action-generate-empty": "WYGENERUJ PRÓŻNE WAGONY",
+    "action-generate-empty": "WYGENERUJ SAME WAGONY",
    "action-reset": "ZRESETUJ ŁADUNKI"
  },
  "numgen": {
@@ -108,7 +119,6 @@
    "action-random-region": "LOSUJ OBSZARY",
    "action-random-number": "LOSUJ KOŃCÓWKĘ",
    "action-random-category": "LOSUJ KATEGORIĘ",
-
    "rules": {
      "first-digit": "Pierwsza cyfra:",
      "second-digit": "Druga cyfra:",
@@ -123,25 +133,20 @@
      "for-region-end": "dla końcowego obszaru konstrukcyjnego",
      "from-range": "z przedziału"
    },
-
    "categories": {
      "EI": "EI - ekspres krajowy",
      "EC": "EC - ekspres międzynarodowy",
-      "EN": "EN - ekspres krajowy nocny",
-
+      "EN": "EN - ekspres międzynarodowy nocny",
      "MP": "MP - międzywoj. pośpieszny",
      "RP": "RP - wojewódzki pośpieszny",
      "MO": "MO - międzywoj. osobowy",
      "RO": "RO - wojewódzki osobowy",
-
      "MM": "MM - międzynar. pośpieszny",
      "MH": "MH - międzywoj. pośpieszny hotelowy",
      "RM": "RM - woj. osobowy międzynarodowy",
-      "RA": "RA - woj. osobowy algomeracyjny",
-
+      "RA": "RA - woj. osobowy aglomeracyjny",
      "PW": "PW - pasażerski próżny - służbowy",
      "PX": "PX - pasażerski próżny próbny",
-
      "TC": "TC - towarowy międzynarodowy intermodalny",
      "TG": "TG - towarowy międzynarodowy masowy",
      "TR": "TR - towarowy międzynarodowy niemasowy",
@@ -150,18 +155,18 @@
      "TN": "TN - towarowy krajowy niemasowy",
      "TK": "TK - towarowy (stacje i bocznice)",
      "TS": "TS - towarowy próżny próbny",
-
-      "LT": "LT - lokomotywa luzem",
-      "LT-new": "LT - lokomotywa towarowa luzem",
-
+      "TH": "TH - skład lokomotyw (powyżej 3 pojazdów)",
+      "LT": "LT - lokomotywa towarowa luzem",
      "LP": "LP - lokomotywa pasażerska luzem",
-      "LS": "LS - lokomotywa manewrowa",
-
-      "ZN": "ZN - inspekcyjny / diagnostyczny"
+      "LS": "LS - lokomotywa manewrowa luzem",
+      "LZ": "LZ - lokomotywa dla poc. utrzymaniowo-naprawczych",
+      "ZN": "ZN - inspekcyjny / diagnostyczny",
+      "ZU": "ZU - inny utrzymaniowy"
    }
  },
  "wiki": {
    "title": "LISTA DOSTĘPNYCH POJAZDÓW",
+    "no-vehicles": "Brak pojazdów do pokazania przy obecnych filtrach!",
    "labels": {
      "vehicles": "Pojazdy",
      "sort-by": "Sortuj wg",
@@ -171,8 +176,14 @@
    },
    "filters": {
      "vehicles-all": "wszystkie",
-      "vehicles-traction": "trakcyjne",
-      "vehicles-wagon": "wagony"
+      "vehicles-tractions-all": "trakcyjne - wszystkie",
+      "vehicles-tractions-electric": "elektrowozy",
+      "vehicles-tractions-diesel": "spalinowozy",
+      "vehicles-tractions-emu": "EZT",
+      "vehicles-tractions-dmu": "SZT",
+      "vehicles-wagons-all": "wagony - wszystkie",
+      "vehicles-wagons-passenger": "wagony pasażerskie",
+      "vehicles-wagons-freight": "wagony towarowe"
    },
    "sort-by": {
      "type": "nazwa",
@@ -200,37 +211,52 @@
    "search-stock": "Szukaj po pojazdach",
    "action-reset": "RESETUJ"
  },
+  "storage": {
+    "title": "ZAPISANE SKŁADY",
+    "subtitle": "Zarządzaj składami zapisanymi lokalnie w pamięci przeglądarki",
+    "remove-confirm": "Czy na pewno chcesz usunąć ten wpis?",
+    "no-entires": "Brak zapisanych składów - dodaj nowy przez zakładkę ze Składem",
+    "created-at": "Stworzony:",
+    "updated-at": "Zaktualizowany:",
+    "stock-title": "Skład:"
+  },
  "cargo": {
-    "kontenery": "kontenery",
-    "chłodnia": "chłodnia",
-    "drobnica": "drobnica",
-    "węgiel": "węgiel",
-    "ruda": "ruda",
-    "piasek": "piasek",
-    "kreda": "kreda",
-    "kamień": "kamień",
-    "złom": "złom",
-    "paliwo": "paliwo",
-    "melasa": "melasa",
-    "żwir": "żwir",
-    "koła": "koła",
-    "drewno": "drewno",
-    "szyny": "szyny",
-    "kable": "kable",
-    "kruszywo": "kruszywo",
-    "techniczne": "techniczne",
-    "poczta": "poczta",
-    "cement": "cement",
-    "wapno": "wapno",
+    "containers": "kontenery",
+    "food": "żywność",
+    "food-empty": "żywność (puste)",
+    "biomass": "biomasa",
+    "biomass-empty": "biomasa (puste)",
+    "cold-storage": "chłodnia",
+    "loose-cargo": "drobnica",
+    "coal": "węgiel",
+    "ore": "ruda",
+    "sand": "piasek",
+    "chalk": "kreda",
+    "stone": "kamień",
+    "scrap": "złom",
+    "fuel": "paliwo",
+    "molasses": "melasa",
+    "gravel": "żwir",
+    "wheels": "koła",
+    "wood": "drewno",
+    "rails": "szyny",
+    "cables": "kable",
+    "aggregate": "kruszywo",
+    "technical": "techniczne",
+    "mail": "poczta",
+    "concrete": "cement",
+    "lime": "wapno",
    "soda": "soda",
-    "pszenica": "pszenica",
-    "kukurydza": "kukurydza",
-    "pasza": "pasza",
-    "karbid": "karbid",
-    "pojazdy": "pojazdy",
-    "wrażliwe": "wrażliwe",
-    "stal": "stal",
-    "gaz": "gaz"
+    "wheat": "pszenica",
+    "corn": "kukurydza",
+    "fodder": "pasza",
+    "carbide": "karbid",
+    "vehicles_nysa": "pojazdy (nysa)",
+    "military": "pojazdy (wojsko)",
+    "sensitive": "wrażliwe",
+    "steel": "stal",
+    "gas": "gaz",
+    "intermodal": "intermodalne"
  },
  "usage": {
    "Gor89": "wagon pasażerski",
@@ -281,6 +307,7 @@
    "401Ze_PKESA": "płyty betonowe, bębny kablowe, stal",
    "401Zl": "ładunki sypkie o dużej masie usypowej",
    "408S": "cement, wapno, popioły lotne, żużel",
+    "409Va": "drobnica, ładunki sypkie (piasek)",
    "412W": "drobnica, kruszywo, węgiel",
    "412Z": "kontenery",
    "413S": "węgiel, kreda, piasek",
@@ -290,6 +317,7 @@
    "426S": "drobnica",
    "426Z": "ładunki skupione, pojazdy",
    "429W": "towary masowe odporne na warunki atmosferyczne (węgiel, ruda)",
+    "411V": "drobnica, ładunki sypkie (podsypka do torów)",
    "441V": "węgiel kamienny, żwir",
    "627Z": "kontenery",
    "WB117": "gaz, mieszaniny gazów",
@@ -302,6 +330,25 @@
    "418Vb_PKPC": "drobnica, ładunki sypkie (piasek, kamień)",
    "418Vb_WIEBE": "drobnica, ładunki sypkie (piasek, kamień)",
    "418Vb_ZOS": "drobnica, ładunki sypkie (piasek, kamień)",
-    "418Vb_ZUE": "drobnica, ładunki sypkie (piasek, kamień)"
+    "418Vb_ZUE": "drobnica, ładunki sypkie (piasek, kamień)",
+    "PRSM4": "zgrzewarka torowa",
+    "Luban_XH_short": "krótki wagon mieszkalny",
+    "Luban_XH_long": "długi wagon mieszkalny",
+    "Luban_XH_workshop": "wagon warsztatowy",
+    "EDK80": "żuraw kolejowy"
+  },
+  "cargo-warnings": {
+    "title": "Skład z dodatkowymi uwagami przewozowymi:",
+    "warning_wt_20_pn": "PN: przekroczona skrajnia (Innofreight - C45)",
+    "warning_un1965_twr": "TWR: gazy węglowodorowe skroplone (UN 1965)",
+    "warning_un1965_tn": "TN: gazy węglowodorowe skroplone - puste cysterny (UN 1965)",
+    "warning_un1202_tn": "TN: olej napędowy (UN 1202)",
+    "warning_military_pn": "PN: transport wojskowy",
+    "warning_edk80_pn": "PN: żuraw kolejowy EDK80"
+  },
+  "migrate-info": {
+    "line-1": "Pojazdownik zostaje przeniesiony na nową domenę - {0}! Możesz korzystać z obecnej strony, jednak nie będzie ona otrzymywać już aktualizacji i w przyszłości zostanie wyłączona!",
+    "link": "https://pojazdownik-td2.spythere.eu/",
+    "accept-btn": "PRZYJĄŁEM!"
  }
 }
@@ -3,6 +3,7 @@ import { createPinia } from 'pinia';

 import App from './App.vue';
 import i18n from './i18n-setup';
+import router from './router';
 const pinia = createPinia();

-createApp(App).use(pinia).use(i18n).mount('#app');
+createApp(App).use(pinia).use(i18n).use(router).mount('#app');
@@ -7,7 +7,7 @@ export default defineComponent({
    },

    getThumbnailURL(vehicleType: string, size: 'small' | 'large') {
-      return `https://static.spythere.eu/images/${vehicleType}--${size == 'small' ? 300 : 800}px.jpg`;
+      return `https://stacjownik.spythere.eu/static/images/${vehicleType}--${size == 'small' ? 300 : 800}px.jpg`;
    },
  },
 });
@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { ICarWagon, ILocomotive, IStock, ICargo, IVehicle } from '../types';
+import { ICarWagon, ILocomotive, IStock, ICargo, IVehicle } from '../types/common.types';
 import { isTractionUnit } from '../utils/vehicleUtils';

 export default defineComponent({
@@ -28,11 +28,7 @@ export default defineComponent({

      const stock = this.getStockObject(vehicle, cargo);

-      if (
-        isTractionUnit(stock.vehicleRef) &&
-        this.store.stockList.length > 0 &&
-        !isTractionUnit(this.store.stockList[0].vehicleRef)
-      )
+      if (isTractionUnit(stock.vehicleRef) && this.store.stockList.length > 0 && !isTractionUnit(this.store.stockList[0].vehicleRef))
        this.store.stockList.unshift(stock);
      else this.store.stockList.push(stock);
    },
@@ -40,8 +36,7 @@ export default defineComponent({
    addLocomotive(loco: ILocomotive) {
      const stockObj = this.getStockObject(loco);

-      if (this.store.stockList.length > 0 && !isTractionUnit(this.store.stockList[0].vehicleRef))
-        this.store.stockList.unshift(stockObj);
+      if (this.store.stockList.length > 0 && !isTractionUnit(this.store.stockList[0].vehicleRef)) this.store.stockList.unshift(stockObj);
      else this.store.stockList.push(stockObj);
    },

@@ -53,6 +48,7 @@ export default defineComponent({

    loadStockFromString(stockString: string) {
      const stockArray = stockString.trim().split(';');
+      let failureCount = 0;

      this.store.stockList.length = 0;
      this.store.chosenVehicle = null;
@@ -82,13 +78,35 @@ export default defineComponent({
          const [carType, cargo] = type.split(':');
          vehicle = this.store.carDataList.find((car) => car.type == carType) || null;

-          if (cargo) vehicleCargo = vehicle?.cargoTypes.find((c) => c.id == cargo) || null;
+          if (cargo) {
+            vehicleCargo = vehicle?.cargoTypes.find((c) => c.id == cargo) || null;
+
+            // UNUSED - ADDITIONAL INTERMODAL CARGO TEST
+            // if (/412Z|627Z/.test(vehicle.constructionType)) {
+            //   const additionalCargo = additionalCargoTypes.find(
+            //     (c) => c.groupType == vehicle!.constructionType && c.cargoStringVariations.includes(cargo.join(':'))
+            //   );
+
+            //   if (additionalCargo) {
+            //     cargo[0] = additionalCargo.id;
+            //   }
+            // }
+          }
        }

-        if (!vehicle) console.warn('Brak pojazdu / rodzaj pojazdu źle wczytany:', type);
+        if (!vehicle && type) {
+          failureCount++;
+          console.warn(`Wystąpił błąd - nie wczytano pojazdu o nazwie: ${type}`);
+          return;
+        }

        this.addVehicle(vehicle, vehicleCargo);
      });
+
+      if (failureCount != 0 && failureCount == stockArray.length) {
+        console.warn('Wystąpił błąd - niepoprawny format');
+        throw 'stock-loading-error';
+      }
    },
  },
 });
@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { useStore } from '../store';
-import { ICarWagon, ILocomotive, IStock, IVehicle, LocoGroupType, WagonGroupType } from '../types';
+import { ICarWagon, ILocomotive, IStock, IVehicle, LocoGroupType, WagonGroupType } from '../types/common.types';
 import { isTractionUnit } from '../utils/vehicleUtils';

 export default defineComponent({
@@ -0,0 +1,61 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import AppContainerView from './views/AppContainerView.vue';
+import WikiListTab from './components/tabs/WikiListTab.vue';
+import StockListTab from './components/tabs/StockListTab.vue';
+import NumberGeneratorTab from './components/tabs/NumberGeneratorTab.vue';
+import StockGeneratorTab from './components/tabs/StockGeneratorTab.vue';
+import StorageTab from './components/tabs/StorageTab.vue';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: AppContainerView,
+    meta: {
+      viewMode: StockListTab,
+    },
+    children: [
+      {
+        path: 'stock',
+        redirect: '/',
+        meta: {
+          viewMode: StockListTab,
+        },
+      },
+      {
+        path: 'wiki',
+        component: AppContainerView,
+        meta: {
+          viewMode: WikiListTab,
+        },
+      },
+      {
+        path: 'numgen',
+        component: AppContainerView,
+        meta: {
+          viewMode: NumberGeneratorTab,
+        },
+      },
+      {
+        path: 'stockgen',
+        component: AppContainerView,
+        meta: {
+          viewMode: StockGeneratorTab,
+        },
+      },
+      {
+        path: 'storage',
+        component: AppContainerView,
+        meta: {
+          viewMode: StorageTab,
+        },
+      },
+    ],
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
@@ -9,26 +9,30 @@ import {
  LocoGroupType,
  WagonGroupType,
  IVehicleData,
-} from './types';
+  StorageStockEntry,
+} from './types/common.types';
 import { defineStore } from 'pinia';
 import {
  acceptableWeight,
  carDataList,
+  getCargoWarnings,
  isTractionUnit,
  isTrainPassenger,
  locoDataList,
  maxStockSpeed,
+  stockSupportsColdStart,
+  stockSupportsDoubleManning,
  totalLength,
  totalWeight,
 } from './utils/vehicleUtils';

-import i18n from './i18n-setup';
-import http from './http';
-
 import realCompositionsJSON from './data/realCompositions.json';
+import { HttpClient } from './http';
+import { API } from './types/api.types';

-export const useStore = defineStore({
-  id: 'store',
+const baseURL = import.meta.env.VITE_API_DEV === '1' && import.meta.env.DEV ? 'http://localhost:3001' : 'https://stacjownik.spythere.eu';
+
+export const useStore = defineStore('store', {
  state: () => ({
    chosenCar: null as ICarWagon | null,
    chosenLoco: null as ILocomotive | null,
@@ -50,8 +54,7 @@ export const useStore = defineStore({

    vehiclePreviewSrc: '',

-    stockSectionMode: 'stock-list',
-
+    isMigrationInfoOpen: false,
    isRandomizerCardOpen: false,
    isRealStockListCardOpen: false,

@@ -59,21 +62,46 @@ export const useStore = defineStore({

    lastFocusedElement: null as HTMLElement | null,

-    compatibleSimulatorVersion: '2024.1.2',
+    storageStockData: {} as Record<string, StorageStockEntry>,
+    chosenStorageStockName: '',
+    chosenStorageStockString: '',
+
+    compatibleSimulatorVersion: '2025.1.1',
+
+    httpClient: new HttpClient(baseURL),
  }),

  getters: {
    locoDataList: (state) => locoDataList(state.vehiclesData),
    carDataList: (state) => carDataList(state.vehiclesData),
-    vehicleDataList: (state) => [
-      ...locoDataList(state.vehiclesData),
-      ...carDataList(state.vehiclesData),
-    ],
+    vehicleDataList: (state) => [...locoDataList(state.vehiclesData), ...carDataList(state.vehiclesData)],
    totalWeight: (state) => totalWeight(state.stockList),
    totalLength: (state) => totalLength(state.stockList),
    maxStockSpeed: (state) => maxStockSpeed(state.stockList),
    isTrainPassenger: (state) => isTrainPassenger(state.stockList),
    acceptableWeight: (state) => acceptableWeight(state.stockList),
+    cargoWarnings: (state) => getCargoWarnings(state.stockList),
+
+    stockSupportsColdStart: (state) => stockSupportsColdStart(state.stockList),
+    stockSupportsDoubleManning: (state) => stockSupportsDoubleManning(state.stockList),
+
+    stockString: (state) => {
+      if (state.stockList.length == 0) return '';
+
+      const coldStartActive = state.isColdStart && stockSupportsColdStart(state.stockList);
+      const doubleManningActive = state.isDoubleManned && stockSupportsDoubleManning(state.stockList);
+
+      return state.stockList
+        .map((stock, i) => {
+          let stockTypeStr = isTractionUnit(stock.vehicleRef) || !stock.cargo ? stock.vehicleRef.type : `${stock.vehicleRef.type}:${stock.cargo.id}`;
+
+          if (i == 0 && (coldStartActive || doubleManningActive))
+            return `${stockTypeStr},${coldStartActive ? 'c' : ''}${doubleManningActive ? 'd' : ''}`;
+
+          return stockTypeStr;
+        })
+        .join(';');
+    },

    realCompositionList: (state) => {
      if (!state.vehiclesData) return [];
@@ -96,39 +124,18 @@ export const useStore = defineStore({
        return acc;
      }, []);
    },
-
-    stockSupportsColdStart: (state) => {
-      if (state.stockList.length == 0) return false;
-
-      if (!isTractionUnit(state.stockList[0].vehicleRef)) return false;
-      else if (state.stockList.length > 1) return false;
-
-      const headingLoco = state.stockList[0];
-
-      return (
-        state.vehiclesData?.find((vehicle) => vehicle.name == headingLoco.vehicleRef.type)?.group
-          .locoProps?.coldStart ?? false
-      );
-    },
-
-    stockSupportsDoubleManning: (state) => {
-      if (state.stockList.length == 0) return false;
-      if (!isTractionUnit(state.stockList[0].vehicleRef)) return false;
-
-      const headingLoco = state.stockList[0];
-
-      return (
-        state.vehiclesData?.find((vehicle) => vehicle.name == headingLoco.vehicleRef.type)?.group
-          .locoProps?.doubleManned ?? false
-      );
-    },
  },

  actions: {
    async fetchVehiclesAPI() {
      try {
-        const vehiclesData = (await http.get<IVehiclesAPIResponse>('/api/getVehicles')).data;
-        this.vehiclesData = vehiclesData;
+        const response = await this.httpClient.get<API.VehiclesData.Response>('api/getVehiclesData');
+        this.vehiclesData = response.vehicles.map((v) => ({
+          ...v,
+          group: response.vehicleGroups.find((g) => g.id == v.vehicleGroupsId)!,
+        }));
+
+        console.log(response);
      } catch (error) {
        console.error(error);
      }
@@ -137,21 +144,5 @@ export const useStore = defineStore({
    async setupAPIData() {
      await this.fetchVehiclesAPI();
    },
-
-    handleRouting() {
-      switch (window.location.pathname) {
-        case '/numgnr':
-          this.stockSectionMode = 'number-generator';
-          break;
-        case '/stockgnr':
-          this.stockSectionMode = 'stock-generator';
-          break;
-        case '/vehicles':
-          this.stockSectionMode = 'wiki-list';
-          break;
-        default:
-          break;
-      }
-    },
  },
 });
@@ -0,0 +1,19 @@
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('/fonts/Lato-Bold.woff2') format('woff2'),
+    url('/fonts/Lato-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:
+    url('/fonts/Lato-Regular.woff2') format('woff2'),
+    url('/fonts/Lato-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
@@ -1,42 +1,15 @@
-$breakpointMd: 960px;
-$breakpointSm: 550px;
+@use 'fonts';
+@use 'responsive';

-$bgColor: #2b3552;
-$textColor: #fff;
-$secondaryColor: #1b1b1b;
-$accentColor: #e4c428;
+:root {
+  --bgColor: #2b3552;
+  --bgColorDarker: #1f263b;
+  --textColor: #fff;
+  --secondaryColor: #1b1b1b;
+  --accentColor: #e4c428;

-$sponsorColor: gold;
-$teamColor: #ff4848;
-
-@font-face {
-  font-family: 'Lato';
-  src:
-    url('/fonts/Lato-Light.woff2') format('woff2'),
-    url('/fonts/Lato-Light.woff') format('woff');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Lato';
-  src:
-    url('/fonts/Lato-Bold.woff2') format('woff2'),
-    url('/fonts/Lato-Bold.woff') format('woff');
-  font-weight: bold;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Lato';
-  src:
-    url('/fonts/Lato-Regular.woff2') format('woff2'),
-    url('/fonts/Lato-Regular.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
+  --sponsorColor: gold;
+  --teamColor: #ff4848;
 }

 ::-webkit-scrollbar {
@@ -65,7 +38,7 @@ html {

  font-family: Lato, sans-serif;

-  background-color: $bgColor;
+  background-color: var(--bgColorDarker);
  overflow-x: hidden;
 }

@@ -80,15 +53,6 @@ a {
  text-decoration: none;

  transition: color 250ms;
-
-  &:visited {
-    color: white;
-  }
-
-  &:hover,
-  &:focus {
-    color: $accentColor;
-  }
 }

 select,
@@ -113,32 +77,68 @@ button {
  color: white;

  &:hover {
-    color: $accentColor;
+    color: var(--accentColor);
  }
-}

-[data-tooltip]:hover::after,
-[data-tooltip]:focus::after {
-  position: absolute;
-  transform: translateX(10px);
-
-  content: attr(data-tooltip);
-  color: white;
-  background: black;
-  padding: 0.5em;
-  max-width: 300px;
-  z-index: 100;
+  &:focus-visible {
+    outline: 1px solid var(--accentColor);
+  }
 }

 [data-tooltip] {
  cursor: pointer;
+
+  &:hover::after,
+  &:focus-visible::after {
+    position: absolute;
+
+    content: attr(data-tooltip);
+    color: white;
+    background: black;
+    border-radius: 0.5em;
+    margin: 0 0.75em;
+    padding: 0.5em;
+
+    max-width: 300px;
+
+    z-index: 100;
+
+    @include responsive.smallScreen {
+      left: 50%;
+      transform: translate(-50%, 3ex);
+      text-align: center;
+    }
+  }
 }

-.btn {
+[data-button-tooltip] {
+  position: relative;
+
+  &:hover::after,
+  &:focus-visible::after {
+    position: absolute;
+
+    width: 100%;
+    max-width: 300px;
+
+    top: 100%;
+    transform: translateY(5px);
+    border-radius: inherit;
+
+    content: attr(data-button-tooltip);
+    color: white;
+    background: #111;
+    padding: 0.5em;
+    z-index: 100;
+  }
+}
+
+.btn,
+.link-btn {
  padding: 0.4em 0.75em;

  outline: none;
-  background-color: $secondaryColor;
+  background-color: var(--secondaryColor);
  border-radius: 8px;
  font-weight: bold;

@@ -147,25 +147,25 @@ button {
    background-color 150ms;

  &:hover {
-    color: $accentColor;
+    color: var(--accentColor);
  }

  &.btn--outline {
    background: none;
    font-weight: bold;
-    outline: 1px solid $accentColor;
+    outline: 1px solid var(--accentColor);
  }

  &:focus-visible {
-    color: $accentColor;
+    color: var(--accentColor);
    outline: 1px solid white;
  }

  &[data-chosen='true'] {
-    background-color: $accentColor;
+    background-color: var(--accentColor);
    color: black;

-    box-shadow: 0 0 5px 1px $accentColor;
+    box-shadow: 0 0 5px 1px var(--accentColor);
  }

  &[data-disabled='true'] {
@@ -184,9 +184,10 @@ button {
    align-items: center;
    gap: 0.5em;

-    img {
-      width: 1.3em;
-      vertical-align: middle;
+    img,
+    svg {
+      width: 20px;
+      height: 20px;
    }
  }

@@ -194,18 +195,31 @@ button {
    font-weight: bold;
    transition: all 250ms;
    background: none;
-    padding: 0;
+    padding: 0.25em;
+    border-radius: 0;

    &:focus-visible {
      outline: 1px solid white;
    }
  }
+
+  &--icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: 0.25em;
+  }
+}
+
+.link-btn.router-link-exact-active {
+  color: var(--accentColor);
 }

 select,
 input[type='text'],
 input[type='number'] {
-  background: $bgColor;
+  background: var(--bgColor);
  border: 2px solid #aaa;
  outline: none;

@@ -216,7 +230,7 @@ input[type='number'] {
  font-size: 1em;

  &:focus-visible {
-    border-color: $accentColor;
+    border-color: var(--accentColor);
  }

  &::placeholder {
@@ -227,7 +241,7 @@ input[type='number'] {
 option {
  color: white;
  border: none;
-  background-color: $bgColor;
+  background-color: var(--bgColor);
 }

 ul {
@@ -238,7 +252,7 @@ ul {

 .text {
  &--accent {
-    color: $accentColor;
+    color: var(--accentColor);
  }

  &--grayed {
@@ -295,18 +309,18 @@ hr {
  }

  span:focus {
-    color: $accentColor;
+    color: var(--accentColor);
    outline: none;
  }

  label > input:checked + span {
-    color: $accentColor;
-    border-color: $accentColor;
+    color: var(--accentColor);
+    border-color: var(--accentColor);
  }
 }

 // Vue Transition anims
-.slide-top {
+.slide-top-anim {
  &-enter-from,
  &-leave-to {
    transform: translateY(-100%);
@@ -318,7 +332,19 @@ hr {
  }
 }

-.card-appear {
+.slide-bottom-anim {
+  &-enter-from,
+  &-leave-to {
+    transform: translateY(100%);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: transform 100ms ease-in-out;
+  }
+}
+
+.card-appear-anim {
  &-enter-from,
  &-leave-to {
    opacity: 0;
@@ -0,0 +1,20 @@
+$breakpointMd: 960px;
+$breakpointSm: 550px;
+
+@mixin smallScreen() {
+  @media only screen and (max-width: $breakpointSm) {
+    @content;
+  }
+}
+
+@mixin midScreen() {
+  @media only screen and (max-width: $breakpointMd) {
+    @content;
+  }
+}
+
+@mixin midScreenLandscape() {
+  @media only screen and (orientation: landscape) and (max-width: $breakpointMd) {
+    @content;
+  }
+}
@@ -1,13 +1,10 @@
-@import './global.scss';
-
 .tab {
  height: 100%;
-  margin-top: 1px;

  &_header {
    padding: 0.5em 1em;

-    background-color: $secondaryColor;
+    background-color: var(--secondaryColor);
    text-align: center;

    h2 {
@@ -28,7 +25,6 @@
  }

  &_content {
-    margin-top: 1em;
    height: 100%;
  }

@@ -0,0 +1,52 @@
+import { IVehicleRestrictions } from './common.types';
+
+// API namespace
+export namespace API {
+  export namespace VehiclesData {
+    export interface VehicleObject {
+      id: number;
+      name: string;
+      type: string;
+      cabinName: string | null;
+      restrictions: IVehicleRestrictions | null;
+
+      vehicleGroupsId: number;
+    }
+
+    export interface VehicleGroupObject {
+      id: number;
+      name: string;
+      speed: number;
+      speedLoaded?: number;
+      speedLoco?: number;
+      length: number;
+      weight: number;
+      cargoTypes: VehicleCargo[] | null;
+
+      locoProps: {
+        coldStart: boolean;
+        doubleManned: boolean;
+      } | null;
+
+      massSpeeds: VehicleGroupMassSpeeds | null;
+    }
+
+    export interface VehicleGroupMassSpeeds {
+      passenger: Record<string, number> | null;
+      cargo: Record<string, number> | null;
+      none: number | null;
+    }
+
+    export interface VehicleCargo {
+      id: string;
+      weight: number;
+    }
+
+    export interface Data {
+      vehicles: VehicleObject[];
+      vehicleGroups: VehicleGroupObject[];
+    }
+
+    export type Response = Data;
+  }
+}
@@ -1,5 +1,4 @@
 export type IVehicle = ILocomotive | ICarWagon;
-export type StockSectionMode = 'STOCK_LIST' | 'STOCK_GENERATOR';

 export type LocoGroupType = 'loco-electric' | 'loco-diesel' | 'unit-electric' | 'unit-diesel';
 export type WagonGroupType = 'wagon-passenger' | 'wagon-freight';
@@ -29,12 +28,14 @@ export interface ILocomotive {
  constructionType: string;
  cabinType: string;
  maxSpeed: number;
+  maxSpeedLoco: number;
  weight: number;
  length: number;
  coldStart: boolean;
  doubleManned: boolean;
  sponsorOnlyTimestamp: number;
  teamOnly: boolean;
+  massSpeeds: VehicleGroupMassSpeeds | null;
 }

 export interface ICarWagon {
@@ -43,11 +44,13 @@ export interface ICarWagon {
  constructionType: string;
  loadable: boolean;
  maxSpeed: number;
+  maxSpeedLoaded: number;
  weight: number;
  length: number;
  cargoTypes: ICargo[];
  sponsorOnlyTimestamp: number;
  teamOnly: boolean;
+  massSpeeds: VehicleGroupMassSpeeds | null;
 }

 export interface IStock {
@@ -83,10 +86,13 @@ export interface IVehicleGroup {
  id: number;
  name: string;
  speed: number;
+  speedLoaded?: number;
+  speedLoco?: number;
  length: number;
  weight: number;
  cargoTypes: IVehicleCargoType[] | null;
  locoProps: IVehicleLocoProps | null;
+  massSpeeds: VehicleGroupMassSpeeds | null;
 }

 export interface IVehicleCargoType {
@@ -98,3 +104,16 @@ export interface IVehicleLocoProps {
  coldStart: boolean;
  doubleManned: boolean;
 }
+
+export interface VehicleGroupMassSpeeds {
+  passenger: Record<string, number> | null;
+  cargo: Record<string, number> | null;
+  none: number | null;
+}
+
+export interface StorageStockEntry {
+  id: string;
+  createdAt: number;
+  updatedAt?: number;
+  stockString: string;
+}
@@ -0,0 +1,38 @@
+import { useStore } from '../store';
+
+export const useStockListUtils = () => {
+  const store = useStore();
+
+  function removeStock(index: number) {
+    if (index == -1) return;
+
+    store.stockList = store.stockList.filter((stock, i) => i != index);
+
+    if (store.stockList.length < index + 1) store.chosenStockListIndex = -1;
+  }
+
+  function moveUpStock(index: number) {
+    if (index < 1) return;
+
+    const tempStock = store.stockList[index];
+
+    store.stockList[index] = store.stockList[index - 1];
+    store.stockList[index - 1] = tempStock;
+
+    store.chosenStockListIndex = index - 1;
+  }
+
+  function moveDownStock(index: number) {
+    if (index == -1) return;
+    if (index > store.stockList.length - 2) return;
+
+    const tempStock = store.stockList[index];
+
+    store.stockList[index] = store.stockList[index + 1];
+    store.stockList[index + 1] = tempStock;
+
+    store.chosenStockListIndex = index + 1;
+  }
+
+  return { removeStock, moveDownStock, moveUpStock };
+};
@@ -1,29 +1,47 @@
-import speedLimits from '../constants/speedLimits.json';
 import massLimits from '../constants/massLimits.json';
+import { IStock } from '../types/common.types';

-export type SpeedLimitLocoType = keyof typeof speedLimits;
 export type MassLimitLocoType = keyof typeof massLimits;

-export function calculateSpeedLimit(
-  locoType: SpeedLimitLocoType,
-  stockTotalWeight: number,
-  stockCount: number,
-  isTrainPassenger: boolean
-) {
-  if (speedLimits[locoType] === undefined) return 0;
+export function calculateSpeedLimit(stockList: IStock[], isPassenger: boolean, stockMass: number) {
+  // Check the whole consist speed limit
+  const stockMaxSpeed = stockList.reduce((acc, vehicle, i) => {
+    let vehicleSpeed = vehicle.vehicleRef.maxSpeed;

-  if (stockCount == 1) return speedLimits[locoType]['none'];
+    if (
+      vehicle.vehicleRef.group == 'wagon-freight' &&
+      vehicle.cargo !== undefined &&
+      vehicle.vehicleRef.maxSpeedLoaded
+    ) {
+      vehicleSpeed = vehicle.vehicleRef.maxSpeedLoaded;
+    }

-  const stockType = isTrainPassenger ? 'passenger' : 'cargo';
-  const speedTable = speedLimits[locoType][stockType];
+    return Math.min(vehicleSpeed, acc);
+  }, Infinity);

-  if (!speedTable) return undefined;
+  // Check the head vehicle speed limit
+  const headVehicle = stockList[0];

-  let speedLimit = 0;
-  for (const mass in speedTable)
-    if (stockTotalWeight > Number(mass)) speedLimit = (speedTable as any)[mass];
+  // Omit speed check for head vehicle if there's no data for it
+  if (!headVehicle || !headVehicle.vehicleRef.massSpeeds) return stockMaxSpeed;

-  return speedLimit;
+  const massSpeeds =
+    headVehicle.vehicleRef.massSpeeds[
+      stockList.length == 1 ? 'none' : isPassenger ? 'passenger' : 'cargo'
+    ];
+
+  // Omit speed check if there's no data on mass speeds
+  if (!massSpeeds) return stockMaxSpeed;
+
+  // Number type for locomotives alone
+  if (typeof massSpeeds === 'number') return massSpeeds;
+
+  // Record type for passenger or cargo, find the closest range
+  const massKey = Object.keys(massSpeeds).findLast((massKey) => stockMass >= Number(massKey));
+
+  const massMaxSpeed = massKey ? massSpeeds[massKey] : Infinity;
+
+  return Math.min(massMaxSpeed, stockMaxSpeed);
 }

 export function calculateMassLimit(locoType: MassLimitLocoType, isTrainPassenger: boolean) {
@@ -1,18 +1,56 @@
-import {
-  ICarWagon,
-  ILocomotive,
-  IStock,
-  IVehicleData,
-  IVehiclesAPIResponse,
-  LocoGroupType,
-  WagonGroupType,
-} from '../types';
-import {
-  MassLimitLocoType,
-  SpeedLimitLocoType,
-  calculateMassLimit,
-  calculateSpeedLimit,
-} from './vehicleLimitsUtils';
+import { ICarWagon, ILocomotive, IStock, IVehicleData, LocoGroupType, WagonGroupType } from '../types/common.types';
+import { MassLimitLocoType, calculateMassLimit, calculateSpeedLimit } from './vehicleLimitsUtils';
+
+// UNUSED - ADDITIONAL CARGO TYPES FOR INTERMODALS
+export const additionalCargoTypes = [
+  {
+    groupType: '627Z',
+    id: '627Z_mix1_sctc_loaded',
+    weight: 96500,
+    cargoStringVariations: [
+      'sc_20:tc_20_loaded:tc_20_loaded:tc_20_loaded',
+      'tc_20_loaded:sc_20:tc_20_loaded:tc_20_loaded',
+      'tc_20_loaded:tc_20_loaded:sc_20:tc_20_loaded',
+      'tc_20_loaded:tc_20_loaded:tc_20_loaded:sc_20',
+    ],
+  },
+  {
+    groupType: '627Z',
+    id: '627Z_mix2_sctc_loaded',
+    weight: 87000,
+    cargoStringVariations: [
+      'sc_20:tc_20_loaded:tc_20_loaded:sc_20',
+      'sc_20:tc_20_loaded:sc_20:tc_20_loaded',
+      'sc_20:sc_20:tc_20_loaded:tc_20_loaded',
+      'tc_20_loaded:tc_20_loaded:sc_20:sc_20',
+      'tc_20_loaded:sc_20:tc_20_loaded:sc_20',
+      'tc_20_loaded:sc_20:sc_20:tc_20_loaded',
+    ],
+  },
+  {
+    groupType: '627Z',
+    id: '627Z_mix3_sctc_loaded',
+    weight: 77500,
+    cargoStringVariations: [
+      'sc_20:sc_20:sc_20:tc_20_loaded',
+      'sc_20:sc_20:tc_20_loaded:sc_20',
+      'sc_20:tc_20_loaded:sc_20:sc_20',
+      'tc_20_loaded:sc_20:sc_20:sc_20',
+    ],
+  },
+  {
+    groupType: '412Z',
+    id: '412Z_mix1_sctc_loaded',
+    weight: 43500,
+    cargoStringVariations: ['sc_20:tc_20_loaded:tc_20_loaded'],
+  },
+  {
+    groupType: '412Z',
+    id: '412Z_mix1_sctc_empty',
+    weight: 37735,
+    cargoStringVariations: ['sc_20:tc_20_empty:sc_20'],
+  },
+];

 export function isTractionUnit(vehicle: ILocomotive | ICarWagon): vehicle is ILocomotive {
  return (vehicle as ILocomotive).cabinType !== undefined;
@@ -35,11 +73,14 @@ export function locoDataList(vehiclesData: IVehicleData[] | undefined) {
      teamOnly: data.restrictions?.teamOnly ?? false,

      maxSpeed: data.group.speed,
+      maxSpeedLoco: data.group.speedLoco ?? data.group.speed,
      length: data.group.length,
      weight: data.group.weight,

      coldStart: data.group.locoProps?.coldStart ?? false,
      doubleManned: data.group.locoProps?.doubleManned ?? false,
+
+      massSpeeds: data.group.massSpeeds,
    });

    return acc;
@@ -52,19 +93,37 @@ export function carDataList(vehiclesData: IVehicleData[] | undefined) {
  return vehiclesData.reduce<ICarWagon[]>((acc, data) => {
    if (data.cabinName !== null) return acc;

+    const cargoTypes = data.group.cargoTypes || [];
+
+    // UNUSED - ADDITIONAL CARGO TYPES FOR INTERMODALS
+    // if (/412Z|627Z/.test(data.group.name)) {
+    //   cargoTypes.push(
+    //     ...additionalCargoTypes
+    //       .filter((c) => c.groupType == data.group.name)
+    //       .map((c) => ({
+    //         id: c.id,
+    //         weight: c.weight,
+    //       }))
+    //   );
+    // }
+
    acc.push({
      group: data.type as WagonGroupType,
      type: data.name,
      constructionType: data.group.name,
      loadable: data.group.cargoTypes !== null && data.group.cargoTypes.length > 0,
-      cargoTypes: data.group?.cargoTypes ?? [],
+      cargoTypes,

      sponsorOnlyTimestamp: data.restrictions?.sponsorOnly ?? 0,
      teamOnly: data.restrictions?.teamOnly ?? false,

      maxSpeed: data.group.speed,
+      maxSpeedLoaded: data.group.speedLoaded ?? data.group.speed,
+
      length: data.group.length,
      weight: data.group.weight,
+
+      massSpeeds: data.group.massSpeeds,
    });

    return acc;
@@ -72,10 +131,7 @@ export function carDataList(vehiclesData: IVehicleData[] | undefined) {
 }

 export function totalWeight(stockList: IStock[]) {
-  return stockList.reduce(
-    (acc, stock) => acc + (stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)),
-    0
-  );
+  return stockList.reduce((acc, stock) => acc + (stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)), 0);
 }

 export function totalLength(stockList: IStock[]) {
@@ -83,27 +139,7 @@ export function totalLength(stockList: IStock[]) {
 }

 export function maxStockSpeed(stockList: IStock[]) {
-  const stockSpeedLimit = stockList.reduce(
-    (acc, stock) => (stock.vehicleRef.maxSpeed < acc || acc == 0 ? stock.vehicleRef.maxSpeed : acc),
-    0
-  );
-  const headingLoco =
-    stockList[0] && isTractionUnit(stockList[0].vehicleRef) ? stockList[0] : undefined;
-
-  if (!headingLoco) return stockSpeedLimit;
-
-  const locoType = headingLoco.vehicleRef.type.split('-')[0];
-
-  if (/^(EN|2EN|SN)/.test(locoType)) return stockSpeedLimit;
-
-  const speedLimitByMass = calculateSpeedLimit(
-    locoType as SpeedLimitLocoType,
-    totalWeight(stockList),
-    stockList.length,
-    isTrainPassenger(stockList)
-  );
-
-  return speedLimitByMass ? Math.min(stockSpeedLimit, speedLimitByMass) : stockSpeedLimit;
+  return calculateSpeedLimit(stockList, isTrainPassenger(stockList), totalWeight(stockList));
 }

 export function acceptableWeight(stockList: IStock[]) {
@@ -111,10 +147,7 @@ export function acceptableWeight(stockList: IStock[]) {

  const activeLocomotiveType = stockList[0].vehicleRef.type.split('-')[0];

-  const locoMassLimit = calculateMassLimit(
-    activeLocomotiveType as MassLimitLocoType,
-    isTrainPassenger(stockList)
-  );
+  const locoMassLimit = calculateMassLimit(activeLocomotiveType as MassLimitLocoType, isTrainPassenger(stockList));

  return locoMassLimit;
 }
@@ -123,7 +156,29 @@ export function isTrainPassenger(stockList: IStock[]) {
  if (stockList.length == 0) return false;
  if (stockList.every((stock) => isTractionUnit(stock.vehicleRef))) return false;

-  return stockList
-    .filter((stock) => !isTractionUnit(stock.vehicleRef))
-    .every((stock) => stock.vehicleRef.group === 'wagon-passenger');
+  return stockList.filter((stock) => !isTractionUnit(stock.vehicleRef)).every((stock) => stock.vehicleRef.group === 'wagon-passenger');
+}
+
+export function stockSupportsColdStart(stockList: IStock[]) {
+  return stockList.length == 1 && isTractionUnit(stockList[0].vehicleRef) && stockList[0].vehicleRef.coldStart;
+}
+
+export function stockSupportsDoubleManning(stockList: IStock[]) {
+  return stockList.length != 0 && isTractionUnit(stockList[0].vehicleRef) && stockList[0].vehicleRef.doubleManned;
+}
+
+export function getCargoWarnings(stockList: IStock[]) {
+  let warnings: Set<string> = new Set();
+
+  stockList.forEach((stockVehicle) => {
+    if (stockVehicle.vehicleRef.group != 'wagon-freight') return;
+
+    if (stockVehicle.cargo && stockVehicle.cargo.id.startsWith('wt_20')) warnings.add('warning_wt_20_pn');
+    else if (stockVehicle.vehicleRef.type.startsWith('WB117')) warnings.add(stockVehicle.cargo ? 'warning_un1965_twr' : 'warning_un1965_tn');
+    else if (stockVehicle.vehicleRef.type.startsWith('445Rb')) warnings.add('warning_un1202_tn');
+    else if (stockVehicle.vehicleRef.type.startsWith('EDK80')) warnings.add('warning_edk80_pn');
+    else if (stockVehicle.cargo && /^(tank|vehicles_01|truck)/.test(stockVehicle.cargo.id)) warnings.add('warning_military_pn');
+  });
+
+  return warnings;
 }
@@ -25,13 +25,22 @@ export default defineComponent({
 </script>

 <style lang="scss" scoped>
-.app-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
+@use '../styles/responsive';

-  min-height: 100vh;
-  padding: 0.5em;
+.app-container {
+  display: grid;
+  justify-content: center;
+  
+  grid-template-rows: minmax(900px, 1fr) auto;
+  gap: 0.5em;
+  
+  height: 100vh;
+}
+
+@include responsive.midScreen {
+  .app-container {
+    height: auto;
+    min-height: 100vh;
+  }
 }
 </style>
@@ -2,38 +2,38 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';

 import { VitePWA } from 'vite-plugin-pwa';
+import path from 'path';

 // https://vitejs.dev/config/
 export default defineConfig({
-  server: {
-    port: 2138,
+  server: { port: 2138 },
+  preview: { port: 4138 },
+  css: {
+    preprocessorOptions: {
+      scss: { silenceDeprecations: ['legacy-js-api'] },
+    },
  },
-  preview: {
-    port: 4138,
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
  },
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',

-      includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2,ttf}'],
-
-      devOptions: {
-        suppressWarnings: true,
-        enabled: true,
-      },
+      devOptions: { suppressWarnings: true, enabled: true },

      workbox: {
        cleanupOutdatedCaches: true,
-        globPatterns: ['**/*.{js,css,html,jpg,png,svg,img,woff,woff2}'],
+        globPatterns: ['**/*.{js,css,html,ico,woff,woff2,ttf}', '**/*.{png,jpg,jpeg,svg,webp,gif}'],

        runtimeCaching: [
          {
            urlPattern: /^https:\/\/.*\.spythere\.eu\/.*/i,
-            handler: 'StaleWhileRevalidate',
-            options: {
-              cacheName: 'spythere-cache',
-            },
+            handler: 'NetworkFirst',
+            options: { cacheName: 'spythere-cache' },
          },
        ],
      },
Author	SHA1	Message	Date
Spythere	646628b6d3	Merge pull request #64 from Spythere/development Stock generator list update	2026-05-03 13:45:05 +02:00
Spythere	c453820663	chore(generator): updated generator list with 411V wagons	2026-05-03 13:43:03 +02:00
Spythere	7b04389716	Merge pull request #63 from Spythere/development Update: new simulator's version vehicles & cargo data	2026-04-19 01:37:16 +02:00
Spythere	3ff19ba722	chore(stock gen): separated military vehicles and new Nysa cars in stock generator	2026-04-19 01:32:09 +02:00
Spythere	8011f3b053	hotfix(vehicles): changed detected cargo IDs for military transport warning	2026-04-19 01:26:20 +02:00
Spythere	6bfcd0f8e0	chore(locales): changed usage naming for EDK80	2026-04-19 01:23:27 +02:00
Spythere	06b3286206	Merge pull request #62 from Spythere/development v1.10.0	2026-04-06 00:53:15 +02:00
Spythere	64236aa59a	chore(locales): minor usage improvements	2026-04-06 00:45:48 +02:00
Spythere	4afff41230	chore(footer): added github release link to footer's app version	2026-04-06 00:45:48 +02:00
Spythere	8b6e38d18c	chore(generator): added new intermodal cargo to generator pool	2026-04-05 13:23:27 +02:00
Spythere	c245747e2b	fix(wiki): moved warning about no vehicles above list	2026-04-04 23:25:28 +02:00
Spythere	a86ba561ea	refactor(api): changed fetching data from the new api endpoint	2026-04-04 21:13:43 +02:00
Spythere	a37c9916b5	chore(generator): removed additional cargo for intermodals; added new vehicle api types	2026-04-04 21:04:51 +02:00
Spythere	97ce0febec	chore(generator): added new stock generator options (intermodal)	2026-04-01 23:37:24 +02:00
Spythere	5220eeb236	chore(stock): added supporting internal cargo for generating 627Z & 412Z mixed containers	2026-04-01 23:04:44 +02:00
Spythere	80a694dd23	refactor: moved file utils to composable mixin	2026-04-01 18:20:03 +02:00
Spythere	72290b6098	refactor: replaced axios with native fetch API	2026-04-01 18:08:04 +02:00
Spythere	03f496ab08	chore(file): selecting chosen storage stock name as file name when it's available	2026-03-29 14:55:23 +02:00
Spythere	be4d99d1c7	chore(vehicles): added new cargo warning for EDK80 wagon	2026-03-29 14:42:37 +02:00
Spythere	f328f5028b	chore(generator): added new stock generator options; improved locales	2026-03-29 14:29:19 +02:00
Spythere	52eacbf827	chore(app): responsiveness adjustments	2026-03-28 17:56:32 +01:00
Spythere	53d53738f4	bump(version): v1.10.0	2026-03-28 14:41:54 +01:00
Spythere	3f6afa5d4c	fix(footer): incorrect padding	2026-03-28 14:41:28 +01:00
Spythere	8392e2fa29	refactor(app): refreshed app's look&feel, improved responsiveness, viewport width and elements' alignment	2026-03-28 14:40:15 +01:00
Spythere	9e0e2b0225	Merge pull request #61 from Spythere/development Usage locales update	2026-03-27 14:23:27 +01:00
Spythere	d762cb0536	chore(locales): added EDK80 usage	2026-03-27 14:19:01 +01:00
Spythere	def6190cc1	chore(locales): added EDK80 usage	2026-03-27 14:18:48 +01:00
Spythere	4f7c3caa73	Merge pull request #60 from Spythere/development Usage locales hotfix	2026-03-17 22:50:32 +01:00
Spythere	01d3d3657f	hotfix(locales): added usage text for 411V car wagons	2026-03-17 22:48:17 +01:00
Spythere	b83b6092da	Merge pull request #59 from Spythere/development Hotfix: too big font size for landscape viewport	2026-03-07 21:29:21 +01:00
Spythere	b3098210ab	fix(responsive): wrong attribute for mid screen landscape responsiveness	2026-03-07 21:28:49 +01:00
Spythere	b64f98c834	fix(app): to big font size for mid screen landscape responsiveness	2026-03-07 21:22:13 +01:00
Spythere	d619918c63	Merge pull request #57 from Spythere/development Migration info bar	2026-03-07 19:06:48 +01:00
Spythere	586f02df0a	chore(footer): updated production host indicator to a new domain	2026-03-07 18:51:21 +01:00
Spythere	7f9caa5100	chore(migration): added hiding migration info bar after clicking accept button	2026-03-07 18:47:46 +01:00
Spythere	95b8247029	Merge pull request #56 from Spythere/development Fix: missing locale keys	2026-03-07 01:00:57 +01:00
Spythere	70c5ec8d2e	fix(locales): missing locale keys	2026-03-07 00:58:54 +01:00
Spythere	977a8adaec	Merge pull request #55 from Spythere/development Migration to new domain	2026-03-07 00:56:02 +01:00
Spythere	cc6215860f	chore(workflows): updated pushing changes to new and old branches	2026-03-07 00:54:45 +01:00
Spythere	37c8b6f084	chore(app): added migration info bar	2026-03-06 23:46:47 +01:00
Spythere	0a65bf6c55	fix: button style	2026-03-06 23:46:16 +01:00
Spythere	22b8509ebe	refactor(styles): separated fonts and responsiveness to scss files; made global reference only once	2026-03-03 02:29:27 +01:00
Spythere	8698a53caf	chore(workflows): changed sending files method to VPS	2025-12-15 13:30:45 +01:00
Spythere	dcfd3f7c4e	Merge pull request #54 from Spythere/development Updated GitHub workflow for deploying files to dedicated VPS	2025-12-04 00:38:58 +01:00
Spythere	c98458b75e	chore: added workflow for deploying to dedicated VPS	2025-12-04 00:38:08 +01:00
Spythere	0e2e267b71	Merge pull request #53 from Spythere/development Added Lubań wagons usage	2025-11-18 13:44:35 +01:00
Spythere	0a3274b5b1	chore: added Lubań wagons usage	2025-11-18 13:42:07 +01:00
Spythere	4c6c3edcf5	Merge pull request #52 from Spythere/development Added 409Va for sand cargo in stock generator	2025-11-13 22:33:37 +01:00
Spythere	72665f8b50	chore: added 409Va sand cargo to generator	2025-11-13 22:28:13 +01:00
Spythere	9bb0bcb735	Merge pull request #51 from Spythere/development v1.9.3	2025-11-05 14:51:56 +01:00
Spythere	56dc42b58e	fix: logic for checking if PRSM4 is at the end	2025-11-05 01:33:29 +01:00
Spythere	3a17f7485f	chore: warning icon style for stock warnings	2025-11-05 01:28:36 +01:00
Spythere	39b58d6e7c	chore: added immediate SW reload	2025-11-05 01:05:20 +01:00
Spythere	bd70e0f071	chore: added detecting whether PRSM4 is at the end of a rolling stock	2025-11-04 01:03:23 +01:00
Spythere	32594e2f67	bump: v1.9.3	2025-11-04 00:46:49 +01:00
Spythere	05dbf33b4f	chore: added preloading images & fonts	2025-11-03 23:09:47 +01:00
Spythere	4022d2ea2f	chore: packages upgrade	2025-11-03 22:59:02 +01:00
Spythere	85fec2f348	Merge branch 'development' into packages-upgrade	2025-11-03 22:57:52 +01:00
Spythere	85f91a59cd	Merge pull request #50 from Spythere/development Updated usage description for a new wagon in the simulator	2025-10-31 20:18:08 +01:00
Spythere	857c176a38	chore: updated usage desc for new wagon	2025-10-31 20:16:17 +01:00
Spythere	7d0070820c	Merge pull request #49 from Spythere/development fix: cargo warnings	2025-06-27 15:46:03 +02:00
Spythere	bd1de41764	fix: cargo warnings	2025-06-27 15:40:50 +02:00
Spythere	0799bfd838	Merge pull request #48 from Spythere/development fix: missing translations	2025-06-04 01:10:36 +02:00
Spythere	730275ea7c	fix: missing translations	2025-06-04 01:10:10 +02:00
Spythere	a0c578b31b	Merge pull request #47 from Spythere/development hotfix: generator 627Z typo	2025-06-04 01:07:06 +02:00
Spythere	d21aec63d0	hotfix: generator 627Z typo	2025-06-04 01:06:46 +02:00
Spythere	80c5194735	Merge pull request #46 from Spythere/development hotfix: EN category desc typo	2025-06-02 00:43:27 +02:00
Spythere	93bbedf189	hotfix: EN category desc typo	2025-06-02 00:42:55 +02:00
Spythere	b35293575a	Merge pull request #45 from Spythere/development v1.9.2	2025-06-01 17:33:02 +02:00
Spythere	633f7f4c26	bump: v1.9.2	2025-06-01 17:25:41 +02:00
Spythere	b68e9da715	chore: new cargo warning	2025-06-01 17:25:14 +02:00
Spythere	05ae446af7	chore: added additional cargo warnings	2025-05-31 23:32:41 +02:00
Spythere	09e5c53558	chore: updated acceptable mass limits	2025-05-31 15:38:15 +02:00
Spythere	fe70b19f2a	chore: added new container cargo to generator	2025-05-31 14:42:00 +02:00
Spythere	32fbf51943	refactor: calculating stock speed limit	2025-05-31 14:22:14 +02:00
Spythere	39f2688611	chore: prettier settings	2025-05-31 14:21:28 +02:00
Spythere	1090249e08	Merge pull request #44 from Spythere/development v1.9.1 minor improvements	2025-04-15 21:19:11 +02:00
Spythere	c38debb458	chore: replaced footer version check with vehicle counters	2025-04-15 21:18:18 +02:00
Spythere	ee552d65ec	chore: changed pwa cache settings	2025-04-15 21:17:45 +02:00
Spythere	4859a265e7	Merge pull request #43 from Spythere/development v1.9.1	2025-04-04 23:52:28 +02:00
Spythere	82d051a7a4	bump: compatible simulator version	2025-04-04 21:58:06 +02:00
Spythere	c9ad50b01e	feat: turning around rolling stock	2025-04-04 20:53:09 +02:00
Spythere	50f573e8c6	fix: data tooltip sizing	2025-04-04 20:11:18 +02:00
Spythere	f1720c88e8	bump: v1.9.1	2025-04-04 19:43:39 +02:00
Spythere	efefebe202	refactor: changed icons library	2025-04-04 19:43:17 +02:00
Spythere	218f616df4	chore: updated gitignore	2025-04-04 18:52:47 +02:00
Spythere	8d737f6429	chore: adjusted flex gap	2025-04-04 18:52:04 +02:00
Spythere	b7abeb4c34	Version 1.9.0 v1.9.0	2025-03-11 20:57:28 +01:00
Spythere	5440b0831d	chore: shortening bookmarked stock string preview	2025-03-11 20:17:33 +01:00
Spythere	fc344684cc	bump: v1.9.0	2025-03-09 23:39:26 +01:00
Spythere	8c61e260d4	chore: added OpenGraph metadata	2025-03-09 17:27:47 +01:00
Spythere	f4f6512969	chore: minor stock naming improvements	2025-03-09 16:48:22 +01:00
Spythere	b9b1e438b9	chore: updated missing locales	2025-03-09 16:40:33 +01:00
Spythere	1eb5f3de9e	chore: minor stock generator improvements; code cleanup	2025-03-09 16:36:31 +01:00
Spythere	862aebb158	restruct: stock list components	2025-03-09 15:40:32 +01:00
Spythere	82a016dca7	chore: updated locales, expanded storage entry format	2025-03-08 21:07:59 +01:00
Spythere	744804d445	fix: responsiveness	2025-03-08 20:37:00 +01:00
Spythere	13a9baa175	chore: inputs section button layout	2025-03-08 20:24:28 +01:00
Spythere	01bb9f9c2e	hotfix: build data	2025-03-08 02:23:39 +01:00
Spythere	80b0226a16	chore: removed loco count checking	2025-03-08 02:15:27 +01:00
Spythere	7596b7ec2c	chore: improved stock actions layout; added stock bookmarking	2025-03-08 02:14:43 +01:00
Spythere	90e257127c	chore: moved stock computations to store	2025-03-07 15:11:34 +01:00
Spythere	72f28abf10	chore: updated icons, storage tab layout	2025-03-07 14:34:10 +01:00
Spythere	ff6622bc29	feat: loading data from clipboard; error detection	2025-03-07 14:04:58 +01:00
Spythere	c9459eb8f4	restruct: updated scss @import rules to @use; package upgrade	2025-03-04 16:16:28 +01:00
Spythere	f51886e45a	Merge pull request #41 from Spythere/development chore: updated vehicle data for 2024.3.1 simulator version	2024-12-23 16:24:16 +01:00
Spythere	91803d3fef	chore: added functionality for not found vehicle images	2024-12-23 16:20:38 +01:00
Spythere	61972c35e6	chore: updated new vehicles speed limits and compatible version	2024-12-23 15:58:07 +01:00
Spythere	466ec2084b	Merge pull request #40 from Spythere/development v1.8.13	2024-12-04 14:37:44 +01:00
Spythere	75b04ad247	chore: fixed navigation & route links issues	2024-12-04 14:30:56 +01:00
Spythere	a3a0fb358c	bump: v1.8.13	2024-12-02 18:37:05 +01:00
Spythere	b602819179	chore: added more advanced routing to elements	2024-12-02 17:54:46 +01:00
Spythere	346d20fc08	restruct: types organization	2024-12-02 17:03:33 +01:00
Spythere	56ae593d5e	chore: added new wiki list filters	2024-11-29 01:30:12 +01:00
Spythere	4f6b79c686	Merge pull request #39 from Spythere/development chore: updated compatible simulator version	2024-10-24 21:38:31 +02:00
Spythere	4f89b932fb	chore: updated compatible simulator version	2024-10-24 21:38:03 +02:00
Spythere	2106675a0a	Merge pull request #38 from Spythere/development v1.8.12	2024-10-22 21:31:37 +02:00
Spythere	1b68e0174d	bump: v1.8.12	2024-10-22 20:54:35 +02:00
Spythere	b47f692ac1	fix: typos; updated images api source	2024-10-22 20:54:24 +02:00
Spythere	b6d776d94e	Merge pull request #37 from Spythere/development v1.8.11	2024-08-21 19:54:09 +02:00
Spythere	3a97f6a7ac	bump: v1.8.11	2024-08-21 19:48:26 +02:00
Spythere	c03e524f37	fix: wiki vehicles filtering	2024-08-21 19:48:07 +02:00
Spythere	89e947d462	Merge pull request #36 from Spythere/development v1.8.10	2024-08-10 14:24:57 +02:00
Spythere	f286933a81	fix: order of categories listing	2024-08-09 14:57:10 +02:00
Spythere	9bc5f083eb	hotfix	2024-08-09 14:48:17 +02:00
Spythere	a48cc17c08	hotfix: removed package lock	2024-08-09 14:46:07 +02:00
Spythere	9098ffbfbc	bump: v1.8.10	2024-08-09 14:41:12 +02:00
Spythere	603b55b44f	chore: categories update for number generator	2024-08-09 14:40:49 +02:00
Spythere	ad94c93932	chore: gh workflows update	2024-08-09 14:39:21 +02:00