refactor(web): extract custom hooks from complex components and add comprehensive tests (#32301)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>

web/__tests__/apps/app-card-operations-flow.test.tsx

@@ -277,7 +277,10 @@ describe('App Card Operations Flow', () => {
     }
   })
 
-  // -- Basic rendering --
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
   describe('Card Rendering', () => {
     it('should render app name and description', () => {
       renderAppCard({ name: 'My AI Bot', description: 'An intelligent assistant' })

web/__tests__/apps/app-list-browsing-flow.test.tsx

@@ -187,7 +187,10 @@ describe('App List Browsing Flow', () => {
     mockShowTagManagementModal = false
   })
 
-  // -- Loading and Empty states --
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
   describe('Loading and Empty States', () => {
     it('should show skeleton cards during initial loading', () => {
       mockIsLoading = true

web/__tests__/apps/create-app-flow.test.tsx

@@ -237,7 +237,6 @@ describe('Create App Flow', () => {
     mockShowTagManagementModal = false
   })
 
-  // -- NewAppCard rendering --
   describe('NewAppCard Rendering', () => {
     it('should render the "Create App" card with all options', () => {
       renderList()