feat: highlight newer versions in notifications

packages/web/src/components/Drawer/index.tsx

@@ -5,6 +5,7 @@ import Toolbar from '@mui/material/Toolbar';
 import List from '@mui/material/List';
 import Divider from '@mui/material/Divider';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import Badge from '@mui/material/Badge';
 
 import ListItemLink from 'components/ListItemLink';
 import HideOnScroll from 'components/HideOnScroll';
@@ -17,6 +18,7 @@ type DrawerLink = {
   Icon: React.ElementType;
   primary: string;
   to: string;
+  badgeContent?: React.ReactNode;
 };
 
 type DrawerProps = {
@@ -65,10 +67,14 @@ export default function Drawer(props: DrawerProps): React.ReactElement {
       </div>
 
       <List sx={{ py: 0, mt: 3 }}>
-        {bottomLinks.map(({ Icon, primary, to }, index) => (
+        {bottomLinks.map(({ Icon, badgeContent, primary, to }, index) => (
           <ListItemLink
             key={`${to}-${index}`}
-            icon={<Icon htmlColor={theme.palette.primary.main} />}
+            icon={(
+              <Badge badgeContent={badgeContent} color="secondary" max={99}>
+                <Icon htmlColor={theme.palette.primary.main} />
+              </Badge>
+            )}
             primary={formatMessage(primary)}
             to={to}
             onClick={closeOnClick}

packages/web/src/components/Layout/index.tsx

@@ -9,6 +9,7 @@ import HistoryIcon from '@mui/icons-material/History';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 
 import * as URLS from 'config/urls';
+import useVersion from 'hooks/useVersion';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
 
@@ -34,15 +35,17 @@ const drawerLinks = [
   },
 ];
 
-const drawerBottomLinks = [
+const generateDrawerBottomLinks = ({ notificationBadgeContent = 0 }) => [
   {
     Icon: NotificationsIcon,
     primary: 'settingsDrawer.notifications',
     to: URLS.UPDATES,
+    badgeContent: notificationBadgeContent,
   },
 ]
 
 export default function PublicLayout({ children }: PublicLayoutProps): React.ReactElement {
+  const version = useVersion();
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'), { noSsr: true });
   const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
@@ -50,6 +53,10 @@ export default function PublicLayout({ children }: PublicLayoutProps): React.Rea
   const openDrawer = () => setDrawerOpen(true);
   const closeDrawer = () => setDrawerOpen(false);
 
+  const drawerBottomLinks = generateDrawerBottomLinks({
+    notificationBadgeContent: version.newVersionCount,
+  });
+
   return (
     <>
       <AppBar drawerOpen={isDrawerOpen} onDrawerOpen={openDrawer} onDrawerClose={closeDrawer} />