From d781d2c2fc209fad557b597f0bded2a9ed9aca89 Mon Sep 17 00:00:00 2001
From: Apalepex <walexiki@gmail.com>
Date: Mon, 7 Oct 2024 19:12:20 +0200
Subject: [PATCH] web client : add fav icon to picture thumbnails

---
 web/apps/photos/src/components/PhotoFrame.tsx     |  1 +
 .../src/components/pages/gallery/PreviewCard.tsx  | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/web/apps/photos/src/components/PhotoFrame.tsx b/web/apps/photos/src/components/PhotoFrame.tsx
index 9d81684af6..e9c91345c8 100644
--- a/web/apps/photos/src/components/PhotoFrame.tsx
+++ b/web/apps/photos/src/components/PhotoFrame.tsx
@@ -323,6 +323,7 @@ const PhotoFrame = ({
             }
             activeCollectionID={activeCollectionID}
             showPlaceholder={isScrolling}
+            isFav={favItemIds.has(item.id)}
         />
     );
 
diff --git a/web/apps/photos/src/components/pages/gallery/PreviewCard.tsx b/web/apps/photos/src/components/pages/gallery/PreviewCard.tsx
index 114351788f..241d15d0db 100644
--- a/web/apps/photos/src/components/pages/gallery/PreviewCard.tsx
+++ b/web/apps/photos/src/components/pages/gallery/PreviewCard.tsx
@@ -23,6 +23,7 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import { TRASH_SECTION } from "utils/collection";
 import { shouldShowAvatar } from "utils/file";
 import Avatar from "./Avatar";
+import Favorite from "@mui/icons-material/FavoriteRounded";
 
 interface IProps {
     file: EnteFile;
@@ -38,6 +39,7 @@ interface IProps {
     isInsSelectRange: boolean;
     activeCollectionID: number;
     showPlaceholder: boolean;
+    isFav: boolean;
 }
 
 const Check = styled("input")<{ $active: boolean }>`
@@ -121,6 +123,14 @@ export const AvatarOverlay = styled(Overlay)`
     padding-top: 5px;
 `;
 
+export const FavOverlay = styled(Overlay)`
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-end;
+    padding-left: 5px;
+    padding-bottom: 5px;
+`;
+
 export const InSelectRangeOverLay = styled("div")<{ $active: boolean }>`
     opacity: ${(props) => (!props.$active ? 0 : 1)};
     left: 0;
@@ -351,6 +361,11 @@ export default function PreviewCard(props: IProps) {
                     <Avatar file={file} />
                 </AvatarOverlay>
             )}
+            {props.isFav && (
+                <FavOverlay>
+                    <Favorite/>
+                </FavOverlay>
+            )}
 
             <HoverOverlay
                 className="preview-card-hover-overlay"