feat: allow to delete bookmarks on home

src/locales/en/home.json

@@ -8,7 +8,10 @@
   },
   "BOOKMARKED_ITEMS": {
     "SHOW_LESS": "Show less",
-    "SHOW_MORE": "Show more"
+    "SHOW_MORE": "Show more",
+    "MANAGE_BUTTON": "Manage",
+    "CANCEL_BUTTON": "Back",
+    "TITLE": "Bookmarks"
   },
   "LIBRARY": {
     "CARD": {

src/locales/fr/builder.json

@@ -245,7 +245,7 @@
   "MOVE_ITEM_MODAL_TITLE_one": "Où déplacer {{name}} ?",
   "MOVE_ITEM_MODAL_TITLE_other": "Où déplacer {{name}} et {{count}} autres éléments ?",
   "SELECT_TEMPLATE_TITLE": "Quel dossier choisirez-vous comme modèle ?",
-  "SELECT_MY_ITEMS": "Mes articles",
+  "SELECT_MY_ITEMS": "Mes éléments",
   "NEW_ITEM_APP_TAB_TEXT": "Application",
   "NEW_ITEM_BUTTON_TOOLTIP": "Créer un nouvel élément",
   "NEW_ITEM_BUTTON": "Nouvel Élément",

src/locales/fr/home.json

@@ -6,6 +6,13 @@
     "LIBRARY": "Bibliothèque",
     "RECYCLED_ITEMS": "Corbeille"
   },
+  "BOOKMARKED_ITEMS": {
+    "SHOW_LESS": "Montrer moins",
+    "SHOW_MORE": "Montrer plus",
+    "MANAGE_BUTTON": "Modifier",
+    "CANCEL_BUTTON": "Retour",
+    "TITLE": "Signets"
+  },
   "LIBRARY": {
     "CARD": {
       "TITLE": "Bibliothèque Graasp",

src/modules/home/bookmarks/BookmarkCardEdit.tsx

@@ -0,0 +1,91 @@
+import type { JSX } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  Box,
+  Card,
+  CardActions,
+  CardContent,
+  IconButton,
+  Stack,
+  Typography,
+  useTheme,
+} from '@mui/material';
+
+import { PackedItem, formatDate } from '@graasp/sdk';
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { BookmarkMinusIcon } from 'lucide-react';
+
+import { deleteFavoriteMutation } from '@/openapi/client/@tanstack/react-query.gen';
+import { memberKeys } from '@/query/keys';
+
+import ItemThumbnail from '../../player/common/ItemThumbnail';
+
+type Props = {
+  item: PackedItem;
+};
+
+export function BookmarkCardEdit({ item }: Readonly<Props>): JSX.Element {
+  const theme = useTheme();
+  const queryClient = useQueryClient();
+  const { i18n } = useTranslation();
+
+  const { mutate: removeBookmark } = useMutation({
+    ...deleteFavoriteMutation(),
+    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: memberKeys.current().bookmarkedItems,
+      });
+    },
+  });
+
+  return (
+    <Card sx={{ height: '100%' }} id={`bookmark-${item.id}`}>
+      <CardContent id={`bookmarkCardAction-${item.id}`} sx={{ pb: 0 }}>
+        <Stack
+          direction="row"
+          alignItems="stretch"
+          width="100%"
+          height="100%"
+          gap={1}
+        >
+          <Box
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+            // do not allow icons to shrink
+            flexShrink={0}
+          >
+            <ItemThumbnail item={item} />
+          </Box>
+
+          <Stack minWidth={0}>
+            <Typography
+              variant="h5"
+              component="h2"
+              alignItems="center"
+              textOverflow="ellipsis"
+              overflow="hidden"
+              noWrap
+            >
+              {item.name}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              {formatDate(item.updatedAt, { locale: i18n.language })}
+            </Typography>
+          </Stack>
+        </Stack>
+      </CardContent>
+      <CardActions sx={{ pt: 0, justifyContent: 'end' }}>
+        <IconButton
+          onClick={() => {
+            removeBookmark({ path: { itemId: item.id } });
+          }}
+        >
+          <BookmarkMinusIcon color={theme.palette.error.main} />
+        </IconButton>
+      </CardActions>
+    </Card>
+  );
+}

src/modules/home/bookmarks/BookmarkedItems.tsx

@@ -6,17 +6,21 @@ import {
   Button,
   Grid2 as Grid,
   Skeleton,
+  Stack,
+  Typography,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
 
+import { BookmarkIcon, PenIcon, XIcon } from 'lucide-react';
 import { v4 } from 'uuid';
 
 import { NS } from '@/config/constants';
 import { BOOKMARKED_ITEMS_ID } from '@/config/selectors';
 import { useBookmarkedItems } from '@/query/hooks/itemBookmark';
 
 import { BookmarkCard } from './BookmarkCard';
+import { BookmarkCardEdit } from './BookmarkCardEdit';
 
 const GridWrapper = ({ children }: { children: ReactNode }): JSX.Element => (
   <Grid size={{ xs: 12, sm: 4, md: 3, xl: 2 }}>{children}</Grid>
@@ -47,15 +51,39 @@ export function BookmarkedItems() {
   const { t } = useTranslation(NS.Home, { keyPrefix: 'BOOKMARKED_ITEMS' });
   const { data: bookmarkedItems, isPending, isError } = useBookmarkedItems();
   const [showAll, setShowAll] = useState(false);
+  const [isEditionMode, setIsEditionMode] = useState(false);
 
   const maxItems = useResponsiveMaxItems();
 
-  if (bookmarkedItems) {
+  if (bookmarkedItems?.length) {
     const shownBookmarks = showAll
       ? bookmarkedItems
       : bookmarkedItems.slice(0, maxItems);
     return (
       <>
+        <Stack direction="row" justifyContent="space-between">
+          <Stack direction="row" gap={1} alignItems="center">
+            <BookmarkIcon />
+            <Typography variant="h3">{t('TITLE')}</Typography>
+          </Stack>
+          {isEditionMode ? (
+            <Button
+              size="small"
+              startIcon={<XIcon size={16} />}
+              onClick={() => setIsEditionMode(false)}
+            >
+              {t('CANCEL_BUTTON')}
+            </Button>
+          ) : (
+            <Button
+              size="small"
+              startIcon={<PenIcon size={16} />}
+              onClick={() => setIsEditionMode(true)}
+            >
+              {t('MANAGE_BUTTON')}
+            </Button>
+          )}
+        </Stack>
         <Grid
           id={BOOKMARKED_ITEMS_ID}
           width="100%"
@@ -66,7 +94,11 @@ export function BookmarkedItems() {
         >
           {shownBookmarks.map(({ item }) => (
             <GridWrapper key={item.id}>
-              <BookmarkCard key={item.id} item={item} />
+              {isEditionMode ? (
+                <BookmarkCardEdit key={item.id} item={item} />
+              ) : (
+                <BookmarkCard key={item.id} item={item} />
+              )}
             </GridWrapper>
           ))}
         </Grid>