feat(sidebar): show pending requests count in the sidebar

server/interfaces/api/requestInterfaces.ts

@@ -20,3 +20,14 @@ export type MediaRequestBody = {
   userId?: number;
   tags?: number[];
 };
+
+export type RequestCountResponse = {
+  total: number;
+  movie: number;
+  tv: number;
+  pending: number;
+  approved: number;
+  declined: number;
+  processing: number;
+  available: number;
+};

src/components/Layout/Sidebar/index.tsx

@@ -1,3 +1,4 @@
+import Badge from '@app/components/Common/Badge';
 import UserWarnings from '@app/components/Layout/UserWarnings';
 import VersionStatus from '@app/components/Layout/VersionStatus';
 import useClickOutside from '@app/hooks/useClickOutside';
@@ -15,11 +16,13 @@ import {
   UsersIcon,
   XMarkIcon,
 } from '@heroicons/react/24/outline';
+import type { RequestCountResponse } from '@server/interfaces/api/requestInterfaces';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { Fragment, useRef } from 'react';
 import { useIntl } from 'react-intl';
+import useSWR from 'swr';
 
 export const menuMessages = defineMessages('components.Layout.Sidebar', {
   dashboard: 'Discover',
@@ -114,11 +117,41 @@ const SidebarLinks: SidebarLinkProps[] = [
   },
 ];
 
+const PendingRequestsBadge = ({
+  requests,
+  hasPermission,
+}: {
+  requests: RequestCountResponse | undefined;
+  hasPermission: (
+    permission: Permission | Permission[],
+    options?: { type: 'and' | 'or' }
+  ) => boolean;
+}) => {
+  if (
+    !hasPermission([Permission.MANAGE_REQUESTS, Permission.ADMIN], {
+      type: 'or',
+    }) ||
+    !requests ||
+    requests.pending === 0
+  ) {
+    return null;
+  }
+
+  return (
+    <span className="ml-3">
+      <Badge badgeType="default">{requests.pending}</Badge>
+    </span>
+  );
+};
+
 const Sidebar = ({ open, setClosed }: SidebarProps) => {
   const navRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
   const intl = useIntl();
   const { hasPermission } = useUser();
+  const { data: requests } = useSWR<RequestCountResponse>(
+    '/api/v1/request/count'
+  );
   useClickOutside(navRef, () => setClosed());
 
   return (
@@ -204,6 +237,12 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                             {intl.formatMessage(
                               menuMessages[sidebarLink.messagesKey]
                             )}
+                            {sidebarLink.messagesKey === 'requests' && (
+                              <PendingRequestsBadge
+                                requests={requests}
+                                hasPermission={hasPermission}
+                              />
+                            )}
                           </Link>
                         );
                       })}
@@ -265,6 +304,12 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                       {intl.formatMessage(
                         menuMessages[sidebarLink.messagesKey]
                       )}
+                      {sidebarLink.messagesKey === 'requests' && (
+                        <PendingRequestsBadge
+                          requests={requests}
+                          hasPermission={hasPermission}
+                        />
+                      )}
                     </Link>
                   );
                 })}

src/i18n/locale/en.json

@@ -246,6 +246,7 @@
   "components.Login.initialsigningin": "Connecting…",
   "components.Login.invalidurlerror": "Unable to connect to {mediaServerName} server.",
   "components.Login.loginerror": "Something went wrong while trying to sign in.",
+  "components.Login.noadminerror": "No admin user found on the server.",
   "components.Login.password": "Password",
   "components.Login.port": "Port",
   "components.Login.save": "Add",