Client: InfoPanel: ItemTitle: Display file extension depending on settings. Fix truncation

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

@@ -110,8 +110,17 @@ const StyledTitle = styled.div`
     line-height: 22px;
     max-height: 44px;
     margin: 0 8px;
+
     overflow: hidden;
     text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-align: start;
+  }
+
+  .file-extension {
+    color: ${(props) => props.theme.filesSection.tableView.fileExstColor};
   }
 
   .free-label {

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

@@ -27,6 +27,7 @@
 import { useRef } from "react";
 import { withTranslation } from "react-i18next";
 
+import { getTitleWithoutExtension } from "@docspace/shared/utils";
 import { Text } from "@docspace/shared/components/text";
 import { inject, observer } from "mobx-react";
 import PersonPlusReactSvgUrl from "PUBLIC_DIR/images/person+.react.svg?url";
@@ -56,6 +57,7 @@ const RoomsItemHeader = ({
   showSearchBlock,
   setShowSearchBlock,
   roomType,
+  displayFileExtension,
 }) => {
   const itemTitleRef = useRef();
 
@@ -75,6 +77,13 @@ const RoomsItemHeader = ({
   const badgeUrl = showPlanetIcon ? Planet12ReactSvgUrl : null;
   const isRoomMembersPanel = selection?.isRoom && roomsView === "info_members";
 
+  const isFile = !!selection.fileExst;
+  let title = selection.title;
+
+  if (isFile) {
+    title = getTitleWithoutExtension(selection, false);
+  }
+
   const onSelectItem = () => {
     setSelection([]);
     setBufferSelection(selection);
@@ -107,7 +116,7 @@ const RoomsItemHeader = ({
       <div className="item-icon">
         <RoomIcon
           color={selection.logo?.color}
-          title={selection.title}
+          title={title}
           isArchive={isArchive}
           showDefault={showDefaultRoomIcon}
           imgClassName={`icon ${selection.isRoom && "is-room"}`}
@@ -116,8 +125,11 @@ const RoomsItemHeader = ({
         />
       </div>
 
-      <Text className="text" title={selection.title}>
-        {selection.title}
+      <Text className="text" title={title} dir="auto">
+        {title}
+        {isFile && displayFileExtension && (
+          <span className="file-extension">{selection.fileExst}</span>
+        )}
       </Text>
 
       <div className="info_title-icons">
@@ -161,6 +173,7 @@ export default inject(
     selectedFolderStore,
     filesStore,
     infoPanelStore,
+    filesSettingsStore,
   }) => {
     const {
       infoPanelSelection,
@@ -170,6 +183,8 @@ export default inject(
       setShowSearchBlock,
     } = infoPanelStore;
 
+    const { displayFileExtension } = filesSettingsStore;
+
     const selection = infoPanelSelection.length > 1 ? null : infoPanelSelection;
     const isArchive = selection?.rootFolderType === FolderType.Archive;
 
@@ -195,6 +210,8 @@ export default inject(
       isArchive,
       isShared: selection?.shared,
       roomType,
+
+      displayFileExtension,
     };
   },
 )(