Add affix to homePage

Author: Gabi1M

src/meridian/generic/affix.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ArrowUp } from 'tabler-icons-react';
+import { ActionIcon, Affix, Transition } from '@mantine/core';
+import { useWindowScroll } from '@mantine/hooks';
+
+const AppAffix = () => {
+    const [scroll, scrollTo] = useWindowScroll();
+    return (
+        <Affix position={{ bottom: 20, right: 20 }}>
+            <Transition transition='slide-up' mounted={scroll.y > 0}>
+                {transitionStyles => (
+                    <ActionIcon
+                        style={transitionStyles}
+                        onClick={() => scrollTo({ y: 0 })}
+                        variant='filled'
+                        color='blue'
+                        size='xl'
+                        radius='xl'
+                    >
+                        <ArrowUp />
+                    </ActionIcon>
+                )}
+            </Transition>
+        </Affix>
+    );
+};
+
+export default AppAffix;

src/meridian/generic/index.ts

@@ -8,4 +8,5 @@ export {
     SegmentedColorSchemeToggle,
 } from './colorSchemeToggle';
 export { default as useWindowSize } from './useWindowSize';
+export { default as Affix } from './affix';
 export type { ContextMenuItem } from './contextMenu';

src/meridian/home/homePage.tsx

@@ -13,7 +13,12 @@ import { ActionIcon, Box, createStyles, Pagination } from '@mantine/core';
 import { t } from '@lingui/macro';
 import { TorrentCard, useAddTorrentsModal } from 'meridian/torrent';
 import { TorrentInfo } from 'meridian/models';
-import { ContextMenu, ContextMenuItem, DrawerPage } from 'meridian/generic';
+import {
+    Affix,
+    ContextMenu,
+    ContextMenuItem,
+    DrawerPage,
+} from 'meridian/generic';
 import { selectSettings, useSettingsModal } from 'meridian/settings';
 import { usePreferencesModal } from 'meridian/preferences';
 import { useCategoriesModal } from 'meridian/categories';
@@ -114,6 +119,7 @@ const HomePage = () => {
                     total={numberOfPages}
                 />
             ) : null}
+            <Affix />
         </DrawerPage>
     );
 };