fix(ui): move refresh button into watchlist header next to sort
Release / release (push) Successful in 3m35s

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).
This commit is contained in:
John O'Keefe
2026-09-15 21:35:49 -04:00
parent fc29c696ce
commit 640e31f900
4 changed files with 7 additions and 4 deletions
@@ -6,7 +6,7 @@
<div class="flex justify-end"> <div class="flex justify-end">
<button <button
type="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 () => { on:click={async () => {
loading.set(true); loading.set(true);
await CheckIfAniListLoggedInAndLoadWatchList(); await CheckIfAniListLoggedInAndLoadWatchList();
+1 -1
View File
@@ -66,7 +66,7 @@
<select <select
id="sort" 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} bind:value={$aniListSort}
on:change={() => changeWatchListSort()} on:change={() => changeWatchListSort()}
> >
@@ -11,6 +11,7 @@
import loader from "../helperFunctions/loader"; import loader from "../helperFunctions/loader";
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte"; import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
import Sort from "../helperComponents/Sort.svelte"; import Sort from "../helperComponents/Sort.svelte";
import RefreshWatchListButton from "./RefreshWatchListButton.svelte";
let isAniListLoggedIn: boolean; let isAniListLoggedIn: boolean;
let aniListWatchListLoaded: AniListCurrentUserWatchList; let aniListWatchListLoaded: AniListCurrentUserWatchList;
@@ -26,7 +27,10 @@
> >
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h1 class="text-left text-xl font-bold">Your AniList WatchList</h1> <h1 class="text-left text-xl font-bold">Your AniList WatchList</h1>
<div class="flex">
<Sort /> <Sort />
<RefreshWatchListButton />
</div>
</div> </div>
<div <div
-1
View File
@@ -46,7 +46,6 @@
</div> </div>
</div> </div>
{:else if isAniListLoggedIn && isAniListPrimary} {:else if isAniListLoggedIn && isAniListPrimary}
<RefreshWatchListButton />
<div class="container py-10"> <div class="container py-10">
<Pagination /> <Pagination />
<WatchList /> <WatchList />