@protobase/ui 0.55.2 → 0.55.3

package/dist/app/nav-from-meta.js

@@ -1,7 +1,10 @@
+import { allowEverything } from "../data/meta-data.js";
 import { humanize } from "../live/naming.js";
 import { text } from "./messages.js";
+import { text as text$1 } from "./create/messages.js";
 import { iconFor } from "./icons.js";
 import { menuIcon } from "./menu-icons.js";
+import { createOffered } from "./create/create-offered.js";
 import { userMenuResources } from "./user-menu-from-meta.js";
 import { LayoutDashboard } from "lucide-react";
 import { appPath } from "@protobase/schema";
@@ -21,10 +24,21 @@ const schemaGroup = (schema = "public") => {
 	if (schema === "public") return "";
 	return groupLabels[schema] ? text(groupLabels[schema]) : humanize(schema);
 };
+/** The link under an entry whose `nav.create` asks for one, to whoever the list would offer New. */
+const createLink = (meta, view, nav, singular, basePath) => {
+	if (!nav?.create || !createOffered(view, meta.pages, meta.permissions[view.resource] ?? allowEverything)) return {};
+	return { create: {
+		label: nav.create === true ? text$1("title", singular) : nav.create.label,
+		href: appPath({
+			kind: "create",
+			resource: view.resource
+		}, basePath)
+	} };
+};
 /**
 * One sidebar group per `nav.group` (default: the database schema, none for `public`, and "Pages" for pages); `nav.hidden` and a place in
 * the user menu leave an entry out, `nav.order` sorts within a group, and `recent` (from `useNavRecent`) makes an entry
-* collapsible. Groups with pages come first, so a dashboard leads the sidebar. The resources of a source that cannot be
+* collapsible, and `create` links to the create form under it. Groups with pages come first, so a dashboard leads the sidebar. The resources of a source that cannot be
 * read are listed under its label, each with the problem. A visitor also gets the resources whose views ask them to sign
 * in, where those views place them, under "Account" without a group. Each named list of a view is an entry of its
 * own, placed by its own `nav`.
@@ -73,7 +87,8 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 				kind: "list",
 				resource: model.name
 			}, basePath),
-			...recent[model.name] && { recent: recent[model.name] }
+			...recent[model.name] && { recent: recent[model.name] },
+			...createLink(meta, view, view.nav, view.names?.singular ?? humanize(model.name), basePath)
 		}, view.nav?.order);
 		for (const named of view.lists ?? []) {
 			if (named.nav?.hidden) continue;
@@ -85,7 +100,8 @@ const navFromMeta = (meta, basePath = "", recent = {}) => {
 					kind: "list",
 					resource: model.name,
 					list: named.name
-				}, basePath)
+				}, basePath),
+				...createLink(meta, view, named.nav, named.names.singular, basePath)
 			}, named.nav?.order);
 		}
 	}

package/dist/app-shell/sidebar-create-link.js

@@ -0,0 +1,26 @@
+import { cn } from "../lib/cn.js";
+import { subRow, subRowIndent } from "./sidebar-rows.js";
+import { Plus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app-shell/sidebar-create-link.tsx
+/** The link under a sidebar entry to its resource's create form, such as "New message", lined up with its records. */
+const SidebarCreateLink = ({ create, mode, onNavigate }) => /* @__PURE__ */ jsx("div", {
+	className: cn("border-l border-transparent pl-1.5", subRowIndent[mode]),
+	children: /* @__PURE__ */ jsxs("a", {
+		href: create.href,
+		onClick: onNavigate && ((event) => {
+			event.preventDefault();
+			onNavigate(create.href);
+		}),
+		className: cn("flex items-center rounded-md text-faint-foreground transition-colors hover:bg-muted hover:text-foreground", subRow[mode]),
+		children: [/* @__PURE__ */ jsx(Plus, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: create.label
+		})]
+	})
+});
+//#endregion
+export { SidebarCreateLink };

package/dist/app-shell/sidebar-group.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/cn.js";
 import { text } from "./messages.js";
+import { subRow, subRowIndent } from "./sidebar-rows.js";
 import { navOpenStorageKey, readNavOpen, writeNavOpen } from "./nav-open-storage.js";
 import { SidebarItem } from "./sidebar-item.js";
 import { StatusDot } from "./status-dot.js";
