Merge remote-tracking branch 'overseerr/develop' into develop

2023-01-27 17:55:55 +13:00
parent 2714cbcefd 51b05cd8fb
commit ad3d922440
158 changed files with 10835 additions and 4524 deletions
--- a/src/components/Layout/LanguagePicker/index.tsx
+++ b/src/components/Layout/LanguagePicker/index.tsx
@@ -3,7 +3,7 @@ import { availableLanguages } from '@app/context/LanguageContext';
 import useClickOutside from '@app/hooks/useClickOutside';
 import useLocale from '@app/hooks/useLocale';
 import { Transition } from '@headlessui/react';
-import { TranslateIcon } from '@heroicons/react/solid';
+import { LanguageIcon } from '@heroicons/react/24/solid';
 import { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';

@@ -28,7 +28,7 @@ const LanguagePicker = () => {
          aria-label="Language Picker"
          onClick={() => setDropdownOpen(true)}
        >
-          <TranslateIcon className="h-6 w-6" />
+          <LanguageIcon className="h-6 w-6" />
        </button>
      </div>
      <Transition
--- a/src/components/Layout/MobileMenu/index.tsx
+++ b/src/components/Layout/MobileMenu/index.tsx
@@ -0,0 +1,210 @@
+import { menuMessages } from '@app/components/Layout/Sidebar';
+import useClickOutside from '@app/hooks/useClickOutside';
+import { Permission, useUser } from '@app/hooks/useUser';
+import { Transition } from '@headlessui/react';
+import {
+  ClockIcon,
+  CogIcon,
+  EllipsisHorizontalIcon,
+  ExclamationTriangleIcon,
+  FilmIcon,
+  SparklesIcon,
+  TvIcon,
+  UsersIcon,
+} from '@heroicons/react/24/outline';
+import {
+  ClockIcon as FilledClockIcon,
+  CogIcon as FilledCogIcon,
+  ExclamationTriangleIcon as FilledExclamationTriangleIcon,
+  FilmIcon as FilledFilmIcon,
+  SparklesIcon as FilledSparklesIcon,
+  TvIcon as FilledTvIcon,
+  UsersIcon as FilledUsersIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/solid';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { cloneElement, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+
+interface MenuLink {
+  href: string;
+  svgIcon: JSX.Element;
+  svgIconSelected: JSX.Element;
+  content: React.ReactNode;
+  activeRegExp: RegExp;
+  as?: string;
+  requiredPermission?: Permission | Permission[];
+  permissionType?: 'and' | 'or';
+  dataTestId?: string;
+}
+
+const MobileMenu = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const intl = useIntl();
+  const [isOpen, setIsOpen] = useState(false);
+  const { hasPermission } = useUser();
+  const router = useRouter();
+  useClickOutside(ref, () => {
+    setTimeout(() => {
+      if (isOpen) {
+        setIsOpen(false);
+      }
+    }, 150);
+  });
+
+  const toggle = () => setIsOpen(!isOpen);
+
+  const menuLinks: MenuLink[] = [
+    {
+      href: '/',
+      content: intl.formatMessage(menuMessages.dashboard),
+      svgIcon: <SparklesIcon className="h-6 w-6" />,
+      svgIconSelected: <FilledSparklesIcon className="h-6 w-6" />,
+      activeRegExp: /^\/(discover\/?)?$/,
+    },
+    {
+      href: '/discover/movies',
+      content: intl.formatMessage(menuMessages.browsemovies),
+      svgIcon: <FilmIcon className="h-6 w-6" />,
+      svgIconSelected: <FilledFilmIcon className="h-6 w-6" />,
+      activeRegExp: /^\/discover\/movies$/,
+    },
+    {
+      href: '/discover/tv',
+      content: intl.formatMessage(menuMessages.browsetv),
+      svgIcon: <TvIcon className="h-6 w-6" />,
+      svgIconSelected: <FilledTvIcon className="h-6 w-6" />,
+      activeRegExp: /^\/discover\/tv$/,
+    },
+    {
+      href: '/requests',
+      content: intl.formatMessage(menuMessages.requests),
+      svgIcon: <ClockIcon className="h-6 w-6" />,
+      svgIconSelected: <FilledClockIcon className="h-6 w-6" />,
+      activeRegExp: /^\/requests/,
+    },
+    {
+      href: '/issues',
+      content: intl.formatMessage(menuMessages.issues),
+      svgIcon: <ExclamationTriangleIcon className="h-6 w-6" />,
+      svgIconSelected: <FilledExclamationTriangleIcon className="h-6 w-6" />,
+      activeRegExp: /^\/issues/,
+      requiredPermission: [
+        Permission.MANAGE_ISSUES,
+        Permission.CREATE_ISSUES,
+        Permission.VIEW_ISSUES,
+      ],
+      permissionType: 'or',
+    },
+    {
+      href: '/users',
+      content: intl.formatMessage(menuMessages.users),
+      svgIcon: <UsersIcon className="mr-3 h-6 w-6" />,
+      svgIconSelected: <FilledUsersIcon className="mr-3 h-6 w-6" />,
+      activeRegExp: /^\/users/,
+      requiredPermission: Permission.MANAGE_USERS,
+      dataTestId: 'sidebar-menu-users',
+    },
+    {
+      href: '/settings',
+      content: intl.formatMessage(menuMessages.settings),
+      svgIcon: <CogIcon className="mr-3 h-6 w-6" />,
+      svgIconSelected: <FilledCogIcon className="mr-3 h-6 w-6" />,
+      activeRegExp: /^\/settings/,
+      requiredPermission: Permission.ADMIN,
+      dataTestId: 'sidebar-menu-settings',
+    },
+  ];
+
+  const filteredLinks = menuLinks.filter(
+    (link) =>
+      !link.requiredPermission ||
+      hasPermission(link.requiredPermission, {
+        type: link.permissionType ?? 'and',
+      })
+  );
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50">
+      <Transition
+        show={isOpen}
+        as="div"
+        ref={ref}
+        enter="transition transform duration-500"
+        enterFrom="opacity-0 translate-y-0"
+        enterTo="opacity-100 -translate-y-full"
+        leave="transition duration-500 transform"
+        leaveFrom="opacity-100 -translate-y-full"
+        leaveTo="opacity-0 translate-y-0"
+        className="absolute top-0 left-0 right-0 flex w-full -translate-y-full transform flex-col space-y-6 border-t border-gray-600 bg-gray-900 bg-opacity-90 px-6 py-6 font-semibold text-gray-100 backdrop-blur"
+      >
+        {filteredLinks.map((link) => {
+          const isActive = router.pathname.match(link.activeRegExp);
+          return (
+            <Link key={`mobile-menu-link-${link.href}`} href={link.href}>
+              <a
+                className={`flex items-center space-x-2 ${
+                  isActive ? 'text-indigo-500' : ''
+                }`}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    setIsOpen(false);
+                  }
+                }}
+                onClick={() => setIsOpen(false)}
+                role="button"
+                tabIndex={0}
+              >
+                {cloneElement(isActive ? link.svgIconSelected : link.svgIcon, {
+                  className: 'h-5 w-5',
+                })}
+                <span>{link.content}</span>
+              </a>
+            </Link>
+          );
+        })}
+      </Transition>
+      <div className="padding-bottom-safe border-t border-gray-600 bg-gray-800 bg-opacity-90 backdrop-blur">
+        <div className="flex h-full items-center justify-between px-6 py-4 text-gray-100">
+          {filteredLinks.slice(0, 4).map((link) => {
+            const isActive =
+              router.pathname.match(link.activeRegExp) && !isOpen;
+            return (
+              <Link key={`mobile-menu-link-${link.href}`} href={link.href}>
+                <a
+                  className={`flex flex-col items-center space-y-1 ${
+                    isActive ? 'text-indigo-500' : ''
+                  }`}
+                >
+                  {cloneElement(
+                    isActive ? link.svgIconSelected : link.svgIcon,
+                    {
+                      className: 'h-6 w-6',
+                    }
+                  )}
+                </a>
+              </Link>
+            );
+          })}
+          {filteredLinks.length > 4 && (
+            <button
+              className={`flex flex-col items-center space-y-1 ${
+                isOpen ? 'text-indigo-500' : ''
+              }`}
+              onClick={() => toggle()}
+            >
+              {isOpen ? (
+                <XMarkIcon className="h-6 w-6" />
+              ) : (
+                <EllipsisHorizontalIcon className="h-6 w-6" />
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MobileMenu;
--- a/src/components/Layout/Notifications/index.tsx
+++ b/src/components/Layout/Notifications/index.tsx
@@ -1,4 +1,4 @@
-import { BellIcon } from '@heroicons/react/outline';
+import { BellIcon } from '@heroicons/react/24/outline';

 const Notifications = () => {
  return (
--- a/src/components/Layout/SearchInput/index.tsx
+++ b/src/components/Layout/SearchInput/index.tsx
@@ -1,6 +1,6 @@
 import useSearchInput from '@app/hooks/useSearchInput';
-import { XCircleIcon } from '@heroicons/react/outline';
-import { SearchIcon } from '@heroicons/react/solid';
+import { XCircleIcon } from '@heroicons/react/24/outline';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import { defineMessages, useIntl } from 'react-intl';

 const messages = defineMessages({
@@ -18,7 +18,7 @@ const SearchInput = () => {
        </label>
        <div className="relative flex w-full items-center text-white focus-within:text-gray-200">
          <div className="pointer-events-none absolute inset-y-0 left-4 flex items-center">
-            <SearchIcon className="h-5 w-5" />
+            <MagnifyingGlassIcon className="h-5 w-5" />
          </div>
          <input
            id="search_field"
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -6,18 +6,22 @@ import { Transition } from '@headlessui/react';
 import {
  ClockIcon,
  CogIcon,
-  ExclamationIcon,
+  ExclamationTriangleIcon,
+  FilmIcon,
  SparklesIcon,
+  TvIcon,
  UsersIcon,
-  XIcon,
-} from '@heroicons/react/outline';
+  XMarkIcon,
+} from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Fragment, useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';

-const messages = defineMessages({
+export const menuMessages = defineMessages({
  dashboard: 'Discover',
+  browsemovies: 'Movies',
+  browsetv: 'Series',
  requests: 'Requests',
  issues: 'Issues',
  users: 'Users',
@@ -32,7 +36,7 @@ interface SidebarProps {
 interface SidebarLinkProps {
  href: string;
  svgIcon: React.ReactNode;
-  messagesKey: keyof typeof messages;
+  messagesKey: keyof typeof menuMessages;
  activeRegExp: RegExp;
  as?: string;
  requiredPermission?: Permission | Permission[];
@@ -45,7 +49,19 @@ const SidebarLinks: SidebarLinkProps[] = [
    href: '/',
    messagesKey: 'dashboard',
    svgIcon: <SparklesIcon className="mr-3 h-6 w-6" />,
-    activeRegExp: /^\/(discover\/?(movies|tv)?)?$/,
+    activeRegExp: /^\/(discover\/?)?$/,
+  },
+  {
+    href: '/discover/movies',
+    messagesKey: 'browsemovies',
+    svgIcon: <FilmIcon className="mr-3 h-6 w-6" />,
+    activeRegExp: /^\/discover\/movies$/,
+  },
+  {
+    href: '/discover/tv',
+    messagesKey: 'browsetv',
+    svgIcon: <TvIcon className="mr-3 h-6 w-6" />,
+    activeRegExp: /^\/discover\/tv$/,
  },
  {
    href: '/requests',
@@ -57,7 +73,7 @@ const SidebarLinks: SidebarLinkProps[] = [
    href: '/issues',
    messagesKey: 'issues',
    svgIcon: (
-      <ExclamationIcon className="mr-3 h-6 w-6 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
+      <ExclamationTriangleIcon className="mr-3 h-6 w-6 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
    ),
    activeRegExp: /^\/issues/,
    requiredPermission: [
@@ -127,7 +143,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                      aria-label="Close sidebar"
                      onClick={() => setClosed()}
                    >
-                      <XIcon className="h-6 w-6 text-white" />
+                      <XMarkIcon className="h-6 w-6 text-white" />
                    </button>
                  </div>
                  <div
@@ -177,7 +193,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                            >
                              {sidebarLink.svgIcon}
                              {intl.formatMessage(
-                                messages[sidebarLink.messagesKey]
+                                menuMessages[sidebarLink.messagesKey]
                              )}
                            </a>
                          </Link>
@@ -242,7 +258,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                        data-testid={sidebarLink.dataTestId}
                      >
                        {sidebarLink.svgIcon}
-                        {intl.formatMessage(messages[sidebarLink.messagesKey])}
+                        {intl.formatMessage(
+                          menuMessages[sidebarLink.messagesKey]
+                        )}
                      </a>
                    </Link>
                  );
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -1,8 +1,11 @@
 import MiniQuotaDisplay from '@app/components/Layout/UserDropdown/MiniQuotaDisplay';
 import { useUser } from '@app/hooks/useUser';
 import { Menu, Transition } from '@headlessui/react';
-import { ClockIcon, LogoutIcon } from '@heroicons/react/outline';
-import { CogIcon, UserIcon } from '@heroicons/react/solid';
+import {
+  ArrowRightOnRectangleIcon,
+  ClockIcon,
+} from '@heroicons/react/24/outline';
+import { CogIcon, UserIcon } from '@heroicons/react/24/solid';
 import axios from 'axios';
 import type { LinkProps } from 'next/link';
 import Link from 'next/link';
@@ -147,7 +150,7 @@ const UserDropdown = () => {
                    }`}
                    onClick={() => logout()}
                  >
-                    <LogoutIcon className="mr-2 inline h-5 w-5" />
+                    <ArrowRightOnRectangleIcon className="mr-2 inline h-5 w-5" />
                    <span>{intl.formatMessage(messages.signout)}</span>
                  </a>
                )}
--- a/src/components/Layout/VersionStatus/index.tsx
+++ b/src/components/Layout/VersionStatus/index.tsx
@@ -1,9 +1,9 @@
 import {
-  ArrowCircleUpIcon,
+  ArrowUpCircleIcon,
  BeakerIcon,
-  CodeIcon,
+  CodeBracketIcon,
  ServerIcon,
-} from '@heroicons/react/outline';
+} from '@heroicons/react/24/outline';
 import type { StatusResponse } from '@server/interfaces/api/settingsInterfaces';
 import Link from 'next/link';
 import { defineMessages, useIntl } from 'react-intl';
@@ -56,7 +56,7 @@ const VersionStatus = ({ onClick }: VersionStatusProps) => {
        }`}
      >
        {data.commitTag === 'local' ? (
-          <CodeIcon className="h-6 w-6" />
+          <CodeBracketIcon className="h-6 w-6" />
        ) : data.version.startsWith('develop-') ? (
          <BeakerIcon className="h-6 w-6" />
        ) : (
@@ -80,7 +80,7 @@ const VersionStatus = ({ onClick }: VersionStatusProps) => {
            )}
          </span>
        </div>
-        {data.updateAvailable && <ArrowCircleUpIcon className="h-6 w-6" />}
+        {data.updateAvailable && <ArrowUpCircleIcon className="h-6 w-6" />}
      </a>
    </Link>
  );
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -1,3 +1,4 @@
+import MobileMenu from '@app/components/Layout/MobileMenu';
 import SearchInput from '@app/components/Layout/SearchInput';
 import Sidebar from '@app/components/Layout/Sidebar';
 import UserDropdown from '@app/components/Layout/UserDropdown';
@@ -6,8 +7,7 @@ import type { AvailableLocale } from '@app/context/LanguageContext';
 import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
 import { useUser } from '@app/hooks/useUser';
-import { MenuAlt2Icon } from '@heroicons/react/outline';
-import { ArrowLeftIcon } from '@heroicons/react/solid';
+import { ArrowLeftIcon, Bars3BottomLeftIcon } from '@heroicons/react/24/solid';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';

@@ -57,6 +57,9 @@ const Layout = ({ children }: LayoutProps) => {
      </div>

      <Sidebar open={isSidebarOpen} setClosed={() => setSidebarOpen(false)} />
+      <div className="sm:hidden">
+        <MobileMenu />
+      </div>

      <div className="relative mb-16 flex w-0 min-w-0 flex-1 flex-col lg:ml-64">
        <PullToRefresh />
@@ -69,17 +72,17 @@ const Layout = ({ children }: LayoutProps) => {
            WebkitBackdropFilter: isScrolled ? 'blur(5px)' : undefined,
          }}
        >
-          <button
-            className={`px-4 text-white ${
-              isScrolled ? 'opacity-90' : 'opacity-70'
-            } transition duration-300 focus:outline-none lg:hidden`}
-            aria-label="Open sidebar"
-            onClick={() => setSidebarOpen(true)}
-            data-testid="sidebar-toggle"
-          >
-            <MenuAlt2Icon className="h-6 w-6" />
-          </button>
-          <div className="flex flex-1 items-center justify-between pr-4 md:pr-4 md:pl-4">
+          <div className="flex flex-1 items-center justify-between px-4 md:pr-4 md:pl-4">
+            <button
+              className={`mr-2 hidden text-white sm:block ${
+                isScrolled ? 'opacity-90' : 'opacity-70'
+              } transition duration-300 focus:outline-none lg:hidden`}
+              aria-label="Open sidebar"
+              onClick={() => setSidebarOpen(true)}
+              data-testid="sidebar-toggle"
+            >
+              <Bars3BottomLeftIcon className="h-7 w-7" />
+            </button>
            <button
              className={`mr-2 text-white ${
                isScrolled ? 'opacity-90' : 'opacity-70'