@greatapps/common 1.1.697 → 1.1.699

package/src/components/layouts/SideBarNavigation.tsx

@@ -1,65 +1,65 @@
-'use client';
-
-import * as React from "react"
-import { IconChevronLeft } from '@tabler/icons-react'
-import { useDesktopSidebarStore } from "../../store/useDesktopSidebarStore"
-import { useMdSidebarStore } from "../../store/useMdSidebarStore"
-import { cn } from "../../infra/utils/clsx"
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
-import { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
-
-function SideBarNavigation({
-    className,
-    children,
-    ...props
-}: React.ComponentProps<"div">) {
-    const { isExpanded, collapse } = useDesktopSidebarStore()
-    const collapseMd = useMdSidebarStore((s) => s.collapse)
-    const isMainWhitelabel = useIsDefaultWhitelabel()
-
-    React.useEffect(() => {
-        const mql = window.matchMedia('(min-width: 1351px)')
-        const handler = (e: MediaQueryListEvent) => {
-            if (e.matches) collapseMd()
-        }
-        if (mql.matches) collapseMd()
-        mql.addEventListener('change', handler)
-        return () => mql.removeEventListener('change', handler)
-    }, [collapseMd])
-
-    return (
-        <div
-            data-slot="sidebar-navigation"
-            className="relative hidden lg:block h-screen overflow-visible z-30"
-        >
-            <Tooltip>
-                <TooltipTrigger asChild>
-                    <button
-                        onClick={collapse}
-                        className={cn(
-                            "absolute  -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-all duration-300 z-[999]",
-                            isMainWhitelabel ? 'top-[59px]' : 'top-[70px]',
-                            isExpanded ? "opacity-100 scale-100" : "opacity-0 scale-0 pointer-events-none",
-                        )}
-                    >
-                        <IconChevronLeft size={16} className="text-gray-500" />
-                    </button>
-                </TooltipTrigger>
-                {isExpanded && <TooltipContent side="right">Recolher menu</TooltipContent>}
-            </Tooltip>
-            <div
-                className={cn(
-                    "h-full transition-[width] duration-300 ease-in-out overflow-hidden",
-                    isExpanded ? "w-[273px] border-r border-gray-200" : "w-0",
-                )}
-                {...props}
-            >
-                <div className={cn("flex flex-col h-full min-w-[273px] w-[273px] p-4", className)}>
-                    {children}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export { SideBarNavigation };
+'use client';
+
+import * as React from "react"
+import { IconChevronLeft } from '@tabler/icons-react'
+import { useDesktopSidebarStore } from "../../store/useDesktopSidebarStore"
+import { useMdSidebarStore } from "../../store/useMdSidebarStore"
+import { cn } from "../../infra/utils/clsx"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
+import { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
+
+function SideBarNavigation({
+    className,
+    children,
+    ...props
+}: React.ComponentProps<"div">) {
+    const { isExpanded, collapse } = useDesktopSidebarStore()
+    const collapseMd = useMdSidebarStore((s) => s.collapse)
+    const isMainWhitelabel = useIsDefaultWhitelabel()
+
+    React.useEffect(() => {
+        const mql = window.matchMedia('(min-width: 1351px)')
+        const handler = (e: MediaQueryListEvent) => {
+            if (e.matches) collapseMd()
+        }
+        if (mql.matches) collapseMd()
+        mql.addEventListener('change', handler)
+        return () => mql.removeEventListener('change', handler)
+    }, [collapseMd])
+
+    return (
+        <div
+            data-slot="sidebar-navigation"
+            className="relative hidden lg:block h-screen overflow-visible z-30"
+        >
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <button
+                        onClick={collapse}
+                        className={cn(
+                            "absolute  -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-all duration-300 z-[999]",
+                            isMainWhitelabel ? 'top-[59px]' : 'top-[70px]',
+                            isExpanded ? "opacity-100 scale-100" : "opacity-0 scale-0 pointer-events-none",
+                        )}
+                    >
+                        <IconChevronLeft size={16} className="text-gray-500" />
+                    </button>
+                </TooltipTrigger>
+                {isExpanded && <TooltipContent side="right">Recolher menu</TooltipContent>}
+            </Tooltip>
+            <div
+                className={cn(
+                    "h-full transition-[width] duration-300 ease-in-out overflow-hidden",
+                    isExpanded ? "w-[273px] border-r border-gray-200" : "w-0",
+                )}
+                {...props}
+            >
+                <div className={cn("flex flex-col h-full min-w-[273px] w-[273px] p-4", className)}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export { SideBarNavigation };

package/src/components/layouts/UsersSelectorPopover.tsx

@@ -1,236 +1,236 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useTranslations } from "next-intl";
-import { IconPlus, IconUser, IconUsers } from '@tabler/icons-react';
-import { UserAvatar } from "../ui/data-display/UserAvatar";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
-import { Button } from "../ui/buttons/Button";
-import {
-  Command,
-  CommandEmpty,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "../ui/overlay/Command";
-import { Checkbox } from "../ui/form/Checkbox";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
-import { cn } from "../../infra/utils/clsx";
-import { useListProjectUsers } from "../../modules/projects/hooks/list-project-users.hook";
-import { useListAllAccountUsers } from "../../modules/projects/hooks/list-all-account-users.hook";
-import { useAddProjectUser } from "../../modules/projects/hooks/add-project-user.hook";
-import { useRemoveProjectUser } from "../../modules/projects/hooks/remove-project-user.hook";
-import { useWhitelabelUrls } from "../../providers/whitelabel.provider";
-
-export interface UsersSelectorPopoverProps {
-  projectId?: number;
-  side?: "top" | "bottom" | "left" | "right";
-  align?: "start" | "center" | "end";
-  contentClassName?: string;
-}
-
-function UserItemSkeleton() {
-  return (
-    <div className="flex items-center justify-between px-2 py-1.5 gap-2">
-      <div className="flex items-center gap-2 flex-1">
-        <div className="skeleton size-8 rounded-full shrink-0" />
-        <div className="skeleton h-3.5 w-28 rounded" />
-      </div>
-      <div className="skeleton size-4 rounded shrink-0" />
-    </div>
-  );
-}
-
-export function UsersSelectorPopover({
-  projectId,
-  side,
-  align,
-  contentClassName,
-}: UsersSelectorPopoverProps) {
-  const translate = useTranslations();
-  const { accountsUrl } = useWhitelabelUrls();
-  const [open, setOpen] = useState(false);
-  const [hoveredId, setHoveredId] = useState<number | null>(null);
-  const [searchInput, setSearchInput] = useState("");
-  const [search, setSearch] = useState("");
-
-  const id = projectId ?? 0;
-
-  useEffect(() => {
-    const timer = setTimeout(() => setSearch(searchInput), 300);
-    return () => clearTimeout(timer);
-  }, [searchInput]);
-
-  const accountUsers = useListAllAccountUsers(search, id || undefined);
-  const projectUsers = useListProjectUsers(id, "");
-  const addMutation = useAddProjectUser(id);
-  const removeMutation = useRemoveProjectUser(id);
-
-  const allUsers = accountUsers.data?.pages.flatMap((p) => p.data) ?? [];
-  const isLoading = accountUsers.isLoading;
-  const isFetchingMore = accountUsers.isFetchingNextPage;
-  const totalInProject = projectUsers.data?.pages[0]?.total ?? 0;
-
-  const toggleUser = (userId: number, inProject: boolean, removable: boolean) => {
-    if (inProject) {
-      if (!removable) return;
-      removeMutation.mutate(userId);
-    } else {
-      addMutation.mutate(userId);
-    }
-  };
-
-  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
-    const target = e.currentTarget;
-    const nearBottom =
-      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;
-    if (!nearBottom) return;
-    if (accountUsers.hasNextPage && !accountUsers.isFetchingNextPage) {
-      accountUsers.fetchNextPage();
-    }
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger className="cursor-pointer">
-        <div className="flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950">
-          <span className="paragraph-small-semibold">{totalInProject}</span>
-          <IconUser size={16} />
-        </div>
-      </PopoverTrigger>
-
-      <PopoverContent
-        className={cn(
-          "absolute right-0 md:right-[-88px] w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200",
-          contentClassName,
-        )}
-        side={side}
-        align={align}
-        sideOffset={8}
-      >
-        <div className="flex flex-col p-3 gap-2">
-          <div className="flex items-center justify-between">
-            <span className="paragraph-small-semibold">{translate('common.layout.usersSelector.title')}</span>
-            <div className="flex items-center gap-1.5">
-              <Button
-                variant="secondary"
-                className="h-8 paragraph-small-semibold text-gray-950"
-                onClick={() => {
-                  window.location.href = `${accountsUrl}/my-teams?createNew=true`;
-                }}
-              >
-                <IconPlus size={16} />
-                {translate('common.layout.usersSelector.add')}
-              </Button>
-            </div>
-          </div>
-
-          <Command shouldFilter={false} className="gap-2" value="">
-            <CommandInput
-              placeholder={translate('common.layout.usersSelector.searchPlaceholder')}
-              value={searchInput}
-              onValueChange={setSearchInput}
-            />
-            <CommandList
-              className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]"
-              onScroll={handleScroll}
-            >
-              {isLoading ? (
-                <>
-                  <UserItemSkeleton />
-                  <UserItemSkeleton />
-                  <UserItemSkeleton />
-                </>
-              ) : allUsers.length === 0 ? (
-                <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
-                  <IconUsers size={28} className="text-gray-300" />
-                  <span className="paragraph-small-medium text-center text-gray-500">
-                    {translate('common.layout.usersSelector.empty')}
-                  </span>
-                </div>
-              ) : (
-                <>
-                  <CommandEmpty>{translate('common.layout.usersSelector.noResults')}</CommandEmpty>
-                  {allUsers.map((user) => {
-                    const inProject = user.in_project ?? false;
-                    const removable =
-                      inProject &&
-                      user.profile !== "owner" &&
-                      user.profile !== "admin";
-                    const interactive = !inProject || removable;
-
-                    return (
-                      <CommandItem
-                        key={user.id}
-                        value={user.name || String(user.id)}
-                        autoFocus={false}
-                        onPointerEnter={() => setHoveredId(user.id)}
-                        onPointerLeave={() => setHoveredId(null)}
-                        onFocus={() => setHoveredId(user.id)}
-                        onBlur={() => setHoveredId(null)}
-                        onSelect={() => toggleUser(user.id, inProject, removable)}
-                        className={interactive ? "cursor-pointer" : "cursor-default"}
-                      >
-                        <div className="flex items-center justify-between w-full">
-                          <div className="flex items-center gap-2 min-w-0">
-                            <UserAvatar
-                              photo={user.photo}
-                              name={user.name ?? undefined}
-                              size={32}
-                            />
-                            <span className="truncate">{user.name}</span>
-                          </div>
-                          <Tooltip open={interactive && hoveredId === user.id}>
-                            <TooltipTrigger asChild>
-                              <div
-                                onClick={(e) => e.stopPropagation()}
-                                onPointerDown={(e) => e.stopPropagation()}
-                              >
-                                <Checkbox
-                                  checked={inProject}
-                                  disabled={!interactive}
-                                  onCheckedChange={() =>
-                                    toggleUser(user.id, inProject, removable)
-                                  }
-                                  className={cn(
-                                    interactive && hoveredId === user.id
-                                      ? "border-gray-950"
-                                      : "",
-                                    "disabled:opacity-10",
-                                  )}
-                                />
-                              </div>
-                            </TooltipTrigger>
-                            <TooltipContent className="z-[1002]">
-                              {inProject ? translate('common.layout.usersSelector.removeFromProject') : translate('common.layout.usersSelector.addToProject')}
-                            </TooltipContent>
-                          </Tooltip>
-                        </div>
-                      </CommandItem>
-                    );
-                  })}
-                  {isFetchingMore && (
-                    <>
-                      <UserItemSkeleton />
-                      <UserItemSkeleton />
-                    </>
-                  )}
-                </>
-              )}
-            </CommandList>
-          </Command>
-          <div className="border-t border-gray-200" />
-          <Button
-            variant="ghost"
-            className="h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center"
-            onClick={() => {
-              window.location.href = `${accountsUrl}/my-teams`;
-            }}
-          >
-            {translate('common.layout.usersSelector.manageTeam')}
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { IconPlus, IconUser, IconUsers } from '@tabler/icons-react';
+import { UserAvatar } from "../ui/data-display/UserAvatar";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
+import { Button } from "../ui/buttons/Button";
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../ui/overlay/Command";
+import { Checkbox } from "../ui/form/Checkbox";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { cn } from "../../infra/utils/clsx";
+import { useListProjectUsers } from "../../modules/projects/hooks/list-project-users.hook";
+import { useListAllAccountUsers } from "../../modules/projects/hooks/list-all-account-users.hook";
+import { useAddProjectUser } from "../../modules/projects/hooks/add-project-user.hook";
+import { useRemoveProjectUser } from "../../modules/projects/hooks/remove-project-user.hook";
+import { useWhitelabelUrls } from "../../providers/whitelabel.provider";
+
+export interface UsersSelectorPopoverProps {
+  projectId?: number;
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  contentClassName?: string;
+}
+
+function UserItemSkeleton() {
+  return (
+    <div className="flex items-center justify-between px-2 py-1.5 gap-2">
+      <div className="flex items-center gap-2 flex-1">
+        <div className="skeleton size-8 rounded-full shrink-0" />
+        <div className="skeleton h-3.5 w-28 rounded" />
+      </div>
+      <div className="skeleton size-4 rounded shrink-0" />
+    </div>
+  );
+}
+
+export function UsersSelectorPopover({
+  projectId,
+  side,
+  align,
+  contentClassName,
+}: UsersSelectorPopoverProps) {
+  const translate = useTranslations();
+  const { accountsUrl } = useWhitelabelUrls();
+  const [open, setOpen] = useState(false);
+  const [hoveredId, setHoveredId] = useState<number | null>(null);
+  const [searchInput, setSearchInput] = useState("");
+  const [search, setSearch] = useState("");
+
+  const id = projectId ?? 0;
+
+  useEffect(() => {
+    const timer = setTimeout(() => setSearch(searchInput), 300);
+    return () => clearTimeout(timer);
+  }, [searchInput]);
+
+  const accountUsers = useListAllAccountUsers(search, id || undefined);
+  const projectUsers = useListProjectUsers(id, "");
+  const addMutation = useAddProjectUser(id);
+  const removeMutation = useRemoveProjectUser(id);
+
+  const allUsers = accountUsers.data?.pages.flatMap((p) => p.data) ?? [];
+  const isLoading = accountUsers.isLoading;
+  const isFetchingMore = accountUsers.isFetchingNextPage;
+  const totalInProject = projectUsers.data?.pages[0]?.total ?? 0;
+
+  const toggleUser = (userId: number, inProject: boolean, removable: boolean) => {
+    if (inProject) {
+      if (!removable) return;
+      removeMutation.mutate(userId);
+    } else {
+      addMutation.mutate(userId);
+    }
+  };
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const target = e.currentTarget;
+    const nearBottom =
+      target.scrollTop + target.clientHeight >= target.scrollHeight - 50;
+    if (!nearBottom) return;
+    if (accountUsers.hasNextPage && !accountUsers.isFetchingNextPage) {
+      accountUsers.fetchNextPage();
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger className="cursor-pointer">
+        <div className="flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950">
+          <span className="paragraph-small-semibold">{totalInProject}</span>
+          <IconUser size={16} />
+        </div>
+      </PopoverTrigger>
+
+      <PopoverContent
+        className={cn(
+          "absolute right-0 md:right-[-88px] w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200",
+          contentClassName,
+        )}
+        side={side}
+        align={align}
+        sideOffset={8}
+      >
+        <div className="flex flex-col p-3 gap-2">
+          <div className="flex items-center justify-between">
+            <span className="paragraph-small-semibold">{translate('common.layout.usersSelector.title')}</span>
+            <div className="flex items-center gap-1.5">
+              <Button
+                variant="secondary"
+                className="h-8 paragraph-small-semibold text-gray-950"
+                onClick={() => {
+                  window.location.href = `${accountsUrl}/my-teams?createNew=true`;
+                }}
+              >
+                <IconPlus size={16} />
+                {translate('common.layout.usersSelector.add')}
+              </Button>
+            </div>
+          </div>
+
+          <Command shouldFilter={false} className="gap-2" value="">
+            <CommandInput
+              placeholder={translate('common.layout.usersSelector.searchPlaceholder')}
+              value={searchInput}
+              onValueChange={setSearchInput}
+            />
+            <CommandList
+              className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]"
+              onScroll={handleScroll}
+            >
+              {isLoading ? (
+                <>
+                  <UserItemSkeleton />
+                  <UserItemSkeleton />
+                  <UserItemSkeleton />
+                </>
+              ) : allUsers.length === 0 ? (
+                <div className="flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4">
+                  <IconUsers size={28} className="text-gray-300" />
+                  <span className="paragraph-small-medium text-center text-gray-500">
+                    {translate('common.layout.usersSelector.empty')}
+                  </span>
+                </div>
+              ) : (
+                <>
+                  <CommandEmpty>{translate('common.layout.usersSelector.noResults')}</CommandEmpty>
+                  {allUsers.map((user) => {
+                    const inProject = user.in_project ?? false;
+                    const removable =
+                      inProject &&
+                      user.profile !== "owner" &&
+                      user.profile !== "admin";
+                    const interactive = !inProject || removable;
+
+                    return (
+                      <CommandItem
+                        key={user.id}
+                        value={user.name || String(user.id)}
+                        autoFocus={false}
+                        onPointerEnter={() => setHoveredId(user.id)}
+                        onPointerLeave={() => setHoveredId(null)}
+                        onFocus={() => setHoveredId(user.id)}
+                        onBlur={() => setHoveredId(null)}
+                        onSelect={() => toggleUser(user.id, inProject, removable)}
+                        className={interactive ? "cursor-pointer" : "cursor-default"}
+                      >
+                        <div className="flex items-center justify-between w-full">
+                          <div className="flex items-center gap-2 min-w-0">
+                            <UserAvatar
+                              photo={user.photo}
+                              name={user.name ?? undefined}
+                              size={32}
+                            />
+                            <span className="truncate">{user.name}</span>
+                          </div>
+                          <Tooltip open={interactive && hoveredId === user.id}>
+                            <TooltipTrigger asChild>
+                              <div
+                                onClick={(e) => e.stopPropagation()}
+                                onPointerDown={(e) => e.stopPropagation()}
+                              >
+                                <Checkbox
+                                  checked={inProject}
+                                  disabled={!interactive}
+                                  onCheckedChange={() =>
+                                    toggleUser(user.id, inProject, removable)
+                                  }
+                                  className={cn(
+                                    interactive && hoveredId === user.id
+                                      ? "border-gray-950"
+                                      : "",
+                                    "disabled:opacity-10",
+                                  )}
+                                />
+                              </div>
+                            </TooltipTrigger>
+                            <TooltipContent className="z-[1002]">
+                              {inProject ? translate('common.layout.usersSelector.removeFromProject') : translate('common.layout.usersSelector.addToProject')}
+                            </TooltipContent>
+                          </Tooltip>
+                        </div>
+                      </CommandItem>
+                    );
+                  })}
+                  {isFetchingMore && (
+                    <>
+                      <UserItemSkeleton />
+                      <UserItemSkeleton />
+                    </>
+                  )}
+                </>
+              )}
+            </CommandList>
+          </Command>
+          <div className="border-t border-gray-200" />
+          <Button
+            variant="ghost"
+            className="h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center"
+            onClick={() => {
+              window.location.href = `${accountsUrl}/my-teams`;
+            }}
+          >
+            {translate('common.layout.usersSelector.manageTeam')}
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}