feat: Add action‑item support to mobile “More” page and added navigation to refer page (calcom#26431)

* Add action‑item support to mobile “More” page and hide arrow on copy‑link button

* updated code

* fix code

* updated code

* remove unused import and formatting

---------

Co-authored-by: Dhairyashil <dhairyashil10101010@gmail.com>

Author: abhayymishraa

apps/web/modules/shell/navigation/Navigation.tsx

@@ -6,6 +6,7 @@ import {
   useOrgBranding,
   type OrganizationBranding,
 } from "@calcom/features/ee/organizations/context/provider";
+import { useMobileMoreItems } from "./useMobileMoreItems";
 import { useIsStandalone } from "@calcom/lib/hooks/useIsStandalone";
 import classNames from "@calcom/ui/classNames";
 import { useHasPaidPlan } from "@calcom/web/modules/billing/hooks/useHasPaidPlan";
@@ -14,7 +15,11 @@ import UnconfirmedBookingBadge from "../../bookings/components/UnconfirmedBookin
 import { KBarTrigger } from "../Kbar";
 import { TeamInviteBadge } from "../TeamInviteBadge";
 import type { NavigationItemType } from "./NavigationItem";
-import { NavigationItem, MobileNavigationItem, MobileNavigationMoreItem } from "./NavigationItem";
+import {
+  NavigationItem,
+  MobileNavigationItem,
+  MobileNavigationMoreItem,
+} from "./NavigationItem";
 
 export const MORE_SEPARATOR_NAME = "more";
 
@@ -63,7 +68,10 @@ const getNavigationItems = (
     moreOnMobile: true,
     isCurrent: ({ pathname: path, item }) => {
       // During Server rendering path is /v2/apps but on client it becomes /apps(weird..)
-      return (path?.startsWith(item.href) ?? false) && !(path?.includes("routing-forms/") ?? false);
+      return (
+        (path?.startsWith(item.href) ?? false) &&
+        !(path?.includes("routing-forms/") ?? false)
+      );
     },
     child: [
       {
@@ -109,7 +117,8 @@ const getNavigationItems = (
     name: "insights",
     href: "/insights",
     icon: "chart-bar",
-    isCurrent: ({ pathname: path, item }) => path?.startsWith(item.href) ?? false,
+    isCurrent: ({ pathname: path, item }) =>
+      path?.startsWith(item.href) ?? false,
     moreOnMobile: true,
     child: hasAllInsightsAccess
       ? [
@@ -121,18 +130,21 @@ const getNavigationItems = (
           {
             name: "routing",
             href: "/insights/routing",
-            isCurrent: ({ pathname: path }) => path?.startsWith("/insights/routing") ?? false,
+            isCurrent: ({ pathname: path }) =>
+              path?.startsWith("/insights/routing") ?? false,
           },
           {
             name: "router_position",
             href: "/insights/router-position",
-            isCurrent: ({ pathname: path }) => path?.startsWith("/insights/router-position") ?? false,
+            isCurrent: ({ pathname: path }) =>
+              path?.startsWith("/insights/router-position") ?? false,
           },
           {
             name: "call_history",
             href: "/insights/call-history",
             // icon: "phone",
-            isCurrent: ({ pathname: path }) => path?.startsWith("/insights/call-history") ?? false,
+            isCurrent: ({ pathname: path }) =>
+              path?.startsWith("/insights/call-history") ?? false,
           },
         ]
       : [
@@ -205,19 +217,34 @@ const useNavigationItems = (isPlatformNavigation = false) => {
       ? getNavigationItems(orgBranding, hasAllInsightsAccess)
       : platformNavigationItems;
 
-    const desktopNavigationItems = items.filter((item) => item.name !== MORE_SEPARATOR_NAME);
+    const desktopNavigationItems = items.filter(
+      (item) => item.name !== MORE_SEPARATOR_NAME
+    );
     const mobileNavigationBottomItems = items.filter(
-      (item) => (!item.moreOnMobile && !item.onlyDesktop) || item.name === MORE_SEPARATOR_NAME
+      (item) =>
+        (!item.moreOnMobile && !item.onlyDesktop) ||
+        item.name === MORE_SEPARATOR_NAME
     );
     const mobileNavigationMoreItems = items.filter(
-      (item) => item.moreOnMobile && !item.onlyDesktop && item.name !== MORE_SEPARATOR_NAME
+      (item) =>
+        item.moreOnMobile &&
+        !item.onlyDesktop &&
+        item.name !== MORE_SEPARATOR_NAME
     );
 
-    return { desktopNavigationItems, mobileNavigationBottomItems, mobileNavigationMoreItems };
+    return {
+      desktopNavigationItems,
+      mobileNavigationBottomItems,
+      mobileNavigationMoreItems,
+    };
   }, [hasPaidPlan, isPending, isPlatformNavigation, orgBranding]);
 };
 
-export const Navigation = ({ isPlatformNavigation = false }: { isPlatformNavigation?: boolean }) => {
+export const Navigation = ({
+  isPlatformNavigation = false,
+}: {
+  isPlatformNavigation?: boolean;
+}) => {
   const { desktopNavigationItems } = useNavigationItems(isPlatformNavigation);
 
   return (
@@ -243,17 +270,23 @@ export function MobileNavigationContainer({
   return <MobileNavigation isPlatformNavigation={isPlatformNavigation} />;
 }
 
-const MobileNavigation = ({ isPlatformNavigation = false }: { isPlatformNavigation?: boolean }) => {
+const MobileNavigation = ({
+  isPlatformNavigation = false,
+}: {
+  isPlatformNavigation?: boolean;
+}) => {
   const isEmbed = useIsEmbed();
-  const { mobileNavigationBottomItems } = useNavigationItems(isPlatformNavigation);
+  const { mobileNavigationBottomItems } =
+    useNavigationItems(isPlatformNavigation);
 
   return (
     <>
       <nav
         className={classNames(
           "pwa:pb-[max(0.25rem,env(safe-area-inset-bottom))] pwa:-mx-2 bg-cal-muted/40 border-subtle fixed bottom-0 left-0 z-30 flex w-full border-t px-1 shadow backdrop-blur-md md:hidden",
           isEmbed && "hidden"
-        )}>
+        )}
+      >
         {mobileNavigationBottomItems.map((item) => (
           <MobileNavigationItem key={item.name} item={item} />
         ))}
@@ -266,10 +299,13 @@ const MobileNavigation = ({ isPlatformNavigation = false }: { isPlatformNavigati
 
 export const MobileNavigationMoreItems = () => {
   const { mobileNavigationMoreItems } = useNavigationItems();
+  const bottomItems = useMobileMoreItems();
+
+  const allItems = [...mobileNavigationMoreItems, ...bottomItems];
 
   return (
     <ul className="border-subtle mt-2 rounded-md border">
-      {mobileNavigationMoreItems.map((item) => (
+      {allItems.map((item) => (
         <MobileNavigationMoreItem key={item.name} item={item} />
       ))}
     </ul>