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.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

shared/paths.ts

@@ -8,7 +8,7 @@
  * view is the bare path. A category narrowing a list on another page, a
  * profile's or a search's, is a query, `?category=`, not a segment, and so is
  * the order of a list of playlists, `?sort=`, the default order being the
- * bare path.
+ * bare path, and the playlists page's list of the viewer's own, `?mine=1`.
  *
  * The client links every page through the builders (`src/utils/shared/urls.ts`
  * wraps the dump and playlist ones), the emails prefix them with the
@@ -21,7 +21,11 @@
  */
 
 import type { CategoryKind } from "./category.ts";
-import { PLAYLIST_SORTS, type PlaylistSort } from "./playlist.ts";
+import {
+  parsePlaylistSort,
+  PLAYLIST_SORTS,
+  type PlaylistSort,
+} from "./playlist.ts";
 import { DIGEST_CADENCES, type DigestCadence } from "./settings.ts";
 import { HANDLE_RE, splitHandle } from "./validation.ts";
 
@@ -67,6 +71,15 @@ export const SEARCH_TABS = ["dumps", "users", "playlists"] as const;
 /** One of the {@link SEARCH_TABS}. */
 export type SearchTab = (typeof SEARCH_TABS)[number];
 
+/**
+ * The tabs of the playlists page, in the tab bar's order: each order of every
+ * public playlist, `?sort=`, then the viewer's own playlists, `?mine=1`,
+ * which only a signed-in user is offered.
+ */
+export const PLAYLISTS_TABS = [...PLAYLIST_SORTS, "mine"] as const;
+/** One of the {@link PLAYLISTS_TABS}. */
+export type PlaylistsTab = (typeof PLAYLISTS_TABS)[number];
+
 /**
  * The views of the community page, one per digest cadence: the week at
  * `/community`, the month at `/community/monthly`.
@@ -145,15 +158,24 @@ export function feedPath(
 
 /**
  * Returns the path of the page of every public playlist, `/playlists`, or of a
- * playlist category's at `/playlists/<slug>`, in the order `sort` names, the
- * default one without it.
+ * playlist category's at `/playlists/<slug>`, on the tab `tab` names: an
+ * order, the default one without it, or the viewer's own playlists.
  */
 export function playlistsPath(
   categorySlug?: string,
-  sort?: PlaylistSort,
+  tab?: PlaylistsTab,
 ): string {
   const path = categorySlug ? `/playlists/${seg(categorySlug)}` : "/playlists";
-  return `${path}${playlistSortQuery(sort)}`;
+  return `${path}${tab === "mine" ? "?mine=1" : playlistSortQuery(tab)}`;
+}
+
+/**
+ * Returns the tab of the playlists page its query names: the viewer's own
+ * playlists with a `mine`, else the order `sort` names, as
+ * `parsePlaylistSort` reads it.
+ */
+export function parsePlaylistsTab(params: URLSearchParams): PlaylistsTab {
+  return params.has("mine") ? "mine" : parsePlaylistSort(params.get("sort"));
 }
 
 /**