[#583] removed useless icon and added proper translation for calendarName (#589)

src/components/Calendar/CalendarName.tsx

@@ -1,23 +1,28 @@
+import { useAppSelector } from "@/app/hooks";
 import { Calendar } from "@/features/Calendars/CalendarTypes";
-import { Box, Typography } from "@linagora/twake-mui";
-import SquareRoundedIcon from "@mui/icons-material/SquareRounded";
 import { defaultColors } from "@/utils/defaultColors";
 import { makeDisplayName } from "@/utils/makeDisplayName";
+import { renameDefault } from "@/utils/renameDefault";
+import { Box, Typography } from "@linagora/twake-mui";
+import SquareRoundedIcon from "@mui/icons-material/SquareRounded";
+import { useI18n } from "twake-i18n";
 import { OwnerCaption } from "./OwnerCaption";
-import { useAppSelector } from "@/app/hooks";
 
 export function CalendarName({ calendar }: { calendar: Calendar }) {
   const userData = useAppSelector((state) => state.user.userData);
-  const showCaption =
-    calendar.name !== "#default" &&
-    userData.openpaasId !== calendar.id.split("/")[0];
+  const { t } = useI18n();
+
+  const ownerId = calendar.id.split("/")[0];
+  const ownerDisplayName = makeDisplayName(calendar) ?? "";
+  const isOwnCalendar = userData.openpaasId === ownerId;
+  const showCaption = calendar.name !== "#default" && !isOwnCalendar;
 
   return (
     <Box
       style={{
         display: "flex",
         flexDirection: "row",
-        gap: 8,
+        gap: "16px",
         alignItems: "center",
       }}
     >
@@ -30,11 +35,11 @@ export function CalendarName({ calendar }: { calendar: Calendar }) {
       />
       <Box style={{ display: "flex", flexDirection: "column" }}>
         <Typography sx={{ wordBreak: "break-word" }}>
-          {calendar.name}
+          {renameDefault(calendar.name, ownerDisplayName, t, isOwnCalendar)}
         </Typography>
         <OwnerCaption
           showCaption={showCaption}
-          ownerDisplayName={makeDisplayName(calendar) ?? ""}
+          ownerDisplayName={ownerDisplayName}
         />
       </Box>
     </Box>