;
+ const header =
+ setSearchStr('')}
+ onChange={setSearchStr}
+ onSubmit={null}
+ inputRef={searchInputRef}
+ />
+
+ ;
const createModal = setModalOpen(false)} size='tiny'>
New Playlist
-
-
-
+
+
;
@@ -185,22 +191,24 @@ export function PlaylistsPage() {
}
-// Icon (name + color) for a playlist item. File items use the FileGroup's mimetype/model icon
-// and color (video, pdf, ebook, image, ...) so they match the rest of the UI; zim/url are fixed.
-function itemIcon(item) {
+// Icon for a playlist item. File items use FileGroup's mimetype/model icon and color (video,
+// pdf, ebook, image, ...) so they match the rest of the UI; zim/url are fixed.
+function ItemIcon({item}) {
if (item.item_kind === 'file' && item.file_group) {
const fg = item.file_group;
const lowerPath = (fg.primary_path || '').toLowerCase();
- return {name: mimetypeIconName(fg.mimetype, lowerPath), color: mimetypeColor(fg.mimetype, lowerPath)};
+ const name = mimetypeIconName(fg.mimetype, lowerPath);
+ const color = mimetypeColor(fg.mimetype, lowerPath);
+ return ;
}
- if (item.item_kind === 'zim') return {name: 'book'};
+ if (item.item_kind === 'zim') return ;
if (item.item_kind === 'url') {
// A map-location URL (e.g. /map?lat=&lon=) gets a map marker; other URLs get the link icon.
const u = (item.url || '').toLowerCase();
- if (u.startsWith('/map')) return {name: 'map marker alternate'};
- return {name: 'linkify'};
+ if (u.startsWith('/map')) return ;
+ return ;
}
- return {name: 'file'};
+ return ;
}
@@ -278,13 +286,13 @@ function ItemTitle({item, label}) {
// The ordered items table, shared by the view and edit pages. When `editable`, the reorder/remove
// action buttons (and their column) are shown; otherwise the table is read-only.
function PlaylistItemsTable({items, editable, onMove, onRemove}) {
- return
}`})