feat(ui): request list redesign (#1099)

src/components/RequestList/RequestItem/index.tsx

@@ -1,12 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import type { MediaRequest } from '../../../../server/entity/MediaRequest';
-import {
-  useIntl,
-  FormattedDate,
-  FormattedRelativeTime,
-  defineMessages,
-} from 'react-intl';
+import { useIntl, FormattedRelativeTime, defineMessages } from 'react-intl';
 import { useUser, Permission } from '../../../hooks/useUser';
 import { LanguageContext } from '../../../context/LanguageContext';
 import type { MovieDetails } from '../../../../server/models/Movie';
@@ -14,7 +9,6 @@ import type { TvDetails } from '../../../../server/models/Tv';
 import useSWR from 'swr';
 import Badge from '../../Common/Badge';
 import StatusBadge from '../../StatusBadge';
-import Table from '../../Common/Table';
 import {
   MediaRequestStatus,
   MediaStatus,
@@ -25,11 +19,16 @@ import globalMessages from '../../../i18n/globalMessages';
 import Link from 'next/link';
 import { useToasts } from 'react-toast-notifications';
 import RequestModal from '../../RequestModal';
+import ConfirmButton from '../../Common/ConfirmButton';
 
 const messages = defineMessages({
   seasons: 'Seasons',
   notavailable: 'N/A',
   failedretry: 'Something went wrong while retrying the request.',
+  areyousure: 'Are you sure?',
+  status: 'Status',
+  requested: 'Requested',
+  modifiedby: 'Modified By',
 });
 
 const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
@@ -101,22 +100,24 @@ const RequestItem: React.FC<RequestItemProps> = ({
 
   if (!title && !error) {
     return (
-      <tr className="w-full h-24 animate-pulse" ref={ref}>
-        <td colSpan={6}></td>
-      </tr>
+      <div
+        className="w-full h-64 bg-gray-800 rounded-md lg:h-32 animate-pulse"
+        ref={ref}
+      />
     );
   }
 
   if (!title || !requestData) {
     return (
-      <tr className="w-full h-24 animate-pulse">
-        <td colSpan={6}></td>
-      </tr>
+      <div
+        className="w-full h-64 bg-gray-800 rounded-md lg:h-32 animate-pulse"
+        ref={ref}
+      />
     );
   }
 
   return (
-    <tr className="relative w-full h-24 p-2">
+    <>
       <RequestModal
         show={showEditModal}
         tmdbId={request.media.tmdbId}
@@ -129,16 +130,14 @@ const RequestItem: React.FC<RequestItemProps> = ({
           setShowEditModal(false);
         }}
       />
-      <Table.TD>
-        <div className="flex items-center">
-          <Link
-            href={
-              request.type === 'movie'
-                ? `/movie/${request.media.tmdbId}`
-                : `/tv/${request.media.tmdbId}`
-            }
-          >
-            <a className="flex-shrink-0 hidden mr-4 sm:block">
+      <div className="relative flex flex-col justify-between w-full p-4 overflow-hidden text-white bg-gray-800 rounded-md shadow-md lg:h-32 lg:flex-row">
+        <div
+          className="absolute inset-0 z-0 w-full bg-center bg-cover lg:w-2/3"
+          style={{
+            backgroundImage: `linear-gradient(90deg, rgba(31, 41, 55, 0.47) 0%, rgba(31, 41, 55, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath})`,
+          }}
+        />
+        <div className="relative z-10 flex w-full lg:w-60 xl:w-80 2xl:w-96">
           <img
             src={
               title.posterPath
@@ -146,11 +145,9 @@ const RequestItem: React.FC<RequestItemProps> = ({
                 : '/images/overseerr_poster_not_found.png'
             }
             alt=""
-                className="w-12 transition duration-300 scale-100 rounded-md shadow-sm cursor-pointer transform-gpu hover:scale-105 hover:shadow-md"
+            className="h-full transition duration-300 scale-100 rounded-md shadow-sm cursor-pointer w-14 lg:w-auto lg:h-full transform-gpu hover:scale-105 hover:shadow-md"
           />
-            </a>
-          </Link>
-          <div className="flex-shrink overflow-hidden">
+          <div className="flex flex-col justify-start ml-2 overflow-hidden lg:justify-center lg:ml-4">
             <Link
               href={
                 requestData.type === 'movie'
@@ -158,12 +155,12 @@ const RequestItem: React.FC<RequestItemProps> = ({
                   : `/tv/${requestData.media.tmdbId}`
               }
             >
-              <a className="min-w-0 mr-2 text-xl text-white truncate hover:underline">
+              <a className="min-w-0 mr-2 text-lg text-white truncate lg:text-xl hover:underline">
                 {isMovie(title) ? title.title : title.name}
               </a>
             </Link>
             <Link href={`/users/${requestData.requestedBy.id}`}>
-              <a className="flex items-center mt-1">
+              <a className="flex items-center mt-2">
                 <img
                   src={requestData.requestedBy.avatar}
                   alt=""
@@ -175,7 +172,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
               </a>
             </Link>
             {requestData.seasons.length > 0 && (
-              <div className="items-center hidden mt-2 text-sm sm:flex">
+              <div className="flex items-center mt-2 text-sm">
                 <span className="mr-2">
                   {intl.formatMessage(messages.seasons)}
                 </span>
@@ -188,8 +185,9 @@ const RequestItem: React.FC<RequestItemProps> = ({
             )}
           </div>
         </div>
-      </Table.TD>
-      <Table.TD>
+        <div className="z-10 flex flex-col justify-between w-full mt-4 text-sm lg:mt-0 lg:flex-1 lg:ml-4">
+          <div className="flex items-center my-1">
+            <span className="mr-2">{intl.formatMessage(messages.status)}</span>
             {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
               MediaStatus.UNKNOWN ||
             requestData.status === MediaRequestStatus.DECLINED ? (
@@ -200,7 +198,9 @@ const RequestItem: React.FC<RequestItemProps> = ({
               </Badge>
             ) : (
               <StatusBadge
-            status={requestData.media[requestData.is4k ? 'status4k' : 'status']}
+                status={
+                  requestData.media[requestData.is4k ? 'status4k' : 'status']
+                }
                 inProgress={
                   (
                     requestData.media[
@@ -213,19 +213,24 @@ const RequestItem: React.FC<RequestItemProps> = ({
                 plexUrl4k={requestData.media.plexUrl4k}
               />
             )}
-      </Table.TD>
-      <Table.TD>
-        <div className="flex flex-col">
-          <span className="text-sm text-gray-300">
-            <FormattedDate value={requestData.createdAt} />
+          </div>
+          <div className="flex items-center my-1">
+            <span className="mr-2">
+              {intl.formatMessage(messages.requested)}
+            </span>
+            <span className="text-gray-300">
+              {intl.formatDate(requestData.createdAt)}
             </span>
           </div>
-      </Table.TD>
-      <Table.TD>
-        <div className="flex flex-col">
+          <div className="flex items-center my-1">
+            <span className="mr-2">
+              {intl.formatMessage(messages.modifiedby)}
+            </span>
+            <span>
               {requestData.modifiedBy ? (
                 <span className="text-sm text-gray-300">
-              <div className="flex items-center">
+                  <Link href={`/users/${requestData.modifiedBy.id}`}>
+                    <a className="flex items-center">
                       <img
                         src={requestData.modifiedBy.avatar}
                         alt=""
@@ -235,34 +240,36 @@ const RequestItem: React.FC<RequestItemProps> = ({
                         {requestData.modifiedBy.displayName} (
                         <FormattedRelativeTime
                           value={Math.floor(
-                      (new Date(requestData.updatedAt).getTime() - Date.now()) /
+                            (new Date(requestData.updatedAt).getTime() -
+                              Date.now()) /
                               1000
                           )}
                           updateIntervalInSeconds={1}
                         />
                         )
                       </span>
-              </div>
+                    </a>
+                  </Link>
                 </span>
               ) : (
                 <span className="text-sm text-gray-300">N/A</span>
               )}
+            </span>
           </div>
-      </Table.TD>
-      <Table.TD alignText="right">
+        </div>
+        <div className="z-10 flex flex-row justify-between w-full mt-4 flex-nowrap lg:flex-col lg:mt-0 lg:items-end lg:justify-around lg:w-64">
           {requestData.media[requestData.is4k ? 'status4k' : 'status'] ===
             MediaStatus.UNKNOWN &&
             requestData.status !== MediaRequestStatus.DECLINED &&
             hasPermission(Permission.MANAGE_REQUESTS) && (
               <Button
-              className="mr-2"
+                className="w-full mr-2 lg:mr-0"
                 buttonType="primary"
-              buttonSize="sm"
                 disabled={isRetrying}
                 onClick={() => retryRequest()}
               >
                 <svg
-                className="w-4 h-4 mr-0 sm:mr-1"
+                  className="w-5 h-5 mr-1"
                   fill="currentColor"
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
@@ -272,20 +279,20 @@ const RequestItem: React.FC<RequestItemProps> = ({
                   <path d="M0 0h24v24H0z" fill="none" />
                   <path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z" />
                 </svg>
-              <span className="hidden sm:block">
+                <span className="block">
                   {intl.formatMessage(globalMessages.retry)}
                 </span>
               </Button>
             )}
           {requestData.status !== MediaRequestStatus.PENDING &&
             hasPermission(Permission.MANAGE_REQUESTS) && (
-            <Button
-              buttonType="danger"
-              buttonSize="sm"
+              <ConfirmButton
                 onClick={() => deleteRequest()}
+                confirmText={intl.formatMessage(messages.areyousure)}
+                className="w-full"
               >
                 <svg
-                className="w-4 h-4 mr-0 sm:mr-1"
+                  className="w-5 h-5 mr-1"
                   fill="currentColor"
                   viewBox="0 0 20 20"
                   xmlns="http://www.w3.org/2000/svg"
@@ -296,22 +303,23 @@ const RequestItem: React.FC<RequestItemProps> = ({
                     clipRule="evenodd"
                   />
                 </svg>
-              <span className="hidden sm:block">
+                <span className="block">
                   {intl.formatMessage(globalMessages.delete)}
                 </span>
-            </Button>
+              </ConfirmButton>
             )}
           {requestData.status === MediaRequestStatus.PENDING &&
             hasPermission(Permission.MANAGE_REQUESTS) && (
               <>
-              <span className="mr-2">
+                <div className="flex flex-row w-full">
+                  <span className="w-full mr-2">
                     <Button
+                      className="w-full"
                       buttonType="success"
-                  buttonSize="sm"
                       onClick={() => modifyRequest('approve')}
                     >
                       <svg
-                    className="w-4 h-4 mr-0 sm:mr-1"
+                        className="w-5 h-5 mr-1"
                         fill="currentColor"
                         viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg"
@@ -322,19 +330,19 @@ const RequestItem: React.FC<RequestItemProps> = ({
                           clipRule="evenodd"
                         />
                       </svg>
-                  <span className="hidden sm:block">
+                      <span className="block">
                         {intl.formatMessage(globalMessages.approve)}
                       </span>
                     </Button>
                   </span>
-              <span className="mr-2">
+                  <span className="w-full mr-2 lg:mr-0">
                     <Button
+                      className="w-full"
                       buttonType="danger"
-                  buttonSize="sm"
                       onClick={() => modifyRequest('decline')}
                     >
                       <svg
-                    className="w-4 h-4 mr-0 sm:mr-1"
+                        className="w-5 h-5 mr-1"
                         fill="currentColor"
                         viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg"
@@ -345,34 +353,36 @@ const RequestItem: React.FC<RequestItemProps> = ({
                           clipRule="evenodd"
                         />
                       </svg>
-                  <span className="hidden sm:block">
+                      <span className="block">
                         {intl.formatMessage(globalMessages.decline)}
                       </span>
                     </Button>
                   </span>
-              <span>
+                </div>
+                <span className="w-full">
                   <Button
+                    className="w-full"
                     buttonType="primary"
-                  buttonSize="sm"
                     onClick={() => setShowEditModal(true)}
                   >
                     <svg
-                    className="w-4 h-4 mr-0 sm:mr-1"
+                      className="w-5 h-5 mr-1"
                       fill="currentColor"
                       viewBox="0 0 20 20"
                       xmlns="http://www.w3.org/2000/svg"
                     >
                       <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                     </svg>
-                  <span className="hidden sm:block">
+                    <span className="block">
                       {intl.formatMessage(globalMessages.edit)}
                     </span>
                   </Button>
                 </span>
               </>
             )}
-      </Table.TD>
-    </tr>
+        </div>
+      </div>
+    </>
   );
 };
 

src/components/RequestList/index.tsx

@@ -1,20 +1,15 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import useSWR from 'swr';
 import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces';
 import LoadingSpinner from '../Common/LoadingSpinner';
 import RequestItem from './RequestItem';
 import Header from '../Common/Header';
-import Table from '../Common/Table';
 import Button from '../Common/Button';
 import { defineMessages, useIntl } from 'react-intl';
 import PageTitle from '../Common/PageTitle';
 
 const messages = defineMessages({
   requests: 'Requests',
-  mediaInfo: 'Media Info',
-  status: 'Status',
-  requestedAt: 'Requested At',
-  modifiedBy: 'Last Modified By',
   showingresults:
     'Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results',
   resultsperpage: 'Display {pageSize} results per page',
@@ -46,6 +41,32 @@ const RequestList: React.FC = () => {
       pageIndex * currentPageSize
     }&filter=${currentFilter}&sort=${currentSort}`
   );
+
+  // Restore last set filter values on component mount
+  useEffect(() => {
+    const filterString = window.localStorage.getItem('rl-filter-settings');
+
+    if (filterString) {
+      const filterSettings = JSON.parse(filterString);
+
+      setCurrentFilter(filterSettings.currentFilter);
+      setCurrentSort(filterSettings.currentSort);
+      setCurrentPageSize(filterSettings.currentPageSize);
+    }
+  }, []);
+
+  // Set fitler values to local storage any time they are changed
+  useEffect(() => {
+    window.localStorage.setItem(
+      'rl-filter-settings',
+      JSON.stringify({
+        currentFilter,
+        currentSort,
+        currentPageSize,
+      })
+    );
+  }, [currentFilter, currentSort, currentPageSize]);
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }
@@ -60,7 +81,7 @@ const RequestList: React.FC = () => {
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.requests)} />
-      <div className="flex flex-col justify-between lg:items-end lg:flex-row">
+      <div className="flex flex-col justify-between mb-4 lg:items-end lg:flex-row">
         <Header>{intl.formatMessage(messages.requests)}</Header>
         <div className="flex flex-col flex-grow mt-2 sm:flex-row lg:flex-grow-0">
           <div className="flex flex-grow mb-2 sm:mb-0 sm:mr-2 lg:flex-grow-0">
@@ -140,31 +161,19 @@ const RequestList: React.FC = () => {
           </div>
         </div>
       </div>
-      <Table>
-        <thead>
-          <tr>
-            <Table.TH>{intl.formatMessage(messages.mediaInfo)}</Table.TH>
-            <Table.TH>{intl.formatMessage(messages.status)}</Table.TH>
-            <Table.TH>{intl.formatMessage(messages.requestedAt)}</Table.TH>
-            <Table.TH>{intl.formatMessage(messages.modifiedBy)}</Table.TH>
-            <Table.TH></Table.TH>
-          </tr>
-        </thead>
-        <Table.TBody>
       {data.results.map((request) => {
         return (
+          <div className="py-2" key={`request-list-${request.id}`}>
             <RequestItem
               request={request}
-                key={`request-list-${request.id}`}
               revalidateList={() => revalidate()}
             />
+          </div>
         );
       })}
 
       {data.results.length === 0 && (
-            <tr className="relative h-24 p-2 text-white">
-              <Table.TD colSpan={6} noPadding>
-                <div className="flex flex-col items-center justify-center w-screen p-6 lg:w-full">
+        <div className="flex flex-col items-center justify-center w-screen p-6 text-white lg:w-full">
           <span className="text-base">
             {intl.formatMessage(messages.noresults)}
           </span>
@@ -180,13 +189,10 @@ const RequestList: React.FC = () => {
             </div>
           )}
         </div>
-              </Table.TD>
-            </tr>
       )}
-          <tr className="bg-gray-700">
-            <Table.TD colSpan={6} noPadding>
+      <div className="mt-6 text-white">
         <nav
-                className="flex flex-col items-center w-screen px-6 py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
+          className="flex flex-col items-center py-3 space-x-4 space-y-3 sm:space-y-0 sm:flex-row lg:w-full"
           aria-label="Pagination"
         >
           <div className="hidden lg:flex lg:flex-1">
@@ -244,10 +250,7 @@ const RequestList: React.FC = () => {
             </Button>
           </div>
         </nav>
-            </Table.TD>
-          </tr>
-        </Table.TBody>
-      </Table>
+      </div>
     </>
   );
 };

src/i18n/locale/en.json

@@ -165,27 +165,27 @@
   "components.RequestButton.viewrequest4k": "View 4K Request",
   "components.RequestCard.all": "All",
   "components.RequestCard.seasons": "Seasons",
+  "components.RequestList.RequestItem.areyousure": "Are you sure?",
   "components.RequestList.RequestItem.failedretry": "Something went wrong while retrying the request.",
+  "components.RequestList.RequestItem.modifiedby": "Modified By",
   "components.RequestList.RequestItem.notavailable": "N/A",
+  "components.RequestList.RequestItem.requested": "Requested",
   "components.RequestList.RequestItem.seasons": "Seasons",
+  "components.RequestList.RequestItem.status": "Status",
   "components.RequestList.filterAll": "All",
   "components.RequestList.filterApproved": "Approved",
   "components.RequestList.filterAvailable": "Available",
   "components.RequestList.filterPending": "Pending",
   "components.RequestList.filterProcessing": "Processing",
-  "components.RequestList.mediaInfo": "Media Info",
-  "components.RequestList.modifiedBy": "Last Modified By",
   "components.RequestList.next": "Next",
   "components.RequestList.noresults": "No results.",
   "components.RequestList.previous": "Previous",
-  "components.RequestList.requestedAt": "Requested At",
   "components.RequestList.requests": "Requests",
   "components.RequestList.resultsperpage": "Display {pageSize} results per page",
   "components.RequestList.showallrequests": "Show All Requests",
   "components.RequestList.showingresults": "Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results",
   "components.RequestList.sortAdded": "Request Date",
   "components.RequestList.sortModified": "Last Modified",
-  "components.RequestList.status": "Status",
   "components.RequestModal.AdvancedRequester.advancedoptions": "Advanced Options",
   "components.RequestModal.AdvancedRequester.animenote": "* This series is an anime.",
   "components.RequestModal.AdvancedRequester.default": "(Default)",