fix: Add CL filter box echo functionality and multiple UI fixes (#1599)

juanlou1217 · web-flow · commit d39d0c88ad98 · 2025-10-31T04:07:25.000Z
* fix: Add CL filter box echo functionality and multiple UI fixes

 - Add filter condition echo functionality to CL list
 - Fix tag editor scroll synchronization issue
 - Fix double line break issue when creating files with Enter key
 - Fix clone path display issue showing "main"
 - Fix UI misalignment in tag dropdown list

* fix: Add CL filter box echo functionality and multiple UI fixes

 - Add filter condition echo functionality to CL list
 - Fix tag editor scroll synchronization issue
 - Fix double line break issue when creating files with Enter key
 - Fix clone path display issue showing "main"
 - Fix UI misalignment in tag dropdown list
diff --git a/moon/apps/web/components/ClView/index.tsx b/moon/apps/web/components/ClView/index.tsx
@@ -1,30 +1,30 @@
 'use client'
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { GitMergeIcon, GitPullRequestClosedIcon, GitPullRequestIcon } from '@primer/octicons-react'
+import { GitMergeIcon, GitPullRequestClosedIcon, GitPullRequestIcon, XIcon } from '@primer/octicons-react'
 import { formatDistance, fromUnixTime } from 'date-fns'
 import { useAtom } from 'jotai'
 import { useRouter } from 'next/router'
 
 import { LabelItem, SyncOrganizationMember as Member, PostApiClListData } from '@gitmono/types/generated'
-import { Button, CheckIcon, ChevronDownIcon, OrderedListIcon } from '@gitmono/ui'
+import { Button, CheckIcon, ChevronDownIcon, OrderedListIcon, SearchIcon } from '@gitmono/ui'
 import { cn } from '@gitmono/ui/src/utils'
 
 import { MemberHovercard } from '@/components/InlinePost/MemberHovercard'
 import { IssueIndexTabFilter as CLIndexTabFilter } from '@/components/Issues/IssueIndex'
 import {
+  ListItem as CLItem,
+  IssueList as ClList,
   Dropdown,
   DropdownItemwithAvatar,
   DropdownItemwithLabel,
   DropdownOrder,
   DropdownReview,
-  ListBanner,
-  ListItem as CLItem,
-  IssueList as ClList
+  ListBanner
 } from '@/components/Issues/IssueList'
 import { useScope } from '@/contexts/scope'
-import { useGetLabelList } from '@/hooks/useGetLabelList'
 import { usePostClList } from '@/hooks/CL/usePostClList'
+import { useGetLabelList } from '@/hooks/useGetLabelList'
 import { useSyncedMembers } from '@/hooks/useSyncedMembers'
 import { apiErrorToast } from '@/utils/apiErrorToast'
 import { atomWithWebStorage } from '@/utils/atomWithWebStorage'
@@ -34,7 +34,7 @@ import { AdditionType, ItemLabels, ItemRightIcons } from '../Issues/IssuesConten
 import { Pagination } from '../Issues/Pagenation'
 import { orderTags, reviewTags } from '../Issues/utils/consts'
 import { generateAllMenuItems, MenuConfig } from '../Issues/utils/generateAllMenuItems'
-import { filterAtom, clCloseCurrentPage, clidAtom, clOpenCurrentPage, sortAtom } from '../Issues/utils/store'
+import { clCloseCurrentPage, clidAtom, clOpenCurrentPage, filterAtom, sortAtom } from '../Issues/utils/store'
 import { Heading } from './catalyst/heading'
 
 // interface ClInfoItem {
@@ -48,6 +48,10 @@ import { Heading } from './catalyst/heading'
 
 type ItemsType = NonNullable<PostApiClListData['data']>['items']
 
+const escapeRegExp = (str: string): string => {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
 export default function CLView() {
   const { scope } = useScope()
   const [clList, setClList] = useState<ItemsType>([])
@@ -81,6 +85,8 @@ export default function CLView() {
 
   const [review, setReview] = useAtom(reviewAtom)
 
+  const [searchQuery, setSearchQuery] = useState('')
+
   const additions = useCallback(
     (labels: number[]): AdditionType => {
       const additional: AdditionType = { status, asc: false }
@@ -179,11 +185,8 @@ export default function CLView() {
           <>
             opened {formatDistance(fromUnixTime(item.open_timestamp), new Date(), { addSuffix: true })} by{' '}
             <MemberHovercard username={item.author}>
-              <span className='cursor-pointer hover:text-blue-600 hover:underline'>
-                {item.author}
-              </span>
+              <span className='cursor-pointer hover:text-blue-600 hover:underline'>{item.author}</span>
             </MemberHovercard>
-
           </>
         )
       case 'merged':
@@ -192,13 +195,10 @@ export default function CLView() {
             <>
               by{' '}
               <MemberHovercard username={item.author}>
-                <span className='cursor-pointer hover:text-blue-600 hover:underline'>
-                  {item.author}
-                </span>
+                <span className='cursor-pointer hover:text-blue-600 hover:underline'>{item.author}</span>
               </MemberHovercard>
               {' was merged '}
               {formatDistance(fromUnixTime(item.merge_timestamp ?? 0), new Date(), { addSuffix: true })}
-
             </>
           )
         } else {
@@ -209,16 +209,10 @@ export default function CLView() {
           <>
             by{' '}
             <MemberHovercard username={item.author}>
-              <span className='cursor-pointer hover:text-blue-600 hover:underline'>
-                {item.author}
-              </span>
+              <span className='cursor-pointer hover:text-blue-600 hover:underline'>{item.author}</span>
             </MemberHovercard>
-
             {' was closed '}
-
             {formatDistance(fromUnixTime(item.updated_at), new Date(), { addSuffix: true })}
-
-
           </>
         )
       default:
@@ -233,12 +227,18 @@ export default function CLView() {
       onSelectFactory: (item: Member) => (e: Event) => {
         e.preventDefault()
         if (item.user.username === sort['Author']) {
-          loadClList()
+          const escapedAuthor = escapeRegExp(sort['Author'])
+          const newQuery = searchQuery.replace(new RegExp(`author:${escapedAuthor}\\s*`, 'g'), '').trim()
+
+          setSearchQuery(newQuery)
           setSort({
             ...sort,
             Author: ''
           })
         } else {
+          const newQuery = searchQuery ? `${searchQuery} author:${item.user.username}` : `author:${item.user.username}`
+
+          setSearchQuery(newQuery)
           setSort({
             ...sort,
             Author: item.user.username
@@ -254,12 +254,20 @@ export default function CLView() {
       onSelectFactory: (item: Member) => (e: Event) => {
         e.preventDefault()
         if (item.user.username === sort['Assignees']) {
-          loadClList()
+          const escapedAssignee = escapeRegExp(sort['Assignees'])
+          const newQuery = searchQuery.replace(new RegExp(`assignee:${escapedAssignee}\\s*`, 'g'), '').trim()
+
+          setSearchQuery(newQuery)
           setSort({
             ...sort,
             Assignees: ''
           })
         } else {
+          const newQuery = searchQuery
+            ? `${searchQuery} assignee:${item.user.username}`
+            : `assignee:${item.user.username}`
+
+          setSearchQuery(newQuery)
           setSort({
             ...sort,
             Assignees: item.user.username
@@ -279,8 +287,16 @@ export default function CLView() {
       onSelectFactory: (item) => (e: Event) => {
         e.preventDefault()
         if (label?.includes(String(item.id))) {
+          const escapedLabelName = escapeRegExp(item.name)
+          const newQuery = searchQuery.replace(new RegExp(`label:"${escapedLabelName}"\\s*`, 'g'), '').trim()
+
+          setSearchQuery(newQuery)
           setLabel(label.filter((i) => i !== String(item.id)))
         } else {
+          const escapedLabelName = escapeRegExp(item.name)
+          const newQuery = searchQuery ? `${searchQuery} label:"${escapedLabelName}"` : `label:"${escapedLabelName}"`
+
+          setSearchQuery(newQuery)
           setLabel([...label, String(item.id)])
         }
       },
@@ -297,8 +313,17 @@ export default function CLView() {
       onSelectFactory: (item) => (e: Event) => {
         e.preventDefault()
         if (item === review) {
+          const escapedReview = escapeRegExp(review)
+          const newQuery = searchQuery.replace(new RegExp(`review:${escapedReview}\\s*`, 'g'), '').trim()
+
+          setSearchQuery(newQuery)
           setReview('')
         } else {
+          const escapedReview = escapeRegExp(review)
+          let newQuery = searchQuery.replace(new RegExp(`review:${escapedReview}\\s*`, 'g'), '').trim()
+
+          newQuery = newQuery ? `${newQuery} review:${item}` : `review:${item}`
+          setSearchQuery(newQuery)
           setReview(item)
         }
       },
@@ -445,13 +470,52 @@ export default function CLView() {
 
   const router = useRouter()
 
+  const clearAllFilters = () => {
+    setSearchQuery('')
+    setSort({ ...sort, Author: '', Assignees: '' })
+    setLabel([])
+    setReview('')
+  }
+
   return (
     <div className='relative m-4 flex h-screen flex-col'>
       <Heading>Change List</Heading>
       <br />
       <IndexPageContainer>
         <IndexPageContent id='/[org]/cl' className={cn('@container', '3xl:max-w-7xl max-w-7xl')}>
           <div className='flex h-full flex-col'>
+            <div className='mb-4'>
+              <div className='group flex min-h-[42px] items-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm transition-all focus-within:border-blue-500 focus-within:shadow-md focus-within:ring-2 focus-within:ring-blue-100 hover:border-gray-400'>
+                <div className='flex items-center text-gray-400'>
+                  <SearchIcon className='h-4 w-4' />
+                </div>
+
+                <input
+                  type='text'
+                  className='w-full flex-1 border-none bg-transparent py-1 text-sm text-gray-400 outline-none ring-0 focus:outline-none focus:ring-0'
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      loadClList()
+                    }
+                  }}
+                />
+
+                {searchQuery && (
+                  <button
+                    onClick={() => {
+                      clearAllFilters()
+                    }}
+                    className='flex items-center justify-center rounded-md p-1 text-gray-400 transition-all hover:bg-gray-100 hover:text-gray-600'
+                    title='Clear search'
+                  >
+                    <XIcon className='h-4 w-4' />
+                  </button>
+                )}
+              </div>
+            </div>
+
             <ClList
               isLoading={isLoading}
               Issuelists={clList}
@@ -487,7 +551,7 @@ export default function CLView() {
                     }}
                   >
                     <div className='text-xs text-[#59636e]'>
-                      <span className="mr-2">#{i.link}</span>
+                      <span className='mr-2'>#{i.link}</span>
                       {getDescription(i)}
                       {' • ChangeList'}
                     </div>
diff --git a/moon/apps/web/components/CodeView/BlobView/BlobEditor.tsx b/moon/apps/web/components/CodeView/BlobView/BlobEditor.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { DiffFile, DiffModeEnum, DiffView } from '@git-diff-view/react'
 import toast from 'react-hot-toast'
 
@@ -42,6 +42,9 @@ export default function BlobEditor({ fileContent, filePath, fileName, onCancel }
 
   const [isCommitDialogOpen, setIsCommitDialogOpen] = useState(false)
 
+  const lineNumbersRef = useRef<HTMLDivElement>(null)
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
   const contentLines = useMemo(() => content.split('\n'), [content])
 
   const hasChanges = useMemo(
@@ -129,10 +132,20 @@ export default function BlobEditor({ fileContent, filePath, fileName, onCancel }
     setDiffFile(null)
   }
 
+  const handleScroll = useCallback(() => {
+    if (textareaRef.current && lineNumbersRef.current) {
+      lineNumbersRef.current.scrollTop = textareaRef.current.scrollTop
+    }
+  }, [])
+
   const renderEditView = () => {
     return (
-      <div className='flex h-full w-full font-mono text-sm leading-6'>
-        <div className='select-none border-r border-gray-200 bg-gray-50 px-4 text-right text-gray-400'>
+      <div className='flex h-full w-full overflow-hidden font-mono text-sm leading-6'>
+        <div
+          ref={lineNumbersRef}
+          className='h-full select-none overflow-hidden border-r border-gray-200 bg-gray-50 px-4 text-right text-gray-400'
+          style={{ flexShrink: 0 }}
+        >
           {contentLines.map((_, index) => (
             // eslint-disable-next-line react/no-array-index-key
             <div key={index} className='leading-6'>
@@ -141,11 +154,13 @@ export default function BlobEditor({ fileContent, filePath, fileName, onCancel }
           ))}
         </div>
 
-        <div className='flex-1 pl-4'>
+        <div className='flex-1 overflow-hidden'>
           <textarea
+            ref={textareaRef}
             value={content}
             onChange={handleTextareaChange}
-            className='h-full w-full resize-none border-0 bg-transparent p-0 font-mono text-sm leading-6 focus:outline-none'
+            onScroll={handleScroll}
+            className='h-full w-full resize-none overflow-auto border-0 bg-transparent p-0 pl-4 font-mono text-sm leading-6 focus:outline-none'
             spellCheck={false}
             style={{ tabSize: 2 }}
           />
@@ -218,8 +233,8 @@ export default function BlobEditor({ fileContent, filePath, fileName, onCancel }
   }
 
   return (
-    <div className='flex h-full w-full flex-col gap-2'>
-      <div className='flex min-h-14 w-full items-center justify-between px-2'>
+    <div className='flex min-h-0 w-full flex-1 flex-col gap-2'>
+      <div className='flex min-h-14 w-full flex-shrink-0 items-center justify-between px-2'>
         <div className='flex max-w-[900px] flex-wrap items-center gap-x-1 gap-y-2 text-gray-700'>
           {pathSegments.map((seg, i) => (
             // eslint-disable-next-line react/no-array-index-key
@@ -249,8 +264,8 @@ export default function BlobEditor({ fileContent, filePath, fileName, onCancel }
         </div>
       </div>
 
-      <div className='flex h-full min-h-0 w-full flex-col rounded-xl border border-[#bec7ce]'>
-        <div className='flex h-14 w-full items-center rounded-t-xl border-b border-[#d0d9e0] bg-[#f9fbfd] px-4'>
+      <div className='flex min-h-0 w-full flex-1 flex-col rounded-xl border border-[#bec7ce]'>
+        <div className='flex h-14 w-full flex-shrink-0 items-center rounded-t-xl border-b border-[#d0d9e0] bg-[#f9fbfd] px-4'>
           <div className='inline-flex rounded-md border border-gray-300 bg-white'>
             <button
               onClick={() => setViewMode('edit')}
@@ -271,7 +286,7 @@ export default function BlobEditor({ fileContent, filePath, fileName, onCancel }
           </div>
         </div>
 
-        <div className='flex-1 overflow-auto'>
+        <div className='min-h-0 flex-1 overflow-hidden'>
           {viewMode === 'edit' && renderEditView()}
           {viewMode === 'preview' && renderPreviewView()}
         </div>
diff --git a/moon/apps/web/components/CodeView/NewCodeView/MarkdownEditor.tsx b/moon/apps/web/components/CodeView/NewCodeView/MarkdownEditor.tsx
@@ -21,7 +21,7 @@ export default function MarkdownEditor({ contentState, disabled = false }: Markd
     onUpdate: ({ editor }) => {
       const text = editor.getText().replace(/\n\n/g, '\n')
 
-      setContent(editor.getText())
+      setContent(text)
       setLineCount(text.split('\n').length || 1)
     },
     editorProps: {
diff --git a/moon/apps/web/components/CodeView/Tags/TagSwitcher.tsx b/moon/apps/web/components/CodeView/Tags/TagSwitcher.tsx
@@ -97,14 +97,15 @@ export default function TagSwitcher() {
                             key={t.name}
                             value={t.name}
                             title={t.name}
+                            className='h-auto min-h-8 py-1.5'
                             onSelect={() => {
                               setOpen(false)
                               if (t.name) {
                                 router.push(`/${org}/code/tree/${encodeURIComponent(t.name)}/${path}`)
                               }
                             }}
                           >
-                            <div className='flex min-w-0 flex-col'>
+                            <div className='flex min-w-0 flex-col gap-0.5'>
                               <span className='truncate'>{t.name}</span>
                               {t.message && (
                                 <UIText quaternary size='text-[12px]' className='truncate'>
diff --git a/moon/apps/web/components/CodeView/TreeView/CloneTabs.tsx b/moon/apps/web/components/CodeView/TreeView/CloneTabs.tsx
