feat: Pin to home (#2880)

app/scenes/Collection/Empty.tsx

@@ -0,0 +1,89 @@
+import { observer } from "mobx-react";
+import { NewDocumentIcon } from "outline-icons";
+import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import Collection from "~/models/Collection";
+import CollectionPermissions from "~/scenes/CollectionPermissions";
+import Button from "~/components/Button";
+import Flex from "~/components/Flex";
+import HelpText from "~/components/HelpText";
+import Modal from "~/components/Modal";
+import useBoolean from "~/hooks/useBoolean";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useStores from "~/hooks/useStores";
+import { newDocumentPath } from "~/utils/routeHelpers";
+
+type Props = {
+  collection: Collection;
+};
+
+function EmptyCollection({ collection }: Props) {
+  const { policies } = useStores();
+  const { t } = useTranslation();
+  const team = useCurrentTeam();
+  const can = policies.abilities(team.id);
+  const collectionName = collection ? collection.name : "";
+
+  const [
+    permissionsModalOpen,
+    handlePermissionsModalOpen,
+    handlePermissionsModalClose,
+  ] = useBoolean();
+
+  return (
+    <Centered column>
+      <HelpText>
+        <Trans
+          defaults="<em>{{ collectionName }}</em> doesn’t contain any
+                    documents yet."
+          values={{
+            collectionName,
+          }}
+          components={{
+            em: <strong />,
+          }}
+        />
+        <br />
+        {can.createDocument && (
+          <Trans>Get started by creating a new one!</Trans>
+        )}
+      </HelpText>
+      <Empty>
+        {can.createDocument && (
+          <Link to={newDocumentPath(collection.id)}>
+            <Button icon={<NewDocumentIcon color="currentColor" />}>
+              {t("Create a document")}
+            </Button>
+          </Link>
+        )}
+        &nbsp;&nbsp;
+        <Button onClick={handlePermissionsModalOpen} neutral>
+          {t("Manage permissions")}…
+        </Button>
+      </Empty>
+      <Modal
+        title={t("Collection permissions")}
+        onRequestClose={handlePermissionsModalClose}
+        isOpen={permissionsModalOpen}
+      >
+        <CollectionPermissions collection={collection} />
+      </Modal>
+    </Centered>
+  );
+}
+
+const Centered = styled(Flex)`
+  text-align: center;
+  margin: 40vh auto 0;
+  max-width: 380px;
+  transform: translateY(-50%);
+`;
+
+const Empty = styled(Flex)`
+  justify-content: center;
+  margin: 10px 0;
+`;
+
+export default observer(EmptyCollection);