Create separate ImageFile component for image attachments

src/components/common/messaging/attachments/ImageFile.tsx

@@ -0,0 +1,49 @@
+import {Attachment} from "revolt-api/types/Autumn";
+
+import styles from "./Attachment.module.scss";
+import classNames from "classnames";
+import {useContext, useState} from "preact/hooks";
+
+import {useIntermediate} from "../../../../context/intermediate/Intermediate";
+import {AppContext} from "../../../../context/revoltjs/RevoltClient";
+
+enum ImageLoadingState
+{
+    Loading,
+    Loaded,
+    Error
+}
+
+interface Props {
+    attachment: Attachment;
+}
+
+export default function ImageFile({ attachment }: Props)
+{
+    const [loading, setLoading] = useState(ImageLoadingState.Loading);
+    const client = useContext(AppContext);
+    const { openScreen } = useIntermediate();
+    const url = client.generateFileURL(attachment)!;
+
+    return <img
+        src={url}
+        alt={attachment.filename}
+        loading="lazy"
+        className={classNames(styles.image, {
+            [styles.loading]: loading !== ImageLoadingState.Loaded
+        })}
+        onClick={() =>
+            openScreen({id: "image_viewer", attachment})
+        }
+        onMouseDown={(ev) =>
+            ev.button === 1 && window.open(url, "_blank")
+        }
+        onLoad={() =>
+            setLoading(ImageLoadingState.Loaded)
+        }
+        onError={() =>
+            setLoading(ImageLoadingState.Error)
+        }
+
+    />
+}