chore: handle published filter

web/app/(commonLayout)/apps/check-legacy/page.tsx

@@ -4,7 +4,8 @@ import Header from './components/header'
 import List from './components/list'
 import useLegacyList from './use-legacy-list'
 import Chip from '@/app/components/base/chip'
-import { RiFile3Line } from '@remixicon/react'
+import { RiFilter3Line } from '@remixicon/react'
+import { useCallback } from 'react'
 
 const Page = () => {
   const {
@@ -14,6 +15,21 @@ const Page = () => {
     setPublished,
     clearPublished,
   } = useLegacyList()
+
+  const handleSelectPublished = useCallback(({ value }: { value: number }) => {
+    setPublished(value)
+  }, [setPublished])
+
+  const renderTriggerContent = useCallback(() => {
+    if(published === undefined)
+      return 'Published'
+    return (
+      <div>
+        Published <span>{published === 1 ? 'Yes' : 'No'}</span>
+      </div>
+    )
+  }, [published])
+
   return (
     <div className='h-full rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle px-6 pt-4'>
       <Header appNum={5} publishedNum={3}/>
@@ -22,9 +38,10 @@ const Page = () => {
         <Chip
           className='min-w-[150px]'
           panelClassName='w-[270px]'
-          leftIcon={<RiFile3Line className='h-4 w-4 text-text-secondary' />}
+          leftIcon={<RiFilter3Line className='h-4 w-4 text-text-secondary' />}
           value={published}
-          onSelect={setPublished}
+          renderTriggerContent={renderTriggerContent}
+          onSelect={handleSelectPublished}
           onClear={clearPublished}
           items={[
             { value: 1, name: 'Yes' },

web/app/components/base/chip/index.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { useMemo, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { RiArrowDownSLine, RiCheckLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import {
@@ -20,6 +20,7 @@ type Props = {
   leftIcon?: any
   value: number | string
   items: Item[]
+  renderTriggerContent?: () => React.ReactNode
   onSelect: (item: any) => void
   onClear: () => void
 }
@@ -30,14 +31,17 @@ const Chip: FC<Props> = ({
   leftIcon,
   value,
   items,
+  renderTriggerContent,
   onSelect,
   onClear,
 }) => {
   const [open, setOpen] = useState(false)
 
   const triggerContent = useMemo(() => {
+    if(renderTriggerContent)
+      return renderTriggerContent()
     return items.find(item => item.value === value)?.name || ''
-  }, [items, value])
+  }, [items, renderTriggerContent, value])
 
   return (
     <PortalToFollowElem