♻️(frontend) move Panel component

We will have multiple Panel components in the future,
so we move it to the root of the components folder.
We refacto the Version Panel to use the new
Panel component.

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

@@ -19,7 +19,7 @@ test.describe('Doc Version', () => {
       })
       .click();
 
-    const panel = page.getByLabel('Document version panel');
+    const panel = page.getByLabel('Document panel');
 
     await expect(panel.getByText('Current version')).toBeVisible();
     expect(await panel.locator('li').count()).toBe(1);
@@ -79,7 +79,7 @@ test.describe('Doc Version', () => {
       page.getByRole('button', { name: 'Version history' }),
     ).toBeHidden();
 
-    await expect(page.getByLabel('Document version panel')).toBeHidden();
+    await expect(page.getByLabel('Document panel')).toBeHidden();
   });
 
   test('it restores the doc version', async ({ page, browserName }) => {
@@ -112,7 +112,7 @@ test.describe('Doc Version', () => {
       })
       .click();
 
-    const panel = page.getByLabel('Document version panel');
+    const panel = page.getByLabel('Document panel');
     await panel.locator('li').nth(1).click();
     await expect(page.getByText('World')).toBeHidden();
 
@@ -167,7 +167,7 @@ test.describe('Doc Version', () => {
       })
       .click();
 
-    const panel = page.getByLabel('Document version panel');
+    const panel = page.getByLabel('Document panel');
     await panel.locator('li').nth(1).click();
     await expect(page.getByText('World')).toBeHidden();
 

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

@@ -1,22 +1,21 @@
-import React, { useEffect, useState } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Card, IconBG, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { Doc } from '@/features/docs/doc-management';
-
-import { useDocVersionStore } from '../stores';
-
-import { VersionList } from './VersionList';
 
 interface PanelProps {
-  doc: Doc;
+  title: string;
+  setIsPanelOpen: (isOpen: boolean) => void;
 }
 
-export const Panel = ({ doc }: PanelProps) => {
+export const Panel = ({
+  children,
+  title,
+  setIsPanelOpen,
+}: PropsWithChildren<PanelProps>) => {
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
-  const { setIsPanelOpen } = useDocVersionStore();
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -50,7 +49,7 @@ export const Panel = ({ doc }: PanelProps) => {
           `
         }
       `}
-      aria-label={t('Document version panel')}
+      aria-label={t('Document panel')}
       {...closedOverridingStyles}
     >
       <Box
@@ -69,11 +68,7 @@ export const Panel = ({ doc }: PanelProps) => {
         >
           <IconBG
             iconName="menu_open"
-            aria-label={
+            aria-label={isOpen ? t('Close the panel') : t('Open the panel')}
-              isOpen
-                ? t('Close the document version panel')
-                : t('Open the document version panel')
-            }
             $background="transparent"
             $size="h2"
             $zIndex={1}
@@ -96,10 +91,10 @@ export const Panel = ({ doc }: PanelProps) => {
             $radius="2px"
           />
           <Text $weight="bold" $size="l" $theme="primary">
-            {t('VERSIONS')}
+            {title}
           </Text>
         </Box>
-        <VersionList doc={doc} />
+        {children}
       </Box>
     </Card>
   );

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

@@ -5,11 +5,12 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Card, Text, TextErrors } from '@/components';
+import { Panel } from '@/components/Panel';
 import { useCunninghamTheme } from '@/cunningham';
 import { DocHeader } from '@/features/docs/doc-header';
 import { Doc } from '@/features/docs/doc-management';
 import {
-  Panel,
+  VersionList,
   Versions,
   useDocVersion,
   useDocVersionStore,
@@ -25,7 +26,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
   const {
     query: { versionId },
   } = useRouter();
-  const { isPanelOpen } = useDocVersionStore();
+  const { isPanelVersionOpen, setIsPanelVersionOpen } = useDocVersionStore();
 
   const { t } = useTranslation();
 
@@ -64,7 +65,11 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
             <BlockNoteEditor doc={doc} />
           )}
         </Card>
-        {doc.abilities.versions_list && isPanelOpen && <Panel doc={doc} />}
+        {doc.abilities.versions_list && isPanelVersionOpen && (
+          <Panel title={t('VERSIONS')} setIsPanelOpen={setIsPanelVersionOpen}>
+            <VersionList doc={doc} />
+          </Panel>
+        )}
       </Box>
     </>
   );

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

@@ -24,7 +24,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
   const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
   const [isDropOpen, setIsDropOpen] = useState(false);
-  const { setIsPanelOpen } = useDocVersionStore();
+  const { setIsPanelVersionOpen } = useDocVersionStore();
 
   return (
     <Box
@@ -82,7 +82,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
           {doc.abilities.versions_list && (
             <Button
               onClick={() => {
-                setIsPanelOpen(true);
+                setIsPanelVersionOpen(true);
                 setIsDropOpen(false);
               }}
               color="primary-text"

src/frontend/apps/impress/src/features/docs/doc-versioning/components/index.ts

@@ -1,2 +1,2 @@
 export * from './ModalVersion';
-export * from './Panel';
+export * from './VersionList';

src/frontend/apps/impress/src/features/docs/doc-versioning/stores/useDocVersionStore.tsx

@@ -1,13 +1,13 @@
 import { create } from 'zustand';
 
 export interface UseDocVersionStore {
-  isPanelOpen: boolean;
+  isPanelVersionOpen: boolean;
-  setIsPanelOpen: (isOpen: boolean) => void;
+  setIsPanelVersionOpen: (isOpen: boolean) => void;
 }
 
 export const useDocVersionStore = create<UseDocVersionStore>((set) => ({
-  isPanelOpen: false,
+  isPanelVersionOpen: false,
-  setIsPanelOpen: (isPanelOpen) => {
+  setIsPanelVersionOpen: (isPanelVersionOpen) => {
-    set(() => ({ isPanelOpen }));
+    set(() => ({ isPanelVersionOpen }));
   },
 }));