@bigbinary/neeto-molecules 4.1.66 → 4.1.68

package/dist/v2/FloatingActionMenu.js

@@ -4,14 +4,15 @@ import { memo, useState, useRef, useEffect, useMemo, forwardRef, useCallback } f
 import { globalProps as globalProps$1 } from '@bigbinary/neeto-commons-frontend/initializers';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Spinner, Input, Dialog, Badge, Avatar } from '@bigbinary/neeto-atoms';
-import { Popover, PopoverAnchor, PopoverContent, Separator } from '@bigbinary/neeto-atoms/primitives';
+import { Typography, Spinner, Input, Dialog, Badge, Avatar } from '@bigbinary/neeto-atoms';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent, Popover, PopoverAnchor, PopoverContent, Separator } from '@bigbinary/neeto-atoms/primitives';
 import { isNotEmpty, isNotPresent, isPresent, truncate, humanize } from '@bigbinary/neeto-cist';
 import useHotkeys from '@bigbinary/neeto-hotkeys';
 import { Profile } from '@bigbinary/neeto-team-members-frontend/v2';
 import { isEmpty, toLower, mergeDeepLeft, not } from 'ramda';
 import KeyboardShortcuts from './KeyboardShortcuts.js';
 import SubscriptionUpgradeRequestModal from '../SubscriptionUpgradeRequestModal.js';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import Neeto from '@bigbinary/neeto-icons/typeface-logos/Neeto';
@@ -20,10 +21,10 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { S as Search } from '../search-DCgpNjip.js';
+import useBreakpoints from '@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints';
 import { C as CircleQuestionMark } from '../circle-question-mark-Dib48f5Z.js';
 import { C as ChevronRight } from '../chevron-right-DcaO-Hlu.js';
 import { c as createLucideIcon } from '../createLucideIcon-mNMhCCpf.js';
-import useBreakpoints from '@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints';
 import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
 import { t } from 'i18next';
 import { U as User } from '../user-A843PT-q.js';
@@ -37,7 +38,6 @@ import 'zustand/shallow';
 import '@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions';
 import 'zustand';
 import '@bigbinary/neetoui/managers';
-import '@bigbinary/neeto-commons-frontend/react-utils';
 import '../ua-parser-OzUiuIwt.js';
 import '../x-B1Er0oV4.js';
 import '@bigbinary/neetoui/Button';
