@hoardodile/ui 0.1.0 → 0.1.2

package/src/components/plugin-download-consent.tsx

@@ -9,6 +9,10 @@ import { useTranslation } from "react-i18next"
  * both host surfaces (the app and the workbench) so the user sees one
  * dialog with one contract wherever a plugin asks to download.
  *
+ * One entry = one batch question: a single download is an items array of
+ * one (rendered with the single-file layout); a batched plugin call is
+ * one dialog listing every item, answered all-or-nothing.
+ *
  * Presentational by design: the queue lives in the host's consent store
  * (`@hoardodile/host-web`), this component renders exactly one ticket
  * and reports the decision through callbacks. Copy comes from the shared
@@ -24,16 +28,20 @@ import { useTranslation } from "react-i18next"
  * (and to `@hoardodile/host-web`'s consent-store entry). Declared here
  * instead of imported so this package stays closure-clean.
  */
-export type PluginConsentTicket = {
-	readonly ticketId: string
-	readonly pluginId: string
-	readonly pluginName: string
+export type PluginConsentItem = {
 	readonly url: string
 	readonly dest: string
 	readonly sizeBytes?: number
 	readonly reason?: string
 }
 
+export type PluginConsentTicket = {
+	readonly ticketId: string
+	readonly pluginId: string
+	readonly pluginName: string
+	readonly items: readonly PluginConsentItem[]
+}
+
 export type PluginDownloadConsentDialogProps = {
 	/** Ticket to show; `null` hides the dialog (one at a time). */
 	readonly entry: PluginConsentTicket | null
@@ -45,10 +53,10 @@ export type PluginDownloadConsentDialogProps = {
 }
 
 /**
- * Renders the shared consent question: URL verbatim (selectable
- * monospace, never a link), the vault-relative destination and the
- * plugin's stated reason, with Allow / Deny and a session-remember
- * checkbox.
+ * Renders the shared consent question: every download URL verbatim
+ * (selectable monospace, never a link), its vault-relative destination
+ * and the plugin's stated reason, with Allow / Deny and a session-remember
+ * checkbox. A batch is one dialog listing all items.
  *
  * Design contract (hd-plugin-design): card + hairline + `--radius-2xl`
  * + `--shadow-dialog`, footer parted by an inset hairline, focus on the
@@ -61,6 +69,7 @@ export function PluginDownloadConsentDialog(
 	const { t } = useTranslation("ui", { useSuspense: false })
 	const formatBytes = props.formatBytes ?? ((bytes: number) => `${bytes} B`)
 	const activeId = entry === null ? null : entry.ticketId
+	const itemCount = entry === null ? 0 : entry.items.length
 	const [remember, setRemember] = useState(false)
 
 	// A fresh ticket starts with "remember" unchecked — the choice must
@@ -75,14 +84,23 @@ export function PluginDownloadConsentDialog(
 			onOpenChange={(open) => {
 				if (!open && activeId !== null) onDeny(activeId)
 			}}
-			title={t("pluginDownload.title", undefined)}
+			title={
+				entry === null || itemCount <= 1
+					? t("pluginDownload.title", undefined)
+					: t("pluginDownload.titleMany", { count: itemCount })
+			}
 			eyebrow={t("pluginDownload.eyebrow", undefined)}
 			description={
 				entry === null
 					? undefined
-					: t("pluginDownload.description", {
-							pluginName: entry.pluginName,
-						})
+					: itemCount <= 1
+						? t("pluginDownload.description", {
+								pluginName: entry.pluginName,
+							})
+						: t("pluginDownload.descriptionMany", {
+								pluginName: entry.pluginName,
+								count: itemCount,
+							})
 			}
 			size="md"
 			contentTestId="plugin-download-consent"
@@ -110,20 +128,26 @@ export function PluginDownloadConsentDialog(
 				</div>
 			}
 		>
-			{entry === null ? null : (
+			{entry === null ? null : itemCount <= 1 ? (
 				<ConsentBody
-					entry={entry}
+					entry={entry.items[0]!}
 					remember={remember}
 					onRememberChange={setRemember}
 					formatBytes={formatBytes}
 				/>
+			) : (
+				<ConsentBatch
+					items={entry.items}
+					remember={remember}
+					onRememberChange={setRemember}
+				/>
 			)}
 		</AppDialog>
 	)
 }
 
 function ConsentBody(props: {
-	readonly entry: PluginConsentTicket
+	readonly entry: PluginConsentItem
 	readonly remember: boolean
 	readonly onRememberChange: (value: boolean) => void
 	readonly formatBytes: (bytes: number) => string
@@ -132,17 +156,7 @@ function ConsentBody(props: {
 	const { t } = useTranslation("ui", { useSuspense: false })
 	return (
 		<div className="flex flex-col gap-4">
-			<div className="flex flex-col gap-1.5">
-				<span className="text-xs tracking-label text-muted-foreground uppercase">
-					{t("pluginDownload.urlLabel", undefined)}
-				</span>
-				<code
-					className="rounded-sm bg-muted px-2 py-1.5 text-xs text-secondary-foreground break-all select-all"
-					data-testid="plugin-download-url"
-				>
-					{entry.url}
-				</code>
-			</div>
+			<ConsentUrlField label={t("pluginDownload.urlLabel", undefined)} url={entry.url} />
 			<div className="flex flex-col gap-1.5">
 				<span className="text-xs tracking-label text-muted-foreground uppercase">
 					{t("pluginDownload.destLabel", undefined)}
@@ -165,19 +179,96 @@ function ConsentBody(props: {
 					{entry.reason}
 				</p>
 			) : null}
-			<div className="flex items-center gap-2 border-t pt-3">
-				<Checkbox
-					checked={remember}
-					onCheckedChange={(checked) => onRememberChange(checked === true)}
-					id="plugin-download-remember"
-				/>
-				<label
-					htmlFor="plugin-download-remember"
-					className="text-xs text-secondary-foreground select-none"
-				>
-					{t("pluginDownload.remember", undefined)}
-				</label>
-			</div>
+			<RememberRow remember={remember} onRememberChange={onRememberChange} />
+		</div>
+	)
+}
+
+/** Batch layout: one row per download, URL verbatim + dest + reason. */
+function ConsentBatch(props: {
+	readonly items: readonly PluginConsentItem[]
+	readonly remember: boolean
+	readonly onRememberChange: (value: boolean) => void
+}) {
+	const { items, remember, onRememberChange } = props
+	const { t } = useTranslation("ui", { useSuspense: false })
+	return (
+		<div className="flex flex-col gap-4">
+			<ul className="flex max-h-52 flex-col gap-3 overflow-y-auto pr-1">
+				{items.map((item, index) => (
+					<li
+						key={`${item.url}#${item.dest}`}
+						className="flex flex-col gap-1 rounded-md border border-border px-2.5 py-2"
+						data-testid={`plugin-download-item-${index}`}
+					>
+						<ConsentUrlField
+							label={t("pluginDownload.itemLabel", {
+								index: index + 1,
+							})}
+							url={item.url}
+							testId={`plugin-download-url-${index}`}
+						/>
+						<code
+							className="text-xs text-secondary-foreground break-all select-all"
+							data-testid={`plugin-download-dest-${index}`}
+						>
+							{item.dest}
+						</code>
+						{item.reason !== undefined && item.reason.length > 0 ? (
+							<p className="text-xs text-secondary-foreground italic">
+								{item.reason}
+							</p>
+						) : null}
+					</li>
+				))}
+			</ul>
+			<p className="text-xs text-muted-foreground">
+				{t("pluginDownload.batchNote", { count: items.length })}
+			</p>
+			<RememberRow remember={remember} onRememberChange={onRememberChange} />
+		</div>
+	)
+}
+
+function ConsentUrlField(props: {
+	readonly label: string
+	readonly url: string
+	readonly testId?: string
+}) {
+	return (
+		<div className="flex min-w-0 flex-col gap-1">
+			<span className="text-xs tracking-label text-muted-foreground uppercase">
+				{props.label}
+			</span>
+			<code
+				className="rounded-sm bg-muted px-2 py-1.5 text-xs text-secondary-foreground break-all select-all"
+				data-testid={props.testId ?? "plugin-download-url"}
+			>
+				{props.url}
+			</code>
+		</div>
+	)
+}
+
+function RememberRow(props: {
+	readonly remember: boolean
+	readonly onRememberChange: (value: boolean) => void
+}) {
+	const { remember, onRememberChange } = props
+	const { t } = useTranslation("ui", { useSuspense: false })
+	return (
+		<div className="flex items-center gap-2 border-t pt-3">
+			<Checkbox
+				checked={remember}
+				onCheckedChange={(checked) => onRememberChange(checked === true)}
+				id="plugin-download-remember"
+			/>
+			<label
+				htmlFor="plugin-download-remember"
+				className="text-xs text-secondary-foreground select-none"
+			>
+				{t("pluginDownload.remember", undefined)}
+			</label>
 		</div>
 	)
 }

package/src/icons/registry.ts

@@ -140,6 +140,7 @@ import { ServerIcon as ServerBoldWeight } from "@solar-icons/react/bold/server"
 import { SettingsIcon as SettingsBoldWeight } from "@solar-icons/react/bold/settings"
 import { ShareIcon as ShareBoldWeight } from "@solar-icons/react/bold/share"
 import { ShieldCheckIcon as ShieldCheckBoldWeight } from "@solar-icons/react/bold/shield-check"
+import { Shop2Icon as Shop2BoldWeight } from "@solar-icons/react/bold/shop-2"
 import { SidebarMinimalisticIcon as SidebarMinimalisticBoldWeight } from "@solar-icons/react/bold/sidebar-minimalistic"
 import { SliderHorizontalIcon as SliderHorizontalBoldWeight } from "@solar-icons/react/bold/slider-horizontal"
 import { SmartphoneIcon as SmartphoneBoldWeight } from "@solar-icons/react/bold/smartphone"
@@ -281,6 +282,7 @@ import { ServerIcon as ServerBoldDuotone } from "@solar-icons/react/bold-duotone
 import { SettingsIcon as SettingsBoldDuotone } from "@solar-icons/react/bold-duotone/settings"
 import { ShareIcon as ShareBoldDuotone } from "@solar-icons/react/bold-duotone/share"
 import { ShieldCheckIcon as ShieldCheckBoldDuotone } from "@solar-icons/react/bold-duotone/shield-check"
+import { Shop2Icon as Shop2BoldDuotone } from "@solar-icons/react/bold-duotone/shop-2"
 import { SidebarMinimalisticIcon as SidebarMinimalisticBoldDuotone } from "@solar-icons/react/bold-duotone/sidebar-minimalistic"
 import { SliderHorizontalIcon as SliderHorizontalBoldDuotone } from "@solar-icons/react/bold-duotone/slider-horizontal"
 import { SmartphoneIcon as SmartphoneBoldDuotone } from "@solar-icons/react/bold-duotone/smartphone"
@@ -421,6 +423,7 @@ import { ServerIcon as ServerLinear } from "@solar-icons/react/linear/server"
 import { SettingsIcon as SettingsLinear } from "@solar-icons/react/linear/settings"
 import { ShareIcon as ShareLinear } from "@solar-icons/react/linear/share"
 import { ShieldCheckIcon as ShieldCheckLinear } from "@solar-icons/react/linear/shield-check"
+import { Shop2Icon as Shop2Linear } from "@solar-icons/react/linear/shop-2"
 import { SidebarMinimalisticIcon as SidebarMinimalisticLinear } from "@solar-icons/react/linear/sidebar-minimalistic"
 import { SliderHorizontalIcon as SliderHorizontalLinear } from "@solar-icons/react/linear/slider-horizontal"
 import { SmartphoneIcon as SmartphoneLinear } from "@solar-icons/react/linear/smartphone"
@@ -1001,6 +1004,11 @@ export const ShieldCheck = createIcon({
 	boldDuotone: ShieldCheckBoldDuotone,
 	linear: ShieldCheckLinear,
 })
+export const Shop2 = createIcon({
+	bold: Shop2BoldWeight,
+	boldDuotone: Shop2BoldDuotone,
+	linear: Shop2Linear,
+})
 export const SidebarMinimalistic = createIcon({
 	bold: SidebarMinimalisticBoldWeight,
 	boldDuotone: SidebarMinimalisticBoldDuotone,