Move

web/apps/photos/src/components/Collections/CollectionCard.tsx

@@ -3,7 +3,7 @@ import { EnteFile } from "@/new/photos/types/file";
 import {
     LoadingThumbnail,
     StaticThumbnail,
-} from "components/PlaceholderThumbnails";
+} from "@/new/photos/components/PlaceholderThumbnails";
 import { useEffect, useState } from "react";
 
 export default function CollectionCard(props: {

web/apps/photos/src/components/SearchBar.tsx

@@ -1,6 +1,7 @@
 import { assertionFailed } from "@/base/assert";
 import { useIsMobileWidth } from "@/base/hooks";
 import { FileType } from "@/media/file-type";
+import { ItemCard } from "@/new/photos/components/ItemCards";
 import {
     isMLSupported,
     mlStatusSnapshot,
@@ -37,7 +38,6 @@ import {
     useTheme,
     type Theme,
 } from "@mui/material";
-import CollectionCard from "components/Collections/CollectionCard";
 import { ResultPreviewTile } from "components/Collections/styledComponents";
 import { t } from "i18next";
 import pDebounce from "p-debounce";
@@ -580,11 +580,10 @@ const OptionContents = ({ data }: { data: SearchOption }) => (
 
             <Stack direction={"row"} gap={1}>
                 {data.previewFiles.map((file) => (
-                    <CollectionCard
+                    <ItemCard
                         key={file.id}
                         coverFile={file}
-                        onClick={() => null}
-                        collectionTile={ResultPreviewTile}
+                        TileComponent={ResultPreviewTile}
                     />
                 ))}
             </Stack>

web/apps/photos/src/components/pages/gallery/PreviewCard.tsx

@@ -15,7 +15,7 @@ import {
 import {
     LoadingThumbnail,
     StaticThumbnail,
-} from "components/PlaceholderThumbnails";
+} from "@/new/photos/components/PlaceholderThumbnails";
 import i18n from "i18next";
 import { DeduplicateContext } from "pages/deduplicate";
 import { GalleryContext } from "pages/gallery";

web/packages/new/photos/components/ItemCards.tsx

@@ -0,0 +1,43 @@
+import {
+    LoadingThumbnail,
+    StaticThumbnail,
+} from "@/new/photos/components/PlaceholderThumbnails";
+import downloadManager from "@/new/photos/services/download";
+import { type EnteFile } from "@/new/photos/types/file";
+import React, { useEffect, useState } from "react";
+
+interface ItemCardProps {
+    coverFile: EnteFile;
+    TileComponent: React.FC<React.PropsWithChildren>;
+}
+
+/**
+ * A simplified variant of {@link CollectionCard}, meant to be used for
+ * representing either collections and files.
+ */
+export const ItemCard: React.FC<ItemCardProps> = ({
+    coverFile,
+    TileComponent,
+}) => {
+    const [coverImageURL, setCoverImageURL] = useState("");
+
+    useEffect(() => {
+        const main = async () => {
+            const url = await downloadManager.getThumbnailForPreview(coverFile);
+            if (url) setCoverImageURL(url);
+        };
+        void main();
+    }, [coverFile]);
+
+    return (
+        <TileComponent>
+            {coverFile.metadata.hasStaticThumbnail ? (
+                <StaticThumbnail fileType={coverFile.metadata.fileType} />
+            ) : coverImageURL ? (
+                <img src={coverImageURL} />
+            ) : (
+                <LoadingThumbnail />
+            )}
+        </TileComponent>
+    );
+};