diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx index 52e4ddd43..e7fd81c5a 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx @@ -2,7 +2,13 @@ import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' import { ChangeEvent, useMemo } from 'react' import { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery' -import { Box, SpanBox, VStack } from '../../elements/LayoutPrimitives' +import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives' +import { RecommendedFlairIcon } from '../../elements/icons/RecommendedFlairIcon' +import { PinnedFlairIcon } from '../../elements/icons/PinnedFlairIcon' +import { FavoriteFlairIcon } from '../../elements/icons/FavoriteFlairIcon' +import { NewsletterFlairIcon } from '../../elements/icons/NewsletterFlairIcon' +import { FeedFlairIcon } from '../../elements/icons/FeedFlairIcon' +import { Label } from '../../../lib/networking/fragments/labelFragment' dayjs.extend(relativeTime) @@ -83,6 +89,32 @@ const shouldHideUrl = (url: string): boolean => { return false } +export const FLAIR_ICON_NAMES = [ + 'favorite', + 'pinned', + 'recommended', + 'newsletter', + 'feed', + 'rss', +] + +const flairIconForLabel = (label: Label): JSX.Element | undefined => { + switch (label.name.toLocaleLowerCase()) { + case 'favorite': + return + case 'pinned': + return + case 'recommended': + return + case 'newsletter': + return + case 'rss': + case 'feed': + return + } + return undefined +} + export const siteName = ( originalArticleUrl: string, itemUrl: string @@ -114,7 +146,10 @@ export function LibraryItemMetadata( }, [props.item.highlights]) return ( - + + {props.item.labels?.map((label) => { + return flairIconForLabel(label) + })} {timeAgo(props.item.savedAt)} {` `} {props.item.wordsCount ?? 0 > 0 @@ -126,7 +161,7 @@ export function LibraryItemMetadata( {highlightCount > 0 ? ` • ${highlightCount} highlight${highlightCount > 1 ? 's' : ''}` : null} - + ) } diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx index 0ba2db164..0d139fbd3 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx @@ -13,6 +13,7 @@ import { siteName, TitleStyle, MenuStyle, + FLAIR_ICON_NAMES, } from './LibraryCardStyles' import { sortedLabels } from '../../../lib/labelsSort' import { LibraryHoverActions } from './LibraryHoverActions' @@ -285,9 +286,14 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => { marginLeft: '-4px', // offset because the chips have margin }} > - {sortedLabels(props.item.labels).map(({ name, color }, index) => ( - - ))} + {sortedLabels(props.item.labels) + .filter( + ({ name }) => + FLAIR_ICON_NAMES.indexOf(name.toLocaleLowerCase()) == -1 + ) + .map(({ name, color }, index) => ( + + ))} diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx index 95b8c4002..666a0b04c 100644 --- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx +++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx @@ -11,6 +11,7 @@ import { siteName, TitleStyle, MenuStyle, + FLAIR_ICON_NAMES, } from './LibraryCardStyles' import { sortedLabels } from '../../../lib/labelsSort' import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/homeFeed/LibraryFilterMenu' @@ -354,9 +355,14 @@ export function LibraryListCardContent( display: 'block', }} > - {sortedLabels(props.item.labels).map(({ name, color }, index) => ( - - ))} + {sortedLabels(props.item.labels) + .filter( + ({ name }) => + FLAIR_ICON_NAMES.indexOf(name.toLocaleLowerCase()) == -1 + ) + .map(({ name, color }, index) => ( + + ))}