add follow\unfollow space in v04 in mobile #2195

src/pages/commonFeed/CommonFeedPage_v04.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from "react";
 import { RoutesV04Provider } from "@/shared/contexts";
 import { CommonSidenavLayoutPageContent } from "@/shared/layouts";
-import { checkIsProject } from "@/shared/utils";
 import BaseCommonFeedPage from "./BaseCommonFeedPage";
 import { RenderCommonFeedContentWrapper } from "./CommonFeed";
 import HeaderContent_v04 from "./components/HeaderContent_v04/HeaderContent_v04";
@@ -19,13 +18,9 @@ const renderContentWrapper: RenderCommonFeedContentWrapper = ({
     headerClassName={styles.layoutHeader}
     headerContent={
       <HeaderContent_v04
-        commonId={commonData.common.id}
-        commonName={commonData.common.name}
-        commonImage={commonData.common.image}
-        commonMembersAmount={commonData.common.memberCount}
+        common={commonData.common}
         commonMember={commonMember}
         governance={commonData.governance}
-        isProject={checkIsProject(commonData.common)}
       />
     }
     isGlobalLoading={!isGlobalDataFetched}

src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.module.scss

@@ -12,6 +12,13 @@
   }
 }
 
+.actionsContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+}
+
 .openSidenavButton {
   display: none;
 
@@ -78,6 +85,12 @@
   overflow: hidden;
 }
 
