feat: client only

Author: prplwtf

apps/frontend/src/components/elements/Marquee.vue

@@ -160,15 +160,15 @@ const handleTouchStart = (e: TouchEvent) => {
 
   isDragging.value = true
   const touch = e.touches[0]
-  dragStartX.value = touch.clientX
+  dragStartX.value = touch?.clientX || 0
   dragStartTranslateX.value = translateX.value
   hasDragged = false
 
   // Reset velocity when starting a new drag
   velocity.value = 0
 
   // Initialize velocity tracking
-  lastMouseX = touch.clientX
+  lastMouseX = touch?.clientX || 0
   lastMouseTime = Date.now()
 
   document.addEventListener('touchmove', handleTouchMove, { passive: false })
@@ -180,7 +180,7 @@ const handleTouchMove = (e: TouchEvent) => {
   if (!isDragging.value || e.touches.length !== 1) return
 
   const touch = e.touches[0]
-  const deltaX = touch.clientX - dragStartX.value
+  const deltaX = (touch?.clientX || 0) - dragStartX.value
   translateX.value = dragStartTranslateX.value + deltaX
 
   // Track if user has actually dragged (moved more than 5px)
@@ -195,11 +195,11 @@ const handleTouchMove = (e: TouchEvent) => {
   const timeDelta = currentTime - lastMouseTime
 
   if (timeDelta > 0) {
-    const moveDelta = touch.clientX - lastMouseX
+    const moveDelta = (touch?.clientX || 0) - lastMouseX
     velocity.value = (moveDelta / timeDelta) * 16 // normalize to ~60fps
   }
 
-  lastMouseX = touch.clientX
+  lastMouseX = touch?.clientX || 0
   lastMouseTime = currentTime
 
   // Normalize position to keep within bounds for seamless looping

apps/frontend/src/components/ui/marketing/Marquee.vue

@@ -1,45 +1,19 @@
 <template>
   <div :class="props?.class" class="marquee h-32">
-    <!-- <NuxtMarquee :autoFill="true" :pauseOnHover="true" :speed="35">
-      <div
-        v-for="(item, index) in items"
-        :key="`item-${index}`"
-        class="mx-4 inline h-[128px] w-[256px]"
-      >
-        <NuxtLink :to="`/browse/${item.identifier}`" tabindex="-1">
-          <div
-            class="overflow-hidden rounded-2xl transition-transform hover:scale-95"
-          >
-            <div
-              class="absolute h-[128px] w-[256px] bg-neutral-950/50 opacity-0 transition-all hover:opacity-100"
-            >
-              <Icon
-                name="memory:arrow-up-right-box"
-                :size="48"
-                mode="svg"
-                class="top-6/12 left-6/12 -translate-3/6 absolute"
-              />
-            </div>
-            <NuxtImg
-              :src="`https://s3.blueprint.zip/static/${item.identifier}.jpeg`"
-              :height="128"
-              :width="256"
-              :alt="item.name"
-              class="aspect-[2/1] bg-neutral-800 object-cover"
-            />
-          </div>
-        </NuxtLink>
-      </div>
-    </NuxtMarquee> -->
-    <ElementsMarquee :direction="'left'" :speed="35" :pause-on-hover="true">
+    <client-only>
+      <ElementsMarquee :direction="'left'" :speed="35" :pause-on-hover="true">
         <div
           v-for="(item, index) in items"
           :key="`item-${index}`"
           class="mx-4 inline h-[128px] w-[256px]"
         >
           <NuxtLink :to="`/browse/${item.identifier}`" tabindex="-1">
-            <div class="overflow-hidden rounded-2xl transition-transform hover:scale-95">
-              <div class="absolute h-[128px] w-[256px] bg-neutral-950/50 opacity-0 transition-all hover:opacity-100">
+            <div
+              class="overflow-hidden rounded-2xl transition-transform hover:scale-95"
+            >
+              <div
+                class="absolute h-[128px] w-[256px] bg-neutral-950/50 opacity-0 transition-all hover:opacity-100"
+              >
                 <Icon
                   name="memory:arrow-up-right-box"
                   :size="48"
@@ -58,6 +32,7 @@
           </NuxtLink>
         </div>
       </ElementsMarquee>
+    </client-only>
   </div>
 </template>