@@ -252,21 +252,22 @@ var ProductLink = function ProductLink(_ref) {
     href: url,
     rel: "noreferrer",
     target: "_blank",
-    className: classnames("bg-background focus-visible:bg-accent flex w-full max-w-full cursor-pointer flex-col gap-4 rounded-lg border p-2.5 no-underline transition-all outline-none", {
+    className: classnames("bg-background focus-visible:bg-accent flex w-full max-w-full cursor-pointer flex-col gap-4 rounded-lg border p-2.5 no-underline transition-all outline-none max-md:gap-2 max-md:p-2", {
       "border-primary bg-primary/5": (_globalProps = globalProps) === null || _globalProps === void 0 || (_globalProps = _globalProps.appName) === null || _globalProps === void 0 ? void 0 : _globalProps.includes(name),
       "nv-product-link-highlighted bg-accent": isHighlighted,
       "border-border hover:border-primary": !((_globalProps2 = globalProps) !== null && _globalProps2 !== void 0 && (_globalProps2 = _globalProps2.appName) !== null && _globalProps2 !== void 0 && _globalProps2.includes(name))
     })
   }, props), {}, {
     children: [/*#__PURE__*/jsx("div", {
-      className: "shrink-0 grow [&>svg]:h-9 [&>svg]:w-auto",
+      className: "shrink-0 grow [&>svg]:h-9 [&>svg]:w-auto max-md:[&>svg]:h-6",
       children: AppIcon ? /*#__PURE__*/jsx(AppIcon, {}) : /*#__PURE__*/jsx(Neeto, {
-        className: "h-6 w-auto"
+        className: "h-6 w-auto max-md:h-5"
       })
     }), /*#__PURE__*/jsx("div", {
       className: "shrink-0",
-      children: /*#__PURE__*/jsx("span", {
-        className: "text-muted-foreground block text-xs",
+      children: /*#__PURE__*/jsx(Typography, {
+        color: "muted",
+        variant: "caption",
         children: description
       })
     })]
@@ -284,7 +285,7 @@ var Content = function Content(_ref) {
     t = _useTranslation.t;
   if (isLoading) {
     return /*#__PURE__*/jsx("div", {
-      className: "flex items-center justify-center py-8",
+      className: "flex h-full items-center justify-center",
       children: /*#__PURE__*/jsx(Spinner, {
         "data-testid": "neeto-ui-spinner"
       })
@@ -298,10 +299,14 @@ var Content = function Content(_ref) {
         isHighlighted: index === highlightedIndex
       }), app.name);
     })
-  }) : /*#__PURE__*/jsx("p", {
-    className: "text-center text-sm",
+  }) : /*#__PURE__*/jsx("div", {
+    className: "flex h-full items-center justify-center",
     "data-testid": "no-apps-found-title",
-    children: t("neetoMolecules.productSwitcher.noApps")
+    children: /*#__PURE__*/jsx(Typography, {
+      color: "muted",
+      variant: "body2",
+      children: t("neetoMolecules.productSwitcher.noApps")
+    })
   });
 };
 
@@ -442,12 +447,12 @@ var Menu = function Menu(_ref) {
     handleKeyDown = _useProductSwitcherNa.handleKeyDown,
     scrollContainerRef = _useProductSwitcherNa.scrollContainerRef;
   return /*#__PURE__*/jsxs("div", {
-    className: "bg-background flex w-full max-w-full flex-col items-start overflow-y-auto p-6 transition-all max-md:p-4",
+    className: "flex h-full w-full max-w-full flex-col items-start p-6 transition-all max-md:p-1",
     "data-testid": "switcher-wrapper",
     children: [/*#__PURE__*/jsxs("div", {
       "data-testid": "product-switcher-body-wrapper",
-      className: classnames("mb-8 flex w-full items-center justify-between gap-8 pt-1 max-md:flex-col max-md:items-start max-md:gap-6", {
-        "max-md:mb-6": isMobile
+      className: classnames("mb-6 flex w-full shrink-0 items-center justify-between gap-8 pt-1 max-md:flex-col max-md:items-start max-md:gap-3", {
+        "max-md:mb-4": isMobile
       }),
       children: [!isMobile && /*#__PURE__*/jsx("h1", {
         className: "text-2xl font-bold max-sm:text-xl",
@@ -473,7 +478,7 @@ var Menu = function Menu(_ref) {
         })
       })]
     }), /*#__PURE__*/jsx("div", {
-      className: "mb-6 flex w-full flex-col gap-3 text-sm",
+      className: "flex min-h-0 w-full flex-1 flex-col gap-3 overflow-y-auto text-sm",
       ref: scrollContainerRef,
       children: /*#__PURE__*/jsx(Content, {
         filteredApps: filteredApps,
@@ -484,24 +489,28 @@ var Menu = function Menu(_ref) {
   }, "switcher-wrapper");
 };
 
-var Modal = function Modal(_ref) {
-  var isOpen = _ref.isOpen,
+var Modal = withT(function (_ref) {
+  var t = _ref.t,
+    isOpen = _ref.isOpen,
     onClose = _ref.onClose;
   return /*#__PURE__*/jsxs(Dialog, {
     isOpen: isOpen,
     onClose: onClose,
     "aria-describedby": undefined,
-    className: "sm:max-w-4xl",
-    closeButton: false,
+    className: "grid-rows-[1fr] sm:max-w-4xl",
+    size: "fullScreen",
     children: [/*#__PURE__*/jsx(Dialog.Title, {
       className: "sr-only",
-      children: "Product Switcher"
-    }), /*#__PURE__*/jsx("div", {
-      "data-testid": "product-switcher-modal",
-      children: /*#__PURE__*/jsx(Menu, {})
+      children: t("neetoMolecules.productSwitcher.title")
+    }), /*#__PURE__*/jsx(Dialog.Body, {
+      className: "min-h-0 overflow-y-auto",
+      children: /*#__PURE__*/jsx("div", {
+        "data-testid": "product-switcher-modal",
+        children: /*#__PURE__*/jsx(Menu, {})
+      })
     })]
   });
-};
+});
 
 var MENU_ITEM_CLASS$1 = "flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-sm font-medium hover:bg-accent";
 
@@ -512,7 +521,7 @@ var MenuButton$4 = /*#__PURE__*/forwardRef(function (props, ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/jsxs("button", _objectSpread$8(_objectSpread$8({
     ref: ref,
-    className: "hover:bg-accent flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-sm font-medium",
+    className: "group hover:bg-accent flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-sm font-medium",
     "data-testid": "help-menu-button",
     type: "button"
   }, props), {}, {
@@ -522,22 +531,68 @@ var MenuButton$4 = /*#__PURE__*/forwardRef(function (props, ref) {
       className: "flex-grow text-start",
       children: t("neetoMolecules.sidebar.help")
     }), /*#__PURE__*/jsx(ChevronRight, {
-      className: "rtl:scale-x-[-1]",
+      className: "transition-transform group-data-[state=open]:rotate-90 rtl:scale-x-[-1]",
       size: 18
     })]
   }));
 });
 MenuButton$4.displayName = "HelpMenuButton";
 
-var HelpMenu = function HelpMenu() {
+var HelpItems = withT(function (_ref) {
   var _globalProps;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+  var t = _ref.t;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("a", {
+      className: MENU_ITEM_CLASS$1,
+      "data-testid": "help-link-help-articles-button",
+      href: "https://help.".concat(toLower(((_globalProps = globalProps) === null || _globalProps === void 0 ? void 0 : _globalProps.appName) || ""), ".com/"),
+      rel: "noreferrer",
+      target: "_blank",
+      children: [/*#__PURE__*/jsx(BookOpen, {
+        size: 18
+      }), t("neetoMolecules.sidebar.helpLinks.helpArticles")]
+    }), /*#__PURE__*/jsxs("button", {
+      className: MENU_ITEM_CLASS$1,
+      "data-testid": "help-link-live-chat-button",
+      type: "button",
+      onClick: function onClick() {
+        var _window$NeetoChat, _window$NeetoChat2;
+        (_window$NeetoChat = window.NeetoChat) === null || _window$NeetoChat === void 0 || (_window$NeetoChat = _window$NeetoChat.contextualHelp) === null || _window$NeetoChat === void 0 || _window$NeetoChat.maximizeWidget();
+        (_window$NeetoChat2 = window.NeetoChat) === null || _window$NeetoChat2 === void 0 || (_window$NeetoChat2 = _window$NeetoChat2.contextualHelp) === null || _window$NeetoChat2 === void 0 || _window$NeetoChat2.openWidget();
+      },
+      children: [/*#__PURE__*/jsx(MessageCircleQuestionMark, {
+        size: 18
+      }), t("neetoMolecules.sidebar.helpLinks.liveChat")]
+    }), /*#__PURE__*/jsxs("a", {
+      className: MENU_ITEM_CLASS$1,
+      "data-testid": "help-link-community-button",
+      href: "https://www.launchpass.com/neetohq",
+      rel: "noreferrer",
+      target: "_blank",
+      children: [/*#__PURE__*/jsx(Users, {
+        size: 18
+      }), t("neetoMolecules.sidebar.helpLinks.askTheCommunity")]
+    }), /*#__PURE__*/jsxs("a", {
+      className: MENU_ITEM_CLASS$1,
+      "data-testid": "help-link-status-button",
+      href: "https://neetostatus.com/",
+      rel: "noreferrer",
+      target: "_blank",
+      children: [/*#__PURE__*/jsx(Activity, {
+        size: 18
+      }), t("neetoMolecules.sidebar.helpLinks.systemStatus")]
+    })]
+  });
+});
+var HelpMenu = function HelpMenu() {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
   var timeoutRef = useRef(null);
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var isMobile = isSize("mobile");
   var handleMouseEnter = useCallback(function () {
     clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -547,6 +602,19 @@ var HelpMenu = function HelpMenu() {
       return setOpen(false);
     }, 150);
   }, []);
+  if (isMobile) {
+    return /*#__PURE__*/jsxs(Collapsible, {
+      open: open,
+      onOpenChange: setOpen,
+      children: [/*#__PURE__*/jsx(CollapsibleTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsx(MenuButton$4, {})
+      }), /*#__PURE__*/jsx(CollapsibleContent, {
+        className: "flex flex-col gap-0.5 ps-6 pt-1",
+        children: /*#__PURE__*/jsx(HelpItems, {})
+      })]
+    });
+  }
   return /*#__PURE__*/jsxs(Popover, {
     open: open,
     onOpenChange: setOpen,
@@ -561,7 +629,7 @@ var HelpMenu = function HelpMenu() {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave
       })
-    }), /*#__PURE__*/jsxs(PopoverContent, {
+    }), /*#__PURE__*/jsx(PopoverContent, {
       align: "center",
       className: "z-[99999] w-56 gap-0.5 p-1",
       side: "right",
@@ -571,46 +639,7 @@ var HelpMenu = function HelpMenu() {
       onOpenAutoFocus: function onOpenAutoFocus(e) {
         return e.preventDefault();
       },
-      children: [/*#__PURE__*/jsxs("a", {
-        className: MENU_ITEM_CLASS$1,
-        "data-testid": "help-link-help-articles-button",
-        href: "https://help.".concat(toLower(((_globalProps = globalProps) === null || _globalProps === void 0 ? void 0 : _globalProps.appName) || ""), ".com/"),
-        rel: "noreferrer",
-        target: "_blank",
-        children: [/*#__PURE__*/jsx(BookOpen, {
-          size: 18
-        }), t("neetoMolecules.sidebar.helpLinks.helpArticles")]
-      }), /*#__PURE__*/jsxs("button", {
-        className: MENU_ITEM_CLASS$1,
-        "data-testid": "help-link-live-chat-button",
-        type: "button",
-        onClick: function onClick() {
-          var _window$NeetoChat, _window$NeetoChat2;
-          (_window$NeetoChat = window.NeetoChat) === null || _window$NeetoChat === void 0 || (_window$NeetoChat = _window$NeetoChat.contextualHelp) === null || _window$NeetoChat === void 0 || _window$NeetoChat.maximizeWidget();
-          (_window$NeetoChat2 = window.NeetoChat) === null || _window$NeetoChat2 === void 0 || (_window$NeetoChat2 = _window$NeetoChat2.contextualHelp) === null || _window$NeetoChat2 === void 0 || _window$NeetoChat2.openWidget();
-        },
-        children: [/*#__PURE__*/jsx(MessageCircleQuestionMark, {
-          size: 18
-        }), t("neetoMolecules.sidebar.helpLinks.liveChat")]
-      }), /*#__PURE__*/jsxs("a", {
-        className: MENU_ITEM_CLASS$1,
-        "data-testid": "help-link-community-button",
-        href: "https://www.launchpass.com/neetohq",
-        rel: "noreferrer",
-        target: "_blank",
-        children: [/*#__PURE__*/jsx(Users, {
-          size: 18
-        }), t("neetoMolecules.sidebar.helpLinks.askTheCommunity")]
-      }), /*#__PURE__*/jsxs("a", {
-        className: MENU_ITEM_CLASS$1,
-        "data-testid": "help-link-status-button",
-        href: "https://neetostatus.com/",
-        rel: "noreferrer",
-        target: "_blank",
-        children: [/*#__PURE__*/jsx(Activity, {
-          size: 18
-        }), t("neetoMolecules.sidebar.helpLinks.systemStatus")]
-      })]
+      children: /*#__PURE__*/jsx(HelpItems, {})
     })]
   });
 };
