@greatapps/common 1.1.362 → 1.1.364

package/dist/components/layouts/NavBar.mjs

@@ -4,7 +4,7 @@ import Image from "next/image";
 import { IconChevronRight } from "@tabler/icons-react";
 import { Separator } from "../ui/data-display/Separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
-import { useDesktopSidebarStore } from "../../store/useDesktopSidebarStore";
+import { useDesktopSidebarStore, useDesktopSidebarHydration } from "../../store/useDesktopSidebarStore";
 import { useWhitelabel } from "../../providers/whitelabel.provider";
 import { cn } from "../../infra/utils/clsx";
 function NavBar({
@@ -17,6 +17,7 @@ function NavBar({
   className
 }) {
   const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } = useDesktopSidebarStore();
+  useDesktopSidebarHydration();
   const { whitelabel } = useWhitelabel();
   const isDefaultWl = !whitelabel || whitelabel.id === 1;
   const primaryColor = whitelabel?.general?.primary_color;

package/dist/components/layouts/NavBar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/NavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Image from \"next/image\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { useDesktopSidebarStore } from \"../../store/useDesktopSidebarStore\";\nimport { useWhitelabel } from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\n\ntype NavBarProps = {\n  onLogoClick: () => void;\n  onAppIconClick?: () => void;\n  activeApp?: \"gapps\" | \"gpages\";\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  children?: React.ReactNode;\n  className?: string;\n};\n\nfunction NavBar({\n  onLogoClick,\n  onAppIconClick,\n  activeApp,\n  showExpandButton = false,\n  onExpandClick,\n  children,\n  className,\n}: NavBarProps) {\n  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =\n    useDesktopSidebarStore();\n  const { whitelabel } = useWhitelabel();\n  const isDefaultWl = !whitelabel || whitelabel.id === 1;\n  const primaryColor = whitelabel?.general?.primary_color;\n  const wlName = whitelabel?.name || 'Great';\n\n  return (\n    <div\n      className={cn(\n        \"hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-col gap-4 items-center mt-[6.5px]\">\n        {/* GreatApps logo */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger\n              className=\"cursor-pointer\"\n              asChild\n              onClick={onLogoClick}\n            >\n              {isDefaultWl ? (\n                <Image\n                  src=\"/icons/great-icon.svg\"\n                  alt=\"Great Icon\"\n                  width={28}\n                  height={28}\n                />\n              ) : (\n                <div\n                  className={cn(\"size-10 rounded-lg flex items-center justify-center transition-opacity duration-300\", activeApp !== \"gapps\" && \"opacity-20\")}\n                  style={{ backgroundColor: primaryColor }}\n                >\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                  </svg>\n                </div>\n              )}\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{wlName}</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-gray-950\" : \"\",\n              activeApp === \"gapps\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n\n        <div className=\"relative w-full mt-[7.5px]\">\n          <Separator />\n          {/* Md expand button */}\n          {showExpandButton && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={onExpandClick}\n                  className=\"hidden md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">Expandir menu</TooltipContent>\n            </Tooltip>\n          )}\n          {/* Desktop expand button */}\n          {!isDesktopExpanded && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={toggleDesktop}\n                  className=\"hidden lg:flex absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">Expandir menu</TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n\n        {/* GreatPages icon */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild onClick={onAppIconClick}>\n              <div\n                className={cn(\n                  \"size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n                  activeApp === \"gpages\"\n                    ? isDefaultWl\n                      ? \"bg-cyan-100 border-white ring-cyan-300\"\n                      : \"border-white ring-transparent\"\n                    : isDefaultWl\n                      ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n                      : \"border-transparent ring-transparent\",\n                )}\n                style={!isDefaultWl ? { backgroundColor: primaryColor, boxShadow: activeApp === \"gpages\" ? `0 0 0 2px ${primaryColor}40` : undefined, opacity: activeApp !== \"gpages\" ? 0.2 : undefined } : undefined}\n              >\n                {isDefaultWl ? (\n                  <Image\n                    src=\"/icons/icon-navbar.svg\"\n                    alt=\"GreatPages\"\n                    width={24}\n                    height={24}\n                  />\n                ) : (\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 8h16\" />\n                    <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" />\n                    <path d=\"M8 4v4\" />\n                  </svg>\n                )}\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{isDefaultWl ? 'GreatPages' : 'Páginas'}</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-cyan-300\" : \"\",\n              activeApp === \"gpages\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">{children}</div>\n    </div>\n  );\n}\n\nexport { NavBar };\nexport type { NavBarProps };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/NavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Image from \"next/image\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { useDesktopSidebarStore, useDesktopSidebarHydration } from \"../../store/useDesktopSidebarStore\";\nimport { useWhitelabel } from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\n\ntype NavBarProps = {\n  onLogoClick: () => void;\n  onAppIconClick?: () => void;\n  activeApp?: \"gapps\" | \"gpages\";\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  children?: React.ReactNode;\n  className?: string;\n};\n\nfunction NavBar({\n  onLogoClick,\n  onAppIconClick,\n  activeApp,\n  showExpandButton = false,\n  onExpandClick,\n  children,\n  className,\n}: NavBarProps) {\n  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =\n    useDesktopSidebarStore();\n  useDesktopSidebarHydration();\n  const { whitelabel } = useWhitelabel();\n  const isDefaultWl = !whitelabel || whitelabel.id === 1;\n  const primaryColor = whitelabel?.general?.primary_color;\n  const wlName = whitelabel?.name || 'Great';\n\n  return (\n    <div\n      className={cn(\n        \"hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-col gap-4 items-center mt-[6.5px]\">\n        {/* GreatApps logo */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger\n              className=\"cursor-pointer\"\n              asChild\n              onClick={onLogoClick}\n            >\n              {isDefaultWl ? (\n                <Image\n                  src=\"/icons/great-icon.svg\"\n                  alt=\"Great Icon\"\n                  width={28}\n                  height={28}\n                />\n              ) : (\n                <div\n                  className={cn(\"size-10 rounded-lg flex items-center justify-center transition-opacity duration-300\", activeApp !== \"gapps\" && \"opacity-20\")}\n                  style={{ backgroundColor: primaryColor }}\n                >\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                  </svg>\n                </div>\n              )}\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{wlName}</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-gray-950\" : \"\",\n              activeApp === \"gapps\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n\n        <div className=\"relative w-full mt-[7.5px]\">\n          <Separator />\n          {/* Md expand button */}\n          {showExpandButton && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={onExpandClick}\n                  className=\"hidden md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">Expandir menu</TooltipContent>\n            </Tooltip>\n          )}\n          {/* Desktop expand button */}\n          {!isDesktopExpanded && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={toggleDesktop}\n                  className=\"hidden lg:flex absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">Expandir menu</TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n\n        {/* GreatPages icon */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild onClick={onAppIconClick}>\n              <div\n                className={cn(\n                  \"size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n                  activeApp === \"gpages\"\n                    ? isDefaultWl\n                      ? \"bg-cyan-100 border-white ring-cyan-300\"\n                      : \"border-white ring-transparent\"\n                    : isDefaultWl\n                      ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n                      : \"border-transparent ring-transparent\",\n                )}\n                style={!isDefaultWl ? { backgroundColor: primaryColor, boxShadow: activeApp === \"gpages\" ? `0 0 0 2px ${primaryColor}40` : undefined, opacity: activeApp !== \"gpages\" ? 0.2 : undefined } : undefined}\n              >\n                {isDefaultWl ? (\n                  <Image\n                    src=\"/icons/icon-navbar.svg\"\n                    alt=\"GreatPages\"\n                    width={24}\n                    height={24}\n                  />\n                ) : (\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 8h16\" />\n                    <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" />\n                    <path d=\"M8 4v4\" />\n                  </svg>\n                )}\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{isDefaultWl ? 'GreatPages' : 'Páginas'}</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-cyan-300\" : \"\",\n              activeApp === \"gpages\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">{children}</div>\n    </div>\n  );\n}\n\nexport { NavBar };\nexport type { NavBarProps };\n"],"mappings":"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","names":[]}

package/dist/modules/subscriptions/actions/update-subscription-plan.action.mjs

@@ -1,8 +1,17 @@
 "use server";
 import { safeServerAction } from "../../../utils/safeServerAction";
 import { subscriptionsService } from "../services/subscriptions.service";
+import { resolvePlanExtrasPrices } from "../utils/resolve-plan-extras-prices";
 async function updateSubscriptionPlanAction(subscriptionId, data) {
   return safeServerAction(async () => {
+    if (data.plan_extras?.length) {
+      const { data: subscriptions } = await subscriptionsService.listSubscriptions({ active: true });
+      const subscription = subscriptions.find((s) => String(s.id) === String(subscriptionId)) ?? subscriptions[0];
+      data = {
+        ...data,
+        plan_extras: resolvePlanExtrasPrices(data.plan_extras, subscription?.items ?? [])
+      };
+    }
     return subscriptionsService.updateSubscriptionPlan(subscriptionId, data);
   });
 }

package/dist/modules/subscriptions/actions/update-subscription-plan.action.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/modules/subscriptions/actions/update-subscription-plan.action.ts"],"sourcesContent":["\"use server\";\n\nimport { safeServerAction } from \"../../../utils/safeServerAction\";\nimport type { UpdateSubscriptionPlanRequest } from \"../types/calculate-subscription.type\";\nimport { subscriptionsService } from \"../services/subscriptions.service\";\n\nexport async function updateSubscriptionPlanAction(\n  subscriptionId: number | string,\n  data: UpdateSubscriptionPlanRequest,\n) {\n  return safeServerAction(async () => {\n    return subscriptionsService.updateSubscriptionPlan(subscriptionId, data);\n  });\n}\n"],"mappings":";AAEA,SAAS,wBAAwB;AAEjC,SAAS,4BAA4B;AAErC,eAAsB,6BACpB,gBACA,MACA;AACA,SAAO,iBAAiB,YAAY;AAClC,WAAO,qBAAqB,uBAAuB,gBAAgB,IAAI;AAAA,EACzE,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../../src/modules/subscriptions/actions/update-subscription-plan.action.ts"],"sourcesContent":["'use server';\n\nimport { safeServerAction } from '../../../utils/safeServerAction';\nimport type { UpdateSubscriptionPlanRequest } from '../types/calculate-subscription.type';\nimport { subscriptionsService } from '../services/subscriptions.service';\nimport { resolvePlanExtrasPrices } from '../utils/resolve-plan-extras-prices';\n\nexport async function updateSubscriptionPlanAction(\n  subscriptionId: number | string,\n  data: UpdateSubscriptionPlanRequest\n) {\n  return safeServerAction(async () => {\n    if (data.plan_extras?.length) {\n      const { data: subscriptions } = await subscriptionsService.listSubscriptions({ active: true });\n      const subscription =\n        subscriptions.find((s) => String(s.id) === String(subscriptionId)) ?? subscriptions[0];\n\n      data = {\n        ...data,\n        plan_extras: resolvePlanExtrasPrices(data.plan_extras, subscription?.items ?? []),\n      };\n    }\n\n    return subscriptionsService.updateSubscriptionPlan(subscriptionId, data);\n  });\n}\n"],"mappings":";AAEA,SAAS,wBAAwB;AAEjC,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AAExC,eAAsB,6BACpB,gBACA,MACA;AACA,SAAO,iBAAiB,YAAY;AAClC,QAAI,KAAK,aAAa,QAAQ;AAC5B,YAAM,EAAE,MAAM,cAAc,IAAI,MAAM,qBAAqB,kBAAkB,EAAE,QAAQ,KAAK,CAAC;AAC7F,YAAM,eACJ,cAAc,KAAK,CAAC,MAAM,OAAO,EAAE,EAAE,MAAM,OAAO,cAAc,CAAC,KAAK,cAAc,CAAC;AAEvF,aAAO;AAAA,QACL,GAAG;AAAA,QACH,aAAa,wBAAwB,KAAK,aAAa,cAAc,SAAS,CAAC,CAAC;AAAA,MAClF;AAAA,IACF;AAEA,WAAO,qBAAqB,uBAAuB,gBAAgB,IAAI;AAAA,EACzE,CAAC;AACH;","names":[]}

