@btst/stack 2.12.2 → 3.0.0-rc.1

package/src/plugins/cms/client/components/pages/content-list-page.internal.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { Plus, ArrowLeft, Pencil, Trash2, Loader2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Plus, ArrowLeft, Pencil, Trash2, Loader2, Search } from "lucide-react";
 import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
 import {
 	Table,
 	TableBody,
@@ -10,27 +12,48 @@ import {
 	TableHeader,
 	TableRow,
 } from "@workspace/ui/components/table";
-import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import {
+	CanAccess,
+	useNotify,
+	usePluginOverrides,
+	useBasePath,
+	useStack,
+	useTranslate,
+	type TranslateFn,
+} from "@btst/stack/context";
+import { useListState, type ListStateSchema } from "@btst/stack/client";
 import type { CMSPluginOverrides } from "../../overrides";
+import type { SerializedContentItemWithType } from "../../../types";
 import {
+	useContent,
 	useSuspenseContent,
 	useSuspenseContentTypes,
 	useDeleteContent,
 } from "../../hooks";
 import { EmptyState } from "../shared/empty-state";
 import { PageWrapper } from "../shared/page-wrapper";
-import { CMS_LOCALIZATION } from "../../localization";
 import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
-import { toast } from "sonner";
 
 interface ContentListPageProps {
 	typeSlug: string;
 }
 
+// URL-synced search state: `?q=...` while typing (history: replace), clean
+// URL when the query is empty (the default is omitted from the URL).
+const LIST_STATE_SCHEMA = {
+	q: { type: "string", default: "", history: "replace" },
+} as const satisfies ListStateSchema;
+
+const SEARCH_DEBOUNCE_MS = 300;
+
 export function ContentListPage({ typeSlug }: ContentListPageProps) {
+	const t = useTranslate();
+	const notify = useNotify();
 	const overrides = usePluginOverrides<CMSPluginOverrides>("cms");
-	const { navigate, Link } = overrides;
-	const localization = { ...CMS_LOCALIZATION, ...overrides.localization };
+	const { localization } = overrides;
+	const { router } = useStack();
+	const navigate = router?.navigate;
+	const Link = router?.Link;
 	const basePath = useBasePath();
 
 	// Call lifecycle hooks for authorization
@@ -42,23 +65,57 @@ export function ContentListPage({ typeSlug }: ContentListPageProps) {
 			isSSR: typeof window === "undefined",
 		},
 		overrides,
-		beforeRenderHook: (overrides, context) => {
-			if (overrides.onBeforeListRendered) {
-				return overrides.onBeforeListRendered(typeSlug, context);
-			}
-			return true;
-		},
 	});
 
 	const limit = 20;
 
+	const [{ q: search }, setListState] = useListState(
+		`cms-${typeSlug}`,
+		LIST_STATE_SCHEMA,
+	);
+
+	// Local input state debounced into the URL-synced query, so the list
+	// query (and URL) only update after the user pauses typing.
+	const [searchInput, setSearchInput] = useState(search);
+
+	// External `q` changes (hydration after SSR-empty search params,
+	// back/forward navigation) re-seed the input instead of being clobbered
+	// by the debounced write below, which only reflects user edits.
+	const lastSyncedSearch = useRef(search);
+	useEffect(() => {
+		if (search !== lastSyncedSearch.current) {
+			lastSyncedSearch.current = search;
+			setSearchInput(search);
+		}
+	}, [search]);
+
+	useEffect(() => {
+		if (searchInput === search) return;
+		const timeout = setTimeout(() => {
+			lastSyncedSearch.current = searchInput;
+			setListState({ q: searchInput });
+		}, SEARCH_DEBOUNCE_MS);
+		return () => clearTimeout(timeout);
+	}, [searchInput, search, setListState]);
+
+	const hasSearch = search.trim().length > 0;
+
 	const { contentTypes } = useSuspenseContentTypes();
 	const contentType = contentTypes.find((ct) => ct.slug === typeSlug);
 