@@ -641,7 +670,7 @@ var LinkSection = function LinkSection(_ref) {
         }), /*#__PURE__*/jsxs("span", {
           className: "flex flex-grow items-center gap-2",
           children: [label, isPresent(changesCount) && /*#__PURE__*/jsx("span", {
-            className: "bg-accent-foreground flex h-[1.125rem] min-w-[1.125rem] shrink-0 items-center justify-center rounded-full px-1 text-[10px] text-white select-none",
+            className: "bg-foreground text-background flex h-[1.125rem] min-w-[1.125rem] shrink-0 items-center justify-center rounded-full px-1 text-[10px] select-none",
             "data-testid": "help-section-menu-changes-count",
             children: changesCount
           })]
@@ -683,7 +712,7 @@ var MenuButton$3 = /*#__PURE__*/forwardRef(function (props, ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/jsxs("button", _objectSpread$6(_objectSpread$6({
     ref: ref,
-    className: "hover:bg-accent flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-sm font-medium",
+    className: "group hover:bg-accent flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-sm font-medium",
     "data-testid": "organization-switcher-button",
     type: "button"
   }, props), {}, {
@@ -691,22 +720,61 @@ var MenuButton$3 = /*#__PURE__*/forwardRef(function (props, ref) {
       className: "flex-grow text-start",
       children: t("neetoMolecules.sidebar.organizationSwitcher.label")
     }), /*#__PURE__*/jsx(ChevronRight, {
-      className: "rtl:scale-x-[-1]",
+      className: "transition-transform group-data-[state=open]:rotate-90 rtl:scale-x-[-1]",
       size: 18
     })]
   }));
 });
 MenuButton$3.displayName = "OrganizationSwitcherMenuButton";
 
+var isCurrentSubdomain = function isCurrentSubdomain(link) {
+  try {
+    var currentSubdomain = window.location.hostname.split(".")[0];
+    var linkSubdomain = new URL(link).hostname.split(".")[0];
+    return currentSubdomain === linkSubdomain;
+  } catch (_unused) {
+    return false;
+  }
+};
+var OrganizationItems = withT(function (_ref) {
+  var t = _ref.t,
+    organizations = _ref.organizations,
+    authAppUrl = _ref.authAppUrl;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [organizations === null || organizations === void 0 ? void 0 : organizations.map(function (organization) {
+      return /*#__PURE__*/jsxs("a", {
+        href: organization.organizationUrl,
+        rel: "noreferrer",
+        target: "_blank",
+        className: classnames("hover:bg-accent flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-sm font-medium", {
+          "text-green-600": isCurrentSubdomain(organization.organizationUrl)
+        }),
+        children: [organization.orgName, isCurrentSubdomain(organization.organizationUrl) && /*#__PURE__*/jsxs(Badge, {
+          variant: "default",
+          children: [/*#__PURE__*/jsx(CircleCheck, {
+            size: 12
+          }), t("neetoMolecules.sidebar.organizationSwitcher.signedin")]
+        })]
+      }, organization.userId);
+    }), /*#__PURE__*/jsx("a", {
+      className: "hover:bg-accent flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-sm font-medium",
+      href: authAppUrl,
+      rel: "noreferrer",
+      target: "_blank",
+      children: t("neetoMolecules.sidebar.organizationSwitcher.addAccount")
+    })]
+  });
+});
 var OrganizationSwitcher = function OrganizationSwitcher() {
   var _globalProps$user;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
   var timeoutRef = useRef(null);
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var isMobile = isSize("mobile");
   var _useFetchLoggedInOrga = useFetchLoggedInOrganizations(globalProps$1 === null || globalProps$1 === void 0 || (_globalProps$user = globalProps$1.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.email),
     _useFetchLoggedInOrga2 = _useFetchLoggedInOrga.data,
     _useFetchLoggedInOrga3 = _useFetchLoggedInOrga2 === void 0 ? {} : _useFetchLoggedInOrga2,
@@ -721,15 +789,22 @@ var OrganizationSwitcher = function OrganizationSwitcher() {
       return setOpen(false);
     }, 150);
   }, []);
