initial commit

src/components/popup/ConfirmPopup.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
+  import { onDestroy } from 'svelte';
+
+  // html bindings
+  let modal: HTMLDialogElement;
+
+  // lifecycle
+  const cancel = confirmPopupState.subscribe((value) => {
+    if (value) modal.show();
+  });
+
+  onDestroy(cancel);
+
+  // callbacks
+  function onModalClose() {
+    setTimeout(() => ($confirmPopupState = null), 300);
+  }
+</script>
+
+<dialog class="modal" bind:this={modal} onclose={onModalClose}>
+  <form method="dialog" class="modal-box">
+    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+    <div>
+      <h3 class="text-lg font-geist">{$confirmPopupState?.title}</h3>
+      <p class="py-4 whitespace-pre-line">{$confirmPopupState?.message}</p>
+      <button class="btn" onclick={() => $confirmPopupState?.onConfirm()}>Ok</button>
+    </div>
+  </form>
+  <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
+    <button class="!cursor-default">close</button>
+  </form>
+</dialog>

src/components/popup/ConfirmPopup.ts

@@ -0,0 +1,3 @@
+import { atom } from 'nanostores';
+
+export const confirmPopupState = atom<{ title: string; message: string; onConfirm: () => void } | null>(null);

src/components/popup/Popup.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { popupState } from '@components/popup/Popup.ts';
+  import { onDestroy } from 'svelte';
+
+  // html bindings
+  let modal: HTMLDialogElement;
+
+  // lifecycle
+  const cancel = popupState.subscribe((value) => {
+    if (value) modal.show();
+  });
+
+  onDestroy(cancel);
+
+  // callbacks
+  function onModalClose() {
+    setTimeout(() => ($popupState = null), 300);
+  }
+</script>
+
+<dialog class="modal" bind:this={modal} onclose={onModalClose}>
+  <form method="dialog" class="modal-box">
+    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+    <div>
+      <h3 class="text-lg font-geist">{$popupState?.title}</h3>
+      <p class="py-4 whitespace-pre-line">{$popupState?.message}</p>
+      <button class="btn" class:btn-error={$popupState?.type === 'error'}>Ok</button>
+    </div>
+  </form>
+  <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
+    <button class="!cursor-default">close</button>
+  </form>
+</dialog>

src/components/popup/Popup.ts

@@ -0,0 +1,3 @@
+import { atom } from 'nanostores';
+
+export const popupState = atom<{ type: 'info' | 'error'; title: string; message: string } | null>(null);