v3: added content slugs, fixed real-time updates in client, added @mentions across the app, added new file selector and drop zone

2026-03-22 16:06:26 +00:00
parent 39a0cc397e
commit 34e908d1bc
42 changed files with 2170 additions and 628 deletions
--- a/api/lib/slugify.ts
+++ b/api/lib/slugify.ts
@@ -0,0 +1,18 @@
+export const UUID_RE =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+export function slugify(title: string): string {
+  const slug = title
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "") // strip diacritics
+    .replace(/[^a-z0-9]+/g, "-") // non-alphanumeric → dash
+    .replace(/^-+|-+$/g, "") // trim leading/trailing dashes
+    .substring(0, 60);
+  return slug || "untitled";
+}
+
+/** Stable slug tied to the record's id — unique by construction. */
+export function makeSlug(title: string, id: string): string {
+  return `${slugify(title)}-${id.substring(0, 8)}`;
+}
--- a/api/model/db.ts
+++ b/api/model/db.ts
@@ -8,10 +8,41 @@ import {
  type RichContent,
  type User,
 } from "./interfaces.ts";
+import { makeSlug } from "../lib/slugify.ts";

 export const db = new DatabaseSync("api/sql/gerbeur.db");
 db.exec("PRAGMA foreign_keys = ON;");