-  var isCurrentSubdomain = function isCurrentSubdomain(link) {
-    try {
-      var currentSubdomain = window.location.hostname.split(".")[0];
-      var linkSubdomain = new URL(link).hostname.split(".")[0];
-      return currentSubdomain === linkSubdomain;
-    } catch (_unused) {
-      return false;
-    }
-  };
+  if (isMobile) {
+    return /*#__PURE__*/jsxs(Collapsible, {
+      open: open,
+      onOpenChange: setOpen,
+      children: [/*#__PURE__*/jsx(CollapsibleTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsx(MenuButton$3, {})
+      }), /*#__PURE__*/jsx(CollapsibleContent, {
+        className: "flex flex-col gap-0.5 ps-6 pt-1",
+        children: /*#__PURE__*/jsx(OrganizationItems, {
+          authAppUrl: authAppUrl,
+          organizations: organizations
+        })
+      })]
+    });
+  }
   return /*#__PURE__*/jsxs(Popover, {
     open: open,
     onOpenChange: setOpen,
@@ -744,7 +819,7 @@ var OrganizationSwitcher = function OrganizationSwitcher() {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave
       })
-    }), /*#__PURE__*/jsxs(PopoverContent, {
+    }), /*#__PURE__*/jsx(PopoverContent, {
       align: "center",
       className: "z-[99999] w-56 gap-0.5 p-1",
       side: "right",
@@ -754,28 +829,10 @@ var OrganizationSwitcher = function OrganizationSwitcher() {
       onOpenAutoFocus: function onOpenAutoFocus(e) {
         return e.preventDefault();
       },
-      children: [organizations === null || organizations === void 0 ? void 0 : organizations.map(function (organization) {
-        return /*#__PURE__*/jsxs("a", {
-          href: organization.organizationUrl,
-          rel: "noreferrer",
-          target: "_blank",
-          className: classnames("hover:bg-accent flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-sm font-medium", {
-            "text-green-600": isCurrentSubdomain(organization.organizationUrl)
-          }),
-          children: [organization.orgName, isCurrentSubdomain(organization.organizationUrl) && /*#__PURE__*/jsxs(Badge, {
-            variant: "default",
-            children: [/*#__PURE__*/jsx(CircleCheck, {
-              size: 12
-            }), t("neetoMolecules.sidebar.organizationSwitcher.signedin")]
-          })]
-        }, organization.userId);
-      }), /*#__PURE__*/jsx("a", {
-        className: "hover:bg-accent flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-sm font-medium",
-        href: authAppUrl,
-        rel: "noreferrer",
-        target: "_blank",
-        children: t("neetoMolecules.sidebar.organizationSwitcher.addAccount")
-      })]
+      children: /*#__PURE__*/jsx(OrganizationItems, {
+        authAppUrl: authAppUrl,
+        organizations: organizations
+      })
     })]
   });
 };
