code refactoring, switch to rxjs websocket wrapper

frontend/src/components/ArchiveResult.tsx

@@ -1,5 +1,12 @@
-import { Card, CardActionArea, CardContent, CardMedia, Skeleton, Typography } from "@mui/material";
-import { ellipsis } from "../utils";
+import {
+    Card,
+    CardActionArea,
+    CardContent,
+    CardMedia,
+    Skeleton,
+    Typography
+} from '@mui/material'
+import { ellipsis } from '../utils'
 
 type Props = {
     title: string,

frontend/src/components/DownloadsCardView.tsx

@@ -1,5 +1,6 @@
 import { Grid } from "@mui/material"
 import { Fragment } from "react"
+
 import type { RPCResult } from "../types"
 import { StackableResult } from "./StackableResult"
 

frontend/src/components/DownloadsListView.tsx

@@ -1,6 +1,18 @@
-import { Button, CircularProgress, Grid, LinearProgress, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material"
-import { RPCResult } from "../types"
+import {
+  Button,
+  Grid,
+  LinearProgress,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from "@mui/material"
 import { ellipsis, formatSpeedMiB, roundMiB } from "../utils"
+import type { RPCResult } from "../types"
 
 type Props = {
   downloads: RPCResult[]

frontend/src/components/FormatsGrid.tsx

@@ -1,5 +1,5 @@
 import { Button, ButtonGroup, Grid, Paper, Typography } from "@mui/material"
-import type { DLMetadata } from "../types"
+import type { DLMetadata } from '../types'
 
 type Props = {
   downloadFormats: DLMetadata