@btst/stack 2.12.2 → 3.0.0-rc.1

package/src/plugins/media/client/components/media-picker/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState, type ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import {
 	Popover,
 	PopoverContent,
@@ -18,8 +18,7 @@ import { FolderTree } from "./folder-tree";
 import { BrowseTab } from "./browse-tab";
 import { UploadTab } from "./upload-tab";
 import { UrlTab } from "./url-tab";
-import type { MediaPluginOverrides } from "../../overrides";
-import { usePluginOverrides } from "@btst/stack/context";
+import { useCan, useStack, useTranslate } from "@btst/stack/context";
 
 export interface MediaPickerProps {
 	/**
@@ -44,8 +43,7 @@ export interface MediaPickerProps {
 /**
  * MediaPicker — a Popover-based media browser.
  *
- * Reads API config from the `media` plugin overrides context (set up in StackProvider).
- * Must be rendered inside a `StackProvider` that includes media overrides.
+ * Reads API and router config from `StackProvider`.
  *
  * @example
  * ```tsx
@@ -62,6 +60,11 @@ export function MediaPicker({
 	multiple = false,
 	accept,
 }: MediaPickerProps) {
+	const t = useTranslate();
+	const { can: canCreate, isPending: isCreatePermissionPending } = useCan({
+		resource: "media:asset",
+		action: "create",
+	});
 	const [open, setOpen] = useState(false);
 	const [selectedFolder, setSelectedFolder] = useState<string | null>(null);
 	const [selectedAssets, setSelectedAssets] = useState<SerializedAsset[]>([]);
@@ -69,6 +72,12 @@ export function MediaPicker({
 		"browse",
 	);
 
+	useEffect(() => {
+		if (!isCreatePermissionPending && !canCreate && activeTab !== "browse") {
+			setActiveTab("browse");
+		}
+	}, [activeTab, canCreate, isCreatePermissionPending]);
+
 	const handleClose = () => {
 		setOpen(false);
 		setSelectedAssets([]);
@@ -97,6 +106,7 @@ export function MediaPicker({
 	};
 
 	const handleUploaded = (asset: SerializedAsset) => {
+		if (!canCreate) return;
 		if (multiple) {
 			setSelectedAssets((prev) => [...prev, asset]);
 		} else {
@@ -106,6 +116,7 @@ export function MediaPicker({
 	};
 
 	const handleUrlRegistered = (asset: SerializedAsset) => {
+		if (!canCreate) return;
 		// Close the popover first, then notify parent — same deferral as handleConfirm.
 		const toSelect = asset;
 		handleClose();
@@ -134,9 +145,12 @@ export function MediaPicker({
 				<div className="flex h-full flex-col overflow-hidden rounded-md">
 					{/* Header */}
 					<div className="flex items-center justify-between border-b px-3 py-2">
-						<span className="text-sm font-semibold">Media Library</span>
+						<span className="text-sm font-semibold">
+							{t("media.picker.title", "Media Library")}
+						</span>
 						<button
 							type="button"
+							aria-label={t("media.actions.close", "Close")}
 							onClick={handleClose}
 							className="rounded p-0.5 hover:bg-muted"
 						>
@@ -161,28 +175,34 @@ export function MediaPicker({
 								onValueChange={(v) => setActiveTab(v as any)}
 								className="flex flex-1 flex-col min-h-0"
 							>
-								<TabsList className="grid h-auto w-full shrink-0 grid-cols-3 md:flex md:w-fit">
+								<TabsList
+									className={`grid h-auto w-full shrink-0 ${canCreate ? "grid-cols-3" : "grid-cols-1"} md:flex md:w-fit`}
+								>
 									<TabsTrigger
 										value="browse"
 										className="h-8 px-2 text-xs md:h-6 md:px-3"
 									>
 										<Image className="mr-1 size-3" />
-										Browse
-									</TabsTrigger>
-									<TabsTrigger
-										value="upload"
-										className="h-8 px-2 text-xs md:h-6 md:px-3"
-									>
-										<Upload className="mr-1 size-3" />
-										Upload
-									</TabsTrigger>
-									<TabsTrigger
-										value="url"
-										className="h-8 px-2 text-xs md:h-6 md:px-3"
-									>
-										<Link className="mr-1 size-3" />
-										URL
+										{t("media.tabs.browse", "Browse")}
 									</TabsTrigger>
+									{canCreate ? (
+										<TabsTrigger
+											value="upload"
+											className="h-8 px-2 text-xs md:h-6 md:px-3"
+										>
+											<Upload className="mr-1 size-3" />
+											{t("media.tabs.upload", "Upload")}
+										</TabsTrigger>
+									) : null}
+									{canCreate ? (
+										<TabsTrigger
+											value="url"
+											className="h-8 px-2 text-xs md:h-6 md:px-3"
+										>
+											<Link className="mr-1 size-3" />
+											{t("media.tabs.url", "URL")}
+										</TabsTrigger>
+									) : null}
 								</TabsList>
 
 								<div className="mt-2 min-h-0 flex-1">
@@ -197,25 +217,29 @@ export function MediaPicker({
 											onToggle={handleToggleAsset}
 										/>
 									</TabsContent>
-									<TabsContent
-										value="upload"
-										className="m-0 h-full min-h-0 data-[state=active]:flex data-[state=active]:flex-col"
-									>
-										<UploadTab
-											folderId={selectedFolder}
-											accept={accept}
-											onUploaded={handleUploaded}
-										/>
-									</TabsContent>
-									<TabsContent
-										value="url"
-										className="m-0 h-full min-h-0 data-[state=active]:flex data-[state=active]:flex-col"
-									>
-										<UrlTab
-											folderId={selectedFolder}
-											onRegistered={handleUrlRegistered}
-										/>
-									</TabsContent>
+									{canCreate ? (
+										<TabsContent
+											value="upload"
+											className="m-0 h-full min-h-0 data-[state=active]:flex data-[state=active]:flex-col"
+										>
+											<UploadTab
+												folderId={selectedFolder}
+												accept={accept}
+												onUploaded={handleUploaded}
+											/>
+										</TabsContent>
+									) : null}
+									{canCreate ? (
+										<TabsContent
+											value="url"
+											className="m-0 h-full min-h-0 data-[state=active]:flex data-[state=active]:flex-col"
+										>
+											<UrlTab
+												folderId={selectedFolder}
+												onRegistered={handleUrlRegistered}
+											/>
+										</TabsContent>
+									) : null}
 								</div>
 							</Tabs>
 						</div>
@@ -225,8 +249,10 @@ export function MediaPicker({
 					<div className="flex flex-col gap-2 border-t px-3 py-2 sm:flex-row sm:items-center sm:justify-between">
 						<span className="text-xs text-muted-foreground">
 							{selectedAssets.length > 0
-								? `${selectedAssets.length} selected`
-								: "Click a file to select it"}
+								? t("media.picker.selected", "{{count}} selected", {
+										count: selectedAssets.length,
+									})
+								: t("media.picker.selectHint", "Click a file to select it")}
 						</span>
 						<div className="flex w-full gap-2 sm:w-auto">
 							<Button
@@ -236,7 +262,7 @@ export function MediaPicker({
 								onClick={handleClose}
 								className="flex-1 sm:flex-none"
 							>
-								Cancel
+								{t("media.actions.cancel", "Cancel")}
 							</Button>
 							<Button
 								type="button"
@@ -247,8 +273,10 @@ export function MediaPicker({
 								className="flex-1 sm:flex-none"
 							>
 								{multiple
-									? `Select ${selectedAssets.length > 0 ? `(${selectedAssets.length})` : ""}`
-									: "Select"}
+									? t("media.actions.selectMany", "Select ({{count}})", {
+											count: selectedAssets.length,
+										})
+									: t("media.actions.select", "Select")}
 							</Button>
 						</div>
 					</div>
@@ -272,10 +300,9 @@ export function ImageInputField({
 	value: string;
 	onChange: (v: string) => void;
 }) {
-	const { Image: ImageComponent } = usePluginOverrides<
-		MediaPluginOverrides,
-		Partial<MediaPluginOverrides>
-	>("media", {});
+	const t = useTranslate();
+	const { router } = useStack();
+	const ImageComponent = router?.Image;
 
 	if (value) {
 		return (
@@ -283,7 +310,7 @@ export function ImageInputField({
 				{ImageComponent ? (
 					<ImageComponent
 						src={value}
-						alt="Featured image preview"
+						alt={t("media.image.previewAlt", "Featured image preview")}
 						className="h-auto w-full max-w-xs rounded-md border object-cover"
 						width={400}
 						height={300}
@@ -292,7 +319,7 @@ export function ImageInputField({
 				) : (
 					<img
 						src={value}
-						alt="Featured image preview"
+						alt={t("media.image.previewAlt", "Featured image preview")}
 						className="h-auto w-full max-w-xs rounded-md border object-cover"
 						data-testid="image-preview"
 					/>
@@ -306,7 +333,7 @@ export function ImageInputField({
 								type="button"
 								data-testid="open-media-picker"
 							>
-								Change Image
+								{t("media.image.change", "Change Image")}
 							</Button>
 						}
 						accept={["image/*"]}
@@ -319,7 +346,7 @@ export function ImageInputField({
 						data-testid="remove-image-button"
 						onClick={() => onChange("")}
 					>
-						Remove
+						{t("media.image.remove", "Remove")}
 					</Button>
 				</div>
 			</div>
@@ -336,7 +363,7 @@ export function ImageInputField({
 						type="button"
 						data-testid="open-media-picker"
 					>
-						Browse Media
+						{t("media.image.browse", "Browse Media")}
 					</Button>
 				}
 				accept={["image/*"]}

package/src/plugins/media/client/components/media-picker/upload-tab.tsx

@@ -5,6 +5,7 @@ import { Button } from "@workspace/ui/components/button";
 import { Loader2, Upload } from "lucide-react";
 import { cn } from "@workspace/ui/lib/utils";
 import { matchesAccept } from "./utils";
+import { useCan, useNotify, useTranslate } from "@btst/stack/context";
 
 export function UploadTab({
 	folderId,
@@ -15,6 +16,12 @@ export function UploadTab({
 	accept?: string[];
 	onUploaded: (asset: SerializedAsset) => void;
 }) {
+	const t = useTranslate();
+	const notify = useNotify();
+	const { can: canCreate } = useCan({
+		resource: "media:asset",
+		action: "create",
+	});
 	const [dragging, setDragging] = useState(false);
 	const [uploading, setUploading] = useState(false);
 	const [error, setError] = useState<string | null>(null);
@@ -25,6 +32,7 @@ export function UploadTab({
 
 	const handleFiles = useCallback(
 		async (files: FileList | File[]) => {
+			if (!canCreate) return;
 			const fileArr = Array.from(files);
 			if (fileArr.length === 0) return;
 			setError(null);
@@ -32,7 +40,15 @@ export function UploadTab({
 			try {
 				for (const file of fileArr) {
 					if (accept && !matchesAccept(file.type, accept)) {
-						setError(`File type ${file.type} is not accepted.`);
+						setError(
+							t(
+								"media.upload.invalidType",
+								"File type {{type}} is not accepted.",
+								{
+									type: file.type,
+								},
+							),
+						);
 						continue;
 					}
 					const asset = await uploadAsset({
@@ -40,20 +56,32 @@ export function UploadTab({
 						folderId: folderId ?? undefined,
 					});
 					onUploaded(asset);
+					notify.success(
+						t("media.toasts.uploadSuccess", "Uploaded {{filename}}", {
+							filename: file.name,
+						}),
+					);
 				}
 			} catch (err) {
-				setError(err instanceof Error ? err.message : "Upload failed");
+				setError(
+					err instanceof Error
+						? err.message
+						: t("media.toasts.uploadError", "Upload failed"),
+				);
 			} finally {
 				setUploading(false);
 			}
 		},
-		[accept, folderId, uploadAsset, onUploaded],
+		[accept, canCreate, folderId, notify, onUploaded, t, uploadAsset],
 	);
 
+	if (!canCreate) return null;
+
 	return (
 		<div className="flex h-full flex-col gap-3">
 			<div
 				onDragOver={(e) => {
+					if (!canCreate) return;
 					e.preventDefault();
 					setDragging(true);
 				}}
@@ -71,15 +99,19 @@ export function UploadTab({
 				{uploading ? (
 					<>
 						<Loader2 className="size-8 animate-spin text-muted-foreground" />
-						<p className="text-sm text-muted-foreground">Uploading…</p>
+						<p className="text-sm text-muted-foreground">
+							{t("media.upload.uploading", "Uploading…")}
+						</p>
 					</>
 				) : (
 					<>
 						<Upload className="size-8 text-muted-foreground" />
 						<div className="text-center">
-							<p className="text-sm font-medium">Drop files here</p>
+							<p className="text-sm font-medium">
+								{t("media.upload.dropHere", "Drop files here")}
+							</p>
 							<p className="text-xs text-muted-foreground">
-								or click to browse
+								{t("media.upload.orBrowse", "or click to browse")}
 							</p>
 						</div>
 						<Button
@@ -88,7 +120,7 @@ export function UploadTab({
 							size="sm"
 							onClick={() => fileInputRef.current?.click()}
 						>
-							Choose files
+							{t("media.upload.chooseFiles", "Choose files")}
 						</Button>
 					</>
 				)}

package/src/plugins/media/client/components/media-picker/url-tab.tsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
-import { useRegisterAsset } from "../../hooks/use-media";
+import { useRegisterAssetForm } from "../../hooks/use-media";
 import type { SerializedAsset } from "../../../types";
 import { Input } from "@workspace/ui/components/input";
 import { Button } from "@workspace/ui/components/button";
 import { Loader2, Check } from "lucide-react";
+import { useCan, useTranslate } from "@btst/stack/context";
 
 export function UrlTab({
 	folderId,
@@ -12,34 +13,41 @@ export function UrlTab({
 	folderId: string | null;
 	onRegistered: (asset: SerializedAsset) => void;
 }) {
+	const t = useTranslate();
+	const { can: canCreate } = useCan({
+		resource: "media:asset",
+		action: "create",
+	});
 	const [url, setUrl] = useState("");
-	const [error, setError] = useState<string | null>(null);
-	const { mutateAsync: registerAsset, isPending } = useRegisterAsset();
+	const form = useRegisterAssetForm({
+		folderId: folderId ?? undefined,
+		onSuccess: onRegistered,
+	});
 
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
 		e.stopPropagation();
-		setError(null);
+		if (!canCreate) return;
+		form.clearErrors();
 		const trimmed = url.trim();
 		if (!trimmed) return;
-		try {
-			const filename = trimmed.split("/").pop() ?? "asset";
-			const asset = await registerAsset({
-				url: trimmed,
-				filename,
-				folderId: folderId ?? undefined,
-			});
+		const asset = await form.submit({ url: trimmed });
+		if (asset) {
 			setUrl("");
-			onRegistered(asset);
-		} catch (err) {
-			setError(err instanceof Error ? err.message : "Failed to register URL");
 		}
 	};
 
+	if (!canCreate) return null;
+
+	const urlError = form.fieldErrors.url;
+
 	return (
 		<div className="flex h-full flex-col gap-3 pt-2">
 			<p className="text-sm text-muted-foreground">
-				Paste a public URL to register it as an asset without uploading a file.
+				{t(
+					"media.url.description",
+					"Paste a public URL to register it as an asset without uploading a file.",
+				)}
 			</p>
 			<form onSubmit={handleSubmit} className="flex flex-col gap-2">
 				<div className="flex flex-col gap-2 sm:flex-row">
@@ -49,7 +57,10 @@ export function UrlTab({
 						autoCapitalize="none"
 						autoCorrect="off"
 						value={url}
-						onChange={(e) => setUrl(e.target.value)}
+						onChange={(e) => {
+							setUrl(e.target.value);
+							form.clearErrors();
+						}}
 						placeholder="https://example.com/image.png"
 						className="flex-1"
 						data-testid="media-url-input"
@@ -58,18 +69,20 @@ export function UrlTab({
 					<Button
 						type="submit"
 						size="sm"
-						disabled={isPending || !url.trim()}
+						disabled={form.isSubmitting || !url.trim()}
 						className="w-full sm:w-auto"
 					>
-						{isPending ? (
+						{form.isSubmitting ? (
 							<Loader2 className="mr-1 size-4 animate-spin" />
 						) : (
 							<Check className="mr-1 size-4" />
 						)}
-						Use URL
+						{t("media.url.use", "Use URL")}
 					</Button>
 				</div>
-				{error && <p className="text-sm text-destructive">{error}</p>}
+				{urlError ? (
+					<p className="text-sm text-destructive">{String(urlError)}</p>
+				) : null}
 			</form>
 		</div>
 	);