♻️(frontend) move table of content to right panel

We move the floating table of content to the
right panel. This allows us to have a more consistent
UI and to make room for the right sidebar.

Author: AntoLC

src/frontend/apps/impress/src/assets/icons/ui-kit/bulleted-list.svg

@@ -29,6 +29,7 @@ import { useConfig } from '@/core';
 import { useCunninghamTheme } from '@/cunningham';
 import { Doc } from '@/docs/doc-management';
 import { avatarUrlFromName, useAuth } from '@/features/auth';
+import { useRightPanelStore } from '@/features/right-panel/components/useRightPanelStore';
 import { useAnalytics } from '@/libs/Analytics';
 
 import { AI_FEATURE_FLAG, DEFAULT_LOCALE } from '../conf';
@@ -134,11 +135,10 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
     user,
   );
 
-  const {
-    threadsSidebarTarget,
-    filter: threadsSidebarFilter,
-    isSideBarOpen,
-  } = useCommentSidebarStore();
+  const { threadsSidebarTarget, filter: threadsSidebarFilter } =
+    useCommentSidebarStore();
+  const { activePanel, isPanelOpen } = useRightPanelStore();
+  const isCommentSideBarOpen = isPanelOpen && activePanel === 'comments';
 
   const currentUserAvatarUrl = useMemo(() => {
     if (canSeeComment) {
@@ -300,7 +300,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
         <BlockNoteSuggestionMenu aiAllowed={aiBlockNoteAllowed} />
         <BlockNoteToolbar aiAllowed={aiBlockNoteAllowed} />
         {showComments && <FloatingComposerController />}
-        {showComments && !isSideBarOpen && (
+        {showComments && !isCommentSideBarOpen && (
           <FloatingThreadController
             floatingUIOptions={{
               useDismissProps: {

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

@@ -110,25 +110,28 @@ export const CommentSideBar = ({ onClose }: CommentSideBarProps) => {
 
 export const CommentSideBarButton = () => {
   const { t } = useTranslation();
-  const { isPanelOpen, togglePanel } = useRightPanelStore();
-  const { setIsSideBarOpen } = useCommentSidebarStore();
+  const { isPanelOpen, activePanel, setActivePanel, setIsPanelOpen } =
+    useRightPanelStore();
 
-  useEffect(() => {
-    setIsSideBarOpen(isPanelOpen);
-  }, [isPanelOpen, setIsSideBarOpen]);
-
-  const ariaLabel = isPanelOpen
+  const isActive = isPanelOpen && activePanel === 'comments';
+  const ariaLabel = isActive
     ? t('Hide the comments sidebar')
     : t('Show the comments sidebar');
 
   return (
     <Button
       size="small"
-      onClick={togglePanel}
+      onClick={() => {
+        if (isActive) {
+          setIsPanelOpen(false);
+        } else {
+          setActivePanel('comments');
+        }
+      }}
       aria-label={ariaLabel}
-      aria-expanded={isPanelOpen}
+      aria-expanded={isActive}
       color="neutral"
-      variant={isPanelOpen ? 'secondary' : 'tertiary'}
+      variant={isActive ? 'secondary' : 'tertiary'}
       icon={<CommentsIcon width={24} height={24} aria-hidden="true" />}
     ></Button>
   );

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

@@ -2,18 +2,14 @@ import { create } from 'zustand';
 
 interface CommentSidebarStore {
   filter: 'open' | 'resolved';
-  isSideBarOpen: boolean;
-  setIsSideBarOpen: (isSideBarOpen: boolean) => void;
-  setThreadsSidebarTarget: (el: HTMLElement | null) => void;
   setFilter: (filter: 'open' | 'resolved') => void;
+  setThreadsSidebarTarget: (el: HTMLElement | null) => void;
   threadsSidebarTarget: HTMLElement | null;
 }
 
 export const useCommentSidebarStore = create<CommentSidebarStore>((set) => ({
   filter: 'open',
-  isSideBarOpen: false,
   setFilter: (filter) => set(() => ({ filter })),
-  setIsSideBarOpen: (isSideBarOpen) => set(() => ({ isSideBarOpen })),
   setThreadsSidebarTarget: (threadsSidebarTarget) => {
     set(() => ({ threadsSidebarTarget }));
   },

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useCommentSidebarStore.ts

@@ -0,0 +1,64 @@
+import { Button } from '@gouvfr-lasuite/cunningham-react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import TableContentIcon from '@/assets/icons/ui-kit/bulleted-list.svg';
+import { Box, ButtonCloseModal, Text } from '@/components';
+import { useRightPanelStore } from '@/features/right-panel/components/useRightPanelStore';
+
+interface TableContentSideBarProps {
+  onClose: () => void;
+}
+
+export const TableContentSideBar = ({ onClose }: TableContentSideBarProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box $height="inherit">
+      <Box
+        $padding={{ vertical: 'base', horizontal: 'sm' }}
+        $css={css`
+          border-bottom: 1px solid
+            var(--c--contextuals--border--surface--primary);
+        `}
+      >
+        <Box $direction="row" $align="center" $justify="space-between">
+          <Text $weight="bold">{t('Table of Contents')}</Text>
+          <ButtonCloseModal
+            aria-label={t('Close the table of contents sidebar')}
+            onClick={onClose}
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const TableContentSideBarButton = () => {
+  const { t } = useTranslation();
+  const { isPanelOpen, activePanel, setActivePanel, setIsPanelOpen } =
+    useRightPanelStore();
+
+  const isActive = isPanelOpen && activePanel === 'tableContent';
+  const ariaLabel = isActive
+    ? t('Hide the table of contents sidebar')
+    : t('Show the table of contents sidebar');
+
+  return (
+    <Button
+      size="small"
+      onClick={() => {
+        if (isActive) {
+          setIsPanelOpen(false);
+        } else {
+          setActivePanel('tableContent');
+        }
+      }}
+      aria-label={ariaLabel}
+      aria-expanded={isActive}
+      color="neutral"
+      variant={isActive ? 'secondary' : 'tertiary'}
+      icon={<TableContentIcon width={24} height={24} aria-hidden="true" />}
+    ></Button>
+  );
+};

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

@@ -1,30 +1,56 @@
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box } from '@/components';
 import { CommentSideBar } from '@/features/docs/doc-editor/components/comments/CommentSideBar';
 import { useDocStore, useProviderStore } from '@/features/docs/doc-management';
+import { TableContentSideBar } from '@/features/docs/doc-table-content/components/TableContentSideBar';
 import { HEADER_HEIGHT } from '@/features/header';
 
-import { useRightPanelStore } from './useRightPanelStore';
+import { RightPanelView, useRightPanelStore } from './useRightPanelStore';
 
 export const RightPanel = () => {
   const { t } = useTranslation();
   const { currentDoc: doc } = useDocStore();
-  const { setIsPanelOpen, isPanelOpen } = useRightPanelStore();
+  const { setIsPanelOpen, isPanelOpen, activePanel } = useRightPanelStore();
   const { provider, isReady } = useProviderStore();
   const isProviderReady =
     isReady && provider && provider?.configuration.name === doc?.id;
 
+  /**
+   * Keep rendering the last active panel during the close animation,
+   * so the content doesn't vanish before the panel finishes sliding out.
+   * When switching panels, the content swaps instantly.
+   */
+  const [renderedPanel, setRenderedPanel] = useState<RightPanelView | null>(
+    null,
+  );
+  useEffect(() => {
+    if (activePanel !== null) {
+      setRenderedPanel(activePanel);
+    } else {
+      const timer = setTimeout(() => setRenderedPanel(null), 500);
+      return () => clearTimeout(timer);
+    }
+  }, [activePanel]);
+
   if (!doc || !isProviderReady) {
     return null;
   }
 
+  const ariaLabel = isPanelOpen
+    ? t('Right panel, currently open')
+    : t('Right panel, currently closed');
+
+  const handleClose = () => setIsPanelOpen(false);
+
   return (
     <Box
       className="--docs--right-panel"
-      aria-label={t('Right panel')}
+      aria-label={ariaLabel}
       aria-hidden={!isPanelOpen}
+      aria-expanded={isPanelOpen}
       $width="300px"
       $height={`calc(100dvh - ${HEADER_HEIGHT}px)`}
       $position="sticky"
@@ -46,7 +72,10 @@ export const RightPanel = () => {
         `}
       `}
     >
-      <CommentSideBar onClose={() => setIsPanelOpen(false)} />
+      {renderedPanel === 'tableContent' && (
+        <TableContentSideBar onClose={handleClose} />
+      )}
+      {renderedPanel === 'comments' && <CommentSideBar onClose={handleClose} />}
     </Box>
   );
 };

src/frontend/apps/impress/src/features/right-panel/components/RightPanel.tsx

@@ -2,6 +2,7 @@ import { css } from 'styled-components';
 
 import { Card } from '@/components';
 import { CommentSideBarButton } from '@/features/docs/doc-editor/components/comments/CommentSideBar';
+import { TableContentSideBarButton } from '@/features/docs/doc-table-content/components/TableContentSideBar';
 
 export const RightPanelCollapseButton = () => {
   return (
@@ -16,6 +17,7 @@ export const RightPanelCollapseButton = () => {
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
       `}
     >
+      <TableContentSideBarButton />
       <CommentSideBarButton />
     </Card>
   );

src/frontend/apps/impress/src/features/right-panel/components/RightPanelCollapseButton.tsx

@@ -1,17 +1,24 @@
 import { create } from 'zustand';
 
+export type RightPanelView = 'tableContent' | 'comments';
+
 export interface UseRightPanelStore {
   isPanelOpen: boolean;
+  activePanel: RightPanelView | null;
+  setActivePanel: (panel: RightPanelView | null) => void;
   setIsPanelOpen: (isOpen: boolean) => void;
   togglePanel: () => void;
 }
 
 export const useRightPanelStore = create<UseRightPanelStore>((set) => ({
   isPanelOpen: false,
-  setIsPanelOpen: (isPanelOpen) => {
-    set(() => ({ isPanelOpen }));
-  },
-  togglePanel: () => {
-    set((state) => ({ isPanelOpen: !state.isPanelOpen }));
-  },
+  activePanel: null,
+  setActivePanel: (activePanel) =>
+    set(() => ({ activePanel, isPanelOpen: activePanel !== null })),
+  setIsPanelOpen: (isPanelOpen) =>
+    set((state) => ({
+      isPanelOpen,
+      activePanel: isPanelOpen ? state.activePanel : null,
+    })),
+  togglePanel: () => set((state) => ({ isPanelOpen: !state.isPanelOpen })),
 }));