feat: add dialog wrapper and improve display of webhook modal

src/client/components/CodeBlock.tsx

@@ -22,7 +22,7 @@ export const CodeBlock: React.FC<{
 
   return (
     <div className="group relative w-full overflow-auto">
-      <pre className="rounded-sm border border-zinc-800 bg-zinc-900 p-3 pr-12 text-sm">
+      <pre className="max-h-96 rounded-sm border border-zinc-800 bg-zinc-900 p-3 pr-12 text-sm">
         <code>{props.code}</code>
       </pre>
       <Button

src/client/components/DialogWrapper.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from './ui/dialog';
+
+interface DialogProps extends React.PropsWithChildren {
+  title?: string;
+  description?: string;
+  content?: React.ReactNode;
+}
+export const DialogWrapper: React.FC<DialogProps> = React.memo((props) => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{props.children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{props.title}</DialogTitle>
+          <DialogDescription>{props.description}</DialogDescription>
+        </DialogHeader>
+
+        {props.content}
+      </DialogContent>
+    </Dialog>
+  );
+});
+DialogWrapper.displayName = 'DialogWrapper';

src/client/routes/feed/$channelId/index.tsx

@@ -18,6 +18,7 @@ import { Button } from '@/components/ui/button';
 import { FeedApiGuide } from '@/components/feed/FeedApiGuide';
 import { FeedEventItem } from '@/components/feed/FeedEventItem';
 import { FeedIntegration } from '@/components/feed/FeedIntegration';
+import { DialogWrapper } from '@/components/DialogWrapper';
 
 export const Route = createFileRoute('/feed/$channelId/')({
   beforeLoad: routeAuthBeforeLoad,
@@ -60,12 +61,12 @@ function PageComponent() {
           actions={
             <div className="space-x-2">
               {info?.id && (
-                <AlertConfirm
+                <DialogWrapper
                   title={t('Integration')}
                   content={<FeedIntegration feedId={info.id} />}
                 >
                   <Button variant="default" size="icon" Icon={LuWebhook} />
-                </AlertConfirm>
+                </DialogWrapper>
               )}
 
               <Button
@@ -101,9 +102,11 @@ function PageComponent() {
         </div>
       ) : (
         <ScrollArea className="h-full overflow-hidden p-4">
-          {(events ?? []).map((event) => (
-            <FeedEventItem key={event.id} event={event} />
-          ))}
+          <div className="space-y-2">
+            {(events ?? []).map((event) => (
+              <FeedEventItem key={event.id} event={event} />
+            ))}
+          </div>
         </ScrollArea>
       )}
     </CommonWrapper>

src/server/trpc/routers/feed.ts

@@ -29,7 +29,7 @@ export const feedIntegrationRouter = router({
     )
     .output(z.string())
     .mutation(async ({ input, ctx }) => {
-      const eventType = ctx.req.headers['X-GitHub-Event'];
+      const eventType = ctx.req.headers['x-github-event'];
       const { channelId, ...data } = input;
 
       if (eventType === 'push') {
@@ -53,6 +53,8 @@ export const feedIntegrationRouter = router({
             url,
           },
         });
+
+        return 'ok';
       } else if (eventType === 'star') {
         const starCount = _.get(data, 'repository.stargazers_count');
         const fullName = _.get(data, 'repository.full_name');
@@ -72,6 +74,8 @@ export const feedIntegrationRouter = router({
             url,
           },
         });
+
+        return 'ok';
       } else if (eventType === 'issues') {
         const action = _.get(data, 'action') as 'opened' | 'closed';
         const starCount = _.get(data, 'repository.stargazers_count');
@@ -105,10 +109,12 @@ export const feedIntegrationRouter = router({
               url,
             },
           });
+
+          return 'ok';
         }
       }
 
-      return 'ok';
+      return 'not supported';
     }),
 });