@greatapps/common 1.1.378 → 1.1.380

package/dist/components/navigation/ProjectSelectorPopover.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
 import { ADDON_IDS } from "../../modules/subscriptions/constants/addons.constants";
 import { useHasPlanAddon } from "../../modules/plans/hooks/use-has-plan-addon.hook";
 import {
@@ -16,10 +17,10 @@ import {
 } from "../../index";
 import { IconCheck, IconChevronDown, IconFolderOpen, IconPlus } from "@tabler/icons-react";
 function ProjectItemSkeleton() {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 gap-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-2 gap-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
-      /* @__PURE__ */ jsx("div", { className: "skeleton size-8 rounded-lg shrink-0" }),
-      /* @__PURE__ */ jsx("div", { className: "skeleton h-3.5 w-32 rounded" })
+      /* @__PURE__ */ jsx("div", { className: "skeleton size-9 rounded-lg shrink-0" }),
+      /* @__PURE__ */ jsx("div", { className: "skeleton h-4 w-36 rounded" })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "skeleton size-4 rounded-full shrink-0" })
   ] });
@@ -30,12 +31,24 @@ function ProjectSelectorPopover({
   titleRef,
   projects,
   selectedProject,
+  isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  onLoadMore,
   onSelectProject,
   onAddProject,
   onManageProjects,
   children
 }) {
   const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);
+  const handleListScroll = useCallback((event) => {
+    if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
+    const target = event.currentTarget;
+    const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+    if (distanceToBottom <= 80) {
+      onLoadMore();
+    }
+  }, [hasNextPage, isFetchingNextPage, onLoadMore]);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsx("button", { className: "cursor-pointer", children: /* @__PURE__ */ jsx(
       IconChevronDown,
@@ -74,43 +87,59 @@ function ProjectSelectorPopover({
           ] }),
           /* @__PURE__ */ jsxs(Command, { className: "gap-2", children: [
             /* @__PURE__ */ jsx(CommandInput, { placeholder: "Busque aqui" }),
-            /* @__PURE__ */ jsx(CommandList, { className: "custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]", children: projects.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4", children: [
-              /* @__PURE__ */ jsx(IconFolderOpen, { size: 28, className: "text-gray-300" }),
-              /* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-center text-gray-500", children: [
-                "Nenhum projeto encontrado.",
-                /* @__PURE__ */ jsx("br", {}),
-                "Crie um projeto para come\xE7ar."
-              ] })
-            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(CommandEmpty, { children: "Nenhum resultado encontrado." }),
-              projects.map((project) => {
-                const isSelected = selectedProject?.id === project.id;
-                return /* @__PURE__ */ jsx(
-                  CommandItem,
-                  {
-                    value: `${project.title}-${project.id}`,
-                    keywords: [project.title],
-                    className: isSelected ? "bg-gray-50" : "",
-                    onSelect: () => onSelectProject(project),
-                    children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full cursor-pointer", children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
-                        /* @__PURE__ */ jsx(
-                          UserAvatar,
-                          {
-                            photo: project.photo,
-                            name: project.title,
-                            size: 32
-                          }
-                        ),
-                        project.title
-                      ] }),
-                      isSelected && /* @__PURE__ */ jsx(IconCheck, { className: "size-4 text-gray-950" })
-                    ] })
-                  },
-                  project.id
-                );
-              })
-            ] }) })
+            /* @__PURE__ */ jsx(
+              CommandList,
+              {
+                className: "custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]",
+                onScroll: handleListScroll,
+                children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                  /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                  /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                  /* @__PURE__ */ jsx(ProjectItemSkeleton, {})
+                ] }) : projects.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4", children: [
+                  /* @__PURE__ */ jsx(IconFolderOpen, { size: 28, className: "text-gray-300" }),
+                  /* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-center text-gray-500", children: [
+                    "Nenhum projeto encontrado.",
+                    /* @__PURE__ */ jsx("br", {}),
+                    "Crie um projeto para come\xE7ar."
+                  ] })
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(CommandEmpty, { children: "Nenhum resultado encontrado." }),
+                  projects.map((project) => {
+                    const isSelected = selectedProject?.id === project.id;
+                    return /* @__PURE__ */ jsx(
+                      CommandItem,
+                      {
+                        value: `${project.title}-${project.id}`,
+                        keywords: [project.title],
+                        className: isSelected ? "bg-gray-50 min-h-[39px]" : "min-h-[39px]",
+                        onSelect: () => onSelectProject(project),
+                        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full cursor-pointer", children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+                            /* @__PURE__ */ jsx(
+                              UserAvatar,
+                              {
+                                photo: project.photo,
+                                name: project.title,
+                                size: 36
+                              }
+                            ),
+                            project.title
+                          ] }),
+                          isSelected && /* @__PURE__ */ jsx(IconCheck, { className: "size-4 text-gray-950" })
+                        ] })
+                      },
+                      project.id
+                    );
+                  }),
+                  isFetchingNextPage && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                    /* @__PURE__ */ jsx(ProjectItemSkeleton, {})
+                  ] })
+                ] })
+              }
+            )
           ] }),
           onManageProjects && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200" }),

