Display tiles for showing a summarized view on first modal tab

src/lib/components/Display.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	let expand: boolean;
+
+	const toggle = () => (expand = !expand);
+</script>
+
+<div
+	class={`display ${expand ? 'expanded' : ''}`}
+	on:click={toggle}
+	on:keyup={(e) => e?.code === 'Enter' && toggle()}
+	role="button"
+	tabindex="0"
+>
+	<div class="icon">
+		<slot name="icon" />
+	</div>
+
+	<b class="title"><slot name="title" /></b>
+
+	<span class="value"><slot name="value" /></span>
+
+	{#if $$slots.change != null}
+		<span class="change"><slot name="change" /></span>
+	{/if}
+</div>
+
+{#if expand}
+	<div class="expanded">
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+			labore et dolore magna aliqua. Ut enim ad minim veniam.
+		</p>
+	</div>
+{/if}
+
+<style lang="scss">
+	.display {
+		padding: 1rem;
+		width: calc(100% - 2rem);
+		// border: 2px solid var(--highlight);
+		background-color: var(--highlight);
+		border-radius: 1rem;
+		cursor: pointer;
+		transition: all 1s ease;
+		user-select: none;
+		-webkit-user-select: none;
+
+		> * {
+			display: block;
+			margin-bottom: 0.66rem;
+			line-height: 1;
+		}
+
+		:last-child {
+			margin-bottom: 0 !important;
+		}
+
+		.icon {
+			width: 1.5rem;
+			height: 1.5rem;
+		}
+
+		.value {
+			font-size: 1.1rem;
+		}
+
+		.change {
+			font-size: 0.8rem;
+		}
+	}
+</style>

src/lib/components/displays/BatteryDisplay.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Display from "$lib/components/Display.svelte";
+	import BatteryIcon from "$lib/icons/Battery.svelte";
+	import { formatBattery } from "$lib/telemetryFormatters";
+
+  export let battery: string | undefined = undefined;
+</script>
+
+<Display>
+  <BatteryIcon slot="icon" />
+
+  <span slot="title">Battery</span>
+  <span slot="value">{ formatBattery(battery) }% remaining</span>
+</Display>
+
+
+<style lang="scss">
+</style>

src/lib/components/displays/HumidityDisplay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import Display from "$lib/components/Display.svelte";
+  import HumidityIcon from "$lib/icons/humidity.svelte";
+	import { formatHumidity } from "$lib/telemetryFormatters";
+
+  export let humidity: string | undefined = undefined
+</script>
+
+<Display>
+ <HumidityIcon slot="icon" />
+
+  <span slot="title">Humidity</span>
+  <span slot="value">{ formatHumidity(humidity) }%</span>
+  <span slot="change">Min 24 - Max 48</span>
+</Display>
+
+
+<style lang="scss">
+
+</style>

src/lib/components/displays/QueenDisplay.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Display from "$lib/components/Display.svelte";
+  import CrownIcon from "$lib/icons/crown.svelte";
+
+</script>
+
+<Display>
+ <CrownIcon slot="icon" />
+
+  <span slot="title">Resident Queen</span>
+  <span slot="value">Elisabeth</span>
+  <span slot="change">Age 453 days</span>
+</Display>
+
+
+<style lang="scss">
+
+</style>

src/lib/components/displays/SyncDisplay.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import Display from "$lib/components/Display.svelte";
+  import SyncIcon from "$lib/icons/Sync.svelte";
+  import { diffTime } from "$lib/telemetryFormatters";
+
+  export let date: string | undefined = undefined
+
+  let interval: number;
+  let sinceUpdate: number;
+
+  function resetInterval() {
+    if (interval) clearInterval(interval);
+
+    interval = setInterval(() => (sinceUpdate = Math.floor(sinceUpdate + 1)), 1000);
+  }
+
+  $: {
+    sinceUpdate = diffTime(date);
+    resetInterval()
+  }
+</script>
+
+<Display>
+ <SyncIcon slot="icon" />
+
+  <span slot="title">Last synced</span>
+  <span slot="value">{ sinceUpdate }s ago</span>
+</Display>
+
+
+<style lang="scss">
+
+</style>

src/lib/components/displays/TemperatureDisplay.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import Display from "$lib/components/Display.svelte";
+  import ThermometerIcon from "$lib/icons/thermometer.svelte";
+	import { formatTemperature } from "$lib/telemetryFormatters";
+
+  export let temperature: string | undefined = undefined
+  export let change: string | null = '';
+</script>
+
+<Display>
+  <ThermometerIcon slot="icon" />
+
+  <span slot="title">Temperature</span>
+  <span slot="value">{ formatTemperature(temperature) }°C</span>
+
+  <span slot="change">{change}</span>
+</Display>
+
+
+<style lang="scss">
+
+</style>

src/lib/components/displays/WeightDisplay.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Display from "$lib/components/Display.svelte";
+  import WeightIcon from "$lib/icons/weight.svelte";
+	import { formatWeight } from "$lib/telemetryFormatters";
+
+  export let weight: string | undefined = undefined
+</script>
+
+<Display>
+  <WeightIcon slot="icon" />
+
+  <span slot="title">Weight</span>
+  <span slot="value">{ formatWeight(weight) }kg</span>
+  <span slot="change">Min 22.4 - Max 24.4</span>
+</Display>
+
+<style lang="scss">
+
+</style>