fix: image lightbox loading

crates/app/src/public/css/style.css

@@ -375,10 +375,17 @@ img.emoji {
 }
 
 .lightbox img {
+    --padding: 2rem;
     box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
         var(--color-shadow);
     border-radius: var(--radius);
     animation: popin ease-in-out 1 0.15s forwards running;
+    max-height: calc(100dvh - var(--padding));
+    max-width: calc(100dvh - var(--padding));
+}
+
+.lightbox a {
+    cursor: zoom-in;
 }
 
 /* avatar/banner */

crates/app/src/public/html/root.html

@@ -289,7 +289,9 @@ macros -%}
                 {{ icon "x" }}
             </button>
 
-            <img src="" alt="Image" id="lightbox_img" />
+            <a href="" id="lightbox_img_a" target="_blank">
+                <img src="" alt="Image" id="lightbox_img" />
+            </a>
         </div>
 
         {% if user %}

crates/app/src/public/js/atto.js

@@ -1030,8 +1030,24 @@ ${option.input_element_type === "textarea" ? `${option.value}</textarea>` : ""}
     );
 
     // lightbox
-    self.define("lightbox_open", (_, src) => {
+    self.define("lightbox_open", async (_, src) => {
         document.getElementById("lightbox_img").src = src;
+        document.getElementById("lightbox_img_a").href = src;
+
+        await (async () => {
+            return new Promise((resolve, reject) => {
+                let idx = 0;
+                const inter = setInterval(() => {
+                    idx += 1;
+                    if (document.getElementById("lightbox_img").complete) {
+                        console.log(`img loaded (took ${idx})`);
+                        clearInterval(inter);
+                        return resolve();
+                    }
+                }, 25);
+            });
+        })();
+
         document.getElementById("lightbox").classList.remove("hidden");
     });