feat: add webhook playground entry

src/client/components/WebhookPlayground.tsx

@@ -26,6 +26,7 @@ import {
 } from './ui/dropdown-menu';
 import { useEvent } from '@/hooks/useEvent';
 import { useSocketSubscribeList } from '@/api/socketio';
+import { Spinner } from './ui/spinner';
 
 export const WebhookPlayground: React.FC = React.memo(() => {
   const { t } = useTranslation();
@@ -68,7 +69,17 @@ export const WebhookPlayground: React.FC = React.memo(() => {
     <ScrollArea className="flex-1">
       <div className="flex flex-col gap-2 p-2">
         {requestList.length === 0 && (
-          <Empty description={t('Is waiting new request from remote')} />
+          <div className="pt-10">
+            <Empty
+              description={t(
+                'Currently waiting for a new request from the remote server'
+              )}
+            />
+
+            <div className="mt-2 flex justify-center text-center">
+              <Spinner size={24} />
+            </div>
+          </div>
         )}
 
         {reverse(requestList).map((item) => {
@@ -106,11 +117,12 @@ export const WebhookPlayground: React.FC = React.memo(() => {
 
   const webhookUrl = `${window.location.origin}/open/feed/playground/${workspaceId}`;
   const emptyContentFallback = (
-    <div>
+    <div className="pt-8">
       <div>
         <Trans>
-          Set webhook url with <Code children={webhookUrl} />, and keep this
-          window actived, then you can get webhook request here.
+          Set the webhook URL to <Code children={webhookUrl} />, and keep this
+          window active. Once done, you will start receiving webhook requests
+          here.
         </Trans>
       </div>
       <Button
@@ -121,7 +133,7 @@ export const WebhookPlayground: React.FC = React.memo(() => {
           toast.success('Copied into your clipboard!');
         }}
       >
-        {t('Copy Url')}
+        {t('Copy URL')}
       </Button>
     </div>
   );

src/client/components/feed/FeedIntegration.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LuGithub, LuPlug } from 'react-icons/lu';
+import { LuGithub, LuPlug, LuTestTube2 } from 'react-icons/lu';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { CodeBlock } from '../CodeBlock';
 import { useTranslation } from '@i18next-toolkit/react';
@@ -57,9 +57,16 @@ export const FeedIntegration: React.FC<{
         }
       />
 
+      <div onClick={() => window.open('/feed/playground', '_blank')}>
+        <FeedIntegrationItemTrigger
+          icon={<LuTestTube2 size={32} />}
+          label={t('Playground')}
+        />
+      </div>
+
       <FeedIntegrationItem
         icon={<LuPlug size={32} />}
-        label="Custom"
+        label={t('Custom')}
         content={
           <div>
             <div className="text-lg font-bold">{t('Custom Request')}</div>
@@ -96,10 +103,7 @@ const FeedIntegrationItem: React.FC<{
   return (
     <Popover>
       <PopoverTrigger>
-        <div className="border-muted hover:bg-muted flex h-20 w-20 cursor-pointer flex-col items-center justify-center rounded-lg border p-2 text-center">
-          <div className="mb-1">{props.icon}</div>
-          <div>{props.label}</div>
-        </div>
+        <FeedIntegrationItemTrigger icon={props.icon} label={props.label} />
       </PopoverTrigger>
       <PopoverContent className="w-screen sm:w-[640px]">
         {props.content}
@@ -108,3 +112,16 @@ const FeedIntegrationItem: React.FC<{
   );
 });
 FeedIntegrationItem.displayName = 'FeedIntegrationItem';
+
+const FeedIntegrationItemTrigger: React.FC<{
+  icon: React.ReactNode;
+  label: string;
+}> = React.memo((props) => {
+  return (
+    <div className="border-muted hover:bg-muted flex h-20 w-20 cursor-pointer flex-col items-center justify-center rounded-lg border p-2 text-center">
+      <div className="mb-1">{props.icon}</div>
+      <div className="text-sm">{props.label}</div>
+    </div>
+  );
+});
+FeedIntegrationItemTrigger.displayName = 'FeedIntegrationItemTrigger';

src/client/routeTree.gen.ts

@@ -38,6 +38,7 @@ import { Route as SettingsAuditLogImport } from './routes/settings/auditLog'
 import { Route as PageAddImport } from './routes/page/add'
 import { Route as PageSlugImport } from './routes/page/$slug'
 import { Route as MonitorAddImport } from './routes/monitor/add'
+import { Route as FeedPlaygroundImport } from './routes/feed_/playground'
 import { Route as FeedAddImport } from './routes/feed/add'
 import { Route as WebsiteWebsiteIdIndexImport } from './routes/website/$websiteId/index'
 import { Route as SurveySurveyIdIndexImport } from './routes/survey/$surveyId/index'
@@ -185,6 +186,11 @@ const MonitorAddRoute = MonitorAddImport.update({
   getParentRoute: () => MonitorRoute,
 } as any)
 
+const FeedPlaygroundRoute = FeedPlaygroundImport.update({
+  path: '/feed/playground',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const FeedAddRoute = FeedAddImport.update({
   path: '/add',
   getParentRoute: () => FeedRoute,
@@ -290,6 +296,10 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof FeedAddImport
       parentRoute: typeof FeedImport
     }
+    '/feed/playground': {
+      preLoaderRoute: typeof FeedPlaygroundImport
+      parentRoute: typeof rootRoute
+    }
     '/monitor/add': {
       preLoaderRoute: typeof MonitorAddImport
       parentRoute: typeof MonitorImport
@@ -420,6 +430,7 @@ export const routeTree = rootRoute.addChildren([
     WebsiteWebsiteIdConfigRoute,
     WebsiteWebsiteIdIndexRoute,
   ]),
+  FeedPlaygroundRoute,
   StatusSlugRoute,
 ])
 

src/client/routes/feed_/playground.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { routeAuthBeforeLoad } from '@/utils/route';
+import { WebhookPlayground } from '@/components/WebhookPlayground';
+
+export const Route = createFileRoute('/feed/playground')({
+  beforeLoad: routeAuthBeforeLoad,
+  component: PageComponent,
+});
+
+function PageComponent() {
+  return <WebhookPlayground />;
+}