✨(frontend) enhance left panel components

- 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.

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']}
+            $radius={spacing['3xs']}
-            $padding={{ all: 'xs' }}
+            $padding={{ all: '2xs' }}
             $css={css`
               cursor: pointer;
               background-color: ${isActive
@@ -83,8 +83,13 @@ export const LeftPanelTargetFilters = () => {
               }
             `}
           >
-            <Icon $variation="1000" iconName={query.icon} />
+            <Icon
-            <Text $variation="1000">{query.label}</Text>
+              $variation={isActive ? '1000' : '700'}
+              iconName={query.icon}
+            />
+            <Text $variation={isActive ? '1000' : '700'} $size="sm">
+              {query.label}
+            </Text>
           </BoxButton>
         );
       })}

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;">
+          <Box
-            <SeparatedSection showSeparator={false}>
+            $flex={1}
+            $width="100%"
+            $css="overflow-y: auto; overflow-x: hidden;"
+          >
             <LeftPanelFavorites />
-            </SeparatedSection>
           </Box>
         </>
       )}
+      {isDoc && <LeftPanelDocContent />}
     </>
   );
 };

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>
+  );
+};

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,14 +30,20 @@ export const LeftPanelFavorites = () => {
   }
 
   return (
+    <SeparatedSection showSeparator={true}>
       <Box
         $justify="center"
-      $padding={{ horizontal: 'xs' }}
+        $padding={{ horizontal: 'sm' }}
         $gap={spacing['2xs']}
         $height="100%"
         data-testid="left-panel-favorites"
       >
-      <Text $size="sm" $variation="700" $weight="700">
+        <Text
+          $size="sm"
+          $variation="700"
+          $padding={{ horizontal: '3xs' }}
+          $weight="700"
+        >
           {t('Pinned documents')}
         </Text>
         <InfiniteScroll
@@ -58,5 +70,6 @@ export const LeftPanelFavorites = () => {
           ))}
         </InfiniteScroll>
       </Box>
+    </SeparatedSection>
   );
 };

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" />
                 }

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',
+            all: isDesktop ? 'base' : '2xs',
-            horizontal: isDesktop ? '6xl' : 'xs',
           }}
           $background={
             backgroundColor === 'white'