extracted modal from flowbite to make it more customized and added cancel button functionality

frontend/src/ChangeDataDialogue.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import {anilistModal} from "./GetAniListSingleItemAndOpenModal.svelte";
     import {anime} from "./GetAniListSingleItemAndOpenModal.svelte";
     import {Button} from "flowbite-svelte";
     import StarRatting from "@ernane/svelte-star-rating"
@@ -18,6 +19,11 @@
         10: "Masterpiece",
     }
 
+    const hide = (e) => {
+        e.preventDefault();
+        anilistModal.set(false)
+    };
+
     const title = anime.data.MediaList.media.title.english !== "" ?
         anime.data.MediaList.media.title.english :
         anime.data.MediaList.media.title.romaji
@@ -111,7 +117,7 @@
     }
 </script>
 
-<div>
+<div id="inapp-data">
     <div class="grid grid-cols-1 md:grid-cols-10 grid-flow-col gap-4">
         <div class="md:col-span-2 space-y-3">
             <img class="rounded-lg" src={anime.data.MediaList.media.coverImage.large} alt="{title} Cover Image">
@@ -234,6 +240,11 @@
             </div>
         </div>
     </div>
+    <div id="external-data">
+        <div id="anilist-data" class="flex flex-col md:flex-row md:pl-10 md:pr-10 pt-5 pb-5 justify-center md:gap-x-16 lg:gap-x-36 group">
+            <h2 class="text-left mb-1 text-base font-semibold text-gray-900 dark:text-white">AniList</h2>
+        </div>
+    </div>
     <footer class="bg-white rounded-lg shadow max-w-4-4 dark:bg-gray-800">
         <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-end">
             <Button
@@ -245,7 +256,8 @@
             <Button
                     class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4
                     focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white
-                    dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
+                    dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
+                    on:click={hide}>
                 Cancel
             </Button>
         </div>

frontend/src/modal/Modal.svelte

