From 9144c3b317223798c557c7f1fcf74e7fef3e936c Mon Sep 17 00:00:00 2001
From: liuyangjuncong20202570 <juncong.rust@isrc.iscas.ac.cn>
Date: Tue, 17 Jun 2025 17:21:12 +0800
Subject: [PATCH] feat(UI) completion of issue page&fix the bug of navigation

---
 .../web/components/Issues/IssueDetailPage.tsx |   2 +-
 .../apps/web/components/Issues/IssueIndex.tsx |  15 +-
 moon/apps/web/components/Issues/IssueList.tsx | 393 +++++++++++++-----
 .../web/components/Issues/IssuesContent.tsx   | 253 ++++++++++-
 .../apps/web/components/Issues/Pagenation.tsx |   2 +-
 .../web/components/Issues/utils/consts.ts     |  39 ++
 .../Issues/utils/generateAllMenuItems.ts      |  37 ++
 .../web/components/Issues/utils/store.tsx     |   6 +-
 .../apps/web/pages/[org]/issue/[id]/index.tsx |   2 +-
 moon/apps/web/pages/[org]/issue/new/index.tsx |   6 +-
 moon/apps/web/pages/_app.tsx                  |   5 +-
 moon/packages/ui/src/Menu/types.ts            |   3 +-
 12 files changed, 643 insertions(+), 120 deletions(-)
 create mode 100644 moon/apps/web/components/Issues/utils/consts.ts
 create mode 100644 moon/apps/web/components/Issues/utils/generateAllMenuItems.ts

diff --git a/moon/apps/web/components/Issues/IssueDetailPage.tsx b/moon/apps/web/components/Issues/IssueDetailPage.tsx
index c11166e77..6dc997f19 100644
--- a/moon/apps/web/components/Issues/IssueDetailPage.tsx
+++ b/moon/apps/web/components/Issues/IssueDetailPage.tsx
@@ -78,7 +78,7 @@ export default function IssueDetailPage({ id }: { id: string }) {
 
   useEffect(() => {
     fetchDetail()
-  }, [fetchDetail])
+  }, [fetchDetail, id])
 
   const [_loadings, setLoadings] = useState<boolean[]>([])
   const router = useRouter()
diff --git a/moon/apps/web/components/Issues/IssueIndex.tsx b/moon/apps/web/components/Issues/IssueIndex.tsx
index c5581a98b..813355631 100644
--- a/moon/apps/web/components/Issues/IssueIndex.tsx
+++ b/moon/apps/web/components/Issues/IssueIndex.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useState } from 'react'
 import { useAtom } from 'jotai'
 import { useRouter } from 'next/router'
