From 9e860c77f8535041bf16ac84066a88bb008eed49 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Mon, 26 May 2025 16:58:25 +0200
Subject: [PATCH] feat: overlay scrollbars

---
 apps/onelauncher/frontend/index.html          |  2 +-
 apps/onelauncher/frontend/src/main.tsx        |  1 +
 .../frontend/src/routes/__root.tsx            |  4 +-
 .../frontend/src/routes/app/route.tsx         | 42 +++++++++----------
 .../frontend/src/styles/global.css            | 22 ++++++++++
 5 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/apps/onelauncher/frontend/index.html b/apps/onelauncher/frontend/index.html
index d7a70b74..a91f8b3a 100644
--- a/apps/onelauncher/frontend/index.html
+++ b/apps/onelauncher/frontend/index.html
@@ -11,7 +11,7 @@
 		/>
 		<link rel="apple-touch-icon" href="/logo192.png" />
 		<link rel="manifest" href="/manifest.json" />
-		<title>OneClient</title>
+		<title>OneLauncher</title>
 	</head>
 	<body>
 		<div id="app"></div>
diff --git a/apps/onelauncher/frontend/src/main.tsx b/apps/onelauncher/frontend/src/main.tsx
index d9fbfc59..6684973d 100644
--- a/apps/onelauncher/frontend/src/main.tsx
+++ b/apps/onelauncher/frontend/src/main.tsx
@@ -8,6 +8,7 @@ import { routeTree } from './routeTree.gen';
 import './fonts';
 import './utils/nativeExperience';
 import './utils/devExperience';
+import 'overlayscrollbars/overlayscrollbars.css';
 import './styles/global.css';
 
 export * as bindings from './bindings.gen';
diff --git a/apps/onelauncher/frontend/src/routes/__root.tsx b/apps/onelauncher/frontend/src/routes/__root.tsx
index 28af9009..47d6806a 100644
--- a/apps/onelauncher/frontend/src/routes/__root.tsx
+++ b/apps/onelauncher/frontend/src/routes/__root.tsx
@@ -29,13 +29,13 @@ function RootRoute() {
 				navigate={(to, options) => router.navigate({ to, ...options })}
 				useHref={to => router.buildLocation({ to }).href}
 			>
-				<main className='max-h-screen min-h-screen flex flex-col'>
+				<div className="h-screen flex flex-col overflow-hidden px-0.5">
 					<WindowFrame />
 
 					<Outlet />
 
 					<TanStackRouterDevtools />
-				</main>
+				</div>
 			</RouterProvider>
 		</AnimatedOutletProvider>
 	);
diff --git a/apps/onelauncher/frontend/src/routes/app/route.tsx b/apps/onelauncher/frontend/src/routes/app/route.tsx
index 40775b9b..e7e8becd 100644
--- a/apps/onelauncher/frontend/src/routes/app/route.tsx
+++ b/apps/onelauncher/frontend/src/routes/app/route.tsx
@@ -9,33 +9,33 @@ export const Route = createFileRoute('/app')({
 
 function RouteComponent() {
 	return (
-		<div className="h-full flex flex-col">
+		<>
 			<div className="flex flex-col px-4">
 				<Navbar />
 			</div>
 
-			<div className="h-full w-full overflow-hidden">
-				<div className="relative h-full w-full flex flex-col overflow-x-hidden pb-8">
-					<OverlayScrollbarsComponent className="h-full w-full flex flex-col overflow-x-hidden overflow-y-auto">
-						<div className="h-full flex-1 px-4">
+			<div className="flex-1 overflow-hidden">
+				<OverlayScrollbarsComponent
+					className="h-full w-full overflow-auto overflow-x-hidden"
+				>
+					<div className="pb-4 px-4">
 
-							<AnimatedOutlet
-								enter={{
-									initial: { opacity: 0, transform: 'translateX(-20%)' },
-									animate: { opacity: 1, transform: 'translateX(0)' },
-								}}
-								exit={{
-									initial: { opacity: 1, transform: 'translateX(0)' },
-									animate: { opacity: 0, transform: 'translateX(-20%)' },
-								}}
-								from={Route.id}
-								transition={{ duration: 0.3, bounce: 0.1, power: 0.2, type: 'spring' }}
-							/>
+						<AnimatedOutlet
+							enter={{
+								initial: { opacity: 0, transform: 'translateX(-20%)' },
+								animate: { opacity: 1, transform: 'translateX(0)' },
+							}}
+							exit={{
+								initial: { opacity: 1, transform: 'translateX(0)' },
+								animate: { opacity: 0, transform: 'translateX(-20%)' },
+							}}
+							from={Route.id}
+							transition={{ duration: 0.3, bounce: 0.1, power: 0.2, type: 'spring' }}
+						/>
 
-						</div>
-					</OverlayScrollbarsComponent>
-				</div>
+					</div>
+				</OverlayScrollbarsComponent>
 			</div>
-		</div>
+		</>
 	);
 }
diff --git a/apps/onelauncher/frontend/src/styles/global.css b/apps/onelauncher/frontend/src/styles/global.css
index edf42600..c6e975e6 100644
--- a/apps/onelauncher/frontend/src/styles/global.css
+++ b/apps/onelauncher/frontend/src/styles/global.css
@@ -60,6 +60,10 @@
 	--color-ghost-overlay: rgba(255, 255, 255, 0.05);
 	--color-ghost-overlay-hover: rgba(255, 255, 255, 0.10);
 
+	--color-scrollbar-bg: rgba(255, 255, 255, 0.05);
+	--color-scrollbar-bg-hover: rgba(255, 255, 255, 0.10);
+	--color-scrollbar-bg-pressed: rgba(255, 255, 255, 0.15);
+
 	/* other */
 	--font-sans: "Poppins", sans-serif;
 	--text-xs: 0.688rem;
@@ -83,3 +87,21 @@ body {
 	@apply bg-page text-fg-primary text-base;
 }
 
+.os-scrollbar {
+	--os-size: 10px;
+	--os-track-border-radius: var(--border-radius-lg);
+	--os-handle-bg: var(--color-scrollbar-bg);
+	--os-handle-bg-hover: var(--color-scrollbar-bg-hover);
+	--os-handle-bg-active: var(--color-scrollbar-bg-pressed);
+	--os-handle-perpendicular-size-hover: 140%;
+	--os-handle-perpendicular-size-active: 140%;
+	--os-handle-interactive-area-offset: 4px;
+}
+
+.os-scrollbar-offset-right {
+	--os-padding-axis: 10;
+}
+
+.os-hide-horizontal-scrollbar > .os-scrollbar-horizontal {
+	display: none;
+}