From 72f234027cb8dc9e02d8e4463b67285ecb12d551 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Mon, 23 Dec 2024 10:20:40 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20enhance=20left=20panel=20?=
 =?UTF-8?q?components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Updated padding and radius styles in LeftPanelTargetFilters and
LeftPanelFavorites for improved layout consistency.
- Introduced LeftPanelDocContent component to display document details
when navigating to specific documentation pages.
- Enhanced LeftPanelContent to conditionally render LeftPanelDocContent
based on the current route.
- Adjusted LeftPanelHeader button colors for better visual hierarchy.
- Refactored MainLayout padding for a more responsive design.
---
 .../components/LefPanelTargetFilters.tsx      | 15 ++--
 .../components/LeftPanelContent.tsx           | 13 ++-
 .../components/LeftPanelDocContent.tsx        | 25 ++++++
 .../components/LeftPanelFavorites.tsx         | 81 +++++++++++--------
 .../left-panel/components/LeftPanelHeader.tsx |  4 +-
 .../apps/impress/src/layouts/MainLayout.tsx   |  3 +-
 6 files changed, 94 insertions(+), 47 deletions(-)
 create mode 100644 src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx

diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
index 56999edc..2a0240af 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx
@@ -53,7 +53,7 @@ export const LeftPanelTargetFilters = () => {
   return (
     <Box
       $justify="center"
-      $padding={{ horizontal: 'xs' }}
+      $padding={{ horizontal: 'sm' }}
       $gap={spacing['2xs']}
     >
       {defaultQueries.map((query) => {
@@ -69,8 +69,8 @@ export const LeftPanelTargetFilters = () => {
             $align="center"
             $justify="flex-start"
             $gap={spacing['xs']}
-            $radius={spacing['2xs']}
-            $padding={{ all: 'xs' }}
+            $radius={spacing['3xs']}
+            $padding={{ all: '2xs' }}
             $css={css`
               cursor: pointer;
               background-color: ${isActive
@@ -83,8 +83,13 @@ export const LeftPanelTargetFilters = () => {
               }
             `}
           >
-            <Icon $variation="1000" iconName={query.icon} />
-            <Text $variation="1000">{query.label}</Text>
+            <Icon
+              $variation={isActive ? '1000' : '700'}
+              iconName={query.icon}
+            />
+            <Text $variation={isActive ? '1000' : '700'} $size="sm">
+              {query.label}
+            </Text>
           </BoxButton>
         );
       })}
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx
index 260f6a77..2dd043b0 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelContent.tsx
@@ -4,11 +4,13 @@ import { css } from 'styled-components';
 import { Box, SeparatedSection } from '@/components';
 
 import { LeftPanelTargetFilters } from './LefPanelTargetFilters';
+import { LeftPanelDocContent } from './LeftPanelDocContent';
 import { LeftPanelFavorites } from './LeftPanelFavorites';
 
 export const LeftPanelContent = () => {
   const router = useRouter();
   const isHome = router.pathname === '/';
+  const isDoc = router.pathname === '/docs/[id]';
 
   return (
     <>
@@ -24,13 +26,16 @@ export const LeftPanelContent = () => {
               <LeftPanelTargetFilters />
             </SeparatedSection>
           </Box>
-          <Box $flex={1} $css="overflow-y: auto; overflow-x: hidden;">
-            <SeparatedSection showSeparator={false}>
-              <LeftPanelFavorites />
-            </SeparatedSection>
+          <Box
+            $flex={1}
+            $width="100%"
+            $css="overflow-y: auto; overflow-x: hidden;"
+          >
+            <LeftPanelFavorites />
           </Box>
         </>
       )}
+      {isDoc && <LeftPanelDocContent />}
     </>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx
new file mode 100644
index 00000000..e2e615c1
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelDocContent.tsx
@@ -0,0 +1,25 @@
+import { Box, SeparatedSection } from '@/components';
+import { useDocStore } from '@/features/docs';
+import { SimpleDocItem } from '@/features/docs/docs-grid/components/SimpleDocItem';
+
+export const LeftPanelDocContent = () => {
+  const { currentDoc } = useDocStore();
+
+  if (!currentDoc) {
+    return null;
+  }
+
+  return (
+    <Box
+      $flex={1}
+      $width="100%"
+      $css="width: 100%; overflow-y: auto; overflow-x: hidden;"
+    >
+      <SeparatedSection showSeparator={false}>
+        <Box $padding={{ horizontal: 'sm' }}>
+          <SimpleDocItem doc={currentDoc} showAccesses={true} />
+        </Box>
+      </SeparatedSection>
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
index 8474ee74..3de5297e 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx
@@ -1,7 +1,13 @@
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { Box, InfiniteScroll, StyledLink, Text } from '@/components';
+import {
+  Box,
+  InfiniteScroll,
+  SeparatedSection,
+  StyledLink,
+  Text,
+} from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { useInfiniteDocs } from '@/features/docs';
 import { SimpleDocItem } from '@/features/docs/docs-grid/components/SimpleDocItem';
@@ -24,39 +30,46 @@ export const LeftPanelFavorites = () => {
   }
 
   return (
-    <Box
-      $justify="center"
-      $padding={{ horizontal: 'xs' }}
-      $gap={spacing['2xs']}
-      $height="100%"
-      data-testid="left-panel-favorites"
-    >
-      <Text $size="sm" $variation="700" $weight="700">
-        {t('Pinned documents')}
-      </Text>
-      <InfiniteScroll
-        hasMore={docs.hasNextPage}
-        isLoading={docs.isFetchingNextPage}
-        next={() => void docs.fetchNextPage()}
+    <SeparatedSection showSeparator={true}>
+      <Box
+        $justify="center"
+        $padding={{ horizontal: 'sm' }}
+        $gap={spacing['2xs']}
+        $height="100%"
+        data-testid="left-panel-favorites"
       >
-        {invitations.map((doc) => (
-          <Box
-            $css={css`
-              padding: ${spacing['2xs']};
-              border-radius: 4px;
-              &:hover {
-                cursor: pointer;
-                background-color: var(--c--theme--colors--greyscale-100);
-              }
-            `}
-            key={doc.id}
-          >
-            <StyledLink href={`/docs/${doc.id}`}>
-              <SimpleDocItem showAccesses doc={doc} />
-            </StyledLink>
-          </Box>
-        ))}
-      </InfiniteScroll>
-    </Box>
+        <Text
+          $size="sm"
+          $variation="700"
+          $padding={{ horizontal: '3xs' }}
+          $weight="700"
+        >
+          {t('Pinned documents')}
+        </Text>
+        <InfiniteScroll
+          hasMore={docs.hasNextPage}
+          isLoading={docs.isFetchingNextPage}
+          next={() => void docs.fetchNextPage()}
+        >
+          {invitations.map((doc) => (
+            <Box
+              $css={css`
+                padding: ${spacing['2xs']};
+                border-radius: 4px;
+                &:hover {
+                  cursor: pointer;
+                  background-color: var(--c--theme--colors--greyscale-100);
+                }
+              `}
+              key={doc.id}
+            >
+              <StyledLink href={`/docs/${doc.id}`}>
+                <SimpleDocItem showAccesses doc={doc} />
+              </StyledLink>
+            </Box>
+          ))}
+        </InfiniteScroll>
+      </Box>
+    </SeparatedSection>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
index 2a7c7bd8..0d1257b3 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx
@@ -47,7 +47,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
               <Button
                 onClick={goToHome}
                 size="medium"
-                color="primary-text"
+                color="tertiary-text"
                 icon={
                   <Icon $variation="800" $theme="primary" iconName="house" />
                 }
@@ -55,7 +55,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
               <Button
                 onClick={searchModal.open}
                 size="medium"
-                color="primary-text"
+                color="tertiary-text"
                 icon={
                   <Icon $variation="800" $theme="primary" iconName="search" />
                 }
diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
index b20e5136..81523571 100644
--- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
@@ -42,8 +42,7 @@ export function MainLayout({
           $width="100%"
           $height={`calc(100dvh - ${HEADER_HEIGHT}px)`}
           $padding={{
-            vertical: isDesktop ? 'base' : 'xs',
-            horizontal: isDesktop ? '6xl' : 'xs',
+            all: isDesktop ? 'base' : '2xs',
           }}
           $background={
             backgroundColor === 'white'