screenshots

desktop/src/index.tsx

@@ -12,6 +12,7 @@ import ClusterOverview from './ui/pages/cluster/ClusterOverview';
 import ClusterMods from './ui/pages/cluster/ClusterMods';
 import ClusterRoot from '~ui/pages/cluster/ClusterRoot';
 import ClusterLogs from '~ui/pages/cluster/ClusterLogs';
+import ClusterScreenshots from '~ui/pages/cluster/ClusterScreenshots';
 
 render(() => (
 	<Router root={App}>
@@ -22,6 +23,7 @@ render(() => (
 			<Route path="/" component={ClusterOverview} />
 			<Route path="/logs" component={ClusterLogs} />
 			<Route path="/mods" component={ClusterMods} />
+            <Route path="/screenshots" component={ClusterScreenshots} />
 		</Route>
 	</Router>
 ), document.getElementById('root') as HTMLElement);

desktop/src/ui/pages/cluster/ClusterMods.tsx

@@ -1,7 +1,7 @@
 import { open } from '@tauri-apps/plugin-shell';
 import { ArrowRightIcon, Edit02Icon, LinkExternal01Icon, Trash03Icon } from '@untitled-theme/icons-solid';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid';
-import { For, Show } from 'solid-js';
+import { For } from 'solid-js';
 import * as uuid from 'uuid';
 import Button from '~ui/components/base/Button';
 

desktop/src/ui/pages/cluster/ClusterRoot.tsx

@@ -1,6 +1,6 @@
 import { useSearchParams } from '@solidjs/router';
 import type { ParentProps } from 'solid-js';
-import { EyeIcon, File06Icon, Globe04Icon, Image03Icon, PackagePlusIcon, Settings04Icon, Tool02Icon, User01Icon } from '@untitled-theme/icons-solid';
+import { EyeIcon, File06Icon, Globe04Icon, Image03Icon, PackagePlusIcon, Settings04Icon, Tool02Icon } from '@untitled-theme/icons-solid';
 import Sidebar from '../../components/Sidebar';
 import AnimatedRoutes from '../../components/AnimatedRoutes';
 import ErrorBoundary from '../../components/ErrorBoundary';

desktop/src/ui/pages/cluster/ClusterScreenshots.tsx

@@ -0,0 +1,45 @@
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-solid';
+import { For } from 'solid-js';
+
+const list = Array<Screenshot>(19).fill({
+	date_taken: Math.floor(Date.now() / 1000),
+	path: 'https://www.researchgate.net/publication/301648368/figure/fig2/AS:667842240315400@1536237406360/A-screenshot-from-Minecraft-a-popular-video-game-which-poses-a-challenging-lifelong.ppm',
+});
+
+// TODO: Make sure the screenshots in the list are downscaled, grid / container can get laggy on low end devices
+interface Screenshot {
+	path: string;
+	date_taken: number;
+};
+
+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>
+			</div>
+		</div>
+	);
+}
+
+export default ClusterScreenshots;
+
+function ScreenshotEntry(props: Screenshot) {
+	return (
+		<div class="bg-component-bg hover:bg-component-bg-hover hover:opacity-80 active:bg-component-bg-pressed p-3 gap-3 rounded-xl flex flex-col items-center">
+			{/* <div> */}
+			<img src={props.path} alt={props.path} class="aspect-ratio-video w-full rounded-lg" />
+			{/* </div> */}
+		</div>
+	);
+}

package.json

@@ -2,7 +2,7 @@
 	"name": "@onelauncher/root",
 	"type": "module",
 	"version": "1.0.0",
-	"packageManager": "pnpm@9.1.0",
+	"packageManager": "pnpm@9.1.1",
 	"description": "Next-generation open source Minecraft launcher and tools for interacting with Polyfrost",
 	"license": "GPL-3.0-only",
 	"repository": {