camox 0.44.0 → 0.45.0

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

@@ -1,332 +1,311 @@
-import { Link as Link$1 } from "../../navigation/navigation.js";
 import { AuthContext } from "../../../lib/auth.js";
-import { projectQueries } from "../../../lib/queries.js";
+import { getApiUrl } from "../../../lib/api-client.js";
+import { Link as Link$1 } from "../../navigation/navigation.js";
+import { reads, useReadQuery } from "../../../lib/studio-reads.js";
+import { buildFaviconUrl } from "../../routes/pageRuntime.js";
+import { version } from "../../../package.js";
+import { FaviconDialog } from "./FaviconDialog.js";
 import { c } from "react/compiler-runtime";
-import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
-import { ChevronDown, Globe, Info, Settings, Users } from "lucide-react";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
+import { ChevronDown, ImageIcon, Info, Settings, Users } from "lucide-react";
 import { Skeleton } from "@camox/ui/skeleton";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@camox/ui/dropdown-menu";
 
 //#region src/features/studio/components/ProjectMenu.tsx
 const Favicon = (t0) => {
-	const $ = c(19);
-	if ($[0] !== "da1b045f11b7e5155c87b753677133884f53ac964944786d14b5c4f7155ce7f7") {
-		for (let $i = 0; $i < 19; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "da1b045f11b7e5155c87b753677133884f53ac964944786d14b5c4f7155ce7f7";
-	}
-	const { size: t1 } = t0;
+	const $ = c(7);
+	const { project, size: t1 } = t0;
 	const size = t1 === void 0 ? 16 : t1;
-	const [faviconUrl, setFaviconUrl] = React.useState(null);
-	const [hasError, setHasError] = React.useState(false);
 	let t2;
-	let t3;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = () => {
-			setFaviconUrl(_temp());
-		};
-		t3 = [];
+	if ($[0] !== project) {
+		t2 = buildFaviconUrl(getApiUrl(), project);
+		$[0] = project;
 		$[1] = t2;
-		$[2] = t3;
-	} else {
-		t2 = $[1];
-		t3 = $[2];
-	}
-	React.useEffect(t2, t3);
-	if (!faviconUrl || hasError) {
-		let t4;
-		if ($[3] !== size) {
-			t4 = {
-				height: size,
-				width: size
-			};
-			$[3] = size;
-			$[4] = t4;
-		} else t4 = $[4];
-		const t5 = size * .6;
-		const t6 = size * .6;
-		let t7;
-		if ($[5] !== t5 || $[6] !== t6) {
-			t7 = /* @__PURE__ */ jsx(Globe, {
-				className: "text-muted-foreground",
-				style: {
-					height: t5,
-					width: t6
-				}
-			});
-			$[5] = t5;
-			$[6] = t6;
-			$[7] = t7;
-		} else t7 = $[7];
-		let t8;
-		if ($[8] !== t4 || $[9] !== t7) {
-			t8 = /* @__PURE__ */ jsx("div", {
-				className: "bg-muted flex items-center justify-center rounded-full",
-				style: t4,
-				children: t7
-			});
-			$[8] = t4;
-			$[9] = t7;
-			$[10] = t8;
-		} else t8 = $[10];
-		return t8;
-	}
-	let t4;
-	if ($[11] !== size) {
-		t4 = {
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== size) {
+		t3 = {
 			height: size,
 			width: size
 		};
-		$[11] = size;
-		$[12] = t4;
-	} else t4 = $[12];
-	let t5;
-	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = () => setHasError(true);
-		$[13] = t5;
-	} else t5 = $[13];
-	let t6;
-	if ($[14] !== faviconUrl) {
-		t6 = /* @__PURE__ */ jsx("img", {
-			src: faviconUrl,
-			alt: "Favicon",
-			className: "h-full w-full object-cover",
-			onError: t5
-		});
-		$[14] = faviconUrl;
-		$[15] = t6;
-	} else t6 = $[15];
-	let t7;
-	if ($[16] !== t4 || $[17] !== t6) {
-		t7 = /* @__PURE__ */ jsx("div", {
-			className: "bg-muted flex items-center justify-center overflow-hidden rounded-full",
-			style: t4,
-			children: t6
+		$[2] = size;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== t2 || $[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx("img", {
+			src: t2,
+			alt: "",
+			className: "shrink-0 object-contain",
+			style: t3
 		});
-		$[16] = t4;
-		$[17] = t6;
-		$[18] = t7;
-	} else t7 = $[18];
-	return t7;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
 };
 const ProjectMenu = () => {
-	const $ = c(41);
-	if ($[0] !== "da1b045f11b7e5155c87b753677133884f53ac964944786d14b5c4f7155ce7f7") {
-		for (let $i = 0; $i < 41; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "da1b045f11b7e5155c87b753677133884f53ac964944786d14b5c4f7155ce7f7";
-	}
+	const $ = c(53);
 	const authCtx = React.useContext(AuthContext);
 	let t0;
-	if ($[1] !== authCtx.projectSlug) {
-		t0 = projectQueries.getBySlug(authCtx.projectSlug);
-		$[1] = authCtx.projectSlug;
-		$[2] = t0;
-	} else t0 = $[2];
-	const { data: project } = useQuery(t0);
+	if ($[0] !== authCtx.projectUuid) {
+		t0 = reads.project({ projectUuid: authCtx.projectUuid });
+		$[0] = authCtx.projectUuid;
+		$[1] = t0;
+	} else t0 = $[1];
+	const { data: project } = useReadQuery(t0);
+	const [isFaviconDialogOpen, setIsFaviconDialogOpen] = React.useState(false);
 	if (!project) {
 		let t1;
-		if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
 			t1 = /* @__PURE__ */ jsxs("div", {
 				className: "flex h-9 min-w-[150px] items-center gap-2 px-4",
 				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-full" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 flex-1" })]
 			});
-			$[3] = t1;
-		} else t1 = $[3];
+			$[2] = t1;
+		} else t1 = $[2];
 		return t1;
 	}
 	let t1;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = /* @__PURE__ */ jsx(Button, { variant: "ghost" });
-		$[4] = t1;
-	} else t1 = $[4];
+		$[3] = t1;
+	} else t1 = $[3];
 	let t2;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Favicon, { size: 16 });
