From 1f8365340b11bff629f5b10e470f33fbb8a7e072 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 15 Jan 2026 19:55:02 +0100
Subject: [PATCH] refactor: organized files, refreshed design and layout

---
 package.json                                  |   2 +-
 src/App.vue                                   |  68 ++----
 src/components/App/Navbar.vue                 |  74 +++++++
 src/components/{ => Global}/OrderHelper.vue   |   7 +-
 src/components/{ => Global}/UpdateCard.vue    |   2 +-
 src/components/Global/UpdatePrompt.vue        |  34 +++
 src/components/{ => Orders}/Order.vue         |  51 +++--
 src/components/{ => Orders}/OrderFooter.vue   |   4 +-
 src/components/{ => Orders}/OrderN.vue        |   4 +-
 src/components/{ => Orders}/OrderO.vue        |   7 +-
 src/components/{ => Orders}/OrderS.vue        |   8 +-
 .../{SideBar.vue => Orders/OrderSideBar.vue}  |  11 +-
 .../OrderListPanel.vue}                       |   8 +-
 .../OrderMessagePanel.vue}                    | 105 ++++++----
 .../OrderTrainPickerPanel.vue}                |  18 +-
 src/data/orderHelperData.json                 |   3 -
 src/locales/en.json                           | 143 ++++++-------
 src/locales/pl.json                           | 143 ++++++-------
 src/mixins/orderStorageMixin.ts               |   2 +-
 src/store/store.ts                            |  18 +-
 src/types/orderTypes.ts                       |   1 +
 src/views/Home.vue                            | 198 ++++++++----------
 yarn.lock                                     |   8 +-
 23 files changed, 510 insertions(+), 409 deletions(-)
 create mode 100644 src/components/App/Navbar.vue
 rename src/components/{ => Global}/OrderHelper.vue (89%)
 rename src/components/{ => Global}/UpdateCard.vue (98%)
 create mode 100644 src/components/Global/UpdatePrompt.vue
 rename src/components/{ => Orders}/Order.vue (77%)
 rename src/components/{ => Orders}/OrderFooter.vue (94%)
 rename src/components/{ => Orders}/OrderN.vue (99%)
 rename src/components/{ => Orders}/OrderO.vue (97%)
 rename src/components/{ => Orders}/OrderS.vue (98%)
 rename src/components/{SideBar.vue => Orders/OrderSideBar.vue} (93%)
 rename src/components/{OrderList.vue => Panels/OrderListPanel.vue} (95%)
 rename src/components/{OrderMessage.vue => Panels/OrderMessagePanel.vue} (76%)
 rename src/components/{OrderTrainPicker.vue => Panels/OrderTrainPickerPanel.vue} (95%)
 delete mode 100644 src/data/orderHelperData.json

diff --git a/package.json b/package.json
index cd6fbe6..20d55bd 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "axios": "^1.6.2",
-    "lucide-vue-next": "^0.525.0",
+    "lucide-vue-next": "^0.562.0",
     "pinia": "^2.1.7",
     "showdown": "^2.1.0",
     "vue": "^3.3.11",
diff --git a/src/App.vue b/src/App.vue
index 8a83456..38651c9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,41 @@
 <template>
   <div id="app_wrapper">
-    <UpdateCard />
-
-    <router-view />
-
     <transition name="slide-anim">
-      <div v-if="needRefresh" class="update-prompt" @click="updateServiceWorker(true)">
-        {{ $t('update.update-available-text') }}
-        <u>{{ $t('update.update-available-underline') }}</u>
-      </div>
+      <UpdateCard />
     </transition>
 
-    <footer>
-      &copy; <a href="https://td2.info.pl/profile/?u=20777">Spythere</a>
-      {{ new Date().getUTCFullYear() }} |
-      <button class="g-button text" @click="store.updateCardOpen = true">v{{ appVersion }}</button>
-    </footer>
+    <transition name="slide-anim">
+      <UpdatePrompt />
+    </transition>
+
+    <div class="app-body">
+      <Navbar />
+
+      <main>
+        <RouterView />
+      </main>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { useRegisterSW } from 'virtual:pwa-register/vue';
 import { defineComponent } from 'vue';
-import packageInfo from '../package.json';
-import { useStore } from './store/store';
+import UpdateCard from './components/Global/UpdateCard.vue';
 import orderStorageMixin from './mixins/orderStorageMixin';
-import StorageManager from './managers/storageManager';
+import { useStore } from './store/store';
+import packageInfo from '../package.json';
 import axios from 'axios';
