From 2c7e2d0eff0d63aee05daeab32a3f39a58c3750c Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Mon, 30 Mar 2026 20:08:29 -0400
Subject: [PATCH] feat(frontend): add error modal component

Add new ErrorModal component for API error display:
- Auto-displays when apiError store is set
- Shows service name, error message, and status code
- Provides "Retry Connection" button to attempt reconnection
- Provides "Dismiss" button to close modal and continue
- Integrates with all three services (AniList, MAL, Simkl)
- Uses flowbite-svelte Modal and Button components
- Proper Svelte event handling with on:click

Uses Tailwind CSS for styling with red error theme and helpful messaging.
---
 .../src/helperComponents/ErrorModal.svelte    | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 frontend/src/helperComponents/ErrorModal.svelte

diff --git a/frontend/src/helperComponents/ErrorModal.svelte b/frontend/src/helperComponents/ErrorModal.svelte
new file mode 100644
index 0000000..598d4d1
--- /dev/null
+++ b/frontend/src/helperComponents/ErrorModal.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import {
+    apiError,
+    isApiDown,
+    clearApiError,
+    setApiError,
+  } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
+  import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
+  import { CheckIfMALLoggedInAndSetUser } from "../helperModules/CheckIfMyAnimeListLoggedIn.svelte";
+  import { CheckIfSimklLoggedInAndSetUser } from "../helperModules/CheckIsSimklLoggedIn.svelte";
+  import { Modal, Button } from "flowbite-svelte";
+  let showModal = false;
+  $: if ($apiError) {
+    showModal = true;
+  }
+  async function handleRetry() {
+    const service = $apiError?.service;
+    clearApiError();
+
+    try {
+      if (service === "anilist") {
+        await CheckIfAniListLoggedInAndLoadWatchList();
+      } else if (service === "mal") {
+        await CheckIfMALLoggedInAndSetUser();
+      } else if (service === "simkl") {
+        await CheckIfSimklLoggedInAndSetUser();
+      }
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : String(err);
+      setApiError(
+        service || "unknown",
+        `Retry failed: ${errorMsg}`,
+        undefined,
+        true,
+      );
+    }
+  }
+  function handleDismiss() {
+    clearApiError();
+    showModal = false;
+  }
+</script>
+
+{#if showModal && $apiError}
+  <Modal
+    open={showModal}
+    title="{$apiError.service.toUpperCase()} API Error"
+    size="md"
+  >
+    <div class="space-y-4">
+      <div class="p-4 bg-red-50 border border-red-200 rounded-lg">
+        <p class="text-red-800 font-medium">{$apiError.message}</p>
+        {#if $apiError.statusCode}
+          <p class="text-red-600 text-sm mt-2">
+            Status: {$apiError.statusCode}
+          </p>
+        {/if}
+      </div>
+      <p class="text-gray-600">
+        The application will remain open. You can retry the connection or
+        dismiss this message to continue with limited functionality.
+      </p>
+    </div>
+    <div slot="footer" class="flex gap-3 justify-end">
+      {#if $apiError.canRetry}
+        <Button on:click={handleRetry} class="bg-blue-600 hover:bg-blue-700">
+          Retry Connection
+        </Button>
+      {/if}
+      <Button on:click={handleDismiss} color="alternative">Dismiss</Button>
+    </div>
+  </Modal>
+{/if}