stuff

frontend/src/routes/+layout.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-	import SelectContext from "$lib/contexts/SelectContext.svelte";
+	import ModalContext from "$lib/contexts/ModalContext.svelte";
+import SelectContext from "$lib/contexts/SelectContext.svelte";
 	import StateContext from "$lib/contexts/StateContext.svelte";
 </script>
 
 <StateContext>
   <SelectContext>
-    <slot></slot>
+    <ModalContext>
+      <slot></slot>
+    </ModalContext>
   </SelectContext>
 </StateContext>

frontend/src/routes/+page.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
-	import DeviceIcon from "$lib/components/DeviceIcon.svelte";
-  import Lamp, { DARK_COLOR } from "$lib/components/Lamp.svelte";
+  import Lamp from "$lib/components/Lamp.svelte";
 	import MetaLamp from "$lib/components/MetaLamp.svelte";
 	import RoomHeader from "$lib/components/RoomHeader.svelte";
+	import { getSelectedContext } from "$lib/contexts/SelectContext.svelte";
 	import { getStateContext } from "$lib/contexts/StateContext.svelte";
-	import { rgb } from "$lib/models/color";
 
   const {roomList} = getStateContext();
-
-  $: console.log($roomList);
+  const {selectedMasks} = getSelectedContext();
 </script>
 
 <div class="page">
@@ -25,8 +23,8 @@
       {/each}
     </div>
   {/each}
-
 </div>
+<pre>{JSON.stringify($selectedMasks, null, 4)}</pre>
 
 <style>
   div.page {