🐛(frontend) fix TOC display without headings

The table of contents was displayed even when there
were no headings in the document. It was
not the expected behavior.
We now ensure that the TOC is only shown
when there are headings present, we added a test
to verify this behavior.

src/frontend/apps/e2e/__tests__/app-impress/doc-table-content.spec.ts

@@ -19,6 +19,8 @@ test.describe('Doc Table Content', () => {
 
     await page.locator('.ProseMirror').click();
 
+    await expect(page.getByRole('button', { name: 'Summary' })).toBeHidden();
+
     await page.keyboard.type('# Level 1\n## Level 2\n### Level 3');
 
     const summaryContainer = page.locator('#summaryContainer');

src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx

@@ -4,7 +4,12 @@ import { css } from 'styled-components';
 
 import { Box, BoxButton, Icon, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { useEditorStore, useHeadingStore } from '@/docs/doc-editor';
+import {
+  DocsBlockNoteEditor,
+  HeadingBlock,
+  useEditorStore,
+  useHeadingStore,
+} from '@/docs/doc-editor';
 import { MAIN_LAYOUT_ID } from '@/layouts/conf';
 
 import { Heading } from './Heading';
@@ -12,6 +17,8 @@ import { Heading } from './Heading';
 export const TableContent = () => {
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
   const [containerHeight, setContainerHeight] = useState('100vh');
+  const { headings } = useHeadingStore();
+  const { editor } = useEditorStore();
 
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
@@ -30,6 +37,15 @@ export const TableContent = () => {
     setIsOpen(true);
   };
 
+  if (
+    !editor ||
+    !headings ||
+    headings.length === 0 ||
+    (headings.length === 1 && !headings[0].contentText)
+  ) {
+    return null;
+  }
+
   return (
     <Box
       $height={containerHeight}
@@ -96,7 +112,13 @@ export const TableContent = () => {
             />
           </BoxButton>
         )}
-        {isOpen && <TableContentOpened setIsOpen={setIsOpen} />}
+        {isOpen && (
+          <TableContentOpened
+            setIsOpen={setIsOpen}
+            headings={headings}
+            editor={editor}
+          />
+        )}
       </Box>
     </Box>
   );
@@ -104,11 +126,13 @@ export const TableContent = () => {
 
 const TableContentOpened = ({
   setIsOpen,
+  headings,
+  editor,
 }: {
   setIsOpen: (isOpen: boolean) => void;
+  headings: HeadingBlock[];
+  editor: DocsBlockNoteEditor;
 }) => {
-  const { headings } = useHeadingStore();
-  const { editor } = useEditorStore();
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
   const [headingIdHighlight, setHeadingIdHighlight] = useState<string>();
   const { t } = useTranslation();
@@ -172,15 +196,6 @@ const TableContentOpened = ({
     setIsOpen(false);
   };
 
-  if (
-    !editor ||
-    !headings ||
-    headings.length === 0 ||
-    (headings.length === 1 && !headings[0].contentText)
-  ) {
-    return null;
-  }
-
   return (
     <Box
       $width="100%"