Implement basic listing and creating playlist

app/components/internal/playlists/select/PlaylistCreateDialog.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { toTypedSchema } from "@vee-validate/zod"
+import { useForm } from "vee-validate"
+import * as z from "zod"
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog'
+import Button from '~/components/ui/button/Button.vue';
+import Input from '~/components/ui/input/Input.vue';
+import { toast } from "vue-sonner"
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form"
+import { getPlaylistsQueryKey, useCreatePlaylist } from "~/composeables/api/playlist-controller/playlist-controller"
+import { useQueryClient } from "@tanstack/vue-query";
+
+const formSchema = toTypedSchema(z.object({
+    playlistName: z.string().min(2).max(50).default(''),
+}))
+
+const { isFieldDirty, handleSubmit, resetForm } = useForm({
+    validationSchema: formSchema,
+})
+
+const queryClient = useQueryClient();
+const { mutate: createPlaylistMutation } = useCreatePlaylist({
+    mutation: {
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: getPlaylistsQueryKey() });
+            toast('Successfully created playlist', {
+                description: `Playlist created successfully`,
+            });
+        },
+        onError: () => {
+            toast.error('Cannot create playlist', {
+                description: 'Error occurred during playlist creation, please try again later.',
+            });
+        },
+    },
+});
+
+const onSubmit = handleSubmit(async (values) => {
+    const playlistName = values['playlistName'];
+    open.value = false;
+    createPlaylistMutation({
+        data: {
+            title: playlistName,
+        },
+    });
+})
+
+const open = ref(false)
+</script>
+
+<template>
+    <Dialog v-model:open="open">
+        <DialogTrigger as-child>
+            <slot name="trigger">
+                Create playlist
+            </slot>
+        </DialogTrigger>
+        <DialogContent class="sm:max-w-[425px]">
+            <form @submit.prevent="onSubmit">
+                <DialogHeader>
+                    <DialogTitle>Edit profile</DialogTitle>
+                    <DialogDescription>
+                        Create name for your playlist.
+                    </DialogDescription>
+                </DialogHeader>
+                <div class="py-4">
+                    <FormField v-slot="{ componentField }" name="playlistName" :validate-on-blur="!isFieldDirty">
+                        <FormItem>
+                            <FormLabel>Name</FormLabel>
+                            <FormControl>
+                                <Input type="text" placeholder="shadcn" v-bind="componentField" />
+                            </FormControl>
+                            <FormDescription>
+                                This is your public display name.
+                            </FormDescription>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
+                </div>
+                <DialogFooter>
+                    <Button type="submit">
+                        Create
+                    </Button>
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>

app/components/internal/playlists/select/PlaylistsNotFound.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { FileMusicIcon } from 'lucide-vue-next';
+import Button from '@/components/ui/button/Button.vue';
+import Empty from '@/components/ui/empty/Empty.vue';
+import EmptyContent from '@/components/ui/empty/EmptyContent.vue';
+import EmptyDescription from '@/components/ui/empty/EmptyDescription.vue';
+import EmptyHeader from '@/components/ui/empty/EmptyHeader.vue';
+import EmptyMedia from '@/components/ui/empty/EmptyMedia.vue';
+import EmptyTitle from '@/components/ui/empty/EmptyTitle.vue';
+import PlaylistCreateDialog from './PlaylistCreateDialog.vue';
+
+</script>
+
+<template>
+    <Empty>
+        <EmptyHeader>
+            <EmptyMedia variant="icon">
+                <FileMusicIcon />
+            </EmptyMedia>
+            <EmptyTitle>No playlists found</EmptyTitle>
+            <EmptyDescription>No playlists found, create one right now!</EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+            <PlaylistCreateDialog>
+                <template #trigger>
+                    <Button>Create playlist</Button>
+                </template>
+            </PlaylistCreateDialog>
+        </EmptyContent>
+    </Empty>
+</template>