feat: tooltip foundation (#2950)

* feat: add foundation for tooltips

* fix: add lang

* refactor: remove React import where no longer necessary

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     'plugin:jsx-a11y/recommended',
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
+    'plugin:react/jsx-runtime',
     'prettier',
   ],
   parserOptions: {

package.json

@@ -72,6 +72,7 @@
     "react-intersection-observer": "9.4.0",
     "react-intl": "6.0.5",
     "react-markdown": "8.0.3",
+    "react-popper-tooltip": "^4.4.2",
     "react-select": "5.4.0",
     "react-spring": "9.5.2",
     "react-toast-notifications": "2.5.1",

server/lib/email/openpgpEncrypt.ts

@@ -27,7 +27,7 @@ class PGPEncryptor extends Transform {
 
   // just save the whole message
   _transform = (
-    chunk: any,
+    chunk: Uint8Array,
     _encoding: BufferEncoding,
     callback: TransformCallback
   ): void => {
@@ -185,6 +185,9 @@ class PGPEncryptor extends Transform {
 }
 
 export const openpgpEncrypt = (options: EncryptorOptions) => {
+  // Disabling this line because I don't want to fix it but I am tired
+  // of seeing the lint warning
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return function (mail: any, callback: () => unknown): void {
     if (!options.encryptionKeys.length) {
       setImmediate(callback);

server/lib/notifications/agents/gotify.ts

@@ -11,7 +11,7 @@ interface GotifyPayload {
   title: string;
   message: string;
   priority: number;
-  extras: any;
+  extras: Record<string, unknown>;
 }
 
 class GotifyAgent

src/components/AppDataWarning/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import Alert from '../Common/Alert';

src/components/CollectionDetails/index.tsx

@@ -2,7 +2,8 @@ import { DownloadIcon } from '@heroicons/react/outline';
 import { uniq } from 'lodash';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { useState } from 'react';
+
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import { MediaStatus } from '../../../server/constants/media';

src/components/Common/Accordion/index.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { useState } from 'react';
 import AnimateHeight from 'react-animate-height';
 
 export interface AccordionProps {
-  children: (args: AccordionChildProps) => React.ReactElement<any, any> | null;
+  children: (args: AccordionChildProps) => JSX.Element;
   /** If true, only one accordion item can be open at any time */
   single?: boolean;
   /** If true, at least one accordion item will always be open */
@@ -13,7 +13,7 @@ export interface AccordionProps {
 export interface AccordionChildProps {
   openIndexes: number[];
   handleClick(index: number): void;
-  AccordionContent: any;
+  AccordionContent: typeof AccordionContent;
 }
 
 type AccordionContentProps = {

src/components/Common/Alert/index.tsx

@@ -3,7 +3,6 @@ import {
   InformationCircleIcon,
   XCircleIcon,
 } from '@heroicons/react/solid';
-import React from 'react';
 
 interface AlertProps {
   title?: React.ReactNode;

src/components/Common/Badge/index.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import React from 'react';
 
 interface BadgeProps {
   badgeType?: 'default' | 'primary' | 'danger' | 'warning' | 'success';

src/components/Common/Button/index.tsx

@@ -1,5 +1,5 @@
-import type { ForwardedRef } from 'react';
 import React from 'react';
+import type { ForwardedRef } from 'react';
 
 export type ButtonType =
   | 'default'

src/components/Common/ButtonWithDropdown/index.tsx

@@ -1,10 +1,6 @@
 import { ChevronDownIcon } from '@heroicons/react/solid';
-import type {
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  ReactNode,
-} from 'react';
-import React, { useRef, useState } from 'react';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { useRef, useState } from 'react';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { withProperties } from '../../../utils/typeHelpers';
 import Transition from '../../Transition';
@@ -41,8 +37,8 @@ const DropdownItem = ({
 
 interface ButtonWithDropdownProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
-  text: ReactNode;
-  dropdownIcon?: ReactNode;
+  text: React.ReactNode;
+  dropdownIcon?: React.ReactNode;
   buttonType?: 'primary' | 'ghost';
 }
 

src/components/Common/CachedImage/index.tsx

@@ -1,6 +1,6 @@
 import type { ImageProps } from 'next/image';
 import Image from 'next/image';
-import React from 'react';
+
 import useSettings from '../../../hooks/useSettings';
 
 /**

src/components/Common/ConfirmButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import useClickOutside from '../../../hooks/useClickOutside';
 import Button from '../Button';
 

src/components/Common/Header/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface HeaderProps {
   extraMargin?: number;
   subtext?: React.ReactNode;

src/components/Common/List/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { withProperties } from '../../../utils/typeHelpers';
 
 interface ListItemProps {

src/components/Common/ListView/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useIntl } from 'react-intl';
 import type {
   MovieResult,

src/components/Common/LoadingSpinner/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const SmallLoadingSpinner = () => {
   return (
     <div className="inset-0 flex h-full w-full items-center justify-center text-gray-200">

src/components/Common/Modal/index.tsx

@@ -1,5 +1,5 @@
-import type { MouseEvent, ReactNode } from 'react';
-import React, { useRef } from 'react';
+import type { MouseEvent } from 'react';
+import { useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { useIntl } from 'react-intl';
 import useClickOutside from '../../../hooks/useClickOutside';
@@ -30,10 +30,10 @@ interface ModalProps {
   tertiaryButtonType?: ButtonType;
   disableScrollLock?: boolean;
   backgroundClickable?: boolean;
-  iconSvg?: ReactNode;
+  iconSvg?: React.ReactNode;
   loading?: boolean;
   backdrop?: string;
-  children?: ReactNode;
+  children?: React.ReactNode;
 }
 
 const Modal = ({

src/components/Common/PageTitle/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import useSettings from '../../../hooks/useSettings';
 import Head from 'next/head';
 

src/components/Common/PlayButton/index.tsx

@@ -1,5 +1,3 @@
-import type { ReactNode } from 'react';
-import React from 'react';
 import ButtonWithDropdown from '../ButtonWithDropdown';
 
 interface PlayButtonProps {
@@ -9,7 +7,7 @@ interface PlayButtonProps {
 export interface PlayButtonLink {
   text: string;
   url: string;
-  svg: ReactNode;
+  svg: React.ReactNode;
 }
 
 const PlayButton = ({ links }: PlayButtonProps) => {

src/components/Common/ProgressCircle/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 interface ProgressCircleProps {
   className?: string;

src/components/Common/SensitiveInput/index.tsx

@@ -1,6 +1,7 @@
 import { EyeIcon, EyeOffIcon } from '@heroicons/react/solid';
 import { Field } from 'formik';
-import React, { useState } from 'react';
+
+import { useState } from 'react';
 
 interface CustomInputProps extends React.ComponentProps<'input'> {
   as?: 'input';

src/components/Common/SettingsTabs/index.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import type { Permission } from '../../../../server/lib/permissions';
 import { hasPermission } from '../../../../server/lib/permissions';
 import { useUser } from '../../../hooks/useUser';

src/components/Common/SlideOver/index.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { XIcon } from '@heroicons/react/outline';
-import React, { useEffect, useRef, useState } from 'react';
+
+import { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
 import Transition from '../../Transition';

src/components/Common/Table/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { withProperties } from '../../../utils/typeHelpers';
 
 type TBodyProps = {

src/components/Common/Tooltip/index.tsx

@@ -0,0 +1,36 @@
+import { usePopperTooltip } from 'react-popper-tooltip';
+import type { Config } from 'react-popper-tooltip';
+
+type TooltipProps = {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  tooltipConfig?: Config;
+};
+
+const Tooltip = ({ children, content, tooltipConfig }: TooltipProps) => {
+  const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =
+    usePopperTooltip({
+      followCursor: true,
+      placement: 'left-end',
+      ...tooltipConfig,
+    });
+
+  return (
+    <>
+      <div ref={setTriggerRef}>{children}</div>
+      {visible && (
+        <div
+          ref={setTooltipRef}
+          {...getTooltipProps({
+            className:
+              'bg-gray-800 px-2 py-1 rounded border border-gray-600 shadow text-gray-100',
+          })}
+        >
+          {content}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Tooltip;

src/components/CompanyCard/index.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 interface CompanyCardProps {
   name: string;

src/components/Discover/DiscoverMovieGenre/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { MovieResult } from '../../../../server/models/Search';
 import ListView from '../../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';

src/components/Discover/DiscoverMovieLanguage/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { MovieResult } from '../../../../server/models/Search';
 import ListView from '../../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';

src/components/Discover/DiscoverMovies.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { MovieResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';

src/components/Discover/DiscoverNetwork/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { TvResult } from '../../../../server/models/Search';
 import ListView from '../../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';

src/components/Discover/DiscoverStudio/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { MovieResult } from '../../../../server/models/Search';
 import ListView from '../../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';

src/components/Discover/DiscoverTv.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { TvResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';

src/components/Discover/DiscoverTvGenre/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { TvResult } from '../../../../server/models/Search';
 import ListView from '../../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';

src/components/Discover/DiscoverTvLanguage/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { TvResult } from '../../../../server/models/Search';
 import ListView from '../../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';

src/components/Discover/DiscoverTvUpcoming.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { TvResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';

src/components/Discover/MovieGenreList/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';

src/components/Discover/MovieGenreSlider/index.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { ArrowCircleRightIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';

src/components/Discover/NetworkSlider/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import CompanyCard from '../../CompanyCard';
 import Slider from '../../Slider';

src/components/Discover/StudioSlider/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import CompanyCard from '../../CompanyCard';
 import Slider from '../../Slider';

src/components/Discover/Trending.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type {
   MovieResult,
   TvResult,

src/components/Discover/TvGenreList/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';

src/components/Discover/TvGenreSlider/index.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { ArrowCircleRightIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { GenreSliderItem } from '../../../../server/interfaces/api/discoverInterfaces';

src/components/Discover/Upcoming.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { MovieResult } from '../../../server/models/Search';
 import ListView from '../Common/ListView';
 import { defineMessages, useIntl } from 'react-intl';

src/components/Discover/index.tsx

@@ -1,6 +1,6 @@
 import { ArrowCircleRightIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { MediaResultsResponse } from '../../../server/interfaces/api/mediaInterfaces';

src/components/DownloadBlock/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import type { DownloadingItem } from '../../../server/lib/downloadtracker';
 import Badge from '../Common/Badge';

src/components/ExternalLinkBlock/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MediaType } from '../../../server/constants/media';
 import ImdbLogo from '../../assets/services/imdb.svg';
 import PlexLogo from '../../assets/services/plex.svg';

src/components/GenreCard/index.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { withProperties } from '../../utils/typeHelpers';
 import CachedImage from '../Common/CachedImage';
 

src/components/IssueBlock/index.tsx

@@ -5,7 +5,7 @@ import {
   UserIcon,
 } from '@heroicons/react/solid';
 import Link from 'next/link';
-import React from 'react';
+
 import { useIntl } from 'react-intl';
 import type Issue from '../../../server/entity/Issue';
 import { useUser } from '../../hooks/useUser';

src/components/IssueDetails/IssueComment/index.tsx

@@ -4,7 +4,7 @@ import { DotsVerticalIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import ReactMarkdown from 'react-markdown';
 import * as Yup from 'yup';

src/components/IssueDetails/IssueDescription/index.tsx

@@ -1,7 +1,7 @@
 import { Menu, Transition } from '@headlessui/react';
 import { DotsVerticalIcon } from '@heroicons/react/solid';
 import { Field, Form, Formik } from 'formik';
-import React, { Fragment, useState } from 'react';
+import { Fragment, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import ReactMarkdown from 'react-markdown';
 import { Permission, useUser } from '../../../hooks/useUser';

src/components/IssueDetails/index.tsx

@@ -10,7 +10,7 @@ import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

src/components/IssueList/IssueItem/index.tsx

@@ -1,6 +1,6 @@
 import { EyeIcon } from '@heroicons/react/solid';
 import Link from 'next/link';
-import React from 'react';
+
 import { useInView } from 'react-intersection-observer';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import useSWR from 'swr';

src/components/IssueList/index.tsx

@@ -5,7 +5,8 @@ import {
   SortDescendingIcon,
 } from '@heroicons/react/solid';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+
+import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { IssueResultsResponse } from '../../../server/interfaces/api/issueInterfaces';

src/components/IssueModal/CreateIssueModal/index.tsx

@@ -4,7 +4,7 @@ import { ArrowCircleRightIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Formik } from 'formik';
 import Link from 'next/link';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

src/components/IssueModal/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Transition from '../Transition';
 import CreateIssueModal from './CreateIssueModal';
 

src/components/JSONEditor/index.tsx

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'react';
-import React from 'react';
+
 import AceEditor from 'react-ace';
 import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-dracula';

src/components/LanguageSelector/index.tsx

@@ -1,5 +1,5 @@
 import { sortBy } from 'lodash';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import type { CSSObjectWithLabel } from 'react-select';
 import Select from 'react-select';

src/components/Layout/LanguagePicker/index.tsx

@@ -1,5 +1,5 @@
 import { TranslateIcon } from '@heroicons/react/solid';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import type { AvailableLocale } from '../../../context/LanguageContext';
 import { availableLanguages } from '../../../context/LanguageContext';

src/components/Layout/Notifications/index.tsx

@@ -1,5 +1,4 @@
 import { BellIcon } from '@heroicons/react/outline';
-import React from 'react';
 
 const Notifications = () => {
   return (

src/components/Layout/SearchInput/index.tsx

@@ -1,6 +1,6 @@
 import { XCircleIcon } from '@heroicons/react/outline';
 import { SearchIcon } from '@heroicons/react/solid';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSearchInput from '../../../hooks/useSearchInput';
 

src/components/Layout/Sidebar/index.tsx

@@ -8,8 +8,7 @@ import {
 } from '@heroicons/react/outline';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import type { ReactNode } from 'react';
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { Permission, useUser } from '../../../hooks/useUser';
@@ -31,7 +30,7 @@ interface SidebarProps {
 
 interface SidebarLinkProps {
   href: string;
-  svgIcon: ReactNode;
+  svgIcon: React.ReactNode;
   messagesKey: keyof typeof messages;
   activeRegExp: RegExp;
   as?: string;

src/components/Layout/UserDropdown/index.tsx

@@ -2,7 +2,7 @@ import { LogoutIcon } from '@heroicons/react/outline';
 import { CogIcon, UserIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import Link from 'next/link';
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { useUser } from '../../../hooks/useUser';

src/components/Layout/VersionStatus/index.tsx

@@ -5,7 +5,7 @@ import {
   ServerIcon,
 } from '@heroicons/react/outline';
 import Link from 'next/link';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { StatusResponse } from '../../../../server/interfaces/api/settingsInterfaces';

src/components/Layout/index.tsx

@@ -1,7 +1,8 @@
 import { MenuAlt2Icon } from '@heroicons/react/outline';
 import { ArrowLeftIcon } from '@heroicons/react/solid';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+
+import { useEffect, useState } from 'react';
 import type { AvailableLocale } from '../../context/LanguageContext';
 import useLocale from '../../hooks/useLocale';
 import useSettings from '../../hooks/useSettings';

src/components/Login/LocalLogin.tsx

@@ -2,7 +2,7 @@ import { LoginIcon, SupportIcon } from '@heroicons/react/outline';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import * as Yup from 'yup';
 import useSettings from '../../hooks/useSettings';

src/components/Login/index.tsx

@@ -1,7 +1,7 @@
 import { XCircleIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import useSettings from '../../hooks/useSettings';

src/components/ManageSlideOver/index.tsx

@@ -2,7 +2,7 @@ import { ServerIcon, ViewListIcon } from '@heroicons/react/outline';
 import { CheckCircleIcon, DocumentRemoveIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import Link from 'next/link';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import { IssueStatus } from '../../../server/constants/issue';

src/components/MediaSlider/ShowMoreCard/index.tsx

@@ -1,6 +1,6 @@
 import { ArrowCircleRightIcon } from '@heroicons/react/solid';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({

src/components/MediaSlider/index.tsx

@@ -1,6 +1,6 @@
 import { ArrowCircleRightIcon } from '@heroicons/react/outline';
 import Link from 'next/link';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import useSWRInfinite from 'swr/infinite';
 import { MediaStatus } from '../../../server/constants/media';
 import type {

src/components/MovieDetails/MovieCast/index.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { MovieDetails } from '../../../../server/models/Movie';

src/components/MovieDetails/MovieCrew/index.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { MovieDetails } from '../../../../server/models/Movie';

src/components/MovieDetails/MovieRecommendations.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { MovieDetails } from '../../../server/models/Movie';

src/components/MovieDetails/MovieSimilar.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { MovieDetails } from '../../../server/models/Movie';

src/components/MovieDetails/index.tsx

@@ -16,7 +16,8 @@ import 'country-flag-icons/3x2/flags.css';
 import { uniqBy } from 'lodash';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { useEffect, useMemo, useState } from 'react';
+
+import { useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { RTRating } from '../../../server/api/rottentomatoes';
@@ -40,6 +41,7 @@ import LoadingSpinner from '../Common/LoadingSpinner';
 import PageTitle from '../Common/PageTitle';
 import type { PlayButtonLink } from '../Common/PlayButton';
 import PlayButton from '../Common/PlayButton';
+import Tooltip from '../Common/Tooltip';
 import ExternalLinkBlock from '../ExternalLinkBlock';
 import IssueModal from '../IssueModal';
 import ManageSlideOver from '../ManageSlideOver';
@@ -74,6 +76,9 @@ const messages = defineMessages({
   streamingproviders: 'Currently Streaming On',
   productioncountries:
     'Production {countryCount, plural, one {Country} other {Countries}}',
+  theatricalrelease: 'Theatrical Release',
+  digitalrelease: 'Digital Release',
+  physicalrelease: 'Physical Release',
 });
 
 interface MovieDetailsProps {
@@ -548,22 +553,36 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                     >
                       {r.type === 3 ? (
                         // Theatrical
-                        <TicketIcon className="h-4 w-4" />
+                        <Tooltip
+                          content={intl.formatMessage(
+                            messages.theatricalrelease
+                          )}
+                        >
+                          <TicketIcon className="h-4 w-4" />
+                        </Tooltip>
                       ) : r.type === 4 ? (
                         // Digital
-                        <CloudIcon className="h-4 w-4" />
+                        <Tooltip
+                          content={intl.formatMessage(messages.digitalrelease)}
+                        >
+                          <CloudIcon className="h-4 w-4" />
+                        </Tooltip>
                       ) : (
                         // Physical
-                        <svg
-                          className="h-4 w-4"
-                          viewBox="0 0 24 24"
-                          xmlns="http://www.w3.org/2000/svg"
+                        <Tooltip
+                          content={intl.formatMessage(messages.physicalrelease)}
                         >
-                          <path
-                            d="m12 2c-5.5242 0-10 4.4758-10 10 0 5.5242 4.4758 10 10 10 5.5242 0 10-4.4758 10-10 0-5.5242-4.4758-10-10-10zm0 18.065c-4.4476 0-8.0645-3.6169-8.0645-8.0645 0-4.4476 3.6169-8.0645 8.0645-8.0645 4.4476 0 8.0645 3.6169 8.0645 8.0645 0 4.4476-3.6169 8.0645-8.0645 8.0645zm0-14.516c-3.5565 0-6.4516 2.8952-6.4516 6.4516h1.2903c0-2.8468 2.3145-5.1613 5.1613-5.1613zm0 2.9032c-1.9597 0-3.5484 1.5887-3.5484 3.5484s1.5887 3.5484 3.5484 3.5484 3.5484-1.5887 3.5484-3.5484-1.5887-3.5484-3.5484-3.5484zm0 4.8387c-0.71371 0-1.2903-0.57661-1.2903-1.2903s0.57661-1.2903 1.2903-1.2903 1.2903 0.57661 1.2903 1.2903-0.57661 1.2903-1.2903 1.2903z"
-                            fill="currentColor"
-                          />
-                        </svg>
+                          <svg
+                            className="h-4 w-4"
+                            viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="m12 2c-5.5242 0-10 4.4758-10 10 0 5.5242 4.4758 10 10 10 5.5242 0 10-4.4758 10-10 0-5.5242-4.4758-10-10-10zm0 18.065c-4.4476 0-8.0645-3.6169-8.0645-8.0645 0-4.4476 3.6169-8.0645 8.0645-8.0645 4.4476 0 8.0645 3.6169 8.0645 8.0645 0 4.4476-3.6169 8.0645-8.0645 8.0645zm0-14.516c-3.5565 0-6.4516 2.8952-6.4516 6.4516h1.2903c0-2.8468 2.3145-5.1613 5.1613-5.1613zm0 2.9032c-1.9597 0-3.5484 1.5887-3.5484 3.5484s1.5887 3.5484 3.5484 3.5484 3.5484-1.5887 3.5484-3.5484-1.5887-3.5484-3.5484-3.5484zm0 4.8387c-0.71371 0-1.2903-0.57661-1.2903-1.2903s0.57661-1.2903 1.2903-1.2903 1.2903 0.57661 1.2903 1.2903-0.57661 1.2903-1.2903 1.2903z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </Tooltip>
                       )}
                       <span className="ml-1.5">
                         {intl.formatDate(r.release_date, {

src/components/NotificationTypeSelector/NotificationType/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { NotificationItem } from '..';
 import { hasNotificationType } from '..';
 

src/components/NotificationTypeSelector/index.tsx

@@ -1,5 +1,5 @@
 import { sortBy } from 'lodash';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSettings from '../../hooks/useSettings';
 import type { User } from '../../hooks/useUser';

src/components/PWAHeader/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface PWAHeaderProps {
   applicationTitle?: string;
 }

src/components/PermissionEdit/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import type { User } from '../../hooks/useUser';
 import { Permission } from '../../hooks/useUser';

src/components/PermissionOption/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { hasPermission } from '../../../server/lib/permissions';
 import useSettings from '../../hooks/useSettings';
 import type { User } from '../../hooks/useUser';

src/components/PersonCard/index.tsx

@@ -1,6 +1,6 @@
 import { UserCircleIcon } from '@heroicons/react/solid';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import CachedImage from '../Common/CachedImage';
 
 interface PersonCardProps {

src/components/PersonDetails/index.tsx

@@ -1,6 +1,6 @@
 import { groupBy } from 'lodash';
 import { useRouter } from 'next/router';
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import TruncateMarkup from 'react-truncate-markup';
 import useSWR from 'swr';

src/components/PlexLoginButton/index.tsx

@@ -1,5 +1,5 @@
 import { LoginIcon } from '@heroicons/react/outline';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import globalMessages from '../../i18n/globalMessages';
 import PlexOAuth from '../../utils/plex';

src/components/RegionSelector/index.tsx

@@ -3,7 +3,7 @@ import { CheckIcon, ChevronDownIcon } from '@heroicons/react/solid';
 import { hasFlag } from 'country-flag-icons';
 import 'country-flag-icons/3x2/flags.css';
 import { sortBy } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { Region } from '../../../server/lib/settings';

src/components/RequestBlock/index.tsx

@@ -9,7 +9,7 @@ import {
 } from '@heroicons/react/solid';
 import axios from 'axios';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { MediaRequestStatus } from '../../../server/constants/media';
 import type { MediaRequest } from '../../../server/entity/MediaRequest';

src/components/RequestButton/index.tsx

@@ -5,7 +5,8 @@ import {
   XIcon,
 } from '@heroicons/react/solid';
 import axios from 'axios';
-import React, { useMemo, useState } from 'react';
+
+import { useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import {
   MediaRequestStatus,

src/components/RequestCard/index.tsx

@@ -7,7 +7,7 @@ import {
 } from '@heroicons/react/solid';
 import axios from 'axios';
 import Link from 'next/link';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';

src/components/RequestList/RequestItem/index.tsx

@@ -7,7 +7,7 @@ import {
 } from '@heroicons/react/solid';
 import axios from 'axios';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';

src/components/RequestList/index.tsx

@@ -6,7 +6,8 @@ import {
 } from '@heroicons/react/solid';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+
+import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces';

src/components/RequestModal/AdvancedRequester/index.tsx

@@ -3,7 +3,7 @@ import { Listbox, Transition } from '@headlessui/react';
 import { AdjustmentsIcon } from '@heroicons/react/outline';
 import { CheckIcon, ChevronDownIcon } from '@heroicons/react/solid';
 import { isEqual } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import Select from 'react-select';
 import useSWR from 'swr';

src/components/RequestModal/CollectionRequestModal.tsx

@@ -1,6 +1,7 @@
 import { DownloadIcon } from '@heroicons/react/outline';
 import axios from 'axios';
-import React, { useCallback, useEffect, useState } from 'react';
+
+import { useCallback, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';

src/components/RequestModal/MovieRequestModal.tsx

@@ -1,6 +1,7 @@
 import { DownloadIcon } from '@heroicons/react/outline';
 import axios from 'axios';
-import React, { useCallback, useEffect, useState } from 'react';
+
+import { useCallback, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';

src/components/RequestModal/QuotaDisplay/index.tsx

@@ -1,6 +1,7 @@
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid';
 import Link from 'next/link';
-import React, { useState } from 'react';
+
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import type { QuotaStatus } from '../../../../server/interfaces/api/userInterfaces';
 import ProgressCircle from '../../Common/ProgressCircle';

src/components/RequestModal/SearchByNameModal/index.tsx

@@ -1,5 +1,5 @@
 import { DownloadIcon } from '@heroicons/react/outline';
-import React from 'react';
+
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { SonarrSeries } from '../../../../server/api/servarr/sonarr';

src/components/RequestModal/TvRequestModal.tsx

@@ -1,6 +1,7 @@
 import { DownloadIcon } from '@heroicons/react/outline';
 import axios from 'axios';
-import React, { useState } from 'react';
+
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';

src/components/RequestModal/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { MediaStatus } from '../../../server/constants/media';
 import type { MediaRequest } from '../../../server/entity/MediaRequest';
 import Transition from '../Transition';

src/components/ResetPassword/RequestResetLink.tsx

@@ -2,7 +2,7 @@ import { ArrowLeftIcon, MailIcon } from '@heroicons/react/solid';
 import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import * as Yup from 'yup';
 import Button from '../Common/Button';

src/components/ResetPassword/index.tsx

@@ -3,7 +3,7 @@ import axios from 'axios';
 import { Form, Formik } from 'formik';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import * as Yup from 'yup';
 import globalMessages from '../../i18n/globalMessages';

src/components/Search/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useRouter } from 'next/router';
 import type {
   TvResult,

src/components/Settings/CopyButton.tsx

@@ -1,5 +1,5 @@
 import { ClipboardCopyIcon } from '@heroicons/react/solid';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useClipboard from 'react-use-clipboard';