From ccdcaac21135712a708a43c83480c0b925f6b019 Mon Sep 17 00:00:00 2001
From: liuyangjuncong20202570 <juncong.rust@isrc.iscas.ac.cn>
Date: Fri, 4 Jul 2025 18:48:05 +0800
Subject: [PATCH] feat(UI):api dockiing & replace the icons

---
 moon/apps/web/components/Issues/IssueList.tsx |  28 +-
 .../web/components/Issues/IssueNewPage.tsx    |   4 +-
 .../web/components/Issues/IssuesContent.tsx   | 192 ++++++++----
 .../apps/web/components/Issues/Pagenation.tsx |   9 +-
 .../web/components/Issues/utils/consts.ts     |  29 +-
 .../web/components/Issues/utils/store.tsx     |   2 +-
 moon/apps/web/components/MrView/index.tsx     | 284 +++++++++++-------
 .../apps/web/hooks/issues/useGetIssueLists.ts |   1 +
 moon/apps/web/hooks/usePostMrList.ts          |   9 +-
 9 files changed, 354 insertions(+), 204 deletions(-)

diff --git a/moon/apps/web/components/Issues/IssueList.tsx b/moon/apps/web/components/Issues/IssueList.tsx
index fc509ba6f..ab1339eef 100644
--- a/moon/apps/web/components/Issues/IssueList.tsx
+++ b/moon/apps/web/components/Issues/IssueList.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, memo, ReactNode, useRef, useState } from 'react'
 import { useAtomValue } from 'jotai'
 