+.commonMainInfoWrapper {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+
 .commonName {
   margin: 0;
   font-family: PoppinsSans, sans-serif;

src/pages/commonFeed/components/HeaderContent_v04/HeaderContent_v04.tsx

@@ -3,37 +3,36 @@ import { NavLink } from "react-router-dom";
 import classNames from "classnames";
 import { NewStreamButton } from "@/pages/common/components/CommonTabPanels/components/FeedTab/components";
 import { useRoutesContext } from "@/shared/contexts";
+import { useCommonFollow } from "@/shared/hooks/useCases";
 import { useIsTabletView } from "@/shared/hooks/viewport";
-import { RightArrowThinIcon } from "@/shared/icons";
-import { CirclesPermissions, CommonMember, Governance } from "@/shared/models";
+import { RightArrowThinIcon, StarIcon } from "@/shared/icons";
+import {
+  CirclesPermissions,
+  Common,
+  CommonMember,
+  Governance,
+} from "@/shared/models";
 import { CommonAvatar, TopNavigationOpenSidenavButton } from "@/shared/ui-kit";
-import { getPluralEnding } from "@/shared/utils";
+import { checkIsProject, getPluralEnding } from "@/shared/utils";
+import { ActionsButton } from "../HeaderContent/components";
 import styles from "./HeaderContent_v04.module.scss";
 
 interface HeaderContentProps {
   className?: string;
-  commonId: string;
-  commonName: string;
-  commonImage: string;
-  commonMembersAmount: number;
-  isProject?: boolean;
+  common: Common;
   commonMember: (CommonMember & CirclesPermissions) | null;
   governance: Governance;
 }
 
 const HeaderContent_v04: FC<HeaderContentProps> = (props) => {
-  const {
-    className,
-    commonId,
-    commonName,
-    commonImage,
-    commonMembersAmount,
-    isProject = false,
-    commonMember,
-    governance,
-  } = props;
+  const { className, common, commonMember, governance } = props;
   const { getCommonPageAboutTabPath } = useRoutesContext();
   const isMobileVersion = useIsTabletView();
+  const isProject = checkIsProject(common);
+  const commonFollow = useCommonFollow(common.id, commonMember);
+  const showFollowIcon = commonFollow.isFollowInProgress
+    ? !commonMember?.isFollowing
+    : commonMember?.isFollowing;
 
   return (
     <div className={classNames(styles.container, className)}>
@@ -44,31 +43,41 @@ const HeaderContent_v04: FC<HeaderContentProps> = (props) => {
         />
         <NavLink
           className={styles.commonLink}
-          to={getCommonPageAboutTabPath(commonId)}
+          to={getCommonPageAboutTabPath(common.id)}
         >
           <CommonAvatar
-            name={commonName}
-            src={commonImage}
+            name={common.name}
+            src={common.image}
             className={classNames(styles.image, {
               [styles.imageNonRounded]: !isProject,
               [styles.imageRounded]: isProject,
             })}
           />
 
           <div className={styles.commonInfoWrapper}>
-            <h1 className={styles.commonName}>{commonName}</h1>
+            <div className={styles.commonMainInfoWrapper}>
+              <h1 className={styles.commonName}>{common.name}</h1>
+              {showFollowIcon && <StarIcon stroke="currentColor" />}
+            </div>
             <p className={styles.commonMembersAmount}>
-              {commonMembersAmount} member{getPluralEnding(commonMembersAmount)}
+              {common.memberCount} member{getPluralEnding(common.memberCount)}
             </p>
           </div>
         </NavLink>
       </div>
-      <NewStreamButton
-        className={styles.newStreamButton}
-        commonMember={commonMember}
-        governance={governance}
-        isMobileVersion={isMobileVersion}
-      />
+      <div className={styles.actionsContainer}>
+        <NewStreamButton
+          className={styles.newStreamButton}
+          commonMember={commonMember}
+          governance={governance}
+          isMobileVersion={isMobileVersion}
+        />
+        <ActionsButton
+          common={common}
+          commonMember={commonMember}
+          commonFollow={commonFollow}
+        />
+      </div>
     </div>
   );
 };

src/shared/utils/generateStaticShareLink.ts

@@ -1,5 +1,6 @@
-import { Environment, REACT_APP_ENV } from "../constants";
+import { Environment, REACT_APP_ENV, ROUTE_PATHS } from "../constants";
 import { Common, Discussion, DiscussionMessage, Proposal } from "../models";
+import { matchRoute } from "./matchRoute";
 
 const staticLinkPrefix = () => {
   if (window.location.hostname === "localhost") {
@@ -15,6 +16,24 @@ const staticLinkPrefix = () => {
   }
 };
 
+const getStaticLinkBasePath = (): string => {
+  const pathname: string = window.location.pathname;
+
+  if (matchRoute(pathname, ROUTE_PATHS.COMMON)) {
+    return "commons";
+  }
+
+  if (matchRoute(pathname, ROUTE_PATHS.V04_COMMON)) {
+    return "commons-v04";
+  }
+
+  if (matchRoute(pathname, ROUTE_PATHS.V03_COMMON)) {
+    return "commons-v03";
+  }
+
+  return "commons";
+};
+
 export const enum StaticLinkType {
   DiscussionMessage,
   ProposalComment,
@@ -28,22 +47,24 @@ export const generateStaticShareLink = (
   elem: Common | Proposal | Discussion | DiscussionMessage,
   feedItemId?: string,
 ): string => {
+  const basePath: string = getStaticLinkBasePath();
+
   if (!feedItemId && linkType === StaticLinkType.Common) {
     elem = elem as Common;
-    return `${staticLinkPrefix()}/commons/${elem.id}`;
+    return `${staticLinkPrefix()}/${basePath}/${elem.id}`;
   }
 
   switch (linkType) {
     case StaticLinkType.Proposal:
     case StaticLinkType.Discussion:
       elem = elem as Discussion;
-      return `${staticLinkPrefix()}/commons/${
+      return `${staticLinkPrefix()}/${basePath}/${
         elem.commonId
       }?item=${feedItemId}`;
     case StaticLinkType.DiscussionMessage:
     case StaticLinkType.ProposalComment:
       elem = elem as DiscussionMessage;
-      return `${staticLinkPrefix()}/commons/${
+      return `${staticLinkPrefix()}/${basePath}/${
         elem.commonId
       }?item=${feedItemId}&message=${elem.id}`;
     default: