refactor: change website config tabs to shadcn ui and improve ui

src/client/components/feed/FeedIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LuGithub, LuPlug } from 'react-icons/lu';
+import { LuCloudy, LuGithub, LuPlug } from 'react-icons/lu';
 
 interface FeedIconProps {
   source: string;
@@ -9,6 +9,9 @@ export const FeedIcon: React.FC<FeedIconProps> = React.memo((props) => {
   if (props.source === 'github') {
     return <LuGithub size={props.size} />;
   }
+  if (props.source === 'tencent-cloud') {
+    return <LuCloudy size={props.size} />;
+  }
 
   return <LuPlug size={props.size} />;
 });

src/client/components/website/WebsiteConfig.tsx

@@ -1,4 +1,4 @@
-import { Button, Form, Input, message, Popconfirm, Tabs } from 'antd';
+import { Button, Form, Input, message, Popconfirm } from 'antd';
 import React from 'react';
 import { deleteWorkspaceWebsite } from '../../api/model/website';
 import { useRequest } from '../../hooks/useRequest';
@@ -16,6 +16,8 @@ import { useEvent } from '../../hooks/useEvent';
 import { hostnameValidator } from '../../utils/validator';
 import { useTranslation } from '@i18next-toolkit/react';
 import { useNavigate } from '@tanstack/react-router';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+import { AlertConfirm } from '../AlertConfirm';
 
 export const WebsiteConfig: React.FC<{ websiteId: string }> = React.memo(
   (props) => {
@@ -83,8 +85,12 @@ export const WebsiteConfig: React.FC<{ websiteId: string }> = React.memo(
     return (
       <div>
         <div>
-          <Tabs>
-            <Tabs.TabPane key={'detail'} tab={'Detail'}>
+          <Tabs defaultValue="detail">
+            <TabsList>
+              <TabsTrigger value="detail">{t('Detail')}</TabsTrigger>
+              <TabsTrigger value="data">{t('Data')}</TabsTrigger>
+            </TabsList>
+            <TabsContent value="detail">
               <Form
                 layout="vertical"
                 initialValues={{
@@ -134,18 +140,17 @@ export const WebsiteConfig: React.FC<{ websiteId: string }> = React.memo(
                   </Button>
                 </Form.Item>
               </Form>
-            </Tabs.TabPane>
-
-            <Tabs.TabPane key={'data'} tab={'Data'}>
-              <Popconfirm
+            </TabsContent>
+            <TabsContent value="data">
+              <AlertConfirm
                 title={t('Delete Website')}
                 onConfirm={() => handleDeleteWebsite()}
               >
                 <Button type="primary" danger={true}>
                   {t('Delete Website')}
                 </Button>
-              </Popconfirm>
-            </Tabs.TabPane>
+              </AlertConfirm>
+            </TabsContent>
           </Tabs>
         </div>
       </div>

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

@@ -32,8 +32,13 @@ function PageComponent() {
     channelId,
   });
 
-  const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
-    trpc.feed.fetchEventsByCursor.useInfiniteQuery(
+  const {
+    data,
+    isInitialLoading,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = trpc.feed.fetchEventsByCursor.useInfiniteQuery(
     {
       workspaceId,
       channelId,
@@ -128,7 +133,7 @@ function PageComponent() {
           )}
           renderEmpty={() => (
             <div className="w-full overflow-hidden p-4">
-              <FeedApiGuide channelId={channelId} />
+              {!isInitialLoading && <FeedApiGuide channelId={channelId} />}
             </div>
           )}
         />