@bigbinary/neeto-molecules 4.1.67 → 4.1.68

package/dist/cjs/v2/FloatingActionMenu.js

@@ -14,6 +14,7 @@ var v2 = require('@bigbinary/neeto-team-members-frontend/v2');
 var ramda = require('ramda');
 var v2_KeyboardShortcuts = require('./KeyboardShortcuts.js');
 var SubscriptionUpgradeRequestModal = require('../SubscriptionUpgradeRequestModal.js');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var classnames = require('classnames');
 var reactI18next = require('react-i18next');
 var Neeto = require('@bigbinary/neeto-icons/typeface-logos/Neeto');
@@ -22,10 +23,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var reactQuery = require('@tanstack/react-query');
 var axios = require('axios');
 var search = require('../search-BBuFYdmG.js');
+var useBreakpoints = require('@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints');
 var circleQuestionMark = require('../circle-question-mark-kxBMPyWQ.js');
 var chevronRight = require('../chevron-right-DpleLIQp.js');
 var createLucideIcon = require('../createLucideIcon-DBDhE7kE.js');
-var useBreakpoints = require('@bigbinary/neeto-commons-frontend/react-utils/useBreakpoints');
 var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
 var i18next = require('i18next');
 var user = require('../user-Ku5LVfLy.js');
@@ -39,7 +40,6 @@ require('zustand/shallow');
 require('@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions');
 require('zustand');
 require('@bigbinary/neetoui/managers');
-require('@bigbinary/neeto-commons-frontend/react-utils');
 require('../ua-parser-DgQ3nYoO.js');
 require('../x-B38UX0_0.js');
 require('@bigbinary/neetoui/Button');
@@ -273,21 +273,22 @@ var ProductLink$1 = 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__*/jsxRuntime.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__*/jsxRuntime.jsx(AppIcon, {}) : /*#__PURE__*/jsxRuntime.jsx(Neeto, {
-        className: "h-6 w-auto"
+        className: "h-6 w-auto max-md:h-5"
       })
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "shrink-0",
-      children: /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "text-muted-foreground block text-xs",
+      children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        color: "muted",
+        variant: "caption",
         children: description
       })
     })]
@@ -305,7 +306,7 @@ var Content = function Content(_ref) {
     t = _useTranslation.t;
   if (isLoading) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex items-center justify-center py-8",
+      className: "flex h-full items-center justify-center",
       children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Spinner, {
         "data-testid": "neeto-ui-spinner"
       })
@@ -319,10 +320,14 @@ var Content = function Content(_ref) {
         isHighlighted: index === highlightedIndex
       }), app.name);
     })
-  }) : /*#__PURE__*/jsxRuntime.jsx("p", {
-    className: "text-center text-sm",
+  }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "flex h-full items-center justify-center",
     "data-testid": "no-apps-found-title",
-    children: t("neetoMolecules.productSwitcher.noApps")
+    children: /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      color: "muted",
+      variant: "body2",
+      children: t("neetoMolecules.productSwitcher.noApps")
+    })
   });
 };
 
@@ -463,12 +468,12 @@ var Menu = function Menu(_ref) {
     handleKeyDown = _useProductSwitcherNa.handleKeyDown,
     scrollContainerRef = _useProductSwitcherNa.scrollContainerRef;
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.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__*/jsxRuntime.jsx("h1", {
         className: "text-2xl font-bold max-sm:text-xl",
@@ -494,7 +499,7 @@ var Menu = function Menu(_ref) {
         })
       })]
     }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Content, {
         filteredApps: filteredApps,
@@ -505,24 +510,28 @@ var Menu = function Menu(_ref) {
   }, "switcher-wrapper");
 };
 
