feat: add notification badge if plugin has updates

Makes it more consistent with the rest of the app, which already has
badges on available updates. It also makes it more obvious now that the
"Update" button is only shown conditionally, calling attention to the
updatable entries.

Author: alvaro-cuesta

frontend/src/components/settings/pages/plugin_list/PluginListLabel.tsx

@@ -2,18 +2,27 @@ import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaEyeSlash, FaLock } from 'react-icons/fa';
 
+import { StorePluginVersion } from '../../../../store';
+import NotificationBadge from '../../../NotificationBadge';
+
 interface PluginListLabelProps {
   frozen: boolean;
   hidden: boolean;
   name: string;
   version?: string;
+  update: StorePluginVersion | undefined;
 }
 
-const PluginListLabel: FC<PluginListLabelProps> = ({ name, frozen, hidden, version }) => {
+const PluginListLabel: FC<PluginListLabelProps> = ({ name, frozen, hidden, version, update }) => {
   const { t } = useTranslation();
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
-      <div>
+      <div
+        style={{
+          // needed for NotificationBadge
+          position: 'relative',
+        }}
+      >
         {name}
         {version && (
           <>
@@ -28,6 +37,7 @@ const PluginListLabel: FC<PluginListLabelProps> = ({ name, frozen, hidden, versi
             </span>
           </>
         )}
+        <NotificationBadge show={!!update} style={{ top: '-5px', right: '-10px' }} />
       </div>
       {hidden && (
         <div

frontend/src/components/settings/pages/plugin_list/index.tsx

@@ -173,16 +173,18 @@ export default function PluginList({ isDeveloper }: { isDeveloper: boolean }) {
         const frozen = frozenPlugins.includes(name);
         const hidden = hiddenPlugins.includes(name);
 
+        const update = updates?.get(name);
+
         return {
-          label: <PluginListLabel name={name} frozen={frozen} hidden={hidden} version={version} />,
+          label: <PluginListLabel name={name} frozen={frozen} hidden={hidden} version={version} update={update} />,
           position: pluginOrder.indexOf(name),
           data: {
             name,
             frozen,
             hidden,
             isDeveloper,
             version,
-            update: updates?.get(name),
+            update,
             onFreeze: () => frozenPluginsService.update([...frozenPlugins, name]),
             onUnfreeze: () => frozenPluginsService.update(frozenPlugins.filter((pluginName) => name !== pluginName)),
             onHide: () => hiddenPluginsService.update([...hiddenPlugins, name]),