SCIX-813 feat(nav): add count badge to graphics menu item

src/api/graphics/graphics.ts

@@ -37,6 +37,7 @@ export const useGetGraphicsCount: ADSQuery<
     queryKey: graphicsKeys.primary(bibcode),
     queryFn: fetchGraphics,
     retry: retryFn,
+    staleTime: 1000 * 60 * 5,
     meta: { params, skipGlobalErrorHandler: true },
     ...options,
   });

src/components/AbstractSideNav/AbstractSideNav.tsx

@@ -123,7 +123,7 @@ const useGetItems = ({
       href: { pathname: `${abstractPath}/${encodedDocId}/${Routes.GRAPHICS}` },
       label: 'Graphics',
       icon: <PhotographIcon />,
-      rightElement: null,
+      rightElement: <CountBadge count={graphicsCount} />,
       disabled: graphicsCount === 0,
       tooltip: 'View thumbnails of graphics published in this record',
     },

src/components/__tests__/AbstractSideNav.test.tsx

@@ -1,5 +1,5 @@
-import { render } from '@/test-utils';
-import { test, vi } from 'vitest';
+import { render, screen, waitFor } from '@/test-utils';
+import { expect, test, vi } from 'vitest';
 import { AbstractSideNav } from '@/components/AbstractSideNav';
 import { IDocsEntity } from '@/api/search/types';
 
@@ -18,3 +18,17 @@ const doc =
 test('renders without crashing', () => {
   render(<AbstractSideNav doc={JSON.parse(doc) as IDocsEntity} />);
 });
+
+test('displays graphics count badge when graphics are available', async () => {
+  render(<AbstractSideNav doc={JSON.parse(doc) as IDocsEntity} />);
+
+  // The MSW mock handler returns 7 figures for the graphics endpoint.
+  // Wait for the badge "7" to appear near the Graphics label.
+  await waitFor(() => {
+    const graphicsText = screen.getAllByText('Graphics');
+    // Walk up to the nearest button/link container
+    const container = graphicsText[0].closest('a, button');
+    expect(container).toBeTruthy();
+    expect(container).toHaveTextContent('7');
+  });
+});

src/mocks/handlers/graphics.ts

@@ -5,7 +5,7 @@ import { IADSApiGraphicsParams } from '@/api/graphics/types';
 import { ApiTargets } from '@/api/models';
 
 export const graphicsHandlers = [
-  rest.get<IADSApiGraphicsParams>(apiHandlerRoute(ApiTargets.GRAPHICS, ':id'), (req, res, ctx) => {
+  rest.get<IADSApiGraphicsParams>(apiHandlerRoute(ApiTargets.GRAPHICS, '/:id'), (req, res, ctx) => {
     return res(
       ctx.status(200),
       ctx.json({