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) => (
+
+ ))}