chore(app): added migration info bar

src/App.vue

@@ -2,66 +2,69 @@
   <AppModals />
   <ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
 
+  <transition name="slide-bottom-anim">
+    <MigrationInfo v-if="store.isMigrationInfoOpen" />
+  </transition>
+
   <router-view></router-view>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
 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';
+
+const store = useStore();
 
 registerSW({
   immediate: true,
-  onNeedRefresh() {
-    console.log('Needs refresh!');
-  },
 });
 
-export default defineComponent({
+onMounted(() => {
-  components: { ImageFullscreenPreview, AppContainerView, AppModals },
+  loadStockDataFromStorage();
-  data() {
+  showMigrationInfo();
-    return { store: useStore() };
+  store.setupAPIData();
-  },
-
-  created() {
-    this.loadStockDataFromStorage();
-    this.store.setupAPIData();
-  },
-
-  computed: {
-    currentStockString() {
-      return this.store.stockString;
-    },
-  },
-
-  watch: {
-    currentStockString(val: string) {
-      if (val != this.store.chosenStorageStockString) {
-        this.store.chosenStorageStockName = '';
-      }
-    },
-  },
-
-  methods: {
-    loadStockDataFromStorage() {
-      const savedData = localStorage.getItem('savedStockData');
-
-      if (!savedData) {
-        localStorage.setItem('savedStockData', JSON.stringify({}));
-        return;
-      }
-
-      try {
-        this.store.storageStockData = JSON.parse(savedData);
-      } catch (error) {
-        console.error('Wystąpił błąd podczas przetwarzania danych o składach z localStorage!', error);
-      }
-    },
-  },
 });
+
+const currentStockString = computed(() => store.stockString);
+
+watchEffect(() => {
+  if (currentStockString.value != store.chosenStorageStockString) {
+    store.chosenStorageStockName = '';
+  }
+});
+
+function showMigrationInfo() {
+  // Show only on old domain
+  if (location.hostname !== 'pojazdownik-td2.web.app' && location.hostname !== 'localhost') 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">

src/components/app/AppModals.vue

@@ -3,15 +3,12 @@
     <keep-alive>
       <RealStockCard v-if="store.isRealStockListCardOpen" />
     </keep-alive>
-
-    <MigrationInfoCard v-if="store.isMigrationCardOpen" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useStore } from '../../store';
 import RealStockCard from '../cards/RealStockCard.vue';
-import MigrationInfoCard from '../cards/MigrationInfoCard.vue';
 
 const store = useStore();
 </script>

src/components/app/MigrationInfo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="migrate-info">
+    <i18n-t keypath="migrate-info.line-1" for="migrate-info">
+      <a href="https://pojazdownik-td2.spythere.eu/" target="_blank">{{ $t('migrate-info.link') }}</a>
+    </i18n-t>
+  </div>
+</template>
+
+<script setup lang="ts"></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;
+}
+
+a {
+  color: black;
+  text-decoration: underline;
+
+  &:hover {
+    color: black;
+  }
+}
+</style>

src/components/cards/MigrationInfoCard.vue

@@ -1,111 +0,0 @@
-<template>
-  <div class="migration-card g-card" @toggle-card="toggleCard">
-    <div class="g-card_bg" @click="store.isMigrationCardOpen = false"></div>
-
-    <div class="card-content">
-      <div class="content-top">
-        <!-- <img src="/images/icon-loading.svg" alt="loading" height="125" /> -->
-        <h1>{{ t('migrate-info.header-text') }}</h1>
-      </div>
-
-      <div>
-        <p v-html="t('migrate-info.paragraph-1-html')"></p>
-
-        <p>
-          <a class="new-link" href="https://stacjownik-td2.spythere.eu/" target="_blank">
-            {{ t('migrate-info.paragraph-2-link-text') }}
-          </a>
-        </p>
-
-        <p>
-          {{ t('migrate-info.paragraph-3-text') }}
-        </p>
-
-        <p class="info-bottom" v-html="t('migrate-info.paragraph-4-html')"></p>
-      </div>
-
-      <div class="content-actions">
-        <button class="btn" @click="toggleCard">PRZYJĄŁEM!</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useI18n } from 'vue-i18n';
-import { useStore } from '../../store';
-
-const { t } = useI18n();
-const store = useStore();
-
-function toggleCard() {
-  store.isMigrationCardOpen = !store.isMigrationCardOpen;
-}
-</script>
-
-<style lang="scss" scoped>
-@use '@/styles/responsive';
-
-.migration-card {
-  align-items: center;
-  top: 0;
-  padding: 0.5em;
-}
-
-.card-content {
-  background-color: #1c1c1c;
-  z-index: 100;
-  border-radius: 1em;
-
-  max-width: 800px;
-  min-height: 500px;
-  padding: 1em 0.5em;
-
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  gap: 0.5em;
-
-  text-align: center;
-  font-size: 1.1em;
-}
-
-p {
-  padding: 0.5em 0;
-}
-
-a.new-link {
-  font-size: 1.2em;
-  color: var(--clr-primary);
-  color: transparent;
-
-  background: var(--clr-primary);
-  background: linear-gradient(90deg, var(--clr-primary), #ffffff);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-
-  text-shadow: var(--clr-primary) 0 0 10px;
-}
-
-.info-bottom {
-  font-size: 0.9em;
-  color: #ccc;
-}
-
-.content-actions {
-  display: flex;
-  justify-content: center;
-  font-size: 1.2em;
-}
-
-.content-actions > button {
-  background-color: #111;
-  padding: 0.5em;
-}
-
-@include responsive.smallScreen {
-  .migration-card {
-    // top: 0;
-  }
-}
-</style>

src/locales/en.json

@@ -342,11 +342,10 @@
   },
   "migrate-info": {
     "tooltip-content": "Information about migration of\nStacjownik site!",
-    "header-text": "Attention!",
+    "header-text": "Information about the site migration",
-    "paragraph-1-html": "Due to the growing interest in Stacjownik and other applications I have made, <b>as of January 1, 2026, Stacjownik will be <u>permanently moved</u> to a new dedicated domain:</b>",
+    "paragraph-1-html": "Due to the migration of all my applications to a common dedicated domain, <b>Pojazdownik is being moved to:</b>",
-    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
+    "paragraph-2-link-text": "https://pojazdownik-td2.spythere.eu/",
-    "paragraph-3-text": "This website will no longer receive future updates and after the New Year it will only redirect to the address above.",
+    "paragraph-3-text": "This website will no longer receive future updates and <b>after March 14th</b> it will only redirect to the address above.",
-    "paragraph-4-italic-text": "\"Why are you messing this up? It's been fine for so long!\"",
+    "confirm-btn": "ROGER THAT!"
-    "paragraph-4-html": "<i>\"Why are you messing this up? It's been fine for so long!\"</i> <br /> The change is mainly caused by the growing website interest and exceeding the free limit plan of the current Google hosting, which forces additional fees for each use of the service above a certain threshold (or otherwise blocks access to it). By moving the site to a dedicated domain (which has already been purchased and is maintained with the financial help of <span class=\"text--donator\">Supporters</span>), I will get rid of unnecessary expenses for a large corporation that can shut down my application at any given time."
   }
 }

