diff --git a/CHANGELOG.md b/CHANGELOG.md
index 22cf94a5c..610e959c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ and this project adheres to
- 💄(frontend) use the same highlight color for cells and moves #2575
- ⚡️(backend) optimize media_auth endpoint
- 🚸(frontend) print from document options menu #2550
+- ♻️(frontend) refacto of the grid documents #2534
### Fixed
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
index f4cb20c90..a426e26b7 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
@@ -325,7 +325,7 @@ test.describe('Documents Grid', () => {
const thead = page.getByTestId('docs-grid-header');
await expect(thead.getByText(/Name/i)).toBeVisible();
- await expect(thead.getByText(/Updated at/i)).toBeVisible();
+ await expect(thead.getByText(/Last modified/i)).toBeVisible();
await Promise.all(
docs.map(async (doc) => {
diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/Docs.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/Docs.svg
new file mode 100644
index 000000000..e465be1ec
--- /dev/null
+++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/Docs.svg
@@ -0,0 +1,311 @@
+
diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/Subdocs.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/Subdocs.svg
new file mode 100644
index 000000000..c24940786
--- /dev/null
+++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/Subdocs.svg
@@ -0,0 +1,153 @@
+
diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/bin.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/bin.svg
new file mode 100644
index 000000000..6a6fd9f15
--- /dev/null
+++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/bin.svg
@@ -0,0 +1,130 @@
+
diff --git a/src/frontend/apps/impress/src/assets/icons/ui-kit/pinned.svg b/src/frontend/apps/impress/src/assets/icons/ui-kit/pinned.svg
new file mode 100644
index 000000000..d71108962
--- /dev/null
+++ b/src/frontend/apps/impress/src/assets/icons/ui-kit/pinned.svg
@@ -0,0 +1,23 @@
+
diff --git a/src/frontend/apps/impress/src/components/ErrorPage.tsx b/src/frontend/apps/impress/src/components/ErrorPage.tsx
index baf380345..a034ea1b5 100644
--- a/src/frontend/apps/impress/src/components/ErrorPage.tsx
+++ b/src/frontend/apps/impress/src/components/ErrorPage.tsx
@@ -79,6 +79,7 @@ export const ErrorPage = ({
maxWidth: '100%',
height: 'auto',
}}
+ loading="eager"
/>
(
+export const Loading = ({
+ loaderProps,
+ ...props
+}: BoxProps & { loaderProps?: LoaderProps }) => (
-
+
);
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx
index 667b01c0c..29671089a 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/AlertRestore.tsx
@@ -97,7 +97,7 @@ export const AlertRestore = ({ doc }: { doc: Doc }) => {
/>
}
>
- Restore
+ {t('Restore')}
)}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
index 1dc0c2e0b..fb3dd9e16 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
@@ -1,15 +1,14 @@
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
-import ArrowSVG from '@/assets/icons/ui-kit/arrow-corner-down-right.svg';
-import { Box, Text } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
+import { Box, Icon, Text } from '@/components';
import { useDate } from '@/hooks/useDate';
+import DocsIcon from '@/icons/Docs.svg';
+import SubdocsIcon from '@/icons/Subdocs.svg';
+import ArrowIcon from '@/icons/arrow-corner-down-right.svg';
+import PinnedIcon from '@/icons/pinned.svg';
import { useResponsiveStore } from '@/stores';
-import ChildDocument from '../assets/child-document.svg';
-import PinnedDocumentIcon from '../assets/pinned-document.svg';
-import SimpleFileIcon from '../assets/simple-document.svg';
import { useDocUtils, useTrans } from '../hooks';
import { Doc } from '../types';
@@ -39,7 +38,6 @@ export const SimpleDocItem = ({
}: SimpleDocItemProps) => {
const { t } = useTranslation();
const { isSmallMobile } = useResponsiveStore();
- const { spacingsTokens } = useCunninghamTheme();
const { untitledDocument } = useTrans();
const { isChild } = useDocUtils(doc);
const { relativeDate, formatDate } = useDate();
@@ -55,45 +53,66 @@ export const SimpleDocItem = ({
return (
-
- {isPinned ? (
-
+
+ }
+ $shrink="0"
+ />
+
+
- ) : isChild ? (
-
- ) : (
-
- )}
-
+
+ ) : isChild ? (
+
+ }
+ $shrink="0"
+ />
+ ) : (
+
+ }
+ $shrink="0"
+ />
+ )}
{breadcrumb && (
-
@@ -114,6 +116,7 @@ export const DraggableDocGridContentList = ({
const dndAccessibility = useMemo(
() => ({
+ container: document.body,
screenReaderInstructions: {
draggable: t(
'To pick up a draggable item, press space or enter. While dragging, use the arrow keys to move the item. Press space or enter again to drop the item in its new position, or press escape to cancel.',
@@ -217,22 +220,25 @@ export const DraggableDocGridContentList = ({
disabled={isDraggableDisabled}
/>
))}
-
-
-
- {overlayText}
-
-
-
+ {createPortal(
+
+
+
+ {overlayText}
+
+
+ ,
+ document.body,
+ )}
{modalConfirmation.isOpen && (
{
- const canDrop = doc.abilities.move;
+ const docCanDrop = doc.abilities.move;
+ const enableDrop = canDrag && docCanDrop;
+
+ const { isOver, setNodeRef: setDropRef } = useDroppable({
+ id: doc.id,
+ data: doc,
+ });
+ const {
+ attributes,
+ listeners,
+ setNodeRef: setDragRef,
+ } = useDraggable({ id: doc.id, data: doc, disabled });
+
+ useEffect(() => {
+ updateCanDrop(docCanDrop, isOver);
+ }, [docCanDrop, isOver, updateCanDrop]);
+
+ const setRef = useCallback(
+ (node: HTMLElement | null) => {
+ setDropRef(node);
+ setDragRef(node);
+ },
+ [setDropRef, setDragRef],
+ );
+
+ const isDragTarget = enableDrop && isOver;
return (
- updateCanDrop(canDrop, isOver)}
- id={doc.id}
- data={doc}
- >
-
-
-
-
+ div {
+ background-color: var(--c--globals--colors--brand-100);
+ border: 1.5px solid var(--c--globals--colors--brand-500);
+ border-radius: var(--c--globals--spacings--st);
+ }
+ `
+ : ''
+ }
+ `}
+ {...listeners}
+ {...attributes}
+ />
);
};
export const DocGridContentList = ({ docs }: DocGridContentListProps) => {
- const { isDesktop } = useResponsiveStore();
+ const { isLargeScreen } = useResponsiveStore();
if (docs.length === 0) {
return null;
}
- if (isDesktop) {
+ if (isLargeScreen) {
return ;
}
+ // Render a non-draggable list for smaller screens
return docs.map((doc) => (
-
+
));
};
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx
index f43aff36f..3af9431c5 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocMoveModal.tsx
@@ -272,7 +272,6 @@ export const DocMoveModal = ({
/>
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 4948fa5ef..5bc15e9ef 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
@@ -5,17 +5,17 @@ import { InView } from 'react-intersection-observer';
import { css } from 'styled-components';
import AllDocs from '@/assets/icons/doc-all.svg';
-import { Box, Card, Icon, Text } from '@/components';
+import { Box, Card, Icon, Loading, Text } from '@/components';
import { useInfiniteDocs } from '@/docs/doc-management/api/useDocs';
import { useImport } from '@/docs/doc-management/hooks/useImport';
import { DocDefaultFilter } from '@/docs/doc-management/types';
+import DocsIcon from '@/icons/Docs.svg';
+import BinIcon from '@/icons/bin.svg';
import { useResponsiveStore } from '@/stores';
import { useInfiniteDocsTrashbin } from '../api';
-import { useResponsiveDocGrid } from '../hooks/useResponsiveDocGrid';
import { DocGridContentList } from './DocGridContentList';
-import { DocsGridLoader } from './DocsGridLoader';
type DocsGridProps = {
target?: DocDefaultFilter;
@@ -42,17 +42,10 @@ export const DocsGrid = ({
target === DocDefaultFilter.MY_DOCS) &&
isImportEnabled;
- const { isDesktop } = useResponsiveStore();
- const { flexLeft, flexRight } = useResponsiveDocGrid();
+ const { isDesktop, isSmallMobile } = useResponsiveStore();
- const {
- data,
- isFetching,
- isRefetching,
- isLoading,
- fetchNextPage,
- hasNextPage,
- } = useDocsQuery(target);
+ const { data, isFetching, isLoading, fetchNextPage, hasNextPage } =
+ useDocsQuery(target);
const docs = useMemo(() => {
const allDocs = data?.pages.flatMap((page) => page.results) ?? [];
@@ -81,18 +74,21 @@ export const DocsGrid = ({
-
-
- {!hasDocs && !loading && (
-
-
- {t('No documents found')}
-
-
- )}
+
+ {!hasDocs && !loading && }
{hasDocs && (
-
+
-
+
{t('Name')}
- {isDesktop && (
-
+ {!isSmallMobile && (
+
{DocDefaultFilter.TRASHBIN === target
? t('Days remaining')
- : t('Updated at')}
+ : t('Last modified')}
)}
-
+
+ {loading && (
+
+ )}
{hasNextPage && !loading && (
{!isFetching && hasNextPage && (
);
};
+const DocGridNoDocs = ({ target }: { target: DocDefaultFilter }) => {
+ const { t } = useTranslation();
+
+ return (
+
+ {[
+ DocDefaultFilter.ALL_DOCS,
+ DocDefaultFilter.MY_DOCS,
+ DocDefaultFilter.SHARED_WITH_ME,
+ ].includes(target) && (
+ <>
+
+
+ {t('No doc yet')}
+
+ {[DocDefaultFilter.ALL_DOCS, DocDefaultFilter.MY_DOCS].includes(
+ target,
+ ) && (
+
+ {t('Your docs will appear here.')}
+
+ )}
+ {target === DocDefaultFilter.SHARED_WITH_ME && (
+
+ {t('Your shared docs will appear here.')}
+
+ )}
+
+ )}
+ {target === DocDefaultFilter.TRASHBIN && (
+ <>
+
+
+ {t('No doc deleted')}
+
+
+ {t('Deleted docs will appear here.')}
+
+
+ )}
+
+ );
+};
+
const useDocsQuery = (target: DocDefaultFilter) => {
const trashbinQuery = useInfiniteDocsTrashbin(
{
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
index 430df4711..49c290a62 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridActions.tsx
@@ -1,4 +1,8 @@
-import { Button } from '@gouvfr-lasuite/cunningham-react';
+import {
+ Button,
+ VariantType,
+ useToastProvider,
+} from '@gouvfr-lasuite/cunningham-react';
import { DropdownMenu, DropdownMenuItem } from '@gouvfr-lasuite/ui-kit';
import dynamic from 'next/dynamic';
import { useState } from 'react';
@@ -12,6 +16,7 @@ import KeepSVG from '@/assets/icons/ui-kit/keep.svg';
import KeepOffSVG from '@/assets/icons/ui-kit/keep_off.svg';
import LeaveSVG from '@/assets/icons/ui-kit/leave.svg';
import MoreSVG from '@/assets/icons/ui-kit/more_horiz.svg';
+import { Icon } from '@/components/Icon';
import {
Doc,
KEY_LIST_DOC,
@@ -19,11 +24,14 @@ import {
useCreateFavoriteDoc,
useDeleteFavoriteDoc,
useDuplicateDoc,
+ useRestoreDoc,
useTrans,
} from '@/docs/doc-management';
import { focusMainContentStart } from '@/layouts/utils';
import { useFocusStore } from '@/stores';
+import { KEY_LIST_DOC_TRASHBIN } from '../api/useDocsTrashbin';
+
import { DocMoveModal } from './DocMoveModal';
const DocShareModal = dynamic(
@@ -54,17 +62,27 @@ const ConfirmationLeaveModal = dynamic(
interface DocsGridActionsProps {
doc: Doc;
+ isInTrashbin?: boolean;
}
-export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
+export const DocsGridActions = ({
+ doc,
+ isInTrashbin,
+}: DocsGridActionsProps) => {
+ return isInTrashbin ? (
+
+ ) : (
+
+ );
+};
+
+const DocsGridActionsGlobal = ({ doc }: { doc: Doc }) => {
const { t } = useTranslation();
- const { restoreFocus, addLastFocus } = useFocusStore();
- const [openDropdown, setOpenDropdown] = useState(false);
+ const { restoreFocus } = useFocusStore();
const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
const [isModalLeaveOpen, setIsModalLeaveOpen] = useState(false);
const [isModalShareOpen, setIsModalShareOpen] = useState(false);
const [isModalMoveOpen, setIsModalMoveOpen] = useState(false);
- const { untitledDocument } = useTrans();
const { mutate: duplicateDoc } = useDuplicateDoc({
onSuccess: () => {
@@ -150,33 +168,7 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
return (
<>
- true}
- onOpenChange={setOpenDropdown}
- >
- }
- color="neutral"
- variant="tertiary"
- onClick={(e) => {
- e.stopPropagation();
- e.preventDefault();
- setOpenDropdown((o) => !o);
- addLastFocus(e.currentTarget);
- }}
- />
-
-
+
{isModalRemoveOpen && (
{
@@ -217,3 +209,103 @@ export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
);
};
+
+interface DocsGridTrashbinActionsProps {
+ doc: Doc;
+}
+
+export const DocsGridTrashbinActions = ({
+ doc,
+}: DocsGridTrashbinActionsProps) => {
+ const { t } = useTranslation();
+ const { toast } = useToastProvider();
+ const { mutate: restoreDoc } = useRestoreDoc({
+ listInvalidQueries: [
+ KEY_LIST_DOC,
+ KEY_LIST_DOC_TRASHBIN,
+ KEY_LIST_FAVORITE_DOC,
+ ],
+ options: {
+ onSuccess: (_data) => {
+ toast(t('The document has been restored.'), VariantType.SUCCESS, {
+ duration: 4000,
+ });
+ },
+ onError: (error) => {
+ toast(
+ t('An error occurred while restoring the document: {{error}}', {
+ error: error?.message,
+ }),
+ VariantType.ERROR,
+ {
+ duration: 4000,
+ },
+ );
+ },
+ },
+ });
+
+ if (!doc.abilities.restore) {
+ return null;
+ }
+
+ const options: DropdownMenuItem[] = [
+ {
+ label: t('Restore'),
+ icon: (
+
+ ),
+ callback: () => {
+ restoreDoc({
+ docId: doc.id,
+ });
+ },
+ testId: `docs-grid-actions-restore-${doc.id}`,
+ },
+ ];
+
+ return ;
+};
+
+interface DocsGridDropdownProps {
+ doc: Doc;
+ options: DropdownMenuItem[];
+}
+
+const DocsGridDropdown = ({ doc, options }: DocsGridDropdownProps) => {
+ const { t } = useTranslation();
+ const [openDropdown, setOpenDropdown] = useState(false);
+ const { addLastFocus } = useFocusStore();
+ const { untitledDocument } = useTrans();
+
+ return (
+ true}
+ onOpenChange={setOpenDropdown}
+ >
+ }
+ color="neutral"
+ variant="tertiary"
+ onClick={(e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ setOpenDropdown((o) => !o);
+ addLastFocus(e.currentTarget);
+ }}
+ />
+
+ );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
index 2afa56896..b35b8b028 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx
@@ -1,9 +1,10 @@
import { Tooltip } from '@gouvfr-lasuite/cunningham-react';
import { useSearchParams } from 'next/navigation';
-import { KeyboardEvent } from 'react';
+import type { KeyboardEvent } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
+import type { BoxType } from '@/components';
import { Box, Icon, StyledLink, Text } from '@/components';
import { useConfig } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
@@ -12,27 +13,27 @@ import { useLeftPanelStore } from '@/features/left-panel';
import { useDate } from '@/hooks';
import { useResponsiveStore } from '@/stores';
-import { useResponsiveDocGrid } from '../hooks/useResponsiveDocGrid';
-
import { DocsGridActions } from './DocsGridActions';
import { DocsGridItemSharedButton } from './DocsGridItemSharedButton';
-import { DocsGridTrashbinActions } from './DocsGridTrashbinActions';
-type DocsGridItemProps = {
+type DocsGridItemProps = BoxType & {
doc: Doc;
dragMode?: boolean;
};
-export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
+export const DocsGridItem = ({
+ doc,
+ dragMode = false,
+ $css,
+ ...boxProps
+}: DocsGridItemProps) => {
const searchParams = useSearchParams();
const target = searchParams.get('target');
const isInTrashbin = target === 'trashbin';
const { untitledDocument } = useTrans();
const { t } = useTranslation();
- const { isDesktop, isLargeScreen } = useResponsiveStore();
- const { flexLeft, flexRight } = useResponsiveDocGrid();
- const { spacingsTokens } = useCunninghamTheme();
+ const { isSmallMobile, isLargeScreen } = useResponsiveStore();
const dateToDisplay = useDateToDisplay(doc, isInTrashbin);
const { openPanel } = useLeftPanelStore();
@@ -53,16 +54,42 @@ export const DocsGridItem = ({ doc, dragMode = false }: DocsGridItemProps) => {
};
return (
- <>
+
{
};
}
`}
- className="--docs--doc-grid-item"
- aria-label={t('Open document: {{title}}', {
- title: doc.title || untitledDocument,
- })}
>
{
-
+ {!isSmallMobile && (
{
date: dateToDisplay,
})}
>
-
+
+ )}
-
- {isDesktop && (
-
- )}
- {isInTrashbin ? (
-
- ) : (
-
- )}
-
+ e.stopPropagation()}
+ >
+ {!isSmallMobile && (
+
+ )}
+
-
+
);
};
@@ -144,7 +158,7 @@ export const DocsGridItemTitle = ({
withTooltip: boolean;
}) => {
const { t } = useTranslation();
- const { isDesktop } = useResponsiveStore();
+ const { isDesktop, isSmallMobile } = useResponsiveStore();
const { spacingsTokens } = useCunninghamTheme();
const isPublic = doc.link_reach === LinkReach.PUBLIC;
const isAuthenticated = doc.link_reach === LinkReach.AUTHENTICATED;
@@ -159,7 +173,11 @@ export const DocsGridItemTitle = ({
$padding={{ right: isDesktop ? 'md' : '3xs' }}
$maxWidth="100%"
>
-
+
{isShared && (
{
export const DocsGridItemDate = ({
doc,
- isDesktop,
isInTrashbin,
}: {
doc: Doc;
- isDesktop: boolean;
isInTrashbin: boolean;
}) => {
const dateToDisplay = useDateToDisplay(doc, isInTrashbin);
- if (!isDesktop) {
- return null;
- }
-
return (
{
- if (!isLoading) {
- return null;
- }
-
- return (
- <>
-
-
-
-
-
- );
-};
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridTrashbinActions.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridTrashbinActions.tsx
deleted file mode 100644
index ebfa592e9..000000000
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridTrashbinActions.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import {
- VariantType,
- useToastProvider,
-} from '@gouvfr-lasuite/cunningham-react';
-import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
-
-import { DropdownMenu, DropdownMenuOption, Icon } from '@/components';
-import {
- Doc,
- KEY_LIST_DOC,
- KEY_LIST_FAVORITE_DOC,
- useRestoreDoc,
- useTrans,
-} from '@/docs/doc-management';
-
-import { KEY_LIST_DOC_TRASHBIN } from '../api';
-
-interface DocsGridTrashbinActionsProps {
- doc: Doc;
-}
-
-export const DocsGridTrashbinActions = ({
- doc,
-}: DocsGridTrashbinActionsProps) => {
- const { t } = useTranslation();
- const { untitledDocument } = useTrans();
- const { toast } = useToastProvider();
- const { mutate: restoreDoc, error } = useRestoreDoc({
- listInvalidQueries: [
- KEY_LIST_DOC,
- KEY_LIST_DOC_TRASHBIN,
- KEY_LIST_FAVORITE_DOC,
- ],
- options: {
- onSuccess: (_data) => {
- toast(t('The document has been restored.'), VariantType.SUCCESS, {
- duration: 4000,
- });
- },
- onError: () => {
- toast(
- t('An error occurred while restoring the document: {{error}}', {
- error: error?.message,
- }),
- VariantType.ERROR,
- {
- duration: 4000,
- },
- );
- },
- },
- });
-
- const options: DropdownMenuOption[] = [
- {
- label: t('Restore'),
- icon: (
-
- ),
- callback: () => {
- restoreDoc({
- docId: doc.id,
- });
- },
- testId: `docs-grid-actions-restore-${doc.id}`,
- },
- ];
-
- const documentTitle = doc.title || untitledDocument;
- const menuLabel = t('Open the menu of actions for the document: {{title}}', {
- title: documentTitle,
- });
-
- return (
-
-
-
- );
-};
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/Draggable.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/Draggable.tsx
deleted file mode 100644
index bd72a1248..000000000
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/Draggable.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Data, useDraggable } from '@dnd-kit/core';
-import { PropsWithChildren } from 'react';
-
-type DraggableProps = {
- id: string;
- data?: Data;
- disabled?: boolean;
-};
-
-export const Draggable = (props: PropsWithChildren>) => {
- const { attributes, listeners, setNodeRef } = useDraggable({
- id: props.id,
- data: props.data,
- disabled: props.disabled,
- });
-
- return (
-
- {props.children}
-
- );
-};
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx
deleted file mode 100644
index 38e346518..000000000
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/Droppable.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Data, useDroppable } from '@dnd-kit/core';
-import { PropsWithChildren, useEffect } from 'react';
-import { css } from 'styled-components';
-
-import { Box } from '@/components';
-import { Doc } from '@/docs/doc-management';
-
-type DroppableProps = {
- id: string;
- onOver?: (isOver: boolean, data?: Data) => void;
- data?: Data;
- enabledDrop?: boolean;
- canDrop?: boolean;
-};
-
-export const Droppable = ({
- onOver,
- canDrop,
- data,
- children,
- id,
-}: PropsWithChildren) => {
- const { isOver, setNodeRef } = useDroppable({
- id,
- data,
- });
-
- const enableHover = canDrop && isOver;
-
- useEffect(() => {
- onOver?.(isOver, data);
- }, [isOver, data, onOver]);
-
- return (
-
- {children}
-
- );
-};
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/__tests__/DocsGridItemDate.test.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/__tests__/DocsGridItemDate.test.tsx
index 21476f301..2e78d0f58 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/__tests__/DocsGridItemDate.test.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/__tests__/DocsGridItemDate.test.tsx
@@ -16,23 +16,6 @@ describe('DocsGridItemDate', () => {
fetchMock.mockGlobal();
});
- it('should not render date when not on desktop', () => {
- render(
- ,
- {
- wrapper: AppWrapper,
- },
- );
-
- expect(screen.queryByText('1 minute ago')).not.toBeInTheDocument();
- });
-
[
{
updated_at: DateTime.now().minus({ seconds: 1 }).toISO(),
@@ -63,7 +46,6 @@ describe('DocsGridItemDate', () => {
updated_at,
} as Doc
}
- isDesktop={true}
isInTrashbin={false}
/>,
{ wrapper: AppWrapper },
@@ -85,7 +67,6 @@ describe('DocsGridItemDate', () => {
updated_at: DateTime.now().minus({ days: 5 }).toISO(),
} as Doc
}
- isDesktop={true}
isInTrashbin={false}
/>,
{ wrapper: AppWrapper },
@@ -133,7 +114,6 @@ describe('DocsGridItemDate', () => {
updated_at,
} as Doc
}
- isDesktop={true}
isInTrashbin={true}
/>,
{ wrapper: AppWrapper },
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/index.ts b/src/frontend/apps/impress/src/features/docs/docs-grid/components/index.ts
index 540d636cc..bca88917a 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/index.ts
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/index.ts
@@ -1,3 +1,2 @@
export * from './DocsGrid';
export * from './DocsGridActions';
-export * from './DocsGridLoader';
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/hooks/useResponsiveDocGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/hooks/useResponsiveDocGrid.tsx
deleted file mode 100644
index bedbdd293..000000000
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/hooks/useResponsiveDocGrid.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useMemo } from 'react';
-
-import { useResponsiveStore } from '@/stores';
-
-export const useResponsiveDocGrid = () => {
- const { isDesktop, screenWidth } = useResponsiveStore();
-
- const flexLeft = useMemo(() => {
- if (!isDesktop) {
- return 1;
- } else if (screenWidth <= 1100) {
- return 6;
- } else if (screenWidth < 1200) {
- return 8;
- }
- return 8;
- }, [isDesktop, screenWidth]);
-
- const flexRight = useMemo(() => {
- if (!isDesktop) {
- return undefined;
- } else if (screenWidth <= 1200) {
- return 5;
- }
- return 4;
- }, [isDesktop, screenWidth]);
-
- return { flexLeft, flexRight };
-};
diff --git a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
index 078b20ace..032eedfc2 100644
--- a/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
+++ b/src/frontend/apps/impress/src/features/left-panel/components/LeftPanel.tsx
@@ -37,9 +37,10 @@ export const LeftPanel = ({ isResizable }: { isResizable?: boolean }) => {
data-testid="left-panel"
aria-label={t('Left panel')}
$width={isResizable ? '100%' : '300px'}
+ $height="100dvh"
+ $overflow="hidden"
$css={css`
- height: 100dvh;
- overflow: hidden;
+ z-index: 1;
background-color: var(--c--contextuals--background--surface--primary);
box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.05);
transition:
diff --git a/src/frontend/apps/impress/src/pages/404.tsx b/src/frontend/apps/impress/src/pages/404.tsx
index ade6ec72d..8939d425b 100644
--- a/src/frontend/apps/impress/src/pages/404.tsx
+++ b/src/frontend/apps/impress/src/pages/404.tsx
@@ -46,6 +46,7 @@ const Page: NextPageWithLayout = () => {
maxWidth: '100%',
height: 'auto',
}}
+ loading="eager"
/>
{page}