feat: add closable cutouts

Didn't even code it, Svelte magic made it start working mid development even though I didn't add half the logic. :D

client/src/App.svelte

@@ -12,6 +12,7 @@
   import { settingsStore } from './lib/stores/settingsStore'
   import getSettings from './lib/utils/getSettings'
   import hideSplashscreen from './lib/utils/hideSplashscreen'
+  import Cutouts from './lib/Dashboard/Cutouts/Cutouts.svelte'
 
   let activeApp: App = 'camera'
   // fake loading splash screen to look cool if the model loads too fast
@@ -78,6 +79,9 @@
   </div>
 </main>
 
+<!-- Camera cutouts -->
+<Cutouts show={activeApp !== 'camera'} />
+
 <!-- toast service -->
 <Toaster />
 
@@ -88,14 +92,14 @@
 
   .infotainment-container {
     background-image: url('./assets/wallpaper.jpg');
-    background-repeat: no-repeat;
+    background-repeat: repeat-y;
     background-size: cover;
     /* hide scrollbar */
     -ms-overflow-style: none;
     scrollbar-width: none;
     background-position: top right;
     width: 65vw;
-    height: 100vw;
+    height: 100vh;
   }
 
   .infotainment-container::-webkit-scrollbar {

client/src/lib/Apps/Settings/Settings.svelte

@@ -119,6 +119,7 @@
     </footer>
   </div>
 </AppContainer>
+
 <div class="w-full h-24" />
 
 <style lang="postcss">

client/src/lib/Dashboard/Cutouts/ClosableCutout.svelte

@@ -0,0 +1,32 @@
+<!-- 
+  @component
+
+  An individual camera cutout that can be closed
+
+  @param src - The source URL of the camera feed
+  @param show - Whether or not to show the cutout
+ -->
+<script lang="ts">
+  import { fly } from 'svelte/transition'
+
+  export let src: string
+  export let show: boolean = true
+
+  const closeCutout = () => {
+    show = false
+  }
+</script>
+
+{#if show}
+  <div
+    class="rounded-lg bg-white bg-opacity-20 backdrop-blur-xl p-4 relative"
+    out:fly={{ y: -50 }}
+  >
+    <button
+      class="absolute top-2 right-2 bg-white bg-opacity-20 backdrop-blur-md hover:brightness-75 rounded-lg pt-2 px-2 pb-1"
+      on:click={closeCutout}
+      ><span class="material-symbols-outlined">close</span></button
+    >
+    <img {src} alt="Front Camera" class="min-w-[300px] min-h-[300px]" />
+  </div>
+{/if}

client/src/lib/Dashboard/Cutouts/Cutouts.svelte

@@ -0,0 +1,20 @@
+<!-- 
+  @component
+
+  Camera cutout overlay that displays over the app
+ -->
+
+<script lang="ts">
+  import { fly } from 'svelte/transition'
+  import { settingsStore } from '../../stores/settingsStore'
+  import ClosableCutout from './ClosableCutout.svelte'
+
+  export let show: boolean = false
+</script>
+
+{#if show}
+  <div class="fixed top-4 right-4 flex gap-4" transition:fly={{ y: -50 }}>
+    <ClosableCutout src={$settingsStore.frontCameraAddr} />
+    <ClosableCutout src={$settingsStore.rearCameraAddr} />
+  </div>
+{/if}