Use single label type

packages/web/components/elements/LabelColorDropdown.tsx

@@ -2,21 +2,18 @@ import React, { useState } from 'react'
 import { styled } from '../tokens/stitches.config'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { HexColorPicker } from 'react-colorful'
-import { Button } from './Button'
 import { HStack, SpanBox } from './LayoutPrimitives'
 import { CaretDown } from 'phosphor-react'
 import { StyledText } from './StyledText'
 import {
-  ColorDetailsProps,
-  LabelColor,
   LabelColorDropdownProps,
-  LabelColorHex,
   LabelColorObject,
   LabelOptionProps,
 } from '../../utils/settings-page/labels/types'
 import { labelColorObjects } from '../../utils/settings-page/labels/labelColorObjects'
 import { DropdownOption } from './DropdownElements'
 import { isDarkTheme } from '../../lib/themeUpdater'
+import { LabelColor } from '../../lib/networking/fragments/labelFragment'
 
 const DropdownMenuContent = styled(DropdownMenuPrimitive.Content, {
   maxWidth: 190,

packages/web/components/templates/article/ArticleActionsMenu.tsx

@@ -91,7 +91,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
           </SpanBox>
         }
       >
-        <EditLabelsControl />
+        <EditLabelsControl article={props.article} />
       </ActionDropdown>
 {/* 
       <Button onClick={() => props.articleActionHandler('editLabels')} css={{

packages/web/components/templates/article/ArticleContainer.tsx

@@ -1,6 +1,6 @@
 import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
 import { Article } from './../../../components/templates/article/Article'
-import { Box, VStack } from './../../elements/LayoutPrimitives'
+import { Box, HStack, VStack } from './../../elements/LayoutPrimitives'
 import { StyledText } from './../../elements/StyledText'
 import { ArticleSubtitle } from './../../patterns/ArticleSubtitle'
 import { theme, ThemeId } from './../../tokens/stitches.config'
@@ -13,6 +13,7 @@ import { ArticleHeaderToolbar } from './ArticleHeaderToolbar'
 import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
 import { updateThemeLocally } from '../../../lib/themeUpdater'
 import { ArticleMutations } from '../../../lib/articleActions'
+import { LabelChip } from '../../elements/LabelChip'
 
 type ArticleContainerProps = {
   article: ArticleAttributes
@@ -158,6 +159,11 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
             author={props.article.author}
             href={props.article.url}
           />
+          <HStack>
+            {props.article.labels?.map((label) =>
+              <LabelChip key={label.id} text={label.name} color={label.color} />
+            )}
+          </HStack>
           <ArticleHeaderToolbar
             articleTitle={props.article.title}
             articleShareURL={props.highlightsBaseURL}

packages/web/components/templates/article/EditLabelsControl.tsx

@@ -1,25 +1,20 @@
-import {
-  ModalContent,
-  ModalOverlay,
-  ModalRoot,
-} from '../../elements/ModalPrimitives'
+import { useCallback, useRef, useState, useMemo, useEffect } from 'react'
+import Link from 'next/link'
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
 import { CrossIcon } from '../../elements/images/CrossIcon'
 import { styled, theme } from '../../tokens/stitches.config'
-import { Label, useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
-import { ChangeEvent, useCallback, useRef, useState, useMemo, useEffect, MouseEventHandler } from 'react'
-import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
+import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
 import { ArticleAttributes } from '../../../lib/networking/queries/useGetArticleQuery'
-import { LabelChip } from '../../elements/LabelChip'
-import { Check, Circle, Pen, PencilSimple, PencilSimpleLine, Plus, TagSimple } from 'phosphor-react'
-import Link from 'next/link'
+import { Check, Circle, PencilSimple, Plus } from 'phosphor-react'
+
 import { isTouchScreenDevice } from '../../../lib/deviceType'
 
 type EditLabelsControlProps = {
   // labels: Label[]
-  // article: ArticleAttributes
+  article: ArticleAttributes
   // onOpenChange: (open: boolean) => void
   // setLabels: (labels: Label[]) => void
 }
@@ -176,7 +171,7 @@ export function EditLabelsControl(props: EditLabelsControlProps): JSX.Element {
   const [filterText, setFilterText] = useState('')
   const { labels } = useGetLabelsQuery()
 
-  const [selectedLabels, setSelectedLabels] = useState<Label[]>([])
+  const [selectedLabels, setSelectedLabels] = useState<Label[]>(props.article.labels || [])
 
   const isSelected = useCallback((label: Label): boolean => {
     return selectedLabels.some((other) => {

packages/web/components/templates/article/EditLabelsModal.tsx

@@ -15,7 +15,7 @@ export function EditLabelsModal(): JSX.Element {
         }}
         css={{ overflow: 'auto', p: '0' }}
       >
-        <EditLabelsControl />
+        {/* <EditLabelsControl /> */}
       </ModalContent>
     </ModalRoot>
   )

