Label flair for the web

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 <FavoriteFlairIcon />
+    case 'pinned':
+      return <PinnedFlairIcon />
+    case 'recommended':
+      return <RecommendedFlairIcon />
+    case 'newsletter':
+      return <NewsletterFlairIcon />
+    case 'rss':
+    case 'feed':
+      return <FeedFlairIcon />
+  }
+  return undefined
+}
+
 export const siteName = (
   originalArticleUrl: string,
   itemUrl: string
@@ -114,7 +146,10 @@ export function LibraryItemMetadata(
   }, [props.item.highlights])
 
   return (
-    <Box>
+    <HStack css={{ gap: '5px' }}>
+      {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}
-    </Box>
+    </HStack>
   )
 }
 

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) => (
-              <LabelChip key={index} text={name || ''} color={color} />
-            ))}
+            {sortedLabels(props.item.labels)
+              .filter(
+                ({ name }) =>
+                  FLAIR_ICON_NAMES.indexOf(name.toLocaleLowerCase()) == -1
+              )
+              .map(({ name, color }, index) => (
+                <LabelChip key={index} text={name || ''} color={color} />
+              ))}
           </HStack>
         </HStack>
       </VStack>

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) => (
-              <LabelChip key={index} text={name || ''} color={color} />
-            ))}
+            {sortedLabels(props.item.labels)
+              .filter(
+                ({ name }) =>
+                  FLAIR_ICON_NAMES.indexOf(name.toLocaleLowerCase()) == -1
+              )
+              .map(({ name, color }, index) => (
+                <LabelChip key={index} text={name || ''} color={color} />
+              ))}
           </HStack>
         </HStack>
       </VStack>