@questpie/admin 3.0.3 → 3.0.5

package/dist/client/views/collection/view-skeletons.mjs

@@ -1,6 +1,8 @@
 import { Skeleton } from "../../components/ui/skeleton.mjs";
+import { AdminViewHeader, AdminViewLayout } from "../layout/admin-view-layout.mjs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table.mjs";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/views/collection/view-skeletons.tsx
 /**
@@ -9,49 +11,150 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * Loading skeletons for collection views (table, form).
 * Used with Suspense boundaries to show loading state.
 */
-function TableSkeletonRow(t0) {
-	const $ = c(7);
-	const { isLast: t1 } = t0;
-	const t2 = `flex items-center gap-4 p-4 ${(t1 === void 0 ? false : t1) ? "" : "border-b"}`;
-	let t3;
-	let t4;
-	let t5;
-	let t6;
-	let t7;
+const TABLE_SKELETON_COLUMNS = [
+	{
+		width: 40,
+		header: "mx-auto h-4 w-4",
+		cells: ["mx-auto h-4 w-4"]
+	},
+	{
+		width: 360,
+		header: "h-4 w-28",
+		cells: [
+			"h-4 w-52",
+			"h-4 w-44",
+			"h-4 w-56",
+			"h-4 w-40"
+		]
+	},
+	{
+		width: 160,
+		header: "h-4 w-20",
+		cells: [
+			"h-4 w-24",
+			"h-4 w-20",
+			"h-4 w-28",
+			"h-4 w-16"
+		]
+	},
+	{
+		width: 140,
+		header: "h-4 w-24",
+		cells: [
+			"h-4 w-20",
+			"h-4 w-24",
+			"h-4 w-16",
+			"h-4 w-28"
+		]
+	},
+	{
+		width: 96,
+		header: "ml-auto h-4 w-16",
+		cells: [
+			"ml-auto h-4 w-14",
+			"ml-auto h-4 w-16",
+			"ml-auto h-4 w-12"
+		]
+	}
+];
+function getColumnSizeStyle(width) {
+	return {
+		width,
+		minWidth: width,
+		maxWidth: width
+	};
+}
+function getSkeletonWidth(widths, rowIndex) {
+	return widths[rowIndex % widths.length] ?? widths[0] ?? "h-4 w-20";
+}
+function TableSkeletonRows(t0) {
+	const $ = c(2);
+	const { rows: t1 } = t0;
+	const rows = t1 === void 0 ? 8 : t1;
+	let t2;
+	if ($[0] !== rows) {
+		t2 = /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }, _temp) });
+		$[0] = rows;
+		$[1] = t2;
+	} else t2 = $[1];
+	return t2;
+}
+function _temp(_, rowIndex) {
+	return /* @__PURE__ */ jsx(TableRow, {
+		className: "hover:bg-transparent",
+		children: TABLE_SKELETON_COLUMNS.map((column, columnIndex) => {
+			return /* @__PURE__ */ jsx(TableCell, {
+				stickyLeft: columnIndex === 0 ? 0 : columnIndex === 1 ? 40 : void 0,
+				showStickyBorder: columnIndex === 1,
+				className: columnIndex === 0 ? "w-9 min-w-9 px-1.5" : "",
+				style: getColumnSizeStyle(column.width),
+				children: /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					className: getSkeletonWidth(column.cells, rowIndex)
+				})
+			}, columnIndex);
+		})
+	}, rowIndex);
+}
+function TableSkeletonShell() {
+	const $ = c(5);
+	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4" });
-		t4 = /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" });
-		t5 = /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-20" });
-		t6 = /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" });
-		t7 = /* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-4 w-16" });
-		$[0] = t3;
-		$[1] = t4;
-		$[2] = t5;
-		$[3] = t6;
-		$[4] = t7;
+		t0 = TABLE_SKELETON_COLUMNS.reduce(_temp2, 0);
+		$[0] = t0;
+	} else t0 = $[0];
+	const width = t0;
+	let t1;
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { width };
+		t2 = /* @__PURE__ */ jsx("colgroup", { children: TABLE_SKELETON_COLUMNS.map(_temp3) });
+		$[1] = t1;
+		$[2] = t2;
 	} else {
-		t3 = $[0];
-		t4 = $[1];
-		t5 = $[2];
-		t6 = $[3];
-		t7 = $[4];
+		t1 = $[1];
+		t2 = $[2];
 	}
