refactor(frontend): extract refresh button into standalone component and put sort dropdown in watchlist header

Move the refresh button out of the WatchList component header and into
its own RefreshWatchListButton.svelte component, placing it at the top
of the Home route page with right-alignment. This gives the refresh
control better visibility at the page level rather than being buried
inside the watchlist header.

Replace the removed refresh button in the WatchList header with the new
Sort dropdown component, giving users sort controls directly alongside
the watchlist title.

frontend/src/helperComponents/RefreshWatchListButton.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
+  import { loading } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
+</script>
+
+<div class="flex justify-end">
+  <button
+    type="button"
+    class="py-2 px-4 mt-4 mr-4 bg-gray-700 rounded-lg"
+    on:click={async () => {
+      loading.set(true);
+      await CheckIfAniListLoggedInAndLoadWatchList();
+      loading.set(false);
+    }}
+  >
+    Refresh WatchList
+  </button>
+</div>

frontend/src/helperComponents/WatchList.svelte

@@ -10,6 +10,7 @@
   import { Rating } from "flowbite-svelte";
   import loader from "../helperFunctions/loader";
   import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
+  import Sort from "../helperComponents/Sort.svelte";
 
   let isAniListLoggedIn: boolean;
   let aniListWatchListLoaded: AniListCurrentUserWatchList;
@@ -25,17 +26,7 @@
     >
       <div class="flex justify-between items-center mb-4">
         <h1 class="text-left text-xl font-bold">Your AniList WatchList</h1>
-        <button
+        <Sort />
-          type="button"
-          class="py-2 px-4 bg-gray-700 rounded-lg"
-          on:click={async () => {
-            loading.set(true);
-            await CheckIfAniListLoggedInAndLoadWatchList();
-            loading.set(false);
-          }}
-        >
-          Refresh WatchList
-        </button>
       </div>
 
       <div

frontend/src/routes/Home.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Pagination from "../helperComponents/Pagination.svelte";
   import WatchList from "../helperComponents/WatchList.svelte";
+  import RefreshWatchListButton from "../helperComponents/RefreshWatchListButton.svelte";
   import {
     aniListLoggedIn,
     aniListPrimary,
@@ -45,6 +46,7 @@
     </div>
   </div>
 {:else if isAniListLoggedIn && isAniListPrimary}
+  <RefreshWatchListButton />
   <div class="container py-10">
     <Pagination />
     <WatchList />