Web: Add setCalendarDay, open CalendarComponent.

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Calendar.js

@@ -31,6 +31,7 @@ const CalendarComponent = ({ roomCreationDate, setCalendarDay }) => {
   const [selectedDate, setSelectedDate] = useState(null);
 
   const toggleCalendar = () => setIsOpen((open) => !open);
+
   const onDateSet = (date) => {
     const formattedDate = moment(date.format("YYYY-MM-DD"));
     setSelectedDate(date);

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js

@@ -8,6 +8,7 @@ import IconButton from "@docspace/components/icon-button";
 import { StyledTitle } from "../../../styles/common";
 import RoomIcon from "@docspace/components/room-icon";
 import RoomsContextBtn from "./context-btn";
+import CalendarComponent from "../Calendar";
 import { RoomsType, ShareAccessRights } from "@docspace/common/constants";
 
 const RoomsItemHeader = ({
@@ -20,6 +21,8 @@ const RoomsItemHeader = ({
   setInviteUsersWarningDialogVisible,
   isPublicRoomType,
   roomsView,
+  setCalendarDay,
+  openHistory,
 }) => {
   const itemTitleRef = useRef();
 
@@ -83,7 +86,12 @@ const RoomsItemHeader = ({
             size={16}
           />
         )}
-
+        {openHistory && (
+          <CalendarComponent
+            setCalendarDay={setCalendarDay}
+            roomCreationDate={selection.created}
+          />
+        )}
         <RoomsContextBtn selection={selection} itemTitleRef={itemTitleRef} />
       </div>
     </StyledTitle>
@@ -96,6 +104,7 @@ export default inject(({ auth, dialogsStore, selectedFolderStore }) => {
     selectionParentRoom,
     getIsRooms,
     roomsView,
+    setCalendarDay,
   } = auth.infoPanelStore;
 
   const isShowParentRoom =
@@ -127,6 +136,8 @@ export default inject(({ auth, dialogsStore, selectedFolderStore }) => {
       (selectedFolderStore.roomType ??
         auth.infoPanelStore.selectionParentRoom?.roomType) ===
       RoomsType.PublicRoom,
+
+    setCalendarDay,
   };
 })(
   withTranslation([

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/index.js

@@ -38,12 +38,15 @@ const ItemTitle = ({
         currentColorScheme={currentColorScheme}
         gallerySelected={gallerySelected}
         getIcon={getIcon}
-        openHistory={openHistory}
-        setCalendarDay={setCalendarDay}
       />
     );
 
-  return <RoomsItemHeader />;
+  return (
+    <RoomsItemHeader
+      openHistory={openHistory}
+      setCalendarDay={setCalendarDay}
+    />
+  );
 };
 
 export default inject(({ auth, settingsStore, peopleStore, oformsStore }) => {

packages/client/src/pages/Home/InfoPanel/Body/views/History/index.js

@@ -71,6 +71,7 @@ const History = ({
     if (!historyListNode) return;
 
     const scroll = historyListNode.closest(".scroller");
+
     let datesCoincidingWithCalendarDay = [];
 
     selectionHistory.forEach((item) => {

packages/common/store/InfoPanelStore.js

@@ -46,6 +46,7 @@ class InfoPanelStore {
   selectedFolderStore = null;
   treeFoldersStore = null;
   membersList = null;
+  calendarDay = null;
 
   constructor() {
     makeAutoObservable(this);
@@ -227,14 +228,14 @@ class InfoPanelStore {
     return item.isRoom || !!item.roomType
       ? item.rootFolderType === FolderType.Archive
         ? item.logo && item.logo.medium
-        :  this.settingsStore.getIcon(
-          size,
-          null,
-          null,
-          null,
-          item.roomType,
-          true
-        )
+        : this.settingsStore.getIcon(
+            size,
+            null,
+            null,
+            null,
+            item.roomType,
+            true
+          )
         ? item.logo.medium
         : item.icon
         ? item.icon
@@ -351,6 +352,10 @@ class InfoPanelStore {
   setMembersList = (membersList) => {
     this.membersList = membersList;
   };
+
+  setCalendarDay = (calendarDay) => {
+    this.calendarDay = calendarDay;
+  };
 }
 
 export default InfoPanelStore;