Web: Client: InfoPanel: history restyled

packages/client/src/pages/Home/InfoPanel/Body/styles/history.js

@@ -71,7 +71,11 @@ const StyledHistoryBlock = styled.div`
     .title {
       display: flex;
       flex-direction: row;
+      align-items: center;
       gap: 4px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
       .name {
         font-weight: 600;
         font-size: 14px;
@@ -87,14 +91,27 @@ const StyledHistoryBlock = styled.div`
         font-size: 12px;
         color: ${(props) => props.theme.infoPanel.history.dateColor};
       }
+
+      .users-counter {
+        margin-bottom: 1px;
+      }
     }
   }
 `;
 
+const StyledHistoryDisplaynameBlock = styled.div`
+  .name {
+    color: ${(props) => props.theme.infoPanel.history.subtitleColor};
+  }
+`;
+
 const StyledHistoryBlockMessage = styled.div`
   font-weight: 400;
   font-size: 13px;
   line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 
   display: inline-flex;
   gap: 4px;
@@ -137,9 +154,7 @@ const StyledHistoryBlockMessage = styled.div`
 
 const StyledHistoryLink = styled.span`
   display: inline-block;
-
   white-space: normal;
-  margin: 1px 0;
 
   .text {
     font-size: 13px;
@@ -168,16 +183,14 @@ const StyledHistoryBlockTagList = styled.div`
 `;
 
 const StyledHistoryBlockFilesList = styled.div`
-  margin-top: 8px;
   display: flex;
   flex-direction: column;
   padding: 8px 0;
-  background: ${(props) => props.theme.infoPanel.history.fileBlockBg};
   border-radius: 3px;
 `;
 
 const StyledHistoryBlockFile = styled.div`
-  padding: 4px 16px;
+  padding: 4px 0px;
   display: flex;
   gap: 8px;
   flex-direction: row;
@@ -187,15 +200,41 @@ const StyledHistoryBlockFile = styled.div`
   .icon {
     width: 24px;
     height: 24px;
+    margin-inline-end: 5px;
     svg {
       width: 24px;
       height: 24px;
     }
   }
 
+  .item-wrapper,
+  .old-item-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 1px solid
+      ${(props) => props.theme.infoPanel.history.itemBorderColor};
+    border-radius: 6px;
+    padding: 6px 8px;
+
+    &:hover {
+      cursor: ${(props) => (props.isFolder ? "auto" : "pointer")};
+      background-color: ${(props) =>
+        !props.isFolder && props.theme.infoPanel.history.fileBackgroundColor};
+    }
+  }
+
+  .old-item-wrapper {
+    border: none;
+    &:hover {
+      cursor: auto;
+      background-color: transparent;
+    }
+  }
+
   .item-title {
     font-weight: 600;
-    font-size: 14px;
+    font-size: 13px;
     display: flex;
     min-width: 0;
     gap: 0;
@@ -224,8 +263,15 @@ const StyledHistoryBlockFile = styled.div`
   }
 
   .location-btn {
-    margin-inline-start: auto;
+    margin-inline-start: 8px;
     min-width: 16px;
+    opacity: 0;
+  }
+
+  &:hover {
+    .location-btn {
+      opacity: 1;
+    }
   }
 `;
 
@@ -237,7 +283,7 @@ const StyledHistoryBlockExpandLink = styled.div`
 
   &.files-list-expand-link {
     margin-top: 8px;
-    margin-inline-start: 20px;
+    margin-inline-start: 5px;
   }
 
   &.user-list-expand-link {
@@ -268,4 +314,5 @@ export {
   StyledHistoryBlockFile,
   StyledHistoryBlockTagList,
   StyledHistoryBlockExpandLink,
+  StyledHistoryDisplaynameBlock,
 };

packages/client/src/pages/Home/InfoPanel/Body/views/History/FeedInfo.ts

@@ -21,7 +21,11 @@ enum FeedTarget {
   Group = "group",
 }
 
-export type AnyFeedInfo = (typeof feedInfo)[number];
+export type AnyFeedInfo = {
+  key: string;
+  actionType: FeedAction;
+  targetType: FeedTarget;
+};
 
 export type ActionByTarget<T extends `${FeedTarget}`> = Extract<
   AnyFeedInfo,

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

@@ -26,16 +26,13 @@
 
 import AtReactSvgUrl from "PUBLIC_DIR/images/@.react.svg?url";
 import { Avatar } from "@docspace/shared/components/avatar";
-import { Text } from "@docspace/shared/components/text";
-import DefaultUserAvatarSmall from "PUBLIC_DIR/images/default_user_photo_size_32-32.png";
 import { StyledHistoryBlock } from "../../styles/history";
-import { getDateTime } from "../../helpers/HistoryHelper";
+import DefaultUserAvatarSmall from "PUBLIC_DIR/images/default_user_photo_size_32-32.png";
-import { decode } from "he";
+import HistoryTitleBlock from "./HistoryBlockContent/HistoryTitleBlock";
-
 import HistoryBlockContent from "./HistoryBlockContent";
 
 const HistoryBlock = ({ t, feed, isLastEntity }) => {
-  const { action, initiator, date } = feed;
+  const { action, initiator } = feed;
 
   const isUserAction =
     action.key === "RoomCreateUser" ||
@@ -60,20 +57,7 @@ const HistoryBlock = ({ t, feed, isLastEntity }) => {
         }
       />
       <div className="info">
-        <div className="title">
+        <HistoryTitleBlock t={t} feed={feed} />
-          <Text className="name">
-            {initiator?.isAnonim
-              ? t("Common:Anonymous")
-              : decode(initiator.displayName)}
-          </Text>
-          {initiator.isOwner && (
-            <Text className="secondary-info">
-              {t("Common:Owner").toLowerCase()}
-            </Text>
-          )}
-          <Text className="date">{getDateTime(date)}</Text>
-        </div>
-
         <HistoryBlockContent feed={feed} />
       </div>
     </StyledHistoryBlock>

packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/GroupList.tsx

@@ -25,24 +25,26 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import { useState } from "react";
-import { useNavigate, NavigateFunction } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { decode } from "he";
 import { inject, observer } from "mobx-react";
 import { Link } from "@docspace/shared/components/link";
 import { Text } from "@docspace/shared/components/text";
 import { Trans, withTranslation } from "react-i18next";
 import { TTranslation } from "@docspace/shared/types";
+import { TSetSelectedFolder } from "../../../../../../../store/SelectedFolderStore";
+import { Feed } from "./HistoryBlockContent.types";
+
 import {
   StyledHistoryBlockExpandLink,
   StyledHistoryLink,
 } from "../../../styles/history";
-import { TSetSelectedFolder } from "../../../../../../../store/SelectedFolderStore.ts";
 
 const EXPANSION_THRESHOLD = 8;
 
 interface HistoryGroupListProps {
   t: TTranslation;
-  feed: any;
+  feed: Feed;
   isVisitor?: boolean;
   isCollaborator?: boolean;
   setPeopleSelection?: (newSelection: any[]) => void;

packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/HistoryBlockContent.types.ts

@@ -0,0 +1,72 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+import { TTranslation } from "@docspace/shared/types";
+
+export interface HistoryBlockContentProps {
+  t: TTranslation;
+  feed: Feed;
+  historyWithFileList?: boolean;
+}
+
+interface UserData {
+  avatar: string;
+  avatarSmall: string;
+  avatarMedium: string;
+  avatarMax: string;
+  avatarOriginal: string;
+  displayName: string;
+  hasAvatar: boolean;
+  id: string;
+  isAnonim: boolean;
+  profileUrl: string;
+  tags: [];
+  access: string;
+  oldAccess: string;
+  parentId: number;
+  toFolderId: number;
+  parentTitle: string;
+  parentType: number;
+  fromParentType: number;
+  fromParentTitle: string;
+}
+
+interface RelatedAction {
+  action: UserData;
+  initiator: UserData;
+  date: string;
+  data: UserData;
+}
+
+export interface Feed {
+  action: {
+    id: number;
+    key: string;
+  };
+  data: UserData;
+  date: string;
+  initiator: UserData;
+  related: RelatedAction[];
+}

packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/HistoryTitleBlock.tsx

@@ -0,0 +1,64 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { Text } from "@docspace/shared/components/text";
+import { useFeedTranslation } from "../useFeedTranslation";
+import { getDateTime } from "../../../helpers/HistoryHelper";
+import { getFeedInfo } from "../FeedInfo";
+import HistoryUserList from "./UserList";
+import HistoryMainTextFolderInfo from "./MainTextFolderInfo";
+
+import { HistoryBlockContentProps } from "./HistoryBlockContent.types";
+
+const HistoryTitleBlock = ({ t, feed }: HistoryBlockContentProps) => {
+  const { actionType, targetType } = getFeedInfo(feed);
+
+  const hasRelatedItems = feed.related.length > 0;
+
+  return (
+    <div className="title">
+      {targetType === "user" && actionType === "update" && (
+        <HistoryUserList feed={feed} />
+      )}
+
+      {useFeedTranslation(t, feed, hasRelatedItems)}
+      {hasRelatedItems && (
+        <Text className="users-counter">({feed.related.length + 1}).</Text>
+      )}
+
+      {(targetType === "file" || targetType === "folder") &&
+        actionType !== "delete" && <HistoryMainTextFolderInfo feed={feed} />}
+
+      {feed.related.length === 0 &&
+        targetType === "user" &&
+        actionType !== "update" && <HistoryUserList feed={feed} />}
+
+      <Text className="date">{getDateTime(feed.date)}</Text>
+    </div>
+  );
+};
+
+export default HistoryTitleBlock;

packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/ItemList.tsx

@@ -40,15 +40,17 @@ import {
 } from "../../../styles/history";
 
 import { ActionByTarget } from "../FeedInfo";
+import { Feed } from "./HistoryBlockContent.types";
 
 const EXPANSION_THRESHOLD = 3;
 
 type HistoryItemListProps = {
   t: TTranslation;
-  feed: any;
+  feed: Feed;
+
   nameWithoutExtension?: (title: string) => string;
   getInfoPanelItemIcon?: (item: any, size: number) => string;
-  checkAndOpenLocationAction?: (item: any) => void;
+  checkAndOpenLocationAction?: (item: any, actionType: string) => void;
 } & (
   | {
       actionType: ActionByTarget<"file">;
@@ -60,7 +62,7 @@ type HistoryItemListProps = {
     }
 );
 
-export const HistoryItemList = ({
+const HistoryItemList = ({
   t,
   feed,
   actionType,
@@ -69,9 +71,10 @@ export const HistoryItemList = ({
   getInfoPanelItemIcon,
   checkAndOpenLocationAction,
 }: HistoryItemListProps) => {
-  const [isExpanded, setIsExpanded] = useState(
+  const totalItems = feed.related.length + 1;
-    1 + feed.related.length <= EXPANSION_THRESHOLD,
+  const isExpandable = totalItems > EXPANSION_THRESHOLD;
-  );
+  const [isExpanded, setIsExpanded] = useState(!isExpandable);
+
   const onExpand = () => setIsExpanded(true);
 
   const items = [
@@ -95,63 +98,77 @@ export const HistoryItemList = ({
     <StyledHistoryBlockFilesList>
       {items.map((item, i) => {
         if (!isExpanded && i > EXPANSION_THRESHOLD - 1) return null;
+        console.log("item", item);
         return (
-          <StyledHistoryBlockFile
+          <>
-            isRoom={false}
+            <StyledHistoryBlockFile
-            key={`${feed.action.id}_${item.id}`}
+              isRoom={false}
-          >
+              isFolder={item.isFolder}
-            <ReactSVG className="icon" src={getInfoPanelItemIcon!(item, 24)} />
+              key={`${feed.action.id}_${item.id}`}
-            <div className="item-title">
+            >
-              {item.title ? (
+              <div className="item-wrapper">
-                <>
+                <ReactSVG
-                  <span className="name" key="hbil-item-name">
+                  className="icon"
-                    {item.title}
+                  src={getInfoPanelItemIcon!(item, 24)}
-                  </span>
+                />
-                  {item.fileExst && (
+                <div className="item-title">
-                    <span className="exst" key="hbil-item-exst">
+                  {item.title ? (
-                      {item.fileExst}
+                    <>
-                    </span>
+                      <span className="name" key="hbil-item-name">
+                        {item.title}
+                      </span>
+                      {item.fileExst && (
+                        <span className="exst" key="hbil-item-exst">
+                          {item.fileExst}
+                        </span>
+                      )}
+                    </>
+                  ) : (
+                    <span className="name">{item.fileExst}</span>
                   )}
-                </>
+                </div>
-              ) : (
+              </div>
-                <span className="name">{item.fileExst}</span>
+
-              )}
+              <IconButton
-            </div>
+                className="location-btn"
-            <IconButton
+                iconName={FolderLocationReactSvgUrl}
-              className="location-btn"
+                size={16}
-              iconName={FolderLocationReactSvgUrl}
+                isFill
-              size="16"
+                onClick={() => checkAndOpenLocationAction!(item, actionType)}
-              isFill
+                title={t("Files:OpenLocation")}
-              onClick={() => checkAndOpenLocationAction!(item, actionType)}
+              />
-              title={t("Files:OpenLocation")}
+            </StyledHistoryBlockFile>
-            />
+
-          </StyledHistoryBlockFile>
+            {actionType === "rename" && oldItem && (
+              <StyledHistoryBlockFile>
+                <div className="old-item-wrapper">
+                  <ReactSVG
+                    className="icon"
+                    src={getInfoPanelItemIcon!(item, 24)}
+                  />
+                  <div className="item-title old-item-title">
+                    {oldItem.title ? (
+                      <>
+                        <span className="name" key="hbil-item-name">
+                          {oldItem.title}
+                        </span>
+                        {oldItem.fileExst && (
+                          <span className="exst" key="hbil-item-exst">
+                            {oldItem.fileExst}
+                          </span>
+                        )}
+                      </>
+                    ) : (
+                      <span className="name">{oldItem.fileExst}</span>
+                    )}
+                  </div>
+                </div>
+              </StyledHistoryBlockFile>
+            )}
+          </>
         );
       })}
-
+      {isExpandable && !isExpanded && (
-      {actionType === "rename" && oldItem && (
-        <StyledHistoryBlockFile>
-          <div style={{ width: "24px", height: "24px" }} />
-          <div className="item-title old-item-title">
-            {oldItem.title ? (
-              <>
-                <span className="name" key="hbil-item-name">
-                  {oldItem.title}
-                </span>
-                {oldItem.fileExst && (
-                  <span className="exst" key="hbil-item-exst">
-                    {oldItem.fileExst}
-                  </span>
-                )}
-              </>
-            ) : (
-              <span className="name">{oldItem.fileExst}</span>
-            )}
-          </div>
-        </StyledHistoryBlockFile>
-      )}
-
-      {!isExpanded && (
         <StyledHistoryBlockExpandLink
           className="files-list-expand-link"
           onClick={onExpand}

packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/MainText.tsx

@@ -26,20 +26,28 @@
 
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
+import { decode } from "he";
 import { TTranslation } from "@docspace/shared/types";
-import { StyledHistoryBlockMessage } from "../../../styles/history";
+import { Text } from "@docspace/shared/components/text";
-import { useFeedTranslation } from "../useFeedTranslation";
+import { StyledHistoryDisplaynameBlock } from "../../../styles/history";
+import { Feed } from "./HistoryBlockContent.types";
 
 interface HistoryMainTextProps {
   t: TTranslation;
-  feed: any;
+  feed: Feed;
 }
 
 const HistoryMainText = ({ t, feed }: HistoryMainTextProps) => {
   return (
-    <StyledHistoryBlockMessage className="message">
+    <StyledHistoryDisplaynameBlock className="message">
-      <span className="main-message">{useFeedTranslation(t, feed)}</span>{" "}
+      <span className="main-message">
-    </StyledHistoryBlockMessage>
+        <Text className="name">
+          {feed.initiator?.isAnonim
+            ? t("Common:Anonymous")
+            : decode(feed.initiator.displayName)}
+        </Text>
+      </span>
+    </StyledHistoryDisplaynameBlock>
   );
 };
 

packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/MainTextFolderInfo.tsx

@@ -29,10 +29,11 @@ import { inject, observer } from "mobx-react";
 import { TTranslation } from "@docspace/shared/types";
 import { FolderType } from "@docspace/shared/enums";
 import { StyledHistoryBlockMessage } from "../../../styles/history";
+import { Feed } from "./HistoryBlockContent.types";
 
 type HistoryMainTextFolderInfoProps = {
   t: TTranslation;
-  feed: any;
+  feed: Feed;
   selectedFolderId?: number;
 };
 
@@ -80,7 +81,7 @@ const HistoryMainTextFolderInfo = ({
   );
 };
 
-export default inject(({ selectedFolderStore }) => ({
+export default inject<TStore>(({ selectedFolderStore }) => ({
   selectedFolderId: selectedFolderStore.id,
 }))(
   withTranslation(["InfoPanel", "Common", "Translations"])(

packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/RoomTagList.tsx

@@ -24,12 +24,13 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
+import { Tag } from "@docspace/shared/components/tag";
 import { StyledHistoryBlockTagList } from "../../../styles/history";
 import { ActionByTarget } from "../FeedInfo";
-import { Tag } from "@docspace/shared/components/tag";
+import { Feed } from "./HistoryBlockContent.types";
 
 interface HistoryRoomTagListProps {
-  feed: any;
+  feed: Feed;
   actionType: ActionByTarget<"roomTag">;
 }
 
@@ -37,7 +38,7 @@ const HistoryRoomTagList = ({ feed, actionType }: HistoryRoomTagListProps) => {
   if (actionType === "create")
     return (
       <StyledHistoryBlockTagList>
-        {feed.data.tags.map((tag: string) => (
+        {feed.data?.tags.map((tag: string) => (
           <Tag
             className="history-tag"
             key={tag}
@@ -52,7 +53,7 @@ const HistoryRoomTagList = ({ feed, actionType }: HistoryRoomTagListProps) => {
   if (actionType === "delete") {
     return (
       <StyledHistoryBlockTagList>
-        {feed.data.tags.map((tag: string) => (
+        {feed.data?.tags.map((tag: string) => (
           <Tag
             className="history-tag deleted-tag"
             key={tag}

packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/UserGroupRoleChange.tsx

@@ -25,9 +25,10 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import { StyledHistoryBlockMessage } from "../../../styles/history";
+import { Feed } from "./HistoryBlockContent.types";
 
 interface HistoryUserRoleChangeProps {
-  feed: any;
+  feed: Feed;
 }
 
 const HistoryUserGroupRoleChange = ({ feed }: HistoryUserRoleChangeProps) => {

packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockContent/UserList.tsx

@@ -25,22 +25,25 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import { useState } from "react";
-import { useNavigate, NavigateFunction } from "react-router-dom";
-import { decode } from "he";
 import { inject, observer } from "mobx-react";
+import { useNavigate, NavigateFunction } from "react-router-dom";
+import { Trans, withTranslation } from "react-i18next";
+import { TTranslation } from "@docspace/shared/types";
+import { decode } from "he";
 import { Link } from "@docspace/shared/components/link";
 import { Text } from "@docspace/shared/components/text";
+import { Feed } from "./HistoryBlockContent.types";
+
 import {
   StyledHistoryBlockExpandLink,
   StyledHistoryLink,
 } from "../../../styles/history";
-import { Trans, withTranslation } from "react-i18next";
 
 const EXPANSION_THRESHOLD = 8;
 
 interface HistoryUserListProps {
-  t;
+  t: TTranslation;
-  feed: any;
+  feed: Feed;
   openUser?: (user: any, navigate: NavigateFunction) => void;
   isVisitor?: boolean;
   isCollaborator?: boolean;
@@ -88,7 +91,7 @@ const HistoryUserList = ({
             )}
 
             {withComma && ","}
-            <div className="space" />
+            {feed.related.length > 0 && <div className="space" />}
           </StyledHistoryLink>
         );
       })}
@@ -111,7 +114,7 @@ const HistoryUserList = ({
   );
 };
 
-export default inject(({ infoPanelStore, userStore }) => ({
+export default inject<TStore>(({ infoPanelStore, userStore }) => ({
   openUser: infoPanelStore.openUser,
   isVisitor: userStore.user.isVisitor,
   isCollaborator: userStore.user.isCollaborator,

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

@@ -25,20 +25,16 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import { inject, observer } from "mobx-react";
-
 import HistoryUserList from "./UserList";
 import HistoryMainText from "./MainText";
 import HistoryItemList from "./ItemList";
-import HistoryMainTextFolderInfo from "./MainTextFolderInfo";
 import HistoryRoomExternalLink from "./RoomExternalLink";
 import HistoryGroupList from "./GroupList";
 import HistoryUserGroupRoleChange from "./UserGroupRoleChange";
 import HistoryRoomTagList from "./RoomTagList";
 import { getFeedInfo } from "../FeedInfo";
 
-interface HistoryBlockContentProps {
+import { HistoryBlockContentProps } from "./HistoryBlockContent.types";
-  feed: any;
-}
 
 const HistoryBlockContent = ({
   feed,
@@ -48,18 +44,22 @@ const HistoryBlockContent = ({
 
   return (
     <>
-      {targetType === "user" && actionType === "update" && (
-        <HistoryUserList feed={feed} />
-      )}
-
       {targetType === "group" && actionType === "update" && (
         <HistoryGroupList feed={feed} />
       )}
 
-      <HistoryMainText feed={feed} />
+      {targetType === "roomExternalLink" && actionType === "create" && (
+        <HistoryRoomExternalLink feedData={feed.data} />
+      )}
 
-      {(targetType === "file" || targetType === "folder") &&
+      {targetType === "group" && actionType !== "update" && (
-        actionType !== "delete" && <HistoryMainTextFolderInfo feed={feed} />}
+        <HistoryGroupList feed={feed} />
+      )}
+
+      {(targetType === "user" || targetType === "group") &&
+        actionType === "update" && <HistoryUserGroupRoleChange feed={feed} />}
+
+      <HistoryMainText feed={feed} />
 
       {(targetType === "file" || targetType === "folder") &&
         (actionType === "rename" || historyWithFileList) && (
@@ -70,29 +70,18 @@ const HistoryBlockContent = ({
           />
         )}
 
+      {feed.related.length > 0 &&
+        targetType === "user" &&
+        actionType !== "update" && <HistoryUserList feed={feed} />}
+
       {targetType === "roomTag" && (
         <HistoryRoomTagList feed={feed} actionType={actionType} />
       )}
-
-      {targetType === "roomExternalLink" && actionType === "create" && (
-        <HistoryRoomExternalLink feedData={feed.data} />
-      )}
-
-      {targetType === "user" && actionType !== "update" && (
-        <HistoryUserList feed={feed} />
-      )}
-
-      {targetType === "group" && actionType !== "update" && (
-        <HistoryGroupList feed={feed} />
-      )}
-
-      {(targetType === "user" || targetType === "group") &&
-        actionType === "update" && <HistoryUserGroupRoleChange feed={feed} />}
     </>
   );
 };
 
-export default inject(({ infoPanelStore }) => {
+export default inject<TStore>(({ infoPanelStore }) => {
   const { historyWithFileList } = infoPanelStore;
   return { historyWithFileList };
 })(observer(HistoryBlockContent));

packages/client/src/pages/Home/InfoPanel/Body/views/History/useFeedTranslation.tsx

@@ -5,11 +5,13 @@ import { AnyFeedInfo } from "./FeedInfo";
 export const useFeedTranslation = (
   t: TTranslation,
   feed: { action: { key: AnyFeedInfo["key"] }; data: any },
+  hasRelatedItems: boolean,
 ) => {
   switch (feed.action.key) {
     case "FileCreated":
       return t("InfoPanel:FileCreated");
     case "FileUploaded":
+      if (hasRelatedItems) return t("InfoPanel:FileUploaded").slice(0, -1);
       return t("InfoPanel:FileUploaded");
     case "UserFileUpdated":
       return t("InfoPanel:UserFileUpdated");
@@ -38,10 +40,13 @@ export const useFeedTranslation = (
     case "FolderRenamed":
       return t("InfoPanel:FolderRenamed");
     case "FolderMoved":
+      if (hasRelatedItems) return t("InfoPanel:FolderMoved").slice(0, -1);
       return t("InfoPanel:FolderMoved");
     case "FolderCopied":
+      if (hasRelatedItems) return t("InfoPanel:FolderCopied").slice(0, -1);
       return t("InfoPanel:FolderCopied");
     case "FolderDeleted":
+      if (hasRelatedItems) return t("InfoPanel:FolderDeleted").slice(0, -1);
       return t("InfoPanel:FolderDeleted");
     case "RoomCreated":
       return (
@@ -124,6 +129,7 @@ export const useFeedTranslation = (
         />
       );
     case "RoomCreateUser":
+      if (hasRelatedItems) return t("InfoPanel:RoomCreateUser").slice(0, -1);
       return t("InfoPanel:RoomCreateUser");
     case "RoomUpdateAccessForUser":
       return t("InfoPanel:RoomUpdateAccess");

packages/shared/themes/base.ts

@@ -1890,6 +1890,8 @@ export const getBaseTheme = () => {
         renamedItemColor: gray,
         oldRoleColor: lightGrayDark,
         messageColor: black,
+        itemBorderColor: grayLightMid,
+        fileBackgroundColor: lightGraySelected,
       },
 
       details: {

packages/shared/themes/dark.ts

@@ -1875,6 +1875,8 @@ const Dark: TTheme = {
       renamedItemColor: gray,
       oldRoleColor: gray,
       messageColor: white,
+      itemBorderColor: grayDarkStrong,
+      fileBackgroundColor: darkGrayLight,
     },
 
     details: {