@spree/dashboard-core 6.0.3 → 6.0.4

package/src/products/product-form-cards.tsx

@@ -17,7 +17,8 @@ import { type CurrencyCode, randomUUID } from '@spree/core'
 import type { MediaType, ProductFormValues } from '@spree/dashboard-core'
 import {
   getApiClient,
-  MediaPickerSheet,
+  MediaPickerDialog,
+  mediaPickerListParams,
   parseVideoUrl,
   ResourceMultiAutocomplete,
   Slot,
@@ -34,16 +35,20 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  Checkbox,
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuSeparator,
   ContextMenuTrigger,
+  CurrencyLabel,
+  cn,
   DragHandle,
   Field,
   FieldError,
   FieldLabel,
   Input,
+  Item,
   RichTextEditor,
   Select,
   SelectContent,
@@ -102,7 +107,6 @@ import {
   collectionAutocompleteProps,
   useFormCategories as useCategories,
   useFormCollections as useCollections,
-  useFormDeleteProductMedia as useDeleteProductMedia,
   useFormDeliveryProfiles as useDeliveryProfiles,
   useFormOptionTypesByIds as useOptionTypesByIds,
   useFormProductType as useProductType,
@@ -238,13 +242,13 @@ export function PricesCard({
             value={currency}
             onValueChange={(next) => setCurrency(currencies.find((code) => code === next) ?? null)}
           >
-            <SelectTrigger size="sm" className="w-24">
-              <SelectValue />
+            <SelectTrigger size="sm" className="w-28">
+              <SelectValue>{(code: string) => <CurrencyLabel code={code} />}</SelectValue>
             </SelectTrigger>
             <SelectContent>
               {currencies.map((c) => (
                 <SelectItem key={c} value={c}>
-                  {c}
+                  <CurrencyLabel code={c} />
                 </SelectItem>
               ))}
             </SelectContent>
@@ -320,12 +324,14 @@ export function MediaCard({
 }) {
   const { t } = useTranslation()
   const fileUpload = useFileUpload()
-  const deleteMedia = useDeleteProductMedia(productId ?? '')
   const confirm = useConfirm()
   const [pending, setPending] = useState<PendingUpload[]>([])
   const [editingIndex, setEditingIndex] = useState<number | null>(null)
   const [addingVideo, setAddingVideo] = useState(false)
   const [pickingFromLibrary, setPickingFromLibrary] = useState(false)
+  // Tiles picked for a bulk action, by their stable sortable id so a reorder
+  // keeps the selection on the same files.
+  const [selected, setSelected] = useState<Set<string>>(new Set())
   const mediaLibrary = getApiClient().mediaLibrary
   const fileInputRef = useRef<HTMLInputElement>(null)
 
@@ -381,6 +387,7 @@ export function MediaCard({
               {
                 signed_id: result.signedId,
                 alt: file.name,
+                filename: file.name,
                 position: current.length + 1,
                 media_type: file.type.startsWith('video/')
                   ? ('video' as const)
@@ -475,6 +482,7 @@ export function MediaCard({
         picked.map((media) => ({
           source_media_id: media.id,
           alt: media.alt ?? undefined,
+          filename: media.filename ?? null,
           media_type: (media.media_type ?? 'image') as MediaType,
           previewUrl: media.small_url ?? media.original_url ?? undefined,
           videoUrl: media.video_url ?? null,
@@ -484,49 +492,55 @@ export function MediaCard({
     [appendMedia],
   )
 
-  const handleDelete = useCallback(
-    async (index: number) => {
+  /**
+   * Takes the rows at `indices` out of the form. Saved rows are only marked
+   * for removal — the product save deletes them — so a removal is an unsaved
+   * change like any other, undone by Discard. Pre-save uploads just leave.
+   */
+  const removeEntries = useCallback(
+    (indices: number[]) => {
       const current = form.getValues('media') ?? []
-      const entry = current[index]
-      if (!entry) return
-      const confirmed = await confirm({
-        message: t('admin.products.media.delete_confirm'),
-        variant: 'destructive',
-        confirmLabel: t('admin.actions.delete'),
-      })
-      if (!confirmed) return
-
-      // Persisted entries call the dedicated DELETE endpoint first so we
-      // don't drop the form-state entry until the server actually removed it.
-      // Pre-save entries (signed_id only, no id) just disappear from form.
-      if (entry.id && productId) {
-        try {
-          await deleteMedia.mutateAsync(entry.id)
-        } catch {
-          toastManager.add({ type: 'error', title: t('admin.errors.failed_to_delete') })
-          return
-        }
+      const removed = new Set(indices.filter((index) => current[index]))
+      if (removed.size === 0) return
+
+      // A pre-save upload's preview is a Blob URL that Discard can never bring
+      // back (it was never in the saved state), so release it now.
+      for (const index of removed) {
+        const entry = current[index]
+        if (!entry.id && entry.previewUrl?.startsWith('blob:'))
+          URL.revokeObjectURL(entry.previewUrl)
       }
 
-      // Release the Blob URL we created at upload time so the browser can
-      // reclaim its backing memory. Server-served previewUrls aren't blob:
-      // URLs and don't need revocation.
-      if (entry.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(entry.previewUrl)
+      const removedIds = [...removed].flatMap((index) => current[index].id ?? [])
+      if (removedIds.length > 0) {
+        const marked = form.getValues('removed_media_ids') ?? []
+        form.setValue('removed_media_ids', [...marked, ...removedIds], { shouldDirty: true })
+      }
 
-      const next = current.filter((_, i) => i !== index).map((m, i) => ({ ...m, position: i + 1 }))
+      const next = current
+        .filter((_, i) => !removed.has(i))
+        .map((m, i) => ({ ...m, position: i + 1 }))
       form.setValue('media', next, { shouldDirty: true })
 
       // Close or shift the edit sheet so it can't reference a stale index.
-      // If the deleted row was being edited, close. If the deleted row was
-      // BEFORE the open one, shift down by one.
-      setEditingIndex((current) => {
-        if (current == null) return current
-        if (current === index) return null
-        if (current > index) return current - 1
-        return current
+      setEditingIndex((open) => {
+        if (open == null || removed.has(open)) return null
+        return open - [...removed].filter((i) => i < open).length
       })
     },
-    [form, productId, deleteMedia, confirm, t],
+    [form],
+  )
+
+  const handleDelete = useCallback(
+    async (index: number) => {
+      const confirmed = await confirm({
+        message: t('admin.products.media.delete_confirm'),
+        variant: 'destructive',
+        confirmLabel: t('admin.actions.remove'),
+      })
+      if (confirmed) removeEntries([index])
+    },
+    [confirm, removeEntries, t],
   )
 
   // Revoke any remaining blob: previewUrls when the card unmounts (the
@@ -544,14 +558,74 @@ export function MediaCard({
 
   const editingEntry = editingIndex !== null ? items[editingIndex] : null
 
+  // Read against the current rows, so a file removed elsewhere drops out.
+  const selectedIndices = sortableIds.flatMap((id, i) => (selected.has(id) ? [i] : []))
+  const selecting = selectedIndices.length > 0
+  const allSelected = selecting && selectedIndices.length === items.length
+
+  function toggleSelected(id: string) {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  async function handleBulkDelete() {
+    const count = selectedIndices.length
+    const confirmed = await confirm({
+      message: t('admin.products.media.delete_selected_confirm', { count }),
+      variant: 'destructive',
+      confirmLabel: t('admin.actions.remove'),
+    })
+    if (!confirmed) return
+    removeEntries(selectedIndices)
+    setSelected(new Set())
+  }
+
   return (
     <>
       <Card className="scroll-mt-[calc(var(--spacing-header-height)+1.5rem)]">
-        <CardHeader>
-          <CardTitle>
-            <ImageIcon className="size-4" />
-            {t('admin.pages.products.section_media')}
-          </CardTitle>
+        {/* While selecting, the bar's checkbox, count and action sit on one
+            centred line at the title row's height. */}
+        <CardHeader className={selecting ? 'items-center' : undefined}>
+          {selecting ? (
+            <>
+              {/* The card keeps its name while the bar stands in for it. */}
+              <CardTitle className="sr-only">{t('admin.pages.products.section_media')}</CardTitle>
+              <div className="flex items-center gap-2 font-medium text-base">
+                <Checkbox
+                  checked={allSelected}
+                  indeterminate={!allSelected}
+                  onCheckedChange={() =>
+                    setSelected(allSelected ? new Set() : new Set(sortableIds))
+                  }
+                  aria-label={t('admin.products.media.select_all')}
+                />
+                {t('admin.products.media.selected_count', { count: selectedIndices.length })}
+              </div>
+              <CardAction className="flex">
+                <Button
+                  type="button"
+                  variant="destructive-ghost"
+                  size="sm"
+                  // A 28px button in a row sized for the title would push the
+                  // header taller than its resting height.
+                  className="-my-[3.5px]"
+                  onClick={handleBulkDelete}
+                >
+                  <TrashIcon className="size-4" />
+                  {t('admin.actions.remove')}
+                </Button>
+              </CardAction>
+            </>
+          ) : (
+            <CardTitle>
+              <ImageIcon className="size-4" />
+              {t('admin.pages.products.section_media')}
+            </CardTitle>
+          )}
         </CardHeader>
         <CardContent className="flex flex-col gap-4">
           {(items.length > 0 || pending.length > 0) && (
@@ -566,14 +640,17 @@ export function MediaCard({
                       downloadUrl={media.downloadUrl}
                       alt={media.alt ?? ''}
                       mediaType={media.media_type ?? 'image'}
-                      onEdit={() => setEditingIndex(index)}
+                      selected={selected.has(sortableIds[index])}
+                      selecting={selecting}
+                      onToggleSelect={() => toggleSelected(sortableIds[index])}
                       onDelete={() => handleDelete(index)}
+                      onEdit={() => setEditingIndex(index)}
                     />
                   ))}
                   {pending.map((upload) => (
                     <div
                       key={upload.id}
-                      className="relative aspect-square overflow-hidden rounded-lg border border-border bg-muted"
+                      className="relative aspect-square overflow-hidden rounded-xl border border-border bg-muted"
                     >
                       {upload.file.type.startsWith('video/') ? (
                         <video
@@ -614,7 +691,7 @@ export function MediaCard({
             onClick={() => fileInputRef.current?.click()}
           >
             <ImagePlusIcon className="size-8 text-muted-foreground" />
-            <p className="text-sm text-muted-foreground">{t('admin.products.media.drop_hint')}</p>
+            <p className="text-base text-muted-foreground">{t('admin.products.media.drop_hint')}</p>
             <p className="text-xs text-muted-foreground">
               {t('admin.products.media.file_types_hint')}
             </p>
@@ -652,19 +729,36 @@ export function MediaCard({
         </CardContent>
       </Card>
       <AddVideoDialog open={addingVideo} onOpenChange={setAddingVideo} onAdd={handleAddVideo} />
-      {/* Not merely closed — the sheet reads the store context on mount, and
+      {/* Not merely closed — the dialog reads the store context on mount, and
           a panel without one has no library to pick from anyway. */}
       {mediaLibrary && (
-        <MediaPickerSheet<Media>
+        <MediaPickerDialog<Media>
           open={pickingFromLibrary}
           onOpenChange={setPickingFromLibrary}
           queryKey="product-media-library"
-          search={async (query) =>
+          // Products take video too, which offers the picker's Type filter.
+          accept="image/png,image/jpeg,image/webp,image/gif,video/mp4,video/webm,video/quicktime"
+          search={async (query, options) =>
             (await mediaLibrary?.list({
               limit: 48,
-              ...(query ? { filename_cont: query } : {}),
+              ...mediaPickerListParams(query, options),
             })) ?? { data: [] }
           }
+          // Uploads land in the library and arrive picked, ready to add.
+          onUpload={
+            mediaLibrary.create
+              ? async (file) => {
+                  const upload = await fileUpload.mutateAsync(file)
+                  return (await mediaLibrary.create?.({
+                    signed_id: upload.signedId,
+                    alt: file.name,
+                    // A video row validates its file as video; unset, it
+                    // defaults to image and the upload is refused.
+                    media_type: file.type.startsWith('video/') ? 'video' : 'image',
+                  })) as Media
+                }
+              : undefined
+          }
           onConfirm={handleAddFromLibrary}
         />
       )}
@@ -691,8 +785,11 @@ function SortableMediaThumbnail({
   alt,
   mediaType,
   downloadUrl,
-  onEdit,
+  selected,
+  selecting,
+  onToggleSelect,
   onDelete,
+  onEdit,
 }: {
   sortableId: string
   previewUrl: string | null
@@ -700,8 +797,12 @@ function SortableMediaThumbnail({
   mediaType: MediaType
   /** Absent until the row is saved — a pre-save upload has no server URL. */
   downloadUrl?: string | null
-  onEdit: () => void
+  selected: boolean
+  /** Any tile is selected: clicks select rather than edit, and boxes show. */
+  selecting: boolean
+  onToggleSelect: () => void
   onDelete: () => void
+  onEdit: () => void
 }) {
   const { t } = useTranslation()
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
@@ -726,16 +827,21 @@ function SortableMediaThumbnail({
             data-slot="media-thumbnail"
             role="button"
             tabIndex={0}
-            onClick={onEdit}
+            aria-pressed={selecting ? selected : undefined}
+            // While any tile is selected a click adds to the selection, as in
+            // a file browser; otherwise it opens the edit sheet.
+            onClick={selecting ? onToggleSelect : onEdit}
             onKeyDown={(e) => {
               if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault()
-                onEdit()
+                if (selecting) onToggleSelect()
+                else onEdit()
               }
             }}
-            className={`group relative aspect-square cursor-pointer bg-muted overflow-hidden rounded-md border border-border transition-colors hover:border-muted-foreground focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 ${
-              isDragging ? 'opacity-40 ring-2 ring-primary/40' : ''
-            }`}
+            className={cn(
+              'group relative aspect-square cursor-pointer overflow-hidden rounded-xl border border-border-control bg-card outline-none transition-shadow focus-visible:shadow-field-focus',
+              isDragging && 'opacity-40 ring-2 ring-primary/40',
+            )}
           />
         }
       >
@@ -747,14 +853,14 @@ function SortableMediaThumbnail({
             muted
             playsInline
             preload="metadata"
-            className="pointer-events-none size-full object-cover"
+            className="pointer-events-none size-full object-contain"
           />
         ) : previewUrl ? (
           <img
             src={previewUrl}
             alt={alt}
             draggable={false}
-            className="pointer-events-none size-full object-cover"
+            className="pointer-events-none size-full object-contain"
           />
         ) : (
           <div className="flex size-full items-center justify-center text-muted-foreground">
@@ -766,8 +872,33 @@ function SortableMediaThumbnail({
           </div>
         )}
 
+        {/* Hover darkens the tile so its checkbox and grip stand out; a picked
+            tile is washed out instead, so the picked files read at a glance
+            without a ring around each one. */}
+        <span
+          aria-hidden
+          className={cn(
+            'pointer-events-none absolute inset-0 transition-colors',
+            selected ? 'bg-card/50' : 'bg-black/0 group-hover:bg-black/50',
+          )}
+        />
+
+        <Checkbox
+          checked={selected}
+          onCheckedChange={onToggleSelect}
+          // Keep the click on the box from also opening the sheet.
+          onClick={(e) => e.stopPropagation()}
+          aria-label={t('admin.products.media.select_item', { name: alt })}
+          className={cn(
+            'absolute top-2 left-2 z-10 bg-card transition-opacity',
+            !selecting &&
+              !selected &&
+              'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100',
+          )}
+        />
+
         {mediaType !== 'image' && (
-          <span className="pointer-events-none absolute left-1.5 top-1.5 z-10 flex size-6 items-center justify-center rounded-full bg-black/60 text-white">
+          <span className="pointer-events-none absolute bottom-2 left-2 z-10 flex size-6 items-center justify-center rounded-full bg-black/60 text-white">
             <PlayIcon className="size-3 fill-current" />
           </span>
         )}
@@ -805,7 +936,7 @@ function SortableMediaThumbnail({
         <ContextMenuSeparator />
         <ContextMenuItem variant="destructive" onClick={onDelete}>
           <TrashIcon />
-          {t('admin.actions.delete')}
+          {t('admin.actions.remove')}
         </ContextMenuItem>
       </ContextMenuContent>
     </ContextMenu>
@@ -869,13 +1000,13 @@ export function SEOCard({ form, product }: FormCardProps & { product?: Product }
         </CardTitle>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
-        <div className="rounded-lg border border-border p-4 space-y-1">
-          <p className="text-sm font-medium text-blue-700 truncate">{previewTitle}</p>
+        <Item variant="outline" className="flex-col items-stretch gap-1">
+          <p className="text-base font-medium text-blue-700 truncate">{previewTitle}</p>
           <p className="text-xs text-green-700 truncate">example.com/products/{previewSlug}</p>
           {metaDescription && (
             <p className="text-xs text-muted-foreground line-clamp-2">{metaDescription}</p>
           )}
-        </div>
+        </Item>
 
         <Field>
           <FieldLabel htmlFor="product-slug">{t('admin.fields.slug.label')}</FieldLabel>
@@ -1278,12 +1409,12 @@ export function TaxCard({ form }: FormCardProps) {
         )}
 
         {overrides.length > 0 && (
-          <div className="rounded-md border bg-muted/30 p-3 text-sm">
+          <Item variant="outline" className="flex-col items-stretch gap-1">
             <p className="font-medium">{t('admin.products.tax.variant_overrides_heading')}</p>
-            <p className="text-muted-foreground mt-1">
+            <p className="text-muted-foreground">
               {t('admin.products.tax.variant_overrides_description')}
             </p>
-            <ul className="mt-3 space-y-2">
+            <ul className="mt-2 space-y-2">
               {overrides.map(({ variant, index }) => {
                 const categoryName =
                   taxCategories.find((c) => c.id === variant.tax_category_id)?.name ??
@@ -1309,7 +1440,7 @@ export function TaxCard({ form }: FormCardProps) {
                 )
               })}
             </ul>
-          </div>
+          </Item>
         )}
       </CardContent>
     </Card>

package/src/products/product-form-mapping.ts

@@ -110,6 +110,7 @@ export function mediaToFormValues(media: PanelMedia, index: number, formKey = 'p
     // on a video row resolves to its poster, so none of them work here.
     videoUrl: media.video_url,
     downloadUrl: media.download_url,
+    filename: media.filename ?? null,
   }
 }
 

package/src/products/product-schema.ts

@@ -129,6 +129,8 @@ export const mediaFormSchema = z
     focal_point_y: z.number().min(0).max(1).nullable().optional(),
     // UI-only — strip at submit.
     previewUrl: z.string().optional(),
+    // The file's name, to tell rows apart where alt text is blank. UI-only.
+    filename: z.string().nullable().optional(),
     // Larger rendition for the edit sheet; previewUrl is grid-sized and
     // visibly pixelates when blown up. Absent before save, where the blob URL
     // in previewUrl is full resolution anyway.
@@ -225,6 +227,11 @@ export const productFormSchema = z.object({
   // new uploads ride the same product PATCH.
   media: z.array(mediaFormSchema).optional(),
 
+  // Saved media the merchant removed. The product save leaves omitted media
+  // alone, so these go through the media DELETE endpoint once the save
+  // succeeds — removal stays an unsaved change, undone by Discard.
+  removed_media_ids: z.array(z.string()).optional(),
+
   // Downloadable files, staged pre-save on the new product page and shipped in
   // the product POST. Edit uses the live API-driven card instead, so this stays
   // empty there.
@@ -274,6 +281,7 @@ export function newProductFormDefaults(): ProductFormValues {
     ],
     custom_fields: [],
     media: [],
+    removed_media_ids: [],
     digital_assets: [],
     product_publications: [],
   }

package/src/products/product-types.ts

@@ -33,6 +33,8 @@ export interface PanelMedia {
   large_url?: string | null
   xlarge_url?: string | null
   download_url?: string | null
+  /** The file's own name; absent on a panel whose serializer omits it. */
+  filename?: string | null
 }
 
 export interface PanelVariant {

package/src/products/use-product-form-data.ts

@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useCallback } from 'react'
 import type {
   PanelCollection,
   PanelDeliveryProfile,
@@ -162,9 +163,35 @@ export function useFormCartonPackageTypes() {
 }
 
 /**
- * Removing a file already on the product. A panel whose client registers no
- * deletion answers a no-op mutation, so the gallery still drops the row from
- * the form and the save reconciles it.
+ * Deletes the media a product form marked for removal, after the product
+ * itself saved. Resolves to how many deletes failed, so the form can say so.
+ */
+export function useCommitRemovedProductMedia(productId: string) {
+  const client = getApiClient()
+  const queryClient = useQueryClient()
+  const mediaKey = useResourceKey('products', productId, 'media')
+
+  return useCallback(
+    async (mediaIds: string[] | undefined) => {
+      // Independent deletes, so all at once: a bulk removal of twenty files
+      // waits on one round trip rather than twenty.
+      const results = await Promise.allSettled(
+        (mediaIds ?? []).map((mediaId) => client.deleteProductMedia?.(productId, mediaId)),
+      )
+      const failed = results.filter((result) => result.status === 'rejected').length
+      if (mediaIds?.length) await queryClient.invalidateQueries({ queryKey: mediaKey })
+      return failed
+    },
+    [client, productId, queryClient, mediaKey],
+  )
+}
+
+/**
+ * Removing a file already on the product, straight away.
+ *
+ * @deprecated The product form now removes files on save — mark them in
+ * `removed_media_ids` and commit with `useCommitRemovedProductMedia`. Kept
+ * until the next minor release.
  */
 export function useFormDeleteProductMedia(productId: string) {
   const client = getApiClient()

package/src/products/variant-edit-sheet.tsx

@@ -315,7 +315,7 @@ export function VariantEditSheet({ form, variantIndex, formKey, open, onOpenChan
 
           {cartonTypesSupported && (
             <FormSection title={t('admin.products.variants.sheet.packing')}>
-              <p className="text-sm text-muted-foreground">
+              <p className="text-base text-muted-foreground">
                 {t('admin.products.variants.sheet.packing_help')}
               </p>
               {knownEmpty && (
@@ -447,7 +447,7 @@ export function VariantEditSheet({ form, variantIndex, formKey, open, onOpenChan
           )}
 
           <FormSection title={t('admin.products.variants.sheet.customs')}>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-base text-muted-foreground">
               {t('admin.products.variants.sheet.customs_help')}
             </p>
             <div className="grid grid-cols-2 gap-3">
@@ -503,7 +503,7 @@ export function VariantEditSheet({ form, variantIndex, formKey, open, onOpenChan
           </FormSection>
 
           <FormSection title={t('admin.products.variants.sheet.ordering')}>
-            <p className="text-sm text-muted-foreground">
+            <p className="text-base text-muted-foreground">
               {t('admin.products.variants.sheet.ordering_help')}
             </p>
             <div className="grid grid-cols-2 gap-3">