From f6c717582870692c48dfd6390176b08efad968a0 Mon Sep 17 00:00:00 2001
From: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Date: Thu, 7 Aug 2025 09:25:26 +0800
Subject: [PATCH] fix: make TagSelector always visible for accessibility and
 mobile support (#23515)

---
 .../datasets/{Container.tsx => container.tsx}        |  6 +++---
 .../datasets/{DatasetCard.tsx => dataset-card.tsx}   | 11 +++--------
 .../{DatasetFooter.tsx => dataset-footer.tsx}        |  0
 .../datasets/{Datasets.tsx => datasets.tsx}          |  4 ++--
 web/app/(commonLayout)/datasets/{Doc.tsx => doc.tsx} |  0
 .../{NewDatasetCard.tsx => new-dataset-card.tsx}     |  0
 web/app/(commonLayout)/datasets/page.tsx             |  2 +-
 web/app/components/apps/app-card.tsx                 | 12 +++---------
 web/app/components/base/tag-management/selector.tsx  |  6 +++++-
 web/service/access-control.ts                        |  4 ++--
 10 files changed, 19 insertions(+), 26 deletions(-)
 rename web/app/(commonLayout)/datasets/{Container.tsx => container.tsx} (98%)
 rename web/app/(commonLayout)/datasets/{DatasetCard.tsx => dataset-card.tsx} (94%)
 rename web/app/(commonLayout)/datasets/{DatasetFooter.tsx => dataset-footer.tsx} (100%)
 rename web/app/(commonLayout)/datasets/{Datasets.tsx => datasets.tsx} (96%)
 rename web/app/(commonLayout)/datasets/{Doc.tsx => doc.tsx} (100%)
 rename web/app/(commonLayout)/datasets/{NewDatasetCard.tsx => new-dataset-card.tsx} (100%)

diff --git a/web/app/(commonLayout)/datasets/Container.tsx b/web/app/(commonLayout)/datasets/container.tsx
similarity index 98%
rename from web/app/(commonLayout)/datasets/Container.tsx
rename to web/app/(commonLayout)/datasets/container.tsx
index 112b6a752..444119332 100644
--- a/web/app/(commonLayout)/datasets/Container.tsx
+++ b/web/app/(commonLayout)/datasets/container.tsx
@@ -9,10 +9,10 @@ import { useQuery } from '@tanstack/react-query'
 
 // Components
 import ExternalAPIPanel from '../../components/datasets/external-api/external-api-panel'
-import Datasets from './Datasets'
-import DatasetFooter from './DatasetFooter'
+import Datasets from './datasets'
+import DatasetFooter from './dataset-footer'
 import ApiServer from '../../components/develop/ApiServer'
-import Doc from './Doc'
+import Doc from './doc'
 import TabSliderNew from '@/app/components/base/tab-slider-new'
 import TagManagementModal from '@/app/components/base/tag-management'
 import TagFilter from '@/app/components/base/tag-management/filter'
diff --git a/web/app/(commonLayout)/datasets/DatasetCard.tsx b/web/app/(commonLayout)/datasets/dataset-card.tsx
similarity index 94%
rename from web/app/(commonLayout)/datasets/DatasetCard.tsx
rename to web/app/(commonLayout)/datasets/dataset-card.tsx
index 4b40be2c7..58c82984e 100644
--- a/web/app/(commonLayout)/datasets/DatasetCard.tsx
+++ b/web/app/(commonLayout)/datasets/dataset-card.tsx
@@ -162,24 +162,19 @@ const DatasetCard = ({
         </div>
         <div
           className={cn(
-            'mb-2 max-h-[72px] grow px-[14px] text-xs leading-normal text-text-tertiary group-hover:line-clamp-2 group-hover:max-h-[36px]',
-            tags.length ? 'line-clamp-2' : 'line-clamp-4',
+            'mb-2 line-clamp-2 max-h-[36px] grow px-[14px] text-xs leading-normal text-text-tertiary',
             !dataset.embedding_available && 'opacity-50 hover:opacity-100',
           )}
           title={dataset.description}>
           {dataset.description}
         </div>
-        <div className={cn(
-          'mt-4 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
-          tags.length ? 'flex' : '!hidden group-hover:!flex',
-        )}>
+        <div className='mt-4 flex h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1'>
           <div className={cn('flex w-0 grow items-center gap-1', !dataset.embedding_available && 'opacity-50 hover:opacity-100')} onClick={(e) => {
             e.stopPropagation()
             e.preventDefault()
           }}>
             <div className={cn(
-              'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
-              tags.length ? '!block' : '!hidden',
+              'mr-[41px] w-full grow group-hover:!mr-0',
             )}>
               <TagSelector
                 position='bl'
diff --git a/web/app/(commonLayout)/datasets/DatasetFooter.tsx b/web/app/(commonLayout)/datasets/dataset-footer.tsx
similarity index 100%
rename from web/app/(commonLayout)/datasets/DatasetFooter.tsx
rename to web/app/(commonLayout)/datasets/dataset-footer.tsx
diff --git a/web/app/(commonLayout)/datasets/Datasets.tsx b/web/app/(commonLayout)/datasets/datasets.tsx
similarity index 96%
rename from web/app/(commonLayout)/datasets/Datasets.tsx
rename to web/app/(commonLayout)/datasets/datasets.tsx
index 18a31d8e8..4e116c6d3 100644
--- a/web/app/(commonLayout)/datasets/Datasets.tsx
+++ b/web/app/(commonLayout)/datasets/datasets.tsx
@@ -3,8 +3,8 @@
 import { useCallback, useEffect, useRef } from 'react'
 import useSWRInfinite from 'swr/infinite'
 import { debounce } from 'lodash-es'
-import NewDatasetCard from './NewDatasetCard'
-import DatasetCard from './DatasetCard'
+import NewDatasetCard from './new-dataset-card'
+import DatasetCard from './dataset-card'
 import type { DataSetListResponse, FetchDatasetsParams } from '@/models/datasets'
 import { fetchDatasets } from '@/service/datasets'
 import { useAppContext } from '@/context/app-context'
diff --git a/web/app/(commonLayout)/datasets/Doc.tsx b/web/app/(commonLayout)/datasets/doc.tsx
similarity index 100%
rename from web/app/(commonLayout)/datasets/Doc.tsx
rename to web/app/(commonLayout)/datasets/doc.tsx
diff --git a/web/app/(commonLayout)/datasets/NewDatasetCard.tsx b/web/app/(commonLayout)/datasets/new-dataset-card.tsx
similarity index 100%
rename from web/app/(commonLayout)/datasets/NewDatasetCard.tsx
rename to web/app/(commonLayout)/datasets/new-dataset-card.tsx
diff --git a/web/app/(commonLayout)/datasets/page.tsx b/web/app/(commonLayout)/datasets/page.tsx
index 60a542f0a..cbfe25ebd 100644
--- a/web/app/(commonLayout)/datasets/page.tsx
+++ b/web/app/(commonLayout)/datasets/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useTranslation } from 'react-i18next'
-import Container from './Container'
+import Container from './container'
 import useDocumentTitle from '@/hooks/use-document-title'
 
 const AppList = () => {
diff --git a/web/app/components/apps/app-card.tsx b/web/app/components/apps/app-card.tsx
index 603b5922c..a91c2edf1 100644
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@@ -370,20 +370,14 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
             {app.description}
           </div>
         </div>
-        <div className={cn(
-          'absolute bottom-1 left-0 right-0 h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1',
-          tags.length ? 'flex' : '!hidden group-hover:!flex',
-        )}>
+        <div className='absolute bottom-1 left-0 right-0 flex h-[42px] shrink-0 items-center pb-[6px] pl-[14px] pr-[6px] pt-1'>
           {isCurrentWorkspaceEditor && (
             <>
               <div className={cn('flex w-0 grow items-center gap-1')} onClick={(e) => {
                 e.stopPropagation()
                 e.preventDefault()
               }}>
-                <div className={cn(
-                  'mr-[41px] w-full grow group-hover:!mr-0 group-hover:!block',
-                  tags.length ? '!block' : '!hidden',
-                )}>
+                <div className='mr-[41px] w-full grow group-hover:!mr-0'>
                   <TagSelector
                     position='bl'
                     type='app'
@@ -395,7 +389,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                   />
                 </div>
               </div>
-              <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 group-hover:!flex' />
+              <div className='mx-1 !hidden h-[14px] w-[1px] shrink-0 bg-divider-regular group-hover:!flex' />
               <div className='!hidden shrink-0 group-hover:!flex'>
                 <CustomPopover
                   htmlContent={<Operations />}
diff --git a/web/app/components/base/tag-management/selector.tsx b/web/app/components/base/tag-management/selector.tsx
index 026543cfa..cb53aaa7e 100644
--- a/web/app/components/base/tag-management/selector.tsx
+++ b/web/app/components/base/tag-management/selector.tsx
@@ -238,12 +238,16 @@ const TagSelector: FC<TagSelectorProps> = ({
   }, [selectedTags, tagList])
 
   const Trigger = () => {
+    const hasNoTags = !triggerContent
     return (
       <div className={cn(
         'group/tip relative flex w-full cursor-pointer items-center gap-1 rounded-md px-2 py-[7px] hover:bg-state-base-hover',
       )}>
         <Tag01 className='h-3 w-3 shrink-0 text-components-input-text-placeholder' />
-        <div className='system-sm-regular grow truncate  text-start text-components-input-text-placeholder'>
+        <div className={cn(
+          'system-sm-regular grow truncate text-start',
+          hasNoTags ? 'italic text-components-input-text-placeholder' : 'font-medium text-components-input-text-placeholder',
+        )}>
           {!triggerContent ? t('common.tag.addTag') : triggerContent}
         </div>
       </div>
diff --git a/web/service/access-control.ts b/web/service/access-control.ts
index d4cc9eb79..18dc9e000 100644
--- a/web/service/access-control.ts
+++ b/web/service/access-control.ts
@@ -70,7 +70,7 @@ export const useUpdateAccessMode = () => {
   })
 }
 
-export const useGetUserCanAccessApp = ({ appId, isInstalledApp = true }: { appId?: string; isInstalledApp?: boolean; }) => {
+export const useGetUserCanAccessApp = ({ appId, isInstalledApp = true, enabled }: { appId?: string; isInstalledApp?: boolean; enabled?: boolean }) => {
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   return useQuery({
     queryKey: [NAME_SPACE, 'user-can-access-app', appId],
@@ -80,7 +80,7 @@ export const useGetUserCanAccessApp = ({ appId, isInstalledApp = true }: { appId
       else
         return { result: true }
     },
-    enabled: !!appId,
+    enabled: enabled !== undefined ? enabled : !!appId,
     staleTime: 0,
     gcTime: 0,
   })