feat: introduce trigger functionality (#27644)

Signed-off-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: Stream <Stream_2@qq.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zhsama <torvalds@linux.do>
Co-authored-by: Harry <xh001x@hotmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: yessenia <yessenia.contact@gmail.com>
Co-authored-by: hjlarry <hjlarry@163.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: WTW0313 <twwu@dify.ai>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/plugins/plugin-detail-panel/subscription-list/list-view.tsx

@@ -0,0 +1,50 @@
+'use client'
+import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { CreateButtonType, CreateSubscriptionButton } from './create'
+import SubscriptionCard from './subscription-card'
+import { useSubscriptionList } from './use-subscription-list'
+
+type SubscriptionListViewProps = {
+  showTopBorder?: boolean
+}
+
+export const SubscriptionListView: React.FC<SubscriptionListViewProps> = ({
+  showTopBorder = false,
+}) => {
+  const { t } = useTranslation()
+  const { subscriptions } = useSubscriptionList()
+
+  const subscriptionCount = subscriptions?.length || 0
+
+  return (
+    <div className={cn('border-divider-subtle px-4 py-2', showTopBorder && 'border-t')}>
+      <div className='relative flex items-center justify-between'>
+        {subscriptionCount > 0 && (
+          <div className='flex h-8 shrink-0 items-center gap-1'>
+            <span className='system-sm-semibold-uppercase text-text-secondary'>
+              {t('pluginTrigger.subscription.listNum', { num: subscriptionCount })}
+            </span>
+            <Tooltip popupContent={t('pluginTrigger.subscription.list.tip')} />
+          </div>
+        )}
+        <CreateSubscriptionButton
+          buttonType={subscriptionCount > 0 ? CreateButtonType.ICON_BUTTON : CreateButtonType.FULL_BUTTON}
+        />
+      </div>
+
+      {subscriptionCount > 0 && (
+        <div className='flex flex-col gap-1'>
+          {subscriptions?.map(subscription => (
+            <SubscriptionCard
+              key={subscription.id}
+              data={subscription}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}