@layers-app/shared 0.2.8 → 0.3.1

package/dist/components/AppContainer/AppContainer.js

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

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":"AAuBA,eAAO,MAAM,WAAW,GAAI,+BAGzB;IACD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,4CAqGA,CAAC"}
+{"version":3,"file":"UserSection.d.ts","sourceRoot":"","sources":["../../../../../src/components/AppContainer/components/AppsSidebar/UserSection.tsx"],"names":[],"mappings":"AAyBA,eAAO,MAAM,WAAW,GAAI,+BAGzB;IACD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,4CA8JA,CAAC"}

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

@@ -1,23 +1,23 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { useTranslation as I } from "react-i18next";
-import { Link as v } from "react-router-dom";
-import { Delete03Icon as x, UserAdd02Icon as A, HelpCircleIcon as D } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as p } from "@hugeicons/react";
-import { Stack as a, Menu as r, Tooltip as t, ActionIcon as z } from "@mantine/core";
-import { IconUserCircle as C } from "@tabler/icons-react";
-import { usePlatform as S } from "../../../../hooks/usePlatform.js";
-import { useTrashModalStore as U, openTrashModal as y, closeTrashModal as L } from "../../../../store/trashModal.js";
-import { useAppContainerDataStore as j } from "../../hooks/useAppContainerDataStore.js";
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { useTranslation as O } from "react-i18next";
+import { Link as D } from "react-router-dom";
+import { Delete03Icon as E, UserAdd02Icon as x, HelpCircleIcon as A, Wifi01Icon as M, WifiDisconnected04Icon as L } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as s } from "@hugeicons/react";
+import { Stack as d, Menu as r, Tooltip as l, Box as I, ActionIcon as U } from "@mantine/core";
+import { IconUserCircle as F } from "@tabler/icons-react";
+import { usePlatform as R } from "../../../../hooks/usePlatform.js";
+import { useTrashModalStore as k, openTrashModal as z, closeTrashModal as j } from "../../../../store/trashModal.js";
+import { useAppContainerDataStore as G } from "../../hooks/useAppContainerDataStore.js";
 import { AppSidebarButton as c } from "../AppSidebarButton.js";
 import { HelpMenu as H } from "../menus/HelpMenu/HelpMenu.js";
