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

src/components/AppHeader.tsx

@@ -2,12 +2,14 @@ import { type ReactNode, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Link, useNavigate } from "react-router";
 import { useAuth } from "../hooks/useAuth.ts";
+import { DumpCreateModal } from "./DumpCreateModal.tsx";
 
 export function AppHeader({ centerSlot }: { centerSlot?: ReactNode }) {
   const { user } = useAuth();
   const navigate = useNavigate();
   const headerRef = useRef<HTMLElement>(null);
   const [showFab, setShowFab] = useState(false);
+  const [createModalOpen, setCreateModalOpen] = useState(false);
 
   useEffect(() => {
     const el = headerRef.current;
@@ -46,7 +48,7 @@ export function AppHeader({ centerSlot }: { centerSlot?: ReactNode }) {
                 <button
                   type="button"
                   className="btn-primary"
-                  onClick={() => navigate("/dumps/new")}
+                  onClick={() => setCreateModalOpen(true)}
                 >
                   + New
                 </button>
@@ -69,16 +71,20 @@ export function AppHeader({ centerSlot }: { centerSlot?: ReactNode }) {
         </nav>
       </header>
 
-      {user && createPortal(
+      {/* {user && createPortal(
         <button
           type="button"
           className={`fab-new${showFab ? " fab-new--visible" : ""}`}
-          onClick={() => navigate("/dumps/new")}
+          onClick={() => setCreateModalOpen(true)}
           aria-label="New dump"
         >
           + New
         </button>,
         document.body,
+      )} */}
+
+      {createModalOpen && (
+        <DumpCreateModal onClose={() => setCreateModalOpen(false)} />
       )}
     </>
   );