@greatapps/common 1.1.168 → 1.1.170

package/src/components/layouts/ProfilePopover.tsx

@@ -4,9 +4,9 @@ import { useState } from "react";
 import { useRouter } from "next/navigation";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Popover } from "../ui/overlay/Popover";
-import { Button } from "../ui/buttons/Button";
 import { Progress } from "../ui/feedback/Progress";
 import { Separator } from "../ui/data-display/Separator";
+import { Settings } from "lucide-react";
 import { NavBarItem } from "./NavBarItem";
 import { UserAvatar } from "../ui/data-display/UserAvatar";
 import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
@@ -92,7 +92,7 @@ function ProfilePopover({
             align={align}
             sideOffset={8}
           >
-            <div className="grid grid-cols-[32px_1fr_auto] items-center gap-3 p-3 w-full">
+            <div className="grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full">
               {user && (
                 <UserAvatar
                   key={user.id}
@@ -110,16 +110,6 @@ function ProfilePopover({
                   {user?.email || ""}
                 </span>
               </div>
-
-              {onEditProfile && (
-                <Button
-                  variant="secondary"
-                  className="paragraph-small-semibold h-8! whitespace-nowrap px-3 w-fit"
-                  onClick={onEditProfile}
-                >
-                  Editar Perfil
-                </Button>
-              )}
             </div>
 
             <div className="flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5">
@@ -173,6 +163,13 @@ function ProfilePopover({
                     ))}
                   </div>
                 )}
+                {onEditProfile && (
+                  <NavBarItem
+                    icon={<Settings size={16} />}
+                    label="Configurações"
+                    onClick={onEditProfile}
+                  />
+                )}
                 <Separator />
                 <NavBarItem label="Sair" onClick={handleLogout} />
               </div>

package/src/components/navigation/CancelledSubscriptionBanner.tsx

@@ -1,69 +1,69 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { IconAlertOctagon, IconX } from '@tabler/icons-react';
-import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
-
-function daysBetween(a: Date, b: Date): number {
-  const msPerDay = 24 * 60 * 60 * 1000;
-  const da = new Date(a.getFullYear(), a.getMonth(), a.getDate());
-  const db = new Date(b.getFullYear(), b.getMonth(), b.getDate());
-  return Math.round((db.getTime() - da.getTime()) / msPerDay);
-}
-
-interface CancelledSubscriptionBannerProps {
-  onReactivate?: () => void;
-}
-
-export function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscriptionBannerProps) {
-  const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();
-  const [visible, setVisible] = useState(true);
-  const [animated, setAnimated] = useState(false);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setAnimated(true), 50);
-    return () => clearTimeout(timer);
-  }, []);
-
-  const dismiss = useCallback(() => setVisible(false), []);
-
-  const cancellationDate = subscription?.date_cancellation;
-  if (!cancellationDate || !visible) return null;
-
-  const today = new Date();
-  const daysSinceCancellation = daysBetween(new Date(cancellationDate), today);
-  if (daysSinceCancellation < 0 || daysSinceCancellation > 5) return null;
-
-  const daysRemaining = Math.max(0, 5 - daysSinceCancellation);
-
-  return (
-    <div className="fixed top-[80px] md:top-0 lg:left-[273px] left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0">
-      <div
-        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-red-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}
-      >
-        {daysRemaining > 0 && (
-          <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
-            <IconAlertOctagon size={16} className="text-white shrink-0" />
-            <span className="paragraph-xsmall-semibold text-white">
-              Assinatura cancelada! Em {daysRemaining} dias suas páginas serão tiradas do ar!
-            </span>
-          </div>
-        )}
-        <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
-          <button
-            type="button"
-            className="flex items-center justify-center p-1.5 cursor-pointer"
-            onClick={onReactivate}
-          >
-            <span className="paragraph-xsmall-semibold text-white underline">
-              Reativar assinatura
-            </span>
-          </button>
-          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
-            <IconX size={18} className="text-red-200" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { IconAlertOctagon, IconX } from '@tabler/icons-react';
+import { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';
+
+function daysBetween(a: Date, b: Date): number {
+  const msPerDay = 24 * 60 * 60 * 1000;
+  const da = new Date(a.getFullYear(), a.getMonth(), a.getDate());
+  const db = new Date(b.getFullYear(), b.getMonth(), b.getDate());
+  return Math.round((db.getTime() - da.getTime()) / msPerDay);
+}
+
+interface CancelledSubscriptionBannerProps {
+  onReactivate?: () => void;
+}
+
+export function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscriptionBannerProps) {
+  const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();
+  const [visible, setVisible] = useState(true);
+  const [animated, setAnimated] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setAnimated(true), 50);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const dismiss = useCallback(() => setVisible(false), []);
+
+  const cancellationDate = subscription?.date_cancellation;
+  if (!cancellationDate || !visible) return null;
+
+  const today = new Date();
+  const daysSinceCancellation = daysBetween(new Date(cancellationDate), today);
+  if (daysSinceCancellation < 0 || daysSinceCancellation > 5) return null;
+
+  const daysRemaining = Math.max(0, 5 - daysSinceCancellation);
+
+  return (
+    <div className="fixed top-[80px] md:top-0 lg:left-[273px] left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0">
+      <div
+        className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-red-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}
+      >
+        {daysRemaining > 0 && (
+          <div className="flex items-center gap-2 flex-1 w-full sm:w-auto">
+            <IconAlertOctagon size={16} className="text-white shrink-0" />
+            <span className="paragraph-xsmall-semibold text-white">
+              Assinatura cancelada! Em {daysRemaining} dias suas páginas serão tiradas do ar!
+            </span>
+          </div>
+        )}
+        <div className="flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start">
+          <button
+            type="button"
+            className="flex items-center justify-center p-1.5 cursor-pointer"
+            onClick={onReactivate}
+          >
+            <span className="paragraph-xsmall-semibold text-white underline">
+              Reativar assinatura
+            </span>
+          </button>
+          <button type="button" className="cursor-pointer shrink-0" onClick={dismiss}>
+            <IconX size={18} className="text-red-200" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/navigation/NavItemsContext.ts

