v4: playlists sort by their last dump, their creation or their size, and /playlists is a grid of covers — every list of playlists came newest first, so one fed every week sank under those made since and left empty. GET /api/playlists and /api/users/:key/playlists take ?sort=updated|new|dumps (PLAYLIST_SORTS, shared/playlist.ts), updated being the default: the last to take a dump first, or its creation while it holds none; a new title, cover or description doesn't bring it back up. A playlist carries that date as lastDumpAt, read with its dumpCount by isMemberVisibleTo's rule (VISIBLE_DUMP_FIGURES, the viewer's id as ?1), so the owner's private dumps date and count their playlists for them alone, in the lists and over the socket: playlist_created, playlist_updated and playlist_dumps_updated carry each socket's own. The /playlists page and a profile's playlists tab show the orders as tabs beside the category menu and keep the one picked in ?sort=, the default being the bare path; a tab takes the current history entry's place, and picking a category keeps the order. Live, usePlaylistListSync takes the list's order: a new playlist goes where it puts it, one that rises moves up to its place, as in the updated order when it takes a dump, and one that falls stays until the list is fetched again, its place being perhaps on a page not loaded. The lists in an order of their own, the followed playlists and the search's, pass none, and take no new playlist as before (noNewEntries goes). comparePlaylists is the order on the client, which a test holds to the API's.

/playlists lays its cards out as tiles, the cover across the top, four to a row and two on a phone, on the wide column: the same PlaylistCard, laid out by its list's class (.playlist-grid), so each theme's card skin carries over. It drops the "public" badge there, every playlist listed being public. On every card, a playlist without a cover shows a tile of its own colour with its initial (ThumbnailPlaceholder) in place of the 📋, and the date is "updated …" of its last dump, or "created …".

A middle, ctrl, cmd or shift click anywhere on a playlist card opens it in a new tab — only its title was a link, the rest navigating by a click handler. useCardLink (hooks/shared) is useDumpCardLink's handlers for any card, which the dump cards now get through it.

A profile tab's query stays with the tab — going from the playlists to the dumps kept the whole query, so a playlist category, and now ?sort=, landed on the dumps' URL. Only the dump lists pass their category to each other; any other change of tab drops the query.

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

shared/paths.ts

@@ -6,7 +6,9 @@
  * categories. Under a user each segment is a fixed tab name, and under `dumps`
  * or `playlists` a slug. A view of a page is one more segment, and a default
  * 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.
+ * 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.
  *
  * 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
@@ -19,6 +21,7 @@
  */
 
 import type { CategoryKind } from "./category.ts";
+import { PLAYLIST_SORTS, type PlaylistSort } from "./playlist.ts";
 import { DIGEST_CADENCES, type DigestCadence } from "./settings.ts";
 import { HANDLE_RE, splitHandle } from "./validation.ts";
 
@@ -142,10 +145,31 @@ export function feedPath(
 
 /**
  * Returns the path of the page of every public playlist, `/playlists`, or of a
- * playlist category's at `/playlists/<slug>`.
+ * playlist category's at `/playlists/<slug>`, in the order `sort` names, the
+ * default one without it.
  */
-export function playlistsPath(categorySlug?: string): string {
-  return categorySlug ? `/playlists/${seg(categorySlug)}` : "/playlists";
+export function playlistsPath(
+  categorySlug?: string,
+  sort?: PlaylistSort,
+): string {
+  const path = categorySlug ? `/playlists/${seg(categorySlug)}` : "/playlists";
+  return `${path}${playlistSortQuery(sort)}`;
+}
+
+/**
+ * Returns the query string that puts a list of playlists in the order `sort`
+ * names, with its `?`, or `""` for the default order. `extra` holds the
+ * list's other parameters, such as a profile's `category`.
+ */
+export function playlistSortQuery(
+  sort: PlaylistSort = PLAYLIST_SORTS[0],
+  extra?: URLSearchParams,
+): string {
+  const params = new URLSearchParams(extra);
+  if (sort === PLAYLIST_SORTS[0]) params.delete("sort");
+  else params.set("sort", sort);
+  const query = params.toString();
+  return query ? `?${query}` : "";
 }
 
 /**

shared/playlist.ts

@@ -8,6 +8,26 @@
 
 import type { Dump } from "./dump.ts";
 
+/**
+ * The orders a list of playlists comes in, the first being the default one:
+ * `updated`, by {@link playlistActivity}, the latest first; `new`, by
+ * creation, the newest first; `dumps`, the fullest first. `GET /api/playlists`
+ * and `GET /api/users/:key/playlists` take one as `?sort=`, the `/playlists`
+ * page and a profile's playlists tab show them as tabs and keep the one
+ * picked in their URL's `?sort=`.
+ */
+export const PLAYLIST_SORTS = ["updated", "new", "dumps"] as const;
+/** One of the {@link PLAYLIST_SORTS}. */
+export type PlaylistSort = (typeof PLAYLIST_SORTS)[number];
+
+/**
+ * Returns the order a `?sort=` names, the default one when it is missing or
+ * names none: like a page number, an order never fails a list.
+ */
+export function parsePlaylistSort(value: string | null): PlaylistSort {
+  return PLAYLIST_SORTS.find((sort) => sort === value) ?? PLAYLIST_SORTS[0];
+}
+
 /**
  * Returned by the playlist routes, and by the search, users and dumps routes
  * that list playlists. The `playlist_created` and `playlist_updated` WebSocket
@@ -44,6 +64,12 @@ export interface Playlist {
    * is undefined when the query didn't count them.
    */
   dumpCount?: number;
+  /**
+   * When the latest of the dumps the viewer may see was added to it, which
+   * {@link playlistActivity} reads. It is undefined when it holds none, or
+   * when the query didn't count them.
+   */
+  lastDumpAt?: Date;
   /** The owner's current name, which the playlist's path starts with. */
   ownerUsername: string;
   /**
@@ -53,6 +79,40 @@ export interface Playlist {
   categoryIds?: string[];
 }
 
+/**
+ * Returns when `playlist` last took a dump, or was created if it holds none:
+ * what the `updated` order sorts by and the cards show. Its title, cover and
+ * description may change after without bringing it back up a list.
+ */
+export function playlistActivity(
+  playlist: Pick<Playlist, "createdAt" | "lastDumpAt">,
+): Date {
+  return playlist.lastDumpAt ?? playlist.createdAt;
+}
+
+/**
+ * Returns the comparison that puts playlists in the order `sort` names, as
+ * the API pages them, the newer first on a tie. `usePlaylistListSync` finds
+ * with it where a playlist the socket announces goes in a list.
+ */
+export function comparePlaylists(
+  sort: PlaylistSort,
+): (a: Playlist, b: Playlist) => number {
+  const byCreation = (a: Playlist, b: Playlist) =>
+    b.createdAt.getTime() - a.createdAt.getTime();
+  switch (sort) {
+    case "updated":
+      return (a, b) =>
+        playlistActivity(b).getTime() - playlistActivity(a).getTime() ||
+        byCreation(a, b);
+    case "dumps":
+      return (a, b) =>
+        (b.dumpCount ?? 0) - (a.dumpCount ?? 0) || byCreation(a, b);
+    case "new":
+      return byCreation;
+  }
+}
+
 /**
  * Returned by `GET /api/users/:key/playlists/:slug` to `PlaylistDetail`, and
  * by `GET /api/playlists/:playlistId`, with the dumps the caller may see, in

shared/test/paths.test.ts

@@ -4,6 +4,8 @@ import {
   feedPath,
   parsePagePath,
   playlistPath,
+  playlistSortQuery,
+  playlistsPath,
   searchPath,
   userPath,
 } from "../paths.ts";
@@ -37,6 +39,19 @@ Deno.test("builders: one hierarchy, default views bare", () => {
   assertEquals(searchPath(), "/search");
   assertEquals(searchPath("users", "a b"), "/search/users?q=a%20b");
   assertEquals(searchPath("dumps", "x"), "/search?q=x");
+  assertEquals(playlistsPath(), "/playlists");
+  assertEquals(playlistsPath("mixes"), "/playlists/mixes");
+  assertEquals(playlistsPath(undefined, "updated"), "/playlists");
+  assertEquals(playlistsPath("mixes", "new"), "/playlists/mixes?sort=new");
+  // The query of a list that has other parameters: the default order takes
+  // an old `sort` out, and leaves the rest.
+  const category = new URLSearchParams({ category: "mixes", sort: "new" });
+  assertEquals(
+    playlistSortQuery("dumps", category),
+    "?category=mixes&sort=dumps",
+  );
+  assertEquals(playlistSortQuery("updated", category), "?category=mixes");
+  assertEquals(playlistSortQuery("updated"), "");
 });
 
 Deno.test("parsePagePath: what a path under a user names", () => {

shared/ws.ts

@@ -311,8 +311,8 @@ export interface PlaylistCreatedMessage {
 
 /**
  * Sent by the server when a playlist changes, to every socket if it is public,
- * else to its owner's, as when it has just gone private. Its `dumpCount` is
- * the socket's user's, as in `playlist_created`.
+ * else to its owner's, as when it has just gone private. Its `dumpCount` and
+ * `lastDumpAt` are the socket's user's, as in `playlist_created`.
  */
 export interface PlaylistUpdatedMessage {
   type: "playlist_updated";
@@ -342,6 +342,11 @@ export interface PlaylistDumpsUpdatedMessage {
    * private dump is left out.
    */
   dumpIds: string[];
+  /**
+   * When the latest of them was added, the playlist's `lastDumpAt` for this
+   * socket's user. It is missing when `dumpIds` is empty.
+   */
+  lastDumpAt?: Date;
 }
 
 /**