-import { SyncOrganizationMember } from '@gitmono/types/index'
+import { LabelItem, SyncOrganizationMember } from '@gitmono/types/index'
 import {
   Button,
   ChevronDownIcon,
@@ -16,7 +16,6 @@ import {
 import { DropdownMenu } from '@gitmono/ui/DropdownMenu'
 import { MenuItem } from '@gitmono/ui/Menu'
 
-import { Label } from '@/components/Issues/IssuesContent'
 import { darkModeAtom } from '@/components/Issues/utils/store'
 import { SubjectCommand } from '@/components/Subject/SubjectCommand'
 import { BreadcrumbTitlebar } from '@/components/Titlebar/BreadcrumbTitlebar'
@@ -119,7 +118,7 @@ export const DropdownItemwithAvatar = ({
   )
 }
 
-export const DropdownItemwithLabel = ({ classname, label }: { classname?: string; label: Label }) => {
+export const DropdownItemwithLabel = ({ classname, label }: { classname?: string; label: LabelItem }) => {
   return (
     <div
       className={cn(
@@ -133,7 +132,7 @@ export const DropdownItemwithLabel = ({ classname, label }: { classname?: string
         style={{ backgroundColor: label.color, borderColor: label.color }}
       />
       <span className='text-sm font-semibold'>{label.name}</span>
-      <span className='ml-1 text-xs text-gray-500'>{label.remarks}</span>
+      <span className='ml-1 text-xs text-gray-500'>{label.description}</span>
     </div>
   )
 }
@@ -201,7 +200,7 @@ export const Dropdown = ({
   dropdownItem,
   isChosen,
   onOpen,
-  open,
+  // open,
   inside
 }: {
   name: string
@@ -217,6 +216,14 @@ export const Dropdown = ({
   // const [sort] = useAtom(sortAtom({ scope, filter: 'sortPicker' }))
   const isSearching = query.length > 0
   const ref = useRef<HTMLInputElement>(null)
+  const [open, setOpen] = useState<boolean>(false)
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen)
+    if (onOpen) {
+      onOpen(isOpen) // 把状态变化通知给父组件
+    }
+  }
 
   const DropdownSearch = () => (
     <div className='flex flex-1 flex-row items-center gap-2'>
@@ -252,7 +259,7 @@ export const Dropdown = ({
       {isChosen ? (
         <DropdownMenu
           open={open}
-          onOpenChange={onOpen}
+          onOpenChange={(open) => handleOpenChange(open)}
           key={name}
           align='end'
           desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-white' }}
@@ -265,8 +272,11 @@ export const Dropdown = ({
             },
             {
               type: 'item',
-              label: <DropdownSearch />,
-              onSelect: (e) => e.preventDefault()
+              label: <DropdownSearch />
+              // onSelect: (e) => {
+              //   e.preventDefault()
+              //   onOpen?.(false)
+              // }
               // className: 'sticky top-10 z-50 bg-white'
             },
             { type: 'separator' },
@@ -290,6 +300,8 @@ export const Dropdown = ({
         <DropdownMenu
           key={name}
           align='end'
+          open={open}
+          onOpenChange={(open) => handleOpenChange(open)}
           desktop={{ width: 'w-72' }}
           items={[
             {
diff --git a/moon/apps/web/components/Issues/IssueNewPage.tsx b/moon/apps/web/components/Issues/IssueNewPage.tsx
index 2970b0474..7ba42ab16 100644
--- a/moon/apps/web/components/Issues/IssueNewPage.tsx
+++ b/moon/apps/web/components/Issues/IssueNewPage.tsx
@@ -74,7 +74,7 @@ export default function IssueNewPage() {
   const labels: ItemInput[] = useMemo(
     () =>
       tags.map((i) => ({
-        text: i.remarks,
+        text: i.description,
         leadingVisual: () => (
           <div
             className='h-[14px] w-[14px] rounded-full border'
@@ -148,7 +148,7 @@ export default function IssueNewPage() {
     const map = new Map()
 
     tags.map((i) => {
-      map.set(i.remarks, i)
+      map.set(i.description, i)
     })
     return map
   }, [])
diff --git a/moon/apps/web/components/Issues/IssuesContent.tsx b/moon/apps/web/components/Issues/IssuesContent.tsx
index d6530527a..de17c99eb 100644
--- a/moon/apps/web/components/Issues/IssuesContent.tsx
+++ b/moon/apps/web/components/Issues/IssuesContent.tsx
@@ -1,17 +1,16 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { CheckIcon, IssueClosedIcon, IssueOpenedIcon, SkipIcon } from '@primer/octicons-react'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { formatDistance, fromUnixTime } from 'date-fns'
 import { useAtom } from 'jotai'
 
-import { SyncOrganizationMember as Member, PostApiIssueListData } from '@gitmono/types/generated'
 import {
-  Button,
-  ChatBubbleIcon,
-  CheckCircleFilledFlushIcon,
-  ChevronDownIcon,
-  CircleFilledCloseIcon,
-  OrderedListIcon
-} from '@gitmono/ui'
+  LabelItem,
+  SyncOrganizationMember as Member,
+  PageParamsListPayload,
+  PostApiIssueListData
+} from '@gitmono/types/generated'
+import { Button, ChatBubbleIcon, ChevronDownIcon, OrderedListIcon } from '@gitmono/ui'
 import { Link } from '@gitmono/ui/Link'
 
 // import { MenuItem } from '@gitmono/ui/Menu'
@@ -56,6 +55,10 @@ export interface Item {
   updated_at: number
 }
 
+type ItemsType = NonNullable<PostApiIssueListData['data']>['items']
+
+export type AdditionType = NonNullable<PageParamsListPayload>['additional']
+
 export interface Label {
   id: string
   name: string
@@ -73,7 +76,7 @@ export function IssuesContent({ searching }: Props) {
 
   const [status, _setStatus] = useAtom(filterAtom({ scope, part: 'issue' }))
 
-  const [issueList, setIssueList] = useState<Item[]>([])
+  const [issueList, setIssueList] = useState<ItemsType>([])
 
   const [loading, setLoading] = useState(false)
 
@@ -81,29 +84,34 @@ export function IssuesContent({ searching }: Props) {
 
   const [sort, setSort] = useAtom(sortAtom({ scope, filter: 'sortPicker' }))
 
-  const orderAtom = useMemo(() => atomWithWebStorage<string>(`${scope}:issue-order`, 'Newest'), [scope])
+  const orderAtom = useMemo(
+    () => atomWithWebStorage(`${scope}:issue-order`, { sort: 'Created On', time: 'Newest' }),
+    [scope]
+  )
+  const labelAtom = useMemo(() => atomWithWebStorage<string[]>(`${scope}:issue-label`, []), [scope])
+
+  const [order, setOrder] = useAtom(orderAtom)
 
-  const [order, _setOrder] = useAtom(orderAtom)
+  const [label, setLabel] = useAtom(labelAtom)
 
   const { members } = useSyncedMembers()
 
   const MemberConfig: MenuConfig<Member>[] = [
     {
       key: 'Author',
-      isChosen: (item) => item.user.id === sort['Author'],
+      isChosen: (item) => item.user.username === sort['Author'],
       onSelectFactory: (item: Member) => (e: Event) => {
         e.preventDefault()
-        if (item.user.id === sort['Author']) {
+        if (item.user.username === sort['Author']) {
           fetchData(1, pageSize)
           setSort({
             ...sort,
             Author: ''
           })
         } else {
-          setIssueList(issueList.filter((i) => i.link === sort['Author']))
           setSort({
             ...sort,
-            Author: item.user.id
+            Author: item.user.username
           })
         }
       },
@@ -112,21 +120,19 @@ export function IssuesContent({ searching }: Props) {
     },
     {
       key: 'Assignees',
-      isChosen: (item: Member) => item.user.id === sort['Assignees'],
+      isChosen: (item: Member) => item.user.username === sort['Assignees'],
       onSelectFactory: (item: Member) => (e: Event) => {
         e.preventDefault()
-        if (item.user.id === sort['Assignees']) {
+        if (item.user.username === sort['Assignees']) {
           fetchData(1, pageSize)
-
           setSort({
             ...sort,
             Assignees: ''
           })
         } else {
-          setIssueList(issueList.filter((i) => i.link === sort['Assignees']))
           setSort({
             ...sort,
-            Assignees: item.user.id
+            Assignees: item.user.username
           })
         }
       },
@@ -135,47 +141,83 @@ export function IssuesContent({ searching }: Props) {
     }
   ]
 
-  const LabelConfig: MenuConfig<Label>[] = [
+  const LabelConfig: MenuConfig<LabelItem>[] = [
     {
       key: 'Labels',
-      isChosen: (item) => sort['Labels']?.includes(item.id),
+      isChosen: (item) => label?.includes(String(item.id)),
 
-      onSelectFactory: (item: Label) => (e: Event) => {
+      onSelectFactory: (item) => (e: Event) => {
         e.preventDefault()
-        if (sort['Labels']?.includes(item.id)) {
-          // fetchData(1, pageSize)
-          // sort['Labels'] contains the id of each labels which are chosed
-          setSort({
-            ...sort,
-            Labels: (sort['Labels'] as string[]).filter((i) => i !== item.id)
-          })
+        if (label?.includes(String(item.id))) {
+          setLabel(label.filter((i) => i !== String(item.id)))
         } else {
-          // setIssueList(issueList.filter((i) => i.link === sort['Labels']))
-          setSort({
-            ...sort,
-            // make sure labels must be an array of string
-            Labels: [...((sort['Labels'] as string[]) ?? []), item.id]
-          })
+          setLabel([...label, String(item.id)])
         }
       },
       className: 'overflow-hidden',
-      labelFactory: (item: Label) => <DropdownItemwithLabel label={item} />
+      labelFactory: (item) => <DropdownItemwithLabel label={item} />
     }
   ]
 
   const OrderConfig: MenuConfig<string>[] = [
     {
       key: 'Order',
-      isChosen: (item) => item === 'Oldest' || item === 'Newest',
+      isChosen: (item) => item === 'Newest' || item === 'Oldest',
 
-      onSelectFactory: (_item: string) => (e: Event) => {
+      onSelectFactory: (item) => (e: Event) => {
         e.preventDefault()
+        if (item === 'Newest') {
+          setOrder({
+            ...order,
+            time: 'Newest'
+          })
+        } else if (item === 'Oldest') {
+          setOrder({
+            ...order,
+            time: 'Oldest'
+          })
+        } else {
+          setOrder({
+            ...order,
+            sort: item
+          })
+        }
       },
       className: 'overflow-hidden',
-      labelFactory: (item: string) => <div>{item}</div>
+      labelFactory: (item) => (
+        <div className='flex items-center gap-2'>
+          <div className='h-4 w-4'>
+            {order.sort === item && <CheckIcon />}
+            {order.time === item && <CheckIcon />}
+          </div>
+          <span className='flex-1'>{item}</span>
+        </div>
+      )
     }
   ]
 
+  const additions = useCallback(
+    (labels: number[]): AdditionType => {
+      const additional: AdditionType = { status, asc: false }
+
+      if (sort['Assignees']) additional.assignees = [sort['Assignees']]
+
+      if (sort['Author']) additional.author = sort['Author'] as string
+
+      if (labels.length) additional.labels = [...labels]
+
+      if (order.time === 'Newest') {
+        additional.asc = false
+        additional.sort_by = handleSort(order['sort'])
+      } else if (order.time === 'Oldest') {
+        additional.asc = true
+        additional.sort_by = handleSort(order['sort'])
+      }
+      return additional
+    },
+    [order, sort, status]
+  )
+
   const member = generateAllMenuItems(members, MemberConfig)
 
   const labels = generateAllMenuItems(tags, LabelConfig)
@@ -183,10 +225,11 @@ export function IssuesContent({ searching }: Props) {
   const orders = generateAllMenuItems(orderTags, OrderConfig)
 
   const handleOpen = (open: boolean) => {
-    if (open) {
-      // open: do nothing
-    } else {
-      // close: fetch data from labels array
+    if (!open) {
+      const news = label.map((i) => Number(i))
+      const addtion = additions(news)
+
+      fetchData(1, pageSize, addtion)
     }
   }
 
@@ -215,15 +258,15 @@ export function IssuesContent({ searching }: Props) {
       case 'Labels':
         return (
           <Dropdown
-            onOpen={(open) => handleOpen(open)}
-            isChosen={!sort['Labels']?.length}
+            onOpen={handleOpen}
+            isChosen={!label?.length}
             key={p}
             name={p}
             dropdownArr={labels?.get('Labels').all}
             dropdownItem={labels?.get('Labels').chosen}
           />
         )
-      case `${order}`:
+      case `${order.sort}`:
         return (
           <DropdownOrder
             key={p}
@@ -254,15 +297,29 @@ export function IssuesContent({ searching }: Props) {
     }
   }
 
+  const handleSort = (str: string): string => {
+    switch (str) {
+      case 'Created on':
+        return 'created_at'
+      case 'Last updated':
+        return 'updated_at'
+
+      default:
+        return 'Created on'
+    }
+  }
+
   const fetchData = useCallback(
-    (page: number, per_page: number) => {
+    (page: number, per_page: number, additional?: AdditionType) => {
       setLoading(true)
+      const addittion = additional ? additional : additions([])
+
       issueLists(
         {
-          data: { pagination: { page, per_page }, additional: {
-            status,
-            asc: false
-          } }
+          data: {
+            pagination: { page, per_page },
+            additional: addittion
+          }
         },
         {
           onSuccess: (response) => {
@@ -272,12 +329,14 @@ export function IssuesContent({ searching }: Props) {
             setNumTotal(data?.total ?? 0)
           },
           onError: apiErrorToast,
-          onSettled: () => setLoading(false)
+          onSettled: () => {
+            setLoading(false)
+          }
         }
       )
     },
 
-    [status, issueLists]
+    [issueLists, additions]
   )
 
   useEffect(() => {
@@ -300,11 +359,11 @@ export function IssuesContent({ searching }: Props) {
 
     switch (normalizedStatus) {
       case 'open':
-        return <CircleFilledCloseIcon color='#f44613' />
+        return <IssueOpenedIcon className='text-[#378f50]' />
       case 'closed':
-        return <CheckCircleFilledFlushIcon color='#378f50' size={16} />
+        return <IssueClosedIcon className='text-[#8250df]' />
       default:
-        return null
+        return <SkipIcon className='text-[#59636e]' />
     }
   }
 
@@ -323,7 +382,7 @@ export function IssuesContent({ searching }: Props) {
             Issuelists={issueList}
             header={
               <ListBanner
-                pickerTypes={['Author', 'Labels', 'Projects', 'Milestones', 'Assignees', 'Types', `${order}`]}
+                pickerTypes={['Author', 'Labels', 'Projects', 'Milestones', 'Assignees', 'Types', `${order.sort}`]}
                 tabfilter={
                   <IssueIndexTabFilter openTooltip='Issues that are still open and need attention' part='issue' />
                 }
@@ -339,7 +398,7 @@ export function IssuesContent({ searching }: Props) {
                     key={i.link}
                     title={i.title}
                     leftIcon={getStatusIcon(i.status)}
-                    rightIcon={<RightAvatar member={members[0]} />}
+                    rightIcon={<RightAvatar commentNum={i.comment_num} member={members[0]} />}
                   >
                     <div className='text-xs text-[#59636e]'>
                       {i.link} · {i.author} {i.status}{' '}
@@ -366,14 +425,19 @@ function IssueSearchList(_props: { searchIssueList?: Item[]; hideProject?: boole
   )
 }
 
-export const RightAvatar = ({ member }: { member: Member }) => {
+export const RightAvatar = ({ member, commentNum }: { member?: Member; commentNum?: number }) => {
   return (
     <>
       <div className='mr-10 flex items-center justify-between gap-10'>
-        <ChatBubbleIcon />
-        <MemberHovercard username={member.user.display_name} side='top' align='end' member={member}>
-          <MemberAvatar size='sm' member={member} />
-        </MemberHovercard>
+        <div className='flex items-center gap-2 text-sm text-gray-500'>
+          <ChatBubbleIcon />
+          <span>{commentNum}</span>
+        </div>
+        {member && (
+          <MemberHovercard username={member.user.display_name} side='top' align='end' member={member}>
+            <MemberAvatar size='sm' member={member} />
+          </MemberHovercard>
+        )}
       </div>
     </>
   )
diff --git a/moon/apps/web/components/Issues/Pagenation.tsx b/moon/apps/web/components/Issues/Pagenation.tsx
index 83f773bad..0ed3fab89 100644
--- a/moon/apps/web/components/Issues/Pagenation.tsx
+++ b/moon/apps/web/components/Issues/Pagenation.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useAtom } from 'jotai'
 
 import { Button, ButtonProps, ChevronLeftIcon, ChevronRightIcon } from '@gitmono/ui'
@@ -45,8 +45,9 @@ export const Pagination = ({ totalNum, pageSize, onChange }: PaginationType) =>
         {totalPages === 1 ? (
           <PaginationItem tooltip='1'>1</PaginationItem>
         ) : (
-          pages.map((p) => (
-            <>
+          pages.map((p, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <React.Fragment key={index}>
               {p === '...' ? (
                 <PaginationItem disabled={true} variant='plain' key={p}>
                   {p}
@@ -61,7 +62,7 @@ export const Pagination = ({ totalNum, pageSize, onChange }: PaginationType) =>
                   {p}
                 </PaginationItem>
               )}
-            </>
+            </React.Fragment>
           ))
         )}
         {current === totalPages ? (
diff --git a/moon/apps/web/components/Issues/utils/consts.ts b/moon/apps/web/components/Issues/utils/consts.ts
index 80fe731d8..c73f282ac 100644
--- a/moon/apps/web/components/Issues/utils/consts.ts
+++ b/moon/apps/web/components/Issues/utils/consts.ts
@@ -1,42 +1,39 @@
+import { LabelItem } from '@gitmono/types/generated'
+
 import { SearchProps } from '@/components/Issues/Search'
 
 type SearchType = SearchProps['SearchListTable']['items']
 
-export const tags = [
+export const tags: LabelItem[] = [
   {
-    id: 'label_1',
+    id: 12334444,
     name: 'Bug',
     color: '#ff4d4f',
-    remarks: 'Issue related to bug',
-    checked: false
+    description: 'Issue related to bug'
   },
   {
-    id: 'label_2',
+    id: 333444555,
     name: 'Feature',
     color: '#1890ff',
-    remarks: 'Feature or enhancement',
-    checked: true
+    description: 'Feature or enhancement'
   },
   {
-    id: 'label_3',
+    id: 6667778888,
     name: 'Docs',
     color: '#52c41a',
-    remarks: 'Related to documentation',
-    checked: false
+    description: 'Related to documentation'
   },
   {
-    id: 'label_4',
+    id: 8887775555,
     name: 'Design',
     color: '#faad14',
-    remarks: 'Design consideration',
-    checked: true
+    description: 'Design consideration'
   },
   {
-    id: 'label_5',
+    id: 55544433222,
     name: 'Question',
     color: '#13c2c2',
-    remarks: 'General questions or clarification',
-    checked: false
+    description: 'General questions or clarification'
   }
 ]
 
diff --git a/moon/apps/web/components/Issues/utils/store.tsx b/moon/apps/web/components/Issues/utils/store.tsx
index 384c77f04..7bcfe080d 100644
--- a/moon/apps/web/components/Issues/utils/store.tsx
+++ b/moon/apps/web/components/Issues/utils/store.tsx
@@ -17,7 +17,7 @@ export interface IssueSortType {
 
 export const sortAtom = atomFamily(
   ({ scope, filter }: { scope: CookieValueTypes; filter: string }) =>
-    atomWithWebStorage<IssueSortType>(`${scope}:issue-index-sort:${filter}`, {}),
+    atomWithWebStorage<IssueSortType>(`${scope}:issue-index-sort:${filter}`, { Author: '', Assignees: [] }),
   (a, b) => a.scope === b.scope && a.filter === b.filter
 )
 
diff --git a/moon/apps/web/components/MrView/index.tsx b/moon/apps/web/components/MrView/index.tsx
index d7f23e881..f9d619546 100644
--- a/moon/apps/web/components/MrView/index.tsx
+++ b/moon/apps/web/components/MrView/index.tsx
@@ -1,18 +1,12 @@
 'use client'
 
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { GitMergeIcon, GitPullRequestClosedIcon, GitPullRequestIcon } from '@primer/octicons-react'
 import { formatDistance, fromUnixTime } from 'date-fns'
 import { useAtom } from 'jotai'
 
-import { SyncOrganizationMember as Member } from '@gitmono/types/generated'
-import {
-  Button,
-  ChatBubbleIcon,
-  CheckCircleFilledFlushIcon,
-  ChevronDownIcon,
-  CircleFilledCloseIcon,
-  ClockIcon
-} from '@gitmono/ui'
+import { LabelItem, SyncOrganizationMember as Member, PostApiMrListData } from '@gitmono/types/generated'
+import { Button, CheckIcon, ChevronDownIcon, OrderedListIcon } from '@gitmono/ui'
 import { Link } from '@gitmono/ui/Link'
 import { cn } from '@gitmono/ui/src/utils'
 
@@ -21,6 +15,7 @@ import {
   Dropdown,
   DropdownItemwithAvatar,
   DropdownItemwithLabel,
+  DropdownOrder,
   ListBanner,
   ListItem as MrItem,
   IssueList as MrList
@@ -29,27 +24,30 @@ import { useScope } from '@/contexts/scope'
 import { usePostMrList } from '@/hooks/usePostMrList'
 import { useSyncedMembers } from '@/hooks/useSyncedMembers'
 import { apiErrorToast } from '@/utils/apiErrorToast'
+import { atomWithWebStorage } from '@/utils/atomWithWebStorage'
 
 import { IndexPageContainer, IndexPageContent } from '../IndexPages/components'
-import { Label } from '../Issues/IssuesContent'
+import { AdditionType, RightAvatar } from '../Issues/IssuesContent'
 import { Pagination } from '../Issues/Pagenation'
-import { tags } from '../Issues/utils/consts'
+import { orderTags, tags } from '../Issues/utils/consts'
 import { generateAllMenuItems, MenuConfig } from '../Issues/utils/generateAllMenuItems'
 import { filterAtom, sortAtom } from '../Issues/utils/store'
 import { Heading } from './catalyst/heading'
 
-interface MrInfoItem {
-  link: string
-  title: string
-  status: string
-  open_timestamp: number
-  merge_timestamp: number | null
-  updated_at: number
-}
+// interface MrInfoItem {
+//   link: string
+//   title: string
+//   status: string
+//   open_timestamp: number
+//   merge_timestamp: number | null
+//   updated_at: number
+// }
+
+type ItemsType = NonNullable<PostApiMrListData['data']>['items']
 
 export default function MrView() {
   const { scope } = useScope()
-  const [mrList, setMrList] = useState<MrInfoItem[]>([])
+  const [mrList, setMrList] = useState<ItemsType>([])
   const [numTotal, setNumTotal] = useState(0)
   const [pageSize] = useState(10)
   const [status, _setStatus] = useAtom(filterAtom({ scope, part: 'mr' }))
@@ -57,75 +55,110 @@ export default function MrView() {
   const [page, _setPage] = useState(1)
   const [isLoading, setIsLoading] = useState(false)
   const { mutate: fetchMrList } = usePostMrList()
+  const [sort, setSort] = useAtom(sortAtom({ scope, filter: 'sortPickerMR' }))
+  const { members } = useSyncedMembers()
 
-  const loadMrList = useCallback(() => {
-    setIsLoading(true)
-    fetchMrList(
-      {
-        data: {
-          pagination: {
-            page,
-            per_page: pageSize
-          },
-          additional: {
-            status,
-            asc: false
+  const orderAtom = useMemo(
+    () => atomWithWebStorage(`${scope}:mr-order`, { sort: 'Created On', time: 'Newest' }),
+    [scope]
+  )
+
+  const labelAtom = useMemo(() => atomWithWebStorage<string[]>(`${scope}:mr-label`, []), [scope])
+
+  const [order, setOrder] = useAtom(orderAtom)
+
+  const [label, setLabel] = useAtom(labelAtom)
+
+  const additions = useCallback(
+    (labels: number[]): AdditionType => {
+      const additional: AdditionType = { status, asc: false }
+
+      if (sort['Assignees']) additional.assignees = [sort['Assignees']]
+
+      if (sort['Author']) additional.author = sort['Author'] as string
+
+      if (labels.length) additional.labels = [...labels]
+
+      if (order.time === 'Newest') {
+        additional.asc = false
+        additional.sort_by = handleSort(order['sort'])
+      } else if (order.time === 'Oldest') {
+        additional.asc = true
+        additional.sort_by = handleSort(order['sort'])
+      }
+      return additional
+    },
+    [order, sort, status]
+  )
+
+  const loadMrList = useCallback(
+    (additional?: AdditionType) => {
+      setIsLoading(true)
+      const addittion = additional ? additional : additions([])
+
+      fetchMrList(
+        {
+          data: {
+            pagination: {
+              page,
+              per_page: pageSize
+            },
+            additional: addittion
           }
-        }
-      },
-      {
-        onSuccess: (response) => {
-          const data = response.data
-
-          setMrList(
-            data?.items?.map((item) => ({
-              ...item,
-              merge_timestamp: item.merge_timestamp ?? null
-            })) ?? []
-          )
-          setNumTotal(data?.total ?? 0)
         },
-        onError: apiErrorToast,
-        onSettled: () => setIsLoading(false)
-      }
-    )
-  }, [page, pageSize, status, fetchMrList])
+        {
+          onSuccess: (response) => {
+            const data = response.data
+
+            // setMrList(
+            //   data?.items?.map((item) => ({
+            //     ...item,
+            //     merge_timestamp: item.merge_timestamp ?? null
+            //   })) ?? []
+            // )
+            setMrList(data?.items ?? [])
+            setNumTotal(data?.total ?? 0)
+          },
+          onError: apiErrorToast,
+          onSettled: () => setIsLoading(false)
+        }
+      )
+    },
+    [page, pageSize, fetchMrList, additions]
+  )
 
   useEffect(() => {
     loadMrList()
   }, [loadMrList])
 
-  // const getStatusTag = (status: string) => {
-  //   const normalizedStatus = status.toLowerCase()
-
-  //   switch (normalizedStatus) {
-  //     case 'open':
-  //       return <Tag color='success'>open</Tag>
-  //     case 'merged':
-  //       return <Tag color='purple'>merged</Tag>
-  //     case 'closed':
-  //       return <Tag color='error'>closed</Tag>
-  //     default:
-  //       return null
-  //   }
-  // }
+  const handleSort = (str: string): string => {
+    switch (str) {
+      case 'Created on':
+        return 'created_at'
+      case 'Last updated':
+        return 'updated_at'
+
+      default:
+        return 'Created on'
+    }
+  }
 
   const getStatusIcon = (status: string) => {
     const normalizedStatus = status.toLowerCase()
 
     switch (normalizedStatus) {
       case 'open':
-        return <CircleFilledCloseIcon color='#f44613' />
+        return <GitPullRequestIcon className='text-[#378f50]' />
       case 'closed':
-        return <ClockIcon size={16} />
+        return <GitPullRequestClosedIcon className='text-[#d1242f]' />
       case 'merged':
-        return <CheckCircleFilledFlushIcon color='#378f50' size={16} />
+        return <GitMergeIcon className='text-[#8250df]' />
       default:
         return null
     }
   }
 
-  const getDescription = (item: MrInfoItem) => {
+  const getDescription = (item: ItemsType[number]) => {
     const normalizedStatus = item.status.toLowerCase()
 
     switch (normalizedStatus) {
@@ -133,7 +166,7 @@ export default function MrView() {
         return `MergeRequest opened by Admin ${formatDistance(fromUnixTime(item.open_timestamp), new Date(), { addSuffix: true })} `
       case 'merged':
         if (item.merge_timestamp !== null) {
-          return `MergeRequest merged by Admin ${formatDistance(fromUnixTime(item.merge_timestamp), new Date(), { addSuffix: true })}`
+          return `MergeRequest merged by Admin ${formatDistance(fromUnixTime(item?.merge_timestamp ?? 0), new Date(), { addSuffix: true })}`
         } else {
           return ''
         }
@@ -144,26 +177,22 @@ export default function MrView() {
     }
   }
 
-  const [sort, setSort] = useAtom(sortAtom({ scope, filter: 'sortPickerMR' }))
-  const { members } = useSyncedMembers()
-
   const MemberConfig: MenuConfig<Member>[] = [
     {
       key: 'Author',
-      isChosen: (item) => item.user.id === sort['Author'],
+      isChosen: (item) => item.user.username === sort['Author'],
       onSelectFactory: (item: Member) => (e: Event) => {
         e.preventDefault()
-        if (item.user.id === sort['Author']) {
+        if (item.user.username === sort['Author']) {
           loadMrList()
           setSort({
             ...sort,
             Author: ''
           })
         } else {
-          setMrList(mrList.filter((i) => i.link === sort['Author']))
           setSort({
             ...sort,
-            Author: item.user.id
+            Author: item.user.username
           })
         }
       },
@@ -172,21 +201,19 @@ export default function MrView() {
     },
     {
       key: 'Assignees',
-      isChosen: (item: Member) => item.user.id === sort['Assignees'],
+      isChosen: (item: Member) => item.user.username === sort['Assignees'],
       onSelectFactory: (item: Member) => (e: Event) => {
         e.preventDefault()
-        if (item.user.id === sort['Assignees']) {
+        if (item.user.username === sort['Assignees']) {
           loadMrList()
-
           setSort({
             ...sort,
             Assignees: ''
           })
         } else {
-          setMrList(mrList.filter((i) => i.link === sort['Assignees']))
           setSort({
             ...sort,
-            Assignees: item.user.id
+            Assignees: item.user.username
           })
         }
       },
@@ -195,39 +222,67 @@ export default function MrView() {
     }
   ]
 
-  const LabelConfig: MenuConfig<Label>[] = [
+  const LabelConfig: MenuConfig<LabelItem>[] = [
     {
       key: 'Labels',
-      isChosen: (item) => sort['Labels']?.includes(item.id),
+      isChosen: (item) => label?.includes(String(item.id)),
 
-      onSelectFactory: (item: Label) => (e: Event) => {
+      onSelectFactory: (item) => (e: Event) => {
         e.preventDefault()
-        if (sort['Labels']?.includes(item.id)) {
-          // fetchData(1, pageSize)
-          // sort['Labels'] contains the id of each labels which are chosed
-          setSort({
-            ...sort,
-            Labels: (sort['Labels'] as string[]).filter((i) => i !== item.id)
+        if (label?.includes(String(item.id))) {
+          setLabel(label.filter((i) => i !== String(item.id)))
+        } else {
+          setLabel([...label, String(item.id)])
+        }
+      },
+      className: 'overflow-hidden',
+      labelFactory: (item) => <DropdownItemwithLabel label={item} />
+    }
+  ]
+
+  const OrderConfig: MenuConfig<string>[] = [
+    {
+      key: 'Order',
+      isChosen: (item) => item === 'Newest' || item === 'Oldest',
+
+      onSelectFactory: (item) => (e: Event) => {
+        e.preventDefault()
+        if (item === 'Newest') {
+          setOrder({
+            ...order,
+            time: 'Newest'
+          })
+        } else if (item === 'Oldest') {
+          setOrder({
+            ...order,
+            time: 'Oldest'
           })
         } else {
-          // setIssueList(issueList.filter((i) => i.link === sort['Labels']))
-          setSort({
-            ...sort,
-            // make sure labels must be an array of string
-            Labels: [...((sort['Labels'] as string[]) ?? []), item.id]
+          setOrder({
+            ...order,
+            sort: item
           })
         }
       },
       className: 'overflow-hidden',
-      labelFactory: (item: Label) => <DropdownItemwithLabel label={item} />
+      labelFactory: (item) => (
+        <div className='flex items-center gap-2'>
+          <div className='h-4 w-4'>
+            {order.sort === item && <CheckIcon />}
+            {order.time === item && <CheckIcon />}
+          </div>
+          <span className='flex-1'>{item}</span>
+        </div>
+      )
     }
   ]
 
   const handleOpen = (open: boolean) => {
-    if (open) {
-      // open: do nothing
-    } else {
-      // close: fetch data from labels array
+    if (!open) {
+      const news = label.map((i) => Number(i))
+      const addtion = additions(news)
+
+      loadMrList(addtion)
     }
   }
 
@@ -235,6 +290,8 @@ export default function MrView() {
 
   const labels = generateAllMenuItems(tags, LabelConfig)
 
+  const orders = generateAllMenuItems(orderTags, OrderConfig)
+
   const ListHeaderItem = (p: string) => {
     switch (p) {
       case 'Author':
@@ -260,14 +317,31 @@ export default function MrView() {
       case 'Labels':
         return (
           <Dropdown
-            onOpen={(open) => handleOpen(open)}
-            isChosen={!sort['Labels']?.length}
+            onOpen={handleOpen}
+            isChosen={!label?.length}
             key={p}
             name={p}
             dropdownArr={labels?.get('Labels').all}
             dropdownItem={labels?.get('Labels').chosen}
           />
         )
+      case `${order.sort}`:
+        return (
+          <DropdownOrder
+            key={p}
+            name={p}
+            dropdownArr={orders?.get('Order').all}
+            dropdownItem={orders?.get('Order').chosen}
+            inside={
+              <>
+                <div className='flex items-center'>
+                  {p}
+                  <OrderedListIcon />
+                </div>
+              </>
+            }
+          />
+        )
       default:
         return (
           <>
@@ -293,7 +367,7 @@ export default function MrView() {
             Issuelists={mrList}
             header={
               <ListBanner
-                pickerTypes={['Author', 'Labels', 'Projects', 'Milestones', 'Assignees', 'Types']}
+                pickerTypes={['Author', 'Labels', 'Projects', 'Milestones', 'Assignees', 'Types', `${order.sort}`]}
                 tabfilter={<MRIndexTabFilter part='mr' />}
               >
                 {(p) => ListHeaderItem(p)}
@@ -306,7 +380,7 @@ export default function MrView() {
                   <MrItem
                     title={i.title}
                     leftIcon={getStatusIcon(i.status)}
-                    rightIcon={<ChatBubbleIcon />}
+                    rightIcon={<RightAvatar commentNum={i.comment_num} />}
                   >
                     <div className='text-xs text-[#59636e]'>
                       {i.link} {i.status} {getDescription(i)}
diff --git a/moon/apps/web/hooks/issues/useGetIssueLists.ts b/moon/apps/web/hooks/issues/useGetIssueLists.ts
index 004dd3161..5fc9cf8c8 100644
--- a/moon/apps/web/hooks/issues/useGetIssueLists.ts
+++ b/moon/apps/web/hooks/issues/useGetIssueLists.ts
@@ -1,6 +1,7 @@
 import { PageParamsListPayload, PostApiIssueListData, RequestParams } from '@gitmono/types/generated'
 import { useMutation } from '@tanstack/react-query'
 
+
 import { legacyApiClient } from '@/utils/queryClient'
 
 export function useGetIssueLists() {
diff --git a/moon/apps/web/hooks/usePostMrList.ts b/moon/apps/web/hooks/usePostMrList.ts
index 32ef98c1a..e8d4e5e2d 100644
--- a/moon/apps/web/hooks/usePostMrList.ts
+++ b/moon/apps/web/hooks/usePostMrList.ts
@@ -1,11 +1,12 @@
 // hooks/usePostApiMrList.ts
 import { useMutation } from '@tanstack/react-query'
+
+import { PageParamsListPayload, PostApiMrListData, RequestParams } from '@gitmono/types'
+
 import { legacyApiClient } from '@/utils/queryClient'
-import { PageParamsListPayload, RequestParams, PostApiMrListData } from '@gitmono/types'
 
 export function usePostMrList() {
   return useMutation<PostApiMrListData, Error, { data: PageParamsListPayload; params?: RequestParams }>({
-    mutationFn: ({ data, params }) =>
-      legacyApiClient.v1.postApiMrList().request(data, params),
+    mutationFn: ({ data, params }) => legacyApiClient.v1.postApiMrList().request(data, params)
   })
-}
\ No newline at end of file
+}