[+] Links

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>

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}">

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}