feat: Comments (#4911)

* Comment model * Framework, model, policy, presenter, api endpoint etc * Iteration, first pass of UI * fixes, refactors * Comment commands * comment socket support * typing indicators * comment component, styling * wip * right sidebar resize * fix: CMD+Enter submit * Add usePersistedState fix: Main page scrolling on comment highlight * drafts * Typing indicator * refactor * policies * Click thread to highlight Improve comment timestamps * padding * Comment menu v1 * Change comments to use editor * Basic comment editing * fix: Hide commenting button when disabled at team level * Enable opening sidebar without mark * Move selected comment to location state * Add comment delete confirmation * Add comment count to document meta * fix: Comment sidebar togglable Add copy link to comment * stash * Restore History changes * Refactor right sidebar to allow for comment animation * Update to new router best practices * stash * Various improvements * stash * Handle click outside * Fix incorrect placeholder in input fix: Input box appearing on other sessions erroneously * stash * fix: Don't leave orphaned child comments * styling * stash * Enable comment toggling again * Edit styling, merge conflicts * fix: Cannot navigate from insights to comments * Remove draft comment mark on click outside * Fix: Empty comment sidebar, tsc * Remove public toggle * fix: All comments are recessed fix: Comments should not be printed * fix: Associated mark should be removed on comment delete * Revert unused changes * Empty state, basic RTL support * Create dont toggle comment mark * Make it feel more snappy * Highlight active comment in text * fix animation * RTL support * Add reply CTA * Translations
2023-02-25 15:03:05 -05:00
parent 59e25a0ef0
commit fc8c20149f
89 changed files with 2909 additions and 315 deletions
--- a/app/scenes/Document/components/DocumentMeta.tsx
+++ b/app/scenes/Document/components/DocumentMeta.tsx
@@ -0,0 +1,96 @@
+import { LocationDescriptor } from "history";
+import { observer, useObserver } from "mobx-react";
+import { CommentIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useRouteMatch } from "react-router-dom";
+import styled from "styled-components";
+import { TeamPreference } from "@shared/types";
+import Document from "~/models/Document";
+import DocumentMeta from "~/components/DocumentMeta";
+import Fade from "~/components/Fade";
+import useStores from "~/hooks/useStores";
+import { documentUrl, documentInsightsUrl } from "~/utils/routeHelpers";
+
+type Props = {
+  /* The document to display meta data for */
+  document: Document;
+  isDraft: boolean;
+  to?: LocationDescriptor;
+  rtl?: boolean;
+};
+
+function TitleDocumentMeta({ to, isDraft, document, ...rest }: Props) {
+  const { auth, views, comments, ui } = useStores();
+  const { t } = useTranslation();
+  const { team } = auth;
+  const match = useRouteMatch();
+  const documentViews = useObserver(() => views.inDocument(document.id));
+  const totalViewers = documentViews.length;
+  const onlyYou = totalViewers === 1 && documentViews[0].user.id;
+  const viewsLoadedOnMount = React.useRef(totalViewers > 0);
+
+  const Wrapper = viewsLoadedOnMount.current ? React.Fragment : Fade;
+
+  const insightsUrl = documentInsightsUrl(document);
+  const commentsCount = comments.inDocument(document.id).length;
+
+  return (
+    <Meta document={document} to={to} replace {...rest}>
+      {totalViewers && !isDraft ? (
+        <Wrapper>
+          &nbsp;•&nbsp;
+          <Link
+            to={match.url === insightsUrl ? documentUrl(document) : insightsUrl}
+          >
+            {t("Viewed by")}{" "}
+            {onlyYou
+              ? t("only you")
+              : `${totalViewers} ${
+                  totalViewers === 1 ? t("person") : t("people")
+                }`}
+          </Link>
+        </Wrapper>
+      ) : null}
+      {team?.getPreference(TeamPreference.Commenting) && (
+        <>
+          &nbsp;•&nbsp;
+          <CommentLink to={documentUrl(document)} onClick={ui.toggleComments}>
+            <CommentIcon color="currentColor" size={18} />
+            {commentsCount
+              ? t("{{ count }} comment", { count: commentsCount })
+              : t("Comment")}
+          </CommentLink>
+        </>
+      )}
+    </Meta>
+  );
+}
+
+const CommentLink = styled(Link)`
+  display: inline-flex;
+  align-items: center;
+`;
+
+const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
+  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
+  margin: -12px 0 2em 0;
+  font-size: 14px;
+  position: relative;
+  user-select: none;
+  z-index: 1;
+
+  a {
+    color: inherit;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media print {
+    display: none;
+  }
+`;
+
+export default observer(TitleDocumentMeta);