[S] Styling

src/components/Button.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { Layer } from "m3-svelte";
+
 let { icon, children, ...rest }: {
   icon?: string
   children?: any
@@ -6,7 +8,8 @@ let { icon, children, ...rest }: {
 } = $props();
 </script>
 
-<button class="hbox h-40px rounded-12px px-16px py-10px gap-8px mfg-on-primary-container mbg-inverse-primary m3-font-label-large" {...rest}>
+<button class="hbox h-40px rounded-12px px-16px py-10px gap-8px mfg-on-primary-container mbg-inverse-primary m3-font-label-large relative" {...rest}>
+  <Layer/>
   {#if icon}
     <span class="size-20px {icon}"></span>
   {/if}

src/components/appbar/AppBar.svelte

@@ -25,10 +25,10 @@
   {:else}
     <IconButton icon="i-material-symbols:arrow-back-rounded" onclick={() => history.back()} aria-label="Account" />
   {/if}
-  <div class="vbox flex-1">
-    <div class="m3-font-title-large">{title}</div>
+  <div class="vbox flex-1 min-w-0">
+    <div class="m3-font-title-large truncate">{title}</div>
     {#if sub}
-      <div class="m3-font-body-small mfg-on-surface-variant">{sub}</div>
+      <div class="m3-font-body-small mfg-on-surface-variant truncate">{sub}</div>
     {/if}
   </div>
 

src/lib/server/songs.ts

@@ -82,6 +82,7 @@ export const getLyricsRaw = cached('lyrics_raw',
 export const getLyricsProcessed = cached('lyrics_processed',
     async (songId: number) => {
         const raw = await getLyricsRaw(songId)
+        console.log(`Processing lyrics for song ${songId}`)
         return aiParseLyrics(raw.lrc.lyric)
     })
 

src/routes/+layout.svelte

@@ -18,4 +18,6 @@
   <link rel="icon" href={favicon} />
 </svelte:head>
 
-{@render children()}
+<div class="vbox min-h-screen box-border">
+  {@render children()}
+</div>

src/routes/+page.svelte

@@ -4,6 +4,7 @@
   import SongInfo from "../components/listitem/SongInfo.svelte";
   import type { PageProps } from "./$types";
   import Button from "../components/Button.svelte";
+    import { Layer } from "m3-svelte";
 
   let { data }: PageProps = $props()
 
@@ -36,10 +37,13 @@
     <TitleHeader title="我的歌单"/>
     <div class="p-content hbox gap-8px w-auto overflow-x-auto py-8px">
       {#each data.myPlaylists as playlist}
-        <div class="vbox flex-shrink-0 gap-4px w-96px">
-          <img src="{playlist.coverImgUrl}" alt="" class="size-96px rounded-16px">
+        <a class="vbox flex-shrink-0 gap-4px w-96px relative" href="/playlist/{playlist.id}">
+          <div class="relative rounded-16px overflow-hidden">
+            <img src="{playlist.coverImgUrl}" alt="" class="size-96px">
+            <Layer/>
+          </div>
           <div class="m3-font-label-large truncate">{playlist.name}</div>
-        </div>
+        </a>
       {/each}
     </div>
     <div class="p-content">
@@ -51,7 +55,8 @@
     <TitleHeader title="推荐歌单"/>
     <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" href="/playlist/{playlist.id}">
+        <a class="vbox flex-shrink-0 p-8px gap-8px rounded-12px mbg-surface-container-high relative" href="/playlist/{playlist.id}">
+          <Layer/>
           <img src="{playlist.coverImgUrl}" alt="" class="size-116px rounded-8px">
           <div>
             <div class="m3-font-title-small font-bold truncate">{playlist.name}</div>

src/routes/results/[id]/+page.svelte

@@ -99,7 +99,7 @@
 
 <AppBar title={data.brief.name} sub={artistAndAlbum(data.brief)} />
 
-<div class="vbox gap-16px p-content">
+<div class="vbox gap-16px p-content flex-1 overflow-y-auto">
   <div class="hbox gap-12px items-end! h-48px">
     <div class="m3-font-headline-small">练习结果</div>
   </div>
@@ -124,7 +124,7 @@
 
   <div class="flex-1"></div>
 
-  <div class="hbox justify-end pt-8px">
-    <Button onclick={() => goto(`/song/${songId}`)}>下一首</Button>
+  <div class="hbox justify-end pt-8px pb-16px w-full">
+    <Button w-full onclick={() => goto(`/song/${songId}`)}>下一首</Button>
   </div>
 </div>