feat: Backlinks (#979)

* feat: backlinks

* feat: add backlinkDocumentId to documents.list

* chore: refactor
fix: create and delete backlink handling

* fix: guard against self links

* feat: basic frontend
fix: race condition

* styling

* test: fix parse ids

* self review

* linting

* feat: Improved link styling

* fix: Increase clickable area at bottom of doc / between references

* perf: global styles are SLOW

app/components/DocumentPreview/DocumentPreview.js

@@ -2,14 +2,13 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
-import Document from 'models/Document';
+import { StarredIcon } from 'outline-icons';
 import styled, { withTheme } from 'styled-components';
-import { darken } from 'polished';
 import Flex from 'shared/components/Flex';
 import Highlight from 'components/Highlight';
-import { StarredIcon } from 'outline-icons';
-import PublishingInfo from './components/PublishingInfo';
+import PublishingInfo from 'components/PublishingInfo';
 import DocumentMenu from 'menus/DocumentMenu';
+import Document from 'models/Document';
 
 type Props = {
   document: Document,
@@ -45,8 +44,8 @@ const StyledDocumentMenu = styled(DocumentMenu)`
 
 const DocumentLink = styled(Link)`
   display: block;
-  margin: 0 -16px;
-  padding: 10px 16px;
+  margin: 8px -8px;
+  padding: 6px 8px;
   border-radius: 8px;
   border: 2px solid transparent;
   max-height: 50vh;
@@ -62,7 +61,6 @@ const DocumentLink = styled(Link)`
   &:active,
   &:focus {
     background: ${props => props.theme.listItemHoverBackground};
-    border: 2px solid ${props => props.theme.listItemHoverBorder};
     outline: none;
 
     ${StyledStar}, ${StyledDocumentMenu} {
@@ -73,10 +71,6 @@ const DocumentLink = styled(Link)`
       }
     }
   }
-
-  &:focus {
-    border: 2px solid ${props => darken(0.5, props.theme.listItemHoverBorder)};
-  }
 `;
 
 const Heading = styled.h3`

app/components/DocumentPreview/components/PublishingInfo.js

@@ -1,102 +0,0 @@
-// @flow
-import * as React from 'react';
-import { inject } from 'mobx-react';
-import styled from 'styled-components';
-import Document from 'models/Document';
-import Flex from 'shared/components/Flex';
-import Time from 'shared/components/Time';
-import Breadcrumb from 'shared/components/Breadcrumb';
-import CollectionsStore from 'stores/CollectionsStore';
-
-const Container = styled(Flex)`
-  color: ${props => props.theme.textTertiary};
-  font-size: 13px;
-  white-space: nowrap;
-  overflow: hidden;
-`;
-
-const Modified = styled.span`
-  color: ${props =>
-    props.highlight ? props.theme.text : props.theme.textTertiary};
-  font-weight: ${props => (props.highlight ? '600' : '400')};
-`;
-
-type Props = {
-  collections: CollectionsStore,
-  showCollection?: boolean,
-  showPublished?: boolean,
-  document: Document,
-  views?: number,
-};
-
-function PublishingInfo({
-  collections,
-  showPublished,
-  showCollection,
-  document,
-}: Props) {
-  const {
-    modifiedSinceViewed,
-    updatedAt,
-    updatedBy,
-    publishedAt,
-    archivedAt,
-    deletedAt,
-    isDraft,
-  } = document;
-
-  const neverUpdated = publishedAt === updatedAt;
-  let content;
-
-  if (deletedAt) {
-    content = (
-      <span>
-        &nbsp;deleted <Time dateTime={deletedAt} /> ago
-      </span>
-    );
-  } else if (archivedAt) {
-    content = (
-      <span>
-        &nbsp;archived <Time dateTime={archivedAt} /> ago
-      </span>
-    );
-  } else if (publishedAt && (neverUpdated || showPublished)) {
-    content = (
-      <span>
-        &nbsp;published <Time dateTime={publishedAt} /> ago
-      </span>
-    );
-  } else if (isDraft) {
-    content = (
-      <span>
-        &nbsp;saved <Time dateTime={updatedAt} /> ago
-      </span>
-    );
-  } else {
-    content = (
-      <Modified highlight={modifiedSinceViewed}>
-        &nbsp;updated <Time dateTime={updatedAt} /> ago
-      </Modified>
-    );
-  }
-
-  const collection = collections.get(document.collectionId);
-
-  return (
-    <Container align="center">
-      {updatedBy.name}
-      {content}
-      {showCollection &&
-        collection && (
-          <span>
-            &nbsp;in&nbsp;
-            <strong>
-              {isDraft ? 'Drafts' : <Breadcrumb document={document} onlyText />}
-            </strong>
-          </span>
-        )}
-    </Container>
-  );
-}
-
-export default inject('collections')(PublishingInfo);