@protobase/ui 0.21.12 → 0.22.1

package/dist/organizations/members-page.js

@@ -7,9 +7,10 @@ import { AccountSection, SectionError } from "../account/account-section.js";
 import { grantableRoles, organizationRoleLabels } from "./organization-paths.js";
 import { useAction } from "./use-action.js";
 import { AppRolesPicker } from "./app-roles-picker.js";
+import { PersonRow } from "../people/person-row.js";
 import { useCallback, useEffect, useState } from "react";
 import { AuthError } from "@protobase/client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/organizations/members-page.tsx
 /** The organization roles the person may set: owners every one, admins those below owner. */
 const assignableOrganizationRoles = (current) => current?.role === "owner" ? [
@@ -25,61 +26,46 @@ const MemberRow = ({ member, current, onChanged }) => {
 	const self = member.id === current.memberId;
 	const organizationRoles = assignableOrganizationRoles(current);
 	const roleLocked = member.role === "owner" && current.role !== "owner";
-	return /* @__PURE__ */ jsxs("li", {
-		className: "flex flex-col gap-2 px-3 py-3",
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: [
-					/* @__PURE__ */ jsxs("span", {
-						className: "min-w-0 flex-1",
-						children: [/* @__PURE__ */ jsxs("span", {
-							className: "block truncate font-medium",
-							children: [member.name, self && " (you)"]
-						}), /* @__PURE__ */ jsx("span", {
-							className: "block truncate text-xs text-muted-foreground",
-							children: member.email
-						})]
-					}),
-					/* @__PURE__ */ jsx("select", {
-						"aria-label": `Organization role of ${member.name}`,
-						value: member.role,
-						disabled: busy || roleLocked,
-						onChange: (event) => void run(async () => {
-							await session.organizations.setRole(organizationId, member.id, event.target.value);
-							onChanged();
-						}),
-						className: "h-7 rounded-md border border-border-strong bg-background px-2 text-xs",
-						children: (roleLocked ? [member.role] : organizationRoles).map((role) => /* @__PURE__ */ jsx("option", {
-							value: role,
-							children: organizationRoleLabels[role]
-						}, role))
-					}),
-					!self && /* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						variant: "danger",
-						loading: busy,
-						disabled: roleLocked,
-						onClick: () => void run(async () => {
-							await session.organizations.removeMember(organizationId, member.id);
-							onChanged();
-						}),
-						children: "Remove"
-					})
-				]
+	const membershipRoles = roles.filter((role) => role.membership);
+	return /* @__PURE__ */ jsx(PersonRow, {
+		name: member.name,
+		email: member.email,
+		self,
+		error,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("select", {
+			"aria-label": `Organization role of ${member.name}`,
+			value: member.role,
+			disabled: busy || roleLocked,
+			onChange: (event) => void run(async () => {
+				await session.organizations.setRole(organizationId, member.id, event.target.value);
+				onChanged();
 			}),
-			/* @__PURE__ */ jsx(AppRolesPicker, {
-				roles,
-				selected: member.appRoles,
-				grantable: grantableRoles(roles, current),
-				disabled: busy,
-				onChange: (selected) => void run(async () => {
-					await session.organizations.setAppRoles(member.id, selected);
-					onChanged();
-				})
+			className: "h-7 rounded-md border border-border-strong bg-background px-2 text-xs",
+			children: (roleLocked ? [member.role] : organizationRoles).map((role) => /* @__PURE__ */ jsx("option", {
+				value: role,
+				children: organizationRoleLabels[role]
+			}, role))
+		}), !self && /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "danger",
+			loading: busy,
+			disabled: roleLocked,
+			onClick: () => void run(async () => {
+				await session.organizations.removeMember(organizationId, member.id);
+				onChanged();
 			}),
-			/* @__PURE__ */ jsx(SectionError, { message: error })
-		]
+			children: "Remove"
+		})] }),
+		children: /* @__PURE__ */ jsx(AppRolesPicker, {
+			roles: membershipRoles,
+			selected: member.appRoles,
+			grantable: grantableRoles(roles, current),
+			disabled: busy,
+			onChange: (selected) => void run(async () => {
+				await session.organizations.setAppRoles(member.id, selected);
+				onChanged();
+			})
+		})
 	});
 };
 /**

package/dist/organizations/organization-row.js

@@ -0,0 +1,28 @@
+import { Badge } from "../primitives/badge.js";
+import { Button } from "../primitives/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/organizations/organization-row.tsx
+/** An organization with Open, or a Current badge when the person works in it. */
+const OrganizationRow = ({ organization, current, busy, onOpen }) => /* @__PURE__ */ jsxs("li", {
+	className: "flex items-center gap-3 px-3 py-2.5",
+	children: [/* @__PURE__ */ jsxs("span", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "block truncate font-medium",
+			children: organization.name
+		}), /* @__PURE__ */ jsx("span", {
+			className: "block text-xs text-muted-foreground",
+			children: organization.slug
+		})]
+	}), current ? /* @__PURE__ */ jsx(Badge, {
+		tone: "green",
+		children: "Current"
+	}) : /* @__PURE__ */ jsx(Button, {
+		size: "sm",
+		loading: busy,
+		onClick: onOpen,
+		children: "Open"
+	})]
+});
+//#endregion
+export { OrganizationRow };

package/dist/organizations/organizations-page.js

