@greatapps/common 1.1.503 → 1.1.504

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

@@ -26,12 +26,13 @@ function ProjectSelector({
   const { openProjectList, clearProjectList } = useMobileNavbarSheet();
   const [search, setSearch] = useState("");
   const debouncedSearch = useDebounce(search, 300);
-  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteProjects({
+  const { data, isLoading, isFetching, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteProjects({
     sort: "title",
     limit: 20,
     ...debouncedSearch ? { search: debouncedSearch } : {}
   });
   const projects = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data]);
+  const showListSkeleton = isLoading || isFetching && !isFetchingNextPage && !!debouncedSearch;
   const handlePopoverOpenChange = (value) => {
     setIsPopoverOpen((prev) => {
       const next = typeof value === "function" ? value(prev) : value;
@@ -56,7 +57,7 @@ function ProjectSelector({
         titleRef,
         projects,
         selectedProject,
-        isLoading,
+        isLoading: showListSkeleton,
         isFetchingNextPage,
         hasNextPage,
         onLoadMore: () => fetchNextPage(),
@@ -117,7 +118,7 @@ function ProjectSelector({
             },
             children: [
               /* @__PURE__ */ jsx(CommandEmpty, { children: "Nenhum resultado encontrado." }),
-              isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              showListSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
                 /* @__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, useMemo, RefObject } from 'react';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar, useWhitelabel, useDebounce } from '../../../index';\nimport { useInfiniteProjects } from '../../../modules/projects/hooks/list-infinite-projects.hook';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport type { Project } from '../../../modules/projects/types';\n\nexport interface ProjectSelectorProps {\n  selectedProject: Project | null;\n  onSelectProject: (project: Project) => 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  selectedProject,\n  onSelectProject,\n  onManageProjects,\n}: ProjectSelectorProps) {\n  const { whitelabel } = useWhitelabel();\n  const { breakpoint } = useAppNavigationContext();\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  const [search, setSearch] = useState('');\n  const debouncedSearch = useDebounce(search, 300);\n\n  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteProjects({\n    sort: 'title',\n    limit: 20,\n    ...(debouncedSearch ? { search: debouncedSearch } : {}),\n  });\n  const projects = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data]);\n\n  const handlePopoverOpenChange: typeof setIsPopoverOpen = (value) => {\n    setIsPopoverOpen((prev) => {\n      const next = typeof value === 'function' ? value(prev) : value;\n      if (!next) setSearch('');\n      return next;\n    });\n  };\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 (aligned with NavBar logo + separator)\n  if (breakpoint === 'desktop' || breakpoint === 'md') {\n    return (\n      <div className={cn(\n         whitelabel?.id != 1 ? \"mt-[14.5px.5px] mb-[7px]\" : \"mt-[6.5px] mb-[3px]\"\n        )}>\n        <div className=\"flex items-center h-7\">\n          <ProjectSelectorPopover\n            open={isPopoverOpen}\n            setOpen={handlePopoverOpenChange}\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={() => fetchNextPage()}\n            onSelectProject={onSelectProject}\n            onManageProjects={onManageProjects}\n            search={search}\n            onSearchChange={setSearch}\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]\">\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>\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={() => { const next = activeSection === 'projects' ? null : 'projects'; setActiveSection(next); if (!next) setSearch(''); }}\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      </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          </div>\n          <Command className=\"gap-2\" shouldFilter={false}>\n            <CommandInput placeholder=\"Busque aqui\" value={search} onValueChange={setSearch} />\n            <CommandList\n              className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]\"\n              onScroll={(event) => {\n                if (!hasNextPage || isFetchingNextPage || !fetchNextPage) return;\n\n                const target = event.currentTarget;\n                const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n                if (distanceToBottom <= 80) {\n                  fetchNextPage();\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); setSearch(''); }}\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":[]}
+{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef, useEffect, useMemo, RefObject } from 'react';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar, useWhitelabel, useDebounce } from '../../../index';\nimport { useInfiniteProjects } from '../../../modules/projects/hooks/list-infinite-projects.hook';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport type { Project } from '../../../modules/projects/types';\n\nexport interface ProjectSelectorProps {\n  selectedProject: Project | null;\n  onSelectProject: (project: Project) => 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  selectedProject,\n  onSelectProject,\n  onManageProjects,\n}: ProjectSelectorProps) {\n  const { whitelabel } = useWhitelabel();\n  const { breakpoint } = useAppNavigationContext();\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  const [search, setSearch] = useState('');\n  const debouncedSearch = useDebounce(search, 300);\n\n  const { data, isLoading, isFetching, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteProjects({\n    sort: 'title',\n    limit: 20,\n    ...(debouncedSearch ? { search: debouncedSearch } : {}),\n  });\n  const projects = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data]);\n  const showListSkeleton = isLoading || (isFetching && !isFetchingNextPage && !!debouncedSearch);\n\n  const handlePopoverOpenChange: typeof setIsPopoverOpen = (value) => {\n    setIsPopoverOpen((prev) => {\n      const next = typeof value === 'function' ? value(prev) : value;\n      if (!next) setSearch('');\n      return next;\n    });\n  };\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 (aligned with NavBar logo + separator)\n  if (breakpoint === 'desktop' || breakpoint === 'md') {\n    return (\n      <div className={cn(\n         whitelabel?.id != 1 ? \"mt-[14.5px.5px] mb-[7px]\" : \"mt-[6.5px] mb-[3px]\"\n        )}>\n        <div className=\"flex items-center h-7\">\n          <ProjectSelectorPopover\n            open={isPopoverOpen}\n            setOpen={handlePopoverOpenChange}\n            titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\n            projects={projects}\n            selectedProject={selectedProject}\n            isLoading={showListSkeleton}\n            isFetchingNextPage={isFetchingNextPage}\n            hasNextPage={hasNextPage}\n            onLoadMore={() => fetchNextPage()}\n            onSelectProject={onSelectProject}\n            onManageProjects={onManageProjects}\n            search={search}\n            onSearchChange={setSearch}\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]\">\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>\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={() => { const next = activeSection === 'projects' ? null : 'projects'; setActiveSection(next); if (!next) setSearch(''); }}\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      </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          </div>\n          <Command className=\"gap-2\" shouldFilter={false}>\n            <CommandInput placeholder=\"Busque aqui\" value={search} onValueChange={setSearch} />\n            <CommandList\n              className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]\"\n              onScroll={(event) => {\n                if (!hasNextPage || isFetchingNextPage || !fetchNextPage) return;\n\n                const target = event.currentTarget;\n                const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n                if (distanceToBottom <= 80) {\n                  fetchNextPage();\n                }\n              }}\n            >\n              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n              {showListSkeleton ? (\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); setSearch(''); }}\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/modules/projects/hooks/update-project.hook.mjs

@@ -4,12 +4,62 @@ import { updateProjectAction } from "../actions/update-project.action";
 import { withAction } from "../../../utils/withAction";
 import { useAuthQueryKey } from "../../../hooks/useAuthQueryKey";
 import { PROJECTS_BASE_KEY } from "./list-projects.hook";
+import { insertSorted, buildCompareFn } from "../../../infra/utils/array";
+function extractSort(query) {
+  const key = query.queryKey;
+  for (let i = key.length - 1; i >= 0; i--) {
+    const segment = key[i];
+    if (segment && typeof segment === "object" && "sort" in segment) {
+      return segment.sort;
+    }
+  }
+  return void 0;
+}
 function useUpdateProject() {
   const queryClient = useQueryClient();
   const projectsKey = useAuthQueryKey([...PROJECTS_BASE_KEY]);
   return useMutation({
     mutationFn: ({ projectId, data }) => withAction(updateProjectAction)(projectId, data),
-    onSuccess: () => {
+    onSuccess: (updatedProject, { projectId }) => {
+      const cache = queryClient.getQueryCache();
+      const queries = cache.findAll({ queryKey: projectsKey });
+      for (const query of queries) {
+        const sort = extractSort(query);
+        const isInfinite = query.queryKey.includes("infinite");
+        if (isInfinite) {
+          queryClient.setQueryData(
+            query.queryKey,
+            (old) => {
+              if (!old?.pages.length) return old;
+              const pageSize = old.pages[0].data.length || 20;
+              const allItems = old.pages.flatMap((page) => page.data);
+              const without = allItems.filter((p) => p.id !== projectId);
+              const withUpdated = sort ? insertSorted(without, updatedProject, buildCompareFn(sort)) : [updatedProject, ...without];
+              return {
+                ...old,
+                pages: old.pages.map((page, i) => ({
+                  ...page,
+                  data: withUpdated.slice(i * pageSize, (i + 1) * pageSize)
+                }))
+              };
+            }
+          );
+        } else {
+          queryClient.setQueryData(
+            query.queryKey,
+            (old) => {
+              if (!old) return old;
+              const pageSize = old.data.length || 20;
+              const without = old.data.filter((p) => p.id !== projectId);
+              const withUpdated = sort ? insertSorted(without, updatedProject, buildCompareFn(sort)) : [updatedProject, ...without];
+              return {
+                ...old,
+                data: withUpdated.slice(0, pageSize)
+              };
+            }
+          );
+        }
+      }
       queryClient.invalidateQueries({ queryKey: projectsKey });
     }
   });

package/dist/modules/projects/hooks/update-project.hook.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/modules/projects/hooks/update-project.hook.ts"],"sourcesContent":["'use client';\n\nimport { useMutation, useQueryClient } from '@tanstack/react-query';\nimport { updateProjectAction } from '../actions/update-project.action';\nimport { withAction } from '../../../utils/withAction';\nimport { useAuthQueryKey } from '../../../hooks/useAuthQueryKey';\nimport { PROJECTS_BASE_KEY } from './list-projects.hook';\nimport type { UpdateProjectRequest } from '../types';\n\nexport function useUpdateProject() {\n  const queryClient = useQueryClient();\n  const projectsKey = useAuthQueryKey([...PROJECTS_BASE_KEY]);\n\n  return useMutation({\n    mutationFn: ({ projectId, data }: { projectId: number; data: UpdateProjectRequest }) =>\n      withAction(updateProjectAction)(projectId, data),\n    onSuccess: () => {\n      queryClient.invalidateQueries({ queryKey: projectsKey });\n    },\n  });\n}\n"],"mappings":";AAEA,SAAS,aAAa,sBAAsB;AAC5C,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAG3B,SAAS,mBAAmB;AACjC,QAAM,cAAc,eAAe;AACnC,QAAM,cAAc,gBAAgB,CAAC,GAAG,iBAAiB,CAAC;AAE1D,SAAO,YAAY;AAAA,IACjB,YAAY,CAAC,EAAE,WAAW,KAAK,MAC7B,WAAW,mBAAmB,EAAE,WAAW,IAAI;AAAA,IACjD,WAAW,MAAM;AACf,kBAAY,kBAAkB,EAAE,UAAU,YAAY,CAAC;AAAA,IACzD;AAAA,EACF,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../../src/modules/projects/hooks/update-project.hook.ts"],"sourcesContent":["'use client';\n\nimport { useMutation, useQueryClient, InfiniteData, Query } from '@tanstack/react-query';\nimport { updateProjectAction } from '../actions/update-project.action';\nimport { withAction } from '../../../utils/withAction';\nimport { useAuthQueryKey } from '../../../hooks/useAuthQueryKey';\nimport { PROJECTS_BASE_KEY } from './list-projects.hook';\nimport { insertSorted, buildCompareFn } from '../../../infra/utils/array';\nimport type { Project, ProjectsPage, UpdateProjectRequest } from '../types';\n\nfunction extractSort(query: Query): string | undefined {\n  const key = query.queryKey;\n  for (let i = key.length - 1; i >= 0; i--) {\n    const segment = key[i];\n    if (segment && typeof segment === 'object' && 'sort' in segment) {\n      return (segment as Record<string, unknown>).sort as string | undefined;\n    }\n  }\n  return undefined;\n}\n\nexport function useUpdateProject() {\n  const queryClient = useQueryClient();\n  const projectsKey = useAuthQueryKey([...PROJECTS_BASE_KEY]);\n\n  return useMutation({\n    mutationFn: ({ projectId, data }: { projectId: number; data: UpdateProjectRequest }) =>\n      withAction(updateProjectAction)(projectId, data),\n\n    onSuccess: (updatedProject: Project, { projectId }) => {\n      const cache = queryClient.getQueryCache();\n      const queries = cache.findAll({ queryKey: projectsKey });\n\n      for (const query of queries) {\n        const sort = extractSort(query);\n        const isInfinite = query.queryKey.includes('infinite');\n\n        if (isInfinite) {\n          queryClient.setQueryData<InfiniteData<ProjectsPage>>(\n            query.queryKey,\n            (old) => {\n              if (!old?.pages.length) return old;\n\n              const pageSize = old.pages[0].data.length || 20;\n              const allItems = old.pages.flatMap((page) => page.data);\n              const without = allItems.filter((p) => p.id !== projectId);\n\n              const withUpdated = sort\n                ? insertSorted(without, updatedProject, buildCompareFn<Project>(sort))\n                : [updatedProject, ...without];\n\n              return {\n                ...old,\n                pages: old.pages.map((page, i) => ({\n                  ...page,\n                  data: withUpdated.slice(i * pageSize, (i + 1) * pageSize),\n                })),\n              };\n            },\n          );\n        } else {\n          queryClient.setQueryData<ProjectsPage>(\n            query.queryKey,\n            (old) => {\n              if (!old) return old;\n\n              const pageSize = old.data.length || 20;\n              const without = old.data.filter((p) => p.id !== projectId);\n\n              const withUpdated = sort\n                ? insertSorted(without, updatedProject, buildCompareFn<Project>(sort))\n                : [updatedProject, ...without];\n\n              return {\n                ...old,\n                data: withUpdated.slice(0, pageSize),\n              };\n            },\n          );\n        }\n      }\n\n      queryClient.invalidateQueries({ queryKey: projectsKey });\n    },\n  });\n}\n"],"mappings":";AAEA,SAAS,aAAa,sBAA2C;AACjE,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,cAAc,sBAAsB;AAG7C,SAAS,YAAY,OAAkC;AACrD,QAAM,MAAM,MAAM;AAClB,WAAS,IAAI,IAAI,SAAS,GAAG,KAAK,GAAG,KAAK;AACxC,UAAM,UAAU,IAAI,CAAC;AACrB,QAAI,WAAW,OAAO,YAAY,YAAY,UAAU,SAAS;AAC/D,aAAQ,QAAoC;AAAA,IAC9C;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,mBAAmB;AACjC,QAAM,cAAc,eAAe;AACnC,QAAM,cAAc,gBAAgB,CAAC,GAAG,iBAAiB,CAAC;AAE1D,SAAO,YAAY;AAAA,IACjB,YAAY,CAAC,EAAE,WAAW,KAAK,MAC7B,WAAW,mBAAmB,EAAE,WAAW,IAAI;AAAA,IAEjD,WAAW,CAAC,gBAAyB,EAAE,UAAU,MAAM;AACrD,YAAM,QAAQ,YAAY,cAAc;AACxC,YAAM,UAAU,MAAM,QAAQ,EAAE,UAAU,YAAY,CAAC;AAEvD,iBAAW,SAAS,SAAS;AAC3B,cAAM,OAAO,YAAY,KAAK;AAC9B,cAAM,aAAa,MAAM,SAAS,SAAS,UAAU;AAErD,YAAI,YAAY;AACd,sBAAY;AAAA,YACV,MAAM;AAAA,YACN,CAAC,QAAQ;AACP,kBAAI,CAAC,KAAK,MAAM,OAAQ,QAAO;AAE/B,oBAAM,WAAW,IAAI,MAAM,CAAC,EAAE,KAAK,UAAU;AAC7C,oBAAM,WAAW,IAAI,MAAM,QAAQ,CAAC,SAAS,KAAK,IAAI;AACtD,oBAAM,UAAU,SAAS,OAAO,CAAC,MAAM,EAAE,OAAO,SAAS;AAEzD,oBAAM,cAAc,OAChB,aAAa,SAAS,gBAAgB,eAAwB,IAAI,CAAC,IACnE,CAAC,gBAAgB,GAAG,OAAO;AAE/B,qBAAO;AAAA,gBACL,GAAG;AAAA,gBACH,OAAO,IAAI,MAAM,IAAI,CAAC,MAAM,OAAO;AAAA,kBACjC,GAAG;AAAA,kBACH,MAAM,YAAY,MAAM,IAAI,WAAW,IAAI,KAAK,QAAQ;AAAA,gBAC1D,EAAE;AAAA,cACJ;AAAA,YACF;AAAA,UACF;AAAA,QACF,OAAO;AACL,sBAAY;AAAA,YACV,MAAM;AAAA,YACN,CAAC,QAAQ;AACP,kBAAI,CAAC,IAAK,QAAO;AAEjB,oBAAM,WAAW,IAAI,KAAK,UAAU;AACpC,oBAAM,UAAU,IAAI,KAAK,OAAO,CAAC,MAAM,EAAE,OAAO,SAAS;AAEzD,oBAAM,cAAc,OAChB,aAAa,SAAS,gBAAgB,eAAwB,IAAI,CAAC,IACnE,CAAC,gBAAgB,GAAG,OAAO;AAE/B,qBAAO;AAAA,gBACL,GAAG;AAAA,gBACH,MAAM,YAAY,MAAM,GAAG,QAAQ;AAAA,cACrC;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,kBAAY,kBAAkB,EAAE,UAAU,YAAY,CAAC;AAAA,IACzD;AAAA,EACF,CAAC;AACH;","names":[]}

package/package.json

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

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

@@ -40,12 +40,13 @@ export function ProjectSelector({
   const [search, setSearch] = useState('');
   const debouncedSearch = useDebounce(search, 300);
 
-  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteProjects({
+  const { data, isLoading, isFetching, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteProjects({
     sort: 'title',
     limit: 20,
     ...(debouncedSearch ? { search: debouncedSearch } : {}),
   });
   const projects = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data]);
+  const showListSkeleton = isLoading || (isFetching && !isFetchingNextPage && !!debouncedSearch);
 
   const handlePopoverOpenChange: typeof setIsPopoverOpen = (value) => {
     setIsPopoverOpen((prev) => {
@@ -75,7 +76,7 @@ export function ProjectSelector({
             titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}
             projects={projects}
             selectedProject={selectedProject}
-            isLoading={isLoading}
+            isLoading={showListSkeleton}
             isFetchingNextPage={isFetchingNextPage}
             hasNextPage={hasNextPage}
             onLoadMore={() => fetchNextPage()}
@@ -141,7 +142,7 @@ export function ProjectSelector({
               }}
             >
               <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
-              {isLoading ? (
+              {showListSkeleton ? (
                 <>
                   <ProjectItemSkeleton />
                   <ProjectItemSkeleton />

package/src/modules/projects/hooks/update-project.hook.ts

@@ -1,11 +1,23 @@
 'use client';
 
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQueryClient, InfiniteData, Query } from '@tanstack/react-query';
 import { updateProjectAction } from '../actions/update-project.action';
 import { withAction } from '../../../utils/withAction';
 import { useAuthQueryKey } from '../../../hooks/useAuthQueryKey';
 import { PROJECTS_BASE_KEY } from './list-projects.hook';
-import type { UpdateProjectRequest } from '../types';
+import { insertSorted, buildCompareFn } from '../../../infra/utils/array';
+import type { Project, ProjectsPage, UpdateProjectRequest } from '../types';
+
+function extractSort(query: Query): string | undefined {
+  const key = query.queryKey;
+  for (let i = key.length - 1; i >= 0; i--) {
+    const segment = key[i];
+    if (segment && typeof segment === 'object' && 'sort' in segment) {
+      return (segment as Record<string, unknown>).sort as string | undefined;
+    }
+  }
+  return undefined;
+}
 
 export function useUpdateProject() {
   const queryClient = useQueryClient();
@@ -14,7 +26,60 @@ export function useUpdateProject() {
   return useMutation({
     mutationFn: ({ projectId, data }: { projectId: number; data: UpdateProjectRequest }) =>
       withAction(updateProjectAction)(projectId, data),
-    onSuccess: () => {
+
+    onSuccess: (updatedProject: Project, { projectId }) => {
+      const cache = queryClient.getQueryCache();
+      const queries = cache.findAll({ queryKey: projectsKey });
+
+      for (const query of queries) {
+        const sort = extractSort(query);
+        const isInfinite = query.queryKey.includes('infinite');
+
+        if (isInfinite) {
+          queryClient.setQueryData<InfiniteData<ProjectsPage>>(
+            query.queryKey,
+            (old) => {
+              if (!old?.pages.length) return old;
+
+              const pageSize = old.pages[0].data.length || 20;
+              const allItems = old.pages.flatMap((page) => page.data);
+              const without = allItems.filter((p) => p.id !== projectId);
+
+              const withUpdated = sort
+                ? insertSorted(without, updatedProject, buildCompareFn<Project>(sort))
+                : [updatedProject, ...without];
+
+              return {
+                ...old,
+                pages: old.pages.map((page, i) => ({
+                  ...page,
+                  data: withUpdated.slice(i * pageSize, (i + 1) * pageSize),
+                })),
+              };
+            },
+          );
+        } else {
+          queryClient.setQueryData<ProjectsPage>(
+            query.queryKey,
+            (old) => {
+              if (!old) return old;
+
+              const pageSize = old.data.length || 20;
+              const without = old.data.filter((p) => p.id !== projectId);
+
+              const withUpdated = sort
+                ? insertSorted(without, updatedProject, buildCompareFn<Project>(sort))
+                : [updatedProject, ...without];
+
+              return {
+                ...old,
+                data: withUpdated.slice(0, pageSize),
+              };
+            },
+          );
+        }
+      }
+
       queryClient.invalidateQueries({ queryKey: projectsKey });
     },
   });