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/Layout/VersionStatus/index.tsx

@@ -1,3 +1,4 @@
+import defineMessages from '@app/utils/defineMessages';
 import {
   ArrowUpCircleIcon,
   BeakerIcon,
@@ -6,10 +7,10 @@ import {
 } from '@heroicons/react/24/outline';
 import type { StatusResponse } from '@server/interfaces/api/settingsInterfaces';
 import Link from 'next/link';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import useSWR from 'swr';
 
-const messages = defineMessages({
+const messages = defineMessages('components.Layout.VersionStatus', {
   streamdevelop: 'Jellyseerr Develop',
   streamstable: 'Jellyseerr Stable',
   outofdate: 'Out of Date',
@@ -39,49 +40,48 @@ const VersionStatus = ({ onClick }: VersionStatusProps) => {
       : intl.formatMessage(messages.streamstable);
 
   return (
-    <Link href="/settings/about">
-      <a
-        onClick={onClick}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' && onClick) {
-            onClick();
-          }
-        }}
-        role="button"
-        tabIndex={0}
-        className={`mx-2 flex items-center rounded-lg p-2 text-xs ring-1 ring-gray-700 transition duration-300 ${
-          data.updateAvailable
-            ? 'bg-yellow-500 text-white hover:bg-yellow-400'
-            : 'bg-gray-900 text-gray-300 hover:bg-gray-800'
-        }`}
-      >
-        {data.commitTag === 'local' ? (
-          <CodeBracketIcon className="h-6 w-6" />
-        ) : data.version.startsWith('develop-') ? (
-          <BeakerIcon className="h-6 w-6" />
-        ) : (
-          <ServerIcon className="h-6 w-6" />
-        )}
-        <div className="flex min-w-0 flex-1 flex-col truncate px-2 last:pr-0">
-          <span className="font-bold">{versionStream}</span>
-          <span className="truncate">
-            {data.commitTag === 'local' ? (
-              '(⌐■_■)'
-            ) : data.commitsBehind > 0 ? (
-              intl.formatMessage(messages.commitsbehind, {
-                commitsBehind: data.commitsBehind,
-              })
-            ) : data.commitsBehind === -1 ? (
-              intl.formatMessage(messages.outofdate)
-            ) : (
-              <code className="bg-transparent p-0">
-                {data.version.replace('develop-', '')}
-              </code>
-            )}
-          </span>
-        </div>
-        {data.updateAvailable && <ArrowUpCircleIcon className="h-6 w-6" />}
-      </a>
+    <Link
+      href="/settings/about"
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && onClick) {
+          onClick();
+        }
+      }}
+      role="button"
+      tabIndex={0}
+      className={`mx-2 flex items-center rounded-lg p-2 text-xs ring-1 ring-gray-700 transition duration-300 ${
+        data.updateAvailable
+          ? 'bg-yellow-500 text-white hover:bg-yellow-400'
+          : 'bg-gray-900 text-gray-300 hover:bg-gray-800'
+      }`}
+    >
+      {data.commitTag === 'local' ? (
+        <CodeBracketIcon className="h-6 w-6" />
+      ) : data.version.startsWith('develop-') ? (
+        <BeakerIcon className="h-6 w-6" />
+      ) : (
+        <ServerIcon className="h-6 w-6" />
+      )}
+      <div className="flex min-w-0 flex-1 flex-col truncate px-2 last:pr-0">
+        <span className="font-bold">{versionStream}</span>
+        <span className="truncate">
+          {data.commitTag === 'local' ? (
+            '(⌐■_■)'
+          ) : data.commitsBehind > 0 ? (
+            intl.formatMessage(messages.commitsbehind, {
+              commitsBehind: data.commitsBehind,
+            })
+          ) : data.commitsBehind === -1 ? (
+            intl.formatMessage(messages.outofdate)
+          ) : (
+            <code className="bg-transparent p-0">
+              {data.version.replace('develop-', '')}
+            </code>
+          )}
+        </span>
+      </div>
+      {data.updateAvailable && <ArrowUpCircleIcon className="h-6 w-6" />}
     </Link>
   );
 };