@greatapps/common 1.1.128 → 1.1.130

package/src/components/layouts/NavBar.tsx

@@ -1,139 +1,139 @@
-"use client";
-
-import * as React from "react";
-import Image from "next/image";
-import { ChevronRight } from "lucide-react";
-import { Separator } from "../ui/data-display/Separator";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
-import { cn } from "../../infra/utils/clsx";
-
-type NavBarProps = {
-  onLogoClick: () => void;
-  onAppIconClick?: () => void;
-  activeApp?: "gapps" | "gpages";
-  showExpandButton?: boolean;
-  onExpandClick?: () => void;
-  children?: React.ReactNode;
-  className?: string;
-};
-
-function NavBar({
-  onLogoClick,
-  onAppIconClick,
-  activeApp,
-  showExpandButton = false,
-  onExpandClick,
-  children,
-  className,
-}: NavBarProps) {
-  return (
-    <div
-      className={cn(
-        "hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white",
-        className,
-      )}
-    >
-      <div className="flex flex-col gap-4 items-center mt-[6.5px]">
-        {/* GreatApps logo */}
-        <div className="relative">
-          <Tooltip>
-            <TooltipTrigger
-              className="cursor-pointer"
-              asChild
-              onClick={onLogoClick}
-            >
-              <Image
-                src="/icons/great-icon.svg"
-                alt="Great Icon"
-                width={28}
-                height={28}
-              />
-            </TooltipTrigger>
-            <TooltipContent side="right">GreatApps</TooltipContent>
-          </Tooltip>
-          <div
-            className={cn(
-              "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
-              activeApp === "gapps" ? "opacity-100" : "opacity-0",
-            )}
-          />
-        </div>
-
-        <div className="relative w-full mt-[7.5px]">
-          <Separator />
-          {showExpandButton && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={onExpandClick}
-                  className="lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10"
-                >
-                  <ChevronRight size={16} className="text-gray-500" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="right">Expandir menu</TooltipContent>
-            </Tooltip>
-          )}
-        </div>
-
-        {/* GreatPages icon */}
-        <div className="flex flex-col gap-2">
-          <div className="relative">
-            <Tooltip>
-              <TooltipTrigger asChild onClick={onAppIconClick}>
-                {activeApp === "gpages" ? (
-                  <div
-                    className="size-10 rounded-xl cursor-pointer p-[2px]"
-                    style={{
-                      border: "1.5px solid rgba(153,234,255,0.75)",
-                      background: "white",
-                      boxShadow:
-                        "0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)",
-                    }}
-                  >
-                    <div
-                      className="w-full h-full rounded-lg flex items-center justify-center"
-                      style={{
-                        background:
-                          "radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)",
-                      }}
-                    >
-                      <Image
-                        src="/icons/icon-navbar.svg"
-                        alt="GreatPages"
-                        width={24}
-                        height={24}
-                      />
-                    </div>
-                  </div>
-                ) : (
-                  <div className="size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300">
-                    <Image
-                      src="/icons/icon-navbar.svg"
-                      alt="GreatPages"
-                      width={28}
-                      height={28}
-                    />
-                  </div>
-                )}
-              </TooltipTrigger>
-              <TooltipContent side="right">GreatPages</TooltipContent>
-            </Tooltip>
-            <div
-              className={cn(
-                "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
-                activeApp === "gpages" ? "opacity-100" : "opacity-0",
-              )}
-              style={{ backgroundColor: "#6ADCFF" }}
-            />
-          </div>
-        </div>
-      </div>
-
-      <div className="flex flex-col items-center gap-2">{children}</div>
-    </div>
-  );
-}
-
-export { NavBar };
-export type { NavBarProps };
+"use client";
+
+import * as React from "react";
+import Image from "next/image";
+import { ChevronRight } from "lucide-react";
+import { Separator } from "../ui/data-display/Separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { cn } from "../../infra/utils/clsx";
+
+type NavBarProps = {
+  onLogoClick: () => void;
+  onAppIconClick?: () => void;
+  activeApp?: "gapps" | "gpages";
+  showExpandButton?: boolean;
+  onExpandClick?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+function NavBar({
+  onLogoClick,
+  onAppIconClick,
+  activeApp,
+  showExpandButton = false,
+  onExpandClick,
+  children,
+  className,
+}: NavBarProps) {
+  return (
+    <div
+      className={cn(
+        "hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white",
+        className,
+      )}
+    >
+      <div className="flex flex-col gap-4 items-center mt-[6.5px]">
+        {/* GreatApps logo */}
+        <div className="relative">
+          <Tooltip>
+            <TooltipTrigger
+              className="cursor-pointer"
+              asChild
+              onClick={onLogoClick}
+            >
+              <Image
+                src="/icons/great-icon.svg"
+                alt="Great Icon"
+                width={28}
+                height={28}
+              />
+            </TooltipTrigger>
+            <TooltipContent side="right">GreatApps</TooltipContent>
+          </Tooltip>
+          <div
+            className={cn(
+              "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
+              activeApp === "gapps" ? "opacity-100" : "opacity-0",
+            )}
+          />
+        </div>
+
+        <div className="relative w-full mt-[7.5px]">
+          <Separator />
+          {showExpandButton && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={onExpandClick}
+                  className="lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10"
+                >
+                  <ChevronRight size={16} className="text-gray-500" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">Expandir menu</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+
+        {/* GreatPages icon */}
+        <div className="flex flex-col gap-2">
+          <div className="relative">
+            <Tooltip>
+              <TooltipTrigger asChild onClick={onAppIconClick}>
+                {activeApp === "gpages" ? (
+                  <div
+                    className="size-10 rounded-xl cursor-pointer p-[2px]"
+                    style={{
+                      border: "1.5px solid rgba(153,234,255,0.75)",
+                      background: "white",
+                      boxShadow:
+                        "0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)",
+                    }}
+                  >
+                    <div
+                      className="w-full h-full rounded-lg flex items-center justify-center"
+                      style={{
+                        background:
+                          "radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)",
+                      }}
+                    >
+                      <Image
+                        src="/icons/icon-navbar.svg"
+                        alt="GreatPages"
+                        width={24}
+                        height={24}
+                      />
+                    </div>
+                  </div>
+                ) : (
+                  <div className="size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300">
+                    <Image
+                      src="/icons/icon-navbar.svg"
+                      alt="GreatPages"
+                      width={28}
+                      height={28}
+                    />
+                  </div>
+                )}
+              </TooltipTrigger>
+              <TooltipContent side="right">GreatPages</TooltipContent>
+            </Tooltip>
+            <div
+              className={cn(
+                "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+                activeApp === "gpages" ? "opacity-100" : "opacity-0",
+              )}
+              style={{ backgroundColor: "#6ADCFF" }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col items-center gap-2">{children}</div>
+    </div>
+  );
+}
+
+export { NavBar };
+export type { NavBarProps };

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/ProjectSelectorPopover.tsx

@@ -4,7 +4,6 @@ import { Dispatch, RefObject, SetStateAction } from 'react';
 import Image from 'next/image';
 import {
   Button,
-  Checkbox,
   Command,
   CommandEmpty,
   CommandInput,
@@ -17,7 +16,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '../../index';
-import { ChevronDown, FolderOpen, Plus, Settings } from 'lucide-react';
+import { CheckIcon, ChevronDown, FolderOpen, Plus, Settings } from 'lucide-react';
 import type { NavigationProject } from './types';
 
 interface ProjectSelectorPopoverProps {
@@ -132,11 +131,9 @@ export function ProjectSelectorPopover({
                             />
                             {project.title}
                           </div>
-                          <Checkbox
-                            checked={isSelected}
-                            onCheckedChange={() => onSelectProject(project)}
-                            className="rounded-full border-0 data-[state=checked]:bg-white data-[state=checked]:border! data-[state=checked]:border-gray-200! text-gray-950!"
-                          />
+                          {isSelected && (
+                            <CheckIcon className="size-4 text-gray-950" />
+                          )}
                         </div>
                       </CommandItem>
                     );

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>
+  );
+}

package/src/components/navigation/subcomponents/ProjectSelector.tsx

@@ -58,12 +58,10 @@ export function ProjectSelector({
             <div className="skeleton h-4 w-32 rounded" />
           ) : (
             <span
-              className="cursor-pointer paragraph-medium-semibold text-gray-600 truncate"
+              className="cursor-pointer paragraph-medium-semibold text-gray-600 truncate max-w-[140px] inline-block"
               onClick={() => setIsPopoverOpen((v) => !v)}
             >
-              {selectedProject?.title && selectedProject.title.length > 15
-                ? `${selectedProject.title.slice(0, 15)}…`
-                : selectedProject?.title}
+              {selectedProject?.title}
             </span>
           )}
           <ProjectSelectorPopover