[+] Auto focus, settings persist

bun.lock

@@ -17,6 +17,7 @@
         "mongodb": "^7.0.0",
         "openai": "^6.9.0",
         "sass": "^1.94.0",
+        "scope-extensions-js": "^1.1.0",
         "unocss-preset-animations": "^1.3.0",
       },
       "devDependencies": {
@@ -894,6 +895,8 @@
 
     "sax": ["sax@1.4.3", "", {}, "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ=="],
 
+    "scope-extensions-js": ["scope-extensions-js@1.1.0", "", {}, "sha512-SbxLXgaw2R04te1dfviB0HHzD2dPcOQh/CFSn0JiJ9EHTFCqA0rOOMfIwqi/oN2cQlaiWR/zQLCwSCtJ0bYF5Q=="],
+
     "secure-json-parse": ["secure-json-parse@2.7.0", "", {}, "sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw=="],
 
     "semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],

package.json

@@ -45,6 +45,7 @@
 		"mongodb": "^7.0.0",
 		"openai": "^6.9.0",
 		"sass": "^1.94.0",
+		"scope-extensions-js": "^1.1.0",
 		"unocss-preset-animations": "^1.3.0"
 	}
 }

src/routes/song/[slug]/+page.svelte

@@ -7,6 +7,7 @@
   import { isKana, isKanji, toHiragana, toKatakana } from "wanakana";
   import { composeList, fuzzyEquals } from "./IMEHelper.ts";
   import MenuItem from "../../../components/material3/MenuItem.svelte";
+  import "scope-extensions-js";
 
   let { data }: PageProps = $props()
 
@@ -16,11 +17,13 @@
 
   let hiddenInput: HTMLInputElement
   let inp = $state("")
-  // TODO: Persist settings
-  let settings = $state({
+
+  // Settings stored in localStorage
+  let settings = $state(localStorage.getItem('kashi-dash-settings')?.let(it => JSON.parse(it)) ?? {
     isFuri: true,
     allKata: false
   })
+  $effect(() => localStorage.setItem('kashi-dash-settings', JSON.stringify(settings)))
   const preprocessKana = (kana: string) => settings.allKata ? toKatakana(kana) : kana
 
   // Process each line into segments with swi (start word index) and kanji/kana
@@ -52,9 +55,16 @@
   let now = $state(Date.now())
 
   onMount(() => {
-    hiddenInput.focus()  // TODO: auto focus when focus lost
+    // Auto focus & refocus
+    hiddenInput.focus()
+    const onBlur = () => setTimeout(() => hiddenInput?.focus(), 10)
+    hiddenInput.addEventListener('blur', onBlur)
+
     const interval = setInterval(() => { if (startTime) now = Date.now() }, 1000)
-    return () => clearInterval(interval)
+    return () => {
+      clearInterval(interval)
+      hiddenInput?.removeEventListener('blur', onBlur)
+    }
   })
 
   // On input changed: Convert to hiragana, compare with current position, update states