@greatapps/common 1.1.699 → 1.1.700

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

@@ -1,85 +1,85 @@
-'use client';
-
-import { IconHelp, IconBulb, IconStar, type TablerIcon } from '@tabler/icons-react';
-import { useIsDefaultWhitelabel, useWhitelabel } from '../../../providers/whitelabel.provider';
-import { useTranslations } from 'next-intl';
-
-interface BottomLink {
-  label: string;
-  icon: TablerIcon;
-  href?: string;
-  className?: string;
-  onClick?: () => void;
-}
-
-function openFrillWidget() {
-  const widget = (window as unknown as { __frillNovidadesWidget?: { open?: () => void } }).__frillNovidadesWidget;
-  widget?.open?.();
-}
-
-export function BottomLinks() {
-  const translate = useTranslations();
-  const { whitelabel } = useWhitelabel();
-  const isMainWhitelabel = useIsDefaultWhitelabel();
-
-  const helpUrl = whitelabel?.url_help || 'https://ajuda.greatsoftwares.com.br/pt-br/';
-
-  const links: BottomLink[] = [
-    ...(isMainWhitelabel
-      ? [
-          {
-            label: translate('common.navigation.bottomLinks.news'),
-            icon: IconStar,
-            className: 'novidades',
-            onClick: openFrillWidget,
-          },
-        ]
-      : []),
-    {
-      label: translate('common.navigation.bottomLinks.helpCenter'),
-      icon: IconHelp,
-      href: helpUrl,
-    },
-    ...(isMainWhitelabel
-      ? [
-          {
-            label: translate('common.navigation.bottomLinks.sendSuggestions'),
-            icon: IconBulb,
-            href: 'https://ideias.greatpages.com.br/b/y0geg1ve/feature-ideas',
-          },
-        ]
-      : []),
-  ];
-
-  const baseClassName =
-    'rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors no-underline bg-white hover:bg-gray-100 active:bg-gray-50';
-
-  return (
-    <div className="flex flex-col">
-      {links.map((link) =>
-        link.href ? (
-          <a
-            key={link.label}
-            href={link.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            className={`${baseClassName}${link.className ? ` ${link.className}` : ''}`}
-          >
-            <link.icon size={20} className="text-gray-400" />
-            <span className="paragraph-small-medium text-gray-500">{link.label}</span>
-          </a>
-        ) : (
-          <button
-            key={link.label}
-            type="button"
-            onClick={link.onClick}
-            className={`${baseClassName} text-left${link.className ? ` ${link.className}` : ''}`}
-          >
-            <link.icon size={20} className="text-gray-400" />
-            <span className="paragraph-small-medium text-gray-500">{link.label}</span>
-          </button>
-        )
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { IconHelp, IconBulb, IconStar, type TablerIcon } from '@tabler/icons-react';
+import { useIsDefaultWhitelabel, useWhitelabel } from '../../../providers/whitelabel.provider';
+import { useTranslations } from 'next-intl';
+
+interface BottomLink {
+  label: string;
+  icon: TablerIcon;
+  href?: string;
+  className?: string;
+  onClick?: () => void;
+}
+
+function openFrillWidget() {
+  const widget = (window as unknown as { __frillNovidadesWidget?: { open?: () => void } }).__frillNovidadesWidget;
+  widget?.open?.();
+}
+
+export function BottomLinks() {
+  const translate = useTranslations();
+  const { whitelabel } = useWhitelabel();
+  const isMainWhitelabel = useIsDefaultWhitelabel();
+
+  const helpUrl = whitelabel?.url_help || 'https://ajuda.greatsoftwares.com.br/pt-br/';
+
+  const links: BottomLink[] = [
+    ...(isMainWhitelabel
+      ? [
+          {
+            label: translate('common.navigation.bottomLinks.news'),
+            icon: IconStar,
+            className: 'novidades',
+            onClick: openFrillWidget,
+          },
+        ]
+      : []),
+    {
+      label: translate('common.navigation.bottomLinks.helpCenter'),
+      icon: IconHelp,
+      href: helpUrl,
+    },
+    ...(isMainWhitelabel
+      ? [
+          {
+            label: translate('common.navigation.bottomLinks.sendSuggestions'),
+            icon: IconBulb,
+            href: 'https://ideias.greatpages.com.br/b/y0geg1ve/feature-ideas',
+          },
+        ]
+      : []),
+  ];
+
+  const baseClassName =
+    'rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors no-underline bg-white hover:bg-gray-100 active:bg-gray-50';
+
+  return (
+    <div className="flex flex-col">
+      {links.map((link) =>
+        link.href ? (
+          <a
+            key={link.label}
+            href={link.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`${baseClassName}${link.className ? ` ${link.className}` : ''}`}
+          >
+            <link.icon size={20} className="text-gray-400" />
+            <span className="paragraph-small-medium text-gray-500">{link.label}</span>
+          </a>
+        ) : (
+          <button
+            key={link.label}
+            type="button"
+            onClick={link.onClick}
+            className={`${baseClassName} text-left${link.className ? ` ${link.className}` : ''}`}
+          >
+            <link.icon size={20} className="text-gray-400" />
+            <span className="paragraph-small-medium text-gray-500">{link.label}</span>
+          </button>
+        )
+      )}
+    </div>
+  );
+}

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

@@ -1,184 +1,184 @@
-'use client';
-
-import { useState, useRef, useEffect, useMemo, RefObject } from 'react';
-import { useTranslations } from 'next-intl';
-import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
-import { useAppNavigationContext } from '../AppNavigationContext';
-import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
-import { cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar, useIsDefaultWhitelabel, useDebounce } from '../../../index';
-import { useInfiniteProjects } from '../../../modules/projects/hooks/list-infinite-projects.hook';
-import { IconChevronDown } from '@tabler/icons-react';
-import type { Project } from '../../../modules/projects/types';
-
-export interface ProjectSelectorProps {
-  selectedProject: Project | null;
-  onSelectProject: (project: Project) => void;
-  onAddProject?: () => void;
-  onManageProjects?: () => void;
-}
-
-function ProjectItemSkeleton() {
-  return (
-    <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>
-  );
-}
-
-export function ProjectSelector({
-  selectedProject,
-  onSelectProject,
-  onManageProjects,
-}: ProjectSelectorProps) {
-  const translate = useTranslations();
-  const isMainWhitelabel = useIsDefaultWhitelabel();
-  const { breakpoint } = useAppNavigationContext();
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [activeSection, setActiveSection] = useState<'projects' | null>(null);
-  const titleRef = useRef<HTMLDivElement>(null);
-  const { openProjectList, clearProjectList } = useMobileNavbarSheet();
-
-  const [search, setSearch] = useState('');
-  const debouncedSearch = useDebounce(search, 300);
-
-  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) => {
-      const next = typeof value === 'function' ? value(prev) : value;
-      if (!next) setSearch('');
-      return next;
-    });
-  };
-
-  useEffect(() => {
-    if (openProjectList && breakpoint === 'mobile') {
-      setActiveSection('projects');
-      clearProjectList();
-    }
-  }, [openProjectList, breakpoint, clearProjectList]);
-
-  // Desktop and md: title + popover (aligned with NavBar logo + separator)
-  if (breakpoint === 'desktop' || breakpoint === 'md') {
-    return (
-      <div className={cn(
-         !isMainWhitelabel ? "mt-[14.5px] mb-[7px]" : "mt-[6.5px] mb-[3px]"
-        )}>
-        <div className="flex items-center h-7">
-          <ProjectSelectorPopover
-            open={isPopoverOpen}
-            setOpen={handlePopoverOpenChange}
-            titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}
-            projects={projects}
-            selectedProject={selectedProject}
-            isLoading={showListSkeleton}
-            isFetchingNextPage={isFetchingNextPage}
-            hasNextPage={hasNextPage}
-            onLoadMore={() => fetchNextPage()}
-            onSelectProject={onSelectProject}
-            onManageProjects={onManageProjects}
-            search={search}
-            onSearchChange={setSearch}
-          >
-            <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]">
-                  {selectedProject?.title}
-                </span>
-              )}
-              <IconChevronDown
-                size={20}
-                className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
-              />
-            </div>
-          </ProjectSelectorPopover>
-        </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 cursor-pointer"
-          onClick={() => { const next = activeSection === 'projects' ? null : 'projects'; setActiveSection(next); if (!next) setSearch(''); }}
-        >
-          <span className="paragraph-medium-semibold text-gray-600">{selectedProject?.title}</span>
-          <IconChevronDown
-            size={20}
-            className={`transition-transform duration-200 ${
-              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'
-            }`}
-          />
-        </div>
-      </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">{translate('common.navigation.projectSelector.title')}</span>
-          </div>
-          <Command className="gap-2" shouldFilter={false}>
-            <CommandInput placeholder={translate('common.navigation.projectSelector.searchPlaceholder')} value={search} onValueChange={setSearch} />
-            <CommandList
-              className="custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]"
-              onScroll={(event) => {
-                if (!hasNextPage || isFetchingNextPage || !fetchNextPage) return;
-
-                const target = event.currentTarget;
-                const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
-
-                if (distanceToBottom <= 80) {
-                  fetchNextPage();
-                }
-              }}
-            >
-              <CommandEmpty>{translate('common.navigation.projectSelector.noResults')}</CommandEmpty>
-              {showListSkeleton ? (
-                <>
-                  <ProjectItemSkeleton />
-                  <ProjectItemSkeleton />
-                  <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 min-h-[39px]' : 'min-h-[39px]'}
-                    onSelect={() => { onSelectProject(project); setActiveSection(null); setSearch(''); }}
-                  >
-                    <UserAvatar
-                      photo={project.photo}
-                      name={project.title}
-                      size={36}
-                    />
-                    {project.title}
-                  </CommandItem>
-                ))
-              )}
-              {isFetchingNextPage && (
-                <>
-                  <ProjectItemSkeleton />
-                  <ProjectItemSkeleton />
-                </>
-              )}
-            </CommandList>
-          </Command>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useRef, useEffect, useMemo, RefObject } from 'react';
+import { useTranslations } from 'next-intl';
+import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
+import { useAppNavigationContext } from '../AppNavigationContext';
+import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
+import { cn, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar, useIsDefaultWhitelabel, useDebounce } from '../../../index';
+import { useInfiniteProjects } from '../../../modules/projects/hooks/list-infinite-projects.hook';
+import { IconChevronDown } from '@tabler/icons-react';
+import type { Project } from '../../../modules/projects/types';
+
+export interface ProjectSelectorProps {
+  selectedProject: Project | null;
+  onSelectProject: (project: Project) => void;
+  onAddProject?: () => void;
+  onManageProjects?: () => void;
+}
+
+function ProjectItemSkeleton() {
+  return (
+    <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>
+  );
+}
+
+export function ProjectSelector({
+  selectedProject,
+  onSelectProject,
+  onManageProjects,
+}: ProjectSelectorProps) {
+  const translate = useTranslations();
+  const isMainWhitelabel = useIsDefaultWhitelabel();
+  const { breakpoint } = useAppNavigationContext();
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [activeSection, setActiveSection] = useState<'projects' | null>(null);
+  const titleRef = useRef<HTMLDivElement>(null);
+  const { openProjectList, clearProjectList } = useMobileNavbarSheet();
+
+  const [search, setSearch] = useState('');
+  const debouncedSearch = useDebounce(search, 300);
+
+  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) => {
+      const next = typeof value === 'function' ? value(prev) : value;
+      if (!next) setSearch('');
+      return next;
+    });
+  };
+
+  useEffect(() => {
+    if (openProjectList && breakpoint === 'mobile') {
+      setActiveSection('projects');
+      clearProjectList();
+    }
+  }, [openProjectList, breakpoint, clearProjectList]);
+
+  // Desktop and md: title + popover (aligned with NavBar logo + separator)
+  if (breakpoint === 'desktop' || breakpoint === 'md') {
+    return (
+      <div className={cn(
+         !isMainWhitelabel ? "mt-[14.5px] mb-[7px]" : "mt-[6.5px] mb-[3px]"
+        )}>
+        <div className="flex items-center h-7">
+          <ProjectSelectorPopover
+            open={isPopoverOpen}
+            setOpen={handlePopoverOpenChange}
+            titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}
+            projects={projects}
+            selectedProject={selectedProject}
+            isLoading={showListSkeleton}
+            isFetchingNextPage={isFetchingNextPage}
+            hasNextPage={hasNextPage}
+            onLoadMore={() => fetchNextPage()}
+            onSelectProject={onSelectProject}
+            onManageProjects={onManageProjects}
+            search={search}
+            onSearchChange={setSearch}
+          >
+            <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]">
+                  {selectedProject?.title}
+                </span>
+              )}
+              <IconChevronDown
+                size={20}
+                className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
+              />
+            </div>
+          </ProjectSelectorPopover>
+        </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 cursor-pointer"
+          onClick={() => { const next = activeSection === 'projects' ? null : 'projects'; setActiveSection(next); if (!next) setSearch(''); }}
+        >
+          <span className="paragraph-medium-semibold text-gray-600">{selectedProject?.title}</span>
+          <IconChevronDown
+            size={20}
+            className={`transition-transform duration-200 ${
+              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'
+            }`}
+          />
+        </div>
+      </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">{translate('common.navigation.projectSelector.title')}</span>
+          </div>
+          <Command className="gap-2" shouldFilter={false}>
+            <CommandInput placeholder={translate('common.navigation.projectSelector.searchPlaceholder')} value={search} onValueChange={setSearch} />
+            <CommandList
+              className="custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]"
+              onScroll={(event) => {
+                if (!hasNextPage || isFetchingNextPage || !fetchNextPage) return;
+
+                const target = event.currentTarget;
+                const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+
+                if (distanceToBottom <= 80) {
+                  fetchNextPage();
+                }
+              }}
+            >
+              <CommandEmpty>{translate('common.navigation.projectSelector.noResults')}</CommandEmpty>
+              {showListSkeleton ? (
+                <>
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                  <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 min-h-[39px]' : 'min-h-[39px]'}
+                    onSelect={() => { onSelectProject(project); setActiveSection(null); setSearch(''); }}
+                  >
+                    <UserAvatar
+                      photo={project.photo}
+                      name={project.title}
+                      size={36}
+                    />
+                    {project.title}
+                  </CommandItem>
+                ))
+              )}
+              {isFetchingNextPage && (
+                <>
+                  <ProjectItemSkeleton />
+                  <ProjectItemSkeleton />
+                </>
+              )}
+            </CommandList>
+          </Command>
+        </div>
+      )}
+    </div>
+  );
+}