feat: show notice for old deleted items (#1174)

* feat: show notice for old deleted items

* fix: update notice message

Co-authored-by: Basile Spaenlehauer <spaenleh@gmail.com>

---------

Co-authored-by: kim <kim.phanhoang@epfl.ch>
Co-authored-by: Basile Spaenlehauer <spaenleh@gmail.com>

Author: 3 people

src/locales/en/home.json

@@ -23,5 +23,6 @@
   },
   "SURVEY": {
     "INFO": "We are conducting a user survey to better understand how you use Graasp. Your feedback is valuable!<br/>Please find the survey link <l1>here</l1>."
-  }
+  },
+  "OLD_DELETED_ITEMS_NOTICE": "Starting mid-January, items <b>deleted</b> more than 90 days ago will be permanently removed from your Trash. To prevent accidental loss of important items, please review your Trash."
 }

src/locales/fr/home.json

@@ -23,5 +23,6 @@
   },
   "SURVEY": {
     "INFO": "Nous lançons une enquête afin de mieux comprendre votre utilisation de la plateforme Graasp. Votre avis compte !<br/>Retrouvez le lien de l'enquête <l1>ici</l1>."
-  }
+  },
+  "OLD_DELETED_ITEMS_NOTICE": "A partir de mi-janvier, les éléments <b>supprimés</b> depuis plus de 90 jours seront définitivement retirés de votre Corbeille. Pour éviter la perte accidentelle d'éléments importants, veuillez vérifier le contenu de votre Corbeille."
 }

src/modules/home/OldDeletedItemsNotice.tsx

@@ -0,0 +1,43 @@
+import { Trans, useTranslation } from 'react-i18next';
+
+import { Alert } from '@mui/material';
+
+import { NS } from '@/config/constants';
+
+import { useLocalStorage } from './useLocalStorage';
+
+export function OldDeletedItemsNotice({
+  forceOpen = false,
+}: Readonly<{
+  forceOpen?: boolean;
+}>) {
+  const { t } = useTranslation(NS.Home);
+
+  const { value: isClosed, changeValue: setIsClosed } = useLocalStorage(
+    `old-deleted-items-notice-closed`,
+    false,
+  );
+
+  if (!forceOpen && isClosed) {
+    return null;
+  }
+
+  return (
+    <Alert
+      severity="info"
+      onClose={
+        forceOpen
+          ? undefined
+          : () => {
+              setIsClosed(true);
+            }
+      }
+    >
+      <Trans
+        t={t}
+        i18nKey={'OLD_DELETED_ITEMS_NOTICE'}
+        components={{ b: <b /> }}
+      />
+    </Alert>
+  );
+}

src/routes/_memberOnly/_homeLayout/home.tsx

@@ -3,6 +3,7 @@ import { Divider, Stack, useMediaQuery, useTheme } from '@mui/material';
 import { createFileRoute } from '@tanstack/react-router';
 
 import { MaintenanceAnnouncement } from '@/modules/home/MaintenanceAnnouncement';
+import { OldDeletedItemsNotice } from '@/modules/home/OldDeletedItemsNotice';
 import SurveyBanner from '@/modules/home/SurveyBanner';
 import { BookmarkedItems } from '@/modules/home/bookmarks/BookmarkedItems';
 
@@ -27,6 +28,7 @@ function HomeRoute() {
     <>
       <MaintenanceAnnouncement suffix="home" />
       <SurveyBanner />
+      <OldDeletedItemsNotice />
       <BookmarkedItems />
       <Divider flexItem />
       <SelectionContextProvider>

src/routes/_memberOnly/_homeLayout/recycled.tsx

@@ -9,6 +9,7 @@ import {
   RECYCLED_ITEMS_EMPTY_ID,
   RECYCLED_ITEMS_ERROR_ALERT_ID,
 } from '@/config/selectors';
+import { OldDeletedItemsNotice } from '@/modules/home/OldDeletedItemsNotice';
 import { useInfiniteOwnRecycledItems } from '@/query/item/recycled/hooks';
 
 import DeleteButton from '~builder/components/common/DeleteButton';
@@ -67,6 +68,7 @@ function RecycledItemsScreenContent() {
       return (
         <>
           <Stack gap={1} height="100%">
+            <OldDeletedItemsNotice forceOpen />
             <Stack
               alignItems="space-between"
               direction="column"