Feat/comment side panel

src/frontend/apps/impress/src/components/modal/ButtonCloseModal.tsx

@@ -1,7 +1,6 @@
 import { Button, type ButtonProps } from '@gouvfr-lasuite/cunningham-react';
-import React from 'react';
 
-import { Icon } from '@/components';
+import CloseIcon from '@/assets/icons/ui-kit/x-mark.svg';
 
 export const ButtonCloseModal = (props: ButtonProps) => {
   return (
@@ -10,14 +9,7 @@ export const ButtonCloseModal = (props: ButtonProps) => {
       size="small"
       color="neutral"
       variant="tertiary"
-      icon={
-        <Icon
-          iconName="close"
-          className="material-icons-filled"
-          $size="24px!important"
-          $color="var(--c--contextuals--content--semantic--neutral--secondary)"
-        />
-      }
+      icon={<CloseIcon width="24" height="24" aria-hidden="true" />}
       {...props}
     />
   );

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

@@ -22,7 +22,7 @@ import { useCollaboration } from '../hook/useCollaboration';
 
 import { BlockNoteEditor, BlockNoteReader } from './BlockNoteEditor';
 
-const DOCS_EDITOR_CLASS = '--docs--doc-editor';
+export const DOCS_EDITOR_CLASS = '--docs--doc-editor';
 
 interface DocEditorContainerProps {
   docHeader: React.ReactNode;

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

@@ -0,0 +1,68 @@
+import { CommentsExtension } from '@blocknote/core/comments';
+import { BlockNoteView } from '@blocknote/mantine';
+import { ThreadsSidebar, useCreateBlockNote } from '@blocknote/react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box, ButtonCloseModal, Text } from '@/components/';
+import { Doc } from '@/docs/doc-management';
+import { useAuth } from '@/features/auth';
+
+import { useComments } from './useComments';
+
+interface CommentSideBarProps {
+  doc: Doc;
+  onClose: () => void;
+}
+
+export const CommentSideBar = ({ doc, onClose }: CommentSideBarProps) => {
+  const { user } = useAuth();
+  const canSeeComment = doc.abilities.comment;
+  const { t } = useTranslation();
+
+  const { resolveUsers, threadStore } = useComments(
+    doc.id,
+    canSeeComment,
+    user,
+  );
+
+  const editor = useCreateBlockNote(
+    {
+      extensions: [CommentsExtension({ threadStore, resolveUsers })],
+    },
+    [threadStore, resolveUsers],
+  );
+
+  return (
+    <Box>
+      <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('Comments')}</Text>
+          <ButtonCloseModal
+            aria-label={t('Close the share modal')}
+            onClick={onClose}
+          />
+        </Box>
+      </Box>
+
+      <BlockNoteView
+        className="--docs--main-editor"
+        aria-label={t('Document editor')}
+        editor={editor}
+        formattingToolbar={false}
+        slashMenu={false}
+        theme="light"
+        comments={false}
+        renderEditor={false}
+      >
+        <ThreadsSidebar filter="all" sort="recent-activity" />
+      </BlockNoteView>
+    </Box>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts

@@ -1,3 +1,2 @@
 export * from './useEditorStore';
 export * from './useHeadingStore';
-export * from './usePanelEditorStore';

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

@@ -4,6 +4,7 @@ import { css } from 'styled-components';
 import { Box } from '@/components';
 import { useCunninghamTheme } from '@/cunningham/useCunninghamTheme';
 import { LeftPanelCollapseButton } from '@/features/left-panel';
+import { RightPanelCollapseButton } from '@/features/right-panel/components/RightPanelCollapseButton';
 import { useResponsiveStore } from '@/stores';
 
 /**
@@ -32,9 +33,7 @@ export const FloatingBar = () => {
       margin-right: calc(-${base});
       margin-top: calc(-${base});
       z-index: 21; // Under editor select box but above other elements (e.g., doc title, suggestion menu)
-      display: flex;
       align-items: flex-start;
-      justify-content: flex-start;
       isolation: isolate;
 
       &::before {
@@ -73,8 +72,11 @@ export const FloatingBar = () => {
       className="--docs--floating-bar"
       data-testid="floating-bar"
       $css={FLOATING_STYLES}
+      $direction="row"
+      $justify="space-between"
     >
       <LeftPanelCollapseButton />
+      <RightPanelCollapseButton />
     </Box>
   );
 };

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

@@ -0,0 +1,46 @@
+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 } from '@/features/docs/doc-management';
+
+import { useRightPanelStore } from './useRightPanelStore';
+
+export const RightPanel = () => {
+  const { t } = useTranslation();
+  const { currentDoc: doc } = useDocStore();
+  const { setIsPanelOpen, isPanelOpen } = useRightPanelStore();
+
+  if (!doc) {
+    return null;
+  }
+
+  return (
+    <Box
+      className="right-panel"
+      aria-label={t('Right panel')}
+      aria-hidden={!isPanelOpen}
+      $width="300px"
+      $height="100vh"
+      $hasTransition="slow"
+      $background="var(--c--contextuals--background--surface--secondary)"
+      $css={css`
+        border-left: 1px solid var(--c--contextuals--border--surface--primary);
+        transform: translateX(0%);
+        flex: 1;
+        margin-left: 1rem;
+        ${!isPanelOpen &&
+        css`
+          transform: translateX(200%);
+          opacity: 0;
+          flex: 0;
+          margin-left: 0rem;
+          max-width: 0rem;
+        `}
+      `}
+    >
+      <CommentSideBar doc={doc} onClose={() => setIsPanelOpen(false)} />
+    </Box>
+  );
+};

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

@@ -0,0 +1,42 @@
+import { Button } from '@gouvfr-lasuite/cunningham-react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import CommentsIcon from '@/assets/icons/ui-kit/bubble-text.svg';
+import { Card } from '@/components';
+
+import { useRightPanelStore } from './useRightPanelStore';
+
+export const RightPanelCollapseButton = () => {
+  const { t } = useTranslation();
+  const { isPanelOpen, togglePanel } = useRightPanelStore();
+
+  const ariaLabel = isPanelOpen
+    ? t('Hide the right side panel')
+    : t('Show the right side panel');
+
+  return (
+    <Card
+      className="--docs--right-panel-collapse-button"
+      $direction="row"
+      $css={css`
+        padding: var(--c--globals--spacings--xxxs);
+        align-items: center;
+        gap: var(--c--globals--spacings--xxxs);
+        border-radius: var(--c--globals--spacings--xs);
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+      `}
+    >
+      <Button
+        size="small"
+        onClick={togglePanel}
+        aria-label={ariaLabel}
+        aria-expanded={isPanelOpen}
+        color="neutral"
+        variant="tertiary"
+        icon={<CommentsIcon width={24} height={24} aria-hidden="true" />}
+        data-testid="floating-bar-toggle-right-panel"
+      ></Button>
+    </Card>
+  );
+};

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

@@ -0,0 +1,17 @@
+import { create } from 'zustand';
+
+export interface UseRightPanelStore {
+  isPanelOpen: boolean;
+  setIsPanelOpen: (isOpen: boolean) => void;
+  togglePanel: () => void;
+}
+
+export const useRightPanelStore = create<UseRightPanelStore>((set) => ({
+  isPanelOpen: true,
+  setIsPanelOpen: (isPanelOpen) => {
+    set(() => ({ isPanelOpen }));
+  },
+  togglePanel: () => {
+    set((state) => ({ isPanelOpen: !state.isPanelOpen }));
+  },
+}));

src/frontend/apps/impress/src/layouts/MainLayout.tsx

@@ -6,6 +6,7 @@ import { Box } from '@/components';
 import { Header } from '@/features/header';
 import { HEADER_HEIGHT } from '@/features/header/conf';
 import { LeftPanel, ResizableLeftPanel } from '@/features/left-panel';
+import { RightPanel } from '@/features/right-panel/components/RightPanel';
 import { DocEditorSkeleton, Skeleton } from '@/features/skeletons';
 import { useResponsiveStore } from '@/stores';
 
@@ -14,12 +15,14 @@ import { MAIN_LAYOUT_ID } from './conf';
 type MainLayoutProps = {
   backgroundColor?: 'white' | 'grey';
   enableResizablePanel?: boolean;
+  enableRightPanel?: boolean;
 };
 
 export function MainLayout({
   children,
   backgroundColor = 'white',
   enableResizablePanel = false,
+  enableRightPanel = false,
 }: PropsWithChildren<MainLayoutProps>) {
   return (
     <Box className="--docs--main-layout">
@@ -33,6 +36,7 @@ export function MainLayout({
         <MainLayoutContent
           backgroundColor={backgroundColor}
           enableResizablePanel={enableResizablePanel}
+          enableRightPanel={enableRightPanel}
         >
           {children}
         </MainLayoutContent>
@@ -43,21 +47,28 @@ export function MainLayout({
 
 export interface MainLayoutContentProps {
   backgroundColor: 'white' | 'grey';
-  enableResizablePanel?: boolean;
+  enableResizablePanel: boolean;
+  enableRightPanel: boolean;
 }
 
 export function MainLayoutContent({
   children,
   backgroundColor,
-  enableResizablePanel = false,
+  enableResizablePanel,
+  enableRightPanel,
 }: PropsWithChildren<MainLayoutContentProps>) {
   const { isDesktop } = useResponsiveStore();
 
   if (enableResizablePanel) {
     return (
-      <ResizableLeftPanel leftPanel={<LeftPanel />}>
-        <MainContent backgroundColor={backgroundColor}>{children}</MainContent>
-      </ResizableLeftPanel>
+      <>
+        <ResizableLeftPanel leftPanel={<LeftPanel />}>
+          <MainContent backgroundColor={backgroundColor}>
+            {children}
+          </MainContent>
+        </ResizableLeftPanel>
+        {enableRightPanel && <RightPanel />}
+      </>
     );
   }
 
@@ -66,6 +77,7 @@ export function MainLayoutContent({
       <>
         <LeftPanel />
         <MainContent backgroundColor={backgroundColor}>{children}</MainContent>
+        {enableRightPanel && <RightPanel />}
       </>
     );
   }
@@ -82,14 +94,19 @@ export function MainLayoutContent({
         <LeftPanel />
       </Box>
       <MainContent backgroundColor={backgroundColor}>{children}</MainContent>
+      {enableRightPanel && <RightPanel />}
     </>
   );
 }
 
+interface MainContentProps {
+  backgroundColor: 'white' | 'grey';
+}
+
 const MainContent = ({
   children,
   backgroundColor,
-}: PropsWithChildren<MainLayoutContentProps>) => {
+}: PropsWithChildren<MainContentProps>) => {
   const { isDesktop } = useResponsiveStore();
 
   const { t } = useTranslation();

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -61,7 +61,7 @@ export function DocLayout() {
           };
         }}
       >
-        <MainLayout enableResizablePanel={true}>
+        <MainLayout enableResizablePanel={true} enableRightPanel={true}>
           <FloatingBar />
           <DocPage id={id} />
         </MainLayout>