Enhance movie management features by adding MovieList component to display user's watchlist; update MovieCard to include add/remove functionality for watchlist; refactor SearchMovies layout for improved structure; adjust global styles for primary color.

src/components/molecules/MovieList/index.tsx

@@ -0,0 +1,31 @@
+"use client";
+import { MovieCard } from "@/components/atoms/MovieCard";
+import { useGlobalStore } from "@/app/store/globalStore";
+
+export const MovieList = () => {
+  const { movies } = useGlobalStore();
+
+  return (
+    <section className="my-6">
+      <div className="container">
+        <h2 className="text-2xl font-bold">My Watchlist</h2>
+        {movies.length === 0 && (
+          <p className="text-text/60 text-sm">No movies found</p>
+        )}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mt-8">
+          {movies
+            .sort((a, b) => a.title.localeCompare(b.title))
+            .map((movie) => (
+              <MovieCard
+                key={movie.id}
+                {...movie}
+                imagePath={movie.posterPath || ""}
+                seen={movie.seen === 1}
+                favorite={movie.favorite === 1}
+              />
+            ))}
+        </div>
+      </div>
+    </section>
+  );
+};

src/components/molecules/SearchMovies/index.tsx

@@ -14,24 +14,29 @@ export const SearchMovies = () => {
   };
 
   return (
-    <div className="container">
-      <div className="row justify-center">
-        <div className="col-5">
-          <SearchInput onChange={handleSearch} />
+    <section className="my-6">
+      <div className="container">
+        <div className="row justify-center">
+          <div className="col-5">
+            <SearchInput onChange={handleSearch} />
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mt-8">
+          {results.map((result) => (
+            <MovieCard
+              key={result.id}
+              id={result.id}
+              title={result.title}
+              releaseDate={result.release_date}
+              popularity={result.popularity}
+              overview={result.overview}
+              imagePath={result.poster_path}
+              seen={false}
+              favorite={false}
+            />
+          ))}
         </div>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mt-8">
-        {results.map((result) => (
-          <MovieCard
-            key={result.id}
-            title={result.title}
-            releaseDate={result.release_date}
-            popularity={result.popularity}
-            overview={result.overview}
-            imagePath={result.poster_path}
-          />
-        ))}
-      </div>
-    </div>
+    </section>
   );
 };