Enhance comment functionality with image support and validation.

frontend/src/components/image.tsx

@@ -0,0 +1,53 @@
+import { Image } from "../network/models.ts";
+import { network } from "../network/network.ts";
+
+export function SquareImage({ image }: { image: Image }) {
+  let cover = false;
+  const imgAspectRatio = image.width / image.height;
+  if (imgAspectRatio > 0.8 && imgAspectRatio < 1.2) {
+    cover = true;
+  }
+
+  return (
+    <>
+      <div
+        className="aspect-square bg-base-200 rounded-lg cursor-pointer"
+        onClick={() => {
+          const dialog = document.getElementById(
+            `image-dialog-${image.id}`,
+          ) as HTMLDialogElement;
+          dialog.showModal();
+        }}
+      >
+        <img
+          src={network.getImageUrl(image.id)}
+          alt={"image"}
+          className={`w-full h-full rounded-lg ${cover ? "object-cover" : "object-contain"}`}
+        />
+      </div>
+      <dialog id={`image-dialog-${image.id}`} className="modal">
+        <div
+          className={"w-screen h-screen flex items-center justify-center"}
+          onClick={() => {
+            const dialog = document.getElementById(
+              `image-dialog-${image.id}`,
+            ) as HTMLDialogElement;
+            dialog.close();
+          }}
+        >
+          <img
+            src={network.getImageUrl(image.id)}
+            alt={"image"}
+            className={`object-contain max-w-screen max-h-screen modal-box`}
+            style={{
+              padding: 0,
+              margin: 0,
+              backgroundColor: "transparent",
+              boxShadow: "none",
+            }}
+          />
+        </div>
+      </dialog>
+    </>
+  );
+}

frontend/src/components/toast.ts

@@ -1,9 +1,11 @@
 export default function showToast({
   message,
   type,
+  parent,
 }: {
   message: string;
   type?: "success" | "error" | "warning" | "info";
+  parent?: HTMLElement | null;
 }) {
   type = type || "info";
   const div = document.createElement("div");
@@ -13,7 +15,11 @@ export default function showToast({
             <span>${message}</span>
           </div>
         </div>`;
-  document.body.appendChild(div);
+  if (parent) {
+    parent.appendChild(div);
+  } else {
+    document.body.appendChild(div);
+  }
   setTimeout(() => {
     div.remove();
   }, 3000);