restruct: divide logic and layout into components

src/components/App/MainBottom.vue

@@ -0,0 +1,17 @@
+<template>
+  <div v-if="globalStore.generatedDate" class="text-center text-sm text-zinc-400 mt-1 print:hidden">
+    Rozkład wygenerowany w
+    {{
+      globalStore.generatedMs
+    }}ms - aktualny dla godziny:
+    {{
+      globalStore.generatedDate.toLocaleTimeString()
+    }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from '../../stores/global.store';
+
+const globalStore = useGlobalStore();
+</script>

src/components/App/MainContainer.vue

@@ -0,0 +1,13 @@
+<template>
+  <main class="grid print:block p-3 mx-auto max-w-[800px] h-screen grid-rows-[auto_1fr_20px] gap-1">
+    <TimetableSelect />
+    <TrainTimetable />
+    <MainBottom />
+  </main>
+</template>
+
+<script setup lang="ts">
+import TimetableSelect from '../Timetable/TimetableSelect.vue';
+import TrainTimetable from '../Timetable/TrainTimetable.vue';
+import MainBottom from './MainBottom.vue';
+</script>

src/components/App/Navbar.vue

@@ -0,0 +1,18 @@
+<template>
+  <nav class="bg-zinc-900 w-full p-1 print:hidden flex justify-between items-center">
+    <div class="flex items-center">
+      <img src="/favicon.svg" class="size-8 inline" />
+      <b class="ml-2 text-lg"
+        >Rozkładownik TD2 <sup class="font-semibold text-zinc-300">{{ version }}</sup></b
+      >
+    </div>
+    <div v-if="apiMode == 'mocking'"><ExclamationTriangleIcon class="size-6 inline mr-1 text-yellow-400" /> API mocking</div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { version } from '../../../package.json';
+import { ExclamationTriangleIcon } from '@heroicons/vue/16/solid';
+
+const apiMode = import.meta.env.VITE_API_MODE;
+</script>