✨ Add swipe gestures for changing days

src/App.vue

@@ -1,23 +1,34 @@
 <script setup>
-import { RouterView } from "vue-router";
+import { RouterView, useRoute } from "vue-router";
 import TitleBar from "./components/titlebar-element.vue";
 import BottomNavbar from "./components/bottom-navbar.vue";
 import DateSelector from "./components/date-selector.vue";
 import LoadingElement from "./components/loading-element.vue";
 import { loading } from "./store";
+import { previousDay, nextDay } from "./util";
+import { computed } from "vue";
+
+const route = useRoute();
+const routeName = computed(() => route.name);
+const isDataView = computed(() => {
+  return (
+    routeName.value != "title.settings" && routeName.value != "title.login"
+  );
+});
+
+function swipeHandler(direction) {
+  if (!isDataView.value) return;
+  if (direction == "left") nextDay();
+  else if (direction == "right") previousDay();
+}
 </script>
 
 <template>
   <TitleBar />
-  <div class="center">
+  <div class="center" v-touch:swipe="swipeHandler">
     <main>
-      <DateSelector
-        v-show="$route.name != 'title.settings' && $route.name != 'title.login'"
-      />
-      <LoadingElement
-        :active="loading"
-        v-show="$route.name != 'title.settings' && $route.name != 'title.login'"
-      />
+      <DateSelector v-show="isDataView" />
+      <LoadingElement :active="loading" v-show="isDataView" />
       <RouterView />
     </main>
   </div>
@@ -44,6 +55,7 @@ body {
 .center {
   display: flex;
   justify-content: center;
+  min-height: 100vh;
 }
 
 main {