💄(frontend) adapt the docs grid title bar

Adapt the docs grid title bar to align with the
new design. We will add a upload button in a
future iteration.

src/frontend/apps/impress/src/assets/icons/doc-all.svg

@@ -0,0 +1,20 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M6.12757 9.8486C5.98657 9.6993 5.91709 9.5143 5.91709 9.30858C5.91709 9.10284 5.98679 8.91775 6.13233 8.77221C6.28262 8.62192 6.47291 8.54842 6.68579 8.54842H13.1697C13.3775 8.54842 13.5623 8.62245 13.7061 8.77215C13.8559 8.91601 13.9299 9.10081 13.9299 9.30858C13.9299 9.51737 13.8553 9.70306 13.7085 9.8511C13.5643 10.0024 13.3787 10.0773 13.1697 10.0773H6.68579C6.47291 10.0773 6.28262 10.0038 6.13233 9.85349L6.13076 9.85192L6.12757 9.8486Z"
+    fill="currentColor"
+  />
+  <path
+    d="M6.12757 12.83C5.98657 12.6807 5.91709 12.4957 5.91709 12.29C5.91709 12.0843 5.98679 11.8992 6.13233 11.7536C6.28262 11.6033 6.47291 11.5298 6.68579 11.5298H13.1697C13.3775 11.5298 13.5623 11.6039 13.7061 11.7536C13.8559 11.8974 13.9299 12.0822 13.9299 12.29C13.9299 12.4988 13.8553 12.6845 13.7085 12.8325C13.5643 12.9838 13.3787 13.0587 13.1697 13.0587H6.68579C6.47291 13.0587 6.28262 12.9852 6.13233 12.8349L6.13076 12.8333L6.12757 12.83Z"
+    fill="currentColor"
+  />
+  <path
+    d="M5.91709 15.2885C5.91709 15.4912 5.98839 15.6726 6.12757 15.82L6.134 15.8266L6.13723 15.8296C6.28833 15.9723 6.47704 16.0401 6.68579 16.0401H9.75263C9.96123 16.0401 10.1502 15.9722 10.2975 15.8249C10.444 15.6784 10.5213 15.4956 10.5213 15.2885C10.5213 15.0768 10.4486 14.8874 10.2999 14.7374C10.1539 14.5842 9.96433 14.5113 9.75263 14.5113H6.68579C6.47293 14.5113 6.28257 14.5847 6.13226 14.735L6.12757 14.7399C5.98486 14.891 5.91709 15.0797 5.91709 15.2885Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.37975 1.24597C7.88425 0.735004 8.61944 0.5 9.54031 0.5H18.6127C19.533 0.5 20.2661 0.734736 20.7653 1.24652C21.2686 1.75666 21.5 2.49628 21.5 3.42147V16.3808C21.5 17.3112 21.2688 18.0521 20.7638 18.5572C20.2645 19.0624 19.532 19.2937 18.6127 19.2937H17.347V20.5338C17.347 21.4641 17.1158 22.2051 16.6108 22.7102C16.1115 23.2153 15.3789 23.4467 14.4597 23.4467H5.3873C4.46721 23.4467 3.73242 23.2149 3.22781 22.7103C2.72908 22.2051 2.5 21.4635 2.5 20.5338V7.57442C2.5 6.64962 2.72942 5.90915 3.22673 5.39893C3.73123 4.88796 4.46643 4.65295 5.3873 4.65295H6.65302V3.42147C6.65302 2.49666 6.88244 1.7562 7.37975 1.24597ZM8.42319 4.65295H14.4597C15.38 4.65295 16.1131 4.88769 16.6122 5.39947C17.1156 5.90962 17.347 6.64923 17.347 7.57442V17.5236H18.5444C18.9636 17.5236 19.2496 17.4163 19.4324 17.2289L19.4337 17.2275C19.6238 17.0374 19.7298 16.7549 19.7298 16.3552V3.4471C19.7298 3.04734 19.6238 2.76485 19.4337 2.57481L19.431 2.57206C19.248 2.37972 18.9625 2.27017 18.5444 2.27017H9.60866C9.19081 2.27017 8.90126 2.37956 8.71212 2.57341C8.52701 2.76329 8.42319 3.04633 8.42319 3.4471V4.65295ZM5.45564 21.6765C5.03728 21.6765 4.74743 21.5697 4.55844 21.3811C4.37372 21.1913 4.27017 20.9084 4.27017 20.5081V7.60005C4.27017 7.19928 4.37399 6.91625 4.55911 6.72636C4.74825 6.53252 5.03779 6.42313 5.45564 6.42313H14.3913C14.8095 6.42313 15.095 6.53268 15.278 6.72501L15.2807 6.72776C15.4708 6.9178 15.5768 7.20029 15.5768 7.60005V20.5081C15.5768 20.9079 15.4708 21.1904 15.2807 21.3804L15.2793 21.3818C15.0966 21.5693 14.8105 21.6765 14.3913 21.6765H5.45564Z"
+    fill="currentColor"
+  />
+</svg>

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

