From 8b24354c0e1df44b5da444217ce35ae5772634ce Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Mon, 4 Nov 2024 01:02:46 +0100
Subject: [PATCH] feat: use link action dropdown for favorite links

---
 .../dashboard/link/link_controls.tsx          | 22 +++++++++++++++++--
 .../dashboard/favorite/item/favorite_item.tsx | 20 ++++++++---------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/inertia/components/dashboard/link/link_controls.tsx b/inertia/components/dashboard/link/link_controls.tsx
index 638e5d3..8ca5f2f 100644
--- a/inertia/components/dashboard/link/link_controls.tsx
+++ b/inertia/components/dashboard/link/link_controls.tsx
@@ -4,16 +4,24 @@ import { ActionIcon, Menu } from '@mantine/core';
 import { useCallback } from 'react';
 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 useActiveCollection from '~/hooks/use_active_collection';
 import useCollections from '~/hooks/use_collections';
 import { onFavorite } from '~/lib/favorite';
-import { appendLinkId } from '~/lib/navigation';
+import { appendCollectionId, appendLinkId } from '~/lib/navigation';
 import { Link } from '~/types/app';
 
-export default function LinkControls({ link }: { link: Link }) {
+interface LinksControlsProps {
+	link: Link;
+	showGoToCollection?: boolean;
+}
+export default function LinkControls({
+	link,
+	showGoToCollection = false,
+}: LinksControlsProps) {
 	const { collections, setCollections } = useCollections();
 	const { setActiveCollection } = useActiveCollection();
 	const { t } = useTranslation('common');
@@ -51,6 +59,16 @@ export default function LinkControls({ link }: { link: Link }) {
 				</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>
+				)}
 				<Menu.Item
 					onClick={() =>
 						onFavorite(link.id, !link.favorite, onFavoriteCallback)
diff --git a/inertia/mantine/components/dashboard/favorite/item/favorite_item.tsx b/inertia/mantine/components/dashboard/favorite/item/favorite_item.tsx
index 412b3d9..e85121e 100644
--- a/inertia/mantine/components/dashboard/favorite/item/favorite_item.tsx
+++ b/inertia/mantine/components/dashboard/favorite/item/favorite_item.tsx
@@ -1,25 +1,23 @@
-import { Card, Group, Text } from '@mantine/core'; // Import de Mantine
+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 { LinkWithCollection } from '~/types/app';
 import styles from './favorite_item.module.css';
 
-export const FavoriteItem = ({
-	link: { name, url, collection },
-}: {
-	link: LinkWithCollection;
-}) => (
+export const FavoriteItem = ({ link }: { link: LinkWithCollection }) => (
 	<Card className={styles.linkWrapper} radius="sm" withBorder>
 		<Group justify="center" gap="xs">
-			<LinkFavicon size={32} url={url} />
-			<ExternalLinkStyled href={url} style={{ flex: 1 }}>
+			<LinkFavicon size={32} url={link.url} />
+			<ExternalLinkStyled href={link.url} style={{ flex: 1 }}>
 				<div className={styles.linkName}>
-					<Text lineClamp={1}>{name} </Text>
+					<Text lineClamp={1}>{link.name} </Text>
 				</div>
-				<Text c="gray" size="xs" lineClamp={1}>
-					{collection.name}
+				<Text c="gray" size="xs" mb={4} lineClamp={1}>
+					{link.collection.name}
 				</Text>
 			</ExternalLinkStyled>
+			<LinkControls link={link} showGoToCollection />
 		</Group>
 	</Card>
 );