feat: recreate shared page

+ improve security by not exposing author's email

inertia/components/dashboard/favorite/item/favorite_item.tsx

@@ -1,7 +1,7 @@
 import { Card, Group, Text } from '@mantine/core';
 import { ExternalLinkStyled } from '~/components/common/external_link_styled';
-import LinkControls from '~/components/dashboard/link/link_controls';
-import LinkFavicon from '~/components/dashboard/link/link_favicon';
+import LinkFavicon from '~/components/dashboard/link/item/favicon/link_favicon';
+import LinkControls from '~/components/dashboard/link/item/link_controls';
 import { LinkWithCollection } from '~/types/app';
 import styles from './favorite_item.module.css';
 

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

@@ -10,10 +10,10 @@ 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 } from '~/types/app';
+import { Link, PublicLink } from '~/types/app';
 
 interface LinksControlsProps {
-	link: Link;
+	link: Link | PublicLink;
 	showGoToCollection?: boolean;
 }
 export default function LinkControls({
@@ -42,15 +42,17 @@ export default function LinkControls({
 						{t('go-to-collection')}
 					</Menu.Item>
 				)}
-				<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>
+				{'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)}

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

@@ -1,19 +1,19 @@
 import { Card, Group, Text } from '@mantine/core';
 import { AiFillStar } from 'react-icons/ai';
 import { ExternalLinkStyled } from '~/components/common/external_link_styled';
-import LinkControls from '~/components/dashboard/link/link_controls';
-import LinkFavicon from '~/components/dashboard/link/link_favicon';
-import { Link } from '~/types/app';
+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';
 
-export default function LinkItem({
-	link,
-	showUserControls = false,
-}: {
-	link: Link;
-	showUserControls: boolean;
-}) {
-	const { name, url, description, favorite } = link;
+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">
@@ -21,13 +21,12 @@ export default function LinkItem({
 				<ExternalLinkStyled href={url} style={{ flex: 1 }}>
 					<div className={styles.linkName}>
 						<Text lineClamp={1}>
-							{name}{' '}
-							{showUserControls && favorite && <AiFillStar color="gold" />}
+							{name} {showFavoriteIcon && <AiFillStar color="gold" />}
 						</Text>
 					</div>
 					<LinkItemURL url={url} />
 				</ExternalLinkStyled>
-				{showUserControls && <LinkControls link={link} />}
+				{!hideMenu && <LinkControls link={link} />}
 			</Group>
 			{description && (
 				<Text className={styles.linkDescription} c="dimmed" size="sm">

inertia/components/dashboard/link/list/link_list.tsx

@@ -0,0 +1,24 @@
+import { Stack } from '@mantine/core';
+import { LinkItem } from '~/components/dashboard/link/item/link_item';
+import { NoLink } from '~/components/dashboard/link/no_link/no_link';
+import { useActiveCollection } from '~/stores/collection_store';
+
+export interface LinkListProps {
+	hideMenu?: boolean;
+}
+
+export function LinkList({ hideMenu = false }: LinkListProps) {
+	const { activeCollection } = useActiveCollection();
+
+	if (!activeCollection?.links || activeCollection.links.length === 0) {
+		return <NoLink hideMenu={hideMenu} />;
+	}
+
+	return (
+		<Stack gap="xs">
+			{activeCollection?.links.map((link) => (
+				<LinkItem link={link} key={link.id} hideMenu={hideMenu} />
+			))}
+		</Stack>
+	);
+}

inertia/components/dashboard/link/no_link/no_link.tsx

@@ -2,11 +2,14 @@ import { Link } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
 import { Anchor, Box, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
+import type { LinkListProps } from '~/components/dashboard/link/list/link_list';
 import { appendCollectionId } from '~/lib/navigation';
 import { useActiveCollection } from '~/stores/collection_store';
 import styles from './no_link.module.css';
 
-export function NoLink() {
+interface NoLinkProps extends LinkListProps {}
+
+export function NoLink({ hideMenu }: NoLinkProps) {
 	const { t } = useTranslation('common');
 	const { activeCollection } = useActiveCollection();
 	return (
@@ -23,15 +26,17 @@ export function NoLink() {
 					),
 				}}
 			/>
-			<Anchor
-				component={Link}
-				href={appendCollectionId(
-					route('link.create-form').path,
-					activeCollection?.id
-				)}
-			>
-				{t('link.create')}
-			</Anchor>
+			{!hideMenu && (
+				<Anchor
+					component={Link}
+					href={appendCollectionId(
+						route('link.create-form').path,
+						activeCollection?.id
+					)}
+				>
+					{t('link.create')}
+				</Anchor>
+			)}
 		</Box>
 	);
 }