+	if ($[4] !== project) {
+		t2 = /* @__PURE__ */ jsx(Favicon, {
+			project,
+			size: 16
+		});
+		$[4] = project;
 		$[5] = t2;
 	} else t2 = $[5];
 	let t3;
 	if ($[6] !== project.name) {
-		t3 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [t2, /* @__PURE__ */ jsx("span", {
-				className: "select-none",
-				children: project.name
-			})]
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: "select-none",
+			children: project.name
 		});
 		$[6] = project.name;
 		$[7] = t3;
 	} else t3 = $[7];
 	let t4;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(ChevronDown, { className: "shrink-0 opacity-50" });
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== t3) {
-		t5 = /* @__PURE__ */ jsxs(DropdownMenuTrigger, {
-			render: t1,
-			children: [t3, t4]
+	if ($[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t2, t3]
 		});
+		$[8] = t2;
 		$[9] = t3;
-		$[10] = t5;
-	} else t5 = $[10];
-	const t6 = authCtx ? `${authCtx.authenticationUrl}/${project.organizationSlug}/${project.slug}/overview` : "#";
-	let t7;
-	if ($[11] !== t6) {
-		t7 = /* @__PURE__ */ jsx("a", {
-			href: t6,
-			target: "_blank",
-			rel: "noopener noreferrer"
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ChevronDown, { className: "shrink-0 opacity-50" });
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t4) {
+		t6 = /* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			render: t1,
+			children: [t4, t5]
 		});
-		$[11] = t6;
-		$[12] = t7;
-	} else t7 = $[12];
+		$[12] = t4;
+		$[13] = t6;
+	} else t6 = $[13];
+	const t7 = authCtx ? `${authCtx.authenticationUrl}/${project.organizationSlug}/${project.slug}/overview` : "#";
 	let t8;
-	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx(Settings, {});
-		$[13] = t8;
-	} else t8 = $[13];
-	let t9;
 	if ($[14] !== t7) {
-		t9 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
-			render: t7,
-			children: [t8, "Project settings"]
+		t8 = /* @__PURE__ */ jsx("a", {
+			href: t7,
+			target: "_blank",
+			rel: "noopener noreferrer"
 		});
 		$[14] = t7;
-		$[15] = t9;
-	} else t9 = $[15];
-	let t10;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
 	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
-		$[16] = t10;
-	} else t10 = $[16];
+		t9 = /* @__PURE__ */ jsx(Settings, {});
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t8) {
+		t10 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			render: t8,
+			children: [t9, "Project settings"]
+		});
+		$[17] = t8;
+		$[18] = t10;
+	} else t10 = $[18];
 	let t11;