-import UpdateCard from './components/UpdateCard.vue';
+import StorageManager from './managers/storageManager';
+import Navbar from './components/App/Navbar.vue';
+import UpdatePrompt from './components/Global/UpdatePrompt.vue';
 
 const STORAGE_VERSION_KEY = 'app_version';
 
 export default defineComponent({
-  components: { UpdateCard },
+  components: { UpdateCard, UpdatePrompt, Navbar },
 
   mixins: [orderStorageMixin],
 
-  setup() {
-    const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({ immediate: true });
-
-    return { offlineReady, needRefresh, updateServiceWorker };
-  },
-
   data() {
     return { appVersion: packageInfo.version, store: useStore() };
   },
@@ -69,7 +63,7 @@ export default defineComponent({
       const id = query.get('sceneryId');
 
       if (id != null) {
-        this.store.orderMode = 'OrderTrainPicker';
+        this.store.panelMode = 'OrderTrainPickerPanel';
       }
     },
 
@@ -130,31 +124,9 @@ export default defineComponent({
 
 #app {
   color: white;
-
   min-height: 100vh;
 }
 
-.update-prompt {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  padding: 0.5em;
-
-  font-weight: bold;
-
-  text-align: center;
-
-  width: 100%;
-  background-color: colors.$accentCol;
-
-  cursor: pointer;
-}
-
-footer {
-  text-align: center;
-  padding: 0.5em 0;
-}
-
 @media screen and (max-width: 500px) {
   #app {
     font-size: calc(1vw + 0.65rem);
diff --git a/src/components/App/Navbar.vue b/src/components/App/Navbar.vue
new file mode 100644
index 0000000..b6d8219
--- /dev/null
+++ b/src/components/App/Navbar.vue
@@ -0,0 +1,74 @@
+<template>
+  <nav class="app-navbar">
+    <div class="navbar-brand">
+      <img src="/favicon.ico" alt="generator logo" width="30" />
+      <b>
+        Genera<span class="text--accent">TOR</span> <sup class="text--grayed">v{{ version }}</sup>
+      </b>
+    </div>
+
+    <div class="navbar-actions">
+      <button class="g-button action icon" @click="switchDarkMode">
+        <LucideMoon :size="20" v-if="store.orderDarkMode" />
+        <LucideSun :size="20" v-else />
+      </button>
+
+      <button class="g-button action icon" @click="switchLang">
+        <LucideGlobe :size="20" />
+        <span>{{ store.currentAppLocale == 'pl' ? 'POL' : 'ENG' }}</span>
+      </button>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { LucideGlobe, LucideMoon, LucideSun } from 'lucide-vue-next';
+import { version } from '../../../package.json';
+import { useStore } from '../../store/store';
+
+const store = useStore();
+
+function switchDarkMode() {
+  store.orderDarkMode = !store.orderDarkMode;
+  window.localStorage.setItem('dark-mode', `${store.orderDarkMode}`);
+}
+
+function switchLang() {
+  store.changeLang(store.currentAppLocale == 'pl' ? 'en' : 'pl');
+}
+</script>
+
+<style lang="scss" scoped>
+.app-navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  height: 40px;
+  padding: 0.25em;
+  background-color: #1c1c1c;
+}
+
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+
+  sup {
+    font-size: 0.75em;
+  }
+}
+
+.navbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+
+  button {
+    padding: 0.5em;
+    gap: 0.25em;
+    border-radius: 0.5em;
+  }
+}
+</style>
diff --git a/src/components/OrderHelper.vue b/src/components/Global/OrderHelper.vue
similarity index 89%
rename from src/components/OrderHelper.vue
rename to src/components/Global/OrderHelper.vue
index 900d81c..1fbbbd3 100644
--- a/src/components/OrderHelper.vue
+++ b/src/components/Global/OrderHelper.vue
@@ -29,18 +29,17 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store/store';
-import orderHelperData from '../data/orderHelperData.json';
+import { useStore } from '../../store/store';
 
 export default defineComponent({
   setup() {
-    return { store: useStore(), orderHelperData };
+    return { store: useStore() };
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@use '../styles/colors';
+@use '../../styles/colors';
 
 .content {
   width: 100%;
diff --git a/src/components/UpdateCard.vue b/src/components/Global/UpdateCard.vue
similarity index 98%
rename from src/components/UpdateCard.vue
rename to src/components/Global/UpdateCard.vue
index 9d2abd1..25a9ccf 100644
--- a/src/components/UpdateCard.vue
+++ b/src/components/Global/UpdateCard.vue
@@ -23,7 +23,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import { Converter } from 'showdown';
-import { useStore } from '../store/store';
+import { useStore } from '../../store/store';
 
 const converter = new Converter();
 const store = useStore();
diff --git a/src/components/Global/UpdatePrompt.vue b/src/components/Global/UpdatePrompt.vue
new file mode 100644
index 0000000..fe33d71
--- /dev/null
+++ b/src/components/Global/UpdatePrompt.vue
@@ -0,0 +1,34 @@
+<template>
+  <div v-if="needRefresh" class="update-prompt" @click="updateServiceWorker(true)">
+    {{ $t('update.update-available-text') }}
+    <u>{{ $t('update.update-available-underline') }}</u>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRegisterSW } from 'virtual:pwa-register/vue';
+
+const { needRefresh, updateServiceWorker } = useRegisterSW({ immediate: true });
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/colors';
+
+.update-prompt {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  padding: 0.5em;
+
+  z-index: 200;
+
+  font-weight: bold;
+
+  text-align: center;
+
+  width: 100%;
+  background-color: colors.$accentCol;
+
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/Order.vue b/src/components/Orders/Order.vue
similarity index 77%
rename from src/components/Order.vue
rename to src/components/Orders/Order.vue
index d271d8e..aa3617b 100644
--- a/src/components/Order.vue
+++ b/src/components/Orders/Order.vue
@@ -1,28 +1,33 @@
 <template>
-  <div class="order" :class="{ dark: store.orderDarkMode }">
-    <div class="order_content">
-      <transition name="order-anim" mode="out-in">
-        <keep-alive>
-          <component :is="chosenOrderComponent" :key="chosenOrderComponent.name"></component>
-        </keep-alive>
-      </transition>
-      <OrderFooter />
+  <div class="order-container">
+    <OrderSideBar />
+
+    <div class="order" :class="{ dark: store.orderDarkMode }">
+      <div class="order_content">
+        <transition name="order-anim" mode="out-in">
+          <keep-alive>
+            <component :is="chosenOrderComponent" :key="chosenOrderComponent.name"></component>
+          </keep-alive>
+        </transition>
+        <OrderFooter />
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store/store';
-import OrderNVue from './OrderN.vue';
-import OrderSVue from './OrderS.vue';
+import { useStore } from '../../store/store';
+import OrderN from './OrderN.vue';
+import OrderS from './OrderS.vue';
+import OrderO from './OrderO.vue';
 import OrderFooter from './OrderFooter.vue';
-import OrderOVue from './OrderO.vue';
+import OrderSideBar from './OrderSideBar.vue';
 
-const orderComponents = { orderN: OrderNVue, orderS: OrderSVue, orderO: OrderOVue };
+const orderComponents = { orderN: OrderN, orderS: OrderS, orderO: OrderO };
 
 export default defineComponent({
-  components: { OrderNVue, OrderSVue, OrderFooter },
+  components: { OrderN, OrderO, OrderS, OrderFooter, OrderSideBar },
 
   setup() {
     const store = useStore();
@@ -39,22 +44,32 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-@use '../styles/colors';
+@use '../../styles/colors';
 
 $darkModeTextCol: #eee;
 
+.order-container {
+  display: flex;
+  align-items: start;
+  max-width: 800px;
+
+  @media screen and (max-width: 650px) {
+    flex-direction: column;
+  }
+}
+
 .order {
   background-color: white;
   color: black;
 
+  height: calc(100vh - 5em);
+  overflow: auto;
+
   &.dark {
     background-color: colors.$bgColDarker;
     color: $darkModeTextCol;
   }
 
-  max-height: 95vh;
-  overflow: auto;
-
   font-size: 15px;
 
   h2 {
diff --git a/src/components/OrderFooter.vue b/src/components/Orders/OrderFooter.vue
similarity index 94%
rename from src/components/OrderFooter.vue
rename to src/components/Orders/OrderFooter.vue
index bd2ddce..c29f5bd 100644
--- a/src/components/OrderFooter.vue
+++ b/src/components/Orders/OrderFooter.vue
@@ -52,8 +52,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import orderFooterMixin from '../mixins/orderFooterMixin';
-import { useStore } from '../store/store';
+import orderFooterMixin from '../../mixins/orderFooterMixin';
+import { useStore } from '../../store/store';
 
 export default defineComponent({
   mixins: [orderFooterMixin],
diff --git a/src/components/OrderN.vue b/src/components/Orders/OrderN.vue
similarity index 99%
rename from src/components/OrderN.vue
rename to src/components/Orders/OrderN.vue
index b37887e..c227420 100644
--- a/src/components/OrderN.vue
+++ b/src/components/Orders/OrderN.vue
@@ -334,8 +334,8 @@
 
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
-import { useStore } from '../store/store';
-import { handleOrderPlaceholders } from '../handlers/orderPlaceholderHandler';
+import { handleOrderPlaceholders } from '../../handlers/orderPlaceholderHandler';
+import { useStore } from '../../store/store';
 
 type TOrderRows = 1 | 2 | 3 | 4 | 5;
 
diff --git a/src/components/OrderO.vue b/src/components/Orders/OrderO.vue
similarity index 97%
rename from src/components/OrderO.vue
rename to src/components/Orders/OrderO.vue
index 1fb2554..db6a15d 100644
--- a/src/components/OrderO.vue
+++ b/src/components/Orders/OrderO.vue
@@ -77,7 +77,7 @@
 
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
-import { useStore } from '../store/store';
+import { useStore } from '../../store/store';
 
 export default defineComponent({
   name: 'OrderO',
@@ -122,11 +122,10 @@ export default defineComponent({
 
       if (this.order.orderList.some((row) => row.name)) {
         message += `\n--------\n<b>[ 1 ]</b>`;
-        message += '\n1) zmniejszyć prędkość jazdy i zachować ostrożność'
-        message += '\n2) jechać ostrożnie (j.o.)\n'
+        message += '\n1) zmniejszyć prędkość jazdy i zachować ostrożność';
+        message += '\n2) jechać ostrożnie (j.o.)\n';
       }
 
-
       for (let i = 0; i < this.order.orderList.length; i++) {
         const row = this.order.orderList[i];
         if (!row.name) continue;
diff --git a/src/components/OrderS.vue b/src/components/Orders/OrderS.vue
similarity index 98%
rename from src/components/OrderS.vue
rename to src/components/Orders/OrderS.vue
index 733653d..d52d597 100644
--- a/src/components/OrderS.vue
+++ b/src/components/Orders/OrderS.vue
@@ -60,7 +60,9 @@
                     holder="nazwa sem."
                     :radio-checked="order.rows[0].radio1 == 'radio-1a-1'"
                   />
-                  <span v-if="order.rows[0].optionSignal == 'drogowskazowego'"> (odnoszącego się do wyjazdu pociągu)</span>
+                  <span v-if="order.rows[0].optionSignal == 'drogowskazowego'">
+                    (odnoszącego się do wyjazdu pociągu)</span
+                  >
                   <br />
                 </label>
                 <hr />
@@ -284,8 +286,8 @@
 
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
-import { handleOrderPlaceholders } from '../handlers/orderPlaceholderHandler';
-import { useStore } from '../store/store';
+import { handleOrderPlaceholders } from '../../handlers/orderPlaceholderHandler';
+import { useStore } from '../../store/store';
 
 type TOrderRows = 1 | 2 | 3 | 4;
 
diff --git a/src/components/SideBar.vue b/src/components/Orders/OrderSideBar.vue
similarity index 93%
rename from src/components/SideBar.vue
rename to src/components/Orders/OrderSideBar.vue
index 587893e..19c77f6 100644
--- a/src/components/SideBar.vue
+++ b/src/components/Orders/OrderSideBar.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store/store';
+import { useStore } from '../../store/store';
 
 export default defineComponent({
   data() {
@@ -61,11 +61,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '../styles/colors';
+@use '../../styles/colors';
 
 .sidebar_content {
-  display: grid;
-  grid-template-rows: repeat(3, 1fr);
+  display: flex;
+  flex-direction: column;
   gap: 0.25em;
 
   font-size: 1.5em;
@@ -128,8 +128,7 @@ button.option-save {
 
 @media screen and (max-width: 650px) {
   .sidebar_content {
-    display: flex;
-    justify-content: space-between;
+    flex-direction: row;
 
     & > button {
       height: 40px;
diff --git a/src/components/OrderList.vue b/src/components/Panels/OrderListPanel.vue
similarity index 95%
rename from src/components/OrderList.vue
rename to src/components/Panels/OrderListPanel.vue
index 13166f9..60f8161 100644
--- a/src/components/OrderList.vue
+++ b/src/components/Panels/OrderListPanel.vue
@@ -50,9 +50,9 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import orderStorageMixin from '../mixins/orderStorageMixin';
-import { useStore } from '../store/store';
-import { LocalStorageOrder } from '../types/orderTypes';
+import orderStorageMixin from '../../mixins/orderStorageMixin';
+import { useStore } from '../../store/store';
+import { LocalStorageOrder } from '../../types/orderTypes';
 
 export default defineComponent({
   name: 'OrderList',
@@ -114,7 +114,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '../styles/colors';
+@use '../../styles/colors';
 
 .list {
   &-move,
diff --git a/src/components/OrderMessage.vue b/src/components/Panels/OrderMessagePanel.vue
similarity index 76%
rename from src/components/OrderMessage.vue
rename to src/components/Panels/OrderMessagePanel.vue
index 73f44dd..9a41a7a 100644
--- a/src/components/OrderMessage.vue
+++ b/src/components/Panels/OrderMessagePanel.vue
@@ -8,36 +8,33 @@
     </p>
 
     <div class="message_actions">
-      <button class="g-button action" @click="saveOrder">
+      <button class="g-button action icon" @click="saveOrder">
+        <LucideSave />
         {{ $t('order-message.button-save') }}
       </button>
-      <button class="g-button action" @click="copyMessage">
+
+      <button class="g-button action icon" @click="copyMessage">
+        <LucideCopy />
         {{ $t('order-message.button-copy') }}
       </button>
+
       <button
-        class="g-button action"
+        class="g-button action icon"
         :data-disabled="!store.chosenLocalOrderId"
         @click="updateOrder"
       >
+        <LucidePencil />
         {{ $t('order-message.button-update') }}
-        <span class="text--accent"
-          >{{ store.chosenLocalOrderId && `#${store.chosenLocalOrderId.split('-')[1]}` }}
-        </span>
+        <span class="text--accent" v-if="store.chosenLocalOrderId">#{{ store.chosenLocalOrderId.split('-')[1] }} </span>
+      </button>
+
+      <button class="g-button action icon" @click="resetOrder">
+        <LucideRotateCcw />
+        {{ $t('order-message.button-reset') }}
       </button>
     </div>
 
     <div class="message_checkboxes">
-      <label for="dark-mode" class="g-checkbox">
-        <input
-          type="checkbox"
-          name="dark-mode"
-          id="dark-mode"
-          v-model="store.orderDarkMode"
-          @change="onCheckboxChange"
-        />
-        <span>{{ $t('order-options.dark-mode') }}</span>
-      </label>
-
       <label for="copy-increment" class="g-checkbox">
         <input
           type="checkbox"
@@ -80,23 +77,22 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store/store';
-
-import saveIcon from '../assets/icon-save.svg';
-import orderStorageMixin from '../mixins/orderStorageMixin';
-import orderValidationMixin from '../mixins/orderValidationMixin';
-import { currentFormattedHours, currentFormattedMinutes } from '../utils/dateUtils';
+import orderStorageMixin from '../../mixins/orderStorageMixin';
+import orderValidationMixin from '../../mixins/orderValidationMixin';
+import { useStore } from '../../store/store';
+import { currentFormattedHours, currentFormattedMinutes } from '../../utils/dateUtils';
+import { LucideCopy, LucidePencil, LucideRotateCcw, LucideSave } from 'lucide-vue-next';
 
 export default defineComponent({
   name: 'OrderMessage',
+  components: { LucideCopy, LucidePencil, LucideRotateCcw, LucideSave },
 
   mixins: [orderStorageMixin, orderValidationMixin],
 
   data() {
     return {
-      saveIcon,
       actionMonit: '',
-      monitTimeout: undefined as number | undefined,
+      monitTimeout: null as number | null,
 
       incrementOnSave: true,
       incrementOnCopy: true,
@@ -143,25 +139,20 @@ export default defineComponent({
     },
 
     showActionMonit(text: string) {
-      if (this.monitTimeout) {
+      if (this.monitTimeout != null) {
         this.actionMonit = '';
         clearTimeout(this.monitTimeout);
 
         setTimeout(() => {
           this.actionMonit = text;
-
-          this.monitTimeout = window.setTimeout(() => {
-            this.actionMonit = '';
-          }, 5000);
-        }, 300);
-
-        return;
+        }, 100);
+      } else {
+        this.actionMonit = text;
       }
 
-      this.actionMonit = text;
-
       this.monitTimeout = window.setTimeout(() => {
         this.actionMonit = '';
+        this.monitTimeout = null;
       }, 5000);
     },
 
@@ -248,13 +239,44 @@ export default defineComponent({
           this.showActionMonit(this.$t('order-message.success-update-html'));
           break;
       }
+    },
+
+    resetOrder() {
+      const order = this.store[this.store.chosenOrderType];
+
+      // TODO
+
+      // Object.keys(store.orderData.header).forEach((k) => {
+      //   store.orderData['header'][k as keyof IOrderHeader] = '';
+      // });
+
+      // Object.keys(store.orderData.footer).forEach((k) => {
+      //   store.orderData['footer'][k as keyof IOrderFooter] = '';
+      // });
+
+      // store.orderData.instructions.forEach((instruction) => {
+      //   instruction.active = false;
+
+      //   Object.keys(instruction.inputFields).forEach((k) => {
+      //     instruction.inputFields[k] = '';
+      //   });
+
+      //   if (instruction.listFields) {
+      //     instruction.listFields.forEach((field) => {
+      //       Object.keys(field.values).forEach((k) => {
+      //         field.active = false;
+      //         field.values[k] = '';
+      //       });
+      //     });
+      //   }
+      // });
     }
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@use '../styles/colors';
+@use '../../styles/colors';
 
 .order-message {
   h3 {
@@ -289,10 +311,13 @@ export default defineComponent({
 }
 
 .message_actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1em;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5em;
+
+  button.icon {
+    gap: 0.5em;
+  }
 
   button img {
     height: 2ch;
diff --git a/src/components/OrderTrainPicker.vue b/src/components/Panels/OrderTrainPickerPanel.vue
similarity index 95%
rename from src/components/OrderTrainPicker.vue
rename to src/components/Panels/OrderTrainPickerPanel.vue
index 4d43593..6153519 100644
--- a/src/components/OrderTrainPicker.vue
+++ b/src/components/Panels/OrderTrainPickerPanel.vue
@@ -111,16 +111,16 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useStore } from '../store/store';
+import http from '../../http';
+import { useStore } from '../../store/store';
+import { API } from '../../types/apiTypes';
+import { ISceneryData } from '../../types/dataTypes';
 import {
   currentFormattedDate,
   currentFormattedHours,
   currentFormattedMinutes
-} from '../utils/dateUtils';
-import http from '../http';
-import { ISceneryData } from '../types/dataTypes';
-import { API } from '../types/apiTypes';
-import { getRegionNameById } from '../utils/sceneryUtils';
+} from '../../utils/dateUtils';
+import { getRegionNameById } from '../../utils/sceneryUtils';
 
 export default defineComponent({
   name: 'order-train-picker',
@@ -261,7 +261,7 @@ export default defineComponent({
           sceneryAbbrev || this.store.orderFooter.stationName.slice(0, 2);
       }
 
-      this.store.orderMode = 'OrderMessage';
+      this.store.panelMode = 'OrderMessagePanel';
     },
 
     handleQueries() {
@@ -283,7 +283,7 @@ export default defineComponent({
 
           this.selectOption();
 
-          this.store.orderMode = 'OrderTrainPicker';
+          this.store.panelMode = 'OrderTrainPickerPanel';
         }
       }
     }
@@ -292,7 +292,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@use '../styles/colors';
+@use '../../styles/colors';
 
 .order-train-picker {
   display: flex;
diff --git a/src/data/orderHelperData.json b/src/data/orderHelperData.json
deleted file mode 100644
index d662247..0000000
--- a/src/data/orderHelperData.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "orderS": ["D"]
-}
diff --git a/src/locales/en.json b/src/locales/en.json
index 9c34459..d26a587 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,72 +1,73 @@
 {
-   "locale": {
-      "pl": "POL",
-      "en": "ENG"
-   },
-   "navbar": {
-      "order-message": "ORDER MESSAGE",
-      "order-list": "SAVED ORDERS",
-      "order-train-picker": "TRAINS"
-   },
-   "update": {
-      "update-available-text": "New GeneraTOR version is available!",
-      "update-available-underline": "Click here to update!",
-      "title": "GeneraTOR update!",
-      "confirm": "ROGER THAT!",
-      "no-data": "No changelog available!",
-      "info-1": "This changelog will be available to see once again after clicking the version number in the footer",
-      "info-2": "The full app changelog available on <a href='https://github.com/Spythere/genera-tor' target='_blank'>the project's GitHub</a>"
-   },
-   "order-message": {
-      "title": "Message to display in the simulator's chatbox:",
-      "info": "Copy or save the content of the generated train order using buttons below:",
-      "button-save": "Save as new order",
-      "button-copy": "Copy the order message",
-      "button-update": "Update the order",
-      "warning-outdated-clipboard": "Oops! Your browser may be a little bit depraceted since it's not supporting saving data to the clipboard! :/",
-      "warning-fill-inputs": "Fill all the empty fields before copying the order!",
-      "warning-add-rows": "Add at least one row before copying the order!",
-      "warning-fill-footer": "Fill the following rows in the order's footer before copying it:",
-      "warning-fill-top": "Fill the order number, train number and date before saving it!",
-      "warning-order-identical": "Last saved order is identical as the current one!",
-      "warning-no-order-selected": "Choose the already saved order first!",
-      "error-update": "An error occurred while saving this order! :/",
-      "success-update-html": "Updated this <b class=\"text--accent\">order's</b> message!",
-      "success-save-html": "Saved <b class=\"text--accent\">order's</b> message in the browser memory!",
-      "success-copy-html": "<b class=\"text--accent\">Success!</b> You may paste the order message in the simulator's chatbox now!"
-   },
-   "order-footer": {
-      "field-stationName": "station",
-      "field-checkpointName": "checkpoint",
-      "field-hour": "hour",
-      "field-minutes": "minute",
-      "field-dispatcherName": "dispatcher",
-      "field-secondaryDispatcherName": "ordering dispatcher",
-      "field-dispatcherOrSecondaryName": "dispatcher (or ordering dispatcher)"
-   },
-   "order-options": {
-      "dark-mode": "Order dark theme",
-      "update-number-on-copy": "Update order number on copy",
-      "update-number-on-save": "Update order number on save",
-      "update-hours": "Update order hour on edit"
-   },
-   "order-list": {
-      "title": "Saved train orders",
-      "order-title": "Order \"{orderName}\" no. {orderNo} for train no. {trainNo}",
-      "no-saved-orders": "No saved orders!",
-      "order-added": "Added:",
-      "order-updated": "Updated:",
-      "button-order-select": "Select",
-      "button-order-remove": "Remove"
-   },
-   "order-train-picker": {
-      "placeholder-scenery-name": "Scenery name",
-      "placeholder-region-name": "Region",
-      "placeholder-checkpoint-name": "Checkpoint name",
-      "autofill-checkpoint-id": "Autofill checkpoint's abbreviation",
-      "info": "Select scenery name to display active trains",
-      "title": "Active timetables and trains on the scenery",
-      "subtitle": "Click on the user below to fill the current order with their information",
-      "no-trains": "No trains to display"
-   }
-}
\ No newline at end of file
+  "locale": {
+    "pl": "POL",
+    "en": "ENG"
+  },
+  "navbar": {
+    "OrderMessagePanel": "MESSAGE",
+    "OrderListPanel": "SAVED",
+    "OrderTrainPickerPanel": "TRAINS"
+  },
+  "update": {
+    "update-available-text": "New GeneraTOR version is available!",
+    "update-available-underline": "Click here to update!",
+    "title": "GeneraTOR update!",
+    "confirm": "ROGER THAT!",
+    "no-data": "No changelog available!",
+    "info-1": "This changelog will be available to see once again after clicking the version number in the footer",
+    "info-2": "The full app changelog available on <a href='https://github.com/Spythere/genera-tor' target='_blank'>the project's GitHub</a>"
+  },
+  "order-message": {
+    "title": "Message to display in the simulator's chatbox:",
+    "info": "Copy or save the content of the generated train order using buttons below:",
+    "button-save": "Save new",
+    "button-copy": "Copy message",
+    "button-update": "Update",
+    "button-reset": "Reset",
+    "warning-outdated-clipboard": "Oops! Your browser may be a little bit depraceted since it's not supporting saving data to the clipboard! :/",
+    "warning-fill-inputs": "Fill all the empty fields before copying the order!",
+    "warning-add-rows": "Add at least one row before copying the order!",
+    "warning-fill-footer": "Fill the following rows in the order's footer before copying it:",
+    "warning-fill-top": "Fill the order number, train number and date before saving it!",
+    "warning-order-identical": "Last saved order is identical as the current one!",
+    "warning-no-order-selected": "Choose the already saved order first!",
+    "error-update": "An error occurred while saving this order! :/",
+    "success-update-html": "Updated this <b class=\"text--accent\">order's</b> message!",
+    "success-save-html": "Saved <b class=\"text--accent\">order's</b> message in the browser memory!",
+    "success-copy-html": "<b class=\"text--accent\">Success!</b> You may paste the order message in the simulator's chatbox now!"
+  },
+  "order-footer": {
+    "field-stationName": "station",
+    "field-checkpointName": "checkpoint",
+    "field-hour": "hour",
+    "field-minutes": "minute",
+    "field-dispatcherName": "dispatcher",
+    "field-secondaryDispatcherName": "ordering dispatcher",
+    "field-dispatcherOrSecondaryName": "dispatcher (or ordering dispatcher)"
+  },
+  "order-options": {
+    "dark-mode": "Order dark theme",
+    "update-number-on-copy": "Update order number on copy",
+    "update-number-on-save": "Update order number on save",
+    "update-hours": "Update order hour on edit"
+  },
+  "order-list": {
+    "title": "Saved train orders",
+    "order-title": "Order \"{orderName}\" no. {orderNo} for train no. {trainNo}",
+    "no-saved-orders": "No saved orders!",
+    "order-added": "Added:",
+    "order-updated": "Updated:",
+    "button-order-select": "Select",
+    "button-order-remove": "Remove"
+  },
+  "order-train-picker": {
+    "placeholder-scenery-name": "Scenery name",
+    "placeholder-region-name": "Region",
+    "placeholder-checkpoint-name": "Checkpoint name",
+    "autofill-checkpoint-id": "Autofill checkpoint's abbreviation",
+    "info": "Select scenery name to display active trains",
+    "title": "Active timetables and trains on the scenery",
+    "subtitle": "Click on the user below to fill the current order with their information",
+    "no-trains": "No trains to display"
+  }
+}
diff --git a/src/locales/pl.json b/src/locales/pl.json
index d9e01e7..36a3bac 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -1,72 +1,73 @@
 {
-   "locale": {
-      "pl": "POL",
-      "en": "ENG"
-   },
-   "update": {
-      "update-available-text": "Nowa wersja GeneraTORa dostępna!",
-      "update-available-underline": "Kliknij, aby odświeżyć aplikację!",
-      "title": "Aktualizacja GeneraTORa!",
-      "no-data": "Brak dostępnego changelogu!",
-      "confirm": "Przyjąłem!",
-      "info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
-      "info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/genera-tor' target='_blank'>GitHubie projektu</a>"
-   },
-   "navbar": {
-      "order-message": "TREŚĆ ROZKAZU",
-      "order-list": "ZAPISANE ROZ.",
-      "order-train-picker": "POCIĄGI"
-   },
-   "order-message": {
-      "title": "Wiadomość do wyświetlenia na czacie symulatora:",
-      "info": "Po wygenerowaniu rozkazu skopiuj jego treść lub zapisz w pamięci przeglądarki za pomocą przycisków poniżej:",
-      "button-save": "Zapisz nowy rozkaz",
-      "button-copy": "Kopiuj treść rozkazu",
-      "button-update": "Zaktualizuj rozkaz",
-      "warning-outdated-clipboard": "Ups! Twoja przeglądarka musi być dosyć przestarzała, ponieważ nie obsługuje zapisu do schowka! :/",
-      "warning-fill-inputs": "Wypełnij puste rubryki rozkazu przed jego skopiowaniem!",
-      "warning-add-rows": "Dodaj co najmniej jedną działkę rozkazu przed jego skopiowaniem!",
-      "warning-fill-footer": "Uzupełnij następujące rubryki na dole rozkazu przed jego skopiowaniem:",
-      "warning-fill-top": "Wypełnij numer rozkazu, numer pociągu i datę zanim dodasz rozkaz!",
-      "warning-order-identical": "Ostatni zapisany rozkaz jest identyczny z obecnym!",
-      "warning-no-order-selected": "Wybierz rozkaz, który chcesz zaktualizować!",
-      "error-update": "Wystąpił błąd podczas aktualizowania tego rozkazu! :/",
-      "success-update-html": "Zaktualizowano treść <b class=\"text--accent\">rozkazu</b>!",
-      "success-save-html": "Zapisano treść <b class=\"text--accent\">rozkazu</b> w pamięci przeglądarki!",
-      "success-copy-html": "<b class=\"text--accent\">Skopiowano!</b> Możesz teraz wkleić treść rozkazu na czacie symulatora!"
-   },
-   "order-footer": {
-      "field-stationName": "stacja",
-      "field-checkpointName": "posterunek",
-      "field-hour": "godzina",
-      "field-minutes": "minuta",
-      "field-dispatcherName": "dyżurny ruchu",
-      "field-secondaryDispatcherName": "z polecenia dyżurnego ruchu",
-      "field-dispatcherOrSecondaryName": "dyżurny ruchu (lub z polecenia dyżurnego ruchu)"
-   },
-   "order-options": {
-      "dark-mode": "Ciemny motyw bloczka rozkazu",
-      "update-number-on-copy": "Aktualizuj numer rozkazu po skopiowaniu",
-      "update-number-on-save": "Aktualizuj numer rozkazu po zapisaniu",
-      "update-hours": "Aktualizuj godziny przy edycji"
-   },
-   "order-list": {
-      "title": "Zapisane rozkazy pisemne",
-      "no-saved-orders": "Brak zapisanych rozkazów!",
-      "order-title": "Rozkaz \"{orderName}\" nr {orderNo} dla pociągu nr {trainNo}",
-      "order-added": "Dodano:",
-      "order-updated": "Zaktualizowano:",
-      "button-order-select": "Wybierz",
-      "button-order-remove": "Usuń"
-   },
-   "order-train-picker": {
-      "placeholder-scenery-name": "Sceneria",
-      "placeholder-region-name": "Region",
-      "placeholder-checkpoint-name": "Posterunek",
-      "autofill-checkpoint-id": "Uzupełniaj skrót wybranego posterunku",
-      "info": "Wybierz dyżurnego oraz scenerię, aby zobaczyć pociągi",
-      "title": "Aktywne RJ i gracze na scenerii",
-      "subtitle": "Kliknij na gracza, aby wypełnić obecny rozkaz jego danymi",
-      "no-trains": "Brak pociągów do wyświetlenia"
-   }
-}
\ No newline at end of file
+  "locale": {
+    "pl": "POL",
+    "en": "ENG"
+  },
+  "update": {
+    "update-available-text": "Nowa wersja GeneraTORa dostępna!",
+    "update-available-underline": "Kliknij, aby odświeżyć aplikację!",
+    "title": "Aktualizacja GeneraTORa!",
+    "no-data": "Brak dostępnego changelogu!",
+    "confirm": "Przyjąłem!",
+    "info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
+    "info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/genera-tor' target='_blank'>GitHubie projektu</a>"
+  },
+  "navbar": {
+    "OrderMessagePanel": "WIADOMOŚĆ",
+    "OrderListPanel": "ZAPISANE",
+    "OrderTrainPickerPanel": "POCIĄGI"
+  },
+  "order-message": {
+    "title": "Wiadomość do wyświetlenia na czacie symulatora:",
+    "info": "Po wygenerowaniu rozkazu skopiuj jego treść lub zapisz w pamięci przeglądarki za pomocą przycisków poniżej:",
+    "button-save": "Zapisz nowy",
+    "button-copy": "Skopiuj treść",
+    "button-update": "Zaktualizuj",
+    "button-reset": "Zresetuj",
+    "warning-outdated-clipboard": "Ups! Twoja przeglądarka musi być dosyć przestarzała, ponieważ nie obsługuje zapisu do schowka! :/",
+    "warning-fill-inputs": "Wypełnij puste rubryki rozkazu przed jego skopiowaniem!",
+    "warning-add-rows": "Dodaj co najmniej jedną działkę rozkazu przed jego skopiowaniem!",
+    "warning-fill-footer": "Uzupełnij następujące rubryki na dole rozkazu przed jego skopiowaniem:",
+    "warning-fill-top": "Wypełnij numer rozkazu, numer pociągu i datę zanim dodasz rozkaz!",
+    "warning-order-identical": "Ostatni zapisany rozkaz jest identyczny z obecnym!",
+    "warning-no-order-selected": "Wybierz rozkaz, który chcesz zaktualizować!",
+    "error-update": "Wystąpił błąd podczas aktualizowania tego rozkazu! :/",
+    "success-update-html": "Zaktualizowano treść <b class=\"text--accent\">rozkazu</b>!",
+    "success-save-html": "Zapisano treść <b class=\"text--accent\">rozkazu</b> w pamięci przeglądarki!",
+    "success-copy-html": "<b class=\"text--accent\">Skopiowano!</b> Możesz teraz wkleić treść rozkazu na czacie symulatora!"
+  },
+  "order-footer": {
+    "field-stationName": "stacja",
+    "field-checkpointName": "posterunek",
+    "field-hour": "godzina",
+    "field-minutes": "minuta",
+    "field-dispatcherName": "dyżurny ruchu",
+    "field-secondaryDispatcherName": "z polecenia dyżurnego ruchu",
+    "field-dispatcherOrSecondaryName": "dyżurny ruchu (lub z polecenia dyżurnego ruchu)"
+  },
+  "order-options": {
+    "dark-mode": "Ciemny motyw bloczka rozkazu",
+    "update-number-on-copy": "Aktualizuj numer rozkazu po skopiowaniu",
+    "update-number-on-save": "Aktualizuj numer rozkazu po zapisaniu",
+    "update-hours": "Aktualizuj godziny przy edycji"
+  },
+  "order-list": {
+    "title": "Zapisane rozkazy pisemne",
+    "no-saved-orders": "Brak zapisanych rozkazów!",
+    "order-title": "Rozkaz \"{orderName}\" nr {orderNo} dla pociągu nr {trainNo}",
+    "order-added": "Dodano:",
+    "order-updated": "Zaktualizowano:",
+    "button-order-select": "Wybierz",
+    "button-order-remove": "Usuń"
+  },
+  "order-train-picker": {
+    "placeholder-scenery-name": "Sceneria",
+    "placeholder-region-name": "Region",
+    "placeholder-checkpoint-name": "Posterunek",
+    "autofill-checkpoint-id": "Uzupełniaj skrót wybranego posterunku",
+    "info": "Wybierz dyżurnego oraz scenerię, aby zobaczyć pociągi",
+    "title": "Aktywne RJ i gracze na scenerii",
+    "subtitle": "Kliknij na gracza, aby wypełnić obecny rozkaz jego danymi",
+    "no-trains": "Brak pociągów do wyświetlenia"
+  }
+}
diff --git a/src/mixins/orderStorageMixin.ts b/src/mixins/orderStorageMixin.ts
index b2e8a1b..302451f 100644
--- a/src/mixins/orderStorageMixin.ts
+++ b/src/mixins/orderStorageMixin.ts
@@ -157,7 +157,7 @@ export default defineComponent({
 
       this.store.chosenOrderType = localOrder.orderType;
       this.store.chosenLocalOrderId = localOrder.id;
-      this.store.orderMode = 'OrderMessage';
+      this.store.panelMode = 'OrderMessagePanel';
     }
   }
 });
diff --git a/src/store/store.ts b/src/store/store.ts
index b274d95..109ddb0 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,22 +1,24 @@
 import { defineStore } from 'pinia';
-import { IOrderN, IOrderO, IOrderS, TOrder } from '../types/orderTypes';
+import { IOrderN, IOrderO, IOrderS, TOrder, TPanel } from '../types/orderTypes';
 import {
   currentFormattedDate,
   currentFormattedHours,
   currentFormattedMinutes
 } from '../utils/dateUtils';
+import i18n from '../i18n';
+import StorageManager from '../managers/storageManager';
 
 export const useStore = defineStore('store', {
   state: () => {
     return {
       currentAppLocale: 'pl',
-      
+
       appUpdateData: {
         version: '',
         changelog: '',
         releaseURL: ''
       },
-      
+
       updateCardOpen: false,
       helperModalOpen: false,
       orderDarkMode: false,
@@ -24,7 +26,7 @@ export const useStore = defineStore('store', {
       chosenOrderType: 'orderN' as TOrder,
       chosenLocalOrderId: '',
 
-      orderMode: 'OrderMessage',
+      panelMode: 'OrderMessagePanel' as TPanel,
 
       orderFooter: {
         stationName: '',
@@ -214,5 +216,13 @@ export const useStore = defineStore('store', {
         ]
       } as IOrderS
     };
+  },
+  actions: {
+    changeLang(lang: string) {
+      i18n.global.locale.value = lang as typeof i18n.global.locale.value;
+      this.currentAppLocale = lang;
+
+      StorageManager.setStringValue('lang', lang);
+    }
   }
 });
diff --git a/src/types/orderTypes.ts b/src/types/orderTypes.ts
index c743392..3a330d5 100644
--- a/src/types/orderTypes.ts
+++ b/src/types/orderTypes.ts
@@ -1,4 +1,5 @@
 export type TOrder = 'orderO' | 'orderS' | 'orderN';
+export type TPanel = 'OrderMessagePanel' | 'OrderListPanel' | 'OrderTrainPickerPanel';
 
 export interface LocalStorageOrder {
   id: string;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 9a48ec9..6534c5a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,33 +2,45 @@
   <!-- <OrderHelper v-if="store.helperModalOpen" /> -->
 
   <div class="home">
-    <div class="home_container">
-      <div class="order_container">
-        <SideBar />
-        <OrderVue />
-      </div>
+    <div class="home-container">
+      <Order />
 
-      <div class="message_container">
-        <div class="message_nav">
-          <button class="g-button icon" @click="switchLanguages">
-            <LanguagesIcon :size="18" />
-            <span style="margin-left: 0.25em">{{ $t('locale.' + store.currentAppLocale) }}</span>
+      <div class="panel-container">
+        <div class="panel-nav">
+          <button
+            key="OrderMessagePanel"
+            class="g-button"
+            :data-active="store.panelMode == 'OrderMessagePanel'"
+            @click="selectPanelMode('OrderMessagePanel')"
+          >
+            <MessageSquareTextIcon :size="20" />
+            {{ t(`navbar.OrderMessagePanel`) }}
           </button>
 
           <button
-            v-for="(action, i) in navActions"
-            :key="action.mode"
-            class="g-button option"
-            :data-active="store.orderMode == action.mode"
-            @click="selectOrderMode(action.mode)"
+            key="OrderListPanel"
+            class="g-button"
+            :data-active="store.panelMode == 'OrderListPanel'"
+            @click="selectPanelMode('OrderListPanel')"
           >
-            {{ $t(`navbar.${action.value}`) }}
+            <BookMarkedIcon :size="20" />
+            {{ t(`navbar.OrderListPanel`) }}
+          </button>
+
+          <button
+            key="OrderTrainPickerPanel"
+            class="g-button"
+            :data-active="store.panelMode == 'OrderTrainPickerPanel'"
+            @click="selectPanelMode('OrderTrainPickerPanel')"
+          >
+            <TrainFrontIcon :size="20" />
+            {{ t(`navbar.OrderTrainPickerPanel`) }}
           </button>
         </div>
 
         <transition name="order-anim" mode="out-in">
           <keep-alive>
-            <Component :is="orderModeComponent" />
+            <Component :is="panelComponent" />
           </keep-alive>
         </transition>
       </div>
@@ -36,74 +48,34 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import OrderVue from '../components/Order.vue';
-import SideBar from '../components/SideBar.vue';
-import OrderMessage from '../components/OrderMessage.vue';
-import OrderList from '../components/OrderList.vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useStore } from '../store/store';
-import OrderHelper from '../components/OrderHelper.vue';
-import OrderTrainPicker from '../components/OrderTrainPicker.vue';
-import { LanguagesIcon } from 'lucide-vue-next';
-import StorageManager from '../managers/storageManager';
+import OrderMessagePanel from '../components/Panels/OrderMessagePanel.vue';
+import OrderListPanel from '../components/Panels/OrderListPanel.vue';
+import OrderTrainPickerPanel from '../components/Panels/OrderTrainPickerPanel.vue';
+import SideBar from '../components/App/SideBar.vue';
+import Order from '../components/Orders/Order.vue';
+import { BookMarkedIcon, MessageSquareTextIcon, TrainFrontIcon } from 'lucide-vue-next';
+import { TPanel } from '../types/orderTypes';
 
-export default defineComponent({
-  components: { OrderVue, SideBar, OrderHelper, LanguagesIcon },
+const store = useStore();
+const { t } = useI18n();
 
-  data() {
-    return {
-      navActions: [
-        {
-          mode: 'OrderMessage',
-          value: 'order-message'
-        },
-        {
-          mode: 'OrderList',
-          value: 'order-list'
-        },
-        {
-          mode: 'OrderTrainPicker',
-          value: 'order-train-picker'
-        }
-      ]
-    };
-  },
+function selectPanelMode(mode: TPanel) {
+  store.panelMode = mode;
+}
 
-  methods: {
-    selectOrderMode(mode: string) {
-      this.store.orderMode = mode;
-    },
-
-    switchLanguages() {
-      const lang = this.store.currentAppLocale == 'pl' ? 'en' : 'pl';
-
-      this.$i18n.locale = lang;
-      this.store.currentAppLocale = lang;
-
-      StorageManager.setStringValue('lang', lang);
-    }
-  },
-
-  setup() {
-    return {
-      store: useStore()
-    };
-  },
-
-  computed: {
-    orderModeComponent() {
-      switch (this.store.orderMode) {
-        case 'OrderMessage':
-          return OrderMessage;
-        case 'OrderList':
-          return OrderList;
-        case 'OrderTrainPicker':
-          return OrderTrainPicker;
-        default:
-          return OrderMessage;
-      }
-    }
+const panelComponent = computed(() => {
+  switch (store.panelMode) {
+    case 'OrderListPanel':
+      return OrderListPanel;
+    case 'OrderTrainPickerPanel':
+      return OrderTrainPickerPanel;
+    case 'OrderMessagePanel':
+    default:
+      return OrderMessagePanel;
   }
 });
 </script>
@@ -112,7 +84,6 @@ export default defineComponent({
 @use '../styles/colors';
 
 .home {
-  min-height: 100vh;
   overflow-x: auto;
 
   display: flex;
@@ -122,63 +93,60 @@ export default defineComponent({
   width: 100%;
 }
 
-.home_container {
-  display: flex;
-  flex-wrap: wrap;
+.home-container {
+  display: grid;
+  grid-template-columns: 600px 500px;
   justify-content: center;
   gap: 2em 1em;
-  padding: 0.5em;
-
+  padding: 1em;
   width: 100%;
 
-  @media screen and (max-width: 650px) {
+  @media screen and (max-width: 1350px) {
+    grid-template-columns: auto;
     padding: 1em 0.5em;
   }
 }
 
-.order_container {
-  width: 100%;
-  max-width: 600px;
-
-  display: flex;
-  align-items: start;
-
-  @media screen and (max-width: 650px) {
-    flex-direction: column;
-  }
-}
-
-.message_container {
-  padding: 2px;
-
-  width: 100%;
-  max-width: 500px;
-
+.panel-container {
   display: grid;
   grid-template-rows: auto auto 1fr;
 
-  height: 95vh;
+  padding: 2px;
+  max-width: 800px;
+  height: calc(100vh - 5em);
   overflow: auto;
 }
 
-.message_nav {
+.panel-nav {
   display: flex;
-  align-items: center;
   justify-content: center;
-  gap: 0.25em;
+  align-items: center;
   flex-wrap: wrap;
-
+  gap: 0.25em;
   margin-bottom: 1.5em;
 }
 
-.message_nav > button {
+.panel-nav > button {
   position: relative;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5em;
+  min-width: 8em;
+  padding: 0.25em 0.5em;
+
+  &:focus-visible {
+    outline: 1px solid white;
+  }
+
   &::before {
     position: absolute;
     content: '';
     bottom: -3px;
-    left: 0;
+    left: 50%;
+    transform: translateX(-50%);
+
     width: 0;
     height: 3px;
 
@@ -187,6 +155,10 @@ export default defineComponent({
     background-color: colors.$accentCol;
   }
 
+  &[data-active='true'] {
+    color: colors.$accentCol;
+  }
+
   &[data-active='true']::before {
     width: 100%;
   }
diff --git a/yarn.lock b/yarn.lock
index 4cb2e04..74bfe0b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3122,10 +3122,10 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-lucide-vue-next@^0.525.0:
-  version "0.525.0"
-  resolved "https://registry.yarnpkg.com/lucide-vue-next/-/lucide-vue-next-0.525.0.tgz#94bafb8dcb6b6344dbbd8a00d8230cf5478e444e"
-  integrity sha512-Xf8+x8B2DrnGDV/rxylS+KBp2FIe6ljwDn2JsGTZZvXIfhmm/q+nv8RuGO1OyoMjOVkkz7CqtUqJfwtFPRbB2w==
+lucide-vue-next@^0.562.0:
+  version "0.562.0"
+  resolved "https://registry.yarnpkg.com/lucide-vue-next/-/lucide-vue-next-0.562.0.tgz#a4cc08c2d00b9664c768e5da76e6634212a02a23"
+  integrity sha512-LN0BLGKMFulv0lnfK29r14DcngRUhIqdcaL0zXTt2o0oS9odlrjCGaU3/X9hIihOjjN8l8e+Y9G/famcNYaI7Q==
 
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"