feat: user can force domain refresh

assets/components/search/DomainSearchBar.tsx

@@ -1,19 +1,22 @@
 import {Form, Input} from 'antd'
 import {t} from 'ttag'
 import {SearchOutlined} from '@ant-design/icons'
-import React from 'react'
+import React, {useState} from 'react'
 
 export interface FieldType {
     ldhName: string
+    isRefreshForced: boolean
 }
 
 export function DomainSearchBar({onFinish, initialValue}: {
     onFinish: (values: FieldType) => void,
     initialValue?: string
 }) {
+    const [isRefreshForced, setRefreshForced] = useState(false)
+
     return (
         <Form
-            onFinish={onFinish}
+            onFinish={({ldhName}: FieldType) => onFinish({ldhName, isRefreshForced})}
             autoComplete='off'
             style={{width: '100%'}}
         >
@@ -33,6 +36,8 @@ export function DomainSearchBar({onFinish, initialValue}: {
                 <Input
                     style={{textAlign: 'center'}}
                     size='large'
+                    onKeyDown={e => setRefreshForced(e.shiftKey)}
+                    onKeyUp={e => setRefreshForced(e.shiftKey)}
                     prefix={<SearchOutlined/>}
                     placeholder='example.com'
                     autoComplete='off'

assets/components/search/EntitiesList.tsx

@@ -1,4 +1,4 @@
-import {Col, List, Tag, Tooltip, Typography} from 'antd'
+import {List, Tag, Tooltip, Typography} from 'antd'
 import React from 'react'
 import type {Domain} from '../../utils/api'
 import {rdapRoleDetailTranslation, rdapRoleTranslation} from '../../utils/functions/rdapTranslation'
@@ -29,19 +29,15 @@ export function EntitiesList({domain}: { domain: Domain }) {
                 const details = extractDetailsFromJCard(e)
 
                 return <List.Item>
-                    <Col span={14}>
-                        <List.Item.Meta
-                            avatar={roleToAvatar(e)}
-                            title={<Typography.Text code>{e.entity.handle}</Typography.Text>}
-                            description={<>
-                                {details.fn && <div>👤 {details.fn}</div>}
-                                {details.organization && <div>🏢 {details.organization}</div>}
-                            </>}
-                        />
-                    </Col>
-                    <Col span={10} flex='none'>
-                        {e.roles.map(roleToTag)}
-                    </Col>
+                    <List.Item.Meta
+                        avatar={roleToAvatar(e)}
+                        title={<Typography.Text code>{e.entity.handle}</Typography.Text>}
+                        description={<>
+                            {details.fn && <div>👤 {details.fn}</div>}
+                            {details.organization && <div>🏢 {details.organization}</div>}
+                        </>}
+                    />
+                    {e.roles.map(roleToTag)}
                 </List.Item>
             }}
         />