[docs] Add permanent notifications back

docs/notifications.json

@@ -9,11 +9,6 @@
     "title": "<b>Get a first look at Joy UI</b> 🚀",
     "text": "Joy UI is MUI's new starting point for your design system. <a style=\"color: inherit;\" data-ga-event-category=\"Blog\" data-ga-event-action=\"notification\" data-ga-event-label=\"first-look-at-joy/\" href=\"/blog/first-look-at-joy/\">Check out the blog post</a> to see what's in store for this new library."
   },
-  {
-    "id": 66,
-    "title": "<b>MUI's company retreat in Tenerife</b> 🏝",
-    "text": "In late June 2022, MUI team members gathered in the Canary Islands for a company retreat. <a style=\"color: inherit;\" data-ga-event-category=\"Blog\" data-ga-event-action=\"notification\" data-ga-event-label=\"2022-tenerife-retreat/\" href=\"/blog/2022-tenerife-retreat/\">Check out the recap here</a>."
-  },
   {
     "id": 67,
     "title": "<b>Aggregate data like in Excel, but easier!</b>",

docs/src/modules/components/Notifications.js

@@ -33,8 +33,9 @@ const Paper = styled(MuiPaper)({
 });
 const List = styled(MuiList)(({ theme }) => ({
   width: theme.spacing(40),
-  maxHeight: theme.spacing(40),
+  maxHeight: 440,
   overflow: 'auto',
+  padding: theme.spacing(1, 0),
 }));
 const ListItem = styled(MuiListItem)({
   display: 'flex',
@@ -43,7 +44,7 @@ const ListItem = styled(MuiListItem)({
 const Loading = styled('div')(({ theme }) => ({
   display: 'flex',
   justifyContent: 'center',
-  margin: theme.spacing(1, 0),
+  margin: theme.spacing(3, 0),
 }));
 const Divider = styled(MuiDivider)(({ theme }) => ({
   margin: theme.spacing(1, 0),
@@ -80,9 +81,10 @@ export default function Notifications() {
     setTooltipOpen(false);
 
     if (process.env.NODE_ENV === 'development') {
-      // Skip last seen logic in dev to make editing noti easier.
+      // Skip last seen logic in dev to make editing notifications easier.
       return;
     }
+
     if (messageList && messageList.length > 0) {
       const newLastSeen = messageList[0].id;
       setNotifications((notifications) => {
@@ -106,23 +108,38 @@ export default function Notifications() {
       return undefined;
     }
 
-    // Soften the pressure on the main thread.
-    const timeout = setTimeout(() => {
-      fetchNotifications()
-        .catch(() => {
-          // Swallow the exceptions, e.g. rate limit
-          return [];
-        })
-        .then((newMessages) => {
-          if (active) {
-            const seen = getCookie('lastSeenNotification');
-            const lastSeenNotification = seen === undefined ? 0 : parseInt(seen, 10);
-            setNotifications({
-              messages: newMessages || [],
-              lastSeen: lastSeenNotification,
-            });
-          }
+    // Soften the pressure on the main thread
+    // and create some distraction.
+    const timeout = setTimeout(async () => {
+      const notifications = await fetchNotifications().catch(() => {
+        // Swallow the exceptions, e.g. rate limit
+        return [];
+      });
+
+      if (active) {
+        // Permanent notifications
+        const filteredNotifications = [
+          {
+            id: 0,
+            title: "Let's translate!",
+            text: '<a style="color: inherit;" target="_blank" rel="noopener" data-ga-event-category="l10n" data-ga-event-action="notification" data-ga-event-label="zh" href="https://translate.mui.com/">帮助 MUI 将文档翻译成中文</a>. 🇨🇳',
+            userLanguage: 'zh',
+          },
+          {
+            id: 1,
+            text: 'You can <a style="color: inherit;" target="_blank" rel="noopener" href="https://twitter.com/MUI_hq">follow us on Twitter</a> or subscribe on <a style="color: inherit;" target="_blank" rel="noopener" href="/blog/">our blog</a> to receive exclusive tips and updates about MUI and the React ecosystem.',
+          },
+          // Only 2
+          ...notifications.splice(-2),
+        ];
+
+        const seen = getCookie('lastSeenNotification');
+        const lastSeenNotification = seen === undefined ? 0 : parseInt(seen, 10);
+        setNotifications({
+          messages: filteredNotifications,
+          lastSeen: lastSeenNotification,
         });
+      }
     }, 1500);
 
     return () => {