-	const { items, total, refetch, loadMore, hasMore, isLoadingMore } =
-		useSuspenseContent(typeSlug, {
-			limit,
-		});
+	// The default (unsearched) list stays on the suspense hook so SSR/SSG
+	// hydration works; the searched list uses the non-suspense hook so
+	// typing shows an inline loading state instead of suspending the page.
+	const defaultList = useSuspenseContent(typeSlug, { limit });
+	const searchedList = useContent(typeSlug, {
+		limit,
+		search,
+		enabled: hasSearch,
+	});
+
+	const activeList = hasSearch ? searchedList : defaultList;
+	const { items, total, loadMore, hasMore, isLoadingMore } = activeList;
+	const isSearchLoading = hasSearch && searchedList.isLoading;
 
 	const deleteContent = useDeleteContent(typeSlug);
 
@@ -67,11 +124,17 @@ export function ContentListPage({ typeSlug }: ContentListPageProps) {
 	const handleDelete = async (id: string) => {
 		try {
 			await deleteContent.mutateAsync(id);
-			toast.success(localization.CMS_TOAST_DELETE_SUCCESS);
-			void refetch();
 		} catch {
-			toast.error(localization.CMS_TOAST_ERROR);
+			notify.error(
+				localization?.CMS_TOAST_ERROR ??
+					t("cms.toasts.error", "An error occurred. Please try again."),
+			);
+			return;
 		}
+		notify.success(
+			localization?.CMS_TOAST_DELETE_SUCCESS ??
+				t("cms.toasts.deleteSuccess", "Item deleted successfully"),
+		);
 	};
 
 	const formatDate = (dateString: string) => {
@@ -83,8 +146,14 @@ export function ContentListPage({ typeSlug }: ContentListPageProps) {
 			<PageWrapper testId="cms-list-page">
 				<div className="w-full max-w-5xl">
 					<EmptyState
-						title={localization.CMS_ERROR_NOT_FOUND}
-						description="Content type not found"
+						title={
+							localization?.CMS_ERROR_NOT_FOUND ??
+							t("cms.common.notFound", "Not found")
+						}
+						description={
+							localization?.CMS_ERROR_TYPE_NOT_FOUND_DESCRIPTION ??
+							t("cms.common.typeNotFoundDescription", "Content type not found")
+						}
 					/>
 				</div>
 			</PageWrapper>
@@ -99,7 +168,7 @@ export function ContentListPage({ typeSlug }: ContentListPageProps) {
 						<Button
 							variant="ghost"
 							size="icon"
-							onClick={() => navigate(`${basePath}/cms`)}
+							onClick={() => void navigate?.(`${basePath}/cms`)}
 						>
 							<ArrowLeft className="h-4 w-4" />
 						</Button>
@@ -114,100 +183,238 @@ export function ContentListPage({ typeSlug }: ContentListPageProps) {
 							)}
 						</div>
 					</div>
-					<Button onClick={() => navigate(`${basePath}/cms/${typeSlug}/new`)}>
-						<Plus className="h-4 w-4 mr-2" />
-						{localization.CMS_BUTTON_NEW_ITEM}
-					</Button>
+					<CanAccess
+						resource="cms:content"
+						action="create"
+						params={{ typeSlug }}
+					>
+						<Button
+							onClick={() => void navigate?.(`${basePath}/cms/${typeSlug}/new`)}
+						>
+							<Plus className="h-4 w-4 mr-2" />
+							{localization?.CMS_BUTTON_NEW_ITEM ??
+								t("cms.common.newItem", "New Item")}
+						</Button>
+					</CanAccess>
 				</div>
 
-				{items.length === 0 ? (
-					<EmptyState
-						title={localization.CMS_LIST_EMPTY}
-						description={localization.CMS_LIST_EMPTY_DESCRIPTION}
-						action={
-							<Button
-								onClick={() => navigate(`${basePath}/cms/${typeSlug}/new`)}
-							>
-								<Plus className="h-4 w-4 mr-2" />
-								{localization.CMS_BUTTON_CREATE}
-							</Button>
+				<div className="relative max-w-sm">
+					<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+					<Input
+						data-testid="cms-list-search"
+						value={searchInput}
+						onChange={(e) => setSearchInput(e.target.value)}
+						placeholder={
+							localization?.CMS_LIST_SEARCH_PLACEHOLDER ??
+							t("cms.list.searchPlaceholder", "Search items...")
 						}
+						className="pl-9"
 					/>
-				) : (
-					<div className="border rounded-lg">
-						<Table>
-							<TableHeader>
-								<TableRow>
-									<TableHead>{localization.CMS_LIST_COLUMN_SLUG}</TableHead>
-									<TableHead>{localization.CMS_LIST_COLUMN_CREATED}</TableHead>
-									<TableHead>{localization.CMS_LIST_COLUMN_UPDATED}</TableHead>
-									<TableHead className="w-[100px]">
-										{localization.CMS_LIST_COLUMN_ACTIONS}
-									</TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody>
-								{items.map((item) => (
-									<TableRow key={item.id}>
-										<TableCell className="font-medium">
-											<LinkComponent
-												href={`${basePath}/cms/${typeSlug}/${item.id}`}
-												className="hover:underline"
-											>
-												{item.slug}
-											</LinkComponent>
-										</TableCell>
-										<TableCell>{formatDate(item.createdAt)}</TableCell>
-										<TableCell>{formatDate(item.updatedAt)}</TableCell>
-										<TableCell>
-											<div className="flex items-center gap-1">
-												<Button
-													variant="ghost"
-													size="icon"
-													onClick={() =>
-														navigate(`${basePath}/cms/${typeSlug}/${item.id}`)
-													}
-												>
-													<Pencil className="h-4 w-4" />
-												</Button>
-												<Button
-													variant="ghost"
-													size="icon"
-													onClick={() => handleDelete(item.id)}
-													disabled={deleteContent.isPending}
-												>
-													<Trash2 className="h-4 w-4 text-destructive" />
-												</Button>
-											</div>
-										</TableCell>
-									</TableRow>
-								))}
-							</TableBody>
-						</Table>
-						{/* Load More and pagination info */}
-						<div className="flex items-center justify-between px-4 py-3 border-t">
-							<p className="text-sm text-muted-foreground">
-								{localization.CMS_LIST_PAGINATION_SHOWING.replace("{from}", "1")
-									.replace("{to}", String(items.length))
-									.replace("{total}", String(total))}
-							</p>
-							{hasMore && (
-								<Button
-									variant="outline"
-									size="sm"
-									onClick={() => loadMore()}
-									disabled={isLoadingMore}
+					{isSearchLoading && (
+						<Loader2 className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" />
+					)}
+				</div>
+
+				{items.length === 0 ? (
+					isSearchLoading ? null : hasSearch ? (
+						<EmptyState
+							title={
+								localization?.CMS_LIST_SEARCH_EMPTY ??
+								t("cms.list.searchEmpty", "No items match your search")
+							}
+							description={
+								localization?.CMS_LIST_SEARCH_EMPTY_DESCRIPTION ??
+								t(
+									"cms.list.searchEmptyDescription",
+									"Try a different search term.",
+								)
+							}
+						/>
+					) : (
+						<EmptyState
+							title={
+								localization?.CMS_LIST_EMPTY ??
+								t("cms.list.empty", "No items yet")
+							}
+							description={
+								localization?.CMS_LIST_EMPTY_DESCRIPTION ??
+								t(
+									"cms.list.emptyDescription",
+									"Create your first item to get started.",
+								)
+							}
+							action={
+								<CanAccess
+									resource="cms:content"
+									action="create"
+									params={{ typeSlug }}
 								>
-									{isLoadingMore && (
-										<Loader2 className="h-4 w-4 mr-2 animate-spin" />
-									)}
-									{localization.CMS_LIST_PAGINATION_NEXT}
-								</Button>
-							)}
-						</div>
-					</div>
+									<Button
+										onClick={() =>
+											void navigate?.(`${basePath}/cms/${typeSlug}/new`)
+										}
+									>
+										<Plus className="h-4 w-4 mr-2" />
+										{localization?.CMS_BUTTON_CREATE ??
+											t("cms.common.create", "Create")}
+									</Button>
+								</CanAccess>
+							}
+						/>
+					)
+				) : (
+					<ContentTable
+						items={items}
+						total={total}
+						typeSlug={typeSlug}
+						basePath={basePath}
+						LinkComponent={LinkComponent}
+						navigate={navigate}
+						onDelete={handleDelete}
+						isDeleting={deleteContent.isPending}
+						formatDate={formatDate}
+						loadMore={loadMore}
+						hasMore={hasMore}
+						isLoadingMore={isLoadingMore}
+						localization={localization}
+						t={t}
+					/>
 				)}
 			</div>
 		</PageWrapper>
 	);
 }
+
+function ContentTable({
+	items,
+	total,
+	typeSlug,
+	basePath,
+	LinkComponent,
+	navigate,
+	onDelete,
+	isDeleting,
+	formatDate,
+	loadMore,
+	hasMore,
+	isLoadingMore,
+	localization,
+	t,
+}: {
+	items: SerializedContentItemWithType[];
+	total: number;
+	typeSlug: string;
+	basePath: string;
+	LinkComponent: React.ElementType;
+	navigate?: (path: string) => void | Promise<void>;
+	onDelete: (id: string) => void;
+	isDeleting: boolean;
+	formatDate: (dateString: string) => string;
+	loadMore: () => void;
+	hasMore: boolean;
+	isLoadingMore: boolean;
+	localization: CMSPluginOverrides["localization"];
+	t: TranslateFn;
+}) {
+	return (
+		<div className="border rounded-lg">
+			<Table>
+				<TableHeader>
+					<TableRow>
+						<TableHead>
+							{localization?.CMS_LIST_COLUMN_SLUG ??
+								t("cms.list.columnSlug", "Slug")}
+						</TableHead>
+						<TableHead>
+							{localization?.CMS_LIST_COLUMN_CREATED ??
+								t("cms.list.columnCreated", "Created")}
+						</TableHead>
+						<TableHead>
+							{localization?.CMS_LIST_COLUMN_UPDATED ??
+								t("cms.list.columnUpdated", "Updated")}
+						</TableHead>
+						<TableHead className="w-[100px]">
+							{localization?.CMS_LIST_COLUMN_ACTIONS ??
+								t("cms.list.columnActions", "Actions")}
+						</TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{items.map((item) => (
+						<TableRow key={item.id}>
+							<TableCell className="font-medium">
+								<LinkComponent
+									href={`${basePath}/cms/${typeSlug}/${item.id}`}
+									className="hover:underline"
+								>
+									{item.slug}
+								</LinkComponent>
+							</TableCell>
+							<TableCell>{formatDate(item.createdAt)}</TableCell>
+							<TableCell>{formatDate(item.updatedAt)}</TableCell>
+							<TableCell>
+								<div className="flex items-center gap-1">
+									<CanAccess
+										resource="cms:content"
+										action="update"
+										params={{ typeSlug, id: item.id }}
+									>
+										<Button
+											variant="ghost"
+											size="icon"
+											onClick={() =>
+												void navigate?.(
+													`${basePath}/cms/${typeSlug}/${item.id}`,
+												)
+											}
+										>
+											<Pencil className="h-4 w-4" />
+										</Button>
+									</CanAccess>
+									<CanAccess
+										resource="cms:content"
+										action="delete"
+										params={{ typeSlug, id: item.id }}
+									>
+										<Button
+											variant="ghost"
+											size="icon"
+											onClick={() => onDelete(item.id)}
+											disabled={isDeleting}
+										>
+											<Trash2 className="h-4 w-4 text-destructive" />
+										</Button>
+									</CanAccess>
+								</div>
+							</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+			{/* Load More and pagination info */}
+			<div className="flex items-center justify-between px-4 py-3 border-t">
+				<p className="text-sm text-muted-foreground">
+					{(
+						localization?.CMS_LIST_PAGINATION_SHOWING ??
+						t("cms.list.paginationShowing", "Showing {from}-{to} of {total}")
+					)
+						.replace("{from}", "1")
+						.replace("{to}", String(items.length))
+						.replace("{total}", String(total))}
+				</p>
+				{hasMore && (
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() => loadMore()}
+						disabled={isLoadingMore}
+					>
+						{isLoadingMore && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+						{localization?.CMS_LIST_PAGINATION_NEXT ??
+							t("cms.list.paginationNext", "Next")}
+					</Button>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/plugins/cms/client/components/pages/dashboard-page.internal.tsx

@@ -7,18 +7,24 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@workspace/ui/components/card";
-import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import {
+	usePluginOverrides,
+	useBasePath,
+	useStack,
+	useTranslate,
+} from "@btst/stack/context";
 import type { CMSPluginOverrides } from "../../overrides";
 import { useSuspenseContentTypes } from "../../hooks";
 import { EmptyState } from "../shared/empty-state";
 import { PageWrapper } from "../shared/page-wrapper";
-import { CMS_LOCALIZATION } from "../../localization";
 import { useRouteLifecycle } from "@workspace/ui/hooks/use-route-lifecycle";
 
 export function DashboardPage() {
+	const t = useTranslate();
 	const overrides = usePluginOverrides<CMSPluginOverrides>("cms");
-	const { navigate } = overrides;
-	const localization = { ...CMS_LOCALIZATION, ...overrides.localization };
+	const { localization } = overrides;
+	const { router } = useStack();
+	const navigate = router?.navigate;
 	const basePath = useBasePath();
 
 	// Call lifecycle hooks for authorization
@@ -29,30 +35,35 @@ export function DashboardPage() {
 			isSSR: typeof window === "undefined",
 		},
 		overrides,
-		beforeRenderHook: (overrides, context) => {
-			if (overrides.onBeforeDashboardRendered) {
-				return overrides.onBeforeDashboardRendered(context);
-			}
-			return true;
-		},
 	});
 	const { contentTypes } = useSuspenseContentTypes();
 
+	const title =
+		localization?.CMS_DASHBOARD_TITLE ?? t("cms.dashboard.title", "Content");
+	const subtitle =
+		localization?.CMS_DASHBOARD_SUBTITLE ??
+		t("cms.dashboard.subtitle", "Manage your content types");
+
 	if (contentTypes.length === 0) {
 		return (
 			<PageWrapper testId="cms-dashboard-page">
 				<div className="w-full max-w-5xl space-y-6">
 					<div>
-						<h1 className="text-2xl font-bold tracking-tight">
-							{localization.CMS_DASHBOARD_TITLE}
-						</h1>
-						<p className="text-muted-foreground">
-							{localization.CMS_DASHBOARD_SUBTITLE}
-						</p>
+						<h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+						<p className="text-muted-foreground">{subtitle}</p>
 					</div>
 					<EmptyState
-						title={localization.CMS_DASHBOARD_NO_TYPES}
-						description={localization.CMS_DASHBOARD_NO_TYPES_DESCRIPTION}
+						title={
+							localization?.CMS_DASHBOARD_NO_TYPES ??
+							t("cms.dashboard.noTypes", "No content types configured")
+						}
+						description={
+							localization?.CMS_DASHBOARD_NO_TYPES_DESCRIPTION ??
+							t(
+								"cms.dashboard.noTypesDescription",
+								"Add content types to your CMS configuration to get started.",
+							)
+						}
 					/>
 				</div>
 			</PageWrapper>
@@ -60,24 +71,28 @@ export function DashboardPage() {
 	}
 
 	const formatItemCount = (count: number) => {
-		if (count === 0) return localization.CMS_DASHBOARD_ITEMS_COUNT_ZERO;
-		if (count === 1) return localization.CMS_DASHBOARD_ITEMS_COUNT_ONE;
-		return localization.CMS_DASHBOARD_ITEMS_COUNT.replace(
-			"{count}",
-			String(count),
-		);
+		if (count === 0)
+			return (
+				localization?.CMS_DASHBOARD_ITEMS_COUNT_ZERO ??
+				t("cms.dashboard.itemsCountZero", "No items")
+			);
+		if (count === 1)
+			return (
+				localization?.CMS_DASHBOARD_ITEMS_COUNT_ONE ??
+				t("cms.dashboard.itemsCountOne", "1 item")
+			);
+		return (
+			localization?.CMS_DASHBOARD_ITEMS_COUNT ??
+			t("cms.dashboard.itemsCount", "{count} items")
+		).replace("{count}", String(count));
 	};
 
 	return (
 		<PageWrapper testId="cms-dashboard-page">
 			<div className="w-full max-w-5xl space-y-6">
 				<div>
-					<h1 className="text-2xl font-bold tracking-tight">
-						{localization.CMS_DASHBOARD_TITLE}
-					</h1>
-					<p className="text-muted-foreground">
-						{localization.CMS_DASHBOARD_SUBTITLE}
-					</p>
+					<h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+					<p className="text-muted-foreground">{subtitle}</p>
 				</div>
 
 				<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
@@ -85,7 +100,7 @@ export function DashboardPage() {
 						<Card
 							key={ct.id}
 							className="hover:border-primary/50 transition-colors cursor-pointer"
-							onClick={() => navigate(`${basePath}/cms/${ct.slug}`)}
+							onClick={() => void navigate?.(`${basePath}/cms/${ct.slug}`)}
 						>
 							<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
 								<CardTitle className="text-lg font-medium">{ct.name}</CardTitle>