Mobile add breadcrumb to expanded cards info #2295

src/pages/commonFeed/components/FeedLayout/components/FeedItemPreviewModal/FeedItemPreviewModal.tsx

@@ -4,6 +4,7 @@ import { useChatContext } from "@/pages/common/components/ChatComponent";
 import { Modal } from "@/shared/components";
 import { useIsTabletView } from "@/shared/hooks/viewport";
 import { ModalType, FeedLayoutItemChangeData } from "@/shared/interfaces";
+import { Breadcrumbs } from "@/shared/layouts/MultipleSpacesLayout/components/Header/components";
 import { Circles, CommonFeed } from "@/shared/models";
 import styles from "./FeedItemPreviewModal.module.scss";
 
@@ -72,6 +73,7 @@ const FeedItemPreviewModal: FC<FeedItemPreviewModalProps> = (props) => {
     >
       {selectedFeedItem && (
         <>
+          <Breadcrumbs itemsWithMenus={false} />
           {title && <h3 className={styles.itemTitle}>{title}</h3>}
           <FeedItem
             commonId={commonId}

src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx

@@ -1,8 +1,12 @@
 import React, { FC, useRef } from "react";
+import { useSelector } from "react-redux";
 import { ButtonIcon, UserAvatar } from "@/shared/components";
+import { ScreenSize } from "@/shared/constants";
 import { RightArrowThinIcon } from "@/shared/icons";
+import { getScreenSize } from "@/shared/store/selectors";
 import { ContextMenuRef } from "@/shared/ui-kit";
 import { ProjectsStateItem } from "@/store/states";
+import { truncateBreadcrumbName } from "../../utils";
 import { BreadcrumbsMenu } from "../BreadcrumbsMenu";
 import styles from "./ActiveBreadcrumbsItem.module.scss";
 
@@ -26,6 +30,8 @@ const ActiveBreadcrumbsItem: FC<ActiveBreadcrumbsItemProps> = (props) => {
   } = props;
   const itemsButtonRef = useRef<HTMLButtonElement>(null);
   const contextMenuRef = useRef<ContextMenuRef>(null);
+  const screenSize = useSelector(getScreenSize());
+  const isMobileView = screenSize === ScreenSize.Mobile;
 
   const handleButtonClick = () => {
     if (itemsButtonRef.current) {
@@ -44,7 +50,9 @@ const ActiveBreadcrumbsItem: FC<ActiveBreadcrumbsItemProps> = (props) => {
           userName={name}
         />
       )}
-      <span className={styles.name}>{name}</span>
+      <span className={styles.name}>
+        {isMobileView ? truncateBreadcrumbName(name) : name}
+      </span>
       {(items.length > 0 || commonIdToAddProject) && withMenu && (
         <ButtonIcon
           ref={itemsButtonRef}

src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.module.scss

@@ -1,4 +1,5 @@
 @import "../../../../../../../../../constants";
+@import "../../../../../../../../..//styles/sizes.scss";
 
 .button {
   --breadcrumbs-color: #{$c-gray-40};
@@ -27,3 +28,13 @@
     --breadcrumbs-bg-color: #{$c-gray-20};
   }
 }
+
+@include big-phone {
+  li {
+    &:first-child {
+      button {
+        padding-left: 0;
+      }
+    }
+  }
+}

src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx

@@ -1,8 +1,12 @@
 import React, { FC, useRef } from "react";
+import { useSelector } from "react-redux";
 import { useHistory } from "react-router";
+import { ScreenSize } from "@/shared/constants";
 import { useRoutesContext } from "@/shared/contexts";
+import { getScreenSize } from "@/shared/store/selectors";
 import { ContextMenuRef } from "@/shared/ui-kit";
 import { ProjectsStateItem } from "@/store/states";
+import { truncateBreadcrumbName } from "../../utils";
 import { BreadcrumbsMenu } from "../BreadcrumbsMenu";
 import styles from "./BreadcrumbsItem.module.scss";
 
@@ -30,6 +34,8 @@ const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
   const { getCommonPagePath } = useRoutesContext();
   const containerRef = useRef<HTMLLIElement>(null);
   const contextMenuRef = useRef<ContextMenuRef>(null);
+  const screenSize = useSelector(getScreenSize());
+  const isMobileView = screenSize === ScreenSize.Mobile;
 
   const handleButtonClick = () => {
     if (!withMenu) {
@@ -46,7 +52,9 @@ const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
   return (
     <li ref={containerRef}>
       <button className={styles.button} onClick={handleButtonClick}>
-        {activeItem.name}
+        {isMobileView
+          ? truncateBreadcrumbName(activeItem.name)
+          : activeItem.name}
       </button>
       {withMenu && (
         <BreadcrumbsMenu

src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/FeedItemBreadcrumbs/FeedItemBreadcrumbs.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { ScreenSize } from "@/shared/constants";
+import { getScreenSize } from "@/shared/store/selectors";
 import {
   commonLayoutActions,
   MultipleSpacesLayoutFeedItemBreadcrumbs,
@@ -22,6 +24,8 @@ const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
   const dispatch = useDispatch();
   const currentLayoutCommonId = useSelector(selectCommonLayoutCommonId);
   const goToCreateCommon = useGoToCreateCommon();
+  const screenSize = useSelector(getScreenSize());
+  const isMobileView = screenSize === ScreenSize.Mobile;
 
   const handleItemClick = (item: ProjectsStateItem) => {
     if (
@@ -34,13 +38,25 @@ const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
     }
   };
 
+  const shouldTruncateBreadcrumb =
+    isMobileView && breadcrumbs.items.length >= 3;
+  const breadcrumbsItems = shouldTruncateBreadcrumb
+    ? [breadcrumbs.items[0], breadcrumbs.items[breadcrumbs.items.length - 1]]
+    : breadcrumbs.items;
+
   return (
     <ul className={styles.container}>
       {breadcrumbs.areItemsLoading && <LoadingBreadcrumbsItem />}
       {!breadcrumbs.areItemsLoading &&
-        breadcrumbs.items.map((item, index) => (
+        breadcrumbsItems.map((item, index) => (
           <React.Fragment key={item.commonId}>
             {index > 0 && <Separator />}
+            {shouldTruncateBreadcrumb && index === 1 && (
+              <>
+                ...
+                <Separator />
+              </>
+            )}
             <FeedBreadcrumbsItem
               activeItem={item}
               onCommonCreate={index === 0 ? goToCreateCommon : undefined}
@@ -54,12 +70,14 @@ const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
           {(breadcrumbs.areItemsLoading || breadcrumbs.items.length > 0) && (
             <Separator />
           )}
-          <ActiveFeedBreadcrumbsItem
-            activeItemId={breadcrumbs.activeCommonId}
-            name={breadcrumbs.activeItem.name}
-            image={breadcrumbs.activeItem.image}
-            withMenu={itemsWithMenus}
-          />
+          {!isMobileView && (
+            <ActiveFeedBreadcrumbsItem
+              activeItemId={breadcrumbs.activeCommonId}
+              name={breadcrumbs.activeItem.name}
+              image={breadcrumbs.activeItem.image}
+              withMenu={itemsWithMenus}
+            />
+          )}
         </>
       )}
     </ul>

src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/utils.ts

@@ -0,0 +1,11 @@
+import { truncate } from "lodash";
+
+const OMISSION = "...";
+const MOBILE_MAXIMUM_ITEM_LENGTH = 10 + OMISSION.length;
+
+export const truncateBreadcrumbName = (itemName: string) => {
+  return truncate(itemName, {
+    length: MOBILE_MAXIMUM_ITEM_LENGTH,
+    omission: OMISSION,
+  });
+};