Web:EmptyContainer Added empty screen for the recent page

packages/client/public/locales/en/EmptyView.json

@@ -40,5 +40,6 @@
   "MigrationDataTitle": "Migration Data",
   "MigrationDataDescription": "Import data to your {{productName}} from ONLYOFFICE Workspace, Google Workspace, or Nextcloud.",
   "EmptyRootRoomUserTitle": "There are no rooms here yet",
-  "EmptyRootRoomUserDescription": "The shared room will appear here."
+  "EmptyRootRoomUserDescription": "The shared room will appear here.",
+  "EmptyRecentDescription": "Your last viewed or edited docs will be displayed in this section."
 }

packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.helpers.tsx

@@ -15,6 +15,7 @@ import CreateNewSpreadsheetIcon from "PUBLIC_DIR/images/emptyview/create.new.spr
 import CreateNewPresentation from "PUBLIC_DIR/images/emptyview/create.new.presentation.svg";
 import CreateRoom from "PUBLIC_DIR/images/emptyview/create.room.svg";
 import InviteUserFormIcon from "PUBLIC_DIR/images/emptyview/invite.user.svg";
+import PersonIcon from "PUBLIC_DIR/images/icons/12/person.svg";
 
 import SharedIcon from "PUBLIC_DIR/images/emptyview/share.svg";
 
@@ -27,7 +28,10 @@ import FolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";
 import type { Nullable, TTranslation } from "@docspace/shared/types";
 import type { TRoomSecurity } from "@docspace/shared/api/rooms/types";
 import type { TFolderSecurity } from "@docspace/shared/api/files/types";
-import type { EmptyViewItemType } from "@docspace/shared/components/empty-view";
+import type {
+  EmptyViewItemType,
+  EmptyViewOptionsType,
+} from "@docspace/shared/components/empty-view";
 
 import type { AccessType, OptionActions } from "./EmptyViewContainer.types";
 import { DefaultFolderType } from "./EmptyViewContainer.constants";
