chore: avoid overloading the watchlist page

assets/App.tsx

@@ -11,12 +11,13 @@ import UserPage from "./pages/UserPage";
 import React, {useCallback, useEffect, useMemo, useState} from "react";
 import {getUser} from "./utils/api";
 import LoginPage, {AuthenticatedContext} from "./pages/LoginPage";
-import ConnectorsPage from "./pages/tracking/ConnectorsPage";
+import ConnectorPage from "./pages/tracking/ConnectorPage";
 import NotFoundPage from "./pages/NotFoundPage";
 import useBreakpoint from "./hooks/useBreakpoint";
 import {Sider} from "./components/Sider";
 import {jt, t} from "ttag";
 import {BugOutlined, InfoCircleOutlined, MergeOutlined} from '@ant-design/icons'
+import TrackedDomainPage from "./pages/tracking/TrackedDomainPage";
 
 const PROJECT_LINK = 'https://github.com/maelgangloff/domain-watchdog'
 const LICENSE_LINK = 'https://www.gnu.org/licenses/agpl-3.0.txt'
@@ -100,7 +101,8 @@ export default function App() {
                                 <Route path="/search/tld" element={<TldPage/>}/>
 
                                 <Route path="/tracking/watchlist" element={<WatchlistPage/>}/>
-                                <Route path="/tracking/connectors" element={<ConnectorsPage/>}/>
+                                <Route path="/tracking/domains" element={<TrackedDomainPage/>}/>
+                                <Route path="/tracking/connectors" element={<ConnectorPage/>}/>
 
                                 <Route path="/stats" element={<StatisticsPage/>}/>
                                 <Route path="/user" element={<UserPage/>}/>

assets/components/Sider.tsx

@@ -4,7 +4,6 @@ import {
     AimOutlined,
     ApiOutlined,
     BankOutlined,
-    CloudServerOutlined,
     CompassOutlined,
     FileSearchOutlined,
     HomeOutlined,
@@ -12,10 +11,10 @@ import {
     LoginOutlined,
     LogoutOutlined,
     SearchOutlined,
-    TeamOutlined,
+    TableOutlined,
     UserOutlined
 } from "@ant-design/icons";
-import {Badge, Menu} from "antd";
+import {Menu} from "antd";
 import React from "react";
 import {useNavigate} from "react-router-dom";
 
@@ -50,6 +49,7 @@ export function Sider({isAuthenticated}: { isAuthenticated: boolean }) {
                     disabled: !isAuthenticated,
                     onClick: () => navigate('/search/tld')
                 },
+                /*
                 {
                     key: 'entity-finder',
                     icon: <TeamOutlined/>,
@@ -66,6 +66,7 @@ export function Sider({isAuthenticated}: { isAuthenticated: boolean }) {
                     disabled: true,
                     onClick: () => navigate('/search/nameserver')
                 }
+                 */
             ]
         },
         {
@@ -75,11 +76,18 @@ export function Sider({isAuthenticated}: { isAuthenticated: boolean }) {
             children: [
                 {
                     key: 'watchlist',
-                    icon: <Badge count={0} size="small"><FileSearchOutlined/></Badge>,
+                    icon: <FileSearchOutlined/>,
                     label: t`My Watchlists`,
                     disabled: !isAuthenticated,
                     onClick: () => navigate('/tracking/watchlist')
                 },
+                {
+                    key: 'tracked-domain',
+                    icon: <TableOutlined/>,
+                    label: t`Tracked domain names`,
+                    disabled: !isAuthenticated,
+                    onClick: () => navigate('/tracking/domains')
+                },
                 {
                     key: 'connectors',
                     icon: <ApiOutlined/>,

assets/pages/tracking/ConnectorPage.tsx

@@ -8,7 +8,7 @@ import {ConnectorElement, ConnectorsList} from "../../components/tracking/connec
 
 import {showErrorAPI} from "../../utils/functions/showErrorAPI";
 
-export default function ConnectorsPage() {
+export default function ConnectorPage() {
     const [form] = Form.useForm()
     const [messageApi, contextHolder] = message.useMessage()
     const [connectors, setConnectors] = useState<ConnectorElement[] | null>()

assets/pages/tracking/TrackedDomainPage.tsx

@@ -0,0 +1,14 @@
+import {Card, Flex} from "antd";
+import {t} from "ttag";
+import {TrackedDomainTable} from "../../components/tracking/watchlist/TrackedDomainTable";
+import React from "react";
+
+export default function TrackedDomainPage() {
+
+    return <Flex gap="middle" align="center" justify="center" vertical>
+        <Card title={t`Tracked domain names`}
+              style={{width: '100%', height: '80vh'}}>
+            <TrackedDomainTable/>
+        </Card>
+    </Flex>
+}

assets/pages/tracking/WatchlistPage.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from "react";
-import {Card, Divider, Flex, Form, message, Tag} from "antd";
+import {Card, Divider, Flex, Form, message} from "antd";
 import {EventAction, getWatchlists, postWatchlist, putWatchlist} from "../../utils/api";
 import {AxiosError} from "axios";
 import {t} from 'ttag'
@@ -8,8 +8,6 @@ import {WatchlistsList} from "../../components/tracking/watchlist/WatchlistsList
 import {Connector, getConnectors} from "../../utils/api/connectors";
 
 import {showErrorAPI} from "../../utils/functions/showErrorAPI";
-import {TrackedDomainTable} from "../../components/tracking/watchlist/TrackedDomainTable";
-import {AimOutlined} from "@ant-design/icons";
 
 
 export type Watchlist = {
@@ -99,16 +97,6 @@ export default function WatchlistPage() {
 
     return <Flex gap="middle" align="center" justify="center" vertical>
         {contextHolder}
-        <Card title={
-            <>
-                <Tag icon={<AimOutlined/>} color="cyan-inverse"/>
-                {t`Tracked domain names`}
-            </>
-        }
-              style={{width: '100%'}}>
-            <TrackedDomainTable/>
-        </Card>
-        <Divider/>
         <Card loading={connectors === undefined} title={t`Create a Watchlist`} style={{width: '100%'}}>
             {connectors &&
                 <WatchlistForm form={form} onFinish={onCreateWatchlist} connectors={connectors} isCreation={true}/>