[+] Song page

src/components/appbar/AppBar.svelte

@@ -6,8 +6,9 @@
     onclick: () => void
   }
 
-  let { title, account, right }: {
+  let { title, sub, account, right }: {
     title?: string
+    sub?: string
     account?: () => void
     right?: Icon[]
   } = $props()
@@ -19,10 +20,12 @@
   {:else}
     <IconButton icon="i-material-symbols:arrow-back-rounded" onclick={() => history.back()} aria-label="Account" />
   {/if}
-  <div class="m3-font-title-large flex-1">{title}</div>
-  <!--{#if right}-->
-<!--    <IconButton icon="i-material-symbols:settings-rounded" onclick={right} aria-label="Settings" />-->
-<!--  {/if}-->
+  <div class="vbox flex-1">
+    <div class="m3-font-title-large">{title}</div>
+    {#if sub}
+      <div class="m3-font-body-small mfg-on-surface-variant">{sub}</div>
+    {/if}
+  </div>
 
   {#each right as item}
     <IconButton icon={item.icon} onclick={item.onclick} />

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

@@ -7,12 +7,15 @@ import ImageListItem from "../../../components/listitem/ImageListItem.svelte";
 </script>
 
 <AppBar title={data.isMine ? '我的歌单' : '推荐歌单'} right={[
+  // TODO
   {icon: "i-material-symbols:more-vert", onclick: () => alert('More clicked')}
 ]} />
 
 <div class="vbox p-content gap-12px">
   {#each data.playlists as pl}
-    <ImageListItem photoUrl={pl.coverImgUrl} title={pl.name} text={`${pl.creator.nickname} 创建`} right={`${pl.trackCount} 首歌`} />
+    <a href="/playlist/{pl.id}">
+      <ImageListItem photoUrl={pl.coverImgUrl} title={pl.name} text={`${pl.creator.nickname} 创建`} right={`${pl.trackCount} 首歌`} />
+    </a>
   {/each}
 </div>
 

src/routes/song/[slug]/+page.server.ts

@@ -0,0 +1,10 @@
+import type { PageServerLoad } from './$types'
+import { getLyricsProcessed, getSongMeta, listPlaylists, parseBrief } from "$lib/server/songs.ts";
+
+export const load: PageServerLoad = async ({ params }) => {
+  const songId = +params.slug
+  const raw = await getSongMeta(songId)
+  const brief = parseBrief(raw)
+  const lrc = await getLyricsProcessed(songId)
+  return { raw, brief, lrc }
+}

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import AppBar from "../../../components/appbar/AppBar.svelte";
+  import type { PageProps } from "./$types"
+
+  let { data }: PageProps = $props()
+</script>
+
+<AppBar title={data.brief.name} sub={data.brief.artists.map(a => a.name).join(", ") + " - " + data.brief.album} right={[
+  // TODO
+  {icon: "i-material-symbols:more-vert", onclick: () => alert('More clicked')}
+]} />
+

src/style/m3-alias.sass

@@ -0,0 +1,5 @@
+.bg-inverse-primary
+  background-color: rgb(var(--m3-scheme-inverse-primary) / 1)
+
+.fg-on-primary-container
+  color: rgb(var(--m3-scheme-on-primary-container) / 1)