@layers-app/shared 0.2.4 → 0.2.5

package/dist/components/AliasTextInput/AliasTextInput.js

@@ -1,70 +1,79 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import { Stack as v, Flex as c, Text as n, TextInput as h, Loader as f } from "@mantine/core";
-const w = ({
-  form: d,
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { HelpCircleIcon as v } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as g } from "@hugeicons/react";
+import { Stack as x, Flex as l, Text as c, TextInput as y, Loader as w, Box as z, Tooltip as L } from "@mantine/core";
+const H = ({
+  form: p,
   label: e,
-  disabled: r,
-  localization: { aliasPlaceholder: s },
-  stackProps: u,
-  flexProps: i,
-  textInputProps: a,
-  isCheckingAlias: m
+  disabled: o,
+  localization: { aliasPlaceholder: a },
+  stackProps: m,
+  flexProps: d,
+  textInputProps: s,
+  isCheckingAlias: u,
+  previewMode: n = !1,
+  tooltipLabel: h
 }) => {
-  const { error: t, ...p } = d;
-  return /* @__PURE__ */ l(v, { gap: 5, ...u, children: [
-    e ? typeof e == "string" ? /* @__PURE__ */ o(n, { fw: 500, fz: "xs", lh: "sm", children: e }) : e : null,
-    /* @__PURE__ */ l(
-      c,
+  const { error: t, ...f } = p;
+  return /* @__PURE__ */ i(x, { gap: 5, ...m, children: [
+    e ? typeof e == "string" ? /* @__PURE__ */ r(c, { fw: 500, fz: "xs", lh: "sm", children: e }) : e : null,
+    /* @__PURE__ */ i(
+      l,
       {
-        pl: 12,
-        gap: 0,
-        ...i,
+        px: 12,
+        gap: "sm",
+        ...d,
         style: {
           border: `1px solid ${t ? "var(--mantine-color-error)" : "var(--mantine-color-default-border)"}`,
           borderRadius: "var(--mantine-radius-default)",
-          color: r ? "var(--input-disabled-color)" : void 0,
-          background: r ? "var(--mantine-color-disabled)" : void 0,
-          opacity: r ? 0.6 : 1,
-          cursor: r ? "not-allowed" : void 0,
-          ...i?.style
+          color: o ? "var(--input-disabled-color)" : void 0,
+          background: o ? "var(--mantine-color-disabled)" : void 0,
+          opacity: o ? 0.6 : 1,
+          overflow: "hidden",
+          cursor: o ? "not-allowed" : n ? "pointer" : void 0,
+          ...d?.style
         },
         children: [
-          /* @__PURE__ */ o(c, { align: "center", children: /* @__PURE__ */ o(
-            n,
-            {
-              fw: 400,
-              c: r ? "var(--mantine-color-dimmed)" : "var(--mantine-color-gray-text)",
-              lh: "sm",
-              style: { whiteSpace: "nowrap" },
-              children: "app.layers.md/"
-            }
-          ) }),
-          /* @__PURE__ */ o(
-            h,
-            {
-              w: "100%",
-              placeholder: s,
-              variant: "unstyled",
-              leftSectionWidth: "auto",
-              maxLength: 50,
-              disabled: r,
-              rightSection: m ? /* @__PURE__ */ o(f, { size: 14 }) : void 0,
-              ...p,
-              ...a,
-              styles: {
-                input: {
-                  cursor: r ? "not-allowed" : void 0
-                },
-                ...a?.styles
+          /* @__PURE__ */ i(l, { gap: 0, flex: 1, align: "center", children: [
+            /* @__PURE__ */ r(l, { align: "center", children: /* @__PURE__ */ r(
+              c,
+              {
+                fw: 400,
+                c: o ? "dimmed" : "gray",
+                lh: "sm",
+                style: { whiteSpace: "nowrap" },
+                children: "app.layers.md/"
               }
-            }
-          )
+            ) }),
+            /* @__PURE__ */ r(
+              y,
+              {
+                w: "100%",
+                placeholder: a,
+                variant: "unstyled",
+                leftSectionWidth: "auto",
+                maxLength: 50,
+                disabled: o,
+                rightSection: u ? /* @__PURE__ */ r(w, { size: 14 }) : void 0,
+                ...f,
+                ...s,
+                styles: {
+                  input: {
+                    pointerEvents: n ? "none" : void 0,
+                    cursor: o ? "not-allowed" : void 0
+                  },
+                  ...s?.styles
+                }
+              }
+            )
+          ] }),
+          n && /* @__PURE__ */ r(z, { w: 20, h: 20, children: /* @__PURE__ */ r(L, { label: h || a, children: /* @__PURE__ */ r(g, { size: 20, color: "gray", icon: v }) }) })
         ]
       }
     ),
-    t && /* @__PURE__ */ o(n, { fz: "xs", c: "var(--mantine-color-error)", children: t })
+    t && /* @__PURE__ */ r(c, { fz: "xs", c: "var(--mantine-color-error)", children: t })
   ] });
 };
 export {
-  w as AliasTextInput
+  H as AliasTextInput
 };

package/dist/components/AppContainer/AppContainer.d.ts

@@ -5,7 +5,7 @@ declare global {
         preSignMode?: boolean;
     }
 }
-export declare const AppContainer: (({ header, content, toolbar, navbarTitle, footer, onTitleChange, trashMenu, rightbar, onInviteClick, showAppsSidebar, headerBorderless, }: AppContainerProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const AppContainer: (({ header, content, toolbar, navbarTitle, footer, onTitleChange, trashMenu, rightbar, onInviteClick, showAppsSidebar, headerBorderless, withBg, }: AppContainerProps) => import("react/jsx-runtime").JSX.Element) & {
     NavbarContent: ({ children }: import("react").PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
     NewButton: ({ children, ...props }: import("@mantine/core").PolymorphicComponentProps<"button", import("@mantine/core").ButtonProps>) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/AppContainer/AppContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppContainer.d.ts","sourceRoot":"","sources":["../../../src/components/AppContainer/AppContainer.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;CACF;AAyED,eAAO,MAAM,YAAY,8IA3DtB,iBAAiB;;;CA8DlB,CAAC"}
+{"version":3,"file":"AppContainer.d.ts","sourceRoot":"","sources":["../../../src/components/AppContainer/AppContainer.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB;CACF;AA0ED,eAAO,MAAM,YAAY,sJA3DtB,iBAAiB;;;CA8DlB,CAAC"}

package/dist/components/AppContainer/AppContainer.js

@@ -1,64 +1,67 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { useEffect as y } from "react";
-import { useMantineColorScheme as v, Stack as A, Flex as j } from "@mantine/core";
-import { useQueryParam as k } from "../../hooks/useNumberQueryParam.js";
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { useEffect as T } from "react";
+import { useMantineColorScheme as j, Stack as B, Flex as D } from "@mantine/core";
+import { isAppMode as H } from "../../helpers/isAppMode.js";
+import { useQueryParam as M } from "../../hooks/useNumberQueryParam.js";
 import { AppShell as e } from "../AppShell/AppShell.js";
-import { AppsSidebar as B } from "./components/AppsSidebar/AppsSidebar.js";
-import { Header as H } from "./components/Header.js";
-import { Main as N } from "./components/Main.js";
-import T from "./components/NavbarContent.js";
-import { RightSidebar as W } from "./components/RightSidebar.js";
-import { ToolSidebar as M } from "./components/ToolSidebar.js";
-import { ToolbarNewButton as P } from "./components/ToolbarNewButton.js";
-import { appContainerStore as $ } from "./hooks/useAppContainerStore.js";
-const E = ({
-  header: h,
-  content: l,
+import { AppsSidebar as N } from "./components/AppsSidebar/AppsSidebar.js";
+import { Header as P } from "./components/Header.js";
+import { Main as W } from "./components/Main.js";
+import E from "./components/NavbarContent.js";
+import { RightSidebar as O } from "./components/RightSidebar.js";
+import { ToolSidebar as $ } from "./components/ToolSidebar.js";
+import { ToolbarNewButton as F } from "./components/ToolbarNewButton.js";
+import { appContainerStore as K } from "./hooks/useAppContainerStore.js";
+import { useAppContainerDataStore as Q } from "./hooks/useAppContainerDataStore.js";
+const R = ({
+  header: l,
+  content: h,
   toolbar: i,
   navbarTitle: d,
   footer: n,
-  onTitleChange: s,
-  trashMenu: c,
+  onTitleChange: c,
+  trashMenu: f,
   rightbar: m,
-  onInviteClick: f,
-  showAppsSidebar: b = !0,
-  headerBorderless: u = !1
+  onInviteClick: u,
+  showAppsSidebar: S = !0,
+  headerBorderless: b = !1,
+  withBg: x = !1
 }) => {
-  const { toolbarWidth: S, rightbarWidth: x, layout: a } = $.useStore(), { setColorScheme: p } = v(), t = k("theme");
-  y(() => {
-    (t === "dark" || t === "light") && p(t);
-  }, [t, p]);
-  const w = {
-    "--toolbar-width": `${S}px`,
-    "--rightbar-width": `${x}px`
-  }, g = a !== "nothing", C = a === "default" && i;
-  return /* @__PURE__ */ o(e, { style: w, children: [
-    b && /* @__PURE__ */ r(e.Section, { w: "var(--apps-sidebar-width)", children: /* @__PURE__ */ r(B, { onInviteClick: f, trashMenu: c }) }),
-    /* @__PURE__ */ o(e.Section, { flex: 1, display: "flex", pos: "relative", children: [
-      C && /* @__PURE__ */ r(M, { onTitleChange: s, navbarTitle: d, children: i }),
-      /* @__PURE__ */ o(A, { mih: 0, gap: 0, h: "100%", flex: 2, miw: 0, children: [
-        g && /* @__PURE__ */ r(
+  const { toolbarWidth: w, rightbarWidth: C, layout: p } = K.useStore(), g = Q((v) => v.user), a = H(g.mode, "DESKTOP"), { setColorScheme: s } = j(), t = M("theme");
+  T(() => {
+    !a && (t === "dark" || t === "light") && s(t);
+  }, [t, s, a]);
+  const A = {
+    "--toolbar-width": `${w}px`,
+    "--rightbar-width": `${C}px`
+  }, y = p !== "nothing", k = p === "default" && i;
+  return /* @__PURE__ */ r(e, { style: A, children: [
+    S && /* @__PURE__ */ o(e.Section, { w: "var(--apps-sidebar-width)", children: /* @__PURE__ */ o(N, { onInviteClick: u, trashMenu: f }) }),
+    /* @__PURE__ */ r(e.Section, { flex: 1, display: "flex", pos: "relative", children: [
+      k && /* @__PURE__ */ o($, { onTitleChange: c, navbarTitle: d, children: i }),
+      /* @__PURE__ */ r(B, { mih: 0, gap: 0, h: "100%", flex: 2, miw: 0, children: [
+        y && /* @__PURE__ */ o(
           e.Header,
           {
             px: "sm",
-            style: u ? { borderBottom: "none" } : void 0,
-            children: /* @__PURE__ */ r(H, { children: h })
+            style: b ? { borderBottom: "none" } : void 0,
+            children: /* @__PURE__ */ o(P, { children: l })
           }
         ),
-        /* @__PURE__ */ o(j, { mih: 0, gap: 0, h: "100%", children: [
-          /* @__PURE__ */ r(e.WorkContent, { children: /* @__PURE__ */ o(N, { children: [
-            l,
-            n && /* @__PURE__ */ r("footer", { children: n })
+        /* @__PURE__ */ r(D, { mih: 0, gap: 0, h: "100%", children: [
+          /* @__PURE__ */ o(e.WorkContent, { children: /* @__PURE__ */ r(W, { withBg: x, children: [
+            h,
+            n && /* @__PURE__ */ o("footer", { children: n })
           ] }) }),
-          m && /* @__PURE__ */ r(W, { children: m })
+          m && /* @__PURE__ */ o(O, { children: m })
         ] })
       ] })
     ] })
   ] });
-}, U = Object.assign(E, {
-  NavbarContent: T,
-  NewButton: P
+}, to = Object.assign(R, {
+  NavbarContent: E,
+  NewButton: F
 });
 export {
-  U as AppContainer
+  to as AppContainer
 };

package/dist/components/AppContainer/AppContainer.module.css.js

@@ -1,4 +1,4 @@
-const t = "_toolTitleInput_117jg_19", n = "_appSidebarButton_117jg_34", o = "_slideContainer_117jg_52", e = "_slideContent_117jg_58", i = "_main_117jg_73", s = {
+const t = "_toolTitleInput_14hbr_19", n = "_appSidebarButton_14hbr_34", o = "_slideContainer_14hbr_55", e = "_slideContent_14hbr_61", i = "_main_14hbr_76", s = {
   toolTitleInput: t,
   appSidebarButton: n,
   slideContainer: o,

package/dist/components/AppContainer/components/AppSidebarButton.js

@@ -29,7 +29,7 @@ const h = c(({ title: r, icon: a, active: e, onClick: o }, i) => /* @__PURE__ */
           fw: 500,
           lh: 1.4,
           c: "var(--app-container-title-color)",
-          px: 8,
+          px: 4,
           truncate: !0,
           ta: "center",
           w: "var(--apps-sidebar-width)",

package/dist/components/AppContainer/components/AppsSidebar/AppsSection.js

@@ -1,5 +1,5 @@
 import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import { useTranslation as l } from "react-i18next";
+import { useTranslation as s } from "react-i18next";
 import { matchPath as m } from "react-router-dom";
 import { More01Icon as d } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as h } from "@hugeicons/react";
@@ -9,16 +9,16 @@ import { appContainerStore as g } from "../../hooks/useAppContainerStore.js";
 import { AppSidebarButton as n } from "../AppSidebarButton.js";
 import { MoreMenu as w } from "../menus/MoreMenu.js";
 const y = () => {
-  const { t: p } = l("appContainer"), { hiddenTools: a } = g.useStore(), { tools: i, publicMode: c } = S();
+  const { t: p } = s("appContainer"), { hiddenTools: a } = g.useStore(), { tools: i, publicMode: c } = S();
   return /* @__PURE__ */ r(
     f,
     {
       w: "var(--apps-sidebar-width)",
       style: { borderTop: "1px solid var(--app-shell-border)" },
       py: 8,
-      children: /* @__PURE__ */ t(u, { gap: "sm", align: "center", children: [
+      children: /* @__PURE__ */ t(u, { gap: 8, align: "center", children: [
         i?.filter((o) => !a.includes(o.id))?.map((o) => {
-          const s = !!m(
+          const l = !!m(
             { path: o.path, end: !1 },
             window.location.pathname
           );
@@ -27,7 +27,7 @@ const y = () => {
             {
               title: o.name,
               icon: o.icon(),
-              active: s,
+              active: l,
               onClick: o.onClick
             },
             o.id

package/dist/components/AppContainer/components/AppsSidebar/UserSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/AppContainer/components/AppsSidebar/UserSection.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,WAAW,GAAI,+BAGzB;IACD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,4CA2EA,CAAC"}
+{"version":3,"file":"UserSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/AppContainer/components/AppsSidebar/UserSection.tsx"],"names":[],"mappings":"AAsBA,eAAO,MAAM,WAAW,GAAI,+BAGzB;IACD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,4CAyFA,CAAC"}

package/dist/components/AppContainer/components/AppsSidebar/UserSection.js

@@ -1,21 +1,22 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { useTranslation as g } from "react-i18next";
-import { Link as u } from "react-router-dom";
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { useTranslation as M } from "react-i18next";
+import { Link as T } from "react-router-dom";
 import { Delete03Icon as w, UserAdd02Icon as I, HelpCircleIcon as b } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as t } from "@hugeicons/react";
-import { Stack as s, Menu as e, Tooltip as x, ActionIcon as T } from "@mantine/core";
-import { IconUserCircle as z } from "@tabler/icons-react";
-import { useAppContainerDataStore as A } from "../../hooks/useAppContainerDataStore.js";
-import { AppSidebarButton as p } from "../AppSidebarButton.js";
-import { HelpMenu as D } from "../menus/HelpMenu/HelpMenu.js";
-import { MenuUserDropdown as M } from "../menus/UserMenu/MenuUserDropdown.js";
-const q = ({
-  trashMenu: h,
+import { HugeiconsIcon as s } from "@hugeicons/react";
+import { Stack as p, Menu as e, Tooltip as x, ActionIcon as z } from "@mantine/core";
+import { IconUserCircle as A } from "@tabler/icons-react";
+import { useTrashModalStore as C, openTrashModal as D, closeTrashModal as S } from "../../../../store/trashModal.js";
+import { useAppContainerDataStore as U } from "../../hooks/useAppContainerDataStore.js";
+import { AppSidebarButton as l } from "../AppSidebarButton.js";
+import { HelpMenu as j } from "../menus/HelpMenu/HelpMenu.js";
+import { MenuUserDropdown as v } from "../menus/UserMenu/MenuUserDropdown.js";
+const N = ({
+  trashMenu: m,
   onInviteClick: c
 }) => {
-  const { t: r } = g("appContainer"), { user: l, isAnonym: n, userMenuItems: a, publicMode: f } = A(), d = !n && !f && l.role !== "mG", m = !n && c;
-  return /* @__PURE__ */ i(
-    s,
+  const { t: i } = M("appContainer"), { user: d, isAnonym: n, userMenuItems: f, publicMode: g } = U(), u = C((t) => t.opened), a = !n && !g && d.role !== "mG", h = !n && c;
+  return /* @__PURE__ */ r(
+    p,
     {
       style: { borderTop: "1px solid var(--app-shell-border)" },
       flex: 1,
@@ -23,51 +24,63 @@ const q = ({
       gap: 16,
       align: "center",
       children: [
-        /* @__PURE__ */ i(
-          s,
+        /* @__PURE__ */ r(
+          p,
           {
-            justify: !d && !m ? "end" : "space-between",
+            justify: !a && !h ? "end" : "space-between",
             gap: 8,
             flex: 1,
             children: [
-              d && /* @__PURE__ */ i(e, { position: "right", offset: 6, width: 360, children: [
-                /* @__PURE__ */ o(e.Target, { children: /* @__PURE__ */ o(
-                  p,
+              a && /* @__PURE__ */ r(
+                e,
+                {
+                  position: "right",
+                  offset: 6,
+                  width: 360,
+                  opened: u,
+                  onChange: (t) => {
+                    t ? D() : S();
+                  },
+                  children: [
+                    /* @__PURE__ */ o(e.Target, { children: /* @__PURE__ */ o(
+                      l,
+                      {
+                        title: i("trash"),
+                        icon: /* @__PURE__ */ o(s, { icon: w, size: 20 })
+                      }
+                    ) }),
+                    /* @__PURE__ */ o(e.Dropdown, { children: m })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r(p, { gap: 8, children: [
+                h && /* @__PURE__ */ o(
+                  l,
                   {
-                    title: r("trash"),
-                    icon: /* @__PURE__ */ o(t, { icon: w, size: 20 })
-                  }
-                ) }),
-                /* @__PURE__ */ o(e.Dropdown, { children: h })
-              ] }),
-              /* @__PURE__ */ i(s, { gap: 8, children: [
-                m && /* @__PURE__ */ o(
-                  p,
-                  {
-                    title: r("invite"),
-                    icon: /* @__PURE__ */ o(t, { icon: I, size: 20 }),
+                    title: i("invite"),
+                    icon: /* @__PURE__ */ o(s, { icon: I, size: 20 }),
                     onClick: c
                   }
                 ),
-                /* @__PURE__ */ i(e, { position: "right-end", offset: 6, width: 260, children: [
+                /* @__PURE__ */ r(e, { position: "right-end", offset: 6, width: 260, children: [
                   /* @__PURE__ */ o(e.Target, { children: /* @__PURE__ */ o(
-                    p,
+                    l,
                     {
-                      title: r("help"),
-                      icon: /* @__PURE__ */ o(t, { icon: b, size: 20 })
+                      title: i("help"),
+                      icon: /* @__PURE__ */ o(s, { icon: b, size: 20 })
                     }
                   ) }),
-                  /* @__PURE__ */ o(e.Dropdown, { children: /* @__PURE__ */ o(D, {}) })
+                  /* @__PURE__ */ o(e.Dropdown, { children: /* @__PURE__ */ o(j, {}) })
                 ] })
               ] })
             ]
           }
         ),
-        n ? /* @__PURE__ */ o(u, { to: "/login", children: /* @__PURE__ */ o(x, { label: "Log in", position: "right", children: /* @__PURE__ */ o(T, { size: "lg", variant: "light", children: /* @__PURE__ */ o(z, { size: 20 }) }) }) }) : /* @__PURE__ */ o(
-          M,
+        n ? /* @__PURE__ */ o(T, { to: "/login", children: /* @__PURE__ */ o(x, { label: "Log in", position: "right", children: /* @__PURE__ */ o(z, { size: "lg", variant: "light", children: /* @__PURE__ */ o(A, { size: 20 }) }) }) }) : /* @__PURE__ */ o(
+          v,
           {
-            user: l,
-            menuItems: a,
+            user: d,
+            menuItems: f,
             position: "right-end"
           }
         )
@@ -76,5 +89,5 @@ const q = ({
   );
 };
 export {
-  q as UserSection
+  N as UserSection
 };

package/dist/components/AppContainer/components/Main.d.ts

@@ -1,3 +1,7 @@
 import { PropsWithChildren } from 'react';
-export declare const Main: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+type MainProps = PropsWithChildren<{
+    withBg?: boolean;
+}>;
+export declare const Main: ({ children, withBg }: MainProps) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=Main.d.ts.map

package/dist/components/AppContainer/components/Main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../../src/components/AppContainer/components/Main.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM1C,eAAO,MAAM,IAAI,GAAI,cAAc,iBAAiB,4CAYnD,CAAC"}
+{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../../src/components/AppContainer/components/Main.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM1C,KAAK,SAAS,GAAG,iBAAiB,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AAEH,eAAO,MAAM,IAAI,GAAI,sBAA8B,SAAS,4CAiB3D,CAAC"}

package/dist/components/AppContainer/components/Main.js

@@ -1,14 +1,17 @@
-import { jsx as t } from "react/jsx-runtime";
-import { appContainerStore as e } from "../hooks/useAppContainerStore.js";
-import n from "../AppContainer.module.css.js";
-const p = ({ children: o }) => {
-  const r = e.useStore((a) => a.showToolbar);
-  return /* @__PURE__ */ t(
+import { jsx as e } from "react/jsx-runtime";
+import { appContainerStore as n } from "../hooks/useAppContainerStore.js";
+import s from "../AppContainer.module.css.js";
+const p = ({ children: o, withBg: r = !1 }) => {
+  const a = n.useStore((t) => t.showToolbar);
+  return /* @__PURE__ */ e(
     "main",
     {
-      className: n.main,
-      "data-tool-sidebar-opened": r,
+      className: s.main,
+      "data-tool-sidebar-opened": a,
       "data-app-container": !0,
+      style: {
+        backgroundColor: r ? "light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))" : "unset"
+      },
       children: o
     }
   );

package/dist/components/AppContainer/components/menus/HelpMenu/HelpMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/AppContainer/components/menus/HelpMenu/HelpMenu.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,QAAQ,+CA2GpB,CAAC"}
+{"version":3,"file":"HelpMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/AppContainer/components/menus/HelpMenu/HelpMenu.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,QAAQ,+CAuHpB,CAAC"}

package/dist/components/AppContainer/components/menus/HelpMenu/HelpMenu.js

@@ -1,25 +1,40 @@
 import { jsxs as o, jsx as e, Fragment as d } from "react/jsx-runtime";
 import { useTranslation as g } from "react-i18next";
-import { DiscountTag02Icon as f, CustomerSupportIcon as u, Layers01Icon as S, BookOpen01Icon as I, LicenseIcon as b } from "@hugeicons/core-free-icons";
+import { DiscountTag02Icon as f, CustomerSupportIcon as u, Layers01Icon as S, BookOpen01Icon as b, LicenseIcon as I } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as n } from "@hugeicons/react";
-import { Stack as v, Button as s, Menu as i, Text as k } from "@mantine/core";
-import w from "../../../../../assets/svg/discord-icon.svg.js";
+import { Stack as w, Button as r, Menu as i, Text as v } from "@mantine/core";
+import k from "../../../../../assets/svg/discord-icon.svg.js";
 import y from "../../../../../assets/svg/telegram-icon.svg.js";
-import { useAppContainerDataStore as D } from "../../../hooks/useAppContainerDataStore.js";
-import { WhatsNew as z } from "./WhatsNew.js";
-const P = () => {
+import D from "../../../../../assets/svg/whatsapp-icon.svg.js";
+import { useAppContainerDataStore as z } from "../../../hooks/useAppContainerDataStore.js";
+import { WhatsNew as j } from "./WhatsNew.js";
+const B = () => {
   const { t } = g("helpMenu"), {
-    showMessenger: r,
+    showMessenger: s,
     showNewMessage: a,
     version: m,
     updatedAt: l,
     privacyPolicyLink: p,
     userAgreementLink: h,
     whatsNewItems: c
-  } = D();
-  return /* @__PURE__ */ o(v, { gap: 6, p: 4, children: [
+  } = z();
+  return /* @__PURE__ */ o(w, { gap: 6, p: 4, children: [
     /* @__PURE__ */ e(
-      s,
+      r,
+      {
+        component: "a",
+        href: "https://wa.me/37378291264",
+        target: "_blank",
+        bg: "#00C000",
+        leftSection: /* @__PURE__ */ e(D, { width: 16, height: 16 }),
+        c: "white",
+        size: "sm",
+        justify: "flex-start",
+        children: t("joinWhatsApp")
+      }
+    ),
+    /* @__PURE__ */ e(
+      r,
       {
         component: "a",
         href: "https://t.me/layers_app",
@@ -33,13 +48,13 @@ const P = () => {
       }
     ),
     /* @__PURE__ */ e(
-      s,
+      r,
       {
         component: "a",
         href: "https://discord.gg/mEd2PbchRD",
         target: "_blank",
         bg: "indigo.5",
-        leftSection: /* @__PURE__ */ e(w, { width: 16, height: 16 }),
+        leftSection: /* @__PURE__ */ e(k, { width: 16, height: 16 }),
         c: "white",
         size: "sm",
         justify: "flex-start",
@@ -51,7 +66,7 @@ const P = () => {
       i.Item,
       {
         onClick: () => {
-          r(), a(t("contactSalesMessage"));
+          s(), a(t("contactSalesMessage"));
         },
         leftSection: /* @__PURE__ */ e(n, { icon: f, size: 16 }),
         children: t("contactSales")
@@ -60,7 +75,7 @@ const P = () => {
     /* @__PURE__ */ e(
       i.Item,
       {
-        onClick: r,
+        onClick: s,
         leftSection: /* @__PURE__ */ e(n, { icon: u, size: 16 }),
         children: t("getSupport")
       }
@@ -83,7 +98,7 @@ const P = () => {
         component: "a",
         target: "_blank",
         href: h,
-        leftSection: /* @__PURE__ */ e(n, { icon: I, size: 16 }),
+        leftSection: /* @__PURE__ */ e(n, { icon: b, size: 16 }),
         children: t("userAgreement")
       }
     ),
@@ -94,16 +109,16 @@ const P = () => {
         component: "a",
         target: "_blank",
         href: p,
-        leftSection: /* @__PURE__ */ e(n, { icon: b, size: 16 }),
+        leftSection: /* @__PURE__ */ e(n, { icon: I, size: 16 }),
         children: t("termsAndPrivacy")
       }
     ),
     /* @__PURE__ */ e(i.Divider, {}),
     !!c?.length && /* @__PURE__ */ o(d, { children: [
-      /* @__PURE__ */ e(z, { items: c }),
+      /* @__PURE__ */ e(j, { items: c }),
       /* @__PURE__ */ e(i.Divider, {})
     ] }),
-    /* @__PURE__ */ o(k, { size: "xs", c: "dimmed", children: [
+    /* @__PURE__ */ o(v, { size: "xs", c: "dimmed", children: [
       t("updated"),
       " ",
       l,
@@ -118,5 +133,5 @@ const P = () => {
   ] });
 };
 export {
-  P as HelpMenu
+  B as HelpMenu
 };

package/dist/components/AppContainer/components/menus/HelpMenu/HelpMenu.module.css.js

@@ -1,4 +1,4 @@
-const t = "_dot_1x557_1", o = "_line_1x557_9", e = {
+const t = "_dot_h8jhb_1", o = "_line_h8jhb_9", e = {
   dot: t,
   line: o
 };