-	if ($[17] !== project.organizationSlug) {
-		t11 = /* @__PURE__ */ jsx(DropdownMenuLabel, {
+	let t12;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onClick: () => setIsFaviconDialogOpen(true),
+			children: [/* @__PURE__ */ jsx(ImageIcon, {}), "Set favicon…"]
+		});
+		t12 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
+		$[19] = t11;
+		$[20] = t12;
+	} else {
+		t11 = $[19];
+		t12 = $[20];
+	}
+	let t13;
+	if ($[21] !== project.organizationSlug) {
+		t13 = /* @__PURE__ */ jsx(DropdownMenuLabel, {
 			className: "text-muted-foreground text-xs font-normal",
 			children: project.organizationSlug
 		});
-		$[17] = project.organizationSlug;
-		$[18] = t11;
-	} else t11 = $[18];
-	const t12 = authCtx ? `${authCtx.authenticationUrl}/${project.organizationSlug}/team` : "#";
-	let t13;
-	if ($[19] !== t12) {
-		t13 = /* @__PURE__ */ jsx("a", {
-			href: t12,
+		$[21] = project.organizationSlug;
+		$[22] = t13;
+	} else t13 = $[22];
+	const t14 = authCtx ? `${authCtx.authenticationUrl}/${project.organizationSlug}/members` : "#";
+	let t15;
+	if ($[23] !== t14) {
+		t15 = /* @__PURE__ */ jsx("a", {
+			href: t14,
 			target: "_blank",
 			rel: "noopener noreferrer"
 		});
-		$[19] = t12;
-		$[20] = t13;
-	} else t13 = $[20];
-	let t14;
-	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = /* @__PURE__ */ jsx(Users, {});
-		$[21] = t14;
-	} else t14 = $[21];
-	let t15;
-	if ($[22] !== t13) {
-		t15 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
-			render: t13,
-			children: [t14, "Team members"]
-		});
-		$[22] = t13;
-		$[23] = t15;
-	} else t15 = $[23];
-	const t16 = authCtx ? `${authCtx.authenticationUrl}/${project.organizationSlug}/settings` : "#";
+		$[23] = t14;
+		$[24] = t15;
+	} else t15 = $[24];
+	let t16;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(Users, {});
+		$[25] = t16;
+	} else t16 = $[25];
 	let t17;
-	if ($[24] !== t16) {
-		t17 = /* @__PURE__ */ jsx("a", {
-			href: t16,
-			target: "_blank",
-			rel: "noopener noreferrer"
+	if ($[26] !== t15) {
+		t17 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			render: t15,
+			children: [t16, "Team members"]
 		});
-		$[24] = t16;
-		$[25] = t17;
-	} else t17 = $[25];
-	let t18;
-	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-		t18 = /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" });
-		$[26] = t18;
-	} else t18 = $[26];
+		$[26] = t15;
+		$[27] = t17;
+	} else t17 = $[27];
+	const t18 = authCtx ? `${authCtx.authenticationUrl}/${project.organizationSlug}/settings` : "#";
 	let t19;
-	if ($[27] !== t17) {
-		t19 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
-			render: t17,
-			children: [t18, "Team settings"]
+	if ($[28] !== t18) {
+		t19 = /* @__PURE__ */ jsx("a", {
+			href: t18,
+			target: "_blank",
+			rel: "noopener noreferrer"
 		});
-		$[27] = t17;
-		$[28] = t19;
-	} else t19 = $[28];
+		$[28] = t18;
+		$[29] = t19;
+	} else t19 = $[29];
 	let t20;
-	if ($[29] !== t11 || $[30] !== t15 || $[31] !== t19) {
-		t20 = /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
-			t11,
-			t15,
-			t19
-		] });
-		$[29] = t11;
-		$[30] = t15;
-		$[31] = t19;
-		$[32] = t20;
-	} else t20 = $[32];
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" });
+		$[30] = t20;
+	} else t20 = $[30];
 	let t21;
