Pull scroll to highlight changes into this branch

packages/web/components/patterns/HighlightView.tsx

@@ -6,9 +6,9 @@ import { styled } from '../tokens/stitches.config'
 
 type HighlightViewProps = {
   highlight: Highlight
-  scrollToHighlight?: (arg: string) => void;
   author?: string
   title?: string
+  scrollToHighlight?: (arg: string) => void;
 }
 
 export function HighlightView(props: HighlightViewProps): JSX.Element {
@@ -16,23 +16,30 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
     () => props.highlight.quote.split('\n'),
     [props.highlight.quote]
   )
+  const annotation = props.highlight.annotation ?? '';
 
   const StyledQuote = styled(Blockquote, {
-    margin: '0px 0px 24px 0px',
-    fontSize: '14px',
-    lineHeight: '1.5',
-    fontFamily: 'Inter',
-    color: '$omnivoreGray',
+    margin: '0px 24px 16px 24px',
+    fontSize: '18px',
+    lineHeight: '27px',
+    color: '$textDefault',
     cursor: 'pointer',
   })
 
-  const scrollToHighlight = () => props.scrollToHighlight ? props.scrollToHighlight(props.highlight.id) : null
-
   return (
-    <VStack css={{ width: '100%', bg: '$omnivoreYellow', p: '20px' }}>
-      <StyledQuote onClick={scrollToHighlight}>
+    <VStack css={{ width: '100%', boxSizing: 'border-box' }}>
+      {annotation && (
+        <Box css={{p:'16px', m:'16px', ml:'24px', mr:'24px', borderRadius: '6px', bg: '$grayBase'}}>
+          <StyledText style='shareHighlightModalAnnotation'>{annotation}</StyledText>
+        </Box>)
+      }
+      <StyledQuote onClick={() => {
+        if (props.scrollToHighlight) {
+          props.scrollToHighlight(props.highlight.id)
+        }
+      }}>
         {props.highlight.prefix}
-        <SpanBox css={{ bg: '$highlight', p: '1px', borderRadius: '2px' }}>
+        <SpanBox css={{ bg: '$highlightBackground', p: '1px', borderRadius: '2px', }}>
           {lines.map((line: string, index: number) => (
             <Fragment key={index}>
               {line}
@@ -47,11 +54,10 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
         </SpanBox>
         {props.highlight.suffix}
       </StyledQuote>
-      <Box css={{}}>
-        {props.author && (
-          <StyledText style="highlightAuthor">{props.author}</StyledText>
+      <Box css={{p: '24px', pt: '0', width: '100%', boxSizing: 'border-box'}}>
+        {props.author && props.title &&(
+          <StyledText style="highlightTitleAndAuthor">{props.title + props.author}</StyledText>
         )}
-        <StyledText style="highlightTitle">{props.title}</StyledText>
       </Box>
     </VStack>
   )

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -40,7 +40,7 @@ import { Label } from '../../../lib/networking/fragments/labelFragment'
 import { isVipUser } from '../../../lib/featureFlag'
 import { EmptyLibrary } from './EmptyLibrary'
 import TopBarProgress from 'react-topbar-progress-indicator'
-import { State } from '../../../lib/networking/fragments/articleFragment'
+import { State, PageType } from '../../../lib/networking/fragments/articleFragment'
 
 export type LayoutType = 'LIST_LAYOUT' | 'GRID_LAYOUT'
 
@@ -262,7 +262,8 @@ export function HomeFeedContainer(props: HomeFeedContainerProps): JSX.Element {
           if (item.node.state === State.PROCESSING) {
             router.push(`/${username}/links/${item.node.id}`)
           } else {
-            router.push(`/${username}/${item.node.slug}`)
+            const dl = item.node.pageType === PageType.HIGHLIGHTS ? `#${item.node.id}` : ''
+            router.push(`/${username}/${item.node.slug}` + dl)
           }
         }
         break

packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx

@@ -85,31 +85,6 @@ export type PageInfo = {
   totalCount: number
 }
 
-const libraryItemFragment = gql`
-  fragment ArticleFields on Article {
-    id
-    title
-    url
-    author
-    image
-    savedAt
-    createdAt
-    publishedAt
-    contentReader
-    originalArticleUrl
-    readingProgressPercent
-    readingProgressAnchorIndex
-    slug
-    isArchived
-    description
-    linkId
-    state
-    labels {
-      ...LabelFields
-    }
-  }
-`
-
 export function useGetLibraryItemsQuery({
   limit,
   sortDescending,
@@ -197,8 +172,6 @@ export function useGetLibraryItemsQuery({
   let responseError = error
   let responsePages = data as LibraryItemsData[] | undefined
 
-  console.log('data', data)
-
   // We need to check the response errors here and return the error
   // it will be nested in the data pages, if there is one error,
   // we invalidate the data and return the error. We also zero out
@@ -334,8 +307,7 @@ export function useGetLibraryItemsQuery({
     }
   }
 
-  
-  const res = {
+  return {
     isValidating,
     itemsPages: responsePages || undefined,
     itemsDataError: responseError,
@@ -344,8 +316,4 @@ export function useGetLibraryItemsQuery({
     size,
     setSize,
   }
-
-  console.log('itemsPages', responsePages, 'error:', responseError)
-
-  return res
 }