From 397b853475fc35f8063e81b9a210687a9d6b0a61 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Fri, 17 May 2024 09:25:32 +0200
Subject: [PATCH] refactor: Cluster + Settings pages to use ScrollableContainer
 component

---
 desktop/src/ui/components/overlay/Modal.tsx   |  2 +-
 desktop/src/ui/pages/cluster/ClusterMods.tsx  | 23 +++++++-----------
 .../src/ui/pages/cluster/ClusterOverview.tsx  |  7 +++---
 .../ui/pages/cluster/ClusterScreenshots.tsx   | 24 +++++++------------
 4 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/desktop/src/ui/components/overlay/Modal.tsx b/desktop/src/ui/components/overlay/Modal.tsx
index 2178fab7..ebf1744f 100644
--- a/desktop/src/ui/components/overlay/Modal.tsx
+++ b/desktop/src/ui/components/overlay/Modal.tsx
@@ -62,7 +62,7 @@ function Modal(props: ModalProps) {
 					<div class="absolute w-full h-full" onClick={() => onBackdropClick()} />
 
 					<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-						<div class="bg-primary border border-white/5 p-4 rounded-lg text-center flex flex-col gap-y-1">
+						<div class="bg-primary border border-white/5 p-4 rounded-lg text-center flex flex-col gap-y-2">
 							<h2>{props.title}</h2>
 							<div class="flex flex-col">
 								{props.children}
diff --git a/desktop/src/ui/pages/cluster/ClusterMods.tsx b/desktop/src/ui/pages/cluster/ClusterMods.tsx
index b1360701..5e65e5bb 100644
--- a/desktop/src/ui/pages/cluster/ClusterMods.tsx
+++ b/desktop/src/ui/pages/cluster/ClusterMods.tsx
@@ -1,9 +1,9 @@
 import { open } from '@tauri-apps/plugin-shell';
 import { ArrowRightIcon, Edit02Icon, LinkExternal01Icon, Trash03Icon } from '@untitled-theme/icons-solid';
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid';
 import { For } from 'solid-js';
 import * as uuid from 'uuid';
 import Button from '~ui/components/base/Button';
+import ScrollableContainer from '~ui/components/ScrollableContainer';
 
 const mods = Array<ModEntryProps>(15).fill({
 	id: uuid.v4(),
@@ -17,20 +17,13 @@ const mods = Array<ModEntryProps>(15).fill({
 
 function ClusterMods() {
 	return (
-		<div class="flex flex-col flex-1">
-			<h1>Mods</h1>
-			<div class="flex flex-col flex-1 rounded-lg overflow-hidden w-[calc(100%+14px)]">
-				<OverlayScrollbarsComponent class="os-hide-horizontal-scrollbar relative flex-1">
-					<div class="flex flex-col absolute w-[calc(100%-14px)] gap-2">
-						<For each={mods}>
-							{mod => (
-								<ModEntry {...mod} />
-							)}
-						</For>
-					</div>
-				</OverlayScrollbarsComponent>
-			</div>
-		</div>
+		<ScrollableContainer title="Mods">
+			<For each={mods}>
+				{mod => (
+					<ModEntry {...mod} />
+				)}
+			</For>
+		</ScrollableContainer>
 	);
 }
 
diff --git a/desktop/src/ui/pages/cluster/ClusterOverview.tsx b/desktop/src/ui/pages/cluster/ClusterOverview.tsx
index 6559755a..d6e56887 100644
--- a/desktop/src/ui/pages/cluster/ClusterOverview.tsx
+++ b/desktop/src/ui/pages/cluster/ClusterOverview.tsx
@@ -6,6 +6,7 @@ import ClusterCover from '../../components/game/ClusterCover';
 import LoaderIcon from '../../components/game/LoaderIcon';
 import Button from '../../components/base/Button';
 import { launchCluster } from '../../../bridge/game';
+import ScrollableContainer from '~ui/components/ScrollableContainer';
 
 function ClusterOverview() {
 	const [params] = useSearchParams();
@@ -14,13 +15,11 @@ function ClusterOverview() {
 		throw new Error('Cluster doesn\'t exist');
 
 	return (
-		<div class="flex flex-col flex-1">
-			<h1>Overview</h1>
-
+		<ScrollableContainer title="Overview">
 			<Show when={!cluster.loading}>
 				<Banner {...cluster()!} />
 			</Show>
-		</div>
+		</ScrollableContainer>
 	);
 }
 
diff --git a/desktop/src/ui/pages/cluster/ClusterScreenshots.tsx b/desktop/src/ui/pages/cluster/ClusterScreenshots.tsx
index d0d833b2..dee2e9b8 100644
--- a/desktop/src/ui/pages/cluster/ClusterScreenshots.tsx
+++ b/desktop/src/ui/pages/cluster/ClusterScreenshots.tsx
@@ -1,5 +1,5 @@
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid';
 import { For } from 'solid-js';
+import ScrollableContainer from '~ui/components/ScrollableContainer';
 
 const list = Array<Screenshot>(19).fill({
 	date_taken: Math.floor(Date.now() / 1000),
@@ -14,21 +14,15 @@ interface Screenshot {
 
 function ClusterScreenshots() {
 	return (
-		<div class="flex flex-col flex-1">
-			<h1>Screenshots</h1>
-
-			<div class="flex flex-col flex-1 rounded-lg overflow-hidden w-[calc(100%+14px)]">
-				<OverlayScrollbarsComponent class="os-hide-horizontal-scrollbar relative flex-1">
-					<div class="grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] absolute w-[calc(100%-14px)] gap-2">
-						<For each={list}>
-							{screenshot => (
-								<ScreenshotEntry {...screenshot} />
-							)}
-						</For>
-					</div>
-				</OverlayScrollbarsComponent>
+		<ScrollableContainer title="Screenshots">
+			<div class="grid grid-cols-[repeat(auto-fill,minmax(350px,1fr))] w-full gap-2">
+				<For each={list}>
+					{screenshot => (
+						<ScreenshotEntry {...screenshot} />
+					)}
+				</For>
 			</div>
-		</div>
+		</ScrollableContainer>
 	);
 }