Implement basic listing and creating playlist

app/layouts/clear.vue

@@ -1,4 +1,7 @@
 <template>
+    <ClientOnly>
+        <Sonner />
+    </ClientOnly>
     <div class="flex flex-1">
         <div class="w-full">
             <header v-if="slots.header">
@@ -13,6 +16,8 @@
 
 <script setup>
 import { useSlots } from 'vue'
+import Sonner from '~/components/ui/sonner/Sonner.vue';
+import 'vue-sonner/style.css'
 
 const slots = useSlots()
 </script>

app/layouts/default.vue

@@ -1,4 +1,7 @@
 <template>
+    <ClientOnly>
+        <Toaster />
+    </ClientOnly>
     <AppSidebar />
     <SidebarInset>
         <div class="flex flex-1">
@@ -21,5 +24,8 @@
 import { useSlots } from 'vue'
 import AppSidebar from '@/components/ui/sidebar/AppSidebar.vue';
 import SidebarInset from '@/components/ui/sidebar/SidebarInset.vue';
+import { Toaster } from '~/components/ui/sonner';
+import 'vue-sonner/style.css'
+
 const slots = useSlots()
 </script>