@ixo/ui 0.0.33 → 0.0.35

package/dist/{components-CR3XazP1.js → components-C94tOtsd.js}

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
 import { isString, toggle, get, isFunction, assign } from "radash";
 import { useTheme, jsx as jsx$1, keyframes, ThemeProvider } from "@emotion/react";
 import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, L as Loading, P as PlusSolid, S as SearchSolid, b as Assistant, c as ArrowUpSolid, E as EllipsisVSolid, d as ArrowLeftSolid, H as HistorySolid, U as User, e as AngleLeftSolid, M as MinusCircleSolid, f as SettingsBarSolid, G as Globe, D as Dashboard, h as Groups, i as UserCircleSolid, j as Assets$1, k as Claims, l as Accounts, m as LinkedResources, n as Proposals, I as ImpactCredits, o as GoTo, p as Share, q as PiePiece, r as ImpactCertificates, s as CommentDotsSolid, t as CommentAltSolid, u as MicrophoneSolid, v as Command, w as ArrowCircleRightSolid, x as Protocols, y as Investments, O as Oracles, z as Projects, B as Daos, F as Star, J as AngleRightSolid, K as Expand, N as LeafSolid, Q as ArrowDownSolid, R as ArrowRightSolid, T as Play, V as CheckCircle, W as Events, X as ThumbsUpSolid, Y as CommentsSolid, Z as CopySolid, _ as Hourglass, $ as Act, a0 as Info$1, a1 as ClaimsW, a2 as TachometerAltSolid, a3 as UserCogSolid, a4 as UsersSolid, a5 as EllipsisHSolid } from "./UsersSolid-BAU7PbE4.js";
-import { useState, useCallback, useRef, useEffect, Suspense, lazy, forwardRef, useId, useMemo, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, memo } from "react";
+import { useState, useCallback, useRef, useEffect, Suspense, lazy, forwardRef, useMemo, useId, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, memo } from "react";
 import { T as TAG_SMALL_HEIGHT, D as DEFAULT_ICON_SIZE } from "./constants-B7xlU8b8.js";
 import { Accordion as Accordion$1, Box, Image, Popover, Text as Text$1, Badge as Badge$1, Center, AppShell, Skeleton, Stack as Stack$1, Tooltip as Tooltip$4, Divider } from "@mantine/core";
 import { cx, css } from "@emotion/css";
