feat: add label and fix some ui problem

web/app/(commonLayout)/plugins/test/card/page.tsx

@@ -20,6 +20,7 @@ const PluginList = async () => {
           <Card
             payload={toolNotion as any}
             descriptionLineRows={1}
+            showVersion
           />
         </div>
         <h3 className='my-1'>Installed</h3>

web/app/components/base/badge.tsx

@@ -5,22 +5,28 @@ type BadgeProps = {
   className?: string
   text: string
   uppercase?: boolean
+  hasRedCornerMark?: boolean
 }
 
 const Badge = ({
   className,
   text,
   uppercase = true,
+  hasRedCornerMark,
 }: BadgeProps) => {
   return (
     <div
       className={cn(
-        'inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep  leading-3 text-text-tertiary',
+        'relative inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep  leading-3 text-text-tertiary',
         uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
         className,
       )}
     >
       {text}
+      {hasRedCornerMark && (
+        <div className='absolute top-[-2px] right-[-2px] w-1.5 h-1.5 border border-components-badge-status-light-error-border-inner bg-components-badge-status-light-error-bg rounded-[2px] shadow-sm'>
+        </div>
+      )}
     </div>
   )
 }

web/app/components/plugins/card/base/org-info.tsx

@@ -1,18 +1,21 @@
 import cn from '@/utils/classnames'
+type Props = {
+  className?: string
+  orgName: string
+  packageName: string
+  packageNameClassName?: string
+}
 
 const OrgInfo = ({
   className,
   orgName,
   packageName,
-}: {
+  packageNameClassName,
-  className?: string
+}: Props) => {
-  orgName: string
-  packageName: string
-}) => {
   return <div className={cn('flex items-center h-4 space-x-0.5', className)}>
-    <span className="shrink-0 text-text-tertiary system-xs-regular">{orgName}</span>
+    <span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
     <span className='shrink-0 text-text-quaternary system-xs-regular'>/</span>
-    <span className="shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular">{packageName}</span>
+    <span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}>{packageName}</span>
   </div>
 }
 

web/app/components/plugins/card/card-mock.ts

@@ -4,7 +4,8 @@ export const toolNotion = {
   type: PluginType.tool,
   org: 'Notion',
   name: 'notion page search',
-  latest_version: '1.0.0',
+  version: '1.2.0',
+  latest_version: '1.3.0',
   icon: 'https://via.placeholder.com/150',
   label: {
     'en-US': 'Notion Page Search',
@@ -20,7 +21,8 @@ export const extensionDallE = {
   type: PluginType.extension,
   org: 'OpenAI',
   name: 'DALL-E',
-  latest_version: '1.0.0',
+  version: '1.1.0',
+  latest_version: '1.2.0',
   icon: 'https://via.placeholder.com/150',
   label: {
     'en-US': 'DALL-E',
@@ -36,6 +38,7 @@ export const modelGPT4 = {
   type: PluginType.model,
   org: 'OpenAI',
   name: 'GPT-4',
+  version: '1.0.0',
   latest_version: '1.0.0',
   icon: 'https://via.placeholder.com/150',
   label: {

web/app/components/plugins/card/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { RiVerifiedBadgeLine } from '@remixicon/react'
 import type { Plugin } from '../types'
+import Badge from '../../base/badge'
 import CornerMark from './base/corner-mark'
 import Icon from './base/icon'
 import Title from './base/title'
@@ -12,6 +13,7 @@ import { getLocaleOnServer } from '@/i18n/server'
 type Props = {
   className?: string
   payload: Plugin
+  showVersion?: boolean
   installed?: boolean
   descriptionLineRows?: number
   footer?: React.ReactNode
@@ -20,13 +22,14 @@ type Props = {
 const Card = ({
   className,
   payload,
+  showVersion,
   installed,
   descriptionLineRows = 2,
   footer,
 }: Props) => {
   const locale = getLocaleOnServer()
-
   const { type, name, org, label } = payload
+
   return (
     <div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
       <CornerMark text={type} />
@@ -37,6 +40,9 @@ const Card = ({
           <div className="flex items-center h-5">
             <Title title={label[locale]} />
             <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
+            {
+              showVersion && <Badge className='ml-1' text={payload.latest_version} />
+            }
           </div>
           <OrgInfo
             className="mt-0.5"

web/app/components/plugins/plugin-item.tsx

@@ -1,7 +1,8 @@
 import type { FC } from 'react'
 import React from 'react'
-import { RiArrowRightUpLine, RiVerifiedBadgeLine } from '@remixicon/react'
+import { RiArrowRightUpLine, RiLoginCircleLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import { Github } from '../base/icons/src/public/common'
+import Badge from '../base/badge'
 import type { Plugin } from './types'
 import CornerMark from './card/base/corner-mark'
 import Description from './card/base/description'
@@ -23,6 +24,7 @@ const PluginItem: FC<Props> = ({
 }) => {
   const locale = getLocaleOnServer()
   const { type, name, org, label } = payload
+  const hasNewVersion = payload.latest_version !== payload.version
 
   return (
     <div className='p-1 bg-background-section-burn rounded-xl'>
@@ -31,24 +33,29 @@ const PluginItem: FC<Props> = ({
         {/* Header */}
         <div className="flex">
           <Icon src={payload.icon} />
-          <div className="ml-3 grow">
+          <div className="ml-3 w-0 grow">
             <div className="flex items-center h-5">
               <Title title={label[locale]} />
               <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
+              <Badge className='ml-1' text={payload.version} hasRedCornerMark={hasNewVersion} />
             </div>
             <Description text={payload.brief[locale]} descriptionLineRows={1}></Description>
           </div>
         </div>
       </div>
-      <div className='mt-1.5 mb-1 flex justify-between items-center h-4'>
+      <div className='mt-1.5 mb-1 flex justify-between items-center h-4 px-3'>
         <div className='flex items-center'>
           <OrgInfo
             className="mt-0.5"
             orgName={org}
             packageName={name}
+            packageNameClassName='w-auto max-w-[150px]'
           />
           <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
-          <div className='text-text-tertiary system-xs-regular'>2 sets of endpoints enabled</div>
+          <div className='flex text-text-tertiary system-xs-regular space-x-1'>
+            <RiLoginCircleLine className='w-4 h-4' />
+            <span>2 sets of endpoints enabled</span>
+          </div>
         </div>
 
         <div className='flex items-center'>

web/app/components/plugins/types.ts

@@ -11,6 +11,7 @@ export type Plugin = {
   'type': PluginType
   'org': string
   'name': string
+  'version': string
   'latest_version': string
   'icon': string
   'label': Record<Locale, string>