From 88709c6218984932308b47660137a195df8dfc59 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Thu, 13 Jun 2024 20:05:52 +0200
Subject: [PATCH] feat: Sidebar optional mods section

---
 desktop/src/ui/components/Sidebar.tsx        | 33 +++++++++++---------
 desktop/src/ui/pages/cluster/ClusterRoot.tsx | 12 +++++--
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/desktop/src/ui/components/Sidebar.tsx b/desktop/src/ui/components/Sidebar.tsx
index bfe1ad76..20db6870 100644
--- a/desktop/src/ui/components/Sidebar.tsx
+++ b/desktop/src/ui/components/Sidebar.tsx
@@ -8,7 +8,7 @@ type SidebarProps = ParentProps & {
 	};
 	base: string;
 	links: {
-		[key: string]: [JSX.Element, string, string][];
+		[key: string]: ([JSX.Element, string, string] | undefined)[];
 	};
 };
 
@@ -44,19 +44,24 @@ function Sidebar(props: SidebarProps) {
 							<h3 class="text-fg-secondary text-xs font-medium m-1.5 mt-5">{section.toUpperCase()}</h3>
 							<div class="flex flex-col gap-y-1 fill-fg-primary text-fg-primary font-medium">
 								<For each={props.links[section]}>
-									{link => (
-										<a
-											onClick={() => goto(link[2])}
-											class={
-                                                `px-3 py-1 rounded-md text-md hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2]) ? 'bg-gray-05' : ''}`
-                                            }
-										>
-											<span class="flex flex-row items-center gap-x-3 *:w-5">
-												{link[0]}
-												{link[1]}
-											</span>
-										</a>
-									)}
+									{(link) => {
+										if (!link)
+											return;
+
+										return (
+											<a
+												onClick={() => goto(link[2])}
+												class={
+                                                    `px-3 py-1 rounded-md text-md hover:bg-component-bg-hover active:bg-component-bg-pressed ${isActive(link[2]) ? 'bg-gray-05' : ''}`
+                                                }
+											>
+												<span class="flex flex-row items-center gap-x-3 *:w-5">
+													{link[0]}
+													{link[1]}
+												</span>
+											</a>
+										);
+									}}
 								</For>
 							</div>
 						</div>
diff --git a/desktop/src/ui/pages/cluster/ClusterRoot.tsx b/desktop/src/ui/pages/cluster/ClusterRoot.tsx
index fb10608e..39ba267c 100644
--- a/desktop/src/ui/pages/cluster/ClusterRoot.tsx
+++ b/desktop/src/ui/pages/cluster/ClusterRoot.tsx
@@ -8,6 +8,7 @@ import ClusterOverview from './cluster/ClusterOverview';
 import ClusterLogs from './cluster/ClusterLogs';
 import ClusterMods from './cluster/ClusterMods';
 import ClusterScreenshots from './cluster/ClusterScreenshots';
+import useCluster from '~ui/hooks/useCluster';
 
 function ClusterRoutes() {
 	return (
@@ -22,18 +23,25 @@ function ClusterRoutes() {
 
 function ClusterRoot(props: ParentProps) {
 	const [searchParams] = useSearchParams();
+	const cluster = useCluster(searchParams.id);
+
+	if (!cluster) {
+		location.href = '/';
+		return;
+	}
 
 	return (
 		<div class="flex flex-row flex-1 h-full gap-x-7">
 			<div class="mt-8">
 				<Sidebar
 					base="/clusters"
-					state={{ id: searchParams.id }}
+					state={{ id: cluster()!.uuid }}
 					links={{
 						Cluster: [
 							[<EyeIcon />, 'Overview', '/'],
 							// [<User01Icon />, 'Accounts', '/users'],
-							[<PackagePlusIcon />, 'Mods', '/mods'],
+							// TODO: Better way of checking mods
+							(cluster()?.meta.loader !== 'vanilla' ? [<PackagePlusIcon />, 'Mods', '/mods'] : undefined),
 							[<Image03Icon />, 'Screenshots', '/screenshots'],
 							[<Globe04Icon />, 'Worlds', '/worlds'],
 							[<File06Icon />, 'Logs', '/logs'],