From 0859002c0c677eb5e18230148869a3155334c7a0 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 25 Mar 2022 13:25:59 -0700
Subject: [PATCH 1/5] Remove next dependencies from the article components

This pulls next related deps up into the page instead of the
component and allows us to pull next out of the app reader
dependency.
---
 packages/appreader/src/index.jsx              |  1 -
 .../templates/article/ArticleContainer.tsx    | 43 +------------------
 .../templates/article/HighlightsLayer.tsx     |  1 -
 .../web/pages/[username]/[slug]/index.tsx     | 43 +++++++++++++++++--
 .../web/pages/app/[username]/[slug]/index.tsx |  1 -
 5 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/packages/appreader/src/index.jsx b/packages/appreader/src/index.jsx
index 0b151f5e6..5453b3cd2 100644
--- a/packages/appreader/src/index.jsx
+++ b/packages/appreader/src/index.jsx
@@ -33,7 +33,6 @@ const App = () => {
           className="disable-webkit-callout"
         >
           <ArticleContainer
-            viewerUsername="test"
             article={window.omnivoreArticle}
             scrollElementRef={React.createRef()}
             isAppleAppEmbed={true}
diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index f68dfc600..163e3cfb7 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@@ -10,19 +10,14 @@ import { MutableRefObject, useEffect, useState } from 'react'
 import { ReportIssuesModal } from './ReportIssuesModal'
 import { reportIssueMutation } from '../../../lib/networking/mutations/reportIssueMutation'
 import { ArticleHeaderToolbar } from './ArticleHeaderToolbar'
-import { articleKeyboardCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
-import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
 import { ShareArticleModal } from './ShareArticleModal'
 import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
 import { webBaseURL } from '../../../lib/appConfig'
 import { updateThemeLocally } from '../../../lib/themeUpdater'
 import { EditLabelsModal } from './EditLabelsModal'
-import Script from 'next/script'
-import { useRouter } from 'next/router'
 import { ArticleMutations } from '../../../lib/articleActions'
 
 type ArticleContainerProps = {
-  viewerUsername: string
   article: ArticleAttributes
   articleMutations: ArticleMutations
   scrollElementRef: MutableRefObject<HTMLDivElement | null>
@@ -35,7 +30,6 @@ type ArticleContainerProps = {
 }
 
 export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
-  const router = useRouter()
   const [showShareModal, setShowShareModal] = useState(false)
   const [showLabelsModal, setShowLabelsModal] = useState(false)
   const [showNotesSidebar, setShowNotesSidebar] = useState(false)
@@ -50,28 +44,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
     await userPersonalizationMutation({ fontSize: newFontSize })
   }
 
-  useKeyboardShortcuts(
-    articleKeyboardCommands(router, async (action) => {
-      switch (action) {
-        case 'openOriginalArticle':
-          const url = props.article.url
-          if (url) {
-            window.open(url, '_blank')
-          }
-          break
-        case 'incrementFontSize':
-          await updateFontSize(Math.min(fontSize + 2, 28))
-          break
-        case 'decrementFontSize':
-          await updateFontSize(Math.max(fontSize - 2, 10))
-          break
-        case 'editLabels':
-          setShowLabelsModal(true)
-          break
-      }
-    })
-  )
-
   // Listen for font size and color mode change events sent from host apps (ios, macos...)
   useEffect(() => {
     const increaseFontSize = async () => {
@@ -123,16 +95,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
 
   return (
     <>
-      {!props.isAppleAppEmbed && (
-        <>
-          <Script async src="/static/scripts/mathJaxConfiguration.js" />
-          <Script
-            async
-            id="MathJax-script"
-            src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
-          />
-        </>
-      )}
       <Box
         id="article-container"
         css={{
@@ -213,7 +175,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
         <Box css={{ height: '100px' }} />
       </Box>
       <HighlightsLayer
-        viewerUsername={props.viewerUsername}
         highlights={props.article.highlights}
         articleTitle={props.article.title}
         articleAuthor={props.article.author ?? ''}
@@ -238,7 +199,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           onOpenChange={(open: boolean) => setShowReportIssuesModal(open)}
         />
       ) : null}
-      {showShareModal && (
+      {/* {showShareModal && (
         <ShareArticleModal
           url={`${webBaseURL}/${props.viewerUsername}/${props.article.slug}/highlights?r=true`}
           title={props.article.title}
@@ -249,7 +210,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           originalArticleUrl={props.article.originalArticleUrl}
           onOpenChange={(open: boolean) => setShowShareModal(open)}
         />
-      )}
+      )} */}
       {showLabelsModal && (
         <EditLabelsModal
           labels={labels}
diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index d8d662598..f3a705580 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -21,7 +21,6 @@ import { showErrorToast } from '../../../lib/toastHelpers'
 import { ArticleMutations } from '../../../lib/articleActions'
 
 type HighlightsLayerProps = {
-  viewerUsername: string
   highlights: Highlight[]
   articleId: string
   articleTitle: string
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 999a75a3d..eb4a31757 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -6,9 +6,9 @@ import { useRouter } from 'next/router'
 import { VStack } from './../../../components/elements/LayoutPrimitives'
 import { ArticleContainer } from './../../../components/templates/article/ArticleContainer'
 import { PdfArticleContainerProps } from './../../../components/templates/article/PdfArticleContainer'
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import { useKeyboardShortcuts } from '../../../lib/keyboardShortcuts/useKeyboardShortcuts'
-import { navigationCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
+import { articleKeyboardCommands, navigationCommands } from '../../../lib/keyboardShortcuts/navigationShortcuts'
 import dynamic from 'next/dynamic'
 import { useGetUserPreferences } from '../../../lib/networking/queries/useGetUserPreferences'
 import { webBaseURL } from '../../../lib/appConfig'
@@ -18,6 +18,8 @@ import { deleteHighlightMutation } from '../../../lib/networking/mutations/delet
 import { mergeHighlightMutation } from '../../../lib/networking/mutations/mergeHighlightMutation'
 import { articleReadingProgressMutation } from '../../../lib/networking/mutations/articleReadingProgressMutation'
 import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
+import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
+import Script from 'next/script'
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
   () => import('./../../../components/templates/article/PdfArticleContainer'),
@@ -38,9 +40,37 @@ export default function Home(): JSX.Element {
   })
   const { preferencesData } = useGetUserPreferences()
   const article = articleData?.article.article
+  const [fontSize, setFontSize] = useState(preferencesData?.fontSize ?? 20)
 
   useKeyboardShortcuts(navigationCommands(router))
 
+  const updateFontSize = async (newFontSize: number) => {
+    setFontSize(newFontSize)
+    await userPersonalizationMutation({ fontSize: newFontSize })
+  }
+
+  useKeyboardShortcuts(
+    articleKeyboardCommands(router, async (action) => {
+      switch (action) {
+        case 'openOriginalArticle':
+          const url = article?.url
+          if (url) {
+            window.open(url, '_blank')
+          }
+          break
+        case 'incrementFontSize':
+          await updateFontSize(Math.min(fontSize + 2, 28))
+          break
+        case 'decrementFontSize':
+          await updateFontSize(Math.max(fontSize - 2, 10))
+          break
+        case 'editLabels':
+          setShowLabelsModal(true)
+          break
+      }
+    })
+  )
+
   if (article && viewerData?.me) {
     return (
       <PrimaryLayout
@@ -53,6 +83,12 @@ export default function Home(): JSX.Element {
           description: article.description,
         }}
       >
+        <Script async src="/static/scripts/mathJaxConfiguration.js" />
+        <Script
+          async
+          id="MathJax-script"
+          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
+        />
         <Toaster />
 
           {article.contentReader == 'PDF' ? (
@@ -72,9 +108,8 @@ export default function Home(): JSX.Element {
                 scrollElementRef={scrollRef}
                 isAppleAppEmbed={false}
                 highlightBarDisabled={false}
-                viewerUsername={viewerData.me?.profile?.username}
                 highlightsBaseURL={`${webBaseURL}/${viewerData.me?.profile?.username}/${slug}/highlights`}
-                fontSize={preferencesData?.fontSize}
+                fontSize={fontSize}
                 articleMutations={{
                   createHighlightMutation,
                   deleteHighlightMutation,
diff --git a/packages/web/pages/app/[username]/[slug]/index.tsx b/packages/web/pages/app/[username]/[slug]/index.tsx
index 92411514d..4f7ea04b9 100644
--- a/packages/web/pages/app/[username]/[slug]/index.tsx
+++ b/packages/web/pages/app/[username]/[slug]/index.tsx
@@ -88,7 +88,6 @@ function AppArticleEmbedContent(
             scrollElementRef={scrollRef}
             isAppleAppEmbed={true}
             highlightBarDisabled={props.highlightBarDisabled}
-            viewerUsername={props.username}
             highlightsBaseURL={`${webBaseURL}/${props.username}/${props.slug}/highlights`}
             fontSize={props.fontSize}
             margin={props.margin}

From 69abc55615e912394490736a9186de33fd626a8a Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 25 Mar 2022 14:02:02 -0700
Subject: [PATCH 2/5] Add MathJax scripts to /app

---
 packages/web/pages/app/[username]/[slug]/index.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/web/pages/app/[username]/[slug]/index.tsx b/packages/web/pages/app/[username]/[slug]/index.tsx
index 4f7ea04b9..82a9d225d 100644
--- a/packages/web/pages/app/[username]/[slug]/index.tsx
+++ b/packages/web/pages/app/[username]/[slug]/index.tsx
@@ -12,6 +12,7 @@ import { deleteHighlightMutation } from '../../../../lib/networking/mutations/de
 import { mergeHighlightMutation } from '../../../../lib/networking/mutations/mergeHighlightMutation'
 import { updateHighlightMutation } from '../../../../lib/networking/mutations/updateHighlightMutation'
 import { articleReadingProgressMutation } from '../../../../lib/networking/mutations/articleReadingProgressMutation'
+import Script from 'next/script'
 
 type AppArticleEmbedContentProps = {
   slug: string
@@ -78,6 +79,12 @@ function AppArticleEmbedContent(
           width: '100vw',
         }}
       >
+        <Script async src="/static/scripts/mathJaxConfiguration.js" />
+        <Script
+          async
+          id="MathJax-script"
+          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
+        />
         <VStack
           alignment="center"
           distribution="center"

From ea98d97915d795e14eb54330ac6da88ca3782c86 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 25 Mar 2022 14:02:57 -0700
Subject: [PATCH 3/5] Move the edit labels modal into the page so the embedded
 react component does not bundle it

This will have a native modal on iOS
---
 packages/web/components/elements/Label.tsx    | 32 ---------------
 .../templates/article/ArticleContainer.tsx    | 12 ------
 .../templates/article/EditLabelsModal.tsx     | 39 ++++++++++---------
 .../web/pages/[username]/[slug]/index.tsx     | 20 +++++++++-
 4 files changed, 39 insertions(+), 64 deletions(-)
 delete mode 100644 packages/web/components/elements/Label.tsx

diff --git a/packages/web/components/elements/Label.tsx b/packages/web/components/elements/Label.tsx
deleted file mode 100644
index 44dbed21a..000000000
--- a/packages/web/components/elements/Label.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { StyledText } from './StyledText'
-
-type LabelProps = {
-  text: string
-  color: string // expected to be a RGB hex color string
-}
-
-export function Label(props: LabelProps): JSX.Element {
-  const hexToRgb = (hex: string) => {
-    const bigint = parseInt(hex.substring(1), 16)
-    const r = (bigint >> 16) & 255
-    const g = (bigint >> 8) & 255
-    const b = bigint & 255
-
-    return [r, g, b]
-  }
-  const color = hexToRgb(props.color)
-  return (
-    <StyledText
-      css={{
-        margin: '4px',
-        borderRadius: '32px',
-        color: props.color,
-        padding: '4px 8px 4px 8px',
-        border: `1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.40)`,
-        backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.20)`,
-      }}
-    >
-      {props.text}
-    </StyledText>
-  )
-}
diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index 163e3cfb7..58c7ccd8f 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@@ -211,18 +211,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
           onOpenChange={(open: boolean) => setShowShareModal(open)}
         />
       )} */}
-      {showLabelsModal && (
-        <EditLabelsModal
-          labels={labels}
-          article={props.article}
-          onOpenChange={() => {
-            setShowLabelsModal(false)
-          }}
-          setLabels={(labels: string[]) => {
-            setLabels(labels)
-          }}
-        />
-      )}
     </>
   )
 }
diff --git a/packages/web/components/templates/article/EditLabelsModal.tsx b/packages/web/components/templates/article/EditLabelsModal.tsx
index 9fb10c323..c2ebe7786 100644
--- a/packages/web/components/templates/article/EditLabelsModal.tsx
+++ b/packages/web/components/templates/article/EditLabelsModal.tsx
@@ -10,15 +10,16 @@ import { CrossIcon } from '../../elements/images/CrossIcon'
 import { theme } from '../../tokens/stitches.config'
 import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
 import { ChangeEvent, useCallback, useState } from 'react'
-import { Label } from '../../elements/Label'
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
 import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
+import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { LabelChip } from '../../elements/LabelChip'
 
 type EditLabelsModalProps = {
-  labels: string[]
+  labels: Label[]
   article: ArticleAttributes
   onOpenChange: (open: boolean) => void
-  setLabels: (labels: string[]) => void
+  setLabels: (labels: Label[]) => void
 }
 
 export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
@@ -26,7 +27,7 @@ export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
   const { labels } = useGetLabelsQuery()
 
   const saveAndExit = useCallback(async () => {
-    const result = await setLabelsMutation(props.article.id, selectedLabels)
+    const result = await setLabelsMutation(props.article.id, selectedLabels.map((l) => l.id))
     console.log('result of setting labels', result)
     props.onOpenChange(false)
     props.setLabels(selectedLabels)
@@ -34,12 +35,12 @@ export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
 
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
-      const label = event.target.value
-      if (event.target.checked) {
-        setSelectedLabels([...selectedLabels, label])
-      } else {
-        setSelectedLabels(selectedLabels.filter((l) => l !== label))
-      }
+      // const label = event.target.value
+      // if (event.target.checked) {
+      //   setSelectedLabels([...selectedLabels, label])
+      // } else {
+      //   setSelectedLabels(selectedLabels.filter((l) => l !== label))
+      // }
     },
     [selectedLabels]
   )
@@ -81,21 +82,21 @@ export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
                 key={label.id}
                 css={{ height: '50px', verticalAlign: 'middle' }}
                 onClick={() => {
-                  if (selectedLabels.includes(label.id)) {
-                    setSelectedLabels(
-                      selectedLabels.filter((id) => id !== label.id)
-                    )
-                  } else {
-                    setSelectedLabels([...selectedLabels, label.id])
-                  }
+                  // if (selectedLabels.includes(label.id)) {
+                  //   setSelectedLabels(
+                  //     selectedLabels.filter((id) => id !== label.id)
+                  //   )
+                  // } else {
+                  //   setSelectedLabels([...selectedLabels, label.id])
+                  // }
                 }}
               >
-                <Label color={label.color} text={label.name} />
+                <LabelChip color={label.color} text={label.name} />
                 <input
                   type="checkbox"
                   value={label.id}
                   onChange={handleChange}
-                  checked={selectedLabels.includes(label.id)}
+                  checked={selectedLabels.includes(label)}
                 />
               </HStack>
             ))}
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index eb4a31757..f06475756 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -20,6 +20,9 @@ import { articleReadingProgressMutation } from '../../../lib/networking/mutation
 import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
 import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
 import Script from 'next/script'
+import { EditLabelsModal } from '../../../components/templates/article/EditLabelsModal'
+import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { isVipUser } from '../../../lib/featureFlag'
 
 const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
   () => import('./../../../components/templates/article/PdfArticleContainer'),
@@ -30,6 +33,7 @@ export default function Home(): JSX.Element {
   const router = useRouter()
   const scrollRef = useRef<HTMLDivElement | null>(null)
   const { slug } = router.query
+  const [showLabelsModal, setShowLabelsModal] = useState(false)
 
   // Populate data cache
   const { viewerData } = useGetViewerQuery()
@@ -65,7 +69,9 @@ export default function Home(): JSX.Element {
           await updateFontSize(Math.max(fontSize - 2, 10))
           break
         case 'editLabels':
-          setShowLabelsModal(true)
+          if (viewerData?.me && isVipUser(viewerData?.me)) {
+            setShowLabelsModal(true)
+          }
           break
       }
     })
@@ -118,6 +124,18 @@ export default function Home(): JSX.Element {
                   articleReadingProgressMutation,
                 }}
               />
+              {showLabelsModal && (
+                <EditLabelsModal
+                  labels={article.labels || []}
+                  article={article}
+                  onOpenChange={() => {
+                    setShowLabelsModal(false)
+                  }}
+                  setLabels={(labels: Label[]) => {
+                    // setLabels(labels)
+                  }}
+                />
+              )}
             </VStack>
           )}
       </PrimaryLayout>

From 1784edefafc874dc1e0f1f916716243d4f07c8c5 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 25 Mar 2022 14:17:02 -0700
Subject: [PATCH 4/5] Remove unused imports, use a single Label fragment

---
 .../templates/article/ArticleContainer.tsx       |  3 ---
 .../templates/article/HighlightsLayer.tsx        |  2 --
 .../lib/networking/fragments/labelFragment.ts    |  1 +
 .../lib/networking/queries/useGetLabelsQuery.tsx | 16 +++-------------
 .../queries/useGetLibraryItemsQuery.tsx          |  2 +-
 5 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx
index 58c7ccd8f..2976227a9 100644
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@@ -10,11 +10,8 @@ import { MutableRefObject, useEffect, useState } from 'react'
 import { ReportIssuesModal } from './ReportIssuesModal'
 import { reportIssueMutation } from '../../../lib/networking/mutations/reportIssueMutation'
 import { ArticleHeaderToolbar } from './ArticleHeaderToolbar'
-import { ShareArticleModal } from './ShareArticleModal'
 import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
-import { webBaseURL } from '../../../lib/appConfig'
 import { updateThemeLocally } from '../../../lib/themeUpdater'
-import { EditLabelsModal } from './EditLabelsModal'
 import { ArticleMutations } from '../../../lib/articleActions'
 
 type ArticleContainerProps = {
diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index f3a705580..3d19c33ff 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -3,8 +3,6 @@ import { makeHighlightStartEndOffset } from '../../../lib/highlights/highlightGe
 import type { HighlightLocation } from '../../../lib/highlights/highlightGenerator'
 import { useSelection } from '../../../lib/highlights/useSelection'
 import type { Highlight } from '../../../lib/networking/fragments/highlightFragment'
-import { shareHighlightToFeedMutation } from '../../../lib/networking/mutations/shareHighlightToFeedMutation'
-import { shareHighlightCommentMutation } from '../../../lib/networking/mutations/updateShareHighlightCommentMutation'
 import {
   highlightIdAttribute,
   highlightNoteIdAttribute,
diff --git a/packages/web/lib/networking/fragments/labelFragment.ts b/packages/web/lib/networking/fragments/labelFragment.ts
index a3ed216cb..837019fa7 100644
--- a/packages/web/lib/networking/fragments/labelFragment.ts
+++ b/packages/web/lib/networking/fragments/labelFragment.ts
@@ -6,6 +6,7 @@ export const labelFragment = gql`
     name
     color
     description
+    createdAt
   }
 `
 
diff --git a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
index d132d3042..211c53178 100644
--- a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
@@ -1,5 +1,6 @@
 import { gql } from 'graphql-request'
 import useSWR from 'swr'
+import { Label, labelFragment } from '../fragments/labelFragment'
 import { publicGqlFetcher } from '../networkHelpers'
 
 type LabelsQueryResponse = {
@@ -16,25 +17,13 @@ type LabelsData = {
   labels?: unknown
 }
 
-export type Label = {
-  id: string
-  name: string
-  color: string
-  description?: string
-  createdAt: Date
-}
-
 export function useGetLabelsQuery(): LabelsQueryResponse {
   const query = gql`
     query GetLabels {
       labels {
         ... on LabelsSuccess {
           labels {
-            id
-            name
-            color
-            description
-            createdAt
+            ...LabelFields
           }
         }
         ... on LabelsError {
@@ -42,6 +31,7 @@ export function useGetLabelsQuery(): LabelsQueryResponse {
         }
       }
     }
+    ${labelFragment}
   `
 
   const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
diff --git a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
index 70a66ca71..3a761076e 100644
--- a/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetLibraryItemsQuery.tsx
@@ -6,7 +6,7 @@ import { articleFragment } from '../fragments/articleFragment'
 import { setLinkArchivedMutation } from '../mutations/setLinkArchivedMutation'
 import { deleteLinkMutation } from '../mutations/deleteLinkMutation'
 import { articleReadingProgressMutation } from '../mutations/articleReadingProgressMutation'
-import { Label } from './useGetLabelsQuery'
+import { Label } from './../fragments/labelFragment'
 import { showErrorToast, showSuccessToast } from '../../toastHelpers'
 
 export type LibraryItemsQueryInput = {

From a856297002a1e05f8a9f66ce4e83111921cd8e72 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 25 Mar 2022 14:37:37 -0700
Subject: [PATCH 5/5] Add LabelChip file

---
 .../web/components/elements/LabelChip.tsx     | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 packages/web/components/elements/LabelChip.tsx

diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx
new file mode 100644
index 000000000..ee39b1497
--- /dev/null
+++ b/packages/web/components/elements/LabelChip.tsx
@@ -0,0 +1,32 @@
+import { StyledText } from './StyledText'
+
+type LabelChipProps = {
+  text: string
+  color: string // expected to be a RGB hex color string
+}
+
+export function LabelChip(props: LabelChipProps): JSX.Element {
+  const hexToRgb = (hex: string) => {
+    const bigint = parseInt(hex.substring(1), 16)
+    const r = (bigint >> 16) & 255
+    const g = (bigint >> 8) & 255
+    const b = bigint & 255
+
+    return [r, g, b]
+  }
+  const color = hexToRgb(props.color)
+  return (
+    <StyledText
+      css={{
+        margin: '4px',
+        borderRadius: '32px',
+        color: props.color,
+        padding: '4px 8px 4px 8px',
+        border: `1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.40)`,
+        backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.20)`,
+      }}
+    >
+      {props.text}
+    </StyledText>
+  )
+}