feat: remove some cards

assets/components/tracking/WatchlistsList.tsx

@@ -1,37 +1,56 @@
-import {Card, Divider, Popconfirm, theme, Typography} from "antd";
+import {Card, Divider, Popconfirm, Table, Tag, theme, Typography} from "antd";
 import {t} from "ttag";
-import {deleteWatchlist, EventAction} from "../../utils/api";
+import {deleteWatchlist} from "../../utils/api";
 import {DeleteFilled} from "@ant-design/icons";
 import React from "react";
+import useBreakpoint from "../../hooks/useBreakpoint";
+import {actionToColor} from "../search/EventTimeline";
+import {Watchlist} from "../../pages/tracking/WatchlistPage";
 
 const {useToken} = theme;
 
-type Watchlist = { token: string, domains: { ldhName: string }[], triggers?: { event: EventAction, action: string }[] }
-
 
 export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[], onDelete: () => void }) {
     const {token} = useToken()
+    const sm = useBreakpoint('sm')
+
+    const columns = [
+        {
+            title: t`Domain names`,
+            dataIndex: 'domains'
+        },
+        {
+            title: t`Tracked events`,
+            dataIndex: 'events'
+        }
+    ]
 
     return <>
         {watchlists.map(watchlist =>
             <>
-                <Card title={t`Watchlist`} type="inner" extra={<Popconfirm
-                    title={t`Delete the Watchlist`}
-                    description={t`Are you sure to delete this Watchlist?`}
-                    onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
-                    okText={t`Yes`}
-                    cancelText={t`No`}
-                    okButtonProps={{danger: true}}
-                ><DeleteFilled style={{color: token.colorError}}/></Popconfirm>}>
+                <Card
+                    title={t`Watchlist`}
+                    size='small'
+                    extra={<Popconfirm
+                        title={t`Delete the Watchlist`}
+                        description={t`Are you sure to delete this Watchlist?`}
+                        onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
+                        okText={t`Yes`}
+                        cancelText={t`No`}
+                        okButtonProps={{danger: true}}
+                    ><DeleteFilled style={{color: token.colorError}}/></Popconfirm>}>
                     <Card.Meta description={watchlist.token} style={{marginBottom: '1em'}}/>
-                    <Typography.Paragraph>
-                        {t`Domain name`} : {watchlist?.domains.map(d => d.ldhName).join(',')}
-                    </Typography.Paragraph>
-                    {
-                        watchlist.triggers && <Typography.Paragraph>
-                            {t`Domain triggers`} : {watchlist.triggers.map(t => `${t.event} => ${t.action}`).join(',')}
-                        </Typography.Paragraph>
-                    }
+                    <Table
+                        columns={columns}
+                        pagination={false}
+                        dataSource={[{
+                            domains: watchlist.domains.map(d =>
+                                <Typography.Paragraph>{d.ldhName}</Typography.Paragraph>),
+                            events: watchlist.triggers?.filter(t => t.action === 'email')
+                                .map(t => <Tag color={actionToColor(t.event)}>{t.event}</Tag>)
+                        }]}
+                        {...(sm ? {scroll: {y: 'max-content'}} : {scroll: {y: 240}})}
+                    />
                 </Card>
                 <Divider/>
             </>