@@ -7,15 +8,6 @@ import { useId, useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar-group.tsx
-const row = {
-	"text-large": "h-8 gap-2.5 px-2.5",
-	"text-small": "h-7 gap-2 px-2 text-body"
-};
-/** Lines the records up under the entry's icon. */
-const indent = {
-	"text-large": "ml-[20px]",
-	"text-small": "ml-[17px]"
-};
 /**
 * A sidebar entry with a few of its records under it. The label opens the list, the chevron shows or hides the
 * records (remembered in this browser), and "View all" at the end opens the list too.
@@ -58,14 +50,14 @@ const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
 		}), open && /* @__PURE__ */ jsxs("ul", {
 			id: listId,
 			"aria-label": text("recent", item.label.toLowerCase()),
-			className: cn("flex flex-col gap-0.5 border-l pl-1.5", indent[mode]),
+			className: cn("flex flex-col gap-0.5 border-l pl-1.5", subRowIndent[mode]),
 			children: [
 				recent.state === "loading" && /* @__PURE__ */ jsx("li", {
-					className: cn("flex items-center text-faint-foreground", row[mode]),
+					className: cn("flex items-center text-faint-foreground", subRow[mode]),
 					children: text("loading")
 				}),
 				recent.state === "error" && /* @__PURE__ */ jsx("li", {
-					className: cn("flex items-center text-faint-foreground", row[mode]),
+					className: cn("flex items-center text-faint-foreground", subRow[mode]),
 					children: text("couldNotLoad")
 				}),
 				recent.state === "ready" && recent.records.map((record) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("a", {
@@ -73,7 +65,7 @@ const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
 					"aria-label": record.status ? `${record.label}, ${record.status.label}` : record.label,
 					title: record.status ? `${record.label} (${record.status.label})` : record.label,
 					"aria-current": record.active ? "page" : void 0,
-					className: cn("flex min-w-0 items-center rounded-md font-medium transition-colors", row[mode], record.active ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
+					className: cn("flex min-w-0 items-center rounded-md font-medium transition-colors", subRow[mode], record.active ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"),
 					children: [record.status && /* @__PURE__ */ jsx(StatusDot, {
 						tone: record.status.tone,
 						pulse: record.status.pulse
@@ -84,7 +76,7 @@ const SidebarGroup = ({ item, recent, mode, active, onNavigate }) => {
 				}) }, record.id)),
 				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
 					...link(href),
-					className: cn("flex items-center rounded-md text-faint-foreground transition-colors hover:bg-muted hover:text-foreground", row[mode]),
+					className: cn("flex items-center rounded-md text-faint-foreground transition-colors hover:bg-muted hover:text-foreground", subRow[mode]),
 					children: text("viewAll")
 				}) })
 			]

package/dist/app-shell/sidebar-rows.js

@@ -0,0 +1,13 @@
+//#region src/app-shell/sidebar-rows.ts
+/** The height and spacing of a row under a sidebar entry, such as a recent record or its create link. */
+const subRow = {
+	"text-large": "h-8 gap-2.5 px-2.5",
+	"text-small": "h-7 gap-2 px-2 text-body"
+};
+/** Lines the rows under an entry up under the entry's icon. */
+const subRowIndent = {
+	"text-large": "ml-[20px]",
+	"text-small": "ml-[17px]"
+};
+//#endregion
+export { subRow, subRowIndent };

package/dist/app-shell/sidebar.js

@@ -5,11 +5,13 @@ import { Logo } from "./logo.js";
 import { navGroups } from "./nav.js";
 import { ThemeSwitch } from "./theme-switch.js";
 import { ProfileMenu } from "./profile-menu.js";
+import { SidebarCreateLink } from "./sidebar-create-link.js";
 import { isTextMode, sidebarWidth } from "./sidebar-mode.js";
 import { SidebarItem } from "./sidebar-item.js";
 import { SidebarGroup } from "./sidebar-group.js";
+import { Fragment } from "react";
 import { LogIn } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/app-shell/sidebar.tsx
 const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExpanded, profileMenuOpen, groups = navGroups, userMenu, account, onNavigate, onSignOut, signIn, organizations, roles, theme, sticky, logo: SidebarLogo = Logo, notice }) => {
 	const expanding = mode === "icon-expand";
@@ -37,18 +39,22 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExp
 						children: [inline ? group.label && /* @__PURE__ */ jsx("div", {
 							className: cn("px-3 pb-1 pt-1 text-xs font-medium uppercase tracking-wide text-faint-foreground", expanding && "h-4 whitespace-nowrap py-0 opacity-0 transition-opacity group-hover/side:opacity-100 group-focus-within/side:opacity-100", expanded && "opacity-100"),
 							children: group.label
-						}) : index > 0 && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 h-px w-6 bg-border" }), group.items.map((item) => item.recent && isTextMode(mode) ? /* @__PURE__ */ jsx(SidebarGroup, {
+						}) : index > 0 && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-1 h-px w-6 bg-border" }), group.items.map((item) => /* @__PURE__ */ jsxs(Fragment, { children: [item.recent && isTextMode(mode) ? /* @__PURE__ */ jsx(SidebarGroup, {
 							item,
 							recent: item.recent,
 							mode,
 							active: item.id === activeItem,
 							onNavigate
-						}, item.id) : /* @__PURE__ */ jsx(SidebarItem, {
+						}) : /* @__PURE__ */ jsx(SidebarItem, {
 							item,
 							mode,
 							active: item.id === activeItem,
 							onNavigate
-						}, item.id))]
+						}), item.create && isTextMode(mode) && /* @__PURE__ */ jsx(SidebarCreateLink, {
+							create: item.create,
+							mode,
+							onNavigate
+						})] }, item.id))]
 					}, group.label))
 				}),
 				notice,
@@ -65,7 +71,7 @@ const Sidebar = ({ mode, activeItem, user, workspace, appName, appIcon, forceExp
 						organizations,
 						roles,
 						theme
-					}) : /* @__PURE__ */ jsxs(Fragment, { children: [theme && inline && /* @__PURE__ */ jsx(ThemeSwitch, {
+					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [theme && inline && /* @__PURE__ */ jsx(ThemeSwitch, {
 						theme,
 						className: "flex min-h-11 w-full items-center gap-2.5 whitespace-nowrap p-1.5 text-muted-foreground md:min-h-0"
 					}), signIn && /* @__PURE__ */ jsxs(RouteLink, {

package/dist/package.js

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