-import { MenuUserDropdown as k } from "../menus/UserMenu/MenuUserDropdown.js";
-const W = ({
-  trashMenu: u,
-  onInviteClick: d
+import { MenuUserDropdown as K } from "../menus/UserMenu/MenuUserDropdown.js";
+const io = ({
+  trashMenu: C,
+  onInviteClick: h
 }) => {
-  const { t: e } = I("appContainer"), g = S(), { user: h, isAnonym: s, userMenuItems: b, publicMode: w, navbarDisplayFormat: M } = j(), T = U((l) => l.opened), m = !s && !w && h.role !== "mG", f = !s && g.has("inviteUsers") && d, i = M === "iconsAndLabels";
-  return /* @__PURE__ */ n(
-    a,
+  const { t: i } = O("appContainer"), m = R(), { user: f, isAnonym: p, userMenuItems: T, publicMode: S, navbarDisplayFormat: v, onSyncClick: g, syncState: N } = G(), w = k((e) => e.opened), u = !p && !S && f.role !== "mG", y = !p && m.has("inviteUsers") && h, n = v === "iconsAndLabels";
+  return /* @__PURE__ */ t(
+    d,
     {
       style: { borderTop: "1px solid var(--app-shell-border)" },
       flex: 1,
@@ -25,71 +25,106 @@ const W = ({
       gap: 16,
       align: "center",
       children: [
-        /* @__PURE__ */ n(
-          a,
+        /* @__PURE__ */ t(
+          d,
           {
-            justify: !m && !f ? "end" : "space-between",
+            justify: !u && !y ? "end" : "space-between",
             gap: 8,
             flex: 1,
             children: [
-              m && /* @__PURE__ */ n(
+              u && /* @__PURE__ */ t(
                 r,
                 {
                   position: "right",
                   offset: 6,
                   width: 360,
-                  opened: T,
-                  onChange: (l) => {
-                    l ? y() : L();
+                  opened: w,
+                  onChange: (e) => {
+                    e ? z() : j();
                   },
                   children: [
                     /* @__PURE__ */ o(r.Target, { children: /* @__PURE__ */ o(
-                      t,
+                      l,
                       {
-                        label: e("trash"),
+                        label: i("trash"),
                         position: "right",
-                        disabled: i,
+                        disabled: n,
                         children: /* @__PURE__ */ o(
                           c,
                           {
-                            title: i ? e("trash") : null,
-                            icon: /* @__PURE__ */ o(p, { icon: x, size: 20 })
+                            title: n ? i("trash") : null,
+                            icon: /* @__PURE__ */ o(s, { icon: E, size: 20 })
                           }
                         )
                       }
                     ) }),
-                    /* @__PURE__ */ o(r.Dropdown, { children: u })
+                    /* @__PURE__ */ o(r.Dropdown, { children: C })
                   ]
                 }
               ),
-              /* @__PURE__ */ n(a, { gap: 8, children: [
-                f && /* @__PURE__ */ o(t, { label: e("invite"), position: "right", disabled: i, children: /* @__PURE__ */ o(
+              /* @__PURE__ */ t(d, { gap: 8, children: [
+                y && /* @__PURE__ */ o(l, { label: i("invite"), position: "right", disabled: n, children: /* @__PURE__ */ o(
                   c,
                   {
-                    title: i ? e("invite") : null,
-                    icon: /* @__PURE__ */ o(p, { icon: A, size: 20 }),
-                    onClick: d
+                    title: n ? i("invite") : null,
+                    icon: /* @__PURE__ */ o(s, { icon: x, size: 20 }),
+                    onClick: h
                   }
                 ) }),
-                /* @__PURE__ */ n(r, { position: "right-end", offset: 6, width: 260, children: [
-                  /* @__PURE__ */ o(r.Target, { children: /* @__PURE__ */ o(t, { label: e("help"), position: "right", disabled: i, children: /* @__PURE__ */ o(
+                /* @__PURE__ */ t(r, { position: "right-end", offset: 6, width: 260, children: [
+                  /* @__PURE__ */ o(r.Target, { children: /* @__PURE__ */ o(l, { label: i("help"), position: "right", disabled: n, children: /* @__PURE__ */ o(
                     c,
                     {
-                      title: i ? e("help") : null,
-                      icon: /* @__PURE__ */ o(p, { icon: D, size: 20 })
+                      title: n ? i("help") : null,
+                      icon: /* @__PURE__ */ o(s, { icon: A, size: 20 })
                     }
                   ) }) }),
                   /* @__PURE__ */ o(r.Dropdown, { children: /* @__PURE__ */ o(H, {}) })
-                ] })
+                ] }),
+                m.isDesktop && g && (() => {
+                  const e = (N || "").toUpperCase(), a = e === "SYNCED" || e === "OK", b = a ? "var(--mantine-color-green-6)" : e === "SYNCING" ? "var(--mantine-color-blue-6)" : e === "ERROR" || e === "CONFLICT" || e === "OFFLINE" ? "var(--mantine-color-red-6)" : e === "ATTENTION" ? "var(--mantine-color-orange-6)" : "var(--mantine-color-yellow-6)";
+                  return /* @__PURE__ */ o(l, { label: i(a ? "sync.tooltipSynced" : e === "SYNCING" ? "sync.tooltipSyncing" : e === "OFFLINE" ? "sync.tooltipOffline" : e === "ERROR" ? "sync.tooltipError" : e === "CONFLICT" ? "sync.tooltipConflict" : e === "ATTENTION" ? "sync.tooltipAttention" : e === "QUEUED" ? "sync.tooltipQueued" : "sync.tooltipSyncing"), position: "right", children: /* @__PURE__ */ o(
+                    c,
+                    {
+                      title: "Sync",
+                      icon: /* @__PURE__ */ t(I, { pos: "relative", display: "inline-flex", children: [
+                        /* @__PURE__ */ o(
+                          s,
+                          {
+                            icon: a ? M : L,
+                            size: 20,
+                            color: b
+                          }
+                        ),
+                        /* @__PURE__ */ o(
+                          I,
+                          {
+                            pos: "absolute",
+                            bottom: -2,
+                            right: -2,
+                            w: 8,
+                            h: 8,
+                            style: {
+                              borderRadius: "50%",
+                              border: "2px solid var(--app-shell-bg)",
+                              backgroundColor: b
+                            }
+                          }
+                        )
+                      ] }),
+                      onClick: g
+                    }
+                  ) });
+                })()
               ] })
             ]
           }
         ),
-        s ? /* @__PURE__ */ o(v, { to: "/login", children: /* @__PURE__ */ o(t, { label: "Log in", position: "right", children: /* @__PURE__ */ o(z, { size: "lg", variant: "light", children: /* @__PURE__ */ o(C, { size: 20 }) }) }) }) : /* @__PURE__ */ o(
-          k,
+        p ? /* @__PURE__ */ o(D, { to: "/login", children: /* @__PURE__ */ o(l, { label: "Log in", position: "right", children: /* @__PURE__ */ o(U, { size: "lg", variant: "light", children: /* @__PURE__ */ o(F, { size: 20 }) }) }) }) : /* @__PURE__ */ o(
+          K,
           {
-            user: h,
-            menuItems: b,
+            user: f,
+            menuItems: T,
             position: "right-end"
           }
         )
@@ -98,5 +133,5 @@ const W = ({
   );
 };
 export {
-  W as UserSection
+  io as UserSection
 };

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":"AAkCA,eAAO,MAAM,QAAQ,+CAqPpB,CAAC"}
+{"version":3,"file":"HelpMenu.d.ts","sourceRoot":"","sources":["../../../../../../src/components/AppContainer/components/menus/HelpMenu/HelpMenu.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,QAAQ,+CA4PpB,CAAC"}