packages/web/lib/networking/fragments/labelFragment.ts

@@ -1,5 +1,14 @@
 import { gql } from 'graphql-request'
 
+export type LabelColor =
+  | '#FF5D99'
+  | '#7CFF7B'
+  | '#FFD234'
+  | '#7BE4FF'
+  | '#CE88EF'
+  | '#EF8C43'
+  | 'custom color';
+
 export const labelFragment = gql`
   fragment LabelFields on Label {
     id
@@ -13,7 +22,7 @@ export const labelFragment = gql`
 export type Label = {
   id: string
   name: string
-  color: string
+  color: LabelColor
   description?: string
-  createdAt: string
-}
+  createdAt: Date
+}

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

@@ -1,7 +1,6 @@
 import { gql } from 'graphql-request'
 import useSWR from 'swr'
-import { LabelColor } from '../../../utils/settings-page/labels/types';
-import { labelFragment } from '../fragments/labelFragment'
+import { Label, labelFragment } from '../fragments/labelFragment'
 import { publicGqlFetcher } from '../networkHelpers'
 
 type LabelsQueryResponse = {
@@ -18,14 +17,6 @@ type LabelsData = {
   labels?: unknown
 }
 
-export type Label = {
-  id: string
-  name: string
-  color: LabelColor
-  description?: string
-  createdAt: Date
-}
-
 export function useGetLabelsQuery(): LabelsQueryResponse {
   const query = gql`
     query GetLabels {

packages/web/pages/[username]/[slug]/index.tsx

@@ -176,15 +176,15 @@ export default function Home(): JSX.Element {
             />
           ) : (
             <VStack
-            alignment="center"
-            distribution="center"
-            ref={scrollRef}
-            className="disable-webkit-callout"
-            css={{
-              '@smDown': {
-                background: theme.colors.grayBg.toString(),
-              }
-            }}
+              alignment="center"
+              distribution="center"
+              ref={scrollRef}
+              className="disable-webkit-callout"
+              css={{
+                '@smDown': {
+                  background: theme.colors.grayBg.toString(),
+                }
+              }}
             >
               <ArticleContainer
                 article={article}

packages/web/pages/settings/labels.tsx

@@ -15,8 +15,7 @@ import { updateLabelMutation } from '../../lib/networking/mutations/updateLabelM
 import { deleteLabelMutation } from '../../lib/networking/mutations/deleteLabelMutation'
 import { applyStoredTheme, isDarkTheme } from '../../lib/themeUpdater'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
-import { Label } from '../../lib/networking/queries/useGetLabelsQuery'
-
+import { Label, LabelColor } from '../../lib/networking/fragments/labelFragment'
 import { StyledText } from '../../components/elements/StyledText'
 import {
   ArrowClockwise,
@@ -26,7 +25,6 @@ import {
   Plus,
 } from 'phosphor-react'
 import {
-  LabelColor,
   GenericTableCardProps,
   LabelColorHex,
 } from '../../utils/settings-page/labels/types'

packages/web/utils/settings-page/labels/types.ts

@@ -1,14 +1,4 @@
-import React from "react";
-import { Label } from "../../../lib/networking/queries/useGetLabelsQuery";
-
-export type LabelColor =
-  | '#FF5D99'
-  | '#7CFF7B'
-  | '#FFD234'
-  | '#7BE4FF'
-  | '#CE88EF'
-  | '#EF8C43'
-  | 'custom color';
+import { Label, LabelColor } from "../../../lib/networking/fragments/labelFragment";
 
 export type LabelOptionProps = {
   color: string;