added ExternalLinkIndication.tsx

src/components/ExternalLinkIndication.tsx

@@ -0,0 +1,20 @@
+import {ReactElement} from "react"
+import {HiOutlineExternalLink} from "react-icons/hi"
+
+import {Box, BoxProps} from "@mui/material"
+
+export interface ExternalLinkIndicationProps extends BoxProps {}
+
+export default function ExternalLinkIndication({
+	children,
+	...props
+}: ExternalLinkIndicationProps): ReactElement {
+	return (
+		<Box component="span" {...props} display="flex" alignItems="center">
+			<Box component="span" mr={1}>
+				{children}
+			</Box>
+			<HiOutlineExternalLink />
+		</Box>
+	)
+}

src/components/index.ts

@@ -40,5 +40,7 @@ export * from "./LanguageButton"
 export {default as LanguageButton} from "./LanguageButton"
 export * from "./ExpandableListItem"
 export {default as ExpandableListItem} from "./ExpandableListItem"
+export * from "./ExternalLinkIndication"
+export {default as ExternalLinkIndication} from "./ExternalLinkIndication"
 
 export * as SimplePageBuilder from "./simple-page-builder"

src/route-widgets/ReportDetailRoute/ExpandedUrlsListItem.tsx

@@ -1,11 +1,12 @@
 import {ReactElement} from "react"
 import {useTranslation} from "react-i18next"
 import {BsArrowsAngleExpand} from "react-icons/bs"
+import {HiOutlineExternalLink} from "react-icons/hi"
 
 import {List, ListItemButton, ListItemText} from "@mui/material"
 
 import {DecryptedReportContent} from "~/server-types"
-import {ExpandableListItem} from "~/components"
+import {ExpandableListItem, ExternalLinkIndication} from "~/components"
 
 export interface ExpandedUrlsListItemProps {
 	urls: DecryptedReportContent["messageDetails"]["content"]["expandedUrls"]
@@ -32,7 +33,11 @@ export default function ExpandedUrlsListItem({urls}: ExpandedUrlsListItemProps):
 						rel="noopener noreferrer nofollow"
 					>
 						<ListItemText
-							primary={urlData.expandedUrl}
+							primary={
+								<ExternalLinkIndication>
+									{urlData.expandedUrl}
+								</ExternalLinkIndication>
+							}
 							secondary={urlData.originalUrl}
 						/>
 					</ListItemButton>

src/route-widgets/ReportDetailRoute/ProxiedImagesListItem.tsx

@@ -10,7 +10,7 @@ import {Grid, List, ListItemButton, ListItemText} from "@mui/material"
 
 import {DecryptedReportContent, ServerSettings} from "~/server-types"
 import {isDev} from "~/constants/development"
-import {ExpandableListItem} from "~/components"
+import {ExpandableListItem, ExternalLinkIndication} from "~/components"
 
 export interface ProxiedImagesListItemProps {
 	images: DecryptedReportContent["messageDetails"]["content"]["proxiedImages"]
@@ -38,7 +38,7 @@ export default function ProxiedImagesListItem({images}: ProxiedImagesListItemPro
 						key={image.imageProxyId}
 					>
 						<ListItemText
-							primary={image.url}
+							primary={<ExternalLinkIndication>{image.url}</ExternalLinkIndication>}
 							secondary={
 								<>
 									<Grid