Refactor UI components and clean up code style

Simplified Marquee and index page markup by removing redundant classes and props. Improved code style and consistency in ThreeCanvas.vue and app.vue, including formatting, event handling, and script setup. These changes enhance maintainability and readability without affecting core functionality.

Author: iman-mohamadi

app/app.vue

@@ -6,6 +6,9 @@
   </UApp>
 </template>
 
-<script setup></script>
-useHead({ htmlAttrs: { class: 'dark' } })
-<style></style>
+<script setup>
+useHead({ htmlAttrs: { class: 'dark', }, },)
+</script>
+
+<style>
+</style>

app/components/Marquee.vue

@@ -1,14 +1,6 @@
 <template>
-  <UMarquee
-    pause-on-hover
-    :overlay="false"
-    :repeat="3"
-    :ui="{
-      root: 'gap-0',
-      content: 'py-1',
-    }"
-  >
-    <div class="space-y-3 px-4 py-3 border-x" v-for="item in items" :key="item">
+  <UMarquee>
+    <div class="space-y-3 px-4 py-3 border" v-for="item in items" :key="item">
       <p>{{ item.title }}</p>
       <div class="flex items-center gap-2">
         <UAvatar :src="item.avatar" />

app/components/ThreeCanvas.vue

@@ -1,51 +1,54 @@
 <template>
-  <div ref="canvasContainer" class="fixed inset-0 w-full h-full -z-10 bg-neutral-950">
-    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/80 pointer-events-none"></div>
+  <div
+    ref="canvasContainer"
+    class="fixed inset-0 w-full h-full -z-10 bg-neutral-950"
+  >
+    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/80 pointer-events-none" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
-import { ThreeScene } from "~/utils/ThreeScene";
+import { ref, onMounted, onBeforeUnmount, } from 'vue'
+import { ThreeScene, } from '~/utils/ThreeScene'
 
-const canvasContainer = ref<HTMLElement | null>(null);
-let threeScene: ThreeScene | null = null;
-let resizeObserver: ResizeObserver | null = null;
+const canvasContainer = ref<HTMLElement | null>(null,)
+let threeScene: ThreeScene | null = null
+let resizeObserver: ResizeObserver | null = null
 
 const handleScroll = () => {
   if (threeScene) {
-    threeScene.onScroll(window.scrollY, document.body.scrollHeight);
+    threeScene.onScroll(window.scrollY, document.body.scrollHeight,)
   }
-};
+}
 
-const handleMouseMove = (event: MouseEvent) => {
+const handleMouseMove = (event: MouseEvent,) => {
   if (threeScene) {
-    threeScene.onMouseMove(event.clientX, event.clientY);
+    threeScene.onMouseMove(event.clientX, event.clientY,)
   }
-};
+}
 
 onMounted(() => {
-  if (!canvasContainer.value) return;
+  if (!canvasContainer.value) return
 
-  threeScene = new ThreeScene();
-  threeScene.init(canvasContainer.value);
+  threeScene = new ThreeScene()
+  threeScene.init(canvasContainer.value,)
 
   // 1. Observe Window Resize
-  resizeObserver = new ResizeObserver((entries) => {
-    const { width, height } = entries[0].contentRect;
-    threeScene?.updateSize(width, height);
-  });
-  resizeObserver.observe(canvasContainer.value);
+  resizeObserver = new ResizeObserver((entries,) => {
+    const { width, height, } = entries[0].contentRect
+    threeScene?.updateSize(width, height,)
+  },)
+  resizeObserver.observe(canvasContainer.value,)
 
   // 2. Add Event Listeners
-  window.addEventListener("scroll", handleScroll);
-  window.addEventListener("mousemove", handleMouseMove);
-});
+  window.addEventListener('scroll', handleScroll,)
+  window.addEventListener('mousemove', handleMouseMove,)
+},)
 
 onBeforeUnmount(() => {
-  window.removeEventListener("scroll", handleScroll);
-  window.removeEventListener("mousemove", handleMouseMove);
-  resizeObserver?.disconnect();
-  threeScene?.cleanup();
-});
+  window.removeEventListener('scroll', handleScroll,)
+  window.removeEventListener('mousemove', handleMouseMove,)
+  resizeObserver?.disconnect()
+  threeScene?.cleanup()
+},)
 </script>

app/pages/index.vue

@@ -3,7 +3,7 @@
     <section>
       <div class="container">
         <div
-          class="text-black dark:text-white aspect-2/1 border-x border-edge select-none sm:aspect-3/1 flex items-center justify-center text-black dark:text-white screen-line-before screen-line-after before:-top-px after:-bottom-px bg-black/0.75 bg-[radial-gradient(var(--pattern-foreground)_1px,transparent_0)] bg-size-[10px_10px] bg-center [--pattern-foreground:var(--color-zinc-950)]/5 dark:bg-white/0.75 dark:[--pattern-foreground:var(--color-white)]/5"
+          class="aspect-2/1 border-x border-edge select-none sm:aspect-3/1 flex items-center justify-center text-black dark:text-white screen-line-before screen-line-after before:-top-px after:-bottom-px bg-black/0.75 bg-[radial-gradient(var(--pattern-foreground)_1px,transparent_0)] bg-size-[10px_10px] bg-center [--pattern-foreground:var(--color-zinc-950)]/5 dark:bg-white/0.75 dark:[--pattern-foreground:var(--color-white)]/5"
           data-state="closed"
           data-slot="context-menu-trigger"
           style="-webkit-touch-callout: none"