@@ -1,21 +1,34 @@
 import clsx from 'clsx';
+import React from 'react';
 import { css } from 'styled-components';
 
 import { Text, TextType } from '@/components';
 
-type IconProps = TextType & {
+type IconBase = TextType & {
   disabled?: boolean;
+};
+
+type IconMaterialProps = IconBase & {
   iconName: string;
   variant?: 'filled' | 'outlined' | 'symbols-outlined';
+  icon?: never;
 };
+
+type IconSVGProps = IconBase & {
+  icon: React.ReactNode;
+  iconName?: never;
+  variant?: never;
+};
+
 export const Icon = ({
   className,
-  iconName,
   disabled,
+  iconName,
+  icon,
   variant = 'outlined',
   $theme = 'neutral',
   ...textProps
-}: IconProps) => {
+}: IconMaterialProps | IconSVGProps) => {
   const hasLabel = 'aria-label' in textProps || 'aria-labelledby' in textProps;
   const ariaHidden =
     'aria-hidden' in textProps ? textProps['aria-hidden'] : !hasLabel;
@@ -24,15 +37,15 @@ export const Icon = ({
     <Text
       aria-hidden={ariaHidden}
       className={clsx('--docs--icon-bg', className, {
-        'material-icons-filled': variant === 'filled',
-        'material-icons': variant === 'outlined',
-        'material-symbols-outlined': variant === 'symbols-outlined',
+        'material-icons-filled': variant === 'filled' && iconName,
+        'material-icons': variant === 'outlined' && iconName,
+        'material-symbols-outlined': variant === 'symbols-outlined' && iconName,
       })}
       $theme={disabled ? 'disabled' : $theme}
       aria-disabled={disabled}
       {...textProps}
     >
-      {iconName}
+      {iconName ?? icon}
     </Text>
   );
 };

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx

@@ -4,7 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { InView } from 'react-intersection-observer';
 import { css } from 'styled-components';
 
-import { Box, Card, Text } from '@/components';
+import AllDocs from '@/assets/icons/doc-all.svg';
+import { Box, Card, Icon, Text } from '@/components';
 import { DocDefaultFilter, useInfiniteDocs } from '@/docs/doc-management';
 import { useResponsiveStore } from '@/stores';
 
@@ -60,21 +61,6 @@ export const DocsGrid = ({
     void fetchNextPage();
   };
 
-  let title = t('All docs');
-  switch (target) {
-    case DocDefaultFilter.MY_DOCS:
-      title = t('My docs');
-      break;
-    case DocDefaultFilter.SHARED_WITH_ME:
-      title = t('Shared with me');
-      break;
-    case DocDefaultFilter.TRASHBIN:
-      title = t('Trashbin');
-      break;
-    default:
-      title = t('All docs');
-  }
-
   return (
     <Box
       $position="relative"
@@ -93,14 +79,10 @@ export const DocsGrid = ({
           ${!isDesktop ? 'border: none;' : ''}
         `}
         $padding={{
-          top: 'base',
-          horizontal: isDesktop ? 'md' : 'xs',
           bottom: 'md',
         }}
       >
-        <Text as="h2" $size="h4" $margin={{ top: '0px', bottom: '10px' }}>
-          {title}
-        </Text>
+        <DocGridTitleBar target={target} />
 
         {!hasDocs && !loading && (
           <Box $padding={{ vertical: 'sm' }} $align="center" $justify="center">
@@ -110,7 +92,11 @@ export const DocsGrid = ({
           </Box>
         )}
         {hasDocs && (
-          <Box $gap="6px" $overflow="auto">
+          <Box
+            $gap="6px"
+            $overflow="auto"
+            $padding={{ vertical: 'sm', horizontal: isDesktop ? 'md' : 'xs' }}
+          >
             <Box role="grid" aria-label={t('Documents grid')}>
               <Box role="rowgroup">
                 <Box
@@ -172,6 +158,46 @@ export const DocsGrid = ({
   );
 };
 
+const DocGridTitleBar = ({ target }: { target: DocDefaultFilter }) => {
+  const { t } = useTranslation();
+  const { isDesktop } = useResponsiveStore();
+
+  let title = t('All docs');
+  let icon = <Icon icon={<AllDocs width={24} height={24} />} />;
+  if (target === DocDefaultFilter.MY_DOCS) {
+    icon = <Icon iconName="lock" />;
+    title = t('My docs');
+  } else if (target === DocDefaultFilter.SHARED_WITH_ME) {
+    icon = <Icon iconName="group" />;
+    title = t('Shared with me');
+  } else if (target === DocDefaultFilter.TRASHBIN) {
+    icon = <Icon iconName="delete" />;
+    title = t('Trashbin');
+  }
+
+  return (
+    <Box
+      $direction="row"
+      $padding={{
+        vertical: 'md',
+        horizontal: isDesktop ? 'md' : 'xs',
+      }}
+      $css={css`
+        border-bottom: 1px solid var(--c--contextuals--border--surface--primary);
+      `}
+      $align="center"
+      $justify="space-between"
+    >
+      <Box $direction="row" $gap="xs" $align="center">
+        {icon}
+        <Text as="h2" $size="h4" $margin="none">
+          {title}
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
 const useDocsQuery = (target: DocDefaultFilter) => {
   const trashbinQuery = useInfiniteDocsTrashbin(
     {

src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx

@@ -2,6 +2,7 @@ import { usePathname, useSearchParams } from 'next/navigation';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
+import AllDocs from '@/assets/icons/doc-all.svg';
 import { Box, Icon, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { DocDefaultFilter } from '@/docs/doc-management';
@@ -21,22 +22,22 @@ export const LeftPanelTargetFilters = () => {
 
   const defaultQueries = [
     {
-      icon: 'apps',
+      icon: <Icon icon={<AllDocs width={24} height={24} />} />,
       label: t('All docs'),
       targetQuery: DocDefaultFilter.ALL_DOCS,
     },
     {
-      icon: 'lock',
+      icon: <Icon iconName="lock" />,
       label: t('My docs'),
       targetQuery: DocDefaultFilter.MY_DOCS,
     },
     {
-      icon: 'group',
+      icon: <Icon iconName="group" />,
       label: t('Shared with me'),
       targetQuery: DocDefaultFilter.SHARED_WITH_ME,
     },
     {
-      icon: 'delete',
+      icon: <Icon iconName="delete" />,
       label: t('Trashbin'),
       targetQuery: DocDefaultFilter.TRASHBIN,
     },
@@ -96,7 +97,7 @@ export const LeftPanelTargetFilters = () => {
               }
             `}
           >
-            <Icon iconName={query.icon} />
+            {query.icon}
             <Text $size="sm">{query.label}</Text>
           </StyledLink>
         );