From 72da4ab2fdc6e852c8d3acc373acdf1960a1aa7a Mon Sep 17 00:00:00 2001
From: Kuba Suder <jakub.suder@gmail.com>
Date: Mon, 1 Dec 2025 02:04:15 +0200
Subject: [PATCH] moved the two dialogs to App component

---
 index.html                                    |   3 -
 src/App.svelte                                |   9 +-
 src/components/AccountMenu.svelte             |   4 +-
 src/components/BiohazardDialog.svelte         |  13 +-
 src/components/DialogPanel.svelte             |  14 ++
 src/components/Dialogs.svelte                 |  30 +++++
 src/components/LoginDialog.svelte             |  32 +++--
 src/components/posts/HiddenRepliesLink.svelte |   2 +-
 src/components/posts/PostFooter.svelte        |   4 +-
 src/skythread.ts                              | 126 +-----------------
 style.css                                     |   3 +-
 11 files changed, 90 insertions(+), 150 deletions(-)
 create mode 100644 src/components/DialogPanel.svelte
 create mode 100644 src/components/Dialogs.svelte

diff --git a/index.html b/index.html
index 36c2505..3954d2e 100644
--- a/index.html
+++ b/index.html
@@ -29,9 +29,6 @@
     </a>
   </div>
 
-  <div id="login" class="dialog"></div>
-  <div id="biohazard_dialog" class="dialog"></div>
-
   <script src="dist/skythread.js"></script>
 
   <script>
diff --git a/src/App.svelte b/src/App.svelte
index 97bc9c2..c752608 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,10 +2,10 @@
   import { account } from './models/account.svelte.js';
 
   import AccountMenu from './components/AccountMenu.svelte';
+  import Dialogs, { showLoginDialog } from './components/Dialogs.svelte';
   import HashtagPage from './pages/HashtagPage.svelte';
   import HomeSearch from './components/HomeSearch.svelte';
   import LikeStatsPage from './pages/LikeStatsPage.svelte';
-  import LoginDialog from './components/LoginDialog.svelte';
   import LycanSearchPage from './pages/LycanSearchPage.svelte';
   import NotificationsPage from './pages/NotificationsPage.svelte';
   import PostingStatsPage from './pages/PostingStatsPage.svelte';
@@ -14,9 +14,14 @@
   import TimelineSearchPage from './pages/TimelineSearchPage.svelte';
 
   let { params }: { params: Record<string, string> } = $props();
+
+  if (params.page && !account.loggedIn) {
+    showLoginDialog({ showClose: false });
+  }
 </script>
 
 <AccountMenu />
