fix(i18n): add missing translation keys, update lang/locale logic

client/components/shared/ColorAvatar.tsx

@@ -12,7 +12,7 @@ const ColorAvatar: React.FC<Props> = ({ color, size = 20, onClick }) => {
 
   return (
     <IconButton onClick={handleClick}>
-      <Avatar sx={{ bgcolor: color, width: size, height: size }}> </Avatar>
+      <Avatar sx={{ bgcolor: color, width: size, height: size }}>&nbsp;</Avatar>
     </IconButton>
   );
 };

client/components/shared/Heading.tsx

@@ -72,19 +72,19 @@ const Heading: React.FC<Props> = ({
         })}
       >
         {isEditable && (
-          <Tooltip title={t<string>('builder.common.tooltip.rename-section')}>
+          <Tooltip title={t('builder.common.tooltip.rename-section') as string}>
             <IconButton onClick={toggleEditMode}>{editMode ? <Check /> : <DriveFileRenameOutline />}</IconButton>
           </Tooltip>
         )}
 
         {isHideable && (
-          <Tooltip title={t<string>('builder.common.tooltip.toggle-visibility')}>
+          <Tooltip title={t('builder.common.tooltip.toggle-visibility') as string}>
             <IconButton onClick={toggleVisibility}>{visibility ? <Visibility /> : <VisibilityOff />}</IconButton>
           </Tooltip>
         )}
 
         {isDeletable && (
-          <Tooltip title={t<string>('builder.common.tooltip.delete-section')}>
+          <Tooltip title={t('builder.common.tooltip.delete-section') as string}>
             <IconButton onClick={handleDelete}>
               <Delete />
             </IconButton>

client/components/shared/LanguageSwitcher.tsx

@@ -1,19 +1,17 @@
 import { Language } from '@mui/icons-material';
 import { IconButton, Popover } from '@mui/material';
-import dayjs from 'dayjs';
 import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
 import { MouseEvent, useState } from 'react';
 
 import { languages } from '@/config/languages';
-import { setLanguage } from '@/store/build/buildSlice';
-import { useAppDispatch } from '@/store/hooks';
 
 import styles from './LanguageSwitcher.module.scss';
 
 const LanguageSwitcher = () => {
   const router = useRouter();
 
-  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
@@ -24,10 +22,7 @@ const LanguageSwitcher = () => {
   const handleChangeLanguage = (locale: string) => {
     const { pathname, asPath, query } = router;
 
-    dayjs.locale(locale);
-    dispatch(setLanguage({ language: locale }));
     document.cookie = `NEXT_LOCALE=${locale}; path=/; expires=2147483647`;
-
     router.push({ pathname, query }, asPath, { locale });
   };
 
@@ -59,7 +54,7 @@ const LanguageSwitcher = () => {
             ))}
 
             <a href="https://translate.rxresu.me" target="_blank" rel="noreferrer" className={styles.language}>
-              Missing your language?
+              {t('common.footer.language.missing')}
             </a>
           </div>
         </div>

client/components/shared/ListItem.tsx

@@ -3,6 +3,7 @@ import { Divider, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Toolti
 import { ListItem as ListItemType } from '@reactive-resume/schema';
 import clsx from 'clsx';
 import isFunction from 'lodash/isFunction';
+import { useTranslation } from 'next-i18next';
 import React, { useRef, useState } from 'react';
 import { DropTargetMonitor, useDrag, useDrop, XYCoord } from 'react-dnd';
 
@@ -26,6 +27,8 @@ type Props = {
 };
 
 const ListItem: React.FC<Props> = ({ item, index, title, subtitle, onMove, onEdit, onDelete, onDuplicate }) => {
+  const { t } = useTranslation();
+
   const ref = useRef<HTMLDivElement>(null);
   const [anchorEl, setAnchorEl] = useState<Element | null>(null);
 
@@ -122,29 +125,25 @@ const ListItem: React.FC<Props> = ({ item, index, title, subtitle, onMove, onEdi
             <ListItemIcon>
               <DriveFileRenameOutline className="scale-90" />
             </ListItemIcon>
-            <ListItemText>Edit</ListItemText>
+            <ListItemText>{t('builder.common.list.actions.edit')}</ListItemText>
           </MenuItem>
 
           <MenuItem onClick={() => handleDuplicate(item)}>
             <ListItemIcon>
               <FileCopy className="scale-90" />
             </ListItemIcon>
-            <ListItemText>Duplicate</ListItemText>
+            <ListItemText>{t('builder.common.list.actions.duplicate')}</ListItemText>
           </MenuItem>
 
           <Divider />
 
-          <Tooltip
-            arrow
-            placement="right"
-            title="Are you sure you want to delete this item? This is an irreversible action."
-          >
+          <Tooltip arrow placement="right" title={t('builder.common.tooltip.delete-item') as string}>
             <div>
               <MenuItem onClick={() => handleDelete(item)}>
                 <ListItemIcon>
                   <DeleteOutline className="scale-90" />
                 </ListItemIcon>
-                <ListItemText>Delete</ListItemText>
+                <ListItemText>{t('builder.common.list.actions.delete')}</ListItemText>
               </MenuItem>
             </div>
           </Tooltip>