John O'Keefe
640e31f900
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).
57 lines
1.7 KiB
Svelte
57 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import Pagination from "../helperComponents/Pagination.svelte";
|
|
import WatchList from "../helperComponents/WatchList.svelte";
|
|
import RefreshWatchListButton from "../helperComponents/RefreshWatchListButton.svelte";
|
|
import {
|
|
aniListLoggedIn,
|
|
aniListPrimary,
|
|
loading,
|
|
isApiDown,
|
|
apiError,
|
|
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
|
|
import loader from "../helperFunctions/loader";
|
|
|
|
let isAniListPrimary: boolean;
|
|
let isAniListLoggedIn: boolean;
|
|
|
|
aniListPrimary.subscribe((value) => (isAniListPrimary = value));
|
|
aniListLoggedIn.subscribe((value) => (isAniListLoggedIn = value));
|
|
</script>
|
|
|
|
{#if $isApiDown}
|
|
<div class="container py-10">
|
|
<div
|
|
class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center"
|
|
>
|
|
<svg
|
|
class="mx-auto h-12 w-12 text-yellow-600 mb-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
|
/>
|
|
</svg>
|
|
<h2 class="text-xl font-semibold text-yellow-900 mb-2">
|
|
API Unavailable
|
|
</h2>
|
|
<p class="text-yellow-700 mb-4">
|
|
The {$apiError?.service || "service"} is currently unavailable. The app will
|
|
remain open, and you can retry when the service is back online.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{:else if isAniListLoggedIn && isAniListPrimary}
|
|
<div class="container py-10">
|
|
<Pagination />
|
|
<WatchList />
|
|
<Pagination />
|
|
</div>
|
|
{:else}
|
|
<div use:loader={loading}></div>
|
|
{/if}
|