@@ -1,4 +1,3 @@
-import { Badge } from "../primitives/badge.js";
 import { Input } from "../primitives/input.js";
 import { PageHeader } from "../app-shell/page-header.js";
 import { useAuth } from "../auth/auth-provider.js";
@@ -8,33 +7,13 @@ import { roleLabel } from "./organization-paths.js";
 import { useAction } from "./use-action.js";
 import { isAdmin } from "../auth/user-to-shell.js";
 import { reopenIn } from "./use-organizations.js";
+import { OrganizationRow } from "./organization-row.js";
+import { AllOrganizations } from "./all-organizations.js";
 import { useEffect, useState } from "react";
-import { Search } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/organizations/organizations-page.tsx
 /** A slug from a name: lowercase ASCII words joined by dashes, as the server accepts them. */
 const slugOf = (name) => name.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 63);
-const OrganizationRow = ({ organization, current, busy, onOpen }) => /* @__PURE__ */ jsxs("li", {
-	className: "flex items-center gap-3 px-3 py-2.5",
-	children: [/* @__PURE__ */ jsxs("span", {
-		className: "min-w-0 flex-1",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "block truncate font-medium",
-			children: organization.name
-		}), /* @__PURE__ */ jsx("span", {
-			className: "block text-xs text-muted-foreground",
-			children: organization.slug
-		})]
-	}), current ? /* @__PURE__ */ jsx(Badge, {
-		tone: "green",
-		children: "Current"
-	}) : /* @__PURE__ */ jsx(Button, {
-		size: "sm",
-		loading: busy,
-		onClick: onOpen,
-		children: "Open"
-	})]
-});
 const NewOrganization = ({ basePath }) => {
 	const { session } = useAuth();
 	const [name, setName] = useState("");
@@ -82,43 +61,6 @@ const NewOrganization = ({ basePath }) => {
 		})]
 	});
 };
-const FindOrganization = ({ basePath, currentId }) => {
-	const { session } = useAuth();
-	const [query, setQuery] = useState("");
-	const [found, setFound] = useState([]);
-	const { busy, error, run } = useAction();
-	useEffect(() => {
-		const timer = setTimeout(() => void session.organizations.search(query).then(setFound, () => setFound([])), 200);
-		return () => clearTimeout(timer);
-	}, [session, query]);
-	return /* @__PURE__ */ jsxs(AccountSection, {
-		title: "Find an organization",
-		description: "Your global roles let you work in any organization, with what those roles allow there. Opening one you are not a member of is written to the audit log.",
-		children: [
-			/* @__PURE__ */ jsx(SectionError, { message: error }),
-			/* @__PURE__ */ jsx(Input, {
-				"aria-label": "Find an organization",
-				placeholder: "Name or slug",
-				value: query,
-				onChange: (event) => setQuery(event.target.value),
-				leading: /* @__PURE__ */ jsx(Search, { className: "size-3.5" }),
-				wrapperClassName: "mb-3"
-			}),
-			found.length > 0 && /* @__PURE__ */ jsx("ul", {
-				className: "divide-y rounded-md border",
-				children: found.map((organization) => /* @__PURE__ */ jsx(OrganizationRow, {
-					organization,
-					current: organization.id === currentId,
-					busy,
-					onOpen: () => void run(async () => {
-						await session.organizations.switchTo(organization.id);
-						reopenIn(basePath);
-					})
-				}, organization.id))
-			})
-		]
-	});
-};
 const YourInvitations = () => {
 	const { session, organizations } = useAuth();
 	const [invitations, setInvitations] = useState([]);
@@ -152,7 +94,7 @@ const YourInvitations = () => {
 };
 /**
 * The person's organizations: switching between them, making a new one when the app allows it, and for people with a
-* global role finding any organization. Someone in none sees their invitations here.
+* global role every organization. Someone in none sees their invitations here.
 */
 const OrganizationsPage = ({ state, basePath }) => {
 	const { session, organizations: settings, state: auth } = useAuth();
@@ -185,7 +127,7 @@ const OrganizationsPage = ({ state, basePath }) => {
 			}),
 			/* @__PURE__ */ jsx(YourInvitations, {}),
 			mayCreate && /* @__PURE__ */ jsx(NewOrganization, { basePath }),
-			(state.current?.globalRoles.length ?? 0) > 0 && /* @__PURE__ */ jsx(FindOrganization, {
+			(state.current?.globalRoles.length ?? 0) > 0 && /* @__PURE__ */ jsx(AllOrganizations, {
 				basePath,
 				currentId
 			})

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.21.12";
+var version = "0.22.1";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/people/person-row.js

@@ -0,0 +1,26 @@
+import { SectionError } from "../account/account-section.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/people/person-row.tsx
+/** Someone in a list of people: their name, " (you)" on one's own row, their address, what can be done and their roles. */
+const PersonRow = ({ name, email, self, actions, children, error }) => /* @__PURE__ */ jsxs("li", {
+	className: "flex flex-col gap-2 px-3 py-3",
+	children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "block truncate font-medium",
+					children: [name, self && " (you)"]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "block truncate text-xs text-muted-foreground",
+					children: email
+				})]
+			}), actions]
+		}),
+		children,
+		/* @__PURE__ */ jsx(SectionError, { message: error })
+	]
+});
+//#endregion
+export { PersonRow };