@psnext/design-system 2.2.0 → 2.4.0

package/dist/Header.js

@@ -1,4 +1,5 @@
 import { t as cn } from "./cn.js";
+import { t as Icon } from "./Icon.js";
 import { Button } from "./primitives/Button/index.js";
 import { Avatar, AvatarFallback } from "./primitives/Avatar/index.js";
 import { Credits } from "./primitives/Credits/index.js";
@@ -9,8 +10,8 @@ import { Popover, PopoverContent, PopoverTrigger } from "./primitives/Popover/in
 import { Skeleton } from "./primitives/Skeleton/index.js";
 import { useTheme } from "./primitives/ThemeProvider/index.js";
 import * as React from "react";
-import { Check, ChevronDown, ChevronRight, FolderOpen, LogOut, MessageSquareShare, Moon, Search, Sun, X } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, ChevronRight, LogOut, MessageSquareShare, Moon, Search, Sun } from "lucide-react";
 import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
 //#region src/patterns/Header/project-tree.ts
 /** True when a node with the given id exists anywhere in the tree. */
@@ -25,6 +26,14 @@ function findProjectName(tree, id) {
 		if (found) return found;
 	}
 }
+/** First selectable node in the tree (depth-first, skipping context-only ancestors). */
+function firstSelectableProject(tree) {
+	for (const node of tree) {
+		if (!node.isContextOnly) return node;
+		const found = firstSelectableProject(node.children);
+		if (found) return found;
+	}
+}
 /** Filter the tree to nodes matching `term`, preserving ancestors of matches. */
 function filterTree(nodes, term) {
 	if (!term) return nodes;
@@ -66,7 +75,10 @@ function ProjectPicker({ projectsTree, selectedProjectId, selectedProjectName, o
 				children: [projectLabel, ":"]
 			}),
 			/* @__PURE__ */ jsx(Skeleton, { className: "h-3 flex-1" }),
-			/* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-txt opacity-40" })
+			/* @__PURE__ */ jsx(Icon, {
+				as: ChevronDown,
+				className: "size-4 shrink-0 text-muted-txt opacity-40"
+			})
 		]
 	});
 	return /* @__PURE__ */ jsxs(Popover, {
@@ -87,7 +99,10 @@ function ProjectPicker({ projectsTree, selectedProjectId, selectedProjectName, o
 					className: cn("max-w-36 truncate", selectedName ? "font-medium" : "text-muted-txt"),
 					children: selectedName ?? projectPlaceholder
 				}),
-				/* @__PURE__ */ jsx(ChevronDown, { className: "ml-1 size-4 shrink-0 text-muted-txt" })
+				/* @__PURE__ */ jsx(Icon, {
+					as: ChevronDown,
+					className: "ml-1 size-4 shrink-0 text-muted-txt"
+				})
 			]
 		}), /* @__PURE__ */ jsxs(PopoverContent, {
 			align: "start",
@@ -98,7 +113,10 @@ function ProjectPicker({ projectsTree, selectedProjectId, selectedProjectName, o
 				className: "border-b p-2",
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "relative",
-					children: [/* @__PURE__ */ jsx(Search, { className: "absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-txt" }), /* @__PURE__ */ jsx(Input, {
+					children: [/* @__PURE__ */ jsx(Icon, {
+						as: Search,
+						className: "absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-txt"
+					}), /* @__PURE__ */ jsx(Input, {
 						size: "sm",
 						className: "pl-8",
 						placeholder: searchPlaceholder,
@@ -140,7 +158,13 @@ function TreeNode({ node, depth, selectedId, onSelect, collapsedIds, onToggleCol
 					"aria-label": isCollapsed ? `Expand ${node.name}` : `Collapse ${node.name}`,
 					onClick: () => onToggleCollapse(node.id),
 					className: "shrink-0 text-muted-txt hover:text-primary-txt",
-					children: isCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })
+					children: isCollapsed ? /* @__PURE__ */ jsx(Icon, {
+						as: ChevronRight,
+						className: "size-3.5"
+					}) : /* @__PURE__ */ jsx(Icon, {
+						as: ChevronDown,
+						className: "size-3.5"
+					})
 				}) : /* @__PURE__ */ jsx("span", { className: "inline-block w-3.5 shrink-0" }),
 				node.isContextOnly ? /* @__PURE__ */ jsx("span", {
 					className: "flex-1 text-left",
@@ -151,7 +175,10 @@ function TreeNode({ node, depth, selectedId, onSelect, collapsedIds, onToggleCol
 					className: "flex-1 text-left",
 					children: node.name
 				}),
-				isSelected && /* @__PURE__ */ jsx(Check, { className: "ml-auto size-3.5 shrink-0 text-primary" })
+				isSelected && /* @__PURE__ */ jsx(Icon, {
+					as: Check,
+					className: "ml-auto size-3.5 shrink-0 text-primary"
+				})
 			]
 		}), !isCollapsed && hasChildren && /* @__PURE__ */ jsx("div", {
 			role: "group",
@@ -176,16 +203,14 @@ const DEFAULT_LABELS = {
 	searchPlaceholder: "Search project",
 	emptyStateText: "No projects found",
 	profileMenuLabel: "Profile menu",
-	logoutLabel: "Logout",
-	overlayTitle: "Select a Project",
-	overlayDescription: "Choose a project to get started. You can change it anytime from the header."
+	logoutLabel: "Logout"
 };
-//#endregion
-//#region src/patterns/Header/api.ts
+/** Hard cap on project pages fetched — guards against a runaway loop. */
+const PROJECTS_MAX_PAGES = 40;
 const PATHS = {
 	token: "/api/v1/studio-auth/sessions/token",
 	logout: "/api/v1/studio-auth/sessions/logout",
-	projects: (clientId) => `/api/v1/onboarding/organization/${clientId}/projects`,
+	projects: (clientId) => `/api/v1/client-projects/getAllProjects?limit=50&page=1&sort=name&sortOrder=ASC&clientId=${encodeURIComponent(clientId)}&metaData=true`,
 	credits: "/save/api/v1/users"
 };
 /** Join a base URL and path without doubling slashes. */
@@ -206,16 +231,77 @@ async function fetchToken(endpoints, fetcher) {
 	const { accessToken } = await res.json();
 	return accessToken;
 }
+/**
+* Return `url` with the `page` query param set to the given page (and `limit`
+* backfilled when absent). Pagination stays owned by the header: host-provided
+* endpoint URLs don't need — and can't break — the paging params. Handles
+* absolute and relative URLs.
+*/
+function withPageParam(url, page) {
+	const isAbsolute = /^[a-z][a-z0-9+.-]*:\/\//i.test(url);
+	try {
+		const u = new URL(url, isAbsolute ? void 0 : "http://relative.invalid");
+		u.searchParams.set("page", String(page));
+		if (!u.searchParams.has("limit")) u.searchParams.set("limit", String(50));
+		return isAbsolute ? u.toString() : `${u.pathname}${u.search}${u.hash}`;
+	} catch {
+		return url;
+	}
+}
+/** The `limit` query param already on a URL, else the default page size. */
+function readLimitParam(url) {
+	try {
+		const limit = Number(new URL(url, "http://relative.invalid").searchParams.get("limit"));
+		return Number.isInteger(limit) && limit > 0 ? limit : 50;
+	} catch {
+		return 50;
+	}
+}
+/** Total node count in a tree page (roots + descendants). */
+function countNodes(tree) {
+	return tree.reduce((sum, node) => sum + 1 + countNodes(node.children ?? []), 0);
+}
+/**
+* Merge a page's tree into the accumulated tree. Nodes repeated across pages
+* (e.g. a context-only ancestor whose children span a page boundary) are
+* merged by id instead of duplicated.
+*/
+function mergeTrees(into, page) {
+	for (const node of page) {
+		const existing = into.find((n) => n.id === node.id);
+		if (existing) mergeTrees(existing.children, node.children ?? []);
+		else into.push({
+			...node,
+			children: [...node.children ?? []]
+		});
+	}
+}
+/**
+* Fetch ALL pages of the paginated projects endpoint and merge them into a
+* single tree, so users with more projects than one page still see everything.
+* The response carries no pagination metadata, so the first page that comes
+* back with fewer than `limit` nodes is treated as the last one.
+*/
 async function fetchProjects(endpoints, clientId, accessToken, fetcher) {
-	const res = await fetcher(endpoints.projects(clientId), {
-		credentials: "include",
-		headers: { Authorization: `Bearer ${accessToken}` }
-	});
-	if (!res.ok) throw new Error(`projects request failed: ${res.status}`);
-	const data = await res.json();
+	const projectsTree = [];
+	let organizationName;
+	const baseUrl = endpoints.projects(clientId);
+	const pageLimit = readLimitParam(baseUrl);
+	for (let page = 1; page <= PROJECTS_MAX_PAGES; page++) {
+		const res = await fetcher(withPageParam(baseUrl, page), {
+			credentials: "include",
+			headers: { Authorization: `Bearer ${accessToken}` }
+		});
+		if (!res.ok) throw new Error(`projects request failed: ${res.status}`);
+		const body = await res.json();
+		const pageTree = body.response?.data?.projectsTree ?? [];
+		mergeTrees(projectsTree, pageTree);
+		organizationName ??= body.response?.data?.organization?.name;
+		if (countNodes(pageTree) < pageLimit) break;
+	}
 	return {
-		projectsTree: data.response?.data?.projectsTree ?? [],
-		organizationName: data.response?.data?.organization?.name
+		projectsTree,
+		organizationName
 	};
 }
 async function fetchCredits(endpoints, accessToken, fetcher) {
@@ -239,6 +325,8 @@ async function callLogout(endpoints, fetcher) {
 //#endregion
 //#region src/patterns/Header/storage.ts
 const PROJECT_KEY = "ds-header-project";
+const LAST_PROJECT_KEY = "lastSelectedProject";
+const PROJECTS_CACHE_KEY = "ds-header-projects-cache";
 function getStoredProject() {
 	try {
 		const raw = sessionStorage.getItem(PROJECT_KEY);
@@ -257,6 +345,52 @@ function clearStoredProject() {
 		sessionStorage.removeItem(PROJECT_KEY);
 	} catch {}
 }
+/** The project the user last explicitly selected, in any tab (localStorage). */
+function getLastSelectedProject() {
+	try {
+		const raw = localStorage.getItem(LAST_PROJECT_KEY);
+		return raw ? JSON.parse(raw) : null;
+	} catch {
+		return null;
+	}
+}
+function setLastSelectedProject(project) {
+	try {
+		localStorage.setItem(LAST_PROJECT_KEY, JSON.stringify(project));
+	} catch {}
+}
+function projectsCacheKey(clientId, userId) {
+	return `${PROJECTS_CACHE_KEY}:${clientId}:${userId}`;
+}
+/** The session-cached projects result for this client + user, or null on miss. */
+function getCachedProjects(clientId, userId) {
+	try {
+		const raw = sessionStorage.getItem(projectsCacheKey(clientId, userId));
+		if (!raw) return null;
+		const cached = JSON.parse(raw);
+		if (!Array.isArray(cached.projectsTree)) return null;
+		return {
+			projectsTree: cached.projectsTree,
+			organizationName: cached.organizationName
+		};
+	} catch {
+		return null;
+	}
+}
+function setCachedProjects(clientId, userId, data) {
+	try {
+		sessionStorage.setItem(projectsCacheKey(clientId, userId), JSON.stringify(data));
+	} catch {}
+}
+/** Drop every cached projects entry (all clients/users) — used on logout. */
+function clearCachedProjects() {
+	try {
+		for (let i = sessionStorage.length - 1; i >= 0; i--) {
+			const key = sessionStorage.key(i);
+			if (key?.startsWith(PROJECTS_CACHE_KEY)) sessionStorage.removeItem(key);
+		}
+	} catch {}
+}
 //#endregion
 //#region src/patterns/Header/header-store.ts
 function initialState() {
@@ -292,14 +426,22 @@ const headerStore = {
 	getServerSnapshot() {
 		return SERVER_SNAPSHOT;
 	},
-	/** Set the selected project. `name` is best-effort; the Header backfills it from the tree. */
-	setProject(id, name = "", clientId) {
-		if (id) setStoredProject({
-			id,
-			name,
-			clientId: clientId ?? state.clientId
-		});
-		else clearStoredProject();
+	/**
+	* Set the selected project. `name` is best-effort; the Header backfills it from
+	* the tree. Explicit selections are also remembered in localStorage as the
+	* cross-tab default; pass `remember: false` for internal backfill/auto-select
+	* writes so they don't overwrite the user's last explicit choice.
+	*/
+	setProject(id, name = "", clientId, { remember = true } = {}) {
+		if (id) {
+			const project = {
+				id,
+				name,
+				clientId: clientId ?? state.clientId
+			};
+			setStoredProject(project);
+			if (remember) setLastSelectedProject(project);
+		} else clearStoredProject();
 		state = {
 			...state,
 			selectedProjectId: id,
@@ -432,7 +574,7 @@ function isSessionValid(environmentId) {
 const TOGGLE_PROJECT_DROPDOWN_EVENT = "toggle-project-dropdown";
 const DEFAULT_STALE_TIME = 5 * 6e4;
 const DEFAULT_GC_TIME = 10 * 6e4;
-function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInjectAccessToken: injectedToken, showProjectDropdown = false, showProfile = false, showOrg = false, showCredits = false, endpoints: endpointOverrides, fetcher: fetcherProp, staleTime = DEFAULT_STALE_TIME, gcTime = DEFAULT_GC_TIME, onProjectChange }) {
+function useGlobalHeader({ apiBaseUrl, environmentId, clientId, defaultProjectId, _dangerouslyInjectAccessToken: injectedToken, showProjectDropdown = false, showProfile = false, showOrg = false, showCredits = false, endpoints: endpointOverrides, fetcher: fetcherProp, staleTime = DEFAULT_STALE_TIME, gcTime = DEFAULT_GC_TIME, onProjectChange }) {
 	const fetcher = React.useMemo(() => fetcherProp ?? ((input, init) => fetch(input, init)), [fetcherProp]);
 	const endpoints = React.useMemo(() => buildEndpoints(apiBaseUrl, endpointOverrides), [apiBaseUrl, endpointOverrides]);
 	const isAuthenticated = isSessionValid(environmentId);
@@ -450,15 +592,25 @@ function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInje
 	});
 	const token = injectedToken ?? tokenQuery.data;
 	const effectiveClientId = clientId ?? claims?.clientId;
+	const wantsProjects = showProjectDropdown || showOrg;
+	const userId = claims?.userId ?? "";
 	const projectsQuery = useQuery({
 		queryKey: [
 			"ds-header",
 			"projects",
 			effectiveClientId,
+			userId,
 			token
 		],
-		queryFn: () => fetchProjects(endpoints, effectiveClientId, token, fetcher),
-		enabled: isAuthenticated && !!token && !!effectiveClientId && (showProjectDropdown || showOrg),
+		queryFn: async () => {
+			const id = effectiveClientId;
+			const cached = getCachedProjects(id, userId);
+			if (cached) return cached;
+			const fresh = await fetchProjects(endpoints, id, token, fetcher);
+			setCachedProjects(id, userId, fresh);
+			return fresh;
+		},
+		enabled: isAuthenticated && !!token && !!effectiveClientId && wantsProjects,
 		staleTime,
 		gcTime
 	});
@@ -484,6 +636,10 @@ function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInje
 		}
 	}, [apiBaseUrl]);
 	const selection = useHeaderStore();
+	const onProjectChangeRef = React.useRef(onProjectChange);
+	React.useEffect(() => {
+		onProjectChangeRef.current = onProjectChange;
+	});
 	React.useEffect(() => {
 		if (effectiveClientId) headerStore.reconcileClient(effectiveClientId);
 	}, [effectiveClientId]);
@@ -491,13 +647,29 @@ function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInje
 		if (!projectsQuery.data) return;
 		const tree = projectsQuery.data.projectsTree;
 		const id = headerStore.getSnapshot().selectedProjectId;
-		if (id && !nodeExistsInTree(tree, id)) headerStore.clearProject();
-		else if (id) {
+		if (id && nodeExistsInTree(tree, id)) {
 			const name = findProjectName(tree, id);
-			if (name && name !== headerStore.getSnapshot().selectedProjectName) headerStore.setProject(id, name, effectiveClientId);
+			if (name && name !== headerStore.getSnapshot().selectedProjectName) headerStore.setProject(id, name, effectiveClientId, { remember: false });
+		} else {
+			const last = getLastSelectedProject();
+			const fallback = last && nodeExistsInTree(tree, last.id) ? {
+				id: last.id,
+				name: findProjectName(tree, last.id) ?? last.name
+			} : defaultProjectId && nodeExistsInTree(tree, defaultProjectId) ? {
+				id: defaultProjectId,
+				name: findProjectName(tree, defaultProjectId) ?? ""
+			} : firstSelectableProject(tree);
+			if (fallback) {
+				headerStore.setProject(fallback.id, fallback.name, effectiveClientId, { remember: false });
+				onProjectChangeRef.current?.(fallback.id);
+			} else if (id) headerStore.clearProject();
 		}
 		headerStore.setOrganization(projectsQuery.data.organizationName, effectiveClientId);
-	}, [projectsQuery.data, effectiveClientId]);
+	}, [
+		projectsQuery.data,
+		effectiveClientId,
+		defaultProjectId
+	]);
 	React.useEffect(() => {
 		if (creditsQuery.data !== void 0) headerStore.setCredits(creditsQuery.data);
 	}, [creditsQuery.data]);
@@ -508,6 +680,7 @@ function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInje
 	};
 	const logout = () => {
 		headerStore.clearProject();
+		clearCachedProjects();
 		callLogout(endpoints, fetcher);
 	};
 	const [projectDropdownVisible, setProjectDropdownVisible] = React.useState(showProjectDropdown);
@@ -532,7 +705,6 @@ function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInje
 		credits: selection.credits,
 		creditsHref,
 		projectDropdownVisible,
-		showOverlay: isAuthenticated && projectDropdownVisible && !selection.selectedProjectId,
 		selectProject,
 		logout
 	};
@@ -644,7 +816,7 @@ function Header(props) {
 		children: /* @__PURE__ */ jsx(HeaderInner, { ...props })
 	});
 }
-function HeaderInner({ logoType, logoHref, showOrg = false, showProjectDropdown = false, showProfile = false, showThemeSwitcher = false, showCredits = false, pageTitle, feedbackUrl, logoAddon, className, onCloseProjectOverlay, ...rest }) {
+function HeaderInner({ logoType, logoHref, showOrg = false, showProjectDropdown = false, showProfile = false, showThemeSwitcher = false, showCredits = false, pageTitle, feedbackUrl, logoAddon, actionsStart, actionsEnd, className, ...rest }) {
 	const { product } = useTheme();
 	const brand = logoType ?? product;
 	const state = useGlobalHeader({
@@ -658,8 +830,8 @@ function HeaderInner({ logoType, logoHref, showOrg = false, showProjectDropdown
 	const showOrgUi = showOrg && state.isAuthenticated;
 	const showProfileUi = showProfile && state.isAuthenticated;
 	const showCreditsUi = showCredits && state.isAuthenticated && state.credits !== void 0;
-	const showActions = showThemeSwitcher || showProfileUi || showCreditsUi || !!feedbackUrl;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(HeaderBar, {
+	const showActions = showThemeSwitcher || showProfileUi || showCreditsUi || !!feedbackUrl || !!actionsStart || !!actionsEnd;
+	return /* @__PURE__ */ jsxs(HeaderBar, {
 		className,
 		children: [
 			/* @__PURE__ */ jsx(HeaderLogo, {
@@ -693,6 +865,7 @@ function HeaderInner({ logoType, logoHref, showOrg = false, showProjectDropdown
 			showActions && /* @__PURE__ */ jsxs("div", {
 				className: "ml-auto flex items-center gap-2",
 				children: [
+					actionsStart,
 					feedbackUrl && /* @__PURE__ */ jsx(Button, {
 						variant: "ghost",
 						size: "icon",
@@ -715,78 +888,11 @@ function HeaderInner({ logoType, logoHref, showOrg = false, showProjectDropdown
 					showProfileUi && /* @__PURE__ */ jsx(ProfileMenu, {
 						email: state.userEmail,
 						onLogout: state.logout
-					})
+					}),
+					actionsEnd
 				]
 			})
 		]
-	}), showProjectUi && state.showOverlay && /* @__PURE__ */ jsx(ProjectOverlay, {
-		organizationName: state.organizationName,
-		projectsTree: state.projectsTree,
-		selectedProjectId: state.selectedProjectId,
-		onSelect: state.selectProject,
-		isLoading: state.isProjectsLoading,
-		onClose: onCloseProjectOverlay
-	})] });
-}
-function ProjectOverlay({ organizationName, projectsTree, selectedProjectId, onSelect, isLoading, onClose }) {
-	return /* @__PURE__ */ jsx("div", {
-		role: "dialog",
-		"aria-modal": "true",
-		"aria-label": DEFAULT_LABELS.overlayTitle,
-		className: "fixed inset-0 z-50 flex items-center justify-center bg-primary-bg/80 backdrop-blur-sm",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "relative mx-1 flex w-full max-w-md flex-col items-center gap-6 rounded-16 border bg-glass-none-bg p-2 text-primary-txt shadow-xl",
-			children: [
-				/* @__PURE__ */ jsx(Button, {
-					variant: "ghost",
-					size: "icon",
-					onClick: onClose ?? (() => window.history.back()),
-					className: "absolute top-4 right-4",
-					"aria-label": "Close",
-					children: /* @__PURE__ */ jsx(X, { className: "size-5" })
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col items-center gap-3 text-center",
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							className: "rounded-full bg-primary/10 p-4",
-							children: /* @__PURE__ */ jsx(FolderOpen, { className: "size-8 text-primary" })
-						}),
-						/* @__PURE__ */ jsx("h2", {
-							className: "font-semibold text-primary-txt text-xl",
-							children: DEFAULT_LABELS.overlayTitle
-						}),
-						/* @__PURE__ */ jsx("p", {
-							className: "text-muted-txt text-sm",
-							children: DEFAULT_LABELS.overlayDescription
-						})
-					]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex w-full justify-center gap-2",
-					children: [organizationName && /* @__PURE__ */ jsxs("div", {
-						className: cn(PILL, "select-none"),
-						title: organizationName,
-						children: [/* @__PURE__ */ jsxs("span", {
-							className: "shrink-0 text-muted-txt",
-							children: [DEFAULT_LABELS.orgLabel, ":"]
-						}), /* @__PURE__ */ jsx("span", {
-							className: "max-w-52 truncate font-medium",
-							children: organizationName
-						})]
-					}), /* @__PURE__ */ jsx(ProjectPicker, {
-						projectsTree,
-						selectedProjectId,
-						onSelect,
-						projectLabel: DEFAULT_LABELS.projectLabel,
-						projectPlaceholder: DEFAULT_LABELS.projectPlaceholder,
-						searchPlaceholder: DEFAULT_LABELS.searchPlaceholder,
-						emptyStateText: DEFAULT_LABELS.emptyStateText,
-						isLoading
-					})]
-				})
-			]
-		})
 	});
 }
 //#endregion