get highlightsCount from the backend and show the count on web

packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx

@@ -177,11 +177,7 @@ type LibraryItemMetadataProps = {
 export function LibraryItemMetadata(
   props: LibraryItemMetadataProps
 ): JSX.Element {
-  const highlightCount = useMemo(() => {
-    return (
-      props.item.highlights?.filter((h) => h.type == 'HIGHLIGHT').length ?? 0
-    )
-  }, [props.item.highlights])
+  const highlightCount = props.item.highlightsCount ?? 0
 
   return (
     <HStack css={{ gap: '5px', alignItems: 'center' }}>

packages/web/lib/networking/library_items/gql.tsx

@@ -1,6 +1,6 @@
 import { gql } from 'graphql-request'
-import { highlightFragment } from '../fragments/highlightFragment'
 import { articleFragment } from '../fragments/articleFragment'
+import { highlightFragment } from '../fragments/highlightFragment'
 import { labelFragment } from '../fragments/labelFragment'
 
 export const recommendationFragment = gql`
@@ -69,9 +69,7 @@ export const GQL_SEARCH_QUERY = gql`
             readAt
             savedAt
             wordsCount
-            highlights {
-              ...HighlightFields
-            }
+            highlightsCount
           }
         }
         pageInfo {
@@ -87,7 +85,6 @@ export const GQL_SEARCH_QUERY = gql`
       }
     }
   }
-  ${highlightFragment}
 `
 
 export const GQL_SET_LINK_ARCHIVED = gql`

packages/web/lib/networking/library_items/useLibraryItems.tsx

@@ -998,6 +998,7 @@ export type LibraryItemNode = {
   aiSummary?: string
   recommendations?: Recommendation[]
   highlights?: Highlight[]
+  highlightsCount?: number
 }
 
 export type Recommendation = {