From 0f3cb22a1a2b3af7a195c5afe78b138bab7fb184 Mon Sep 17 00:00:00 2001
From: Basile Spaenlehauer <spaenleh@gmail.com>
Date: Fri, 26 Apr 2024 10:55:08 +0200
Subject: [PATCH] fix: improve settings page and overall (#1184)

* fix: update settings

* fix: remove white boxes

* fix: update translations

* fix: arabic

* fix: tests for formatted file size

* fix: make requested changes

* fix: thumbnail test and folder card look

* fix: pagination tests

* fix: add mimetype on browse file for dropzone
---
 cypress/e2e/item/home/home.cy.ts              |  11 +-
 cypress/e2e/item/settings/itemSettings.cy.ts  |   3 +-
 cypress/e2e/item/view/viewThumbnails.cy.ts    |   6 +-
 package.json                                  |   3 +-
 src/components/common/MemberAvatar.tsx        |  11 +-
 src/components/file/DropzoneHelper.tsx        |  47 +-
 src/components/item/form/AppForm.tsx          |   2 +-
 .../item/publish/CustomizedTagsEdit.tsx       |  33 +-
 .../item/settings/AdminChatSettings.tsx       |  22 +-
 .../item/settings/ClearChatButton.tsx         |  53 +-
 src/components/item/settings/FileSettings.tsx |  47 +-
 .../item/settings/GeolocationPicker.tsx       |  60 ++-
 .../item/settings/ItemLicenseSettings.tsx     |  76 ++-
 .../item/settings/ItemMetadataContent.tsx     |  13 +-
 .../item/settings/ItemSettingProperty.tsx     |  34 +-
 src/components/item/settings/ItemSettings.tsx |  21 +-
 .../item/settings/ItemSettingsProperties.tsx  |  23 +-
 .../item/settings/LanguageSelect.tsx          |   1 +
 src/components/main/ItemCard.tsx              |  29 +-
 src/components/main/ItemsToolbar.tsx          |   3 +-
 src/components/main/NewItemButton.tsx         |  17 +-
 src/config/constants.ts                       |   7 +-
 src/config/selectors.ts                       |   2 +-
 src/langs/ar.json                             |   2 -
 src/langs/constants.ts                        |   7 +-
 src/langs/de.json                             |   1 -
 src/langs/en.json                             |  25 +-
 src/langs/es.json                             |   1 -
 src/langs/fr.json                             |   3 +-
 src/langs/it.json                             |   3 +-
 src/utils/image.ts                            |  41 --
 yarn.lock                                     | 451 +++++++++++++++++-
 32 files changed, 693 insertions(+), 365 deletions(-)
 delete mode 100644 src/utils/image.ts

diff --git a/cypress/e2e/item/home/home.cy.ts b/cypress/e2e/item/home/home.cy.ts
index 22a1f55e9..93283a3f0 100644
--- a/cypress/e2e/item/home/home.cy.ts
+++ b/cypress/e2e/item/home/home.cy.ts
@@ -1,3 +1,5 @@
+import { ITEM_PAGE_SIZE } from '@/config/constants';
+
 import i18n, { BUILDER_NAMESPACE } from '../../../../src/config/i18n';
 import { HOME_PATH, ITEMS_PATH } from '../../../../src/config/paths';
 import {
@@ -101,7 +103,7 @@ describe('Home', () => {
       describe('Pagination', () => {
         const checkGridPagination = (
           items: ItemForTest[],
-          itemsPerPage: number = 10,
+          itemsPerPage: number = ITEM_PAGE_SIZE,
         ) => {
           const numberPages = Math.ceil(items.length / itemsPerPage);
 
@@ -305,17 +307,16 @@ describe('Home', () => {
       });
 
       describe('Pagination', () => {
-        const itemsPerPage = 10;
         const items = generateOwnItems(30);
-        const numberPages = Math.ceil(items.length / itemsPerPage);
+        const numberPages = Math.ceil(items.length / ITEM_PAGE_SIZE);
 
         it('shows only items of each page', () => {
           // for each page
           for (let i = 0; i < numberPages; i += 1) {
             // compute items that should be on this page
             const shouldDisplay = items.slice(
-              i * itemsPerPage,
-              (i + 1) * itemsPerPage,
+              i * ITEM_PAGE_SIZE,
+              (i + 1) * ITEM_PAGE_SIZE,
             );
             // compute items that should not be on this page
             const shouldNotDisplay = items.filter(
diff --git a/cypress/e2e/item/settings/itemSettings.cy.ts b/cypress/e2e/item/settings/itemSettings.cy.ts
index 71e1593d7..ffa73eb92 100644
--- a/cypress/e2e/item/settings/itemSettings.cy.ts
+++ b/cypress/e2e/item/settings/itemSettings.cy.ts
@@ -2,6 +2,7 @@ import {
   DescriptionPlacement,
   ItemType,
   MaxWidth,
+  formatFileSize,
   getFileExtra,
 } from '@graasp/sdk';
 import { langs } from '@graasp/translations';
@@ -129,7 +130,7 @@ describe('Item Settings', () => {
           const { mimetype, size } = getFileExtra(extra);
           cy.get(`#${ITEM_PANEL_TABLE_ID}`).contains(mimetype);
 
-          cy.get(`#${ITEM_PANEL_TABLE_ID}`).contains(size);
+          cy.get(`#${ITEM_PANEL_TABLE_ID}`).contains(formatFileSize(size));
         }
       });
     });
diff --git a/cypress/e2e/item/view/viewThumbnails.cy.ts b/cypress/e2e/item/view/viewThumbnails.cy.ts
index 22d6c9715..a7a4031c8 100644
--- a/cypress/e2e/item/view/viewThumbnails.cy.ts
+++ b/cypress/e2e/item/view/viewThumbnails.cy.ts
@@ -8,7 +8,6 @@ import { ItemLayoutMode } from '../../../../src/enums';
 import { MEMBERS } from '../../../fixtures/members';
 import { SAMPLE_ITEMS_WITH_THUMBNAILS } from '../../../fixtures/thumbnails';
 
-// THESE TESTS ARE SKIPPED SINCE THEY FAIL IN CI
 describe('View Thumbnails', () => {
   it(`display thumbnail icons`, () => {
     cy.setUpApi(SAMPLE_ITEMS_WITH_THUMBNAILS);
@@ -26,9 +25,8 @@ describe('View Thumbnails', () => {
 
     // GRID
     cy.switchMode(ItemLayoutMode.Grid);
-    cy.get(`#${buildItemCard(items[0].id)} img`)
-      .should('have.attr', 'src')
-      .and('contain', 'data:');
+    // first element has default folder svg
+    cy.get(`#${buildItemCard(items[0].id)} svg path`).should('exist');
 
     cy.get(`#${buildItemCard(items[1].id)} img`)
       .should('have.attr', 'src')
diff --git a/package.json b/package.json
index 08270602b..fb6d6a74f 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@graasp/query-client": "3.5.0",
     "@graasp/sdk": "4.7.6",
     "@graasp/translations": "1.27.0",
-    "@graasp/ui": "4.15.1",
+    "@graasp/ui": "4.15.3",
     "@mui/icons-material": "5.15.15",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.15",
@@ -50,6 +50,7 @@
     "lodash.isequal": "4.5.0",
     "lodash.partition": "4.6.0",
     "lodash.truncate": "4.4.2",
+    "lucide-react": "0.373.0",
     "papaparse": "5.4.1",
     "react": "18.2.0",
     "react-beautiful-dnd": "13.1.1",
diff --git a/src/components/common/MemberAvatar.tsx b/src/components/common/MemberAvatar.tsx
index 346afb55a..4f3fb07a6 100644
--- a/src/components/common/MemberAvatar.tsx
+++ b/src/components/common/MemberAvatar.tsx
@@ -5,21 +5,18 @@ import { Avatar } from '@graasp/ui';
 import { AVATAR_ICON_HEIGHT } from '../../config/constants';
 import { useCommonTranslation } from '../../config/i18n';
 import { hooks } from '../../config/queryClient';
-import { buildMemberAvatarClass } from '../../config/selectors';
-import defaultImage from '../../resources/avatar.png';
+import { buildMemberAvatarId } from '../../config/selectors';
 
 type Props = {
   id?: string;
   maxWidth?: number;
   maxHeight?: number;
-  component?: string;
 };
 
 const MemberAvatar = ({
   id,
   maxWidth = AVATAR_ICON_HEIGHT,
   maxHeight = AVATAR_ICON_HEIGHT,
-  component = 'avatar',
 }: Props): JSX.Element => {
   const { t } = useCommonTranslation();
   const { data: member, isLoading } = hooks.useMember(id);
@@ -29,11 +26,11 @@ const MemberAvatar = ({
   });
   return (
     <Avatar
-      url={avatarUrl ?? defaultImage}
+      id={buildMemberAvatarId(member?.id)}
+      url={avatarUrl}
       isLoading={isLoading || isLoadingAvatar}
-      className={buildMemberAvatarClass(member?.id)}
       alt={member?.name ?? t(COMMON.AVATAR_DEFAULT_ALT)}
-      component={component}
+      component="avatar"
       maxWidth={maxWidth}
       maxHeight={maxHeight}
       sx={{ mx: 1 }}
diff --git a/src/components/file/DropzoneHelper.tsx b/src/components/file/DropzoneHelper.tsx
index 82f6b7095..20b156ac0 100644
--- a/src/components/file/DropzoneHelper.tsx
+++ b/src/components/file/DropzoneHelper.tsx
@@ -2,12 +2,13 @@ import { useContext, useRef } from 'react';
 
 import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
 import UploadFileOutlinedIcon from '@mui/icons-material/UploadFileOutlined';
-import { Button, Stack, Typography } from '@mui/material';
+import { Box, Button, Stack, Typography } from '@mui/material';
 
 import { useBuilderTranslation } from '@/config/i18n';
 import { DROPZONE_HELPER_ID } from '@/config/selectors';
 import { BUILDER } from '@/langs/constants';
 
+import NewItemButton from '../main/NewItemButton';
 import { UppyContext } from './UppyContext';
 
 const DropzoneHelper = (): JSX.Element => {
@@ -30,7 +31,7 @@ const DropzoneHelper = (): JSX.Element => {
         // add files selected to uppy, this will upload them
         [...files].map((file) =>
           // add name to display file name in the ItemsTable
-          uppy?.addFile({ data: file, name: file.name }),
+          uppy?.addFile({ data: file, name: file.name, type: file.type }),
         );
       } else {
         console.error('no files found !');
@@ -55,24 +56,30 @@ const DropzoneHelper = (): JSX.Element => {
       <Typography variant="h5" color="text.secondary">
         {t(BUILDER.DROPZONE_HELPER_OPTIONAL_ACTION_TEXT)}
       </Typography>
-      <Button
-        variant="contained"
-        size="large"
-        onClick={handleClick}
-        startIcon={<FolderOutlinedIcon />}
-      >
-        {t(BUILDER.DROPZONE_HELPER_ACTION)}
-      </Button>
-      <input
-        style={{ display: 'none' }}
-        type="file"
-        multiple
-        ref={ref}
-        onChange={handleFiles}
-      />
-      <Typography variant="body1" sx={{ color: '#757575' }}>
-        {t(BUILDER.DROPZONE_HELPER_LIMIT_REMINDER_TEXT)}
-      </Typography>
+      <Stack direction="row" gap={2}>
+        <Stack alignItems="center" gap={1}>
+          <Button
+            variant="contained"
+            onClick={handleClick}
+            startIcon={<FolderOutlinedIcon />}
+          >
+            {t(BUILDER.DROPZONE_HELPER_ACTION)}
+          </Button>
+          <input
+            style={{ display: 'none' }}
+            type="file"
+            multiple
+            ref={ref}
+            onChange={handleFiles}
+          />
+          <Typography variant="caption" color="text.secondary">
+            {t(BUILDER.DROPZONE_HELPER_LIMIT_REMINDER_TEXT)}
+          </Typography>
+        </Stack>
+        <Box>
+          <NewItemButton />
+        </Box>
+      </Stack>
     </Stack>
   );
 };
diff --git a/src/components/item/form/AppForm.tsx b/src/components/item/form/AppForm.tsx
index 8839a4c76..f7102e3f8 100644
--- a/src/components/item/form/AppForm.tsx
+++ b/src/components/item/form/AppForm.tsx
@@ -171,7 +171,7 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
     <Stack direction="column" height="100%" spacing={2} minHeight="0px">
       <TextField
         fullWidth
-        placeholder={translateBuilder('Search for an app')}
+        placeholder={translateBuilder(BUILDER.CREATE_APP_SEARCH_FIELD_HELPER)}
         variant="outlined"
         autoFocus
         size="small"
diff --git a/src/components/item/publish/CustomizedTagsEdit.tsx b/src/components/item/publish/CustomizedTagsEdit.tsx
index cc1b46e60..de111fe9f 100644
--- a/src/components/item/publish/CustomizedTagsEdit.tsx
+++ b/src/components/item/publish/CustomizedTagsEdit.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 
-import { Chip, Stack, TextField, Typography } from '@mui/material';
+import { Box, Chip, Stack, TextField, Typography } from '@mui/material';
 import type { TextFieldProps } from '@mui/material';
 
 import { DiscriminatedItem } from '@graasp/sdk';
 import { COMMON } from '@graasp/translations';
-import { Loader, SaveButton } from '@graasp/ui';
+import { SaveButton } from '@graasp/ui';
 
 import {
   useBuilderTranslation,
@@ -18,7 +18,6 @@ import {
   buildCustomizedTagsSelector,
 } from '../../../config/selectors';
 import { BUILDER } from '../../../langs/constants';
-import { useCurrentUserContext } from '../../context/CurrentUserContext';
 
 type Props = { item: DiscriminatedItem; disabled?: boolean };
 
@@ -27,11 +26,7 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
   const { t: translateCommon } = useCommonTranslation();
   const { mutate: updateCustomizedTags } = mutations.useEditItem();
 
-  // user
-  const { isLoading: isMemberLoading } = useCurrentUserContext();
-
-  const settings = item?.settings;
-  const itemId = item?.id;
+  const { settings, id: itemId } = item;
 
   const [displayValues, setDisplayValues] = useState<string>();
 
@@ -41,8 +36,6 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
     }
   }, [settings]);
 
-  if (isMemberLoading) return <Loader />;
-
   const handleChange: TextFieldProps['onChange'] = (event) => {
     setDisplayValues(event.target.value);
   };
@@ -60,13 +53,15 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
   };
 
   return (
-    <>
-      <Typography variant="h6" mt={2}>
-        {translateBuilder(BUILDER.ITEM_TAGS_TITLE)}
-      </Typography>
-      <Typography variant="body1">
-        {translateBuilder(BUILDER.ITEM_TAGS_INFORMATION)}
-      </Typography>
+    <Stack gap={1}>
+      <Box>
+        <Typography variant="h4">
+          {translateBuilder(BUILDER.ITEM_TAGS_TITLE)}
+        </Typography>
+        <Typography variant="body1">
+          {translateBuilder(BUILDER.ITEM_TAGS_INFORMATION)}
+        </Typography>
+      </Box>
       <Stack direction="row" alignItems="center" spacing={1}>
         <Stack flexGrow={1}>
           <TextField
@@ -76,9 +71,9 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
             defaultValue={displayValues}
             onChange={handleChange}
             id={ITEM_TAGS_EDIT_INPUT_ID}
-            sx={{ mt: 1, mb: 1 }}
             disabled={disabled}
             fullWidth
+            size="small"
             placeholder={translateBuilder(BUILDER.ITEM_TAGS_PLACEHOLDER)}
           />
         </Stack>
@@ -108,7 +103,7 @@ const CustomizedTagsEdit = ({ item, disabled }: Props): JSX.Element => {
           </Stack>
         </>
       )}
-    </>
+    </Stack>
   );
 };
 
diff --git a/src/components/item/settings/AdminChatSettings.tsx b/src/components/item/settings/AdminChatSettings.tsx
index da828c491..9910f0212 100644
--- a/src/components/item/settings/AdminChatSettings.tsx
+++ b/src/components/item/settings/AdminChatSettings.tsx
@@ -1,14 +1,12 @@
-import { Stack, Typography } from '@mui/material';
-
 import { DiscriminatedItem, PermissionLevel } from '@graasp/sdk';
 
 import { useBuilderTranslation } from '@/config/i18n';
 import { BUILDER } from '@/langs/constants';
 
-import { hooks, mutations } from '../../../config/queryClient';
-import { ButtonVariants } from '../../../enums';
+import { hooks } from '../../../config/queryClient';
 import { useCurrentUserContext } from '../../context/CurrentUserContext';
 import ClearChatButton from './ClearChatButton';
+import ItemSettingProperty from './ItemSettingProperty';
 
 type Props = {
   item: DiscriminatedItem;
@@ -25,23 +23,17 @@ const AdminChatSettings = ({ item }: Props): JSX.Element | null => {
     ? itemPermissions?.find((perms) => perms.member.id === currentMember.id)
         ?.permission === PermissionLevel.Admin
     : false;
-  const { mutate: clearChatHook } = mutations.useClearItemChat();
 
   if (!isAdmin || isLoadingItemPermissions) {
     return null;
   }
 
   return (
-    <Stack direction="column" spacing={1} mt={1}>
-      <Typography variant="h6">
-        {t(BUILDER.ITEM_SETTINGS_CHAT_SETTINGS_TITLE)}
-      </Typography>
-      <ClearChatButton
-        variant={ButtonVariants.Button}
-        chatId={itemId}
-        clearChat={clearChatHook}
-      />
-    </Stack>
+    <ItemSettingProperty
+      title={t(BUILDER.ITEM_SETTINGS_CHAT_SETTINGS_TITLE)}
+      valueText={t(BUILDER.ITEM_SETTINGS_CLEAR_CHAT_EXPLANATION)}
+      inputSetting={<ClearChatButton chatId={itemId} />}
+    />
   );
 };
 
diff --git a/src/components/item/settings/ClearChatButton.tsx b/src/components/item/settings/ClearChatButton.tsx
index e7cd5292d..8e54b2711 100644
--- a/src/components/item/settings/ClearChatButton.tsx
+++ b/src/components/item/settings/ClearChatButton.tsx
@@ -7,15 +7,14 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
-  IconButton,
   Stack,
-  Tooltip,
   Typography,
 } from '@mui/material';
 
 import { CHATBOX } from '@graasp/translations';
 import { Button } from '@graasp/ui';
 
+import { mutations } from '@/config/queryClient';
 import { BUILDER } from '@/langs/constants';
 
 import {
@@ -28,49 +27,25 @@ import {
   CLEAR_CHAT_DIALOG_ID,
   CLEAR_CHAT_SETTING_ID,
 } from '../../../config/selectors';
-import { ButtonVariants } from '../../../enums';
 
 type Props = {
   chatId: string;
-  clearChat?: (chatId: string) => void;
-  variant: ButtonVariants;
 };
 
-const ClearChatButton = ({
-  chatId,
-  clearChat,
-  variant = ButtonVariants.Button,
-}: Props): JSX.Element | null => {
+const ClearChatButton = ({ chatId }: Props): JSX.Element | null => {
   const [openConfirmation, setOpenConfirmation] = useState(false);
   const { t } = useChatboxTranslation();
   const { t: translateBuilder } = useBuilderTranslation();
-
-  if (!clearChat) {
-    return null;
-  }
+  const { mutate: clearChat } = mutations.useClearItemChat();
 
   const handleClearChat = () => {
     clearChat(chatId);
   };
 
-  const getContent = (contentType: ButtonVariants) => {
-    const text = t(CHATBOX.CLEAR_ALL_CHAT);
-
-    switch (contentType) {
-      case ButtonVariants.IconButton:
-        return (
-          <Tooltip title={text}>
-            <IconButton
-              id={CLEAR_CHAT_SETTING_ID}
-              onClick={() => setOpenConfirmation(true)}
-            >
-              <DeleteForever color="primary" />
-            </IconButton>
-          </Tooltip>
-        );
-      case ButtonVariants.Button:
-      default:
-        return (
+  return (
+    <>
+      <Stack direction="column" spacing={2}>
+        <Box width="max-content">
           <Button
             id={CLEAR_CHAT_SETTING_ID}
             startIcon={<DeleteForever />}
@@ -78,19 +53,9 @@ const ClearChatButton = ({
             color="error"
             onClick={() => setOpenConfirmation(true)}
           >
-            <Typography noWrap>{text}</Typography>
+            <Typography noWrap>{t(CHATBOX.CLEAR_ALL_CHAT)}</Typography>
           </Button>
-        );
-    }
-  };
-
-  return (
-    <>
-      <Stack direction="column" spacing={2}>
-        <Typography variant="body1" maxWidth="50ch">
-          {translateBuilder(BUILDER.ITEM_SETTINGS_CLEAR_CHAT_EXPLANATION)}
-        </Typography>
-        <Box width="max-content">{getContent(variant)}</Box>
+        </Box>
       </Stack>
       <Dialog open={openConfirmation} id={CLEAR_CHAT_DIALOG_ID}>
         <DialogTitle>{t(CHATBOX.CLEAR_ALL_CHAT_TITLE)}</DialogTitle>
diff --git a/src/components/item/settings/FileSettings.tsx b/src/components/item/settings/FileSettings.tsx
index 1a10bd42d..64c3fb430 100644
--- a/src/components/item/settings/FileSettings.tsx
+++ b/src/components/item/settings/FileSettings.tsx
@@ -1,13 +1,17 @@
-import { Box, SelectChangeEvent, Stack, Typography } from '@mui/material';
+import { SelectChangeEvent } from '@mui/material';
 
 import { LocalFileItemType, MaxWidth, S3FileItemType } from '@graasp/sdk';
 import { Select } from '@graasp/ui';
 
+import { Expand as ExpandIcon } from 'lucide-react';
+
 import { useBuilderTranslation, useEnumsTranslation } from '@/config/i18n';
 import { mutations } from '@/config/queryClient';
 import { FILE_SETTING_MAX_WIDTH_ID } from '@/config/selectors';
 import { BUILDER } from '@/langs/constants';
 
+import ItemSettingProperty from './ItemSettingProperty';
+
 const FileSettings = ({
   item,
 }: {
@@ -25,30 +29,23 @@ const FileSettings = ({
   };
 
   return (
-    <Box mt={4} my={4}>
-      <Typography variant="h6" m={0} p={0}>
-        {translateBuilder(BUILDER.SETTINGS_FILE_SETTINGS_TITLE)}
-      </Typography>
-      <Stack direction="row" spacing={2} alignItems="center">
-        <Stack>
-          <Typography variant="body1">
-            {translateBuilder('Maximum width')}
-          </Typography>
-        </Stack>
-        <Stack>
-          <Select
-            id={FILE_SETTING_MAX_WIDTH_ID}
-            size="small"
-            values={Object.values(MaxWidth).map((s) => ({
-              text: translateEnum(s),
-              value: s,
-            }))}
-            onChange={onChange}
-            defaultValue={item.settings.maxWidth || MaxWidth.ExtraLarge}
-          />
-        </Stack>
-      </Stack>
-    </Box>
+    <ItemSettingProperty
+      title={translateBuilder(BUILDER.SETTINGS_MAX_WIDTH_LABEL)}
+      valueText={translateBuilder(BUILDER.SETTINGS_MAX_WIDTH_LABEL)}
+      icon={<ExpandIcon />}
+      inputSetting={
+        <Select
+          id={FILE_SETTING_MAX_WIDTH_ID}
+          size="small"
+          values={Object.values(MaxWidth).map((s) => ({
+            text: translateEnum(s),
+            value: s,
+          }))}
+          onChange={onChange}
+          defaultValue={item.settings.maxWidth || MaxWidth.ExtraLarge}
+        />
+      }
+    />
   );
 };
 
diff --git a/src/components/item/settings/GeolocationPicker.tsx b/src/components/item/settings/GeolocationPicker.tsx
index 69b05c1d4..3edfe7c70 100644
--- a/src/components/item/settings/GeolocationPicker.tsx
+++ b/src/components/item/settings/GeolocationPicker.tsx
@@ -1,5 +1,5 @@
 import Clear from '@mui/icons-material/Clear';
-import { IconButton, Stack, Tooltip, Typography } from '@mui/material';
+import { Box, IconButton, Stack, Tooltip, Typography } from '@mui/material';
 
 import {
   type GeolocationPickerProps,
@@ -50,40 +50,34 @@ const GeolocationPicker = ({
   const isDisabled = Boolean(geoloc && geoloc?.item?.id !== item.id);
 
   return (
-    <>
-      <Stack mt={2} gap={2}>
-        <Stack>
-          <Typography variant="h6">
-            {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_TITLE)}
-          </Typography>
-          <Typography variant="subtitle1">
-            {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_EXPLANATION)}
-          </Typography>
-        </Stack>
-        <Stack direction="row" alignItems="center">
-          <Stack flexGrow={1}>
-            <MapGeolocationPicker
-              onChangeOption={onChangeOption}
-              initialValue={geoloc?.addressLabel ?? undefined}
-              useSuggestionsForAddress={hooks.useSuggestionsForAddress}
-            />
-          </Stack>
-          <Stack>
-            <Tooltip title={t(BUILDER.ITEM_SETTINGS_CLEAR_GEOLOCATION)}>
-              <IconButton onClick={clearGeoloc}>
-                <Clear />
-              </IconButton>
-            </Tooltip>
-          </Stack>
-        </Stack>
-        {isDisabled && (
-          <Typography variant="caption">
-            {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_INHERITED_EXPLANATION)}
-          </Typography>
-        )}
+    <Stack gap={1}>
+      <Box>
+        <Typography variant="h4">
+          {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_TITLE)}
+        </Typography>
+        <Typography variant="body1">
+          {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_EXPLANATION)}
+        </Typography>
+      </Box>
+      <Stack direction="row" alignItems="center">
+        <MapGeolocationPicker
+          onChangeOption={onChangeOption}
+          initialValue={geoloc?.addressLabel ?? undefined}
+          useSuggestionsForAddress={hooks.useSuggestionsForAddress}
+        />
+        <Tooltip title={t(BUILDER.ITEM_SETTINGS_GEOLOCATION_CLEAR)}>
+          <IconButton onClick={clearGeoloc}>
+            <Clear />
+          </IconButton>
+        </Tooltip>
       </Stack>
+      {isDisabled && (
+        <Typography variant="caption">
+          {t(BUILDER.ITEM_SETTINGS_GEOLOCATION_INHERITED_EXPLANATION)}
+        </Typography>
+      )}
       <GeolocationModalButton item={item} />
-    </>
+    </Stack>
   );
 };
 
diff --git a/src/components/item/settings/ItemLicenseSettings.tsx b/src/components/item/settings/ItemLicenseSettings.tsx
index 44c65c38f..77b61b8fb 100644
--- a/src/components/item/settings/ItemLicenseSettings.tsx
+++ b/src/components/item/settings/ItemLicenseSettings.tsx
@@ -1,18 +1,17 @@
 import { useMemo, useState } from 'react';
-import { useOutletContext } from 'react-router-dom';
+import { Link, useOutletContext } from 'react-router-dom';
 
-import { Help } from '@mui/icons-material';
-import { Box, IconButton, Stack, Tooltip, Typography } from '@mui/material';
-
-import { redirect } from '@graasp/sdk';
 import { Button, CCSharingVariant, CreativeCommons } from '@graasp/ui';
 
+import { CreativeCommons as CCLicenseIcon } from 'lucide-react';
+
 import { OutletType } from '@/components/pages/item/type';
 import { CC_LICENSE_ABOUT_URL } from '@/config/constants';
 import { useBuilderTranslation } from '@/config/i18n';
 import { BUILDER } from '@/langs/constants';
 import { convertLicense } from '@/utils/itemLicense';
 
+import ItemSettingProperty from './ItemSettingProperty';
 import UpdateLicenseDialog from './UpdateLicenseDialog';
 
 const ItemLicenseSettings = (): JSX.Element => {
@@ -21,11 +20,6 @@ const ItemLicenseSettings = (): JSX.Element => {
 
   const { item } = useOutletContext<OutletType>();
 
-  const handleClick = () => {
-    const url = CC_LICENSE_ABOUT_URL;
-    redirect(window, url, { openInNewTab: true });
-  };
-
   const { allowSharing, allowCommercialUse, requireAccreditation } = useMemo(
     () => convertLicense(item.settings.ccLicenseAdaption ?? ''),
     [item.settings.ccLicenseAdaption],
@@ -33,37 +27,37 @@ const ItemLicenseSettings = (): JSX.Element => {
 
   return (
     <>
-      <Stack direction="row" justifyContent="space-between" alignItems="center">
-        <Box>
-          <Typography variant="h6" display="flex" alignItems="center">
-            {translateBuilder(BUILDER.ITEM_SETTINGS_CC_LICENSE_TITLE)}
-            <Tooltip
-              title={translateBuilder(
-                BUILDER.ITEM_SETTINGS_CC_LICENSE_MORE_INFORMATIONS,
-              )}
-              arrow
-            >
-              <span>
-                <IconButton aria-label="info" onClick={handleClick}>
-                  <Help />
-                </IconButton>
-              </span>
-            </Tooltip>
-          </Typography>
-          {item.settings?.ccLicenseAdaption && (
-            <Box display="flex" justifyContent="left">
-              <CreativeCommons
-                requireAccreditation={requireAccreditation}
-                allowSharedAdaptation={allowSharing as CCSharingVariant}
-                allowCommercialUse={allowCommercialUse}
-              />
-            </Box>
-          )}
-        </Box>
-        <Button variant="outlined" onClick={() => setLicenseDialogOpen(true)}>
-          {translateBuilder(BUILDER.UPDATE_LICENSE)}
-        </Button>
-      </Stack>
+      <ItemSettingProperty
+        title={translateBuilder(BUILDER.ITEM_SETTINGS_CC_LICENSE_TITLE)}
+        icon={<CCLicenseIcon />}
+        inputSetting={
+          <Button variant="outlined" onClick={() => setLicenseDialogOpen(true)}>
+            {translateBuilder(BUILDER.UPDATE_LICENSE)}
+          </Button>
+        }
+        valueText={
+          <Link to={CC_LICENSE_ABOUT_URL}>
+            {translateBuilder(
+              BUILDER.ITEM_SETTINGS_CC_LICENSE_MORE_INFORMATIONS,
+            )}
+          </Link>
+        }
+        additionalInfo={
+          item.settings?.ccLicenseAdaption && (
+            <CreativeCommons
+              sx={{
+                border: '1px solid #bbb',
+                borderRadius: 2,
+                backgroundColor: 'white',
+              }}
+              requireAccreditation={requireAccreditation}
+              allowSharedAdaptation={allowSharing as CCSharingVariant}
+              allowCommercialUse={allowCommercialUse}
+              iconSize={30}
+            />
+          )
+        }
+      />
       <UpdateLicenseDialog
         open={licenseDialogOpen}
         setOpen={setLicenseDialogOpen}
diff --git a/src/components/item/settings/ItemMetadataContent.tsx b/src/components/item/settings/ItemMetadataContent.tsx
index ad7d97a18..360f5d5df 100644
--- a/src/components/item/settings/ItemMetadataContent.tsx
+++ b/src/components/item/settings/ItemMetadataContent.tsx
@@ -1,5 +1,6 @@
 import { useOutletContext } from 'react-router-dom';
 
+import { Box } from '@mui/material';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -10,6 +11,7 @@ import Typography from '@mui/material/Typography';
 import {
   ItemType,
   formatDate,
+  formatFileSize,
   getFileExtra,
   getS3FileExtra,
 } from '@graasp/sdk';
@@ -27,7 +29,6 @@ import {
 import { BUILDER } from '../../../langs/constants';
 import { OutletType } from '../../pages/item/type';
 import LanguageSelect from './LanguageSelect';
-import ThumbnailSetting from './ThumbnailSetting';
 
 const { useMember } = hooks;
 
@@ -69,10 +70,8 @@ const ItemMetadataContent = (): JSX.Element => {
   };
 
   return (
-    <>
-      <ThumbnailSetting item={item} />
-
-      <TableContainer sx={{ p: 2, boxSizing: 'border-box' }}>
+    <Box>
+      <TableContainer sx={{ boxSizing: 'border-box' }}>
         <Typography variant="h5" id={ITEM_PANEL_NAME_ID} noWrap>
           {item.name}
         </Typography>
@@ -93,7 +92,7 @@ const ItemMetadataContent = (): JSX.Element => {
                 <TableCell component="th" scope="row">
                   {translateBuilder(BUILDER.ITEM_METADATA_SIZE_TITLE)}
                 </TableCell>
-                <TableCell align="right">{size}</TableCell>
+                <TableCell align="right">{formatFileSize(size)}</TableCell>
               </TableRow>
             )}
             <TableRow>
@@ -136,7 +135,7 @@ const ItemMetadataContent = (): JSX.Element => {
           </TableBody>
         </Table>
       </TableContainer>
-    </>
+    </Box>
   );
 };
 
diff --git a/src/components/item/settings/ItemSettingProperty.tsx b/src/components/item/settings/ItemSettingProperty.tsx
index 69c1a6a99..124d2ae90 100644
--- a/src/components/item/settings/ItemSettingProperty.tsx
+++ b/src/components/item/settings/ItemSettingProperty.tsx
@@ -2,9 +2,10 @@ import { Stack, Typography } from '@mui/material';
 
 type Props = {
   title: string;
-  valueText?: string;
+  valueText?: string | JSX.Element;
   inputSetting: JSX.Element;
   icon?: JSX.Element;
+  additionalInfo?: JSX.Element;
 };
 
 const ItemSettingProperty = ({
@@ -12,29 +13,26 @@ const ItemSettingProperty = ({
   valueText,
   inputSetting,
   icon,
+  additionalInfo,
 }: Props): JSX.Element => (
-  <Stack
-    direction="row"
-    alignItems="center"
-    justifyContent="space-between"
-    pb={1}
-  >
-    <Stack direction="row" alignItems="center" gap={1}>
-      <Stack>{icon}</Stack>
-      <Stack>
-        <Stack>
-          <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
+  <Stack>
+    <Stack direction="row" alignItems="center" justifyContent="space-between">
+      <Stack direction="row" alignItems="center" gap={1}>
+        {icon}
+        <Stack direction="column">
+          <Typography variant="body1" fontWeight="bold">
             {title}
           </Typography>
+          {valueText && (
+            <Typography variant="body2" maxWidth="50ch">
+              {valueText}
+            </Typography>
+          )}
         </Stack>
-        {valueText && (
-          <Stack>
-            <Typography variant="body2">{valueText}</Typography>
-          </Stack>
-        )}
       </Stack>
+      {inputSetting}
     </Stack>
-    <Stack>{inputSetting}</Stack>
+    {additionalInfo}
   </Stack>
 );
 
diff --git a/src/components/item/settings/ItemSettings.tsx b/src/components/item/settings/ItemSettings.tsx
index 520aa6e44..a211b87ca 100644
--- a/src/components/item/settings/ItemSettings.tsx
+++ b/src/components/item/settings/ItemSettings.tsx
@@ -1,5 +1,6 @@
 import { useOutletContext } from 'react-router-dom';
 
+import { Stack } from '@mui/material';
 import Container from '@mui/material/Container';
 
 import { OutletType } from '@/components/pages/item/type';
@@ -10,22 +11,22 @@ import GeolocationPicker from './GeolocationPicker';
 import ItemLicenseSettings from './ItemLicenseSettings';
 import ItemMetadataContent from './ItemMetadataContent';
 import ItemSettingsProperties from './ItemSettingsProperties';
+import ThumbnailSetting from './ThumbnailSetting';
 
 const ItemSettings = (): JSX.Element => {
   const { item } = useOutletContext<OutletType>();
 
   return (
     <Container disableGutters sx={{ mt: 2, mb: 4 }}>
-      <ItemMetadataContent />
-      <CustomizedTagsEdit item={item} />
-
-      <GeolocationPicker item={item} />
-
-      <ItemSettingsProperties item={item} />
-
-      <ItemLicenseSettings />
-
-      <AdminChatSettings item={item} />
+      <Stack gap={2}>
+        <ThumbnailSetting item={item} />
+        <ItemMetadataContent />
+        <CustomizedTagsEdit item={item} />
+        <GeolocationPicker item={item} />
+        <ItemSettingsProperties item={item} />
+        <AdminChatSettings item={item} />
+        <ItemLicenseSettings />
+      </Stack>
     </Container>
   );
 };
diff --git a/src/components/item/settings/ItemSettingsProperties.tsx b/src/components/item/settings/ItemSettingsProperties.tsx
index 5da84aad6..a70964381 100644
--- a/src/components/item/settings/ItemSettingsProperties.tsx
+++ b/src/components/item/settings/ItemSettingsProperties.tsx
@@ -1,7 +1,9 @@
-import { Typography } from '@mui/material';
+import { Stack } from '@mui/material';
 
 import { DiscriminatedItem, ItemType } from '@graasp/sdk';
-import { ActionButton, ChatboxButton, PinButton } from '@graasp/ui';
+import { ActionButton, PinButton } from '@graasp/ui';
+
+import { BarChart3, MessageSquareOff, MessageSquareText } from 'lucide-react';
 
 import CollapseButton from '@/components/common/CollapseButton';
 import {
@@ -89,10 +91,7 @@ const ItemSettingsProperties = ({ item }: Props): JSX.Element => {
   };
 
   return (
-    <>
-      <Typography variant="h6" mt={3}>
-        {translateBuilder(BUILDER.SETTINGS_TITLE)}
-      </Typography>
+    <Stack direction="column" gap={2}>
       <ItemSettingCheckBoxProperty
         title={translateBuilder(BUILDER.ITEM_SETTINGS_IS_COLLAPSED_TITLE)}
         icon={<CollapseButton type={ActionButton.ICON} item={item} />}
@@ -136,14 +135,11 @@ const ItemSettingsProperties = ({ item }: Props): JSX.Element => {
       />
 
       <ItemSettingCheckBoxProperty
-        icon={
-          <ChatboxButton
-            showChat={Boolean(settings.showChatbox)}
-            type={ActionButton.ICON}
-          />
-        }
         id={SETTINGS_CHATBOX_TOGGLE_ID}
         title={translateBuilder(BUILDER.ITEM_SETTINGS_SHOW_CHAT_TITLE)}
+        icon={
+          settings.showChatbox ? <MessageSquareText /> : <MessageSquareOff />
+        }
         checked={Boolean(settings.showChatbox)}
         onClick={(checked: boolean): void => {
           handleOnToggle({ target: { checked } }, 'showChatbox');
@@ -157,6 +153,7 @@ const ItemSettingsProperties = ({ item }: Props): JSX.Element => {
       <ItemSettingCheckBoxProperty
         id={SETTINGS_SAVE_ACTIONS_TOGGLE_ID}
         title={translateBuilder(BUILDER.SETTINGS_SAVE_ACTIONS)}
+        icon={<BarChart3 />}
         checked={Boolean(
           settings?.enableSaveActions ?? DEFAULT_SAVE_ACTIONS_SETTING,
         )}
@@ -178,7 +175,7 @@ const ItemSettingsProperties = ({ item }: Props): JSX.Element => {
           }
         />
       )}
-    </>
+    </Stack>
   );
 };
 
diff --git a/src/components/item/settings/LanguageSelect.tsx b/src/components/item/settings/LanguageSelect.tsx
index 0566039c8..c9e0dcff5 100644
--- a/src/components/item/settings/LanguageSelect.tsx
+++ b/src/components/item/settings/LanguageSelect.tsx
@@ -34,6 +34,7 @@ const LanguageSelect = ({ item }: { item: DiscriminatedItem }): JSX.Element => {
       size="small"
       values={values}
       value={item.lang}
+      sx={{ fontSize: '14px' }}
       onChange={onChange}
     />
   );
diff --git a/src/components/main/ItemCard.tsx b/src/components/main/ItemCard.tsx
index e0ccd1803..960023c32 100644
--- a/src/components/main/ItemCard.tsx
+++ b/src/components/main/ItemCard.tsx
@@ -1,6 +1,8 @@
 import { CSSProperties, PropsWithChildren } from 'react';
 import { Link } from 'react-router-dom';
 
+import { Box } from '@mui/material';
+
 import {
   DiscriminatedItem,
   ItemMembership,
@@ -9,7 +11,7 @@ import {
   PermissionLevelCompare,
   ThumbnailSize,
 } from '@graasp/sdk';
-import { Card as GraaspCard, Thumbnail } from '@graasp/ui';
+import { Card as GraaspCard, ItemIcon, Thumbnail } from '@graasp/ui';
 
 import truncate from 'lodash.truncate';
 
@@ -19,7 +21,6 @@ import { DESCRIPTION_MAX_LENGTH } from '../../config/constants';
 import { buildItemPath } from '../../config/paths';
 import { hooks } from '../../config/queryClient';
 import { buildItemCard, buildItemLink } from '../../config/selectors';
-import defaultImage from '../../resources/avatar.png';
 import { stripHtml } from '../../utils/item';
 import BookmarkButton from '../common/BookmarkButton';
 import EditButton from '../common/EditButton';
@@ -60,15 +61,20 @@ const ItemComponent = ({
 
   const alt = name;
   const defaultValueComponent = (
-    <img
-      style={{
-        width: '100%',
-        height: '100%',
-        objectFit: 'cover',
-      }}
-      src={defaultImage}
-      alt={alt}
-    />
+    <Box
+      height="100%"
+      width="100%"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      bgcolor="#E4DFFF"
+    >
+      <ItemIcon
+        sx={{ fontSize: '3rem', color: '#5050D1' }}
+        type={item.type}
+        alt={item.name}
+      />
+    </Box>
   );
 
   const linkUrl =
@@ -114,6 +120,7 @@ const ItemComponent = ({
       description={truncate(stripHtml(item.description || ''), {
         length: DESCRIPTION_MAX_LENGTH,
       })}
+      fullWidth
       Actions={Actions}
       Badges={<Badges data={item} />}
       name={item.name}
diff --git a/src/components/main/ItemsToolbar.tsx b/src/components/main/ItemsToolbar.tsx
index 382baf078..6cb05f205 100644
--- a/src/components/main/ItemsToolbar.tsx
+++ b/src/components/main/ItemsToolbar.tsx
@@ -3,6 +3,7 @@ import { FormControlLabel, Stack, Switch, Typography } from '@mui/material';
 import { useBuilderTranslation } from '@/config/i18n';
 import { ACCESSIBLE_ITEMS_ONLY_ME_ID } from '@/config/selectors';
 import { ShowOnlyMeChangeType } from '@/config/types';
+import { BUILDER } from '@/langs/constants';
 
 import SelectTypes from '../common/SelectTypes';
 
@@ -49,7 +50,7 @@ const ItemsToolbar = ({
                 onChange={(_, checked) => onShowOnlyMeChange(checked)}
               />
             }
-            label={t('Show only created by me')}
+            label={t(BUILDER.HOME_SHOW_ONLY_CREATED_BY_ME)}
           />
         )}
         <SelectTypes />
diff --git a/src/components/main/NewItemButton.tsx b/src/components/main/NewItemButton.tsx
index 52f7cc4f5..38b122b3c 100644
--- a/src/components/main/NewItemButton.tsx
+++ b/src/components/main/NewItemButton.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 
 import { Add } from '@mui/icons-material';
-import { Tooltip } from '@mui/material';
 
 import { Button } from '@graasp/ui';
 
@@ -24,18 +23,10 @@ const NewItemButton = (): JSX.Element => {
 
   return (
     <>
-      <Tooltip
-        placement="left"
-        title={translateBuilder(BUILDER.NEW_ITEM_BUTTON)}
-        arrow
-      >
-        <span>
-          <Button id={CREATE_ITEM_BUTTON_ID} onClick={handleClickOpen}>
-            <Add />
-            {translateBuilder(BUILDER.NEW_ITEM_BUTTON)}
-          </Button>
-        </span>
-      </Tooltip>
+      <Button id={CREATE_ITEM_BUTTON_ID} onClick={handleClickOpen}>
+        <Add />
+        {translateBuilder(BUILDER.NEW_ITEM_BUTTON)}
+      </Button>
       <NewItemModal open={open} handleClose={handleClose} />
     </>
   );
diff --git a/src/config/constants.ts b/src/config/constants.ts
index fa885a45a..bb9cdb086 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -95,9 +95,8 @@ export const GRAASP_LOGO_HEADER_HEIGHT = 40;
 export const ITEMS_TABLE_CONTAINER_HEIGHT = '65vh';
 
 export const THUMBNAIL_ASPECT = 1;
-export const THUMBNAIL_EXTENSION = 'image/jpeg';
-export const THUMBNAIL_SETTING_MAX_WIDTH = 200;
-export const THUMBNAIL_SETTING_MAX_HEIGHT = 200;
+export const THUMBNAIL_SETTING_MAX_WIDTH = 256;
+export const THUMBNAIL_SETTING_MAX_HEIGHT = 256;
 
 export const H5P_FILE_DOT_EXTENSION = '.h5p';
 
@@ -149,4 +148,4 @@ export const SHORT_LINK_ID_MAX_LENGTH = 10;
 export const SHORT_LINK_API_CALL_DEBOUNCE_MS = 500;
 
 // todo: to remove once we dynamically compute how many items we display
-export const ITEM_PAGE_SIZE = 10;
+export const ITEM_PAGE_SIZE = 12;
diff --git a/src/config/selectors.ts b/src/config/selectors.ts
index 35ca829b5..9ebaf2974 100644
--- a/src/config/selectors.ts
+++ b/src/config/selectors.ts
@@ -127,7 +127,7 @@ export const FLAVOR_SELECT_ID = 'flavorSelect';
 
 export const REDIRECTION_CONTENT_ID = 'redirectionContent';
 export const ITEM_MEMBERSHIPS_CONTENT_ID = 'itemMembershipsContent';
-export const buildMemberAvatarClass = (id?: string): string =>
+export const buildMemberAvatarId = (id?: string): string =>
   `memberAvatar-${id}`;
 export const buildItemMembershipRowId = (id: string): string =>
   `itemMembershipRow-${id}`;
diff --git a/src/langs/ar.json b/src/langs/ar.json
index 49dff0342..fbf4d4fcd 100644
--- a/src/langs/ar.json
+++ b/src/langs/ar.json
@@ -102,7 +102,6 @@
   "ITEM_SETTINGS_CC_LICENSE_LABEL": "رخصة المشاع الإبداعي",
   "ITEM_SETTINGS_CC_LICENSE_MODAL_CONTENT": "يرجى التحقق من أن العنصر الخاص بك يتناسب مع رخصة المشاع الإبداعي، ولا تقم بالتغيير إلى خيار أكثر تقييدًا.",
   "ITEM_SETTINGS_CC_LICENSE_MODAL_TITLE": "ثبّت تقديمك",
-  "ITEM_SETTINGS_CC_LICENSE_MORE_INFORMATIONS": "بحاجة الى مزيد من المعلومات حول رخصة المشاع الإبداعي؟ انقر هنا!",
   "ITEM_SETTINGS_CC_LICENSE_NONE_LABEL": "لا شَيْء",
   "ITEM_SETTINGS_CC_LICENSE_PREVIEW_TITLE": "معاينة الرمز",
   "ITEM_SETTINGS_CC_LICENSE_SUBMIT_BUTTON": "تقديم",
@@ -262,7 +261,6 @@
   "APP_URL": "رابط التطبيق",
   "CREATE_CUSTOM_APP": "أنشيء تطبيقاً خاصاً",
   "CREATE_CUSTOM_APP_DESCRIPTION": "خيار متقدم لإنشاء تطبيق مخصص",
-  "BACK_TO_APP_LIST": "الرجوع إلى قائمة التطبيقات",
   "DOWNGRADE_PERMISSION_TITLE": "خفض مستوى الإذن الخاص بك",
   "DOWNGRADE_PERMISSION_DESCRIPTION": "هل أنت متأكد من خفض الإذن الخاص بك؟ لا يمكنك التراجع عن هذه العملية",
   "CREATE_NEW_APP_BACK_TO_APP_LIST_BUTTON": "الرجوع إلى قائمة التطبيقات",
diff --git a/src/langs/constants.ts b/src/langs/constants.ts
index 3c0a9a413..d496dd3d7 100644
--- a/src/langs/constants.ts
+++ b/src/langs/constants.ts
@@ -5,6 +5,7 @@ export const BUILDER = {
   ACCESS_PUBLIC_TAG_TOOLTIP: 'ACCESS_PUBLIC_TAG_TOOLTIP',
   ACCESS_PUBLIC_TAG: 'ACCESS_PUBLIC_TAG',
   ACCESS_TITLE: 'ACCESS_TITLE',
+  HOME_SHOW_ONLY_CREATED_BY_ME: 'HOME_SHOW_ONLY_CREATED_BY_ME',
   ANALYTICS_DASHBOARD_LABEL: 'ANALYTICS_DASHBOARD_LABEL',
   AVATAR_DEFAULT_ALT: 'AVATAR_DEFAULT_ALT',
   COLLAPSE_ITEM_COLLAPSE_TEXT: 'COLLAPSE_ITEM_COLLAPSE_TEXT',
@@ -107,6 +108,7 @@ export const BUILDER = {
   SETTINGS_PIN_ITEM_LABEL: 'SETTINGS_PIN_ITEM_LABEL',
   SETTINGS_SHOW_CHAT_LABEL: 'SETTINGS_SHOW_CHAT_LABEL',
   SETTINGS_RESIZE_LABEL: 'SETTINGS_RESIZE_LABEL',
+  SETTINGS_MAX_WIDTH_LABEL: 'SETTINGS_MAX_WIDTH_LABEL',
   SETTINGS_TITLE: 'SETTINGS_TITLE',
   SETTINGS_COLLAPSE_FOLDER_INFORMATION: 'SETTINGS_COLLAPSE_FOLDER_INFORMATION',
 
@@ -276,6 +278,7 @@ export const BUILDER = {
   NAVIGATION_SHARED_ITEMS_TITLE: 'NAVIGATION_SHARED_ITEMS_TITLE',
   NEW_ITEM_APP_TAB_TEXT: 'NEW_ITEM_APP_TAB_TEXT',
   NEW_ITEM_BUTTON_TOOLTIP: 'NEW_ITEM_BUTTON_TOOLTIP',
+  NEW_ITEM_BUTTON_HELPER_TEXT: 'NEW_ITEM_BUTTON_HELPER_TEXT',
   NEW_ITEM_BUTTON: 'NEW_ITEM_BUTTON',
   NEW_ITEM_DOCUMENT_TAB_TEXT: 'NEW_ITEM_DOCUMENT_TAB_TEXT',
   NEW_ITEM_ETHERPAD_TAB_TEXT: 'NEW_ITEM_ETHERPAD_TAB_TEXT',
@@ -344,9 +347,9 @@ export const BUILDER = {
   DELETE_LAST_ADMIN_ALERT_MESSAGE: 'DELETE_LAST_ADMIN_ALERT_MESSAGE',
   APPROVE_BUTTON_TEXT: 'APPROVE_BUTTON_TEXT',
   APP_URL: 'APP_URL',
+  CREATE_APP_SEARCH_FIELD_HELPER: 'CREATE_APP_SEARCH_FIELD_HELPER',
   CREATE_CUSTOM_APP: 'CREATE_CUSTOM_APP',
   CREATE_CUSTOM_APP_DESCRIPTION: 'CREATE_CUSTOM_APP_DESCRIPTION',
-  BACK_TO_APP_LIST: 'BACK_TO_APP_LIST',
   DOWNGRADE_PERMISSION_TITLE: 'DOWNGRADE_PERMISSION_TITLE',
   DOWNGRADE_PERMISSION_DESCRIPTION: 'DOWNGRADE_PERMISSION_DESCRIPTION',
   CREATE_CUSTOM_APP_HELPER_TEXT: 'CREATE_CUSTOM_APP_HELPER_TEXT',
@@ -393,7 +396,7 @@ export const BUILDER = {
     'ITEM_SETTINGS_GEOLOCATION_PLACEHOLDER',
   ITEM_SETTINGS_GEOLOCATION_NO_ADDRESS: 'ITEM_SETTINGS_GEOLOCATION_NO_ADDRESS',
   ITEM_SETTINGS_GEOLOCATION_TITLE: 'ITEM_SETTINGS_GEOLOCATION_TITLE',
-  ITEM_SETTINGS_CLEAR_GEOLOCATION: 'ITEM_SETTINGS_CLEAR_GEOLOCATION',
+  ITEM_SETTINGS_GEOLOCATION_CLEAR: 'ITEM_SETTINGS_GEOLOCATION_CLEAR',
   ITEM_SETTINGS_GEOLOCATION_EXPLANATION:
     'ITEM_SETTINGS_GEOLOCATION_EXPLANATION',
   ITEM_SETTINGS_GEOLOCATION_INHERITED_EXPLANATION:
diff --git a/src/langs/de.json b/src/langs/de.json
index 5e14f1814..f4c3b1b81 100644
--- a/src/langs/de.json
+++ b/src/langs/de.json
@@ -271,7 +271,6 @@
   "APP_URL": "App-URL",
   "CREATE_CUSTOM_APP": "Fügen Sie Ihre benutzerdefinierte App hinzu",
   "CREATE_CUSTOM_APP_DESCRIPTION": "Erweiterte Option zum Erstellen einer benutzerdefinierten App",
-  "BACK_TO_APP_LIST": "Zurück zur App-Liste",
   "DOWNGRADE_PERMISSION_TITLE": "Degradieren Sie Ihre eigene Erlaubnis",
   "DOWNGRADE_PERMISSION_DESCRIPTION": "Sind Sie sicher, dass Sie Ihre eigene Berechtigung herabstufen möchten? Sobald es erledigt ist, können Sie es nicht mehr rückgängig machen.",
   "CREATE_CUSTOM_APP_HELPER_TEXT": "Wenn Sie die URL einer interaktiven App kennen, die die API von Graasp nutzen kann, können Sie sie hier eingeben.",
diff --git a/src/langs/en.json b/src/langs/en.json
index 29d65840e..088c3cd4e 100644
--- a/src/langs/en.json
+++ b/src/langs/en.json
@@ -20,9 +20,9 @@
   "CREATE_ITEM_LINK_LABEL": "Link",
   "CREATE_ITEM_LINK_TITLE": "Add a Link",
   "CREATE_ITEM_NEW_FOLDER_TITLE": "Create a Folder",
-  "CREATE_NEW_ITEM_APP_TITLE": "Create an App",
+  "CREATE_NEW_ITEM_APP_TITLE": "Add an Application",
   "CREATE_NEW_ITEM_APP_URL_LABEL": "App URL",
-  "CREATE_NEW_ITEM_DOCUMENT_TITLE": "Add Text",
+  "CREATE_NEW_ITEM_DOCUMENT_TITLE": "Add a Text",
   "CREATE_NEW_ITEM_ETHERPAD_INFORMATIONS": "Etherpad is a collaborative real-time text editor",
   "CREATE_NEW_ITEM_ETHERPAD_LABEL": "Name",
   "CREATE_NEW_ITEM_ETHERPAD_TITLE": "Create an Etherpad",
@@ -79,9 +79,10 @@
   "HIDE_ITEM_HIDE_TEXT": "Hide",
   "HIDE_ITEM_SHOW_TEXT": "Show",
   "HOME_TITLE": "Home",
+  "HOME_SHOW_ONLY_CREATED_BY_ME": "Show only created by me",
   "IMPORT_H5P_INFORMATIONS": "You can upload H5P rich content by uploading exported .h5p files (e.g. from H5P.com, external Moodle services, etc).",
   "IMPORT_H5P_LIMITATIONS_TEXT": "You can upload up to one H5P of {{maxSize}} at a time.",
-  "IMPORT_H5P_TITLE": "Import H5P rich content",
+  "IMPORT_H5P_TITLE": "Import an H5P",
   "IMPORT_H5P_WARNING": "Once your file is accepted, it will take several minutes for all imported files to be available.",
   "IMPORT_ZIP_INFORMATION": "You can download your resources from graasp.eu by right clicking and choosing \"Download as ZIP\".",
   "IMPORT_ZIP_LIMITATIONS_TEXT": "You can upload up to one ZIP of {{maxSize}} at a time. On error, try to upload a smaller zip.",
@@ -201,13 +202,14 @@
   "NEW_ITEM_APP_TAB_TEXT": "Application",
   "NEW_ITEM_BUTTON_TOOLTIP": "Create new item",
   "NEW_ITEM_BUTTON": "New Item",
-  "NEW_ITEM_DOCUMENT_TAB_TEXT": "Add Text",
-  "NEW_ITEM_ETHERPAD_TAB_TEXT": "Create Etherpad",
-  "NEW_ITEM_FILE_TAB_TEXT": "Import File",
+  "NEW_ITEM_BUTTON_HELPER_TEXT": "Create content and add interactive elements",
+  "NEW_ITEM_DOCUMENT_TAB_TEXT": "Text",
+  "NEW_ITEM_ETHERPAD_TAB_TEXT": "Etherpad",
+  "NEW_ITEM_FILE_TAB_TEXT": "File",
   "NEW_ITEM_FOLDER_TAB_TEXT": "Folder",
-  "NEW_ITEM_H5P_TAB_TEXT": "Import H5P",
+  "NEW_ITEM_H5P_TAB_TEXT": "H5P",
   "NEW_ITEM_LINK_TAB_TEXT": "Link",
-  "NEW_ITEM_ZIP_TAB_TEXT": "Import ZIP",
+  "NEW_ITEM_ZIP_TAB_TEXT": "Archive",
   "PIN_ITEM_PIN_TEXT": "Pin this item",
   "PIN_ITEM_UNPIN_TEXT": "Unpin",
   "PLAY_BUTTON_TOOLTIP": "Show Player View",
@@ -224,6 +226,7 @@
   "SETTINGS_LINK_SHOW_IFRAME": "Show Link Iframe (some websites prevent this feature)",
   "SETTINGS_PIN_ITEM_LABEL": "Pin",
   "SETTINGS_RESIZE_LABEL": "Allow Manual Resizing",
+  "SETTINGS_MAX_WIDTH_LABEL": "Display size of the image",
   "SETTINGS_SAVE_ACTIONS": "Enable Analytics",
   "SETTINGS_SHOW_CHAT_LABEL": "Show Chat",
   "SETTINGS_THUMBNAIL_SETTINGS_INFORMATIONS": "Provide an image to update the thumbnail. You might need to refresh the page to see the changes.",
@@ -269,7 +272,7 @@
   "UPLOAD_FILE_DROP_TEXT": "Drop here or",
   "UPLOAD_FILE_INFORMATIONS": "If you drag-and-drop zip or H5P archives, or if you import as a new \"FILE\", they will be stored as such. To expand and use them, use the special \"IMPORT ZIP\" or \"IMPORT H5P\" option.",
   "UPLOAD_FILE_LIMITATIONS_TEXT": "You can upload up to {{maxFiles}} files of {{maxSize}} at a time.",
-  "UPLOAD_FILE_TITLE": "Upload a file",
+  "UPLOAD_FILE_TITLE": "Upload a File",
   "USER_SWITCH_PROFILE_BUTTON": "See Profile",
   "USER_SWITCH_SIGN_OUT_BUTTON": "Sign Out",
   "USER_SWITCH_SIGNED_OUT_TOOLTIP": "You are not signed in.",
@@ -293,8 +296,8 @@
   "APPROVE_BUTTON_TEXT": "OK",
   "APP_URL": "App Url",
   "CREATE_CUSTOM_APP": "Add Your Custom App",
+  "CREATE_APP_SEARCH_FIELD_HELPER": "Search for an app",
   "CREATE_CUSTOM_APP_DESCRIPTION": "Advanced option to create a custom app",
-  "BACK_TO_APP_LIST": "Back To App's List",
   "DOWNGRADE_PERMISSION_TITLE": "Downgrade Your Own Permission",
   "DOWNGRADE_PERMISSION_DESCRIPTION": "Are you sure you want to downgrade your own permission? Once it's done you can't undo.",
   "CREATE_CUSTOM_APP_HELPER_TEXT": "If you know the URL of an interactive app that can leverage Graasp's API you can input it here.",
@@ -338,7 +341,7 @@
   "ITEM_SETTINGS_GEOLOCATION_PLACEHOLDER": "Type your address here",
   "ITEM_SETTINGS_GEOLOCATION_NO_ADDRESS": "Cannot find this address",
   "ITEM_SETTINGS_GEOLOCATION_TITLE": "Geolocation",
-  "ITEM_SETTINGS_CLEAR_GEOLOCATION": "Clear geolocation",
+  "ITEM_SETTINGS_GEOLOCATION_CLEAR": "Clear geolocation",
   "ITEM_SETTINGS_GEOLOCATION_INHERITED_EXPLANATION": "You cannot edit the geolocation because it is inherited from a parent.",
   "ITEM_SETTINGS_GEOLOCATION_EXPLANATION": "If the item has a geolocation, it will be displayed on the Map View.",
   "ITEM_SETTINGS_CHAT_SETTINGS_TITLE": "Chat Settings",
diff --git a/src/langs/es.json b/src/langs/es.json
index 5fb4f3e04..489e1c3f5 100644
--- a/src/langs/es.json
+++ b/src/langs/es.json
@@ -271,7 +271,6 @@
   "APP_URL": "URL de la aplicación",
   "CREATE_CUSTOM_APP": "Añade tu aplicación personalizada",
   "CREATE_CUSTOM_APP_DESCRIPTION": "Opción avanzada para crear una aplicación personalizada",
-  "BACK_TO_APP_LIST": "Volver a la lista de aplicaciones",
   "DOWNGRADE_PERMISSION_TITLE": "Degradar su propio permiso",
   "DOWNGRADE_PERMISSION_DESCRIPTION": "¿Está seguro de que desea degradar su propio permiso? Una vez hecho esto no puedes deshacerlo.",
   "CREATE_CUSTOM_APP_HELPER_TEXT": "Si conoce la URL de una aplicación interactiva que puede aprovechar la API de Graasp, puede ingresarla aquí.",
diff --git a/src/langs/fr.json b/src/langs/fr.json
index a08cb5928..576d13cec 100644
--- a/src/langs/fr.json
+++ b/src/langs/fr.json
@@ -280,7 +280,6 @@
   "APP_URL": "URL de l'application",
   "CREATE_CUSTOM_APP": "Ajoutez votre application personnalisée",
   "CREATE_CUSTOM_APP_DESCRIPTION": "Option avancée pour créer une application personnalisée",
-  "BACK_TO_APP_LIST": "Retour à la liste des applications",
   "DOWNGRADE_PERMISSION_TITLE": "Rétrograder votre propre autorisation",
   "DOWNGRADE_PERMISSION_DESCRIPTION": "Êtes-vous sûr de vouloir rétrograder votre propre autorisation ? Une fois que c'est fait, vous ne pouvez plus annuler.",
   "CREATE_CUSTOM_APP_HELPER_TEXT": "Si vous connaissez l'URL d'une application interactive pouvant exploiter l'API de Graasp, vous pouvez la saisir ici.",
@@ -320,7 +319,7 @@
   "ITEM_SETTINGS_GEOLOCATION_PLACEHOLDER": "Entrer l'adresse ici",
   "ITEM_SETTINGS_GEOLOCATION_NO_ADDRESS": "Aucune adresse trouvée",
   "ITEM_SETTINGS_GEOLOCATION_TITLE": "Localisation Géographique",
-  "ITEM_SETTINGS_CLEAR_GEOLOCATION": "Supprimer la Localisation Géolocalisation",
+  "ITEM_SETTINGS_GEOLOCATION_CLEAR": "Supprimer la Géolocalisation",
   "ITEM_SETTINGS_GEOLOCATION_INHERITED_EXPLANATION": "La localisation ne peut pas être modifiée car elle a été définie dans un élément au-dessus.",
   "ITEM_SETTINGS_GEOLOCATION_EXPLANATION": "Si l'élément a une localisation géographique, il sera visible sur la Vue Carte.",
   "ITEM_SETTINGS_CHAT_SETTINGS_TITLE": "Paramètres du Chat",
diff --git a/src/langs/it.json b/src/langs/it.json
index f40dc520c..4e8c139dc 100644
--- a/src/langs/it.json
+++ b/src/langs/it.json
@@ -286,7 +286,6 @@
   "APP_URL": "URL dell'app",
   "CREATE_CUSTOM_APP": "Aggiungi la tua app personalizzata",
   "CREATE_CUSTOM_APP_DESCRIPTION": "Opzione avanzata per creare un'app personalizzata",
-  "BACK_TO_APP_LIST": "Torna all'elenco delle app",
   "DOWNGRADE_PERMISSION_TITLE": "Effettua il downgrade della tua autorizzazione",
   "DOWNGRADE_PERMISSION_DESCRIPTION": "Sei sicuro di voler eseguire il downgrade della tua autorizzazione? Una volta completato, non puoi tornare indietro",
   "CREATE_CUSTOM_APP_HELPER_TEXT": "Se conosci l'URL di un'app interattiva che può sfruttare l'API di Graasp, puoi inserirlo qui.",
@@ -330,7 +329,7 @@
   "ITEM_SETTINGS_GEOLOCATION_PLACEHOLDER": "Scrivi il tuo indirizzo qui",
   "ITEM_SETTINGS_GEOLOCATION_NO_ADDRESS": "Indirizzo non trovato",
   "ITEM_SETTINGS_GEOLOCATION_TITLE": "Geolocalizzazione",
-  "ITEM_SETTINGS_CLEAR_GEOLOCATION": "Elimina geolocalizzazione",
+  "ITEM_SETTINGS_GEOLOCATION_CLEAR": "Elimina geolocalizzazione",
   "ITEM_SETTINGS_GEOLOCATION_INHERITED_EXPLANATION": "Non puoi modificare la geolocalizzazione perché è ereditata dalla cartella principale",
   "ITEM_SETTINGS_GEOLOCATION_EXPLANATION": "Se l'elemento ha la geolocalizzazione specificata, comparrà nella mappa.",
   "ITEM_SETTINGS_CHAT_SETTINGS_TITLE": "Impostazioni Chat",
diff --git a/src/utils/image.ts b/src/utils/image.ts
deleted file mode 100644
index 266ff0bba..000000000
--- a/src/utils/image.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Crop } from 'react-image-crop';
-
-import { THUMBNAIL_EXTENSION } from '../config/constants';
-
-// eslint-disable-next-line import/prefer-default-export
-export const getCroppedImg = (
-  image: HTMLImageElement,
-  crop: Crop,
-  extension = THUMBNAIL_EXTENSION,
-): Promise<Blob> => {
-  const canvas = document.createElement('canvas');
-  const scaleX = image.naturalWidth / image.width;
-  const scaleY = image.naturalHeight / image.height;
-  const ctx = canvas.getContext('2d');
-
-  canvas.width = crop.width * scaleX;
-  canvas.height = crop.height * scaleY;
-
-  ctx?.drawImage(
-    image,
-    crop.x * scaleX,
-    crop.y * scaleY,
-    canvas.width,
-    canvas.height,
-    0,
-    0,
-    canvas.width,
-    canvas.height,
-  );
-
-  return new Promise((resolve, reject) => {
-    canvas.toBlob((blob) => {
-      if (!blob) {
-        reject(new Error('Canvas is empty'));
-        console.error('Canvas is empty');
-        return;
-      }
-      resolve(blob);
-    }, extension);
-  });
-};
diff --git a/yarn.lock b/yarn.lock
index 6254d585d..c4293c76c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1574,14 +1574,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:4.15.1":
-  version: 4.15.1
-  resolution: "@graasp/ui@npm:4.15.1"
+"@graasp/ui@npm:4.15.3":
+  version: 4.15.3
+  resolution: "@graasp/ui@npm:4.15.3"
   dependencies:
     "@ag-grid-community/client-side-row-model": "npm:31.2.1"
     "@ag-grid-community/react": "npm:^31.1.1"
     "@ag-grid-community/styles": "npm:^31.1.1"
-    "@storybook/react-vite": "npm:7.6.17"
+    "@storybook/react-vite": "npm:7.6.18"
     http-status-codes: "npm:2.3.0"
     interweave: "npm:13.1.0"
     katex: "npm:0.16.10"
@@ -1591,7 +1591,7 @@ __metadata:
     react-rnd: "npm:10.4.1"
     react-text-mask: "npm:5.5.0"
     uuid: "npm:9.0.1"
-    vitest: "npm:1.5.0"
+    vitest: "npm:1.5.2"
   peerDependencies:
     "@emotion/cache": ~11.10.7 || ~11.11.0
     "@emotion/react": ~11.10.6 || ~11.11.0
@@ -1608,7 +1608,7 @@ __metadata:
     react-router-dom: ^6.11.0
     stylis: ^4.1.3
     stylis-plugin-rtl: ^2.1.1
-  checksum: 10/204aaa5e91f884be43349ed7f95fc9374da067b6064a16e4f793d6f5094674cb81e211e8d91b15ffcbd6a402972fd3322b964c182b4a79737b9294ec2d6f835c
+  checksum: 10/94b584bd7cf09b40855b5acbf7f669284b46b0a52e92851cabf5ce270a5763574d1a0bdd5c09a81b9d8ce95ac8aa947f7d6280ecb32ed34bf572ad31f35f2d61
   languageName: node
   linkType: hard
 
@@ -2406,6 +2406,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/builder-vite@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/builder-vite@npm:7.6.18"
+  dependencies:
+    "@storybook/channels": "npm:7.6.18"
+    "@storybook/client-logger": "npm:7.6.18"
+    "@storybook/core-common": "npm:7.6.18"
+    "@storybook/csf-plugin": "npm:7.6.18"
+    "@storybook/node-logger": "npm:7.6.18"
+    "@storybook/preview": "npm:7.6.18"
+    "@storybook/preview-api": "npm:7.6.18"
+    "@storybook/types": "npm:7.6.18"
+    "@types/find-cache-dir": "npm:^3.2.1"
+    browser-assert: "npm:^1.2.1"
+    es-module-lexer: "npm:^0.9.3"
+    express: "npm:^4.17.3"
+    find-cache-dir: "npm:^3.0.0"
+    fs-extra: "npm:^11.1.0"
+    magic-string: "npm:^0.30.0"
+    rollup: "npm:^2.25.0 || ^3.3.0"
+  peerDependencies:
+    "@preact/preset-vite": "*"
+    typescript: ">= 4.3.x"
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    vite-plugin-glimmerx: "*"
+  peerDependenciesMeta:
+    "@preact/preset-vite":
+      optional: true
+    typescript:
+      optional: true
+    vite-plugin-glimmerx:
+      optional: true
+  checksum: 10/f2b9ad8a3e750646e8ef41d1dc4468765e49ce970fd5257299495e2efe301325263203bfc52f68a02b869ea6a0d2576a5284b1043d796596cca1a7244dc8b7be
+  languageName: node
+  linkType: hard
+
 "@storybook/channels@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/channels@npm:7.6.17"
@@ -2420,6 +2456,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/channels@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/channels@npm:7.6.18"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.18"
+    "@storybook/core-events": "npm:7.6.18"
+    "@storybook/global": "npm:^5.0.0"
+    qs: "npm:^6.10.0"
+    telejson: "npm:^7.2.0"
+    tiny-invariant: "npm:^1.3.1"
+  checksum: 10/bb3656b9c5f5a7aa0f2ff4fcea2ac840f4c861b1d1cf172215100506537517a9975cd6e4b8db29d61cefa2b7b9c0d3f1ecdd08e290c102f9d573643b178310bc
+  languageName: node
+  linkType: hard
+
 "@storybook/client-logger@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/client-logger@npm:7.6.17"
@@ -2429,6 +2479,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/client-logger@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/client-logger@npm:7.6.18"
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+  checksum: 10/0df63fa013a17b882061f291458b4ffd9e21957b5bca4bbac85cd4b7195ada82a7fbe6a3505df190f9b89038681c38dd45c1eed62800c090930211ce0f08ffbc
+  languageName: node
+  linkType: hard
+
 "@storybook/core-client@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/core-client@npm:7.6.17"
@@ -2439,6 +2498,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-client@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/core-client@npm:7.6.18"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.18"
+    "@storybook/preview-api": "npm:7.6.18"
+  checksum: 10/5c556280f7af6d37febd1e2cf9800ef7c3d14952e335c95674cc2e0c5eed6f753dbb4f1b58a6a9b64389c429bffdf3cb9a8f04f307448fb3b2a6c20f5aab1bcc
+  languageName: node
+  linkType: hard
+
 "@storybook/core-common@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/core-common@npm:7.6.17"
@@ -2470,6 +2539,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-common@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/core-common@npm:7.6.18"
+  dependencies:
+    "@storybook/core-events": "npm:7.6.18"
+    "@storybook/node-logger": "npm:7.6.18"
+    "@storybook/types": "npm:7.6.18"
+    "@types/find-cache-dir": "npm:^3.2.1"
+    "@types/node": "npm:^18.0.0"
+    "@types/node-fetch": "npm:^2.6.4"
+    "@types/pretty-hrtime": "npm:^1.0.0"
+    chalk: "npm:^4.1.0"
+    esbuild: "npm:^0.18.0"
+    esbuild-register: "npm:^3.5.0"
+    file-system-cache: "npm:2.3.0"
+    find-cache-dir: "npm:^3.0.0"
+    find-up: "npm:^5.0.0"
+    fs-extra: "npm:^11.1.0"
+    glob: "npm:^10.0.0"
+    handlebars: "npm:^4.7.7"
+    lazy-universal-dotenv: "npm:^4.0.0"
+    node-fetch: "npm:^2.0.0"
+    picomatch: "npm:^2.3.0"
+    pkg-dir: "npm:^5.0.0"
+    pretty-hrtime: "npm:^1.0.3"
+    resolve-from: "npm:^5.0.0"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10/fb98e8a8302ff8fa709cabc68fee30efbfd2af1eb2272ea3f1e971d0710709f682f4de6bade8cca2aadfe7082a5198cf49000ab1e7b3232854b1005b36bf708f
+  languageName: node
+  linkType: hard
+
 "@storybook/core-events@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/core-events@npm:7.6.17"
@@ -2479,6 +2579,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-events@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/core-events@npm:7.6.18"
+  dependencies:
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10/7308971a255ea911b556552aaf03b66babe30e47a281c3582665cd8ae0c70494d6cbd2997c8a41fa4b5d04ba9bf4e1415d083c653ed7d594a2deaa19d8bbc3c6
+  languageName: node
+  linkType: hard
+
 "@storybook/csf-plugin@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/csf-plugin@npm:7.6.17"
@@ -2489,6 +2598,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/csf-plugin@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/csf-plugin@npm:7.6.18"
+  dependencies:
+    "@storybook/csf-tools": "npm:7.6.18"
+    unplugin: "npm:^1.3.1"
+  checksum: 10/c20951b5f7e4412cf111c991b6ec601afada5381132ae6c53caa5ec58a8b2ea74456e043974950a46cd6a6e3c47de5cebb8ff5a6d0820f932582adb08b4ac103
+  languageName: node
+  linkType: hard
+
 "@storybook/csf-tools@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/csf-tools@npm:7.6.17"
@@ -2506,6 +2625,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/csf-tools@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/csf-tools@npm:7.6.18"
+  dependencies:
+    "@babel/generator": "npm:^7.23.0"
+    "@babel/parser": "npm:^7.23.0"
+    "@babel/traverse": "npm:^7.23.2"
+    "@babel/types": "npm:^7.23.0"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/types": "npm:7.6.18"
+    fs-extra: "npm:^11.1.0"
+    recast: "npm:^0.23.1"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 10/c5041040f9674254ffdc6c09609c16f85fa1f11c94b8a2728ab6ff948476f4a4267d8eae213571d762647a52d33406ff39d9a436ce6ae9d1556e0e3aab54811f
+  languageName: node
+  linkType: hard
+
 "@storybook/csf@npm:^0.1.2":
   version: 0.1.4
   resolution: "@storybook/csf@npm:0.1.4"
@@ -2530,6 +2666,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/docs-tools@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/docs-tools@npm:7.6.18"
+  dependencies:
+    "@storybook/core-common": "npm:7.6.18"
+    "@storybook/preview-api": "npm:7.6.18"
+    "@storybook/types": "npm:7.6.18"
+    "@types/doctrine": "npm:^0.0.3"
+    assert: "npm:^2.1.0"
+    doctrine: "npm:^3.0.0"
+    lodash: "npm:^4.17.21"
+  checksum: 10/cd3a50cfe17db233464af85e3162764ed4d24e009034034653e0fd4d2d2fe1d02b530b5a6f5a25f6575b3d19e646e07d14018ee46a5fbb6fd15541bc0a22de6e
+  languageName: node
+  linkType: hard
+
 "@storybook/global@npm:^5.0.0":
   version: 5.0.0
   resolution: "@storybook/global@npm:5.0.0"
@@ -2544,6 +2695,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/node-logger@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/node-logger@npm:7.6.18"
+  checksum: 10/9c50e0b5548b11070be99b07209bd45f956bf18bfd02a90cda93238ed389e1b0840aeba1c9dec6b1b519b12ce9c2a3a52a6f648d1e3158afccf6b6b80ade7690
+  languageName: node
+  linkType: hard
+
 "@storybook/preview-api@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/preview-api@npm:7.6.17"
@@ -2566,6 +2724,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/preview-api@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/preview-api@npm:7.6.18"
+  dependencies:
+    "@storybook/channels": "npm:7.6.18"
+    "@storybook/client-logger": "npm:7.6.18"
+    "@storybook/core-events": "npm:7.6.18"
+    "@storybook/csf": "npm:^0.1.2"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/types": "npm:7.6.18"
+    "@types/qs": "npm:^6.9.5"
+    dequal: "npm:^2.0.2"
+    lodash: "npm:^4.17.21"
+    memoizerific: "npm:^1.11.3"
+    qs: "npm:^6.10.0"
+    synchronous-promise: "npm:^2.0.15"
+    ts-dedent: "npm:^2.0.0"
+    util-deprecate: "npm:^1.0.2"
+  checksum: 10/817d6d228de38564e0a1801be86bed6677dd2314789894bcd95ad31318275de1904a1811ed231d18cbafbeeaafbfcea006e681387f4d4c3f7a5def75056bcea3
+  languageName: node
+  linkType: hard
+
 "@storybook/preview@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/preview@npm:7.6.17"
@@ -2573,6 +2753,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/preview@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/preview@npm:7.6.18"
+  checksum: 10/311ca057812a325f4cf7286690b348b67bf8840927ca7b8843091e3b7f0eb1eaeb7df8e765d2105176aa591977b412001b68d67501af7da71cd94776b83a1941
+  languageName: node
+  linkType: hard
+
 "@storybook/react-dom-shim@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/react-dom-shim@npm:7.6.17"
@@ -2583,6 +2770,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/react-dom-shim@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/react-dom-shim@npm:7.6.18"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/42e6ab2465ac82f17d11794ca20a20d6d0236cf66038dc5d3dd320786769883964d662531cd36a5d7d21cba6061a68bd2c58d5cdeb1769779c44c68789e84c95
+  languageName: node
+  linkType: hard
+
 "@storybook/react-vite@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/react-vite@npm:7.6.17"
@@ -2602,6 +2799,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/react-vite@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/react-vite@npm:7.6.18"
+  dependencies:
+    "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.3.0"
+    "@rollup/pluginutils": "npm:^5.0.2"
+    "@storybook/builder-vite": "npm:7.6.18"
+    "@storybook/react": "npm:7.6.18"
+    "@vitejs/plugin-react": "npm:^3.0.1"
+    magic-string: "npm:^0.30.0"
+    react-docgen: "npm:^7.0.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+  checksum: 10/e5b5d1944ca4f65229f50bef20ff50afdceb6064dd72636f7ebf9bcd79adf8554df8a14c381a8ffc3aae1816153d72857e61805aaba97e2192a33df220eb3162
+  languageName: node
+  linkType: hard
+
 "@storybook/react@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/react@npm:7.6.17"
@@ -2638,6 +2854,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/react@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/react@npm:7.6.18"
+  dependencies:
+    "@storybook/client-logger": "npm:7.6.18"
+    "@storybook/core-client": "npm:7.6.18"
+    "@storybook/docs-tools": "npm:7.6.18"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/preview-api": "npm:7.6.18"
+    "@storybook/react-dom-shim": "npm:7.6.18"
+    "@storybook/types": "npm:7.6.18"
+    "@types/escodegen": "npm:^0.0.6"
+    "@types/estree": "npm:^0.0.51"
+    "@types/node": "npm:^18.0.0"
+    acorn: "npm:^7.4.1"
+    acorn-jsx: "npm:^5.3.1"
+    acorn-walk: "npm:^7.2.0"
+    escodegen: "npm:^2.1.0"
+    html-tags: "npm:^3.1.0"
+    lodash: "npm:^4.17.21"
+    prop-types: "npm:^15.7.2"
+    react-element-to-jsx-string: "npm:^15.0.0"
+    ts-dedent: "npm:^2.0.0"
+    type-fest: "npm:~2.19"
+    util-deprecate: "npm:^1.0.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    typescript: "*"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/0afdcdf9fa5a0cf693207bc9aa96e9b1ad5512321bdcdb3ddbddf99f821ec1144f874394b660287d481a468e4df43b0fc148266f4d5d03f8dd88958804f9f996
+  languageName: node
+  linkType: hard
+
 "@storybook/types@npm:7.6.17":
   version: 7.6.17
   resolution: "@storybook/types@npm:7.6.17"
@@ -2650,6 +2902,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/types@npm:7.6.18":
+  version: 7.6.18
+  resolution: "@storybook/types@npm:7.6.18"
+  dependencies:
+    "@storybook/channels": "npm:7.6.18"
+    "@types/babel__core": "npm:^7.0.0"
+    "@types/express": "npm:^4.7.0"
+    file-system-cache: "npm:2.3.0"
+  checksum: 10/521b2ba3e3938b5774d2bcc6eda5db0b8dc7b7759aea0ba217daf34f83c40ef29ff05d011585e426ae70a77391a8015d9a9a9ff94ff0dcbec0f773c14cf723b8
+  languageName: node
+  linkType: hard
+
 "@tanstack/match-sorter-utils@npm:^8.7.0":
   version: 8.15.1
   resolution: "@tanstack/match-sorter-utils@npm:8.15.1"
@@ -3801,6 +4065,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/expect@npm:1.5.2":
+  version: 1.5.2
+  resolution: "@vitest/expect@npm:1.5.2"
+  dependencies:
+    "@vitest/spy": "npm:1.5.2"
+    "@vitest/utils": "npm:1.5.2"
+    chai: "npm:^4.3.10"
+  checksum: 10/47ea9f1e7482de32100b243e599587979664bae569def43371d5c2a19514709cc3019c7f3ac6f4179d2183a0221642277a44029ac44cef04e54fbbbb52785e17
+  languageName: node
+  linkType: hard
+
 "@vitest/runner@npm:1.3.1":
   version: 1.3.1
   resolution: "@vitest/runner@npm:1.3.1"
@@ -3823,6 +4098,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/runner@npm:1.5.2":
+  version: 1.5.2
+  resolution: "@vitest/runner@npm:1.5.2"
+  dependencies:
+    "@vitest/utils": "npm:1.5.2"
+    p-limit: "npm:^5.0.0"
+    pathe: "npm:^1.1.1"
+  checksum: 10/9bb002c6de3da6011642bd09c5d1cf3ea0a6595e4cb88b9cd3314e99e5583ec398d35c57bebc91b197631ac9dea61d4adb53f9e3217b4d55c3b52fa930e8edab
+  languageName: node
+  linkType: hard
+
 "@vitest/snapshot@npm:1.3.1":
   version: 1.3.1
   resolution: "@vitest/snapshot@npm:1.3.1"
@@ -3845,6 +4131,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/snapshot@npm:1.5.2":
+  version: 1.5.2
+  resolution: "@vitest/snapshot@npm:1.5.2"
+  dependencies:
+    magic-string: "npm:^0.30.5"
+    pathe: "npm:^1.1.1"
+    pretty-format: "npm:^29.7.0"
+  checksum: 10/80d6ca478aee3caf6ce5afecd4f37d2677a619bdc63c4209281b047d39657045f4db1bac5ba9a1c38480df0d3f141da86013579c14b8104c7e8c43ed5134ca96
+  languageName: node
+  linkType: hard
+
 "@vitest/spy@npm:1.3.1":
   version: 1.3.1
   resolution: "@vitest/spy@npm:1.3.1"
@@ -3863,6 +4160,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/spy@npm:1.5.2":
+  version: 1.5.2
+  resolution: "@vitest/spy@npm:1.5.2"
+  dependencies:
+    tinyspy: "npm:^2.2.0"
+  checksum: 10/e4424f9e0d1e4f11ec242aeb5f98fa6420ecf7d8bb456a8b31795e02f933d7b529946a6442c886b27cf324925ac105536f4a8fcbf672d775c1b6d0897a36b061
+  languageName: node
+  linkType: hard
+
 "@vitest/utils@npm:1.3.1":
   version: 1.3.1
   resolution: "@vitest/utils@npm:1.3.1"
@@ -3887,6 +4193,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/utils@npm:1.5.2":
+  version: 1.5.2
+  resolution: "@vitest/utils@npm:1.5.2"
+  dependencies:
+    diff-sequences: "npm:^29.6.3"
+    estree-walker: "npm:^3.0.3"
+    loupe: "npm:^2.3.7"
+    pretty-format: "npm:^29.7.0"
+  checksum: 10/74fb0a32973038b00b6ca427cf387c07ff879342e6ea980420b3a9b6d74b0332cdcc9db184ad842584099ac956987bddcdc49001ed648deb49b8f54416570ff0
+  languageName: node
+  linkType: hard
+
 "JSONStream@npm:^1.3.5":
   version: 1.3.5
   resolution: "JSONStream@npm:1.3.5"
@@ -7377,7 +7695,7 @@ __metadata:
     "@graasp/query-client": "npm:3.5.0"
     "@graasp/sdk": "npm:4.7.6"
     "@graasp/translations": "npm:1.27.0"
-    "@graasp/ui": "npm:4.15.1"
+    "@graasp/ui": "npm:4.15.3"
     "@mui/icons-material": "npm:5.15.15"
     "@mui/lab": "npm:5.0.0-alpha.170"
     "@mui/material": "npm:5.15.15"
@@ -7437,6 +7755,7 @@ __metadata:
     lodash.isequal: "npm:4.5.0"
     lodash.partition: "npm:4.6.0"
     lodash.truncate: "npm:4.4.2"
+    lucide-react: "npm:0.373.0"
     nyc: "npm:15.1.0"
     papaparse: "npm:5.4.1"
     prettier: "npm:3.2.5"
@@ -9202,6 +9521,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:0.373.0":
+  version: 0.373.0
+  resolution: "lucide-react@npm:0.373.0"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0
+  checksum: 10/e474e456fadee6595a25738507102985bc50a754164d7daba4252e8301cdbacf5499ba206529058ac3dadcf7d57937c565ac8bc0ee2a90d0dcd0204e3a8e5b39
+  languageName: node
+  linkType: hard
+
 "lz-string@npm:^1.5.0":
   version: 1.5.0
   resolution: "lz-string@npm:1.5.0"
@@ -10812,7 +11140,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.38":
+"postcss@npm:^8.4.36, postcss@npm:^8.4.38":
   version: 8.4.38
   resolution: "postcss@npm:8.4.38"
   dependencies:
@@ -13431,6 +13759,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-node@npm:1.5.2":
+  version: 1.5.2
+  resolution: "vite-node@npm:1.5.2"
+  dependencies:
+    cac: "npm:^6.7.14"
+    debug: "npm:^4.3.4"
+    pathe: "npm:^1.1.1"
+    picocolors: "npm:^1.0.0"
+    vite: "npm:^5.0.0"
+  bin:
+    vite-node: vite-node.mjs
+  checksum: 10/7182d44fc65c63ccbc49e2a87a0bb3193c2aa75d6dcc5c3e5cea259445d958825260a26337fba1116836611b77ef2353fe5acf176965f1492c42790b9c2d964f
+  languageName: node
+  linkType: hard
+
 "vite-plugin-checker@npm:0.6.4":
   version: 0.6.4
   resolution: "vite-plugin-checker@npm:0.6.4"
@@ -13497,7 +13840,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:5.2.10, vite@npm:^5.0.0":
+"vite@npm:5.2.10":
   version: 5.2.10
   resolution: "vite@npm:5.2.10"
   dependencies:
@@ -13537,6 +13880,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite@npm:^5.0.0":
+  version: 5.2.6
+  resolution: "vite@npm:5.2.6"
+  dependencies:
+    esbuild: "npm:^0.20.1"
+    fsevents: "npm:~2.3.3"
+    postcss: "npm:^8.4.36"
+    rollup: "npm:^4.13.0"
+  peerDependencies:
+    "@types/node": ^18.0.0 || >=20.0.0
+    less: "*"
+    lightningcss: ^1.21.0
+    sass: "*"
+    stylus: "*"
+    sugarss: "*"
+    terser: ^5.4.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    less:
+      optional: true
+    lightningcss:
+      optional: true
+    sass:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: 10/0409acd4bbad1bca42b2015ac5d0f710bbc84b86f6b518add9a9c13adf1aab02fd40fcca854dc08ff2a2226c1df77d5d5b4a958c6c4c04ca27a6bfb0b4f60615
+  languageName: node
+  linkType: hard
+
 "vitest@npm:1.3.1":
   version: 1.3.1
   resolution: "vitest@npm:1.3.1"
@@ -13637,6 +14020,56 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vitest@npm:1.5.2":
+  version: 1.5.2
+  resolution: "vitest@npm:1.5.2"
+  dependencies:
+    "@vitest/expect": "npm:1.5.2"
+    "@vitest/runner": "npm:1.5.2"
+    "@vitest/snapshot": "npm:1.5.2"
+    "@vitest/spy": "npm:1.5.2"
+    "@vitest/utils": "npm:1.5.2"
+    acorn-walk: "npm:^8.3.2"
+    chai: "npm:^4.3.10"
+    debug: "npm:^4.3.4"
+    execa: "npm:^8.0.1"
+    local-pkg: "npm:^0.5.0"
+    magic-string: "npm:^0.30.5"
+    pathe: "npm:^1.1.1"
+    picocolors: "npm:^1.0.0"
+    std-env: "npm:^3.5.0"
+    strip-literal: "npm:^2.0.0"
+    tinybench: "npm:^2.5.1"
+    tinypool: "npm:^0.8.3"
+    vite: "npm:^5.0.0"
+    vite-node: "npm:1.5.2"
+    why-is-node-running: "npm:^2.2.2"
+  peerDependencies:
+    "@edge-runtime/vm": "*"
+    "@types/node": ^18.0.0 || >=20.0.0
+    "@vitest/browser": 1.5.2
+    "@vitest/ui": 1.5.2
+    happy-dom: "*"
+    jsdom: "*"
+  peerDependenciesMeta:
+    "@edge-runtime/vm":
+      optional: true
+    "@types/node":
+      optional: true
+    "@vitest/browser":
+      optional: true
+    "@vitest/ui":
+      optional: true
+    happy-dom:
+      optional: true
+    jsdom:
+      optional: true
+  bin:
+    vitest: vitest.mjs
+  checksum: 10/49d5715315f205640978afeb8597b9bc389ba889c6cb285e49a5bde7f5eb59b0748f2386879e87821f99478643fecc0c98fe83503a0fcd60cb14bba9b4398b9c
+  languageName: node
+  linkType: hard
+
 "void-elements@npm:3.1.0":
   version: 3.1.0
   resolution: "void-elements@npm:3.1.0"