+// Add columns to existing tables if missing (idempotent migrations)
+for (
+  const [table, col, def] of [
+    ["dumps", "updated_at", "TEXT"],
+    ["users", "updated_at", "TEXT"],
+    ["playlists", "updated_at", "TEXT"],
+    ["comments", "updated_at", "TEXT"],
+    ["dumps", "slug", "TEXT"],
+    ["playlists", "slug", "TEXT"],
+  ] as [string, string, string][]
+) {
+  const cols = db.prepare(`PRAGMA table_info(${table})`).all() as {
+    name: string;
+  }[];
+  if (!cols.some((c) => c.name === col)) {
+    db.exec(`ALTER TABLE ${table} ADD COLUMN ${col} ${def};`);
+  }
+}
+
+// Backfill slugs for any records created before this migration
+for (const table of ["dumps", "playlists"] as const) {
+  const rows = db.prepare(
+    `SELECT id, title FROM ${table} WHERE slug IS NULL;`,
+  ).all() as { id: string; title: string }[];
+  const update = db.prepare(`UPDATE ${table} SET slug = ? WHERE id = ?;`);
+  for (const row of rows) {
+    update.run(makeSlug(row.title, row.id), row.id);
+  }
+}
+
 // Purge expired unused invites on startup
 db.prepare(
  `DELETE FROM invites WHERE used_at IS NULL AND created_at < datetime('now', '-7 days');`,
@@ -28,6 +59,8 @@ export interface DumpRow {
  comment: string | null;
  user_id: string;
  created_at: string;
+  updated_at: string | null;
+  slug: string | null;
  url: string | null;
  rich_content: string | null;
  file_name: string | null;
@@ -45,6 +78,7 @@ export interface UserRow {
  password_hash: string;
  is_admin: number;
  created_at: string;
+  updated_at: string | null;
  avatar_mime: string | null;
  invited_by: string | null;
  // Present only when joined: LEFT JOIN users i ON i.id = u.invited_by
@@ -100,9 +134,11 @@ export function dumpRowToApi(row: DumpRow): Dump {
    id: row.id,
    kind: row.kind as "url" | "file",
    title: row.title,
+    slug: row.slug ?? undefined,
    comment: row.comment ?? undefined,
    userId: row.user_id,
    createdAt: new Date(row.created_at),
+    updatedAt: row.updated_at ? new Date(row.updated_at) : undefined,
    url: row.url ?? undefined,
    richContent: row.rich_content
      ? (JSON.parse(row.rich_content) as RichContent)
@@ -121,9 +157,11 @@ export function dumpApiToRow(dump: Dump): DumpRow {
    id: dump.id,
    kind: dump.kind,
    title: dump.title,
+    slug: dump.slug ?? null,
    comment: dump.comment ?? null,
    user_id: dump.userId,
    created_at: dump.createdAt.toISOString(),
+    updated_at: dump.updatedAt?.toISOString() ?? null,
    url: dump.url ?? null,
    rich_content: dump.richContent ? JSON.stringify(dump.richContent) : null,
    file_name: dump.fileName ?? null,
@@ -142,6 +180,7 @@ export function userRowToApi(row: UserRow): User {
    passwordHash: row.password_hash,
    isAdmin: Boolean(row.is_admin),
    createdAt: new Date(row.created_at),
+    updatedAt: row.updated_at ? new Date(row.updated_at) : undefined,
    avatarMime: row.avatar_mime ?? undefined,
    invitedByUsername: typeof row.invited_by_username === "string"
      ? row.invited_by_username
@@ -156,6 +195,7 @@ export function userApiToRow(user: User): UserRow {
    password_hash: user.passwordHash,
    is_admin: user.isAdmin ? 1 : 0,
    created_at: user.createdAt.toISOString(),
+    updated_at: user.updatedAt?.toISOString() ?? null,
    avatar_mime: user.avatarMime ?? null,
    invited_by: null,
    invited_by_username: null,
@@ -169,6 +209,7 @@ export interface CommentRow {
  parent_id: string | null;
  body: string;
  created_at: string;
+  updated_at: string | null;
  deleted: number;
  author_username: string;
  author_avatar_mime: string | null;
@@ -199,6 +240,7 @@ export function commentRowToApi(row: CommentRow): Comment {
    parentId: row.parent_id ?? undefined,
    body: row.body,
    createdAt: new Date(row.created_at),
+    updatedAt: row.updated_at ? new Date(row.updated_at) : undefined,
    deleted: Boolean(row.deleted),
    authorUsername: row.author_username,
    authorAvatarMime: row.author_avatar_mime ?? undefined,
@@ -209,9 +251,11 @@ export interface PlaylistRow {
  id: string;
  user_id: string;
  title: string;
+  slug: string | null;
  description: string | null;
  is_public: number;
  created_at: string;
+  updated_at: string | null;
  image_mime: string | null;
  [key: string]: SQLOutputValue;
 }
@@ -231,9 +275,11 @@ export function playlistRowToApi(row: PlaylistRow): Playlist {
    id: row.id,
    userId: row.user_id,
    title: row.title,
+    slug: row.slug ?? undefined,
    description: row.description ?? undefined,
    isPublic: Boolean(row.is_public),
    createdAt: new Date(row.created_at),
+    updatedAt: row.updated_at ? new Date(row.updated_at) : undefined,
    imageMime: row.image_mime ?? undefined,
    dumpCount: typeof row.dump_count === "number" ? row.dump_count : undefined,
    ownerUsername: typeof row.owner_username === "string"
--- a/api/model/interfaces.ts
+++ b/api/model/interfaces.ts
@@ -17,9 +17,11 @@ export interface Dump {
  id: string;
  kind: "url" | "file";
  title: string;
+  slug?: string;
  comment?: string;
  userId: string;
  createdAt: Date;
+  updatedAt?: Date;
  url?: string;
  richContent?: RichContent;
  fileName?: string;
@@ -40,6 +42,7 @@ export interface User {
  passwordHash: string;
  isAdmin: boolean;
  createdAt: Date;
+  updatedAt?: Date;
  avatarMime?: string;
  invitedByUsername?: string;
 }
@@ -177,6 +180,7 @@ export interface Comment {
  parentId?: string;
  body: string;
  createdAt: Date;
+  updatedAt?: Date;
  deleted: boolean;
  authorUsername: string;
  authorAvatarMime?: string;
@@ -197,6 +201,18 @@ export function isCreateCommentRequest(
      o.parentId === null);
 }

+export interface UpdateCommentRequest {
+  body: string;
+}
+
+export function isUpdateCommentRequest(
+  obj: unknown,
+): obj is UpdateCommentRequest {
+  if (!obj || typeof obj !== "object") return false;
+  const o = obj as Record<string, unknown>;
+  return typeof o.body === "string" && (o.body as string).trim().length > 0;
+}
+
 /**
 * Playlists
 */
@@ -205,9 +221,11 @@ export interface Playlist {
  id: string;
  userId: string;
  title: string;
+  slug?: string;
  description?: string;
  isPublic: boolean;
  createdAt: Date;
+  updatedAt?: Date;
  imageMime?: string;
  dumpCount?: number;
  ownerUsername?: string;
@@ -384,7 +402,8 @@ export type NotificationType =
  | "user_followed"
  | "user_dump_posted"
  | "playlist_dump_added"
-  | "dump_upvoted";
+  | "dump_upvoted"
+  | "user_mentioned";

 export interface PlaylistFollowedData {
  followerId: string;
@@ -419,12 +438,22 @@ export interface DumpUpvotedData {
  dumpTitle: string;
 }

+export interface UserMentionedData {
+  mentionerId: string;
+  mentionerUsername: string;
+  contextType: "comment" | "dump" | "playlist";
+  contextId: string;
+  contextTitle: string;
+  dumpId?: string;
+}
+
 export type NotificationData =
  | PlaylistFollowedData
  | UserFollowedData
  | UserDumpPostedData
  | PlaylistDumpAddedData
-  | DumpUpvotedData;
+  | DumpUpvotedData
+  | UserMentionedData;

 export interface Notification {
  id: string;
--- a/api/routes/comments.ts
+++ b/api/routes/comments.ts
@@ -5,6 +5,7 @@ import {
  type APIResponse,
  type Comment,
  isCreateCommentRequest,
+  isUpdateCommentRequest,
 } from "../model/interfaces.ts";
 import { authMiddleware } from "../middleware/auth.ts";
 import { verifyJWT } from "../lib/jwt.ts";
@@ -12,11 +13,13 @@ import {
  createComment,
  deleteComment,
  getComments,
+  updateComment,
 } from "../services/comment-service.ts";
 import { getDump } from "../services/dump-service.ts";
 import {
  broadcastCommentCreated,
  broadcastCommentDeleted,
+  broadcastCommentUpdated,
 } from "../services/ws-service.ts";

 const router = new Router({ prefix: "/api" });
@@ -62,6 +65,29 @@ router.post("/dumps/:dumpId/comments", authMiddleware, async (ctx) => {
  ctx.response.body = responseBody;
 });

+// PATCH /api/comments/:commentId — auth required
+router.patch("/comments/:commentId", authMiddleware, async (ctx) => {
+  const userId = ctx.state.user.userId as string;
+  const isAdmin = (ctx.state.user.isAdmin ?? false) as boolean;
+  const body = await ctx.request.body.json();
+  if (!isUpdateCommentRequest(body)) {
+    throw new APIException(
+      APIErrorCode.VALIDATION_ERROR,
+      400,
+      "Invalid comment data",
+    );
+  }
+  const { comment, isPrivate } = updateComment(
+    ctx.params.commentId,
+    body.body,
+    userId,
+    isAdmin,
+  );
+  if (!isPrivate) broadcastCommentUpdated(comment);
+  const responseBody: APIResponse<Comment> = { success: true, data: comment };
+  ctx.response.body = responseBody;
+});
+
 // DELETE /api/comments/:commentId — auth required
 router.delete("/comments/:commentId", authMiddleware, (ctx) => {
  const userId = ctx.state.user.userId as string;
--- a/api/routes/users.ts
+++ b/api/routes/users.ts
@@ -14,6 +14,7 @@ import {
  createUser,
  getUserById,
  getUserByUsername,
+  searchUsers,
 } from "../services/user-service.ts";
 import { redeemInvite, validateInvite } from "../services/invite-service.ts";
 import {
@@ -131,6 +132,13 @@ router.get("/me", authMiddleware, (ctx: AuthContext) => {
  }
 });

+// User search for @mention autocomplete
+router.get("/search", (ctx) => {
+  const q = (ctx.request.url.searchParams.get("q") ?? "").trim();
+  const results = searchUsers(q, 8);
+  ctx.response.body = { success: true, data: results };
+});
+
 // Public user profile by internal ID (used when only userId is available, e.g. dump.userId)
 router.get("/by-id/:userId", (ctx) => {
  const user = getUserById(ctx.params.userId);
--- a/api/services/comment-service.ts
+++ b/api/services/comment-service.ts
@@ -10,9 +10,10 @@ import {
  db,
  isCommentRow,
 } from "../model/db.ts";
+import { notifyMentions } from "./notification-service.ts";

 const SELECT_COLS =
-  `c.id, c.dump_id, c.user_id, c.parent_id, c.body, c.created_at, c.deleted,
+  `c.id, c.dump_id, c.user_id, c.parent_id, c.body, c.created_at, c.updated_at, c.deleted,
  u.username as author_username, u.avatar_mime as author_avatar_mime`;

 function fetchComment(commentId: string): Comment {
@@ -59,7 +60,63 @@ export function createComment(
    body.trim(),
    createdAt.toISOString(),
  );
-  return fetchComment(id);
+  const comment = fetchComment(id);
+  const dumpRow = db.prepare(`SELECT title FROM dumps WHERE id = ?;`).get(
+    dumpId,
+  ) as { title: string } | undefined;
+  notifyMentions(userId, body, "comment", id, dumpRow?.title ?? "", dumpId);
+  return comment;
+}
+
+export function updateComment(
+  commentId: string,
+  body: string,
+  requestingUserId: string,
+  isAdmin: boolean,
+): { comment: Comment; dumpId: string; isPrivate: boolean } {
+  const row = db.prepare(
+    `SELECT c.dump_id, d.is_private FROM comments c JOIN dumps d ON c.dump_id = d.id WHERE c.id = ?;`,
+  ).get(commentId) as { dump_id: string; is_private: number } | undefined;
+  if (!row) {
+    throw new APIException(APIErrorCode.NOT_FOUND, 404, "Comment not found");
+  }
+  const existing = fetchComment(commentId);
+  if (existing.deleted) {
+    throw new APIException(
+      APIErrorCode.VALIDATION_ERROR,
+      400,
+      "Cannot edit a deleted comment",
+    );
+  }
+  if (existing.userId !== requestingUserId && !isAdmin) {
+    throw new APIException(
+      APIErrorCode.UNAUTHORIZED,
+      401,
+      "Not authorized to edit this comment",
+    );
+  }
+  const now = new Date().toISOString();
+  db.prepare(`UPDATE comments SET body = ?, updated_at = ? WHERE id = ?;`).run(
+    body.trim(),
+    now,
+    commentId,
+  );
+  const dumpRow = db.prepare(`SELECT title FROM dumps WHERE id = ?;`).get(
+    row.dump_id,
+  ) as { title: string } | undefined;
+  notifyMentions(
+    requestingUserId,
+    body,
+    "comment",
+    commentId,
+    dumpRow?.title ?? "",
+    row.dump_id,
+  );
+  return {
+    comment: fetchComment(commentId),
+    dumpId: row.dump_id,
+    isPrivate: Boolean(row.is_private),
+  };
 }

 export function deleteComment(
--- a/api/services/dump-service.ts
+++ b/api/services/dump-service.ts
@@ -12,7 +12,11 @@ import {
  broadcastDumpUpdated,
  broadcastNewDump,
 } from "./ws-service.ts";
-import { notifyUserFollowersNewDump } from "./notification-service.ts";
+import {
+  notifyMentions,
+  notifyUserFollowersNewDump,
+} from "./notification-service.ts";
+import { makeSlug, UUID_RE } from "../lib/slugify.ts";

 const UPLOADS_DIR = "api/uploads";
 const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50 MB
@@ -45,13 +49,13 @@ function titleFromUrl(url: string): string {
 }

 const BASE_COLS =
-  "id, kind, title, comment, user_id, created_at, url, rich_content, file_name, file_mime, file_size, vote_count, is_private";
+  "id, kind, title, slug, comment, user_id, created_at, url, rich_content, file_name, file_mime, file_size, vote_count, is_private";

 const SELECT_COLS = `${BASE_COLS},
  (SELECT COUNT(*) FROM comments WHERE dump_id = dumps.id AND deleted = 0) as comment_count`;

 const SELECT_COLS_ALIASED =
-  "d.id, d.kind, d.title, d.comment, d.user_id, d.created_at, d.url, d.rich_content, d.file_name, d.file_mime, d.file_size, d.vote_count, d.is_private," +
+  "d.id, d.kind, d.title, d.slug, d.comment, d.user_id, d.created_at, d.url, d.rich_content, d.file_name, d.file_mime, d.file_size, d.vote_count, d.is_private," +
  " (SELECT COUNT(*) FROM comments WHERE dump_id = d.id AND deleted = 0) as comment_count";

 export async function createUrlDump(
@@ -67,14 +71,16 @@ export async function createUrlDump(
  const richContent = await fetchRichContent(request.url);
  const title = richContent?.title ?? titleFromUrl(request.url);
  const isPrivate = request.isPrivate ?? false;
+  const slug = makeSlug(title, dumpId);

  db.prepare(
-    `INSERT INTO dumps (id, kind, title, comment, user_id, created_at, url, rich_content, is_private)
-      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?);`,
+    `INSERT INTO dumps (id, kind, title, slug, comment, user_id, created_at, url, rich_content, is_private)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?);`,
  ).run(
    dumpId,
    "url",
    title,
+    slug,
    request.comment ?? null,
    userId,
    createdAt.toISOString(),
@@ -87,6 +93,7 @@ export async function createUrlDump(
    id: dumpId,
    kind: "url",
    title,
+    slug,
    comment: request.comment,
    userId,
    createdAt,
@@ -100,6 +107,7 @@ export async function createUrlDump(
    broadcastNewDump(dump);
    notifyUserFollowersNewDump(userId, dumpId, title);
  }
+  if (request.comment) notifyMentions(userId, request.comment, "dump", dumpId, title);
  return dump;
 }

@@ -126,6 +134,7 @@ export async function createFileDump(

  const dumpId = crypto.randomUUID();
  const createdAt = new Date();
+  const slug = makeSlug(file.name, dumpId);

  await Deno.mkdir(UPLOADS_DIR, { recursive: true });
  const data = new Uint8Array(await file.arrayBuffer());
@@ -134,12 +143,13 @@ export async function createFileDump(
    await Deno.writeFile(`${UPLOADS_DIR}/${dumpId}`, data);

    db.prepare(
-      `INSERT INTO dumps (id, kind, title, comment, user_id, created_at, file_name, file_mime, file_size, is_private)
-        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?);`,
+      `INSERT INTO dumps (id, kind, title, slug, comment, user_id, created_at, file_name, file_mime, file_size, is_private)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);`,
    ).run(
      dumpId,
      "file",
      file.name,
+      slug,
      comment ?? null,
      userId,
      createdAt.toISOString(),
@@ -158,6 +168,7 @@ export async function createFileDump(
    id: dumpId,
    kind: "file",
    title: file.name,
+    slug,
    comment,
    userId,
    createdAt,
@@ -172,14 +183,17 @@ export async function createFileDump(
    broadcastNewDump(dump);
    notifyUserFollowersNewDump(userId, dumpId, file.name);
  }
+  if (comment) notifyMentions(userId, comment, "dump", dumpId, file.name);
  return dump;
 }

 // Internal fetch — no privacy check. Use only when ownership is already enforced.
-function fetchDump(dumpId: string): Dump {
-  const row = db.prepare(
-    `SELECT ${SELECT_COLS} FROM dumps WHERE id = ?;`,
-  ).get(dumpId);
+function fetchDump(idOrSlug: string): Dump {
+  const row = UUID_RE.test(idOrSlug)
+    ? db.prepare(`SELECT ${SELECT_COLS} FROM dumps WHERE id = ?;`).get(idOrSlug)
+    : db.prepare(`SELECT ${SELECT_COLS} FROM dumps WHERE slug = ?;`).get(
+      idOrSlug,
+    );
  if (!row || !isDumpRow(row)) {
    throw new APIException(APIErrorCode.NOT_FOUND, 404, "Dump not found");
  }
@@ -234,6 +248,8 @@ export async function updateDump(
 ): Promise<Dump> {
  const dump = fetchDump(dumpId);

+  const now = new Date();
+
  // File dumps: only comment and isPrivate are editable
  if (dump.kind === "file") {
    const updatedDump: Dump = {
@@ -244,10 +260,27 @@ export async function updateDump(
      isPrivate: "isPrivate" in request
        ? (request.isPrivate ?? false)
        : dump.isPrivate,
+      updatedAt: now,
    };
-    db.prepare(`UPDATE dumps SET comment = ?, is_private = ? WHERE id = ?;`)
-      .run(updatedDump.comment ?? null, updatedDump.isPrivate ? 1 : 0, dumpId);
-    if (!updatedDump.isPrivate) broadcastDumpUpdated(updatedDump);
+    db.prepare(
+      `UPDATE dumps SET comment = ?, is_private = ?, updated_at = ? WHERE id = ?;`,
+    ).run(
+      updatedDump.comment ?? null,
+      updatedDump.isPrivate ? 1 : 0,
+      now.toISOString(),
+      dumpId,
+    );
+    if (updatedDump.isPrivate && !dump.isPrivate) broadcastDumpDeleted(dumpId);
+    else if (!updatedDump.isPrivate) broadcastDumpUpdated(updatedDump);
+    if (updatedDump.comment) {
+      notifyMentions(
+        dump.userId,
+        updatedDump.comment,
+        "dump",
+        dumpId,
+        updatedDump.title,
+      );
+    }
    return updatedDump;
  }

@@ -265,9 +298,11 @@ export async function updateDump(
    title = richContent?.title ?? titleFromUrl(newUrl);
  }

+  const newSlug = makeSlug(title, dumpId);
  const updatedDump: Dump = {
    ...dump,
    title,
+    slug: newSlug,
    comment: "comment" in request
      ? (request.comment ?? undefined)
      : dump.comment,
@@ -276,17 +311,20 @@ export async function updateDump(
    isPrivate: "isPrivate" in request
      ? (request.isPrivate ?? false)
      : dump.isPrivate,
+    updatedAt: now,
  };

  const row = dumpApiToRow(updatedDump);
  const result = db.prepare(
-    `UPDATE dumps SET title = ?, comment = ?, url = ?, rich_content = ?, is_private = ? WHERE id = ?;`,
+    `UPDATE dumps SET title = ?, slug = ?, comment = ?, url = ?, rich_content = ?, is_private = ?, updated_at = ? WHERE id = ?;`,
  ).run(
    row.title,
+    row.slug,
    row.comment,
    row.url,
    row.rich_content,
    row.is_private,
+    now.toISOString(),
    row.id,
  );

@@ -294,7 +332,11 @@ export async function updateDump(
    throw new APIException(APIErrorCode.NOT_FOUND, 404, "Dump not found");
  }

-  if (!updatedDump.isPrivate) broadcastDumpUpdated(updatedDump);
+  if (updatedDump.isPrivate && !dump.isPrivate) broadcastDumpDeleted(dumpId);
+  else if (!updatedDump.isPrivate) broadcastDumpUpdated(updatedDump);
+  if (updatedDump.comment) {
+    notifyMentions(dump.userId, updatedDump.comment, "dump", dumpId, updatedDump.title);
+  }
  return updatedDump;
 }

@@ -326,17 +368,31 @@ export async function replaceFileDump(
  const data = new Uint8Array(await file.arrayBuffer());
  await Deno.writeFile(`${UPLOADS_DIR}/${dumpId}`, data);

+  const now = new Date();
+  const newSlug = makeSlug(file.name, dumpId);
  db.prepare(
-    `UPDATE dumps SET title = ?, file_name = ?, file_mime = ?, file_size = ?, comment = ? WHERE id = ?;`,
-  ).run(file.name, file.name, file.type, file.size, comment ?? null, dumpId);
+    `UPDATE dumps SET title = ?, slug = ?, file_name = ?, file_mime = ?, file_size = ?, comment = ?, updated_at = ? WHERE id = ?;`,
+  ).run(
+    file.name,
+    newSlug,
+    file.name,
+    file.type,
+    file.size,
+    comment ?? null,
+    now.toISOString(),
+    dumpId,
+  );

+  if (comment) notifyMentions(dump.userId, comment, "dump", dumpId, file.name);
  return {
    ...dump,
    title: file.name,
+    slug: newSlug,
    fileName: file.name,
    fileMime: file.type,
    fileSize: file.size,
    comment,
+    updatedAt: now,
  };
 }

@@ -376,19 +432,20 @@ export function getVotedDumpsByUser(
  let totalRow: { count: number } | undefined;
  let rawRows: unknown[];

-  if (requestingUserId) {
+  if (requestingUserId === userId) {
+    // Own profile: include private dumps the user themselves voted on and owns.
    rawRows = db.prepare(
      `SELECT ${dumpCols}
       FROM dumps d
       INNER JOIN votes v ON d.id = v.dump_id
       WHERE v.user_id = ? AND (d.is_private = 0 OR d.user_id = ?)
       ORDER BY v.created_at DESC LIMIT ? OFFSET ?;`,
-    ).all(userId, requestingUserId, limit, offset);
+    ).all(userId, userId, limit, offset);
    totalRow = db.prepare(
      `SELECT COUNT(*) as count FROM dumps d
       INNER JOIN votes v ON d.id = v.dump_id
       WHERE v.user_id = ? AND (d.is_private = 0 OR d.user_id = ?);`,
-    ).get(userId, requestingUserId) as { count: number } | undefined;
+    ).get(userId, userId) as { count: number } | undefined;
  } else {
    rawRows = db.prepare(
      `SELECT ${dumpCols}
--- a/api/services/notification-service.ts
+++ b/api/services/notification-service.ts
@@ -7,6 +7,9 @@ import { APIErrorCode, APIException } from "../model/interfaces.ts";
 import { db, isNotificationRow, notificationRowToApi } from "../model/db.ts";
 import { sendToUser } from "./ws-service.ts";

+// Regex: matches @username not already inside a markdown link ([...] or (...)
+const MENTION_RE = /(?<![[(\\w])@([\w]+)/g;
+
 // ── Core CRUD ─────────────────────────────────────────────────────────────────

 // sourceKey: if set, INSERT OR IGNORE — same (user_id, source_key) pair is a no-op.
@@ -191,6 +194,45 @@ export function notifyDumpOwnerUpvote(
  );
 }

+export function notifyMentions(
+  mentionerUserId: string,
+  body: string,
+  contextType: "comment" | "dump" | "playlist",
+  contextId: string,
+  contextTitle: string,
+  dumpId?: string,
+): void {
+  const mentionerRow = db.prepare(
+    `SELECT username FROM users WHERE id = ?;`,
+  ).get(mentionerUserId) as { username: string } | undefined;
+  if (!mentionerRow) return;
+
+  const usernames = [...new Set(
+    [...body.matchAll(MENTION_RE)].map((m) => m[1].toLowerCase()),
+  )];
+
+  for (const username of usernames) {
+    const mentionedRow = db.prepare(
+      `SELECT id FROM users WHERE lower(username) = ?;`,
+    ).get(username) as { id: string } | undefined;
+    if (!mentionedRow || mentionedRow.id === mentionerUserId) continue;
+
+    createNotification(
+      mentionedRow.id,
+      "user_mentioned",
+      {
+        mentionerId: mentionerUserId,
+        mentionerUsername: mentionerRow.username,
+        contextType,
+        contextId,
+        contextTitle,
+        dumpId,
+      },
+      `mention:${contextType}:${contextId}:${mentionedRow.id}`,
+    );
+  }
+}
+
 export function notifyPlaylistFollowersNewDump(
  playlistId: string,
  playlistTitle: string,
--- a/api/services/playlist-service.ts
+++ b/api/services/playlist-service.ts
@@ -22,19 +22,23 @@ import {
  broadcastPlaylistDumpsUpdated,
  broadcastPlaylistUpdated,
 } from "./ws-service.ts";
-import { notifyPlaylistFollowersNewDump } from "./notification-service.ts";
+import {
+  notifyMentions,
+  notifyPlaylistFollowersNewDump,
+} from "./notification-service.ts";
+import { makeSlug, UUID_RE } from "../lib/slugify.ts";

 const DUMP_SELECT_COLS =
-  "id, kind, title, comment, user_id, created_at, url, rich_content, file_name, file_mime, file_size, vote_count, is_private";
+  "id, kind, title, slug, comment, user_id, created_at, url, rich_content, file_name, file_mime, file_size, vote_count, is_private";

 const PLAYLIST_SELECT = `p.*, u.username as owner_username,
   (SELECT COUNT(*) FROM playlist_dumps pd WHERE pd.playlist_id = p.id) as dump_count
   FROM playlists p LEFT JOIN users u ON u.id = p.user_id`;

-function getPlaylistById(playlistId: string): Playlist {
-  const row = db.prepare(
-    `SELECT ${PLAYLIST_SELECT} WHERE p.id = ?;`,
-  ).get(playlistId);
+function getPlaylistById(idOrSlug: string): Playlist {
+  const row = UUID_RE.test(idOrSlug)
+    ? db.prepare(`SELECT ${PLAYLIST_SELECT} WHERE p.id = ?;`).get(idOrSlug)
+    : db.prepare(`SELECT ${PLAYLIST_SELECT} WHERE p.slug = ?;`).get(idOrSlug);
  if (!row || !isPlaylistRow(row)) {
    throw new APIException(APIErrorCode.NOT_FOUND, 404, "Playlist not found");
  }
@@ -47,13 +51,15 @@ export function createPlaylist(
 ): Playlist {
  const id = crypto.randomUUID();
  const createdAt = new Date();
+  const slug = makeSlug(req.title, id);
  db.prepare(
-    `INSERT INTO playlists (id, user_id, title, description, is_public, created_at)
-     VALUES (?, ?, ?, ?, ?, ?);`,
+    `INSERT INTO playlists (id, user_id, title, slug, description, is_public, created_at)
+     VALUES (?, ?, ?, ?, ?, ?, ?);`,
  ).run(
    id,
    userId,
    req.title,
+    slug,
    req.description ?? null,
    req.isPublic ? 1 : 0,
    createdAt.toISOString(),
@@ -62,10 +68,12 @@ export function createPlaylist(
    id,
    userId,
    title: req.title,
+    slug,
    description: req.description,
    isPublic: req.isPublic,
    createdAt,
  };
+  if (req.description) notifyMentions(userId, req.description, "playlist", id, req.title);
  broadcastPlaylistCreated(playlist);
  return playlist;
 }
@@ -91,7 +99,7 @@ export function getPlaylist(
     WHERE pd.playlist_id = ?
       AND (d.is_private = 0 OR d.user_id = ?)
     ORDER BY pd.position ASC;`,
-  ).all(playlistId, requestingUserId ?? "");
+  ).all(playlist.id, requestingUserId ?? "");

  const dumps: Dump[] = rows.filter(isDumpRow).map(dumpRowToApi);
  // Owners always see their own private dumps; strip them for non-owners regardless
@@ -145,16 +153,21 @@ export function updatePlaylist(
    ? req.isPublic
    : playlist.isPublic;

+  const now = new Date();
+  const newSlug = makeSlug(newTitle, playlist.id);
  db.prepare(
-    `UPDATE playlists SET title = ?, description = ?, is_public = ? WHERE id = ?;`,
-  ).run(newTitle, newDescription, newIsPublic ? 1 : 0, playlistId);
+    `UPDATE playlists SET title = ?, slug = ?, description = ?, is_public = ?, updated_at = ? WHERE id = ?;`,
+  ).run(newTitle, newSlug, newDescription, newIsPublic ? 1 : 0, now.toISOString(), playlist.id);

  const updated: Playlist = {
    ...playlist,
    title: newTitle,
+    slug: newSlug,
    description: newDescription ?? undefined,
    isPublic: newIsPublic,
+    updatedAt: now,
  };
+  if (newDescription) notifyMentions(requestingUserId, newDescription, "playlist", playlist.id, newTitle);
  broadcastPlaylistUpdated(updated);
  return updated;
 }
@@ -169,8 +182,8 @@ export function deletePlaylist(
    throw new APIException(APIErrorCode.UNAUTHORIZED, 403, "Forbidden");
  }

-  db.prepare(`DELETE FROM playlists WHERE id = ?;`).run(playlistId);
-  broadcastPlaylistDeleted(playlistId, playlist.userId, playlist.isPublic);
+  db.prepare(`DELETE FROM playlists WHERE id = ?;`).run(playlist.id);
+  broadcastPlaylistDeleted(playlist.id, playlist.userId, playlist.isPublic);
 }

 export function setPlaylistImage(
@@ -184,9 +197,9 @@ export function setPlaylistImage(
  }
  db.prepare(`UPDATE playlists SET image_mime = ? WHERE id = ?;`).run(
    imageMime,
-    playlistId,
+    playlist.id,
  );
-  const updated = getPlaylistById(playlistId);
+  const updated = getPlaylistById(playlist.id);
  broadcastPlaylistUpdated(updated);
  return updated;
 }
@@ -204,7 +217,7 @@ export function addDumpToPlaylist(

  const minRow = db.prepare(
    `SELECT MIN(position) as min_pos FROM playlist_dumps WHERE playlist_id = ?;`,
-  ).get(playlistId) as { min_pos: number | null } | undefined;
+  ).get(playlist.id) as { min_pos: number | null } | undefined;

  const nextPos = (minRow?.min_pos ?? 1) - 1;
  const addedAt = new Date().toISOString();
@@ -213,7 +226,7 @@ export function addDumpToPlaylist(
    db.prepare(
      `INSERT INTO playlist_dumps (playlist_id, dump_id, position, added_at)
       VALUES (?, ?, ?, ?);`,
-    ).run(playlistId, dumpId, nextPos, addedAt);
+    ).run(playlist.id, dumpId, nextPos, addedAt);
  } catch (err) {
    const msg = err instanceof Error ? err.message : String(err);
    if (msg.includes("UNIQUE") || msg.includes("unique")) {
@@ -226,7 +239,7 @@ export function addDumpToPlaylist(
    throw err;
  }

-  const dumpIds = getCurrentDumpIds(playlistId);
+  const dumpIds = getCurrentDumpIds(playlist.id);
  broadcastPlaylistDumpsUpdated(playlist, dumpIds);

  if (playlist.isPublic) {
@@ -235,7 +248,7 @@ export function addDumpToPlaylist(
    ) as { title: string } | undefined;
    if (dumpRow) {
      notifyPlaylistFollowersNewDump(
-        playlistId,
+        playlist.id,
        playlist.title,
        dumpId,
        dumpRow.title,
@@ -257,9 +270,9 @@ export function removeDumpFromPlaylist(

  db.prepare(
    `DELETE FROM playlist_dumps WHERE playlist_id = ? AND dump_id = ?;`,
-  ).run(playlistId, dumpId);
+  ).run(playlist.id, dumpId);

-  const dumpIds = getCurrentDumpIds(playlistId);
+  const dumpIds = getCurrentDumpIds(playlist.id);
  broadcastPlaylistDumpsUpdated(playlist, dumpIds);
 }

@@ -274,7 +287,7 @@ export function reorderPlaylist(
    throw new APIException(APIErrorCode.UNAUTHORIZED, 403, "Forbidden");
  }

-  const currentIds = getCurrentDumpIds(playlistId);
+  const currentIds = getCurrentDumpIds(playlist.id);
  const currentSet = new Set(currentIds);
  const newSet = new Set(dumpIds);

@@ -293,7 +306,7 @@ export function reorderPlaylist(
    `UPDATE playlist_dumps SET position = ? WHERE playlist_id = ? AND dump_id = ?;`,
  );
  for (let i = 0; i < dumpIds.length; i++) {
-    update.run(i, playlistId, dumpIds[i]);
+    update.run(i, playlist.id, dumpIds[i]);
  }

  broadcastPlaylistDumpsUpdated(playlist, dumpIds);
--- a/api/services/user-service.ts
+++ b/api/services/user-service.ts
@@ -81,6 +81,25 @@ export function getUserByUsername(username: string): User {
  return userRowToApi(userRow);
 }

+export function searchUsers(
+  query: string,
+  limit: number,
+): { id: string; username: string; avatarMime: string | null }[] {
+  if (!query) return [];
+  const rows = db.prepare(
+    `SELECT id, username, avatar_mime FROM users WHERE username LIKE ? ORDER BY username LIMIT ?;`,
+  ).all(`${query}%`, limit) as {
+    id: string;
+    username: string;
+    avatar_mime: string | null;
+  }[];
+  return rows.map((r) => ({
+    id: r.id,
+    username: r.username,
+    avatarMime: r.avatar_mime,
+  }));
+}
+
 export function listUsers(): User[] {
  const userRows = db.prepare(
    `${USER_SELECT}`,
@@ -101,20 +120,23 @@ export async function updateUser(

  const { password, ...requestFields } = request;

+  const now = new Date();
  const updatedUser: User = {
    ...user,
    passwordHash: password ? await hashPassword(password) : user.passwordHash,
    ...requestFields,
+    updatedAt: now,
  };

  const updatedUserRow = userApiToRow(updatedUser);

  const userResult = db.prepare(
-    `UPDATE users SET username = ?, password_hash = ?, is_admin = ? WHERE id = ?`,
+    `UPDATE users SET username = ?, password_hash = ?, is_admin = ?, updated_at = ? WHERE id = ?`,
  ).run(
    updatedUserRow.username,
    updatedUserRow.password_hash,
    updatedUserRow.is_admin,
+    now.toISOString(),
    updatedUserRow.id,
  );

@@ -127,8 +149,8 @@ export async function updateUser(

 export function updateUserAvatar(userId: string, mime: string): void {
  const result = db.prepare(
-    `UPDATE users SET avatar_mime = ? WHERE id = ?`,
-  ).run(mime, userId);
+    `UPDATE users SET avatar_mime = ?, updated_at = ? WHERE id = ?`,
+  ).run(mime, new Date().toISOString(), userId);

  if (result.changes === 0) {
    throw new APIException(APIErrorCode.NOT_FOUND, 404, "User not found");
--- a/api/services/ws-service.ts
+++ b/api/services/ws-service.ts
@@ -117,7 +117,11 @@ export function broadcastPlaylistCreated(playlist: Playlist): void {
 }

 export function broadcastPlaylistUpdated(playlist: Playlist): void {
-  sendToPlaylistAudience(playlist, { type: "playlist_updated", playlist });
+  // Broadcast to ALL clients so non-owners can react to visibility changes
+  // (e.g. remove a now-private playlist from their feed).
+  for (const client of clients) {
+    send(client.socket, { type: "playlist_updated", playlist });
+  }
 }

 export function broadcastPlaylistDeleted(
@@ -158,6 +162,12 @@ export function broadcastCommentDeleted(
  }
 }

+export function broadcastCommentUpdated(comment: Comment): void {
+  for (const client of clients) {
+    send(client.socket, { type: "comment_updated", comment });
+  }
+}
+
 // Keepalive: ping all clients every 30s, remove non-responsive ones
 const PING_INTERVAL = 30_000;

--- a/api/sql/schema.sql
+++ b/api/sql/schema.sql
@@ -5,6 +5,7 @@ CREATE TABLE dumps (
  comment     TEXT,
  user_id     TEXT    NOT NULL,
  created_at  TEXT    NOT NULL,
+  updated_at  TEXT,
  url         TEXT,
  rich_content TEXT,
  file_name   TEXT,
@@ -21,6 +22,7 @@ CREATE TABLE users (
  password_hash TEXT NOT NULL,
  is_admin      INTEGER NOT NULL DEFAULT 0,
  created_at    TEXT NOT NULL,
+  updated_at    TEXT,
  avatar_mime   TEXT,
  invited_by    TEXT REFERENCES users(id)
 );
@@ -41,6 +43,7 @@ CREATE TABLE playlists (
  description TEXT,
  is_public   INTEGER NOT NULL DEFAULT 1,
  created_at  TEXT    NOT NULL,
+  updated_at  TEXT,
  image_mime  TEXT,
  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
 );
@@ -62,6 +65,7 @@ CREATE TABLE comments (
  parent_id  TEXT,
  body       TEXT    NOT NULL,
  created_at TEXT    NOT NULL,
+  updated_at TEXT,
  deleted    INTEGER NOT NULL DEFAULT 0,
  FOREIGN KEY (dump_id)   REFERENCES dumps(id)    ON DELETE CASCADE,
  FOREIGN KEY (user_id)   REFERENCES users(id)    ON DELETE CASCADE,
--- a/deno.lock
+++ b/deno.lock
@@ -5,7 +5,7 @@
    "jsr:@denosaurs/plug@1": "1.1.0",
    "jsr:@oak/commons@1": "1.0.1",
    "jsr:@oak/oak@^17.2.0": "17.2.0",
-    "jsr:@panva/jose@^6.2.1": "6.2.1",
+    "jsr:@panva/jose@^6.2.1": "6.2.2",
    "jsr:@std/assert@1": "1.0.19",
    "jsr:@std/bytes@1": "1.0.6",
    "jsr:@std/crypto@1": "1.0.5",
@@ -20,12 +20,12 @@
    "jsr:@std/path@1.0": "1.0.9",
    "jsr:@std/path@^1.1.4": "1.1.4",
    "jsr:@tajpouria/cors@^1.2.1": "1.2.1",
-    "npm:@deno/vite-plugin@^1.0.6": "1.0.6_vite@8.0.0__@types+node@24.12.0",
+    "npm:@deno/vite-plugin@^1.0.6": "1.0.6_vite@8.0.1__@types+node@24.12.0_@types+node@24.12.0",
    "npm:@eslint/js@^9.39.4": "9.39.4",
    "npm:@types/node@^24.12.0": "24.12.0",
    "npm:@types/react-dom@^19.2.3": "19.2.3_@types+react@19.2.14",
    "npm:@types/react@^19.2.14": "19.2.14",
-    "npm:@vitejs/plugin-react@^6.0.1": "6.0.1_vite@8.0.0__@types+node@24.12.0",
+    "npm:@vitejs/plugin-react@^6.0.1": "6.0.1_vite@8.0.1__@types+node@24.12.0_@types+node@24.12.0",
    "npm:eslint-plugin-react-hooks@^7.0.1": "7.0.1_eslint@9.39.4",
    "npm:eslint-plugin-react-refresh@~0.5.2": "0.5.2_eslint@9.39.4",
    "npm:eslint@^9.39.4": "9.39.4",
@@ -36,10 +36,10 @@
    "npm:react-router@^7.13.1": "7.13.1_react@19.2.4_react-dom@19.2.4__react@19.2.4",
    "npm:react@^19.2.4": "19.2.4",
    "npm:remark-gfm@^4.0.1": "4.0.1",
-    "npm:typescript-eslint@^8.56.1": "8.57.0_eslint@9.39.4_typescript@5.9.3",
+    "npm:typescript-eslint@^8.56.1": "8.57.1_eslint@9.39.4_typescript@5.9.3",
    "npm:typescript@~5.9.3": "5.9.3",
-    "npm:vite@*": "8.0.0_@types+node@24.12.0",
-    "npm:vite@8": "8.0.0_@types+node@24.12.0"
+    "npm:vite@*": "8.0.1_@types+node@24.12.0",
+    "npm:vite@8": "8.0.1_@types+node@24.12.0"
  },
  "jsr": {
    "@db/sqlite@0.13.0": {
@@ -81,8 +81,8 @@
        "npm:path-to-regexp"
      ]
    },
-    "@panva/jose@6.2.1": {
-      "integrity": "6725a90a47be84c57a0f889c73bf09c6a209019c816f1f029f9084929fadfcbf"
+    "@panva/jose@6.2.2": {
+      "integrity": "bfe1178a9d2f53effa5ee6c1786b6534a39690b03969472b3ad690600d8898ec"
    },
    "@std/assert@1.0.19": {
      "integrity": "eaada96ee120cb980bc47e040f82814d786fe8162ecc53c91d8df60b8755991e"
@@ -211,15 +211,15 @@
    "@babel/helper-validator-option@7.27.1": {
      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg=="
    },
-    "@babel/helpers@7.28.6": {
-      "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==",
+    "@babel/helpers@7.29.2": {
+      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
      "dependencies": [
        "@babel/template",
        "@babel/types"
      ]
    },
-    "@babel/parser@7.29.0": {
-      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+    "@babel/parser@7.29.2": {
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
      "dependencies": [
        "@babel/types"
      ],
@@ -252,21 +252,21 @@
        "@babel/helper-validator-identifier"
      ]
    },
-    "@deno/vite-plugin@1.0.6_vite@8.0.0__@types+node@24.12.0": {
+    "@deno/vite-plugin@1.0.6_vite@8.0.1__@types+node@24.12.0_@types+node@24.12.0": {
      "integrity": "sha512-Sh5XqvFuKAwjARTesi0n6xRpEXm1V0UeqKh+SxIrexCofxOaieNDMqXZD02RiZCg0mrJ43V8eCMuVrDfq6mLmg==",
      "dependencies": [
        "vite"
      ]
    },
-    "@emnapi/core@1.9.0": {
-      "integrity": "sha512-0DQ98G9ZQZOxfUcQn1waV2yS8aWdZ6kJMbYCJB3oUBecjWYO1fqJ+a1DRfPF3O5JEkwqwP1A9QEN/9mYm2Yd0w==",
+    "@emnapi/core@1.9.1": {
+      "integrity": "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==",
      "dependencies": [
        "@emnapi/wasi-threads",
        "tslib"
      ]
    },
-    "@emnapi/runtime@1.9.0": {
-      "integrity": "sha512-QN75eB0IH2ywSpRpNddCRfQIhmJYBCJ1x5Lb3IscKAL8bMnVAKnRg8dCoXbHzVLLH7P38N2Z3mtulB7W0J0FKw==",
+    "@emnapi/runtime@1.9.1": {
+      "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==",
      "dependencies": [
        "tslib"
      ]
@@ -385,103 +385,100 @@
        "@tybys/wasm-util"
      ]
    },
-    "@oxc-project/runtime@0.115.0": {
-      "integrity": "sha512-Rg8Wlt5dCbXhQnsXPrkOjL1DTSvXLgb2R/KYfnf1/K+R0k6UMLEmbQXPM+kwrWqSmWA2t0B1EtHy2/3zikQpvQ=="
+    "@oxc-project/types@0.120.0": {
+      "integrity": "sha512-k1YNu55DuvAip/MGE1FTsIuU3FUCn6v/ujG9V7Nq5Df/kX2CWb13hhwD0lmJGMGqE+bE1MXvv9SZVnMzEXlWcg=="
    },
-    "@oxc-project/types@0.115.0": {
-      "integrity": "sha512-4n91DKnebUS4yjUHl2g3/b2T+IUdCfmoZGhmwsovZCDaJSs+QkVAM+0AqqTxHSsHfeiMuueT75cZaZcT/m0pSw=="
-    },
-    "@rolldown/binding-android-arm64@1.0.0-rc.9": {
-      "integrity": "sha512-lcJL0bN5hpgJfSIz/8PIf02irmyL43P+j1pTCfbD1DbLkmGRuFIA4DD3B3ZOvGqG0XiVvRznbKtN0COQVaKUTg==",
+    "@rolldown/binding-android-arm64@1.0.0-rc.10": {
+      "integrity": "sha512-jOHxwXhxmFKuXztiu1ORieJeTbx5vrTkcOkkkn2d35726+iwhrY1w/+nYY/AGgF12thg33qC3R1LMBF5tHTZHg==",
      "os": ["android"],
      "cpu": ["arm64"]
    },
-    "@rolldown/binding-darwin-arm64@1.0.0-rc.9": {
-      "integrity": "sha512-J7Zk3kLYFsLtuH6U+F4pS2sYVzac0qkjcO5QxHS7OS7yZu2LRs+IXo+uvJ/mvpyUljDJ3LROZPoQfgBIpCMhdQ==",
+    "@rolldown/binding-darwin-arm64@1.0.0-rc.10": {
+      "integrity": "sha512-gED05Teg/vtTZbIJBc4VNMAxAFDUPkuO/rAIyyxZjTj1a1/s6z5TII/5yMGZ0uLRCifEtwUQn8OlYzuYc0m70w==",
      "os": ["darwin"],
      "cpu": ["arm64"]
    },
-    "@rolldown/binding-darwin-x64@1.0.0-rc.9": {
-      "integrity": "sha512-iwtmmghy8nhfRGeNAIltcNXzD0QMNaaA5U/NyZc1Ia4bxrzFByNMDoppoC+hl7cDiUq5/1CnFthpT9n+UtfFyg==",
+    "@rolldown/binding-darwin-x64@1.0.0-rc.10": {
+      "integrity": "sha512-rI15NcM1mA48lqrIxVkHfAqcyFLcQwyXWThy+BQ5+mkKKPvSO26ir+ZDp36AgYoYVkqvMcdS8zOE6SeBsR9e8A==",
      "os": ["darwin"],
      "cpu": ["x64"]
    },
-    "@rolldown/binding-freebsd-x64@1.0.0-rc.9": {
-      "integrity": "sha512-DLFYI78SCiZr5VvdEplsVC2Vx53lnA4/Ga5C65iyldMVaErr86aiqCoNBLl92PXPfDtUYjUh+xFFor40ueNs4Q==",
+    "@rolldown/binding-freebsd-x64@1.0.0-rc.10": {
+      "integrity": "sha512-XZRXHdTa+4ME1MuDVp021+doQ+z6Ei4CCFmNc5/sKbqb8YmkiJdj8QKlV3rCI0AJtAeSB5n0WGPuJWNL9p/L2w==",
      "os": ["freebsd"],
      "cpu": ["x64"]
    },
-    "@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.9": {
-      "integrity": "sha512-CsjTmTwd0Hri6iTw/DRMK7kOZ7FwAkrO4h8YWKoX/kcj833e4coqo2wzIFywtch/8Eb5enQ/lwLM7w6JX1W5RQ==",
+    "@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.10": {
+      "integrity": "sha512-R0SQMRluISSLzFE20sPWYHVmJdDQnRyc/FzSCN72BqQmh2SOZUFG+N3/vBZpR4C6WpEUVYJLrYUXaj43sJsNLA==",
      "os": ["linux"],
      "cpu": ["arm"]
    },
-    "@rolldown/binding-linux-arm64-gnu@1.0.0-rc.9": {
-      "integrity": "sha512-2x9O2JbSPxpxMDhP9Z74mahAStibTlrBMW0520+epJH5sac7/LwZW5Bmg/E6CXuEF53JJFW509uP+lSedaUNxg==",
+    "@rolldown/binding-linux-arm64-gnu@1.0.0-rc.10": {
+      "integrity": "sha512-Y1reMrV/o+cwpduYhJuOE3OMKx32RMYCidf14y+HssARRmhDuWXJ4yVguDg2R/8SyyGNo+auzz64LnPK9Hq6jg==",
      "os": ["linux"],
      "cpu": ["arm64"]
    },
-    "@rolldown/binding-linux-arm64-musl@1.0.0-rc.9": {
-      "integrity": "sha512-JA1QRW31ogheAIRhIg9tjMfsYbglXXYGNPLdPEYrwFxdbkQCAzvpSCSHCDWNl4hTtrol8WeboCSEpjdZK8qrCg==",
+    "@rolldown/binding-linux-arm64-musl@1.0.0-rc.10": {
+      "integrity": "sha512-vELN+HNb2IzuzSBUOD4NHmP9yrGwl1DVM29wlQvx1OLSclL0NgVWnVDKl/8tEks79EFek/kebQKnNJkIAA4W2g==",
      "os": ["linux"],
      "cpu": ["arm64"]
    },
-    "@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.9": {
-      "integrity": "sha512-aOKU9dJheda8Kj8Y3w9gnt9QFOO+qKPAl8SWd7JPHP+Cu0EuDAE5wokQubLzIDQWg2myXq2XhTpOVS07qqvT+w==",
+    "@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.10": {
+      "integrity": "sha512-ZqrufYTgzxbHwpqOjzSsb0UV/aV2TFIY5rP8HdsiPTv/CuAgCRjM6s9cYFwQ4CNH+hf9Y4erHW1GjZuZ7WoI7w==",
      "os": ["linux"],
      "cpu": ["ppc64"]
    },
-    "@rolldown/binding-linux-s390x-gnu@1.0.0-rc.9": {
-      "integrity": "sha512-OalO94fqj7IWRn3VdXWty75jC5dk4C197AWEuMhIpvVv2lw9fiPhud0+bW2ctCxb3YoBZor71QHbY+9/WToadA==",
+    "@rolldown/binding-linux-s390x-gnu@1.0.0-rc.10": {
+      "integrity": "sha512-gSlmVS1FZJSRicA6IyjoRoKAFK7IIHBs7xJuHRSmjImqk3mPPWbR7RhbnfH2G6bcmMEllCt2vQ/7u9e6bBnByg==",
      "os": ["linux"],
      "cpu": ["s390x"]
    },
-    "@rolldown/binding-linux-x64-gnu@1.0.0-rc.9": {
-      "integrity": "sha512-cVEl1vZtBsBZna3YMjGXNvnYYrOJ7RzuWvZU0ffvJUexWkukMaDuGhUXn0rjnV0ptzGVkvc+vW9Yqy6h8YX4pg==",
+    "@rolldown/binding-linux-x64-gnu@1.0.0-rc.10": {
+      "integrity": "sha512-eOCKUpluKgfObT2pHjztnaWEIbUabWzk3qPZ5PuacuPmr4+JtQG4k2vGTY0H15edaTnicgU428XW/IH6AimcQw==",
      "os": ["linux"],
      "cpu": ["x64"]
    },
-    "@rolldown/binding-linux-x64-musl@1.0.0-rc.9": {
-      "integrity": "sha512-UzYnKCIIc4heAKgI4PZ3dfBGUZefGCJ1TPDuLHoCzgrMYPb5Rv6TLFuYtyM4rWyHM7hymNdsg5ik2C+UD9VDbA==",
+    "@rolldown/binding-linux-x64-musl@1.0.0-rc.10": {
+      "integrity": "sha512-Xdf2jQbfQowJnLcgYfD/m0Uu0Qj5OdxKallD78/IPPfzaiaI4KRAwZzHcKQ4ig1gtg1SuzC7jovNiM2TzQsBXA==",
      "os": ["linux"],
      "cpu": ["x64"]
    },
-    "@rolldown/binding-openharmony-arm64@1.0.0-rc.9": {
-      "integrity": "sha512-+6zoiF+RRyf5cdlFQP7nm58mq7+/2PFaY2DNQeD4B87N36JzfF/l9mdBkkmTvSYcYPE8tMh/o3cRlsx1ldLfog==",
+    "@rolldown/binding-openharmony-arm64@1.0.0-rc.10": {
+      "integrity": "sha512-o1hYe8hLi1EY6jgPFyxQgQ1wcycX+qz8eEbVmot2hFkgUzPxy9+kF0u0NIQBeDq+Mko47AkaFFaChcvZa9UX9Q==",
      "os": ["openharmony"],
      "cpu": ["arm64"]
    },
-    "@rolldown/binding-wasm32-wasi@1.0.0-rc.9": {
-      "integrity": "sha512-rgFN6sA/dyebil3YTlL2evvi/M+ivhfnyxec7AccTpRPccno/rPoNlqybEZQBkcbZu8Hy+eqNJCqfBR8P7Pg8g==",
+    "@rolldown/binding-wasm32-wasi@1.0.0-rc.10": {
+      "integrity": "sha512-Ugv9o7qYJudqQO5Y5y2N2SOo6S4WiqiNOpuQyoPInnhVzCY+wi/GHltcLHypG9DEUYMB0iTB/huJrpadiAcNcA==",
      "dependencies": [
        "@napi-rs/wasm-runtime"
      ],
      "cpu": ["wasm32"]
    },
-    "@rolldown/binding-win32-arm64-msvc@1.0.0-rc.9": {
-      "integrity": "sha512-lHVNUG/8nlF1IQk1C0Ci574qKYyty2goMiPlRqkC5R+3LkXDkL5Dhx8ytbxq35m+pkHVIvIxviD+TWLdfeuadA==",
+    "@rolldown/binding-win32-arm64-msvc@1.0.0-rc.10": {
+      "integrity": "sha512-7UODQb4fQUNT/vmgDZBl3XOBAIOutP5R3O/rkxg0aLfEGQ4opbCgU5vOw/scPe4xOqBwL9fw7/RP1vAMZ6QlAQ==",
      "os": ["win32"],
      "cpu": ["arm64"]
    },
-    "@rolldown/binding-win32-x64-msvc@1.0.0-rc.9": {
-      "integrity": "sha512-G0oA4+w1iY5AGi5HcDTxWsoxF509hrFIPB2rduV5aDqS9FtDg1CAfa7V34qImbjfhIcA8C+RekocJZA96EarwQ==",
+    "@rolldown/binding-win32-x64-msvc@1.0.0-rc.10": {
+      "integrity": "sha512-PYxKHMVHOb5NJuDL53vBUl1VwUjymDcYI6rzpIni0C9+9mTiJedvUxSk7/RPp7OOAm3v+EjgMu9bIy3N6b408w==",
      "os": ["win32"],
      "cpu": ["x64"]
    },
+    "@rolldown/pluginutils@1.0.0-rc.10": {
+      "integrity": "sha512-UkVDEFk1w3mveXeKgaTuYfKWtPbvgck1dT8TUG3bnccrH0XtLTuAyfCoks4Q/M5ZGToSVJTIQYCzy2g/atAOeg=="
+    },
    "@rolldown/pluginutils@1.0.0-rc.7": {
      "integrity": "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA=="
    },
-    "@rolldown/pluginutils@1.0.0-rc.9": {
-      "integrity": "sha512-w6oiRWgEBl04QkFZgmW+jnU1EC9b57Oihi2ot3HNWIQRqgHp5PnYDia5iZ5FF7rpa4EQdiqMDXjlqKGXBhsoXw=="
-    },
    "@tybys/wasm-util@0.10.1": {
      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
      "dependencies": [
        "tslib"
      ]
    },
-    "@types/debug@4.1.12": {
-      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+    "@types/debug@4.1.13": {
+      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
      "dependencies": [
        "@types/ms"
      ]
@@ -537,8 +534,8 @@
    "@types/unist@3.0.3": {
      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
    },
-    "@typescript-eslint/eslint-plugin@8.57.0_@typescript-eslint+parser@8.57.0__eslint@9.39.4__typescript@5.9.3_eslint@9.39.4_typescript@5.9.3": {
-      "integrity": "sha512-qeu4rTHR3/IaFORbD16gmjq9+rEs9fGKdX0kF6BKSfi+gCuG3RCKLlSBYzn/bGsY9Tj7KE/DAQStbp8AHJGHEQ==",
+    "@typescript-eslint/eslint-plugin@8.57.1_@typescript-eslint+parser@8.57.1__eslint@9.39.4__typescript@5.9.3_eslint@9.39.4_typescript@5.9.3": {
+      "integrity": "sha512-Gn3aqnvNl4NGc6x3/Bqk1AOn0thyTU9bqDRhiRnUWezgvr2OnhYCWCgC8zXXRVqBsIL1pSDt7T9nJUe0oM0kDQ==",
      "dependencies": [
        "@eslint-community/regexpp",
        "@typescript-eslint/parser",
@@ -553,8 +550,8 @@
        "typescript"
      ]
    },
-    "@typescript-eslint/parser@8.57.0_eslint@9.39.4_typescript@5.9.3": {
-      "integrity": "sha512-XZzOmihLIr8AD1b9hL9ccNMzEMWt/dE2u7NyTY9jJG6YNiNthaD5XtUHVF2uCXZ15ng+z2hT3MVuxnUYhq6k1g==",
+    "@typescript-eslint/parser@8.57.1_eslint@9.39.4_typescript@5.9.3": {
+      "integrity": "sha512-k4eNDan0EIMTT/dUKc/g+rsJ6wcHYhNPdY19VoX/EOtaAG8DLtKCykhrUnuHPYvinn5jhAPgD2Qw9hXBwrahsw==",
      "dependencies": [
        "@typescript-eslint/scope-manager",
        "@typescript-eslint/types",
@@ -565,8 +562,8 @@
        "typescript"
      ]
    },
-    "@typescript-eslint/project-service@8.57.0_typescript@5.9.3": {
-      "integrity": "sha512-pR+dK0BlxCLxtWfaKQWtYr7MhKmzqZxuii+ZjuFlZlIGRZm22HnXFqa2eY+90MUz8/i80YJmzFGDUsi8dMOV5w==",
+    "@typescript-eslint/project-service@8.57.1_typescript@5.9.3": {
+      "integrity": "sha512-vx1F37BRO1OftsYlmG9xay1TqnjNVlqALymwWVuYTdo18XuKxtBpCj1QlzNIEHlvlB27osvXFWptYiEWsVdYsg==",
      "dependencies": [
        "@typescript-eslint/tsconfig-utils",
        "@typescript-eslint/types",
@@ -574,21 +571,21 @@
        "typescript"
      ]
    },
-    "@typescript-eslint/scope-manager@8.57.0": {
-      "integrity": "sha512-nvExQqAHF01lUM66MskSaZulpPL5pgy5hI5RfrxviLgzZVffB5yYzw27uK/ft8QnKXI2X0LBrHJFr1TaZtAibw==",
+    "@typescript-eslint/scope-manager@8.57.1": {
+      "integrity": "sha512-hs/QcpCwlwT2L5S+3fT6gp0PabyGk4Q0Rv2doJXA0435/OpnSR3VRgvrp8Xdoc3UAYSg9cyUjTeFXZEPg/3OKg==",
      "dependencies": [
        "@typescript-eslint/types",
        "@typescript-eslint/visitor-keys"
      ]
    },
-    "@typescript-eslint/tsconfig-utils@8.57.0_typescript@5.9.3": {
-      "integrity": "sha512-LtXRihc5ytjJIQEH+xqjB0+YgsV4/tW35XKX3GTZHpWtcC8SPkT/d4tqdf1cKtesryHm2bgp6l555NYcT2NLvA==",
+    "@typescript-eslint/tsconfig-utils@8.57.1_typescript@5.9.3": {
+      "integrity": "sha512-0lgOZB8cl19fHO4eI46YUx2EceQqhgkPSuCGLlGi79L2jwYY1cxeYc1Nae8Aw1xjgW3PKVDLlr3YJ6Bxx8HkWg==",
      "dependencies": [
        "typescript"
      ]
    },
-    "@typescript-eslint/type-utils@8.57.0_eslint@9.39.4_typescript@5.9.3": {
-      "integrity": "sha512-yjgh7gmDcJ1+TcEg8x3uWQmn8ifvSupnPfjP21twPKrDP/pTHlEQgmKcitzF/rzPSmv7QjJ90vRpN4U+zoUjwQ==",
+    "@typescript-eslint/type-utils@8.57.1_eslint@9.39.4_typescript@5.9.3": {
+      "integrity": "sha512-+Bwwm0ScukFdyoJsh2u6pp4S9ktegF98pYUU0hkphOOqdMB+1sNQhIz8y5E9+4pOioZijrkfNO/HUJVAFFfPKA==",
      "dependencies": [
        "@typescript-eslint/types",
        "@typescript-eslint/typescript-estree",
@@ -599,11 +596,11 @@
        "typescript"
      ]
    },
-    "@typescript-eslint/types@8.57.0": {
-      "integrity": "sha512-dTLI8PEXhjUC7B9Kre+u0XznO696BhXcTlOn0/6kf1fHaQW8+VjJAVHJ3eTI14ZapTxdkOmc80HblPQLaEeJdg=="
+    "@typescript-eslint/types@8.57.1": {
+      "integrity": "sha512-S29BOBPJSFUiblEl6RzPPjJt6w25A6XsBqRVDt53tA/tlL8q7ceQNZHTjPeONt/3S7KRI4quk+yP9jK2WjBiPQ=="
    },
-    "@typescript-eslint/typescript-estree@8.57.0_typescript@5.9.3": {
-      "integrity": "sha512-m7faHcyVg0BT3VdYTlX8GdJEM7COexXxS6KqGopxdtkQRvBanK377QDHr4W/vIPAR+ah9+B/RclSW5ldVniO1Q==",
+    "@typescript-eslint/typescript-estree@8.57.1_typescript@5.9.3": {
+      "integrity": "sha512-ybe2hS9G6pXpqGtPli9Gx9quNV0TWLOmh58ADlmZe9DguLq0tiAKVjirSbtM1szG6+QH6rVXyU6GTLQbWnMY+g==",
      "dependencies": [
        "@typescript-eslint/project-service",
        "@typescript-eslint/tsconfig-utils",
@@ -617,8 +614,8 @@
        "typescript"
      ]
    },
-    "@typescript-eslint/utils@8.57.0_eslint@9.39.4_typescript@5.9.3": {
-      "integrity": "sha512-5iIHvpD3CZe06riAsbNxxreP+MuYgVUsV0n4bwLH//VJmgtt54sQeY2GszntJ4BjYCpMzrfVh2SBnUQTtys2lQ==",
+    "@typescript-eslint/utils@8.57.1_eslint@9.39.4_typescript@5.9.3": {
+      "integrity": "sha512-XUNSJ/lEVFttPMMoDVA2r2bwrl8/oPx8cURtczkSEswY5T3AeLmCy+EKWQNdL4u0MmAHOjcWrqJp2cdvgjn8dQ==",
      "dependencies": [
        "@eslint-community/eslint-utils",
        "@typescript-eslint/scope-manager",
@@ -628,8 +625,8 @@
        "typescript"
      ]
    },
-    "@typescript-eslint/visitor-keys@8.57.0": {
-      "integrity": "sha512-zm6xx8UT/Xy2oSr2ZXD0pZo7Jx2XsCoID2IUh9YSTFRu7z+WdwYTRk6LhUftm1crwqbuoF6I8zAFeCMw0YjwDg==",
+    "@typescript-eslint/visitor-keys@8.57.1": {
+      "integrity": "sha512-YWnmJkXbofiz9KbnbbwuA2rpGkFPLbAIetcCNO6mJ8gdhdZ/v7WDXsoGFAJuM6ikUFKTlSQnjWnVO4ux+UzS6A==",
      "dependencies": [
        "@typescript-eslint/types",
        "eslint-visitor-keys@5.0.1"
@@ -638,7 +635,7 @@
    "@ungap/structured-clone@1.3.0": {
      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="
    },
-    "@vitejs/plugin-react@6.0.1_vite@8.0.0__@types+node@24.12.0": {
+    "@vitejs/plugin-react@6.0.1_vite@8.0.1__@types+node@24.12.0_@types+node@24.12.0": {
      "integrity": "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ==",
      "dependencies": [
        "@rolldown/pluginutils@1.0.0-rc.7",
@@ -682,8 +679,8 @@
    "balanced-match@4.0.4": {
      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="
    },
-    "baseline-browser-mapping@2.10.8": {
-      "integrity": "sha512-PCLz/LXGBsNTErbtB6i5u4eLpHeMfi93aUv5duMmj6caNu6IphS4q6UevDnL36sZQv9lrP11dbPKGMaXPwMKfQ==",
+    "baseline-browser-mapping@2.10.10": {
+      "integrity": "sha512-sUoJ3IMxx4AyRqO4MLeHlnGDkyXRoUG0/AI9fjK+vS72ekpV0yWVY7O0BVjmBcRtkNcsAO2QDZ4tdKKGoI6YaQ==",
      "bin": true
    },
    "brace-expansion@1.1.12": {
@@ -713,8 +710,8 @@
    "callsites@3.1.0": {
      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
    },
-    "caniuse-lite@1.0.30001779": {
-      "integrity": "sha512-U5og2PN7V4DMgF50YPNtnZJGWVLFjjsN3zb6uMT5VGYIewieDj1upwfuVNXf4Kor+89c3iCRJnSzMD5LmTvsfA=="
+    "caniuse-lite@1.0.30001780": {
+      "integrity": "sha512-llngX0E7nQci5BPJDqoZSbuZ5Bcs9F5db7EtgfwBerX9XGtkkiO4NwfDDIRzHTTwcYC8vC7bmeUEPGrKlR/TkQ=="
    },
    "ccount@2.0.1": {
      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="
@@ -797,8 +794,8 @@
        "dequal"
      ]
    },
-    "electron-to-chromium@1.5.313": {
-      "integrity": "sha512-QBMrTWEf00GXZmJyx2lbYD45jpI3TUFnNIzJ5BBc8piGUDwMPa1GV6HJWTZVvY/eiN3fSopl7NRbgGp9sZ9LTA=="
+    "electron-to-chromium@1.5.321": {
+      "integrity": "sha512-L2C7Q279W2D/J4PLZLk7sebOILDSWos7bMsMNN06rK482umHUrh/3lM8G7IlHFOYip2oAg5nha1rCMxr/rs6ZQ=="
    },
    "escalade@3.2.0": {
      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="
@@ -952,8 +949,8 @@
        "keyv"
      ]
    },
-    "flatted@3.4.1": {
-      "integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ=="
+    "flatted@3.4.2": {
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA=="
    },
    "fsevents@2.3.3": {
      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
@@ -1786,11 +1783,11 @@
    "resolve-from@4.0.0": {
      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
    },
-    "rolldown@1.0.0-rc.9": {
-      "integrity": "sha512-9EbgWge7ZH+yqb4d2EnELAntgPTWbfL8ajiTW+SyhJEC4qhBbkCKbqFV4Ge4zmu5ziQuVbWxb/XwLZ+RIO7E8Q==",
+    "rolldown@1.0.0-rc.10": {
+      "integrity": "sha512-q7j6vvarRFmKpgJUT8HCAUljkgzEp4LAhPlJUvQhA5LA1SUL36s5QCysMutErzL3EbNOZOkoziSx9iZC4FddKA==",
      "dependencies": [
        "@oxc-project/types",
-        "@rolldown/pluginutils@1.0.0-rc.9"
+        "@rolldown/pluginutils@1.0.0-rc.10"
      ],
      "optionalDependencies": [
        "@rolldown/binding-android-arm64",
@@ -1881,8 +1878,8 @@
    "trough@2.2.0": {
      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw=="
    },
-    "ts-api-utils@2.4.0_typescript@5.9.3": {
-      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+    "ts-api-utils@2.5.0_typescript@5.9.3": {
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
      "dependencies": [
        "typescript"
      ]
@@ -1896,8 +1893,8 @@
        "prelude-ls"
      ]
    },
-    "typescript-eslint@8.57.0_eslint@9.39.4_typescript@5.9.3": {
-      "integrity": "sha512-W8GcigEMEeB07xEZol8oJ26rigm3+bfPHxHvwbYUlu1fUDsGuQ7Hiskx5xGW/xM4USc9Ephe3jtv7ZYPQntHeA==",
+    "typescript-eslint@8.57.1_eslint@9.39.4_typescript@5.9.3": {
+      "integrity": "sha512-fLvZWf+cAGw3tqMCYzGIU6yR8K+Y9NT2z23RwOjlNFF2HwSB3KhdEFI5lSBv8tNmFkkBShSjsCjzx1vahZfISA==",
      "dependencies": [
        "@typescript-eslint/eslint-plugin",
        "@typescript-eslint/parser",
@@ -1988,10 +1985,9 @@
        "vfile-message"
      ]
    },
-    "vite@8.0.0_@types+node@24.12.0": {
-      "integrity": "sha512-fPGaRNj9Zytaf8LEiBhY7Z6ijnFKdzU/+mL8EFBaKr7Vw1/FWcTBAMW0wLPJAGMPX38ZPVCVgLceWiEqeoqL2Q==",
+    "vite@8.0.1_@types+node@24.12.0": {
+      "integrity": "sha512-wt+Z2qIhfFt85uiyRt5LPU4oVEJBXj8hZNWKeqFG4gRG/0RaRGJ7njQCwzFVjO+v4+Ipmf5CY7VdmZRAYYBPHw==",
      "dependencies": [
-        "@oxc-project/runtime",
        "@types/node",
        "lightningcss",
        "picomatch",
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,6 @@
 /* ── Markdown prose ── */
 .md p {
-  margin: 0 0 0.7em;
+  margin: 0 0 0.85em;
 }
 .md p:last-child {
  margin-bottom: 0;
@@ -120,7 +120,7 @@

 .dump-comment {
  font-size: 1.05rem;
-  line-height: 1.6;
+  line-height: 1.72;
  opacity: 0.85;
  border-left: 3px solid var(--color-accent);
  margin: 0;
@@ -318,6 +318,138 @@
  opacity: 0.7;
 }

+/* ── FileDropZone ── */
+.fdz-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.fdz-label {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.fdz {
+  border: 2px dashed var(--color-border-subtle);
+  border-radius: 10px;
+  background: var(--color-surface);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  outline: none;
+}
+
+.fdz:hover:not(.fdz--disabled):not(.fdz--filled),
+.fdz:focus-visible {
+  border-color: var(--color-accent);
+}
+
+.fdz--drag {
+  border-color: var(--color-accent);
+  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
+}
+
+.fdz--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.fdz--filled {
+  cursor: default;
+  border-style: solid;
+}
+
+.fdz__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 2rem 1.5rem;
+  user-select: none;
+}
+
+.fdz__upload-icon {
+  width: 2rem;
+  height: 2rem;
+  opacity: 0.4;
+  margin-bottom: 0.2rem;
+}
+
+.fdz__hint {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.fdz__browse {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+}
+
+.fdz__browse-link {
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.fdz__limit {
+  margin: 0.25rem 0 0;
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
+}
+
+.fdz__file {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+}
+
+.fdz__file-icon {
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.fdz__file-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.fdz__file-name {
+  font-size: 0.9rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fdz__file-size {
+  font-size: 0.78rem;
+  color: var(--color-text-muted);
+}
+
+.fdz__clear {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  padding: 0.3rem 0.5rem;
+  border-radius: 4px;
+  transition: color 0.12s, background 0.12s;
+  line-height: 1;
+}
+
+.fdz__clear:hover {
+  color: var(--color-text);
+  background: var(--color-border-subtle);
+}
+
 /* ── Local file / URL preview (DumpCreate) ── */
 .local-preview-image {
  width: 100%;
@@ -559,7 +691,8 @@

 .file-preview-pdf {
  width: 100%;
-  min-height: 420px;
+  height: 80vh;
+  min-height: 600px;
  border-radius: 8px;
  border: 2px solid var(--color-border);
  display: block;
@@ -1907,16 +2040,22 @@ body.has-player .fab-new {

 .dump-card-meta {
  display: flex;
-  align-items: center;
+  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.2rem;
 }

 .dump-card-date {
-  display: block;
  margin-top: 0;
 }

+.dump-edited-label,
+.playlist-edited-label {
+  font-size: 0.72rem;
+  opacity: 0.5;
+  font-style: italic;
+}
+
 .playlist-card-meta {
  display: flex;
  align-items: center;
@@ -2213,9 +2352,10 @@ body.has-player .fab-new {
 }

 .playlist-detail-description {
+  font-size: 1rem;
  margin: 0 0 0.5rem;
  opacity: 0.75;
-  line-height: 1.5;
+  line-height: 1.75;
 }

 .playlist-detail-meta {
@@ -2518,11 +2658,32 @@ body.has-player .fab-new {
 .comment-time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
+  text-decoration: none;
+}
+.comment-time:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+@keyframes comment-highlight {
+  0%   { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
+  100% { background: transparent; }
+}
+.comment-node--highlight {
+  border-radius: 6px;
+  animation: comment-highlight 2s ease-out forwards;
+}
+
+.comment-edited {
+  font-size: 0.72rem;
+  color: var(--color-text-muted);
+  opacity: 0.7;
+  font-style: italic;
 }

 .comment-body {
  font-size: 0.9rem;
-  line-height: 1.6;
+  line-height: 1.65;
  color: var(--color-text);
 }

@@ -2582,6 +2743,20 @@ body.has-player .fab-new {
  border: 1px solid var(--color-border-subtle);
 }

+.comment-top-form-inner {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.comment-top-form-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
 .comment-reply-textarea {
  width: 100%;
  box-sizing: border-box;
@@ -2592,8 +2767,9 @@ body.has-player .fab-new {
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--color-text);
-  resize: vertical;
-  min-height: 4.5rem;
+  resize: none;
+  overflow: hidden;
+  min-height: 2.4rem;
  transition: border-color 0.15s, box-shadow 0.15s;
 }

@@ -2866,15 +3042,12 @@ body.has-player .fab-new {
  gap: 1rem;
 }
 .notification-item {
-  display: flex;
-  align-items: center;
-  gap: 0.875rem;
-  padding: 0.875rem 1rem;
  background: var(--color-surface);
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle);
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
+  overflow: hidden;
 }
 .notification-item:hover {
  background: color-mix(
@@ -2883,6 +3056,15 @@ body.has-player .fab-new {
    var(--color-text) 8%
  );
 }
+.notification-item-link {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  padding: 0.875rem 1rem;
+  text-decoration: none;
+  color: inherit;
+  width: 100%;
+}
 .notification-item--unread {
  border-left-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface));
@@ -2945,15 +3127,6 @@ body.has-player .fab-new {
  white-space: nowrap;
  flex-shrink: 0;
 }
-.notif-link {
-  color: var(--color-text);
-  text-decoration: none;
-  font-weight: 600;
-}
-.notif-link:hover {
-  color: var(--color-accent);
-  text-decoration: underline;
-}
 .load-more-btn {
  display: block;
  margin: 1.5rem auto 0;
@@ -2974,3 +3147,64 @@ body.has-player .fab-new {
  opacity: 0.5;
  cursor: not-allowed;
 }
+
+/* ── Mention autocomplete ── */
+.mention-textarea-wrap {
+  position: relative;
+}
+
+.mention-textarea-wrap textarea {
+  width: 100%;
+  box-sizing: border-box;
+}
+.mention-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 200;
+  list-style: none;
+  margin: 2px 0 0;
+  padding: 4px 0;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+  max-height: 220px;
+  overflow-y: auto;
+}
+.mention-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.mention-dropdown-item:hover,
+.mention-dropdown-item--selected {
+  background: var(--color-bg);
+}
+.mention-dropdown-username {
+  font-size: 0.9rem;
+  color: var(--color-text);
+}
+.notif-icon--mention {
+  font-weight: 700;
+  font-family: monospace;
+}
+
+/* ── Tooltip ── */
+.tooltip {
+  background: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border-subtle);
+  padding: 0.3em 0.65em;
+  border-radius: 5px;
+  font-size: 0.78rem;
+  font-style: normal;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 9999;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
--- a/src/components/AppHeader.tsx
+++ b/src/components/AppHeader.tsx
@@ -69,13 +69,6 @@ export function AppHeader(
                <button type="button" onClick={() => navigate("/login")}>
                  Log in
                </button>
-                <button
-                  type="button"
-                  className="btn-primary"
-                  onClick={() => navigate("/register")}
-                >
-                  Register
-                </button>
              </>
            )}
        </nav>
--- a/src/components/CommentThread.tsx
+++ b/src/components/CommentThread.tsx
@@ -5,8 +5,11 @@ import type { Comment, RawComment, User } from "../model.ts";
 import { deserializeComment } from "../model.ts";
 import { Avatar } from "./Avatar.tsx";
 import { Markdown } from "./Markdown.tsx";
+import { TextEditor, type TextEditorHandle } from "./TextEditor.tsx";
 import { relativeTime } from "../utils/relativeTime.ts";
 import { ErrorCard } from "./ErrorCard.tsx";
+import { Tooltip } from "./Tooltip.tsx";
+import { ConfirmModal } from "./ConfirmModal.tsx";

 interface CommentThreadProps {
  dumpId: string;
@@ -15,6 +18,7 @@ interface CommentThreadProps {
  token: string | null;
  onCommentCreated: (comment: Comment) => void;
  onCommentDeleted: (commentId: string) => void;
+  onCommentUpdated: (comment: Comment) => void;
 }

 function buildTree(comments: Comment[]): Map<string, Comment[]> {
@@ -27,7 +31,7 @@ function buildTree(comments: Comment[]): Map<string, Comment[]> {
  return map;
 }

-const MAX_INDENT_DEPTH = 4;
+const MAX_INDENT_DEPTH = 6;

 interface CommentNodeProps {
  comment: Comment;
@@ -38,6 +42,7 @@ interface CommentNodeProps {
  token: string | null;
  onCommentCreated: (comment: Comment) => void;
  onCommentDeleted: (commentId: string) => void;
+  onCommentUpdated: (comment: Comment) => void;
 }

 function CommentNode({
@@ -49,12 +54,20 @@ function CommentNode({
  token,
  onCommentCreated,
  onCommentDeleted,
+  onCommentUpdated,
 }: CommentNodeProps) {
  const [replyOpen, setReplyOpen] = useState(false);
  const [replyBody, setReplyBody] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [replyError, setReplyError] = useState<string | null>(null);
-  const replyTextareaRef = useRef<HTMLTextAreaElement>(null);
+  const [editOpen, setEditOpen] = useState(false);
+  const [editBody, setEditBody] = useState("");
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [editSubmitting, setEditSubmitting] = useState(false);
+  const [editError, setEditError] = useState<string | null>(null);
+
+  const replyEditorRef = useRef<TextEditorHandle>(null);
+  const editEditorRef = useRef<TextEditorHandle>(null);

  const children = tree.get(comment.id) ?? [];

@@ -98,8 +111,38 @@ function CommentNode({
    }
  }

+  async function handleEditSave(e: React.FormEvent) {
+    e.preventDefault();
+    if (!editBody.trim() || !token) return;
+    setEditSubmitting(true);
+    setEditError(null);
+    try {
+      const res = await fetch(`${API_URL}/api/comments/${comment.id}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ body: editBody }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        onCommentUpdated(deserializeComment(data.data as RawComment));
+        setEditOpen(false);
+      } else {
+        setEditError(data.error?.message ?? "Failed to save edit.");
+      }
+    } catch {
+      setEditError("Could not reach the server. Please try again.");
+    } finally {
+      setEditSubmitting(false);
+    }
+  }
+
  const canDelete = !comment.deleted && !!currentUser &&
    (currentUser.id === comment.userId || currentUser.isAdmin);
+  const canEdit = !comment.deleted && !!currentUser &&
+    (currentUser.id === comment.userId || currentUser.isAdmin);

  if (comment.deleted) {
    return (
@@ -118,7 +161,7 @@ function CommentNode({
        {children.length > 0 && (
          <ul
            className="comment-replies"
-            style={depth >= MAX_INDENT_DEPTH ? { paddingLeft: 0 } : undefined}
+            style={depth >= MAX_INDENT_DEPTH ? { paddingLeft: 0, marginLeft: 0, borderLeft: "none" } : undefined}
          >
            {children.map((child) => (
              <CommentNode
@@ -131,6 +174,7 @@ function CommentNode({
                token={token}
                onCommentCreated={onCommentCreated}
                onCommentDeleted={onCommentDeleted}
+                onCommentUpdated={onCommentUpdated}
              />
            ))}
          </ul>
@@ -141,7 +185,7 @@ function CommentNode({

  return (
    <li className="comment-node">
-      <div className="comment-node-inner">
+      <div className="comment-node-inner" id={`comment-${comment.id}`}>
        <div className="comment-avatar">
          <Avatar
            userId={comment.userId}
@@ -158,52 +202,121 @@ function CommentNode({
            >
              {comment.authorUsername}
            </Link>
-            <time
+            <Link
+              to={`/dumps/${dumpId}#comment-${comment.id}`}
              className="comment-time"
-              dateTime={comment.createdAt.toISOString()}
-              title={comment.createdAt.toLocaleString()}
            >
-              {relativeTime(comment.createdAt)}
-            </time>
+              <Tooltip text={comment.createdAt.toLocaleString()}>
+                <time dateTime={comment.createdAt.toISOString()}>
+                  {relativeTime(comment.createdAt)}
+                </time>
+              </Tooltip>
+            </Link>
+            {comment.updatedAt && (
+              <Tooltip text={`Edited ${comment.updatedAt.toLocaleString()}`}>
+                <span className="comment-edited">
+                  edited {relativeTime(comment.updatedAt)}
+                </span>
+              </Tooltip>
+            )}
          </div>
-          <Markdown className="comment-body">{comment.body}</Markdown>
+          {editOpen
+            ? (
+              <form className="comment-form" onSubmit={handleEditSave}>
+                <TextEditor
+                  ref={editEditorRef}
+                  className="comment-reply-textarea"
+                  value={editBody}
+                  onChange={setEditBody}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) handleEditSave(e);
+                  }}
+                  autoResize
+                  rows={1}
+                />
+                {editError && (
+                  <ErrorCard title="Failed to save edit" message={editError} />
+                )}
+                <div className="comment-form-actions">
+                  <button
+                    type="submit"
+                    className="comment-submit-btn"
+                    disabled={editSubmitting || !editBody.trim()}
+                  >
+                    {editSubmitting ? "Saving…" : "Save"}
+                  </button>
+                  <button
+                    type="button"
+                    className="comment-action-btn"
+                    onClick={() => {
+                      setEditOpen(false);
+                      setEditBody("");
+                      setEditError(null);
+                    }}
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </form>
+            )
+            : <Markdown className="comment-body">{comment.body}</Markdown>}
          <div className="comment-actions">
-            {currentUser && (
+            {currentUser && !editOpen && (
              <button
                type="button"
                className="comment-action-btn"
                onClick={() => {
                  setReplyOpen((v) => !v);
-                  setTimeout(() => replyTextareaRef.current?.focus(), 0);
+                  setTimeout(() => replyEditorRef.current?.focus(), 0);
                }}
              >
                Reply
              </button>
            )}
-            {canDelete && (
+            {canEdit && !editOpen && (
+              <button
+                type="button"
+                className="comment-action-btn"
+                onClick={() => {
+                  setEditBody(comment.body);
+                  setEditOpen(true);
+                  setTimeout(() => editEditorRef.current?.focus(), 0);
+                }}
+              >
+                Edit
+              </button>
+            )}
+            {canDelete && !editOpen && (
              <button
                type="button"
                className="comment-action-btn comment-delete-btn"
-                onClick={handleDelete}
+                onClick={() => setConfirmDelete(true)}
              >
                Delete
              </button>
            )}
+            {confirmDelete && (
+              <ConfirmModal
+                message="Delete this comment?"
+                confirmLabel="Delete"
+                onConfirm={() => { setConfirmDelete(false); handleDelete(); }}
+                onCancel={() => setConfirmDelete(false)}
+              />
+            )}
          </div>
          {replyOpen && (
            <form className="comment-form" onSubmit={handleReply}>
-              <textarea
-                ref={replyTextareaRef}
+              <TextEditor
+                ref={replyEditorRef}
                className="comment-reply-textarea"
                value={replyBody}
-                onChange={(e) => setReplyBody(e.target.value)}
+                onChange={setReplyBody}
                onKeyDown={(e) => {
-                  if (
-                    e.key === "Enter" && (e.ctrlKey || e.metaKey)
-                  ) handleReply(e);
+                  if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) handleReply(e);
                }}
                placeholder="Write a reply…"
-                rows={3}
+                autoResize
+                rows={1}
              />
              {replyError && (
                <ErrorCard title="Failed to post reply" message={replyError} />
@@ -235,7 +348,7 @@ function CommentNode({
      {children.length > 0 && (
        <ul
          className="comment-replies"
-          style={depth >= MAX_INDENT_DEPTH ? { paddingLeft: 0 } : undefined}
+          style={depth >= MAX_INDENT_DEPTH ? { paddingLeft: 0, marginLeft: 0, borderLeft: "none" } : undefined}
        >
          {children.map((child) => (
            <CommentNode
@@ -248,6 +361,7 @@ function CommentNode({
              token={token}
              onCommentCreated={onCommentCreated}
              onCommentDeleted={onCommentDeleted}
+              onCommentUpdated={onCommentUpdated}
            />
          ))}
        </ul>
@@ -263,6 +377,7 @@ export function CommentThread({
  token,
  onCommentCreated,
  onCommentDeleted,
+  onCommentUpdated,
 }: CommentThreadProps) {
  const [topLevelBody, setTopLevelBody] = useState("");
  const [submitting, setSubmitting] = useState(false);
@@ -309,33 +424,56 @@ export function CommentThread({
      </h2>

      {currentUser && (
-        <form
-          className="comment-form comment-top-form"
-          onSubmit={handleTopLevelSubmit}
-        >
-          <textarea
-            className="comment-reply-textarea"
-            value={topLevelBody}
-            onChange={(e) => setTopLevelBody(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
-                handleTopLevelSubmit(e);
-              }
-            }}
-            placeholder="Add a comment…"
-            rows={3}
-          />
-          {topLevelError && (
-            <ErrorCard title="Failed to post comment" message={topLevelError} />
-          )}
-          <div className="comment-form-actions">
-            <button
-              type="submit"
-              className="comment-submit-btn"
-              disabled={submitting || !topLevelBody.trim()}
-            >
-              {submitting ? "Posting…" : "Post comment"}
-            </button>
+        <form className="comment-top-form" onSubmit={handleTopLevelSubmit}>
+          <div className="comment-top-form-inner">
+            <div className="comment-avatar">
+              <Avatar
+                userId={currentUser.id}
+                username={currentUser.username}
+                hasAvatar={!!currentUser.avatarMime}
+                size={28}
+              />
+            </div>
+            <div className="comment-top-form-body">
+              <TextEditor
+                className="comment-reply-textarea"
+                value={topLevelBody}
+                onChange={setTopLevelBody}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) handleTopLevelSubmit(e);
+                }}
+                placeholder="Add a comment…"
+                autoResize
+                rows={1}
+              />
+              {topLevelError && (
+                <ErrorCard
+                  title="Failed to post comment"
+                  message={topLevelError}
+                />
+              )}
+              <div className="comment-form-actions">
+                <button
+                  type="submit"
+                  className="comment-submit-btn"
+                  disabled={submitting || !topLevelBody.trim()}
+                >
+                  {submitting ? "Posting…" : "Post comment"}
+                </button>
+                {topLevelBody.trim() && (
+                  <button
+                    type="button"
+                    className="comment-action-btn"
+                    onClick={() => {
+                      setTopLevelBody("");
+                      setTopLevelError(null);
+                    }}
+                  >
+                    Cancel
+                  </button>
+                )}
+              </div>
+            </div>
          </div>
        </form>
      )}
@@ -353,6 +491,7 @@ export function CommentThread({
              token={token}
              onCommentCreated={onCommentCreated}
              onCommentDeleted={onCommentDeleted}
+              onCommentUpdated={onCommentUpdated}
            />
          ))}
        </ul>
--- a/src/components/DumpCard.tsx
+++ b/src/components/DumpCard.tsx
@@ -1,11 +1,13 @@
 import { Link, useNavigate } from "react-router";
 import type { Dump } from "../model.ts";
 import { relativeTime } from "../utils/relativeTime.ts";
+import { dumpUrl } from "../utils/urls.ts";
 import { isDumpVisited, isRecent, markDumpVisited } from "../utils/visited.ts";
 import FilePreview from "./FilePreview.tsx";
 import RichContentCard from "./RichContentCard.tsx";
 import { VoteButton } from "./VoteButton.tsx";
 import { Markdown } from "./Markdown.tsx";
+import { Tooltip } from "./Tooltip.tsx";

 interface DumpCardProps {
  dump: Dump;
@@ -28,7 +30,7 @@ export function DumpCard(

  function handleNavigate() {
    markDumpVisited(dump.id);
-    navigate(`/dumps/${dump.id}`);
+    navigate(dumpUrl(dump));
  }

  return (
@@ -50,7 +52,7 @@ export function DumpCard(

        <div className="dump-card-body">
          <Link
-            to={`/dumps/${dump.id}`}
+            to={dumpUrl(dump)}
            className="dump-card-title"
            onClick={(e) => {
              e.stopPropagation();
@@ -66,13 +68,14 @@ export function DumpCard(
            </Markdown>
          )}
          <div className="dump-card-meta">
-            <time
-              className="dump-card-date"
-              dateTime={dump.createdAt.toISOString()}
-              title={dump.createdAt.toLocaleString()}
-            >
-              {relativeTime(dump.createdAt)}
-            </time>
+            <Tooltip text={dump.createdAt.toLocaleString()}>
+              <time
+                className="dump-card-date"
+                dateTime={dump.createdAt.toISOString()}
+              >
+                {relativeTime(dump.createdAt)}
+              </time>
+            </Tooltip>
            {dump.commentCount > 0 && (
              <span className="dump-card-comment-count">
                {dump.commentCount}{" "}
--- a/src/components/DumpCreateModal.tsx
+++ b/src/components/DumpCreateModal.tsx
@@ -14,11 +14,13 @@ import { deserializeDump, deserializePlaylistMembership } from "../model.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useWS } from "../hooks/useWS.ts";
 import { formatBytes } from "../utils/format.ts";
+import { dumpUrl } from "../utils/urls.ts";
 import RichContentCard from "./RichContentCard.tsx";
 import { MediaPlayer } from "./MediaPlayer.tsx";
 import type { RichContent } from "../model.ts";
 import { PlaylistCreateForm } from "./PlaylistCreateForm.tsx";
 import { ErrorCard } from "./ErrorCard.tsx";
+import { FileDropZone } from "./FileDropZone.tsx";
 import { friendlyFetchError } from "../utils/apiError.ts";

 const MAX_FILE_SIZE = 50 * 1024 * 1024;
@@ -57,15 +59,8 @@ function LocalFilePreview({ file }: { file: File }) {
  if (mime.startsWith("audio/")) {
    return <MediaPlayer key={src} src={src} kind="audio" mime={mime} />;
  }
-  return (
-    <div className="local-preview-generic">
-      <span className="local-preview-icon">
-        {mime.startsWith("application/pdf") ? "📄" : "📎"}
-      </span>
-      <span className="local-preview-name">{file.name}</span>
-      <span className="local-preview-size">{formatBytes(file.size)}</span>
-    </div>
-  );
+  // For other types the drop zone chip already shows name + size.
+  return null;
 }

 interface DumpCreateModalProps {
@@ -383,17 +378,11 @@ export function DumpCreateModal({ onClose }: DumpCreateModalProps) {
                    )
                    : (
                      <>
-                        <div className="form-group">
-                          <label htmlFor="dc-file">File</label>
-                          <input
-                            id="dc-file"
-                            type="file"
-                            onChange={(e) =>
-                              setFile(e.target.files?.[0] ?? null)}
-                            disabled={submitting}
-                            required
-                          />
-                        </div>
+                        <FileDropZone
+                          file={file}
+                          onChange={setFile}
+                          disabled={submitting}
+                        />
                        {file && <LocalFilePreview file={file} />}
                      </>
                    )}
@@ -459,7 +448,7 @@ export function DumpCreateModal({ onClose }: DumpCreateModalProps) {
                {createdDump && (
                  <p className="dump-create-success">
                    Dumped!{" "}
-                    <Link to={`/dumps/${createdDump.id}`} onClick={onClose}>
+                    <Link to={dumpUrl(createdDump)} onClick={onClose}>
                      View dump →
                    </Link>
                  </p>
--- a/src/components/FileDropZone.tsx
+++ b/src/components/FileDropZone.tsx
@@ -0,0 +1,145 @@
+import { useCallback, useRef, useState } from "react";
+import { formatBytes } from "../utils/format.ts";
+
+function fileIcon(mime: string): string {
+  if (mime.startsWith("image/")) return "🖼";
+  if (mime.startsWith("video/")) return "🎬";
+  if (mime.startsWith("audio/")) return "🎵";
+  if (mime === "application/pdf") return "📄";
+  return "📎";
+}
+
+interface FileDropZoneProps {
+  file: File | null;
+  onChange: (file: File | null) => void;
+  disabled?: boolean;
+  label?: string;
+  hint?: string;
+  showLimit?: boolean;
+}
+
+export function FileDropZone({
+  file,
+  onChange,
+  disabled,
+  label = "File",
+  hint = "Drop a file here",
+  showLimit = true,
+}: FileDropZoneProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragging, setDragging] = useState(false);
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      if (!disabled) setDragging(true);
+    },
+    [disabled],
+  );
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {
+      setDragging(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setDragging(false);
+      if (disabled) return;
+      const dropped = e.dataTransfer.files[0];
+      if (dropped) onChange(dropped);
+    },
+    [disabled, onChange],
+  );
+
+  const handleClick = useCallback(() => {
+    if (!disabled) inputRef.current?.click();
+  }, [disabled]);
+
+  const handleClear = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onChange(null);
+      if (inputRef.current) inputRef.current.value = "";
+    },
+    [onChange],
+  );
+
+  return (
+    <div className="fdz-wrapper">
+      {label && <span className="fdz-label">{label}</span>}
+      <div
+        className={`fdz${dragging ? " fdz--drag" : ""}${disabled ? " fdz--disabled" : ""}${file ? " fdz--filled" : ""}`}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={file ? undefined : handleClick}
+        role={file ? undefined : "button"}
+        tabIndex={file || disabled ? undefined : 0}
+        onKeyDown={
+          file || disabled
+            ? undefined
+            : (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleClick();
+              }
+            }
+        }
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          onChange={(e) => onChange(e.target.files?.[0] ?? null)}
+          disabled={disabled}
+          style={{ display: "none" }}
+        />
+
+        {file
+          ? (
+            <div className="fdz__file">
+              <span className="fdz__file-icon">{fileIcon(file.type)}</span>
+              <div className="fdz__file-meta">
+                <span className="fdz__file-name">{file.name}</span>
+                <span className="fdz__file-size">{formatBytes(file.size)}</span>
+              </div>
+              {!disabled && (
+                <button
+                  type="button"
+                  className="fdz__clear"
+                  onClick={handleClear}
+                  aria-label="Remove file"
+                >
+                  ✕
+                </button>
+              )}
+            </div>
+          )
+          : (
+            <div className="fdz__empty">
+              <svg
+                className="fdz__upload-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="17 8 12 3 7 8" />
+                <line x1="12" y1="3" x2="12" y2="15" />
+              </svg>
+              <p className="fdz__hint">{hint}</p>
+              <p className="fdz__browse">
+                or <span className="fdz__browse-link">browse files</span>
+              </p>
+              {showLimit && <p className="fdz__limit">Max 50 MB</p>}
+            </div>
+          )}
+      </div>
+    </div>
+  );
+}
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -1,3 +1,4 @@
+import { Link } from "react-router";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";

@@ -9,6 +10,11 @@ interface MarkdownProps {

 const REMARK_PLUGINS = [remarkGfm];

+// Convert bare @username (not already inside a markdown link) to clickable links
+function preprocessMentions(text: string): string {
+  return text.replace(/(?<![[(])@([\w]+)/g, "[@$1](/users/$1)");
+}
+
 export function Markdown(
  { children, className, inline = false }: MarkdownProps,
 ) {
@@ -21,14 +27,19 @@ export function Markdown(
      <ReactMarkdown
        remarkPlugins={REMARK_PLUGINS}
        components={{
-          a: ({ href, children }) => (
-            <a href={href} target="_blank" rel="noopener noreferrer">
-              {children}
-            </a>
-          ),
+          a: ({ href, children: linkChildren }) => {
+            if (href?.startsWith("/users/")) {
+              return <Link to={href}>{linkChildren}</Link>;
+            }
+            return (
+              <a href={href} target="_blank" rel="noopener noreferrer">
+                {linkChildren}
+              </a>
+            );
+          },
        }}
      >
-        {children}
+        {preprocessMentions(children)}
      </ReactMarkdown>
    </div>
  );
--- a/src/components/MentionDropdown.tsx
+++ b/src/components/MentionDropdown.tsx
@@ -0,0 +1,38 @@
+import { Avatar } from "./Avatar.tsx";
+import type { UserResult } from "../hooks/useMentionAutocomplete.ts";
+
+interface MentionDropdownProps {
+  results: UserResult[];
+  selectedIndex: number;
+  onSelect: (username: string) => void;
+}
+
+export function MentionDropdown(
+  { results, selectedIndex, onSelect }: MentionDropdownProps,
+) {
+  if (results.length === 0) return null;
+  return (
+    <ul className="mention-dropdown">
+      {results.map((user, i) => (
+        <li
+          key={user.id}
+          className={`mention-dropdown-item${
+            i === selectedIndex ? " mention-dropdown-item--selected" : ""
+          }`}
+          onMouseDown={(e) => {
+            e.preventDefault(); // keep textarea focused
+            onSelect(user.username);
+          }}
+        >
+          <Avatar
+            userId={user.id}
+            username={user.username}
+            hasAvatar={!!user.avatarMime}
+            size={20}
+          />
+          <span className="mention-dropdown-username">@{user.username}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
--- a/src/components/PlaylistCard.tsx
+++ b/src/components/PlaylistCard.tsx
@@ -2,11 +2,13 @@ import { Link, useNavigate } from "react-router";
 import { API_URL } from "../config/api.ts";
 import type { Playlist } from "../model.ts";
 import { relativeTime } from "../utils/relativeTime.ts";
+import { playlistUrl } from "../utils/urls.ts";
 import {
  isPlaylistVisited,
  isRecent,
  markPlaylistVisited,
 } from "../utils/visited.ts";
+import { Tooltip } from "./Tooltip.tsx";

 interface PlaylistCardProps {
  playlist: Playlist;
@@ -23,7 +25,7 @@ export function PlaylistCard(

  function handleNavigate() {
    markPlaylistVisited(playlist.id);
-    navigate(`/playlists/${playlist.id}`);
+    navigate(playlistUrl(playlist));
  }

  return (
@@ -45,7 +47,7 @@ export function PlaylistCard(
        </div>
        <div className="playlist-card-body">
          <Link
-            to={`/playlists/${playlist.id}`}
+            to={playlistUrl(playlist)}
            className="playlist-card-title"
            onClick={(e) => {
              e.stopPropagation();
@@ -81,12 +83,11 @@ export function PlaylistCard(
                {playlist.dumpCount === 1 ? "dump" : "dumps"}
              </span>
            )}
-            <time
-              dateTime={playlist.createdAt.toISOString()}
-              title={playlist.createdAt.toLocaleString()}
-            >
-              {relativeTime(playlist.createdAt)}
-            </time>
+            <Tooltip text={playlist.createdAt.toLocaleString()}>
+              <time dateTime={playlist.createdAt.toISOString()}>
+                {relativeTime(playlist.createdAt)}
+              </time>
+            </Tooltip>
          </div>
        </div>
      </div>
--- a/src/components/TextEditor.tsx
+++ b/src/components/TextEditor.tsx
@@ -0,0 +1,90 @@
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from "react";
+import { MentionDropdown } from "./MentionDropdown.tsx";
+import { useMentionAutocomplete } from "../hooks/useMentionAutocomplete.ts";
+
+export interface TextEditorHandle {
+  focus(): void;
+}
+
+interface TextEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  rows?: number;
+  id?: string;
+  className?: string;
+  autoResize?: boolean;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+}
+
+export const TextEditor = forwardRef<TextEditorHandle, TextEditorProps>(
+  function TextEditor(
+    {
+      value,
+      onChange,
+      placeholder,
+      disabled,
+      rows,
+      id,
+      className,
+      autoResize = false,
+      onKeyDown,
+    },
+    ref,
+  ) {
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+    useImperativeHandle(ref, () => ({
+      focus: () => textareaRef.current?.focus(),
+    }), []);
+
+    const {
+      mentionOpen,
+      mentionResults,
+      mentionSelectedIndex,
+      handleMentionChange,
+      handleMentionKeyDown,
+      handleMentionSelect,
+    } = useMentionAutocomplete(value, onChange, textareaRef);
+
+    useEffect(() => {
+      if (!autoResize) return;
+      const el = textareaRef.current;
+      if (!el) return;
+      el.style.height = "auto";
+      el.style.height = `${el.scrollHeight}px`;
+    }, [value, autoResize]);
+
+    return (
+      <div className="mention-textarea-wrap">
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={handleMentionChange}
+          onKeyDown={(e) => {
+            handleMentionKeyDown(e);
+            if (!e.defaultPrevented) onKeyDown?.(e);
+          }}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={rows}
+          id={id}
+          className={className}
+        />
+        {mentionOpen && (
+          <MentionDropdown
+            results={mentionResults}
+            selectedIndex={mentionSelectedIndex}
+            onSelect={handleMentionSelect}
+          />
+        )}
+      </div>
+    );
+  },
+);
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -0,0 +1,39 @@
+import { useCallback, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+interface TooltipProps {
+  text: string;
+  children: React.ReactNode;
+}
+
+export function Tooltip({ text, children }: TooltipProps) {
+  const [rect, setRect] = useState<DOMRect | null>(null);
+  const ref = useRef<HTMLSpanElement>(null);
+
+  const show = useCallback(() => {
+    setRect(ref.current?.getBoundingClientRect() ?? null);
+  }, []);
+
+  const hide = useCallback(() => setRect(null), []);
+
+  return (
+    <span ref={ref} onMouseEnter={show} onMouseLeave={hide}>
+      {children}
+      {rect &&
+        createPortal(
+          <div
+            className="tooltip"
+            style={{
+              position: "fixed",
+              left: rect.left + rect.width / 2,
+              top: rect.top,
+              transform: "translate(-50%, calc(-100% - 7px))",
+            }}
+          >
+            {text}
+          </div>,
+          document.body,
+        )}
+    </span>
+  );
+}
--- a/src/contexts/WSContext.ts
+++ b/src/contexts/WSContext.ts
@@ -22,7 +22,7 @@ export interface PlaylistEvent {
 }

 export interface CommentEvent {
-  type: "created" | "deleted";
+  type: "created" | "deleted" | "updated";
  dumpId: string;
  comment?: Comment;
  commentId?: string;
--- a/src/contexts/WSProvider.tsx
+++ b/src/contexts/WSProvider.tsx
@@ -140,6 +140,18 @@ export function WSProvider({ children, token }: WSProviderProps) {
          case "dump_updated": {
            const dump = deserializeDump(msg.dump as RawDump);
            setLastDumpEvent(dump);
+            // Un-delete if this dump was previously removed from the feed
+            // (e.g. it was made private, and is now public again).
+            setDeletedDumpIds((prev) => {
+              if (!prev.has(dump.id)) return prev;
+              const next = new Set(prev);
+              next.delete(dump.id);
+              return next;
+            });
+            // Add to live feed if not already present (private→public).
+            setRecentDumps((prev) =>
+              prev.some((d) => d.id === dump.id) ? prev : [dump, ...prev]
+            );
            break;
          }

@@ -227,6 +239,16 @@ export function WSProvider({ children, token }: WSProviderProps) {
            break;
          }

+          case "comment_updated": {
+            const comment = deserializeComment(msg.comment as RawComment);
+            setLastCommentEvent({
+              type: "updated",
+              dumpId: comment.dumpId,
+              comment,
+            });
+            break;
+          }
+
          case "notification_created": {
            const notification = deserializeNotification(
              msg.notification as RawNotification,
--- a/src/hooks/useDumpListSync.ts
+++ b/src/hooks/useDumpListSync.ts
@@ -0,0 +1,49 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+import type { Dump } from "../model.ts";
+import { useWS } from "./useWS.ts";
+
+/**
+ * Keeps a dump list in sync with real-time WS events:
+ *  - deletedDumpIds: filters out dumps that were deleted or privatised.
+ *  - lastDumpEvent: updates existing dumps in-place; optionally prepends
+ *    new ones when `addFilter` returns true for them.
+ *
+ * @param setDumps  Updater that patches the caller's dump array.
+ * @param addFilter Optional predicate: return true to prepend a dump that
+ *                  isn't already in the list (e.g. became public).
+ */
+export function useDumpListSync(
+  setDumps: (fn: (prev: Dump[]) => Dump[]) => void,
+  addFilter?: (dump: Dump) => boolean,
+): void {
+  const { deletedDumpIds, lastDumpEvent } = useWS();
+
+  // Keep refs up-to-date so closures in effects are never stale.
+  const setDumpsRef = useRef(setDumps);
+  const addFilterRef = useRef(addFilter);
+  useLayoutEffect(() => {
+    setDumpsRef.current = setDumps;
+    addFilterRef.current = addFilter;
+  });
+
+  useEffect(() => {
+    if (deletedDumpIds.size === 0) return;
+    setDumpsRef.current((prev) => prev.filter((d) => !deletedDumpIds.has(d.id)));
+  }, [deletedDumpIds]);
+
+  useEffect(() => {
+    if (!lastDumpEvent) return;
+    setDumpsRef.current((prev) => {
+      const idx = prev.findIndex((d) => d.id === lastDumpEvent.id);
+      if (idx !== -1) {
+        const next = [...prev];
+        next[idx] = lastDumpEvent;
+        return next;
+      }
+      if (addFilterRef.current?.(lastDumpEvent)) {
+        return [lastDumpEvent, ...prev];
+      }
+      return prev;
+    });
+  }, [lastDumpEvent]);
+}
--- a/src/hooks/useMentionAutocomplete.ts
+++ b/src/hooks/useMentionAutocomplete.ts
@@ -0,0 +1,162 @@
+import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
+import { API_URL } from "../config/api.ts";
+
+export interface UserResult {
+  id: string;
+  username: string;
+  avatarMime: string | null;
+}
+
+interface MentionState {
+  open: boolean;
+  query: string;
+  start: number;
+  results: UserResult[];
+  selectedIndex: number;
+}
+
+const CLOSED: MentionState = {
+  open: false,
+  query: "",
+  start: 0,
+  results: [],
+  selectedIndex: 0,
+};
+
+function getMentionQuery(
+  value: string,
+  pos: number,
+): { query: string; start: number } | null {
+  const textBefore = value.slice(0, pos);
+  // Match @word at end of text before cursor, not preceded by [ ( or word char
+  const match = textBefore.match(/(?<![[(A-Za-z0-9_])@([A-Za-z0-9_]*)$/);
+  if (!match || match[1].length === 0) return null;
+  const start = pos - match[0].length;
+  return { query: match[1], start };
+}
+
+export function useMentionAutocomplete(
+  value: string,
+  onChange: (v: string) => void,
+  textareaRef: RefObject<HTMLTextAreaElement | null>,
+) {
+  const [state, setState] = useState<MentionState>(CLOSED);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cursorRef = useRef<number>(0);
+
+  const handleMentionChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      const pos = e.target.selectionStart ?? newValue.length;
+      cursorRef.current = pos;
+      onChange(newValue);
+
+      const mention = getMentionQuery(newValue, pos);
+      if (!mention) {
+        setState(CLOSED);
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        return;
+      }
+
+      setState((s) => ({
+        ...s,
+        open: false,
+        query: mention.query,
+        start: mention.start,
+        selectedIndex: 0,
+      }));
+
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(async () => {
+        try {
+          const res = await fetch(
+            `${API_URL}/api/users/search?q=${encodeURIComponent(mention.query)}`,
+          );
+          const body = await res.json();
+          if (body.success && body.data.length > 0) {
+            setState((s) =>
+              s.query === mention.query
+                ? { ...s, open: true, results: body.data, selectedIndex: 0 }
+                : s
+            );
+          } else {
+            setState(CLOSED);
+          }
+        } catch {
+          setState(CLOSED);
+        }
+      }, 150);
+    },
+    [onChange],
+  );
+
+  const doSelect = useCallback(
+    (username: string, start: number, cursorPos: number) => {
+      const before = value.slice(0, start);
+      const after = value.slice(cursorPos);
+      onChange(`${before}@${username} ${after}`);
+      setState(CLOSED);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      setTimeout(() => {
+        const el = textareaRef.current;
+        if (el) {
+          const newPos = start + username.length + 2; // @ + username + space
+          el.focus();
+          el.setSelectionRange(newPos, newPos);
+        }
+      }, 0);
+    },
+    [value, onChange, textareaRef],
+  );
+
+  const handleMentionKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (!state.open || state.results.length === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setState((s) => ({
+          ...s,
+          selectedIndex: Math.min(s.selectedIndex + 1, s.results.length - 1),
+        }));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setState((s) => ({
+          ...s,
+          selectedIndex: Math.max(s.selectedIndex - 1, 0),
+        }));
+      } else if (
+        (e.key === "Enter" || e.key === "Tab") && !e.ctrlKey && !e.metaKey
+      ) {
+        e.preventDefault();
+        const user = state.results[state.selectedIndex];
+        if (user) doSelect(user.username, state.start, cursorRef.current);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setState(CLOSED);
+      }
+    },
+    [state, doSelect],
+  );
+
+  const handleMentionSelect = useCallback(
+    (username: string) => {
+      doSelect(username, state.start, cursorRef.current);
+    },
+    [doSelect, state.start],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+
+  return {
+    mentionOpen: state.open,
+    mentionResults: state.results,
+    mentionSelectedIndex: state.selectedIndex,
+    handleMentionChange,
+    handleMentionKeyDown,
+    handleMentionSelect,
+  };
+}
--- a/src/hooks/usePlaylistListSync.ts
+++ b/src/hooks/usePlaylistListSync.ts
@@ -0,0 +1,88 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+import type { Playlist } from "../model.ts";
+import { useWS } from "./useWS.ts";
+
+interface PlaylistListSyncOptions {
+  /** Keep private playlists visible (caller is the owner). */
+  isOwner?: boolean;
+  /**
+   * Only act on created/updated events for playlists owned by this user.
+   * Leave undefined to act on any playlist already in the list.
+   */
+  ownerId?: string;
+  /**
+   * Set true for "followed" lists: never prepend newly created playlists
+   * (followed membership is managed separately), but still update/remove.
+   */
+  noNewEntries?: boolean;
+}
+
+/**
+ * Keeps a playlist list in sync with real-time WS events:
+ *  - lastPlaylistEvent "created"  → prepend (unless noNewEntries)
+ *  - lastPlaylistEvent "updated"  → update in-place, or remove if now private
+ *  - lastPlaylistEvent "deleted"  → remove
+ *  - deletedPlaylistIds growing   → filter
+ */
+export function usePlaylistListSync(
+  setPlaylists: (fn: (prev: Playlist[]) => Playlist[]) => void,
+  options?: PlaylistListSyncOptions,
+): void {
+  const { lastPlaylistEvent, deletedPlaylistIds } = useWS();
+
+  const setPlaylistsRef = useRef(setPlaylists);
+  const optionsRef = useRef(options);
+  useLayoutEffect(() => {
+    setPlaylistsRef.current = setPlaylists;
+    optionsRef.current = options;
+  });
+
+  useEffect(() => {
+    if (!lastPlaylistEvent) return;
+    const { isOwner, ownerId, noNewEntries } = optionsRef.current ?? {};
+    const ev = lastPlaylistEvent;
+
+    setPlaylistsRef.current((prev) => {
+      if (ev.type === "created" && ev.playlist) {
+        if (noNewEntries) return prev;
+        if (ownerId && ev.playlist.userId !== ownerId) return prev;
+        if (!ev.playlist.isPublic && !isOwner) return prev;
+        if (prev.some((p) => p.id === ev.playlist!.id)) return prev;
+        return [ev.playlist, ...prev];
+      }
+
+      if (ev.type === "updated" && ev.playlist) {
+        const idx = prev.findIndex((p) => p.id === ev.playlist!.id);
+        if (idx === -1) {
+          // Playlist was removed (went private). Re-add if it's now public and
+          // visible to this list. noNewEntries lists (followed) skip this since
+          // we can't verify the follow relationship is still active.
+          if (noNewEntries) return prev;
+          if (ownerId && ev.playlist.userId !== ownerId) return prev;
+          if (!ev.playlist.isPublic && !isOwner) return prev;
+          return [ev.playlist, ...prev];
+        }
+        // Remove if it became private and the viewer can't see private playlists
+        if (!ev.playlist.isPublic && !isOwner) {
+          return prev.filter((p) => p.id !== ev.playlist!.id);
+        }
+        const next = [...prev];
+        next[idx] = ev.playlist;
+        return next;
+      }
+
+      if (ev.type === "deleted") {
+        return prev.filter((p) => p.id !== ev.playlistId);
+      }
+
+      return prev;
+    });
+  }, [lastPlaylistEvent]);
+
+  useEffect(() => {
+    if (deletedPlaylistIds.size === 0) return;
+    setPlaylistsRef.current((prev) =>
+      prev.filter((p) => !deletedPlaylistIds.has(p.id))
+    );
+  }, [deletedPlaylistIds]);
+}
--- a/src/model.ts
+++ b/src/model.ts
@@ -23,9 +23,11 @@ export interface Dump {
  id: string;
  kind: "url" | "file";
  title: string;
+  slug?: string;
  comment?: string;
  userId: string;
  createdAt: Date;
+  updatedAt?: Date;
  url?: string;
  richContent?: RichContent;
  fileName?: string;
@@ -45,6 +47,7 @@ export interface User {
  username: string;
  isAdmin: boolean;
  createdAt: Date;
+  updatedAt?: Date;
  avatarMime?: string;
  invitedByUsername?: string;
 }
@@ -55,14 +58,15 @@ export interface PublicUser {
  username: string;
  isAdmin: boolean;
  createdAt: Date;
+  updatedAt?: Date;
  avatarMime?: string;
  invitedByUsername?: string;
 }

-// Wire types — createdAt arrives as an ISO string from API/WS/localStorage
-type WithStringDate<T extends { createdAt: Date }> = Omit<T, "createdAt"> & {
-  createdAt: string;
-};
+// Wire types — createdAt/updatedAt arrive as ISO strings from API/WS/localStorage
+type WithStringDate<T extends { createdAt: Date }> =
+  & Omit<T, "createdAt" | "updatedAt">
+  & { createdAt: string; updatedAt?: string };
 export type RawDump = WithStringDate<Dump>;
 export type RawUser = WithStringDate<User>;
 export type RawPublicUser = WithStringDate<PublicUser>;
@@ -70,15 +74,27 @@ export type RawAuthResponse = Omit<AuthResponse, "user"> & { user: RawUser };

 // Deserializers — convert wire types to domain types at API/WS/localStorage boundaries
 export function deserializeDump(raw: RawDump): Dump {
-  return { ...raw, createdAt: new Date(raw.createdAt) };
+  return {
+    ...raw,
+    createdAt: new Date(raw.createdAt),
+    updatedAt: raw.updatedAt ? new Date(raw.updatedAt) : undefined,
+  };
 }

 export function deserializeUser(raw: RawUser): User {
-  return { ...raw, createdAt: new Date(raw.createdAt) };
+  return {
+    ...raw,
+    createdAt: new Date(raw.createdAt),
+    updatedAt: raw.updatedAt ? new Date(raw.updatedAt) : undefined,
+  };
 }

 export function deserializePublicUser(raw: RawPublicUser): PublicUser {
-  return { ...raw, createdAt: new Date(raw.createdAt) };
+  return {
+    ...raw,
+    createdAt: new Date(raw.createdAt),
+    updatedAt: raw.updatedAt ? new Date(raw.updatedAt) : undefined,
+  };
 }

 export function deserializeAuthResponse(raw: RawAuthResponse): AuthResponse {
@@ -117,6 +133,7 @@ export interface Comment {
  parentId?: string;
  body: string;
  createdAt: Date;
+  updatedAt?: Date;
  deleted: boolean;
  authorUsername: string;
  authorAvatarMime?: string;
@@ -125,7 +142,11 @@ export interface Comment {
 export type RawComment = WithStringDate<Comment>;

 export function deserializeComment(raw: RawComment): Comment {
-  return { ...raw, createdAt: new Date(raw.createdAt) };
+  return {
+    ...raw,
+    createdAt: new Date(raw.createdAt),
+    updatedAt: raw.updatedAt ? new Date(raw.updatedAt) : undefined,
+  };
 }

 /**
@@ -136,9 +157,11 @@ export interface Playlist {
  id: string;
  userId: string;
  title: string;
+  slug?: string;
  description?: string;
  isPublic: boolean;
  createdAt: Date;
+  updatedAt?: Date;
  imageMime?: string;
  dumpCount?: number;
  ownerUsername?: string;
@@ -163,7 +186,11 @@ export type RawPlaylistWithDumps =
 export type RawPlaylistMembership = { playlist: RawPlaylist; hasDump: boolean };

 export function deserializePlaylist(raw: RawPlaylist): Playlist {
-  return { ...raw, createdAt: new Date(raw.createdAt) };
+  return {
+    ...raw,
+    createdAt: new Date(raw.createdAt),
+    updatedAt: raw.updatedAt ? new Date(raw.updatedAt) : undefined,
+  };
 }

 export function deserializePlaylistWithDumps(
@@ -172,6 +199,7 @@ export function deserializePlaylistWithDumps(
  return {
    ...raw,
    createdAt: new Date(raw.createdAt),
+    updatedAt: raw.updatedAt ? new Date(raw.updatedAt) : undefined,
    dumps: raw.dumps.map(deserializeDump),
  };
 }
@@ -340,7 +368,8 @@ export type NotificationType =
  | "user_followed"
  | "user_dump_posted"
  | "playlist_dump_added"
-  | "dump_upvoted";
+  | "dump_upvoted"
+  | "user_mentioned";

 export interface PlaylistFollowedData {
  followerId: string;
@@ -375,12 +404,22 @@ export interface DumpUpvotedData {
  dumpTitle: string;
 }

+export interface UserMentionedData {
+  mentionerId: string;
+  mentionerUsername: string;
+  contextType: "comment" | "dump" | "playlist";
+  contextId: string;
+  contextTitle: string;
+  dumpId?: string;
+}
+
 export type NotificationData =
  | PlaylistFollowedData
  | UserFollowedData
  | UserDumpPostedData
  | PlaylistDumpAddedData
-  | DumpUpvotedData;
+  | DumpUpvotedData
+  | UserMentionedData;

 export interface Notification {
  id: string;
--- a/src/pages/Dump.tsx
+++ b/src/pages/Dump.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { Link, useLocation, useNavigate, useParams } from "react-router";
+import { dumpUrl } from "../utils/urls.ts";
 import { AddToPlaylistModal } from "../components/AddToPlaylistModal.tsx";

 import { API_URL } from "../config/api.ts";
@@ -22,6 +23,7 @@ import { PageShell } from "../components/PageShell.tsx";
 import { PageError } from "../components/PageError.tsx";
 import { Markdown } from "../components/Markdown.tsx";
 import { CommentThread } from "../components/CommentThread.tsx";
+import { Tooltip } from "../components/Tooltip.tsx";
 import { friendlyFetchError } from "../utils/apiError.ts";

 type DumpState =
@@ -115,6 +117,18 @@ export function Dump() {
      .catch(() => {});
  }, [selectedDump, token]);

+  // Scroll to and highlight a comment when navigating to #comment-{id}
+  useEffect(() => {
+    if (!location.hash.startsWith("#comment-")) return;
+    const id = location.hash.slice(1);
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: "smooth", block: "start" });
+    el.classList.add("comment-node--highlight");
+    const t = setTimeout(() => el.classList.remove("comment-node--highlight"), 2000);
+    return () => clearTimeout(t);
+  }, [comments, location.hash]);
+
  // React to WS comment events
  useEffect(() => {
    if (!lastCommentEvent || lastCommentEvent.dumpId !== selectedDump) return;
@@ -135,6 +149,14 @@ export function Dump() {
            : c
        )
      );
+    } else if (
+      lastCommentEvent.type === "updated" && lastCommentEvent.comment
+    ) {
+      setComments((prev) =>
+        prev.map((c) =>
+          c.id === lastCommentEvent.comment!.id ? lastCommentEvent.comment! : c
+        )
+      );
    }
  }, [lastCommentEvent, selectedDump]);

@@ -213,13 +235,21 @@ export function Dump() {
                  </Link>
                )
                : <span className="dump-op-link">…</span>}
-              <time
-                className="dump-card-date"
-                dateTime={dump.createdAt.toISOString()}
-                title={dump.createdAt.toLocaleString()}
-              >
-                {relativeTime(dump.createdAt)}
-              </time>
+              <Tooltip text={dump.createdAt.toLocaleString()}>
+                <time
+                  className="dump-card-date"
+                  dateTime={dump.createdAt.toISOString()}
+                >
+                  {relativeTime(dump.createdAt)}
+                </time>
+              </Tooltip>
+              {dump.updatedAt && (
+                <Tooltip text={`Edited ${dump.updatedAt.toLocaleString()}`}>
+                  <span className="dump-edited-label">
+                    edited {relativeTime(dump.updatedAt)}
+                  </span>
+                </Tooltip>
+              )}
              {dump.isPrivate && (
                <span className="dump-card-private-badge">private</span>
              )}
@@ -251,7 +281,7 @@ export function Dump() {

        {/* Actions */}
        <div className="dump-actions">
-          {canEdit && <Link to={`/dumps/${dump.id}/edit`}>Edit</Link>}
+          {canEdit && <Link to={`${dumpUrl(dump)}/edit`}>Edit</Link>}
          <Link to="/">← Back to all dumps</Link>
        </div>

@@ -271,6 +301,10 @@ export function Dump() {
                c.id === id ? { ...c, deleted: true, body: "" } : c
              )
            )}
+          onCommentUpdated={(updated) =>
+            setComments((prev) =>
+              prev.map((c) => (c.id === updated.id ? updated : c))
+            )}
        />
      </div>
      {playlistModalOpen && (
--- a/src/pages/DumpCreate.tsx
+++ b/src/pages/DumpCreate.tsx
@@ -6,10 +6,13 @@ import { API_URL } from "../config/api.ts";
 import type { CreateUrlDumpRequest, RichContent } from "../model.ts";
 import { useRequiredAuth } from "../hooks/useAuth.ts";
 import { formatBytes } from "../utils/format.ts";
+import { dumpUrl } from "../utils/urls.ts";
 import { PageShell } from "../components/PageShell.tsx";
 import RichContentCard from "../components/RichContentCard.tsx";
 import { MediaPlayer } from "../components/MediaPlayer.tsx";
+import { TextEditor } from "../components/TextEditor.tsx";
 import { ErrorCard } from "../components/ErrorCard.tsx";
+import { FileDropZone } from "../components/FileDropZone.tsx";
 import { friendlyFetchError } from "../utils/apiError.ts";

 const MAX_FILE_SIZE = 50 * 1024 * 1024;
@@ -46,15 +49,8 @@ function LocalFilePreview({ file }: { file: File }) {
  if (mime.startsWith("audio/")) {
    return <MediaPlayer key={src} src={src} kind="audio" mime={mime} />;
  }
-  return (
-    <div className="local-preview-generic">
-      <span className="local-preview-icon">
-        {mime.startsWith("application/pdf") ? "📄" : "📎"}
-      </span>
-      <span className="local-preview-name">{file.name}</span>
-      <span className="local-preview-size">{formatBytes(file.size)}</span>
-    </div>
-  );
+  // For other types the drop zone chip already shows name + size.
+  return null;
 }

 export function DumpCreate() {
@@ -144,7 +140,7 @@ export function DumpCreate() {

      const apiResponse = await res.json();
      if (apiResponse.success) {
-        navigate(`/dumps/${apiResponse.data.id}`);
+        navigate(dumpUrl(apiResponse.data));
      } else {
        setState({
          status: "error",
@@ -266,26 +262,21 @@ export function DumpCreate() {
            )
            : (
              <>
-                <div key="file-field" className="form-group">
-                  <label htmlFor="file">File</label>
-                  <input
-                    id="file"
-                    type="file"
-                    onChange={(e) => setFile(e.target.files?.[0] ?? null)}
-                    disabled={submitting}
-                    required
-                  />
-                </div>
+                <FileDropZone
+                  file={file}
+                  onChange={setFile}
+                  disabled={submitting}
+                />
                {file && <LocalFilePreview file={file} />}
              </>
            )}

          <div className="form-group">
            <label htmlFor="comment">Why are you dumping this?</label>
-            <textarea
+            <TextEditor
              id="comment"
              value={comment}
-              onChange={(e) => setComment(e.target.value)}
+              onChange={setComment}
              disabled={submitting}
              placeholder="Tell the community what makes this worth their time..."
              rows={3}
--- a/src/pages/DumpEdit.tsx
+++ b/src/pages/DumpEdit.tsx
@@ -6,12 +6,15 @@ import type { Dump, UpdateDumpRequest } from "../model.ts";
 import { deserializeDump } from "../model.ts";
 import { useRequiredAuth } from "../hooks/useAuth.ts";
 import { formatBytes } from "../utils/format.ts";
+import { dumpUrl } from "../utils/urls.ts";
 import { PageShell } from "../components/PageShell.tsx";
 import { PageError } from "../components/PageError.tsx";
 import { friendlyFetchError } from "../utils/apiError.ts";
 import { ConfirmModal } from "../components/ConfirmModal.tsx";
 import RichContentCard from "../components/RichContentCard.tsx";
 import FilePreview from "../components/FilePreview.tsx";
+import { TextEditor } from "../components/TextEditor.tsx";
+import { FileDropZone } from "../components/FileDropZone.tsx";

 type DumpEditState =
  | { status: "loading" }
@@ -101,7 +104,7 @@ export function DumpEdit() {
    const updatedDump: Dump = deserializeDump(apiResponse.data);
    setState({ status: "loaded", dump: updatedDump });
    setNewFile(null);
-    navigate(`/dumps/${updatedDump.id}`, { state: { dump: updatedDump } });
+    navigate(dumpUrl(updatedDump), { state: { dump: updatedDump } });
  };

  const handleRefreshMetadata = async () => {
@@ -236,26 +239,22 @@ export function DumpEdit() {
                  <strong>{dump.fileName}</strong>
                  {dump.fileSize != null && ` — ${formatBytes(dump.fileSize)}`}
                </p>
-                <label htmlFor="replace-file">Replace file</label>
-                <input
-                  id="replace-file"
-                  type="file"
-                  onChange={(e) => setNewFile(e.target.files?.[0] ?? null)}
+                <FileDropZone
+                  file={newFile}
+                  onChange={setNewFile}
+                  label="Replace file"
+                  hint="Drop a replacement here"
+                  showLimit={false}
                />
-                {newFile && (
-                  <p className="file-input-info">
-                    {newFile.name} — {formatBytes(newFile.size)}
-                  </p>
-                )}
              </div>
            )}

          <div className="form-group">
            <label htmlFor="comment">Why are you dumping this?</label>
-            <textarea
+            <TextEditor
              id="comment"
              value={comment}
-              onChange={(e) => setComment(e.currentTarget.value)}
+              onChange={setComment}
              placeholder="Tell the community what makes this worth their time..."
              rows={3}
            />
@@ -287,7 +286,7 @@ export function DumpEdit() {
              Delete dump
            </button>
            <div className="form-actions-right">
-              <Link to={`/dumps/${dump.id}`} className="form-cancel">
+              <Link to={dumpUrl(dump)} className="form-cancel">
                Cancel
              </Link>
              <button type="submit" className="btn-primary">Save</button>
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -26,6 +26,7 @@ import { friendlyFetchError } from "../utils/apiError.ts";
 import { useFeedCache } from "../hooks/useFeedCache.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useWS } from "../hooks/useWS.ts";
+import { useDumpListSync } from "../hooks/useDumpListSync.ts";
 import { useInfiniteScroll } from "../hooks/useInfiniteScroll.ts";

 const PAGE_SIZE = 20;
@@ -172,6 +173,24 @@ export function Index() {
    DumpsState
  >({ status: "loading" });

+  const setFollowedUsersDumpsItems = useCallback(
+    (fn: (prev: Dump[]) => Dump[]) =>
+      setFollowedUsersDumps((s) =>
+        s.status !== "loaded" ? s : { ...s, dumps: fn(s.dumps) }
+      ),
+    [],
+  );
+  useDumpListSync(setFollowedUsersDumpsItems);
+
+  const setFollowedPlaylistsDumpsItems = useCallback(
+    (fn: (prev: Dump[]) => Dump[]) =>
+      setFollowedPlaylistsDumps((s) =>
+        s.status !== "loaded" ? s : { ...s, dumps: fn(s.dumps) }
+      ),
+    [],
+  );
+  useDumpListSync(setFollowedPlaylistsDumpsItems);
+
  const [tab, setTab] = useState<FeedTab>("hot");
  const [followedSection, setFollowedSection] = useState<FollowedSection>(
    "users",
--- a/src/pages/Notifications.tsx
+++ b/src/pages/Notifications.tsx
@@ -1,9 +1,10 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router";

 import { API_URL } from "../config/api.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { ErrorCard } from "../components/ErrorCard.tsx";
+import { Tooltip } from "../components/Tooltip.tsx";
 import { useWS } from "../hooks/useWS.ts";
 import type {
  DumpUpvotedData,
@@ -15,6 +16,7 @@ import type {
  RawNotification,
  UserDumpPostedData,
  UserFollowedData,
+  UserMentionedData,
 } from "../model.ts";
 import { deserializeNotification } from "../model.ts";
 import { PageShell } from "../components/PageShell.tsx";
@@ -33,7 +35,7 @@ type State =
    loadingMore: boolean;
  };

-type NotifIconKind = "upvote" | "follow" | "dump" | "playlist";
+type NotifIconKind = "upvote" | "follow" | "dump" | "playlist" | "mention";

 function notifIconKind(type: Notification["type"]): NotifIconKind {
  switch (type) {
@@ -47,16 +49,31 @@ function notifIconKind(type: Notification["type"]): NotifIconKind {
      return "dump";
    case "playlist_dump_added":
      return "playlist";
+    case "user_mentioned":
+      return "mention";
  }
 }

+const UpvoteSvg = () => (
+  <svg viewBox="0 0 10 10" width="11" height="11" fill="currentColor">
+    <polygon points="5,1 9,9 1,9" />
+  </svg>
+);
+
+const FollowSvg = () => (
+  <svg viewBox="0 0 10 10" width="10" height="10" fill="currentColor">
+    <polygon points="2,1 9,5 2,9" />
+  </svg>
+);
+
 function NotifIcon({ type }: { type: Notification["type"] }) {
  const kind = notifIconKind(type);
-  const glyphs: Record<NotifIconKind, string> = {
-    upvote: "▲",
-    follow: "►",
+  const glyphs: Record<NotifIconKind, React.ReactNode> = {
+    upvote: <UpvoteSvg />,
+    follow: <FollowSvg />,
    dump: "🚚",
    playlist: "📜",
+    mention: "@",
  };
  return (
    <span className={`notif-icon notif-icon--${kind}`}>
@@ -65,78 +82,56 @@ function NotifIcon({ type }: { type: Notification["type"] }) {
  );
 }

+function notificationLink(n: Notification): string {
+  const data = n.data as NotificationData;
+  switch (n.type) {
+    case "user_followed":
+      return `/users/${(data as UserFollowedData).followerUsername}`;
+    case "playlist_followed":
+      return `/playlists/${(data as PlaylistFollowedData).playlistId}`;
+    case "user_dump_posted":
+      return `/dumps/${(data as UserDumpPostedData).dumpId}`;
+    case "playlist_dump_added":
+      return `/dumps/${(data as PlaylistDumpAddedData).dumpId}`;
+    case "dump_upvoted":
+      return `/dumps/${(data as DumpUpvotedData).dumpId}`;
+    case "user_mentioned": {
+      const d = data as UserMentionedData;
+      if (d.contextType === "comment") return `/dumps/${d.dumpId}#comment-${d.contextId}`;
+      if (d.contextType === "dump") return `/dumps/${d.contextId}`;
+      return `/playlists/${d.contextId}`;
+    }
+  }
+}
+
 function notificationContent(n: Notification): React.ReactNode {
  const data = n.data as NotificationData;
  switch (n.type) {
    case "user_followed": {
      const d = data as UserFollowedData;
-      return (
-        <>
-          <Link to={`/users/${d.followerUsername}`} className="notif-link">
-            {d.followerUsername}
-          </Link>
-          {" started following you"}
-        </>
-      );
+      return <><strong>{d.followerUsername}</strong>{" started following you"}</>;
    }
    case "playlist_followed": {
      const d = data as PlaylistFollowedData;
-      return (
-        <>
-          <Link to={`/users/${d.followerUsername}`} className="notif-link">
-            {d.followerUsername}
-          </Link>
-          {" followed your playlist "}
-          <Link to={`/playlists/${d.playlistId}`} className="notif-link">
-            {d.playlistTitle}
-          </Link>
-        </>
-      );
+      return <><strong>{d.followerUsername}</strong>{" followed your playlist "}<strong>{d.playlistTitle}</strong></>;
    }
    case "user_dump_posted": {
      const d = data as UserDumpPostedData;
-      return (
-        <>
-          <Link to={`/users/${d.dumperUsername}`} className="notif-link">
-            {d.dumperUsername}
-          </Link>
-          {" posted "}
-          <Link to={`/dumps/${d.dumpId}`} className="notif-link">
-            {d.dumpTitle}
-          </Link>
-        </>
-      );
+      return <><strong>{d.dumperUsername}</strong>{" posted "}<strong>{d.dumpTitle}</strong></>;
    }
    case "playlist_dump_added": {
      const d = data as PlaylistDumpAddedData;
-      return (
-        <>
-          <Link to={`/dumps/${d.dumpId}`} className="notif-link">
-            {d.dumpTitle}
-          </Link>
-          {" was added to "}
-          <Link to={`/playlists/${d.playlistId}`} className="notif-link">
-            {d.playlistTitle}
-          </Link>
-        </>
-      );
+      return <><strong>{d.dumpTitle}</strong>{" was added to "}<strong>{d.playlistTitle}</strong></>;
    }
    case "dump_upvoted": {
      const d = data as DumpUpvotedData;
-      return (
-        <>
-          <Link to={`/users/${d.voterUsername}`} className="notif-link">
-            {d.voterUsername}
-          </Link>
-          {" upvoted "}
-          <Link to={`/dumps/${d.dumpId}`} className="notif-link">
-            {d.dumpTitle}
-          </Link>
-        </>
-      );
+      return <><strong>{d.voterUsername}</strong>{" upvoted "}<strong>{d.dumpTitle}</strong></>;
+    }
+    case "user_mentioned": {
+      const d = data as UserMentionedData;
+      const where = d.contextTitle || (d.contextType === "comment" ? "a comment" : "a post");
+      return <><strong>{d.mentionerUsername}</strong>{" mentioned you in "}<strong>{where}</strong></>;
    }
-    default:
-      return "New notification";
  }
 }

@@ -308,21 +303,28 @@ export function Notifications() {
                      !n.read ? " notification-item--unread" : ""
                    }`}
                  >
-                    <NotifIcon type={n.type} />
-                    <div className="notification-body">
-                      <span className="notification-content">
-                        {notificationContent(n)}
-                      </span>
-                      <time
-                        className="notification-time"
-                        dateTime={n.createdAt.toISOString()}
-                      >
-                        {timeAgo(n.createdAt)}
-                      </time>
-                    </div>
-                    {!n.read && (
-                      <span className="notif-dot" aria-hidden="true" />
-                    )}
+                    <Link
+                      to={notificationLink(n)}
+                      className="notification-item-link"
+                    >
+                      <NotifIcon type={n.type} />
+                      <div className="notification-body">
+                        <span className="notification-content">
+                          {notificationContent(n)}
+                        </span>
+                        <Tooltip text={n.createdAt.toLocaleString()}>
+                          <time
+                            className="notification-time"
+                            dateTime={n.createdAt.toISOString()}
+                          >
+                            {timeAgo(n.createdAt)}
+                          </time>
+                        </Tooltip>
+                      </div>
+                      {!n.read && (
+                        <span className="notif-dot" aria-hidden="true" />
+                      )}
+                    </Link>
                  </li>
                ))}
              </ul>
--- a/src/pages/PlaylistDetail.tsx
+++ b/src/pages/PlaylistDetail.tsx
@@ -1,8 +1,18 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router";
 import { API_URL } from "../config/api.ts";
-import type { PlaylistWithDumps, RawPlaylistWithDumps } from "../model.ts";
-import { deserializePlaylistWithDumps } from "../model.ts";
+import type {
+  PlaylistWithDumps,
+  RawDump,
+  RawPlaylist,
+  RawPlaylistWithDumps,
+} from "../model.ts";
+import {
+  deserializeDump,
+  deserializePlaylist,
+  deserializePlaylistWithDumps,
+} from "../model.ts";
+import { playlistUrl } from "../utils/urls.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useWS } from "../hooks/useWS.ts";
 import { relativeTime } from "../utils/relativeTime.ts";
@@ -12,8 +22,10 @@ import { PageError } from "../components/PageError.tsx";
 import { ConfirmModal } from "../components/ConfirmModal.tsx";
 import { ImagePicker } from "../components/ImagePicker.tsx";
 import { Markdown } from "../components/Markdown.tsx";
+import { TextEditor } from "../components/TextEditor.tsx";
 import { FollowPlaylistButton } from "../components/FollowButton.tsx";
 import { ErrorCard } from "../components/ErrorCard.tsx";
+import { Tooltip } from "../components/Tooltip.tsx";
 import { friendlyFetchError } from "../utils/apiError.ts";

 type LoadState =
@@ -31,10 +43,13 @@ export function PlaylistDetail() {
    castVote,
    removeVote,
    deletedDumpIds,
+    lastDumpEvent,
    lastPlaylistEvent,
  } = useWS();

  const [state, setState] = useState<LoadState>({ status: "loading" });
+  // Stable UUID for WS comparisons — avoids re-running effects on every state change
+  const playlistUUID = state.status === "loaded" ? state.playlist.id : null;

  // activeDumpIds: which dumps are currently in the playlist (the canonical set)
  const [activeDumpIds, setActiveDumpIds] = useState<Set<string>>(new Set());
@@ -45,7 +60,9 @@ export function PlaylistDetail() {
  >({});
  const cancels = useRef<Map<string, () => void>>(new Map());

-  const [dragSrcIndex, setDragSrcIndex] = useState<number | null>(null);
+  // dragSrcRef: mutable ref so handleDragOver always sees the current source index
+  // without stale closure issues (state would only update on next render).
+  const dragSrcRef = useRef<number | null>(null);
  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);

  const [editOpen, setEditOpen] = useState(false);
@@ -58,9 +75,18 @@ export function PlaylistDetail() {
  const [imageFile, setImageFile] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState<string | null>(null);

-  // prevActiveDumpIds: used by the WS effect to diff incoming dumpIds
-  const prevActiveDumpIdsRef = useRef<Set<string> | null>(null);
-  const descriptionRef = useRef<HTMLTextAreaElement>(null);
+  // Mirrors activeDumpIds for use in effects without adding it as a dep.
+  // Updated on every render via useLayoutEffect so it's always current.
+  const activeDumpIdsRef = useRef(activeDumpIds);
+  // knownDumpIds: all dump IDs that belong to this playlist (for re-adding when dumps become public again)
+  const knownDumpIdsRef = useRef<Set<string>>(new Set());
+  // Authoritative dump order from the server (fetchPlaylist + dumps_updated events).
+  // Used to re-insert dumps at their correct position after private→public transitions.
+  const dumpOrderRef = useRef<string[]>([]);
+
+  useLayoutEffect(() => {
+    activeDumpIdsRef.current = activeDumpIds;
+  });

  useEffect(() => () => {
    cancels.current.forEach((c) => c());
@@ -87,8 +113,10 @@ export function PlaylistDetail() {
        );
        setState({ status: "loaded", playlist: pl });
        const ids = new Set(pl.dumps.map((d) => d.id));
+        const order = pl.dumps.map((d) => d.id);
        setActiveDumpIds(ids);
-        prevActiveDumpIdsRef.current = ids;
+        dumpOrderRef.current = order;
+        for (const id of ids) knownDumpIdsRef.current.add(id);
        setFading({});
        cancels.current.forEach((c) => c());
        cancels.current.clear();
@@ -172,13 +200,17 @@ export function PlaylistDetail() {

  // WS: playlist metadata updated or deleted
  useEffect(() => {
-    if (!lastPlaylistEvent || !playlistId) return;
+    if (!lastPlaylistEvent || !playlistUUID) return;
    const ev = lastPlaylistEvent;
-    if (ev.playlistId !== playlistId) return;
+    // Compare against the resolved UUID, not the URL param (which may be a slug)
+    if (ev.playlistId !== playlistUUID) return;

    if (ev.type === "dumps_updated" && ev.dumpIds) {
      const newIds = new Set(ev.dumpIds);
-      const prev = prevActiveDumpIdsRef.current ?? new Set<string>();
+      for (const id of newIds) knownDumpIdsRef.current.add(id);
+      // Use the ref so we always diff against the current activeDumpIds,
+      // including changes from deletedDumpIds / lastDumpEvent effects.
+      const prev = activeDumpIdsRef.current;

      // Removed: were active, not in new set → fade out
      for (const id of prev) {
@@ -192,46 +224,65 @@ export function PlaylistDetail() {
        }
      }

-      // Re-added while fading → cancel fade, restore to active
+      // Newly added IDs: cancel any fade, mark active, fetch dump data individually.
+      // We never call fetchPlaylist here — that would reset state to "loading", cycle
+      // playlistUUID, and re-trigger this effect in a loop.
      for (const id of newIds) {
        if (!prev.has(id)) {
-          if (cancels.current.has(id)) {
-            cancels.current.get(id)!();
-          }
-          // If this is a brand-new dump we haven't seen, re-fetch
-          setState((s) => {
-            if (s.status !== "loaded") return s;
-            const known = s.playlist.dumps.some((d) => d.id === id);
-            if (!known) {
-              // Trigger a re-fetch asynchronously
-              setTimeout(fetchPlaylist, 0);
-            }
-            return s;
-          });
+          cancels.current.get(id)?.();
          setActiveDumpIds((s) => new Set([...s, id]));
+          // Capture ev.dumpIds so we can insert the new dump at its correct position.
+          const orderedIds = ev.dumpIds!;
+          fetch(`${API_URL}/api/dumps/${id}`, {
+            headers: token ? { Authorization: `Bearer ${token}` } : {},
+          })
+            .then((r) => r.ok ? r.json() : null)
+            .then((body) => {
+              if (!body?.success) return;
+              const dump = deserializeDump(body.data as RawDump);
+              setState((s) => {
+                if (s.status !== "loaded") return s;
+                if (s.playlist.dumps.some((d) => d.id === dump.id)) return s;
+                // Insert at the correct server-ordered position.
+                const dumpMap = new Map(s.playlist.dumps.map((d) => [d.id, d]));
+                dumpMap.set(dump.id, dump);
+                return {
+                  ...s,
+                  playlist: {
+                    ...s.playlist,
+                    dumps: [
+                      ...orderedIds
+                        .filter((oid) => dumpMap.has(oid))
+                        .map((oid) => dumpMap.get(oid)!),
+                      ...s.playlist.dumps.filter((d) => !newIds.has(d.id)),
+                    ],
+                  },
+                };
+              });
+            })
+            .catch(() => {});
        }
      }

-      // Reorder active dumps to match the new server order,
-      // keeping fading dumps at their current visual positions.
-      setState((prev) => {
-        if (prev.status !== "loaded") return prev;
-        const dumpMap = new Map(prev.playlist.dumps.map((d) => [d.id, d]));
-        const activeQueue = ev.dumpIds!
-          .filter((id) => dumpMap.has(id))
-          .map((id) => dumpMap.get(id)!);
-        let qi = 0;
-        const result = prev.playlist.dumps
-          .filter((d) => dumpMap.has(d.id))
-          .map((d) => newIds.has(d.id) ? activeQueue[qi++] : d);
-        while (qi < activeQueue.length) result.push(activeQueue[qi++]);
+      // Apply the server-authoritative order: active dumps in ev.dumpIds order,
+      // fading dumps (not in newIds) appended at the end.
+      setState((s) => {
+        if (s.status !== "loaded") return s;
+        const dumpMap = new Map(s.playlist.dumps.map((d) => [d.id, d]));
        return {
-          ...prev,
-          playlist: { ...prev.playlist, dumps: result },
+          ...s,
+          playlist: {
+            ...s.playlist,
+            dumps: [
+              ...ev.dumpIds!
+                .filter((id) => dumpMap.has(id))
+                .map((id) => dumpMap.get(id)!),
+              ...s.playlist.dumps.filter((d) => !newIds.has(d.id)),
+            ],
+          },
        };
      });
-
-      prevActiveDumpIdsRef.current = newIds;
+      dumpOrderRef.current = ev.dumpIds!;
    } else if (ev.type === "updated" && ev.playlist) {
      setState((prev) => {
        if (prev.status !== "loaded") return prev;
@@ -249,7 +300,7 @@ export function PlaylistDetail() {
    } else if (ev.type === "deleted") {
      navigate("/");
    }
-  }, [lastPlaylistEvent, playlistId]);
+  }, [lastPlaylistEvent, playlistUUID]);

  // Filter out globally deleted dumps (dump was deleted entirely, not just removed from playlist)
  useEffect(() => {
@@ -269,36 +320,85 @@ export function PlaylistDetail() {
    });
  }, [deletedDumpIds]);

-  const handleDragStart = (index: number) => setDragSrcIndex(index);
+  // Update dump metadata in-place; re-add if it was in this playlist but hidden (private→public)
+  useEffect(() => {
+    if (!lastDumpEvent) return;
+    const dump = lastDumpEvent;
+    setState((prev) => {
+      if (prev.status !== "loaded") return prev;
+      const idx = prev.playlist.dumps.findIndex((d) => d.id === dump.id);
+      if (idx !== -1) {
+        // Update in-place
+        const dumps = [...prev.playlist.dumps];
+        dumps[idx] = dump;
+        return { ...prev, playlist: { ...prev.playlist, dumps } };
+      }
+      // Re-add if this dump belongs to the playlist and is now public,
+      // inserting at its correct server-ordered position.
+      if (!dump.isPrivate && knownDumpIdsRef.current.has(dump.id)) {
+        const order = dumpOrderRef.current;
+        const dumpMap = new Map(prev.playlist.dumps.map((d) => [d.id, d]));
+        dumpMap.set(dump.id, dump);
+        const reinserted = order.length > 0
+          ? [
+            ...order.filter((id) => dumpMap.has(id)).map((id) => dumpMap.get(id)!),
+            ...prev.playlist.dumps.filter((d) => !new Set(order).has(d.id)),
+          ]
+          : [...prev.playlist.dumps, dump];
+        return { ...prev, playlist: { ...prev.playlist, dumps: reinserted } };
+      }
+      return prev;
+    });
+    // Restore to activeDumpIds if re-added
+    if (!dump.isPrivate && knownDumpIdsRef.current.has(dump.id)) {
+      setActiveDumpIds((prev) => {
+        if (prev.has(dump.id)) return prev;
+        return new Set([...prev, dump.id]);
+      });
+    }
+  }, [lastDumpEvent]);
+
+  const handleDragStart = (index: number) => {
+    dragSrcRef.current = index;
+  };

  const handleDragOver = (e: React.DragEvent, index: number) => {
    e.preventDefault();
-    if (dragSrcIndex === null || dragSrcIndex === index) return;
+    const src = dragSrcRef.current;
+    if (src === null || src === index) return;
+    // Only swap once the pointer has crossed the card's midpoint.
+    // Without this, entering a card immediately re-triggers the swap in the
+    // opposite direction (the two items keep bouncing back and forth).
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const mid = rect.top + rect.height / 2;
+    if (src < index && e.clientY < mid) return; // dragging downward, not past mid yet
+    if (src > index && e.clientY > mid) return; // dragging upward, not past mid yet
+    // Update visual order in state. Use activeDumpIdsRef so the updater never
+    // reads a stale closure — activeDumpIds can't change mid-drag but this is
+    // the correct pattern for setState updaters.
    setState((prev) => {
      if (prev.status !== "loaded") return prev;
-      // Only reorder among active dumps
-      const activeDumps = prev.playlist.dumps.filter((d) =>
-        activeDumpIds.has(d.id)
-      );
-      const fadingDumps = prev.playlist.dumps.filter((d) =>
-        !activeDumpIds.has(d.id)
-      );
+      const ids = activeDumpIdsRef.current;
+      const activeDumps = prev.playlist.dumps.filter((d) => ids.has(d.id));
+      const fadingDumps = prev.playlist.dumps.filter((d) => !ids.has(d.id));
      const reordered = [...activeDumps];
-      const [moved] = reordered.splice(dragSrcIndex, 1);
+      const [moved] = reordered.splice(src, 1);
      reordered.splice(index, 0, moved);
-      setDragSrcIndex(index);
-      setDragOverIndex(index);
      return {
        ...prev,
        playlist: { ...prev.playlist, dumps: [...reordered, ...fadingDumps] },
      };
    });
+    // Update the ref and highlight index outside the updater (no side effects inside updaters).
+    dragSrcRef.current = index;
+    setDragOverIndex(index);
  };

  const handleDragEnd = async () => {
-    if (state.status !== "loaded" || !playlistId) return;
-    setDragSrcIndex(null);
+    const src = dragSrcRef.current;
+    dragSrcRef.current = null;
    setDragOverIndex(null);
+    if (src === null || state.status !== "loaded" || !playlistId) return;
    const activeDumps = state.playlist.dumps.filter((d) =>
      activeDumpIds.has(d.id)
    );
@@ -341,13 +441,6 @@ export function PlaylistDetail() {
    }).catch(() => {});
  };

-  useEffect(() => {
-    const el = descriptionRef.current;
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight}px`;
-  }, [editDescription, editOpen]);
-
  const openEdit = () => {
    if (state.status !== "loaded") return;
    setEditTitle(state.playlist.title);
@@ -364,15 +457,25 @@ export function PlaylistDetail() {
    setEditSaving(true);
    setEditError(null);
    try {
-      await authFetch(`${API_URL}/api/playlists/${playlistId}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          title: editTitle,
-          description: editDescription || undefined,
-          isPublic: editIsPublic,
-        }),
-      });
+      const updateRes = await authFetch(
+        `${API_URL}/api/playlists/${playlistId}`,
+        {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            title: editTitle,
+            description: editDescription || undefined,
+            isPublic: editIsPublic,
+          }),
+        },
+      );
+      const updateJson = await updateRes.json() as {
+        success: boolean;
+        data: RawPlaylist;
+      };
+      const updatedPlaylist = updateJson.success
+        ? deserializePlaylist(updateJson.data)
+        : null;

      if (imageFile) {
        const fd = new FormData();
@@ -384,7 +487,11 @@ export function PlaylistDetail() {
      }

      setEditOpen(false);
-      fetchPlaylist();
+      if (updatedPlaylist) {
+        navigate(playlistUrl(updatedPlaylist), { replace: true });
+      } else {
+        fetchPlaylist();
+      }
    } catch (err) {
      setEditError(friendlyFetchError(err));
    } finally {
@@ -519,12 +626,12 @@ export function PlaylistDetail() {

            {editOpen
              ? (
-                <textarea
-                  ref={descriptionRef}
+                <TextEditor
                  className="playlist-edit-textarea"
                  value={editDescription}
-                  onChange={(e) => setEditDescription(e.target.value)}
+                  onChange={setEditDescription}
                  placeholder="Description (optional)"
+                  autoResize
                  rows={1}
                />
              )
@@ -571,12 +678,18 @@ export function PlaylistDetail() {
                        @{playlist.ownerUsername}
                      </Link>
                    )}
-                    <time
-                      dateTime={playlist.createdAt.toISOString()}
-                      title={playlist.createdAt.toLocaleString()}
-                    >
-                      {relativeTime(playlist.createdAt)}
-                    </time>
+                    <Tooltip text={playlist.createdAt.toLocaleString()}>
+                      <time dateTime={playlist.createdAt.toISOString()}>
+                        {relativeTime(playlist.createdAt)}
+                      </time>
+                    </Tooltip>
+                    {playlist.updatedAt && (
+                      <Tooltip text={`Edited ${playlist.updatedAt.toLocaleString()}`}>
+                        <span className="playlist-edited-label">
+                          edited {relativeTime(playlist.updatedAt)}
+                        </span>
+                      </Tooltip>
+                    )}
                  </>
                )}
            </div>
@@ -590,7 +703,10 @@ export function PlaylistDetail() {
      {visibleDumps.length === 0
        ? <p className="empty-state">No dumps in this playlist yet.</p>
        : (
-          <div className="playlist-dump-list">
+          <div
+            className="playlist-dump-list"
+            onDragOver={isOwner ? (e) => e.preventDefault() : undefined}
+          >
            {visibleDumps.map((dump) => {
              const isActive = activeDumpIds.has(dump.id);
              const phase = fading[dump.id];
@@ -617,7 +733,7 @@ export function PlaylistDetail() {
                  onDragOver={isOwner && isActive
                    ? (e) => handleDragOver(e, activeIndex)
                    : undefined}
-                  onDragEnd={isOwner && isActive ? handleDragEnd : undefined}
+                  onDragEnd={isOwner ? handleDragEnd : undefined}
                >
                  {isOwner && isActive && (
                    <span className="drag-handle" aria-hidden>⠿</span>
--- a/src/pages/UserDumps.tsx
+++ b/src/pages/UserDumps.tsx
@@ -13,6 +13,7 @@ import type { Dump, PaginatedData, PublicUser, RawDump } from "../model.ts";
 import { deserializeDump, deserializePublicUser } from "../model.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useWS } from "../hooks/useWS.ts";
+import { useDumpListSync } from "../hooks/useDumpListSync.ts";
 import { useInfiniteScroll } from "../hooks/useInfiniteScroll.ts";
 import { useFeedCache } from "../hooks/useFeedCache.ts";
 import { Avatar } from "../components/Avatar.tsx";
@@ -49,6 +50,19 @@ export function UserDumps() {
  const [state, setState] = useState<State>({ status: "loading" });
  const [createModalOpen, setCreateModalOpen] = useState(false);

+  const profileUserId = state.status === "loaded" ? state.profileUser.id : null;
+  const isOwnProfile = me?.id === profileUserId;
+
+  const setDumps = useCallback((fn: (prev: Dump[]) => Dump[]) => {
+    setState((s) => s.status !== "loaded" ? s : { ...s, dumps: fn(s.dumps) });
+  }, []);
+  const addFilter = useCallback((dump: Dump): boolean => {
+    if (!profileUserId) return false;
+    if (dump.userId !== profileUserId) return false;
+    return isOwnProfile || !dump.isPrivate;
+  }, [profileUserId, isOwnProfile]);
+  useDumpListSync(setDumps, addFilter);
+
  useEffect(() => {
    if (!username) return;
    setState({ status: "loading" });
@@ -197,7 +211,6 @@ export function UserDumps() {
  }

  const { profileUser, dumps, hasMore, loadingMore } = state;
-  const isOwnProfile = me?.username === profileUser.username;

  return (
    <PageShell>
--- a/src/pages/UserLogin.tsx
+++ b/src/pages/UserLogin.tsx
@@ -87,7 +87,7 @@ export function UserLogin() {
        </form>

        <p className="auth-card-footer">
-          No account? <Link to="/register">Register</Link>
+          This is a mirage.
        </p>
      </div>
    </PageShell>
--- a/src/pages/UserPlaylists.tsx
+++ b/src/pages/UserPlaylists.tsx
@@ -17,7 +17,7 @@ import type {
 } from "../model.ts";
 import { deserializePlaylist, deserializePublicUser } from "../model.ts";
 import { useAuth } from "../hooks/useAuth.ts";
-import { useWS } from "../hooks/useWS.ts";
+import { usePlaylistListSync } from "../hooks/usePlaylistListSync.ts";
 import { useInfiniteScroll } from "../hooks/useInfiniteScroll.ts";
 import { useFeedCache } from "../hooks/useFeedCache.ts";
 import { Avatar } from "../components/Avatar.tsx";
@@ -55,7 +55,6 @@ function initialFeed(items: Playlist[], hasMore: boolean): PlaylistFeed {
 export function UserPlaylists() {
  const { username } = useParams();
  const { user: me, authFetch, token } = useAuth();
-  const { lastPlaylistEvent, deletedPlaylistIds } = useWS();

  const { cached: cachedCreated, saveState: saveCreated } = useFeedCache<
    Playlist
@@ -73,6 +72,28 @@ export function UserPlaylists() {
  const [state, setState] = useState<State>({ status: "loading" });
  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);

+  const profileUserId = state.status === "loaded" ? state.profileUser.id : null;
+  const isOwnProfile = me?.id === profileUserId;
+
+  const setCreated = useCallback((fn: (prev: Playlist[]) => Playlist[]) => {
+    setState((s) =>
+      s.status !== "loaded" ? s : { ...s, created: { ...s.created, items: fn(s.created.items) } }
+    );
+  }, []);
+  usePlaylistListSync(setCreated, {
+    isOwner: isOwnProfile,
+    ownerId: profileUserId ?? undefined,
+  });
+
+  const setFollowed = useCallback((fn: (prev: Playlist[]) => Playlist[]) => {
+    setState((s) =>
+      s.status !== "loaded"
+        ? s
+        : { ...s, followed: { ...s.followed, items: fn(s.followed.items) } }
+    );
+  }, []);
+  usePlaylistListSync(setFollowed, { noNewEntries: true });
+
  useEffect(() => {
    if (!username) return;
    setState({ status: "loading" });
@@ -246,77 +267,6 @@ export function UserPlaylists() {
      !state.followed.loadingMore,
  );

-  // Real-time WS playlist updates
-  useEffect(() => {
-    if (!lastPlaylistEvent || state.status !== "loaded") return;
-    const ev = lastPlaylistEvent;
-    const isOwnProfile = me?.username === state.profileUser.username;
-
-    if (ev.type === "created" && ev.playlist?.userId === state.profileUser.id) {
-      if (ev.playlist.isPublic || isOwnProfile) {
-        setState((s) => {
-          if (s.status !== "loaded") return s;
-          if (s.created.items.some((p) => p.id === ev.playlist!.id)) return s;
-          return {
-            ...s,
-            created: {
-              ...s.created,
-              items: [ev.playlist!, ...s.created.items],
-            },
-          };
-        });
-      }
-    } else if (ev.type === "updated") {
-      setState((s) => {
-        if (s.status !== "loaded") return s;
-        const updatedCreated = ev.playlist?.userId === state.profileUser.id
-          ? s.created.items
-            .map((p) => p.id === ev.playlist!.id ? ev.playlist! : p)
-            .filter((p) => p.isPublic || isOwnProfile)
-          : s.created.items;
-        const updatedFollowed = s.followed.items.map((p) =>
-          p.id === ev.playlist?.id ? ev.playlist! : p
-        ).filter((p) => p.isPublic);
-        return {
-          ...s,
-          created: { ...s.created, items: updatedCreated },
-          followed: { ...s.followed, items: updatedFollowed },
-        };
-      });
-    } else if (ev.type === "deleted") {
-      setState((s) =>
-        s.status !== "loaded" ? s : {
-          ...s,
-          created: {
-            ...s.created,
-            items: s.created.items.filter((p) => p.id !== ev.playlistId),
-          },
-          followed: {
-            ...s.followed,
-            items: s.followed.items.filter((p) => p.id !== ev.playlistId),
-          },
-        }
-      );
-    }
-  }, [lastPlaylistEvent, me]);
-
-  useEffect(() => {
-    if (!deletedPlaylistIds.size || state.status !== "loaded") return;
-    setState((s) =>
-      s.status !== "loaded" ? s : {
-        ...s,
-        created: {
-          ...s.created,
-          items: s.created.items.filter((p) => !deletedPlaylistIds.has(p.id)),
-        },
-        followed: {
-          ...s.followed,
-          items: s.followed.items.filter((p) => !deletedPlaylistIds.has(p.id)),
-        },
-      }
-    );
-  }, [deletedPlaylistIds]);
-
  // Scroll save
  useEffect(() => {
    if (state.status !== "loaded") return;
@@ -395,7 +345,6 @@ export function UserPlaylists() {
  }

  const { profileUser, created, followed } = state;
-  const isOwnProfile = me?.username === profileUser.username;

  return (
    <PageShell>
--- a/src/pages/UserPublicProfile.tsx
+++ b/src/pages/UserPublicProfile.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router";

 import { API_URL } from "../config/api.ts";
@@ -19,6 +19,8 @@ import { PageShell } from "../components/PageShell.tsx";
 import { PageError } from "../components/PageError.tsx";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useWS } from "../hooks/useWS.ts";
+import { useDumpListSync } from "../hooks/useDumpListSync.ts";
+import { usePlaylistListSync } from "../hooks/usePlaylistListSync.ts";
 import type { Playlist, RawPlaylist } from "../model.ts";
 import { deserializePlaylist } from "../model.ts";
 import { useFeedCache } from "../hooks/useFeedCache.ts";
@@ -114,10 +116,9 @@ export function UserPublicProfile() {
    voteCounts,
    myVotes,
    lastVoteEvent,
+    lastDumpEvent,
    castVote,
    removeVote,
-    lastPlaylistEvent,
-    deletedPlaylistIds,
  } = useWS();

  const { cached: cachedDumps, saveState: saveDumps } = useFeedCache<Dump>(
@@ -136,11 +137,104 @@ export function UserPublicProfile() {
  );

  const [state, setState] = useState<ProfileState>({ status: "loading" });
-  const [uploading, setUploading] = useState(false);
-  const [avatarError, setAvatarError] = useState<string | null>(null);
+
+  const profileUserId = state.status === "loaded" ? state.user.id : null;
+  const isOwnProfile = me?.id === profileUserId;
+
+  const removedDumpPositionsRef = useRef<Map<string, number>>(new Map());
+
+  const setDumps = useCallback((fn: (prev: Dump[]) => Dump[]) => {
+    setState((s) => {
+      if (s.status !== "loaded") return s;
+      const prev = s.dumps.items;
+      const next = fn(prev);
+      if (next.length < prev.length) {
+        const nextIds = new Set(next.map((d) => d.id));
+        prev.forEach((d, idx) => {
+          if (!nextIds.has(d.id)) removedDumpPositionsRef.current.set(d.id, idx);
+        });
+      }
+      return { ...s, dumps: { ...s.dumps, items: next } };
+    });
+  }, []);
+  // No addFilter — insertion at correct position is handled by the effect below.
+  useDumpListSync(setDumps);
+
  const [profileVotedIds, setProfileVotedIds] = useState<Set<string>>(
    new Set(),
  );
+
+  // Tracks the list index of each dump at the moment it was removed from the
+  // votes list, so we can re-insert it at the correct position when it becomes
+  // public again (instead of always prepending at position 0).
+  const removedVotePositionsRef = useRef<Map<string, number>>(new Map());
+  // Dump IDs removed due to vote withdrawal — must not be re-inserted on
+  // a future dump_updated event (that would only be for private→public transitions).
+  const withdrawnVoteIdsRef = useRef<Set<string>>(new Set());
+
+  const setVotes = useCallback((fn: (prev: Dump[]) => Dump[]) => {
+    setState((s) => {
+      if (s.status !== "loaded") return s;
+      const prev = s.votes.items;
+      const next = fn(prev);
+      if (next.length < prev.length) {
+        const nextIds = new Set(next.map((d) => d.id));
+        prev.forEach((d, idx) => {
+          if (!nextIds.has(d.id)) removedVotePositionsRef.current.set(d.id, idx);
+        });
+      }
+      return { ...s, votes: { ...s.votes, items: next } };
+    });
+  }, []);
+  useDumpListSync(setVotes);
+
+  // Re-insert a vote-list dump at its original position after private→public.
+  // Skip dumps whose vote was explicitly withdrawn (those were removed intentionally).
+  useEffect(() => {
+    if (!lastDumpEvent || lastDumpEvent.isPrivate) return;
+    const dump = lastDumpEvent;
+    if (withdrawnVoteIdsRef.current.has(dump.id)) return;
+    const savedIdx = removedVotePositionsRef.current.get(dump.id);
+    if (savedIdx === undefined) return;
+    removedVotePositionsRef.current.delete(dump.id);
+    setVotes((prev) => {
+      if (prev.some((d) => d.id === dump.id)) return prev;
+      const next = [...prev];
+      next.splice(Math.min(savedIdx, next.length), 0, dump);
+      return next;
+    });
+  }, [lastDumpEvent, setVotes]);
+
+  // Re-insert a dumps-column dump at its original position after private→public.
+  useEffect(() => {
+    if (!lastDumpEvent || lastDumpEvent.isPrivate) return;
+    const dump = lastDumpEvent;
+    if (dump.userId !== profileUserId) return;
+    const savedIdx = removedDumpPositionsRef.current.get(dump.id);
+    if (savedIdx === undefined) return;
+    removedDumpPositionsRef.current.delete(dump.id);
+    setDumps((prev) => {
+      if (prev.some((d) => d.id === dump.id)) return prev;
+      const next = [...prev];
+      next.splice(Math.min(savedIdx, next.length), 0, dump);
+      return next;
+    });
+  }, [lastDumpEvent, profileUserId, setDumps]);
+
+  const setPlaylists = useCallback((fn: (prev: Playlist[]) => Playlist[]) => {
+    setState((s) =>
+      s.status !== "loaded"
+        ? s
+        : { ...s, playlists: { ...s.playlists, items: fn(s.playlists.items) } }
+    );
+  }, []);
+  usePlaylistListSync(setPlaylists, {
+    isOwner: isOwnProfile,
+    ownerId: profileUserId ?? undefined,
+  });
+
+  const [uploading, setUploading] = useState(false);
+  const [avatarError, setAvatarError] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const prevMyVotesRef = useRef<Set<string> | null>(null);

@@ -260,8 +354,6 @@ export function UserPublicProfile() {
    })();
  }, [username]);

-  const profileUserId = state.status === "loaded" ? state.user.id : null;
-
  // Own profile: keep profileVotedIds in sync with myVotes
  useEffect(() => {
    if (!profileUserId || me?.id !== profileUserId) return;
@@ -301,7 +393,10 @@ export function UserPublicProfile() {
          return n;
        });
      }
+      withdrawnVoteIdsRef.current.add(dumpId);
+      setVotes((prev) => prev.filter((d) => d.id !== dumpId));
    } else {
+      withdrawnVoteIdsRef.current.delete(dumpId);
      if (!isOwnProfile) {
        setProfileVotedIds((prev) => new Set([...prev, dumpId]));
      }
@@ -327,65 +422,6 @@ export function UserPublicProfile() {
    }
  }, [lastVoteEvent, me, profileUserId]);

-  // Real-time playlist updates
-  useEffect(() => {
-    if (!lastPlaylistEvent || state.status !== "loaded") return;
-    const profileUserId = state.user.id;
-    const isOwnProfile = me?.id === profileUserId;
-    const ev = lastPlaylistEvent;
-
-    if (ev.type === "created" && ev.playlist?.userId === profileUserId) {
-      if (ev.playlist.isPublic || isOwnProfile) {
-        setState((s) => {
-          if (s.status !== "loaded") return s;
-          if (s.playlists.items.some((p) => p.id === ev.playlist!.id)) return s;
-          return {
-            ...s,
-            playlists: {
-              ...s.playlists,
-              items: [ev.playlist!, ...s.playlists.items],
-            },
-          };
-        });
-      }
-    } else if (ev.type === "updated" && ev.playlist?.userId === profileUserId) {
-      setState((s) => {
-        if (s.status !== "loaded") return s;
-        return {
-          ...s,
-          playlists: {
-            ...s.playlists,
-            items: s.playlists.items
-              .map((p) => p.id === ev.playlist!.id ? ev.playlist! : p)
-              .filter((p) => p.isPublic || isOwnProfile),
-          },
-        };
-      });
-    } else if (ev.type === "deleted") {
-      setState((s) => {
-        if (s.status !== "loaded") return s;
-        return {
-          ...s,
-          playlists: {
-            ...s.playlists,
-            items: s.playlists.items.filter((p) => p.id !== ev.playlistId),
-          },
-        };
-      });
-    }
-  }, [lastPlaylistEvent, me]);
-
-  useEffect(() => {
-    if (deletedPlaylistIds.size === 0 || state.status !== "loaded") return;
-    setState((s) => {
-      if (s.status !== "loaded") return s;
-      const filtered = s.playlists.items.filter((p) =>
-        !deletedPlaylistIds.has(p.id)
-      );
-      if (filtered.length === s.playlists.items.length) return s;
-      return { ...s, playlists: { ...s.playlists, items: filtered } };
-    });
-  }, [deletedPlaylistIds]);

  // Save scroll position + loaded state to sessionStorage on scroll
  useEffect(() => {
@@ -506,7 +542,6 @@ export function UserPublicProfile() {
  }

  const { user: profileUser, dumps, votes, playlists } = state;
-  const isOwnProfile = me?.username === profileUser.username;

  return (
    <PageShell>
--- a/src/pages/UserUpvoted.tsx
+++ b/src/pages/UserUpvoted.tsx
@@ -13,6 +13,7 @@ import type { Dump, PaginatedData, PublicUser, RawDump } from "../model.ts";
 import { deserializeDump, deserializePublicUser } from "../model.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useWS } from "../hooks/useWS.ts";
+import { useDumpListSync } from "../hooks/useDumpListSync.ts";
 import { useInfiniteScroll } from "../hooks/useInfiniteScroll.ts";
 import { useFeedCache } from "../hooks/useFeedCache.ts";
 import { Avatar } from "../components/Avatar.tsx";
@@ -46,6 +47,12 @@ export function UserUpvoted() {
  );

  const [state, setState] = useState<State>({ status: "loading" });
+
+  const setVotesDumps = useCallback((fn: (prev: Dump[]) => Dump[]) => {
+    setState((s) => s.status !== "loaded" ? s : { ...s, votes: fn(s.votes) });
+  }, []);
+  useDumpListSync(setVotesDumps);
+
  const [votedIds, setVotedIds] = useState<Set<string>>(new Set());
  const [fading, setFading] = useState<
    Record<string, "cooldown" | "dismissing">
--- a/src/utils/urls.ts
+++ b/src/utils/urls.ts
@@ -0,0 +1,7 @@
+export function dumpUrl(dump: { id: string; slug?: string }): string {
+  return `/dumps/${dump.slug ?? dump.id}`;
+}
+
+export function playlistUrl(playlist: { id: string; slug?: string }): string {
+  return `/playlists/${playlist.slug ?? playlist.id}`;
+}