@greatapps/common 1.1.699 → 1.1.700

package/src/components/layouts/AppMobileNavBar.tsx

@@ -1,214 +1,214 @@
-"use client";
-
-import { ReactNode } from "react";
-import Image from "next/image";
-import { IconMenu2, IconX } from "@tabler/icons-react";
-import { ProfilePopover } from "./ProfilePopover";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
-import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
-import {
-  useWhitelabel,
-  useIsDefaultWhitelabel,
-} from "../../providers/whitelabel.provider";
-import { cn } from "../../infra/utils/clsx";
-import type { ProfileMenuItem } from "./ProfilePopover";
-
-export interface AppMobileNavBarProps {
-  /** Which app is currently active — controls which icon gets the indicator */
-  activeApp?: "gapps" | "gpages";
-  /** Called when the GreatApps logo is clicked */
-  onLogoClick?: () => void;
-  /** Called when the app icon (e.g. GreatPages) is clicked */
-  onAppIconClick?: () => void;
-  /** Extra slot rendered after the app icon (e.g. project selector) */
-  extraLeftSlot?: ReactNode;
-  menuItems?: ProfileMenuItem[];
-  showMenuToggle?: boolean;
-}
-
-export function AppMobileNavBar({
-  activeApp,
-  onLogoClick,
-  onAppIconClick,
-  extraLeftSlot,
-  menuItems = [],
-  showMenuToggle = true,
-}: AppMobileNavBarProps) {
-  const { isOpen, toggle } = useMobileNavbarSheet();
-  const { whitelabel } = useWhitelabel();
-  const isDefaultWl = useIsDefaultWhitelabel();
-  const primaryColor = whitelabel?.general?.primary_color;
-  const wlName = whitelabel?.name || "Great";
-
-  const isGappsActive = activeApp === "gapps";
-  const isGpagesActive = activeApp === "gpages";
-
-  const wlIcon = whitelabel?.secondary_logo ? (
-    <Image
-      className="size-7 object-contain"
-      src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.secondary_logo}`}
-      alt={`${wlName} Logo`}
-      width={28}
-      height={28}
-    />
-  ) : (
-    <div
-      className={cn(
-        "size-10 rounded-lg flex items-center justify-center transition-opacity duration-300",
-        !isGappsActive && "opacity-20",
-      )}
-      style={{ backgroundColor: primaryColor }}
-    >
-      <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"
-      >
-        <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" />
-        <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" />
-        <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" />
-        <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" />
-      </svg>
-    </div>
-  );
-
-  return (
-    <div className="fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200">
-      <div className="flex items-center gap-1.5">
-        {/* GreatApps logo */}
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div
-                className={cn(
-                  "flex items-center justify-center",
-                  onLogoClick ? "cursor-pointer" : "",
-                )}
-                onClick={onLogoClick}
-              >
-                {isDefaultWl ? (
-                  <div className="size-10 flex items-center justify-center rounded-lg">
-                    <Image
-                      src="/icons/great-icon.svg"
-                      alt="Great Icon"
-                      width={28}
-                      height={28}
-                    />
-                  </div>
-                ) : (
-                  wlIcon
-                )}
-              </div>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">{wlName}</TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300",
-              isDefaultWl ? "bg-gray-950" : "",
-              isGappsActive ? "opacity-100" : "opacity-0",
-            )}
-            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
-          />
-        </div>
-
-        {/* GreatPages icon */}
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div
-                className={cn(
-                  "size-10 rounded-lg flex items-center justify-center border-2 ring-2 transition-colors duration-300",
-                  isGpagesActive
-                    ? isDefaultWl
-                      ? "bg-cyan-100 border-white ring-cyan-300"
-                      : "border-white ring-transparent"
-                    : isDefaultWl
-                      ? "hover:bg-gray-100 border-transparent ring-transparent"
-                      : "border-transparent ring-transparent",
-                  onAppIconClick ? "cursor-pointer" : "",
-                )}
-                style={
-                  !isDefaultWl
-                    ? {
-                        backgroundColor: primaryColor,
-                        boxShadow: isGpagesActive
-                          ? `0 0 0 2px ${primaryColor}40`
-                          : undefined,
-                        opacity: !isGpagesActive ? 0.2 : undefined,
-                      }
-                    : undefined
-                }
-                onClick={onAppIconClick}
-              >
-                {isDefaultWl ? (
-                  <Image
-                    src="/icons/icon-navbar.svg"
-                    alt="GreatPages"
-                    width={24}
-                    height={24}
-                  />
-                ) : (
-                  <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"
-                  >
-                    <path d="M4 8h16" />
-                    <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" />
-                    <path d="M8 4v4" />
-                  </svg>
-                )}
-              </div>
-            </TooltipTrigger>
-            <TooltipContent side="bottom">
-              {isDefaultWl ? "GreatPages" : "Páginas"}
-            </TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300",
-              isDefaultWl ? "bg-cyan-300" : "",
-              isGpagesActive ? "opacity-100" : "opacity-0",
-            )}
-            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
-          />
-        </div>
-
-        {extraLeftSlot}
-      </div>
-      <div className="flex items-center gap-1.5">
-        <ProfilePopover
-          side="bottom"
-          align="end"
-          contentClassName=""
-          menuItems={menuItems}
-        />
-        {showMenuToggle && (
-          <button
-            className="size-10 flex items-center justify-center border border-zinc-200 rounded-lg bg-white cursor-pointer"
-            onClick={toggle}
-          >
-            {isOpen ? (
-              <IconX size={18} className="text-zinc-950" />
-            ) : (
-              <IconMenu2 size={18} className="text-zinc-950" />
-            )}
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { ReactNode } from "react";
+import Image from "next/image";
+import { IconMenu2, IconX } from "@tabler/icons-react";
+import { ProfilePopover } from "./ProfilePopover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
+import {
+  useWhitelabel,
+  useIsDefaultWhitelabel,
+} from "../../providers/whitelabel.provider";
+import { cn } from "../../infra/utils/clsx";
+import type { ProfileMenuItem } from "./ProfilePopover";
+
+export interface AppMobileNavBarProps {
+  /** Which app is currently active — controls which icon gets the indicator */
+  activeApp?: "gapps" | "gpages";
+  /** Called when the GreatApps logo is clicked */
+  onLogoClick?: () => void;
+  /** Called when the app icon (e.g. GreatPages) is clicked */
+  onAppIconClick?: () => void;
+  /** Extra slot rendered after the app icon (e.g. project selector) */
+  extraLeftSlot?: ReactNode;
+  menuItems?: ProfileMenuItem[];
+  showMenuToggle?: boolean;
+}
+
+export function AppMobileNavBar({
+  activeApp,
+  onLogoClick,
+  onAppIconClick,
+  extraLeftSlot,
+  menuItems = [],
+  showMenuToggle = true,
+}: AppMobileNavBarProps) {
+  const { isOpen, toggle } = useMobileNavbarSheet();
+  const { whitelabel } = useWhitelabel();
+  const isDefaultWl = useIsDefaultWhitelabel();
+  const primaryColor = whitelabel?.general?.primary_color;
+  const wlName = whitelabel?.name || "Great";
+
+  const isGappsActive = activeApp === "gapps";
+  const isGpagesActive = activeApp === "gpages";
+
+  const wlIcon = whitelabel?.secondary_logo ? (
+    <Image
+      className="size-7 object-contain"
+      src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${whitelabel.secondary_logo}`}
+      alt={`${wlName} Logo`}
+      width={28}
+      height={28}
+    />
+  ) : (
+    <div
+      className={cn(
+        "size-10 rounded-lg flex items-center justify-center transition-opacity duration-300",
+        !isGappsActive && "opacity-20",
+      )}
+      style={{ backgroundColor: primaryColor }}
+    >
+      <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"
+      >
+        <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" />
+        <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" />
+        <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" />
+        <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" />
+      </svg>
+    </div>
+  );
+
+  return (
+    <div className="fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200">
+      <div className="flex items-center gap-1.5">
+        {/* GreatApps logo */}
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={cn(
+                  "flex items-center justify-center",
+                  onLogoClick ? "cursor-pointer" : "",
+                )}
+                onClick={onLogoClick}
+              >
+                {isDefaultWl ? (
+                  <div className="size-10 flex items-center justify-center rounded-lg">
+                    <Image
+                      src="/icons/great-icon.svg"
+                      alt="Great Icon"
+                      width={28}
+                      height={28}
+                    />
+                  </div>
+                ) : (
+                  wlIcon
+                )}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">{wlName}</TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300",
+              isDefaultWl ? "bg-gray-950" : "",
+              isGappsActive ? "opacity-100" : "opacity-0",
+            )}
+            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
+          />
+        </div>
+
+        {/* GreatPages icon */}
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div
+                className={cn(
+                  "size-10 rounded-lg flex items-center justify-center border-2 ring-2 transition-colors duration-300",
+                  isGpagesActive
+                    ? isDefaultWl
+                      ? "bg-cyan-100 border-white ring-cyan-300"
+                      : "border-white ring-transparent"
+                    : isDefaultWl
+                      ? "hover:bg-gray-100 border-transparent ring-transparent"
+                      : "border-transparent ring-transparent",
+                  onAppIconClick ? "cursor-pointer" : "",
+                )}
+                style={
+                  !isDefaultWl
+                    ? {
+                        backgroundColor: primaryColor,
+                        boxShadow: isGpagesActive
+                          ? `0 0 0 2px ${primaryColor}40`
+                          : undefined,
+                        opacity: !isGpagesActive ? 0.2 : undefined,
+                      }
+                    : undefined
+                }
+                onClick={onAppIconClick}
+              >
+                {isDefaultWl ? (
+                  <Image
+                    src="/icons/icon-navbar.svg"
+                    alt="GreatPages"
+                    width={24}
+                    height={24}
+                  />
+                ) : (
+                  <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"
+                  >
+                    <path d="M4 8h16" />
+                    <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" />
+                    <path d="M8 4v4" />
+                  </svg>
+                )}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">
+              {isDefaultWl ? "GreatPages" : "Páginas"}
+            </TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] rounded-t-xl transition-opacity duration-300",
+              isDefaultWl ? "bg-cyan-300" : "",
+              isGpagesActive ? "opacity-100" : "opacity-0",
+            )}
+            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}
+          />
+        </div>
+
+        {extraLeftSlot}
+      </div>
+      <div className="flex items-center gap-1.5">
+        <ProfilePopover
+          side="bottom"
+          align="end"
+          contentClassName=""
+          menuItems={menuItems}
+        />
+        {showMenuToggle && (
+          <button
+            className="size-10 flex items-center justify-center border border-zinc-200 rounded-lg bg-white cursor-pointer"
+            onClick={toggle}
+          >
+            {isOpen ? (
+              <IconX size={18} className="text-zinc-950" />
+            ) : (
+              <IconMenu2 size={18} className="text-zinc-950" />
+            )}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/layouts/AppNavBar.tsx

@@ -1,40 +1,40 @@
-"use client";
-
-import { NavBar } from "./NavBar";
-import { ProfilePopover } from "./ProfilePopover";
-import { NotificationsPopover } from "./NotificationsPopover";
-import type { ProfileMenuItem } from "./ProfilePopover";
-
-export interface AppNavBarProps {
-  logoHref: string;
-  appIconHref: string;
-  /** Which app is currently active — controls which icon gets the indicator */
-  activeApp?: "gapps" | "gpages";
-  showExpandButton?: boolean;
-  onExpandClick?: () => void;
-  menuItems?: ProfileMenuItem[];
-  onNotificationsViewAll?: () => void;
-}
-
-export function AppNavBar({
-  logoHref,
-  appIconHref,
-  activeApp,
-  showExpandButton = false,
-  onExpandClick,
-  menuItems = [],
-  onNotificationsViewAll,
-}: AppNavBarProps) {
-  return (
-    <NavBar
-      logoHref={logoHref}
-      appIconHref={appIconHref}
-      activeApp={activeApp}
-      showExpandButton={showExpandButton}
-      onExpandClick={onExpandClick}
-    >
-      <NotificationsPopover onViewAll={onNotificationsViewAll} />
-      <ProfilePopover menuItems={menuItems} />
-    </NavBar>
-  );
-}
+"use client";
+
+import { NavBar } from "./NavBar";
+import { ProfilePopover } from "./ProfilePopover";
+import { NotificationsPopover } from "./NotificationsPopover";
+import type { ProfileMenuItem } from "./ProfilePopover";
+
+export interface AppNavBarProps {
+  logoHref: string;
+  appIconHref: string;
+  /** Which app is currently active — controls which icon gets the indicator */
+  activeApp?: "gapps" | "gpages";
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
+  menuItems?: ProfileMenuItem[];
+  onNotificationsViewAll?: () => void;
+}
+
+export function AppNavBar({
+  logoHref,
+  appIconHref,
+  activeApp,
+  showExpandButton = false,
+  onExpandClick,
+  menuItems = [],
+  onNotificationsViewAll,
+}: AppNavBarProps) {
+  return (
+    <NavBar
+      logoHref={logoHref}
+      appIconHref={appIconHref}
+      activeApp={activeApp}
+      showExpandButton={showExpandButton}
+      onExpandClick={onExpandClick}
+    >
+      <NotificationsPopover onViewAll={onNotificationsViewAll} />
+      <ProfilePopover menuItems={menuItems} />
+    </NavBar>
+  );
+}

package/src/components/layouts/MdSideBarNavigation.tsx

@@ -1,56 +1,56 @@
-'use client';
-
-"use client"
-
-import * as React from "react"
-import { IconChevronLeft } from '@tabler/icons-react'
-import { useMdSidebarStore } from "../../store/useMdSidebarStore"
-import { cn } from "../../infra/utils/clsx"
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
-
-function MdSideBarNavigation({
-    className,
-    children,
-    ...props
-}: React.ComponentProps<"div">) {
-    const { isExpanded, collapse } = useMdSidebarStore()
-
-    return (
-        <>
-            <div
-                className={`hidden md:block lg:hidden fixed inset-0 bg-black/50 z-20 transition-opacity duration-300 ${
-                    isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
-                }`}
-                onClick={collapse}
-            />
-            <div
-                className={`hidden md:flex lg:hidden fixed top-0 bottom-0 left-[73px] z-30 transition-transform duration-300 ease-in-out overflow-visible ${
-                    isExpanded ? "translate-x-0" : "-translate-x-full"
-                }`}
-            >
-                <div
-                    data-slot="md-sidebar-navigation"
-                    className={cn("relative w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className)}
-                    {...props}
-                >
-                    {isExpanded && (
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <button
-                                    onClick={collapse}
-                                    className="absolute top-[60px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40"
-                                >
-                                    <IconChevronLeft size={16} className="text-gray-500" />
-                                </button>
-                            </TooltipTrigger>
-                            <TooltipContent side="right">Recolher menu</TooltipContent>
-                        </Tooltip>
-                    )}
-                    {children}
-                </div>
-            </div>
-        </>
-    )
-}
-
-export { MdSideBarNavigation };
+'use client';
+
+"use client"
+
+import * as React from "react"
+import { IconChevronLeft } from '@tabler/icons-react'
+import { useMdSidebarStore } from "../../store/useMdSidebarStore"
+import { cn } from "../../infra/utils/clsx"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
+
+function MdSideBarNavigation({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<"div">) {
+    const { isExpanded, collapse } = useMdSidebarStore()
+
+    return (
+        <>
+            <div
+                className={`hidden md:block lg:hidden fixed inset-0 bg-black/50 z-20 transition-opacity duration-300 ${
+                    isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"
+                }`}
+                onClick={collapse}
+            />
+            <div
+                className={`hidden md:flex lg:hidden fixed top-0 bottom-0 left-[73px] z-30 transition-transform duration-300 ease-in-out overflow-visible ${
+                    isExpanded ? "translate-x-0" : "-translate-x-full"
+                }`}
+            >
+                <div
+                    data-slot="md-sidebar-navigation"
+                    className={cn("relative w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className)}
+                    {...props}
+                >
+                    {isExpanded && (
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <button
+                                    onClick={collapse}
+                                    className="absolute top-[60px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40"
+                                >
+                                    <IconChevronLeft size={16} className="text-gray-500" />
+                                </button>
+                            </TooltipTrigger>
+                            <TooltipContent side="right">Recolher menu</TooltipContent>
+                        </Tooltip>
+                    )}
+                    {children}
+                </div>
+            </div>
+        </>
+    )
+}
+
+export { MdSideBarNavigation };