@@ -1,20 +1,20 @@
-'use client';
-
-import { createContext, useContext } from 'react';
-import type { NavItemConfig } from './subcomponents/NavItems';
-
-interface NavItemsContextValue {
-  navItems: NavItemConfig[];
-  setNavItems: (items: NavItemConfig[]) => void;
-  mobileVariant: 'sheet' | 'tabs';
-}
-
-export const NavItemsContext = createContext<NavItemsContextValue>({
-  navItems: [],
-  setNavItems: () => {},
-  mobileVariant: 'sheet',
-});
-
-export function useNavItemsContext(): NavItemsContextValue {
-  return useContext(NavItemsContext);
-}
+'use client';
+
+import { createContext, useContext } from 'react';
+import type { NavItemConfig } from './subcomponents/NavItems';
+
+interface NavItemsContextValue {
+  navItems: NavItemConfig[];
+  setNavItems: (items: NavItemConfig[]) => void;
+  mobileVariant: 'sheet' | 'tabs';
+}
+
+export const NavItemsContext = createContext<NavItemsContextValue>({
+  navItems: [],
+  setNavItems: () => {},
+  mobileVariant: 'sheet',
+});
+
+export function useNavItemsContext(): NavItemsContextValue {
+  return useContext(NavItemsContext);
+}

package/src/components/navigation/shells/TabsMobileShell.tsx