-	let t8;
-	if ($[5] !== t2) {
-		t8 = /* @__PURE__ */ jsxs("div", {
-			className: t2,
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, {
+			className: "hover:bg-transparent",
+			children: TABLE_SKELETON_COLUMNS.map(_temp4)
+		}) });
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs(Table, {
+			className: "table-fixed",
+			style: t1,
 			children: [
+				t2,
 				t3,
-				t4,
-				t5,
-				t6,
-				t7
+				/* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableSkeletonRows, {}) })
 			]
 		});
-		$[5] = t2;
-		$[6] = t8;
-	} else t8 = $[6];
-	return t8;
+		$[4] = t4;
+	} else t4 = $[4];
+	return t4;
+}
+function _temp4(column_1, index_0) {
+	return /* @__PURE__ */ jsx(TableHead, {
+		stickyLeft: index_0 === 0 ? 0 : index_0 === 1 ? 40 : void 0,
+		showStickyBorder: index_0 === 1,
+		className: index_0 === 0 ? "w-9 min-w-9 px-1.5" : "",
+		style: getColumnSizeStyle(column_1.width),
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			className: column_1.header
+		})
+	}, index_0);
+}
+function _temp3(column_0, index) {
+	return /* @__PURE__ */ jsx("col", { style: { width: column_0.width } }, index);
+}
+function _temp2(total, column) {
+	return total + column.width;
 }
 function FormFieldSkeleton() {
 	const $ = c(1);
@@ -59,7 +162,10 @@ function FormFieldSkeleton() {
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t0 = /* @__PURE__ */ jsxs("div", {
 			className: "space-y-2",
-			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })]
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-4 w-24"
+			}), /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })]
 		});
 		$[0] = t0;
 	} else t0 = $[0];
@@ -71,65 +177,93 @@ function FormFieldSkeleton() {
 * Shows a loading state that mimics the table layout.
 */
 function TableViewSkeleton() {
-	const $ = c(3);
+	const $ = c(6);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "space-y-1",
-				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-64" })]
-			}), /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-32" })]
+		t0 = /* @__PURE__ */ jsx(AdminViewHeader, {
+			title: /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-7 w-44"
+			}),
+			description: /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-4 w-64 max-w-full"
+			}),
+			actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-24" })
+			] })
 		});
 		$[0] = t0;
 	} else t0 = $[0];
 	let t1;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [
-				/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-64" }),
-				/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" }),
-				/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" })
-			]
+		t1 = /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Loading table view"
 		});
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ jsx("div", {
-			className: "qa-table-view-skeleton container",
+			className: "qa-table-view__table-wrapper min-w-0",
+			children: /* @__PURE__ */ jsx(TableSkeletonShell, {})
+		});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			className: "h-4 w-20"
+		});
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-4",
+			children: [t3, /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					className: "h-4 w-10"
+				}), /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-[70px]" })]
+			})]
+		});
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(AdminViewLayout, {
+			header: t0,
+			contentClassName: "overflow-y-auto pb-3",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "space-y-4",
+				className: "qa-table-view qa-table-view-skeleton min-w-0 space-y-4",
+				"aria-busy": "true",
 				children: [
-					t0,
 					t1,
+					t2,
 					/* @__PURE__ */ jsxs("div", {
-						className: "border",
-						children: [
-							/* @__PURE__ */ jsxs("div", {
-								className: "bg-muted flex items-center gap-4 border-b p-4",
-								children: [
-									/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4" }),
-									/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
-									/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
-									/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" }),
-									/* @__PURE__ */ jsx(Skeleton, { className: "ml-auto h-4 w-20" })
-								]
-							}),
-							/* @__PURE__ */ jsx(TableSkeletonRow, {}),
-							/* @__PURE__ */ jsx(TableSkeletonRow, {}),
-							/* @__PURE__ */ jsx(TableSkeletonRow, {}),
-							/* @__PURE__ */ jsx(TableSkeletonRow, {}),
-							/* @__PURE__ */ jsx(TableSkeletonRow, { isLast: true })
-						]
+						className: "qa-table-view__pagination flex items-center justify-between gap-4 py-2",
+						children: [t4, /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
+								/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
+								/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }),
+								/* @__PURE__ */ jsx(Skeleton, { className: "size-8" })
+							]
+						})]
 					})
 				]
 			})
 		});
