Added stylelint, improved code readability, implemented swipe controls

layouts/Card.vue

@@ -1,7 +1,53 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { UseSwipeDirection } from '@vueuse/core'
+import { useSwipe } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import { usePageStore } from '~/stores/pages'
+
+const router = useRouter()
+const route = useRoute()
+const card = ref<HTMLElement | null>(null)
+
+const pageStore = usePageStore()
+const { pages } = storeToRefs(pageStore)
+
+const swipe = useSwipe(card, {
+  passive: true,
+  onSwipe: (touch: TouchEvent) => {
+    console.log(card.value?.offsetWidth, swipe.lengthX.value)
+  },
+  onSwipeEnd: (touch: TouchEvent, direction: UseSwipeDirection) => {
+    const currentPage = pages.value.find(
+      (page) => page.path === route.fullPath,
+    )!
+
+    const currentIndex = pages.value.indexOf(currentPage)
+
+    if (
+      card.value?.offsetWidth &&
+      Math.abs(swipe.lengthX.value) / card.value?.offsetWidth >= 0.5
+    ) {
+      if (swipe.lengthX.value > 0) {
+        router.push(
+          toRaw(pages.value)[
+            currentIndex - 1 < 0
+              ? pages.value.length - (currentIndex + 1)
+              : currentIndex - 1
+          ].path,
+        )
+      } else {
+        router.push(
+          toRaw(pages.value)[(currentIndex + 1) % pages.value.length].path,
+        )
+      }
+    }
+  },
+})
+</script>
 
 <template>
   <main
+    ref="card"
     class="dimensions background rounded-1 overflow-auto d-flex flex-column gap-3 gap-sm-2 px-4 pt-4 pb-3"
   >
     <Navigation />
@@ -12,5 +58,3 @@
     <slot name="footer" />
   </main>
 </template>
-
-<style scoped lang="scss"></style>