@@ -1,72 +1,72 @@
-'use client';
-
-import { ReactNode, useRef, useEffect } from 'react';
-import { AppNavigationContext } from '../AppNavigationContext';
-import { useNavItemsContext } from '../NavItemsContext';
-
-function InternalTabsBar({ topOffset = '72px' }: { topOffset?: string }) {
-  const { navItems } = useNavItemsContext();
-  const tabsListRef = useRef<HTMLDivElement>(null);
-  const activeTabRef = useRef<HTMLButtonElement>(null);
-
-  const activeLabel = navItems.find((i) => i.isActive)?.label;
-
-  // Scroll active tab into center when active item changes
-  useEffect(() => {
-    if (activeTabRef.current && tabsListRef.current) {
-      const tabsList = tabsListRef.current;
-      const activeTabElement = activeTabRef.current;
-      const tabsListRect = tabsList.getBoundingClientRect();
-      const activeTabRect = activeTabElement.getBoundingClientRect();
-      const scrollLeft =
-        activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;
-      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' });
-    }
-  }, [activeLabel]);
-
-  if (!navItems.length) return null;
-
-  return (
-    <div
-      ref={tabsListRef}
-      className="md:hidden fixed left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide"
-      style={{ top: topOffset }}
-    >
-      {navItems.map((item) => (
-        <button
-          key={item.label}
-          ref={item.isActive ? activeTabRef : undefined}
-          onClick={item.onClick}
-          className={`flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${
-            item.isActive
-              ? 'border-gray-950 text-gray-950'
-              : 'border-transparent text-gray-500 hover:text-gray-900'
-          }`}
-        >
-          {item.icon && <item.icon size={16} className="shrink-0" />}
-          <span
-            className={
-              item.isActive ? 'paragraph-small-semibold' : 'paragraph-small-medium'
-            }
-          >
-            {item.label}
-          </span>
-        </button>
-      ))}
-    </div>
-  );
-}
-
-export function TabsMobileShell({ children, topOffset }: { children: ReactNode; topOffset?: string }) {
-  return (
-    <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>
-      {/*
-        Children are hidden visually, but NavItems' useEffect still fires inside
-        display:none — React effects are tied to commit phase, not layout visibility.
-        This registers navItems in NavItemsContext so InternalTabsBar can read them.
-      */}
-      <div className="hidden">{children}</div>
-      <InternalTabsBar topOffset={topOffset} />
-    </AppNavigationContext.Provider>
-  );
-}
+'use client';
+
+import { ReactNode, useRef, useEffect } from 'react';
+import { AppNavigationContext } from '../AppNavigationContext';
+import { useNavItemsContext } from '../NavItemsContext';
+
+function InternalTabsBar({ topOffset = '72px' }: { topOffset?: string }) {
+  const { navItems } = useNavItemsContext();
+  const tabsListRef = useRef<HTMLDivElement>(null);
+  const activeTabRef = useRef<HTMLButtonElement>(null);
+
+  const activeLabel = navItems.find((i) => i.isActive)?.label;
+
+  // Scroll active tab into center when active item changes
+  useEffect(() => {
+    if (activeTabRef.current && tabsListRef.current) {
+      const tabsList = tabsListRef.current;
+      const activeTabElement = activeTabRef.current;
+      const tabsListRect = tabsList.getBoundingClientRect();
+      const activeTabRect = activeTabElement.getBoundingClientRect();
+      const scrollLeft =
+        activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;
+      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' });
+    }
+  }, [activeLabel]);
+
+  if (!navItems.length) return null;
+
+  return (
+    <div
+      ref={tabsListRef}
+      className="md:hidden fixed left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide"
+      style={{ top: topOffset }}
+    >
+      {navItems.map((item) => (
+        <button
+          key={item.label}
+          ref={item.isActive ? activeTabRef : undefined}
+          onClick={item.onClick}
+          className={`flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${
+            item.isActive
+              ? 'border-gray-950 text-gray-950'
+              : 'border-transparent text-gray-500 hover:text-gray-900'
+          }`}
+        >
+          {item.icon && <item.icon size={16} className="shrink-0" />}
+          <span
+            className={
+              item.isActive ? 'paragraph-small-semibold' : 'paragraph-small-medium'
+            }
+          >
+            {item.label}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function TabsMobileShell({ children, topOffset }: { children: ReactNode; topOffset?: string }) {
+  return (
+    <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>
+      {/*
+        Children are hidden visually, but NavItems' useEffect still fires inside
+        display:none — React effects are tied to commit phase, not layout visibility.
+        This registers navItems in NavItemsContext so InternalTabsBar can read them.
+      */}
+      <div className="hidden">{children}</div>
+      <InternalTabsBar topOffset={topOffset} />
+    </AppNavigationContext.Provider>
+  );
+}