app/components/admin/media-bulk-bar.tsx

Functions

Imports

It imports app/components/admin/bulk-tag-controls.tsx, app/components/admin/toast.tsx, app/lib/clipboard.ts, app/lib/media/byte-size.mjs. Imported by app/components/admin/media-grid.tsx.

Source

1import { BulkTagControls } from "~/components/admin/bulk-tag-controls";
2import { toast } from "~/components/admin/toast";
3import { copyText } from "~/lib/clipboard";
4import { byteSize } from "~/lib/media/byte-size.mjs";
5
6import type { Route } from "../../routes/+types/admin.media._index";
7
8type Listing = Extract<Route.ComponentProps["loaderData"], { detail: unknown }>;
9
10/** The bar over a selection: count and size, copy addresses, bulk tags, trash, clear. */
11export function BulkBar({
12  objects,
13  chosen,
14  setSelected,
15  setConfirmingTrash,
16  tagCounts,
17}: {
18  objects: Listing["objects"];
19  chosen: string[];
20  setSelected: (keys: string[]) => void;
21  setConfirmingTrash: (value: boolean) => void;
22  tagCounts: Listing["tagCounts"];
23}) {
24  return (
25    <div className="cap-bulk" role="group" aria-label="Bulk actions">
26      {/* Not a live region: it mounts with its number, and the grid's own status region announces it. */}
27      <p className="cap-bulk-count">
28        {chosen.length} selected{" "}
29        <span className="cap-bulk-detail">
30          {byteSize(
31            objects
32              .filter((o) => chosen.includes(o.key))
33              .reduce((sum, o) => sum + o.size, 0),
34          )}
35        </span>
36      </p>
37      <div className="cap-bulk-actions">
38        {/* `type="button"` so it never submits the form it sits in. One address per line: that pastes usefully. */}
39        <button
40          type="button"
41          className="cap-btn"
42          onClick={() => {
43            const addresses = objects
44              .filter((o) => chosen.includes(o.key))
45              .map((o) => o.url)
46              .join("\n");
47            copyText(addresses)
48              .then(() =>
49                toast(`Copied ${chosen.length} address${chosen.length === 1 ? "" : "es"}`),
50              )
51              .catch(() => toast("The clipboard refused. Open a file to copy its address."));
52          }}
53        >
54          Copy addresses
55        </button>
56        <BulkTagControls listId="media-bulk-tags" options={tagCounts.map((t) => t.tag)} />
57        {/* A `type="button"` opens the modal, because submitting from here would skip it. */}
58        <button type="button" className="cap-btn" onClick={() => setConfirmingTrash(true)}>
59          Move to trash
60        </button>
61      </div>
62      <button
63        type="button"
64        className="cap-btn cap-bulk-clear"
65        data-variant="quiet"
66        onClick={() => setSelected([])}
67      >
68        Clear
69      </button>
70    </div>
71  );
72}