@@ -774,8 +774,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-CenKQltX.js"));
-const Footer = lazy(() => import("./index-CJuGk9X4.js"));
+const Header$3 = lazy(() => import("./index-DQ5_MRcm.js"));
+const Footer = lazy(() => import("./index-BUhftlk7.js"));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -859,7 +859,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = lazy(() => import("./index-C-XqjvyN.js"));
+const Header$2 = lazy(() => import("./index-D_XYIRB0.js"));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = useRef(null);
   const handleOnClick = useCallback(
@@ -1294,7 +1294,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = lazy(() => import("./index-CAG6hgw7.js"));
+const Badge = lazy(() => import("./index-CBHwvT9n.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -2184,6 +2184,7 @@ function Avatar({ src, rounded = true, size = 62, did }) {
   return /* @__PURE__ */ jsx(User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
 }
 const MIN_WIDTH = 200;
+const MAX_WIDTH = 700;
 function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width = 450, onWidthChange, onMaxExpand }) {
   const [isResizing, setIsResizing] = useState(false);
   const [ref] = useResizeObserver();
@@ -2219,7 +2220,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
   const handleMouseMove = (e) => {
     if (!isResizing) return;
     const newWidth = window.innerWidth - e.clientX;
-    const maxWidth = window.innerWidth - 600;
+    const maxWidth = Math.min(window.innerWidth - 600, MAX_WIDTH);
     const constrainedWidth = Math.min(Math.max(newWidth, MIN_WIDTH), maxWidth);
     onWidthChange?.(constrainedWidth);
   };
@@ -2230,7 +2231,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
     }
   }, [width, asideCollapsed, onAsideToggle]);
   useEffect(() => {
-    const maxWidth = window.innerWidth - 600;
+    const maxWidth = Math.min(window.innerWidth - 600, MAX_WIDTH);
     if (width >= maxWidth && onMaxExpand && !hasFiredMaxExpand.current) {
       hasFiredMaxExpand.current = true;
       clearListeners();
@@ -2241,7 +2242,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
   }, [width, onMaxExpand]);
   useEffect(() => {
     const handleWindowResize = () => {
-      const newMaxWidth = window.innerWidth - 600;
+      const newMaxWidth = Math.min(window.innerWidth - 600, MAX_WIDTH);
       const newMinWidth = MIN_WIDTH;
       if (width > newMaxWidth) {
         onWidthChange?.(newMaxWidth);
@@ -2263,7 +2264,7 @@ function AsideResizable({ children, asideCollapsed = false, onAsideToggle, width
     {
       w: width,
       miw: 200,
-      maw: window.innerWidth - 340,
+      maw: MAX_WIDTH,
       ref,
       sx: {
         overflowY: "auto",
@@ -2406,19 +2407,70 @@ function RoomCategory({ category }) {
     !value && /* @__PURE__ */ jsx(Stack$1, { gap: 1, children: category.rooms.map((room) => /* @__PURE__ */ jsx(RoomItem, { room }, room.id)) })
   ] });
 }
+function hasActiveDescendant(children) {
+  if (!children || children.length === 0) return false;
+  return children.some((child) => child.isActive === true || hasActiveDescendant(child.children));
+}
 function MenuItem({ item, onMenuItemClick, depth = 0 }) {
   const { hovered, ref } = useHover();
   const theme = useUITheme();
-  const { value: isExpanded, toggle: toggle2 } = useToggle(false);
   const hasChildren = item.children && item.children.length > 0;
+  const hasActiveChild = useMemo(() => hasActiveDescendant(item.children), [item.children]);
+  const initialExpanded = item?.isActive === true || hasActiveChild;
+  const { value: isExpanded, toggle: toggle2, set: setIsExpanded } = useToggle(initialExpanded);
+  const prevHasActiveChildRef = useRef(hasActiveChild);
+  const manuallyToggledRef = useRef(false);
+  useEffect(() => {
+    if (item?.isActive !== void 0) {
+      setIsExpanded(item.isActive);
+      manuallyToggledRef.current = false;
+    }
+  }, [item?.isActive, setIsExpanded]);
+  useEffect(() => {
+    if (hasActiveChild && !prevHasActiveChildRef.current) {
+      if (!manuallyToggledRef.current || isExpanded) {
+        setIsExpanded(true);
+      }
+    }
+    prevHasActiveChildRef.current = hasActiveChild;
+  }, [hasActiveChild, isExpanded, setIsExpanded]);
   const handleItemClick = () => {
     if (!!item?.disabled) return;
     onMenuItemClick(item);
   };
   const handleToggleClick = (e) => {
     e.stopPropagation();
+    manuallyToggledRef.current = true;
     toggle2();
   };
+  const shouldShowActiveStyle = item.isActive === true && !hasActiveChild;
+  const renderIcon = () => {
+    if (hasChildren && hovered) {
+      return /* @__PURE__ */ jsx(
+        Center,
+        {
+          onClick: handleToggleClick,
+          p: 4,
+          sx: {
+            cursor: "pointer",
+            borderRadius: 4,
+            transform: isExpanded ? "rotate(-90deg)" : "rotate(0deg)",
+            transition: "transform 0.2s ease",
+            "&:hover": {
+              backgroundColor: theme.neutral.transparent10
+            }
+          },
+          children: /* @__PURE__ */ jsx(AngleLeftSolid, { size: 12, color: "secondary" })
+        }
+      );
+    } else {
+      if (typeof item.icon === "string") {
+        return /* @__PURE__ */ jsx(Image, { w: 20, h: 20, src: item.icon, radius: "50%" });
+      } else {
+        return /* @__PURE__ */ jsx(item.icon, { size: 20, color: shouldShowActiveStyle ? "overPicture" : "secondary" });
+      }
+    }
+  };
   return /* @__PURE__ */ jsxs(Stack$1, { gap: 1, children: [
     /* @__PURE__ */ jsxs(
       Flex,
@@ -2433,50 +2485,31 @@ function MenuItem({ item, onMenuItemClick, depth = 0 }) {
         style: {
           cursor: "pointer",
           borderRadius: 8,
-          backgroundColor: item.isActive ? theme.neutral.transparent10 : hovered ? theme.neutral.transparent10 : "transparent",
+          backgroundColor: shouldShowActiveStyle ? theme.neutral.transparent10 : hovered ? theme.neutral.transparent10 : "transparent",
           transform: hovered ? "translateX(4px)" : "translateX(0px)",
           transition: "all 0.2s ease"
         },
         onClick: handleItemClick,
         children: [
           /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 8, children: [
-            typeof item.icon === "string" ? /* @__PURE__ */ jsx(Image, { w: 20, h: 20, src: item.icon, radius: "50%" }) : /* @__PURE__ */ jsx(item.icon, { size: 20, color: item.isActive ? "overPicture" : "secondary" }),
-            /* @__PURE__ */ jsx(Text$1, { fz: 14, fw: 500, c: item.isActive ? theme.neutral.lightGray : theme.text.secondary, style: { flex: 1 }, children: item.name }),
+            renderIcon(),
+            /* @__PURE__ */ jsx(Text$1, { fz: 14, fw: 500, c: shouldShowActiveStyle ? theme.neutral.lightGray : theme.text.secondary, style: { flex: 1 }, children: item.name }),
             item.badgeCount ? /* @__PURE__ */ jsx(Badge$1, { size: "xs", variant: "filled", ml: 4, style: { minWidth: "16px", height: "15px", padding: "0 4px", fontSize: "8px" }, children: item.badgeCount }) : null
           ] }),
-          /* @__PURE__ */ jsxs(Flex, { children: [
-            hasChildren && /* @__PURE__ */ jsx(
-              Center,
-              {
-                onClick: handleToggleClick,
-                p: 4,
-                sx: {
-                  cursor: "pointer",
-                  borderRadius: 4,
-                  transform: isExpanded ? "rotate(-90deg)" : "rotate(0deg)",
-                  transition: "transform 0.2s ease",
-                  "&:hover": {
-                    backgroundColor: theme.neutral.transparent10
-                  }
-                },
-                children: /* @__PURE__ */ jsx(AngleLeftSolid, { size: 12, color: "secondary" })
-              }
-            ),
-            item?.actions && item.actions.length > 0 && /* @__PURE__ */ jsx(
-              Center,
-              {
-                sx: {
-                  cursor: "pointer",
-                  borderRadius: 4,
-                  transition: "transform 0.2s ease",
-                  "&:hover": {
-                    backgroundColor: theme.neutral.transparent10
-                  }
-                },
-                children: /* @__PURE__ */ jsx(MoreMenu, { items: item.actions, controlColor: "secondary" })
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsx(Flex, { children: item?.actions && item.actions.length > 0 && /* @__PURE__ */ jsx(
+            Center,
+            {
+              sx: {
+                cursor: "pointer",
+                borderRadius: 4,
+                transition: "transform 0.2s ease",
+                "&:hover": {
+                  backgroundColor: theme.neutral.transparent10
+                }
+              },
+              children: /* @__PURE__ */ jsx(MoreMenu, { items: item.actions, controlColor: "secondary" })
+            }
+          ) })
         ]
       }
     ),
@@ -2553,6 +2586,64 @@ function AppShellNavigation({
   const [isNavbarNotCollapsed, { toggle: toggleNavbar }] = useDisclosure(true);
   const [asideWidth, setAsideWidth] = useState(450);
   const theme = useUITheme();
+  const [navbarWidth, setNavbarWidth] = useState(isAiOpened ? 450 : 300);
+  const [isNavbarResizing, setIsNavbarResizing] = useState(false);
+  const isNavbarResizingRef = useRef(false);
+  useEffect(() => {
+    const minWidth = isAiOpened ? 450 : 300;
+    if (navbarWidth < minWidth) {
+      setNavbarWidth(minWidth);
+    }
+  }, [isAiOpened, navbarWidth]);
+  function clearNavbarListeners() {
+    document.removeEventListener("mousemove", handleNavbarMouseMove);
+    document.removeEventListener("mouseup", handleNavbarMouseUp);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }
+  const handleNavbarMouseMove = useCallback(
+    (e) => {
+      if (!isNavbarResizingRef.current) return;
+      const minWidth = isAiOpened ? 450 : 300;
+      const maxWidth = 700;
+      const newWidth = Math.min(Math.max(e.clientX, minWidth), maxWidth);
+      setNavbarWidth(newWidth);
+    },
+    [isAiOpened]
+  );
+  const handleNavbarMouseUp = useCallback(() => {
+    setIsNavbarResizing(false);
+    isNavbarResizingRef.current = false;
+  }, []);
+  const handleNavbarMouseDown = (e) => {
+    e.preventDefault();
+    setIsNavbarResizing(true);
+    isNavbarResizingRef.current = true;
+  };
+  useEffect(() => {
+    if (isNavbarResizing) {
+      document.addEventListener("mousemove", handleNavbarMouseMove);
+      document.addEventListener("mouseup", handleNavbarMouseUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    } else {
+      clearNavbarListeners();
+    }
+    return () => clearNavbarListeners();
+  }, [isNavbarResizing, handleNavbarMouseMove, handleNavbarMouseUp]);
+  useEffect(() => {
+    const handleWindowResize = () => {
+      const maxWidth = 700;
+      const minWidth = isAiOpened ? 450 : 300;
+      if (navbarWidth > maxWidth) {
+        setNavbarWidth(maxWidth);
+      } else if (navbarWidth < minWidth) {
+        setNavbarWidth(minWidth);
+      }
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, [navbarWidth, isAiOpened]);
   return /* @__PURE__ */ jsxs(
     AppShell,
     {
@@ -2560,7 +2651,7 @@ function AppShellNavigation({
       styles: {
         navbar: {
           background: theme.bg.navIconsBg,
-          transition: "width 0.3s ease"
+          transition: isNavbarResizing ? "none" : "width 0.3s ease"
         },
         aside: {
           background: theme.bg.navScaled
@@ -2568,7 +2659,7 @@ function AppShellNavigation({
       },
       bg: theme.bg.centralCanvasBg,
       navbar: {
-        width: isNavbarNotCollapsed ? isAiOpened ? 450 : 300 : 56,
+        width: isNavbarNotCollapsed ? navbarWidth : 56,
         breakpoint: "sm"
       },
       aside: {
@@ -2576,90 +2667,109 @@ function AppShellNavigation({
         breakpoint: "sm"
       },
       children: [
-        /* @__PURE__ */ jsx(AppShell.Navbar, { children: /* @__PURE__ */ jsxs(Flex, { style: { height: "100%" }, children: [
-          /* @__PURE__ */ jsxs(Stack$1, { p: 8, w: 56, justify: "space-between", h: "100%", bg: theme.bg.navSpaces, children: [
-            /* @__PURE__ */ jsxs(Stack$1, { align: "center", style: { flex: 1 }, gap: 8, children: [
-              /* @__PURE__ */ jsxs(Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", h: 40, w: 40, onClick: companyIcon.onClick, children: [
-                typeof companyIcon.icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: companyIcon.icon, w: 32, h: 32 }) : companyIcon.icon,
-                companyIcon.isSelected && /* @__PURE__ */ jsx(SelectedIndicator, {})
-              ] }),
-              avatarIcon && /* @__PURE__ */ jsxs(Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: avatarIcon.onClick, children: [
-                /* @__PURE__ */ jsx(Tooltip$4, { label: "Home", position: "right", withArrow: true, ml: 5, fz: 12, children: typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon }),
-                avatarIcon.isSelected && /* @__PURE__ */ jsx(SelectedIndicator, {})
-              ] }),
-              /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
-              temporarySpace && !spaces?.some((space) => space.id === temporarySpace.id) && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  SpaceItem,
-                  {
-                    selectedSpace,
-                    icon: temporarySpace.icon,
-                    name: temporarySpace.name,
-                    id: temporarySpace.id,
-                    onClick: temporarySpace.onClick
-                  },
-                  temporarySpace.id
-                ),
-                /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 })
-              ] }),
-              /* @__PURE__ */ jsx(
-                Stack$1,
-                {
-                  align: "center",
-                  gap: 8,
-                  style: {
-                    flex: 1,
-                    overflowY: "auto",
-                    maxHeight: "calc(100vh - 300px)",
-                    scrollbarWidth: "none",
-                    msOverflowStyle: "none"
-                  },
-                  sx: {
-                    "&::-webkit-scrollbar": {
-                      display: "none"
-                    }
-                  },
-                  children: spaces.map(({ icon, id, name, onClick }) => /* @__PURE__ */ jsx(SpaceItem, { selectedSpace, icon, name, id, onClick }, id))
-                }
-              )
-            ] }),
-            onAddSpaceClick && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsx(PlusSolid, { color: "secondary" }) }),
-            onMinusSpaceClick && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onMinusSpaceClick, children: /* @__PURE__ */ jsx(MinusCircleSolid, { color: "secondary" }) }),
-            /* @__PURE__ */ jsxs(Stack$1, { align: "center", gap: 8, children: [
-              /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
-              /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsx(SettingsBarSolid, { size: 22, color: "secondary" }) })
-            ] })
-          ] }),
-          isAiOpened && isNavbarNotCollapsed && aiNavbarContent,
-          isNavbarNotCollapsed && !isAiOpened && /* @__PURE__ */ jsxs(Stack$1, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
-            /* @__PURE__ */ jsxs(Stack$1, { gap: 5, children: [
-              /* @__PURE__ */ jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
-                /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "10px", children: [
-                  isBackButtonVisible ? /* @__PURE__ */ jsx(Center, { onClick: onBackClick, sx: { borderRadius: 4, cursor: "pointer", padding: 2, background: theme.bg.navIconsBg }, children: /* @__PURE__ */ jsx(ArrowLeftSolid, { size: 18 }) }) : /* @__PURE__ */ jsx(Center, { sx: { borderRadius: 4, padding: 2, background: theme.bg.navIconsBg }, children: pageItem.pageIcon ? /* @__PURE__ */ jsx(pageItem.pageIcon, { size: 18 }) : /* @__PURE__ */ jsx(Globe, { size: 18 }) }),
-                  /* @__PURE__ */ jsx(Text$1, { lh: 1, c: theme.text.overPicture, children: pageItem.pageTitle || "Unknown" })
+        /* @__PURE__ */ jsx(AppShell.Navbar, { children: /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", height: "100%" }, children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              w: 4,
+              top: 0,
+              right: 0,
+              h: "100%",
+              pos: "absolute",
+              bg: isNavbarResizing ? theme.colors.focus : "transparent",
+              sx: {
+                zIndex: 2,
+                cursor: "col-resize",
+                transition: "background-color 0.2s ease"
+              },
+              onMouseDown: handleNavbarMouseDown
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { style: { height: "100%" }, children: [
+            /* @__PURE__ */ jsxs(Stack$1, { p: 8, w: 56, justify: "space-between", h: "100%", bg: theme.bg.navSpaces, children: [
+              /* @__PURE__ */ jsxs(Stack$1, { align: "center", style: { flex: 1 }, gap: 8, children: [
+                /* @__PURE__ */ jsxs(Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", h: 40, w: 40, onClick: companyIcon.onClick, children: [
+                  typeof companyIcon.icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: companyIcon.icon, w: 32, h: 32 }) : companyIcon.icon,
+                  companyIcon.isSelected && /* @__PURE__ */ jsx(SelectedIndicator, {})
                 ] }),
-                isAiBtnVisible && !isAiOpened && /* @__PURE__ */ jsx(
-                  Center,
+                avatarIcon && /* @__PURE__ */ jsxs(Center, { sx: { cursor: "pointer", borderRadius: 24 }, pos: "relative", bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: avatarIcon.onClick, children: [
+                  /* @__PURE__ */ jsx(Tooltip$4, { label: "Home", position: "right", withArrow: true, ml: 5, fz: 12, children: typeof avatarIcon.icon === "string" ? /* @__PURE__ */ jsx(Image, { radius: 24, src: avatarIcon.icon, w: 32, h: 32 }) : avatarIcon.icon }),
+                  avatarIcon.isSelected && /* @__PURE__ */ jsx(SelectedIndicator, {})
+                ] }),
+                /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+                temporarySpace && !spaces?.some((space) => space.id === temporarySpace.id) && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    SpaceItem,
+                    {
+                      selectedSpace,
+                      icon: temporarySpace.icon,
+                      name: temporarySpace.name,
+                      id: temporarySpace.id,
+                      onClick: temporarySpace.onClick
+                    },
+                    temporarySpace.id
+                  ),
+                  /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Stack$1,
                   {
+                    align: "center",
+                    gap: 8,
+                    style: {
+                      flex: 1,
+                      overflowY: "auto",
+                      maxHeight: "calc(100vh - 300px)",
+                      scrollbarWidth: "none",
+                      msOverflowStyle: "none"
+                    },
                     sx: {
-                      cursor: "pointer",
-                      borderRadius: 8,
-                      transition: "background 0.15s",
-                      background: theme.neutral.transparent10,
-                      "&:hover": {
-                        background: theme.neutral.transparent30
+                      "&::-webkit-scrollbar": {
+                        display: "none"
                       }
                     },
-                    p: 4,
-                    onClick: onAiOpen,
-                    children: /* @__PURE__ */ jsx(Assistant, { size: 18, color: "primary" })
+                    children: spaces.map(({ icon, id, name, onClick }) => /* @__PURE__ */ jsx(SpaceItem, { selectedSpace, icon, name, id, onClick }, id))
                   }
                 )
               ] }),
-              loading ? /* @__PURE__ */ jsx(Stack$1, { gap: 5, children: Array.from({ length: 6 }).map((_, idx) => /* @__PURE__ */ jsx(NavigationItemSkeleton, {}, idx)) }) : menuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)),
-              roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsx(Stack$1, { gap: 8, mt: 16, children: roomCategories.map((category) => /* @__PURE__ */ jsx(RoomCategory, { category }, category.id)) })
+              onAddSpaceClick && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onAddSpaceClick, children: /* @__PURE__ */ jsx(PlusSolid, { color: "secondary" }) }),
+              onMinusSpaceClick && /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onMinusSpaceClick, children: /* @__PURE__ */ jsx(MinusCircleSolid, { color: "secondary" }) }),
+              /* @__PURE__ */ jsxs(Stack$1, { align: "center", gap: 8, children: [
+                /* @__PURE__ */ jsx(Divider, { w: 40, mx: 10, color: theme.neutral.transparent10 }),
+                /* @__PURE__ */ jsx(Center, { sx: { cursor: "pointer", borderRadius: 24 }, bg: theme.bg.navIconsBg, h: 40, w: 40, onClick: onSettingsIconClick, children: /* @__PURE__ */ jsx(SettingsBarSolid, { size: 22, color: "secondary" }) })
+              ] })
             ] }),
-            /* @__PURE__ */ jsx(Stack$1, { gap: 5, children: footerContent })
+            isAiOpened && isNavbarNotCollapsed && aiNavbarContent,
+            isNavbarNotCollapsed && !isAiOpened && /* @__PURE__ */ jsxs(Stack$1, { justify: "space-between", w: "100%", pt: 16, pb: 10, px: 12, children: [
+              /* @__PURE__ */ jsxs(Stack$1, { gap: 5, children: [
+                /* @__PURE__ */ jsxs(Flex, { mb: 24, style: { width: "100%" }, justify: "space-between", align: "center", children: [
+                  /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "10px", children: [
+                    isBackButtonVisible ? /* @__PURE__ */ jsx(Center, { onClick: onBackClick, sx: { borderRadius: 4, cursor: "pointer", padding: 2, background: theme.bg.navIconsBg }, children: /* @__PURE__ */ jsx(ArrowLeftSolid, { size: 18 }) }) : /* @__PURE__ */ jsx(Center, { sx: { borderRadius: 4, padding: 2, background: theme.bg.navIconsBg }, children: pageItem.pageIcon ? /* @__PURE__ */ jsx(pageItem.pageIcon, { size: 18 }) : /* @__PURE__ */ jsx(Globe, { size: 18 }) }),
+                    /* @__PURE__ */ jsx(Text$1, { lh: 1, c: theme.text.overPicture, children: pageItem.pageTitle || "Unknown" })
+                  ] }),
+                  isAiBtnVisible && !isAiOpened && /* @__PURE__ */ jsx(
+                    Center,
+                    {
+                      sx: {
+                        cursor: "pointer",
+                        borderRadius: 8,
+                        transition: "background 0.15s",
+                        background: theme.neutral.transparent10,
+                        "&:hover": {
+                          background: theme.neutral.transparent30
+                        }
+                      },
+                      p: 4,
+                      onClick: onAiOpen,
+                      children: /* @__PURE__ */ jsx(Assistant, { size: 18, color: "primary" })
+                    }
+                  )
+                ] }),
+                loading ? /* @__PURE__ */ jsx(Stack$1, { gap: 5, children: Array.from({ length: 6 }).map((_, idx) => /* @__PURE__ */ jsx(NavigationItemSkeleton, {}, idx)) }) : menuItems?.map((item) => /* @__PURE__ */ jsx(MenuItem, { onMenuItemClick, item }, item.id)),
+                roomCategories && roomCategories.length > 0 && /* @__PURE__ */ jsx(Stack$1, { gap: 8, mt: 16, children: roomCategories.map((category) => /* @__PURE__ */ jsx(RoomCategory, { category }, category.id)) })
+              ] }),
+              /* @__PURE__ */ jsx(Stack$1, { gap: 5, children: footerContent })
+            ] })
           ] })
         ] }) }),
         /* @__PURE__ */ jsx(AppShell.Main, { children }),
@@ -5684,13 +5794,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-DFVmSv_s.js"));
-const Header$1 = lazy(() => import("./index-DLS4Rlpw.js"));
-const Content = lazy(() => import("./index-B1iDlIBb.js"));
+const MainAction = lazy(() => import("./index-BwGm7BDz.js"));
+const Header$1 = lazy(() => import("./index-D--aZB3M.js"));
+const Content = lazy(() => import("./index-BgMqOKWQ.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-DlJaYoXJ.js"));
-const Actions = lazy(() => import("./index-C5Vs6UTu.js"));
+const Assets = lazy(() => import("./index-CJFj_oLr.js"));
+const Actions = lazy(() => import("./index-BUiJr7Uj.js"));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = useRef(null);
@@ -11005,4 +11115,4 @@ export {
   CardHero as y,
   CardSelector as z
 };
-//# sourceMappingURL=components-CR3XazP1.js.map
+//# sourceMappingURL=components-C94tOtsd.js.map