feat: recreate link action dropdown

inertia/components/dashboard/link/link_controls.tsx

@@ -1,37 +1,82 @@
-import { useTheme } from '@emotion/react';
+import { Link as InertiaLink } from '@inertiajs/react';
 import { route } from '@izzyjs/route/client';
+import { ActionIcon, Menu } from '@mantine/core';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BsThreeDotsVertical } from 'react-icons/bs';
 import { GoPencil } from 'react-icons/go';
 import { IoTrashOutline } from 'react-icons/io5';
-import Dropdown from '~/components/common/dropdown/dropdown';
-import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
-import FavoriteDropdownItem from '~/components/dashboard/side_nav/favorite/favorite_dropdown_item';
+import { MdFavorite, MdFavoriteBorder } from 'react-icons/md';
+import useActiveCollection from '~/hooks/use_active_collection';
+import useCollections from '~/hooks/use_collections';
+import { onFavorite } from '~/lib/favorite';
 import { appendLinkId } from '~/lib/navigation';
 import { Link } from '~/types/app';
 
 export default function LinkControls({ link }: { link: Link }) {
-	const theme = useTheme();
+	const { collections, setCollections } = useCollections();
+	const { setActiveCollection } = useActiveCollection();
 	const { t } = useTranslation('common');
 
+	const toggleFavorite = useCallback(
+		(linkId: Link['id']) => {
+			let linkIndex = 0;
+			const collectionIndex = collections.findIndex(({ links }) => {
+				const lIndex = links.findIndex((l) => l.id === linkId);
+				if (lIndex !== -1) {
+					linkIndex = lIndex;
+				}
+				return lIndex !== -1;
+			});
+
+			const collectionLink = collections[collectionIndex].links[linkIndex];
+			const collectionsCopy = [...collections];
+			collectionsCopy[collectionIndex].links[linkIndex] = {
+				...collectionLink,
+				favorite: !collectionLink.favorite,
+			};
+
+			setCollections(collectionsCopy);
+			setActiveCollection(collectionsCopy[collectionIndex]);
+		},
+		[collections, setCollections]
+	);
+
+	const onFavoriteCallback = () => toggleFavorite(link.id);
 	return (
-		<Dropdown
-			label={<BsThreeDotsVertical css={{ color: theme.colors.grey }} />}
-			css={{ backgroundColor: theme.colors.secondary }}
-			svgSize={18}
-		>
-			<FavoriteDropdownItem link={link} />
-			<DropdownItemLink
-				href={appendLinkId(route('link.edit-form').url, link.id)}
-			>
-				<GoPencil /> {t('link.edit')}
-			</DropdownItemLink>
-			<DropdownItemLink
-				href={appendLinkId(route('link.delete-form').url, link.id)}
-				danger
-			>
-				<IoTrashOutline /> {t('link.delete')}
-			</DropdownItemLink>
-		</Dropdown>
+		<Menu withinPortal shadow="md" width={200}>
+			<Menu.Target>
+				<ActionIcon variant="subtle" color="var(--mantine-color-text)">
+					<BsThreeDotsVertical />
+				</ActionIcon>
+			</Menu.Target>
+			<Menu.Dropdown>
+				<Menu.Item
+					onClick={() =>
+						onFavorite(link.id, !link.favorite, onFavoriteCallback)
+					}
+					leftSection={link.favorite ? <MdFavorite /> : <MdFavoriteBorder />}
+					color="yellow"
+				>
+					{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="var(--mantine-color-blue-4)"
+				>
+					{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/link_item.tsx

@@ -1,6 +1,7 @@
 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 styles from './link.module.css';
@@ -26,7 +27,7 @@ export default function LinkItem({
 					</div>
 					<LinkItemURL url={url} />
 				</ExternalLinkStyled>
-				{/* {showUserControls && <LinkControls link={link} />} */}
+				{showUserControls && <LinkControls link={link} />}
 			</Group>
 			{description && (
 				<Text className={styles.linkDescription} c="dimmed" size="sm">