v4: the playlists page is reachable at every width, and lists the user's own — below 1150px the header's text link was hidden and nothing replaced it: the avatar menu's "My playlists" led to the user's own, and a guest has no menu. The menu's entry is now "Playlists", to /playlists, at every width, and the page gains a tab after its orders, "Mine", for a signed-in user: their own playlists, private ones too, from GET /api/users/:id/playlists in the default order, narrowed by the category menu and kept live as the others are. It is /playlists?mine=1 (PLAYLISTS_TABS, parsePlaylistsTab, shared/paths.ts), a tab taking the order's place; a guest isn't offered it, and its link sends one to sign in. PlaylistSortTabs takes the tabs it shows, a profile's being the orders alone. The text link shows to a guest at every width, their header giving up its margins under 400px rather than the link, and to a signed-in user where the row has room beside the icons, as measured in every style and both languages: from 560px up to 860px, where the index page's tabs move into the header, and from 1150px as before. A guest in French in the kanagawa style still overflows the header under 340px, by up to 19px.
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 51s
Build and Deploy Static Documentation Site / build-and-push (push) Successful in 26s

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-10-10 09:14:55 +00:00
parent 561cdf98b0
commit de223baaa4
16 changed files with 312 additions and 130 deletions

View File

@@ -22,13 +22,10 @@ describe("UserMenu", () => {
"href",
"/@ann",
);
// One playlists link, the user's own: the header's leads to everyone's.
expect(screen.getAllByRole("menuitem", { name: /playlists/i }))
.toHaveLength(
1,
);
expect(screen.getByRole("menuitem", { name: "My playlists" }))
.toHaveAttribute("href", "/@ann/playlists");
// One playlists link, to the page of everyone's, whose last tab is the
// user's own: the header's text link is hidden where it has no room.
expect(screen.getByRole("menuitem", { name: "Playlists" }))
.toHaveAttribute("href", "/playlists");
expect(screen.getByRole("menuitem", { name: "Community" })).toHaveAttribute(
"href",
"/community",