@@ -32,7 +34,6 @@ export const IssueIndex = () => {
   return (
     <>
       <FloatingNewDocButton />
-
       <SplitViewContainer>
         <IndexPageContainer>
           <BreadcrumbTitlebar className='justify-between'>
@@ -45,11 +46,10 @@ export const IssueIndex = () => {
             </Button>
             <NewIssueButton />
           </BreadcrumbTitlebar>
-          <IndexPageContent id='/[org]/notes' className={cn('@container', '3xl:max-w-7xl max-w-7xl')}>
+          <IndexPageContent id='/[org]/issue' className={cn('@container', '3xl:max-w-7xl max-w-7xl')}>
             <IssuesContent searching={isSearching} />
           </IndexPageContent>
         </IndexPageContainer>
-
         <SplitViewDetail />
       </SplitViewContainer>
     </>
@@ -101,7 +101,14 @@ export const NewIssueButton = () => {
   const { scope } = useScope()
 
   return (
-    <Button variant='primary' className='bg-[#1f883d]' size={'base'} onClick={() => router.push(`/${scope}/issue/new`)}>
+    <Button
+      variant='primary'
+      className='bg-[#1f883d]'
+      size={'base'}
+      onClick={() => {
+        router.push(`/${scope}/issue/new`)
+      }}
+    >
       New Issue
     </Button>
   )
diff --git a/moon/apps/web/components/Issues/IssueList.tsx b/moon/apps/web/components/Issues/IssueList.tsx
index c9ea398c5..ab5f0274f 100644
--- a/moon/apps/web/components/Issues/IssueList.tsx
+++ b/moon/apps/web/components/Issues/IssueList.tsx
@@ -1,38 +1,38 @@
-import { ReactNode } from 'react'
-import { formatDistance, fromUnixTime } from 'date-fns'
-import { useAtom, useAtomValue } from 'jotai'
-import { atomFamily } from 'jotai/utils'
-import { useRouter } from 'next/router'
+import React, { forwardRef, memo, ReactNode, useRef, useState } from 'react'
+import { useAtomValue } from 'jotai'
 
+import { SyncOrganizationMember } from '@gitmono/types/index'
 import {
   Button,
-  ChatBubbleIcon,
-  CheckCircleFilledFlushIcon,
   ChevronDownIcon,
+  cn,
   Command,
   ConditionalWrap,
+  LazyLoadingSpinner,
+  SearchIcon,
   useCommand
 } from '@gitmono/ui'
+import { DropdownMenu } from '@gitmono/ui/DropdownMenu'
+import { MenuItem } from '@gitmono/ui/Menu'
 
-import { Item } from '@/components/Issues/IssuesContent'
+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'
-import { useScope } from '@/contexts/scope'
-import { atomWithWebStorage } from '@/utils/atomWithWebStorage'
 
+import { MemberAvatar } from '../MemberAvatar'
 import { IssueIndexTabFilter } from './IssueIndex'
 
-interface Props {
-  Issuelists: Item[]
+export function IssueList<T>({
+  Issuelists,
+  header,
+  children
+}: {
+  Issuelists: T[]
   hideProject?: boolean
-}
-
-export function IssueList({ Issuelists }: Props) {
-  const { scope } = useScope()
-  const router = useRouter()
-  // const filter = useAtomValue(filterAtom(scope))
-  // const sort = useAtomValue(sortAtom({ scope, filter }))
+  header?: React.ReactNode
+  children?: (issue: T[]) => React.ReactNode
+}) {
   const needsCommandWrap = !useCommand()
   const isDark = useAtomValue(darkModeAtom)
 
@@ -40,8 +40,7 @@ export function IssueList({ Issuelists }: Props) {
     <>
       {!isDark ? (
         <div className='issuecontainer overflow-hidden rounded-md border border-[#d0d7de]'>
-          <ListBanner />
-
+          {header}
           <ConditionalWrap
             condition={needsCommandWrap}
             wrap={(children) => (
@@ -50,22 +49,7 @@ export function IssueList({ Issuelists }: Props) {
               </SubjectCommand>
             )}
           >
-            {Issuelists.map((i) => {
-              return (
-                <ListItem
-                  key={i.link}
-                  title={i.title}
-                  leftIcon={<CheckCircleFilledFlushIcon color='#378f50' size={16} />}
-                  rightIcon={<ChatBubbleIcon />}
-                  onClick={() => router.push(`/${scope}/issue/${i.link}`)}
-                >
-                  <div className='text-xs text-[#59636e]'>
-                    {i.link} · {i.owner} {i.status}{' '}
-                    {formatDistance(fromUnixTime(i.open_timestamp), new Date(), { addSuffix: true })}
-                  </div>
-                </ListItem>
-              )
-            })}
+            {children?.(Issuelists)}
           </ConditionalWrap>
         </div>
       ) : (
@@ -75,83 +59,302 @@ export function IssueList({ Issuelists }: Props) {
   )
 }
 
-type IssuePickerType = 'Author' | 'Labels' | 'Projects' | 'Milestones' | 'Assignees' | 'Types'
+interface ListBannerProps {
+  pickerTypes: string[]
+  children?: (p: string) => React.ReactNode
+}
 
-const filterAtomFamily = atomFamily((sign: IssuePickerType) =>
-  atomWithWebStorage<IssuePickerType>(`${sign}:picker`, sign)
+export const ListBanner = forwardRef<HTMLDivElement, ListBannerProps>(
+  ({ pickerTypes, children }: ListBannerProps, ref) => {
+    return (
+      <>
+        <div ref={ref}>
+          <BreadcrumbTitlebar className='justify-between'>
+            <ConditionalWrap condition={true} wrap={(c) => <div>{c}</div>}>
+              <IssueIndexTabFilter />
+            </ConditionalWrap>
+            <ConditionalWrap condition={true} wrap={(c) => <div>{c}</div>}>
+              {pickerTypes.map((p) => {
+                return <React.Fragment key={p}>{children?.(p)}</React.Fragment>
+              })}
+            </ConditionalWrap>
+          </BreadcrumbTitlebar>
+        </div>
+      </>
+    )
+  }
 )
 
-const ListPicker = <T extends IssuePickerType>({ Sign }: { Sign: T }) => {
-  const [_filter, setFilter] = useAtom(filterAtomFamily(Sign))
+ListBanner.displayName = 'ListBanner'
 
-  // TODO
-  // logic of onClick will change later
-  // storage will store the specific value from backend when chose the options
+export const DropdownItemwithAvatar = ({
+  member,
+  classname
+}: {
+  member: SyncOrganizationMember
+  classname?: string
+}) => {
   return (
-    <>
-      <Button size='sm' onClick={() => setFilter(Sign)} variant={'plain'} tooltipShortcut={Sign}>
-        <div className='flex items-center justify-center'>
-          {Sign}
-          <ChevronDownIcon />
-        </div>
-      </Button>
-    </>
+    <div
+      className={cn(
+        'flex items-center gap-2 rounded-md border-l-4 border-transparent p-2 hover:border-[#0969da]',
+        classname
+      )}
+    >
+      <MemberAvatar size='sm' member={member} />
+      <span className='text-sm font-semibold'>{member.user.display_name}</span>
+      <span className='ml-1 text-xs text-gray-500'>{member.user.username}</span>
+    </div>
   )
 }
 
-export const ListBanner = () => {
-  // TODO: Authors, Labels, Projects, Milestones, Assignees need to be stored in storgae in future
-  const pickerTypes: IssuePickerType[] = ['Author', 'Labels', 'Projects', 'Milestones', 'Assignees', 'Types']
+export const DropdownItemwithLabel = ({ classname, label }: { classname?: string; label: Label }) => {
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 rounded-md border-l-4 border-transparent p-2 hover:border-[#0969da]',
+        classname
+      )}
+    >
+      <div
+        className='h-3.5 w-3.5 rounded-full border'
+        //eslint-disable-next-line react/forbid-dom-props
+        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>
+    </div>
+  )
+}
 
+export const DropdownOrder = ({
+  name,
+  dropdownArr,
+  dropdownItem,
+  onOpen,
+  open,
+  inside
+}: {
+  name: string
+  dropdownArr: MenuItem[]
+  dropdownItem?: MenuItem[]
+  onOpen?: (open: boolean) => void
+  open?: boolean
+  inside?: React.ReactNode
+}) => {
   return (
     <>
-      <BreadcrumbTitlebar className='justify-between'>
-        <ConditionalWrap condition={true} wrap={(c) => <div>{c}</div>}>
-          <IssueIndexTabFilter />
-        </ConditionalWrap>
-        <ConditionalWrap condition={true} wrap={(c) => <div>{c}</div>}>
-          {pickerTypes.map((p) => (
-            <ListPicker key={p} Sign={p} />
-          ))}
-        </ConditionalWrap>
-      </BreadcrumbTitlebar>
+      <DropdownMenu
+        open={open}
+        onOpenChange={onOpen}
+        key={name}
+        align='end'
+        desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-white' }}
+        items={[
+          {
+            type: 'item',
+            disabled: true,
+            label: <p>Sort by</p>
+            // className: 'sticky top-0 z-50 bg-white'
+          },
+          ...dropdownArr,
+          { type: 'separator' },
+          {
+            type: 'item',
+            disabled: true,
+            label: <p>Order</p>
+            // className: 'sticky top-0 z-50 bg-white'
+          },
+          ...(dropdownItem as MenuItem[])
+        ]}
+        trigger={
+          <Button size='sm' variant={'plain'} tooltipShortcut={name}>
+            {inside ? (
+              inside
+            ) : (
+              <>
+                {name} <ChevronDownIcon />
+              </>
+            )}
+          </Button>
+        }
+      />
     </>
   )
 }
 
-export const ListItem = ({
-  title,
-  children,
-  leftIcon,
-  rightIcon,
-  onClick
+// dropdownArr是不一样的，其他一样
+export const Dropdown = ({
+  name,
+  dropdownArr,
+  dropdownItem,
+  isChosen,
+  onOpen,
+  open,
+  inside
 }: {
-  title: string
-  children?: ReactNode
-  leftIcon?: ReactNode
-  rightIcon?: ReactNode
-  onClick?: () => void
+  name: string
+  dropdownArr: MenuItem[]
+  dropdownItem?: MenuItem[]
+  isChosen: boolean
+  onOpen?: (open: boolean) => void
+  open?: boolean
+  inside?: React.ReactNode
 }) => {
+  const [query, setQuery] = useState('')
+  // const { scope } = useScope()
+  // const [sort] = useAtom(sortAtom({ scope, filter: 'sortPicker' }))
+  const isSearching = query.length > 0
+  const ref = useRef<HTMLInputElement>(null)
+
+  const DropdownSearch = () => (
+    <div className='flex flex-1 flex-row items-center gap-2'>
+      <span className='text-tertiary flex h-5 w-5 items-center justify-center'>
+        {isSearching ? <LazyLoadingSpinner fallback={<SearchIcon />} /> : <SearchIcon />}
+      </span>
+      <input
+        ref={ref}
+        className='flex-1 border-none bg-transparent p-0 text-sm outline-none ring-0 focus:ring-0'
+        placeholder={`filter by ${name}`}
+        role='searchbox'
+        autoComplete='off'
+        autoCorrect='off'
+        spellCheck={false}
+        type='text'
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            setQuery('')
+            ref.current?.blur()
+          } else if (e.key === 'Enter') {
+            e.preventDefault()
+            e.stopPropagation()
+          }
+        }}
+      />
+    </div>
+  )
+
   return (
     <>
-      <div className='container flex justify-between border-b border-gray-300 px-3.5 py-3 hover:bg-black/[0.08]'>
-        <div className='left flex gap-3'>
-          <div className='mt-1'>{leftIcon}</div>
-          <div
-            onClick={(e) => {
-              e.stopPropagation()
-              onClick?.()
-            }}
-            className='inner flex flex-col hover:cursor-pointer'
-          >
-            {title}
-            {children}
-          </div>
-        </div>
-        <div className='right'>
-          <div className='mt-1'>{rightIcon}</div>
-        </div>
-      </div>
+      {isChosen ? (
+        <DropdownMenu
+          open={open}
+          onOpenChange={onOpen}
+          key={name}
+          align='end'
+          desktop={{ width: 'w-72 max-h-[50vh] overflow-auto bg-white' }}
+          items={[
+            {
+              type: 'item',
+              disabled: true,
+              label: <p>Filter by {name}</p>
+              // className: 'sticky top-0 z-50 bg-white'
+            },
+            {
+              type: 'item',
+              label: <DropdownSearch />,
+              onSelect: (e) => e.preventDefault()
+              // className: 'sticky top-10 z-50 bg-white'
+            },
+            { type: 'separator' },
+            ...dropdownArr
+          ]}
+          trigger={
+            <Button size='sm' variant={'plain'} tooltipShortcut={name}>
+              <div className='flex items-center justify-center'>
+                {inside ? (
+                  inside
+                ) : (
+                  <>
+                    {name} <ChevronDownIcon />
+                  </>
+                )}
+              </div>
+            </Button>
+          }
+        />
+      ) : (
+        <DropdownMenu
+          key={name}
+          align='end'
+          desktop={{ width: 'w-72' }}
+          items={[
+            {
+              type: 'item',
+              label: <p>Filter by {name}</p>,
+              disabled: true
+              // className: 'sticky top-0 z-50 bg-white pt-4'
+            },
+            {
+              type: 'item',
+              label: <DropdownSearch />,
+              onSelect: (e) => e.preventDefault()
+              // className: 'sticky top-10 z-50 bg-white pt-4'
+            },
+            { type: 'separator' },
+            { type: 'heading', label: 'Group assignees' },
+            ...(dropdownItem as MenuItem[]),
+            { type: 'separator' },
+            { type: 'heading', label: 'Suggestions' },
+            ...dropdownArr
+          ]}
+          trigger={
+            <Button size='sm' variant={'plain'} tooltipShortcut={name}>
+              <div className='flex items-center justify-center'>
+                {inside ? (
+                  inside
+                ) : (
+                  <>
+                    {name} <ChevronDownIcon />
+                  </>
+                )}
+              </div>
+            </Button>
+          }
+        />
+      )}
     </>
   )
 }
+
+export const ListItem = memo(
+  ({
+    title,
+    children,
+    leftIcon,
+    rightIcon,
+    onClick
+  }: {
+    title: string
+    children?: ReactNode
+    leftIcon?: ReactNode
+    rightIcon?: ReactNode
+    onClick?: () => void
+  }) => {
+    return (
+      <>
+        <div className='container flex justify-between border-b border-gray-300 px-3.5 py-3 hover:bg-black/[0.08]'>
+          <div className='left flex gap-3'>
+            <div className='mt-1'>{leftIcon}</div>
+            <div
+              onClick={(e) => {
+                e.stopPropagation()
+                onClick?.()
+              }}
+              className='inner flex flex-col hover:cursor-pointer'
+            >
+              {title}
+              {children}
+            </div>
+          </div>
+          <div className='right'>
+            <div className='mt-1'>{rightIcon}</div>
+          </div>
+        </div>
+      </>
+    )
+  }
+)
+ListItem.displayName = 'ListItem'
diff --git a/moon/apps/web/components/Issues/IssuesContent.tsx b/moon/apps/web/components/Issues/IssuesContent.tsx
index fa2d0bf56..c2850b239 100644
--- a/moon/apps/web/components/Issues/IssuesContent.tsx
+++ b/moon/apps/web/components/Issues/IssuesContent.tsx
@@ -1,19 +1,35 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useInfiniteQuery } from '@tanstack/react-query'
+import { formatDistance, fromUnixTime } from 'date-fns'
 import { useAtom } from 'jotai'
 
-import { PostApiIssueListData } from '@gitmono/types/generated'
+import { SyncOrganizationMember as Member, PostApiIssueListData } from '@gitmono/types/generated'
+import { Button, ChatBubbleIcon, CheckCircleFilledFlushIcon, ChevronDownIcon, OrderedListIcon } from '@gitmono/ui'
+import { Link } from '@gitmono/ui/Link'
+
+// import { MenuItem } from '@gitmono/ui/Menu'
 
 import { EmptySearchResults } from '@/components/Feed/EmptySearchResults'
-import { IssueList } from '@/components/Issues/IssueList'
-import { filterAtom } from '@/components/Issues/utils/store'
+import {
+  Dropdown,
+  DropdownItemwithAvatar,
+  DropdownItemwithLabel,
+  DropdownOrder,
+  IssueList,
+  ListBanner,
+  ListItem
+} from '@/components/Issues/IssueList'
+import { filterAtom, sortAtom } from '@/components/Issues/utils/store'
 import { useScope } from '@/contexts/scope'
 import { useGetIssueLists } from '@/hooks/issues/useGetIssueLists'
+import { useSyncedMembers } from '@/hooks/useSyncedMembers'
 import { apiErrorToast } from '@/utils/apiErrorToast'
+import { atomWithWebStorage } from '@/utils/atomWithWebStorage'
 
 import { IndexPageInstantLoading } from '../IndexPages/components'
-import { IssueIndexEmptyState } from './IssueIndex'
 import { Pagination } from './Pagenation'
+import { orderTags, tags } from './utils/consts'
+import { generateAllMenuItems, MenuConfig } from './utils/generateAllMenuItems'
 
 interface Props {
   getIssues?: ReturnType<typeof useInfiniteQuery<PostApiIssueListData>>
@@ -31,9 +47,17 @@ export interface Item {
   updated_at: number
 }
 
+export interface Label {
+  id: string
+  name: string
+  color: string
+  remarks: string
+  checked: boolean
+}
+
 export function IssuesContent({ searching }: Props) {
-  // TODO:rebuild bu useInfiniteQuery
   const { mutate: issueLists } = useGetIssueLists()
+
   const { scope } = useScope()
 
   const [pageSize, _setPageSize] = useState(10)
@@ -46,6 +70,182 @@ export function IssuesContent({ searching }: Props) {
 
   const [numTotal, setNumTotal] = useState(0)
 
+  const [sort, setSort] = useAtom(sortAtom({ scope, filter: 'sortPicker' }))
+
+  const orderAtom = useMemo(() => atomWithWebStorage<string>(`${scope}:issue-order`, 'Newest'), [scope])
+
+  const [order, _setOrder] = useAtom(orderAtom)
+
+  const { members } = useSyncedMembers()
+
+  const MemberConfig: MenuConfig<Member>[] = [
+    {
+      key: 'Author',
+      isChosen: (item) => item.user.id === sort['Author'],
+      onSelectFactory: (item: Member) => (e: Event) => {
+        e.preventDefault()
+        if (item.user.id === sort['Author']) {
+          fetchData(1, pageSize)
+          setSort({
+            ...sort,
+            Author: ''
+          })
+        } else {
+          setIssueList(issueList.filter((i) => i.link === sort['Author']))
+          setSort({
+            ...sort,
+            Author: item.user.id
+          })
+        }
+      },
+      className: 'overflow-hidden',
+      labelFactory: (item: Member) => <DropdownItemwithAvatar member={item} classname='text-sm' />
+    },
+    {
+      key: 'Assignees',
+      isChosen: (item: Member) => item.user.id === sort['Assignees'],
+      onSelectFactory: (item: Member) => (e: Event) => {
+        e.preventDefault()
+        if (item.user.id === sort['Assignees']) {
+          fetchData(1, pageSize)
+
+          setSort({
+            ...sort,
+            Assignees: ''
+          })
+        } else {
+          setIssueList(issueList.filter((i) => i.link === sort['Assignees']))
+          setSort({
+            ...sort,
+            Assignees: item.user.id
+          })
+        }
+      },
+      className: 'overflow-hidden',
+      labelFactory: (item: Member) => <DropdownItemwithAvatar member={item} classname='text-sm' />
+    }
+  ]
+
+  const LabelConfig: MenuConfig<Label>[] = [
+    {
+      key: 'Labels',
+      isChosen: (item) => sort['Labels']?.includes(item.id),
+
+      onSelectFactory: (item: Label) => (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)
+          })
+        } 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]
+          })
+        }
+      },
+      className: 'overflow-hidden',
+      labelFactory: (item: Label) => <DropdownItemwithLabel label={item} />
+    }
+  ]
+
+  const OrderConfig: MenuConfig<string>[] = [
+    {
+      key: 'Order',
+      isChosen: (item) => item === 'Oldest' || item === 'Newest',
+
+      onSelectFactory: (_item: string) => (e: Event) => {
+        e.preventDefault()
+       
+      },
+      className: 'overflow-hidden',
+      labelFactory: (item: string) => <div>{item}</div>
+    }
+  ]
+
+  const member = generateAllMenuItems(members, MemberConfig)
+
+  const labels = generateAllMenuItems(tags, LabelConfig)
+
+  const orders = generateAllMenuItems(orderTags, OrderConfig)
+
+  const handleOpen = (open: boolean) => {
+    if (open) {
+      // open: do nothing
+    } else {
+      // close: fetch data from labels array
+    }
+  }
+
+  const ListHeaderItem = (p: string) => {
+    switch (p) {
+      case 'Author':
+        return (
+          <Dropdown
+            isChosen={sort['Author'] === ''}
+            key={p}
+            name={p}
+            dropdownArr={member?.get('Author').all}
+            dropdownItem={member?.get('Author').chosen}
+          />
+        )
+      case 'Assignees':
+        return (
+          <Dropdown
+            isChosen={sort['Assignees'] === ''}
+            key={p}
+            name={p}
+            dropdownArr={member?.get('Assignees').all}
+            dropdownItem={member?.get('Assignees').chosen}
+          />
+        )
+      case 'Labels':
+        return (
+          <Dropdown
+            onOpen={(open) => handleOpen(open)}
+            isChosen={!sort['Labels']?.length}
+            key={p}
+            name={p}
+            dropdownArr={labels?.get('Labels').all}
+            dropdownItem={labels?.get('Labels').chosen}
+          />
+        )
+      case `${order}`:
+        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 (
+          <>
+            <Button size='sm' variant={'plain'} tooltipShortcut={p}>
+              <div className='flex items-center justify-center'>
+                {p}
+                <ChevronDownIcon />
+              </div>
+            </Button>
+          </>
+        )
+    }
+  }
+
   const fetchData = useCallback(
     (page: number, per_page: number) => {
       setLoading(true)
@@ -77,8 +277,11 @@ export function IssuesContent({ searching }: Props) {
     return <IndexPageInstantLoading />
   }
 
-  if (!issueList.length) {
-    return searching ? <EmptySearchResults /> : <IssueIndexEmptyState />
+  // if (!issueList.length) {
+  //   return searching ? <EmptySearchResults /> : <IssueIndexEmptyState />
+  // }
+  if (!issueList.length && searching) {
+    return <EmptySearchResults />
   }
 
   return (
@@ -91,19 +294,45 @@ export function IssuesContent({ searching }: Props) {
         </>
       ) : (
         <>
-          <IssueList Issuelists={issueList} />
+          <IssueList
+            Issuelists={issueList}
+            header={
+              <ListBanner
+                pickerTypes={['Author', 'Labels', 'Projects', 'Milestones', 'Assignees', 'Types', `${order}`]}
+              >
+                {(p) => ListHeaderItem(p)}
+              </ListBanner>
+            }
+          >
+            {(issueList) => {
+              return issueList.map((i) => (
+                <Link key={i.link} href={`/${scope}/issue/${i.link}`}>
+                  <ListItem
+                    key={i.link}
+                    title={i.title}
+                    leftIcon={<CheckCircleFilledFlushIcon color='#378f50' size={16} />}
+                    rightIcon={<ChatBubbleIcon />}
+                  >
+                    <div className='text-xs text-[#59636e]'>
+                      {i.link} · {i.owner} {i.status}{' '}
+                      {formatDistance(fromUnixTime(i.open_timestamp), new Date(), { addSuffix: true })}
+                    </div>
+                  </ListItem>
+                </Link>
+              ))
+            }}
+          </IssueList>
           <Pagination totalNum={numTotal} pageSize={pageSize} />
-          {/* <Pagination totalNum={7} pageSize={5} /> */}
         </>
       )}
     </>
   )
 }
 
-function IssueSearchList({ searchIssueList }: { searchIssueList: Item[]; hideProject?: boolean }) {
+function IssueSearchList(_props: { searchIssueList?: Item[]; hideProject?: boolean }) {
   return (
     <>
-      <IssueList Issuelists={searchIssueList} />
+      {/* <IssueList Issuelists={searchIssueList} /> */}
       {/* <IssueList Issuelists={issueList} /> <Pagination totalNum={100} pageSize={5} /> */}
     </>
   )
diff --git a/moon/apps/web/components/Issues/Pagenation.tsx b/moon/apps/web/components/Issues/Pagenation.tsx
index dfde2d79d..83f773bad 100644
--- a/moon/apps/web/components/Issues/Pagenation.tsx
+++ b/moon/apps/web/components/Issues/Pagenation.tsx
@@ -16,7 +16,7 @@ interface PaginationType {
 }
 
 export const Pagination = ({ totalNum, pageSize, onChange }: PaginationType) => {
-  if (totalNum <= 0 || pageSize <= 0) throw new Error('invalid props')
+  if (totalNum < 0 || pageSize < 0) throw new Error('invalid props')
   const totalPages = Math.ceil(totalNum / pageSize)
   const [pages, setPages] = useState<(number | '...')[]>([])
   const [current, setCurrent] = useAtom(currentPage)
diff --git a/moon/apps/web/components/Issues/utils/consts.ts b/moon/apps/web/components/Issues/utils/consts.ts
new file mode 100644
index 000000000..1084934df
--- /dev/null
+++ b/moon/apps/web/components/Issues/utils/consts.ts
@@ -0,0 +1,39 @@
+export const tags = [
+  {
+    id: 'label_1',
+    name: 'Bug',
+    color: '#ff4d4f',
+    remarks: 'Issue related to bug',
+    checked: false
+  },
+  {
+    id: 'label_2',
+    name: 'Feature',
+    color: '#1890ff',
+    remarks: 'Feature or enhancement',
+    checked: true
+  },
+  {
+    id: 'label_3',
+    name: 'Docs',
+    color: '#52c41a',
+    remarks: 'Related to documentation',
+    checked: false
+  },
+  {
+    id: 'label_4',
+    name: 'Design',
+    color: '#faad14',
+    remarks: 'Design consideration',
+    checked: true
+  },
+  {
+    id: 'label_5',
+    name: 'Question',
+    color: '#13c2c2',
+    remarks: 'General questions or clarification',
+    checked: false
+  }
+]
+
+export const orderTags = ['Created on', 'Last updated', 'Total comments', 'Best match', 'Oldest', 'Newest']
diff --git a/moon/apps/web/components/Issues/utils/generateAllMenuItems.ts b/moon/apps/web/components/Issues/utils/generateAllMenuItems.ts
new file mode 100644
index 000000000..2245209d7
--- /dev/null
+++ b/moon/apps/web/components/Issues/utils/generateAllMenuItems.ts
@@ -0,0 +1,37 @@
+// import {OrganizationMember as Member} from '@gitmono/types'
+import React from 'react'
+
+// import { SyncOrganizationMember as Member } from '@gitmono/types'
+
+export interface MenuConfig<T> {
+  key: string
+  onSelectFactory: (item: T) => (e: Event) => void
+  labelFactory: (item: T) => React.ReactNode
+  className?: string
+  isChosen: (item: T) => boolean
+}
+
+export const generateAllMenuItems = <T,>(members: T[], config: MenuConfig<T>[]) => {
+  const result = new Map()
+
+  config.map((c) => result.set(c.key, { chosen: [], all: [] }))
+
+  for (const item of members) {
+    for (const { key, onSelectFactory, isChosen, labelFactory, className } of config) {
+      const menu = {
+        type: 'item' as const,
+        label: labelFactory(item),
+        className,
+        onSelect: onSelectFactory(item)
+      }
+
+      if (isChosen(item)) {
+        result.get(key).chosen.push(menu)
+      } else {
+        result.get(key).all.push(menu)
+      }
+    }
+  }
+
+  return result
+}
diff --git a/moon/apps/web/components/Issues/utils/store.tsx b/moon/apps/web/components/Issues/utils/store.tsx
index 54ecd0029..6aa5ffd3c 100644
--- a/moon/apps/web/components/Issues/utils/store.tsx
+++ b/moon/apps/web/components/Issues/utils/store.tsx
@@ -9,11 +9,13 @@ export const filterAtom = atomFamily((scope: CookieValueTypes) =>
   atomWithWebStorage<IssueIndexFilterType>(`${scope}:issue-index-filter`, 'open')
 )
 
-type IssueIndexSortType = 'last_activity_at' | 'created_at'
+export interface IssueSortType {
+  [key: string]: string | string[]
+}
 
 export const sortAtom = atomFamily(
   ({ scope, filter }: { scope: CookieValueTypes; filter: string }) =>
-    atomWithWebStorage<IssueIndexSortType>(`${scope}:notes-index-sort:${filter}`, 'last_activity_at'),
+    atomWithWebStorage<IssueSortType>(`${scope}:issue-index-sort:${filter}`, {}),
   (a, b) => a.scope === b.scope && a.filter === b.filter
 )
 
diff --git a/moon/apps/web/pages/[org]/issue/[id]/index.tsx b/moon/apps/web/pages/[org]/issue/[id]/index.tsx
index 50152a831..4ff4c5af0 100644
--- a/moon/apps/web/pages/[org]/issue/[id]/index.tsx
+++ b/moon/apps/web/pages/[org]/issue/[id]/index.tsx
@@ -24,7 +24,7 @@ export const getServerSideProps: GetServerSideProps = async ({ query }) => {
 const OrganizationIssueDetailPage: PageWithLayout<any> = ({ id }) => {
   return (
     <>
-      <IssueDetailPage id={id} />
+      <IssueDetailPage id={id} key={id} />
     </>
   )
 }
diff --git a/moon/apps/web/pages/[org]/issue/new/index.tsx b/moon/apps/web/pages/[org]/issue/new/index.tsx
index 6b4c53305..e4df87b22 100644
--- a/moon/apps/web/pages/[org]/issue/new/index.tsx
+++ b/moon/apps/web/pages/[org]/issue/new/index.tsx
@@ -1,12 +1,16 @@
+import { useRouter } from 'next/router'
+
 import IssueNewPage from '@/components/Issues/IssueNewPage'
 import { AppLayout } from '@/components/Layout/AppLayout'
 import { AuthAppProviders } from '@/components/Providers/AuthAppProviders'
 import { PageWithLayout } from '@/utils/types'
 
 const OrganizationIssueNewPage: PageWithLayout<any> = () => {
+  const router = useRouter()
+
   return (
     <>
-      <IssueNewPage />
+      <IssueNewPage key={router.pathname} />
     </>
   )
 }
diff --git a/moon/apps/web/pages/_app.tsx b/moon/apps/web/pages/_app.tsx
index 4ac09dca7..a135e004c 100644
--- a/moon/apps/web/pages/_app.tsx
+++ b/moon/apps/web/pages/_app.tsx
@@ -4,14 +4,15 @@ import 'styles/editor.css'
 import 'styles/global.css' // web only
 import 'styles/prose.css'
 import '@radix-ui/themes/styles.css'
-import '@git-diff-view/react/styles/diff-view.css';
+import '@git-diff-view/react/styles/diff-view.css'
 
 import { useEffect } from 'react'
-import { IS_PRODUCTION, LAST_CLIENT_JS_BUILD_ID_LS_KEY } from '@gitmono/config'
 import { SpeedInsights } from '@vercel/speed-insights/next'
 import { NextWebVitalsMetric } from 'next/app'
 import { Inter } from 'next/font/google'
 
+import { IS_PRODUCTION, LAST_CLIENT_JS_BUILD_ID_LS_KEY } from '@gitmono/config'
+
 import { useClearEmptyDrafts } from '@/hooks/useClearEmptyDrafts'
 import { useStoredState } from '@/hooks/useStoredState'
 import { AppPropsWithLayout } from '@/utils/types'
diff --git a/moon/packages/ui/src/Menu/types.ts b/moon/packages/ui/src/Menu/types.ts
index 14af73db6..349ffa85c 100644
--- a/moon/packages/ui/src/Menu/types.ts
+++ b/moon/packages/ui/src/Menu/types.ts
@@ -38,6 +38,7 @@ interface MenuTextType {
 
 type MenuItem = MenuItemType | MenuSubType | MenuSeparatorType | MenuHeadingType | MenuTextType
 
-type MenuWidth = `w-[${number}px]` | `w-${number}`
+// type MenuWidth = `w-[${number}px]` | `w-${number}`
+type MenuWidth = string
 
 export type { MenuItem, MenuItemType, MenuSubType, MenuSeparatorType, MenuHeadingType, MenuWidth, MenuTextType }