refactor: use common sortHighlights function

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

@@ -7,11 +7,11 @@ import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery
 import { LibraryItemNode } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { Button } from '../../elements/Button'
 import { theme } from '../../tokens/stitches.config'
-import { getHighlightLocation } from '../../templates/article/NotebookModal'
 import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
 import { HighlightView } from '../HighlightView'
 import { useRouter } from 'next/router'
 import { showErrorToast } from '../../../lib/toastHelpers'
+import { sortHighlights } from '../../../lib/highlights/sortHighlights'
 
 export const GridSeparator = styled(Box, {
   height: '1px',
@@ -57,37 +57,7 @@ export function LibraryHighlightGridCard(
   )
 
   const sortedHighlights = useMemo(() => {
-    const sorted = (a: number, b: number) => {
-      if (a < b) {
-        return -1
-      }
-      if (a > b) {
-        return 1
-      }
-      return 0
-    }
-
-    if (!props.item.highlights) {
-      return []
-    }
-
-    return props.item.highlights
-      .filter((h) => h.type === 'HIGHLIGHT')
-      .sort((a: Highlight, b: Highlight) => {
-        if (a.highlightPositionPercent && b.highlightPositionPercent) {
-          return sorted(a.highlightPositionPercent, b.highlightPositionPercent)
-        }
-        // We do this in a try/catch because it might be an invalid diff
-        // With PDF it will definitely be an invalid diff.
-        try {
-          const aPos = getHighlightLocation(a.patch)
-          const bPos = getHighlightLocation(b.patch)
-          if (aPos && bPos) {
-            return sorted(aPos, bPos)
-          }
-        } catch {}
-        return a.createdAt.localeCompare(b.createdAt)
-      })
+    return sortHighlights(props.item.highlights ?? [])
   }, [props.item.highlights])
 
   return (