package/dist/components/navigation/ProjectSelectorPopover.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\n\nimport { Dispatch, RefObject, SetStateAction } from 'react';\nimport { ADDON_IDS } from '../../modules/subscriptions/constants/addons.constants';\nimport { useHasPlanAddon } from '../../modules/plans/hooks/use-has-plan-addon.hook';\nimport {\n  Button,\n  Command,\n  CommandEmpty,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  UserAvatar,\n} from '../../index';\nimport { IconCheck, IconChevronDown, IconFolderOpen, IconPlus } from '@tabler/icons-react';\nimport type { NavigationProject } from './types';\n\ninterface ProjectSelectorPopoverProps {\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  titleRef?: RefObject<HTMLSpanElement | null>;\n  projects: NavigationProject[];\n  selectedProject: NavigationProject | null;\n  onSelectProject: (project: NavigationProject) => void;\n  onAddProject?: () => void;\n  onManageProjects?: () => void;\n  children?: React.ReactNode;\n}\n\nfunction ProjectItemSkeleton() {\n  return (\n    <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\n      <div className=\"flex items-center gap-2 flex-1\">\n        <div className=\"skeleton size-8 rounded-lg shrink-0\" />\n        <div className=\"skeleton h-3.5 w-32 rounded\" />\n      </div>\n      <div className=\"skeleton size-4 rounded-full shrink-0\" />\n    </div>\n  );\n}\n\nexport function ProjectSelectorPopover({\n  open,\n  setOpen,\n  titleRef,\n  projects,\n  selectedProject,\n  onSelectProject,\n  onAddProject,\n  onManageProjects,\n  children,\n}: ProjectSelectorPopoverProps) {\n  const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        {children ?? (\n          <button className=\"cursor-pointer\">\n            <IconChevronDown\n              size={20}\n              className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n            />\n          </button>\n        )}\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\n        align=\"start\"\n        sideOffset={8}\n        onOpenAutoFocus={(e: Event) => e.preventDefault()}\n        onInteractOutside={(event: Event) => {\n          if (titleRef?.current?.contains(event.target as Node)) {\n            event.preventDefault();\n          }\n        }}\n      >\n        <div className=\"flex flex-col p-3 gap-2\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"paragraph-small-semibold\">Projetos</span>\n            {(onAddProject || onManageProjects) && (\n              <div className=\"flex items-center gap-1.5\">\n                {canAddProject && onAddProject && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"h-8! paragraph-small-semibold text-gray-950\"\n                    onClick={onAddProject}\n                  >\n                    <IconPlus size={16} />\n                    Adicionar\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n          <Command className=\"gap-2\">\n            <CommandInput placeholder=\"Busque aqui\" />\n            <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\n              {projects.length === 0 ? (\n                <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n                  <IconFolderOpen size={28} className=\"text-gray-300\" />\n                  <span className=\"paragraph-small-medium text-center text-gray-500\">\n                    Nenhum projeto encontrado.\n                    <br />\n                    Crie um projeto para começar.\n                  </span>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n                  {projects.map((project) => {\n                    const isSelected = selectedProject?.id === project.id;\n                    return (\n                      <CommandItem\n                        key={project.id}\n                        value={`${project.title}-${project.id}`}\n                        keywords={[project.title]}\n                        className={isSelected ? 'bg-gray-50' : ''}\n                        onSelect={() => onSelectProject(project)}\n                      >\n                        <div className=\"flex items-center justify-between w-full cursor-pointer\">\n                          <div className=\"flex items-center gap-2 w-full\">\n                            <UserAvatar\n                              photo={project.photo}\n                              name={project.title}\n                              size={32}\n                            />\n                            {project.title}\n                          </div>\n                          {isSelected && (\n                            <IconCheck className=\"size-4 text-gray-950\" />\n                          )}\n                        </div>\n                      </CommandItem>\n                    );\n                  })}\n                </>\n              )}\n            </CommandList>\n          </Command>\n          {onManageProjects && (\n            <>\n              <div className=\"border-t border-gray-200\" />\n              <Button\n                variant=\"ghost\"\n                className=\"h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center\"\n                onClick={onManageProjects}\n              >\n                Gerenciar projetos\n              </Button>\n            </>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";AAmCM,SA4EU,UA3ER,KADF;AAhCN,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,iBAAiB,gBAAgB,gBAAgB;AAerE,SAAS,sBAAsB;AAC7B,SACE,qBAAC,SAAI,WAAU,uDACb;AAAA,yBAAC,SAAI,WAAU,kCACb;AAAA,0BAAC,SAAI,WAAU,uCAAsC;AAAA,MACrD,oBAAC,SAAI,WAAU,+BAA8B;AAAA,OAC/C;AAAA,IACA,oBAAC,SAAI,WAAU,yCAAwC;AAAA,KACzD;AAEJ;AAEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,EAAE,UAAU,cAAc,IAAI,gBAAgB,UAAU,QAAQ;AAEtE,SACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,wBAAC,kBAAe,SAAO,MACpB,sBACC,oBAAC,YAAO,WAAU,kBAChB;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW,qCAAqC,OAAO,6BAA6B,eAAe;AAAA;AAAA,IACrG,GACF,GAEJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAM;AAAA,QACN,YAAY;AAAA,QACZ,iBAAiB,CAAC,MAAa,EAAE,eAAe;AAAA,QAChD,mBAAmB,CAAC,UAAiB;AACnC,cAAI,UAAU,SAAS,SAAS,MAAM,MAAc,GAAG;AACrD,kBAAM,eAAe;AAAA,UACvB;AAAA,QACF;AAAA,QAEA,+BAAC,SAAI,WAAU,2BACb;AAAA,+BAAC,SAAI,WAAU,qCACb;AAAA,gCAAC,UAAK,WAAU,4BAA2B,sBAAQ;AAAA,aACjD,gBAAgB,qBAChB,oBAAC,SAAI,WAAU,6BACZ,2BAAiB,gBAChB;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAU;AAAA,gBACV,SAAS;AAAA,gBAET;AAAA,sCAAC,YAAS,MAAM,IAAI;AAAA,kBAAE;AAAA;AAAA;AAAA,YAExB,GAEJ;AAAA,aAEJ;AAAA,UACA,qBAAC,WAAQ,WAAU,SACjB;AAAA,gCAAC,gBAAa,aAAY,eAAc;AAAA,YACxC,oBAAC,eAAY,WAAU,mEACpB,mBAAS,WAAW,IACnB,qBAAC,SAAI,WAAU,6EACb;AAAA,kCAAC,kBAAe,MAAM,IAAI,WAAU,iBAAgB;AAAA,cACpD,qBAAC,UAAK,WAAU,oDAAmD;AAAA;AAAA,gBAEjE,oBAAC,QAAG;AAAA,gBAAE;AAAA,iBAER;AAAA,eACF,IAEA,iCACE;AAAA,kCAAC,gBAAa,0CAA4B;AAAA,cACzC,SAAS,IAAI,CAAC,YAAY;AACzB,sBAAM,aAAa,iBAAiB,OAAO,QAAQ;AACnD,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC,OAAO,GAAG,QAAQ,KAAK,IAAI,QAAQ,EAAE;AAAA,oBACrC,UAAU,CAAC,QAAQ,KAAK;AAAA,oBACxB,WAAW,aAAa,eAAe;AAAA,oBACvC,UAAU,MAAM,gBAAgB,OAAO;AAAA,oBAEvC,+BAAC,SAAI,WAAU,2DACb;AAAA,2CAAC,SAAI,WAAU,kCACb;AAAA;AAAA,0BAAC;AAAA;AAAA,4BACC,OAAO,QAAQ;AAAA,4BACf,MAAM,QAAQ;AAAA,4BACd,MAAM;AAAA;AAAA,wBACR;AAAA,wBACC,QAAQ;AAAA,yBACX;AAAA,sBACC,cACC,oBAAC,aAAU,WAAU,wBAAuB;AAAA,uBAEhD;AAAA;AAAA,kBAlBK,QAAQ;AAAA,gBAmBf;AAAA,cAEJ,CAAC;AAAA,eACH,GAEJ;AAAA,aACF;AAAA,UACC,oBACC,iCACE;AAAA,gCAAC,SAAI,WAAU,4BAA2B;AAAA,YAC1C;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAU;AAAA,gBACV,SAAS;AAAA,gBACV;AAAA;AAAA,YAED;AAAA,aACF;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\n\nimport { Dispatch, RefObject, SetStateAction, UIEvent, useCallback } from 'react';\nimport { ADDON_IDS } from '../../modules/subscriptions/constants/addons.constants';\nimport { useHasPlanAddon } from '../../modules/plans/hooks/use-has-plan-addon.hook';\nimport {\n  Button,\n  Command,\n  CommandEmpty,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  UserAvatar,\n} from '../../index';\nimport { IconCheck, IconChevronDown, IconFolderOpen, IconPlus } from '@tabler/icons-react';\nimport type { NavigationProject } from './types';\n\ninterface ProjectSelectorPopoverProps {\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  titleRef?: RefObject<HTMLSpanElement | null>;\n  projects: NavigationProject[];\n  selectedProject: NavigationProject | null;\n  isLoading?: boolean;\n  isFetchingNextPage?: boolean;\n  hasNextPage?: boolean;\n  onLoadMore?: () => void | Promise<unknown>;\n  onSelectProject: (project: NavigationProject) => void;\n  onAddProject?: () => void;\n  onManageProjects?: () => void;\n  children?: React.ReactNode;\n}\n\nfunction ProjectItemSkeleton() {\n  return (\n    <div className=\"flex items-center justify-between px-2 py-2 gap-2\">\n      <div className=\"flex items-center gap-2 flex-1\">\n        <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n        <div className=\"skeleton h-4 w-36 rounded\" />\n      </div>\n      <div className=\"skeleton size-4 rounded-full shrink-0\" />\n    </div>\n  );\n}\n\nexport function ProjectSelectorPopover({\n  open,\n  setOpen,\n  titleRef,\n  projects,\n  selectedProject,\n  isLoading,\n  isFetchingNextPage,\n  hasNextPage,\n  onLoadMore,\n  onSelectProject,\n  onAddProject,\n  onManageProjects,\n  children,\n}: ProjectSelectorPopoverProps) {\n  const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);\n  const handleListScroll = useCallback((event: UIEvent<HTMLDivElement>) => {\n    if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;\n\n    const target = event.currentTarget;\n    const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n    if (distanceToBottom <= 80) {\n      onLoadMore();\n    }\n  }, [hasNextPage, isFetchingNextPage, onLoadMore]);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        {children ?? (\n          <button className=\"cursor-pointer\">\n            <IconChevronDown\n              size={20}\n              className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n            />\n          </button>\n        )}\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\n        align=\"start\"\n        sideOffset={8}\n        onOpenAutoFocus={(e: Event) => e.preventDefault()}\n        onInteractOutside={(event: Event) => {\n          if (titleRef?.current?.contains(event.target as Node)) {\n            event.preventDefault();\n          }\n        }}\n      >\n        <div className=\"flex flex-col p-3 gap-2\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"paragraph-small-semibold\">Projetos</span>\n            {(onAddProject || onManageProjects) && (\n              <div className=\"flex items-center gap-1.5\">\n                {canAddProject && onAddProject && (\n                  <Button\n                    variant=\"secondary\"\n                    className=\"h-8! paragraph-small-semibold text-gray-950\"\n                    onClick={onAddProject}\n                  >\n                    <IconPlus size={16} />\n                    Adicionar\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n          <Command className=\"gap-2\">\n            <CommandInput placeholder=\"Busque aqui\" />\n            <CommandList\n              className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]\"\n              onScroll={handleListScroll}\n            >\n              {isLoading ? (\n                <>\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                </>\n              ) : projects.length === 0 ? (\n                <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n                  <IconFolderOpen size={28} className=\"text-gray-300\" />\n                  <span className=\"paragraph-small-medium text-center text-gray-500\">\n                    Nenhum projeto encontrado.\n                    <br />\n                    Crie um projeto para começar.\n                  </span>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n                  {projects.map((project) => {\n                    const isSelected = selectedProject?.id === project.id;\n                    return (\n                      <CommandItem\n                        key={project.id}\n                        value={`${project.title}-${project.id}`}\n                        keywords={[project.title]}\n                        className={isSelected ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}\n                        onSelect={() => onSelectProject(project)}\n                      >\n                        <div className=\"flex items-center justify-between w-full cursor-pointer\">\n                          <div className=\"flex items-center gap-2 w-full\">\n                            <UserAvatar\n                              photo={project.photo}\n                              name={project.title}\n                              size={36}\n                            />\n                            {project.title}\n                          </div>\n                          {isSelected && (\n                            <IconCheck className=\"size-4 text-gray-950\" />\n                          )}\n                        </div>\n                      </CommandItem>\n                    );\n                  })}\n                  {isFetchingNextPage && (\n                    <>\n                      <ProjectItemSkeleton />\n                      <ProjectItemSkeleton />\n                    </>\n                  )}\n                </>\n              )}\n            </CommandList>\n          </Command>\n          {onManageProjects && (\n            <>\n              <div className=\"border-t border-gray-200\" />\n              <Button\n                variant=\"ghost\"\n                className=\"h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center\"\n                onClick={onManageProjects}\n              >\n                Gerenciar projetos\n              </Button>\n            </>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/navigation/subcomponents/ProjectSelector.mjs

@@ -10,15 +10,18 @@ import { UsersSelectorPopover } from "../../layouts/UsersSelectorPopover";
 import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from "../../../index";
 import { IconChevronDown, IconPlus, IconSettings } from "@tabler/icons-react";
 function ProjectItemSkeleton() {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
-    /* @__PURE__ */ jsx("div", { className: "skeleton size-8 rounded-lg shrink-0" }),
-    /* @__PURE__ */ jsx("div", { className: "skeleton h-3.5 w-32 rounded" })
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-[8.8px]", children: [
+    /* @__PURE__ */ jsx("div", { className: "skeleton size-9 rounded-lg shrink-0" }),
+    /* @__PURE__ */ jsx("div", { className: "skeleton h-4 w-36 rounded" })
   ] });
 }
 function ProjectSelector({
   projects,
   selectedProject,
   isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  onLoadMore,
   onSelectProject,
   onAddProject,
   onManageProjects
@@ -45,6 +48,10 @@ function ProjectSelector({
           titleRef,
           projects,
           selectedProject,
+          isLoading,
+          isFetchingNextPage,
+          hasNextPage,
+          onLoadMore,
           onSelectProject,
           onAddProject,
           onManageProjects,
@@ -97,36 +104,56 @@ function ProjectSelector({
       ] }),
       /* @__PURE__ */ jsxs(Command, { className: "gap-2", children: [
         /* @__PURE__ */ jsx(CommandInput, { placeholder: "Busque aqui" }),
-        /* @__PURE__ */ jsxs(CommandList, { className: "custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]", children: [
-          /* @__PURE__ */ jsx(CommandEmpty, { children: "Nenhum resultado encontrado." }),
-          isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
-            /* @__PURE__ */ jsx(ProjectItemSkeleton, {})
-          ] }) : projects.map((project) => /* @__PURE__ */ jsxs(
-            CommandItem,
-            {
-              value: `${project.title}-${project.id}`,
-              keywords: [project.title],
-              className: selectedProject?.id === project.id ? "bg-gray-50" : "",
-              onSelect: () => {
-                onSelectProject(project);
-                setActiveSection(null);
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  UserAvatar,
-                  {
-                    photo: project.photo,
-                    name: project.title,
-                    size: 32
-                  }
-                ),
-                project.title
-              ]
+        /* @__PURE__ */ jsxs(
+          CommandList,
+          {
+            className: "custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]",
+            onScroll: (event) => {
+              if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
+              const target = event.currentTarget;
+              const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+              if (distanceToBottom <= 80) {
+                onLoadMore();
+              }
             },
-            project.id
-          ))
-        ] })
+            children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: "Nenhum resultado encontrado." }),
+              isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                /* @__PURE__ */ jsx(ProjectItemSkeleton, {})
+              ] }) : projects.map((project) => /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: `${project.title}-${project.id}`,
+                  keywords: [project.title],
+                  className: selectedProject?.id === project.id ? "bg-gray-50 min-h-[39px]" : "min-h-[39px]",
+                  onSelect: () => {
+                    onSelectProject(project);
+                    setActiveSection(null);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      UserAvatar,
+                      {
+                        photo: project.photo,
+                        name: project.title,
+                        size: 36
+                      }
+                    ),
+                    project.title
+                  ]
+                },
+                project.id
+              )),
+              isFetchingNextPage && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                /* @__PURE__ */ jsx(ProjectItemSkeleton, {})
+              ] })
+            ]
+          }
+        )
       ] })
     ] })
   ] });

