Add notification count to dock icon on desktop

app/components/Notifications/NotificationsPopover.tsx

@@ -0,0 +1,49 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import styled from "styled-components";
+import { depths } from "@shared/styles";
+import Popover from "~/components/Popover";
+import Notifications from "./Notifications";
+
+const NotificationsPopover: React.FC = ({ children }) => {
+  const { t } = useTranslation();
+  const scrollableRef = React.useRef<HTMLDivElement>(null);
+
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "top-start",
+    unstable_fixed: true,
+  });
+
+  // Reset scroll position to the top when popover is opened
+  React.useEffect(() => {
+    if (popover.visible && scrollableRef.current) {
+      scrollableRef.current.scrollTop = 0;
+    }
+  }, [popover.visible]);
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>{children}</PopoverDisclosure>
+      <StyledPopover
+        {...popover}
+        scrollable={false}
+        mobilePosition="bottom"
+        aria-label={t("Notifications")}
+        unstable_initialFocusRef={scrollableRef}
+        shrink
+        flex
+      >
+        <Notifications onRequestClose={popover.hide} ref={scrollableRef} />
+      </StyledPopover>
+    </>
+  );
+};
+
+const StyledPopover = styled(Popover)`
+  z-index: ${depths.menu};
+`;
+
+export default observer(NotificationsPopover);