@@ -834,13 +891,10 @@ var Dropdown = function Dropdown() {
       })
     }), /*#__PURE__*/jsx(PopoverContent, {
       align: "start",
-      className: "z-[99999] w-[calc(100vw-25rem)] max-w-none overflow-y-auto rounded-xl p-0",
+      className: "z-[99999] flex h-[max(36rem,min(80vh,48rem))] max-h-[var(--radix-popover-content-available-height)] w-[calc(100vw-25rem)] max-w-7xl flex-col overflow-hidden rounded-xl p-0",
       collisionPadding: 16,
       side: "right",
       sideOffset: 8,
-      style: {
-        maxHeight: "var(--radix-popover-content-available-height)"
-      },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       onOpenAutoFocus: function onOpenAutoFocus(e) {
@@ -887,10 +941,15 @@ var ProfileHeader = function ProfileHeader(_ref) {
         "data-testid": "floating-action-menu-header-user-name",
         title: name,
         children: truncate(name, 18)
-      }), email && /*#__PURE__*/jsx("span", {
-        className: "text-muted-foreground w-full truncate text-xs leading-tight",
-        "data-testid": "floating-action-menu-header-user-email",
-        children: email
+      }), email && /*#__PURE__*/jsx(Typography, {
+        asChild: true,
+        className: "w-full truncate leading-tight",
+        color: "muted",
+        variant: "caption",
+        children: /*#__PURE__*/jsx("span", {
+          "data-testid": "floating-action-menu-header-user-email",
+          children: email
+        })
       })]
     })]
   });
