feat: ellipsize domain tags

assets/components/tracking/watchlist/WatchlistSelectionModal.tsx

@@ -1,16 +1,35 @@
 import React, {useEffect, useState} from "react"
-import type { ModalProps} from "antd"
+import type {ModalProps} from "antd"
+import {Tag, Tooltip} from "antd"
 import {Flex, Modal, Select, Typography} from "antd"
-import type { Watchlist} from "../../../utils/api"
+import type {Domain, Watchlist} from "../../../utils/api"
 import {getWatchlists} from "../../../utils/api"
 import {t} from 'ttag'
 import {DomainToTag} from "../../../utils/functions/DomainToTag"
+import {EllipsisOutlined} from '@ant-design/icons'
+
+const MAX_DOMAIN_TAGS = 25
 
 function WatchlistOption({watchlist}: {watchlist: Watchlist}) {
+    let domains = watchlist.domains
+    let rest: Domain[]|undefined = undefined
+
+    if (domains.length > MAX_DOMAIN_TAGS) {
+        rest = domains.slice(MAX_DOMAIN_TAGS)
+        domains = domains.slice(0, MAX_DOMAIN_TAGS)
+    }
+
     return <Flex vertical>
         <Typography.Text strong>{watchlist.name}</Typography.Text>
-        <Flex wrap>
-            {watchlist.domains.map(d => <DomainToTag link={false} domain={d} key={d.ldhName} />)}
+        <Flex wrap gap='4px'>
+            {domains.map(d => <DomainToTag link={false} domain={d} key={d.ldhName} />)}
+            {rest
+                && <Tooltip title={rest.map(d => <DomainToTag link={false} domain={d} key={d.ldhName} />)}>
+                    <Tag icon={<EllipsisOutlined/>} color='processing'>
+                        {t`${rest.length} more`}
+                    </Tag>
+                </Tooltip>
+            }
         </Flex>
     </Flex>
 }

assets/pages/search/DomainSearchPage.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react'
 import type {FormProps} from 'antd'
 import {FloatButton} from 'antd'
 import {Empty, Flex, message, Skeleton} from 'antd'
-import type { Domain, Watchlist} from '../../utils/api'
+import type {Domain, Watchlist} from '../../utils/api'
 import {addDomainToWatchlist} from '../../utils/api'
 import {getDomain} from '../../utils/api'
 import type {AxiosError} from 'axios'

translations/translations.pot

@@ -480,7 +480,7 @@ msgid "This Watchlist is not linked to a Connector."
 msgstr ""
 
 #: assets/components/tracking/watchlist/WatchlistCard.tsx:59
-#: assets/components/tracking/watchlist/WatchlistSelectionModal.tsx:65
+#: assets/components/tracking/watchlist/WatchlistSelectionModal.tsx:86
 msgid "Watchlist"
 msgstr ""
 
@@ -565,7 +565,12 @@ msgstr ""
 msgid "Reset"
 msgstr ""
 
-#: assets/components/tracking/watchlist/WatchlistSelectionModal.tsx:61
+#: assets/components/tracking/watchlist/WatchlistSelectionModal.tsx:29
+#, javascript-format
+msgid "${ rest.length } more"
+msgstr ""
+
+#: assets/components/tracking/watchlist/WatchlistSelectionModal.tsx:82
 msgid "Select one of your available watchlists"
 msgstr ""