From 2772abcd2f7976c1894fa8efee217b1dc2a99f7c Mon Sep 17 00:00:00 2001
From: 409 <bloecker.s@gmail.com>
Date: Sun, 1 Dec 2024 03:49:08 +0100
Subject: [PATCH] feat!: playlists

---
 bun.lockb                                     | Bin 97790 -> 97776 bytes
 package.json                                  |   2 +-
 protos/library.proto                          |  37 ++
 protos/player.proto                           |  10 +
 src/lib/components/groove/AppSidebar.svelte   |  31 +-
 .../groove/CreatePlaylistDialog.svelte        |  69 +++
 src/lib/components/groove/Footer.svelte       |   4 -
 .../components/groove/PlaylistListing.svelte  | 115 +++++
 src/lib/components/groove/Queue.svelte        |  62 ++-
 .../ui/accordion/accordion-content.svelte     |  24 +
 .../ui/accordion/accordion-item.svelte        |  12 +
 .../ui/accordion/accordion-trigger.svelte     |  31 ++
 src/lib/components/ui/accordion/index.ts      |  17 +
 .../components/ui/card/card-content.svelte    |  16 +
 .../ui/card/card-description.svelte           |  16 +
 src/lib/components/ui/card/card-footer.svelte |  16 +
 src/lib/components/ui/card/card-header.svelte |  16 +
 src/lib/components/ui/card/card-title.svelte  |  25 +
 src/lib/components/ui/card/card.svelte        |  20 +
 src/lib/components/ui/card/index.ts           |  22 +
 .../ui/dialog/dialog-content.svelte           |  38 ++
 .../ui/dialog/dialog-description.svelte       |  16 +
 .../components/ui/dialog/dialog-footer.svelte |  20 +
 .../components/ui/dialog/dialog-header.svelte |  20 +
 .../ui/dialog/dialog-overlay.svelte           |  19 +
 .../components/ui/dialog/dialog-title.svelte  |  16 +
 src/lib/components/ui/dialog/index.ts         |  37 ++
 src/lib/library.svelte.ts                     |  24 +
 src/lib/proto/library.client.ts               |  61 +++
 src/lib/proto/library.ts                      | 446 +++++++++++++++++-
 src/lib/proto/player.client.ts                |  30 +-
 src/lib/proto/player.ts                       | 114 +++++
 src/routes/+layout.server.ts                  |  36 +-
 src/routes/+layout.svelte                     |  13 +-
 src/routes/playlists/+page.server.ts          |  24 +
 src/routes/playlists/+page.svelte             |  15 +-
 src/routes/playlists/[id]/+page.server.ts     |  19 +
 .../[id]/add-track/[hash]/+page.server.ts     |  14 +
 src/routes/tracks/+page.server.ts             |  21 -
 src/routes/tracks/+page.svelte                |  71 ++-
 40 files changed, 1530 insertions(+), 69 deletions(-)
 create mode 100644 src/lib/components/groove/CreatePlaylistDialog.svelte
 create mode 100644 src/lib/components/groove/PlaylistListing.svelte
 create mode 100644 src/lib/components/ui/accordion/accordion-content.svelte
 create mode 100644 src/lib/components/ui/accordion/accordion-item.svelte
 create mode 100644 src/lib/components/ui/accordion/accordion-trigger.svelte
 create mode 100644 src/lib/components/ui/accordion/index.ts
 create mode 100644 src/lib/components/ui/card/card-content.svelte
 create mode 100644 src/lib/components/ui/card/card-description.svelte
 create mode 100644 src/lib/components/ui/card/card-footer.svelte
 create mode 100644 src/lib/components/ui/card/card-header.svelte
 create mode 100644 src/lib/components/ui/card/card-title.svelte
 create mode 100644 src/lib/components/ui/card/card.svelte
 create mode 100644 src/lib/components/ui/card/index.ts
 create mode 100644 src/lib/components/ui/dialog/dialog-content.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-description.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-footer.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-header.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-overlay.svelte
 create mode 100644 src/lib/components/ui/dialog/dialog-title.svelte
 create mode 100644 src/lib/components/ui/dialog/index.ts
 create mode 100644 src/lib/library.svelte.ts
 create mode 100644 src/routes/playlists/[id]/+page.server.ts
 create mode 100644 src/routes/playlists/[id]/add-track/[hash]/+page.server.ts
 delete mode 100644 src/routes/tracks/+page.server.ts

diff --git a/bun.lockb b/bun.lockb
index 3d79beb82f025131bbc2932ea86539b56dfbbcac..e6d5434d22daf3a49b4bb2d39345869e6f705a06 100755
GIT binary patch
delta 8539
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
DAbm_k

delta 8560
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
X%j+$<+3nAyk)|S&-JY<7eBAG!sDD;=

diff --git a/package.json b/package.json
index 5f3d177..392dea0 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "^1.0.0-next.64",
+		"bits-ui": "^1.0.0-next.65",
 		"clsx": "^2.1.1",
 		"globals": "^15.0.0",
 		"lucide-svelte": "^0.462.0",
