fix: check perms to view watchlist slider on user profile (#2980)

src/components/UserProfile/index.tsx

@@ -294,36 +294,42 @@ const UserProfile = () => {
           />
         </>
       )}
-      {(!watchlistItems || !!watchlistItems.results.length) && !watchlistError && (
+      {(user.id === currentUser?.id ||
-        <>
+        currentHasPermission(
-          <div className="slider-header">
+          [Permission.MANAGE_REQUESTS, Permission.WATCHLIST_VIEW],
-            <Link
+          { type: 'or' }
-              href={
+        )) &&
-                user.id === currentUser?.id
+        (!watchlistItems || !!watchlistItems.results.length) &&
-                  ? '/profile/watchlist'
+        !watchlistError && (
-                  : `/users/${user?.id}/watchlist`
+          <>
-              }
+            <div className="slider-header">
-            >
+              <Link
-              <a className="slider-title">
+                href={
-                <span>{intl.formatMessage(messages.plexwatchlist)}</span>
+                  user.id === currentUser?.id
-                <ArrowCircleRightIcon />
+                    ? '/profile/watchlist'
-              </a>
+                    : `/users/${user?.id}/watchlist`
-            </Link>
+                }
-          </div>
+              >
-          <Slider
+                <a className="slider-title">
-            sliderKey="watchlist"
+                  <span>{intl.formatMessage(messages.plexwatchlist)}</span>
-            isLoading={!watchlistItems && !watchlistError}
+                  <ArrowCircleRightIcon />
-            items={watchlistItems?.results.map((item) => (
+                </a>
-              <TmdbTitleCard
+              </Link>
-                id={item.tmdbId}
+            </div>
-                key={`watchlist-slider-item-${item.ratingKey}`}
+            <Slider
-                tmdbId={item.tmdbId}
+              sliderKey="watchlist"
-                type={item.mediaType}
+              isLoading={!watchlistItems && !watchlistError}
-              />
+              items={watchlistItems?.results.map((item) => (
-            ))}
+                <TmdbTitleCard
-          />
+                  id={item.tmdbId}
-        </>
+                  key={`watchlist-slider-item-${item.ratingKey}`}
-      )}
+                  tmdbId={item.tmdbId}
+                  type={item.mediaType}
+                />
+              ))}
+            />
+          </>
+        )}
       {(user.id === currentUser?.id ||
         currentHasPermission(Permission.ADMIN)) &&
         !!watchData?.recentlyWatched.length && (