[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

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

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(