refactor: update Next.js, React.js and Node.js (#815)

* refactor: update Next.js and React.js

* refactor: update Next.js images

* refactor: update ESLint rules and fix warnings/errors

* fix: remove old intl polyfill

* fix: add proper size to next/image components

* fix: adjust full-size for next/image components

* fix: temporary allow all domains for image optimization

* build: fixes an issue where dev env could lead to javascript heap out of memory

* fix: resolve webpack cache issue with country-flag-icons

* refactor: switch compiler from Babel to SWC

* fix: resize logo in sidebar

* fix: break word on long path to avoid text overflow

* chore: added sharp for production image optimisation

* fix: change extract script for i18n to a custom script

* fix: resolve GitHub CodeQL alert

* chore: temporarily remove builds for ARMv7

* fix: resize avatar images

* refactor: update Node.js to v20

* fix: resolve various UI issues

* build: migrate yarn to pnpm and restrict engine to node@^20.0.0

* ci: specify the pnpm version to use in workflow actions

* ci: fix typo in pnpm action-setup for cypress workflow

* test(cypress): use pnpm instead of yarn

* style: ran prettier on pnpm-lock

* ci(cypress): setup nodejs v20 in cypress workflow

* ci: pnpm cache to reduce install time

* ci: use sh shell to get pnpm store directory

* build(dockerfile): migrate to pnpm from yarn in docker builds

* build(dockerfile): copy the proper pnpm lockfile

* build: install pnpm for all platforms

* build(dockerfile): remove unnecessary `&&` on apk installation steps

* build: migrate pnpm 8 to 9

* build(dockerfile): add node-gyp back in

* build(dockerfile): install node-gyp through npm

* build(dockerfile): ignore scripts to not run husky install when devdependencies are pruned

* build: migrate to pnpm from yarn

* chore: remove a section that is no longer relevant

---------

Co-authored-by: fallenbagel <98979876+Fallenbagel@users.noreply.github.com>

src/components/UserList/index.tsx

@@ -14,6 +14,7 @@ import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
 import type { User } from '@app/hooks/useUser';
 import { Permission, UserType, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
+import defineMessages from '@app/utils/defineMessages';
 import { Transition } from '@headlessui/react';
 import {
   BarsArrowDownIcon,
@@ -29,16 +30,17 @@ import { hasPermission } from '@server/lib/permissions';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import getConfig from 'next/config';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
 import * as Yup from 'yup';
 import JellyfinImportModal from './JellyfinImportModal';
 
-const messages = defineMessages({
+const messages = defineMessages('components.UserList', {
   users: 'Users',
   userlist: 'User List',
   importfrommediaserver: 'Import {mediaServerName} Users',
@@ -609,23 +611,25 @@ const UserList = () => {
               </Table.TD>
               <Table.TD>
                 <div className="flex items-center">
-                  <Link href={`/users/${user.id}`}>
-                    <a className="h-10 w-10 flex-shrink-0">
-                      <img
-                        className="h-10 w-10 rounded-full object-cover"
-                        src={user.avatar}
-                        alt=""
-                      />
-                    </a>
+                  <Link
+                    href={`/users/${user.id}`}
+                    className="h-10 w-10 flex-shrink-0"
+                  >
+                    <Image
+                      className="h-10 w-10 rounded-full object-cover"
+                      src={user.avatar}
+                      alt=""
+                      width={40}
+                      height={40}
+                    />
                   </Link>
                   <div className="ml-4">
-                    <Link href={`/users/${user.id}`}>
-                      <a
-                        className="text-base font-bold leading-5 transition duration-300 hover:underline"
-                        data-testid="user-list-username-link"
-                      >
-                        {user.displayName}
-                      </a>
+                    <Link
+                      href={`/users/${user.id}`}
+                      className="text-base font-bold leading-5 transition duration-300 hover:underline"
+                      data-testid="user-list-username-link"
+                    >
+                      {user.displayName}
                     </Link>
                     {user.displayName.toLowerCase() !== user.email && (
                       <div className="text-sm leading-5 text-gray-300">
@@ -641,10 +645,11 @@ const UserList = () => {
                   [Permission.MANAGE_REQUESTS, Permission.REQUEST_VIEW],
                   { type: 'or' }
                 ) ? (
-                  <Link href={`/users/${user.id}/requests`}>
-                    <a className="text-sm leading-5 transition duration-300 hover:underline">
-                      {user.requestCount}
-                    </a>
+                  <Link
+                    href={`/users/${user.id}/requests`}
+                    className="text-sm leading-5 transition duration-300 hover:underline"
+                  >
+                    {user.requestCount}
                   </Link>
                 ) : (
                   user.requestCount