v2: global player, infinite scroll, image picker, threaded comments

src/components/ImagePicker.tsx

@@ -0,0 +1,70 @@
+import { useRef } from "react";
+
+interface ImagePickerProps {
+  src: string | null;
+  alt?: string;
+  size?: number;
+  borderRadius?: number;
+  onChange: (file: File) => void;
+  uploading?: boolean;
+  accept?: string;
+}
+
+export function ImagePicker({
+  src,
+  alt = "",
+  size = 80,
+  borderRadius = 8,
+  onChange,
+  uploading = false,
+  accept = "image/jpeg,image/png,image/gif,image/webp",
+}: ImagePickerProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const sizeStyle = { width: size, height: size, borderRadius };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) onChange(file);
+    e.target.value = "";
+  };
+
+  return (
+    <div
+      className="img-picker"
+      style={sizeStyle}
+      onClick={() => !uploading && inputRef.current?.click()}
+      title={src ? "Change image" : "Add image"}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
+      }}
+    >
+      {src
+        ? (
+          <img
+            src={src}
+            alt={alt}
+            className="img-picker-img"
+            style={{ borderRadius }}
+          />
+        )
+        : (
+          <div className="img-picker-placeholder" style={{ borderRadius }}>
+            <span>+</span>
+          </div>
+        )}
+      <div className="img-picker-overlay" style={{ borderRadius }}>
+        {uploading ? "…" : "✎"}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        onChange={handleChange}
+        disabled={uploading}
+        style={{ display: "none" }}
+      />
+    </div>
+  );
+}