feat: overlay scrollbars

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>

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';

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>
 	);

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>
+		</>
 	);
 }

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;
+}