From dcf5a90b592ae51e791f1c8dfc44aab6bec59015 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Wed, 19 Nov 2025 20:46:22 +0800
Subject: [PATCH] [+] Links

---
 src/components/IconButton.svelte  |  2 +-
 src/routes/+page.svelte           |  6 +++---
 src/routes/song/[id]/+page.svelte | 18 +++++++++++++++++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/IconButton.svelte b/src/components/IconButton.svelte
index a71f6da..d24d213 100644
--- a/src/components/IconButton.svelte
+++ b/src/components/IconButton.svelte
@@ -5,6 +5,6 @@
 </script>
 
 <button class="cbox size-48px relative rounded-8px" {...rest}>
-  <Layer/>
+  <!-- <Layer/> -->
   <span class="size-24px {icon}"></span>
 </button>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 764682c..5c3fde0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -16,7 +16,7 @@
   {icon: "i-material-symbols:settings-rounded", onclick: () => alert('Settings clicked')}
 ]} />
 
-<div class="vbox gap-16px">
+<div class="vbox gap-16px overflow-y-auto">
   {#if data.last}
     <div>
       <TitleHeader title="从暂停的位置继续"/>
@@ -34,7 +34,7 @@
   </div>
 
   <div>
-    <TitleHeader title="我的歌单"/>
+    <a href="/playlists/my"><TitleHeader title="我的歌单"/></a>
     <div class="p-content hbox gap-8px w-auto overflow-x-auto py-8px">
       {#each data.myPlaylists as playlist}
         <a class="vbox flex-shrink-0 gap-4px w-96px relative" href="/playlist/{playlist.id}">
@@ -52,7 +52,7 @@
   </div>
 
   <div>
-    <TitleHeader title="推荐歌单"/>
+    <a href="/playlists/rec"><TitleHeader title="推荐歌单"/></a>
     <div class="p-content hbox gap-8px w-auto overflow-x-auto py-8px">
       {#each data.recPlaylists as playlist}
         <a class="vbox flex-shrink-0 p-8px gap-8px rounded-12px mbg-surface-container-high relative" href="/playlist/{playlist.id}">
diff --git a/src/routes/song/[id]/+page.svelte b/src/routes/song/[id]/+page.svelte
index 45fe31a..fc9fb62 100644
--- a/src/routes/song/[id]/+page.svelte
+++ b/src/routes/song/[id]/+page.svelte
@@ -127,6 +127,22 @@
   let caret: HTMLDivElement
   $effect(() => { li; wi; animateCaret(caret) })
 
+  // Auto scroll to active line
+  let lrcWrapper: HTMLDivElement
+  $effect(() => {
+    li
+    if (!lrcWrapper) return
+    tick().then(() => {
+      const activeEl = lrcWrapper.querySelector('.active') as HTMLElement
+      if (activeEl) {
+        lrcWrapper.scrollTo({
+          top: activeEl.offsetTop - lrcWrapper.clientHeight / 2 + activeEl.clientHeight / 2,
+          behavior: 'smooth'
+        })
+      }
+    })
+  })
+
   // Result is stored on the server and is fetched from a separate results page
   async function submitResult() {
     const res = await API.saveResult({
@@ -166,7 +182,7 @@
 </div>
 
 <!-- Lines -->
-<div class="lrc-wrapper flex-1 overflow-y-auto" lang="ja-JP">
+<div bind:this={lrcWrapper} class="lrc-wrapper flex-1 overflow-y-auto" lang="ja-JP">
   <div class="vbox gap-12px py-32px relative min-h-full lrc-content">
     <div bind:this={caret} class="absolute bg-amber w-2px h-24px transition-all duration-75 z-10"></div>
     {#each processedLrc as line, l}