Starting to add logic to show a badge when plugins are outdated.

src/renderer/components/Nav/Sidebar.tsx

@@ -24,7 +24,7 @@ import {
 
 import { ButtonGroup, IconButton, Sheet, Tooltip } from '@mui/joy';
 
-import { useModelStatus } from 'renderer/lib/transformerlab-api-sdk';
+import { useModelStatus, usePluginStatus } from 'renderer/lib/transformerlab-api-sdk';
 
 import SelectExperimentMenu from '../Experiment/SelectExperimentMenu';
 
@@ -37,6 +37,7 @@ export default function Sidebar({
   setDrawerOpen,
 }) {
   const { models, isError, isLoading } = useModelStatus();
+  const { outdatedPluginsCount } = usePluginStatus(experimentInfo);
 
   const navigate = useNavigate();
 
@@ -159,7 +160,7 @@ export default function Sidebar({
           path="/projects/plugins"
           icon={<PlugIcon />}
           disabled={!experimentInfo?.name}
-          counter={null}
+          counter={outdatedPluginsCount}
         />
         <SubNavItem
           title="Settings"

src/renderer/lib/transformerlab-api-sdk.ts

@@ -1015,6 +1015,20 @@ export function useModelStatus() {
   };
 }
 
+export function usePluginStatus(experimentInfo: any) {
+  let { data } = useSWR(
+    experimentInfo ? Endpoints.Experiment.ListScripts(experimentInfo?.id) : null,
+    fetcher
+  );
+
+  let outdatedPluginsCount = null;
+  if (data) {
+    outdatedPluginsCount = data.filter((plugin: any) => plugin?.gallery_version && plugin?.version != plugin?.gallery_version).length;
+  }
+  
+  return { outdatedPluginsCount };
+}
+
 export function useServerStats() {
   const url = API_URL() + 'server/info';