From a1aec6b463809775f24d482526cfb08355320909 Mon Sep 17 00:00:00 2001
From: vinceh121 <contact@vinceh121.me>
Date: Sun, 2 Nov 2025 02:48:43 +0100
Subject: [PATCH] feat: ellipsize domain tags

---
 .../watchlist/WatchlistSelectionModal.tsx     | 27 ++++++++++++++++---
 assets/pages/search/DomainSearchPage.tsx      |  2 +-
 translations/translations.pot                 |  9 +++++--
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/assets/components/tracking/watchlist/WatchlistSelectionModal.tsx b/assets/components/tracking/watchlist/WatchlistSelectionModal.tsx
index da8c8ed..a1a6ff7 100644
--- a/assets/components/tracking/watchlist/WatchlistSelectionModal.tsx
+++ b/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>
 }
diff --git a/assets/pages/search/DomainSearchPage.tsx b/assets/pages/search/DomainSearchPage.tsx
index 0c8d1e5..bc8f261 100644
--- a/assets/pages/search/DomainSearchPage.tsx
+++ b/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'
diff --git a/translations/translations.pot b/translations/translations.pot
index 48526fa..e198532 100644
--- a/translations/translations.pot
+++ b/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 ""