Format codebase

src/components/MovieCard.vue

@@ -20,20 +20,13 @@ const alreadyAdded = computed(() =>
 
 <template>
   <div
-    class="card relative w-full h-full overflow-hidden
+    class="card relative w-full h-full overflow-hidden bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-md hover:shadow-xl transition-all duration-300"
-           bg-white/70 backdrop-blur-md border border-gray-200/60
-           shadow-md hover:shadow-xl transition-all duration-300"
     v-motion-fade-visible-once
   >
     <!-- Poster -->
     <router-link :to="{ name: 'details', params: { id: props.movie.imdbID } }">
-      <figure
+      <figure class="overflow-hidden flex items-center justify-center aspect-[2/3] bg-gray-50">
-        class="overflow-hidden flex items-center justify-center aspect-[2/3] bg-gray-50"
+        <span v-if="props.loading" class="loading loading-ring loading-lg text-primary"></span>
-      >
-        <span
-          v-if="props.loading"
-          class="loading loading-ring loading-lg text-primary"
-        ></span>
 
         <div v-else-if="imageLoadFailed" class="flex items-center justify-center">
           <svg
@@ -72,9 +65,7 @@ const alreadyAdded = computed(() =>
     <div class="card-body p-4 flex flex-col">
       <router-link :to="{ name: 'details', params: { id: props.movie.imdbID } }">
         <h2
-          class="card-title text-base font-semibold
+          class="card-title text-base font-semibold bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
-                 bg-gradient-to-r from-gray-700 to-gray-500
-                 bg-clip-text text-transparent"
         >
           {{ props.movie.Title }}
         </h2>
@@ -84,22 +75,14 @@ const alreadyAdded = computed(() =>
       <div class="card-actions justify-end mt-auto">
         <button
           v-if="!alreadyAdded"
-          class="btn btn-sm px-4
+          class="btn btn-sm px-4 bg-gradient-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
-                 bg-gradient-to-r from-gray-100 to-gray-200
-                 border border-gray-300 text-gray-700
-                 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900
-                 transition"
           @click="store.addMovie(props.movie)"
         >
           Add
         </button>
         <button
           v-else
-          class="btn btn-sm px-4
+          class="btn btn-sm px-4 bg-gradient-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200 hover:text-red-700 transition"
-                 bg-gradient-to-r from-red-50 to-red-100
-                 border border-red-200 text-red-600
-                 hover:from-red-100 hover:to-red-200 hover:text-red-700
-                 transition"
           @click="store.removeMovie(props.movie.imdbID)"
         >
           Remove

src/components/NavBar.vue

@@ -1,19 +1,12 @@
 <template>
   <div
-    class="navbar sticky top-0 z-20
+    class="navbar sticky top-0 z-20 bg-white/70 backdrop-blur-md border-b border-gray-200/60 shadow-sm transition"
-           bg-white/70 backdrop-blur-md border-b border-gray-200/60
-           shadow-sm transition"
   >
     <!-- Left -->
     <div class="navbar-start">
       <!-- Mobile dropdown -->
       <div class="dropdown">
-        <div
+        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden" aria-label="Menu">
-          tabindex="0"
-          role="button"
-          class="btn btn-ghost lg:hidden"
-          aria-label="Menu"
-        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             class="h-6 w-6 text-gray-600"
@@ -31,20 +24,19 @@
         </div>
         <ul
           tabindex="-1"
-          class="menu menu-sm dropdown-content
+          class="menu menu-sm dropdown-content mt-3 w-52 p-2 rounded-lg shadow-md bg-white/80 backdrop-blur-md border border-gray-200/60"
-                 mt-3 w-52 p-2 rounded-lg shadow-md
-                 bg-white/80 backdrop-blur-md border border-gray-200/60"
         >
           <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/">Home</RouterLink></li>
-          <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/list">Library</RouterLink></li>
+          <li>
+            <RouterLink class="text-gray-700 hover:text-gray-900" to="/list">Library</RouterLink>
+          </li>
           <li><RouterLink class="text-gray-700 hover:text-gray-900" to="/add">Add</RouterLink></li>
         </ul>
       </div>
 
       <!-- Logo -->
       <RouterLink
-        class="btn btn-ghost normal-case text-2xl font-bold
+        class="btn btn-ghost normal-case text-2xl font-bold bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
-               bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
         to="/"
       >
         To Vue
@@ -54,17 +46,26 @@
     <!-- Center (desktop menu) -->
     <div class="navbar-center hidden lg:flex">
       <ul class="menu menu-horizontal px-1 space-x-4">
-        <li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/">Home</RouterLink></li>
+        <li>
-        <li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/list">Library</RouterLink></li>
+          <RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/">Home</RouterLink>
-        <li><RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/add">Add</RouterLink></li>
+        </li>
+        <li>
+          <RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/list"
+            >Library</RouterLink
+          >
+        </li>
+        <li>
+          <RouterLink class="text-gray-700 hover:text-gray-900 transition" to="/add"
+            >Add</RouterLink
+          >
+        </li>
       </ul>
     </div>
 
     <!-- Right -->
     <div class="navbar-end">
       <RouterLink
-        class="btn px-5 bg-gradient-to-r from-gray-100 to-gray-200
+        class="btn px-5 bg-gradient-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
-               border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300"
         to="/list"
       >
         Go to library

src/components/SearchBar.vue

@@ -14,10 +14,7 @@ function onSubmit() {
 <template>
   <form @submit.prevent="onSubmit" class="flex justify-center mb-8">
     <div
-      class="flex items-center w-full max-w-md
+      class="flex items-center w-full max-w-md bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-sm hover:shadow-md transition rounded-lg overflow-hidden"
-             bg-white/70 backdrop-blur-md border border-gray-200/60
-             shadow-sm hover:shadow-md transition
-             rounded-lg overflow-hidden"
     >
       <!-- Icon -->
       <span class="pl-3 text-gray-400">

src/router/index.ts

@@ -32,7 +32,7 @@ const routes: RouteRecordRaw[] = [
     path: '/watch/:name/:id',
     name: 'watch',
     component: WatchView,
-  }
+  },
 ]
 
 const router = createRouter({

src/views/AddView.vue

@@ -105,8 +105,7 @@ watch(searchQuery, () => {
   <div class="container mx-auto px-4 py-12" v-motion-fade-visible-once>
     <!-- Title -->
     <h1
-      class="text-4xl font-extrabold text-center mb-10
+      class="text-4xl font-extrabold text-center mb-10 bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
-             bg-gradient-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent"
     >
       Add a Movie
     </h1>
@@ -133,8 +132,7 @@ watch(searchQuery, () => {
     <!-- Empty state -->
     <p
       v-else
-      class="text-center text-gray-500 mt-16
+      class="text-center text-gray-500 mt-16 bg-gray-50/60 border border-gray-200 rounded-lg py-12"
-             bg-gray-50/60 border border-gray-200 rounded-lg py-12"
     >
       Search for a movie to add it to your list
     </p>
@@ -145,4 +143,3 @@ watch(searchQuery, () => {
     </div>
   </div>
 </template>
-

src/views/HomeView.vue

@@ -5,9 +5,7 @@
     <div class="flex flex-col items-center justify-center text-center">
       <h1 class="text-5xl font-bold mb-8 leading-tight">
         Welcome to <br />
-        <span class="text-6xl font-extrabold gradient-text">
+        <span class="text-6xl font-extrabold gradient-text"> To Be Watched </span>
-          To Be Watched
-        </span>
       </h1>
 
       <p class="text-lg text-gray-600 max-w-2xl mb-12">
@@ -16,11 +14,7 @@
 
       <RouterLink
         to="/add"
-        class="btn px-8 py-3 text-lg font-medium
+        class="btn px-8 py-3 text-lg font-medium bg-gradient-to-r from-gray-100 to-gray-200 border border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
-               bg-gradient-to-r from-gray-100 to-gray-200
-               border border-gray-300 text-gray-700
-               hover:from-gray-200 hover:to-gray-300 hover:text-gray-900
-               transition"
       >
         Get Started
       </RouterLink>
@@ -32,9 +26,9 @@
 .gradient-text {
   background: linear-gradient(
     90deg,
-    #6b7280 0%,   /* gray-500 */
+    #6b7280 0%,
-    #818cf8 50%,  /* indigo-400 */
+    /* gray-500 */ #818cf8 50%,
-    #22d3ee 100%  /* cyan-400 */
+    /* indigo-400 */ #22d3ee 100% /* cyan-400 */
   );
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

src/views/WatchView.vue

@@ -1,15 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
 const movieId = ref(route.params.id as string)
 const movieName = ref(route.params.name as string)
 const isLoaded = ref(false)
-
-onMounted(() => {
-  // You could add extra logic here if needed
-})
 </script>
 
 <template>