[Content] Improve image thumbnails

src/apps/content-editor/src/app/views/ItemList/TableCells/ImageCell.tsx

@@ -1,16 +1,58 @@
 import { GridRenderCellParams } from "@mui/x-data-grid-pro";
-import { Box, Stack } from "@mui/material";
+import { Box, Skeleton, Stack } from "@mui/material";
 import { ImageRounded } from "@mui/icons-material";
-import { useState } from "react";
+import { useSelector } from "react-redux";
+
+import { FileTypePreview } from "../../../../../../media/src/app/components/FileModal/FileTypePreview";
+import {
+  useGetAllBinFilesQuery,
+  useGetBinsQuery,
+  useLazyGetFileQuery,
+} from "../../../../../../../shell/services/mediaManager";
+import { AppState } from "../../../../../../../shell/store/types";
+import { useEffect, useMemo, useState } from "react";
+import { File } from "../../../../../../../shell/services/types";
 
 type ImageCellProps = { params: GridRenderCellParams };
 export const ImageCell = ({ params }: ImageCellProps) => {
-  const [hasError, setHasError] = useState(false);
-  const handleImageError = () => {
-    setHasError(true);
-  };
+  const [fileData, setFileData] = useState<File>(null);
+  const instance = useSelector((state: AppState) => state.instance);
+  const isFileZUID = !!params.value?.startsWith("3-");
+
+  const { data: bins, isFetching: isFetchingBins } = useGetBinsQuery({
+    instanceId: instance?.ID,
+    ecoId: instance?.ecoID,
+  });
+  const [getFile] = useLazyGetFileQuery();
+
+  // Query below will not necessarily be made on every render as this
+  // is already performed on component load, we're simply accessing the cached data
+  const { data: allMediaFiles, isFetching: isFetchingAllMediaFiles } =
+    useGetAllBinFilesQuery(
+      bins?.map((bin) => bin.id),
+      { skip: !bins?.length }
+    );
+  useEffect(() => {
+    if (isFetchingAllMediaFiles || !isFileZUID) return;
+
+    const matchedFile = allMediaFiles?.find((file) => file.id === params.value);
 
-  if (!params.value || hasError) {
+    if (!matchedFile) {
+      // If cache doesn't have the file data, attempt to look it up from the server
+      getFile(params.value)
+        .unwrap()
+        .then((res) => {
+          setFileData(res);
+        })
+        .catch((err: any) => {
+          console.error(err);
+        });
+    } else {
+      setFileData(matchedFile);
+    }
+  }, [allMediaFiles, params.value, isFetchingAllMediaFiles]);
+
+  if (!params.value) {
     return (
       <Stack
         sx={{
@@ -28,18 +70,55 @@ export const ImageCell = ({ params }: ImageCellProps) => {
     );
   }
 
+  if (isFileZUID) {
+    if (isFetchingAllMediaFiles || isFetchingBins) {
+      return (
+        <Skeleton
+          variant="rectangular"
+          width="100%"
+          height="100%"
+          animation="wave"
+        />
+      );
+    }
+
+    return (
+      <Box
+        sx={{
+          height: "100%",
+          width: "100%",
+
+          "[data-cy='file-preview']": {
+            width: "100%",
+          },
+        }}
+      >
+        <FileTypePreview
+          isMediaThumbnail
+          src={fileData?.url}
+          filename={fileData?.filename}
+          updatedAt={fileData?.updated_at}
+        />
+      </Box>
+    );
+  }
+
   return (
     <Box
-      component="img"
       sx={{
-        backgroundColor: (theme) => theme.palette.grey[100],
-        objectFit: "contain",
-        zIndex: -1,
+        height: "100%",
+        width: "100%",
+
+        "[data-cy='file-preview']": {
+          width: "100%",
+        },
       }}
-      width="68px"
-      height="58px"
-      src={params.value}
-      onError={handleImageError}
-    />
+    >
+      <FileTypePreview
+        isMediaThumbnail
+        src={params?.value}
+        filename={params?.value?.split("/").pop()}
+      />
+    </Box>
   );
 };

src/apps/content-editor/src/app/views/ItemList/index.tsx

@@ -240,14 +240,7 @@ export const ItemList = () => {
         const value = data[key] as string;
         switch (fieldType) {
           case "images":
-            clonedItem.data[key] = value?.split(",")[0]?.startsWith("3-")
-              ? `${
-                  // @ts-ignore
-                  CONFIG.SERVICE_MEDIA_RESOLVER
-                }/resolve/${
-                  value?.split(",")[0]
-                }/getimage/?w=${68}&h=auto&type=fit`
-              : value?.split(",")?.[0];
+            clonedItem.data[key] = value?.split(",")?.[0];
             break;
           case "internal_link":
           case "one_to_one":

src/shell/components/Favicon/index.tsx

@@ -76,7 +76,7 @@ export const Favicon = ({ onCloseFaviconModal }: FaviconProps) => {
   ] = useCreateHeadTagMutation();
   const { data: bins, isFetching: isFetchingBins } = useGetBinsQuery({
     instanceId: instance?.ID,
-    ecoId: instance?.ecoId,
+    ecoId: instance?.ecoID,
   });
   const { data: allMediaFiles, isFetching: isFetchingAllMediaFiles } =
     useGetAllBinFilesQuery(