feat: Unified portaled sign-in overlay

Updated the sign-in overlay to be unified across the site, improving UX

src/interface/components/SignInToFavoriteModal.svelte

@@ -1,29 +1,32 @@
 <script lang="ts">
   import { fade } from "svelte/transition";
   import { animate } from "motion";
-  import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup";
+  import { onMount } from "svelte";
+  import { cloudAuth } from "@/seqta/utils/CloudAuth";
+  import CloudLoginForm from "@/interface/components/store/CloudLoginForm.svelte";
 
   let { onClose } = $props<{ onClose: () => void }>();
   let modalElement: HTMLElement;
 
-  $effect(() => {
-    if (modalElement) {
-      animate(modalElement, { scale: [0.9, 1], opacity: [0, 1] }, { type: "spring", stiffness: 300, damping: 25 });
-    }
+  onMount(() => {
+    return cloudAuth.subscribe((s) => {
+      if (s.isLoggedIn) onClose();
+    });
   });
 
-  function handleSignIn() {
-    onClose();
-    if (document.getElementById("ExtensionPopup")) {
-      closeExtensionPopup();
-    } else {
-      window.close();
+  $effect(() => {
+    if (modalElement) {
+      animate(
+        modalElement,
+        { scale: [0.9, 1], opacity: [0, 1] },
+        { type: "spring", stiffness: 300, damping: 25 },
+      );
     }
-  }
+  });
 </script>
 
 <div
-  class="flex fixed inset-0 z-[10000] justify-center items-center bg-black/50"
+  class="flex fixed inset-0 z-[99999] justify-center items-center bg-black/50"
   onclick={(e) => {
     if (e.target === e.currentTarget) onClose();
   }}
@@ -37,7 +40,7 @@
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={modalElement}
-    class="p-4 mx-4 w-full max-w-md bg-white rounded-2xl shadow-2xl dark:bg-zinc-800 dark:text-white"
+    class="p-4 mx-4 w-full max-w-md max-h-[90vh] overflow-y-auto bg-white rounded-2xl shadow-2xl dark:bg-zinc-800 dark:text-white"
     onclick={(e) => e.stopPropagation()}
     onkeydown={(e) => e.stopPropagation()}
   >
@@ -45,32 +48,19 @@
       Sign in to favorite themes
     </h2>
 
-    <p class="mb-6 text-zinc-600 dark:text-zinc-400">
-      Sign in in the Theme Store to save favorites across devices, or create an account to get started.
+    <p class="mb-4 text-sm text-zinc-600 dark:text-zinc-400">
+      Sign in to the Theme Store to save favorites across devices, or create an account to get started.
     </p>
 
-    <div class="flex flex-wrap gap-2 justify-end">
+    <CloudLoginForm compact onSuccess={onClose} />
+
+    <div class="flex justify-end mt-4">
       <button
         type="button"
         onclick={onClose}
         class="px-4 py-2 text-sm font-medium rounded-lg bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-300 dark:hover:bg-zinc-600 transition-colors duration-200"
       >
-        OK
-      </button>
-      <a
-        href="https://accounts.betterseqta.org/register"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border border-zinc-200 dark:border-zinc-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-all duration-200"
-      >
-        Create account
-      </a>
-      <button
-        type="button"
-        onclick={handleSignIn}
-        class="px-4 py-2 text-sm font-medium rounded-lg bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300 transition-colors duration-200"
-      >
-        Sign in
+        Close
       </button>
     </div>
   </div>