[+] Playlists

src/components/listitem/ImageListItem.svelte

@@ -1,13 +1,21 @@
 <script lang="ts">
-  let { photoUrl, title, text }: { photoUrl: string; title: string; text: string } = $props();
+  let { photoUrl, title, text, right }: { 
+    photoUrl: string; 
+    title: string;
+    text: string;
+    right?: string
+  } = $props();
 </script>
 
 <div class="hbox gap-16px">
-  <img class="rounded-16px size-68px" src={photoUrl} alt={title} />
+  <img class="rounded-16px size-60px" src={photoUrl} alt={title} />
   <div class="vbox flex-1 min-w-0">
     <div class="m3-font-title-large truncate">{title}</div>
-    <div class="hbox w-full">
-      <div class="m3-font-body-medium m3-color-on-surface-variant truncate">{text}</div>
+    <div class="m3-font-body-medium m3-color-on-surface-variant hbox w-full justify-between gap-8px">
+      <div class="truncate">{text}</div>
+      {#if right}
+        <div>{right}</div>
+      {/if}
     </div>
   </div>
 </div>

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

@@ -0,0 +1,11 @@
+import type { PageServerLoad } from './$types';
+import { listPlaylists } from "$lib/server/songs.ts";
+
+// TODO: slug should be "my" or "recommended", fetch accordingly
+export const load: PageServerLoad = async ({ params }) => {
+  const isMine = params.slug === 'my'
+  return {
+    playlists: await listPlaylists(),
+    isMine
+  }
+}

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import AppBar from "../../../components/appbar/AppBar.svelte";
+import ImageListItem from "../../../components/listitem/ImageListItem.svelte";
+  import type { PageProps } from "./$types"
+
+  let { data }: PageProps = $props()
+</script>
+
+<AppBar title={data.isMine ? '我的歌单' : '推荐歌单'} right={[
+  {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} 首歌`} />
+  {/each}
+</div>
+