grah

src/lib/css/fluent.css

@@ -17,6 +17,17 @@
 	user-select: none;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-family: "Segoe UI Variable", sans-serif !important;
+	font-size: 24px !important;
+	font-weight: 600;
+}
+
 .fluent-press {
 	transition: 0.2s transform var(--fluent-ease-out);
 }
@@ -43,9 +54,9 @@
 }
 
 button {
-	border: var(--fluent-stroke);
-	border-radius: 4px;
-	background-color: rgba(255, 255, 255, 0.15);
+	border: var(--fluent-stroke) !important;
+	border-radius: 4px !important;
+	background-color: rgba(255, 255, 255, 0.15) !important;
 	height: 32px;
 	padding: 0 12px;
 	font-size: 10pt !important;

src/routes/+layout.svelte

@@ -10,6 +10,7 @@
 
 	const excludedRoutesNav = ["/mockup/boot", "/mockup/w11"];
 	const excludedRoutesBg = ["/mockup", "/mockup/w11"];
+	console.log($page.url);
 	$: isNavExcluded = excludedRoutesNav.some((route) => $page.url?.pathname.startsWith(route));
 	$: isBgExcluded = excludedRoutesBg.some((route) => $page.url?.pathname === route);
 </script>
@@ -21,12 +22,12 @@
 		</div>
 		<div class="right">
 			<a href="https://gitlab.com/suyu-emu/suyu/-/releases" target="_blank">
-				<Button class='!p-2' pill={true}>
+				<Button class="!p-2" pill={true}>
 					<DownloadOutline />
 				</Button>
 			</a>
 			<a href="https://discord.gg/suyu" target="_blank">
-				<Button class='!p-2' pill={true}>
+				<Button class="!p-2" pill={true}>
 					<DiscordSolid />
 				</Button>
 			</a>

src/routes/mockup/boot/[game]/+page.svelte

@@ -85,7 +85,6 @@
 
 	.logo {
 		animation: spin 2s reverse infinite cubic-bezier(0.8, 0, 0.2, 1);
-		transform-origin: 50.1% 47.45%;
 	}
 
 	.body {

src/routes/mockup/w11/+page.svelte

@@ -121,6 +121,13 @@
 				</div>
 			</div>
 		</div>
+		<div class="disclaimer">
+			<h1>Disclaimer</h1>
+			<p>
+				This is a <b>concept</b> for suyu's launcher, made by nullptr. It is not<br />a true
+				desktop application, it is non-functional and running in<br />a browser.
+			</p>
+		</div>
 	</div>
 </div>
 
@@ -195,8 +202,13 @@
 		width: 1012px;
 		height: 600px;
 		position: absolute;
-		opacity: 0;
-		animation: window-appear forwards 0.3s 1s var(--fluent-ease-out);
+	}
+
+	.disclaimer {
+		text-align: right;
+		position: absolute;
+		bottom: 16px;
+		right: 24px;
 	}
 
 	.titlebar-buttons {

src/routes/mockup/w11/components/Card.svelte

@@ -70,7 +70,7 @@
 
 	.card-container {
 		width: 128px;
-		height: 204px;
+		height: 212px;
 		border-radius: 10px;
 		border: var(--fluent-stroke);
 		position: relative;

src/routes/mockup/w11/components/Sidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, type SvelteComponent } from "svelte";
+	import { createEventDispatcher, onMount, type SvelteComponent } from "svelte";
 
 	interface SidebarItem {
 		icon: typeof SvelteComponent<{}>;
@@ -8,34 +8,104 @@
 	}
 
 	let itemIndex = 0;
+	let pill: HTMLDivElement;
+	let sidebar: HTMLDivElement;
 
 	export let itemsTop: SidebarItem[];
-
 	export let itemsBottom: SidebarItem[];
 
-	const dispatcher = createEventDispatcher<{
+	const dispatch = createEventDispatcher<{
 		changepage: { page: typeof SvelteComponent<{}> };
 	}>();
 
-	async function itemClick(item: SidebarItem) {
-		if (item.onclick) return item.onclick();
+	function getIndex(item: SidebarItem) {
+		return Array.prototype.concat(itemsTop, itemsBottom).indexOf(item);
+	}
 
+	async function itemClick(item: SidebarItem, e: MouseEvent) {
+		if (item.onclick) return item.onclick();
+		const button = (e.target as HTMLElement).closest("button");
+		console.log(button);
+		if (!button) return;
+		const rect = button.getBoundingClientRect();
+		const sidebarRect = sidebar.getBoundingClientRect();
 		try {
 			const page = await import(`../pages/${item.text}.svelte`);
-			dispatcher("changepage", { page: page.default });
-			itemIndex = Array.prototype.concat(itemsTop, itemsBottom).indexOf(item);
+			let prevItem = itemIndex;
+			itemIndex = getIndex(item);
+			if (prevItem === itemIndex) return;
+			const isDown = itemIndex > prevItem;
+			if (isDown) {
+				await pill.animate(
+					[
+						{
+							height: "28px",
+						},
+					],
+					{ duration: 150, easing: "ease-in" },
+				).finished;
+				pill.style.top = `${rect.top - sidebarRect.top}px`;
+				dispatch("changepage", { page: page.default });
+				await pill.animate(
+					[
+						{
+							height: "28px",
+							transform: "translateY(-4px)",
+						},
+						{
+							height: "16px",
+						},
+					],
+					{ duration: 150, easing: "ease-out", fill: "forwards" },
+				).finished;
+			} else {
+				await pill.animate(
+					[
+						{
+							height: "28px",
+							transform: "translateY(-2px)",
+						},
+					],
+					{ duration: 150, easing: "ease-in" },
+				).finished;
+				pill.style.top = `${rect.top - sidebarRect.top}px`;
+				dispatch("changepage", { page: page.default });
+				await pill.animate(
+					[
+						{
+							height: "28px",
+						},
+						{
+							height: "16px",
+						},
+					],
+					{ duration: 150, easing: "ease-out", fill: "forwards" },
+				).finished;
+			}
 		} catch {
 			console.error(`Page not found: ${item.text}`);
 		}
 	}
+
+	onMount(() => {
+		// i'm sorry orche
+		const firstItem = document.querySelector(".sidebar-item");
+		if (!firstItem) return;
+		const firstItemRect = firstItem.getBoundingClientRect();
+		const sidebarRect = sidebar.getBoundingClientRect();
+		pill.style.display = "block";
+		pill.style.top = `${firstItemRect.top - sidebarRect.top}px`;
+		pill.style.left = `${firstItemRect.left - sidebarRect.left + 1}px`;
+	});
 </script>
 
-<div class="sidebar">
+<div class="sidebar" bind:this={sidebar}>
+	<div class="pill" bind:this={pill} />
 	<div class="sidebar-content top">
 		{#each itemsTop as item}
 			<button
-				on:click={() => {
-					itemClick(item);
+				on:click={(e) => {
+					itemClick(item, e);
 				}}
 				class="sidebar-item fluent-press"
 			>
@@ -47,8 +117,8 @@
 	<div class="sidebar-content bottom">
 		{#each itemsBottom as item}
 			<button
-				on:click={() => {
-					itemClick(item);
+				on:click={(e) => {
+					itemClick(item, e);
 				}}
 				class="sidebar-item fluent-press"
 			>
@@ -60,11 +130,22 @@
 </div>
 
 <style>
+	.pill {
+		width: 3px;
+		height: 16px;
+		background-color: #4e92dc;
+		border-radius: 8px;
+		display: none;
+		position: absolute;
+		transform: translateY(10px);
+	}
+
 	.sidebar {
 		display: flex;
 		flex-direction: column;
 		padding-bottom: 5px;
 		height: 100%;
+		position: relative;
 	}
 
 	.sidebar-content {
@@ -86,22 +167,22 @@
 		appearance: none;
 		display: flex;
 		align-items: center;
-		height: 36px;
+		height: 36px !important;
 		padding: 0 12px;
 		gap: 10px;
-		border-radius: 6px;
+		border-radius: 6px !important;
 		cursor: pointer;
-		border: none;
-		background-color: transparent;
+		border: none !important;
+		background-color: transparent !important;
 	}
 
 	.sidebar-item:hover {
-		background-color: rgba(200, 197, 197, 0.1);
+		background-color: rgba(200, 197, 197, 0.1) !important;
 		filter: none;
 	}
 
 	.sidebar-item:active {
-		background-color: rgba(154, 154, 154, 0.15);
+		background-color: rgba(154, 154, 154, 0.15) !important;
 		filter: none;
 	}
 

src/routes/mockup/w11/pages/Library.svelte

@@ -4,14 +4,6 @@
 
 <div class="cards">
 	<Card />
-	<Card />
-	<Card />
-	<Card />
-	<Card />
-	<Card />
-	<Card />
-	<Card />
-	<Card />
 </div>
 
 <style>

src/routes/mockup/w11/pages/Multiplayer.svelte

@@ -0,0 +1 @@
+<h1>Multiplayer</h1>

src/routes/mockup/w11/pages/Settings.svelte

@@ -1 +1 @@
-bb
+<h1>Settings</h1>