Merge pull request #623 from ente-io/collection-bar-tile-redesign

Collection bar tile redesign

src/components/Collections/CollectionInfo.tsx

@@ -1,10 +1,20 @@
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
+import { FlexWrapper } from 'components/Container';
 import React from 'react';
 import constants from 'utils/strings/constants';
-export function CollectionInfo({ name, fileCount }) {
+interface Iprops {
+    name: string;
+    fileCount: number;
+    endIcon?: React.ReactNode;
+}
+
+export function CollectionInfo({ name, fileCount, endIcon }: Iprops) {
     return (
         <div>
+            <FlexWrapper>
                 <Typography variant="subtitle">{name}</Typography>
+                {endIcon && <Box ml={1.5}>{endIcon}</Box>}
+            </FlexWrapper>
             <Typography variant="body2" color="text.secondary">
                 {constants.PHOTO_COUNT(fileCount)}
             </Typography>

src/components/Collections/CollectionInfoWithOptions.tsx

@@ -5,7 +5,11 @@ import CollectionOptions from 'components/Collections/CollectionOptions';
 import { SetCollectionNamerAttributes } from 'components/Collections/CollectionNamer';
 import { SpaceBetweenFlex } from 'components/Container';
 import { CollectionInfoBarWrapper } from './styledComponents';
-import { isOptionsHavingCollection } from 'utils/collection';
+import { shouldShowOptions } from 'utils/collection';
+import { CollectionSummaryType } from 'constants/collection';
+import Favorite from '@mui/icons-material/Favorite';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import Delete from '@mui/icons-material/Delete';
 
 interface Iprops {
     activeCollection: Collection;
@@ -33,13 +37,28 @@ export default function CollectionInfoWithOptions({
 
     const { name, type, fileCount } = collectionSummary;
 
+    const EndIcon = ({ type }: { type: CollectionSummaryType }) => {
+        switch (type) {
+            case CollectionSummaryType.favorites:
+                return <Favorite />;
+            case CollectionSummaryType.archived:
+            case CollectionSummaryType.archive:
+                return <VisibilityOff />;
+            case CollectionSummaryType.trash:
+                return <Delete />;
+            default:
+                return <></>;
+        }
+    };
     return (
         <CollectionInfoBarWrapper>
             <SpaceBetweenFlex>
-                <CollectionInfo name={name} fileCount={fileCount} />
+                <CollectionInfo
-                {isOptionsHavingCollection(type) && (
+                    name={name}
-                    <CollectionOptions {...props} />
+                    fileCount={fileCount}
-                )}
+                    endIcon={<EndIcon type={type} />}
+                />
+                {shouldShowOptions(type) && <CollectionOptions {...props} />}
             </SpaceBetweenFlex>
         </CollectionInfoBarWrapper>
     );

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>
+                <CollectionCardText collectionName={collectionName} />
-                    <TruncateText text={collectionName} />
+                <CollectionCardIcon collectionType={collectionType} />
-                </CollectionBarTileText>
             </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

@@ -82,12 +82,20 @@ export const ResultPreviewTile = styled(CollectionTile)`
 export const CollectionBarTileText = styled(Overlay)`
     padding: 4px;
     background: linear-gradient(
-        180deg,
+        0deg,
         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)`

src/components/TruncateText.tsx

@@ -1,16 +1,16 @@
 import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
-import { styled, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
-export const EllipseText = styled(Typography)`
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;
 
 export default function TruncateText({ text }) {
     return (
         <Tooltip title={text}>
-            <EllipseText variant="body2">{text}</EllipseText>
+            <Box height={34} overflow="hidden">
+                {/* todo add ellipsis */}
+                <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
+                    {text}
+                </Typography>
+            </Box>
         </Tooltip>
     );
 }

src/constants/collection/index.ts

@@ -6,12 +6,18 @@ export enum CollectionType {
     folder = 'folder',
     favorites = 'favorites',
     album = 'album',
+}
+
+export enum CollectionSummaryType {
+    folder = 'folder',
+    favorites = 'favorites',
+    album = 'album',
     archive = 'archive',
     trash = 'trash',
     all = 'all',
     shared = 'shared',
+    archived = 'archived',
 }
-
 export enum COLLECTION_SORT_BY {
     NAME,
     CREATION_TIME_ASCENDING,
@@ -24,34 +30,37 @@ export const COLLECTION_SHARE_DEFAULT_VALID_DURATION =
 export const COLLECTION_SHARE_DEFAULT_DEVICE_LIMIT = 4;
 
 export const COLLECTION_SORT_ORDER = new Map([
-    [CollectionType.all, 0],
+    [CollectionSummaryType.all, 0],
-    [CollectionType.favorites, 1],
+    [CollectionSummaryType.favorites, 1],
-    [CollectionType.album, 2],
+    [CollectionSummaryType.album, 2],
-    [CollectionType.folder, 2],
+    [CollectionSummaryType.folder, 2],
-    [CollectionType.shared, 2],
+    [CollectionSummaryType.shared, 2],
-    [CollectionType.archive, 3],
+    [CollectionSummaryType.archived, 2],
-    [CollectionType.trash, 4],
+    [CollectionSummaryType.archive, 3],
+    [CollectionSummaryType.trash, 4],
 ]);
 
 export const SYSTEM_COLLECTION_TYPES = new Set([
-    CollectionType.all,
+    CollectionSummaryType.all,
-    CollectionType.archive,
+    CollectionSummaryType.archive,
-    CollectionType.trash,
+    CollectionSummaryType.trash,
 ]);
 
-export const UPLOAD_ALLOWED_COLLECTION_TYPES = new Set([
+export const UPLOAD_NOT_ALLOWED_COLLECTION_TYPES = new Set([
-    CollectionType.album,
+    CollectionSummaryType.all,
-    CollectionType.folder,
+    CollectionSummaryType.archive,
-    CollectionType.favorites,
+    CollectionSummaryType.shared,
+    CollectionSummaryType.trash,
 ]);
 
-export const OPTIONS_HAVING_COLLECTION_TYPES = new Set([
+export const OPTIONS_NOT_HAVING_COLLECTION_TYPES = new Set([
-    CollectionType.folder,
+    CollectionSummaryType.all,
-    CollectionType.album,
+    CollectionSummaryType.archive,
-    CollectionType.trash,
+    CollectionSummaryType.shared,
+    CollectionSummaryType.favorites,
 ]);
 
 export const HIDE_FROM_COLLECTION_BAR_TYPES = new Set([
-    CollectionType.trash,
+    CollectionSummaryType.trash,
-    CollectionType.archive,
+    CollectionSummaryType.archive,
 ]);

src/services/collectionService.ts

@@ -32,6 +32,7 @@ import {
     TRASH_SECTION,
     COLLECTION_SORT_ORDER,
     ALL_SECTION,
+    CollectionSummaryType,
 } from 'constants/collection';
 import { UpdateMagicMetadataRequest } from 'types/magicMetadata';
 import { EncryptionResult } from 'types/upload';
@@ -786,8 +787,10 @@ export function getCollectionSummaries(
                 updationTime: collection.updationTime,
                 type:
                     collection.owner.id !== user.id
-                        ? CollectionType.shared
+                        ? CollectionSummaryType.shared
-                        : collection.type,
+                        : IsArchived(collection)
+                        ? CollectionSummaryType.archived
+                        : CollectionSummaryType[collection.type],
             });
         }
     }
@@ -853,7 +856,7 @@ function getAllCollectionSummaries(
     return {
         id: ALL_SECTION,
         name: constants.ALL_SECTION_NAME,
-        type: CollectionType.all,
+        type: CollectionSummaryType.all,
         latestFile: collectionsLatestFile.get(ALL_SECTION),
         fileCount: allSectionFileCount,
         updationTime: collectionsLatestFile.get(ALL_SECTION)?.updationTime,
@@ -867,7 +870,7 @@ function getArchivedCollectionSummaries(
     return {
         id: ARCHIVE_SECTION,
         name: constants.ARCHIVE_SECTION_NAME,
-        type: CollectionType.archive,
+        type: CollectionSummaryType.archive,
         latestFile: collectionsLatestFile.get(ARCHIVE_SECTION),
         fileCount: collectionFilesCount.get(ARCHIVE_SECTION) ?? 0,
         updationTime: collectionsLatestFile.get(ARCHIVE_SECTION)?.updationTime,
@@ -881,7 +884,7 @@ function getTrashedCollectionSummaries(
     return {
         id: TRASH_SECTION,
         name: constants.TRASH,
-        type: CollectionType.trash,
+        type: CollectionSummaryType.trash,
         latestFile: collectionsLatestFile.get(TRASH_SECTION),
         fileCount: collectionFilesCount.get(TRASH_SECTION) ?? 0,
         updationTime: collectionsLatestFile.get(TRASH_SECTION)?.updationTime,

src/types/collection/index.ts

@@ -1,6 +1,6 @@
 import { User } from 'types/user';
 import { EnteFile } from 'types/file';
-import { CollectionType } from 'constants/collection';
+import { CollectionSummaryType, CollectionType } from 'constants/collection';
 import { MagicMetadataCore, VISIBILITY_STATE } from 'types/magicMetadata';
 
 export interface Collection {
@@ -91,7 +91,7 @@ export interface CollectionMagicMetadata
 export interface CollectionSummary {
     id: number;
     name: string;
-    type: CollectionType;
+    type: CollectionSummaryType;
     latestFile: EnteFile;
     fileCount: number;
     updationTime: number;
@@ -99,10 +99,3 @@ export interface CollectionSummary {
 
 export type CollectionSummaries = Map<number, CollectionSummary>;
 export type CollectionFilesCount = Map<number, number>;
-
-export interface CollectionInfo {
-    id: number;
-    name: string;
-    fileCount: number;
-    type: CollectionType;
-}

src/utils/collection/index.ts

@@ -20,11 +20,12 @@ import {
     CollectionSummaries,
 } from 'types/collection';
 import {
+    CollectionSummaryType,
     CollectionType,
     HIDE_FROM_COLLECTION_BAR_TYPES,
-    OPTIONS_HAVING_COLLECTION_TYPES,
+    OPTIONS_NOT_HAVING_COLLECTION_TYPES,
     SYSTEM_COLLECTION_TYPES,
-    UPLOAD_ALLOWED_COLLECTION_TYPES,
+    UPLOAD_NOT_ALLOWED_COLLECTION_TYPES,
 } from 'constants/collection';
 import { getAlbumSiteHost } from 'constants/pages';
 import { getUnixTimeInMicroSecondsWithDelta } from 'utils/time';
@@ -208,18 +209,18 @@ export const hasNonEmptyCollections = (
     return collectionSummaries?.size <= 3;
 };
 
-export const isUploadAllowedCollection = (type: CollectionType) => {
+export const isUploadAllowedCollection = (type: CollectionSummaryType) => {
-    return UPLOAD_ALLOWED_COLLECTION_TYPES.has(type);
+    return !UPLOAD_NOT_ALLOWED_COLLECTION_TYPES.has(type);
 };
 
-export const isSystemCollection = (type: CollectionType) => {
+export const isSystemCollection = (type: CollectionSummaryType) => {
     return SYSTEM_COLLECTION_TYPES.has(type);
 };
 
-export const isOptionsHavingCollection = (type: CollectionType) => {
+export const shouldShowOptions = (type: CollectionSummaryType) => {
-    return OPTIONS_HAVING_COLLECTION_TYPES.has(type);
+    return !OPTIONS_NOT_HAVING_COLLECTION_TYPES.has(type);
 };
 
-export const shouldBeShownOnCollectionBar = (type: CollectionType) => {
+export const shouldBeShownOnCollectionBar = (type: CollectionSummaryType) => {
     return !HIDE_FROM_COLLECTION_BAR_TYPES.has(type);
 };