From a64311b072141e9982b3bf88185db0ca2bc18026 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Tue, 3 Dec 2024 16:23:21 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5(frontend)=20remove=20unused=20Pane?=
 =?UTF-8?q?lEditor=20and=20TableContent=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Deleted the PanelEditor and TableContent components as
they are no longer needed in the application.
---
 .../doc-editor/components/PanelEditor.tsx     | 170 ------------------
 1 file changed, 170 deletions(-)
 delete mode 100644 src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx
deleted file mode 100644
index 729fe6c2..00000000
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { Box, BoxButton, Card, IconBG, Text } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-import { TableContent } from '@/features/docs/doc-table-content';
-import { useResponsiveStore } from '@/stores';
-
-import { useHeadingStore, usePanelEditorStore } from '../stores';
-
-export const PanelEditor = () => {
-  const { t } = useTranslation();
-  const { colorsTokens } = useCunninghamTheme();
-  const { isMobile } = useResponsiveStore();
-  const { isPanelTableContentOpen, setIsPanelTableContentOpen, isPanelOpen } =
-    usePanelEditorStore();
-
-  return (
-    <Card
-      $width="100%"
-      $maxWidth="20rem"
-      $position={isMobile ? 'absolute' : 'sticky'}
-      $height="100%"
-      $hasTransition="slow"
-      $css={`
-        top: 0vh;
-        right: 0;
-        transform: translateX(0%);
-        flex: 1;
-        margin-left: 1rem;
-        ${
-          !isPanelOpen &&
-          `
-            transform: translateX(200%);
-            opacity: 0;
-            flex: 0;
-            margin-left: 0rem;
-            max-width: 0rem;
-          `
-        }
-      `}
-      aria-label={t('Document panel')}
-      aria-hidden={!isPanelOpen}
-    >
-      <Box
-        $overflow="inherit"
-        $position="sticky"
-        $hasTransition="slow"
-        $css={`
-          top: 0;
-          opacity: ${isPanelOpen ? '1' : '0'};
-        `}
-        $maxHeight="99vh"
-      >
-        {isMobile && <IconOpenPanelEditor />}
-        <Box
-          $direction="row"
-          $justify="space-between"
-          $align="center"
-          $position="relative"
-          $background={colorsTokens()['primary-400']}
-          $margin={{ bottom: 'tiny' }}
-          $radius="4px 4px 0 0"
-        >
-          <Box
-            $background="white"
-            $position="absolute"
-            $height="100%"
-            $width="100%"
-            $hasTransition="slow"
-            $css={`
-                border-top: 2px solid ${colorsTokens()['primary-600']};
-                border-radius: 0 4px 0 0;
-                ${
-                  isPanelTableContentOpen
-                    ? `
-                      transform: translateX(0);
-                      border-radius: 4px 0 0 0;
-                    `
-                    : `transform: translateX(100%);`
-                }
-              `}
-          />
-          <BoxButton
-            $minWidth="100%"
-            onClick={() => setIsPanelTableContentOpen(true)}
-            $zIndex={1}
-          >
-            <Text
-              $width="100%"
-              $weight="bold"
-              $size="m"
-              $theme="primary"
-              $variation="600"
-              $padding={{ vertical: 'small', horizontal: 'small' }}
-            >
-              {t('Table of content')}
-            </Text>
-          </BoxButton>
-        </Box>
-        <TableContent />
-      </Box>
-    </Card>
-  );
-};
-
-export const IconOpenPanelEditor = () => {
-  const { headings } = useHeadingStore();
-  const { t } = useTranslation();
-  const { setIsPanelOpen, isPanelOpen, setIsPanelTableContentOpen } =
-    usePanelEditorStore();
-  const [hasBeenOpen, setHasBeenOpen] = useState(isPanelOpen);
-  const { isMobile } = useResponsiveStore();
-
-  const setClosePanel = () => {
-    setHasBeenOpen(true);
-    setIsPanelOpen(!isPanelOpen);
-  };
-
-  // Open the panel if there are more than 1 heading
-  useEffect(() => {
-    if (headings?.length && headings.length > 1 && !hasBeenOpen && !isMobile) {
-      setIsPanelTableContentOpen(true);
-      setIsPanelOpen(true);
-      setHasBeenOpen(true);
-    }
-  }, [
-    headings,
-    setIsPanelTableContentOpen,
-    setIsPanelOpen,
-    hasBeenOpen,
-    isMobile,
-  ]);
-
-  // If open from the doc header we set the state as well
-  useEffect(() => {
-    if (isPanelOpen && !hasBeenOpen) {
-      setHasBeenOpen(true);
-    }
-  }, [hasBeenOpen, isPanelOpen]);
-
-  // Close the panel unmount
-  useEffect(() => {
-    return () => {
-      setIsPanelOpen(false);
-    };
-  }, [setIsPanelOpen]);
-
-  return (
-    <IconBG
-      iconName="menu_open"
-      aria-label={isPanelOpen ? t('Close the panel') : t('Open the panel')}
-      $background="transparent"
-      $size="h2"
-      $zIndex={10}
-      $hasTransition="slow"
-      $css={`
-        cursor: pointer;
-        right: 0rem;
-        top: 0.1rem;
-        transform: rotate(${isPanelOpen ? '180deg' : '0deg'});
-        user-select: none;
-        ${hasBeenOpen ? 'display:flex;' : 'display: none;'}
-      `}
-      $position="absolute"
-      onClick={setClosePanel}
-      $radius="2px"
-    />
-  );
-};