From eedb0bab243d4b0bed9980894e0f228058225de7 Mon Sep 17 00:00:00 2001
From: Lucieo <luciecamilleory@gmail.com>
Date: Tue, 19 Sep 2023 11:35:09 +0200
Subject: [PATCH] Trending bookmarks listing (#20)

* Trending bookmarks listing

* Fix newsletter bookmark

* Fix type on search

* Naming and delete popover style

* Fix draggable id
---
 .../digests/[digestId]/edit/page.tsx          |  13 +-
 src/app/(routes)/teams/[teamSlug]/page.tsx    |   6 +-
 src/app/providers.tsx                         |   1 -
 src/components/Input.tsx                      |   6 +-
 src/components/Popover.tsx                    |  54 ++++-
 src/components/Tooltip.tsx                    |   2 +-
 src/components/bookmark/BookmarkAddButton.tsx |  15 +-
 src/components/bookmark/BookmarkItem.tsx      | 128 +++++++-----
 src/components/bookmark/BookmarkListDnd.tsx   |  21 +-
 .../bookmark/BookmarksListControls.tsx        |   2 +-
 src/components/bookmark/BookmarksTeamList.tsx |  26 ++-
 .../{Bookmark.tsx => NewsBookmark.tsx}        |  16 +-
 src/components/pages/DigestEditPage.tsx       |  19 +-
 src/components/pages/Team.tsx                 |  14 +-
 src/emails/templates/NewsletterEmail.tsx      |   4 +-
 src/lib/queries.ts                            | 188 ++++++------------
 src/messages/en.ts                            |   9 +-
 src/pages/api/bookmark/index.ts               |   2 +-
 .../api/teams/[teamId]/bookmark/index.ts      |  20 +-
 src/utils/bookmark.ts                         |  33 +++
 20 files changed, 321 insertions(+), 258 deletions(-)
 rename src/components/bookmark/{Bookmark.tsx => NewsBookmark.tsx} (88%)

diff --git a/src/app/(routes)/teams/[teamSlug]/digests/[digestId]/edit/page.tsx b/src/app/(routes)/teams/[teamSlug]/digests/[digestId]/edit/page.tsx
index 402b420..97d6e33 100644
--- a/src/app/(routes)/teams/[teamSlug]/digests/[digestId]/edit/page.tsx
+++ b/src/app/(routes)/teams/[teamSlug]/digests/[digestId]/edit/page.tsx
@@ -3,7 +3,7 @@ import { TeamProvider } from '@/contexts/TeamContext';
 import {
   checkUserTeamBySlug,
   getDigest,
-  getTeamBookmarksNotInDigest,
+  getTeamLinks,
   updateDefaultTeam,
 } from '@/lib/queries';
 import { getCurrentUserOrRedirect } from '@/lib/sessions';
@@ -32,17 +32,16 @@ const page = async ({ params, searchParams }: TeamPageProps) => {
 
   const page = Number(searchParams?.page || 1);
   const search = searchParams?.search || '';
-  const dataBookmarks = await getTeamBookmarksNotInDigest(
-    team.id,
+  const teamLinksData = await getTeamLinks(team.id, {
     page,
-    10,
-    search
-  );
+    onlyNotInDigest: true,
+    search,
+  });
 
   return (
     <TeamProvider team={team}>
       <DigestEditPage
-        dataBookmarks={dataBookmarks}
+        teamLinksData={teamLinksData}
         digest={digest}
         team={team}
       />
diff --git a/src/app/(routes)/teams/[teamSlug]/page.tsx b/src/app/(routes)/teams/[teamSlug]/page.tsx
index 3a4813d..75d39d6 100644
--- a/src/app/(routes)/teams/[teamSlug]/page.tsx
+++ b/src/app/(routes)/teams/[teamSlug]/page.tsx
@@ -2,7 +2,7 @@ import Team from '@/components/pages/Team';
 import db from '@/lib/db';
 import {
   checkUserTeamBySlug,
-  getTeamBookmarks,
+  getTeamLinks,
   getTeamDigests,
   updateDefaultTeam,
 } from '@/lib/queries';
@@ -39,7 +39,7 @@ const TeamPage = async ({ params, searchParams }: TeamPageProps) => {
 
   const page = Number(searchParams?.page || 1);
   const search = searchParams?.search || '';
-  const { totalCount, bookmarks } = await getTeamBookmarks(team.id, {
+  const { totalCount, teamLinks } = await getTeamLinks(team.id, {
     page,
     onlyNotInDigest: !searchParams?.all,
     search,
@@ -51,7 +51,7 @@ const TeamPage = async ({ params, searchParams }: TeamPageProps) => {
     <Team
       team={team}
       linkCount={totalCount}
-      bookmarks={bookmarks}
+      teamLinks={teamLinks}
       digests={digests}
       search={search}
     />
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 4376465..f43d570 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -3,7 +3,6 @@
 import { Toaster } from 'react-hot-toast';
 import { SessionProvider } from 'next-auth/react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import messages from '../messages/en.json';
 
 const locale = 'en';
 
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index aac8981..c73d052 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -63,7 +63,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps<any>>(
 );
 
 export const Switch = forwardRef<HTMLInputElement, HTMLProps<HTMLInputElement>>(
-  function Switch({ label, onClick, checked, ...props }, ref) {
+  function Switch({ label, onChange, checked, ...props }, ref) {
     const [isChecked, setIsChecked] = useState(checked);
     return (
       <label className="relative inline-flex  cursor-pointer">
@@ -72,9 +72,9 @@ export const Switch = forwardRef<HTMLInputElement, HTMLProps<HTMLInputElement>>(
             type="checkbox"
             checked={isChecked}
             className="sr-only peer"
-            onClick={(e) => {
+            onChange={(e) => {
               setIsChecked(!isChecked);
-              onClick && onClick(e);
+              onChange && onChange(e);
             }}
             ref={ref}
             {...props}
diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx
index fd8489f..e57ac16 100644
--- a/src/components/Popover.tsx
+++ b/src/components/Popover.tsx
@@ -7,6 +7,9 @@ import {
 } from '@radix-ui/react-popover';
 import { ReactElement, cloneElement, forwardRef } from 'react';
 import Button from './Button';
+import { TeamBookmarkedLinkItem } from '@/lib/queries';
+import { getContributor } from './bookmark/BookmarkItem';
+import { TrashIcon } from '@heroicons/react/24/solid';
 
 interface DeletePopoverProps {
   trigger?: ReactElement;
@@ -29,7 +32,7 @@ export const Popover = forwardRef<HTMLButtonElement, PopoverProps & IProps>(
         </Trigger>
         <Portal>
           <Content>
-            <div className="text-sm flex mt-3 items-center justify-between space-x-8 border rounded-md bg-white p-2 text-gray-700 shadow-lg">
+            <div className="text-sm flex mt-3 items-center justify-between space-x-8 border rounded-md bg-white p-2 text-gray-700 shadow-lg z-50">
               {children}
             </div>
           </Content>
@@ -75,3 +78,52 @@ export const DeletePopover = forwardRef<HTMLButtonElement, DeletePopoverProps>(
 );
 
 DeletePopover.displayName = 'DeletePopover';
+
+export const MultipleDeletePopover = forwardRef<
+  HTMLButtonElement,
+  {
+    onDelete: (bookmarkId: string) => void;
+    bookmarks: TeamBookmarkedLinkItem['bookmark'];
+    trigger?: ReactElement;
+    isLoading: boolean;
+  }
+>(function MultipleDeletePopover(props, ref) {
+  const { bookmarks, onDelete, isLoading } = props;
+
+  return (
+    <Popover
+      trigger={
+        props.trigger || (
+          <span
+            ref={ref}
+            className="text-xs font-semibold hover:underline cursor-pointer"
+          >
+            Delete
+          </span>
+        )
+      }
+    >
+      <div className="flex-col z-20">
+        {bookmarks.map((bookmark) => (
+          <div className="flex items-center justify-between" key={bookmark?.id}>
+            <div className="pr-4">{getContributor(bookmark)}</div>
+            <DeletePopover
+              handleDelete={() => onDelete(bookmark?.id)}
+              isLoading={isLoading}
+              trigger={
+                <Button
+                  aria-label="Delete digest"
+                  icon={<TrashIcon />}
+                  variant="destructiveGhost"
+                  isLoading={isLoading}
+                />
+              }
+            />
+          </div>
+        ))}
+      </div>
+    </Popover>
+  );
+});
+
+MultipleDeletePopover.displayName = 'MultipleDeletePopover';
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 63cf985..1e60f6f 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -26,7 +26,7 @@ export const Tooltip = ({
           <Content
             side="bottom"
             sideOffset={5}
-            className="shadow-md bg-gray-600 text-xs text-white rounded-md p-2"
+            className="shadow-md bg-gray-600 text-xs text-white rounded-md p-2 z-20"
           >
             {children}
             <Arrow className="fill-gray-600" />
diff --git a/src/components/bookmark/BookmarkAddButton.tsx b/src/components/bookmark/BookmarkAddButton.tsx
index cd1b59d..d47759f 100644
--- a/src/components/bookmark/BookmarkAddButton.tsx
+++ b/src/components/bookmark/BookmarkAddButton.tsx
@@ -1,20 +1,13 @@
 import useAddAndRemoveBlockOnDigest from '@/hooks/useAddAndRemoveBlockOnDigest';
-import { getTeamBookmarksNotInDigest } from '@/lib/queries';
-import Link from 'next/link';
+import { TeamBookmarkedLinkItem } from '@/lib/queries';
 import React from 'react';
-import BookmarkImage from '../bookmark/BookmarkImage';
 import { AiOutlineLoading3Quarters as LoadingIcon } from '@react-icons/all-files/ai/AiOutlineLoading3Quarters';
 import { PlusCircleIcon } from '@heroicons/react/24/solid';
-import { getRelativeDate } from '@/utils/date';
-import { getDomainFromUrl } from '@/utils/url';
 import { BookmarkDigestStyle, DigestBlockType } from '@prisma/client';
-import { getEnvHost } from '@/lib/server';
 import { isTwitterLink } from '@/utils/link';
 
 interface Props {
-  bookmark: Awaited<
-    ReturnType<typeof getTeamBookmarksNotInDigest>
-  >['bookmarks'][0];
+  bookmark: TeamBookmarkedLinkItem;
   teamId: string;
   digestId: string;
 }
@@ -39,9 +32,9 @@ export default function BookmarkAddButton({
         onClick={(e) => {
           e.preventDefault();
           add.mutate({
-            bookmarkId: bookmark.id,
+            bookmarkId: bookmark.bookmark[0].id,
             type: DigestBlockType.BOOKMARK,
-            style: isTwitterLink(bookmark.link.url)
+            style: isTwitterLink(bookmark.url)
               ? BookmarkDigestStyle.TWEET_EMBED
               : BookmarkDigestStyle.BLOCK,
           });
diff --git a/src/components/bookmark/BookmarkItem.tsx b/src/components/bookmark/BookmarkItem.tsx
index 70d0e11..eed1a69 100644
--- a/src/components/bookmark/BookmarkItem.tsx
+++ b/src/components/bookmark/BookmarkItem.tsx
@@ -1,14 +1,10 @@
 'use client';
 
-import {
-  TeamBookmarksNotInDigestResult,
-  TeamBookmarksResult,
-} from '@/lib/queries';
+import { TeamBookmarkedLinkItem } from '@/lib/queries';
 import { getRelativeDate } from '@/utils/date';
 import { getDomainFromUrl } from '@/utils/url';
 import clsx from 'clsx';
 import BookmarkImage from './BookmarkImage';
-import { DeletePopover } from '../Popover';
 import { getEnvHost } from '@/lib/server';
 
 import api from '@/lib/api';
@@ -23,28 +19,58 @@ import useCustomToast from '@/hooks/useCustomToast';
 import useTransitionRefresh from '@/hooks/useTransitionRefresh';
 import BookmarkAddButton from './BookmarkAddButton';
 import Link from 'next/link';
+import { Tooltip } from '../Tooltip';
+import { DeletePopover, MultipleDeletePopover } from '../Popover';
 
 type Props = {
-  bookmark:
-    | TeamBookmarksResult
-    | TeamBookmarksNotInDigestResult['bookmarks'][0];
+  teamLink: TeamBookmarkedLinkItem;
   teamSlug: string;
   teamId: string;
   digestId?: string;
-  nbOfTimesUsed?: number;
+  isUsed?: boolean;
   editMode?: boolean;
 };
 
+export const getContributor = (
+  bookmark: TeamBookmarkedLinkItem['bookmark'][number]
+) => {
+  let name = '';
+  if (bookmark.membership)
+    name = `${
+      bookmark.membership.user?.name ||
+      bookmark.membership.user?.email?.split('@')[0]
+    } 
+  ${bookmark.createdAt && getRelativeDate(bookmark.createdAt)}`;
+
+  if (bookmark.provider === 'SLACK')
+    name = `From Slack
+      ${bookmark.createdAt && getRelativeDate(bookmark.createdAt)}`;
+
+  return name;
+};
+
+export const getContributorsString = (
+  bookmarks: TeamBookmarkedLinkItem['bookmark']
+) => {
+  let contributors: string[] = [];
+  bookmarks?.map((bookmark) => {
+    contributors.push(getContributor(bookmark));
+  });
+
+  return contributors.join(' / ');
+};
+
 export const BookmarkItem = ({
-  bookmark,
+  teamLink,
   teamSlug,
   teamId,
   digestId,
-  nbOfTimesUsed,
+  isUsed,
   editMode,
 }: Props) => {
   const { successToast, errorToast } = useCustomToast();
   const { isRefreshing, refresh } = useTransitionRefresh();
+  const bookmarksNumber = teamLink.bookmark?.length;
 
   const { mutate: deleteBookmark, isLoading: isDeleting } = useMutation<
     AxiosResponse<ApiBookmarkResponseSuccess>,
@@ -53,7 +79,6 @@ export const BookmarkItem = ({
   >(
     'delete-bookmarks',
     ({ bookmarkId }) => {
-      console.log(bookmarkId, teamId);
       return api.delete(`/teams/${teamId}/bookmark/${bookmarkId}`);
     },
     {
@@ -72,11 +97,10 @@ export const BookmarkItem = ({
   );
 
   const isLoading = isRefreshing || isDeleting;
-  const isUsed = !!nbOfTimesUsed && !editMode;
 
   return (
     <div
-      key={bookmark.id}
+      key={teamLink?.id}
       className={clsx(
         'group relative flex w-full rounded-md p-2 hover:bg-gray-50 flex-col',
         { 'opacity-60': isRefreshing }
@@ -89,9 +113,10 @@ export const BookmarkItem = ({
           target="_blank"
           title="Used in digest. Click to edit the digest."
         >
-          Bookmarked {nbOfTimesUsed > 1 ? nbOfTimesUsed : ''}{' '}
+          Published
         </a>
       )}
+
       <div
         className={clsx('flex w-full justify-between', {
           'opacity-60': isUsed,
@@ -100,74 +125,83 @@ export const BookmarkItem = ({
         <div className="flex gap-2 overflow-hidden w-[100%] justify-start">
           <div className="relative w-16 h-16 overflow-hidden rounded-md border max-w-[4rem]">
             <BookmarkImage
-              link={bookmark.link}
+              link={teamLink}
               fallbackSrc={`${getEnvHost()}/api/bookmark-og?bookmark=${
-                bookmark.id
+                teamLink.id
               }`}
             />
           </div>
           <div className="flex flex-col items-start max-w-[100%] overflow-hidden flex-1">
             <div className="flex flex-col overflow-hidden max-w-[100%]">
               <span className="truncate font-semibold whitespace-nowrap">
-                {bookmark.link.title || bookmark.link.url}
+                {teamLink.title || teamLink.url}
               </span>
 
               <div className="flex items-center text-sm text-gray-500">
-                {bookmark.membership ? (
-                  <div className="whitespace-nowrap max-w-[33%] sm:max-w-none truncate">
-                    {bookmark.membership.user?.name ||
-                      bookmark.membership.user?.email?.split('@')[0]}{' '}
-                    {bookmark.createdAt && getRelativeDate(bookmark.createdAt)}
-                  </div>
+                {bookmarksNumber > 1 ? (
+                  <Tooltip
+                    trigger={
+                      <div>
+                        <span className="inline-flex items-center rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-700/10 cursor-auto">
+                          Bookmarked {bookmarksNumber} times
+                        </span>
+                      </div>
+                    }
+                  >
+                    {getContributorsString(teamLink.bookmark)}
+                  </Tooltip>
                 ) : (
                   <div className="whitespace-nowrap max-w-[33%] sm:max-w-none truncate">
-                    {bookmark.provider === 'SLACK' && (
-                      <>
-                        From Slack{' '}
-                        {bookmark.createdAt &&
-                          getRelativeDate(bookmark.createdAt)}
-                      </>
-                    )}
+                    {getContributorsString(teamLink.bookmark)}
                   </div>
                 )}
                 <div className="mx-1">-</div>
                 <div className="whitespace-nowrap max-w-[33%] sm:max-w-none truncate">
                   {editMode ? (
                     <Link
-                      href={bookmark.link.url}
+                      href={teamLink.url}
                       target="_blank"
                       className="text-gray-400 whitespace-nowrap overflow-hidden text-ellipsis underline underline-offset-2"
                     >
-                      {getDomainFromUrl(bookmark.link.url)}
+                      {getDomainFromUrl(teamLink.url)}
                     </Link>
                   ) : (
-                    getDomainFromUrl(bookmark.link.url)
+                    <span className="cursor-auto">
+                      {getDomainFromUrl(teamLink.url)}
+                    </span>
                   )}
                 </div>
                 <div className="mx-1">-</div>
-                <div
-                  className="relative z-20"
-                  onClick={(e) => e.preventDefault()}
-                >
-                  <DeletePopover
-                    handleDelete={() =>
-                      deleteBookmark({ bookmarkId: bookmark?.id })
-                    }
-                    isLoading={isLoading}
-                  />
+                <div className="relative" onClick={(e) => e.preventDefault()}>
+                  {bookmarksNumber > 1 ? (
+                    <MultipleDeletePopover
+                      onDelete={(bookmarkId) => deleteBookmark({ bookmarkId })}
+                      bookmarks={teamLink.bookmark}
+                      isLoading={isLoading}
+                    />
+                  ) : (
+                    <DeletePopover
+                      handleDelete={() =>
+                        deleteBookmark({
+                          bookmarkId: teamLink.bookmark[0]?.id,
+                        })
+                      }
+                      isLoading={isLoading}
+                    />
+                  )}
                 </div>
               </div>
             </div>
-            {bookmark.link.description && (
+            {teamLink.description && (
               <p className={clsx('pt-2 text-sm', { 'opacity-60': isUsed })}>
-                {bookmark.link.description}
+                {teamLink.description}
               </p>
             )}
           </div>
         </div>
         {editMode && digestId && (
           <BookmarkAddButton
-            bookmark={bookmark}
+            bookmark={teamLink}
             teamId={teamId}
             digestId={digestId}
           />
diff --git a/src/components/bookmark/BookmarkListDnd.tsx b/src/components/bookmark/BookmarkListDnd.tsx
index 913fd1c..b766de0 100644
--- a/src/components/bookmark/BookmarkListDnd.tsx
+++ b/src/components/bookmark/BookmarkListDnd.tsx
@@ -1,19 +1,14 @@
-import {
-  TeamBookmarksNotInDigestResult,
-  getDigest,
-  getTeamBookmarksNotInDigest,
-  getTeamBySlug,
-} from '@/lib/queries';
+import { TeamLinks, getDigest, getTeamBySlug } from '@/lib/queries';
 import { Draggable, Droppable } from 'react-beautiful-dnd';
 import { BookmarkItem } from './BookmarkItem';
 
 export type BookmarkListDndProps = {
   digest: NonNullable<Awaited<ReturnType<typeof getDigest>>>;
   team: Awaited<ReturnType<typeof getTeamBySlug>>;
-  bookmarks: TeamBookmarksNotInDigestResult['bookmarks'];
+  teamLinks: TeamLinks;
 };
 
-const BookmarkListDnd = ({ bookmarks, team, digest }: BookmarkListDndProps) => {
+const BookmarkListDnd = ({ teamLinks, team, digest }: BookmarkListDndProps) => {
   return (
     <Droppable droppableId="bookmark" type="bookmark">
       {(provided) => (
@@ -22,11 +17,11 @@ const BookmarkListDnd = ({ bookmarks, team, digest }: BookmarkListDndProps) => {
           {...provided.droppableProps}
           ref={provided.innerRef}
         >
-          {bookmarks.map((bookmark, index) => {
+          {teamLinks?.map((teamLink, index) => {
             return (
               <Draggable
-                key={bookmark.id}
-                draggableId={bookmark.id}
+                key={teamLink.id}
+                draggableId={teamLink.bookmark[0].id}
                 index={index}
               >
                 {(provided) => (
@@ -36,8 +31,8 @@ const BookmarkListDnd = ({ bookmarks, team, digest }: BookmarkListDndProps) => {
                     ref={provided.innerRef}
                   >
                     <BookmarkItem
-                      key={bookmark.id}
-                      bookmark={bookmark}
+                      key={teamLink.id}
+                      teamLink={teamLink}
                       teamSlug={team.slug}
                       teamId={team.id}
                       digestId={digest.id}
diff --git a/src/components/bookmark/BookmarksListControls.tsx b/src/components/bookmark/BookmarksListControls.tsx
index 58ae32f..b60a74f 100644
--- a/src/components/bookmark/BookmarksListControls.tsx
+++ b/src/components/bookmark/BookmarksListControls.tsx
@@ -34,7 +34,7 @@ export const BookmarksListControls = ({
     <div className="flex items-center justify-end gap-3 max-sm:w-full max-sm:justify-between">
       <Switch
         label="View all bookmarks"
-        onClick={handleCheckboxChange}
+        onChange={handleCheckboxChange}
         checked={searchParams?.has('all')}
       />
       <Pagination totalItems={linkCount} className="h-6" />
diff --git a/src/components/bookmark/BookmarksTeamList.tsx b/src/components/bookmark/BookmarksTeamList.tsx
index 8a4d000..ea3b62e 100644
--- a/src/components/bookmark/BookmarksTeamList.tsx
+++ b/src/components/bookmark/BookmarksTeamList.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { TeamBookmarksResult } from '@/lib/queries';
+import { TeamLinks } from '@/lib/queries';
 import { BsFillBookmarkFill } from '@react-icons/all-files/bs/BsFillBookmarkFill';
 import NoContent from '../layout/NoContent';
 import { BookmarkItem } from './BookmarkItem';
@@ -8,16 +8,16 @@ import Link from 'next/link';
 import SearchInput from '../digests/SearchInput';
 
 type Props = {
-  bookmarks: TeamBookmarksResult[];
+  teamLinks: TeamLinks;
   teamId: string;
   teamSlug: string;
 };
 
-export const BookmarksTeamList = ({ bookmarks, teamId, teamSlug }: Props) => {
+export const BookmarksTeamList = ({ teamLinks, teamId, teamSlug }: Props) => {
   return (
     <div className="w-full">
       <SearchInput className="mb-4" />
-      {bookmarks.length < 1 ? (
+      {teamLinks.length < 1 ? (
         <NoContent
           icon={<BsFillBookmarkFill />}
           title="No bookmark"
@@ -25,19 +25,25 @@ export const BookmarksTeamList = ({ bookmarks, teamId, teamSlug }: Props) => {
         />
       ) : (
         <div className="flex flex-col gap-2">
-          {bookmarks.map((bookmark) => (
+          {teamLinks?.map((teamLink) => (
             <Link
-              key={bookmark?.id}
-              href={bookmark.link.url}
+              key={teamLink?.id}
+              href={teamLink.url}
               target="_blank"
               rel="noopener noreferrer"
             >
               <BookmarkItem
-                bookmark={bookmark}
+                teamLink={teamLink}
                 teamSlug={teamSlug}
                 teamId={teamId}
-                digestId={bookmark.digestBlocks[0]?.digest.id}
-                nbOfTimesUsed={bookmark.digestBlocks.length}
+                digestId={
+                  teamLink.bookmark?.find(
+                    (teamLink) => teamLink?.digestBlocks?.length
+                  )?.digestBlocks[0].digest.id
+                }
+                isUsed={teamLink.bookmark?.some(
+                  (teamLink) => teamLink.digestBlocks.length
+                )}
               />
             </Link>
           ))}
diff --git a/src/components/bookmark/Bookmark.tsx b/src/components/bookmark/NewsBookmark.tsx
similarity index 88%
rename from src/components/bookmark/Bookmark.tsx
rename to src/components/bookmark/NewsBookmark.tsx
index 6cf79fd..e8fb634 100644
--- a/src/components/bookmark/Bookmark.tsx
+++ b/src/components/bookmark/NewsBookmark.tsx
@@ -1,5 +1,5 @@
 import useAddAndRemoveBlockOnDigest from '@/hooks/useAddAndRemoveBlockOnDigest';
-import { TeamBookmarksResult } from '@/lib/queries';
+import { TeamBookmarkedLinkItem, TeamLinks } from '@/lib/queries';
 import { PlusCircleIcon } from '@heroicons/react/24/solid';
 import { DigestBlockType } from '@prisma/client';
 import { AiOutlineLoading3Quarters as LoadingIcon } from '@react-icons/all-files/ai/AiOutlineLoading3Quarters';
@@ -8,11 +8,11 @@ import { PropsWithChildren } from 'react';
 import BookmarkImage from './BookmarkImage';
 
 export const Bookmark = ({
-  bookmark,
+  teamLink,
   teamId,
   digestId,
 }: {
-  bookmark: TeamBookmarksResult;
+  teamLink: TeamBookmarkedLinkItem;
   teamId: string;
   digestId: string;
 } & PropsWithChildren) => {
@@ -25,19 +25,19 @@ export const Bookmark = ({
       <div className="flex w-full justify-between">
         <div className="flex gap-2 overflow-hidden w-[100%] justify-start">
           <div className="relative w-16 h-16 overflow-hidden rounded-md border max-w-[4rem]">
-            <BookmarkImage link={bookmark.link} />
+            <BookmarkImage link={teamLink} />
           </div>
           <div className="flex flex-col items-start max-w-[100%] overflow-hidden flex-1">
             <div className="flex flex-col overflow-hidden max-w-[100%]">
               <p className="font-semibold whitespace-nowrap overflow-hidden text-ellipsis text-base text-gray-800">
-                {bookmark.link.title}
+                {teamLink.title}
               </p>
               <Link
-                href={bookmark.link.url}
+                href={teamLink.url}
                 target="_blank"
                 className="text-gray-400 whitespace-nowrap overflow-hidden text-ellipsis text-base underline underline-offset-2"
               >
-                {bookmark.link.url}
+                {teamLink.url}
               </Link>
             </div>
           </div>
@@ -49,7 +49,7 @@ export const Bookmark = ({
             onClick={(e) => {
               e.preventDefault();
               add.mutate({
-                bookmarkId: bookmark.id,
+                bookmarkId: teamLink.id,
                 type: DigestBlockType.BOOKMARK,
               });
             }}
diff --git a/src/components/pages/DigestEditPage.tsx b/src/components/pages/DigestEditPage.tsx
index 56aefd6..47f4dd8 100644
--- a/src/components/pages/DigestEditPage.tsx
+++ b/src/components/pages/DigestEditPage.tsx
@@ -8,9 +8,9 @@ import api from '@/lib/api';
 
 import useAddAndRemoveBlockOnDigest from '@/hooks/useAddAndRemoveBlockOnDigest';
 import {
-  TeamBookmarksNotInDigestResult,
+  TeamLinks,
+  TeamLinksData,
   getDigest,
-  getTeamBookmarksNotInDigest,
   getTeamBySlug,
 } from '@/lib/queries';
 import { ApiDigestResponseSuccess } from '@/pages/api/teams/[teamId]/digests';
@@ -44,7 +44,7 @@ import DigestEditTypefully from './DigestEditTypefully';
 import DigestEditSendNewsletter from './DigestEditSendNewsletter';
 
 type Props = {
-  dataBookmarks: TeamBookmarksNotInDigestResult;
+  teamLinksData: TeamLinksData;
   digest: NonNullable<Awaited<ReturnType<typeof getDigest>>>;
   team: Awaited<ReturnType<typeof getTeamBySlug>>;
 };
@@ -57,7 +57,7 @@ type DigestData = {
 };
 
 export const DigestEditPage = ({
-  dataBookmarks: { totalCount, bookmarks, itemPerPage },
+  teamLinksData: { totalCount, teamLinks, perPage },
   digest,
   team,
 }: Props) => {
@@ -271,16 +271,16 @@ export const DigestEditPage = ({
             <SectionContainer title="Bookmarks" className="relative">
               <Pagination
                 totalItems={totalCount}
-                itemsPerPage={itemPerPage}
+                itemsPerPage={perPage}
                 className="absolute top-5 right-5"
               />
               <SearchInput className="mb-4" />
               <div className="flex flex-col gap-2">
-                {bookmarks && bookmarks.length > 0 ? (
+                {teamLinks && teamLinks.length > 0 ? (
                   <BookmarkListDnd
                     team={team}
                     digest={digest}
-                    bookmarks={bookmarks}
+                    teamLinks={teamLinks}
                   />
                 ) : (
                   <NoContent
@@ -291,10 +291,7 @@ export const DigestEditPage = ({
                 )}
               </div>
               <div className="flex justify-end">
-                <Pagination
-                  totalItems={totalCount}
-                  itemsPerPage={itemPerPage}
-                />
+                <Pagination totalItems={totalCount} itemsPerPage={perPage} />
               </div>
             </SectionContainer>
           </div>
diff --git a/src/components/pages/Team.tsx b/src/components/pages/Team.tsx
index a952111..f1c77d3 100644
--- a/src/components/pages/Team.tsx
+++ b/src/components/pages/Team.tsx
@@ -1,9 +1,5 @@
 'use client';
-import {
-  getTeamBySlug,
-  TeamBookmarksResult,
-  TeamDigestsResult,
-} from '@/lib/queries';
+import { getTeamBySlug, TeamLinks, TeamDigestsResult } from '@/lib/queries';
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/solid';
 import Link from 'next/link';
 import { BookmarksTeamList } from '../bookmark/BookmarksTeamList';
@@ -19,13 +15,13 @@ import { BsFillBookmarkFill } from '@react-icons/all-files/bs/BsFillBookmarkFill
 
 type Props = {
   linkCount: number;
-  bookmarks: TeamBookmarksResult[];
+  teamLinks: TeamLinks;
   digests: TeamDigestsResult[];
   team: Awaited<ReturnType<typeof getTeamBySlug>>;
   search?: string;
 };
 
-const Team = ({ team, linkCount, bookmarks, digests, search }: Props) => {
+const Team = ({ team, linkCount, teamLinks, digests, search }: Props) => {
   return (
     <PageContainer title={team.name}>
       <div className="flex max-lg:flex-col gap-5 pb-4">
@@ -46,7 +42,7 @@ const Team = ({ team, linkCount, bookmarks, digests, search }: Props) => {
             </div>
           }
         >
-          {!search && !bookmarks?.length ? (
+          {!search && !teamLinks?.length ? (
             <NoContent
               icon={<BsFillBookmarkFill />}
               title="No bookmark"
@@ -56,7 +52,7 @@ const Team = ({ team, linkCount, bookmarks, digests, search }: Props) => {
             <BookmarksTeamList
               teamId={team.id}
               teamSlug={team.slug}
-              bookmarks={bookmarks}
+              teamLinks={teamLinks}
             />
           )}
         </Card>
diff --git a/src/emails/templates/NewsletterEmail.tsx b/src/emails/templates/NewsletterEmail.tsx
index d7867c4..0108e00 100644
--- a/src/emails/templates/NewsletterEmail.tsx
+++ b/src/emails/templates/NewsletterEmail.tsx
@@ -16,7 +16,7 @@ import React from 'react';
 import { remark } from 'remark';
 import html from 'remark-html';
 
-const Bookmark = ({
+const NewsBookmark = ({
   bookmark,
 }: {
   bookmark: NewsletterBookmark;
@@ -151,7 +151,7 @@ const NewsletterEmail = ({
         {blocks?.length &&
           blocks.map((block, i) => {
             if (block.type === BlockType.BOOKMARK) {
-              return <Bookmark bookmark={block} key={i} />;
+              return <NewsBookmark bookmark={block} key={i} />;
             } else if (block.type === BlockType.TEXT) {
               return <Text text={block.text} key={i} />;
             }
diff --git a/src/lib/queries.ts b/src/lib/queries.ts
index 0e470da..8073540 100644
--- a/src/lib/queries.ts
+++ b/src/lib/queries.ts
@@ -142,7 +142,7 @@ export const getTeamInvitations = (slug: string) =>
 /**
  * Get bookmarks of a team in the team page, used to list the bookmarks in the team page
  */
-export const getTeamBookmarks = async (
+export const getTeamLinks = async (
   teamId: string,
   options: {
     page?: number;
@@ -153,150 +153,102 @@ export const getTeamBookmarks = async (
 ) => {
   const { page, perPage = 10 } = options;
 
-  const where: Prisma.BookmarkFindManyArgs['where'] = {
-    ...(options.onlyNotInDigest && {
-      digestBlocks: { none: {} },
-    }),
-    teamId,
-    ...(options.search && {
-      link: {
-        OR: [
-          {
-            title: {
-              contains: options.search,
-              mode: 'insensitive',
-            },
+  const searchWhere = {
+    OR: [
+      {
+        title: {
+          contains: options.search,
+          mode: Prisma.QueryMode.insensitive,
+        },
+      },
+      {
+        description: {
+          contains: options.search,
+          mode: Prisma.QueryMode.insensitive,
+        },
+      },
+    ],
+  };
+
+  const where = {
+    AND: [
+      options.search ? searchWhere : {},
+      {
+        bookmark: {
+          some: {
+            teamId,
           },
-          {
-            description: {
-              contains: options.search,
-              mode: 'insensitive',
+          ...(options.onlyNotInDigest && {
+            every: {
+              digestBlocks: { none: {} },
             },
-          },
-        ],
+          }),
+        },
       },
-    }),
+    ],
   };
 
-  const totalCount = await db.bookmark.count({
+  const totalCount = await db.link.count({
     where,
   });
 
-  const bookmarks = await db.bookmark.findMany({
+  const teamLinks = await db.link.findMany({
     take: perPage,
     skip: page ? (page - 1) * perPage : 0,
-    where,
     orderBy: {
       createdAt: 'desc',
     },
+    where,
     include: {
-      link: {
+      bookmark: {
         select: {
-          url: true,
-          description: true,
-          image: true,
-          title: true,
-          blurHash: true,
-        },
-      },
-      membership: {
-        include: {
-          user: {
-            select: {
-              email: true,
-              name: true,
+          createdAt: true,
+          updatedAt: true,
+          id: true,
+          teamId: true,
+          provider: true,
+          membership: {
+            include: {
+              user: {
+                select: {
+                  email: true,
+                  name: true,
+                },
+              },
             },
           },
-        },
-      },
-      digestBlocks: {
-        select: {
-          digest: {
+          digestBlocks: {
             select: {
-              id: true,
+              digest: {
+                select: {
+                  id: true,
+                },
+              },
             },
           },
         },
+        where: {
+          teamId,
+          ...(options.onlyNotInDigest && {
+            digestBlocks: { none: {} },
+          }),
+        },
       },
     },
   });
 
   return {
-    bookmarks,
+    teamLinks,
     totalCount,
+    perPage,
   };
 };
 
-/**
- * Get bookmarks of a team that are not in any digest, used to edit a digest
- */
-export const getTeamBookmarksNotInDigest = async (
-  teamId: string,
-  page?: number,
-  itemPerPage: number = 10,
-  search?: string
-) => {
-  const where: Prisma.BookmarkFindManyArgs['where'] = {
-    digestBlocks: { none: {} },
-    teamId,
-    ...(!!search && {
-      link: {
-        OR: [
-          {
-            title: {
-              contains: search,
-              mode: 'insensitive',
-            },
-          },
-          {
-            description: {
-              contains: search,
-              mode: 'insensitive',
-            },
-          },
-        ],
-      },
-    }),
-  };
-  const bookmarks = await db.bookmark.findMany({
-    take: itemPerPage,
-    skip: page ? (page - 1) * itemPerPage : 0,
-    where,
-    orderBy: {
-      createdAt: 'desc',
-    },
-    include: {
-      link: {
-        select: {
-          url: true,
-          description: true,
-          image: true,
-          title: true,
-          blurHash: true,
-        },
-      },
-      membership: {
-        include: {
-          user: {
-            select: {
-              email: true,
-              name: true,
-            },
-          },
-        },
-      },
-    },
-  });
-  const totalCount = await db.bookmark.count({
-    where,
-  });
+export type TeamLinksData = Awaited<ReturnType<typeof getTeamLinks>>;
 
-  return {
-    bookmarks,
-    totalCount,
-    itemPerPage,
-  };
-};
+export type TeamLinks = TeamLinksData['teamLinks'];
+
+export type TeamBookmarkedLinkItem = TeamLinks[number];
 
 export const getTeamDigests = async (
   teamId: string,
@@ -514,14 +466,6 @@ export type TeamInvitation = Awaited<
   ReturnType<typeof getTeamInvitations>
 >[number];
 
-export type TeamBookmarksResult = Awaited<
-  ReturnType<typeof getTeamBookmarks>
->['bookmarks'][number];
-
-export type TeamBookmarksNotInDigestResult = Awaited<
-  ReturnType<typeof getTeamBookmarksNotInDigest>
->;
-
 export type TeamDigestsResult = Awaited<
   ReturnType<typeof getTeamDigests>
 >[number];
diff --git a/src/messages/en.ts b/src/messages/en.ts
index 6d4bfe5..3e2fd5d 100644
--- a/src/messages/en.ts
+++ b/src/messages/en.ts
@@ -280,7 +280,14 @@ const message = {
   },
   bookmark: {
     delete: {
-      success: 'Your link has been deleted',
+      success: 'Your bookmark has been deleted',
+    },
+    create: {
+      error: {
+        already_bookmarked:
+          'You have already bookmarked this link in this team',
+        invalid_link: 'Invalid link provided',
+      },
     },
   },
   team: {
diff --git a/src/pages/api/bookmark/index.ts b/src/pages/api/bookmark/index.ts
index 12c0ceb..12319b1 100644
--- a/src/pages/api/bookmark/index.ts
+++ b/src/pages/api/bookmark/index.ts
@@ -39,7 +39,7 @@ router.post(async (req, res) => {
       return res.status(201).json(bookmark);
     } catch (error: unknown) {
       Sentry.captureException(error);
-
+      console.log(error);
       return res.status(400).json({
         error: 'Invalid link',
       });
diff --git a/src/pages/api/teams/[teamId]/bookmark/index.ts b/src/pages/api/teams/[teamId]/bookmark/index.ts
index c7ee680..c911d14 100644
--- a/src/pages/api/teams/[teamId]/bookmark/index.ts
+++ b/src/pages/api/teams/[teamId]/bookmark/index.ts
@@ -5,6 +5,7 @@ import { Bookmark } from '@prisma/client';
 import { NextApiResponse } from 'next';
 import { createRouter } from 'next-connect';
 import * as Sentry from '@sentry/nextjs';
+import messages from '@/messages/en';
 
 export type ApiBookmarkResponseSuccess = Bookmark;
 
@@ -21,14 +22,21 @@ router.use(checkTeam).post(async (req, res) => {
     const bookmark = await saveBookmark(linkUrl, req.teamId!, req.membershipId);
     return res.status(201).json(bookmark);
   } catch (error: unknown) {
-    if ((error as TypeError).message !== 'invalid_link') {
-      Sentry.captureMessage(
-        `Failed to save bookmark. Cause: Invalid link (${linkUrl})`
-      );
-    }
+    console.log(error);
+    const error_code = (error as TypeError)
+      .message as keyof typeof messages.bookmark.create.error;
+    console.log(error_code);
+
+    Sentry.captureMessage(
+      `Failed to save bookmark. Cause: ${
+        messages.bookmark.create.error[error_code] ??
+        (error as TypeError).message
+      } (${linkUrl})`
+    );
 
     return res.status(400).json({
-      error: 'Invalid link',
+      error:
+        messages.bookmark.create.error[error_code] ?? messages['default_error'],
     });
   }
 });
diff --git a/src/utils/bookmark.ts b/src/utils/bookmark.ts
index 87a411c..65e4bbf 100644
--- a/src/utils/bookmark.ts
+++ b/src/utils/bookmark.ts
@@ -31,6 +31,36 @@ const getHtml = async (url: string) => {
   });
 };
 
+const isBookmarkedByUser = async (
+  linkId?: string,
+  membershipId?: string,
+  teamId?: string
+) => {
+  if (!linkId || !membershipId || !teamId) return;
+
+  return db.bookmark
+    .findFirst({
+      select: { id: true },
+      where: {
+        linkId: {
+          equals: linkId,
+        },
+        membershipId: {
+          equals: membershipId,
+        },
+        teamId: {
+          equals: teamId,
+        },
+      },
+    })
+    .then((response) => {
+      console.log(response);
+      if (response?.id) {
+        throw new TypeError('already_bookmarked');
+      }
+    });
+};
+
 export const extractMetadata = async (url: string) => {
   const html = await getHtml(url);
   const metadata = (await metascraper({
@@ -65,7 +95,10 @@ export const saveBookmark = async (
       },
     },
   });
+
   await isLinkValid(linkUrl);
+  await isBookmarkedByUser(link?.id, membershipId, teamId);
+
   if (!link) {
     const metadata = await extractMetadata(linkUrl);