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/Breadcrumbs.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { useSelector } from "react-redux";
 import { InboxItemType } from "@/shared/constants";
+import { useIsTabletView } from "@/shared/hooks/viewport";
 import { selectMultipleSpacesLayoutBreadcrumbs } from "@/store/states";
 import { ChatChannelBreadcrumbs, FeedItemBreadcrumbs } from "./components";
 
@@ -11,15 +12,18 @@ interface BreadcrumbsProps {
 const Breadcrumbs: FC<BreadcrumbsProps> = (props) => {
   const { itemsWithMenus = true } = props;
   const breadcrumbs = useSelector(selectMultipleSpacesLayoutBreadcrumbs);
+  const isMobileView = useIsTabletView();
 
   if (breadcrumbs?.type === InboxItemType.ChatChannel) {
     return <ChatChannelBreadcrumbs breadcrumbs={breadcrumbs} />;
   }
   if (breadcrumbs?.type === InboxItemType.FeedItemFollow) {
+    const truncate = isMobileView && breadcrumbs.items.length >= 3;
     return (
       <FeedItemBreadcrumbs
         breadcrumbs={breadcrumbs}
         itemsWithMenus={itemsWithMenus}
+        truncate={truncate}
       />
     );
   }

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

@@ -3,6 +3,7 @@ import { ButtonIcon, UserAvatar } from "@/shared/components";
 import { RightArrowThinIcon } from "@/shared/icons";
 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";
 
@@ -13,6 +14,7 @@ export interface ActiveBreadcrumbsItemProps {
   commonIdToAddProject?: string | null;
   withMenu?: boolean;
   isLoading?: boolean;
+  truncate?: boolean;
 }
 
 const ActiveBreadcrumbsItem: FC<ActiveBreadcrumbsItemProps> = (props) => {
@@ -23,6 +25,7 @@ const ActiveBreadcrumbsItem: FC<ActiveBreadcrumbsItemProps> = (props) => {
     commonIdToAddProject,
     withMenu = true,
     isLoading = false,
+    truncate = false,
   } = props;
   const itemsButtonRef = useRef<HTMLButtonElement>(null);
   const contextMenuRef = useRef<ContextMenuRef>(null);
@@ -44,7 +47,9 @@ const ActiveBreadcrumbsItem: FC<ActiveBreadcrumbsItemProps> = (props) => {
           userName={name}
         />
       )}
-      <span className={styles.name}>{name}</span>
+      <span className={styles.name}>
+        {truncate ? 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";
 
 .button {
   --breadcrumbs-color: #{$c-gray-40};
@@ -27,3 +28,13 @@
     --breadcrumbs-bg-color: #{$c-gray-20};
   }
 }
+
+@include tablet {
+  .li {
+    &:first-child {
+      .button {
+        padding-left: 0;
+      }
+    }
+  }
+}

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

@@ -3,6 +3,7 @@ import { useHistory } from "react-router";
 import { useRoutesContext } from "@/shared/contexts";
 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";
 
@@ -13,6 +14,7 @@ export interface BreadcrumbsItemProps {
   onCommonCreate?: () => void;
   withMenu?: boolean;
   isLoading?: boolean;
+  truncate?: boolean;
   onClick?: () => void;
 }
 
@@ -24,6 +26,7 @@ const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
     onCommonCreate,
     withMenu = true,
     isLoading = false,
+    truncate = false,
     onClick,
   } = props;
   const history = useHistory();
@@ -44,9 +47,9 @@ const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
   };
 
   return (
-    <li ref={containerRef}>
+    <li ref={containerRef} className={styles.li}>
       <button className={styles.button} onClick={handleButtonClick}>
-        {activeItem.name}
+        {truncate ? truncateBreadcrumbName(activeItem.name) : activeItem.name}
       </button>
       {withMenu && (
         <BreadcrumbsMenu

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

@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+import { useIsTabletView } from "@/shared/hooks/viewport";
 import { MultipleSpacesLayoutChatChannelBreadcrumbs } from "@/store/states";
 import { ActiveBreadcrumbsItem } from "../ActiveBreadcrumbsItem";
 import feedItemBreadcrumbsStyles from "../FeedItemBreadcrumbs/FeedItemBreadcrumbs.module.scss";
@@ -9,12 +10,14 @@ interface ChatChannelBreadcrumbsProps {
 
 const ChatChannelBreadcrumbs: FC<ChatChannelBreadcrumbsProps> = (props) => {
   const { breadcrumbs } = props;
+  const isMobileView = useIsTabletView();
 
   return (
     <ul className={feedItemBreadcrumbsStyles.container}>
       <ActiveBreadcrumbsItem
         name={breadcrumbs.activeItem.name}
         image={breadcrumbs.activeItem.image}
+        truncate={isMobileView}
       />
     </ul>
   );

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

@@ -1,4 +1,5 @@
 @import "../../../../../../../../../constants";
+@import "../../../../../../../../../styles/sizes";
 
 .container {
   margin: 0;
@@ -10,3 +11,9 @@
   overflow-x: auto;
   overflow-y: hidden;
 }
+
+@include tablet {
+  .container {
+    overflow: hidden;
+  }
+}

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

@@ -2,6 +2,7 @@ import React, { FC, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { CommonEvent, CommonEventEmitter } from "@/events";
 import { CommonService } from "@/services";
+import { useIsTabletView } from "@/shared/hooks/viewport";
 import {
   commonLayoutActions,
   MultipleSpacesLayoutFeedItemBreadcrumbs,
@@ -16,13 +17,18 @@ import styles from "./FeedItemBreadcrumbs.module.scss";
 interface FeedItemBreadcrumbsProps {
   breadcrumbs: MultipleSpacesLayoutFeedItemBreadcrumbs;
   itemsWithMenus: boolean;
+  truncate: boolean;
 }
 
 const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
-  const { breadcrumbs, itemsWithMenus } = props;
+  const { breadcrumbs, itemsWithMenus, truncate } = props;
   const dispatch = useDispatch();
   const currentLayoutCommonId = useSelector(selectCommonLayoutCommonId);
   const goToCreateCommon = useGoToCreateCommon();
+  const isMobileView = useIsTabletView();
+  const breadcrumbsItems = truncate
+    ? [breadcrumbs.items[0], breadcrumbs.items[breadcrumbs.items.length - 1]]
+    : breadcrumbs.items;
 
   const handleItemClick = (item: ProjectsStateItem) => {
     if (
@@ -60,13 +66,20 @@ const FeedItemBreadcrumbs: FC<FeedItemBreadcrumbsProps> = (props) => {
   return (
     <ul className={styles.container}>
       {!breadcrumbs.areItemsLoading &&
-        breadcrumbs.items.map((item, index) => (
+        breadcrumbsItems.map((item, index) => (
           <React.Fragment key={item.commonId}>
             {index > 0 && <Separator />}
+            {truncate && index === 1 && (
+              <>
+                ...
+                <Separator />
+              </>
+            )}
             <FeedBreadcrumbsItem
               activeItem={item}
               onCommonCreate={index === 0 ? goToCreateCommon : undefined}
               withMenu={itemsWithMenus}
+              truncate={isMobileView}
               onClick={() => handleItemClick(item)}
             />
           </React.Fragment>
@@ -76,12 +89,15 @@ 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}
+              truncate={isMobileView}
+            />
+          )}
         </>
       )}
     </ul>

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

@@ -10,7 +10,10 @@ import {
 } from "../../../ActiveBreadcrumbsItem";
 
 interface ActiveFeedBreadcrumbsItemProps
-  extends Pick<ActiveBreadcrumbsItemProps, "name" | "image" | "withMenu"> {
+  extends Pick<
+    ActiveBreadcrumbsItemProps,
+    "name" | "image" | "withMenu" | "truncate"
+  > {
   activeItemId: string;
 }
 

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

@@ -12,7 +12,7 @@ import {
 
 type FeedBreadcrumbsItemProps = Pick<
   BreadcrumbsItemProps,
-  "activeItem" | "onCommonCreate" | "withMenu" | "onClick"
+  "activeItem" | "onCommonCreate" | "withMenu" | "onClick" | "truncate"
 >;
 
 const getItemsByParentId = (

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,
+  });
+};