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

Functions

Imports

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

Source

1import { Link } from "react-router";
2import { Disclosure } from "capsomer/react/disclosure";
3import { TabsNav } from "capsomer/react/tabs";
4
5import { TabLink } from "~/components/admin/tab-link";
6
7import { MediaDisplayGroup } from "~/components/admin/media-display-group";
8import { displaySummary, sortHref } from "~/lib/media/view.mjs";
9import type { hrefWith } from "~/lib/media/view.mjs";
10
11const MEDIA_SHORTCUTS = [
12  { keys: "cmd K", what: "Focus search from anywhere" },
13  { keys: "/", what: "Focus search" },
14  { keys: "up down", what: "Move through results" },
15  { keys: "enter", what: "Copy the address" },
16  { keys: "shift enter", what: "Open details" },
17  { keys: "arrows", what: "Move through the grid" },
18  { keys: "x", what: "Select the tile under the cursor" },
19  { keys: "c", what: "Copy the address of the tile under the cursor" },
20  { keys: "escape", what: "Clear the search or the selection" },
21] as const;
22
23/** Select all, the layout toggle, the display options and the keyboard shortcuts. */
24export function MediaDisplayBar({
25  visible,
26  allShown,
27  setSelected,
28  q,
29  filter,
30  modified,
31  view,
32  linkTo,
33}: {
34  visible: string[];
35  allShown: boolean;
36  setSelected: (keys: string[]) => void;
37  q: string;
38  filter: string;
39  modified: boolean;
40  view: Parameters<typeof sortHref>[0];
41  linkTo: (over?: Parameters<typeof hrefWith>[1]) => string;
42}) {
43  return (
44    <div className="app-actions">
45      {/* No `name`, so it stays out of the bulk form's submission. */}
46      {visible.length > 0 ? (
47        <label className="cap-check">
48          <input
49            type="checkbox"
50            checked={allShown}
51            onChange={() => setSelected(allShown ? [] : visible)}
52          />
53          {view.tag || q || filter !== "all"
54            ? `Select all ${visible.length} shown`
55            : `Select all ${visible.length}`}
56        </label>
57      ) : null}
58
59      <TabsNav aria-label="Layout" size="sm">
60        {[
61          ["list", "List"],
62          ["grid", "Grid"],
63        ].map(([id, label]) => (
64          <TabLink key={id} to={linkTo({ view: id })} current={view.view === id}>
65            {label}
66          </TabLink>
67        ))}
68      </TabsNav>
69
70      <Disclosure summary={`Display: ${displaySummary(view)}`}>
71        <div className="app-form">
72          <MediaDisplayGroup
73            label="Group by"
74            options={[
75              ["flat", "Flat"],
76              ["folder", "Folder"],
77              ["month", "Month"],
78            ]}
79            current={view.group}
80            hrefFor={(id) => linkTo({ group: id })}
81          />
82          <MediaDisplayGroup
83            label="Sort"
84            options={[
85              ["added", "Newest"],
86              ["name", "A to Z"],
87              ["size", "Largest"],
88              ["usage", "Usage"],
89            ]}
90            current={view.sort}
91            hrefFor={(id) => sortHref(view, id)}
92          />
93          <MediaDisplayGroup
94            label="Direction"
95            options={[
96              ["desc", "Descending"],
97              ["asc", "Ascending"],
98            ]}
99            current={view.dir}
100            hrefFor={(id) => linkTo({ dir: id, page: 1 })}
101          />
102          <MediaDisplayGroup
103            label="Tile size"
104            options={[
105              ["s", "S"],
106              ["m", "M"],
107              ["l", "L"],
108            ]}
109            current={view.size}
110            hrefFor={(id) => linkTo({ size: id })}
111          />
112          {modified ? (
113            <div>
114              <Link to="/admin/media" className="cap-btn" data-size="sm">
115                Reset to defaults
116              </Link>
117            </div>
118          ) : null}
119        </div>
120      </Disclosure>
121
122      <Disclosure summary="Keyboard shortcuts">
123        <dl className="app-facts">
124          {MEDIA_SHORTCUTS.map((s) => (
125            <div key={s.keys} className="app-fact">
126              <dt>
127                <kbd>{s.keys}</kbd>
128              </dt>
129              <dd>{s.what}</dd>
130            </div>
131          ))}
132        </dl>
133      </Disclosure>
134    </div>
135  );
136}