-var Modal = function Modal(_ref) {
-  var isOpen = _ref.isOpen,
+var Modal = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    isOpen = _ref.isOpen,
     onClose = _ref.onClose;
   return /*#__PURE__*/jsxRuntime.jsxs(neetoAtoms.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__*/jsxRuntime.jsx(neetoAtoms.Dialog.Title, {
       className: "sr-only",
-      children: "Product Switcher"
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      "data-testid": "product-switcher-modal",
-      children: /*#__PURE__*/jsxRuntime.jsx(Menu, {})
+      children: t("neetoMolecules.productSwitcher.title")
+    }), /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Dialog.Body, {
+      className: "min-h-0 overflow-y-auto",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        "data-testid": "product-switcher-modal",
+        children: /*#__PURE__*/jsxRuntime.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";
 
@@ -533,7 +542,7 @@ var MenuButton$4 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/jsxRuntime.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), {}, {
@@ -543,22 +552,68 @@ var MenuButton$4 = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: "flex-grow text-start",
       children: t("neetoMolecules.sidebar.help")
     }), /*#__PURE__*/jsxRuntime.jsx(chevronRight.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 = reactUtils.withT(function (_ref) {
   var _globalProps;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
+  var t = _ref.t;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("a", {
+      className: MENU_ITEM_CLASS$1,
+      "data-testid": "help-link-help-articles-button",
+      href: "https://help.".concat(ramda.toLower(((_globalProps = globalProps) === null || _globalProps === void 0 ? void 0 : _globalProps.appName) || ""), ".com/"),
+      rel: "noreferrer",
+      target: "_blank",
+      children: [/*#__PURE__*/jsxRuntime.jsx(BookOpen, {
+        size: 18
+      }), t("neetoMolecules.sidebar.helpLinks.helpArticles")]
+    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(MessageCircleQuestionMark, {
+        size: 18
+      }), t("neetoMolecules.sidebar.helpLinks.liveChat")]
+    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Users, {
+        size: 18
+      }), t("neetoMolecules.sidebar.helpLinks.askTheCommunity")]
+    }), /*#__PURE__*/jsxRuntime.jsxs("a", {
+      className: MENU_ITEM_CLASS$1,
+      "data-testid": "help-link-status-button",
+      href: "https://neetostatus.com/",
+      rel: "noreferrer",
+      target: "_blank",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Activity, {
+        size: 18
+      }), t("neetoMolecules.sidebar.helpLinks.systemStatus")]
+    })]
+  });
+});
+var HelpMenu = function HelpMenu() {
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
   var timeoutRef = React.useRef(null);
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var isMobile = isSize("mobile");
   var handleMouseEnter = React.useCallback(function () {
     clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -568,6 +623,19 @@ var HelpMenu = function HelpMenu() {
       return setOpen(false);
     }, 150);
   }, []);
+  if (isMobile) {
+    return /*#__PURE__*/jsxRuntime.jsxs(primitives.Collapsible, {
+      open: open,
+      onOpenChange: setOpen,
+      children: [/*#__PURE__*/jsxRuntime.jsx(primitives.CollapsibleTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsxRuntime.jsx(MenuButton$4, {})
+      }), /*#__PURE__*/jsxRuntime.jsx(primitives.CollapsibleContent, {
+        className: "flex flex-col gap-0.5 ps-6 pt-1",
+        children: /*#__PURE__*/jsxRuntime.jsx(HelpItems, {})
+      })]
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(primitives.Popover, {
     open: open,
     onOpenChange: setOpen,
@@ -582,7 +650,7 @@ var HelpMenu = function HelpMenu() {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs(primitives.PopoverContent, {
+    }), /*#__PURE__*/jsxRuntime.jsx(primitives.PopoverContent, {
       align: "center",
       className: "z-[99999] w-56 gap-0.5 p-1",
       side: "right",
@@ -592,46 +660,7 @@ var HelpMenu = function HelpMenu() {
       onOpenAutoFocus: function onOpenAutoFocus(e) {
         return e.preventDefault();
       },
-      children: [/*#__PURE__*/jsxRuntime.jsxs("a", {
-        className: MENU_ITEM_CLASS$1,
-        "data-testid": "help-link-help-articles-button",
-        href: "https://help.".concat(ramda.toLower(((_globalProps = globalProps) === null || _globalProps === void 0 ? void 0 : _globalProps.appName) || ""), ".com/"),
-        rel: "noreferrer",
-        target: "_blank",
-        children: [/*#__PURE__*/jsxRuntime.jsx(BookOpen, {
-          size: 18
-        }), t("neetoMolecules.sidebar.helpLinks.helpArticles")]
-      }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(MessageCircleQuestionMark, {
-          size: 18
-        }), t("neetoMolecules.sidebar.helpLinks.liveChat")]
-      }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Users, {
-          size: 18
-        }), t("neetoMolecules.sidebar.helpLinks.askTheCommunity")]
-      }), /*#__PURE__*/jsxRuntime.jsxs("a", {
-        className: MENU_ITEM_CLASS$1,
-        "data-testid": "help-link-status-button",
-        href: "https://neetostatus.com/",
-        rel: "noreferrer",
-        target: "_blank",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Activity, {
-          size: 18
-        }), t("neetoMolecules.sidebar.helpLinks.systemStatus")]
-      })]
+      children: /*#__PURE__*/jsxRuntime.jsx(HelpItems, {})
     })]
   });
 };
