Organize imports, set "side" to Select

app/components/internal/PlaylistSelect.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { ChevronsUpDown, Music4, Plus } from 'lucide-vue-next';
+import PlaylistsNotFound from '@/components/internal/playlists/select/PlaylistsNotFound.vue';
 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 SelectCustomTrigger from '@/components/ui/select/SelectCustomTrigger.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';
+import SelectLabel from '@/components/ui/select/SelectLabel.vue';
+import SelectSeparator from '@/components/ui/select/SelectSeparator.vue';
+import { useSidebar } from '@/components/ui/sidebar';
 import Skeleton from '@/components/ui/skeleton/Skeleton.vue';
-import PlaylistsNotFound from '@/components/internal/playlists/select/PlaylistsNotFound.vue';
+import { usePlaylists } from '@/composeables/api/playlist-controller/playlist-controller';
+import { ChevronsUpDown, Music4, Plus } from 'lucide-vue-next';
 import Button from '../ui/button/Button.vue';
 import PlaylistCreateDialog from './playlists/select/PlaylistCreateDialog.vue';
 
@@ -64,30 +64,34 @@ watch(data, (value) => {
                 </SelectCustomTrigger>
             </div>
         </div>
-        <SelectContent class="w-full" v-if="isLoading">
+        <SelectContent align="start" side="right" :sideOffset="4">
-            <UiSpinner />
+            <div class="w-full">
-        </SelectContent>
+                <div v-if="isLoading">
-        <SelectContent class="w-full" v-else-if="isError">
+                    <UiSpinner />
-            <SelectLabel>{{ error }}</SelectLabel>
+                </div>
-        </SelectContent>
+                <div v-else-if="isError">
-        <SelectContent class="w-full" v-else-if="data">
+                    <SelectLabel>{{ error }}</SelectLabel>
-            <SelectLabel>Playlists</SelectLabel>
+                </div>
-            <SelectSeparator />
+                <div v-else-if="data" class="w-full">
-            <SelectGroup>
+                    <SelectLabel>Playlists</SelectLabel>
-                <SelectItem v-for="item in data.data" :key="item.id" :value="item.id || -1">
+                    <SelectSeparator />
-                    <span>{{ item.title }}</span>
+                    <SelectGroup>
-                </SelectItem>
+                        <SelectItem v-for="item in data.data" :key="item.id" :value="item.id || -1">
-                <PlaylistsNotFound v-if="data.data.length === 0" />
+                            <span>{{ item.title }}</span>
-            </SelectGroup>
+                        </SelectItem>
-            <SelectSeparator v-if="data.data.length > 0" />
+                        <PlaylistsNotFound v-if="data.data.length === 0" />
-            <PlaylistCreateDialog v-if="data.data.length > 0">
+                    </SelectGroup>
-                <template #trigger>
+                    <SelectSeparator v-if="data.data.length > 0" />
-                    <Button variant="outline" size="icon" class="w-full">
+                    <PlaylistCreateDialog v-if="data.data.length > 0">
-                        <Plus />
+                        <template #trigger>
-                        Create playlist
+                            <Button variant="outline" size="icon" class="w-full">
-                    </Button>
+                                <Plus />
-                </template>
+                                Create playlist
-            </PlaylistCreateDialog>
+                            </Button>
+                        </template>
+                    </PlaylistCreateDialog>
+                </div>
+            </div>
         </SelectContent>
     </Select>
 </template>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { toTypedSchema } from "@vee-validate/zod"
+import { toTypedSchema } from "@vee-validate/zod";
-import { useForm } from "vee-validate"
+import { useForm } from "vee-validate";
-import * as z from "zod"
+import * as z from "zod";
 
 import {
     Dialog,
@@ -11,13 +11,13 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-} from '@/components/ui/dialog'
+} 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";
+import { toast } from "vue-sonner";
+import Button from '~/components/ui/button/Button.vue';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
+import Input from '~/components/ui/input/Input.vue';
+import { getPlaylistsQueryKey, useCreatePlaylist } from "~/composeables/api/playlist-controller/playlist-controller";
 
 const formSchema = toTypedSchema(z.object({
     playlistName: z.string().min(2).max(50).default(''),

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

@@ -1,5 +1,4 @@
 <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';
@@ -7,6 +6,7 @@ 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 { FileMusicIcon } from 'lucide-vue-next';
 import PlaylistCreateDialog from './PlaylistCreateDialog.vue';
 
 </script>

app/components/ui/sidebar/AppSidebar.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { ChevronsUpDown, Download, Edit, Music4, Settings, Upload } from "lucide-vue-next"
+import EditAudio from "@/components/icon/EditAudio.vue";
+import PlaylistSelect from "@/components/internal/PlaylistSelect.vue";
 import {
     Sidebar,
     SidebarContent,
     SidebarGroup,
     SidebarGroupContent,
+    SidebarHeader,
     SidebarMenu,
     SidebarMenuButton,
     SidebarMenuItem,
-    SidebarHeader,
     SidebarRail,
-} from "@/components/ui/sidebar"
+} from "@/components/ui/sidebar";
-import EditAudio from "@/components/icon/EditAudio.vue";
+import { Download, Edit, Settings, Upload } from "lucide-vue-next";
-import PlaylistSelect from "@/components/internal/PlaylistSelect.vue";
 
 const items = [
     {