+<Dialogs />
 
 {#if params.q}
   <ThreadPage url={params.q} />
@@ -29,8 +34,6 @@
 {:else if params.page}
   {#if account.loggedIn}
     {@render page(params.page)}
-  {:else}
-    <LoginDialog />
   {/if}
 {:else}
   <HomeSearch />
diff --git a/src/components/AccountMenu.svelte b/src/components/AccountMenu.svelte
index 115a29c..2c64707 100644
--- a/src/components/AccountMenu.svelte
+++ b/src/components/AccountMenu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { showLoginDialog } from '../skythread.js';
+  import { showLoginDialog } from './Dialogs.svelte';
   import { account } from '../models/account.svelte.js';
   import { settings } from '../models/settings.svelte.js';
   import { getBaseLocation } from '../router.js';
@@ -44,7 +44,7 @@
   function showLoginScreen(e: Event) {
     e.preventDefault();
 
-    showLoginDialog();
+    showLoginDialog({ showClose: true });
     menuVisible = false;
   }
 
diff --git a/src/components/BiohazardDialog.svelte b/src/components/BiohazardDialog.svelte
index 4a5917b..cffb4b0 100644
--- a/src/components/BiohazardDialog.svelte
+++ b/src/components/BiohazardDialog.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
   import { settings } from '../models/settings.svelte.js';
+  import DialogPanel from './DialogPanel.svelte';
 
-  type Props = { onConfirm?: (() => void) | undefined, onClose?: (() => void) | undefined };
-  let { onConfirm = undefined, onClose = undefined }: Props = $props();
+  type Props = {
+    onConfirm?: () => void;
+    onReject?: () => void;
+    onClose?: () => void;
+  }
+
+  let { onConfirm = undefined, onReject = undefined, onClose = undefined }: Props = $props();
 
   function showBiohazard(e: Event) {
     e.preventDefault();
@@ -16,10 +22,12 @@
     e.preventDefault();
     settings.biohazardsEnabled = false;
 
+    onReject?.();
     onClose?.();
   }
 </script>
 
+<DialogPanel onClose={() => onClose?.()}>
 <form method="get">
   <i class="close fa-circle-xmark fa-regular" onclick={onClose}></i>
   <h2>☣️ Infohazard Warning</h2>
@@ -33,6 +41,7 @@
     <input type="submit" value="Nope, I'd rather not 🙈" onclick={hideBiohazard}>
   </p>
 </form>
+</DialogPanel>
 
 <style>
   form {
diff --git a/src/components/DialogPanel.svelte b/src/components/DialogPanel.svelte
new file mode 100644
index 0000000..8bc7b52
--- /dev/null
+++ b/src/components/DialogPanel.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  let { children, onClose = undefined }: { children: any, onClose?: () => void } = $props();
+
+  function onclick(e: Event) {
+    // close the dialog (if it's closable) on click on the overlay, but not on anything inside
+    if (e.target === e.currentTarget) {
+      onClose?.();
+    }
+  }
+</script>
+
+<div class="dialog" {onclick}>
+  {@render children()}
+</div>
diff --git a/src/components/Dialogs.svelte b/src/components/Dialogs.svelte
new file mode 100644
index 0000000..539dbe1
--- /dev/null
+++ b/src/components/Dialogs.svelte
@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import BiohazardDialog from './BiohazardDialog.svelte';
+  import LoginDialog from './LoginDialog.svelte';
+
+  let loginDisplayed = $state(false);
+  let loginWithClose = $state(false);
+
+  let biohazardDisplayed = $state(false);
+  let biohazardOnConfirm: (() => void) | undefined = $state(undefined);
+
+  export function showLoginDialog(opts: { showClose: boolean }) {
+    if (!loginDisplayed) {
+      loginDisplayed = true;
+      loginWithClose = opts.showClose;
+    }
+  }
+
+  export function showBiohazardDialog(onConfirm?: () => void) {
+    if (!biohazardDisplayed) {
+      biohazardDisplayed = true;
+      biohazardOnConfirm = onConfirm;
+    }
+  }
+</script>
+
+{#if loginDisplayed}
+  <LoginDialog onClose={() => loginDisplayed = false} showClose={loginWithClose} />
+{:else if biohazardDisplayed}
+  <BiohazardDialog onClose={() => biohazardDisplayed = false} onConfirm={() => biohazardOnConfirm?.()} />
+{/if}
diff --git a/src/components/LoginDialog.svelte b/src/components/LoginDialog.svelte
index ca8aee1..83b8eb6 100644
--- a/src/components/LoginDialog.svelte
+++ b/src/components/LoginDialog.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
-  import { submitLogin } from '../skythread.js';
   import { APIError } from '../api.js';
+  import { account } from '../models/account.svelte.js';
+  import DialogPanel from './DialogPanel.svelte';
 
-  let { onClose = undefined }: { onClose?: (() => void) | undefined } = $props();
+  type Props = {
+    onLogin?: () => void;
+    onClose?: () => void;
+    showClose: boolean;
+  }
+
+  let { onClose = undefined, onLogin = undefined, showClose }: Props = $props();
 
   let identifier: string = $state('');
   let password: string = $state('');
@@ -11,14 +18,15 @@
   let loginField: HTMLInputElement;
   let passwordField: HTMLInputElement;
 
-  function toggleLoginInfo(e: Event) {
-    e.preventDefault();
-    loginInfoVisible = !loginInfoVisible;
+  function onOverlayClick() {
+    if (showClose && onClose) {
+      onClose();
+    }
   }
 
-  function onCloseClick(e: Event) {
+  function toggleLoginInfo(e: Event) {
     e.preventDefault();
-    onClose?.();
+    loginInfoVisible = !loginInfoVisible;
   }
 
   async function onsubmit(e: Event) {
@@ -29,7 +37,9 @@
     passwordField.blur();
 
     try {
-      await submitLogin(identifier.trim(), password.trim());
+      await account.logIn(identifier.trim(), password.trim());
+      onLogin?.();
+      onClose?.();
     } catch (error) {
       submitting = false;
       showError(error);
@@ -47,9 +57,10 @@
   }
 </script>
 
+<DialogPanel onClose={onOverlayClick}>
 <form method="get" {onsubmit}>
-  {#if onClose}
-    <i class="close fa-circle-xmark fa-regular" onclick={onCloseClick}></i>
+  {#if showClose}
+    <i class="close fa-circle-xmark fa-regular" onclick={onClose}></i>
   {/if}
 
   <h2>🌤 Skythread</h2>
@@ -80,6 +91,7 @@
     {/if}
   </p>
 </form>
+</DialogPanel>
 
 <style>
   .cloudy {
diff --git a/src/components/posts/HiddenRepliesLink.svelte b/src/components/posts/HiddenRepliesLink.svelte
index 8b93e72..105d7fb 100644
--- a/src/components/posts/HiddenRepliesLink.svelte
+++ b/src/components/posts/HiddenRepliesLink.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { api } from '../../api.js';
-  import { showBiohazardDialog } from '../../skythread.js';
+  import { showBiohazardDialog } from '../Dialogs.svelte';
   import { settings } from '../../models/settings.svelte.js';
   import { parseThreadPost } from '../../models/posts.js';
   import { linkToPostThread } from '../../router.js';
diff --git a/src/components/posts/PostFooter.svelte b/src/components/posts/PostFooter.svelte
index 9846ee9..a6da230 100644
--- a/src/components/posts/PostFooter.svelte
+++ b/src/components/posts/PostFooter.svelte
@@ -3,7 +3,7 @@
   import { getPostContext } from './PostComponent.svelte';
   import { linkToPostThread, linkToQuotesPage } from '../../router.js';
   import { account } from '../../models/account.svelte.js';
-  import { showLoginDialog } from '../../skythread.js';
+  import { showLoginDialog } from '../Dialogs.svelte';
   import { showError } from '../../utils.js';
 
   let { post, placement } = getPostContext();
@@ -20,7 +20,7 @@
       } else if (account.loggedIn) {
         await checkIfCanBeLiked();
       } else {
-        showLoginDialog();
+        showLoginDialog({ showClose: true });
       }
     } catch (error) {
       showError(error);
diff --git a/src/skythread.ts b/src/skythread.ts
index dc7bdfb..f576be5 100644
--- a/src/skythread.ts
+++ b/src/skythread.ts
@@ -1,136 +1,12 @@
 import * as svelte from 'svelte';
-import App from './App.svelte';
-import BiohazardDialog from './components/BiohazardDialog.svelte';
-import LoginDialog from './components/LoginDialog.svelte';
-
 import { BlueskyAPI } from './api.js';
-import { account } from './models/account.svelte.js';
 import { parseURLParams } from './router.js';
-
-let loginDialog: Record<string, any> | undefined;
-let biohazardDialog: Record<string, any> | undefined;
-
+import App from './App.svelte';
 
 function init() {
-  for (let dialog of document.querySelectorAll('.dialog')) {
-    let close = dialog.querySelector('.close') as HTMLElement;
-
-    dialog.addEventListener('click', (e) => {
-      if (e.target === e.currentTarget && close && close.offsetHeight > 0) {
-        hideDialog(dialog);
-      } else {
-        e.stopPropagation();
-      }
-    });
-
-    close?.addEventListener('click', (e) => {
-      hideDialog(dialog);
-    });
-  }
-
-  parseQueryParams();
-}
-
-function parseQueryParams() {
   let params = parseURLParams(location.search);
   svelte.mount(App, { target: document.body, props: { params }});
 }
 
-function hideDialog(dialog) {
-  dialog.style.visibility = 'hidden';
-  dialog.classList.remove('expanded');
-  document.getElementById('thread')!.classList.remove('overlay');
-
-  for (let field of dialog.querySelectorAll('input[type=text]')) {
-    field.value = '';
-  }
-}
-
-function showLoginDialog(showClose: boolean = true) {
-  if (loginDialog) {
-    return;
-  }
-
-  let dialog = document.getElementById('login')!
-
-  let props = {
-    onClose: showClose ? hideLoginDialog : undefined
-  };
-
-  dialog.addEventListener('click', (e) => {
-    if (e.target === e.currentTarget && showClose) {
-      hideLoginDialog();
-    } else {
-      e.stopPropagation();
-    }
-  });
-
-  loginDialog = svelte.mount(LoginDialog, { target: dialog, props });
-
-  dialog.style.visibility = 'visible';
-  document.getElementById('thread')!.classList.add('overlay');
-}
-
-function hideLoginDialog() {
-  if (loginDialog) {
-    svelte.unmount(loginDialog);
-    loginDialog = undefined;
-
-    document.getElementById('login')!.style.visibility = 'hidden';
-    document.getElementById('thread')!.classList.remove('overlay');
-  }
-}
-
-function showBiohazardDialog(onConfirm?: () => void) {
-  if (biohazardDialog) {
-    return;
-  }
-
-  let dialog = document.getElementById('biohazard_dialog')!
-
-  dialog.addEventListener('click', (e) => {
-    if (e.target === e.currentTarget) {
-      hideBiohazardDialog();
-    } else {
-      e.stopPropagation();
-    }
-  });
-
-  biohazardDialog = svelte.mount(BiohazardDialog, {
-    target: dialog,
-    props: {
-      onConfirm: onConfirm,
-      onClose: hideBiohazardDialog
-    }
-  });
-
-  dialog.style.visibility = 'visible';
-  document.getElementById('thread')!.classList.add('overlay');
-}
-
-function hideBiohazardDialog() {
-  if (biohazardDialog) {
-    svelte.unmount(biohazardDialog);
-    biohazardDialog = undefined;
-
-    document.getElementById('biohazard_dialog')!.style.visibility = 'hidden';
-    document.getElementById('thread')!.classList.remove('overlay');
-  }
-}
-
-async function submitLogin(identifier: string, password: string) {
-  await account.logIn(identifier, password);
-
-  hideLoginDialog();
-
-  let params = new URLSearchParams(location.search);
-  let page = params.get('page');
-  if (page) {
-    openPage(page);
-  }
-}
-
 window.init = init;
 window.BlueskyAPI = BlueskyAPI;
-
-export { showLoginDialog, showBiohazardDialog, submitLogin };
diff --git a/style.css b/style.css
index 9a68731..8e42500 100644
--- a/style.css
+++ b/style.css
@@ -141,7 +141,6 @@ a:visited {
 }
 
 .dialog {
-  visibility: hidden;
   position: fixed;
   top: 0;
   bottom: 0;
@@ -237,7 +236,7 @@ a:visited {
   padding-top: 1px;
 }
 
-#thread.overlay {
+.dialog ~ #thread {
   filter: blur(8px);
 }
 
-- 
2.51.2