From 640e31f900e4e81983ef2d6c0ee5714d0e837603 Mon Sep 17 00:00:00 2001
From: John O'Keefe <git@linuxhg.com>
Date: Tue, 15 Sep 2026 21:35:49 -0400
Subject: [PATCH] fix(ui): move refresh button into watchlist header next to
 sort

Relocate RefreshWatchListButton from the Home route into the WatchList header row beside Sort, so refresh lives with the list it refreshes. Tweak header styling to fit the new layout (text-nowrap on the button, max-h/margins on the sort select).
---
 frontend/src/helperComponents/RefreshWatchListButton.svelte | 2 +-
 frontend/src/helperComponents/Sort.svelte                   | 2 +-
 frontend/src/helperComponents/WatchList.svelte              | 6 +++++-
 frontend/src/routes/Home.svelte                             | 1 -
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/helperComponents/RefreshWatchListButton.svelte b/frontend/src/helperComponents/RefreshWatchListButton.svelte
index 3f9d660..d61e0ed 100644
--- a/frontend/src/helperComponents/RefreshWatchListButton.svelte
+++ b/frontend/src/helperComponents/RefreshWatchListButton.svelte
@@ -6,7 +6,7 @@
 <div class="flex justify-end">
   <button
     type="button"
-    class="py-2 px-4 mt-4 mr-4 bg-gray-700 rounded-lg"
+    class="py-2 px-4 mt-4 mr-4 text-nowrap bg-gray-700 rounded-lg"
     on:click={async () => {
       loading.set(true);
       await CheckIfAniListLoggedInAndLoadWatchList();
diff --git a/frontend/src/helperComponents/Sort.svelte b/frontend/src/helperComponents/Sort.svelte
index a735312..4111f15 100644
--- a/frontend/src/helperComponents/Sort.svelte
+++ b/frontend/src/helperComponents/Sort.svelte
@@ -66,7 +66,7 @@
 
 <select
   id="sort"
-  class="border rounded-lg block p-1.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
+  class="border rounded-lg block max-h-10 mt-4 mx-2 p-1.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
   bind:value={$aniListSort}
   on:change={() => changeWatchListSort()}
 >
diff --git a/frontend/src/helperComponents/WatchList.svelte b/frontend/src/helperComponents/WatchList.svelte
index 8da353d..781ba35 100644
--- a/frontend/src/helperComponents/WatchList.svelte
+++ b/frontend/src/helperComponents/WatchList.svelte
@@ -11,6 +11,7 @@
   import loader from "../helperFunctions/loader";
   import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
   import Sort from "../helperComponents/Sort.svelte";
+    import RefreshWatchListButton from "./RefreshWatchListButton.svelte";
 
   let isAniListLoggedIn: boolean;
   let aniListWatchListLoaded: AniListCurrentUserWatchList;
@@ -26,7 +27,10 @@
     >
       <div class="flex justify-between items-center mb-4">
         <h1 class="text-left text-xl font-bold">Your AniList WatchList</h1>
-        <Sort />
+        <div class="flex">
+          <Sort />
+          <RefreshWatchListButton />
+        </div>
       </div>
 
       <div
diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
index cf04d4b..3868d39 100644
--- a/frontend/src/routes/Home.svelte
+++ b/frontend/src/routes/Home.svelte
@@ -46,7 +46,6 @@
     </div>
   </div>
 {:else if isAniListLoggedIn && isAniListPrimary}
-  <RefreshWatchListButton />
   <div class="container py-10">
     <Pagination />
     <WatchList />