Add hook for hideable scrollbar

src/renderer/hooks/index.ts

@@ -3,3 +3,4 @@ export * from './use-is-mounted';
 export * from './use-should-pad-titlebar';
 export * from './use-container-query';
 export * from './use-fast-average-color';
+export * from './use-hide-scrollbar';

src/renderer/hooks/use-hide-scrollbar.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { useTimeout } from '@mantine/hooks';
+
+export const useHideScrollbar = (timeout: number) => {
+  const [hideScrollbar, setHideScrollbar] = useState(false);
+  const { start, clear } = useTimeout(() => setHideScrollbar(true), timeout);
+
+  // Automatically hide the scrollbar after the timeout duration
+  useEffect(() => {
+    start();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const hideScrollbarElementProps = {
+    onMouseEnter: () => {
+      setHideScrollbar(false);
+      clear();
+    },
+    onMouseLeave: () => {
+      start();
+    },
+  };
+
+  return { hideScrollbarElementProps, isScrollbarHidden: hideScrollbar };
+};

src/renderer/styles/global.scss

@@ -75,6 +75,10 @@ button {
   -webkit-app-region: no-drag;
 }
 
+.overlay-scrollbar {
+  overflow-y: overlay !important;
+}
+
 .hide-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;