dependencies: migrate overlayscrollbars to 2

client/src/javascript/components/general/ListViewport.tsx

@@ -6,11 +6,12 @@ import {useWindowSize} from 'react-use';
 
 import ConfigStore from '@client/stores/ConfigStore';
 
+import type {OverlayScrollbarsComponentRef} from 'overlayscrollbars-react';
 import type {FixedSizeListProps, ListChildComponentProps} from 'react-window';
 
 const Overflow = forwardRef<HTMLDivElement, ComponentProps<'div'>>((props: ComponentProps<'div'>, ref) => {
-  const {children, className, onScroll} = props;
-  const osRef = useRef<OverlayScrollbarsComponent>(null);
+  const {children, onScroll} = props;
+  const osRef = useRef<OverlayScrollbarsComponentRef>(null);
 
   useEffect(() => {
     const scrollbarRef = osRef.current;
@@ -21,7 +22,7 @@ const Overflow = forwardRef<HTMLDivElement, ComponentProps<'div'>>((props: Compo
       };
     }
 
-    const viewport = scrollbarRef.osInstance()?.getElements().viewport as HTMLDivElement;
+    const viewport = scrollbarRef.osInstance()?.elements().viewport as HTMLDivElement;
 
     const refCallback = ref as RefCallback<HTMLDivElement>;
     refCallback(viewport);
@@ -43,8 +44,11 @@ const Overflow = forwardRef<HTMLDivElement, ComponentProps<'div'>>((props: Compo
     <OverlayScrollbarsComponent
       {...props}
       options={{
-        scrollbars: {autoHide: 'leave', clickScrolling: true},
-        className,
+        scrollbars: {
+          autoHide: 'leave',
+          clickScroll: true,
+          theme: `os-theme-${ConfigStore.isPreferDark ? 'light' : 'dark'}`,
+        },
       }}
       ref={osRef}
     >
@@ -64,7 +68,7 @@ const ListViewport = forwardRef<FixedSizeList, ListViewportProps>((props: ListVi
 
   return (
     <FixedSizeList
-      className={`${className} ${ConfigStore.isPreferDark ? 'os-theme-light' : 'os-theme-dark'}`}
+      className={className}
       height={Math.max(itemSize * 30, windowHeight)}
       itemCount={itemCount}
       itemKey={itemKey}

client/src/javascript/components/sidebar/Sidebar.tsx

@@ -17,32 +17,39 @@ import TransferData from './TransferData';
 
 const Sidebar: FC = () => (
   <OverlayScrollbarsComponent
+    className="application__sidebar"
     options={{
       scrollbars: {
         autoHide: 'scroll',
-        clickScrolling: false,
-        dragScrolling: false,
+        clickScroll: false,
+        dragScroll: false,
+        theme: `os-theme-thin`,
+      },
+      overflow: {
+        x: 'hidden',
+        y: 'scroll',
       },
-      className: 'application__sidebar os-theme-thin',
     }}
   >
-    <SidebarActions>
-      <SpeedLimitDropdown />
-      <SettingsButton />
-      <FeedsButton />
-      <NotificationsButton />
-      <LogoutButton />
-    </SidebarActions>
-    <TransferData />
-    <SearchBox />
-    <StatusFilters />
-    <TagFilters />
-    <TrackerFilters />
-    <DiskUsage />
-    <div style={{flexGrow: 1}} />
-    <SidebarActions>
-      <ThemeSwitchButton />
-    </SidebarActions>
+    <div style={{display: 'flex', flexDirection: 'column'}}>
+      <SidebarActions>
+        <SpeedLimitDropdown />
+        <SettingsButton />
+        <FeedsButton />
+        <NotificationsButton />
+        <LogoutButton />
+      </SidebarActions>
+      <TransferData />
+      <SearchBox />
+      <StatusFilters />
+      <TagFilters />
+      <TrackerFilters />
+      <DiskUsage />
+      <div style={{flexGrow: 1}} />
+      <SidebarActions>
+        <ThemeSwitchButton />
+      </SidebarActions>
+    </div>
   </OverlayScrollbarsComponent>
 );
 

client/src/javascript/routes/Overview.tsx

@@ -8,7 +8,7 @@ import FloodActions from '@client/actions/FloodActions';
 import Sidebar from '@client/components/sidebar/Sidebar';
 import TorrentList from '@client/components/torrent-list/TorrentList';
 
-import 'overlayscrollbars/css/OverlayScrollbars.css';
+import 'overlayscrollbars/overlayscrollbars.css';
 
 const Alerts = lazy(() => import('@client/components/alerts/Alerts'));
 const Modals = lazy(() => import('@client/components/modals/Modals'));

client/src/sass/base/_layout.scss

@@ -36,7 +36,7 @@ body {
 
       @media (max-width: 720px) {
         .application__sidebar {
-          display: block;
+          display: flex;
           transform: translateX(120px);
           z-index: unset;
         }

client/src/sass/components/_sidebar.scss

@@ -4,6 +4,91 @@
 @use '../tools/themes';
 @use '../tools/variables';
 
+.os-theme-thin {
+  &.os-scrollbar {
+    .os-scrollbar-track {
+      background: transparent;
+    }
+
+    .os-scrollbar-track:before {
+      content: '';
+      display: block;
+      position: absolute;
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    .os-scrollbar-handle:before {
+      content: '';
+      display: block;
+      position: absolute;
+      background: rgba(255, 255, 255, 0.5);
+      border-radius: 10px;
+    }
+
+    .os-scrollbar-handle:hover:before,
+    .os-scrollbar-handle.active:before {
+      background: #fff;
+    }
+  }
+
+  &.os-scrollbar-horizontal {
+    right: 14px;
+    height: 14px;
+    padding: 0px 6px;
+
+    &.os-scrollbar-rtl {
+      left: 14px;
+      right: 0;
+    }
+
+    .os-scrollbar-track:before,
+    .os-scrollbar-handle:before {
+      left: 0;
+      right: 0;
+      height: 2px;
+      top: 50%;
+      margin-top: -1px;
+    }
+
+    .os-scrollbar-handle:hover:before,
+    .os-scrollbar-handle.active:before {
+      height: 4px;
+      margin-top: -2px;
+    }
+
+    .os-scrollbar-handle {
+      height: 100%;
+      min-width: 30px;
+    }
+  }
+
+  &.os-scrollbar-vertical {
+    bottom: 14px;
+    width: 14px;
+    padding: 6px 0px;
+
+    .os-scrollbar-track:before,
+    .os-scrollbar-handle:before {
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      left: 50%;
+      margin-left: -1px;
+    }
+
+    .os-scrollbar-handle:hover:before,
+    .os-scrollbar-handle.active:before {
+      width: 4px;
+      margin-left: -2px;
+    }
+
+    .os-scrollbar-handle {
+      width: 100%;
+      min-height: 30px;
+    }
+  }
+}
+
 .application {
   &__sidebar {
     @include themes.theme('background', 'sidebar--background');
@@ -13,17 +98,10 @@
     min-width: 240px;
     max-width: 250px;
     height: 100%;
-    overflow-x: hidden;
-    overflow-y: overlay;
     position: relative;
     z-index: 2;
     transition: transform 0.2s;
 
-    .os-content {
-      display: flex;
-      flex-direction: column;
-    }
-
     @media (max-width: 720px) {
       transform: translateX(-120px);
     }