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

client/components/build/Center/ArtboardController.tsx

@@ -74,19 +74,19 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
       })}
     >
       <div className={styles.controller}>
-        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.zoom-in')}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-in') as string}>
           <ButtonBase onClick={() => zoomIn(0.25)}>
             <ZoomIn fontSize="medium" />
           </ButtonBase>
         </Tooltip>
 
-        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.zoom-out')}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.zoom-out') as string}>
           <ButtonBase onClick={() => zoomOut(0.25)}>
             <ZoomOut fontSize="medium" />
           </ButtonBase>
         </Tooltip>
 
-        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.center-artboard')}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.center-artboard') as string}>
           <ButtonBase onClick={() => centerView(0.95)}>
             <FilterCenterFocus fontSize="medium" />
           </ButtonBase>
@@ -96,7 +96,7 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
 
         {isDesktop && (
           <>
-            <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-orientation')}>
+            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-orientation') as string}>
               <ButtonBase onClick={handleTogglePageOrientation}>
                 {orientation === 'vertical' ? (
                   <AlignHorizontalCenter fontSize="medium" />
@@ -106,13 +106,13 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
               </ButtonBase>
             </Tooltip>
 
-            <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-page-break-line')}>
+            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-page-break-line') as string}>
               <ButtonBase onClick={handleTogglePageBreakLine}>
                 <InsertPageBreak fontSize="medium" />
               </ButtonBase>
             </Tooltip>
 
-            <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-sidebars')}>
+            <Tooltip arrow placement="top" title={t('builder.controller.tooltip.toggle-sidebars') as string}>
               <ButtonBase onClick={handleToggleSidebar}>
                 <ViewSidebar fontSize="medium" />
               </ButtonBase>
@@ -122,13 +122,13 @@ const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, c
           </>
         )}
 
-        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.copy-link')}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.copy-link') as string}>
           <ButtonBase onClick={handleCopyLink}>
             <Link fontSize="medium" />
           </ButtonBase>
         </Tooltip>
 
-        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.export-pdf')}>
+        <Tooltip arrow placement="top" title={t('builder.controller.tooltip.export-pdf') as string}>
           <ButtonBase onClick={handleExportPDF} disabled={isLoading}>
             <Download fontSize="medium" />
           </ButtonBase>

client/components/build/Center/Header.tsx

@@ -184,7 +184,7 @@ const Header = () => {
                 <ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
               </MenuItem>
             ) : (
-              <Tooltip arrow placement="right" title={t<string>('builder.header.menu.tooltips.share-link')}>
+              <Tooltip arrow placement="right" title={t('builder.header.menu.tooltips.share-link') as string}>
                 <div>
                   <MenuItem>
                     <ListItemIcon>
@@ -196,7 +196,7 @@ const Header = () => {
               </Tooltip>
             )}
 
-            <Tooltip arrow placement="right" title={t<string>('builder.header.menu.tooltips.delete')}>
+            <Tooltip arrow placement="right" title={t('builder.header.menu.tooltips.delete') as string}>
               <MenuItem onClick={handleDelete}>
                 <ListItemIcon>
                   <Delete className="scale-90" />

client/components/build/LeftSidebar/sections/PhotoFilters.tsx