@@ -904,14 +963,14 @@ var MenuButton$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     otherProps = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/jsxs("button", _objectSpread$4(_objectSpread$4({
     ref: ref,
-    className: "hover:bg-accent flex w-full items-center gap-2 rounded-md px-2.5 py-2 transition-colors",
+    className: "group hover:bg-accent flex w-full items-center gap-2 rounded-md px-2.5 py-2 transition-colors",
     "data-testid": "profile-expand-menu-button",
     type: "button"
   }, otherProps), {}, {
     children: [/*#__PURE__*/jsx(ProfileHeader, {
       profileInfo: profileInfo
     }), /*#__PURE__*/jsx(ChevronRight, {
-      className: "shrink-0 rtl:scale-x-[-1]",
+      className: "shrink-0 transition-transform group-data-[state=open]:rotate-90 rtl:scale-x-[-1]",
       size: 18
     })]
   }));
@@ -947,11 +1006,33 @@ var LEGACY_THEMES = {
 };
 var NEETO_AUTH_BILLING_INFO_URL = "/neeto_sso/api/v1/subscription/billing";
 
-var ProfileExpandMenu = function ProfileExpandMenu(_ref) {
+var ProfileItems = withT(function (_ref) {
   var _window$globalProps;
-  var profileInfo = _ref.profileInfo;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+  var t = _ref.t,
+    onProfileClick = _ref.onProfileClick;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("button", {
+      className: MENU_ITEM_CLASS,
+      "data-testid": "profile-my-profile-button",
+      type: "button",
+      onClick: onProfileClick,
+      children: [/*#__PURE__*/jsx(User, {
+        size: 18
+      }), t("neetoMolecules.sidebar.myProfile")]
+    }), ((_window$globalProps = window.globalProps) === null || _window$globalProps === void 0 || (_window$globalProps = _window$globalProps.user) === null || _window$globalProps === void 0 ? void 0 : _window$globalProps.isOwner) && /*#__PURE__*/jsxs("a", {
+      className: MENU_ITEM_CLASS,
+      "data-testid": "profile-cancel-account-button",
+      href: DELETE_WORKSPACE_URL,
+      rel: "noreferrer",
+      target: "_blank",
+      children: [/*#__PURE__*/jsx(CircleX, {
+        size: 18
+      }), t("neetoMolecules.sidebar.cancelAccount")]
+    })]
+  });
+});
+var ProfileExpandMenu = function ProfileExpandMenu(_ref2) {
+  var profileInfo = _ref2.profileInfo;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -960,6 +1041,9 @@ var ProfileExpandMenu = function ProfileExpandMenu(_ref) {
     _Profile$usePaneState2 = _slicedToArray(_Profile$usePaneState, 2),
     setIsProfilePaneOpen = _Profile$usePaneState2[1];
   var timeoutRef = useRef(null);
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var isMobile = isSize("mobile");
   var handleMouseEnter = useCallback(function () {
     clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -969,6 +1053,26 @@ var ProfileExpandMenu = function ProfileExpandMenu(_ref) {
       return setOpen(false);
     }, 150);
   }, []);
+  var onProfileClick = function onProfileClick() {
+    return setIsProfilePaneOpen(true);
+  };
+  if (isMobile) {
+    return /*#__PURE__*/jsxs(Collapsible, {
+      open: open,
+      onOpenChange: setOpen,
+      children: [/*#__PURE__*/jsx(CollapsibleTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsx(MenuButton$1, {
+          profileInfo: profileInfo
+        })
+      }), /*#__PURE__*/jsx(CollapsibleContent, {
+        className: "flex flex-col gap-0.5 ps-6 pt-1",
+        children: /*#__PURE__*/jsx(ProfileItems, {
+          onProfileClick: onProfileClick
+        })
+      })]
+    });
+  }
   return /*#__PURE__*/jsxs(Popover, {
     open: open,
     onOpenChange: setOpen,
@@ -984,7 +1088,7 @@ var ProfileExpandMenu = function ProfileExpandMenu(_ref) {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave
       })
-    }), /*#__PURE__*/jsxs(PopoverContent, {
+    }), /*#__PURE__*/jsx(PopoverContent, {
       align: "center",
       className: "z-[99999] w-56 gap-0.5 p-1",
       side: "right",
@@ -994,26 +1098,9 @@ var ProfileExpandMenu = function ProfileExpandMenu(_ref) {
       onOpenAutoFocus: function onOpenAutoFocus(e) {
         return e.preventDefault();
       },
-      children: [/*#__PURE__*/jsxs("button", {
-        className: MENU_ITEM_CLASS,
-        "data-testid": "profile-my-profile-button",
-        type: "button",
-        onClick: function onClick() {
-          return setIsProfilePaneOpen(true);
-        },
-        children: [/*#__PURE__*/jsx(User, {
-          size: 18
-        }), t("neetoMolecules.sidebar.myProfile")]
-      }), ((_window$globalProps = window.globalProps) === null || _window$globalProps === void 0 || (_window$globalProps = _window$globalProps.user) === null || _window$globalProps === void 0 ? void 0 : _window$globalProps.isOwner) && /*#__PURE__*/jsxs("a", {
-        className: MENU_ITEM_CLASS,
-        "data-testid": "profile-cancel-account-button",
-        href: DELETE_WORKSPACE_URL,
-        rel: "noreferrer",
-        target: "_blank",
-        children: [/*#__PURE__*/jsx(CircleX, {
-          size: 18
-        }), t("neetoMolecules.sidebar.cancelAccount")]
-      })]
+      children: /*#__PURE__*/jsx(ProfileItems, {
+        onProfileClick: onProfileClick
+      })
     })]
   });
 };
