camox 0.44.0 → 0.46.0

package/dist/features/studio/components/Navbar.js

@@ -1,31 +1,33 @@
-import { Link as Link$1, useLocation, useNavigate } from "../../navigation/navigation.js";
 import { actionsStore } from "../../provider/actionsStore.js";
-import { usePageDestinations } from "../../../hooks/use-page-destinations.js";
-import { PlatformLabel } from "../../../components/PlatformLabel.js";
+import { useViewLocale } from "../../../lib/view-locale-context.js";
+import { Link as Link$1, useNavigate } from "../../navigation/navigation.js";
 import { cn } from "../../../lib/utils.js";
-import { STUDIO_CONTENT_PATH } from "../routes.js";
+import { usePageDestinations } from "../../../hooks/use-page-destinations.js";
+import { useLocalePath, useLocalizedPath } from "../../../lib/view-locale.js";
+import { STUDIO_BASE_PATH, STUDIO_CONTENT_PATH } from "../routes.js";
 import { studioStore } from "../studioStore.js";
-import { EnvironmentMenu } from "./EnvironmentMenu.js";
-import { ProjectMenu } from "./ProjectMenu.js";
 import { UserButton } from "./UserButton.js";
+import { DraftPicker, PendingChanges } from "./DraftsControl.js";
+import { LocalePicker } from "./LocalePicker.js";
+import { ProjectMenu } from "./ProjectMenu.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
+import { useSelector } from "@xstate/store-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Kbd } from "@camox/ui/kbd";
-import { Button } from "@camox/ui/button";
-import { Database, Globe, SearchIcon } from "lucide-react";
+import { buttonVariants } from "@camox/ui/button";
+import { Database, Globe } from "lucide-react";
 
 //#region src/features/studio/components/Navbar.tsx
 const links = [{
 	to: "/",
-	title: "Preview",
-	children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Globe, { className: "h-4 w-4" }), "Preview"] }),
+	title: "Website",
+	children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Globe, {}), "Website"] }),
 	icon: "Globe",
-	aliases: ["Preview", "Website"]
+	aliases: ["Website"]
 }, {
 	to: STUDIO_CONTENT_PATH,
 	title: "Content",
-	children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Database, { className: "h-4 w-4" }), "Content"] }),
+	children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Database, {}), "Content"] }),
 	icon: "FileText",
 	aliases: [
 		"Content",
@@ -33,114 +35,126 @@ const links = [{
 		"CMS"
 	]
 }];
+const getNavbarLinks = () => links;
+/**
+* Where a navbar link goes. The Website goes back where it was last, Canvas included. In another
+* locale since, a Studio location stays, while a page, whose path may differ there, goes home.
+*/
+function navbarHref(link, last, locale, localized) {
+	if (link !== links[0] || !last) return localized(link.to);
+	if (last.locale === locale) return `${localized(last.path)}${last.search}${last.hash}`;
+	if (last.path.startsWith(`${"/camox"}/`)) return localized(last.path);
+	return localized(link.to);
+}
+const isContentNavbarPath = (pathname) => pathname === "/camox/content" || pathname.startsWith(`${"/camox/content"}/`);
 const Navbar = (t0) => {
-	const $ = c(13);
-	if ($[0] !== "9182f23e40dc6d439cec2c533b4f9436ee59f885213d6d7a79d434c7aa8349c6") {
-		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "9182f23e40dc6d439cec2c533b4f9436ee59f885213d6d7a79d434c7aa8349c6";
-	}
-	const { isPreview: t1 } = t0;
-	const isPreview = t1 === void 0 ? false : t1;
+	const $ = c(19);
+	const { isWebsite: t1, recordPage } = t0;
+	const isWebsite = t1 === void 0 ? false : t1;
 	const pages = usePageDestinations();
-	const { pathname } = useLocation();
+	const pathname = useLocalePath();
+	const localized = useLocalizedPath();
+	const { locale } = useViewLocale();
+	const last = useSelector(studioStore, _temp);
 	let t2;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsxs("div", {
-			className: "flew-row flex gap-1",
-			children: [/* @__PURE__ */ jsx(ProjectMenu, {}), /* @__PURE__ */ jsx(EnvironmentMenu, {})]
-		});
-		$[1] = t2;
-	} else t2 = $[1];
 	let t3;
-	if ($[2] !== isPreview || $[3] !== pages || $[4] !== pathname) {
-		t3 = links.map((link, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link$1, {
-			to: link.to,
-			className: cn("flex gap-2 items-center rounded-md px-4 py-2 text-sm font-medium", "hover:bg-accent hover:text-accent-foreground outline-none transition-[color,box-shadow] focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-1", (isPreview || pages?.some((page) => page.fullPath === pathname)) && index === 0 ? "bg-accent hover:bg-accent text-accent-foreground" : "text-muted-foreground"),
-			activeProps: { className: "bg-accent hover:bg-accent text-accent-foreground!" },
-			children: link.children
-		}) }, link.to));
-		$[2] = isPreview;
-		$[3] = pages;
-		$[4] = pathname;
-		$[5] = t3;
-	} else t3 = $[5];
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(ProjectMenu, {});
+		t3 = /* @__PURE__ */ jsx(DraftPicker, {});
+		$[0] = t2;
+		$[1] = t3;
+	} else {
+		t2 = $[0];
+		t3 = $[1];
+	}
 	let t4;
