Code refactoring and set up format selection

Set up format selection and archive download for next releases

frontend/src/components/ArchiveResult.tsx

@@ -0,0 +1,30 @@
+import { Card, CardActionArea, CardContent, CardMedia, Skeleton, Typography } from "@mui/material";
+import { ellipsis } from "../utils";
+
+type Props = {
+    title: string,
+    thumbnail: string,
+    url: string,
+}
+
+export function ArchiveResult({ title, thumbnail, url }: Props) {
+    return (
+        <Card>
+            <CardActionArea onClick={() => window.open(url)}>
+                {thumbnail ?
+                    <CardMedia
+                        component="img"
+                        height={180}
+                        image={thumbnail}
+                    /> :
+                    <Skeleton variant="rectangular" height={180} />
+                }
+                <CardContent>
+                    <Typography gutterBottom variant="body2" component="div">
+                        {ellipsis(title, 72)}
+                    </Typography>
+                </CardContent>
+            </CardActionArea>
+        </Card>
+    )
+}

frontend/src/components/MessageToast.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import {
-    Toast,
-} from "react-bootstrap";
-
-type Props = {
-    flag: boolean,
-    callback: Function,
-    children:
-    | JSX.Element
-    | string
-}
-
-export function MessageToast({ flag, callback, children }: Props) {
-    return (
-        <Toast
-            show={flag}
-            onClose={() => callback(false)}
-            bg={'primary'}
-            delay={1500}
-            autohide
-            className="mt-5"
-        >
-            <Toast.Body className="text-light">
-                {children}
-            </Toast.Body>
-        </Toast>
-    );
-}

frontend/src/components/StackableResult.tsx

@@ -1,4 +1,3 @@
-import { Fragment } from "react";
 import { EightK, FourK, Hd, Sd } from "@mui/icons-material";
 import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Chip, Grid, LinearProgress, Skeleton, Stack, Typography } from "@mui/material";
 import { IMessage } from "../interfaces";
@@ -14,7 +13,6 @@ type Props = {
 }
 
 export function StackableResult({ formattedLog, title, thumbnail, resolution, progress, stopCallback }: Props) {
-
     const guessResolution = (xByY: string): JSX.Element => {
         if (!xByY) return null;
         if (xByY.includes('4320')) return (<EightK color="primary" />);