feat: use link action dropdown for favorite links

This commit is contained in:
Sonny
2024-11-04 01:02:46 +01:00
committed by Sonny
parent 8953b9a64e
commit 8b24354c0e
2 changed files with 29 additions and 13 deletions

View File

@@ -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)

View File

@@ -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>
);