feat: recreate shared page

+ improve security by not exposing author's email

inertia/components/dashboard/link/item/favicon/link_favicon.module.css

@@ -0,0 +1,26 @@
+.favicon {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.faviconLoader {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background-color: var(--secondary-color);
+}
+
+.faviconLoader > * {
+	animation: rotate 1s both reverse infinite linear;
+}
+
+@keyframes rotate {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

inertia/components/dashboard/link/item/favicon/link_favicon.tsx

@@ -0,0 +1,62 @@
+import { Center, Loader } from '@mantine/core';
+import { useEffect, useRef, useState } from 'react';
+import { TfiWorld } from 'react-icons/tfi';
+import styles from './link_favicon.module.css';
+
+const IMG_LOAD_TIMEOUT = 7_500;
+
+interface LinkFaviconProps {
+	url: string;
+	size?: number;
+}
+
+export default function LinkFavicon({ url, size = 32 }: LinkFaviconProps) {
+	const imgRef = useRef<HTMLImageElement>(null);
+
+	const [isFailed, setFailed] = useState<boolean>(false);
+	const [isLoading, setLoading] = useState<boolean>(true);
+
+	const setFallbackFavicon = () => setFailed(true);
+	const handleStopLoading = () => setLoading(false);
+
+	const handleErrorLoading = () => {
+		setFallbackFavicon();
+		handleStopLoading();
+	};
+
+	useEffect(() => {
+		if (imgRef.current?.complete) {
+			handleStopLoading();
+			return;
+		}
+		const id = setTimeout(() => handleErrorLoading(), IMG_LOAD_TIMEOUT);
+		return () => clearTimeout(id);
+	}, [isLoading]);
+
+	return (
+		<div className={styles.favicon}>
+			{!isFailed ? (
+				<img
+					src={`/favicon?url=${url}`}
+					onError={handleErrorLoading}
+					onLoad={handleStopLoading}
+					height={size}
+					width={size}
+					alt="icon"
+					ref={imgRef}
+					decoding="async"
+				/>
+			) : (
+				<TfiWorld size={size} />
+			)}
+			{isLoading && (
+				<Center
+					className={styles.faviconLoader}
+					style={{ height: `${size}px`, width: `${size}px` }}
+				>
+					<Loader size="xs" />
+				</Center>
+			)}
+		</div>
+	);
+}