feat(ui): unify tag editing in app sidebar and add management entry to TagFilter (#23325)

web/app/components/base/tag-management/filter.tsx

@@ -33,6 +33,7 @@ const TagFilter: FC<TagFilterProps> = ({
 
   const tagList = useTagStore(s => s.tagList)
   const setTagList = useTagStore(s => s.setTagList)
+  const setShowTagManagementModal = useTagStore(s => s.setShowTagManagementModal)
 
   const [keywords, setKeywords] = useState('')
   const [searchKeywords, setSearchKeywords] = useState('')
@@ -136,6 +137,15 @@ const TagFilter: FC<TagFilterProps> = ({
                 </div>
               )}
             </div>
+            <div className='border-t-[0.5px] border-divider-regular' />
+            <div className='p-1'>
+              <div className='flex cursor-pointer items-center gap-2 rounded-lg py-[6px] pl-3 pr-2 hover:bg-state-base-hover' onClick={() => setShowTagManagementModal(true)}>
+                <Tag03 className='h-4 w-4 text-text-tertiary' />
+                <div className='grow truncate text-sm leading-5 text-text-secondary'>
+                  {t('common.tag.manageTags')}
+                </div>
+              </div>
+            </div>
           </div>
         </PortalToFollowElemContent>
       </div>

web/app/components/base/tag-management/selector.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { useUnmount } from 'ahooks'
@@ -26,6 +26,7 @@ type TagSelectorProps = {
   selectedTags: Tag[]
   onCacheUpdate: (tags: Tag[]) => void
   onChange?: () => void
+  minWidth?: string
 }
 
 type PanelProps = {
@@ -213,6 +214,7 @@ const TagSelector: FC<TagSelectorProps> = ({
   selectedTags,
   onCacheUpdate,
   onChange,
+  minWidth,
 }) => {
   const { t } = useTranslation()
 
@@ -220,10 +222,20 @@ const TagSelector: FC<TagSelectorProps> = ({
   const setTagList = useTagStore(s => s.setTagList)
 
   const getTagList = async () => {
-    const res = await fetchTagList(type)
-    setTagList(res)
+    try {
+      const res = await fetchTagList(type)
+      setTagList(res)
+    }
+ catch (error) {
+      setTagList([])
+    }
   }
 
+  useEffect(() => {
+    if (tagList.length === 0)
+      getTagList()
+  }, [type])
+
   const triggerContent = useMemo(() => {
     if (selectedTags?.length)
       return selectedTags.filter(selectedTag => tagList.find(tag => tag.id === selectedTag.id)).map(tag => tag.name).join(', ')
@@ -266,7 +278,7 @@ const TagSelector: FC<TagSelectorProps> = ({
               '!w-full !border-0 !p-0 !text-text-tertiary hover:!bg-state-base-hover hover:!text-text-secondary',
             )
           }
-          popupClassName='!w-full !ring-0'
+          popupClassName={cn('!w-full !ring-0', minWidth && '!min-w-80')}
           className={'!z-20 h-fit !w-full'}
         />
       )}