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

@@ -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>
-  )
-}

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)
-          }}
-        />
-      )}
     </>
   )
 }

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>
             ))}

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>