@greatapps/common 1.1.388 → 1.1.391
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/layouts/ProfilePopover.mjs +8 -4
- package/dist/components/layouts/ProfilePopover.mjs.map +1 -1
- package/dist/components/navigation/ProjectSelectorPopover.mjs +44 -70
- package/dist/components/navigation/ProjectSelectorPopover.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs +32 -59
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map +1 -1
- package/dist/index.mjs +32 -36
- package/dist/index.mjs.map +1 -1
- package/dist/infra/api/types.mjs +1 -1
- package/dist/infra/api/types.mjs.map +1 -1
- package/dist/modules/accounts/services/two-factor.service.mjs +2 -3
- package/dist/modules/accounts/services/two-factor.service.mjs.map +1 -1
- package/dist/modules/auth/actions/verify-two-factor.action.mjs +2 -2
- package/dist/modules/auth/actions/verify-two-factor.action.mjs.map +1 -1
- package/dist/modules/auth/hooks/useUserQuery.mjs +2 -2
- package/dist/modules/auth/hooks/useUserQuery.mjs.map +1 -1
- package/dist/modules/auth/services/auth.service.mjs +5 -6
- package/dist/modules/auth/services/auth.service.mjs.map +1 -1
- package/dist/modules/auth/utils/assert-management-subscription.mjs +0 -7
- package/dist/modules/auth/utils/assert-management-subscription.mjs.map +1 -1
- package/dist/server.mjs +0 -4
- package/dist/server.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/layouts/AppMobileNavBar.tsx +15 -57
- package/dist/components/modals/PaidPlanRequiredModal.mjs +0 -46
- package/dist/components/modals/PaidPlanRequiredModal.mjs.map +0 -1
- package/dist/modules/auth/utils/assert-paid-subscription.mjs +0 -40
- package/dist/modules/auth/utils/assert-paid-subscription.mjs.map +0 -1
- package/dist/modules/auth/utils/assert-subscription-addon.mjs +0 -35
- package/dist/modules/auth/utils/assert-subscription-addon.mjs.map +0 -1
- package/dist/store/usePaidPlanRequiredModal.mjs +0 -14
- package/dist/store/usePaidPlanRequiredModal.mjs.map +0 -1
|
@@ -29,9 +29,13 @@ function ProfilePopover({
|
|
|
29
29
|
const { accountsUrl } = useWhitelabelUrls();
|
|
30
30
|
const router = useRouter();
|
|
31
31
|
const handleLogout = async () => {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
32
|
+
try {
|
|
33
|
+
setPopoverOpen(false);
|
|
34
|
+
setIsLoggingOut(true);
|
|
35
|
+
await logout();
|
|
36
|
+
} finally {
|
|
37
|
+
setIsLoggingOut(false);
|
|
38
|
+
}
|
|
35
39
|
};
|
|
36
40
|
const hasSubscription = !isSubscriptionLoading && subscription !== null;
|
|
37
41
|
const shouldShowCredits = hasSubscription && subscription.id_wl === 1;
|
|
@@ -88,7 +92,7 @@ function ProfilePopover({
|
|
|
88
92
|
const isSameOrigin = accountsUrl.startsWith(window.location.origin);
|
|
89
93
|
if (isSameOrigin) {
|
|
90
94
|
setPopoverOpen(false);
|
|
91
|
-
router.push(`${
|
|
95
|
+
router.push(`${accountsUrl}?openProfile=true`);
|
|
92
96
|
} else {
|
|
93
97
|
window.location.href = `${accountsUrl}?openProfile=true`;
|
|
94
98
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layouts/ProfilePopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Popover } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\nimport { Progress } from \"../ui/feedback/Progress\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { NavBarItem } from \"./NavBarItem\";\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\nimport { LoadingOverlay } from \"../ui/feedback/LoadingOverlay\";\nimport { useAuth } from \"../../providers/auth.provider\";\nimport { useWhitelabelUrls } from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useIaCredits } from \"../../modules/ia-credits/hooks/ia-credits.hook\";\nimport { useBuyCreditsModal } from \"../../store/useBuyCreditsModal\";\n\nexport interface ProfileMenuItem {\n icon?: React.ReactNode;\n label: string;\n onClick: () => void;\n}\n\nexport interface ProfilePopoverProps {\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n align?: \"start\" | \"center\" | \"end\";\n contentClassName?: string;\n menuItems?: ProfileMenuItem[];\n}\n\nfunction ProfilePopover({\n side = \"top\",\n align = \"start\",\n contentClassName = \"absolute bottom-2 left-[26px]\",\n menuItems = [],\n}: ProfilePopoverProps) {\n const { user, logout } = useAuth();\n const [isLoggingOut, setIsLoggingOut] = useState(false);\n const [popoverOpen, setPopoverOpen] = useState(false);\n\n const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =\n useIaCredits();\n const { openModal: openBuyCreditsModal } = useBuyCreditsModal();\n const { accountsUrl } = useWhitelabelUrls();\n const router = useRouter();\n\n const handleLogout = async () => {\n setPopoverOpen(false);\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/ProfilePopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { useRouter } from \"next/navigation\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Popover } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\nimport { Progress } from \"../ui/feedback/Progress\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { NavBarItem } from \"./NavBarItem\";\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\nimport { LoadingOverlay } from \"../ui/feedback/LoadingOverlay\";\nimport { useAuth } from \"../../providers/auth.provider\";\nimport { useWhitelabelUrls } from \"../../providers/whitelabel.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useIaCredits } from \"../../modules/ia-credits/hooks/ia-credits.hook\";\nimport { useBuyCreditsModal } from \"../../store/useBuyCreditsModal\";\n\nexport interface ProfileMenuItem {\n icon?: React.ReactNode;\n label: string;\n onClick: () => void;\n}\n\nexport interface ProfilePopoverProps {\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n align?: \"start\" | \"center\" | \"end\";\n contentClassName?: string;\n menuItems?: ProfileMenuItem[];\n}\n\nfunction ProfilePopover({\n side = \"top\",\n align = \"start\",\n contentClassName = \"absolute bottom-2 left-[26px]\",\n menuItems = [],\n}: ProfilePopoverProps) {\n const { user, logout } = useAuth();\n const [isLoggingOut, setIsLoggingOut] = useState(false);\n const [popoverOpen, setPopoverOpen] = useState(false);\n\n const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =\n useIaCredits();\n const { openModal: openBuyCreditsModal } = useBuyCreditsModal();\n const { accountsUrl } = useWhitelabelUrls();\n const router = useRouter();\n\n const handleLogout = async () => {\n try {\n setPopoverOpen(false);\n setIsLoggingOut(true);\n await logout();\n } finally {\n setIsLoggingOut(false);\n }\n };\n\n const hasSubscription = !isSubscriptionLoading && subscription !== null;\n\n const shouldShowCredits = hasSubscription && subscription.id_wl === 1;\n const creditsPercentage =\n shouldShowCredits && summary.totalCredits > 0\n ? (summary.usedCredits / summary.totalCredits) * 100\n : 0;\n\n return (\n <>\n <LoadingOverlay\n isLoading={isLoggingOut}\n message=\"Saindo da sua conta...\"\n />\n <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n <PopoverPrimitive.Trigger className=\"cursor-pointer\">\n {user && (\n <UserAvatar\n key={user.id}\n photo={user.photo}\n name={user.name}\n size={40}\n />\n )}\n </PopoverPrimitive.Trigger>\n\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n className={cn(\n \"w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99\",\n contentClassName,\n )}\n side={side}\n align={align}\n sideOffset={8}\n >\n <div className=\"grid grid-cols-[32px_1fr_auto] items-center gap-3 p-3 w-full\">\n {user && (\n <UserAvatar\n key={user.id}\n photo={user.photo}\n name={user.name}\n size={32}\n />\n )}\n\n <div className=\"flex flex-col gap-0.5 min-w-0\">\n <span className=\"paragraph-small-semibold text-gray-950 truncate\">\n {user?.name || \"\"}\n </span>\n <span className=\"paragraph-xsmall-medium text-gray-500 truncate\">\n {user?.email || \"\"}\n </span>\n </div>\n\n <Button\n variant=\"secondary\"\n className=\"h-8! px-3! paragraph-xsmall-semibold\"\n onClick={() => {\n const isSameOrigin = accountsUrl.startsWith(window.location.origin);\n if (isSameOrigin) {\n setPopoverOpen(false);\n router.push(`${accountsUrl}?openProfile=true`);\n } else {\n window.location.href = `${accountsUrl}?openProfile=true`;\n }\n }}\n >\n Editar\n </Button>\n </div>\n\n <div className=\"flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5\">\n {shouldShowCredits && (\n <div\n className={cn(\n \"flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors\",\n \"cursor-pointer hover:bg-gray-950/90\",\n )}\n onClick={() => openBuyCreditsModal()}\n >\n <div className=\"flex items-center justify-between gap-2\">\n <span className=\"paragraph-xsmall-semibold text-white truncate\">\n Créditos usados\n </span>\n <span className=\"paragraph-xsmall-medium text-white/50\">\n {summary.usedCredits.toLocaleString(\"pt-BR\")}/\n {summary.totalCredits.toLocaleString(\"pt-BR\")}\n </span>\n </div>\n <Progress\n className=\"bg-white/10\"\n indicatorColor=\"bg-white\"\n value={creditsPercentage}\n />\n </div>\n )}\n\n <div className=\"flex flex-col gap-2\">\n <div className=\"flex flex-col\">\n {menuItems.map((item, index) => (\n <NavBarItem\n key={index}\n icon={item.icon}\n label={item.label}\n onClick={item.onClick}\n />\n ))}\n </div>\n <Separator />\n <NavBarItem label=\"Sair\" onClick={handleLogout} />\n </div>\n </div>\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n </Popover>\n </>\n );\n}\n\nexport { ProfilePopover };\n"],"mappings":"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","names":[]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { ADDON_IDS } from "../../modules/subscriptions/constants/addons.constants";
|
|
4
|
+
import { useHasPlanAddon } from "../../modules/plans/hooks/use-has-plan-addon.hook";
|
|
4
5
|
import {
|
|
5
6
|
Button,
|
|
6
7
|
Command,
|
|
@@ -15,10 +16,10 @@ import {
|
|
|
15
16
|
} from "../../index";
|
|
16
17
|
import { IconCheck, IconChevronDown, IconFolderOpen, IconPlus } from "@tabler/icons-react";
|
|
17
18
|
function ProjectItemSkeleton() {
|
|
18
|
-
return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-
|
|
19
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 gap-2", children: [
|
|
19
20
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
|
|
20
|
-
/* @__PURE__ */ jsx("div", { className: "skeleton size-
|
|
21
|
-
/* @__PURE__ */ jsx("div", { className: "skeleton h-
|
|
21
|
+
/* @__PURE__ */ jsx("div", { className: "skeleton size-8 rounded-lg shrink-0" }),
|
|
22
|
+
/* @__PURE__ */ jsx("div", { className: "skeleton h-3.5 w-32 rounded" })
|
|
22
23
|
] }),
|
|
23
24
|
/* @__PURE__ */ jsx("div", { className: "skeleton size-4 rounded-full shrink-0" })
|
|
24
25
|
] });
|
|
@@ -29,23 +30,12 @@ function ProjectSelectorPopover({
|
|
|
29
30
|
titleRef,
|
|
30
31
|
projects,
|
|
31
32
|
selectedProject,
|
|
32
|
-
isLoading,
|
|
33
|
-
isFetchingNextPage,
|
|
34
|
-
hasNextPage,
|
|
35
|
-
onLoadMore,
|
|
36
33
|
onSelectProject,
|
|
37
34
|
onAddProject,
|
|
38
35
|
onManageProjects,
|
|
39
36
|
children
|
|
40
37
|
}) {
|
|
41
|
-
const
|
|
42
|
-
if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
|
|
43
|
-
const target = event.currentTarget;
|
|
44
|
-
const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
|
|
45
|
-
if (distanceToBottom <= 80) {
|
|
46
|
-
onLoadMore();
|
|
47
|
-
}
|
|
48
|
-
}, [hasNextPage, isFetchingNextPage, onLoadMore]);
|
|
38
|
+
const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);
|
|
49
39
|
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
50
40
|
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsx("button", { className: "cursor-pointer", children: /* @__PURE__ */ jsx(
|
|
51
41
|
IconChevronDown,
|
|
@@ -69,7 +59,7 @@ function ProjectSelectorPopover({
|
|
|
69
59
|
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-2", children: [
|
|
70
60
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
71
61
|
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Projetos" }),
|
|
72
|
-
(onAddProject || onManageProjects) && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: onAddProject && /* @__PURE__ */ jsxs(
|
|
62
|
+
(onAddProject || onManageProjects) && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: canAddProject && onAddProject && /* @__PURE__ */ jsxs(
|
|
73
63
|
Button,
|
|
74
64
|
{
|
|
75
65
|
variant: "secondary",
|
|
@@ -84,59 +74,43 @@ function ProjectSelectorPopover({
|
|
|
84
74
|
] }),
|
|
85
75
|
/* @__PURE__ */ jsxs(Command, { className: "gap-2", children: [
|
|
86
76
|
/* @__PURE__ */ jsx(CommandInput, { placeholder: "Busque aqui" }),
|
|
87
|
-
/* @__PURE__ */ jsx(
|
|
88
|
-
|
|
89
|
-
{
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
),
|
|
125
|
-
project.title
|
|
126
|
-
] }),
|
|
127
|
-
isSelected && /* @__PURE__ */ jsx(IconCheck, { className: "size-4 text-gray-950" })
|
|
128
|
-
] })
|
|
129
|
-
},
|
|
130
|
-
project.id
|
|
131
|
-
);
|
|
132
|
-
}),
|
|
133
|
-
isFetchingNextPage && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
134
|
-
/* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
|
|
135
|
-
/* @__PURE__ */ jsx(ProjectItemSkeleton, {})
|
|
136
|
-
] })
|
|
137
|
-
] })
|
|
138
|
-
}
|
|
139
|
-
)
|
|
77
|
+
/* @__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: [
|
|
78
|
+
/* @__PURE__ */ jsx(IconFolderOpen, { size: 28, className: "text-gray-300" }),
|
|
79
|
+
/* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-center text-gray-500", children: [
|
|
80
|
+
"Nenhum projeto encontrado.",
|
|
81
|
+
/* @__PURE__ */ jsx("br", {}),
|
|
82
|
+
"Crie um projeto para come\xE7ar."
|
|
83
|
+
] })
|
|
84
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
85
|
+
/* @__PURE__ */ jsx(CommandEmpty, { children: "Nenhum resultado encontrado." }),
|
|
86
|
+
projects.map((project) => {
|
|
87
|
+
const isSelected = selectedProject?.id === project.id;
|
|
88
|
+
return /* @__PURE__ */ jsx(
|
|
89
|
+
CommandItem,
|
|
90
|
+
{
|
|
91
|
+
value: `${project.title}-${project.id}`,
|
|
92
|
+
keywords: [project.title],
|
|
93
|
+
className: isSelected ? "bg-gray-50" : "",
|
|
94
|
+
onSelect: () => onSelectProject(project),
|
|
95
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full cursor-pointer", children: [
|
|
96
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
|
|
97
|
+
/* @__PURE__ */ jsx(
|
|
98
|
+
UserAvatar,
|
|
99
|
+
{
|
|
100
|
+
photo: project.photo,
|
|
101
|
+
name: project.title,
|
|
102
|
+
size: 32
|
|
103
|
+
}
|
|
104
|
+
),
|
|
105
|
+
project.title
|
|
106
|
+
] }),
|
|
107
|
+
isSelected && /* @__PURE__ */ jsx(IconCheck, { className: "size-4 text-gray-950" })
|
|
108
|
+
] })
|
|
109
|
+
},
|
|
110
|
+
project.id
|
|
111
|
+
);
|
|
112
|
+
})
|
|
113
|
+
] }) })
|
|
140
114
|
] }),
|
|
141
115
|
onManageProjects && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
142
116
|
/* @__PURE__ */ jsx("div", { className: "border-t border-gray-200" }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\n\nimport { Dispatch, RefObject, SetStateAction
|
|
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":"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","names":[]}
|
|
@@ -10,18 +10,15 @@ import { UsersSelectorPopover } from "../../layouts/UsersSelectorPopover";
|
|
|
10
10
|
import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from "../../../index";
|
|
11
11
|
import { IconChevronDown, IconPlus, IconSettings } from "@tabler/icons-react";
|
|
12
12
|
function ProjectItemSkeleton() {
|
|
13
|
-
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-
|
|
14
|
-
/* @__PURE__ */ jsx("div", { className: "skeleton size-
|
|
15
|
-
/* @__PURE__ */ jsx("div", { className: "skeleton h-
|
|
13
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
|
|
14
|
+
/* @__PURE__ */ jsx("div", { className: "skeleton size-8 rounded-lg shrink-0" }),
|
|
15
|
+
/* @__PURE__ */ jsx("div", { className: "skeleton h-3.5 w-32 rounded" })
|
|
16
16
|
] });
|
|
17
17
|
}
|
|
18
18
|
function ProjectSelector({
|
|
19
19
|
projects,
|
|
20
20
|
selectedProject,
|
|
21
21
|
isLoading,
|
|
22
|
-
isFetchingNextPage,
|
|
23
|
-
hasNextPage,
|
|
24
|
-
onLoadMore,
|
|
25
22
|
onSelectProject,
|
|
26
23
|
onAddProject,
|
|
27
24
|
onManageProjects
|
|
@@ -48,10 +45,6 @@ function ProjectSelector({
|
|
|
48
45
|
titleRef,
|
|
49
46
|
projects,
|
|
50
47
|
selectedProject,
|
|
51
|
-
isLoading,
|
|
52
|
-
isFetchingNextPage,
|
|
53
|
-
hasNextPage,
|
|
54
|
-
onLoadMore,
|
|
55
48
|
onSelectProject,
|
|
56
49
|
onAddProject,
|
|
57
50
|
onManageProjects,
|
|
@@ -104,56 +97,36 @@ function ProjectSelector({
|
|
|
104
97
|
] }),
|
|
105
98
|
/* @__PURE__ */ jsxs(Command, { className: "gap-2", children: [
|
|
106
99
|
/* @__PURE__ */ jsx(CommandInput, { placeholder: "Busque aqui" }),
|
|
107
|
-
/* @__PURE__ */ jsxs(
|
|
108
|
-
|
|
109
|
-
{
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
100
|
+
/* @__PURE__ */ jsxs(CommandList, { className: "custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]", children: [
|
|
101
|
+
/* @__PURE__ */ jsx(CommandEmpty, { children: "Nenhum resultado encontrado." }),
|
|
102
|
+
isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
103
|
+
/* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
|
|
104
|
+
/* @__PURE__ */ jsx(ProjectItemSkeleton, {})
|
|
105
|
+
] }) : projects.map((project) => /* @__PURE__ */ jsxs(
|
|
106
|
+
CommandItem,
|
|
107
|
+
{
|
|
108
|
+
value: `${project.title}-${project.id}`,
|
|
109
|
+
keywords: [project.title],
|
|
110
|
+
className: selectedProject?.id === project.id ? "bg-gray-50" : "",
|
|
111
|
+
onSelect: () => {
|
|
112
|
+
onSelectProject(project);
|
|
113
|
+
setActiveSection(null);
|
|
114
|
+
},
|
|
115
|
+
children: [
|
|
116
|
+
/* @__PURE__ */ jsx(
|
|
117
|
+
UserAvatar,
|
|
118
|
+
{
|
|
119
|
+
photo: project.photo,
|
|
120
|
+
name: project.title,
|
|
121
|
+
size: 32
|
|
122
|
+
}
|
|
123
|
+
),
|
|
124
|
+
project.title
|
|
125
|
+
]
|
|
118
126
|
},
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
/* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
|
|
123
|
-
/* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
|
|
124
|
-
/* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
|
|
125
|
-
/* @__PURE__ */ jsx(ProjectItemSkeleton, {})
|
|
126
|
-
] }) : projects.map((project) => /* @__PURE__ */ jsxs(
|
|
127
|
-
CommandItem,
|
|
128
|
-
{
|
|
129
|
-
value: `${project.title}-${project.id}`,
|
|
130
|
-
keywords: [project.title],
|
|
131
|
-
className: selectedProject?.id === project.id ? "bg-gray-50 min-h-[39px]" : "min-h-[39px]",
|
|
132
|
-
onSelect: () => {
|
|
133
|
-
onSelectProject(project);
|
|
134
|
-
setActiveSection(null);
|
|
135
|
-
},
|
|
136
|
-
children: [
|
|
137
|
-
/* @__PURE__ */ jsx(
|
|
138
|
-
UserAvatar,
|
|
139
|
-
{
|
|
140
|
-
photo: project.photo,
|
|
141
|
-
name: project.title,
|
|
142
|
-
size: 36
|
|
143
|
-
}
|
|
144
|
-
),
|
|
145
|
-
project.title
|
|
146
|
-
]
|
|
147
|
-
},
|
|
148
|
-
project.id
|
|
149
|
-
)),
|
|
150
|
-
isFetchingNextPage && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
151
|
-
/* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
|
|
152
|
-
/* @__PURE__ */ jsx(ProjectItemSkeleton, {})
|
|
153
|
-
] })
|
|
154
|
-
]
|
|
155
|
-
}
|
|
156
|
-
)
|
|
127
|
+
project.id
|
|
128
|
+
))
|
|
129
|
+
] })
|
|
157
130
|
] })
|
|
158
131
|
] })
|
|
159
132
|
] });
|
|
@@ -1 +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 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":[]}
|
|
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":[]}
|