-	if ($[6] !== t3) {
+	if ($[2] !== recordPage) {
 		t4 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-row gap-2",
-			children: [t2, /* @__PURE__ */ jsx("ul", {
-				className: "flex items-center gap-1",
-				children: t3
-			})]
+			className: "flex items-center gap-1",
+			children: [
+				t2,
+				t3,
+				/* @__PURE__ */ jsx(LocalePicker, { recordPage })
+			]
 		});
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
+		$[2] = recordPage;
+		$[3] = t4;
+	} else t4 = $[3];
 	let t5;
+	if ($[4] !== isWebsite || $[5] !== last || $[6] !== locale || $[7] !== localized || $[8] !== pages || $[9] !== pathname) {
+		t5 = getNavbarLinks().map((link, index) => {
+			const isWebsiteActive = index === 0 && (isWebsite || pages?.some((page) => page.fullPath === pathname));
+			const isContentActive = link.to === "/camox/content" && isContentNavbarPath(pathname);
+			return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link$1, {
+				to: navbarHref(link, last, locale.tag, localized),
+				className: cn(buttonVariants({ variant: "ghost" }), isWebsiteActive || isContentActive ? "bg-muted text-foreground dark:bg-muted/50" : "text-muted-foreground hover:text-muted-foreground"),
+				activeProps: { className: "bg-muted text-foreground! dark:bg-muted/50" },
+				children: link.children
+			}) }, link.to);
+		});
+		$[4] = isWebsite;
+		$[5] = last;
+		$[6] = locale;
+		$[7] = localized;
+		$[8] = pages;
+		$[9] = pathname;
+		$[10] = t5;
+	} else t5 = $[10];
 	let t6;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground size-4" });
-		t6 = /* @__PURE__ */ jsx("span", {
-			className: "text-muted-foreground",
-			children: "Quick find"
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx("ul", {
+			className: "flex items-center gap-1",
+			children: t5
 		});
-		$[8] = t5;
-		$[9] = t6;
-	} else {
-		t5 = $[8];
-		t6 = $[9];
-	}
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
 	let t7;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[13] !== t4 || $[14] !== t6) {
 		t7 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsxs(Button, {
-				variant: "outline",
-				onClick: _temp,
-				children: [
-					t5,
-					t6,
-					/* @__PURE__ */ jsx(Kbd, {
-						className: "ml-4",
-						children: /* @__PURE__ */ jsx(PlatformLabel, {
-							mac: "⌘ K",
-							other: "Ctrl K"
-						})
-					})
-				]
-			}), /* @__PURE__ */ jsx(UserButton, {})]
+			className: "flex flex-row gap-2",
+			children: [t4, t6]
 		});
-		$[10] = t7;
-	} else t7 = $[10];
+		$[13] = t4;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
 	let t8;
-	if ($[11] !== t4) {
-		t8 = /* @__PURE__ */ jsxs("nav", {
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(PendingChanges, {}), /* @__PURE__ */ jsx(UserButton, {})]
+		});
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t7) {
+		t9 = /* @__PURE__ */ jsxs("nav", {
 			className: "bg-background relative flex items-center justify-between gap-4 border-b-2 px-2 py-2",
-			children: [t4, t7]
+			children: [t7, t8]
 		});
-		$[11] = t4;
-		$[12] = t8;
-	} else t8 = $[12];
-	return t8;
+		$[17] = t7;
+		$[18] = t9;
+	} else t9 = $[18];
+	return t9;
 };
 function useNavbarActions() {
-	const $ = c(4);
-	if ($[0] !== "9182f23e40dc6d439cec2c533b4f9436ee59f885213d6d7a79d434c7aa8349c6") {
-		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "9182f23e40dc6d439cec2c533b4f9436ee59f885213d6d7a79d434c7aa8349c6";
-	}
+	const $ = c(5);
 	const navigate = useNavigate();
+	const localized = useLocalizedPath();
+	const { locale } = useViewLocale();
 	let t0;
 	let t1;
-	if ($[1] !== navigate) {
+	if ($[0] !== locale.tag || $[1] !== localized || $[2] !== navigate) {
 		t0 = () => {
-			const actions = links.map((link, index) => ({
+			const actions = getNavbarLinks().map((link, index) => ({
 				id: `navigate-to-${link.to}`,
 				label: `Go to ${link.title}`,
 				groupLabel: "Navigation",
 				checkIfAvailable: _temp2,
 				execute: () => {
-					navigate({ to: link.to });
+					const last = studioStore.getSnapshot().context.websiteLocation;
+					navigate({ to: navbarHref(link, last, locale.tag, localized) });
 				},
 				shortcut: { key: String(index + 1) },
 				icon: link.icon,
@@ -157,13 +171,19 @@ function useNavbarActions() {
 				});
 			};
 		};
-		t1 = [navigate];
-		$[1] = navigate;
-		$[2] = t0;
-		$[3] = t1;
+		t1 = [
+			locale.tag,
+			localized,
+			navigate
+		];
+		$[0] = locale.tag;
+		$[1] = localized;
+		$[2] = navigate;
+		$[3] = t0;
+		$[4] = t1;
 	} else {
-		t0 = $[2];
-		t1 = $[3];
+		t0 = $[3];
+		t1 = $[4];
 	}
 	React.useEffect(t0, t1);
 }
@@ -173,9 +193,9 @@ function _temp3(a) {
 function _temp2() {
 	return true;
 }
-function _temp() {
-	return studioStore.send({ type: "openCommandPalette" });
+function _temp(state) {
+	return state.context.websiteLocation;
 }
 
 //#endregion
-export { Navbar, useNavbarActions };
+export { Navbar, getNavbarLinks, isContentNavbarPath, useNavbarActions };