refactor: update ESLint rules and fix warnings/errors

2025-12-24 02:39:18 -05:00 · 2024-06-15 16:32:24 +02:00
parent 63d8f550c4
commit c680202008
31 changed files with 74 additions and 51 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,9 +5,7 @@ module.exports = {
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    'plugin:jsx-a11y/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:react/jsx-runtime',
+    'plugin:@next/next/recommended',
    'prettier',
  ],
  parserOptions: {
--- a/src/components/Common/Accordion/index.tsx
+++ b/src/components/Common/Accordion/index.tsx
@@ -1,4 +1,3 @@
-import type * as React from 'react';
 import { useState } from 'react';
 import AnimateHeight from 'react-animate-height';

--- a/src/components/Discover/DiscoverNetwork/index.tsx
+++ b/src/components/Discover/DiscoverNetwork/index.tsx
@@ -6,6 +6,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import type { TvNetwork } from '@server/models/common';
 import type { TvResult } from '@server/models/Search';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { defineMessages, useIntl } from 'react-intl';

@@ -47,7 +48,7 @@ const DiscoverTvNetwork = () => {
        <Header>
          {firstResultData?.network.logoPath ? (
            <div className="mb-6 flex justify-center">
-              <img
+              <Image
                src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.network.logoPath}`}
                alt={firstResultData.network.name}
                className="max-h-24 sm:max-h-32"
--- a/src/components/Discover/DiscoverStudio/index.tsx
+++ b/src/components/Discover/DiscoverStudio/index.tsx
@@ -6,6 +6,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import type { ProductionCompany } from '@server/models/common';
 import type { MovieResult } from '@server/models/Search';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { defineMessages, useIntl } from 'react-intl';

@@ -47,7 +48,7 @@ const DiscoverMovieStudio = () => {
        <Header>
          {firstResultData?.studio.logoPath ? (
            <div className="mb-6 flex justify-center">
-              <img
+              <Image
                src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.studio.logoPath}`}
                alt={firstResultData.studio.name}
                className="max-h-24 sm:max-h-32"
--- a/src/components/IssueDetails/IssueComment/index.tsx
+++ b/src/components/IssueDetails/IssueComment/index.tsx
@@ -6,6 +6,7 @@ import { EllipsisVerticalIcon } from '@heroicons/react/24/solid';
 import type { default as IssueCommentType } from '@server/entity/IssueComment';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
+import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useState } from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
@@ -84,7 +85,7 @@ const IssueComment = ({
        </Modal>
      </Transition>
      <Link href={isActiveUser ? '/profile' : `/users/${comment.user.id}`}>
-        <img
+        <Image
          src={comment.user.avatar}
          alt=""
          className="h-10 w-10 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
--- a/src/components/IssueDetails/index.tsx
+++ b/src/components/IssueDetails/index.tsx
@@ -29,6 +29,7 @@ import type { TvDetails } from '@server/models/Tv';
 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 { useState } from 'react';
@@ -277,7 +278,7 @@ const IssueDetails = () => {
                  }
                  className="group ml-1 inline-flex h-full items-center xl:ml-1.5"
                >
-                  <img
+                  <Image
                    className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full object-cover transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
                    src={issueData.createdBy.avatar}
                    alt=""
--- a/src/components/IssueList/IssueItem/index.tsx
+++ b/src/components/IssueList/IssueItem/index.tsx
@@ -10,6 +10,7 @@ import { MediaType } from '@server/constants/media';
 import type Issue from '@server/entity/Issue';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useInView } from 'react-intersection-observer';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
@@ -224,7 +225,7 @@ const IssueItem = ({ issue }: IssueItemProps) => {
                        href={`/users/${issue.createdBy.id}`}
                        className="group flex items-center truncate"
                      >
-                        <img
+                        <Image
                          src={issue.createdBy.avatar}
                          alt=""
                          className="avatar-sm ml-1.5 object-cover"
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -13,6 +13,7 @@ import {
  UsersIcon,
  XMarkIcon,
 } from '@heroicons/react/24/outline';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Fragment, useRef } from 'react';
@@ -150,9 +151,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                  >
                    <div className="flex flex-shrink-0 items-center px-2">
                      <span className="px-4 text-xl text-gray-50">
-                        <a href="/">
-                          <img src="/logo_full.svg" alt="Logo" />
-                        </a>
+                        <Link href="/">
+                          <Image src="/logo_full.svg" alt="Logo" />
+                        </Link>
                      </span>
                    </div>
                    <nav className="mt-16 flex-1 space-y-4 px-4">
@@ -219,9 +220,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
            <div className="flex flex-1 flex-col overflow-y-auto pt-8 pb-4">
              <div className="flex flex-shrink-0 items-center">
                <span className="px-4 text-2xl text-gray-50">
-                  <a href="/">
-                    <img src="/logo_full.svg" alt="Logo" />
-                  </a>
+                  <Link href="/">
+                    <Image src="/logo_full.svg" alt="Logo" />
+                  </Link>
                </span>
              </div>
              <nav className="mt-16 flex-1 space-y-4 px-4">
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -7,6 +7,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
+import Image from 'next/image';
 import type { LinkProps } from 'next/link';
 import Link from 'next/link';
 import { forwardRef, Fragment } from 'react';
@@ -51,9 +52,9 @@ const UserDropdown = () => {
          className="flex max-w-xs items-center rounded-full text-sm ring-1 ring-gray-700 hover:ring-gray-500 focus:outline-none focus:ring-gray-500"
          data-testid="user-menu"
        >
-          <img
+          <Image
            className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
-            src={user?.avatar}
+            src={user?.avatar || ''}
            alt=""
          />
        </Menu.Button>
@@ -72,9 +73,9 @@ const UserDropdown = () => {
          <div className="divide-y divide-gray-700 rounded-md bg-gray-800 bg-opacity-80 ring-1 ring-gray-700 backdrop-blur">
            <div className="flex flex-col space-y-4 px-4 py-4">
              <div className="flex items-center space-x-2">
-                <img
+                <Image
                  className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
-                  src={user?.avatar}
+                  src={user?.avatar || ''}
                  alt=""
                />
                <div className="flex min-w-0 flex-col">
--- a/src/components/Layout/UserWarnings/index.tsx
+++ b/src/components/Layout/UserWarnings/index.tsx
@@ -1,7 +1,6 @@
 import { useUser } from '@app/hooks/useUser';
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
-import type React from 'react';
 import { defineMessages, useIntl } from 'react-intl';

 const messages = defineMessages({
--- a/src/components/Login/AddEmailModal.tsx
+++ b/src/components/Login/AddEmailModal.tsx
@@ -3,7 +3,6 @@ import useSettings from '@app/hooks/useSettings';
 import { Transition } from '@headlessui/react';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
-import type React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import * as Yup from 'yup';

--- a/src/components/Login/JellyfinLogin.tsx
+++ b/src/components/Login/JellyfinLogin.tsx
@@ -6,7 +6,6 @@ import { ApiErrorCode } from '@server/constants/error';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import getConfig from 'next/config';
-import type React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import * as Yup from 'yup';
--- a/src/components/Login/index.tsx
+++ b/src/components/Login/index.tsx
@@ -12,6 +12,7 @@ import { MediaServerType } from '@server/constants/server';
 import axios from 'axios';
 import getConfig from 'next/config';
 import { useRouter } from 'next/dist/client/router';
+import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
@@ -86,7 +87,11 @@ const Login = () => {
        <LanguagePicker />
      </div>
      <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
-        <img src="/logo_stacked.svg" className="mb-10 max-w-full" alt="Logo" />
+        <Image
+          src="/logo_stacked.svg"
+          className="mb-10 max-w-full"
+          alt="Logo"
+        />
        <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
          {intl.formatMessage(messages.signinheader)}
        </h2>
--- a/src/components/ManageSlideOver/index.tsx
+++ b/src/components/ManageSlideOver/index.tsx
@@ -27,6 +27,7 @@ import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import axios from 'axios';
 import getConfig from 'next/config';
+import Image from 'next/image';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
@@ -334,7 +335,7 @@ const ManageSlideOver = ({
                                    key={`watch-user-${user.id}`}
                                    content={user.displayName}
                                  >
-                                    <img
+                                    <Image
                                      src={user.avatar}
                                      alt={user.displayName}
                                      className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
@@ -493,7 +494,7 @@ const ManageSlideOver = ({
                                    key={`watch-user-${user.id}`}
                                    content={user.displayName}
                                  >
-                                    <img
+                                    <Image
                                      src={user.avatar}
                                      alt={user.displayName}
                                      className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
--- a/src/components/MediaSlider/ShowMoreCard/index.tsx
+++ b/src/components/MediaSlider/ShowMoreCard/index.tsx
@@ -1,5 +1,6 @@
 import TitleCard from '@app/components/TitleCard';
 import { ArrowRightCircleIcon } from '@heroicons/react/24/solid';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -58,7 +59,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
            <div className="relative z-10 flex h-full flex-wrap items-center justify-center opacity-30">
              {posters[0] && (
                <div className="w-1/2 p-1">
-                  <img
+                  <Image
                    src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[0]}`}
                    alt=""
                    className="w-full rounded-md"
@@ -67,7 +68,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
              )}
              {posters[1] && (
                <div className="w-1/2 p-1">
-                  <img
+                  <Image
                    src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[1]}`}
                    alt=""
                    className="w-full rounded-md"
@@ -76,7 +77,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
              )}
              {posters[2] && (
                <div className="w-1/2 p-1">
-                  <img
+                  <Image
                    src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[2]}`}
                    alt=""
                    className="w-full rounded-md"
@@ -85,7 +86,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
              )}
              {posters[3] && (
                <div className="w-1/2 p-1">
-                  <img
+                  <Image
                    src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[3]}`}
                    alt=""
                    className="w-full rounded-md"
--- a/src/components/RequestCard/index.tsx
+++ b/src/components/RequestCard/index.tsx
@@ -21,6 +21,7 @@ import type { MediaRequest } from '@server/entity/MediaRequest';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import axios from 'axios';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -110,7 +111,7 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
                      href={`/users/${requestData.requestedBy.id}`}
                      className="group flex items-center"
                    >
-                      <img
+                      <Image
                        src={requestData.requestedBy.avatar}
                        alt=""
                        className="avatar-sm"
@@ -366,7 +367,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                href={`/users/${requestData.requestedBy.id}`}
                className="group flex items-center"
              >
-                <img
+                <Image
                  src={requestData.requestedBy.avatar}
                  alt=""
                  className="avatar-sm object-cover"
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -20,6 +20,7 @@ import type { MediaRequest } from '@server/entity/MediaRequest';
 import type { MovieDetails } from '@server/models/Movie';
 import type { TvDetails } from '@server/models/Tv';
 import axios from 'axios';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -183,7 +184,7 @@ const RequestItemError = ({
                            href={`/users/${requestData.requestedBy.id}`}
                            className="group flex items-center truncate"
                          >
-                            <img
+                            <Image
                              src={requestData.requestedBy.avatar}
                              alt=""
                              className="avatar-sm ml-1.5"
@@ -238,7 +239,7 @@ const RequestItemError = ({
                          href={`/users/${requestData.modifiedBy.id}`}
                          className="group flex items-center truncate"
                        >
-                          <img
+                          <Image
                            src={requestData.modifiedBy.avatar}
                            alt=""
                            className="avatar-sm ml-1.5"
@@ -531,7 +532,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                          href={`/users/${requestData.requestedBy.id}`}
                          className="group flex items-center truncate"
                        >
-                          <img
+                          <Image
                            src={requestData.requestedBy.avatar}
                            alt=""
                            className="avatar-sm ml-1.5 object-cover"
@@ -586,7 +587,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                        href={`/users/${requestData.modifiedBy.id}`}
                        className="group flex items-center truncate"
                      >
-                        <img
+                        <Image
                          src={requestData.modifiedBy.avatar}
                          alt=""
                          className="avatar-sm ml-1.5 object-cover"
--- a/src/components/RequestModal/AdvancedRequester/index.tsx
+++ b/src/components/RequestModal/AdvancedRequester/index.tsx
@@ -13,6 +13,7 @@ import type {
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import { hasPermission } from '@server/lib/permissions';
 import { isEqual } from 'lodash';
+import Image from 'next/image';
 import { useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import Select from 'react-select';
@@ -559,7 +560,7 @@ const AdvancedRequester = ({
                    <span className="inline-block w-full rounded-md shadow-sm">
                      <Listbox.Button className="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-700 bg-gray-800 py-2 pl-3 pr-10 text-left text-white transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
                        <span className="flex items-center">
-                          <img
+                          <Image
                            src={selectedUser.avatar}
                            alt=""
                            className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
@@ -609,7 +610,7 @@ const AdvancedRequester = ({
                                    selected ? 'font-semibold' : 'font-normal'
                                  } flex items-center`}
                                >
-                                  <img
+                                  <Image
                                    src={user.avatar}
                                    alt=""
                                    className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
--- a/src/components/RequestModal/SearchByNameModal/index.tsx
+++ b/src/components/RequestModal/SearchByNameModal/index.tsx
@@ -2,6 +2,7 @@ import Alert from '@app/components/Common/Alert';
 import Modal from '@app/components/Common/Modal';
 import globalMessages from '@app/i18n/globalMessages';
 import type { SonarrSeries } from '@server/api/servarr/sonarr';
+import Image from 'next/image';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';

@@ -87,7 +88,7 @@ const SearchByNameModal = ({
              } `}
            >
              <div className="flex w-24 flex-none items-center space-x-4">
-                <img
+                <Image
                  src={
                    item.remotePoster ??
                    '/images/overseerr_poster_not_found.png'
--- a/src/components/ResetPassword/RequestResetLink.tsx
+++ b/src/components/ResetPassword/RequestResetLink.tsx
@@ -5,6 +5,7 @@ import LanguagePicker from '@app/components/Layout/LanguagePicker';
 import { ArrowLeftIcon, EnvelopeIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -49,7 +50,11 @@ const ResetPassword = () => {
        <LanguagePicker />
      </div>
      <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
-        <img src="/logo_stacked.svg" className="mb-10 max-w-full" alt="Logo" />
+        <Image
+          src="/logo_stacked.svg"
+          className="mb-10 max-w-full"
+          alt="Logo"
+        />
        <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
          {intl.formatMessage(messages.resetpassword)}
        </h2>
--- a/src/components/ResetPassword/index.tsx
+++ b/src/components/ResetPassword/index.tsx
@@ -6,6 +6,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import { LifebuoyIcon } from '@heroicons/react/24/outline';
 import axios from 'axios';
 import { Form, Formik } from 'formik';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -64,7 +65,11 @@ const ResetPassword = () => {
        <LanguagePicker />
      </div>
      <div className="relative z-40 mt-10 flex flex-col items-center px-4 sm:mx-auto sm:w-full sm:max-w-md">
-        <img src="/logo_stacked.svg" className="mb-10 max-w-full" alt="Logo" />
+        <Image
+          src="/logo_stacked.svg"
+          className="mb-10 max-w-full"
+          alt="Logo"
+        />
        <h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
          {intl.formatMessage(messages.resetpassword)}
        </h2>
--- a/src/components/Settings/SettingsJellyfin.tsx
+++ b/src/components/Settings/SettingsJellyfin.tsx
@@ -9,7 +9,6 @@ import type { JellyfinSettings } from '@server/lib/settings';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
 import getConfig from 'next/config';
-import type React from 'react';
 import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
--- a/src/components/Settings/SettingsLayout.tsx
+++ b/src/components/Settings/SettingsLayout.tsx
@@ -5,7 +5,6 @@ import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
 import { MediaServerType } from '@server/constants/server';
 import getConfig from 'next/config';
-import type React from 'react';
 import { defineMessages, useIntl } from 'react-intl';

 const messages = defineMessages({
--- a/src/components/Setup/SetupLogin.tsx
+++ b/src/components/Setup/SetupLogin.tsx
@@ -5,7 +5,6 @@ import { useUser } from '@app/hooks/useUser';
 import { MediaServerType } from '@server/constants/server';
 import axios from 'axios';
 import getConfig from 'next/config';
-import type React from 'react';
 import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';

--- a/src/components/Setup/index.tsx
+++ b/src/components/Setup/index.tsx
@@ -11,6 +11,7 @@ import SetupSteps from '@app/components/Setup/SetupSteps';
 import useLocale from '@app/hooks/useLocale';
 import { MediaServerType } from '@server/constants/server';
 import axios from 'axios';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -77,7 +78,7 @@ const Setup = () => {
        <LanguagePicker />
      </div>
      <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-4xl">
-        <img
+        <Image
          src="/logo_stacked.svg"
          className="mb-10 max-w-full sm:mx-auto sm:max-w-md"
          alt="Logo"
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -20,7 +20,6 @@ import type { Watchlist } from '@server/entity/Watchlist';
 import type { MediaType } from '@server/models/Search';
 import axios from 'axios';
 import Link from 'next/link';
-import type React from 'react';
 import { Fragment, useCallback, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
--- a/src/components/TvDetails/Season/index.tsx
+++ b/src/components/TvDetails/Season/index.tsx
@@ -1,6 +1,7 @@
 import AirDateBadge from '@app/components/AirDateBadge';
 import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import type { SeasonWithEpisodes } from '@server/models/Tv';
+import Image from 'next/image';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';

@@ -54,7 +55,7 @@ const Season = ({ seasonNumber, tvId }: SeasonProps) => {
                  {episode.overview && <p>{episode.overview}</p>}
                </div>
                {episode.stillPath && (
-                  <img
+                  <Image
                    className="h-auto w-full rounded-lg xl:h-32 xl:w-auto"
                    src={`https://image.tmdb.org/t/p/original/${episode.stillPath}`}
                    alt=""
--- a/src/components/UserList/JellyfinImportModal.tsx
+++ b/src/components/UserList/JellyfinImportModal.tsx
@@ -5,7 +5,7 @@ import globalMessages from '@app/i18n/globalMessages';
 import type { UserResultsResponse } from '@server/interfaces/api/userInterfaces';
 import axios from 'axios';
 import getConfig from 'next/config';
-import type React from 'react';
+import Image from 'next/image';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -237,7 +237,7 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
                          </td>
                          <td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
                            <div className="flex items-center">
-                              <img
+                              <Image
                                className="h-10 w-10 flex-shrink-0 rounded-full"
                                src={user.thumb}
                                alt=""
--- a/src/components/UserList/PlexImportModal.tsx
+++ b/src/components/UserList/PlexImportModal.tsx
@@ -3,6 +3,7 @@ import Modal from '@app/components/Common/Modal';
 import useSettings from '@app/hooks/useSettings';
 import globalMessages from '@app/i18n/globalMessages';
 import axios from 'axios';
+import Image from 'next/image';
 import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
@@ -200,7 +201,7 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
                          </td>
                          <td className="whitespace-nowrap px-1 py-4 text-sm font-medium leading-5 text-gray-100 md:px-6">
                            <div className="flex items-center">
-                              <img
+                              <Image
                                className="h-10 w-10 flex-shrink-0 rounded-full"
                                src={user.thumb}
                                alt=""
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -29,6 +29,7 @@ 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';
@@ -613,7 +614,7 @@ const UserList = () => {
                    href={`/users/${user.id}`}
                    className="h-10 w-10 flex-shrink-0"
                  >
-                    <img
+                    <Image
                      className="h-10 w-10 rounded-full object-cover"
                      src={user.avatar}
                      alt=""
--- a/src/components/UserProfile/ProfileHeader/index.tsx
+++ b/src/components/UserProfile/ProfileHeader/index.tsx
@@ -2,6 +2,7 @@ import Button from '@app/components/Common/Button';
 import type { User } from '@app/hooks/useUser';
 import { Permission, useUser } from '@app/hooks/useUser';
 import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
+import Image from 'next/image';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';

@@ -40,7 +41,7 @@ const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
      <div className="flex items-end justify-items-end space-x-5">
        <div className="flex-shrink-0">
          <div className="relative">
-            <img
+            <Image
              className="h-24 w-24 rounded-full bg-gray-600 object-cover ring-1 ring-gray-700"
              src={user.avatar}
              alt=""