Add orval and backend integration

app/components/internal/PlaylistSelect.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ChevronsUpDown, Music4 } from 'lucide-vue-next';
+import Frame from '@/components/ui/frame/Frame.vue';
+import Select from '@/components/ui/select/Select.vue';
+import SelectCustomTrigger from '@/components/ui/select/SelectCustomTrigger.vue';
+import { useSidebar } from '@/components/ui/sidebar';
+import SelectContent from '@/components/ui/select/SelectContent.vue';
+import SelectLabel from '@/components/ui/select/SelectLabel.vue';
+import SelectSeparator from '@/components/ui/select/SelectSeparator.vue';
+import SelectGroup from '@/components/ui/select/SelectGroup.vue';
+import SelectItem from '@/components/ui/select/SelectItem.vue';
+import { usePlaylists } from '@/composeables/api/playlist-controller/playlist-controller';
+
+const {
+    open: sidebarOpen,
+} = useSidebar()
+
+const { isLoading, isError, error, data } = usePlaylists();
+</script>
+
+<template>
+    <Select>
+        <div v-if="sidebarOpen" class="hover:bg-sidebar-muted cursor-pointer rounded-md select-none">
+            <SelectCustomTrigger class="w-full flex p-2 gap-2 items-center">
+                <Frame borderRadius="round" background="primary" padding="dense" margin="none">
+                    <Music4 class="text-primary-foreground" :size="24" />
+                </Frame>
+                <div class="overflow-hidden text-start">
+                    <h4 class="text-xl font-semibold tracking-tight truncate">
+                        My playlist
+                    </h4>
+                    <p class="text-sm text-muted-foreground">
+                        11 track(s)
+                    </p>
+                </div>
+                <div class="ml-auto">
+                    <ChevronsUpDown />
+                </div>
+            </SelectCustomTrigger>
+        </div>
+        <div v-if="!sidebarOpen">
+            <div class="flex items-center">
+                <SelectCustomTrigger as-child>
+                    <Frame borderRadius="round" background="primary" padding="dense" margin="none">
+                        <Music4 class="text-primary-foreground" :size="24" />
+                    </Frame>
+                </SelectCustomTrigger>
+            </div>
+        </div>
+        <SelectContent class="w-full" v-if="isLoading">
+            <UiSpinner />
+        </SelectContent>
+        <SelectContent class="w-full" v-else-if="isError">
+            <SelectLabel>{{ error?.message }}</SelectLabel>
+        </SelectContent>
+        <SelectContent class="w-full" v-else-if="data">
+            <SelectLabel>Playlists</SelectLabel>
+            <SelectSeparator />
+            <SelectGroup>
+                <SelectItem value="test">
+                    <span>Test</span>
+                </SelectItem>
+                <SelectItem value="second">
+                    <span>Second</span>
+                </SelectItem>
+                <SelectItem value="third">
+                    <span>Third</span>
+                </SelectItem>
+                <SelectItem value="fourth">
+                    <span>Fourth</span>
+                </SelectItem>
+            </SelectGroup>
+        </SelectContent>
+    </Select>
+</template>