From 9bd6449b20b6642d8e55c1d995b3e05e1b189019 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Tue, 18 Nov 2025 17:26:16 +0800
Subject: [PATCH] [+] Playlists

---
 src/components/listitem/ImageListItem.svelte | 16 ++++++++++++----
 src/routes/playlists/[slug]/+page.server.ts  | 11 +++++++++++
 src/routes/playlists/[slug]/+page.svelte     | 18 ++++++++++++++++++
 3 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/playlists/[slug]/+page.server.ts
 create mode 100644 src/routes/playlists/[slug]/+page.svelte

diff --git a/src/components/listitem/ImageListItem.svelte b/src/components/listitem/ImageListItem.svelte
index 6513526..02a6d0b 100644
--- a/src/components/listitem/ImageListItem.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/playlists/[slug]/+page.server.ts b/src/routes/playlists/[slug]/+page.server.ts
new file mode 100644
index 0000000..35029f0
--- /dev/null
+++ b/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
+  }
+}
\ No newline at end of file
diff --git a/src/routes/playlists/[slug]/+page.svelte b/src/routes/playlists/[slug]/+page.svelte
new file mode 100644
index 0000000..6e70dca
--- /dev/null
+++ b/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>
+