From feb9f7d4a9167ab6ffa7e0ac43b4c4b8e9e53fd8 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Fri, 28 Nov 2025 15:39:28 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20adapt=20the=20docs=20g?= =?UTF-8?q?rid=20title=20bar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adapt the docs grid title bar to align with the new design. We will add a upload button in a future iteration. --- .../apps/impress/src/assets/icons/doc-all.svg | 20 ++++++ .../apps/impress/src/components/Icon.tsx | 27 +++++-- .../docs/docs-grid/components/DocsGrid.tsx | 70 +++++++++++++------ .../components/LefPanelTargetFilters.tsx | 11 +-- 4 files changed, 94 insertions(+), 34 deletions(-) create mode 100644 src/frontend/apps/impress/src/assets/icons/doc-all.svg diff --git a/src/frontend/apps/impress/src/assets/icons/doc-all.svg b/src/frontend/apps/impress/src/assets/icons/doc-all.svg new file mode 100644 index 00000000..a4e61a5a --- /dev/null +++ b/src/frontend/apps/impress/src/assets/icons/doc-all.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx index 39234505..e5c63806 100644 --- a/src/frontend/apps/impress/src/components/Icon.tsx +++ b/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 = ({ - {iconName} + {iconName ?? icon} ); }; diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx index eda6534d..ba4d8db2 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx +++ b/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 ( - - {title} - + {!hasDocs && !loading && ( @@ -110,7 +92,11 @@ export const DocsGrid = ({ )} {hasDocs && ( - + { + const { t } = useTranslation(); + const { isDesktop } = useResponsiveStore(); + + let title = t('All docs'); + let icon = } />; + if (target === DocDefaultFilter.MY_DOCS) { + icon = ; + title = t('My docs'); + } else if (target === DocDefaultFilter.SHARED_WITH_ME) { + icon = ; + title = t('Shared with me'); + } else if (target === DocDefaultFilter.TRASHBIN) { + icon = ; + title = t('Trashbin'); + } + + return ( + + + {icon} + + {title} + + + + ); +}; + const useDocsQuery = (target: DocDefaultFilter) => { const trashbinQuery = useInfiniteDocsTrashbin( { 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 75f13cb6..26dded8a 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 @@ -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: } />, label: t('All docs'), targetQuery: DocDefaultFilter.ALL_DOCS, }, { - icon: 'lock', + icon: , label: t('My docs'), targetQuery: DocDefaultFilter.MY_DOCS, }, { - icon: 'group', + icon: , label: t('Shared with me'), targetQuery: DocDefaultFilter.SHARED_WITH_ME, }, { - icon: 'delete', + icon: , label: t('Trashbin'), targetQuery: DocDefaultFilter.TRASHBIN, }, @@ -96,7 +97,7 @@ export const LeftPanelTargetFilters = () => { } `} > - + {query.icon} {query.label} );