Fix useContent not using cookies therefore skipping the auth step

components/base/Loading.vue

@@ -1,5 +1,5 @@
 <template>
-    <span :class="{'w-6 h-6 after:-top-[4px] after:-left-[4px] after:w-6 after:h-6 after:border-4': size === 'normal', 'w-4 h-4 after:-top-[2px] after:-left-[2px] after:w-4 after:h-4 after:border-2': size === 'small', 'w-12 h-12 after:-top-[6px] after:-left-[6px] after:w-12 after:h-12 after:border-[6px]': size === 'large'}" class="after:block after:relative after:rounded-full after:border-transparent after:border-t-accent-purple after:animate-spin"></span>
+    <span :class="{'w-6 h-6 border-4 border-transparent after:-top-[4px] after:-left-[4px] after:w-6 after:h-6 after:border-4': size === 'normal', 'w-4 h-4 after:-top-[2px] after:-left-[2px] after:w-4 after:h-4 after:border-2': size === 'small', 'w-12 h-12 after:-top-[6px] after:-left-[6px] after:w-12 after:h-12 after:border-[6px]': size === 'large'}" class="after:block after:relative after:rounded-full after:border-transparent after:border-t-accent-purple after:animate-spin"></span>
 </template>
 
 <script setup lang="ts">

components/canvas/CanvasEdge.vue

@@ -2,8 +2,8 @@
 import type { CanvasColor } from "~/types/canvas";
 
 type Direction = 'bottom' | 'top' | 'left' | 'right';
-interface Props
-{
+
+const props = defineProps<{
     path: {
         path: string;
         from: { x: number; y: number };
@@ -12,8 +12,7 @@ interface Props
     };
     color?: CanvasColor;
     label?: string;
-}
-const props = defineProps<Props>();
+}>();
 
 const rotation: Record<Direction, string> = {
     top: "180",

components/page/Canvas.vue

@@ -1,10 +1,3 @@
-<script lang="ts">
-function cancelEvent(e: Event)
-{
-    e.preventDefault();
-}
-</script>
-
 <script setup lang="ts">
 import { useDrag, useHover, usePinch, useWheel } from '@vueuse/gesture';
 import { Icon } from '@iconify/vue/dist/iconify.js';
@@ -80,7 +73,7 @@ dark:border-dark-purple
 
 */
 
-/*const cancelEvent = (e: Event) => e.preventDefault()
+const cancelEvent = (e: Event) => e.preventDefault()
 useHover(({ hovering }) => {
     if (!hovering) {
         //@ts-ignore
@@ -95,7 +88,7 @@ useHover(({ hovering }) => {
     document.addEventListener('gesturechange', cancelEvent)
 }, {
     domTarget: canvasRef,
-});*/
+});
 
 const dragHandler = useDrag(({ delta: [x, y] }: { delta: number[] }) => { 
     dispX.value += x / zoom.value;
@@ -149,7 +142,7 @@ const pinchHandler = usePinch(({ offset: [z] }: { offset: number[] }) => {
             </div>
         </div>
         <div :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}" >
-            <CanvasRenderer :path="path" />
+            <CanvasRenderer :path="path"  />
         </div>
     </div>
 </template>