@btst/stack 2.12.2 → 3.0.0-rc.1

package/src/plugins/media/client/components/media-picker/asset-card.tsx

@@ -3,51 +3,72 @@ import type { SerializedAsset } from "../../../types";
 import { cn } from "@workspace/ui/lib/utils";
 import { File, Check, Copy, Trash2 } from "lucide-react";
 import { isImage, formatBytes } from "./utils";
-import { usePluginOverrides } from "@btst/stack/context";
-import type { MediaPluginOverrides } from "../../overrides";
+import { useCan, useNotify, useStack, useTranslate } from "@btst/stack/context";
 import { AssetPreviewButton } from "./asset-preview-button";
-import { toast } from "sonner";
 
 export function AssetCard({
 	asset,
 	onToggle,
 	selected = false,
 	onDelete,
-	apiBaseURL,
 }: {
 	asset: SerializedAsset;
 	selected?: boolean;
 	onToggle?: () => void;
 	onDelete?: (id: string) => void | Promise<void>;
-	apiBaseURL?: string;
 }) {
+	const t = useTranslate();
+	const notify = useNotify();
 	const { mutateAsync: deleteAsset } = useDeleteAsset();
-	const { Image: ImageComponent } = usePluginOverrides<
-		MediaPluginOverrides,
-		Partial<MediaPluginOverrides>
-	>("media", {});
+	const { can: canDelete } = useCan({
+		resource: "media:asset",
+		action: "delete",
+		params: { id: asset.id },
+	});
+	const { api, router } = useStack();
+	const ImageComponent = router?.Image;
 	const imageAsset = isImage(asset.mimeType);
 	const selectable = typeof onToggle === "function";
 
-	const copyUrl = () => {
+	const copyUrl = async () => {
 		let fullUrl: string;
 		try {
-			fullUrl = new URL(asset.url, apiBaseURL).href;
+			fullUrl = new URL(asset.url, api?.baseURL).href;
 		} catch {
 			fullUrl = asset.url;
 		}
-		navigator.clipboard
-			.writeText(fullUrl)
-			.then(() => toast.success("URL copied"));
+		try {
+			await navigator.clipboard.writeText(fullUrl);
+			notify.success(t("media.toasts.copySuccess", "URL copied"));
+		} catch {
+			notify.error(t("media.toasts.copyError", "Failed to copy URL"));
+		}
 	};
 
-	const handleDelete = () => {
+	const handleDelete = async () => {
+		if (!canDelete) return;
 		if (onDelete) {
-			return onDelete(asset.id);
+			await onDelete(asset.id);
+			return;
 		}
 
-		if (confirm(`Delete "${asset.originalName}"?`)) {
-			return deleteAsset(asset.id).catch(console.error);
+		if (
+			confirm(
+				t("media.assets.deleteNamedConfirm", 'Delete "{{filename}}"?', {
+					filename: asset.originalName,
+				}),
+			)
+		) {
+			try {
+				await deleteAsset(asset.id);
+				notify.success(t("media.toasts.deleteSuccess", "Asset deleted"));
+			} catch (error) {
+				notify.error(
+					error instanceof Error
+						? error.message
+						: t("media.toasts.deleteError", "Delete failed"),
+				);
+			}
 		}
 	};
 
@@ -114,13 +135,13 @@ export function AssetCard({
 			)}
 
 			<div className="absolute right-1 top-1 hidden gap-1 group-hover:flex">
-				{apiBaseURL ? (
+				{api?.baseURL ? (
 					<button
 						type="button"
-						title="Copy URL"
+						title={t("media.actions.copyUrl", "Copy URL")}
 						onClick={(e) => {
 							e.stopPropagation();
-							copyUrl();
+							void copyUrl();
 						}}
 						className="rounded bg-background/80 p-0.5 shadow hover:bg-background"
 					>
@@ -133,17 +154,19 @@ export function AssetCard({
 						className="rounded bg-background/80 p-0.5 shadow hover:bg-background"
 					/>
 				) : null}
-				<button
-					type="button"
-					title="Delete"
-					onClick={(e) => {
-						e.stopPropagation();
-						void handleDelete();
-					}}
-					className="rounded bg-destructive/80 p-0.5 text-white hover:bg-destructive"
-				>
-					<Trash2 className="size-3" />
-				</button>
+				{canDelete ? (
+					<button
+						type="button"
+						title={t("media.actions.delete", "Delete")}
+						onClick={(e) => {
+							e.stopPropagation();
+							void handleDelete();
+						}}
+						className="rounded bg-destructive/80 p-0.5 text-white hover:bg-destructive"
+					>
+						<Trash2 className="size-3" />
+					</button>
+				) : null}
 			</div>
 		</div>
 	);

package/src/plugins/media/client/components/media-picker/asset-preview-button.tsx

@@ -10,6 +10,7 @@ import {
 } from "@workspace/ui/components/dialog";
 import { Eye, X } from "lucide-react";
 import type { SerializedAsset } from "../../../types";
+import { useTranslate } from "@btst/stack/context";
 
 export function AssetPreviewButton({
 	asset,
@@ -18,14 +19,17 @@ export function AssetPreviewButton({
 	asset: SerializedAsset;
 	className: string;
 }) {
+	const t = useTranslate();
 	const [open, setOpen] = useState(false);
 
 	return (
 		<>
 			<button
 				type="button"
-				title="Preview"
-				aria-label={`Preview ${asset.originalName}`}
+				title={t("media.actions.preview", "Preview")}
+				aria-label={t("media.assets.previewLabel", "Preview {{filename}}", {
+					filename: asset.originalName,
+				})}
 				onClick={(event) => {
 					event.stopPropagation();
 					setOpen(true);
@@ -46,7 +50,7 @@ export function AssetPreviewButton({
 
 					<DialogClose
 						className="absolute right-4 top-4 z-10 rounded bg-black/60 p-2 text-white transition hover:bg-black/80"
-						aria-label="Close preview"
+						aria-label={t("media.actions.closePreview", "Close preview")}
 					>
 						<X className="size-4" />
 					</DialogClose>

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

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useAssets } from "../../hooks/use-media";
 import type { SerializedAsset } from "../../../types";
 import { Input } from "@workspace/ui/components/input";
@@ -6,6 +6,7 @@ import { Button } from "@workspace/ui/components/button";
 import { Loader2, Search, X, Image } from "lucide-react";
 import { AssetCard } from "./asset-card";
 import { matchesAccept } from "./utils";
+import { useTranslate } from "@btst/stack/context";
 
 export function BrowseTab({
 	folderId,
@@ -13,24 +14,44 @@ export function BrowseTab({
 	accept,
 	onToggle,
 	onDelete,
-	apiBaseURL,
-	emptyMessage = "No files found",
+	emptyMessage,
+	search: controlledSearch,
+	searchQuery,
+	onSearchChange,
 }: {
 	folderId: string | null;
 	selected?: SerializedAsset[];
 	accept?: string[];
 	onToggle?: (asset: SerializedAsset) => void;
 	onDelete?: (id: string) => void | Promise<void>;
-	apiBaseURL?: string;
 	emptyMessage?: string;
+	/** Optional controlled input value used by the standalone library page. */
+	search?: string;
+	/** Debounced query value; defaults to BrowseTab's local debounce. */
+	searchQuery?: string;
+	onSearchChange?: (value: string) => void;
 }) {
-	const [search, setSearch] = useState("");
+	const t = useTranslate();
+	const [localSearch, setLocalSearch] = useState("");
 	const [debouncedSearch, setDebouncedSearch] = useState("");
 	const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const selectable = typeof onToggle === "function";
+	const search = controlledSearch ?? localSearch;
+	const effectiveQuery = searchQuery ?? debouncedSearch;
+
+	useEffect(
+		() => () => {
+			if (debounceRef.current) clearTimeout(debounceRef.current);
+		},
+		[],
+	);
 
 	const handleSearch = (v: string) => {
-		setSearch(v);
+		if (onSearchChange) {
+			onSearchChange(v);
+			return;
+		}
+		setLocalSearch(v);
 		if (debounceRef.current) clearTimeout(debounceRef.current);
 		debounceRef.current = setTimeout(() => setDebouncedSearch(v), 300);
 	};
@@ -38,7 +59,7 @@ export function BrowseTab({
 	const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } =
 		useAssets({
 			folderId: folderId ?? undefined,
-			query: debouncedSearch || undefined,
+			query: effectiveQuery || undefined,
 			limit: 40,
 		});
 
@@ -54,14 +75,17 @@ export function BrowseTab({
 				<Input
 					value={search}
 					onChange={(e) => handleSearch(e.target.value)}
-					placeholder="Search files…"
+					maxLength={200}
+					placeholder={t("media.assets.searchPlaceholder", "Search files…")}
 					className="h-8 pl-7 text-sm"
 				/>
 				{search && (
 					<button
 						type="button"
+						title={t("media.actions.clearSearch", "Clear search")}
 						onClick={() => {
-							setSearch("");
+							if (onSearchChange) onSearchChange("");
+							else setLocalSearch("");
 							setDebouncedSearch("");
 						}}
 						className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
@@ -78,7 +102,7 @@ export function BrowseTab({
 			) : filtered.length === 0 ? (
 				<div className="flex flex-1 flex-col items-center justify-center gap-2 text-sm text-muted-foreground">
 					<Image className="size-8" />
-					<p>{emptyMessage}</p>
+					<p>{emptyMessage ?? t("media.assets.empty", "No files found")}</p>
 				</div>
 			) : (
 				<div className="flex-1 overflow-y-auto overscroll-contain">
@@ -90,7 +114,6 @@ export function BrowseTab({
 								selected={selected.some((s) => s.id === asset.id)}
 								onToggle={selectable ? () => onToggle(asset) : undefined}
 								onDelete={onDelete}
-								apiBaseURL={apiBaseURL}
 							/>
 						))}
 					</div>
@@ -105,7 +128,7 @@ export function BrowseTab({
 								{isFetchingNextPage ? (
 									<Loader2 className="mr-1 size-3 animate-spin" />
 								) : null}
-								Load more
+								{t("media.actions.loadMore", "Load more")}
 							</Button>
 						</div>
 					)}

package/src/plugins/media/client/components/media-picker/folder-tree.tsx

@@ -1,14 +1,15 @@
 import { useState } from "react";
 import {
 	useFolders,
-	useCreateFolder,
 	useDeleteFolder,
+	useCreateFolderForm,
 } from "../../hooks/use-media";
 import type { SerializedFolder } from "../../../types";
 import { FolderPlus } from "lucide-react";
 import { Input } from "@workspace/ui/components/input";
 import { Check, Folder, Trash2, ChevronRight, FolderOpen } from "lucide-react";
 import { cn } from "@workspace/ui/lib/utils";
+import { useCan, useNotify, useTranslate } from "@btst/stack/context";
 
 export function FolderTree({
 	selectedId,
@@ -17,23 +18,59 @@ export function FolderTree({
 	selectedId: string | null;
 	onSelect: (id: string | null) => void;
 }) {
+	const t = useTranslate();
+	const notify = useNotify();
 	const { data: rootFoldersRaw = [] } = useFolders(null);
 	const rootFolders =
 		rootFoldersRaw as import("../../../types").SerializedFolder[];
 	const [newFolderName, setNewFolderName] = useState("");
 	const [isCreating, setIsCreating] = useState(false);
-	const { mutateAsync: createFolder } = useCreateFolder();
 	const { mutateAsync: deleteFolder } = useDeleteFolder();
+	const { can: canCreateFolder } = useCan({
+		resource: "media:folder",
+		action: "create",
+	});
+	const { can: canDeleteFolder } = useCan({
+		resource: "media:folder",
+		action: "delete",
+		params: selectedId ? { id: selectedId } : undefined,
+	});
+	const createFolderForm = useCreateFolderForm({
+		parentId: selectedId ?? undefined,
+		onSuccess: () => {
+			setNewFolderName("");
+			setIsCreating(false);
+		},
+	});
 
 	const handleCreateFolder = async () => {
+		if (!canCreateFolder) return;
 		const name = newFolderName.trim();
 		if (!name) return;
+		await createFolderForm.submit({ name });
+	};
+
+	const handleDeleteFolder = async () => {
+		if (!selectedId || !canDeleteFolder) return;
+		if (
+			!confirm(
+				t(
+					"media.folders.deleteConfirm",
+					"Delete this folder? Assets inside will be unaffected.",
+				),
+			)
+		)
+			return;
 		try {
-			await createFolder({ name, parentId: selectedId ?? undefined });
-			setNewFolderName("");
-			setIsCreating(false);
-		} catch (err) {
-			console.error("[btst/media] Failed to create folder", err);
+			await deleteFolder(selectedId);
+			onSelect(null);
+			notify.success(t("media.toasts.folderDeleteSuccess", "Folder deleted"));
+		} catch (error) {
+			notify.error(
+				error instanceof Error
+					? error.message
+					: t("media.toasts.folderDeleteError", "Failed to delete folder"),
+			);
 		}
 	};
 
@@ -41,25 +78,30 @@ export function FolderTree({
 		<div className="flex h-full min-h-0 flex-col">
 			<div className="flex items-center justify-between px-2 py-2">
 				<span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-					Folders
+					{t("media.folders.title", "Folders")}
 				</span>
-				<button
-					type="button"
-					title="New folder"
-					onClick={() => setIsCreating((v) => !v)}
-					className="rounded p-0.5 hover:bg-muted"
-				>
-					<FolderPlus className="size-3.5 text-muted-foreground" />
-				</button>
+				{canCreateFolder ? (
+					<button
+						type="button"
+						title={t("media.folders.new", "New folder")}
+						onClick={() => setIsCreating((v) => !v)}
+						className="rounded p-0.5 hover:bg-muted"
+					>
+						<FolderPlus className="size-3.5 text-muted-foreground" />
+					</button>
+				) : null}
 			</div>
 
-			{isCreating && (
+			{isCreating && canCreateFolder && (
 				<div className="flex gap-1 px-2 pb-1">
 					<Input
 						autoFocus
 						value={newFolderName}
-						onChange={(e) => setNewFolderName(e.target.value)}
-						placeholder="Folder name"
+						onChange={(e) => {
+							setNewFolderName(e.target.value);
+							createFolderForm.clearErrors();
+						}}
+						placeholder={t("media.folders.namePlaceholder", "Folder name")}
 						className="h-6 text-xs"
 						onKeyDown={(e) => {
 							if (e.key === "Enter") void handleCreateFolder();
@@ -69,10 +111,17 @@ export function FolderTree({
 					<button
 						type="button"
 						onClick={handleCreateFolder}
+						disabled={createFolderForm.isSubmitting || !newFolderName.trim()}
+						title={t("media.folders.create", "Create folder")}
 						className="rounded px-1 py-0.5 text-xs hover:bg-muted"
 					>
 						<Check className="size-3" />
 					</button>
+					{createFolderForm.fieldErrors.name ? (
+						<p className="text-xs text-destructive">
+							{String(createFolderForm.fieldErrors.name)}
+						</p>
+					) : null}
 				</div>
 			)}
 
@@ -88,7 +137,9 @@ export function FolderTree({
 				>
 					<span className="size-3" />
 					<Folder className="size-3.5 shrink-0 text-muted-foreground" />
-					<span className="truncate">All files</span>
+					<span className="truncate">
+						{t("media.folders.allFiles", "All files")}
+					</span>
 				</button>
 
 				{rootFolders.map((folder) => (
@@ -101,26 +152,15 @@ export function FolderTree({
 				))}
 			</div>
 
-			{selectedId && (
+			{selectedId && canDeleteFolder && (
 				<div className="border-t px-2 py-1">
 					<button
 						type="button"
-						onClick={async () => {
-							if (
-								confirm("Delete this folder? Assets inside will be unaffected.")
-							) {
-								try {
-									await deleteFolder(selectedId);
-									onSelect(null);
-								} catch (err) {
-									console.error("[btst/media] Failed to delete folder", err);
-								}
-							}
-						}}
+						onClick={() => void handleDeleteFolder()}
 						className="flex items-center gap-1 text-xs text-destructive hover:underline"
 					>
 						<Trash2 className="size-3" />
-						Delete folder
+						{t("media.folders.delete", "Delete folder")}
 					</button>
 				</div>
 			)}