@greatapps/common 1.1.218 → 1.1.221

package/src/components/navigation/ProjectSelectorPopover.tsx

@@ -1,151 +1,151 @@
-'use client';
-
-import { Dispatch, RefObject, SetStateAction } from 'react';
-import {
-  Button,
-  Command,
-  CommandEmpty,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-  UserAvatar,
-} from '../../index';
-import { CheckIcon, ChevronDown, FolderOpen, Plus, Settings } from 'lucide-react';
-import type { NavigationProject } from './types';
-
-interface ProjectSelectorPopoverProps {
-  open: boolean;
-  setOpen: Dispatch<SetStateAction<boolean>>;
-  titleRef?: RefObject<HTMLSpanElement | null>;
-  projects: NavigationProject[];
-  selectedProject: NavigationProject | null;
-  onSelectProject: (project: NavigationProject) => void;
-  onAddProject: () => void;
-  onManageProjects: () => void;
-  children?: React.ReactNode;
-}
-
-function ProjectItemSkeleton() {
-  return (
-    <div className="flex items-center justify-between px-2 py-1.5 gap-2">
-      <div className="flex items-center gap-2 flex-1">
-        <div className="skeleton size-8 rounded-lg shrink-0" />
-        <div className="skeleton h-3.5 w-32 rounded" />
-      </div>
-      <div className="skeleton size-4 rounded-full shrink-0" />
-    </div>
-  );
-}
-
-export function ProjectSelectorPopover({
-  open,
-  setOpen,
-  titleRef,
-  projects,
-  selectedProject,
-  onSelectProject,
-  onAddProject,
-  onManageProjects,
-  children,
-}: ProjectSelectorPopoverProps) {
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        {children ?? (
-          <button className="cursor-pointer">
-            <ChevronDown
-              size={20}
-              className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
-            />
-          </button>
-        )}
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200"
-        align="start"
-        sideOffset={8}
-        onOpenAutoFocus={(e: Event) => e.preventDefault()}
-        onInteractOutside={(event: Event) => {
-          if (titleRef?.current?.contains(event.target as Node)) {
-            event.preventDefault();
-          }
-        }}
-      >
-        <div className="flex flex-col p-3 gap-2">
-          <div className="flex items-center justify-between">
-            <span className="paragraph-small-semibold">Projetos</span>
-            <div className="flex items-center gap-1.5">
-              <Button
-                variant="secondary"
-                className="h-8! paragraph-small-semibold text-gray-950"
-                onClick={onAddProject}
-              >
-                <Plus size={16} />
-                Adicionar
-              </Button>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button variant="secondary" className="p-0 size-8" onClick={onManageProjects}>
-                    <Settings size={18} />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent className="z-[1002]">Visualizar todos projetos</TooltipContent>
-              </Tooltip>
-            </div>
-          </div>
-          <Command className="gap-2">
-            <CommandInput placeholder="Busque aqui" />
-            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
-              {projects.length === 0 ? (
-                <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
-                  <FolderOpen size={28} className="text-gray-300" />
-                  <span className="paragraph-small-medium text-center text-gray-500">
-                    Nenhum projeto encontrado.
-                    <br />
-                    Crie um projeto para começar.
-                  </span>
-                </div>
-              ) : (
-                <>
-                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
-                  {projects.map((project) => {
-                    const isSelected = selectedProject?.id === project.id;
-                    return (
-                      <CommandItem
-                        key={project.id}
-                        value={`${project.title}-${project.id}`}
-                        keywords={[project.title]}
-                        className={isSelected ? 'bg-gray-50' : ''}
-                        onSelect={() => onSelectProject(project)}
-                      >
-                        <div className="flex items-center justify-between w-full cursor-pointer">
-                          <div className="flex items-center gap-2 w-full">
-                            <UserAvatar
-                              photo={project.photo}
-                              name={project.title}
-                              size={32}
-                            />
-                            {project.title}
-                          </div>
-                          {isSelected && (
-                            <CheckIcon className="size-4 text-gray-950" />
-                          )}
-                        </div>
-                      </CommandItem>
-                    );
-                  })}
-                </>
-              )}
-            </CommandList>
-          </Command>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
+'use client';
+
+import { Dispatch, RefObject, SetStateAction } from 'react';
+import {
+  Button,
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  UserAvatar,
+} from '../../index';
+import { IconCheck, IconChevronDown, IconFolderOpen, IconPlus, IconSettings } from '@tabler/icons-react';
+import type { NavigationProject } from './types';
+
+interface ProjectSelectorPopoverProps {
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  titleRef?: RefObject<HTMLSpanElement | null>;
+  projects: NavigationProject[];
+  selectedProject: NavigationProject | null;
+  onSelectProject: (project: NavigationProject) => void;
+  onAddProject: () => void;
+  onManageProjects: () => void;
+  children?: React.ReactNode;
+}
+
+function ProjectItemSkeleton() {
+  return (
+    <div className="flex items-center justify-between px-2 py-1.5 gap-2">
+      <div className="flex items-center gap-2 flex-1">
+        <div className="skeleton size-8 rounded-lg shrink-0" />
+        <div className="skeleton h-3.5 w-32 rounded" />
+      </div>
+      <div className="skeleton size-4 rounded-full shrink-0" />
+    </div>
+  );
+}
+
+export function ProjectSelectorPopover({
+  open,
+  setOpen,
+  titleRef,
+  projects,
+  selectedProject,
+  onSelectProject,
+  onAddProject,
+  onManageProjects,
+  children,
+}: ProjectSelectorPopoverProps) {
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        {children ?? (
+          <button className="cursor-pointer">
+            <IconChevronDown
+              size={20}
+              className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
+            />
+          </button>
+        )}
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200"
+        align="start"
+        sideOffset={8}
+        onOpenAutoFocus={(e: Event) => e.preventDefault()}
+        onInteractOutside={(event: Event) => {
+          if (titleRef?.current?.contains(event.target as Node)) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <div className="flex flex-col p-3 gap-2">
+          <div className="flex items-center justify-between">
+            <span className="paragraph-small-semibold">Projetos</span>
+            <div className="flex items-center gap-1.5">
+              <Button
+                variant="secondary"
+                className="h-8! paragraph-small-semibold text-gray-950"
+                onClick={onAddProject}
+              >
+                <IconPlus size={16} />
+                Adicionar
+              </Button>
+              <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>
+          <Command className="gap-2">
+            <CommandInput placeholder="Busque aqui" />
+            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
+              {projects.length === 0 ? (
+                <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
+                  <IconFolderOpen size={28} className="text-gray-300" />
+                  <span className="paragraph-small-medium text-center text-gray-500">
+                    Nenhum projeto encontrado.
+                    <br />
+                    Crie um projeto para começar.
+                  </span>
+                </div>
+              ) : (
+                <>
+                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+                  {projects.map((project) => {
+                    const isSelected = selectedProject?.id === project.id;
+                    return (
+                      <CommandItem
+                        key={project.id}
+                        value={`${project.title}-${project.id}`}
+                        keywords={[project.title]}
+                        className={isSelected ? 'bg-gray-50' : ''}
+                        onSelect={() => onSelectProject(project)}
+                      >
+                        <div className="flex items-center justify-between w-full cursor-pointer">
+                          <div className="flex items-center gap-2 w-full">
+                            <UserAvatar
+                              photo={project.photo}
+                              name={project.title}
+                              size={32}
+                            />
+                            {project.title}
+                          </div>
+                          {isSelected && (
+                            <IconCheck className="size-4 text-gray-950" />
+                          )}
+                        </div>
+                      </CommandItem>
+                    );
+                  })}
+                </>
+              )}
+            </CommandList>
+          </Command>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -1,149 +1,149 @@
-'use client';
-
-import { useState, useRef, useEffect, RefObject } from 'react';
-import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
-import { useAppNavigationContext } from '../AppNavigationContext';
-import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
-import { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';
-import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';
-import { ChevronDown, Plus, Settings } from 'lucide-react';
-import type { NavigationProject } from '../types';
-
-export interface ProjectSelectorProps {
-  projects: NavigationProject[];
-  selectedProject: NavigationProject | null;
-  isLoading?: boolean;
-  onSelectProject: (project: NavigationProject) => void;
-  onAddProject: () => void;
-  onManageProjects: () => void;
-}
-
-function ProjectItemSkeleton() {
-  return (
-    <div className="flex items-center gap-2 p-2">
-      <div className="skeleton size-8 rounded-lg shrink-0" />
-      <div className="skeleton h-3.5 w-32 rounded" />
-    </div>
-  );
-}
-
-export function ProjectSelector({
-  projects,
-  selectedProject,
-  isLoading,
-  onSelectProject,
-  onAddProject,
-  onManageProjects,
-}: ProjectSelectorProps) {
-  const { breakpoint } = useAppNavigationContext();
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [activeSection, setActiveSection] = useState<'projects' | null>(null);
-  const titleRef = useRef<HTMLDivElement>(null);
-  const { openProjectList, clearProjectList } = useMobileNavbarSheet();
-
-  useEffect(() => {
-    if (openProjectList && breakpoint === 'mobile') {
-      setActiveSection('projects');
-      clearProjectList();
-    }
-  }, [openProjectList, breakpoint, clearProjectList]);
-
-  // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)
-  if (breakpoint === 'desktop' || breakpoint === 'md') {
-    return (
-      <div className="flex items-center justify-between">
-        <ProjectSelectorPopover
-          open={isPopoverOpen}
-          setOpen={setIsPopoverOpen}
-          titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}
-          projects={projects}
-          selectedProject={selectedProject}
-          onSelectProject={onSelectProject}
-          onAddProject={onAddProject}
-          onManageProjects={onManageProjects}
-        >
-          <div className="flex items-center gap-2 truncate select-none cursor-pointer" ref={titleRef}>
-            {isLoading ? (
-              <div className="skeleton h-4 w-32 rounded" />
-            ) : (
-              <span className="paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block">
-                {selectedProject?.title}
-              </span>
-            )}
-            <ChevronDown
-              size={20}
-              className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
-            />
-          </div>
-        </ProjectSelectorPopover>
-        <div className="flex items-center gap-2">
-          <UsersSelectorPopover projectId={selectedProject?.id} />
-        </div>
-      </div>
-    );
-  }
-
-  // Mobile: inline collapsible accordion
-  return (
-    <div className="flex flex-col gap-2.5">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-1">
-          <span className="paragraph-medium-semibold text-gray-600">{selectedProject?.title}</span>
-          <ChevronDown
-            size={20}
-            onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}
-            className={`transition-transform duration-200 cursor-pointer ${
-              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'
-            }`}
-          />
-        </div>
-        <UsersSelectorPopover projectId={selectedProject?.id} />
-      </div>
-      {activeSection === 'projects' && (
-        <div className="flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400">
-          <div className="flex items-center justify-between">
-            <span className="paragraph-small-semibold">Projetos</span>
-            <div className="flex items-center gap-1.5">
-              <Button variant="secondary" className="h-8! paragraph-small-semibold text-gray-950" onClick={onAddProject}>
-                <Plus size={16} />
-                Adicionar
-              </Button>
-              <Button variant="secondary" className="p-0 size-8" onClick={onManageProjects}>
-                <Settings size={18} />
-              </Button>
-            </div>
-          </div>
-          <Command className="gap-2">
-            <CommandInput placeholder="Busque aqui" />
-            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
-              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
-              {isLoading ? (
-                <>
-                  <ProjectItemSkeleton />
-                  <ProjectItemSkeleton />
-                </>
-              ) : (
-                projects.map((project) => (
-                  <CommandItem
-                    key={project.id}
-                    value={`${project.title}-${project.id}`}
-                    keywords={[project.title]}
-                    className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}
-                    onSelect={() => { onSelectProject(project); setActiveSection(null); }}
-                  >
-                    <UserAvatar
-                      photo={project.photo}
-                      name={project.title}
-                      size={32}
-                    />
-                    {project.title}
-                  </CommandItem>
-                ))
-              )}
-            </CommandList>
-          </Command>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useRef, useEffect, RefObject } from 'react';
+import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
+import { useAppNavigationContext } from '../AppNavigationContext';
+import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
+import { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';
+import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';
+import { IconChevronDown, IconPlus, IconSettings } from '@tabler/icons-react';
+import type { NavigationProject } from '../types';
+
+export interface ProjectSelectorProps {
+  projects: NavigationProject[];
+  selectedProject: NavigationProject | null;
+  isLoading?: boolean;
+  onSelectProject: (project: NavigationProject) => void;
+  onAddProject: () => void;
+  onManageProjects: () => void;
+}
+
+function ProjectItemSkeleton() {
+  return (
+    <div className="flex items-center gap-2 p-2">
+      <div className="skeleton size-8 rounded-lg shrink-0" />
+      <div className="skeleton h-3.5 w-32 rounded" />
+    </div>
+  );
+}
+
+export function ProjectSelector({
+  projects,
+  selectedProject,
+  isLoading,
+  onSelectProject,
+  onAddProject,
+  onManageProjects,
+}: ProjectSelectorProps) {
+  const { breakpoint } = useAppNavigationContext();
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [activeSection, setActiveSection] = useState<'projects' | null>(null);
+  const titleRef = useRef<HTMLDivElement>(null);
+  const { openProjectList, clearProjectList } = useMobileNavbarSheet();
+
+  useEffect(() => {
+    if (openProjectList && breakpoint === 'mobile') {
+      setActiveSection('projects');
+      clearProjectList();
+    }
+  }, [openProjectList, breakpoint, clearProjectList]);
+
+  // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)
+  if (breakpoint === 'desktop' || breakpoint === 'md') {
+    return (
+      <div className="flex items-center justify-between">
+        <ProjectSelectorPopover
+          open={isPopoverOpen}
+          setOpen={setIsPopoverOpen}
+          titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}
+          projects={projects}
+          selectedProject={selectedProject}
+          onSelectProject={onSelectProject}
+          onAddProject={onAddProject}
+          onManageProjects={onManageProjects}
+        >
+          <div className="flex items-center gap-2 truncate select-none cursor-pointer" ref={titleRef}>
+            {isLoading ? (
+              <div className="skeleton h-4 w-32 rounded" />
+            ) : (
+              <span className="paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block">
+                {selectedProject?.title}
+              </span>
+            )}
+            <IconChevronDown
+              size={20}
+              className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
+            />
+          </div>
+        </ProjectSelectorPopover>
+        <div className="flex items-center gap-2">
+          <UsersSelectorPopover projectId={selectedProject?.id} />
+        </div>
+      </div>
+    );
+  }
+
+  // Mobile: inline collapsible accordion
+  return (
+    <div className="flex flex-col gap-2.5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          <span className="paragraph-medium-semibold text-gray-600">{selectedProject?.title}</span>
+          <IconChevronDown
+            size={20}
+            onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}
+            className={`transition-transform duration-200 cursor-pointer ${
+              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'
+            }`}
+          />
+        </div>
+        <UsersSelectorPopover projectId={selectedProject?.id} />
+      </div>
+      {activeSection === 'projects' && (
+        <div className="flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400">
+          <div className="flex items-center justify-between">
+            <span className="paragraph-small-semibold">Projetos</span>
+            <div className="flex items-center gap-1.5">
+              <Button variant="secondary" className="h-8! paragraph-small-semibold text-gray-950" onClick={onAddProject}>
+                <IconPlus size={16} />
+                Adicionar
+              </Button>
+              <Button variant="secondary" className="p-0 size-8" onClick={onManageProjects}>
+                <IconSettings size={18} />
+              </Button>
+            </div>
+          </div>
+          <Command className="gap-2">
+            <CommandInput placeholder="Busque aqui" />
+            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
+              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+              {isLoading ? (
+                <>
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                </>
+              ) : (
+                projects.map((project) => (
+                  <CommandItem
+                    key={project.id}
+                    value={`${project.title}-${project.id}`}
+                    keywords={[project.title]}
+                    className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}
+                    onSelect={() => { onSelectProject(project); setActiveSection(null); }}
+                  >
+                    <UserAvatar
+                      photo={project.photo}
+                      name={project.title}
+                      size={32}
+                    />
+                    {project.title}
+                  </CommandItem>
+                ))
+              )}
+            </CommandList>
+          </Command>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Bell, Check, Loader2 } from "lucide-react";
+import { IconBell, IconCheck, IconLoader2 } from '@tabler/icons-react';
 import { Button } from "../../ui/buttons/Button";
 import {
   Tabs,
@@ -47,7 +47,7 @@ function NotificationsList({
       {notifications.map((notification, index) => (
         <NotificationCard
           key={notification.id}
-          icon={<Bell size={20} className="text-pages-600" />}
+          icon={<IconBell size={20} className="text-pages-600" />}
           iconBgColor="bg-pages-100"
           title={notification.subject}
           description={notification.message}
@@ -62,7 +62,7 @@ function NotificationsList({
       ))}
       {isFetchingNextPage && (
         <div className="flex items-center justify-center py-4">
-          <Loader2 size={20} className="animate-spin text-gray-400" />
+          <IconLoader2 size={20} className="animate-spin text-gray-400" />
         </div>
       )}
     </div>
@@ -117,7 +117,7 @@ export function NotificationPageContent() {
           onClick={handleMarkAllAsRead}
           disabled={isMarkingAll || totalUnread === 0}
         >
-          {isMarkingAll ? <Loader2 size={20} className="animate-spin" /> : <Check size={20} />}
+          {isMarkingAll ? <IconLoader2 size={20} className="animate-spin" /> : <IconCheck size={20} />}
           <span className="lg:block hidden">Marcar todos como lidos</span>
           <span className="lg:hidden">Marcar como lidos</span>
         </Button>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Check, Copy } from "lucide-react";
+import { IconCheck, IconCopy } from '@tabler/icons-react';
 import { toast } from "sonner";
 import { Toast } from "../feedback/Toast";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../overlay/Tooltip";
@@ -45,7 +45,7 @@ export function CopyButton({
         }}
       >
         <span className={cn("cursor-pointer text-gray-500", className)}>
-          {isCopied ? <Check size={size} /> : <Copy size={size} />}
+          {isCopied ? <IconCheck size={size} /> : <IconCopy size={size} />}
         </span>
       </TooltipTrigger>
       <TooltipContent>{isCopied ? "Copiado!" : tooltipText}</TooltipContent>