✨ Switch to global date selector

src/components/date-selector.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { selectedDate, selectedDay } from "../store";
+import { dayNames } from "../definitions";
+import dayjs from "dayjs";
+import ArrowIcon from "./icons/arrow-icon.vue";
+</script>
+
+<template>
+  <div class="selector">
+    <ArrowIcon
+      @click="selectedDate = dayjs(selectedDate).subtract(1, 'day').toDate()"
+    />
+    <span
+      class="day"
+      @click="selectedDate = new Date(new Date().setUTCHours(0, 0, 0, 0))"
+    >
+      {{ dayNames[selectedDay + 1] }},
+      {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
+    </span>
+    <ArrowIcon
+      style="transform: rotate(180deg)"
+      @click="selectedDate = dayjs(selectedDate).add(1, 'day').toDate()"
+    />
+  </div>
+</template>
+
+<style scoped>
+.selector {
+  padding: 65px 10px 0px 10px;
+  display: grid;
+  grid-template-columns: 35px 1fr 35px;
+  align-items: center;
+  justify-items: center;
+}
+
+svg,
+span {
+  cursor: pointer;
+}
+</style>

src/components/icons/arrow-icon.vue

@@ -0,0 +1,19 @@
+<!-- From https://github.com/feathericons/feather -->
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-arrow-left"
+  >
+    <line x1="19" y1="12" x2="5" y2="12"></line>
+    <polyline points="12 19 5 12 12 5"></polyline>
+  </svg>
+</template>