@@ -662,7 +691,7 @@ var LinkSection = function LinkSection(_ref) {
         }), /*#__PURE__*/jsxRuntime.jsxs("span", {
           className: "flex flex-grow items-center gap-2",
           children: [label, neetoCist.isPresent(changesCount) && /*#__PURE__*/jsxRuntime.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
           })]
@@ -704,7 +733,7 @@ var MenuButton$3 = /*#__PURE__*/React.forwardRef(function (props, ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/jsxRuntime.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), {}, {
@@ -712,22 +741,61 @@ var MenuButton$3 = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: "flex-grow text-start",
       children: t("neetoMolecules.sidebar.organizationSwitcher.label")
     }), /*#__PURE__*/jsxRuntime.jsx(chevronRight.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 = reactUtils.withT(function (_ref) {
+  var t = _ref.t,
+    organizations = _ref.organizations,
+    authAppUrl = _ref.authAppUrl;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [organizations === null || organizations === void 0 ? void 0 : organizations.map(function (organization) {
+      return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(neetoAtoms.Badge, {
+          variant: "default",
+          children: [/*#__PURE__*/jsxRuntime.jsx(CircleCheck, {
+            size: 12
+          }), t("neetoMolecules.sidebar.organizationSwitcher.signedin")]
+        })]
+      }, organization.userId);
+    }), /*#__PURE__*/jsxRuntime.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 = reactI18next.useTranslation(),
-    t = _useTranslation.t;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
   var timeoutRef = React.useRef(null);
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var isMobile = isSize("mobile");
   var _useFetchLoggedInOrga = useFetchLoggedInOrganizations(initializers.globalProps === null || initializers.globalProps === void 0 || (_globalProps$user = initializers.globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.email),
     _useFetchLoggedInOrga2 = _useFetchLoggedInOrga.data,
     _useFetchLoggedInOrga3 = _useFetchLoggedInOrga2 === void 0 ? {} : _useFetchLoggedInOrga2,
@@ -742,15 +810,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__*/jsxRuntime.jsxs(primitives.Collapsible, {
+      open: open,
+      onOpenChange: setOpen,
+      children: [/*#__PURE__*/jsxRuntime.jsx(primitives.CollapsibleTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsxRuntime.jsx(MenuButton$3, {})
+      }), /*#__PURE__*/jsxRuntime.jsx(primitives.CollapsibleContent, {
+        className: "flex flex-col gap-0.5 ps-6 pt-1",
+        children: /*#__PURE__*/jsxRuntime.jsx(OrganizationItems, {
+          authAppUrl: authAppUrl,
+          organizations: organizations
+        })
+      })]
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(primitives.Popover, {
     open: open,
     onOpenChange: setOpen,
@@ -765,7 +840,7 @@ var OrganizationSwitcher = function OrganizationSwitcher() {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs(primitives.PopoverContent, {
+    }), /*#__PURE__*/jsxRuntime.jsx(primitives.PopoverContent, {
       align: "center",
       className: "z-[99999] w-56 gap-0.5 p-1",
       side: "right",
@@ -775,28 +850,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__*/jsxRuntime.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__*/jsxRuntime.jsxs(neetoAtoms.Badge, {
-            variant: "default",
-            children: [/*#__PURE__*/jsxRuntime.jsx(CircleCheck, {
-              size: 12
-            }), t("neetoMolecules.sidebar.organizationSwitcher.signedin")]
-          })]
-        }, organization.userId);
-      }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(OrganizationItems, {
+        authAppUrl: authAppUrl,
+        organizations: organizations
+      })
     })]
   });
 };
@@ -855,13 +912,10 @@ var Dropdown = function Dropdown() {
       })
     }), /*#__PURE__*/jsxRuntime.jsx(primitives.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) {
@@ -908,10 +962,15 @@ var ProfileHeader = function ProfileHeader(_ref) {
         "data-testid": "floating-action-menu-header-user-name",
         title: name,
         children: neetoCist.truncate(name, 18)
-      }), email && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        asChild: true,
+        className: "w-full truncate leading-tight",
+        color: "muted",
+        variant: "caption",
+        children: /*#__PURE__*/jsxRuntime.jsx("span", {
+          "data-testid": "floating-action-menu-header-user-email",
+          children: email
+        })
       })]
     })]
   });
@@ -925,14 +984,14 @@ var MenuButton$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     otherProps = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(ProfileHeader, {
       profileInfo: profileInfo
     }), /*#__PURE__*/jsxRuntime.jsx(chevronRight.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
     })]
   }));
@@ -968,11 +1027,33 @@ var LEGACY_THEMES = {
 };
 var NEETO_AUTH_BILLING_INFO_URL = "/neeto_sso/api/v1/subscription/billing";
 