-		$[2] = t2;
-	} else t2 = $[2];
-	return t2;
+		$[5] = t5;
+	} else t5 = $[5];
+	return t5;
 }
 /**
 * Skeleton for FormView
@@ -140,7 +274,10 @@ function FormViewSkeleton() {
 	const $ = c(8);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8" });
+		t0 = /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			className: "h-8 w-8"
+		});
 		$[0] = t0;
 	} else t0 = $[0];
 	let t1;
@@ -150,7 +287,10 @@ function FormViewSkeleton() {
 			children: [
 				t0,
 				" ",
-				/* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-48" })
+				/* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					className: "h-8 w-48"
+				})
 			]
 		});
 		$[1] = t1;
@@ -200,7 +340,10 @@ function FormViewSkeleton() {
 						t6,
 						/* @__PURE__ */ jsxs("div", {
 							className: "space-y-2",
-							children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" })]
+							children: [/* @__PURE__ */ jsx(Skeleton, {
+								variant: "text",
+								className: "h-4 w-32"
+							}), /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" })]
 						})
 					]
 				})]

package/dist/client/views/common/global-search.mjs

@@ -3,6 +3,7 @@ import { cn } from "../../lib/utils.mjs";
 import { selectBasePath, useAdminStore } from "../../runtime/provider.mjs";
 import { resolveIconElement } from "../../components/component-renderer.mjs";
 import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../../components/ui/input-group.mjs";
 import { ResponsiveDialog, ResponsiveDialogContent } from "../../components/ui/responsive-dialog.mjs";
 import { Kbd } from "../../components/ui/kbd.mjs";
 import { useDebouncedValue, useGlobalSearch } from "../../hooks/use-search.mjs";
@@ -53,7 +54,7 @@ function highlightText(text, query) {
 	if (parts.length === 1) return text;
 	return parts.map((part, i) => i % 2 === 1 ? React.createElement("mark", {
 		key: i,
-		className: "bg-yellow-200/50"
+		className: "bg-accent text-accent-foreground rounded-xs px-0.5"
 	}, part) : part);
 }
 /**
@@ -90,7 +91,7 @@ const SearchGroup = React.memo(function SearchGroup$1(t0) {
 	let t3;
 	if ($[3] !== t2) {
 		t3 = /* @__PURE__ */ jsx("h3", {
-			className: "text-muted-foreground mb-2 px-2 font-mono text-[10px] font-black tracking-[0.2em] uppercase",
+			className: "qa-global-search__group-title text-muted-foreground font-chrome chrome-meta mb-2 px-2.5 text-xs font-medium",
 			children: t2
 		});
 		$[3] = t2;
