fix: watch data not required to show Tautulli button (#2976)

src/components/ManageSlideOver/index.tsx

@@ -210,25 +210,28 @@ const ManageSlideOver = ({
         {hasPermission(Permission.ADMIN) &&
           (data.mediaInfo?.serviceUrl ||
             data.mediaInfo?.tautulliUrl ||
-            !!watchData?.data?.playCount) && (
+            watchData?.data) && (
             <>
               <h3 className="mb-2 text-xl font-bold">
                 {intl.formatMessage(messages.manageModalMedia)}
               </h3>
               <div className="space-y-2">
-                {!!watchData?.data && (
+                {(watchData?.data || data.mediaInfo?.tautulliUrl) && (
                   <div>
+                    {!!watchData?.data && (
                       <div
-                      className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border border-gray-700 text-sm text-gray-300 shadow ${
+                        className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border-gray-700 text-sm text-gray-300 shadow ${
                           data.mediaInfo?.tautulliUrl
-                          ? 'rounded-t-md'
-                          : 'rounded-md'
+                            ? 'rounded-t-md border-x border-t'
+                            : 'rounded-md border'
                         }`}
                       >
                         <div className="grid grid-cols-3 divide-x divide-gray-700">
                           <div className="px-4 py-3">
                             <div className="font-bold">
-                            {intl.formatMessage(messages.pastdays, { days: 7 })}
+                              {intl.formatMessage(messages.pastdays, {
+                                days: 7,
+                              })}
                             </div>
                             <div className="text-white">
                               {styledPlayCount(watchData.data.playCount7Days)}
@@ -281,6 +284,7 @@ const ManageSlideOver = ({
                           </div>
                         )}
                       </div>
+                    )}
                     {data.mediaInfo?.tautulliUrl && (
                       <a
                         href={data.mediaInfo.tautulliUrl}
@@ -290,7 +294,7 @@ const ManageSlideOver = ({
                         <Button
                           buttonType="ghost"
                           className={`w-full ${
-                            watchData.data.playCount ? 'rounded-t-none' : ''
+                            watchData?.data ? 'rounded-t-none' : ''
                           }`}
                         >
                           <ViewListIcon />
@@ -302,7 +306,7 @@ const ManageSlideOver = ({
                     )}
                   </div>
                 )}
-                {data?.mediaInfo?.serviceUrl && (
+                {data.mediaInfo?.serviceUrl && (
                   <a
                     href={data?.mediaInfo?.serviceUrl}
                     target="_blank"
@@ -325,25 +329,28 @@ const ManageSlideOver = ({
         {hasPermission(Permission.ADMIN) &&
           (data.mediaInfo?.serviceUrl4k ||
             data.mediaInfo?.tautulliUrl4k ||
-            !!watchData?.data4k?.playCount) && (
+            watchData?.data4k) && (
             <div>
               <h3 className="mb-2 text-xl font-bold">
                 {intl.formatMessage(messages.manageModalMedia4k)}
               </h3>
               <div className="space-y-2">
-                {!!watchData?.data4k && (
+                {(watchData?.data4k || data.mediaInfo?.tautulliUrl4k) && (
                   <div>
+                    {watchData?.data4k && (
                       <div
-                      className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border border-gray-700 text-sm text-gray-300 shadow ${
+                        className={`grid grid-cols-1 divide-y divide-gray-700 overflow-hidden border-gray-700 text-sm text-gray-300 shadow ${
                           data.mediaInfo?.tautulliUrl4k
-                          ? 'rounded-t-md'
-                          : 'rounded-md'
+                            ? 'rounded-t-md border-x border-t'
+                            : 'rounded-md border'
                         }`}
                       >
                         <div className="grid grid-cols-3 divide-x divide-gray-700">
                           <div className="px-4 py-3">
                             <div className="font-bold">
-                            {intl.formatMessage(messages.pastdays, { days: 7 })}
+                              {intl.formatMessage(messages.pastdays, {
+                                days: 7,
+                              })}
                             </div>
                             <div className="text-white">
                               {styledPlayCount(watchData.data4k.playCount7Days)}
@@ -356,7 +363,9 @@ const ManageSlideOver = ({
                               })}
                             </div>
                             <div className="text-white">
-                            {styledPlayCount(watchData.data4k.playCount30Days)}
+                              {styledPlayCount(
+                                watchData.data4k.playCount30Days
+                              )}
                             </div>
                           </div>
                           <div className="px-4 py-3">
@@ -396,6 +405,7 @@ const ManageSlideOver = ({
                           </div>
                         )}
                       </div>
+                    )}
                     {data.mediaInfo?.tautulliUrl4k && (
                       <a
                         href={data.mediaInfo.tautulliUrl4k}
@@ -405,7 +415,7 @@ const ManageSlideOver = ({
                         <Button
                           buttonType="ghost"
                           className={`w-full ${
-                            watchData.data4k.playCount ? 'rounded-t-none' : ''
+                            watchData?.data4k ? 'rounded-t-none' : ''
                           }`}
                         >
                           <ViewListIcon />