Add desktop games, robot pet and TCG app

src/lib/components/desktop/DesktopIcons.svelte

@@ -1,23 +1,43 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
-	import { desktop } from '#lib/content';
+	import { desktop, type DesktopSide } from '#lib/content';
 	import { runDesktopAction } from '#lib/desktop/actions';
 
-	const icons = desktop.iconGroups.flatMap((group) => group.icons);
+	function iconsOnSide(side: DesktopSide) {
+		return desktop.iconGroups.filter((group) => (group.side ?? 'left') === side).flatMap((group) => group.icons);
+	}
+
+	const iconSides = [
+		{ side: 'left', label: 'Desktop', icons: iconsOnSide('left') },
+		{ side: 'right', label: 'Desktop games', icons: iconsOnSide('right') }
+	];
 </script>
 
-<nav class="desktop-icons" aria-label="Desktop">
-	{#each icons as item (item.label)}
-		<button class="desktop-icon" title={item.label} onclick={() => runDesktopAction(item.open)}>
-			<span class="icon-box">
-				<Icon icon={item.icon} width="36" />
-			</span>
-			<span class="icon-label">{item.label}</span>
-		</button>
+<div class="desktop-icon-sides">
+	{#each iconSides as iconSide (iconSide.side)}
+		{#if iconSide.icons.length}
+			<nav class="desktop-icons {iconSide.side}" aria-label={iconSide.label}>
+				{#each iconSide.icons as item (item.label)}
+					<button class="desktop-icon" title={item.label} onclick={() => runDesktopAction(item.open)}>
+						<span class="icon-box">
+							<Icon icon={item.icon} width="36" />
+						</span>
+						<span class="icon-label">{item.label}</span>
+					</button>
+				{/each}
+			</nav>
+		{/if}
 	{/each}
-</nav>
+</div>
 
 <style>
+	.desktop-icon-sides {
+		display: flex;
+		justify-content: space-between;
+		gap: 4px;
+		height: 100%;
+	}
+
 	.desktop-icons {
 		display: grid;
 		grid-auto-flow: column;
@@ -29,6 +49,10 @@
 		align-content: start;
 	}
 
+	.desktop-icons.right {
+		direction: rtl;
+	}
+
 	.desktop-icon {
 		display: flex;
 		flex-direction: column;
@@ -38,6 +62,7 @@
 		background: none;
 		border: none;
 		color: var(--foreground);
+		direction: ltr;
 	}
 
 	.desktop-icon:focus-visible {
@@ -86,6 +111,11 @@
 	}
 
 	@media (max-width: 767px) {
+		.desktop-icon-sides {
+			flex-direction: column;
+			height: auto;
+		}
+
 		.desktop-icons {
 			grid-auto-flow: row;
 			grid-template-columns: repeat(auto-fill, 104px);
@@ -94,5 +124,9 @@
 			justify-content: center;
 			height: auto;
 		}
+
+		.desktop-icons.right {
+			direction: ltr;
+		}
 	}
 </style>