Animate modal with Presence

fresh.gen.ts

@@ -26,7 +26,6 @@ import * as $FileIdAnalyzer from "./islands/FileIdAnalyzer.tsx";
 import * as $FilterQueryBrowser from "./islands/FilterQueryBrowser.tsx";
 import * as $InlineMessageIdUnpacker from "./islands/InlineMessageIdUnpacker.tsx";
 import * as $Modal from "./islands/Modal.tsx";
-import * as $Select from "./islands/Select.tsx";
 import * as $SessionStringAnalyzer from "./islands/SessionStringAnalyzer.tsx";
 import * as $SessionStringConverter from "./islands/SessionStringConverter.tsx";
 import * as $SessionStringGenerator from "./islands/SessionStringGenerator.tsx";
@@ -62,7 +61,6 @@ const manifest = {
     "./islands/FilterQueryBrowser.tsx": $FilterQueryBrowser,
     "./islands/InlineMessageIdUnpacker.tsx": $InlineMessageIdUnpacker,
     "./islands/Modal.tsx": $Modal,
-    "./islands/Select.tsx": $Select,
     "./islands/SessionStringAnalyzer.tsx": $SessionStringAnalyzer,
     "./islands/SessionStringConverter.tsx": $SessionStringConverter,
     "./islands/SessionStringGenerator.tsx": $SessionStringGenerator,

islands/ConnectivityTest.tsx

@@ -1,4 +1,5 @@
 import { IS_BROWSER } from "$fresh/runtime.ts";
+import { ComponentChildren } from "preact";
 import { signal, useSignal } from "@preact/signals";
 
 import type { DC } from "mtkruto/mod.ts";
@@ -10,7 +11,6 @@ import { Button } from "../components/Button.tsx";
 import { Spinner } from "../components/icons/Spinner.tsx";
 
 import { Alert } from "./Alert.tsx";
-import { Select } from "./Select.tsx";
 
 const localStorage = prefixedLocalStorage("connectivity-test");
 
@@ -275,3 +275,28 @@ function startTest(all = false) {
     worker.postMessage([dc, authKey ? decodeHex(authKey) : null]);
   }
 }
+
+export function Select(
+  { text, caption, checked, onChange }: {
+    text: ComponentChildren;
+    caption: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+  },
+) {
+  return (
+    <div
+      class={`flex cursor-pointer relative items-start gap-2 px-3 py-2 ${
+        checked ? "border-grammy border-2" : "border-border border-2"
+      } rounded-xl shadow-sm bg-gradient`}
+      onClick={() => onChange(!checked)}
+      tabIndex={0}
+      onKeyDown={(e) => e.key == "Enter" && onChange(!checked)}
+    >
+      <div class="flex flex-col">
+        <div>{text}</div>
+        <div class="text-[10px] opacity-50">{caption}</div>
+      </div>
+    </div>
+  );
+}

islands/Modal.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "preact/hooks";
 import { effect, signal } from "@preact/signals";
 
 import { Button } from "../components/Button.tsx";
+import { Precense } from "../components/Precense.tsx";
 
 export type ModalContent = null | ComponentChildren | (() => ComponentChildren);
 
@@ -26,8 +27,10 @@ IS_BROWSER && effect(() => {
   }
 });
 
+const present = signal(false);
+
 export function isModalVisible() {
-  return content.value != null;
+  return present.value;
 }
 
 export function setModalContent(
@@ -47,10 +50,11 @@ export function setModalContent(
     }
   }
   content.value = content_;
+  present.value = true;
 }
 
 export function hideModal() {
-  setModalContent(null);
+  present.value = false;
 }
 
 export function displayError(err: unknown, context?: string) {
@@ -61,47 +65,46 @@ export function displayError(err: unknown, context?: string) {
 export function Modal({ onDismiss }: { onDismiss?: () => void }) {
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
-      e.key == "Escape" && (content.value = null);
+      e.key == "Escape" && (hideModal());
     };
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, []);
-  if (!content.value) {
-    return null;
-  }
   function dismiss() {
     if (onDismiss) {
       onDismiss();
     } else {
-      content.value = null;
+      hideModal();
     }
   }
   return (
-    <div
-      class="w-full h-screen fixed top-0 left-0 bg-[#0005] dark:bg-[#fff1] p-5 flex items-center justify-center"
-      onClick={(e) =>
-        e.target == e.currentTarget && autoDismiss.value && dismiss()}
-    >
-      <div class="w-full max-w-lg p-5 bg-background rounded-xl flex flex-col gap-5 justify-between shadow-sm">
-        <div class="flex flex-col gap-4">
-          {typeof content.value === "string"
-            ? (
-              <p>
-                {content.value}
-              </p>
-            )
-            : typeof content.value === "function"
-            ? content.value()
-            : content.value}
-          {showDismissButton.value && (
-            <Button
-              onClick={dismiss}
-            >
-              Dismiss
-            </Button>
-          )}
+    <Precense present={present}>
+      <div
+        class={`w-full h-screen fixed top-0 left-0 bg-[#0005] dark:bg-[#fff1] p-5 flex items-center justify-center ${present.value ? 'animate-in-opacity' : 'animate-out-opacity'}`}
+        onClick={(e) =>
+          e.target == e.currentTarget && autoDismiss.value && dismiss()}
+      >
+        <div class={`w-full max-w-lg p-5 bg-background rounded-xl flex flex-col gap-5 justify-between shadow-sm ${present.value ? 'animate-in-scale' : 'animate-out-scale'}`}>
+          <div class="flex flex-col gap-4">
+            {typeof content.value === "string"
+              ? (
+                <p>
+                  {content.value}
+                </p>
+              )
+              : typeof content.value === "function"
+              ? content.value()
+              : content.value}
+            {showDismissButton.value && (
+              <Button
+                onClick={dismiss}
+              >
+                Dismiss
+              </Button>
+            )}
+          </div>
         </div>
       </div>
-    </div>
+    </Precense>
   );
 }