v3: follows, notifications, invite-only registration, unread markers

src/components/GlobalPlayer.tsx

@@ -20,7 +20,10 @@ export function GlobalPlayer() {
     document.body.classList.add("has-player");
 
     const observer = new ResizeObserver(() => {
-      document.body.style.setProperty("--player-height", `${el.offsetHeight}px`);
+      document.body.style.setProperty(
+        "--player-height",
+        `${el.offsetHeight}px`,
+      );
     });
     observer.observe(el);
     return () => {
@@ -37,13 +40,24 @@ export function GlobalPlayer() {
   if (!current) return null;
 
   return (
-    <div className={`global-player global-player--${current.type}${reduced ? " global-player--reduced" : ""}`} ref={ref}>
+    <div
+      className={`global-player global-player--${current.type}${
+        reduced ? " global-player--reduced" : ""
+      }`}
+      ref={ref}
+    >
       <div className="global-player-header">
-        <span className="global-player-title">{current.title ?? current.embedUrl}</span>
-        <button className="btn btn--ghost" onClick={() => setReduced((r) => !r)}>
+        <span className="global-player-title">
+          {current.title ?? current.embedUrl}
+        </span>
+        <button
+          type="button"
+          className="btn btn--ghost"
+          onClick={() => setReduced((r) => !r)}
+        >
           {reduced ? "▲" : "▼"}
         </button>
-        <button className="btn btn--ghost" onClick={stop}>
+        <button type="button" className="btn btn--ghost" onClick={stop}>
           ✕
         </button>
       </div>