package/dist/store/useDesktopSidebarStore.mjs

@@ -1,13 +1,9 @@
 import { create } from "zustand";
+import { useEffect } from "react";
 const STORAGE_KEY = "desktop-sidebar-expanded";
-function getInitialState() {
-  if (typeof window === "undefined") return true;
-  const stored = localStorage.getItem(STORAGE_KEY);
-  if (stored === null) return true;
-  return stored === "true";
-}
 const useDesktopSidebarStore = create((set) => ({
-  isExpanded: getInitialState(),
+  isExpanded: true,
+  _hydrated: false,
   toggle: () => set((state) => {
     const next = !state.isExpanded;
     localStorage.setItem(STORAGE_KEY, String(next));
@@ -20,9 +16,24 @@ const useDesktopSidebarStore = create((set) => ({
   collapse: () => {
     localStorage.setItem(STORAGE_KEY, "false");
     return set({ isExpanded: false });
+  },
+  _hydrate: () => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    const value = stored === null ? true : stored === "true";
+    set({ isExpanded: value, _hydrated: true });
   }
 }));
+function useDesktopSidebarHydration() {
+  const hydrate = useDesktopSidebarStore((s) => s._hydrate);
+  const hydrated = useDesktopSidebarStore((s) => s._hydrated);
+  useEffect(() => {
+    if (!hydrated) {
+      hydrate();
+    }
+  }, [hydrate, hydrated]);
+}
 export {
+  useDesktopSidebarHydration,
   useDesktopSidebarStore
 };
 //# sourceMappingURL=useDesktopSidebarStore.mjs.map

package/dist/store/useDesktopSidebarStore.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/store/useDesktopSidebarStore.ts"],"sourcesContent":["import { create } from \"zustand\";\n\nconst STORAGE_KEY = \"desktop-sidebar-expanded\";\n\nfunction getInitialState(): boolean {\n    if (typeof window === \"undefined\") return true;\n    const stored = localStorage.getItem(STORAGE_KEY);\n    if (stored === null) return true;\n    return stored === \"true\";\n}\n\ntype DesktopSidebarStore = {\n    isExpanded: boolean;\n    toggle: () => void;\n    expand: () => void;\n    collapse: () => void;\n};\n\nexport const useDesktopSidebarStore = create<DesktopSidebarStore>((set) => ({\n    isExpanded: getInitialState(),\n    toggle: () => set((state) => {\n        const next = !state.isExpanded;\n        localStorage.setItem(STORAGE_KEY, String(next));\n        return { isExpanded: next };\n    }),\n    expand: () => {\n        localStorage.setItem(STORAGE_KEY, \"true\");\n        return set({ isExpanded: true });\n    },\n    collapse: () => {\n        localStorage.setItem(STORAGE_KEY, \"false\");\n        return set({ isExpanded: false });\n    },\n}));\n"],"mappings":"AAAA,SAAS,cAAc;AAEvB,MAAM,cAAc;AAEpB,SAAS,kBAA2B;AAChC,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,QAAM,SAAS,aAAa,QAAQ,WAAW;AAC/C,MAAI,WAAW,KAAM,QAAO;AAC5B,SAAO,WAAW;AACtB;AASO,MAAM,yBAAyB,OAA4B,CAAC,SAAS;AAAA,EACxE,YAAY,gBAAgB;AAAA,EAC5B,QAAQ,MAAM,IAAI,CAAC,UAAU;AACzB,UAAM,OAAO,CAAC,MAAM;AACpB,iBAAa,QAAQ,aAAa,OAAO,IAAI,CAAC;AAC9C,WAAO,EAAE,YAAY,KAAK;AAAA,EAC9B,CAAC;AAAA,EACD,QAAQ,MAAM;AACV,iBAAa,QAAQ,aAAa,MAAM;AACxC,WAAO,IAAI,EAAE,YAAY,KAAK,CAAC;AAAA,EACnC;AAAA,EACA,UAAU,MAAM;AACZ,iBAAa,QAAQ,aAAa,OAAO;AACzC,WAAO,IAAI,EAAE,YAAY,MAAM,CAAC;AAAA,EACpC;AACJ,EAAE;","names":[]}
+{"version":3,"sources":["../../src/store/useDesktopSidebarStore.ts"],"sourcesContent":["import { create } from \"zustand\";\nimport { useEffect } from \"react\";\n\nconst STORAGE_KEY = \"desktop-sidebar-expanded\";\n\ntype DesktopSidebarStore = {\n    isExpanded: boolean;\n    _hydrated: boolean;\n    toggle: () => void;\n    expand: () => void;\n    collapse: () => void;\n    _hydrate: () => void;\n};\n\nexport const useDesktopSidebarStore = create<DesktopSidebarStore>((set) => ({\n    isExpanded: true,\n    _hydrated: false,\n    toggle: () => set((state) => {\n        const next = !state.isExpanded;\n        localStorage.setItem(STORAGE_KEY, String(next));\n        return { isExpanded: next };\n    }),\n    expand: () => {\n        localStorage.setItem(STORAGE_KEY, \"true\");\n        return set({ isExpanded: true });\n    },\n    collapse: () => {\n        localStorage.setItem(STORAGE_KEY, \"false\");\n        return set({ isExpanded: false });\n    },\n    _hydrate: () => {\n        const stored = localStorage.getItem(STORAGE_KEY);\n        const value = stored === null ? true : stored === \"true\";\n        set({ isExpanded: value, _hydrated: true });\n    },\n}));\n\nexport function useDesktopSidebarHydration() {\n    const hydrate = useDesktopSidebarStore((s) => s._hydrate);\n    const hydrated = useDesktopSidebarStore((s) => s._hydrated);\n\n    useEffect(() => {\n        if (!hydrated) {\n            hydrate();\n        }\n    }, [hydrate, hydrated]);\n}\n"],"mappings":"AAAA,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAE1B,MAAM,cAAc;AAWb,MAAM,yBAAyB,OAA4B,CAAC,SAAS;AAAA,EACxE,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ,MAAM,IAAI,CAAC,UAAU;AACzB,UAAM,OAAO,CAAC,MAAM;AACpB,iBAAa,QAAQ,aAAa,OAAO,IAAI,CAAC;AAC9C,WAAO,EAAE,YAAY,KAAK;AAAA,EAC9B,CAAC;AAAA,EACD,QAAQ,MAAM;AACV,iBAAa,QAAQ,aAAa,MAAM;AACxC,WAAO,IAAI,EAAE,YAAY,KAAK,CAAC;AAAA,EACnC;AAAA,EACA,UAAU,MAAM;AACZ,iBAAa,QAAQ,aAAa,OAAO;AACzC,WAAO,IAAI,EAAE,YAAY,MAAM,CAAC;AAAA,EACpC;AAAA,EACA,UAAU,MAAM;AACZ,UAAM,SAAS,aAAa,QAAQ,WAAW;AAC/C,UAAM,QAAQ,WAAW,OAAO,OAAO,WAAW;AAClD,QAAI,EAAE,YAAY,OAAO,WAAW,KAAK,CAAC;AAAA,EAC9C;AACJ,EAAE;AAEK,SAAS,6BAA6B;AACzC,QAAM,UAAU,uBAAuB,CAAC,MAAM,EAAE,QAAQ;AACxD,QAAM,WAAW,uBAAuB,CAAC,MAAM,EAAE,SAAS;AAE1D,YAAU,MAAM;AACZ,QAAI,CAAC,UAAU;AACX,cAAQ;AAAA,IACZ;AAAA,EACJ,GAAG,CAAC,SAAS,QAAQ,CAAC;AAC1B;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.362",
+  "version": "1.1.364",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/account/sections/ChangeEmailModal.tsx

@@ -117,7 +117,7 @@ export function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {
           </>
         )}
 
-        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-pages-300`} />
+        <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-cyan-300`} />
 
         {showVerification ? (
           <form

package/src/components/account/sections/ChangePhoneModal.tsx

@@ -134,7 +134,7 @@ export function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {
           </>
         )}
 
-        <div className={`${showVerification || !hasExistingPhone ? 'w-full' : 'w-1/2'} h-0.75 bg-pages-300`} />
+        <div className={`${showVerification || !hasExistingPhone ? 'w-full' : 'w-1/2'} h-0.75 bg-cyan-300`} />
 
         {showVerification ? (
           <form

package/src/components/layouts/NavBar.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import { IconChevronRight } from "@tabler/icons-react";
 import { Separator } from "../ui/data-display/Separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
-import { useDesktopSidebarStore } from "../../store/useDesktopSidebarStore";
+import { useDesktopSidebarStore, useDesktopSidebarHydration } from "../../store/useDesktopSidebarStore";
 import { useWhitelabel } from "../../providers/whitelabel.provider";
 import { cn } from "../../infra/utils/clsx";
 
@@ -30,6 +30,7 @@ function NavBar({
 }: NavBarProps) {
   const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =
     useDesktopSidebarStore();
+  useDesktopSidebarHydration();
   const { whitelabel } = useWhitelabel();
   const isDefaultWl = !whitelabel || whitelabel.id === 1;
   const primaryColor = whitelabel?.general?.primary_color;

package/src/components/navigation/ProjectSelectorPopover.tsx

@@ -13,12 +13,9 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
   UserAvatar,
 } from '../../index';
-import { IconCheck, IconChevronDown, IconFolderOpen, IconPlus, IconSettings } from '@tabler/icons-react';
+import { IconCheck, IconChevronDown, IconFolderOpen, IconPlus } from '@tabler/icons-react';
 import type { NavigationProject } from './types';
 
 interface ProjectSelectorPopoverProps {
@@ -96,16 +93,6 @@ export function ProjectSelectorPopover({
                     Adicionar
                   </Button>
                 )}
-                {onManageProjects && (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button variant="secondary" className="p-0 size-8" onClick={onManageProjects}>
-                        <IconSettings size={18} />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent className="z-[1002]">Visualizar todos projetos</TooltipContent>
-                  </Tooltip>
-                )}
               </div>
             )}
           </div>
@@ -154,6 +141,18 @@ export function ProjectSelectorPopover({
               )}
             </CommandList>
           </Command>
+          {onManageProjects && (
+            <>
+              <div className="border-t border-gray-200" />
+              <button
+                type="button"
+                className="paragraph-small-medium text-violet-700 underline cursor-pointer py-1 text-center"
+                onClick={onManageProjects}
+              >
+                Gerenciar projetos
+              </button>
+            </>
+          )}
         </div>
       </PopoverContent>
     </Popover>

package/src/components/pages/notifications/Notifications.tsx

@@ -48,7 +48,7 @@ function NotificationsList({
         <NotificationCard
           key={notification.id}
           icon={<IconBell size={20} className="text-pages-600" />}
-          iconBgColor="bg-pages-100"
+          iconBgColor="bg-cyan-100"
           title={notification.subject}
           description={notification.message}
           gapPx={8}

package/src/components/ui/buttons/Button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
           "bg-white text-gray-950 border-gray-200 hover:border-gray-400 border",
         ghost:
           "text-gray-600 hover:bg-accent hover:text-gray-950 dark:hover:bg-accent/50",
-        brand: "bg-pages-300 hover:bg-pages-200 text-gray-950",
+        brand: "bg-cyan-300 hover:bg-cyan-200 text-gray-950",
       },
       size: {
         default: "h-12 px-4 py-2 has-[>svg]:px-3",

package/src/components/ui/feedback/Toast.tsx

@@ -35,7 +35,7 @@ const toastIconContainerVariants = cva(
         success: "bg-green-50 text-green-500",
         error: "bg-red-50 text-red-500",
         warning: "bg-yellow-50 text-yellow-400",
-        info: "bg-pages-50 text-pages-500",
+        info: "bg-cyan-50 text-pages-500",
         default: "bg-gray-50 text-gray-950",
       },
     },

package/src/components/widgets/notifications/NotificationCard.tsx

@@ -60,7 +60,7 @@ export default function NotificationCard({
         {actions && <div className="flex items-center gap-2">{actions}</div>}
       </div>
 
-      {isUnread && <div className="size-2 bg-pages-400 rounded-full shrink-0 mt-1" />}
+      {isUnread && <div className="size-2 bg-cyan-400 rounded-full shrink-0 mt-1" />}
     </div>
   );
 }

package/src/store/useDesktopSidebarStore.ts

@@ -1,23 +1,20 @@
 import { create } from "zustand";
+import { useEffect } from "react";
 
 const STORAGE_KEY = "desktop-sidebar-expanded";
 
-function getInitialState(): boolean {
-    if (typeof window === "undefined") return true;
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored === null) return true;
-    return stored === "true";
-}
-
 type DesktopSidebarStore = {
     isExpanded: boolean;
+    _hydrated: boolean;
     toggle: () => void;
     expand: () => void;
     collapse: () => void;
+    _hydrate: () => void;
 };
 
 export const useDesktopSidebarStore = create<DesktopSidebarStore>((set) => ({
-    isExpanded: getInitialState(),
+    isExpanded: true,
+    _hydrated: false,
     toggle: () => set((state) => {
         const next = !state.isExpanded;
         localStorage.setItem(STORAGE_KEY, String(next));
@@ -31,4 +28,20 @@ export const useDesktopSidebarStore = create<DesktopSidebarStore>((set) => ({
         localStorage.setItem(STORAGE_KEY, "false");
         return set({ isExpanded: false });
     },
+    _hydrate: () => {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        const value = stored === null ? true : stored === "true";
+        set({ isExpanded: value, _hydrated: true });
+    },
 }));
+
+export function useDesktopSidebarHydration() {
+    const hydrate = useDesktopSidebarStore((s) => s._hydrate);
+    const hydrated = useDesktopSidebarStore((s) => s._hydrated);
+
+    useEffect(() => {
+        if (!hydrated) {
+            hydrate();
+        }
+    }, [hydrate, hydrated]);
+}