Hide document TOC when empty

app/scenes/Document/components/Contents.tsx

@@ -5,7 +5,6 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { EditorStyleHelper } from "@shared/editor/styles/EditorStyleHelper";
 import { depths, s } from "@shared/styles";
-import Text from "~/components/Text";
 import useWindowScrollPosition from "~/hooks/useWindowScrollPosition";
 
 const HEADING_OFFSET = 20;
@@ -54,26 +53,26 @@ export default function Contents({ headings }: Props) {
   const headingAdjustment = minHeading - 1;
   const { t } = useTranslation();
 
+  if (headings.length === 0) {
+    return null;
+  }
+
   return (
     <StickyWrapper>
       <Heading>{t("Contents")}</Heading>
-      {headings.length ? (
+      <List>
-        <List>
+        {headings
-          {headings
+          .filter((heading) => heading.level < 4)
-            .filter((heading) => heading.level < 4)
+          .map((heading) => (
-            .map((heading) => (
+            <ListItem
-              <ListItem
+              key={heading.id}
-                key={heading.id}
+              level={heading.level - headingAdjustment}
-                level={heading.level - headingAdjustment}
+              active={activeSlug === heading.id}
-                active={activeSlug === heading.id}
+            >
-              >
+              <Link href={`#${heading.id}`}>{heading.title}</Link>
-                <Link href={`#${heading.id}`}>{heading.title}</Link>
+            </ListItem>
-              </ListItem>
+          ))}
-            ))}
+      </List>
-        </List>
-      ) : (
-        <Empty>{t("Headings you add to the document will appear here")}</Empty>
-      )}
     </StickyWrapper>
   );
 }
@@ -112,10 +111,6 @@ const Heading = styled.h3`
   margin-top: 10px;
 `;
 
-const Empty = styled(Text)`
-  font-size: 14px;
-`;
-
 const ListItem = styled.li<{ level: number; active?: boolean }>`
   margin-left: ${(props) => (props.level - 1) * 10}px;
   margin-bottom: 8px;

app/scenes/Document/components/Header.tsx

@@ -121,7 +121,13 @@ function DocumentHeader({
   const canToggleEmbeds = team?.documentEmbeds;
   const toc = (
     <Tooltip
-      content={ui.tocVisible ? t("Hide contents") : t("Show contents")}
+      content={
+        ui.tocVisible
+          ? t("Hide contents")
+          : documentHasHeadings
+          ? t("Show contents")
+          : `${t("Show contents")} (${t("available when headings are added")})`
+      }
       shortcut="ctrl+alt+h"
       delay={250}
       placement="bottom"

shared/i18n/locales/en_US/translation.json

@@ -570,6 +570,7 @@
   "Type '/' to insert, or start writing…": "Type '/' to insert, or start writing…",
   "Hide contents": "Hide contents",
   "Show contents": "Show contents",
+  "available when headings are added": "available when headings are added",
   "Edit {{noun}}": "Edit {{noun}}",
   "Switch to dark": "Switch to dark",
   "Switch to light": "Switch to light",