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>
+	);
+}

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

@@ -0,0 +1,50 @@
+.linkWrapper {
+	user-select: none;
+	cursor: pointer;
+	width: 100%;
+	background-color: light-dark(var(--mantine-color-gray-1), rgb(50, 58, 71));
+	padding: 0.75em 1em;
+	border-radius: var(--border-radius);
+	border: 1px solid transparent;
+}
+
+.linkWrapper:hover {
+	border: 1px solid var(--mantine-color-blue-4);
+}
+
+.linkHeader {
+	display: flex;
+	gap: 1em;
+	align-items: center;
+}
+
+.linkName {
+	width: 100%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.linkDescription {
+	margin-top: 0.5em;
+	font-size: 0.8em;
+	word-wrap: break-word;
+}
+
+.linkUrl {
+	width: 100%;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+	font-size: 0.8em;
+	transition: opacity 0.3s;
+}
+
+.linkWrapper:hover .linkUrlPathname {
+	opacity: 1;
+}
+
+.linkUrlPathname {
+	opacity: 0;
+	transition: opacity 0.3s;
+}

inertia/components/dashboard/link/item/link_controls.tsx

@@ -0,0 +1,75 @@
+import { Link as InertiaLink } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { ActionIcon, Menu } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { BsThreeDotsVertical } from 'react-icons/bs';
+import { FaRegEye } from 'react-icons/fa';
+import { GoPencil } from 'react-icons/go';
+import { IoTrashOutline } from 'react-icons/io5';
+import { MdFavorite, MdFavoriteBorder } from 'react-icons/md';
+import { onFavorite } from '~/lib/favorite';
+import { appendCollectionId, appendLinkId } from '~/lib/navigation';
+import { useFavorites } from '~/stores/collection_store';
+import { Link, PublicLink } from '~/types/app';
+
+interface LinksControlsProps {
+	link: Link | PublicLink;
+	showGoToCollection?: boolean;
+}
+export default function LinkControls({
+	link,
+	showGoToCollection = false,
+}: LinksControlsProps) {
+	const { toggleFavorite } = useFavorites();
+	const { t } = useTranslation('common');
+
+	const onFavoriteCallback = () => toggleFavorite(link.id);
+	return (
+		<Menu withinPortal shadow="md" width={200}>
+			<Menu.Target>
+				<ActionIcon variant="subtle" color="var(--mantine-color-text)">
+					<BsThreeDotsVertical />
+				</ActionIcon>
+			</Menu.Target>
+			<Menu.Dropdown>
+				{showGoToCollection && (
+					<Menu.Item
+						component={InertiaLink}
+						href={appendCollectionId(route('dashboard').url, link.collectionId)}
+						leftSection={<FaRegEye />}
+						color="blue"
+					>
+						{t('go-to-collection')}
+					</Menu.Item>
+				)}
+				{'favorite' in link && (
+					<Menu.Item
+						onClick={() =>
+							onFavorite(link.id, !link.favorite, onFavoriteCallback)
+						}
+						leftSection={link.favorite ? <MdFavorite /> : <MdFavoriteBorder />}
+						color="var(--mantine-color-yellow-7)"
+					>
+						{link.favorite ? t('remove-favorite') : t('add-favorite')}
+					</Menu.Item>
+				)}
+				<Menu.Item
+					component={InertiaLink}
+					href={appendLinkId(route('link.edit-form').path, link.id)}
+					leftSection={<GoPencil />}
+					color="blue"
+				>
+					{t('link.edit')}
+				</Menu.Item>
+				<Menu.Item
+					component={InertiaLink}
+					href={appendLinkId(route('link.delete-form').path, link.id)}
+					leftSection={<IoTrashOutline />}
+					color="red"
+				>
+					{t('link.delete')}
+				</Menu.Item>
+			</Menu.Dropdown>
+		</Menu>
+	);
+}

inertia/components/dashboard/link/item/link_item.tsx

@@ -0,0 +1,70 @@
+import { Card, Group, Text } from '@mantine/core';
+import { AiFillStar } from 'react-icons/ai';
+import { ExternalLinkStyled } from '~/components/common/external_link_styled';
+import LinkFavicon from '~/components/dashboard/link/item/favicon/link_favicon';
+import LinkControls from '~/components/dashboard/link/item/link_controls';
+import type { LinkListProps } from '~/components/dashboard/link/list/link_list';
+import { Link, PublicLink } from '~/types/app';
+import styles from './link.module.css';
+
+interface LinkItemProps extends LinkListProps {
+	link: Link | PublicLink;
+}
+
+export function LinkItem({ link, hideMenu: hideMenu = false }: LinkItemProps) {
+	const { name, url, description } = link;
+	const showFavoriteIcon = !hideMenu && 'favorite' in link && link.favorite;
+	return (
+		<Card className={styles.linkWrapper} padding="sm" radius="sm" withBorder>
+			<Group className={styles.linkHeader} justify="center">
+				<LinkFavicon url={url} />
+				<ExternalLinkStyled href={url} style={{ flex: 1 }}>
+					<div className={styles.linkName}>
+						<Text lineClamp={1}>
+							{name} {showFavoriteIcon && <AiFillStar color="gold" />}
+						</Text>
+					</div>
+					<LinkItemURL url={url} />
+				</ExternalLinkStyled>
+				{!hideMenu && <LinkControls link={link} />}
+			</Group>
+			{description && (
+				<Text className={styles.linkDescription} c="dimmed" size="sm">
+					{description}
+				</Text>
+			)}
+		</Card>
+	);
+}
+
+function LinkItemURL({ url }: { url: Link['url'] }) {
+	try {
+		const { origin, pathname, search } = new URL(url);
+		let text = '';
+
+		if (pathname !== '/') {
+			text += pathname;
+		}
+
+		if (search !== '') {
+			if (text === '') {
+				text += '/';
+			}
+			text += search;
+		}
+
+		return (
+			<Text className={styles.linkUrl} c="gray" size="xs" lineClamp={1}>
+				{origin}
+				<span className={styles.linkUrlPathname}>{text}</span>
+			</Text>
+		);
+	} catch (error) {
+		console.error('error', error);
+		return (
+			<Text className={styles.linkUrl} c="gray" size="xs" lineClamp={1}>
+				{url}
+			</Text>
+		);
+	}
+}