feat(frontend): open media management slideover on status badge click (#2407)

* feat(frontend): open media management slideover on status badge click

* fix(frontend): use Link component for in-app badge links

* fix: check for query param value of '1'

* fix: correct query param check

* fix: available badges should still link to Plex

src/components/Common/Badge/index.tsx

@@ -1,22 +1,23 @@
+import Link from 'next/link';
 import React from 'react';
 
 interface BadgeProps {
   badgeType?: 'default' | 'primary' | 'danger' | 'warning' | 'success';
   className?: string;
-  url?: string;
+  href?: string;
 }
 
 const Badge: React.FC<BadgeProps> = ({
   badgeType = 'default',
   className,
-  url,
+  href,
   children,
 }) => {
   const badgeStyle = [
     'px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap',
   ];
 
-  if (url) {
+  if (href) {
     badgeStyle.push('transition cursor-pointer !no-underline');
   } else {
     badgeStyle.push('cursor-default');
@@ -25,25 +26,25 @@ const Badge: React.FC<BadgeProps> = ({
   switch (badgeType) {
     case 'danger':
       badgeStyle.push('bg-red-600 !text-red-100');
-      if (url) {
+      if (href) {
         badgeStyle.push('hover:bg-red-500');
       }
       break;
     case 'warning':
       badgeStyle.push('bg-yellow-500 !text-yellow-100');
-      if (url) {
+      if (href) {
         badgeStyle.push('hover:bg-yellow-400');
       }
       break;
     case 'success':
       badgeStyle.push('bg-green-500 !text-green-100');
-      if (url) {
+      if (href) {
         badgeStyle.push('hover:bg-green-400');
       }
       break;
     default:
       badgeStyle.push('bg-indigo-500 !text-indigo-100');
-      if (url) {
+      if (href) {
         badgeStyle.push('hover:bg-indigo-400');
       }
   }
@@ -52,10 +53,10 @@ const Badge: React.FC<BadgeProps> = ({
     badgeStyle.push(className);
   }
 
-  if (url) {
+  if (href?.includes('://')) {
     return (
       <a
-        href={url}
+        href={href}
         target="_blank"
         rel="noopener noreferrer"
         className={badgeStyle.join(' ')}
@@ -63,6 +64,12 @@ const Badge: React.FC<BadgeProps> = ({
         {children}
       </a>
     );
+  } else if (href) {
+    return (
+      <Link href={href}>
+        <a className={badgeStyle.join(' ')}>{children}</a>
+      </Link>
+    );
   } else {
     return <span className={badgeStyle.join(' ')}>{children}</span>;
   }