outline/app/scenes/Document/components/References.tsx

import { observer } from "mobx-react";
import * as React from "react";
import { Trans } from "react-i18next";
import { useLocation } from "react-router-dom";
import styled from "styled-components";
import Document from "~/models/Document";
import Fade from "~/components/Fade";
import Tab from "~/components/Tab";
import Tabs from "~/components/Tabs";
import useMouseMove from "~/hooks/useMouseMove";
import useStores from "~/hooks/useStores";
import FadeOut from "./FadeOut";
import ReferenceListItem from "./ReferenceListItem";

type Props = {
  document: Document;
  isFocusing: boolean;
};

function References({ document, isFocusing }: Props) {
  const { collections, documents } = useStores();
  const location = useLocation();
  const isMouseMoving = useMouseMove();
  const hideHeader = isFocusing && !isMouseMoving;

  React.useEffect(() => {
    documents.fetchBacklinks(document.id);
  }, [documents, document.id]);

  const backlinks = documents.getBacklinkedDocuments(document.id);
  const collection = collections.get(document.collectionId);
  const children = collection
    ? collection.getDocumentChildren(document.id)
    : [];
  const showBacklinks = !!backlinks.length;
  const showChildDocuments = !!children.length;
  const isBacklinksTab = location.hash === "#backlinks" || !showChildDocuments;
  const height = Math.max(backlinks.length, children.length) * 40;

  return showBacklinks || showChildDocuments ? (
    <FadeOut $fade={hideHeader}>
      <Fade style={{ width: "100%" }}>
        <Tabs>
          {showChildDocuments && (
            <Tab to="#children" isActive={() => !isBacklinksTab}>
              <Trans>Nested documents</Trans>
            </Tab>
          )}
          {showBacklinks && (
            <Tab to="#backlinks" isActive={() => isBacklinksTab}>
              <Trans>Backlinks</Trans>
            </Tab>
          )}
        </Tabs>
        <Content style={{ height }}>
          {showBacklinks && (
            <List $active={isBacklinksTab}>
              {backlinks.map((backlinkedDocument) => (
                <ReferenceListItem
                  anchor={document.urlId}
                  key={backlinkedDocument.id}
                  document={backlinkedDocument}
                  showCollection={
                    backlinkedDocument.collectionId !== document.collectionId
                  }
                />
              ))}
            </List>
          )}
          {showChildDocuments && (
            <List $active={!isBacklinksTab}>
              {children.map((node) => {
                // If we have the document in the store already then use it to get the extra
                // contextual info, otherwise the collection node will do (only has title and id)
                const document = documents.get(node.id);
                return (
                  <ReferenceListItem
                    key={node.id}
                    document={document || node}
                    showCollection={false}
                  />
                );
              })}
            </List>
          )}
        </Content>
      </Fade>
    </FadeOut>
  ) : null;
}

const Content = styled.div`
  position: relative;
`;

const List = styled.div<{ $active: boolean }>`
  visibility: ${({ $active }) => ($active ? "visible" : "hidden")};
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
`;

export default observer(References);