Web: Client: InfoPanel: history restyled

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

@@ -53,9 +53,8 @@ const StyledHistoryBlock = styled.div`
   padding: 8px 0;
 
   ${({ withBottomDivider, theme }) =>
-    withBottomDivider
-      ? ` border-bottom: solid 1px ${theme.infoPanel.borderColor}; `
-      : ` margin-bottom: 12px; `}
+    withBottomDivider &&
+    ` border-bottom: solid 1px ${theme.infoPanel.borderColor}; `}
 
   .avatar {
     min-width: 32px;
@@ -86,6 +85,7 @@ const StyledHistoryBlock = styled.div`
       .date {
         white-space: nowrap;
         display: inline-block;
+        align-self: flex-start;
         margin-inline-start: auto;
         font-weight: 600;
         font-size: 12px;
@@ -96,6 +96,12 @@ const StyledHistoryBlock = styled.div`
         margin-bottom: 1px;
       }
     }
+
+    .action-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 `;
 
@@ -154,7 +160,9 @@ const StyledHistoryBlockMessage = styled.div`
 
 const StyledHistoryLink = styled.span`
   display: inline-block;
-  white-space: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   .text {
     font-size: 13px;
@@ -166,6 +174,7 @@ const StyledHistoryLink = styled.span`
     text-decoration: underline;
     text-decoration-style: dashed;
     text-underline-offset: 2px;
+    margin-bottom: -5px;
   }
 
   .space {
@@ -212,6 +221,9 @@ const StyledHistoryBlockFile = styled.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     border: 1px solid
       ${(props) => props.theme.infoPanel.history.itemBorderColor};
     border-radius: 6px;
@@ -288,6 +300,8 @@ const StyledHistoryBlockExpandLink = styled.div`
 
   &.user-list-expand-link {
     display: inline-block;
+    position: relative;
+    top: -3px;
   }
 
   strong {

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

@@ -109,7 +109,7 @@ const HistoryGroupList = ({
             )}
 
             {withComma && ","}
-            <div className="space" />
+            {feed.related.length > 0 && <div className="space" />}
           </StyledHistoryLink>
         );
       })}

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

@@ -29,6 +29,8 @@ import { useFeedTranslation } from "../useFeedTranslation";
 import { getDateTime } from "../../../helpers/HistoryHelper";
 import { getFeedInfo } from "../FeedInfo";
 import HistoryUserList from "./UserList";
+import HistoryGroupList from "./GroupList";
+import HistoryRoomExternalLink from "./RoomExternalLink";
 import HistoryMainTextFolderInfo from "./MainTextFolderInfo";
 
 import { HistoryBlockContentProps } from "./HistoryBlockContent.types";
@@ -44,11 +46,29 @@ const HistoryTitleBlock = ({ t, feed }: HistoryBlockContentProps) => {
         <HistoryUserList feed={feed} />
       )}
 
-      {useFeedTranslation(t, feed, hasRelatedItems)}
+      {targetType === "group" && actionType === "update" && (
+        <>
+          {t("Common:Group")}
+          <HistoryGroupList feed={feed} />
+        </>
+      )}
+
+      <div className="action-title">
+        <Text truncate>{useFeedTranslation(t, feed, hasRelatedItems)}</Text>
+      </div>
+
       {hasRelatedItems && (
         <Text className="users-counter">({feed.related.length + 1}).</Text>
       )}
 
+      {targetType === "roomExternalLink" && actionType === "create" && (
+        <HistoryRoomExternalLink feedData={feed.data} />
+      )}
+
+      {feed.related.length === 0 &&
+        targetType === "group" &&
+        actionType !== "update" && <HistoryGroupList feed={feed} />}
+
       {(targetType === "file" || targetType === "folder") &&
         actionType !== "delete" && <HistoryMainTextFolderInfo feed={feed} />}
 

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

@@ -98,7 +98,6 @@ const HistoryItemList = ({
     <StyledHistoryBlockFilesList>
       {items.map((item, i) => {
         if (!isExpanded && i > EXPANSION_THRESHOLD - 1) return null;
-        console.log("item", item);
         return (
           <>
             <StyledHistoryBlockFile

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

@@ -98,7 +98,7 @@ const HistoryRoomExternalLink = ({
   return (
     <StyledHistoryLink>
       {canEditLink ? (
-        <Link className="text link" onClick={onEditLink}>
+        <Link className="text link" onClick={onEditLink} isTextOverflow>
           {decode((feedData.title || feedData.sharedTo?.title) ?? "")}
         </Link>
       ) : (

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

@@ -28,7 +28,6 @@ import { inject, observer } from "mobx-react";
 import HistoryUserList from "./UserList";
 import HistoryMainText from "./MainText";
 import HistoryItemList from "./ItemList";
-import HistoryRoomExternalLink from "./RoomExternalLink";
 import HistoryGroupList from "./GroupList";
 import HistoryUserGroupRoleChange from "./UserGroupRoleChange";
 import HistoryRoomTagList from "./RoomTagList";
@@ -44,18 +43,6 @@ const HistoryBlockContent = ({
 
   return (
     <>
-      {targetType === "group" && actionType === "update" && (
-        <HistoryGroupList feed={feed} />
-      )}
-
-      {targetType === "roomExternalLink" && actionType === "create" && (
-        <HistoryRoomExternalLink feedData={feed.data} />
-      )}
-
-      {targetType === "group" && actionType !== "update" && (
-        <HistoryGroupList feed={feed} />
-      )}
-
       {(targetType === "user" || targetType === "group") &&
         actionType === "update" && <HistoryUserGroupRoleChange feed={feed} />}
 
@@ -70,6 +57,10 @@ const HistoryBlockContent = ({
           />
         )}
 
+      {feed.related.length > 0 &&
+        targetType === "group" &&
+        actionType !== "update" && <HistoryGroupList feed={feed} />}
+
       {feed.related.length > 0 &&
         targetType === "user" &&
         actionType !== "update" && <HistoryUserList feed={feed} />}

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

@@ -136,6 +136,7 @@ export const useFeedTranslation = (
     case "RoomRemoveUser":
       return t("InfoPanel:RoomRemoveUser");
     case "RoomGroupAdded":
+      if (hasRelatedItems) return t("InfoPanel:RoomGroupAdded").slice(0, -1);
       return t("InfoPanel:RoomGroupAdded");
     case "RoomUpdateAccessForGroup":
       return t("InfoPanel:RoomUpdateAccess");