-var ProfileExpandMenu = function ProfileExpandMenu(_ref) {
+var ProfileItems = reactUtils.withT(function (_ref) {
   var _window$globalProps;
-  var profileInfo = _ref.profileInfo;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
+  var t = _ref.t,
+    onProfileClick = _ref.onProfileClick;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("button", {
+      className: MENU_ITEM_CLASS,
+      "data-testid": "profile-my-profile-button",
+      type: "button",
+      onClick: onProfileClick,
+      children: [/*#__PURE__*/jsxRuntime.jsx(user.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__*/jsxRuntime.jsxs("a", {
+      className: MENU_ITEM_CLASS,
+      "data-testid": "profile-cancel-account-button",
+      href: DELETE_WORKSPACE_URL,
+      rel: "noreferrer",
+      target: "_blank",
+      children: [/*#__PURE__*/jsxRuntime.jsx(CircleX, {
+        size: 18
+      }), t("neetoMolecules.sidebar.cancelAccount")]
+    })]
+  });
+});
+var ProfileExpandMenu = function ProfileExpandMenu(_ref2) {
+  var profileInfo = _ref2.profileInfo;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -981,6 +1062,9 @@ var ProfileExpandMenu = function ProfileExpandMenu(_ref) {
     _Profile$usePaneState2 = _slicedToArray(_Profile$usePaneState, 2),
     setIsProfilePaneOpen = _Profile$usePaneState2[1];
   var timeoutRef = React.useRef(null);
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var isMobile = isSize("mobile");
   var handleMouseEnter = React.useCallback(function () {
     clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -990,6 +1074,26 @@ var ProfileExpandMenu = function ProfileExpandMenu(_ref) {
       return setOpen(false);
     }, 150);
   }, []);
+  var onProfileClick = function onProfileClick() {
+    return setIsProfilePaneOpen(true);
+  };
+  if (isMobile) {
+    return /*#__PURE__*/jsxRuntime.jsxs(primitives.Collapsible, {
+      open: open,
+      onOpenChange: setOpen,
+      children: [/*#__PURE__*/jsxRuntime.jsx(primitives.CollapsibleTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsxRuntime.jsx(MenuButton$1, {
+          profileInfo: profileInfo
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(primitives.CollapsibleContent, {
+        className: "flex flex-col gap-0.5 ps-6 pt-1",
+        children: /*#__PURE__*/jsxRuntime.jsx(ProfileItems, {
+          onProfileClick: onProfileClick
+        })
+      })]
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(primitives.Popover, {
     open: open,
     onOpenChange: setOpen,
@@ -1005,7 +1109,7 @@ var ProfileExpandMenu = function ProfileExpandMenu(_ref) {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs(primitives.PopoverContent, {
+    }), /*#__PURE__*/jsxRuntime.jsx(primitives.PopoverContent, {
       align: "center",
       className: "z-[99999] w-56 gap-0.5 p-1",
       side: "right",
@@ -1015,26 +1119,9 @@ var ProfileExpandMenu = function ProfileExpandMenu(_ref) {
       onOpenAutoFocus: function onOpenAutoFocus(e) {
         return e.preventDefault();
       },
-      children: [/*#__PURE__*/jsxRuntime.jsxs("button", {
-        className: MENU_ITEM_CLASS,
-        "data-testid": "profile-my-profile-button",
-        type: "button",
-        onClick: function onClick() {
-          return setIsProfilePaneOpen(true);
-        },
-        children: [/*#__PURE__*/jsxRuntime.jsx(user.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__*/jsxRuntime.jsxs("a", {
-        className: MENU_ITEM_CLASS,
-        "data-testid": "profile-cancel-account-button",
-        href: DELETE_WORKSPACE_URL,
-        rel: "noreferrer",
-        target: "_blank",
-        children: [/*#__PURE__*/jsxRuntime.jsx(CircleX, {
-          size: 18
-        }), t("neetoMolecules.sidebar.cancelAccount")]
-      })]
+      children: /*#__PURE__*/jsxRuntime.jsx(ProfileItems, {
+        onProfileClick: onProfileClick
+      })
     })]
   });
 };
@@ -1115,8 +1202,10 @@ var ThemeSwitcher = function ThemeSwitcher() {
   };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "bg-muted/40 flex items-center justify-between gap-3 rounded-b-xl px-4 py-3",
-    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-      className: "text-muted-foreground text-xs font-medium",
+    children: [/*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+      color: "muted",
+      variant: "caption",
+      weight: "medium",
       children: t("neetoMolecules.sidebar.themeSwitcher.label")
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "bg-muted flex rounded-lg p-0.5",
@@ -1154,7 +1243,7 @@ var MenuButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/jsxRuntime.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), {}, {
@@ -1163,27 +1252,64 @@ var MenuButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         className: "text-sm font-medium",
         children: t("neetoMolecules.sidebar.workspace")
-      }), ((_globalProps$organiza = initializers.globalProps.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.name) && /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "text-muted-foreground text-xs",
-        children: initializers.globalProps.organization.name
+      }), ((_globalProps$organiza = initializers.globalProps.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.name) && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
+        asChild: true,
+        color: "muted",
+        variant: "caption",
+        children: /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: initializers.globalProps.organization.name
+        })
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(chevronRight.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 = reactUtils.withT(function (_ref) {
   var _globalProps$organiza;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
+  var t = _ref.t;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.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 = initializers.globalProps.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.subdomain) && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "px-2.5 py-2",
+      children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+        className: "flex flex-col gap-0.5 text-start",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "text-sm font-medium",
+          children: t("neetoMolecules.sidebar.workspaceMenu.subdomain")
+        }), /*#__PURE__*/jsxRuntime.jsxs("span", {
+          className: "text-muted-foreground flex items-center gap-1 text-xs",
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "min-w-0 truncate",
+            children: initializers.globalProps.organization.subdomain
+          }), /*#__PURE__*/jsxRuntime.jsx(v2_CopyToClipboardButton, {
+            className: "flex-shrink-0",
+            value: initializers.globalProps.organization.subdomain,
+            variant: "ghost"
+          })]
+        })]
+      })
+    })]
+  });
+});
+var WorkspaceMenu = function WorkspaceMenu() {
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
   var timeoutRef = React.useRef(null);
+  var _useBreakpoints = useBreakpoints(),
+    isSize = _useBreakpoints.isSize;
+  var isMobile = isSize("mobile");
   var handleMouseEnter = React.useCallback(function () {
     clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -1193,6 +1319,19 @@ var WorkspaceMenu = function WorkspaceMenu() {
       return setOpen(false);
     }, 150);
   }, []);
+  if (isMobile) {
+    return /*#__PURE__*/jsxRuntime.jsxs(primitives.Collapsible, {
+      open: open,
+      onOpenChange: setOpen,
+      children: [/*#__PURE__*/jsxRuntime.jsx(primitives.CollapsibleTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsxRuntime.jsx(MenuButton, {})
+      }), /*#__PURE__*/jsxRuntime.jsx(primitives.CollapsibleContent, {
+        className: "flex flex-col gap-0.5 ps-6 pt-1",
+        children: /*#__PURE__*/jsxRuntime.jsx(WorkspaceItems, {})
+      })]
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsxs(primitives.Popover, {
     open: open,
     onOpenChange: setOpen,
@@ -1207,7 +1346,7 @@ var WorkspaceMenu = function WorkspaceMenu() {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs(primitives.PopoverContent, {
+    }), /*#__PURE__*/jsxRuntime.jsx(primitives.PopoverContent, {
       align: "center",
       className: "z-[99999] w-56 gap-0.5 p-1",
       side: "right",
@@ -1217,33 +1356,7 @@ var WorkspaceMenu = function WorkspaceMenu() {
       onOpenAutoFocus: function onOpenAutoFocus(e) {
         return e.preventDefault();
       },
-      children: [/*#__PURE__*/jsxRuntime.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 = initializers.globalProps.organization) === null || _globalProps$organiza === void 0 ? void 0 : _globalProps$organiza.subdomain) && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "px-3 py-2",
-        children: /*#__PURE__*/jsxRuntime.jsxs("span", {
-          className: "flex flex-col gap-0.5 text-start",
-          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-            className: "text-sm font-medium",
-            children: t("neetoMolecules.sidebar.workspaceMenu.subdomain")
-          }), /*#__PURE__*/jsxRuntime.jsxs("span", {
-            className: "text-muted-foreground flex items-center gap-1 text-xs",
-            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-              className: "min-w-0 truncate",
-              children: initializers.globalProps.organization.subdomain
-            }), /*#__PURE__*/jsxRuntime.jsx(v2_CopyToClipboardButton, {
-              className: "flex-shrink-0",
-              value: initializers.globalProps.organization.subdomain,
-              variant: "ghost"
-            })]
-          })]
-        })
-      })]
+      children: /*#__PURE__*/jsxRuntime.jsx(WorkspaceItems, {})
     })]
   });
 };
@@ -1480,7 +1593,7 @@ var ProfileButton = function ProfileButton(_ref) {
         })
       })]
     }), neetoCist.isPresent(changesCount) && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Modal, {