ui stuff from laptop

frontend/src/routes/+layout.svelte

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

frontend/src/routes/+page.svelte

@@ -1,22 +1,17 @@
 <script lang="ts">
 	import Lamp from "$lib/components/Lamp.svelte";
-	import { rgb } from "$lib/models/color";
-  
+	import Toolbar from "$lib/components/Toolbar.svelte";
+	import { getStateContext } from "$lib/contexts/StateContext.svelte";
+
+  const {deviceList} = getStateContext();
 </script>
 
 <div class="page">
-  <Lamp title="Hexagon 1" color={rgb(1.000,0.541,0.071)} intensity={0.3} />
-  <Lamp title="Hexagon 2" color={rgb(1.000,0.541,0.071)} intensity={0.4} />
-  <Lamp title="Hexagon 3" color={rgb(1.000,0.541,0.071)} intensity={0.5} />
-  <Lamp title="Hexagon 4" color={rgb(1.000,0.631,0.282)} selected intensity={0.1} />
-  <Lamp title="Lamp with an equally absurd name" color={rgb(0.500,0.542,1.000)} selected intensity={0.3} />
-  <Lamp title="Hexagon 5" color={rgb(1.000,0.631,0.282)} selected intensity={0.66} />
-  <Lamp title="Hexagon 6" color={rgb(1.000,0.700,0.408)} selected intensity={0.92} />
-  <Lamp title="Hexagon 7" color={rgb(1.000,0.700,0.408)} intensity={1} />
-  <Lamp title="Hexagon 8" color={rgb(1.000,0.700,0.408)} intensity={0.9} />
-  <Lamp title="Hexagon 9" color={rgb(1.000,0.700,0.408)} intensity={0.5} />
-  <Lamp title="Signe Table Lamp 1" color={rgb(0.765,0.820,1.000)} selected intensity={0.79} />
+  {#each $deviceList as device (device.id) }
+    <Lamp device={device} />
+  {/each}
 </div>
+<Toolbar />
 
 <style>
   div.page {