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

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>