From b68abfc1c95d77d6f0148c8bec67c47a063e5d13 Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Fri, 24 Apr 2026 23:00:50 -0400
Subject: [PATCH] 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.
---
 .../RefreshWatchListButton.svelte              | 18 ++++++++++++++++++
 frontend/src/helperComponents/WatchList.svelte | 13 ++-----------
 frontend/src/routes/Home.svelte                |  2 ++
 3 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/helperComponents/RefreshWatchListButton.svelte

diff --git a/frontend/src/helperComponents/RefreshWatchListButton.svelte b/frontend/src/helperComponents/RefreshWatchListButton.svelte
new file mode 100644
index 0000000..3f9d660
--- /dev/null
+++ b/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>
diff --git a/frontend/src/helperComponents/WatchList.svelte b/frontend/src/helperComponents/WatchList.svelte
index bf65049..8da353d 100644
--- a/frontend/src/helperComponents/WatchList.svelte
+++ b/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
-          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>
+        <Sort />
       </div>
 
       <div
diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
index ca4c0b3..cf04d4b 100644
--- a/frontend/src/routes/Home.svelte
+++ b/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 />