fix: Buttons show on collection empty state when user does not have permission to edit

app/scenes/Collection/Actions.tsx

@@ -23,34 +23,38 @@ function Actions({ collection }: Props) {
 
   return (
     <>
-      <Action>
-        <InputSearchPage
-          source="collection"
-          placeholder={`${t("Search in collection")}…`}
-          label={`${t("Search in collection")}…`}
-          collectionId={collection.id}
-        />
-      </Action>
-      {can.update && (
+      {!collection.isEmpty && (
         <>
           <Action>
-            <Tooltip
-              tooltip={t("New document")}
-              shortcut="n"
-              delay={500}
-              placement="bottom"
-            >
-              <Button
-                as={Link}
-                to={collection ? newDocumentPath(collection.id) : ""}
-                disabled={!collection}
-                icon={<PlusIcon />}
-              >
-                {t("New doc")}
-              </Button>
-            </Tooltip>
+            <InputSearchPage
+              source="collection"
+              placeholder={`${t("Search in collection")}…`}
+              label={`${t("Search in collection")}…`}
+              collectionId={collection.id}
+            />
           </Action>
-          <Separator />
+          {can.update && (
+            <>
+              <Action>
+                <Tooltip
+                  tooltip={t("New document")}
+                  shortcut="n"
+                  delay={500}
+                  placement="bottom"
+                >
+                  <Button
+                    as={Link}
+                    to={collection ? newDocumentPath(collection.id) : ""}
+                    disabled={!collection}
+                    icon={<PlusIcon />}
+                  >
+                    {t("New doc")}
+                  </Button>
+                </Tooltip>
+              </Action>
+              <Separator />
+            </>
+          )}
         </>
       )}
       <Action>

app/scenes/Collection/Empty.tsx

@@ -11,7 +11,6 @@ import Flex from "~/components/Flex";
 import Modal from "~/components/Modal";
 import Text from "~/components/Text";
 import useBoolean from "~/hooks/useBoolean";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
 import { newDocumentPath } from "~/utils/routeHelpers";
 
@@ -22,8 +21,7 @@ type Props = {
 function EmptyCollection({ collection }: Props) {
   const { policies } = useStores();
   const { t } = useTranslation();
-  const team = useCurrentTeam();
-  const can = policies.abilities(team.id);
+  const can = policies.abilities(collection.id);
   const collectionName = collection ? collection.name : "";
 
   const [
@@ -46,23 +44,21 @@ function EmptyCollection({ collection }: Props) {
           }}
         />
         <br />
-        {can.createDocument && (
-          <Trans>Get started by creating a new one!</Trans>
-        )}
+        {can.update && <Trans>Get started by creating a new one!</Trans>}
       </Text>
-      <Empty>
-        {can.createDocument && (
+      {can.update && (
+        <Empty>
           <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>
+          &nbsp;&nbsp;
+          <Button onClick={handlePermissionsModalOpen} neutral>
+            {t("Manage permissions")}…
+          </Button>
+        </Empty>
+      )}
       <Modal
         title={t("Collection permissions")}
         onRequestClose={handlePermissionsModalClose}