@@ -131,7 +135,7 @@ export const getOptions = (
   isRootEmptyPage: boolean,
   rootFolderType: Nullable<FolderType>,
   actions: OptionActions,
-): EmptyViewItemType[] => {
+): EmptyViewOptionsType => {
   const isFormFiller = access === ShareAccessRights.FormFilling;
   const isCollaborator = access === ShareAccessRights.Collaborator;
 
@@ -301,6 +305,7 @@ export const getOptions = (
 
   if (isRootEmptyPage) {
     return match([rootFolderType, access])
+      .returnType<EmptyViewOptionsType>()
       .with([FolderType.Rooms, ShareAccessRights.None], () => [
         createRoom,
         inviteRootRoom,
@@ -311,6 +316,11 @@ export const getOptions = (
         createSpreadsheet,
         createPresentation,
       ])
+      .with([FolderType.Recent, P._], () => ({
+        ...actions.onGoToPersonal(),
+        icon: <PersonIcon />,
+        description: t("Files:GoToPersonal"),
+      }))
       .otherwise(() => []);
   }
 

packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.tsx

@@ -2,7 +2,7 @@ import { useTheme } from "styled-components";
 import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 import React, { useMemo, useCallback } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, LinkProps } from "react-router-dom";
 
 import {
   Events,
@@ -10,6 +10,10 @@ import {
   FilterType,
 } from "@docspace/shared/enums";
 import { EmptyView } from "@docspace/shared/components/empty-view";
+import FilesFilter from "@docspace/shared/api/files/filter";
+
+import { getCategoryUrl } from "SRC_DIR/helpers/utils";
+import { CategoryType } from "SRC_DIR/helpers/constants";
 
 import {
   getDescription,
@@ -42,10 +46,13 @@ const EmptyViewContainer = observer(
     isArchiveFolderRoot,
     rootFolderType,
     isGracePeriod,
+    myFolderId,
+    myFolder,
     setViewInfoPanel,
     onClickInviteUsers,
     setVisibleInfoPanel,
     onCreateAndCopySharedLink,
+    // setIsSectionFilterLoading,
     setSelectFileFormRoomDialogVisible,
     setInviteUsersWarningDialogVisible,
     inviteUser: inviteRootUser,
@@ -61,6 +68,35 @@ const EmptyViewContainer = observer(
 
     const theme = useTheme();
 
+    const onGoToPersonal = useCallback((): LinkProps => {
+      const newFilter = FilesFilter.getDefault();
+
+      newFilter.folder = myFolderId?.toString() ?? "";
+
+      const state = {
+        title: myFolder.title,
+        isRoot: true,
+        rootFolderType: myFolder.rootFolderType,
+      };
+
+      const path = getCategoryUrl(CategoryType.Personal);
+
+      // setIsSectionFilterLoading(true);
+
+      return {
+        to: {
+          pathname: path,
+          search: newFilter.toUrlParams(),
+        },
+        state,
+      };
+    }, [
+      myFolder.rootFolderType,
+      myFolder.title,
+      myFolderId,
+      // setIsSectionFilterLoading,
+    ]);
+
     const onCreateRoom = useCallback(() => {
       if (isGracePeriod) {
         setInviteUsersWarningDialogVisible(true);
@@ -195,6 +231,7 @@ const EmptyViewContainer = observer(
             onCreateRoom,
             inviteRootUser,
             navigate,
+            onGoToPersonal,
           },
         ),
       [
@@ -217,6 +254,7 @@ const EmptyViewContainer = observer(
         onCreateRoom,
         inviteRootUser,
         navigate,
+        onGoToPersonal,
       ],
     );
 
@@ -244,7 +282,13 @@ const InjectedEmptyViewContainer = inject<
     dialogsStore,
     infoPanelStore,
     currentTariffStatusStore,
+    treeFoldersStore,
+    clientLoadingStore,
   }): InjectedEmptyViewContainerProps => {
+    const { myFolderId, myFolder } = treeFoldersStore;
+
+    const { setIsSectionFilterLoading } = clientLoadingStore;
+
     const { onClickInviteUsers, onCreateAndCopySharedLink, inviteUser } =
       contextOptionsStore;
 
@@ -272,13 +316,16 @@ const InjectedEmptyViewContainer = inject<
       isVisibleInfoPanel,
       rootFolderType,
       isGracePeriod,
+      myFolderId,
+      myFolder,
+      inviteUser,
+      setViewInfoPanel,
       onClickInviteUsers,
+      setVisibleInfoPanel,
+      setIsSectionFilterLoading,
       onCreateAndCopySharedLink,
       setSelectFileFormRoomDialogVisible,
       setInviteUsersWarningDialogVisible,
-      setVisibleInfoPanel,
-      setViewInfoPanel,
-      inviteUser,
     };
   },
 )(EmptyViewContainer as React.FC<OutEmptyViewContainerProps>);

packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.types.ts

@@ -1,4 +1,4 @@
-import type { NavigateFunction } from "react-router-dom";
+import type { NavigateFunction, LinkProps } from "react-router-dom";
 
 import type {
   FilesSelectorFilterTypes,
@@ -54,7 +54,9 @@ export interface InjectedEmptyViewContainerProps
     Pick<
       TStore["selectedFolderStore"],
       "access" | "security" | "rootFolderType"
-    > {
+    >,
+    Pick<TStore["treeFoldersStore"], "myFolder" | "myFolderId">,
+    Pick<TStore["clientLoadingStore"], "setIsSectionFilterLoading"> {
   selectedFolder: ReturnType<
     TStore["selectedFolderStore"]["getSelectedFolder"]
   >;
@@ -80,4 +82,5 @@ export type OptionActions = {
   openInfoPanel: VoidFunction;
   onCreateRoom: VoidFunction;
   inviteRootUser: TStore["contextOptionsStore"]["inviteUser"];
+  onGoToPersonal: () => LinkProps;
 };

packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.utils.tsx

@@ -34,6 +34,9 @@ import CreateNewFormIcon from "PUBLIC_DIR/images/emptyview/create.new.form.svg";
 import EmptyRoomsRootDarkIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.dark.svg";
 import EmptyRoomsRootLightIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.light.svg";
 
+import EmptyRecentDarkIcon from "PUBLIC_DIR/images/emptyview/empty.recent.dark.svg";
+import EmptyRecentLightIcon from "PUBLIC_DIR/images/emptyview/empty.recent.light.svg";
+
 import EmptyRoomsRootUserDarkIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.user.dark.svg";
 import EmptyRoomsRootUserLightIcon from "PUBLIC_DIR/images/emptyview/empty.rooms.root.user.light.svg";
 
@@ -171,7 +174,7 @@ export const getRootDesctiption = (
     .with([FolderType.USER, ShareAccessRights.None], () =>
       t("EmptyView:DefaultFolderDescription"),
     )
-    .with([FolderType.Recent, P._], () => t("Test"))
+    .with([FolderType.Recent, P._], () => t("EmptyView:EmptyRecentDescription"))
     .with([FolderType.Archive, P._], () => t("Test"))
     .with([FolderType.TRASH, P._], () => t("Test"))
     .otherwise(() => "");
@@ -262,7 +265,7 @@ export const getRootTitle = (
     .with([FolderType.USER, ShareAccessRights.None], () =>
       t("Files:EmptyScreenFolder"),
     )
-    .with([FolderType.Recent, P._], () => t("Test"))
+    .with([FolderType.Recent, P._], () => t("Files:NoFilesHereYet"))
     .with([FolderType.Archive, P._], () => t("Test"))
     .with([FolderType.TRASH, P._], () => t("Test"))
     .otherwise(() => "");
@@ -395,7 +398,9 @@ export const getRootIcom = (
     .with([FolderType.USER, ShareAccessRights.None], () =>
       isBaseTheme ? <DefaultFolderLight /> : <DefaultFolderDark />,
     )
-    .with([FolderType.Recent, P._], () => <div />)
+    .with([FolderType.Recent, P._], () =>
+      isBaseTheme ? <EmptyRecentLightIcon /> : <EmptyRecentDarkIcon />,
+    )
     .with([FolderType.Archive, P._], () => <div />)
     .with([FolderType.TRASH, P._], () => <div />)
     .otherwise(() => <div />);