style: import type

assets/components/Sider.tsx

@@ -1,4 +1,4 @@
-import {ItemType} from 'antd/lib/menu/interface'
+import type {ItemType} from 'antd/lib/menu/interface'
 import {t} from 'ttag'
 import {
     AimOutlined,
@@ -22,6 +22,7 @@ export function Sider({isAuthenticated}: { isAuthenticated: boolean }) {
     const navigate = useNavigate()
     const location = useLocation()
 
+
     const menuItems: ItemType[] = [
         {
             key: '/home',
@@ -129,13 +130,11 @@ export function Sider({isAuthenticated}: { isAuthenticated: boolean }) {
         })
     }
 
-    return (
-        <Menu
-            defaultOpenKeys={['search', 'info', 'tracking', 'doc']}
-            selectedKeys={[location.pathname.includes('/search/domain') ? '/search/domain' : location.pathname]}
-            mode='inline'
-            theme='dark'
-            items={menuItems}
-        />
-    )
+    return <Menu
+        defaultOpenKeys={['search', 'info', 'tracking', 'doc']}
+        selectedKeys={[location.pathname.includes('/search/domain') ? '/search/domain' : location.pathname]}
+        mode='inline'
+        theme='dark'
+        items={menuItems}
+    />
 }

assets/components/search/DomainDiagram.tsx

@@ -1,7 +1,8 @@
 import React, {useEffect} from 'react'
-import {Background, Controls, Edge, MiniMap, Node, ReactFlow, useEdgesState, useNodesState} from '@xyflow/react'
+import type { Edge, Node} from '@xyflow/react'
+import {Background, Controls, MiniMap, ReactFlow, useEdgesState, useNodesState} from '@xyflow/react'
 import {Flex} from 'antd'
-import {Domain} from '../../utils/api'
+import type {Domain} from '../../utils/api'
 import {getLayoutedElements} from '../tracking/watchlist/diagram/getLayoutedElements'
 import {domainEntitiesToNode, domainToNode, nsToNode, tldToNode} from '../tracking/watchlist/diagram/watchlistToNodes'
 import {domainEntitiesToEdges, domainNSToEdges, tldToEdge} from '../tracking/watchlist/diagram/watchlistToEdges'

assets/components/search/DomainLifecycleSteps.tsx

@@ -1,4 +1,5 @@
-import {StepProps, Steps, Tooltip} from 'antd'
+import type {StepProps} from 'antd'
+import { Steps, Tooltip} from 'antd'
 import React from 'react'
 import {t} from 'ttag'
 import {

assets/components/search/DomainResult.tsx

@@ -4,7 +4,7 @@ import {EventTimeline} from './EventTimeline'
 import {EntitiesList} from './EntitiesList'
 import {DomainDiagram} from './DomainDiagram'
 import React from 'react'
-import {Domain} from '../../utils/api'
+import type {Domain} from '../../utils/api'
 import {regionNames} from '../../i18n'
 
 import {getCountryCode} from '../../utils/functions/getCountryCode'

assets/components/search/EntitiesList.tsx

@@ -1,6 +1,6 @@
 import {List, Tag, Tooltip, Typography} from 'antd'
 import React from 'react'
-import {Domain} from '../../utils/api'
+import type {Domain} from '../../utils/api'
 import {rdapRoleDetailTranslation, rdapRoleTranslation} from '../../utils/functions/rdapTranslation'
 import {roleToAvatar} from '../../utils/functions/roleToAvatar'
 import {rolesToColor} from '../../utils/functions/rolesToColor'

assets/components/search/EventTimeline.tsx

@@ -1,6 +1,6 @@
 import {Timeline, Tooltip, Typography} from 'antd'
 import React from 'react'
-import {Event} from '../../utils/api'
+import type {Event} from '../../utils/api'
 import useBreakpoint from '../../hooks/useBreakpoint'
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../utils/functions/rdapTranslation'
 import {actionToColor} from '../../utils/functions/actionToColor'

assets/components/tracking/connector/ConnectorForm.tsx

@@ -1,6 +1,8 @@
-import {Alert, Button, Checkbox, Form, FormInstance, Input, Popconfirm, Select, Space, Typography} from 'antd'
+import type { FormInstance} from 'antd'
+import {Alert, Button, Checkbox, Form, Input, Popconfirm, Select, Space, Typography} from 'antd'
 import React, {useState} from 'react'
-import {Connector, ConnectorProvider} from '../../../utils/api/connectors'
+import type {Connector} from '../../../utils/api/connectors'
+import { ConnectorProvider} from '../../../utils/api/connectors'
 import {t} from 'ttag'
 import {BankOutlined} from '@ant-design/icons'
 import {

assets/components/tracking/connector/ConnectorsList.tsx

@@ -2,7 +2,8 @@ import {Card, Divider, message, Popconfirm, theme, Typography} from 'antd'
 import {t} from 'ttag'
 import {DeleteFilled} from '@ant-design/icons'
 import React from 'react'
-import {Connector, deleteConnector} from '../../../utils/api/connectors'
+import type {Connector} from '../../../utils/api/connectors'
+import { deleteConnector} from '../../../utils/api/connectors'
 
 const {useToken} = theme
 

assets/components/tracking/watchlist/CalendarWatchlistButton.tsx

@@ -2,7 +2,7 @@ import {CalendarFilled} from '@ant-design/icons'
 import {t} from 'ttag'
 import {Popover, QRCode, Typography} from 'antd'
 import React from 'react'
-import {Watchlist} from '../../../utils/api'
+import type {Watchlist} from '../../../utils/api'
 
 export function CalendarWatchlistButton({watchlist}: { watchlist: Watchlist }) {
     const icsResourceLink = `${window.location.origin}/api/watchlists/${watchlist.token}/calendar`

assets/components/tracking/watchlist/DeleteWatchlistButton.tsx

@@ -1,6 +1,7 @@
 import {Popconfirm, theme, Typography} from 'antd'
 import {t} from 'ttag'
-import {deleteWatchlist, Watchlist} from '../../../utils/api'
+import type { Watchlist} from '../../../utils/api'
+import {deleteWatchlist} from '../../../utils/api'
 import {DeleteFilled} from '@ant-design/icons'
 import React from 'react'
 

assets/components/tracking/watchlist/TrackedDomainTable.tsx

@@ -1,8 +1,10 @@
-import React, {ReactElement, useEffect, useState} from 'react'
-import {Domain, getTrackedDomainList} from '../../../utils/api'
+import type {ReactElement} from 'react'
+import React, { useEffect, useState} from 'react'
+import type {Domain} from '../../../utils/api'
+import { getTrackedDomainList} from '../../../utils/api'
 import {Button, Empty, Result, Skeleton, Table, Tag, Tooltip} from 'antd'
 import {t} from 'ttag'
-import {ColumnType} from 'antd/es/table'
+import type {ColumnType} from 'antd/es/table'
 import {rdapStatusCodeDetailTranslation} from '../../../utils/functions/rdapTranslation'
 import {eppStatusCodeToColor} from '../../../utils/functions/eppStatusCodeToColor'
 import {Link} from 'react-router-dom'

assets/components/tracking/watchlist/UpdateWatchlistButton.tsx

@@ -3,8 +3,8 @@ import {t} from 'ttag'
 import {WatchlistForm} from './WatchlistForm'
 import React, {useState} from 'react'
 import {EditOutlined} from '@ant-design/icons'
-import {Connector} from '../../../utils/api/connectors'
-import {Watchlist} from '../../../utils/api'
+import type {Connector} from '../../../utils/api/connectors'
+import type {Watchlist} from '../../../utils/api'
 
 export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}: {
     watchlist: Watchlist

assets/components/tracking/watchlist/WatchlistCard.tsx

@@ -5,13 +5,13 @@ import {ViewDiagramWatchlistButton} from './diagram/ViewDiagramWatchlistButton'
 import {UpdateWatchlistButton} from './UpdateWatchlistButton'
 import {DeleteWatchlistButton} from './DeleteWatchlistButton'
 import React from 'react'
-import {Connector} from '../../../utils/api/connectors'
+import type {Connector} from '../../../utils/api/connectors'
 import {CalendarWatchlistButton} from './CalendarWatchlistButton'
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../../utils/functions/rdapTranslation'
 
 import {actionToColor} from '../../../utils/functions/actionToColor'
 import {DomainToTag} from '../DomainToTag'
-import {Watchlist} from '../../../utils/api'
+import type {Watchlist} from '../../../utils/api'
 
 export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelete}: {
     watchlist: Watchlist

assets/components/tracking/watchlist/WatchlistForm.tsx

@@ -1,12 +1,13 @@
-import {Button, Form, FormInstance, Input, Select, SelectProps, Space, Tag, Tooltip, Typography} from 'antd'
+import type { FormInstance, SelectProps} from 'antd'
+import {Button, Form, Input, Select, Space, Tag, Tooltip, Typography} from 'antd'
 import {t} from 'ttag'
 import {ApiOutlined, MinusCircleOutlined, PlusOutlined} from '@ant-design/icons'
 import React from 'react'
-import {Connector} from '../../../utils/api/connectors'
+import type {Connector} from '../../../utils/api/connectors'
 import {rdapEventDetailTranslation, rdapEventNameTranslation} from '../../../utils/functions/rdapTranslation'
 import {actionToColor} from '../../../utils/functions/actionToColor'
 import {actionToIcon} from '../../../utils/functions/actionToIcon'
-import {EventAction} from '../../../utils/api'
+import type {EventAction} from '../../../utils/api'
 
 type TagRender = SelectProps['tagRender']
 

assets/components/tracking/watchlist/WatchlistsList.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import {Connector} from '../../../utils/api/connectors'
+import type {Connector} from '../../../utils/api/connectors'
 import {WatchlistCard} from './WatchlistCard'
-import {Watchlist} from '../../../utils/api'
+import type {Watchlist} from '../../../utils/api'
 
 export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connectors}: {
     watchlists: Watchlist[]

assets/components/tracking/watchlist/diagram/ViewDiagramWatchlistButton.tsx

@@ -4,7 +4,8 @@ import React, {useEffect, useState} from 'react'
 import {ApartmentOutlined} from '@ant-design/icons'
 
 import '@xyflow/react/dist/style.css'
-import {Background, Controls, Edge, MiniMap, Node, ReactFlow, useEdgesState, useNodesState} from '@xyflow/react'
+import type { Edge, Node} from '@xyflow/react'
+import {Background, Controls, MiniMap, ReactFlow, useEdgesState, useNodesState} from '@xyflow/react'
 import {getWatchlist} from '../../../../utils/api'
 import {getLayoutedElements} from './getLayoutedElements'
 import {watchlistToNodes} from './watchlistToNodes'

assets/components/tracking/watchlist/diagram/getLayoutedElements.tsx

@@ -1,5 +1,6 @@
 import dagre from 'dagre'
-import {Edge, Node, Position} from '@xyflow/react'
+import type {Edge, Node} from '@xyflow/react'
+import { Position} from '@xyflow/react'
 
 export const getLayoutedElements = (nodes: Node[], edges: Edge[], direction = 'TB') => {
     const dagreGraph = new dagre.graphlib.Graph()

assets/components/tracking/watchlist/diagram/watchlistToEdges.tsx

@@ -1,9 +1,9 @@
-import {Domain, Watchlist} from '../../../../utils/api'
+import type {Domain, Watchlist} from '../../../../utils/api'
 import {rdapRoleTranslation} from '../../../../utils/functions/rdapTranslation'
 import {t} from 'ttag'
 
 import {rolesToColor} from '../../../../utils/functions/rolesToColor'
-import {Edge} from '@xyflow/react'
+import type {Edge} from '@xyflow/react'
 
 export function domainEntitiesToEdges(d: Domain, withRegistrar = false): Edge[] {
     const rdapRoleTranslated = rdapRoleTranslation()

assets/components/tracking/watchlist/diagram/watchlistToNodes.tsx

@@ -1,9 +1,9 @@
-import {Domain, Nameserver, Tld, Watchlist} from '../../../../utils/api'
+import type {Domain, Nameserver, Tld, Watchlist} from '../../../../utils/api'
 import React from 'react'
 import {t} from 'ttag'
 
 import {entityToName} from '../../../../utils/functions/entityToName'
-import {Node} from '@xyflow/react'
+import type {Node} from '@xyflow/react'
 
 export const domainToNode = (d: Domain): Node => ({
     id: d.ldhName,