@@ -1094,8 +1181,10 @@ var ThemeSwitcher = function ThemeSwitcher() {
   };
   return /*#__PURE__*/jsxs("div", {
     className: "bg-muted/40 flex items-center justify-between gap-3 rounded-b-xl px-4 py-3",
-    children: [/*#__PURE__*/jsx("span", {
-      className: "text-muted-foreground text-xs font-medium",
+    children: [/*#__PURE__*/jsx(Typography, {
+      color: "muted",
+      variant: "caption",
+      weight: "medium",
       children: t("neetoMolecules.sidebar.themeSwitcher.label")
     }), /*#__PURE__*/jsxs("div", {
       className: "bg-muted flex rounded-lg p-0.5",
@@ -1133,7 +1222,7 @@ var MenuButton = /*#__PURE__*/forwardRef(function (props, ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/jsxs("button", _objectSpread$3(_objectSpread$3({
     ref: ref,
-    className: "hover:bg-accent flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-start",
+    className: "group hover:bg-accent flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-start",
     "data-testid": "workspace-display",
     type: "button"
   }, props), {}, {
@@ -1142,27 +1231,64 @@ var MenuButton = /*#__PURE__*/forwardRef(function (props, ref) {
       children: [/*#__PURE__*/jsx("span", {
         className: "text-sm font-medium",
         children: t("neetoMolecules.sidebar.workspace")
-      }), ((_globalProps$organiza = globalProps$1.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.name) && /*#__PURE__*/jsx("span", {
-        className: "text-muted-foreground text-xs",
-        children: globalProps$1.organization.name
+      }), ((_globalProps$organiza = globalProps$1.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.name) && /*#__PURE__*/jsx(Typography, {
+        asChild: true,
+        color: "muted",
+        variant: "caption",
+        children: /*#__PURE__*/jsx("span", {
+          children: globalProps$1.organization.name
+        })
       })]
     }), /*#__PURE__*/jsx(ChevronRight, {
-      className: "shrink-0 rtl:scale-x-[-1]",
+      className: "shrink-0 transition-transform group-data-[state=open]:rotate-90 rtl:scale-x-[-1]",
       size: 18
     })]
   }));
 });
 MenuButton.displayName = "WorkspaceMenuButton";
 
-var WorkspaceMenu = function WorkspaceMenu() {
+var WorkspaceItems = withT(function (_ref) {
   var _globalProps$organiza;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+  var t = _ref.t;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("a", {
+      className: "hover:bg-accent flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-sm font-medium",
+      "data-testid": "profile-organization-settings-button",
+      href: MY_ORGANIZATION_URL,
+      rel: "noreferrer",
+      target: "_blank",
+      children: t("neetoMolecules.sidebar.workspaceMenu.settings")
+    }), ((_globalProps$organiza = globalProps$1.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.subdomain) && /*#__PURE__*/jsx("div", {
+      className: "px-2.5 py-2",
+      children: /*#__PURE__*/jsxs("span", {
+        className: "flex flex-col gap-0.5 text-start",
+        children: [/*#__PURE__*/jsx("span", {
+          className: "text-sm font-medium",
+          children: t("neetoMolecules.sidebar.workspaceMenu.subdomain")
+        }), /*#__PURE__*/jsxs("span", {
+          className: "text-muted-foreground flex items-center gap-1 text-xs",
+          children: [/*#__PURE__*/jsx("span", {
+            className: "min-w-0 truncate",
+            children: globalProps$1.organization.subdomain
+          }), /*#__PURE__*/jsx(CopyToClipboardButton, {
+            className: "flex-shrink-0",
+            value: globalProps$1.organization.subdomain,
+            variant: "ghost"
+          })]
+        })]
+      })
+    })]
+  });
+});
+var WorkspaceMenu = function WorkspaceMenu() {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
   var timeoutRef = useRef(null);
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var isMobile = isSize("mobile");
   var handleMouseEnter = useCallback(function () {
     clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -1172,6 +1298,19 @@ var WorkspaceMenu = function WorkspaceMenu() {
       return setOpen(false);
     }, 150);
   }, []);
+  if (isMobile) {
+    return /*#__PURE__*/jsxs(Collapsible, {
+      open: open,
+      onOpenChange: setOpen,
+      children: [/*#__PURE__*/jsx(CollapsibleTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsx(MenuButton, {})
+      }), /*#__PURE__*/jsx(CollapsibleContent, {
+        className: "flex flex-col gap-0.5 ps-6 pt-1",
+        children: /*#__PURE__*/jsx(WorkspaceItems, {})
+      })]
+    });
+  }
   return /*#__PURE__*/jsxs(Popover, {
     open: open,
     onOpenChange: setOpen,
@@ -1186,7 +1325,7 @@ var WorkspaceMenu = function WorkspaceMenu() {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave
       })
-    }), /*#__PURE__*/jsxs(PopoverContent, {
+    }), /*#__PURE__*/jsx(PopoverContent, {
       align: "center",
       className: "z-[99999] w-56 gap-0.5 p-1",
       side: "right",
@@ -1196,33 +1335,7 @@ var WorkspaceMenu = function WorkspaceMenu() {
       onOpenAutoFocus: function onOpenAutoFocus(e) {
         return e.preventDefault();
       },
-      children: [/*#__PURE__*/jsx("a", {
-        className: "hover:bg-accent flex h-9 w-full items-center gap-2 rounded-md px-2.5 text-sm font-medium",
-        "data-testid": "profile-organization-settings-button",
-        href: MY_ORGANIZATION_URL,
-        rel: "noreferrer",
-        target: "_blank",
-        children: t("neetoMolecules.sidebar.workspaceMenu.settings")
-      }), ((_globalProps$organiza = globalProps$1.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.subdomain) && /*#__PURE__*/jsx("div", {
-        className: "px-3 py-2",
-        children: /*#__PURE__*/jsxs("span", {
-          className: "flex flex-col gap-0.5 text-start",
-          children: [/*#__PURE__*/jsx("span", {
-            className: "text-sm font-medium",
-            children: t("neetoMolecules.sidebar.workspaceMenu.subdomain")
-          }), /*#__PURE__*/jsxs("span", {
-            className: "text-muted-foreground flex items-center gap-1 text-xs",
-            children: [/*#__PURE__*/jsx("span", {
-              className: "min-w-0 truncate",
-              children: globalProps$1.organization.subdomain
-            }), /*#__PURE__*/jsx(CopyToClipboardButton, {
-              className: "flex-shrink-0",
-              value: globalProps$1.organization.subdomain,
-              variant: "ghost"
-            })]
-          })]
-        })
-      })]
+      children: /*#__PURE__*/jsx(WorkspaceItems, {})
     })]
   });
 };
@@ -1459,7 +1572,7 @@ var ProfileButton = function ProfileButton(_ref) {
         })
       })]
     }), isPresent(changesCount) && /*#__PURE__*/jsx("span", {
-      className: "bg-accent-foreground pointer-events-none absolute end-0 top-0 z-[3] flex h-[0.9375rem] min-w-[0.9375rem] items-center justify-center rounded-full border border-white px-1 text-[10px] text-white select-none",
+      className: "bg-foreground text-background pointer-events-none absolute end-0 top-0 z-[3] flex h-[0.9375rem] min-w-[0.9375rem] items-center justify-center rounded-full border border-white px-1 text-[10px] select-none",
       "data-testid": "help-icon-changes-count",
       children: changesCount
     }), /*#__PURE__*/jsx(Modal, {