From 841e8dcba6fc2227e0c3d6f9eb6fdf08b232ef0f Mon Sep 17 00:00:00 2001
From: vinceh121 <contact@vinceh121.me>
Date: Sat, 1 Nov 2025 22:59:49 +0100
Subject: [PATCH] feat: add domain to watchlist FAB

---
 .../watchlist/WatchlistSelectionModal.tsx     | 78 +++++++++++++++++++
 assets/pages/search/DomainSearchPage.tsx      | 51 ++++++++++--
 assets/utils/api/watchlist.ts                 |  7 ++
 assets/utils/functions/DomainToTag.tsx        | 62 ++++++++-------
 4 files changed, 162 insertions(+), 36 deletions(-)
 create mode 100644 assets/components/tracking/watchlist/WatchlistSelectionModal.tsx

diff --git a/assets/components/tracking/watchlist/WatchlistSelectionModal.tsx b/assets/components/tracking/watchlist/WatchlistSelectionModal.tsx
new file mode 100644
index 0000000..f8bd5cf
--- /dev/null
+++ b/assets/components/tracking/watchlist/WatchlistSelectionModal.tsx
@@ -0,0 +1,78 @@
+import React, {useEffect, useState} from "react"
+import {Flex, Modal, ModalProps, Select, Tag, Typography} from "antd"
+import {getWatchlists, Watchlist} from "../../../utils/api"
+import {t} from 'ttag'
+import {DomainToTag} from "../../../utils/functions/DomainToTag"
+
+function WatchlistOption({watchlist}: {watchlist: Watchlist}) {
+    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>
+    </Flex>
+}
+
+interface WatchlistSelectionModalProps {
+    onFinish: (watchlist: Watchlist) => Promise<void>|void
+    description?: string
+    open?: boolean
+    modalProps?: Partial<ModalProps>
+}
+
+export default function WatchlistSelectionModal(props: WatchlistSelectionModalProps) {
+    const [watchlists, setWatchlists] = useState<Watchlist[] | undefined>()
+    const [selectedWatchlist, setSelectedWatchlist] = useState<Watchlist | undefined>()
+    const [validationLoading, setValidationLoading] = useState(false)
+
+    useEffect(() => {
+        getWatchlists().then(list => setWatchlists(list["hydra:member"]))
+    }, [])
+
+    const onFinish = () => {
+        const promise = props.onFinish(selectedWatchlist as Watchlist)
+
+        if (promise) {
+            setValidationLoading(true)
+            promise.finally(() => {
+                setSelectedWatchlist(undefined)
+                setValidationLoading(false)
+            })
+        } else {
+            setSelectedWatchlist(undefined)
+        }
+    }
+
+    return <Modal
+        open={props.open}
+        onOk={onFinish}
+        okButtonProps={{
+            disabled: !selectedWatchlist,
+            loading: validationLoading,
+        }}
+        {...props.modalProps ?? {}}
+    >
+        <Flex vertical>
+            <Typography.Text>
+                {
+                    props.description
+                    || t`Select one of your available watchlists`
+                }
+            </Typography.Text>
+            <Select
+                placeholder={t`Watchlist`}
+                style={{width: '100%'}}
+                onChange={(_, option) => setSelectedWatchlist(option as Watchlist)}
+                options={watchlists}
+                value={selectedWatchlist?.token}
+                fieldNames={{
+                    label: 'name',
+                    value: 'token',
+                }}
+                loading={!watchlists}
+                status={selectedWatchlist ? '' : 'error'}
+                optionRender={(watchlist) => <WatchlistOption watchlist={watchlist.data}/>}
+            />
+        </Flex>
+    </Modal>
+}
diff --git a/assets/pages/search/DomainSearchPage.tsx b/assets/pages/search/DomainSearchPage.tsx
index deedd04..8aa06b0 100644
--- a/assets/pages/search/DomainSearchPage.tsx
+++ b/assets/pages/search/DomainSearchPage.tsx
@@ -1,8 +1,10 @@
 import React, {useEffect, useState} from 'react'
-import type { FormProps} from 'antd'
+import type {FormProps} from 'antd'
+import {Tooltip} from 'antd'
+import {FloatButton} from 'antd'
 import {Empty, Flex, message, Skeleton} from 'antd'
-import type {Domain} from '../../utils/api'
-import { getDomain} from '../../utils/api'
+import {addDomainToWatchlist, Domain, Watchlist} from '../../utils/api'
+import {getDomain} from '../../utils/api'
 import type {AxiosError} from 'axios'
 import {t} from 'ttag'
 import type { FieldType} from '../../components/search/DomainSearchBar'
@@ -10,17 +12,18 @@ import {DomainSearchBar} from '../../components/search/DomainSearchBar'
 import {DomainResult} from '../../components/search/DomainResult'
 import {showErrorAPI} from '../../utils/functions/showErrorAPI'
 import {useNavigate, useParams} from 'react-router-dom'
+import {CaretUpOutlined, PlusOutlined} from '@ant-design/icons'
+import WatchlistSelectionModal from "../../components/tracking/watchlist/WatchlistSelectionModal";
 
 export default function DomainSearchPage() {
     const {query} = useParams()
     const [domain, setDomain] = useState<Domain | null>()
-    const [loading, setLoading] = useState<boolean>(false)
+    const [loading, setLoading] = useState(false)
+    const [addToWatchlistModal, setAddToWatchlistModal] = useState(false)
 
     const [messageApi, contextHolder] = message.useMessage()
     const navigate = useNavigate()
 
-
-
     const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
         navigate('/search/domain/' + values.ldhName)
 
@@ -41,7 +44,15 @@ export default function DomainSearchPage() {
         onFinish({ldhName: query, isRefreshForced: false})
     }, [])
 