-	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-		t21 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
-		$[33] = t21;
-	} else t21 = $[33];
-	let t22;
-	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-		t22 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
-			render: /* @__PURE__ */ jsx(Link$1, {
-				to: "https://camox.dev",
-				target: "_blank"
-			}),
-			children: [/* @__PURE__ */ jsx(Info, { className: "h-4 w-4" }), "Powered by Camox"]
+	if ($[31] !== t19) {
+		t21 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			render: t19,
+			children: [t20, "Team settings"]
 		});
-		$[34] = t22;
-	} else t22 = $[34];
+		$[31] = t19;
+		$[32] = t21;
+	} else t21 = $[32];
+	let t22;
+	if ($[33] !== t13 || $[34] !== t17 || $[35] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+			t13,
+			t17,
+			t21
+		] });
+		$[33] = t13;
+		$[34] = t17;
+		$[35] = t21;
+		$[36] = t22;
+	} else t22 = $[36];
 	let t23;
-	if ($[35] !== t20 || $[36] !== t9) {
-		t23 = /* @__PURE__ */ jsxs(DropdownMenuContent, {
+	if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = /* @__PURE__ */ jsx(DropdownMenuSeparator, {});
+		$[37] = t23;
+	} else t23 = $[37];
+	let t24;
+	let t25;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t24 = /* @__PURE__ */ jsx(Link$1, {
+			to: "https://camox.dev",
+			target: "_blank"
+		});
+		t25 = /* @__PURE__ */ jsx(Info, { className: "h-4 w-4" });
+		$[38] = t24;
+		$[39] = t25;
+	} else {
+		t24 = $[38];
+		t25 = $[39];
+	}
+	let t26;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t26 = /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			render: t24,
+			children: [
+				t25,
+				"Powered by Camox",
+				/* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground ml-auto",
+					children: ["v", version]
+				})
+			]
+		});
+		$[40] = t26;
+	} else t26 = $[40];
+	let t27;
+	if ($[41] !== t10 || $[42] !== t22) {
+		t27 = /* @__PURE__ */ jsxs(DropdownMenuContent, {
 			className: "w-72",
 			align: "start",
 			side: "bottom",
 			children: [
-				t9,
 				t10,
-				t20,
-				t21,
-				t22
+				t11,
+				t12,
+				t22,
+				t23,
+				t26
 			]
 		});
-		$[35] = t20;
-		$[36] = t9;
-		$[37] = t23;
-	} else t23 = $[37];
-	let t24;
-	if ($[38] !== t23 || $[39] !== t5) {
-		t24 = /* @__PURE__ */ jsxs(DropdownMenu, { children: [t5, t23] });
-		$[38] = t23;
-		$[39] = t5;
-		$[40] = t24;
-	} else t24 = $[40];
-	return t24;
+		$[41] = t10;
+		$[42] = t22;
+		$[43] = t27;
+	} else t27 = $[43];
+	let t28;
+	if ($[44] !== t27 || $[45] !== t6) {
+		t28 = /* @__PURE__ */ jsxs(DropdownMenu, { children: [t6, t27] });
+		$[44] = t27;
+		$[45] = t6;
+		$[46] = t28;
+	} else t28 = $[46];
+	let t29;
+	if ($[47] !== isFaviconDialogOpen || $[48] !== project) {
+		t29 = /* @__PURE__ */ jsx(FaviconDialog, {
+			project,
+			open: isFaviconDialogOpen,
+			onOpenChange: setIsFaviconDialogOpen
+		});
+		$[47] = isFaviconDialogOpen;
+		$[48] = project;
+		$[49] = t29;
+	} else t29 = $[49];
+	let t30;
+	if ($[50] !== t28 || $[51] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(Fragment, { children: [t28, t29] });
+		$[50] = t28;
+		$[51] = t29;
+		$[52] = t30;
+	} else t30 = $[52];
+	return t30;
 };
-function _temp() {
-	for (const selector of [
-		"link[rel=\"icon\"]",
-		"link[rel=\"shortcut icon\"]",
-		"link[rel=\"apple-touch-icon\"]"
-	]) {
-		const link = document.querySelector(selector);
-		if (link?.href) return link.href;
-	}
-	return null;
-}
 
 //#endregion
-export { ProjectMenu };
+export { Favicon, ProjectMenu };