♻️(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/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={
-              isOpen
-                ? t('Close the document version panel')
-                : t('Open the document version panel')
-            }
+            aria-label={isOpen ? t('Close the panel') : t('Open the 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;
-  setIsPanelOpen: (isOpen: boolean) => void;
+  isPanelVersionOpen: boolean;
+  setIsPanelVersionOpen: (isOpen: boolean) => void;
 }
 
 export const useDocVersionStore = create<UseDocVersionStore>((set) => ({
-  isPanelOpen: false,
-  setIsPanelOpen: (isPanelOpen) => {
-    set(() => ({ isPanelOpen }));
+  isPanelVersionOpen: false,
+  setIsPanelVersionOpen: (isPanelVersionOpen) => {
+    set(() => ({ isPanelVersionOpen }));
   },
 }));