feat(UI): some change about labelList

moon/apps/web/components/Issues/IssuesContent.tsx

@@ -38,6 +38,7 @@ import { Pagination } from './Pagenation'
 import { orderTags } from './utils/consts'
 import { generateAllMenuItems, MenuConfig } from './utils/generateAllMenuItems'
 import { useGetLabelList } from '@/hooks/useGetLabelList'
+import { getFontColor } from '@/utils/getFontColor'
 
 interface Props {
   getIssues?: ReturnType<typeof useInfiniteQuery<PostApiIssueListData>>
@@ -464,6 +465,33 @@ export const RightAvatar = ({ item }: { item: ItemsType[number] }) => {
   return (
     <>
       <div className='mr-10 flex w-fit items-center justify-between gap-10'>
+        <div
+          style={{
+            visibility: `${item.labels.length === 0 ? 'hidden' : 'unset'}`
+          }}
+          className='flex items-center gap-2 text-sm'
+        >
+          {item.labels.map(label => {
+            const fontColor = getFontColor(label.color)
+
+            return <span
+              key={label.id}
+              style={{
+                backgroundColor: label.color,
+                color: fontColor.toHex(),
+                borderRadius: '16px',
+                padding: '0px 8px',
+                fontSize: '12px',
+                fontWeight: '550',
+                justifyContent: 'center',
+                textAlign: 'center'
+              }}
+            >
+              {label.name}
+            </span>
+          })}
+        </div>
+
         <div
           style={{
             visibility: `${item.comment_num === 0 ? 'hidden' : 'unset'}`

moon/apps/web/components/Labels/NewLabelDialog.tsx

@@ -1,7 +1,8 @@
 // components/Labels/NewLabelDialog.tsx
 import React, { useState } from 'react';
 import { Button, Dialog, TextField, RefreshIcon } from '@gitmono/ui';
-import { colord, random } from 'colord';
+import { random } from 'colord';
+import { getFontColor } from '@/utils/getFontColor'
 
 interface NewLabelDialogProps {
   isOpen: boolean;
@@ -14,11 +15,7 @@ export const NewLabelDialog: React.FC<NewLabelDialogProps> = ({ isOpen, onClose,
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
 
-  const isDark = colord(color).isDark();
-  let fontColor = colord(color);
-
-  if(isDark) fontColor = fontColor.lighten(0.4);
-  else fontColor = fontColor.darken(0.5);
+  const fontColor = getFontColor(color)
 
   const generateRandomColor = () => {
     setColor(random().toHex());
@@ -47,11 +44,10 @@ export const NewLabelDialog: React.FC<NewLabelDialogProps> = ({ isOpen, onClose,
               style={{
                 backgroundColor: color,
                 color: fontColor.toHex(),
-                border: `1px solid ${fontColor.toHex()}`,
                 borderRadius: '16px',
                 padding: '2px 8px',
                 fontSize: '12px',
-                fontWeight: '700',
+                fontWeight: '600',
                 display: 'inline-block',
                 textAlign: 'center'
               }}

moon/apps/web/components/MrView/LabelItem.tsx

@@ -0,0 +1,42 @@
+import { ConditionalWrap } from '@gitmono/ui'
+import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember'
+import { MemberHovercard } from '../InlinePost/MemberHovercard'
+import { MemberAvatar } from '../MemberAvatar'
+import { UserLinkByName } from './components/UserLinkByName'
+import HandleTime from './components/HandleTime'
+import { ConversationItem } from '@gitmono/types/generated'
+
+
+interface LabelItemProps {
+  conv: ConversationItem
+}
+const LabelItem = ({ conv }: LabelItemProps) => {
+  const { data: member } = useGetOrganizationMember({ username: conv.username })
+
+  return (
+    <>
+      <div className='flex items-center space-x-2'>
+        <div className='cursor-pointer'>
+          <ConditionalWrap
+            condition={true}
+            wrap={(c) => (
+              <MemberHovercard username={conv?.username}>
+                <UserLinkByName username={conv?.username} className='relative'>
+                  {c}
+                </UserLinkByName>
+              </MemberHovercard>
+            )}
+          >
+            {member ? <MemberAvatar member={member} size='sm' /> : 'Avatar not found'}
+          </ConditionalWrap>
+        </div>
+        <div>{conv.comment}</div>
+        <div className='text-sm text-gray-500 hover:text-gray-700'>
+          <HandleTime created_at={conv.created_at}/>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default LabelItem

moon/apps/web/components/MrView/TimelineItems.tsx

@@ -2,7 +2,13 @@ import React from 'react'
 
 import '@primer/primitives/dist/css/functional/themes/light.css'
 
-import { CommentIcon, FeedMergedIcon, FeedPullRequestClosedIcon, FeedPullRequestOpenIcon } from '@primer/octicons-react'
+import {
+  CommentIcon,
+  FeedMergedIcon,
+  FeedPullRequestClosedIcon,
+  FeedPullRequestOpenIcon,
+  FeedTagIcon
+} from '@primer/octicons-react'
 import { BaseStyles, ThemeProvider, Timeline } from '@primer/react'
 
 import { ConversationItem } from '@gitmono/types/generated'
@@ -12,6 +18,7 @@ import MRComment from '@/components/MrView/MRComment'
 import CloseItem from './CloseItem'
 import MergedItem from './MergedItem'
 import ReopenItem from './ReopenItem'
+import LabelItem from '@/components/MrView/LabelItem'
 
 interface TimelineItemProps {
   badge?: React.ReactNode
@@ -88,8 +95,8 @@ const TimelineItems: React.FC<{ detail: any; id: string; type: string }> = ({ de
         children = <MRComment conv={conv} id={id} whoamI={type} />
         break
       case 'Label':
-        icon = <CommentIcon />
-        children = <MRComment conv={conv} id={id} whoamI={type}/>
+        icon = <FeedTagIcon size={24} className='text-cyan-500' />
+        children = <LabelItem conv={conv} />
         break
     }
 

moon/apps/web/pages/[org]/labels/index.tsx

@@ -1,5 +1,4 @@
 import React, { AwaitedReactNode, JSX, ReactElement, ReactNode, ReactPortal, useCallback, useEffect, useState } from 'react';
-import { Colord, colord } from 'colord';
 import { useRouter } from 'next/router';
 import { useDebounce } from 'use-debounce';
 import { LabelItem } from '@gitmono/types'
@@ -20,6 +19,7 @@ import { usePostLabelNew } from '@/hooks/usePostLabelNew'
 import { atomFamily } from 'jotai/utils'
 import { atomWithWebStorage } from '@/utils/atomWithWebStorage'
 import { useAtom } from 'jotai'
+import { getFontColor } from '@/utils/getFontColor'
 
 const labelListAtom = atomFamily((scope: string) =>
   atomWithWebStorage<LabelItem[]>(`${scope}:issue-label`, [])
@@ -164,11 +164,7 @@ function LabelsPage() {
             >
               {(labels) => {
                 return labels.map((label) => {
-                  const isDark = colord(label.color).isDark()
-                  let fontColor: Colord | string = colord(label.color)
-
-                  if(isDark) fontColor = fontColor.lighten(0.4).toHex()
-                  else fontColor = fontColor.darken(0.5).toHex()
+                  const fontColor = getFontColor(label.color)
 
                   return (
                     <ListItem
@@ -184,12 +180,11 @@ function LabelsPage() {
                         <div
                           style={{
                             backgroundColor: label.color,
-                            color: fontColor,
-                            border: `1px solid ${fontColor}`,
+                            color: fontColor.toHex(),
                             borderRadius: '16px',
                             padding: '2px 8px',
                             fontSize: '12px',
-                            fontWeight: '700',
+                            fontWeight: '600',
                             justifyContent: 'center',
                             textAlign: 'center'
                           }}

moon/apps/web/utils/getFontColor.ts

@@ -0,0 +1,11 @@
+import { Colord, colord } from 'colord'
+
+export function getFontColor(color: string): Colord {
+  const isDark = colord(color).isDark()
+  let fontColor: Colord = colord(color)
+
+  if(isDark) fontColor = fontColor.lighten(0.6)
+  else fontColor = fontColor.darken(0.5)
+
+  return fontColor
+}