From 3983d107186b75eb70770bd8359da9b5125931af Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Wed, 19 Nov 2025 16:21:16 +0800
Subject: [PATCH] [O] Split

---
 src/routes/song/[slug]/+page.svelte | 28 +++-------------------------
 src/routes/song/[slug]/animation.ts | 24 ++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 25 deletions(-)
 create mode 100644 src/routes/song/[slug]/animation.ts

diff --git a/src/routes/song/[slug]/+page.svelte b/src/routes/song/[slug]/+page.svelte
index aa431a6..054ffca 100644
--- a/src/routes/song/[slug]/+page.svelte
+++ b/src/routes/song/[slug]/+page.svelte
@@ -9,6 +9,7 @@
   import MenuItem from "../../../components/material3/MenuItem.svelte";
   import "../../../shared/ext.ts"
   import { saveUserData } from "$lib/user";
+  import { animateCaret } from "./animation.ts";
 
   let { data }: PageProps = $props()
 
@@ -101,32 +102,9 @@
 
   $effect(() => inputChanged(inp, false))
 
-  // Animate caret position
+  // Caret: Typing indicator
   let caret: HTMLDivElement
-  $effect(() => {
-    li; wi;
-    tick().then(() => {
-      const el = (document.querySelector('.here') as HTMLElement)
-      const update = () => {
-        const rect = el?.getBoundingClientRect()
-        if (!rect) return
-        caret.style.left = `${rect.left + window.scrollX}px`
-        caret.style.top = `${rect.top + window.scrollY}px`
-        caret.style.height = `${rect.height}px`
-      }
-      update()
-
-      // Keep updating for 300ms to handle CSS transitions (font-size change)
-      let start = performance.now()
-      const frame = () => {
-        if (performance.now() - start > 300) return
-        update()
-        requestAnimationFrame(frame)
-      }
-      requestAnimationFrame(frame)
-    })
-  })
-
+  $effect(() => { li; wi; animateCaret(caret) })
   
   // Computed stats
   let flat = $derived(states.flat())
diff --git a/src/routes/song/[slug]/animation.ts b/src/routes/song/[slug]/animation.ts
new file mode 100644
index 0000000..14301d9
--- /dev/null
+++ b/src/routes/song/[slug]/animation.ts
@@ -0,0 +1,24 @@
+import { tick } from "svelte";
+
+export function animateCaret(caret: HTMLDivElement) {
+  tick().then(() => {
+    const el = document.querySelector(".here") as HTMLElement;
+    const update = () => {
+      const rect = el?.getBoundingClientRect();
+      if (!rect) return;
+      caret.style.left = `${rect.left + window.scrollX}px`;
+      caret.style.top = `${rect.top + window.scrollY}px`;
+      caret.style.height = `${rect.height}px`;
+    };
+    update();
+
+    // Keep updating for 300ms to handle CSS transitions (font-size change)
+    let start = performance.now();
+    const frame = () => {
+      if (performance.now() - start > 300) return;
+      update();
+      requestAnimationFrame(frame);
+    };
+    requestAnimationFrame(frame);
+  });
+}