feat(ui): floating back-to-top button on long scrollable pages

A reusable BackToTop fades in once the active page's <main> is scrolled past ~600px and
smooth-scrolls it back to the top. Rendered once at the App root, portaled to <body> for
viewport-fixed placement (bottom-right, below the chat dock), and re-binds to the live <main> on
navigation (page or channel change) so it works on every scrollable page incl. the channel page.
EN/HU/DE.
This commit is contained in:
2026-06-30 05:02:42 +02:00
parent 607bef1400
commit 06dda5338f
5 changed files with 53 additions and 3 deletions
+3
View File
@@ -29,6 +29,7 @@ import NavSidebar from "./components/NavSidebar";
import Sidebar from "./components/Sidebar";
import Feed from "./components/Feed";
import ChannelPage from "./components/ChannelPage";
import BackToTop from "./components/BackToTop";
import Channels, { type ChannelStatusFilter, type ChannelsView } from "./components/Channels";
import Playlists from "./components/Playlists";
import Stats from "./components/Stats";
@@ -667,6 +668,8 @@ export default function App() {
<ReleaseNotes onClose={() => setNotesOpen(false)} highlight={notesHighlight} />
)}
<ErrorDialog />
{/* Re-binds to the active page's scroll container on navigation (page or channel change). */}
<BackToTop dep={channelView ? `chan:${channelView.id}` : page} />
</div>
);
}