app/components/admin/media-facets.tsx

Functions

Imports

It imports app/components/admin/tab-link.tsx, app/lib/media/view.mjs. Imported by app/routes/admin.media._index.tsx.

Source

1import { TabsNav } from "capsomer/react/tabs";
2
3import { TabLink } from "~/components/admin/tab-link";
4
5import type { hrefWith, sortHref } from "~/lib/media/view.mjs";
6
7import type { Route } from "../../routes/+types/admin.media._index";
8
9type Listing = Extract<Route.ComponentProps["loaderData"], { detail: unknown }>;
10
11const LENS_CHIPS = [
12  {
13    id: "unattached",
14    label: "Unattached",
15    hint:
16      "No post cites these. Not the same as unused: an asset placed by page code, " +
17      "like the roster photographs, is unattached by this measure and is live. " +
18      "Verify before deleting.",
19  },
20  {
21    id: "duplicates",
22    label: "Duplicates",
23    hint: "Files with byte-identical twins, matched on content hash alone.",
24  },
25  { id: "no-alt", label: "No alt text", hint: "Images with no alt text written yet." },
26  { id: "large", label: "Over 1 MB", hint: "Files over one mebibyte." },
27] as const;
28
29/** The lens chips, with the trash beside them, and the tag chips when any tag exists. */
30export function MediaFacets({
31  view,
32  lensCounts,
33  trashedCount,
34  tagCounts,
35  linkTo,
36}: {
37  view: Parameters<typeof sortHref>[0];
38  lensCounts: Listing["lensCounts"];
39  trashedCount: Listing["trashedCount"];
40  tagCounts: Listing["tagCounts"];
41  linkTo: (over?: Parameters<typeof hrefWith>[1]) => string;
42}) {
43  const activeLens = LENS_CHIPS.find((l) => l.id === view.lens);
44  const tagHref = (tag: string) => linkTo({ tag: view.tag === tag ? "" : tag, page: 1 });
45
46  return (
47    <>
48      <div className="app-facet">
49        <TabsNav aria-label="Show" variant="line">
50          <TabLink
51            to={linkTo({ lens: "", trash: false, page: 1 })}
52            current={!view.lens && !view.trash}
53            count={lensCounts.all}
54          >
55            All
56          </TabLink>
57          {LENS_CHIPS.map((lens) => {
58            const n = lensCounts[lens.id === "no-alt" ? "noAlt" : lens.id];
59            return (
60              <TabLink
61                key={lens.id}
62                to={linkTo({ lens: lens.id, trash: false, page: 1 })}
63                current={view.lens === lens.id}
64                count={n}
65                title={lens.hint}
66              >
67                {lens.label}
68              </TabLink>
69            );
70          })}
71          <TabLink
72            to={linkTo({ trash: !view.trash, lens: "", page: 1, key: "" })}
73            current={view.trash}
74            count={trashedCount}
75            title="A library view, not a takedown. A trashed file keeps its address and any page using it is unchanged."
76          >
77            Trash
78          </TabLink>
79        </TabsNav>
80        <p className="cap-muted">
81          {activeLens ? activeLens.hint : "everything the library knows about"}
82        </p>
83      </div>
84
85      {tagCounts.length > 0 ? (
86        <div className="app-facet">
87          <TabsNav aria-label="Tags" variant="line">
88            {tagCounts.map((t) => (
89              <TabLink key={t.tag} to={tagHref(t.tag)} current={view.tag === t.tag} count={t.n}>
90                {t.tag}
91              </TabLink>
92            ))}
93          </TabsNav>
94          <p className="cap-muted">yours, in the inspector</p>
95        </div>
96      ) : null}
97    </>
98  );
99}