Replace the Vue frontend with Svelte

frontend/src/components/window/title-bar/WindowButtonsMac.svelte

@@ -1,52 +1,43 @@
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
+	import LayoutRow from "@/components/layout/LayoutRow.svelte";
 
-import LayoutRow from "@/components/layout/LayoutRow.vue";
-
-export default defineComponent({
-	props: {
-		maximized: { type: Boolean as PropType<boolean>, default: false },
-	},
-	components: { LayoutRow },
-});
+	export let maximized = false;
 </script>
 
-<template>
-	<LayoutRow class="window-buttons mac">
-		<div class="close" title="Close"></div>
-		<div class="minimize" title="Minimize"></div>
-		<div class="zoom" title="Zoom"></div>
-	</LayoutRow>
-</template>
+<LayoutRow class="window-buttons-mac">
+	<div class="close" title="Close" />
+	<div class="minimize" title="Minimize" />
+	<div class="zoom" title="Zoom" />
+</LayoutRow>
 
-<style lang="scss">
-.window-buttons.mac {
-	flex: 0 0 auto;
-	align-items: center;
-	margin: 0 8px;
-
-	div {
+<style lang="scss" global>
+	.window-buttons-mac {
 		flex: 0 0 auto;
 		align-items: center;
-		width: 11px;
-		height: 11px;
-		border-radius: 50%;
+		margin: 0 8px;
 
-		& + div {
-			margin-left: 8px;
-		}
+		div {
+			flex: 0 0 auto;
+			align-items: center;
+			width: 11px;
+			height: 11px;
+			border-radius: 50%;
 
-		&.close {
-			background: #ff5a52;
-		}
+			& + div {
+				margin-left: 8px;
+			}
 
-		&.minimize {
-			background: #e6c029;
-		}
+			&.close {
+				background: #ff5a52;
+			}
 
-		&.zoom {
-			background: #54c22b;
+			&.minimize {
+				background: #e6c029;
+			}
+
+			&.zoom {
+				background: #54c22b;
+			}
 		}
 	}
-}
 </style>