tweaks

web/features/deployments/detail/access-tab/channels-section.tsx

@@ -5,7 +5,8 @@ import { useMutation, useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
 import { environmentName, webappUrl } from '../../utils'
-import { CopyPill, EndpointRow, Section } from './common'
+import { Section } from '../common'
+import { CopyPill, EndpointRow } from './common'
 import { getUrlOrigin } from './url'
 
 type AccessChannelsSectionProps = {

web/features/deployments/detail/access-tab/common.tsx

@@ -6,30 +6,6 @@ import { toast } from '@langgenius/dify-ui/toast'
 import { useTranslation } from 'react-i18next'
 import { useClipboard } from '@/hooks/use-clipboard'
 
-type SectionProps = {
-  title: string
-  description?: string
-  action?: ReactNode
-  children: ReactNode
-}
-
-export function Section({ title, description, action, children }: SectionProps) {
-  return (
-    <div className="flex flex-col gap-3 rounded-xl border border-components-panel-border bg-components-panel-bg p-4">
-      <div className="flex items-start justify-between gap-3">
-        <div>
-          <div className="system-sm-semibold text-text-primary">{title}</div>
-          {description && (
-            <p className="mt-1 max-w-xl system-xs-regular text-text-tertiary">{description}</p>
-          )}
-        </div>
-        {action}
-      </div>
-      {children}
-    </div>
-  )
-}
-
 type CopyPillProps = {
   label: string
   value: string

web/features/deployments/detail/access-tab/developer-api-section.tsx

@@ -10,8 +10,9 @@ import { useAtomValue, useSetAtom } from 'jotai'
 import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
 import { createdDeveloperApiTokenAtom } from '../../store'
+import { Section } from '../common'
 import { ApiKeyGenerateMenu, ApiKeyList } from './api-keys'
-import { CopyPill, Section } from './common'
+import { CopyPill } from './common'
 
 type DeveloperApiSectionProps = {
   appInstanceId: string

web/features/deployments/detail/access-tab/permissions-section.tsx

@@ -6,7 +6,7 @@ import type {
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { consoleQuery } from '@/service/client'
-import { Section } from './common'
+import { Section } from '../common'
 import { EnvironmentPermissionRow } from './permissions'
 
 type AccessPermissionsSectionProps = {

web/features/deployments/detail/common.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+type SectionProps = {
+  title: string
+  description?: string
+  action?: ReactNode
+  children: ReactNode
+}
+
+export function Section({ title, description, action, children }: SectionProps) {
+  return (
+    <div className="flex flex-col gap-3 rounded-xl border border-components-panel-border bg-components-panel-bg p-4">
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <div className="system-sm-semibold text-text-primary">{title}</div>
+          {description && (
+            <p className="mt-1 max-w-xl system-xs-regular text-text-tertiary">{description}</p>
+          )}
+        </div>
+        {action}
+      </div>
+      {children}
+    </div>
+  )
+}

web/features/deployments/detail/overview-tab.tsx

@@ -16,22 +16,7 @@ import {
   toAppMode,
   webappUrl,
 } from '../utils'
-
-function Section({ title, action, children }: {
-  title: string
-  action?: ReactNode
-  children: ReactNode
-}) {
-  return (
-    <div className="flex flex-col gap-3 rounded-xl border border-components-panel-border bg-components-panel-bg p-4">
-      <div className="flex items-center justify-between">
-        <div className="system-sm-semibold text-text-primary">{title}</div>
-        {action}
-      </div>
-      {children}
-    </div>
-  )
-}
+import { Section } from './common'
 
 function InfoRow({ label, value, mono }: {
   label: string