-    return (
+    const addToWatchlist = async (watchlist: Watchlist) => {
+        await addDomainToWatchlist(watchlist, domain!.ldhName).then(() => {
+            setAddToWatchlistModal(false)
+        }).catch((e: AxiosError) => {
+            showErrorAPI(e, messageApi)
+        })
+    }
+
+    return <>
         <Flex gap='middle' align='center' justify='center' vertical>
             {contextHolder}
             <DomainSearchBar initialValue={query} onFinish={onFinish}/>
@@ -57,5 +68,29 @@ export default function DomainSearchPage() {
                 }
             </Skeleton>
         </Flex>
-    )
+        {domain
+            && <FloatButton.Group
+                trigger='click'
+                style={{
+                    position: 'fixed',
+                    insetInlineEnd: (100 - 40) / 2,
+                    bottom: 100 - 40 / 2
+                }}
+                icon={<CaretUpOutlined/>}
+            >
+                <Tooltip title={t`Add to watchlist`} placement='left'>
+                    <FloatButton icon={<PlusOutlined />} onClick={() => setAddToWatchlistModal(true)} />
+                </Tooltip>
+            </FloatButton.Group>
+        }
+        <WatchlistSelectionModal
+            open={addToWatchlistModal}
+            onFinish={addToWatchlist}
+            modalProps={{
+                title: t`Add ${domain?.ldhName} to a watchlist`,
+                onCancel: () => setAddToWatchlistModal(false),
+                onClose: () => setAddToWatchlistModal(false),
+            }}
+        />
+    </>
 }
diff --git a/assets/utils/api/watchlist.ts b/assets/utils/api/watchlist.ts
index 2dbf8f9..d706a38 100644
--- a/assets/utils/api/watchlist.ts
+++ b/assets/utils/api/watchlist.ts
@@ -44,6 +44,13 @@ export async function patchWatchlist(token: string, watchlist: Partial<Watchlist
     return response.data
 }
 
+export async function addDomainToWatchlist(watchlist: Watchlist, ldhName: string) {
+    const domains = watchlist.domains.map(d => '/api/domains/' + d.ldhName)
+    domains.push('/api/domains/' + ldhName)
+
+    return patchWatchlist(watchlist.token, {domains})
+}
+
 export async function deleteWatchlist(token: string): Promise<void> {
     await request({
         method: 'DELETE',
diff --git a/assets/utils/functions/DomainToTag.tsx b/assets/utils/functions/DomainToTag.tsx
index d757892..5efad10 100644
--- a/assets/utils/functions/DomainToTag.tsx
+++ b/assets/utils/functions/DomainToTag.tsx
@@ -6,32 +6,38 @@ import React from 'react'
 import type {Event} from "../api"
 import {t} from "ttag"
 
-export function DomainToTag({domain}: { domain: { ldhName: string, deleted: boolean, status: string[], events?: Event[] } }) {
-    return (
-        <Link to={'/search/domain/' + domain.ldhName}>
-            <Badge dot={domain.events?.find(e =>
-                e.action === 'last changed' &&
-                !e.deleted &&
-                ((new Date().getTime() - new Date(e.date).getTime()) < 7*24*60*60*1e3)
-            ) !== undefined} color='blue' title={t`The domain name was updated less than a week ago.`}>
-                <Tag
-                    color={
-                        domain.deleted
-                            ? 'magenta'
-                            : domain.status.includes('redemption period')
-                                ? 'yellow'
-                                : domain.status.includes('pending delete') ? 'volcano' : 'default'
-                    }
-                    icon={
-                        domain.deleted
-                            ? <DeleteOutlined/>
-                            : domain.status.includes('redemption period')
-                                ? <ExclamationCircleOutlined/>
-                                : domain.status.includes('pending delete') ? <DeleteOutlined/> : null
-                    }
-                >{punycode.toUnicode(domain.ldhName)}
-                </Tag>
-            </Badge>
-        </Link>
-    )
+export function DomainToTag({domain, link}: { domain: { ldhName: string, deleted: boolean, status: string[], events?: Event[] }, link?: boolean }) {
+    const tag = <Badge dot={domain.events?.find(e =>
+        e.action === 'last changed' &&
+        !e.deleted &&
+        ((new Date().getTime() - new Date(e.date).getTime()) < 7*24*60*60*1e3)
+    ) !== undefined} color='blue' title={t`The domain name was updated less than a week ago.`}>
+        <Tag
+            color={
+                domain.deleted
+                    ? 'magenta'
+                    : domain.status.includes('redemption period')
+                        ? 'yellow'
+                        : domain.status.includes('pending delete') ? 'volcano' : 'default'
+            }
+            icon={
+                domain.deleted
+                    ? <DeleteOutlined/>
+                    : domain.status.includes('redemption period')
+                        ? <ExclamationCircleOutlined/>
+                        : domain.status.includes('pending delete') ? <DeleteOutlined/> : null
+            }
+        >{punycode.toUnicode(domain.ldhName)}
+        </Tag>
+    </Badge>
+
+    if (link ?? true) {
+        return (
+            <Link to={'/search/domain/' + domain.ldhName}>
+                {tag}
+            </Link>
+        )
+    } else {
+        return tag
+    }
 }