@@ -58,14 +58,14 @@ const PhotoFilters = () => {
 
         <div className="flex items-center">
           <FormControlLabel
-            label={t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.grayscale.label')}
+            label={t('builder.leftSidebar.sections.basics.photo-filters.effects.grayscale.label') as string}
             control={
               <Checkbox color="secondary" checked={grayscale} onChange={(_, value) => handleSetGrayscale(value)} />
             }
           />
 
           <FormControlLabel
-            label={t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.border.label')}
+            label={t('builder.leftSidebar.sections.basics.photo-filters.effects.border.label') as string}
             control={<Checkbox color="secondary" checked={border} onChange={(_, value) => handleSetBorder(value)} />}
           />
         </div>

client/components/build/LeftSidebar/sections/PhotoUpload.tsx

@@ -67,8 +67,8 @@ const PhotoUpload: React.FC = () => {
         <Tooltip
           title={
             isEmpty(photo.url)
-              ? t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.upload')
-              : t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.remove')
+              ? (t('builder.leftSidebar.sections.basics.photo-upload.tooltip.upload') as string)
+              : (t('builder.leftSidebar.sections.basics.photo-upload.tooltip.remove') as string)
           }
         >
           <Avatar sx={{ width: 96, height: 96 }} src={photo.url} />

client/components/build/LeftSidebar/sections/SectionSettings.tsx

@@ -32,7 +32,7 @@ const SectionSettings: React.FC<Props> = ({ path }) => {
 
   return (
     <div>
-      <Tooltip title={t<string>('builder.common.columns.tooltip')}>
+      <Tooltip title={t('builder.common.columns.tooltip') as string}>
         <ButtonBase onClick={handleClick} sx={{ padding: 1, borderRadius: 1 }} className="opacity-50 hover:opacity-75">
           <ViewWeek /> <span className="ml-1.5 text-xs">{columns}</span>
         </ButtonBase>

client/components/build/RightSidebar/sections/Layout.tsx

@@ -62,7 +62,7 @@ const Layout = () => {
         path="metadata.layout"
         name={t('builder.rightSidebar.sections.layout.heading')}
         action={
-          <Tooltip title={t<string>('builder.rightSidebar.sections.layout.tooltip.reset-layout')}>
+          <Tooltip title={t('builder.rightSidebar.sections.layout.tooltip.reset-layout') as string}>
             <IconButton onClick={handleResetLayout}>
               <Restore />
             </IconButton>
@@ -81,7 +81,7 @@ const Layout = () => {
 
               <div className={clsx(styles.delete, { hidden: pageIndex === 0 })}>
                 <Tooltip
-                  title={t<string>('builder.common.actions.delete', { token: t('builder.common.glossary.page') })}
+                  title={t('builder.common.actions.delete', { token: t('builder.common.glossary.page') }) as string}
                 >
                   <IconButton size="small" onClick={() => handleDeletePage(pageIndex)}>
                     <Close fontSize="small" />

client/components/build/RightSidebar/sections/Settings.tsx

@@ -20,25 +20,24 @@ import { useMutation } from 'react-query';
 
 import Heading from '@/components/shared/Heading';
 import ThemeSwitch from '@/components/shared/ThemeSwitch';
-import { Language, languages } from '@/config/languages';
+import { Language, languageMap, languages } from '@/config/languages';
 import { ServerError } from '@/services/axios';
 import queryClient from '@/services/react-query';
 import { loadSampleData, LoadSampleDataParams, resetResume, ResetResumeParams } from '@/services/resume';
-import { setLanguage, setTheme, togglePageBreakLine, togglePageOrientation } from '@/store/build/buildSlice';
+import { setTheme, togglePageBreakLine, togglePageOrientation } from '@/store/build/buildSlice';
 import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import { setResumeState } from '@/store/resume/resumeSlice';
 import { dateFormatOptions } from '@/utils/date';
 
 const Settings = () => {
-  const router = useRouter();
-
   const { t } = useTranslation();
 
   const dispatch = useAppDispatch();
 
+  const { locale, ...router } = useRouter();
+
   const resume = useAppSelector((state) => state.resume);
   const theme = useAppSelector((state) => state.build.theme);
-  const language = useAppSelector((state) => state.build.language);
   const breakLine = useAppSelector((state) => state.build.page.breakLine);
   const orientation = useAppSelector((state) => state.build.page.orientation);
 
@@ -62,14 +61,12 @@ const Settings = () => {
     dispatch(setResumeState({ path: 'metadata.date.format', value }));
 
   const handleChangeLanguage = (value: Language | null) => {
-    const { pathname, asPath, query } = router;
+    const { pathname, asPath, query, push } = router;
     const code = value?.code || 'en';
 
-    dayjs.locale(code);
-    dispatch(setLanguage({ language: code }));
     document.cookie = `NEXT_LOCALE=${code}; path=/; expires=2147483647`;
 
-    router.push({ pathname, query }, asPath, { locale: code });
+    push({ pathname, query }, asPath, { locale: code });
   };
 
   const handleLoadSampleData = async () => {
@@ -132,7 +129,7 @@ const Settings = () => {
               disableClearable
               className="my-2 w-full"
               options={languages}
-              value={language}
+              value={languageMap[locale ?? 'en']}
               isOptionEqualToValue={(a, b) => a.code === b.code}
               onChange={(_, value) => handleChangeLanguage(value)}
               renderInput={(params) => <TextField {...params} />}

client/components/build/RightSidebar/sections/Sharing.tsx

@@ -63,7 +63,7 @@ const Sharing = () => {
 
           <div className="mt-1 flex w-full">
             <FormControlLabel
-              label={t<string>('builder.rightSidebar.sections.sharing.short-url.label')}
+              label={t('builder.rightSidebar.sections.sharing.short-url.label') as string}
               control={
                 <Checkbox className="mr-1" checked={showShortUrl} onChange={(_, value) => setShowShortUrl(value)} />
               }

client/components/dashboard/ResumePreview.tsx

@@ -161,7 +161,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
               <ListItemText>{t('dashboard.resume.menu.share-link')}</ListItemText>
             </MenuItem>
           ) : (
-            <Tooltip arrow placement="right" title={t<string>('dashboard.resume.menu.tooltips.share-link')}>
+            <Tooltip arrow placement="right" title={t('dashboard.resume.menu.tooltips.share-link') as string}>
               <div>
                 <MenuItem>
                   <ListItemIcon>
@@ -173,7 +173,7 @@ const ResumePreview: React.FC<Props> = ({ resume }) => {
             </Tooltip>
           )}
 
-          <Tooltip arrow placement="right" title={t<string>('dashboard.resume.menu.tooltips.delete')}>
+          <Tooltip arrow placement="right" title={t('dashboard.resume.menu.tooltips.delete') as string}>
             <MenuItem onClick={handleDelete}>
               <ListItemIcon>
                 <DeleteOutline className="scale-90" />

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>