package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef, useEffect, RefObject } from 'react';\nimport { ADDON_IDS } from '../../../modules/subscriptions/constants/addons.constants';\nimport { useHasPlanAddon } from '../../../modules/plans/hooks/use-has-plan-addon.hook';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';\nimport { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';\nimport { IconChevronDown, IconPlus, IconSettings } from '@tabler/icons-react';\nimport type { NavigationProject } from '../types';\n\nexport interface ProjectSelectorProps {\n  projects: NavigationProject[];\n  selectedProject: NavigationProject | null;\n  isLoading?: boolean;\n  onSelectProject: (project: NavigationProject) => void;\n  onAddProject?: () => void;\n  onManageProjects?: () => void;\n}\n\nfunction ProjectItemSkeleton() {\n  return (\n    <div className=\"flex items-center gap-2 p-2\">\n      <div className=\"skeleton size-8 rounded-lg shrink-0\" />\n      <div className=\"skeleton h-3.5 w-32 rounded\" />\n    </div>\n  );\n}\n\nexport function ProjectSelector({\n  projects,\n  selectedProject,\n  isLoading,\n  onSelectProject,\n  onAddProject,\n  onManageProjects,\n}: ProjectSelectorProps) {\n  const { breakpoint } = useAppNavigationContext();\n  const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n  const [activeSection, setActiveSection] = useState<'projects' | null>(null);\n  const titleRef = useRef<HTMLDivElement>(null);\n  const { openProjectList, clearProjectList } = useMobileNavbarSheet();\n\n  useEffect(() => {\n    if (openProjectList && breakpoint === 'mobile') {\n      setActiveSection('projects');\n      clearProjectList();\n    }\n  }, [openProjectList, breakpoint, clearProjectList]);\n\n  // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)\n  if (breakpoint === 'desktop' || breakpoint === 'md') {\n    return (\n      <div className=\"flex items-center justify-between\">\n        <ProjectSelectorPopover\n          open={isPopoverOpen}\n          setOpen={setIsPopoverOpen}\n          titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\n          projects={projects}\n          selectedProject={selectedProject}\n          onSelectProject={onSelectProject}\n          onAddProject={onAddProject}\n          onManageProjects={onManageProjects}\n        >\n          <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\n            {isLoading ? (\n              <div className=\"skeleton h-4 w-32 rounded\" />\n            ) : (\n              <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block\">\n                {selectedProject?.title}\n              </span>\n            )}\n            <IconChevronDown\n              size={20}\n              className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n            />\n          </div>\n        </ProjectSelectorPopover>\n        <div className=\"flex items-center gap-2\">\n          <UsersSelectorPopover projectId={selectedProject?.id} />\n        </div>\n      </div>\n    );\n  }\n\n  // Mobile: inline collapsible accordion\n  return (\n    <div className=\"flex flex-col gap-2.5\">\n      <div className=\"flex items-center justify-between\">\n        <div\n          className=\"flex items-center gap-1 cursor-pointer\"\n          onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\n        >\n          <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\n          <IconChevronDown\n            size={20}\n            className={`transition-transform duration-200 ${\n              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\n            }`}\n          />\n        </div>\n        <UsersSelectorPopover projectId={selectedProject?.id} />\n      </div>\n      {activeSection === 'projects' && (\n        <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"paragraph-small-semibold\">Projetos</span>\n            {(onAddProject || onManageProjects) && (\n              <div className=\"flex items-center gap-1.5\">\n                {canAddProject && onAddProject && (\n                  <Button variant=\"secondary\" className=\"h-8! paragraph-small-semibold text-gray-950\" onClick={onAddProject}>\n                    <IconPlus size={16} />\n                    Adicionar\n                  </Button>\n                )}\n                {onManageProjects && (\n                  <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\n                    <IconSettings size={18} />\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n          <Command className=\"gap-2\">\n            <CommandInput placeholder=\"Busque aqui\" />\n            <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\n              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n              {isLoading ? (\n                <>\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                </>\n              ) : (\n                projects.map((project) => (\n                  <CommandItem\n                    key={project.id}\n                    value={`${project.title}-${project.id}`}\n                    keywords={[project.title]}\n                    className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}\n                    onSelect={() => { onSelectProject(project); setActiveSection(null); }}\n                  >\n                    <UserAvatar\n                      photo={project.photo}\n                      name={project.title}\n                      size={32}\n                    />\n                    {project.title}\n                  </CommandItem>\n                ))\n              )}\n            </CommandList>\n          </Command>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef, useEffect, RefObject } from 'react';\nimport { ADDON_IDS } from '../../../modules/subscriptions/constants/addons.constants';\nimport { useHasPlanAddon } from '../../../modules/plans/hooks/use-has-plan-addon.hook';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';\nimport { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';\nimport { IconChevronDown, IconPlus, IconSettings } from '@tabler/icons-react';\nimport type { NavigationProject } from '../types';\n\nexport interface ProjectSelectorProps {\n  projects: NavigationProject[];\n  selectedProject: NavigationProject | null;\n  isLoading?: boolean;\n  isFetchingNextPage?: boolean;\n  hasNextPage?: boolean;\n  onLoadMore?: () => void | Promise<unknown>;\n  onSelectProject: (project: NavigationProject) => void;\n  onAddProject?: () => void;\n  onManageProjects?: () => void;\n}\n\nfunction ProjectItemSkeleton() {\n  return (\n    <div className=\"flex items-center gap-2 p-[8.8px]\">\n      <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n      <div className=\"skeleton h-4 w-36 rounded\" />\n    </div>\n  );\n}\n\nexport function ProjectSelector({\n  projects,\n  selectedProject,\n  isLoading,\n  isFetchingNextPage,\n  hasNextPage,\n  onLoadMore,\n  onSelectProject,\n  onAddProject,\n  onManageProjects,\n}: ProjectSelectorProps) {\n  const { breakpoint } = useAppNavigationContext();\n  const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n  const [activeSection, setActiveSection] = useState<'projects' | null>(null);\n  const titleRef = useRef<HTMLDivElement>(null);\n  const { openProjectList, clearProjectList } = useMobileNavbarSheet();\n\n  useEffect(() => {\n    if (openProjectList && breakpoint === 'mobile') {\n      setActiveSection('projects');\n      clearProjectList();\n    }\n  }, [openProjectList, breakpoint, clearProjectList]);\n\n  // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)\n  if (breakpoint === 'desktop' || breakpoint === 'md') {\n    return (\n      <div className=\"flex items-center justify-between\">\n        <ProjectSelectorPopover\n          open={isPopoverOpen}\n          setOpen={setIsPopoverOpen}\n          titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\n          projects={projects}\n          selectedProject={selectedProject}\n          isLoading={isLoading}\n          isFetchingNextPage={isFetchingNextPage}\n          hasNextPage={hasNextPage}\n          onLoadMore={onLoadMore}\n          onSelectProject={onSelectProject}\n          onAddProject={onAddProject}\n          onManageProjects={onManageProjects}\n        >\n          <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\n            {isLoading ? (\n              <div className=\"skeleton h-4 w-32 rounded\" />\n            ) : (\n              <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block\">\n                {selectedProject?.title}\n              </span>\n            )}\n            <IconChevronDown\n              size={20}\n              className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n            />\n          </div>\n        </ProjectSelectorPopover>\n        <div className=\"flex items-center gap-2\">\n          <UsersSelectorPopover projectId={selectedProject?.id} />\n        </div>\n      </div>\n    );\n  }\n\n  // Mobile: inline collapsible accordion\n  return (\n    <div className=\"flex flex-col gap-2.5\">\n      <div className=\"flex items-center justify-between\">\n        <div\n          className=\"flex items-center gap-1 cursor-pointer\"\n          onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\n        >\n          <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\n          <IconChevronDown\n            size={20}\n            className={`transition-transform duration-200 ${\n              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\n            }`}\n          />\n        </div>\n        <UsersSelectorPopover projectId={selectedProject?.id} />\n      </div>\n      {activeSection === 'projects' && (\n        <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"paragraph-small-semibold\">Projetos</span>\n            {(onAddProject || onManageProjects) && (\n              <div className=\"flex items-center gap-1.5\">\n                {canAddProject && onAddProject && (\n                  <Button variant=\"secondary\" className=\"h-8! paragraph-small-semibold text-gray-950\" onClick={onAddProject}>\n                    <IconPlus size={16} />\n                    Adicionar\n                  </Button>\n                )}\n                {onManageProjects && (\n                  <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\n                    <IconSettings size={18} />\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n          <Command className=\"gap-2\">\n            <CommandInput placeholder=\"Busque aqui\" />\n            <CommandList\n              className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]\"\n              onScroll={(event) => {\n                if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;\n\n                const target = event.currentTarget;\n                const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n                if (distanceToBottom <= 80) {\n                  onLoadMore();\n                }\n              }}\n            >\n              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n              {isLoading ? (\n                <>\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                </>\n              ) : (\n                projects.map((project) => (\n                  <CommandItem\n                    key={project.id}\n                    value={`${project.title}-${project.id}`}\n                    keywords={[project.title]}\n                    className={selectedProject?.id === project.id ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}\n                    onSelect={() => { onSelectProject(project); setActiveSection(null); }}\n                  >\n                    <UserAvatar\n                      photo={project.photo}\n                      name={project.title}\n                      size={36}\n                    />\n                    {project.title}\n                  </CommandItem>\n                ))\n              )}\n              {isFetchingNextPage && (\n                <>\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/infra/api/types.mjs

@@ -1,6 +1,6 @@
 import z from "zod";
 const PaginationParamsSchema = z.object({
-  page: z.number().min(1).optional().default(20),
+  page: z.number().min(1).optional().default(1),
   limit: z.number().optional().default(20)
 });
 const SearchParamsSchema = z.object({

package/dist/infra/api/types.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/infra/api/types.ts"],"sourcesContent":["import z from 'zod';\r\n\r\nexport const PaginationParamsSchema = z.object({\r\n  page: z.number().min(1).optional().default(20),\r\n  limit: z.number().optional().default(20),\r\n});\r\n\r\nexport interface PaginationParams extends z.infer<typeof PaginationParamsSchema> {}\r\n\r\nexport const SearchParamsSchema = z.object({\r\n  search: z.string().optional(),\r\n});\r\n\r\nexport interface SearchParams extends z.infer<typeof SearchParamsSchema> {}\r\n\r\nexport const SortParamsSchema = z.object({\r\n  sort: z.string().optional(),\r\n});\r\n\r\nexport interface SortParams extends z.infer<typeof SortParamsSchema> {}\r\n\r\nexport interface ApiSuccessResult<T> {\r\n  status: 1;\r\n  data?: T;\r\n}\r\n\r\nexport interface ApiPaginatedSuccessResult<T> extends Omit<ApiSuccessResult<T>, 'data'> {\r\n  data: T[];\r\n  total: number;\r\n}\r\n\r\nexport interface ApiErrorResult {\r\n  status: 0;\r\n  message: string;\r\n}\r\n\r\nexport type ApiActionResult<T> = ApiSuccessResult<T> | ApiErrorResult;\r\nexport type ApiPaginatedActionResult<T> = ApiPaginatedSuccessResult<T> | ApiErrorResult;\r\n\r\nexport interface SuccessResult<T> {\r\n  success: true;\r\n  data?: T;\r\n  total?: number;\r\n}\r\n\r\nexport interface PaginatedSuccessResult<T> extends Omit<SuccessResult<T>, 'data'> {\r\n  data: T[];\r\n  total: number;\r\n}\r\n\r\nexport interface ErrorResult {\r\n  success: false;\r\n  error?: string;\r\n}\r\n\r\nexport type ActionResult<T> = SuccessResult<T> | ErrorResult;\r\nexport type PaginatedActionResult<T> = PaginatedSuccessResult<T> | ErrorResult;\r\n\r\nexport class ApiError extends Error {\r\n  public readonly code: string;\r\n  public readonly statusCode: number;\r\n\r\n  constructor(message: string, code: string = 'UNKNOWN_ERROR', statusCode: number = 500) {\r\n    super(message);\r\n    this.name = 'ApiError';\r\n    this.code = code;\r\n    this.statusCode = statusCode;\r\n  }\r\n\r\n  static isApiError(error: unknown): error is ApiError {\r\n    return error instanceof ApiError;\r\n  }\r\n}\r\n\r\nexport interface ApiResponse<T = unknown> {\r\n  status: 0 | 1;\r\n  message?: string;\r\n  data?: T;\r\n}\r\n"],"mappings":"AAAA,OAAO,OAAO;AAEP,MAAM,yBAAyB,EAAE,OAAO;AAAA,EAC7C,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE;AAAA,EAC7C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE;AACzC,CAAC;AAIM,MAAM,qBAAqB,EAAE,OAAO;AAAA,EACzC,QAAQ,EAAE,OAAO,EAAE,SAAS;AAC9B,CAAC;AAIM,MAAM,mBAAmB,EAAE,OAAO;AAAA,EACvC,MAAM,EAAE,OAAO,EAAE,SAAS;AAC5B,CAAC;AAyCM,MAAM,iBAAiB,MAAM;AAAA,EAClB;AAAA,EACA;AAAA,EAEhB,YAAY,SAAiB,OAAe,iBAAiB,aAAqB,KAAK;AACrF,UAAM,OAAO;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AACZ,SAAK,aAAa;AAAA,EACpB;AAAA,EAEA,OAAO,WAAW,OAAmC;AACnD,WAAO,iBAAiB;AAAA,EAC1B;AACF;","names":[]}
+{"version":3,"sources":["../../../src/infra/api/types.ts"],"sourcesContent":["import z from 'zod';\r\n\r\nexport const PaginationParamsSchema = z.object({\n  page: z.number().min(1).optional().default(1),\n  limit: z.number().optional().default(20),\n});\n\r\nexport interface PaginationParams extends z.infer<typeof PaginationParamsSchema> {}\r\n\r\nexport const SearchParamsSchema = z.object({\r\n  search: z.string().optional(),\r\n});\r\n\r\nexport interface SearchParams extends z.infer<typeof SearchParamsSchema> {}\r\n\r\nexport const SortParamsSchema = z.object({\r\n  sort: z.string().optional(),\r\n});\r\n\r\nexport interface SortParams extends z.infer<typeof SortParamsSchema> {}\r\n\r\nexport interface ApiSuccessResult<T> {\r\n  status: 1;\r\n  data?: T;\r\n}\r\n\r\nexport interface ApiPaginatedSuccessResult<T> extends Omit<ApiSuccessResult<T>, 'data'> {\r\n  data: T[];\r\n  total: number;\r\n}\r\n\r\nexport interface ApiErrorResult {\r\n  status: 0;\r\n  message: string;\r\n}\r\n\r\nexport type ApiActionResult<T> = ApiSuccessResult<T> | ApiErrorResult;\r\nexport type ApiPaginatedActionResult<T> = ApiPaginatedSuccessResult<T> | ApiErrorResult;\r\n\r\nexport interface SuccessResult<T> {\r\n  success: true;\r\n  data?: T;\r\n  total?: number;\r\n}\r\n\r\nexport interface PaginatedSuccessResult<T> extends Omit<SuccessResult<T>, 'data'> {\r\n  data: T[];\r\n  total: number;\r\n}\r\n\r\nexport interface ErrorResult {\r\n  success: false;\r\n  error?: string;\r\n}\r\n\r\nexport type ActionResult<T> = SuccessResult<T> | ErrorResult;\r\nexport type PaginatedActionResult<T> = PaginatedSuccessResult<T> | ErrorResult;\r\n\r\nexport class ApiError extends Error {\r\n  public readonly code: string;\r\n  public readonly statusCode: number;\r\n\r\n  constructor(message: string, code: string = 'UNKNOWN_ERROR', statusCode: number = 500) {\r\n    super(message);\r\n    this.name = 'ApiError';\r\n    this.code = code;\r\n    this.statusCode = statusCode;\r\n  }\r\n\r\n  static isApiError(error: unknown): error is ApiError {\r\n    return error instanceof ApiError;\r\n  }\r\n}\r\n\r\nexport interface ApiResponse<T = unknown> {\r\n  status: 0 | 1;\r\n  message?: string;\r\n  data?: T;\r\n}\r\n"],"mappings":"AAAA,OAAO,OAAO;AAEP,MAAM,yBAAyB,EAAE,OAAO;AAAA,EAC7C,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC;AAAA,EAC5C,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE;AACzC,CAAC;AAIM,MAAM,qBAAqB,EAAE,OAAO;AAAA,EACzC,QAAQ,EAAE,OAAO,EAAE,SAAS;AAC9B,CAAC;AAIM,MAAM,mBAAmB,EAAE,OAAO;AAAA,EACvC,MAAM,EAAE,OAAO,EAAE,SAAS;AAC5B,CAAC;AAyCM,MAAM,iBAAiB,MAAM;AAAA,EAClB;AAAA,EACA;AAAA,EAEhB,YAAY,SAAiB,OAAe,iBAAiB,aAAqB,KAAK;AACrF,UAAM,OAAO;AACb,SAAK,OAAO;AACZ,SAAK,OAAO;AACZ,SAAK,aAAa;AAAA,EACpB;AAAA,EAEA,OAAO,WAAW,OAAmC;AACnD,WAAO,iBAAiB;AAAA,EAC1B;AACF;","names":[]}

package/package.json

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

package/src/components/navigation/ProjectSelectorPopover.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Dispatch, RefObject, SetStateAction } from 'react';
+import { Dispatch, RefObject, SetStateAction, UIEvent, useCallback } from 'react';
 import { ADDON_IDS } from '../../modules/subscriptions/constants/addons.constants';
 import { useHasPlanAddon } from '../../modules/plans/hooks/use-has-plan-addon.hook';
 import {
@@ -24,6 +24,10 @@ interface ProjectSelectorPopoverProps {
   titleRef?: RefObject<HTMLSpanElement | null>;
   projects: NavigationProject[];
   selectedProject: NavigationProject | null;
+  isLoading?: boolean;
+  isFetchingNextPage?: boolean;
+  hasNextPage?: boolean;
+  onLoadMore?: () => void | Promise<unknown>;
   onSelectProject: (project: NavigationProject) => void;
   onAddProject?: () => void;
   onManageProjects?: () => void;
@@ -32,10 +36,10 @@ interface ProjectSelectorPopoverProps {
 
 function ProjectItemSkeleton() {
   return (
-    <div className="flex items-center justify-between px-2 py-1.5 gap-2">
+    <div className="flex items-center justify-between px-2 py-2 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 className="skeleton size-9 rounded-lg shrink-0" />
+        <div className="skeleton h-4 w-36 rounded" />
       </div>
       <div className="skeleton size-4 rounded-full shrink-0" />
     </div>
@@ -48,12 +52,26 @@ export function ProjectSelectorPopover({
   titleRef,
   projects,
   selectedProject,
+  isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  onLoadMore,
   onSelectProject,
   onAddProject,
   onManageProjects,
   children,
 }: ProjectSelectorPopoverProps) {
   const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);
+  const handleListScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
+    if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
+
+    const target = event.currentTarget;
+    const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+
+    if (distanceToBottom <= 80) {
+      onLoadMore();
+    }
+  }, [hasNextPage, isFetchingNextPage, onLoadMore]);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -98,8 +116,18 @@ export function ProjectSelectorPopover({
           </div>
           <Command className="gap-2">
             <CommandInput placeholder="Busque aqui" />
-            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
-              {projects.length === 0 ? (
+            <CommandList
+              className="custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]"
+              onScroll={handleListScroll}
+            >
+              {isLoading ? (
+                <>
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                </>
+              ) : 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">
@@ -118,7 +146,7 @@ export function ProjectSelectorPopover({
                         key={project.id}
                         value={`${project.title}-${project.id}`}
                         keywords={[project.title]}
-                        className={isSelected ? 'bg-gray-50' : ''}
+                        className={isSelected ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}
                         onSelect={() => onSelectProject(project)}
                       >
                         <div className="flex items-center justify-between w-full cursor-pointer">
@@ -126,7 +154,7 @@ export function ProjectSelectorPopover({
                             <UserAvatar
                               photo={project.photo}
                               name={project.title}
-                              size={32}
+                              size={36}
                             />
                             {project.title}
                           </div>
@@ -137,6 +165,12 @@ export function ProjectSelectorPopover({
                       </CommandItem>
                     );
                   })}
+                  {isFetchingNextPage && (
+                    <>
+                      <ProjectItemSkeleton />
+                      <ProjectItemSkeleton />
+                    </>
+                  )}
                 </>
               )}
             </CommandList>

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

@@ -15,6 +15,9 @@ export interface ProjectSelectorProps {
   projects: NavigationProject[];
   selectedProject: NavigationProject | null;
   isLoading?: boolean;
+  isFetchingNextPage?: boolean;
+  hasNextPage?: boolean;
+  onLoadMore?: () => void | Promise<unknown>;
   onSelectProject: (project: NavigationProject) => void;
   onAddProject?: () => void;
   onManageProjects?: () => void;
@@ -22,9 +25,9 @@ export interface ProjectSelectorProps {
 
 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 className="flex items-center gap-2 p-[8.8px]">
+      <div className="skeleton size-9 rounded-lg shrink-0" />
+      <div className="skeleton h-4 w-36 rounded" />
     </div>
   );
 }
@@ -33,6 +36,9 @@ export function ProjectSelector({
   projects,
   selectedProject,
   isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  onLoadMore,
   onSelectProject,
   onAddProject,
   onManageProjects,
@@ -61,6 +67,10 @@ export function ProjectSelector({
           titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}
           projects={projects}
           selectedProject={selectedProject}
+          isLoading={isLoading}
+          isFetchingNextPage={isFetchingNextPage}
+          hasNextPage={hasNextPage}
+          onLoadMore={onLoadMore}
           onSelectProject={onSelectProject}
           onAddProject={onAddProject}
           onManageProjects={onManageProjects}
@@ -126,12 +136,26 @@ export function ProjectSelector({
           </div>
           <Command className="gap-2">
             <CommandInput placeholder="Busque aqui" />
-            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
+            <CommandList
+              className="custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]"
+              onScroll={(event) => {
+                if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
+
+                const target = event.currentTarget;
+                const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+
+                if (distanceToBottom <= 80) {
+                  onLoadMore();
+                }
+              }}
+            >
               <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
               {isLoading ? (
                 <>
                   <ProjectItemSkeleton />
                   <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
                 </>
               ) : (
                 projects.map((project) => (
@@ -139,18 +163,24 @@ export function ProjectSelector({
                     key={project.id}
                     value={`${project.title}-${project.id}`}
                     keywords={[project.title]}
-                    className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}
+                    className={selectedProject?.id === project.id ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}
                     onSelect={() => { onSelectProject(project); setActiveSection(null); }}
                   >
                     <UserAvatar
                       photo={project.photo}
                       name={project.title}
-                      size={32}
+                      size={36}
                     />
                     {project.title}
                   </CommandItem>
                 ))
               )}
+              {isFetchingNextPage && (
+                <>
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                </>
+              )}
             </CommandList>
           </Command>
         </div>

package/src/infra/api/types.ts

@@ -1,9 +1,9 @@
 import z from 'zod';
 
-export const PaginationParamsSchema = z.object({
-  page: z.number().min(1).optional().default(20),
-  limit: z.number().optional().default(20),
-});
+export const PaginationParamsSchema = z.object({
+  page: z.number().min(1).optional().default(1),
+  limit: z.number().optional().default(20),
+});
 
 export interface PaginationParams extends z.infer<typeof PaginationParamsSchema> {}