feat: periodically update os-layout in the background

fix: remove dead code in layout detection
fixes #78
resolves #79

src/lib/os-layout.ts

@@ -1,40 +1,25 @@
-import {persistentWritable} from "$lib/storage"
-import {get} from "svelte/store"
+import {get, writable} from "svelte/store"
 
-export const osLayout = persistentWritable<Record<string, string>>("os-layout", {})
+export const osLayout = writable<Map<string, string>>(new Map())
 
-const keysCurrentlyDown = new Set<string>()
-
-function keydown({code, key}: KeyboardEvent) {
-  const keys = [...keysCurrentlyDown]
-  keysCurrentlyDown.add(code)
-
-  const keyString = JSON.stringify([...keys.sort(), code])
-  if (keyString in get(osLayout) || get(osLayout)[JSON.stringify([code])] === key) return
-
-  osLayout.update(layout => {
-    layout[keyString] = key
-    return layout
-  })
-}
-
-function keyup({code}: KeyboardEvent) {
-  keysCurrentlyDown.delete(code)
-}
-
-export function runLayoutDetection() {
-  if ("keyboard" in navigator) {
-    ;(navigator.keyboard as any).getLayoutMap().then((layout: Map<string, string>) => {
-      osLayout.update(osLayout => {
-        Object.assign(
-          osLayout,
-          Object.fromEntries([...layout.entries()].map(([key, value]) => [JSON.stringify([key]), value])),
-        )
-        return osLayout
-      })
-    })
+async function updateLayout() {
+  const layout: Map<string, string> = await (navigator as any).keyboard.getLayoutMap()
+  const currentLayout = get(osLayout)
+  if (
+    layout.size !== currentLayout.size ||
+    [...layout.keys()].some(key => layout.get(key) !== currentLayout.get(key))
+  ) {
+    osLayout.set(layout)
+  }
+}
+
+export function runLayoutDetection(): () => void {
+  if ("keyboard" in navigator) {
+    updateLayout()
+    const timer = setInterval(updateLayout, 5000)
+    return () => clearInterval(timer)
+  } else {
+    console.warn("Keyboard API not supported")
+    return () => {}
   }
-  // TODO: do we want this?
-  //window.addEventListener("keydown", keydown)
-  //window.addEventListener("keyup", keyup)
 }

src/routes/+layout.svelte

@@ -4,7 +4,7 @@
   import "$lib/style/scrollbar.scss"
   import "$lib/style/tippy.scss"
   import "$lib/style/theme.scss"
-  import {onMount} from "svelte"
+  import {onDestroy, onMount} from "svelte"
   import {applyTheme, argbFromHex, themeFromSourceColor} from "@material/material-color-utilities"
   import Navigation from "./Navigation.svelte"
   import {canAutoConnect} from "$lib/serial/device"
@@ -29,9 +29,10 @@
   const locale = ((browser && localStorage.getItem("locale")) as Locales) || detectLocale()
   loadLocale(locale)
   setLocale(locale)
+  let stopLayoutDetection: () => void
 
   if (browser) {
-    runLayoutDetection()
+    stopLayoutDetection = runLayoutDetection()
     tippy.setDefaultProps({
       animation: "shift-away",
       theme: "surface-variant",
@@ -66,6 +67,10 @@
     }
   })
 
+  onDestroy(() => {
+    stopLayoutDetection?.()
+  })
+
   let webManifestLink = ""
 </script>