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>
+  );
+};