src/locales/pl.json

@@ -340,11 +340,7 @@
     "warning_military_pn": "PN: transport wojskowy"
   },
   "migrate-info": {
-    "tooltip-content": "Informacja o migracji\nstrony Stacjownika!",
+    "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!",
-    "header-text": "Uwaga!",
+    "link": "https://pojazdownik-td2.spythere.eu/"
-    "paragraph-1-html": "Ze względu na coraz większe zainteresowanie Stacjownikiem oraz innymi aplikacjami mojego autorstwa <b>z dniem 1 stycznia 2026r. Stacjownik zostaje <u>permamentnie przeniesiony</u> na nową dedykowaną domenę:</b>",
-    "paragraph-2-link-text": "https://stacjownik-td2.spythere.eu",
-    "paragraph-3-text": "Obecna strona nie będzie otrzymywać już przyszłych aktualizacji, a po Nowym Roku będzie jedynie przenosić na powyższy adres.",
-    "paragraph-4-html": "<i>\"Po co psujesz? Przecież było dobrze tyle czasu!\"</i> <br /> Zmiana podyktowana jest głównie wzrostem zainteresowania stroną i przekraczaniem darmowego limitu obecnego hostingu Google'a, który wymusza płatność za każde użycie serwisu ponad określoną wartość (lub w przeciwnym wypadku blokuje do niego dostęp). Przenosząc stronę na dedykowaną domenę (która jest już wykupiona i utrzymywana dzięki pomocy <span class=\"text--donator\">Wspierających</span>), pozbędę się niepotrzebnego wydatku dla wielkiej korporacji, która w każdej chwili może mi wyłączyć aplikację."
   }
 }

src/store.ts

@@ -52,7 +52,7 @@ export const useStore = defineStore('store', {
 
     vehiclePreviewSrc: '',
 
-    isMigrationCardOpen: false,
+    isMigrationInfoOpen: false,
     isRandomizerCardOpen: false,
     isRealStockListCardOpen: false,
 

src/styles/_global.scss

@@ -53,15 +53,6 @@ a {
   text-decoration: none;
 
   transition: color 250ms;
-
-  &:visited {
-    color: white;
-  }
-
-  &:hover,
-  &:focus {
-    color: var(--accentColor);
-  }
 }
 
 select,
@@ -329,7 +320,7 @@ hr {
 }
 
 // Vue Transition anims
-.slide-top {
+.slide-top-anim {
   &-enter-from,
   &-leave-to {
     transform: translateY(-100%);
@@ -341,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;