frontend: improve stream UI and add fullscreen

frontend/src/routes/stream/StreamUi.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { Maximize, Settings } from 'lucide-svelte';
+
+	interface Props {
+		fullscreenFunc: () => void;
+	}
+
+	let { fullscreenFunc }: Props = $props();
+</script>
+
+<div class="stream-controls">
+	<div style="flex-grow: 1"></div>
+	<div class="bar-button" role="button" tabindex="0">
+		<Settings size="100%" />
+	</div>
+	<div style="width: 0.5%"></div>
+	<div class="bar-button" onclick={fullscreenFunc} role="button" tabindex="0">
+		<Maximize size="100%" />
+	</div>
+	<div style="width: 0.5%"></div>
+</div>
+
+<style>
+	.bar-button {
+		height: 85%;
+		aspect-ratio: 1 / 1;
+		color: oklch(0.454 0 360);
+
+		transition:
+			transform 0.3s ease,
+			filter 0.3s ease;
+		/* Set transform origin to center so it grows from the middle */
+		transform-origin: center;
+	}
+	.bar-button:hover {
+		transform: scale(1.05);
+		filter: brightness(1.2);
+	}
+
+	.stream-controls {
+		height: 5%;
+		width: 100%;
+
+		position: absolute;
+
+		bottom: 0;
+		left: 0;
+
+		z-index: 2;
+
+		border-top-color: oklch(0.454 0 360);
+		border-top-width: 2px;
+
+		display: flex;
+		align-items: center;
+	}
+</style>