peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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:
npeter83 2026-06-30 05:02:42 +02:00
parent f25d0768a1
commit 6b47b0d357
5 changed files with 53 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/App.tsx
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>
);
}