♻️(frontent) improve summary feature

- Change Summary to Table of content
- No dash before the title
- Change font-size depend the type of heading
- If more than 2 headings the panel is open
by default
- improve sticky
- highligth the title where you are in the page

Author: AntoLC

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to
 - ♻️ Allow null titles on documents for easier creation #234
 - 🛂(backend) stop to list public doc to everyone #234
 - 🚚(frontend) change visibility in share modal #235
+- ⚡️(frontend) Improve summary #244
 
 ## Fixed
 

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

@@ -15,7 +15,7 @@ test.describe('Doc Summary', () => {
     await page.getByLabel('Open the document options').click();
     await page
       .getByRole('button', {
-        name: 'Summary',
+        name: 'Table of content',
       })
       .click();
 
@@ -29,7 +29,7 @@ test.describe('Doc Summary', () => {
     await page.locator('.bn-block-outer').last().click();
 
     // Create space to fill the viewport
-    for (let i = 0; i < 6; i++) {
+    for (let i = 0; i < 5; i++) {
       await page.keyboard.press('Enter');
     }
 
@@ -40,25 +40,49 @@ test.describe('Doc Summary', () => {
     await page.locator('.bn-block-outer').last().click();
 
     // Create space to fill the viewport
-    for (let i = 0; i < 4; i++) {
+    for (let i = 0; i < 5; i++) {
       await page.keyboard.press('Enter');
     }
 
     await editor.locator('.bn-block-outer').last().fill('/');
     await page.getByText('Heading 3').click();
     await page.keyboard.type('Another World');
 
-    await expect(panel.getByText('Hello World')).toBeVisible();
-    await expect(panel.getByText('Super World')).toBeVisible();
+    const hello = panel.getByText('Hello World');
+    const superW = panel.getByText('Super World');
+    const another = panel.getByText('Another World');
 
-    await panel.getByText('Another World').click();
+    await expect(hello).toBeVisible();
+    await expect(hello).toHaveCSS('font-size', '19.2px');
+    await expect(hello).toHaveAttribute('aria-selected', 'true');
+
+    await expect(superW).toBeVisible();
+    await expect(superW).toHaveCSS('font-size', '16px');
+    await expect(superW).toHaveAttribute('aria-selected', 'false');
+
+    await expect(another).toBeVisible();
+    await expect(another).toHaveCSS('font-size', '12.8px');
+    await expect(another).toHaveAttribute('aria-selected', 'false');
+
+    await hello.click();
+
+    await expect(editor.getByText('Hello World')).toBeInViewport();
+    await expect(hello).toHaveAttribute('aria-selected', 'true');
+    await expect(superW).toHaveAttribute('aria-selected', 'false');
+
+    await another.click();
 
     await expect(editor.getByText('Hello World')).not.toBeInViewport();
+    await expect(hello).toHaveAttribute('aria-selected', 'false');
+    await expect(superW).toHaveAttribute('aria-selected', 'true');
 
     await panel.getByText('Back to top').click();
     await expect(editor.getByText('Hello World')).toBeInViewport();
+    await expect(hello).toHaveAttribute('aria-selected', 'true');
+    await expect(superW).toHaveAttribute('aria-selected', 'false');
 
     await panel.getByText('Go to bottom').click();
     await expect(editor.getByText('Hello World')).not.toBeInViewport();
+    await expect(superW).toHaveAttribute('aria-selected', 'true');
   });
 });

src/frontend/apps/impress/src/components/Panel.tsx

@@ -5,7 +5,7 @@ import { Box, Card, IconBG, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
 interface PanelProps {
-  title: string;
+  title?: string;
   setIsPanelOpen: (isOpen: boolean) => void;
 }
 
@@ -53,11 +53,14 @@ export const Panel = ({
       {...closedOverridingStyles}
     >
       <Box
-        $overflow="hidden"
+        $overflow="inherit"
+        $position="sticky"
         $css={`
+          top: 0;
           opacity: ${isOpen ? '1' : '0'};
           transition: ${transition};
         `}
+        $maxHeight="100%"
       >
         <Box
           $padding={{ all: 'small' }}
@@ -90,9 +93,11 @@ export const Panel = ({
             }}
             $radius="2px"
           />
-          <Text $weight="bold" $size="l" $theme="primary">
-            {title}
-          </Text>
+          {title && (
+            <Text $weight="bold" $size="l" $theme="primary">
+              {title}
+            </Text>
+          )}
         </Box>
         {children}
       </Box>

src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx

@@ -9,7 +9,7 @@ import { Panel } from '@/components/Panel';
 import { useCunninghamTheme } from '@/cunningham';
 import { DocHeader } from '@/features/docs/doc-header';
 import { Doc } from '@/features/docs/doc-management';
-import { Summary, useDocSummaryStore } from '@/features/docs/doc-summary';
+import { Summary } from '@/features/docs/doc-summary';
 import {
   VersionList,
   Versions,
@@ -28,8 +28,6 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
     query: { versionId },
   } = useRouter();
   const { isPanelVersionOpen, setIsPanelVersionOpen } = useDocVersionStore();
-  const { isPanelSummaryOpen, setIsPanelSummaryOpen } = useDocSummaryStore();
-
   const { t } = useTranslation();
 
   const isVersion = versionId && typeof versionId === 'string';
@@ -72,11 +70,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
             <VersionList doc={doc} />
           </Panel>
         )}
-        {isPanelSummaryOpen && (
-          <Panel title={t('SUMMARY')} setIsPanelOpen={setIsPanelSummaryOpen}>
-            <Summary doc={doc} />
-          </Panel>
-        )}
+        <Summary doc={doc} />
       </Box>
     </>
   );

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -91,7 +91,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
             icon={<span className="material-icons">summarize</span>}
             size="small"
           >
-            <Text $theme="primary">{t('Summary')}</Text>
+            <Text $theme="primary">{t('Table of content')}</Text>
           </Button>
           <Button
             onClick={() => {

src/frontend/apps/impress/src/features/docs/doc-summary/components/Heading.tsx

@@ -0,0 +1,66 @@
+import { BlockNoteEditor } from '@blocknote/core';
+import { useState } from 'react';
+
+import { BoxButton, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+const sizeMap: { [key: number]: string } = {
+  1: '1.2rem',
+  2: '1rem',
+  3: '0.8rem',
+};
+
+export type HeadingsHighlight = {
+  headingId: string;
+  isVisible: boolean;
+}[];
+
+interface HeadingProps {
+  editor: BlockNoteEditor;
+  level: number;
+  text: string;
+  headingId: string;
+  isHighlight: boolean;
+}
+
+export const Heading = ({
+  headingId,
+  editor,
+  isHighlight,
+  level,
+  text,
+}: HeadingProps) => {
+  const [isHover, setIsHover] = useState(isHighlight);
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <BoxButton
+      key={headingId}
+      onMouseOver={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}
+      onClick={() => {
+        editor.focus();
+        editor.setTextCursorPosition(headingId, 'end');
+        document.querySelector(`[data-id="${headingId}"]`)?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+        });
+      }}
+    >
+      <Text
+        $theme="primary"
+        $padding={{ vertical: 'xtiny', left: 'tiny' }}
+        $size={sizeMap[level]}
+        $hasTransition
+        $css={
+          isHover || isHighlight
+            ? `box-shadow: -2px 0px 0px ${colorsTokens()[isHighlight ? 'primary-500' : 'primary-400']};`
+            : ''
+        }
+        aria-selected={isHighlight}
+      >
+        {text}
+      </Text>
+    </BoxButton>
+  );
+};