ui stuff from laptop

frontend/src/lib/contexts/StateContext.svelte

@@ -0,0 +1,57 @@
+<script lang="ts" context="module">
+	import { fetchUIState } from "$lib/client/lucifer";
+	import type Device from "$lib/models/device";
+	import type UIState from "$lib/models/uistate";
+	import { getContext, onMount, setContext } from "svelte";
+	import { derived, writable, type Readable } from "svelte/store";
+
+  const ctxKey = {ctx: "StateContext"};
+
+  export interface StateContextData {
+    reload(): Promise<void>
+    state: Readable<UIState | null>
+    error: Readable<string | null>
+    deviceList: Readable<Device[]>
+  }
+
+  export function getStateContext(): StateContextData {
+    return getContext(ctxKey) as StateContextData;
+  }
+</script>
+
+<script lang="ts">
+  const state = writable<UIState | null>(null);
+  const error = writable<string | null>(null);
+
+  const deviceList = derived(state, state => {
+    if (state == null) {
+      return [];
+    }
+
+    return Object.keys(state.devices)
+      .map(k => state.devices[k])
+      .sort((a,b) => a.id.localeCompare(b.id));
+  })
+
+  async function reload() {
+    error.set(null);
+
+    try {
+      const newState = await fetchUIState();
+      state.set(newState);
+    } catch(err) {
+      error.set(err?.toString ? err.toString() : String(err))
+    }
+  }
+
+  onMount(() => { reload(); });
+
+  setContext<StateContextData>(ctxKey, {
+    reload,
+    error: { subscribe: error.subscribe },
+    state: { subscribe: state.subscribe },
+    deviceList,
+  });
+</script>
+
+<slot></slot>