@@ -102,11 +103,13 @@ const SearchGroup = React.memo(function SearchGroup$1(t0) {
 		if ($[13] !== onHover || $[14] !== onSelect || $[15] !== query || $[16] !== resolveText || $[17] !== selectedIndex || $[18] !== startIndex) {
 			t5$1 = (item, idx) => {
 				const globalIndex = startIndex + idx;
+				const isSelected = globalIndex === selectedIndex;
 				return /* @__PURE__ */ jsxs("button", {
 					type: "button",
 					onClick: () => onSelect(item),
 					onMouseEnter: () => onHover(globalIndex),
-					className: cn("flex w-full items-center gap-3 px-3 py-2.5 text-sm transition-colors outline-none", globalIndex === selectedIndex ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"),
+					"data-selected": isSelected,
+					className: cn("item-surface flex w-full items-center gap-3 border-transparent px-3 py-2.5 text-sm transition-colors outline-none", isSelected ? "border-border bg-accent text-accent-foreground" : "hover:border-border hover:bg-accent hover:text-accent-foreground"),
 					children: [item.icon && /* @__PURE__ */ jsx("span", {
 						className: "text-muted-foreground flex h-4 w-4 shrink-0 items-center justify-center",
 						children: resolveIconElement(item.icon, { className: "h-4 w-4" })
@@ -450,9 +453,13 @@ function GlobalSearch(t0) {
 	} else t16 = $[55];
 	let t17;
 	if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = /* @__PURE__ */ jsx(Icon, {
-			icon: "ph:magnifying-glass",
-			className: "text-muted-foreground mr-2 h-5 w-5 shrink-0"
+		t17 = /* @__PURE__ */ jsx(InputGroupAddon, {
+			align: "inline-start",
+			className: "pl-0",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:magnifying-glass",
+				className: "size-5"
+			})
 		});
 		$[56] = t17;
 	} else t17 = $[56];
@@ -472,9 +479,9 @@ function GlobalSearch(t0) {
 	} else t19 = $[59];
 	let t20;
 	if ($[60] !== handleKeyDown || $[61] !== query || $[62] !== t18) {
-		t20 = /* @__PURE__ */ jsx("input", {
+		t20 = /* @__PURE__ */ jsx(InputGroupInput, {
 			ref: inputRef,
-			className: "placeholder:text-muted-foreground flex h-14 w-full rounded-none bg-transparent py-3 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50",
+			className: "h-12 px-0 text-base",
 			placeholder: t18,
 			value: query,
 			onChange: t19,
@@ -489,7 +496,7 @@ function GlobalSearch(t0) {
 	if ($[64] !== isSearching) {
 		t21 = isSearching && /* @__PURE__ */ jsx(Icon, {
 			icon: "ph:spinner",
-			className: "text-muted-foreground h-4 w-4 animate-spin"
+			className: "size-4 animate-spin"
 		});
 		$[64] = isSearching;
 		$[65] = t21;
@@ -501,8 +508,9 @@ function GlobalSearch(t0) {
 	} else t22 = $[66];
 	let t23;
 	if ($[67] !== t21) {
-		t23 = /* @__PURE__ */ jsxs("div", {
-			className: "flex shrink-0 items-center gap-1",
+		t23 = /* @__PURE__ */ jsxs(InputGroupAddon, {
+			align: "inline-end",
+			className: "gap-2 pr-0",
 			children: [t21, t22]
 		});
 		$[67] = t21;
@@ -510,13 +518,16 @@ function GlobalSearch(t0) {
 	} else t23 = $[68];
 	let t24;
 	if ($[69] !== t20 || $[70] !== t23) {
-		t24 = /* @__PURE__ */ jsxs("div", {
-			className: "qa-global-search__input-area flex items-center border-b px-3",
-			children: [
-				t17,
-				t20,
-				t23
-			]
+		t24 = /* @__PURE__ */ jsx("div", {
+			className: "qa-global-search__input-area border-border-subtle bg-popover border-b p-3",
+			children: /* @__PURE__ */ jsxs(InputGroup, {
+				className: "h-12 border-transparent bg-transparent focus-within:border-transparent focus-within:ring-0 hover:border-transparent",
+				children: [
+					t17,
+					t20,
+					t23
+				]
+			})
 		});
 		$[69] = t20;
 		$[70] = t23;