Notifications interface (#5354)

Co-authored-by: Apoorv Mishra <apoorvmishra101092@gmail.com>

app/components/Notifications/NotificationListItem.tsx

@@ -0,0 +1,107 @@
+import { toJS } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import Notification from "~/models/Notification";
+import CommentEditor from "~/scenes/Document/components/CommentEditor";
+import useStores from "~/hooks/useStores";
+import Avatar from "../Avatar";
+import { AvatarSize } from "../Avatar/Avatar";
+import Flex from "../Flex";
+import Text from "../Text";
+import Time from "../Time";
+
+type Props = {
+  notification: Notification;
+  onNavigate: () => void;
+};
+
+function NotificationListItem({ notification, onNavigate }: Props) {
+  const { t } = useTranslation();
+  const { collections } = useStores();
+  const collectionId = notification.document?.collectionId;
+  const collection = collectionId ? collections.get(collectionId) : undefined;
+
+  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (event) => {
+    if (event.altKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      notification.toggleRead();
+      return;
+    }
+
+    notification.markAsRead();
+
+    onNavigate();
+  };
+
+  return (
+    <Link to={notification.path} onClick={handleClick}>
+      <Container gap={8} $unread={!notification.viewedAt}>
+        <StyledAvatar model={notification.actor} size={AvatarSize.Large} />
+        <Flex column>
+          <Text as="div" size="small">
+            <Text as="span" weight="bold">
+              {notification.actor.name}
+            </Text>{" "}
+            {notification.eventText(t)}{" "}
+            <Text as="span" weight="bold">
+              {notification.subject}
+            </Text>
+          </Text>
+          <Text as="span" type="tertiary" size="xsmall">
+            <Time
+              dateTime={notification.createdAt}
+              tooltipDelay={1000}
+              addSuffix
+            />{" "}
+            {collection && <>&middot; {collection.name}</>}
+          </Text>
+          {notification.comment && (
+            <StyledCommentEditor
+              defaultValue={toJS(notification.comment.data)}
+            />
+          )}
+        </Flex>
+        {notification.viewedAt ? null : <Unread />}
+      </Container>
+    </Link>
+  );
+}
+
+const StyledCommentEditor = styled(CommentEditor)`
+  font-size: 0.9em;
+  margin-top: 4px;
+`;
+
+const StyledAvatar = styled(Avatar)`
+  margin-top: 4px;
+`;
+
+const Container = styled(Flex)<{ $unread: boolean }>`
+  position: relative;
+  padding: 8px 12px;
+  margin: 0 8px;
+  border-radius: 4px;
+
+  &:hover,
+  &:active {
+    background: ${s("listItemHoverBackground")};
+    cursor: var(--pointer);
+  }
+`;
+
+const Unread = styled.div`
+  width: 8px;
+  height: 8px;
+  background: ${s("accent")};
+  border-radius: 8px;
+  align-self: center;
+  position: absolute;
+  right: 20px;
+`;
+
+export default observer(NotificationListItem);

app/components/Notifications/Notifications.tsx

@@ -0,0 +1,113 @@
+import { observer } from "mobx-react";
+import { MarkAsReadIcon, SettingsIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import Notification from "~/models/Notification";
+import { navigateToNotificationSettings } from "~/actions/definitions/navigation";
+import { markNotificationsAsRead } from "~/actions/definitions/notifications";
+import useActionContext from "~/hooks/useActionContext";
+import useStores from "~/hooks/useStores";
+import Empty from "../Empty";
+import Flex from "../Flex";
+import NudeButton from "../NudeButton";
+import PaginatedList from "../PaginatedList";
+import Scrollable from "../Scrollable";
+import Text from "../Text";
+import Tooltip from "../Tooltip";
+import NotificationListItem from "./NotificationListItem";
+
+type Props = {
+  /* Callback when the notification panel wants to close. */
+  onRequestClose: () => void;
+};
+
+/**
+ * A panel containing a list of notifications and controls to manage them.
+ */
+function Notifications(
+  { onRequestClose }: Props,
+  ref: React.RefObject<HTMLDivElement>
+) {
+  const context = useActionContext();
+  const { notifications } = useStores();
+  const { t } = useTranslation();
+  const isEmpty = notifications.orderedData.length === 0;
+
+  return (
+    <Flex style={{ width: "100%" }} ref={ref} column>
+      <Header justify="space-between">
+        <Text weight="bold" as="span">
+          {t("Notifications")}
+        </Text>
+        <Text color="textSecondary" as={Flex} gap={8}>
+          {notifications.approximateUnreadCount > 0 && (
+            <Tooltip delay={500} tooltip={t("Mark all as read")}>
+              <Button action={markNotificationsAsRead} context={context}>
+                <MarkAsReadIcon />
+              </Button>
+            </Tooltip>
+          )}
+          <Tooltip delay={500} tooltip={t("Settings")}>
+            <Button action={navigateToNotificationSettings} context={context}>
+              <SettingsIcon />
+            </Button>
+          </Tooltip>
+        </Text>
+      </Header>
+      <Scrollable flex topShadow>
+        <PaginatedList
+          fetch={notifications.fetchPage}
+          items={notifications.orderedData}
+          renderItem={(item: Notification) => (
+            <NotificationListItem
+              key={item.id}
+              notification={item}
+              onNavigate={onRequestClose}
+            />
+          )}
+        />
+      </Scrollable>
+      {isEmpty && (
+        <EmptyNotifications>{t("No notifications yet")}.</EmptyNotifications>
+      )}
+    </Flex>
+  );
+}
+
+const EmptyNotifications = styled(Empty)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+`;
+
+const Button = styled(NudeButton)`
+  color: ${s("textSecondary")};
+
+  &:hover,
+  &:active {
+    color: ${s("text")};
+    background: ${s("sidebarControlHoverBackground")};
+  }
+`;
+
+const Header = styled(Flex)`
+  padding: 8px 12px 12px;
+  height: 44px;
+
+  ${Button} {
+    opacity: 0.75;
+    transition: opacity 250ms ease-in-out;
+  }
+
+  &:hover,
+  &:focus-within {
+    ${Button} {
+      opacity: 1;
+    }
+  }
+`;
+
+export default observer(React.forwardRef(Notifications));

app/components/Notifications/NotificationsButton.tsx

@@ -0,0 +1,42 @@
+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 NotificationsButton: React.FC = ({ children }) => {
+  const { t } = useTranslation();
+  const focusRef = React.useRef<HTMLDivElement>(null);
+
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "top-start",
+    unstable_fixed: true,
+  });
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>{children}</PopoverDisclosure>
+      <StyledPopover
+        {...popover}
+        scrollable={false}
+        mobilePosition="bottom"
+        aria-label={t("Notifications")}
+        unstable_initialFocusRef={focusRef}
+        shrink
+        flex
+      >
+        <Notifications onRequestClose={popover.hide} ref={focusRef} />
+      </StyledPopover>
+    </>
+  );
+};
+
+const StyledPopover = styled(Popover)`
+  z-index: ${depths.menu};
+`;
+
+export default observer(NotificationsButton);