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>

api/test/routes/playlists.test.ts

@@ -16,10 +16,12 @@ import {
   TEST_DIR,
 } from "../helpers.ts";
 import type { PaginatedData } from "../../../shared/api.ts";
-import type {
-  Playlist,
-  PlaylistMembership,
-  PlaylistWithDumps,
+import {
+  comparePlaylists,
+  type Playlist,
+  PLAYLIST_SORTS,
+  type PlaylistMembership,
+  type PlaylistWithDumps,
 } from "../../../shared/playlist.ts";
 import { assert, assertEquals, assertMatch } from "@std/assert";
 
@@ -665,7 +667,7 @@ test("playlist categories: filed on creation, replaced on update, dump categorie
   assertEquals(cleared.data.categoryIds, []);
 });
 
-test("GET /api/playlists: every public playlist, newest first, by category", async () => {
+test("GET /api/playlists: every public playlist, by category", async () => {
   const owner = await createUser();
   const other = await createUser();
   const mixes = insertCategory({ slug: "mixes", kind: "playlist" });
@@ -729,3 +731,110 @@ test("GET /api/users/:key/playlists?category=: their playlists in one category",
     [],
   );
 });
+
+test("?sort=: by the last dump added, by creation or by dumps, as the viewer sees them", async () => {
+  const owner = await createUser();
+  const made = (title: string, createdAt: string) => {
+    const { id } = insertPlaylist({ userId: owner.id, title });
+    db.prepare(`UPDATE playlists SET created_at = ? WHERE id = ?;`)
+      .run(createdAt, id);
+    return id;
+  };
+  const add = (playlistId: string, addedAt: string, isPrivate = false) =>
+    db.prepare(
+      `INSERT INTO playlist_dumps (playlist_id, dump_id, position, added_at)
+       VALUES (?, ?, 0, ?);`,
+    ).run(playlistId, insertDump({ userId: owner.id, isPrivate }).id, addedAt);
+  const a = made("A", "2026-01-01T00:00:00.000Z");
+  const b = made("B", "2026-02-01T00:00:00.000Z");
+  const c = made("C", "2026-03-01T00:00:00.000Z");
+  add(a, "2026-04-01T00:00:00.000Z");
+  add(b, "2026-02-10T00:00:00.000Z");
+  add(b, "2026-02-11T00:00:00.000Z");
+  // Only the owner sees it: to anyone else, C is empty and as it was made.
+  add(c, "2026-05-01T00:00:00.000Z", true);
+
+  type Auth = typeof owner.auth;
+  const list = async (query: string, auth?: Auth) =>
+    (await get<PaginatedData<Playlist>>(query, { auth })).data.items;
+  const titles = async (query: string, auth?: Auth) =>
+    (await list(query, auth)).map((p) => p.title);
+
+  for (
+    const url of ["/api/playlists", `/api/users/${owner.id}/playlists`]
+  ) {
+    assertEquals(await titles(`${url}?sort=updated`), ["A", "C", "B"], url);
+    assertEquals(await titles(`${url}?sort=new`), ["C", "B", "A"], url);
+    assertEquals(await titles(`${url}?sort=dumps`), ["B", "A", "C"], url);
+    assertEquals(
+      await titles(`${url}?sort=updated`, owner.auth),
+      ["C", "A", "B"],
+      url,
+    );
+    // A and C hold one dump each to their owner: the newer goes first.
+    assertEquals(
+      await titles(`${url}?sort=dumps`, owner.auth),
+      ["B", "C", "A"],
+      url,
+    );
+    // The first order is the default, which an unknown one falls back to.
+    assertEquals(await titles(url), ["A", "C", "B"], url);
+    assertEquals(await titles(`${url}?sort=nope`), ["A", "C", "B"], url);
+    assertEquals(await titles(`${url}?sort=new&limit=1&page=2`), ["B"], url);
+  }
+
+  const dates = (await list("/api/playlists?sort=new")).map((p) =>
+    p.lastDumpAt
+  );
+  assertEquals(dates, [
+    undefined,
+    "2026-02-11T00:00:00.000Z",
+    "2026-04-01T00:00:00.000Z",
+  ] as unknown[]);
+  assertEquals(
+    (await get<PlaylistWithDumps>(`/api/playlists/${c}`, { auth: owner.auth }))
+      .data.lastDumpAt as unknown,
+    "2026-05-01T00:00:00.000Z",
+  );
+  assertEquals(
+    (await get<PlaylistWithDumps>(`/api/playlists/${c}`)).data.lastDumpAt,
+    undefined,
+  );
+});
+
+test("comparePlaylists orders playlists as the API's ?sort= pages them", async () => {
+  const owner = await createUser();
+  // Ties of every kind: dates and counts shared by several playlists.
+  for (let i = 0; i < 8; i++) {
+    const { id } = insertPlaylist({ userId: owner.id, title: `P${i}` });
+    db.prepare(`UPDATE playlists SET created_at = ? WHERE id = ?;`)
+      .run(`2026-01-0${1 + i}T00:00:00.000Z`, id);
+    for (let n = 0; n < i % 3; n++) {
+      db.prepare(
+        `INSERT INTO playlist_dumps (playlist_id, dump_id, position, added_at)
+         VALUES (?, ?, ?, ?);`,
+      ).run(
+        id,
+        insertDump({ userId: owner.id }).id,
+        n,
+        `2026-02-0${1 + ((i * 5 + n) % 9)}T00:00:00.000Z`,
+      );
+    }
+  }
+  for (const sort of PLAYLIST_SORTS) {
+    const { items } = (await get<PaginatedData<Playlist>>(
+      `/api/playlists?sort=${sort}`,
+    )).data;
+    // The dates come as strings over the wire.
+    const playlists = items.map((p) => ({
+      ...p,
+      createdAt: new Date(p.createdAt),
+      lastDumpAt: p.lastDumpAt && new Date(p.lastDumpAt),
+    }));
+    assertEquals(
+      playlists.toSorted(comparePlaylists(sort)).map((p) => p.title),
+      items.map((p) => p.title),
+      sort,
+    );
+  }
+});

api/test/routes/ws.test.ts

@@ -744,6 +744,47 @@ wsTest("a password change closes the user's sockets", async (connect) => {
   assertFalse(res.data.token === user.token);
 });
 
+wsTest(
+  "playlist_dumps_updated dates the latest dump each viewer can see",
+  async (connect) => {
+    const owner = await createUser();
+    const pl = insertPlaylist({ userId: owner.id });
+    const o = await connect(owner);
+    const anon = await connect();
+
+    const add = async (isPrivate: boolean) => {
+      const dump = insertDump({ userId: owner.id, isPrivate });
+      await post(`/api/playlists/${pl.id}/dumps/${dump.id}`, {
+        auth: owner.auth,
+      });
+      return [
+        (await o.next("playlist_dumps_updated")).lastDumpAt,
+        (await anon.next("playlist_dumps_updated")).lastDumpAt,
+      ];
+    };
+    const [first, firstToAnon] = await add(false);
+    assert(first);
+    assertEquals(firstToAnon, first);
+    // The owner's private dump moves the date for them alone.
+    const [second, secondToAnon] = await add(true);
+    assert(second && second >= first);
+    assertEquals(secondToAnon, first);
+
+    await put(`/api/playlists/${pl.id}`, {
+      auth: owner.auth,
+      json: { title: "Renamed" },
+    });
+    assertEquals(
+      (await o.next("playlist_updated")).playlist.lastDumpAt,
+      second,
+    );
+    assertEquals(
+      (await anon.next("playlist_updated")).playlist.lastDumpAt,
+      first,
+    );
+  },
+);
+
 wsTest(
   "playlist_dumps_updated lists only what each viewer can see",
   async (connect) => {