add collection bar tile icon

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>
+    );
+}

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}
                         />
                     ))}

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)`