chore (rewrite): bugfix on canary release

public/assets/components/modal.css

@@ -18,6 +18,7 @@
 
 .dark-mode .component_modal{
     background: var(--bg-color);
+    color: rgba(0,0,0,0.7);
 }
 
 .component_popup .popup--content {

public/assets/components/modal.js

@@ -68,9 +68,10 @@ class ModalComponent extends window.HTMLElement {
         ));
 
         // feature: closing the modal
+        const $body = () => qs($modal, "div > div");
         effect(close$.pipe(
             rxjs.mergeMap((data) => onQuit(data) || Promise.resolve()),
-            rxjs.tap(() => animate(qs($modal, "div > div"), {
+            rxjs.tap(() => animate($body(), {
                 time: 200,
                 keyframes: [
                     { opacity: 1, transform: "translateY(0)" },
@@ -87,9 +88,10 @@ class ModalComponent extends window.HTMLElement {
         ));
 
         // feature: animate opening
-        effect(rxjs.of(["opacity", "0"]).pipe(
-            applyMutation(qs($modal, "div > div"), "style", "setProperty"),
+        effect(rxjs.of(null).pipe(
             rxjs.tap(() => animate($modal, {
+                onEnter: () => $body().style.setProperty("opacity", "0"),
+                onExit: () => $body().style.setProperty("opacity", "1"),
                 time: 250,
                 keyframes: [
                     { opacity: 0 },
@@ -97,7 +99,7 @@ class ModalComponent extends window.HTMLElement {
                 ]
             })),
             rxjs.delay(50),
-            rxjs.tap(() => animate(qs($modal, "div > div"), {
+            rxjs.tap(() => animate($body(), {
                 time: 200,
                 keyframes: [
                     { opacity: 0, transform: "translateY(10px)" },

public/assets/lib/animate.js

@@ -1,4 +1,4 @@
-import { onDestroy } from "./skeleton/index.js";
+import { onDestroy, nop } from "./skeleton/index.js";
 
 export function transition($node, opts = {}) {
     const {
@@ -11,20 +11,30 @@ export function transition($node, opts = {}) {
 }
 
 export function animate($node, opts = {}) {
-    const { time = 250, keyframes = opacityIn(), fill = "forwards", easing = "ease" } = opts;
-
-    if (!$node) return Promise.resolve();
-    else if (typeof $node.animate !== "function") return Promise.resolve();
-    else if (window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true) return Promise.resolve();
+    const {
+        time = 250,
+        keyframes = opacityIn(),
+        fill = "forwards", easing = "ease",
+        onEnter = nop, onExit = nop,
+    } = opts;
 
+    if ( !$node
+         || typeof $node.animate !== "function"
+         || window.matchMedia(`(prefers-reduced-motion: reduce)`) === true
+         || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true) {
+        onExit();
+        return Promise.resolve();
+    }
+    onEnter();
     return new Promise((done) => {
         $node.animate(keyframes, {
             duration: time,
             fill,
             easing,
-        }).onfinish = () => done(() => {
-            $node.animate(keyframes.reverse(), { duration: 0, fill });
-        });
+        }).onfinish = () => {
+            done(() => $node.animate(keyframes.reverse(), { duration: 0, fill }));
+            onExit();
+        }
     });
 }
 

public/assets/pages/filespage/ctrl_submenu.js

@@ -394,14 +394,14 @@ export function init() {
 
 function generateLinkAttributes(selections) {
     let filename = "archive.zip";
-    let href = "/api/files/zip?";
+    let href = "api/files/zip?";
     if (selections.length === 1) {
         const path = selections[0].path;
         const regDir = new RegExp("/$");
         filename = regDir.test(path) ?
             basename(path.replace(regDir, "")) + ".zip" :
             basename(path);
-        href = "/api/files/cat?"
+        href = "api/files/cat?"
     }
     href += selections.map(({path}) => "path=" + encodeURIComponent(path)).join("&");
     return `href="${href}" download="${filename}"`;