diff --git a/protos/library.proto b/protos/library.proto
index ee0ed1d..4be63f6 100644
--- a/protos/library.proto
+++ b/protos/library.proto
@@ -6,6 +6,11 @@ package library;
 
 service Library {
 	rpc ListTracks(google.protobuf.Empty) returns (TrackList);
+	rpc ListPlaylists(google.protobuf.Empty) returns (ListPlaylistsResponse);
+	rpc CreatePlaylist(CreatePlaylistRequest) returns (CreatePlaylistResponse);
+	rpc DeletePlaylist(DeletePlaylistRequest) returns (google.protobuf.Empty);
+	rpc AddTrackToPlaylist(AddTrackToPlaylistRequest) returns (google.protobuf.Empty);
+	rpc RemoveTrackFromPlaylist(RemoveTrackFromPlaylistRequest) returns (google.protobuf.Empty);
 }
 
 message TrackList {
@@ -19,3 +24,35 @@ message Track {
 	uint64 artist_id = 4;
 	uint64 duration = 5;
 }
+
+message Playlist {
+	uint32 id = 1;
+	string name = 2;
+	repeated Track tracks = 3;
+}
+
+message ListPlaylistsResponse {
+	repeated Playlist playlists = 1;
+}
+
+message CreatePlaylistRequest {
+	string name = 1;
+}
+
+message CreatePlaylistResponse {
+	Playlist playlist = 1;
+}
+
+message DeletePlaylistRequest {
+	uint32 id = 1;
+}
+
+message AddTrackToPlaylistRequest {
+	uint32 playlist_id = 1;
+	string track_hash = 2;
+}
+
+message RemoveTrackFromPlaylistRequest {
+	uint32 playlist_id = 1;
+	uint32 track_rank = 2;
+}
diff --git a/protos/player.proto b/protos/player.proto
index c4c5813..15a5fae 100644
--- a/protos/player.proto
+++ b/protos/player.proto
@@ -15,6 +15,8 @@ service Player {
 	rpc SetVolume(SetVolumeRequest) returns (SetVolumeResponse);
 	rpc PlayTrackNext(TrackRequest) returns (Queue);
 	rpc AddTrackToQueue(TrackRequest) returns (Queue);
+	rpc AddTracksToQueue(TracksRequest) returns (Queue);
+	rpc PlayPlaylist(PlayPlaylistRequest) returns (PlayerStatus);
 	rpc SwapQueueIndices(SwapQueueIndicesRequest) returns (Queue);
 	rpc SkipTrack(google.protobuf.Empty) returns (PlayerStatus);
 	rpc SkipToQueueIndex(SkipToQueueIndexRequest) returns (PlayerStatus);
@@ -69,3 +71,11 @@ message SwapQueueIndicesRequest {
 	uint32 a = 1;
 	uint32 b = 2;
 }
+
+message TracksRequest {
+	repeated string tracks = 1;
+}
+
+message PlayPlaylistRequest {
+	uint32 id = 1;
+}
diff --git a/src/lib/components/groove/AppSidebar.svelte b/src/lib/components/groove/AppSidebar.svelte
index 094e79b..8e52536 100644
--- a/src/lib/components/groove/AppSidebar.svelte
+++ b/src/lib/components/groove/AppSidebar.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import * as Sidebar from '$lib/components/ui/sidebar';
-	import { Home, Library, ListMusic, Music2, Settings } from 'lucide-svelte';
+	import Home from 'virtual:icons/lucide/home';
+	import Library from 'virtual:icons/lucide/library';
+	import ListMusic from 'virtual:icons/lucide/list-music';
+	import Music2 from 'virtual:icons/lucide/music-2';
+	import Settings from 'virtual:icons/lucide/settings';
+	import CirclePlus from 'virtual:icons/lucide/circle-plus';
+	import { cn } from '$lib/utils';
+	import CreatePlaylistDialog from './CreatePlaylistDialog.svelte';
+	import { getLibraryState } from '$lib/library.svelte';
+
+	const library = getLibraryState();
 </script>
 
 <Sidebar.Root collapsible="icon">
@@ -64,6 +74,25 @@
 							</a>
 						{/snippet}
 					</Sidebar.MenuButton>
+					<Sidebar.MenuSub>
+						<Sidebar.MenuSubItem>
+							<Sidebar.MenuSubButton class="cursor-pointer">
+								{#snippet child({ props })}
+									<CreatePlaylistDialog class={cn(props.class ?? '', 'w-full')}>
+										<CirclePlus class="!text-inherit" />
+										<span>Create Playlist</span>
+									</CreatePlaylistDialog>
+								{/snippet}
+							</Sidebar.MenuSubButton>
+						</Sidebar.MenuSubItem>
+						{#each library.playlists as playlist}
+							<Sidebar.MenuSubItem>
+								<Sidebar.MenuSubButton class="cursor-pointer">
+									{playlist.name}
+								</Sidebar.MenuSubButton>
+							</Sidebar.MenuSubItem>
+						{/each}
+					</Sidebar.MenuSub>
 				</Sidebar.MenuItem>
 			</Sidebar.Menu>
 		</Sidebar.Group>
diff --git a/src/lib/components/groove/CreatePlaylistDialog.svelte b/src/lib/components/groove/CreatePlaylistDialog.svelte
new file mode 100644
index 0000000..8c9297a
--- /dev/null
+++ b/src/lib/components/groove/CreatePlaylistDialog.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { enhance } from '$app/forms';
+	import { Input } from '$lib/components/ui/input';
+	import { Button } from '$lib/components/ui/button';
+	import CirclePlus from 'virtual:icons/lucide/circle-plus';
+	import type { SubmitFunction } from '../../../routes/playlists/$types';
+
+	interface Props {
+		children?: Snippet;
+		[key: string]: any;
+	}
+
+	let { children, ...props }: Props = $props();
+
+	let name = $state('');
+	let submitting = $state(false);
+	let isOpen = $state(false);
+
+	const createPlaylist: SubmitFunction = async ({ cancel }) => {
+		if (submitting) {
+			cancel();
+			return;
+		}
+
+		submitting = true;
+		isOpen = false;
+
+		return async ({ update }) => {
+			await update({
+				invalidateAll: true,
+				reset: true
+			});
+
+			submitting = false;
+		};
+	};
+</script>
+
+<Dialog.Root bind:open={isOpen}>
+	<Dialog.Trigger {...props}>
+		{@render children?.()}
+	</Dialog.Trigger>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Name your Playlist</Dialog.Title>
+			<Dialog.Description>Make it memorable</Dialog.Description>
+		</Dialog.Header>
+
+		<form method="POST" action="/playlists?/create" use:enhance={createPlaylist}>
+			<Input
+				name="name"
+				placeholder="My awesome playlist"
+				minlength={1}
+				maxlength={24}
+				bind:value={name}
+			/>
+			<Button
+				type="submit"
+				class="mt-2 w-full"
+				disabled={submitting || name.length < 1 || name.length > 24}
+			>
+				<CirclePlus />
+				Create
+			</Button>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/src/lib/components/groove/Footer.svelte b/src/lib/components/groove/Footer.svelte
index 319dedd..d873a4d 100644
--- a/src/lib/components/groove/Footer.svelte
+++ b/src/lib/components/groove/Footer.svelte
@@ -52,10 +52,6 @@
 		};
 	};
 
-	async function skipToQueueIndex(index: number) {
-		console.log(`SKIP TO QUEUE INDEX ${index}`);
-	}
-
 	const submitPlayerAction: SubmitFunction = async () => {
 		return async ({ update, result }) => {
 			await update({
diff --git a/src/lib/components/groove/PlaylistListing.svelte b/src/lib/components/groove/PlaylistListing.svelte
new file mode 100644
index 0000000..9d4da20
--- /dev/null
+++ b/src/lib/components/groove/PlaylistListing.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+	import type { Track } from '$lib/proto/library';
+	import dayjs from 'dayjs';
+	import { Button } from '$lib/components/ui/button';
+	import Trash2 from 'virtual:icons/lucide/trash-2';
+	import { enhance } from '$app/forms';
+	import Play from 'virtual:icons/lucide/play';
+	import type { SubmitFunction } from '../../../routes/playlists/[id]/$types';
+	import { getCoverUrl } from '$lib/covers';
+	import { getLibraryState } from '$lib/library.svelte';
+
+	interface Props {
+		id: number;
+		name: string;
+		tracks: Track[];
+	}
+
+	let { id, name, tracks }: Props = $props();
+	let totalDuration = $derived<number>(
+		tracks.reduce((acc, track) => acc + Number(track.duration), 0)
+	);
+
+	const library = getLibraryState();
+
+	let coverImages = $derived.by(() => {
+		if (tracks.length === 0) {
+			return [];
+		}
+
+		if (tracks.length >= 4) {
+			return tracks.slice(0, 4).map((t) => getCoverUrl(t.hash));
+		}
+
+		if (tracks.length === 1) {
+			return [getCoverUrl(tracks[0].hash)];
+		}
+
+		if (tracks.length === 2) {
+			const x = getCoverUrl(tracks[0].hash);
+			const y = getCoverUrl(tracks[1].hash);
+			return [x, y, y, x];
+		}
+
+		let _covers: string[] = [];
+
+		let i = 0;
+		while (_covers.length < 4) {
+			_covers.push(getCoverUrl(tracks[i].hash));
+			i = (i + 1) % tracks.length;
+		}
+
+		return _covers;
+	});
+
+	const playPlaylist: SubmitFunction = async () => {
+		return async ({ update }) => {
+			await update({
+				invalidateAll: false,
+				reset: false
+			});
+		};
+	};
+
+	// TODO: Refactor
+	const deletePlaylist: SubmitFunction = async ({ action }) => {
+		const playlistId = parseInt(action.pathname.split('/playlists/')[1].split('/')[0]);
+
+		return async ({ update, result }) => {
+			await update({
+				invalidateAll: false,
+				reset: false
+			});
+
+			if (result.type === 'success') {
+				library.playlists = library.playlists.filter((p) => p.id !== playlistId);
+			}
+		};
+	};
+</script>
+
+<div class="overflow-hidden rounded-md border">
+	<div class="relative grid" class:grid-cols-2={coverImages.length > 1}>
+		{#each coverImages as cover}
+			<img class="aspect-square" src={cover} alt="" />
+		{:else}
+			<div class="w-full aspect-square animate-pulse bg-secondary"></div>
+		{/each}
+	</div>
+	<div class="space-y-2 p-4">
+		<div class="relative space-y-2">
+			<h3 class="font-medium leading-none">{name}</h3>
+			<div>
+				<p class="text-xs text-muted-foreground">
+					{dayjs(totalDuration, 'milliseconds').format('mm:ss')}
+				</p>
+				<p class="text-xs text-muted-foreground">
+					{tracks.length} track{tracks.length !== 1 ? 's' : ''}
+				</p>
+			</div>
+		</div>
+		<div class="flex w-full justify-between gap-1">
+			<form method="POST" action="/playlists/{id}?/play" use:enhance={playPlaylist}>
+				<Button type="submit" variant="outline" size="icon">
+					<Play />
+				</Button>
+			</form>
+
+			<form method="POST" action="/playlists/{id}?/delete" use:enhance={deletePlaylist}>
+				<Button type="submit" variant="outline" size="icon">
+					<Trash2 />
+				</Button>
+			</form>
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/groove/Queue.svelte b/src/lib/components/groove/Queue.svelte
index 9781dc2..1f7bf4c 100644
--- a/src/lib/components/groove/Queue.svelte
+++ b/src/lib/components/groove/Queue.svelte
@@ -2,9 +2,9 @@
 	import { deserialize, enhance } from '$app/forms';
 	import { getCoverUrl } from '$lib/covers';
 	import { getPlayerState } from '$lib/player.svelte';
-	import { flip } from 'svelte/animate';
 	import type { SubmitFunction } from '../../../routes/player/$types';
 	import type { Track } from '$lib/proto/library';
+	import { ScrollArea } from '$lib/components/ui/scroll-area';
 
 	const player = getPlayerState();
 
@@ -63,37 +63,35 @@
 	}
 </script>
 
-<form
-	class="flex h-full flex-col gap-1 overflow-y-auto"
-	method="POST"
-	use:enhance={submitPlayerAction}
->
-	{#each player.queue as track, i}
-		<button
-			type="submit"
-			class="flex flex-row items-center gap-2 rounded-lg px-3 py-2 transition-all hover:bg-secondary"
-			formaction="/player?/skip-to-queue-index&index={i}"
-			draggable={true}
-			ondragstart={onDragStart}
-			ondrop={onDrop}
-			ondragover={(e) => e.preventDefault()}
-			data-queue-index={i}
-		>
-			<div class="min-w-8 overflow-hidden rounded-md">
-				<img src={getCoverUrl(track.hash)} class="aspect-square size-8" alt="Cover" />
-			</div>
-			<div class="flex flex-col overflow-hidden">
-				<p
-					class="w-full self-start overflow-hidden text-ellipsis text-nowrap text-left text-sm text-foreground/80"
-				>
-					{track.name}
-				</p>
-				<p class="w-full self-start overflow-hidden text-left text-xs text-muted-foreground">
-					{track.artistName}
-				</p>
-			</div>
-		</button>
-	{/each}
+<form class="flex w-full flex-col overflow-y-hidden" method="POST" use:enhance={submitPlayerAction}>
+	<ScrollArea class="flex h-full w-full flex-col pr-3">
+		{#each player.queue as track, i}
+			<button
+				type="submit"
+				class="flex w-full flex-row items-center gap-2 rounded-lg px-3 py-2 transition-all hover:bg-secondary"
+				formaction="/player?/skip-to-queue-index&index={i}"
+				draggable={true}
+				ondragstart={onDragStart}
+				ondrop={onDrop}
+				ondragover={(e) => e.preventDefault()}
+				data-queue-index={i}
+			>
+				<div class="min-w-8 overflow-hidden rounded-md">
+					<img src={getCoverUrl(track.hash)} class="aspect-square size-8" alt="Cover" />
+				</div>
+				<div class="flex flex-col overflow-hidden">
+					<p
+						class="w-full self-start overflow-hidden text-ellipsis text-nowrap text-left text-sm text-foreground/80"
+					>
+						{track.name}
+					</p>
+					<p class="w-full self-start overflow-hidden text-left text-xs text-muted-foreground">
+						{track.artistName}
+					</p>
+				</div>
+			</button>
+		{/each}
+	</ScrollArea>
 </form>
 
 <style>
diff --git a/src/lib/components/ui/accordion/accordion-content.svelte b/src/lib/components/ui/accordion/accordion-content.svelte
new file mode 100644
index 0000000..f2cfe88
--- /dev/null
+++ b/src/lib/components/ui/accordion/accordion-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	class={cn(
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+		className
+	)}
+	{...restProps}
+>
+	<div class="pb-4 pt-0">
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>
diff --git a/src/lib/components/ui/accordion/accordion-item.svelte b/src/lib/components/ui/accordion/accordion-item.svelte
new file mode 100644
index 0000000..852bcf3
--- /dev/null
+++ b/src/lib/components/ui/accordion/accordion-item.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />
diff --git a/src/lib/components/ui/accordion/accordion-trigger.svelte b/src/lib/components/ui/accordion/accordion-trigger.svelte
new file mode 100644
index 0000000..6c033b9
--- /dev/null
+++ b/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		bind:ref
+		class={cn(
+			"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDown
+			class="text-muted-foreground size-4 shrink-0 transition-transform duration-200"
+		/>
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>
diff --git a/src/lib/components/ui/accordion/index.ts b/src/lib/components/ui/accordion/index.ts
new file mode 100644
index 0000000..3fc36e7
--- /dev/null
+++ b/src/lib/components/ui/accordion/index.ts
@@ -0,0 +1,17 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+
+const Root = AccordionPrimitive.Root;
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};
diff --git a/src/lib/components/ui/card/card-content.svelte b/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..1f52856
--- /dev/null
+++ b/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-description.svelte b/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..da02664
--- /dev/null
+++ b/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+	{@render children?.()}
+</p>
diff --git a/src/lib/components/ui/card/card-footer.svelte b/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..6894149
--- /dev/null
+++ b/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-header.svelte b/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..1baa92c
--- /dev/null
+++ b/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card-title.svelte b/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..a201620
--- /dev/null
+++ b/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
+</script>
+
+<div
+	role="heading"
+	aria-level={level}
+	bind:this={ref}
+	class={cn("font-semibold leading-none tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/card.svelte b/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..c7531d5
--- /dev/null
+++ b/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("bg-card text-card-foreground rounded-xl border shadow", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/card/index.ts b/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..0f9084d
--- /dev/null
+++ b/src/lib/components/ui/card/index.ts
@@ -0,0 +1,22 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+};
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000..b3cd753
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import X from "lucide-svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+	} = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<DialogPrimitive.Close
+			class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+		>
+			<X class="size-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>
diff --git a/src/lib/components/ui/dialog/dialog-description.svelte b/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000..bc048e4
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-footer.svelte b/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000..91ecaba
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-header.svelte b/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000..8d1abfc
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/dialog/dialog-overlay.svelte b/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..05c30ac
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/dialog-title.svelte b/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000..9cf592c
--- /dev/null
+++ b/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/dialog/index.ts b/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000..7c2cd73
--- /dev/null
+++ b/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+
+const Root: typeof DialogPrimitive.Root = DialogPrimitive.Root;
+const Trigger: typeof DialogPrimitive.Trigger = DialogPrimitive.Trigger;
+const Close: typeof DialogPrimitive.Close = DialogPrimitive.Close;
+const Portal: typeof DialogPrimitive.Portal = DialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};
diff --git a/src/lib/library.svelte.ts b/src/lib/library.svelte.ts
new file mode 100644
index 0000000..1757189
--- /dev/null
+++ b/src/lib/library.svelte.ts
@@ -0,0 +1,24 @@
+import { getContext, setContext } from 'svelte';
+import { Playlist, type Track } from './proto/library';
+
+// TODO: Optimize this since storing entire tracks in
+// playlists is redundant if we store all the tracks
+class LibraryState {
+	tracks = $state<Track[]>([]);
+	playlists = $state<Playlist[]>([]);
+
+	constructor(tracks: Track[], playlists: Playlist[]) {
+		this.tracks = tracks;
+		this.playlists = playlists;
+	}
+}
+
+const LIBRARY_KEY = Symbol('GROOVE_LIBRARY');
+
+export function setLibraryState(tracks: Track[], playlists: Playlist[]) {
+	return setContext(LIBRARY_KEY, new LibraryState(tracks, playlists));
+}
+
+export function getLibraryState() {
+	return getContext<ReturnType<typeof setLibraryState>>(LIBRARY_KEY);
+}
diff --git a/src/lib/proto/library.client.ts b/src/lib/proto/library.client.ts
index 5ed1214..614bca7 100644
--- a/src/lib/proto/library.client.ts
+++ b/src/lib/proto/library.client.ts
@@ -4,6 +4,12 @@
 import type { RpcTransport } from "@protobuf-ts/runtime-rpc";
 import type { ServiceInfo } from "@protobuf-ts/runtime-rpc";
 import { Library } from "./library";
+import type { RemoveTrackFromPlaylistRequest } from "./library";
+import type { AddTrackToPlaylistRequest } from "./library";
+import type { DeletePlaylistRequest } from "./library";
+import type { CreatePlaylistResponse } from "./library";
+import type { CreatePlaylistRequest } from "./library";
+import type { ListPlaylistsResponse } from "./library";
 import { stackIntercept } from "@protobuf-ts/runtime-rpc";
 import type { TrackList } from "./library";
 import type { Empty } from "./google/protobuf/empty";
@@ -17,6 +23,26 @@ export interface ILibraryClient {
      * @generated from protobuf rpc: ListTracks(google.protobuf.Empty) returns (library.TrackList);
      */
     listTracks(input: Empty, options?: RpcOptions): UnaryCall<Empty, TrackList>;
+    /**
+     * @generated from protobuf rpc: ListPlaylists(google.protobuf.Empty) returns (library.ListPlaylistsResponse);
+     */
+    listPlaylists(input: Empty, options?: RpcOptions): UnaryCall<Empty, ListPlaylistsResponse>;
+    /**
+     * @generated from protobuf rpc: CreatePlaylist(library.CreatePlaylistRequest) returns (library.CreatePlaylistResponse);
+     */
+    createPlaylist(input: CreatePlaylistRequest, options?: RpcOptions): UnaryCall<CreatePlaylistRequest, CreatePlaylistResponse>;
+    /**
+     * @generated from protobuf rpc: DeletePlaylist(library.DeletePlaylistRequest) returns (google.protobuf.Empty);
+     */
+    deletePlaylist(input: DeletePlaylistRequest, options?: RpcOptions): UnaryCall<DeletePlaylistRequest, Empty>;
+    /**
+     * @generated from protobuf rpc: AddTrackToPlaylist(library.AddTrackToPlaylistRequest) returns (google.protobuf.Empty);
+     */
+    addTrackToPlaylist(input: AddTrackToPlaylistRequest, options?: RpcOptions): UnaryCall<AddTrackToPlaylistRequest, Empty>;
+    /**
+     * @generated from protobuf rpc: RemoveTrackFromPlaylist(library.RemoveTrackFromPlaylistRequest) returns (google.protobuf.Empty);
+     */
+    removeTrackFromPlaylist(input: RemoveTrackFromPlaylistRequest, options?: RpcOptions): UnaryCall<RemoveTrackFromPlaylistRequest, Empty>;
 }
 /**
  * @generated from protobuf service library.Library
@@ -34,4 +60,39 @@ export class LibraryClient implements ILibraryClient, ServiceInfo {
         const method = this.methods[0], opt = this._transport.mergeOptions(options);
         return stackIntercept<Empty, TrackList>("unary", this._transport, method, opt, input);
     }
+    /**
+     * @generated from protobuf rpc: ListPlaylists(google.protobuf.Empty) returns (library.ListPlaylistsResponse);
+     */
+    listPlaylists(input: Empty, options?: RpcOptions): UnaryCall<Empty, ListPlaylistsResponse> {
+        const method = this.methods[1], opt = this._transport.mergeOptions(options);
+        return stackIntercept<Empty, ListPlaylistsResponse>("unary", this._transport, method, opt, input);
+    }
+    /**
+     * @generated from protobuf rpc: CreatePlaylist(library.CreatePlaylistRequest) returns (library.CreatePlaylistResponse);
+     */
+    createPlaylist(input: CreatePlaylistRequest, options?: RpcOptions): UnaryCall<CreatePlaylistRequest, CreatePlaylistResponse> {
+        const method = this.methods[2], opt = this._transport.mergeOptions(options);
+        return stackIntercept<CreatePlaylistRequest, CreatePlaylistResponse>("unary", this._transport, method, opt, input);
+    }
+    /**
+     * @generated from protobuf rpc: DeletePlaylist(library.DeletePlaylistRequest) returns (google.protobuf.Empty);
+     */
+    deletePlaylist(input: DeletePlaylistRequest, options?: RpcOptions): UnaryCall<DeletePlaylistRequest, Empty> {
+        const method = this.methods[3], opt = this._transport.mergeOptions(options);
+        return stackIntercept<DeletePlaylistRequest, Empty>("unary", this._transport, method, opt, input);
+    }
+    /**
+     * @generated from protobuf rpc: AddTrackToPlaylist(library.AddTrackToPlaylistRequest) returns (google.protobuf.Empty);
+     */
+    addTrackToPlaylist(input: AddTrackToPlaylistRequest, options?: RpcOptions): UnaryCall<AddTrackToPlaylistRequest, Empty> {
+        const method = this.methods[4], opt = this._transport.mergeOptions(options);
+        return stackIntercept<AddTrackToPlaylistRequest, Empty>("unary", this._transport, method, opt, input);
+    }
+    /**
+     * @generated from protobuf rpc: RemoveTrackFromPlaylist(library.RemoveTrackFromPlaylistRequest) returns (google.protobuf.Empty);
+     */
+    removeTrackFromPlaylist(input: RemoveTrackFromPlaylistRequest, options?: RpcOptions): UnaryCall<RemoveTrackFromPlaylistRequest, Empty> {
+        const method = this.methods[5], opt = this._transport.mergeOptions(options);
+        return stackIntercept<RemoveTrackFromPlaylistRequest, Empty>("unary", this._transport, method, opt, input);
+    }
 }
diff --git a/src/lib/proto/library.ts b/src/lib/proto/library.ts
index 75d0a14..490edc1 100644
--- a/src/lib/proto/library.ts
+++ b/src/lib/proto/library.ts
@@ -46,6 +46,85 @@ export interface Track {
      */
     duration: bigint;
 }
+/**
+ * @generated from protobuf message library.Playlist
+ */
+export interface Playlist {
+    /**
+     * @generated from protobuf field: uint32 id = 1;
+     */
+    id: number;
+    /**
+     * @generated from protobuf field: string name = 2;
+     */
+    name: string;
+    /**
+     * @generated from protobuf field: repeated library.Track tracks = 3;
+     */
+    tracks: Track[];
+}
+/**
+ * @generated from protobuf message library.ListPlaylistsResponse
+ */
+export interface ListPlaylistsResponse {
+    /**
+     * @generated from protobuf field: repeated library.Playlist playlists = 1;
+     */
+    playlists: Playlist[];
+}
+/**
+ * @generated from protobuf message library.CreatePlaylistRequest
+ */
+export interface CreatePlaylistRequest {
+    /**
+     * @generated from protobuf field: string name = 1;
+     */
+    name: string;
+}
+/**
+ * @generated from protobuf message library.CreatePlaylistResponse
+ */
+export interface CreatePlaylistResponse {
+    /**
+     * @generated from protobuf field: library.Playlist playlist = 1;
+     */
+    playlist?: Playlist;
+}
+/**
+ * @generated from protobuf message library.DeletePlaylistRequest
+ */
+export interface DeletePlaylistRequest {
+    /**
+     * @generated from protobuf field: uint32 id = 1;
+     */
+    id: number;
+}
+/**
+ * @generated from protobuf message library.AddTrackToPlaylistRequest
+ */
+export interface AddTrackToPlaylistRequest {
+    /**
+     * @generated from protobuf field: uint32 playlist_id = 1;
+     */
+    playlistId: number;
+    /**
+     * @generated from protobuf field: string track_hash = 2;
+     */
+    trackHash: string;
+}
+/**
+ * @generated from protobuf message library.RemoveTrackFromPlaylistRequest
+ */
+export interface RemoveTrackFromPlaylistRequest {
+    /**
+     * @generated from protobuf field: uint32 playlist_id = 1;
+     */
+    playlistId: number;
+    /**
+     * @generated from protobuf field: uint32 track_rank = 2;
+     */
+    trackRank: number;
+}
 // @generated message type with reflection information, may provide speed optimized methods
 class TrackList$Type extends MessageType<TrackList> {
     constructor() {
@@ -172,9 +251,374 @@ class Track$Type extends MessageType<Track> {
  * @generated MessageType for protobuf message library.Track
  */
 export const Track = new Track$Type();
+// @generated message type with reflection information, may provide speed optimized methods
+class Playlist$Type extends MessageType<Playlist> {
+    constructor() {
+        super("library.Playlist", [
+            { no: 1, name: "id", kind: "scalar", T: 13 /*ScalarType.UINT32*/ },
+            { no: 2, name: "name", kind: "scalar", T: 9 /*ScalarType.STRING*/ },
+            { no: 3, name: "tracks", kind: "message", repeat: 1 /*RepeatType.PACKED*/, T: () => Track }
+        ]);
+    }
+    create(value?: PartialMessage<Playlist>): Playlist {
+        const message = globalThis.Object.create((this.messagePrototype!));
+        message.id = 0;
+        message.name = "";
+        message.tracks = [];
+        if (value !== undefined)
+            reflectionMergePartial<Playlist>(this, message, value);
+        return message;
+    }
+    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: Playlist): Playlist {
+        let message = target ?? this.create(), end = reader.pos + length;
+        while (reader.pos < end) {
+            let [fieldNo, wireType] = reader.tag();
+            switch (fieldNo) {
+                case /* uint32 id */ 1:
+                    message.id = reader.uint32();
+                    break;
+                case /* string name */ 2:
+                    message.name = reader.string();
+                    break;
+                case /* repeated library.Track tracks */ 3:
+                    message.tracks.push(Track.internalBinaryRead(reader, reader.uint32(), options));
+                    break;
+                default:
+                    let u = options.readUnknownField;
+                    if (u === "throw")
+                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
+                    let d = reader.skip(wireType);
+                    if (u !== false)
+                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
+            }
+        }
+        return message;
+    }
+    internalBinaryWrite(message: Playlist, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
+        /* uint32 id = 1; */
+        if (message.id !== 0)
+            writer.tag(1, WireType.Varint).uint32(message.id);
+        /* string name = 2; */
+        if (message.name !== "")
+            writer.tag(2, WireType.LengthDelimited).string(message.name);
+        /* repeated library.Track tracks = 3; */
+        for (let i = 0; i < message.tracks.length; i++)
+            Track.internalBinaryWrite(message.tracks[i], writer.tag(3, WireType.LengthDelimited).fork(), options).join();
+        let u = options.writeUnknownFields;
+        if (u !== false)
+            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
+        return writer;
+    }
+}
+/**
+ * @generated MessageType for protobuf message library.Playlist
+ */
+export const Playlist = new Playlist$Type();
+// @generated message type with reflection information, may provide speed optimized methods
+class ListPlaylistsResponse$Type extends MessageType<ListPlaylistsResponse> {
+    constructor() {
+        super("library.ListPlaylistsResponse", [
+            { no: 1, name: "playlists", kind: "message", repeat: 1 /*RepeatType.PACKED*/, T: () => Playlist }
+        ]);
+    }
+    create(value?: PartialMessage<ListPlaylistsResponse>): ListPlaylistsResponse {
+        const message = globalThis.Object.create((this.messagePrototype!));
+        message.playlists = [];
+        if (value !== undefined)
+            reflectionMergePartial<ListPlaylistsResponse>(this, message, value);
+        return message;
+    }
+    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: ListPlaylistsResponse): ListPlaylistsResponse {
+        let message = target ?? this.create(), end = reader.pos + length;
+        while (reader.pos < end) {
+            let [fieldNo, wireType] = reader.tag();
+            switch (fieldNo) {
+                case /* repeated library.Playlist playlists */ 1:
+                    message.playlists.push(Playlist.internalBinaryRead(reader, reader.uint32(), options));
+                    break;
+                default:
+                    let u = options.readUnknownField;
+                    if (u === "throw")
+                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
+                    let d = reader.skip(wireType);
+                    if (u !== false)
+                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
+            }
+        }
+        return message;
+    }
+    internalBinaryWrite(message: ListPlaylistsResponse, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
+        /* repeated library.Playlist playlists = 1; */
+        for (let i = 0; i < message.playlists.length; i++)
+            Playlist.internalBinaryWrite(message.playlists[i], writer.tag(1, WireType.LengthDelimited).fork(), options).join();
+        let u = options.writeUnknownFields;
+        if (u !== false)
+            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
+        return writer;
+    }
+}
+/**
+ * @generated MessageType for protobuf message library.ListPlaylistsResponse
+ */
+export const ListPlaylistsResponse = new ListPlaylistsResponse$Type();
+// @generated message type with reflection information, may provide speed optimized methods
+class CreatePlaylistRequest$Type extends MessageType<CreatePlaylistRequest> {
+    constructor() {
+        super("library.CreatePlaylistRequest", [
+            { no: 1, name: "name", kind: "scalar", T: 9 /*ScalarType.STRING*/ }
+        ]);
+    }
+    create(value?: PartialMessage<CreatePlaylistRequest>): CreatePlaylistRequest {
+        const message = globalThis.Object.create((this.messagePrototype!));
+        message.name = "";
+        if (value !== undefined)
+            reflectionMergePartial<CreatePlaylistRequest>(this, message, value);
+        return message;
+    }
+    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: CreatePlaylistRequest): CreatePlaylistRequest {
+        let message = target ?? this.create(), end = reader.pos + length;
+        while (reader.pos < end) {
+            let [fieldNo, wireType] = reader.tag();
+            switch (fieldNo) {
+                case /* string name */ 1:
+                    message.name = reader.string();
+                    break;
+                default:
+                    let u = options.readUnknownField;
+                    if (u === "throw")
+                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
+                    let d = reader.skip(wireType);
+                    if (u !== false)
+                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
+            }
+        }
+        return message;
+    }
+    internalBinaryWrite(message: CreatePlaylistRequest, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
+        /* string name = 1; */
+        if (message.name !== "")
+            writer.tag(1, WireType.LengthDelimited).string(message.name);
+        let u = options.writeUnknownFields;
+        if (u !== false)
+            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
+        return writer;
+    }
+}
+/**
+ * @generated MessageType for protobuf message library.CreatePlaylistRequest
+ */
+export const CreatePlaylistRequest = new CreatePlaylistRequest$Type();
+// @generated message type with reflection information, may provide speed optimized methods
+class CreatePlaylistResponse$Type extends MessageType<CreatePlaylistResponse> {
+    constructor() {
+        super("library.CreatePlaylistResponse", [
+            { no: 1, name: "playlist", kind: "message", T: () => Playlist }
+        ]);
+    }
+    create(value?: PartialMessage<CreatePlaylistResponse>): CreatePlaylistResponse {
+        const message = globalThis.Object.create((this.messagePrototype!));
+        if (value !== undefined)
+            reflectionMergePartial<CreatePlaylistResponse>(this, message, value);
+        return message;
+    }
+    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: CreatePlaylistResponse): CreatePlaylistResponse {
+        let message = target ?? this.create(), end = reader.pos + length;
+        while (reader.pos < end) {
+            let [fieldNo, wireType] = reader.tag();
+            switch (fieldNo) {
+                case /* library.Playlist playlist */ 1:
+                    message.playlist = Playlist.internalBinaryRead(reader, reader.uint32(), options, message.playlist);
+                    break;
+                default:
+                    let u = options.readUnknownField;
+                    if (u === "throw")
+                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
+                    let d = reader.skip(wireType);
+                    if (u !== false)
+                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
+            }
+        }
+        return message;
+    }
+    internalBinaryWrite(message: CreatePlaylistResponse, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
+        /* library.Playlist playlist = 1; */
+        if (message.playlist)
+            Playlist.internalBinaryWrite(message.playlist, writer.tag(1, WireType.LengthDelimited).fork(), options).join();
+        let u = options.writeUnknownFields;
+        if (u !== false)
+            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
+        return writer;
+    }
+}
+/**
+ * @generated MessageType for protobuf message library.CreatePlaylistResponse
+ */
+export const CreatePlaylistResponse = new CreatePlaylistResponse$Type();
+// @generated message type with reflection information, may provide speed optimized methods
+class DeletePlaylistRequest$Type extends MessageType<DeletePlaylistRequest> {
+    constructor() {
+        super("library.DeletePlaylistRequest", [
+            { no: 1, name: "id", kind: "scalar", T: 13 /*ScalarType.UINT32*/ }
+        ]);
+    }
+    create(value?: PartialMessage<DeletePlaylistRequest>): DeletePlaylistRequest {
+        const message = globalThis.Object.create((this.messagePrototype!));
+        message.id = 0;
+        if (value !== undefined)
+            reflectionMergePartial<DeletePlaylistRequest>(this, message, value);
+        return message;
+    }
+    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: DeletePlaylistRequest): DeletePlaylistRequest {
+        let message = target ?? this.create(), end = reader.pos + length;
+        while (reader.pos < end) {
+            let [fieldNo, wireType] = reader.tag();
+            switch (fieldNo) {
+                case /* uint32 id */ 1:
+                    message.id = reader.uint32();
+                    break;
+                default:
+                    let u = options.readUnknownField;
+                    if (u === "throw")
+                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
+                    let d = reader.skip(wireType);
+                    if (u !== false)
+                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
+            }
+        }
+        return message;
+    }
+    internalBinaryWrite(message: DeletePlaylistRequest, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
+        /* uint32 id = 1; */
+        if (message.id !== 0)
+            writer.tag(1, WireType.Varint).uint32(message.id);
+        let u = options.writeUnknownFields;
+        if (u !== false)
+            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
+        return writer;
+    }
+}
+/**
+ * @generated MessageType for protobuf message library.DeletePlaylistRequest
+ */
+export const DeletePlaylistRequest = new DeletePlaylistRequest$Type();
+// @generated message type with reflection information, may provide speed optimized methods
+class AddTrackToPlaylistRequest$Type extends MessageType<AddTrackToPlaylistRequest> {
+    constructor() {
+        super("library.AddTrackToPlaylistRequest", [
+            { no: 1, name: "playlist_id", kind: "scalar", T: 13 /*ScalarType.UINT32*/ },
+            { no: 2, name: "track_hash", kind: "scalar", T: 9 /*ScalarType.STRING*/ }
+        ]);
+    }
+    create(value?: PartialMessage<AddTrackToPlaylistRequest>): AddTrackToPlaylistRequest {
+        const message = globalThis.Object.create((this.messagePrototype!));
+        message.playlistId = 0;
+        message.trackHash = "";
+        if (value !== undefined)
+            reflectionMergePartial<AddTrackToPlaylistRequest>(this, message, value);
+        return message;
+    }
+    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: AddTrackToPlaylistRequest): AddTrackToPlaylistRequest {
+        let message = target ?? this.create(), end = reader.pos + length;
+        while (reader.pos < end) {
+            let [fieldNo, wireType] = reader.tag();
+            switch (fieldNo) {
+                case /* uint32 playlist_id */ 1:
+                    message.playlistId = reader.uint32();
+                    break;
+                case /* string track_hash */ 2:
+                    message.trackHash = reader.string();
+                    break;
+                default:
+                    let u = options.readUnknownField;
+                    if (u === "throw")
+                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
+                    let d = reader.skip(wireType);
+                    if (u !== false)
+                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
+            }
+        }
+        return message;
+    }
+    internalBinaryWrite(message: AddTrackToPlaylistRequest, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
+        /* uint32 playlist_id = 1; */
+        if (message.playlistId !== 0)
+            writer.tag(1, WireType.Varint).uint32(message.playlistId);
+        /* string track_hash = 2; */
+        if (message.trackHash !== "")
+            writer.tag(2, WireType.LengthDelimited).string(message.trackHash);
+        let u = options.writeUnknownFields;
+        if (u !== false)
+            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
+        return writer;
+    }
+}
+/**
+ * @generated MessageType for protobuf message library.AddTrackToPlaylistRequest
+ */
+export const AddTrackToPlaylistRequest = new AddTrackToPlaylistRequest$Type();
+// @generated message type with reflection information, may provide speed optimized methods
+class RemoveTrackFromPlaylistRequest$Type extends MessageType<RemoveTrackFromPlaylistRequest> {
+    constructor() {
+        super("library.RemoveTrackFromPlaylistRequest", [
+            { no: 1, name: "playlist_id", kind: "scalar", T: 13 /*ScalarType.UINT32*/ },
+            { no: 2, name: "track_rank", kind: "scalar", T: 13 /*ScalarType.UINT32*/ }
+        ]);
+    }
+    create(value?: PartialMessage<RemoveTrackFromPlaylistRequest>): RemoveTrackFromPlaylistRequest {
+        const message = globalThis.Object.create((this.messagePrototype!));
+        message.playlistId = 0;
+        message.trackRank = 0;
+        if (value !== undefined)
+            reflectionMergePartial<RemoveTrackFromPlaylistRequest>(this, message, value);
+        return message;
+    }
+    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: RemoveTrackFromPlaylistRequest): RemoveTrackFromPlaylistRequest {
+        let message = target ?? this.create(), end = reader.pos + length;
+        while (reader.pos < end) {
+            let [fieldNo, wireType] = reader.tag();
+            switch (fieldNo) {
+                case /* uint32 playlist_id */ 1:
+                    message.playlistId = reader.uint32();
+                    break;
+                case /* uint32 track_rank */ 2:
+                    message.trackRank = reader.uint32();
+                    break;
+                default:
+                    let u = options.readUnknownField;
+                    if (u === "throw")
+                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
+                    let d = reader.skip(wireType);
+                    if (u !== false)
+                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
+            }
+        }
+        return message;
+    }
+    internalBinaryWrite(message: RemoveTrackFromPlaylistRequest, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
+        /* uint32 playlist_id = 1; */
+        if (message.playlistId !== 0)
+            writer.tag(1, WireType.Varint).uint32(message.playlistId);
+        /* uint32 track_rank = 2; */
+        if (message.trackRank !== 0)
+            writer.tag(2, WireType.Varint).uint32(message.trackRank);
+        let u = options.writeUnknownFields;
+        if (u !== false)
+            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
+        return writer;
+    }
+}
+/**
+ * @generated MessageType for protobuf message library.RemoveTrackFromPlaylistRequest
+ */
+export const RemoveTrackFromPlaylistRequest = new RemoveTrackFromPlaylistRequest$Type();
 /**
  * @generated ServiceType for protobuf service library.Library
  */
 export const Library = new ServiceType("library.Library", [
-    { name: "ListTracks", options: {}, I: Empty, O: TrackList }
+    { name: "ListTracks", options: {}, I: Empty, O: TrackList },
+    { name: "ListPlaylists", options: {}, I: Empty, O: ListPlaylistsResponse },
+    { name: "CreatePlaylist", options: {}, I: CreatePlaylistRequest, O: CreatePlaylistResponse },
+    { name: "DeletePlaylist", options: {}, I: DeletePlaylistRequest, O: Empty },
+    { name: "AddTrackToPlaylist", options: {}, I: AddTrackToPlaylistRequest, O: Empty },
+    { name: "RemoveTrackFromPlaylist", options: {}, I: RemoveTrackFromPlaylistRequest, O: Empty }
 ]);
diff --git a/src/lib/proto/player.client.ts b/src/lib/proto/player.client.ts
index a0c529c..ec8acf3 100644
--- a/src/lib/proto/player.client.ts
+++ b/src/lib/proto/player.client.ts
@@ -6,6 +6,8 @@ import type { ServiceInfo } from "@protobuf-ts/runtime-rpc";
 import { Player } from "./player";
 import type { SkipToQueueIndexRequest } from "./player";
 import type { SwapQueueIndicesRequest } from "./player";
+import type { PlayPlaylistRequest } from "./player";
+import type { TracksRequest } from "./player";
 import type { Queue } from "./player";
 import type { SetVolumeResponse } from "./player";
 import type { SetVolumeRequest } from "./player";
@@ -60,6 +62,14 @@ export interface IPlayerClient {
      * @generated from protobuf rpc: AddTrackToQueue(player.TrackRequest) returns (player.Queue);
      */
     addTrackToQueue(input: TrackRequest, options?: RpcOptions): UnaryCall<TrackRequest, Queue>;
+    /**
+     * @generated from protobuf rpc: AddTracksToQueue(player.TracksRequest) returns (player.Queue);
+     */
+    addTracksToQueue(input: TracksRequest, options?: RpcOptions): UnaryCall<TracksRequest, Queue>;
+    /**
+     * @generated from protobuf rpc: PlayPlaylist(player.PlayPlaylistRequest) returns (player.PlayerStatus);
+     */
+    playPlaylist(input: PlayPlaylistRequest, options?: RpcOptions): UnaryCall<PlayPlaylistRequest, PlayerStatus>;
     /**
      * @generated from protobuf rpc: SwapQueueIndices(player.SwapQueueIndicesRequest) returns (player.Queue);
      */
@@ -145,25 +155,39 @@ export class PlayerClient implements IPlayerClient, ServiceInfo {
         const method = this.methods[8], opt = this._transport.mergeOptions(options);
         return stackIntercept<TrackRequest, Queue>("unary", this._transport, method, opt, input);
     }
+    /**
+     * @generated from protobuf rpc: AddTracksToQueue(player.TracksRequest) returns (player.Queue);
+     */
+    addTracksToQueue(input: TracksRequest, options?: RpcOptions): UnaryCall<TracksRequest, Queue> {
+        const method = this.methods[9], opt = this._transport.mergeOptions(options);
+        return stackIntercept<TracksRequest, Queue>("unary", this._transport, method, opt, input);
+    }
+    /**
+     * @generated from protobuf rpc: PlayPlaylist(player.PlayPlaylistRequest) returns (player.PlayerStatus);
+     */
+    playPlaylist(input: PlayPlaylistRequest, options?: RpcOptions): UnaryCall<PlayPlaylistRequest, PlayerStatus> {
+        const method = this.methods[10], opt = this._transport.mergeOptions(options);
+        return stackIntercept<PlayPlaylistRequest, PlayerStatus>("unary", this._transport, method, opt, input);
+    }
     /**
      * @generated from protobuf rpc: SwapQueueIndices(player.SwapQueueIndicesRequest) returns (player.Queue);
      */
     swapQueueIndices(input: SwapQueueIndicesRequest, options?: RpcOptions): UnaryCall<SwapQueueIndicesRequest, Queue> {
-        const method = this.methods[9], opt = this._transport.mergeOptions(options);
+        const method = this.methods[11], opt = this._transport.mergeOptions(options);
         return stackIntercept<SwapQueueIndicesRequest, Queue>("unary", this._transport, method, opt, input);
     }
     /**
      * @generated from protobuf rpc: SkipTrack(google.protobuf.Empty) returns (player.PlayerStatus);
      */
     skipTrack(input: Empty, options?: RpcOptions): UnaryCall<Empty, PlayerStatus> {
-        const method = this.methods[10], opt = this._transport.mergeOptions(options);
+        const method = this.methods[12], opt = this._transport.mergeOptions(options);
         return stackIntercept<Empty, PlayerStatus>("unary", this._transport, method, opt, input);
     }
     /**
      * @generated from protobuf rpc: SkipToQueueIndex(player.SkipToQueueIndexRequest) returns (player.PlayerStatus);
      */
     skipToQueueIndex(input: SkipToQueueIndexRequest, options?: RpcOptions): UnaryCall<SkipToQueueIndexRequest, PlayerStatus> {
-        const method = this.methods[11], opt = this._transport.mergeOptions(options);
+        const method = this.methods[13], opt = this._transport.mergeOptions(options);
         return stackIntercept<SkipToQueueIndexRequest, PlayerStatus>("unary", this._transport, method, opt, input);
     }
 }
diff --git a/src/lib/proto/player.ts b/src/lib/proto/player.ts
index 07d147d..858b883 100644
--- a/src/lib/proto/player.ts
+++ b/src/lib/proto/player.ts
@@ -136,6 +136,24 @@ export interface SwapQueueIndicesRequest {
      */
     b: number;
 }
+/**
+ * @generated from protobuf message player.TracksRequest
+ */
+export interface TracksRequest {
+    /**
+     * @generated from protobuf field: repeated string tracks = 1;
+     */
+    tracks: string[];
+}
+/**
+ * @generated from protobuf message player.PlayPlaylistRequest
+ */
+export interface PlayPlaylistRequest {
+    /**
+     * @generated from protobuf field: uint32 id = 1;
+     */
+    id: number;
+}
 // @generated message type with reflection information, may provide speed optimized methods
 class TrackRequest$Type extends MessageType<TrackRequest> {
     constructor() {
@@ -699,6 +717,100 @@ class SwapQueueIndicesRequest$Type extends MessageType<SwapQueueIndicesRequest>
  * @generated MessageType for protobuf message player.SwapQueueIndicesRequest
  */
 export const SwapQueueIndicesRequest = new SwapQueueIndicesRequest$Type();
+// @generated message type with reflection information, may provide speed optimized methods
+class TracksRequest$Type extends MessageType<TracksRequest> {
+    constructor() {
+        super("player.TracksRequest", [
+            { no: 1, name: "tracks", kind: "scalar", repeat: 2 /*RepeatType.UNPACKED*/, T: 9 /*ScalarType.STRING*/ }
+        ]);
+    }
+    create(value?: PartialMessage<TracksRequest>): TracksRequest {
+        const message = globalThis.Object.create((this.messagePrototype!));
+        message.tracks = [];
+        if (value !== undefined)
+            reflectionMergePartial<TracksRequest>(this, message, value);
+        return message;
+    }
+    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: TracksRequest): TracksRequest {
+        let message = target ?? this.create(), end = reader.pos + length;
+        while (reader.pos < end) {
+            let [fieldNo, wireType] = reader.tag();
+            switch (fieldNo) {
+                case /* repeated string tracks */ 1:
+                    message.tracks.push(reader.string());
+                    break;
+                default:
+                    let u = options.readUnknownField;
+                    if (u === "throw")
+                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
+                    let d = reader.skip(wireType);
+                    if (u !== false)
+                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
+            }
+        }
+        return message;
+    }
+    internalBinaryWrite(message: TracksRequest, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
+        /* repeated string tracks = 1; */
+        for (let i = 0; i < message.tracks.length; i++)
+            writer.tag(1, WireType.LengthDelimited).string(message.tracks[i]);
+        let u = options.writeUnknownFields;
+        if (u !== false)
+            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
+        return writer;
+    }
+}
+/**
+ * @generated MessageType for protobuf message player.TracksRequest
+ */
+export const TracksRequest = new TracksRequest$Type();
+// @generated message type with reflection information, may provide speed optimized methods
+class PlayPlaylistRequest$Type extends MessageType<PlayPlaylistRequest> {
+    constructor() {
+        super("player.PlayPlaylistRequest", [
+            { no: 1, name: "id", kind: "scalar", T: 13 /*ScalarType.UINT32*/ }
+        ]);
+    }
+    create(value?: PartialMessage<PlayPlaylistRequest>): PlayPlaylistRequest {
+        const message = globalThis.Object.create((this.messagePrototype!));
+        message.id = 0;
+        if (value !== undefined)
+            reflectionMergePartial<PlayPlaylistRequest>(this, message, value);
+        return message;
+    }
+    internalBinaryRead(reader: IBinaryReader, length: number, options: BinaryReadOptions, target?: PlayPlaylistRequest): PlayPlaylistRequest {
+        let message = target ?? this.create(), end = reader.pos + length;
+        while (reader.pos < end) {
+            let [fieldNo, wireType] = reader.tag();
+            switch (fieldNo) {
+                case /* uint32 id */ 1:
+                    message.id = reader.uint32();
+                    break;
+                default:
+                    let u = options.readUnknownField;
+                    if (u === "throw")
+                        throw new globalThis.Error(`Unknown field ${fieldNo} (wire type ${wireType}) for ${this.typeName}`);
+                    let d = reader.skip(wireType);
+                    if (u !== false)
+                        (u === true ? UnknownFieldHandler.onRead : u)(this.typeName, message, fieldNo, wireType, d);
+            }
+        }
+        return message;
+    }
+    internalBinaryWrite(message: PlayPlaylistRequest, writer: IBinaryWriter, options: BinaryWriteOptions): IBinaryWriter {
+        /* uint32 id = 1; */
+        if (message.id !== 0)
+            writer.tag(1, WireType.Varint).uint32(message.id);
+        let u = options.writeUnknownFields;
+        if (u !== false)
+            (u == true ? UnknownFieldHandler.onWrite : u)(this.typeName, message, writer);
+        return writer;
+    }
+}
+/**
+ * @generated MessageType for protobuf message player.PlayPlaylistRequest
+ */
+export const PlayPlaylistRequest = new PlayPlaylistRequest$Type();
 /**
  * @generated ServiceType for protobuf service player.Player
  */
@@ -712,6 +824,8 @@ export const Player = new ServiceType("player.Player", [
     { name: "SetVolume", options: {}, I: SetVolumeRequest, O: SetVolumeResponse },
     { name: "PlayTrackNext", options: {}, I: TrackRequest, O: Queue },
     { name: "AddTrackToQueue", options: {}, I: TrackRequest, O: Queue },
+    { name: "AddTracksToQueue", options: {}, I: TracksRequest, O: Queue },
+    { name: "PlayPlaylist", options: {}, I: PlayPlaylistRequest, O: PlayerStatus },
     { name: "SwapQueueIndices", options: {}, I: SwapQueueIndicesRequest, O: Queue },
     { name: "SkipTrack", options: {}, I: Empty, O: PlayerStatus },
     { name: "SkipToQueueIndex", options: {}, I: SkipToQueueIndexRequest, O: PlayerStatus }
diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts
index acf1397..e4eb8b3 100644
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@@ -1,6 +1,38 @@
+import type { Playlist, Track } from '$lib/proto/library';
+import { LibraryClient } from '$lib/proto/library.client';
+import { protoTransport } from '../hooks.server';
 import type { LayoutServerLoad } from './$types';
 
 export const load: LayoutServerLoad = async () => {
-	// const client = new PlayerClient(protoTransport);
-	// TODO: Get current track
+	const client = new LibraryClient(protoTransport);
+
+	const tracksResponse = await client.listTracks({});
+	const playlistResponse = await client.listPlaylists({});
+
+	// TODO: Extract these mapping functions into a utility function
+
+	const tracks = tracksResponse.response.tracks.map((t) => ({
+		hash: t.hash,
+		name: t.name,
+		artistId: t.artistId,
+		artistName: t.artistName,
+		duration: t.duration
+	}));
+
+	const playlists = playlistResponse.response.playlists.map((p) => ({
+		id: p.id,
+		name: p.name,
+		tracks: p.tracks.map((t) => ({
+			hash: t.hash,
+			name: t.name,
+			artistId: t.artistId,
+			artistName: t.artistName,
+			duration: t.duration
+		}))
+	}));
+
+	return {
+		tracks: tracks as Track[],
+		playlists: playlists as Playlist[]
+	};
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1b88cfa..3c61364 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -6,16 +6,25 @@
 	import Footer from '$lib/components/groove/Footer.svelte';
 	import { ScrollArea } from '$lib/components/ui/scroll-area';
 	import { getPlayerState, setPlayerState } from '$lib/player.svelte';
-	import { onMount } from 'svelte';
+	import { onMount, type Snippet } from 'svelte';
 	import { Separator } from '$lib/components/ui/separator';
 	import { Input } from '$lib/components/ui/input';
 	import { Search } from 'lucide-svelte';
 	import { setSearchState, getSearchState } from '$lib/search.svelte';
+	import { setLibraryState } from '$lib/library.svelte';
+	import type { LayoutServerData } from './$types';
 
-	let { children } = $props();
+	interface Props {
+		data: LayoutServerData;
+		children: Snippet;
+	}
+
+	let { data, children }: Props = $props();
 
 	setPlayerState();
 	setSearchState();
+	setLibraryState(data.tracks, data.playlists);
+
 	const player = getPlayerState();
 	const search = getSearchState();
 
diff --git a/src/routes/playlists/+page.server.ts b/src/routes/playlists/+page.server.ts
index e69de29..f74739f 100644
--- a/src/routes/playlists/+page.server.ts
+++ b/src/routes/playlists/+page.server.ts
@@ -0,0 +1,24 @@
+import { Playlist } from '$lib/proto/library';
+import { LibraryClient } from '$lib/proto/library.client';
+import { fail } from '@sveltejs/kit';
+import { protoTransport } from '../../hooks.server';
+import type { Actions } from './$types';
+import { serializable } from '$lib/proto';
+
+export const actions = {
+	create: async ({ request }) => {
+		const formData = await request.formData();
+
+		const name = formData.get('name')?.toString();
+
+		if (!name) {
+			return fail(400);
+		}
+
+		const client = new LibraryClient(protoTransport);
+
+		const response = await client.createPlaylist({ name });
+
+		return serializable<Playlist>(response.response);
+	}
+} satisfies Actions;
diff --git a/src/routes/playlists/+page.svelte b/src/routes/playlists/+page.svelte
index aeef039..3d9329f 100644
--- a/src/routes/playlists/+page.svelte
+++ b/src/routes/playlists/+page.svelte
@@ -1 +1,14 @@
-Playlists
+<script lang="ts">
+	import PlaylistListing from '$lib/components/groove/PlaylistListing.svelte';
+	import { getLibraryState } from '$lib/library.svelte';
+
+	const library = getLibraryState();
+</script>
+
+<div
+	class="grid grid-cols-2 gap-4 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8"
+>
+	{#each library.playlists as playlist}
+		<PlaylistListing id={playlist.id} name={playlist.name} tracks={playlist.tracks} />
+	{/each}
+</div>
diff --git a/src/routes/playlists/[id]/+page.server.ts b/src/routes/playlists/[id]/+page.server.ts
new file mode 100644
index 0000000..73cb582
--- /dev/null
+++ b/src/routes/playlists/[id]/+page.server.ts
@@ -0,0 +1,19 @@
+import type { Actions } from './$types';
+import { protoTransport } from '../../../hooks.server';
+import { PlayerClient } from '$lib/proto/player.client';
+import { LibraryClient } from '$lib/proto/library.client';
+
+export const actions = {
+	play: async ({ params }) => {
+		const client = new PlayerClient(protoTransport);
+
+		const _response = await client.playPlaylist({
+			id: parseInt(params.id)
+		});
+	},
+	delete: async ({ params }) => {
+		const client = new LibraryClient(protoTransport);
+
+		const _response = await client.deletePlaylist({ id: parseInt(params.id) });
+	}
+} satisfies Actions;
diff --git a/src/routes/playlists/[id]/add-track/[hash]/+page.server.ts b/src/routes/playlists/[id]/add-track/[hash]/+page.server.ts
new file mode 100644
index 0000000..3c44f23
--- /dev/null
+++ b/src/routes/playlists/[id]/add-track/[hash]/+page.server.ts
@@ -0,0 +1,14 @@
+import { LibraryClient } from '$lib/proto/library.client';
+import { protoTransport } from '../../../../../hooks.server';
+import type { Actions } from './$types';
+
+export const actions = {
+	default: async ({ params }) => {
+		const client = new LibraryClient(protoTransport);
+
+		const _response = await client.addTrackToPlaylist({
+			playlistId: parseInt(params.id),
+			trackHash: params.hash
+		});
+	}
+} satisfies Actions;
diff --git a/src/routes/tracks/+page.server.ts b/src/routes/tracks/+page.server.ts
deleted file mode 100644
index 51e2c7f..0000000
--- a/src/routes/tracks/+page.server.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Track } from '$lib/proto/library';
-import { LibraryClient } from '$lib/proto/library.client';
-import { protoTransport } from '../../hooks.server';
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = async () => {
-	const client = new LibraryClient(protoTransport);
-
-	const response = await client.listTracks({});
-
-	const tracks = response.response.tracks.map((t) => ({
-		hash: t.hash,
-		name: t.name,
-		artistId: t.artistId,
-		artistName: t.artistName
-	}));
-
-	return {
-		tracks: tracks as Track[]
-	};
-};
diff --git a/src/routes/tracks/+page.svelte b/src/routes/tracks/+page.svelte
index b2cf2f3..a4fc80e 100644
--- a/src/routes/tracks/+page.svelte
+++ b/src/routes/tracks/+page.svelte
@@ -4,11 +4,15 @@
 	import { getPlayerState } from '$lib/player.svelte';
 	import type { PageServerData } from './$types';
 	import type { SubmitFunction } from './[hash]/$types';
+	import type { SubmitFunction as AddTrackSubmitFunction } from '../playlists/[id]/add-track/[hash]/$types';
 	import * as ContextMenu from '$lib/components/ui/context-menu';
 	import Music2 from 'virtual:icons/lucide/music-2';
 	import ListMusic from 'virtual:icons/lucide/list-music';
 	import ListEnd from 'virtual:icons/lucide/list-end';
+	import ListPlus from 'virtual:icons/lucide/list-plus';
 	import { getSearchState } from '$lib/search.svelte';
+	import { getLibraryState } from '$lib/library.svelte';
+	import { cn } from '$lib/utils';
 
 	interface Props {
 		data: PageServerData;
@@ -18,9 +22,9 @@
 
 	const player = getPlayerState();
 	const search = getSearchState();
+	const library = getLibraryState();
 
 	$effect(() => {
-		console.log('set tracks');
 		search.setTracks(data.tracks);
 	});
 
@@ -57,6 +61,38 @@
 		};
 	};
 
+	// TODO: Optimize this
+	// - reduce indentation
+	// - get rid of the `.find()`s
+	const addTrackToPlaylist: AddTrackSubmitFunction = async ({ action }) => {
+		const playlistId = parseInt(action.pathname.split('/playlists/')[1].split('/')[0]);
+
+		const targetHash = $state.snapshot(contextMenuTarget);
+
+		contextMenuTarget = null;
+
+		return async ({ update, result }) => {
+			await update({
+				invalidateAll: false,
+				reset: false
+			});
+
+			if (result.type === 'success') {
+				const playlist = library.playlists.find((p) => p.id === playlistId);
+
+				if (playlist) {
+					const track = library.tracks.find((t) => t.hash === targetHash);
+
+					if (track) {
+						playlist.tracks.push(track);
+					}
+				}
+
+				library.playlists = library.playlists;
+			}
+		};
+	};
+
 	function contextMenuItemClicked(e: MouseEvent) {
 		e.stopPropagation();
 	}
@@ -111,6 +147,9 @@
 				</button>
 			</form>
 		</ContextMenu.Item>
+
+		<ContextMenu.Separator />
+
 		<ContextMenu.Item class="!p-0">
 			<form
 				class="flex w-full"
@@ -145,6 +184,36 @@
 				</button>
 			</form>
 		</ContextMenu.Item>
+
+		<ContextMenu.Separator />
+
+		<ContextMenu.Sub>
+			<ContextMenu.SubTrigger>
+				<ListPlus class="mr-1 size-4" />
+				Add to Playlist
+			</ContextMenu.SubTrigger>
+			<ContextMenu.SubContent>
+				{#snippet child({ props })}
+					<form {...props} method="POST" use:enhance={addTrackToPlaylist}>
+						{#each library.playlists as playlist}
+							<ContextMenu.Item>
+								{#snippet child({ props })}
+									<button
+										{...props}
+										type="submit"
+										onclick={contextMenuItemClicked}
+										formaction="/playlists/{playlist.id}/add-track/{contextMenuTarget!}"
+										class={cn(props.class ?? '', 'w-full')}
+									>
+										{playlist.name}
+									</button>
+								{/snippet}
+							</ContextMenu.Item>
+						{/each}
+					</form>
+				{/snippet}
+			</ContextMenu.SubContent>
+		</ContextMenu.Sub>
 	</ContextMenu.Content>
 </ContextMenu.Root>