John O'Keefe
8d5d8ac2d7
flowbite-svelte v1 turns components into runes: on:click on
components becomes onclick props (native elements keep on:), Modal
footers become {#snippet footer()}, Button["color"] indexing becomes
the exported ButtonProps type, and slate is gone from the color
union so the datepicker greys map to gray.
Stores now use the generated bindings models (what the Go backend
actually returns) instead of hand-written shapes that drifted from
them - nullability of genres/tags/mediaList included. That single
move clears most of the newly surfaced type errors, including the
optional episodes/nextAiringEpisode cluster. The rest is strictness
debt the old red check masked: definite-assignment on
subscribe-fed lets, null guards on querySelector/match results and
date parsing (two of which fixed latent throw-on-garbage paths),
aria-labels on icon-only buttons, the completed default-data
literal, and a shared flex centering context for the detail poster
column so poster and stars align by construction at every width.
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}
|