feat: plex watchlist sync integration (#2885)

src/components/Common/ListView/index.tsx

@@ -1,4 +1,5 @@
 import { useIntl } from 'react-intl';
+import type { WatchlistItem } from '../../../../server/interfaces/api/discoverInterfaces';
 import type {
   MovieResult,
   PersonResult,
@@ -8,14 +9,16 @@ import useVerticalScroll from '../../../hooks/useVerticalScroll';
 import globalMessages from '../../../i18n/globalMessages';
 import PersonCard from '../../PersonCard';
 import TitleCard from '../../TitleCard';
+import TmdbTitleCard from '../../TitleCard/TmdbTitleCard';
 
-interface ListViewProps {
+type ListViewProps = {
   items?: (TvResult | MovieResult | PersonResult)[];
+  plexItems?: WatchlistItem[];
   isEmpty?: boolean;
   isLoading?: boolean;
   isReachingEnd?: boolean;
   onScrollBottom: () => void;
-}
+};
 
 const ListView = ({
   items,
@@ -23,6 +26,7 @@ const ListView = ({
   isLoading,
   onScrollBottom,
   isReachingEnd,
+  plexItems,
 }: ListViewProps) => {
   const intl = useIntl();
   useVerticalScroll(onScrollBottom, !isLoading && !isEmpty && !isReachingEnd);
@@ -34,6 +38,18 @@ const ListView = ({
         </div>
       )}
       <ul className="cards-vertical">
+        {plexItems?.map((title, index) => {
+          return (
+            <li key={`${title.ratingKey}-${index}`}>
+              <TmdbTitleCard
+                id={title.tmdbId}
+                tmdbId={title.tmdbId}
+                type={title.mediaType}
+                canExpand
+              />
+            </li>
+          );
+        })}
         {items?.map((title, index) => {
           let titleCard: React.ReactNode;
 

src/components/Common/SettingsTabs/index.tsx

@@ -143,7 +143,7 @@ const SettingsTabs = ({
         </div>
       ) : (
         <div className="hide-scrollbar hidden overflow-x-scroll border-b border-gray-600 sm:block">
-          <nav className="flex">
+          <nav className="flex" data-testid="settings-nav-desktop">
             {settingsRoutes
               .filter(
                 (route) =>