v4: playlists have categories of their own — a set apart from the dumps', which admins manage on /manage under "Playlist categories", next to "Dump categories". Each category now has a kind, dump or playlist, its slug and name unique within its kind only; migration 0025 rebuilds categories with the column, every existing one becoming a dump category with its dumps, and adds playlist_categories. A playlist's owner files it under any of them in the create and edit forms, and it shows them as chips on its card and its page, each leading to /playlists/<slug>.
/playlists is the new page of every public playlist, newest first (GET /api/playlists), and /playlists/<slug> a playlist category's, with a menu of the categories, linked from the user menu as "All playlists"; `playlists` is reserved as a dump category's slug, and one that had it is renamed. A profile's Playlists tab narrows to a playlist category with the same menu as its Dumps tab (?category=), and so do the Dumps and Playlists tabs of /search, each with its own kind (category and playlistCategory for GET /api/search), another tab dropping it. The category service takes the kind throughout, so a dump can't be filed under a playlist category nor the other way round, and categoryJoin is the one filter join the dump, follow and playlist services share. useCategories(kind) gives one kind's set from the one fetch, CategoryChips replaces the chips the dump card and page each drew, useCategoryFilter keeps a list to its category as the socket brings more, and useCategorySelection holds a form's picked categories. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
35
src/App.css
35
src/App.css
@@ -2237,11 +2237,11 @@ body.has-player .chat-fab {
|
||||
font-size: var(--text-2xs);
|
||||
}
|
||||
|
||||
.profile-columns .dump-card-categories {
|
||||
.profile-columns .category-links {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.profile-columns .dump-card-category-chip {
|
||||
.profile-columns .category-link {
|
||||
padding: 0.05rem 0.4rem;
|
||||
font-size: var(--text-2xs);
|
||||
}
|
||||
@@ -2761,9 +2761,11 @@ body.has-player .chat-fab {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* A list of dump or playlist cards in a group fills the group's column, its
|
||||
edges in line with the label's rule. */
|
||||
.page-group .dump-feed {
|
||||
/* A list of dump or playlist cards in a group, or right under a page's header
|
||||
as on /playlists, fills the column, its edges in line with the label's rule
|
||||
or the header. */
|
||||
.page-group .dump-feed,
|
||||
.page-content--narrow > .dump-feed {
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
}
|
||||
@@ -7249,6 +7251,21 @@ body.has-player .chat-fab {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* The category menu of the dumps and playlists tabs, at the end of the
|
||||
results' column, as at the end of a profile list's title row. */
|
||||
.search-filter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
max-width: 860px;
|
||||
padding: 0.75rem 1.25rem 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-filter:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-page-empty {
|
||||
padding: 3rem 1.25rem;
|
||||
color: var(--color-text-secondary);
|
||||
@@ -7532,15 +7549,15 @@ body.has-player .chat-fab {
|
||||
color: var(--color-on-accent);
|
||||
}
|
||||
|
||||
/* Read-only category chips on dump cards */
|
||||
.dump-card-categories {
|
||||
/* Read-only category chips on dump and playlist cards and pages */
|
||||
.category-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
.dump-card-category-chip {
|
||||
.category-link {
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--color-header-user-bg);
|
||||
@@ -7549,7 +7566,7 @@ body.has-player .chat-fab {
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.dump-card-category-chip:hover {
|
||||
.category-link:hover {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-on-accent);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user