@@ -0,0 +1,155 @@
+<script>import { twMerge } from "tailwind-merge";
+import { Frame } from "flowbite-svelte";
+import { createEventDispatcher } from "svelte";
+import {CloseButton} from "flowbite-svelte";
+import focusTrap from "../../node_modules/flowbite-svelte/dist/utils/focusTrap.js";
+export let open = false;
+export let title = "";
+export let size = "md";
+export let color = "default";
+export let placement = "center";
+export let autoclose = false;
+export let outsideclose = false;
+export let dismissable = true;
+export let backdropClass = "fixed inset-0 z-20 bg-gray-900 bg-opacity-50 dark:bg-opacity-80";
+export let classBackdrop = void 0;
+export let dialogClass = "fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-30 w-full p-4 flex";
+export let classDialog = void 0;
+export let defaultClass = "relative flex flex-col mx-auto";
+export let headerClass = "flex justify-between items-center p-4 md:p-5 rounded-t-lg";
+export let classHeader = void 0;
+export let bodyClass = "p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain";
+export let classBody = void 0;
+export let footerClass = "flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg";
+export let classFooter = void 0;
+const dispatch = createEventDispatcher();
+$: dispatch(open ? "open" : "close");
+function prepareFocus(node) {
+  const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
+  let n;
+  while (n = walker.nextNode()) {
+    if (n instanceof HTMLElement) {
+      const el = n;
+      const [x, y] = isScrollable(el);
+      if (x || y) el.tabIndex = 0;
+    }
+  }
+  node.focus();
+}
+const getPlacementClasses = (placement2) => {
+  switch (placement2) {
+    case "top-left":
+      return ["justify-start", "items-start"];
+    case "top-center":
+      return ["justify-center", "items-start"];
+    case "top-right":
+      return ["justify-end", "items-start"];
+    case "center-left":
+      return ["justify-start", "items-center"];
+    case "center":
+      return ["justify-center", "items-center"];
+    case "center-right":
+      return ["justify-end", "items-center"];
+    case "bottom-left":
+      return ["justify-start", "items-end"];
+    case "bottom-center":
+      return ["justify-center", "items-end"];
+    case "bottom-right":
+      return ["justify-end", "items-end"];
+    default:
+      return ["justify-center", "items-center"];
+  }
+};
+const sizes = {
+  xs: "max-w-md",
+  sm: "max-w-lg",
+  md: "max-w-2xl",
+  lg: "max-w-4xl",
+  xl: "max-w-6xl"
+};
+const onAutoClose = (e) => {
+  const target = e.target;
+  if (autoclose && target?.tagName === "BUTTON") hide(e);
+};
+const onOutsideClose = (e) => {
+  const target = e.target;
+  if (outsideclose && target === e.currentTarget) hide(e);
+};
+const hide = (e) => {
+  e.preventDefault();
+  open = false;
+};
+const isScrollable = (e) => [e.scrollWidth > e.clientWidth && ["scroll", "auto"].indexOf(getComputedStyle(e).overflowX) >= 0, e.scrollHeight > e.clientHeight && ["scroll", "auto"].indexOf(getComputedStyle(e).overflowY) >= 0];
+function handleKeys(e) {
+  if (e.key === "Escape" && dismissable) return hide(e);
+}
+$: backdropCls = twMerge(backdropClass, classBackdrop);
+$: dialogCls = twMerge(dialogClass, classDialog, getPlacementClasses(placement));
+$: frameCls = twMerge(defaultClass, "w-full divide-y", $$props.class);
+$: headerCls = twMerge(headerClass, classHeader);
+$: bodyCls = twMerge(bodyClass, classBody);
+$: footerCls = twMerge(footerClass, classFooter);
+</script>
+
+{#if open}
+  <!-- backdrop -->
+  <div class={backdropCls}></div>
+  <!-- dialog -->
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <div on:keydown={handleKeys} on:wheel|preventDefault|nonpassive use:prepareFocus use:focusTrap on:click={onAutoClose} on:mousedown={onOutsideClose} class={dialogCls} tabindex="-1" aria-modal="true" role="dialog">
+    <div class="flex relative {sizes[size]} w-full max-h-full">
+      <!-- Modal content -->
+      <Frame rounded shadow {...$$restProps} class={frameCls} {color}>
+        <!-- Modal header -->
+        {#if $$slots.header || title}
+          <Frame class={headerCls} {color}>
+            <slot name="header">
+              <h3 class="text-xl font-semibold {color === 'default' ? '' : 'text-gray-900 dark:text-white'} p-0">
+                {title}
+              </h3>
+            </slot>
+            {#if dismissable}<CloseButton name="Close modal" {color} on:click={hide} />{/if}
+          </Frame>
+        {/if}
+        <!-- Modal body -->
+        <div class={bodyCls} role="document" on:keydown|stopPropagation={handleKeys} on:wheel|stopPropagation|passive>
+          {#if dismissable && !$$slots.header && !title}
+            <CloseButton name="Close modal" class="absolute top-3 end-2.5" {color} on:click={hide} />
+          {/if}
+          <slot></slot>
+        </div>
+        <!-- Modal footer -->
+        {#if $$slots.footer}
+          <Frame class={footerCls} {color}>
+            <slot name="footer"></slot>
+          </Frame>
+        {/if}
+      </Frame>
+    </div>
+  </div>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let open: boolean = false;
+@prop export let title: string = '';
+@prop export let size: SizeType = 'md';
+@prop export let color: ComponentProps<Frame>['color'] = 'default';
+@prop export let placement: ModalPlacementType = 'center';
+@prop export let autoclose: boolean = false;
+@prop export let outsideclose: boolean = false;
+@prop export let dismissable: boolean = true;
+@prop export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+@prop export let classBackdrop: string | undefined = undefined;
+@prop export let dialogClass: string = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+@prop export let classDialog: string | undefined = undefined;
+@prop export let defaultClass: string = 'relative flex flex-col mx-auto';
+@prop export let headerClass: string = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
+@prop export let classHeader: string | undefined = undefined;
+@prop export let bodyClass: string = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
+@prop export let classBody: string | undefined = undefined;
+@prop export let footerClass: string = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
+@prop export let classFooter: string | undefined = undefined;
+-->

frontend/src/modal/Modal.svelte.d.ts

@@ -0,0 +1,77 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Dismissable, SizeType } from '../types';
+import type { ModalPlacementType } from '../types';
+declare const __propDef: {
+    props: import("svelte/elements").HTMLAnchorAttributes & {
+        tag?: string;
+        color?: import("../utils/Frame.svelte").FrameColor;
+        rounded?: boolean;
+        border?: boolean;
+        shadow?: boolean;
+        node?: HTMLElement | undefined;
+        use?: import("svelte/action").Action<HTMLElement, any>;
+        options?: object;
+        class?: string;
+        role?: string;
+        open?: boolean;
+        transition?: (node: HTMLElement, params: any) => import("svelte/transition").TransitionConfig;
+        params?: any;
+    } & Dismissable & {
+        open?: boolean;
+        title?: string;
+        size?: SizeType;
+        placement?: ModalPlacementType;
+        autoclose?: boolean;
+        outsideclose?: boolean;
+        backdropClass?: string;
+        classBackdrop?: string;
+        dialogClass?: string;
+        classDialog?: string;
+        defaultClass?: string;
+        headerClass?: string;
+        classHeader?: string;
+        bodyClass?: string;
+        classBody?: string;
+        footerClass?: string;
+        classFooter?: string;
+    };
+    events: {
+        wheel: WheelEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+        footer: {};
+    };
+};
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Props
+ * @prop export let open: boolean = false;
+ * @prop export let title: string = '';
+ * @prop export let size: SizeType = 'md';
+ * @prop export let color: ComponentProps<Frame>['color'] = 'default';
+ * @prop export let placement: ModalPlacementType = 'center';
+ * @prop export let autoclose: boolean = false;
+ * @prop export let outsideclose: boolean = false;
+ * @prop export let dismissable: boolean = true;
+ * @prop export let backdropClass: string = 'fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
+ * @prop export let classBackdrop: string | undefined = undefined;
+ * @prop export let dialogClass: string = 'fixed top-0 start-0 end-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex';
+ * @prop export let classDialog: string | undefined = undefined;
+ * @prop export let defaultClass: string = 'relative flex flex-col mx-auto';
+ * @prop export let headerClass: string = 'flex justify-between items-center p-4 md:p-5 rounded-t-lg';
+ * @prop export let classHeader: string | undefined = undefined;
+ * @prop export let bodyClass: string = 'p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain';
+ * @prop export let classBody: string | undefined = undefined;
+ * @prop export let footerClass: string = 'flex items-center p-4 md:p-5 space-x-3 rtl:space-x-reverse rounded-b-lg';
+ * @prop export let classFooter: string | undefined = undefined;
+ */
+export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
+}
+export {};