feat: add dropdown for favorite items

inertia/components/dashboard/side_nav/favorite/favorite_dropdown_item.tsx

@@ -0,0 +1,60 @@
+import styled from '@emotion/styled';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
+import { DropdownItemButton } from '~/components/common/dropdown/dropdown_item';
+import useActiveCollection from '~/hooks/use_active_collection';
+import useCollections from '~/hooks/use_collections';
+import { onFavorite } from '~/lib/favorite';
+import { Link } from '~/types/app';
+
+const StarItem = styled(DropdownItemButton)(({ theme }) => ({
+  color: theme.colors.yellow,
+}));
+
+export default function FavoriteDropdownItem({ link }: { link: Link }) {
+  const { collections, setCollections } = useCollections();
+  const { setActiveCollection } = useActiveCollection();
+  const { t } = useTranslation();
+
+  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 (
+    <StarItem
+      onClick={() => onFavorite(link.id, !link.favorite, onFavoriteCallback)}
+    >
+      {!link.favorite ? (
+        <>
+          <AiFillStar /> {t('add-favorite')}
+        </>
+      ) : (
+        <>
+          <AiOutlineStar /> {t('remove-favorite')}
+        </>
+      )}
+    </StarItem>
+  );
+}

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

@@ -1,8 +1,61 @@
 import styled from '@emotion/styled';
+import { route } from '@izzyjs/route/client';
+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 Dropdown from '~/components/common/dropdown/dropdown';
+import { DropdownItemLink } from '~/components/common/dropdown/dropdown_item';
+import Legend from '~/components/common/legend';
+import TextEllipsis from '~/components/common/text_ellipsis';
+import LinkFavicon from '~/components/dashboard/link/link_favicon';
+import FavoriteDropdownItem from '~/components/dashboard/side_nav/favorite/favorite_dropdown_item';
 import { ItemExternalLink } from '~/components/dashboard/side_nav/nav_item';
+import { appendCollectionId, appendLinkId } from '~/lib/navigation';
+import { LinkWithCollection } from '~/types/app';
 
-const FavoriteItem = styled(ItemExternalLink)(({ theme }) => ({
+const FavoriteItemStyle = styled(ItemExternalLink)(({ theme }) => ({
   backgroundColor: theme.colors.secondary,
 }));
 
-export default FavoriteItem;
+const FavoriteDropdown = styled(Dropdown)(({ theme }) => ({
+  backgroundColor: theme.colors.secondary,
+}));
+
+export default function FavoriteItem({ link }: { link: LinkWithCollection }) {
+  const { t } = useTranslation();
+  return (
+    <FavoriteItemStyle href={link.url}>
+      <LinkFavicon url={link.url} size={24} />
+      <TextEllipsis>{link.name}</TextEllipsis>
+      <Legend>({link.collection.name})</Legend>
+      <FavoriteDropdown
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        }}
+        label={<BsThreeDotsVertical />}
+        svgSize={18}
+      >
+        <DropdownItemLink
+          href={appendCollectionId(route('dashboard').url, link.collection.id)}
+        >
+          <FaRegEye /> {t('go-to-collection')}
+        </DropdownItemLink>
+        <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>
+      </FavoriteDropdown>
+    </FavoriteItemStyle>
+  );
+}

inertia/components/dashboard/side_nav/favorite/favorite_list.tsx

@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
 import { useTranslation } from 'react-i18next';
-import TextEllipsis from '~/components/common/text_ellipsis';
-import LinkFavicon from '~/components/dashboard/link/link_favicon';
 import FavoriteListContainer from '~/components/dashboard/side_nav/favorite/favorite_container';
 import FavoriteItem from '~/components/dashboard/side_nav/favorite/favorite_item';
 import useFavorites from '~/hooks/use_favorites';
@@ -44,11 +42,8 @@ export default function FavoriteList() {
         {t('favorite')} • {favorites.length}
       </FavoriteLabel>
       <FavoriteListStyle>
-        {favorites.map(({ id, name, url }) => (
-          <FavoriteItem href={url} key={id}>
-            <LinkFavicon url={url} size={24} />
-            <TextEllipsis>{name}</TextEllipsis>
-          </FavoriteItem>
+        {favorites.map((link) => (
+          <FavoriteItem link={link} key={link.id} />
         ))}
       </FavoriteListStyle>
     </FavoriteListContainer>