98 lines
3.4 KiB
TypeScript
98 lines
3.4 KiB
TypeScript
import { lazy, Suspense, useEffect, useState } from "react";
|
|
import { useLocation } from "react-router";
|
|
import { t } from "@lingui/core/macro";
|
|
import { useAuth } from "../../hooks/auth/useAuth.ts";
|
|
|
|
const DumpCreateModal = lazy(() =>
|
|
import("../dump/create/DumpCreateModal.tsx").then((m) => ({
|
|
default: m.DumpCreateModal,
|
|
}))
|
|
);
|
|
|
|
/**
|
|
* Floating "new dump" button shown once the header has scrolled out of view.
|
|
* Sits in the bottom-right corner and lifts above the global player (which is
|
|
* full-width on mobile) so the two never overlap. Only rendered for signed-in
|
|
* users — dump creation requires an account.
|
|
*
|
|
* Mounted once at the app root (not per-page) since some pages render their own
|
|
* header instead of going through PageShell. Visibility is derived from a live
|
|
* read of the current page's `.app-header`, so it survives client-side
|
|
* navigation and lazily-mounted route headers.
|
|
*/
|
|
export function DumpFab() {
|
|
const { user } = useAuth();
|
|
const location = useLocation();
|
|
const [headerHidden, setHeaderHidden] = useState(false);
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
|
|
// Reserve clearance at the end of the scroll so the floating button never
|
|
// hides the last content when scrolled all the way down.
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
document.body.classList.add("has-fab");
|
|
return () => document.body.classList.remove("has-fab");
|
|
}, [user]);
|
|
|
|
// Reveal the button once the header's bottom edge scrolls above the viewport.
|
|
// Re-reading the header on every tick keeps this correct across navigation
|
|
// and lazily-mounted pages, where the header element is replaced.
|
|
useEffect(() => {
|
|
if (!user) return;
|
|
const update = () => {
|
|
const header = document.querySelector(".app-header");
|
|
setHeaderHidden(!!header && header.getBoundingClientRect().bottom <= 0);
|
|
};
|
|
update();
|
|
globalThis.addEventListener("scroll", update, { passive: true });
|
|
globalThis.addEventListener("resize", update);
|
|
// Body height changes when a lazy route finishes mounting — re-check then,
|
|
// since no scroll/resize event fires in that case.
|
|
const ro = new ResizeObserver(update);
|
|
ro.observe(document.body);
|
|
return () => {
|
|
globalThis.removeEventListener("scroll", update);
|
|
globalThis.removeEventListener("resize", update);
|
|
ro.disconnect();
|
|
};
|
|
}, [user, location.pathname]);
|
|
|
|
if (!user) return null;
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
className={`dump-fab${headerHidden ? " dump-fab--visible" : ""}`}
|
|
aria-label={t`New dump`}
|
|
title={t`New dump`}
|
|
aria-hidden={!headerHidden}
|
|
tabIndex={headerHidden ? 0 : -1}
|
|
onClick={() => setModalOpen(true)}
|
|
>
|
|
{
|
|
/* Symmetric SVG plus — centers exactly via flex, regardless of the
|
|
theme's font metrics (a text "+" sits slightly off the box center). */
|
|
}
|
|
<svg
|
|
className="dump-fab-icon"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2.5}
|
|
strokeLinecap="round"
|
|
aria-hidden="true"
|
|
>
|
|
<line x1="12" y1="5" x2="12" y2="19" />
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
</svg>
|
|
</button>
|
|
{modalOpen && (
|
|
<Suspense>
|
|
<DumpCreateModal onClose={() => setModalOpen(false)} />
|
|
</Suspense>
|
|
)}
|
|
</>
|
|
);
|
|
}
|