From ed7ac4288e17fcc122f80b1559657935d11e6782 Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Tue, 28 Jun 2022 15:23:14 +0530
Subject: [PATCH] add collection bar tile icon

---
 .../CollectionListBar/CollectionCard.tsx      | 31 ++++++++++++++++---
 .../Collections/CollectionListBar/index.tsx   |  1 +
 .../Collections/styledComponents.ts           |  9 ++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/components/Collections/CollectionListBar/CollectionCard.tsx b/src/components/Collections/CollectionListBar/CollectionCard.tsx
index 27d1db3d7..d2c8942e7 100644
--- a/src/components/Collections/CollectionListBar/CollectionCard.tsx
+++ b/src/components/Collections/CollectionListBar/CollectionCard.tsx
@@ -3,28 +3,32 @@ import { EnteFile } from 'types/file';
 import {
     ActiveIndicator,
     CollectionBarTile,
+    CollectionBarTileIcon,
     CollectionBarTileText,
 } from '../styledComponents';
 import CollectionCard from '../CollectionCard';
 import TruncateText from 'components/TruncateText';
 import { Box } from '@mui/material';
+import { CollectionSummaryType } from 'constants/collection';
+import Favorite from '@mui/icons-material/Favorite';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 
 interface Iprops {
     active: boolean;
     latestFile: EnteFile;
     collectionName: string;
+    collectionType: CollectionSummaryType;
     onClick: () => void;
 }
 
 const CollectionListBarCard = React.forwardRef((props: Iprops, ref: any) => {
-    const { active, collectionName, ...others } = props;
+    const { active, collectionName, collectionType, ...others } = props;
 
     return (
         <Box ref={ref}>
             <CollectionCard collectionTile={CollectionBarTile} {...others}>
-                <CollectionBarTileText>
-                    <TruncateText text={collectionName} />
-                </CollectionBarTileText>
+                <CollectionCardText collectionName={collectionName} />
+                <CollectionCardIcon collectionType={collectionType} />
             </CollectionCard>
             {active && <ActiveIndicator />}
         </Box>
@@ -32,3 +36,22 @@ const CollectionListBarCard = React.forwardRef((props: Iprops, ref: any) => {
 });
 
 export default CollectionListBarCard;
+
+function CollectionCardText({ collectionName }) {
+    return (
+        <CollectionBarTileText>
+            <TruncateText text={collectionName} />
+        </CollectionBarTileText>
+    );
+}
+
+function CollectionCardIcon({ collectionType }) {
+    return (
+        <CollectionBarTileIcon>
+            {collectionType === CollectionSummaryType.favorites && <Favorite />}
+            {collectionType === CollectionSummaryType.archived && (
+                <VisibilityOff />
+            )}
+        </CollectionBarTileIcon>
+    );
+}
diff --git a/src/components/Collections/CollectionListBar/index.tsx b/src/components/Collections/CollectionListBar/index.tsx
index d35db9b60..f6dfb85fc 100644
--- a/src/components/Collections/CollectionListBar/index.tsx
+++ b/src/components/Collections/CollectionListBar/index.tsx
@@ -99,6 +99,7 @@ export default function CollectionListBar(props: IProps) {
                             ref={collectionChipsRef[item.id]}
                             active={activeCollection === item.id}
                             onClick={clickHandler(item.id)}
+                            collectionType={item.type}
                             collectionName={item.name}
                         />
                     ))}
diff --git a/src/components/Collections/styledComponents.ts b/src/components/Collections/styledComponents.ts
index 87ea283da..b63db6819 100644
--- a/src/components/Collections/styledComponents.ts
+++ b/src/components/Collections/styledComponents.ts
@@ -86,7 +86,16 @@ export const CollectionBarTileText = styled(Overlay)`
         rgba(0, 0, 0, 0.1) 0%,
         rgba(0, 0, 0, 0.5) 86.46%
     );
+`;
+
+export const CollectionBarTileIcon = styled(Overlay)`
+    padding: 4px;
     display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    & > .MuiSvgIcon-root {
+        font-size: 20px;
+    }
 `;
 
 export const AllCollectionTileText = styled(Overlay)`