Implement local track upload

Add files modal and X button
Fix PlaylistUploadEntry dialog with dropdown
2026-01-14 00:28:19 +05:00 · 2026-01-13 23:06:14 +05:00 · 2026-01-13 22:32:56 +05:00 · 2026-01-13 22:13:40 +05:00 · 2026-01-08 19:59:00 +05:00 · 2026-01-08 03:57:00 +05:00
46 changed files with 1725 additions and 382 deletions
--- a/app/app.vue
+++ b/app/app.vue
@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { SidebarProvider } from '@/components/ui/sidebar';
-
 const defaultOpen = useCookie<boolean>("sidebar_state");
 </script>

--- a/app/components/action/Draggable.vue
+++ b/app/components/action/Draggable.vue
@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { useDraggable } from '@vue-dnd-kit/core';
-import { computed } from 'vue';
-
-const { index, source } = defineProps<{
-    index: number;
-    source: any[];
-}>();
-
-const { elementRef, handleDragStart, isOvered, isDragging } = useDraggable({
-    data: computed(() => ({
-        index,
-        source,
-    })),
-});
-</script>
-
-<template>
-    <div ref="elementRef" @pointerdown="handleDragStart" :class="{
-        'is-over': isOvered,
-        'is-dragging': isDragging,
-    }" class="draggable">
-        <slot />
-    </div>
-</template>
-
-<style>
-.draggable {
-    cursor: move;
-    user-select: none;
-    touch-action: none;
-}
-
-.is-dragging {
-    opacity: 0.2;
-}
-
-.is-over {
-    padding-top: 0.5rem;
-    border-top: 2px solid var(--border);
-}
-</style>
--- a/app/components/internal/PlaylistSelect.vue
+++ b/app/components/internal/PlaylistSelect.vue
@ -1,20 +1,10 @@
 <script setup lang="ts">
 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 SelectContent from '@/components/ui/select/SelectContent.vue';
-import SelectCustomTrigger from '@/components/ui/select/SelectCustomTrigger.vue';
-import SelectGroup from '@/components/ui/select/SelectGroup.vue';
-import SelectItem from '@/components/ui/select/SelectItem.vue';
-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 { 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';
 import { useCurrentPlaylistStore } from '~/stores/use-current-playlist-store';
+import { useSidebar } from '../ui/sidebar';

 const {
    open: sidebarOpen,
@ -68,7 +58,7 @@ watch(data, (value) => {
        <SelectContent align="start" side="right" :sideOffset="4">
            <div class="w-full">
                <div v-if="isLoading">
-                    <UiSpinner />
+                    <Spinner />
                </div>
                <div v-else-if="isError">
                    <SelectLabel>{{ error }}</SelectLabel>
--- a/app/components/internal/import/uploadentry/PlaylistUploadEntry.vue
+++ b/app/components/internal/import/uploadentry/PlaylistUploadEntry.vue
@ -0,0 +1,197 @@
+<template>
+    <Frame margin="none" class="px-3 py-4 flex items-center gap-2 cursor-pointer" @click="openDialog">
+        <div>
+            <ListMusicIcon :size="40" v-if="hasLoaded" />
+            <CassetteTape :size="40" v-else-if="hasProgress" />
+            <FileQuestionMark :size="40" v-else-if="hasError" />
+        </div>
+        <div class="w-full">
+            <div class="flex flex-row items-center gap-1">
+                <p class="font-medium">
+                    {{ title }}
+                </p>
+            </div>
+            <div class="flex flex-row" v-if="hasLoaded">
+                <p class="text-sm text-muted-foreground">
+                    {{ trackCount }} track(s)
+                </p>
+            </div>
+            <div class="flex flex-row items-center gap-2" v-if="hasProgress">
+                <p class="text-sm text-muted-foreground">
+                    {{ progress }}%
+                </p>
+                <Progress :modelValue="progress" />
+            </div>
+            <div class="flex flex-row" v-if="hasError">
+                <p class="text-sm text-destructive-foreground">
+                    {{ error }}
+                </p>
+            </div>
+        </div>
+        <div>
+            <DropdownMenu>
+                <DropdownMenuTrigger as-child @trigger-click="handleTriggerClick">
+                    <Button variant="ghost">
+                        <EllipsisVertical :size="40" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent class="w-56" align="start">
+                    <DropdownMenuItem @click="openDialog">
+                        <Eye class="mr-2 h-4 w-4" />
+                        View Details
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                        <RefreshCw class="mr-2 h-4 w-4" />
+                        Retry
+                    </DropdownMenuItem>
+                    <DropdownMenuItem class="text-destructive">
+                        <Trash2 class="mr-2 h-4 w-4" />
+                        Delete
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+
+        <Dialog :open="isDialogOpen" @update:open="toggleDialog">
+            <DialogContent class="max-w-3xl">
+                <DialogHeader>
+                    <DialogTitle>Playlist Upload Details</DialogTitle>
+                    <DialogDescription>
+                        Detailed information about this playlist upload
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div class="grid gap-4 py-4">
+                    <div class="space-y-4">
+                        <h3 class="text-lg font-semibold">Basic Information</h3>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="space-y-2">
+                                <Label>Title</Label>
+                                <p class="text-sm">{{ title }}</p>
+                            </div>
+                            <div class="space-y-2">
+                                <Label>Status</Label>
+                                <div class="flex items-center gap-2">
+                                    <div :class="`h-2 w-2 rounded-full ${getStatusColor()}`" />
+                                    <span class="text-sm">{{ getStatusText() }}</span>
+                                </div>
+                            </div>
+                            <div class="space-y-2">
+                                <Label>Track Count</Label>
+                                <p class="text-sm">{{ trackCount }} tracks</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-if="ytdlnStdout" class="space-y-4">
+                        <div class="flex justify-between items-center">
+                            <h3 class="text-lg font-semibold">yt-dlp Output</h3>
+                            <Button variant="outline" size="sm" @click="copyToClipboard(ytdlnStdout)">
+                                <Copy class="mr-2 h-4 w-4" />
+                                Copy
+                            </Button>
+                        </div>
+                        <div class="bg-muted rounded-md p-4">
+                            <pre class="text-xs whitespace-pre-wrap overflow-x-auto max-h-60">{{ ytdlnStdout }}</pre>
+                        </div>
+                    </div>
+
+                    <div v-if="hasError" class="space-y-4">
+                        <h3 class="text-lg font-semibold text-destructive">Error Details</h3>
+                        <div class="bg-destructive/10 rounded-md p-4">
+                            <p class="text-sm text-destructive">{{ error }}</p>
+                        </div>
+                    </div>
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" @click="isDialogOpen = false">Close</Button>
+                    <Button @click="handleRetry">
+                        <RefreshCw class="mr-2 h-4 w-4" />
+                        Retry Upload
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    </Frame>
+</template>
+
+<script setup lang="ts">
+import {
+    CassetteTape,
+    Copy,
+    EllipsisVertical,
+    Eye,
+    FileQuestionMark,
+    ListMusicIcon,
+    RefreshCw,
+    Trash2
+} from 'lucide-vue-next';
+import { ref } from 'vue';
+import type { PlaylistProgressAllOfStatus } from '~/composeables/api/models';
+
+interface Props {
+    title: string
+    trackCount?: number
+    ytdlnStdout: string
+    status: PlaylistProgressAllOfStatus
+    progress?: number
+    error?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    progress: 0
+});
+
+const emit = defineEmits<{
+    retry: []
+}>();
+
+const isDialogOpen = ref(false);
+
+const hasLoaded = props.trackCount;
+const hasProgress = props.progress !== undefined && props.progress > 0;
+const hasError = props.error;
+
+const openDialog = () => {
+    isDialogOpen.value = true;
+};
+
+const toggleDialog = (value: boolean) => {
+    isDialogOpen.value = value;
+}
+
+const handleTriggerClick = (event: MouseEvent) => {
+    event.stopPropagation();
+};
+
+const getStatusColor = () => {
+    if (hasError) return 'bg-destructive';
+    if (props.status === 'FINISHED') return 'bg-green-500';
+    if (props.status === 'LOADING') return 'bg-blue-500';
+    if (hasProgress) return 'bg-amber-500';
+    return 'bg-gray-500';
+};
+
+const getStatusText = () => {
+    if (hasError) return 'Error';
+    if (props.status === 'FINISHED') return 'Completed';
+    if (props.status === 'LOADING') return 'Loading';
+    if (hasProgress) return 'In Progress';
+    return 'Pending';
+};
+
+const copyToClipboard = async (text: string) => {
+    try {
+        await navigator.clipboard.writeText(text);
+        console.log('Copied to clipboard');
+    } catch (err) {
+        console.error('Failed to copy:', err);
+    }
+};
+
+const handleRetry = () => {
+    emit('retry');
+    isDialogOpen.value = false;
+};
+</script>
--- a/app/components/internal/import/uploadentry/SingleUploadEntry.vue
+++ b/app/components/internal/import/uploadentry/SingleUploadEntry.vue
@ -0,0 +1,254 @@
+<template>
+    <Frame margin="none" class="px-3 py-4 flex items-center gap-2 cursor-pointer" @click="openDialog">
+        <div>
+            <Disc3 :size="40" v-if="hasLoaded" />
+            <AudioWaveform :size="40" v-else-if="hasProgress" />
+            <FileQuestionMark :size="40" v-else-if="hasError" />
+        </div>
+        <div class="w-full">
+            <div class="flex flex-row items-center gap-1">
+                <p class="font-medium">
+                    {{ title }}
+                </p>
+            </div>
+            <div class="flex flex-row" v-if="hasLoaded">
+                <p class="text-sm text-muted-foreground">
+                    {{ size }}
+                </p>
+                <Dot />
+                <p class="text-sm text-muted-foreground">
+                    {{ format }}
+                </p>
+            </div>
+            <div class="flex flex-row items-center gap-2" v-if="hasProgress">
+                <p class="text-sm text-muted-foreground">
+                    {{ progress }}%
+                </p>
+                <Progress :modelValue="progress" />
+            </div>
+            <div class="flex flex-row" v-if="hasError">
+                <p class="text-sm text-destructive-foreground">
+                    {{ error }}
+                </p>
+            </div>
+        </div>
+        <div>
+            <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                    <Button variant="ghost">
+                        <EllipsisVertical :size="40" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent class="w-56" align="start">
+                    <DropdownMenuItem @click="openDialog">
+                        <Eye class="mr-2 h-4 w-4" />
+                        View Details
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                        <Download class="mr-2 h-4 w-4" />
+                        Download
+                    </DropdownMenuItem>
+                    <DropdownMenuItem class="text-destructive">
+                        <Trash2 class="mr-2 h-4 w-4" />
+                        Delete
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+
+        <Dialog v-model:show="isDialogOpen">
+            <DialogContent class="max-w-3xl">
+                <DialogHeader>
+                    <DialogTitle>Track Upload Details</DialogTitle>
+                    <DialogDescription>
+                        Detailed information about this track upload
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div class="grid gap-4 py-4">
+                    <div class="space-y-4">
+                        <h3 class="text-lg font-semibold">Track Information</h3>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="space-y-2">
+                                <Label>Title</Label>
+                                <p class="text-sm">{{ title }}</p>
+                            </div>
+                            <div class="space-y-2">
+                                <Label>Format</Label>
+                                <p class="text-sm">{{ format }}</p>
+                            </div>
+                            <div class="space-y-2">
+                                <Label>Size</Label>
+                                <p class="text-sm">{{ size }}</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-if="trackProgressData" class="space-y-4">
+                        <h3 class="text-lg font-semibold">Upload Details</h3>
+                        <div class="grid grid-cols-2 gap-4">
+                            <div class="space-y-2">
+                                <Label>Progress</Label>
+                                <div class="flex items-center gap-2">
+                                    <p class="text-sm">{{ progress }}%</p>
+                                    <Progress :modelValue="progress" class="w-24" />
+                                </div>
+                            </div>
+                            <div class="space-y-2">
+                                <Label>Timestamp</Label>
+                                <p class="text-sm">{{ formatTimestamp(trackProgressData.timestamp) }}</p>
+                            </div>
+                            <div class="space-y-2">
+                                <Label>User ID</Label>
+                                <p class="text-sm">{{ trackProgressData.userId }}</p>
+                            </div>
+                            <div class="space-y-2">
+                                <Label>Track Source ID</Label>
+                                <p class="text-sm">{{ trackProgressData.trackSourceId }}</p>
+                            </div>
+                        </div>
+
+                        <div v-if="trackProgressData.title || trackProgressData.format" class="space-y-2">
+                            <Label>Additional Information</Label>
+                            <div class="bg-muted rounded-md p-3 space-y-1">
+                                <div v-if="trackProgressData.title" class="flex justify-between">
+                                    <span class="text-sm font-medium">Original Title:</span>
+                                    <span class="text-sm">{{ trackProgressData.title }}</span>
+                                </div>
+                                <div v-if="trackProgressData.format" class="flex justify-between">
+                                    <span class="text-sm font-medium">Source Format:</span>
+                                    <span class="text-sm">{{ trackProgressData.format }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="space-y-4">
+                        <h3 class="text-lg font-semibold">Status</h3>
+                        <div class="flex items-center gap-3 p-4 rounded-lg border">
+                            <div :class="`h-3 w-3 rounded-full ${getStatusColor()}`" />
+                            <div>
+                                <p class="font-medium">{{ getStatusText() }}</p>
+                                <p v-if="progress" class="text-sm text-muted-foreground">
+                                    Upload progress: {{ progress }}%
+                                </p>
+                                <p v-if="trackProgressData?.timestamp" class="text-sm text-muted-foreground">
+                                    Last updated: {{ formatTimestamp(trackProgressData.timestamp) }}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div v-if="hasError" class="space-y-4">
+                        <h3 class="text-lg font-semibold text-destructive">Error Details</h3>
+                        <div class="bg-destructive/10 rounded-md p-4">
+                            <p class="text-sm text-destructive">{{ error }}</p>
+                            <Button v-if="hasError" variant="outline" size="sm" class="mt-2" @click="handleRetry">
+                                <RefreshCw class="mr-2 h-4 w-4" />
+                                Retry Upload
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+
+                <DialogFooter>
+                    <Button variant="outline" @click="isDialogOpen = false">Close</Button>
+                    <Button variant="secondary" @click="downloadTrack">
+                        <Download class="mr-2 h-4 w-4" />
+                        Download Track
+                    </Button>
+                    <Button @click="openInPlayer">
+                        <Play class="mr-2 h-4 w-4" />
+                        Open in Player
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    </Frame>
+</template>
+
+<script setup lang="ts">
+import {
+    AudioWaveform,
+    Disc3,
+    Dot,
+    Download,
+    EllipsisVertical,
+    Eye,
+    FileQuestionMark,
+    Play,
+    RefreshCw,
+    Trash2
+} from 'lucide-vue-next';
+import { ref } from 'vue';
+
+interface Props {
+    title: string
+    size?: string
+    format?: string
+    progress?: number
+    error?: string
+    trackProgressData?: {
+        playlistId?: number
+        trackSourceId: number
+        userId: number
+        timestamp: number
+        title: string
+        format: string
+    }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    progress: 0
+});
+
+const emit = defineEmits<{
+    retry: []
+    download: []
+    play: []
+}>();
+
+const isDialogOpen = ref(false);
+
+const hasLoaded = props.size && props.format;
+const hasProgress = props.progress !== undefined && props.progress > 0;
+const hasError = props.error;
+
+const openDialog = () => {
+    isDialogOpen.value = true;
+};
+
+const getStatusColor = () => {
+    if (hasError) return 'bg-destructive';
+    if (hasLoaded && props.progress === 100) return 'bg-green-500';
+    if (hasProgress) return 'bg-blue-500';
+    return 'bg-gray-500';
+};
+
+const getStatusText = () => {
+    if (hasError) return 'Error';
+    if (hasLoaded && props.progress === 100) return 'Upload Complete';
+    if (hasProgress) return 'Uploading';
+    return 'Pending';
+};
+
+const formatTimestamp = (timestamp?: number) => {
+    if (!timestamp) return 'N/A';
+    return new Date(timestamp).toLocaleString();
+};
+
+const handleRetry = () => {
+    emit('retry');
+    isDialogOpen.value = false;
+};
+
+const downloadTrack = () => {
+    emit('download');
+    isDialogOpen.value = false;
+};
+
+const openInPlayer = () => {
+    emit('play');
+    isDialogOpen.value = false;
+};
+</script>
--- a/app/components/internal/import/uploadentry/UploadEntry.vue
+++ b/app/components/internal/import/uploadentry/UploadEntry.vue
@ -1,58 +1,27 @@
 <template>
-    <Frame margin="none" class="px-3 py-4 flex items-center gap-2">
-        <div>
-            <AudioWaveform :size="32" />
-        </div>
-        <div class="w-full">
-            <div class="flex flex-row items-center gap-1">
-                <p class="font-medium">
-                    {{ title }}
-                </p>
-                <UiButton variant="ghost" v-if="size">
-                    <Pen />
-                </UiButton>
-            </div>
-            <div class="flex flex-row" v-if="size && format">
-                <p class="text-sm text-muted-foreground">
-                    {{ size }}
-                </p>
-                <Dot />
-                <p class="text-sm text-muted-foreground">
-                    {{ format }}
-                </p>
-            </div>
-            <div class="flex flex-row items-center gap-2" v-if="progress">
-                <p class="text-sm text-muted-foreground">
-                    {{ progress }}%
-                </p>
-                <UiProgress :modelValue="progress" />
-            </div>
-            <div class="flex flex-row" v-if="error">
-                <p class="text-sm text-destructive-foreground">
-                    {{ error }}
-                </p>
-            </div>
-        </div>
-        <div>
-            <UiButton variant="ghost">
-                <EllipsisVertical :size="32" />
-            </UiButton>
-        </div>
-    </Frame>
+    <SingleUploadEntry v-if="entry.type === 'TRACK'" :title="(entry as SingleTrackProgressAllOf).title || ''" :size="''"
+        :format="(entry as SingleTrackProgressAllOf).format || ''" />
+    <PlaylistUploadEntry v-if="entry.type === 'PLAYLIST'" :title="(entry as PlaylistProgressAllOf).playlistTitle || ''"
+        :trackCount="(entry as PlaylistProgressAllOf).trackCount"
+        :ytdlnStdout="(entry as PlaylistProgressAllOf).ytdlnStdout || ''"
+        :status="(entry as PlaylistProgressAllOf).status || 'LOADING'" />
 </template>

 <script setup lang="ts">
-import Frame from '@/components/ui/frame/Frame.vue'
-import { AudioWaveform, Dot, EllipsisVertical, Pen } from 'lucide-vue-next'
+import type { PlaylistProgressAllOf, SingleTrackProgressAllOf, StreamProgress200Item } from '~/composeables/api/models';
+import PlaylistUploadEntry from './PlaylistUploadEntry.vue';
+import SingleUploadEntry from './SingleUploadEntry.vue';

 interface Props {
-    title: string
-    size?: string
-    format?: string
-    progress?: number
-    error?: string
+    entry: StreamProgress200Item
 }

-withDefaults(defineProps<Props>(), {
-})
+const props = withDefaults(defineProps<Props>(), {
+});
+
+const emit = defineEmits<{
+    retry: []
+    download: []
+    play: []
+}>();
 </script>
--- a/app/components/internal/musiccard/MusicCard.vue
+++ b/app/components/internal/musiccard/MusicCard.vue
@ -1,10 +1,10 @@
 <template>
-    <Frame margin="none" class="px-2 py-3 flex h-fit gap-2 hover:bg-muted" :class="selected && 'bg-muted'">
+    <Frame margin="none" class="px-2 py-3 flex h-fit gap-2 hover:bg-muted">
        <div class="text-[2rem] h-full">
            <Draggable />
        </div>
        <Separator orientation="vertical" />
-        <div class="w-fit flex-1 flex flex-col justify-between">
+        <div class="w-fit flex-1 flex flex-col justify-between cursor-pointer" data-no-drag @click="onPlayClick">
            <div class="w-full">
                <div class="flex items-start justify-between w-full">
                    <h4 class="scroll-m-20 text-xl font-semibold tracking-tight truncate max-w-[32ch]">
@ -26,30 +26,35 @@
                </Badge>
            </div>
        </div>
-        <Separator orientation="vertical" />
-        <div class="max-w-20 max-h-20 w-20 h-20" v-if="imageUrl">
+        <Separator orientation="vertical" class="cursor-pointer" data-no-drag @click="onPlayClick" />
+        <div class="max-w-20 max-h-20 w-20 h-20 cursor-pointer" data-no-drag v-if="imageUrl" @click="onPlayClick">
            <NuxtImg class="object-cover w-full h-full rounded-md" :src="imageUrl" :alt="title" />
        </div>
    </Frame>
 </template>

 <script setup lang="ts">
-import { Separator } from '@/components/ui/separator'
-import { Badge } from '@/components/ui/badge'
 import Draggable from '@/components/icon/Draggable.vue'
-import Frame from '@/components/ui/frame/Frame.vue'

 interface Props {
    title: string
    author: string
-    selected?: boolean
    badges?: string[]
    imageUrl?: string
    date?: string
 }

+const emit = defineEmits<{
+    onPlay: []
+}>();
+
 withDefaults(defineProps<Props>(), {
    authorLabel: 'Author',
    badges: () => []
 })
+
+function onPlayClick(e: MouseEvent) {
+    emit("onPlay")
+    e.stopPropagation();
+}
 </script>
--- a/app/components/internal/playlists/select/PlaylistCreateDialog.vue
+++ b/app/components/internal/playlists/select/PlaylistCreateDialog.vue
@ -3,21 +3,10 @@ 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 { 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";
+import { FormField } from "@/components/ui/form";

 const formSchema = toTypedSchema(z.object({
    playlistName: z.string().min(2).max(50).default(''),
--- a/app/components/internal/playlists/select/PlaylistsNotFound.vue
+++ b/app/components/internal/playlists/select/PlaylistsNotFound.vue
@ -1,13 +1,12 @@
 <script setup lang="ts">
-import Button from '@/components/ui/button/Button.vue';
+import { FileMusicIcon } from 'lucide-vue-next';
+import PlaylistCreateDialog from './PlaylistCreateDialog.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 { FileMusicIcon } from 'lucide-vue-next';
-import PlaylistCreateDialog from './PlaylistCreateDialog.vue';
+import EmptyDescription from '@/components/ui/empty/EmptyDescription.vue';
+import EmptyContent from '@/components/ui/empty/EmptyContent.vue';

 </script>

--- a/app/components/ui/button/index.ts
+++ b/app/components/ui/button/index.ts
@ -4,7 +4,7 @@ import { cva } from "class-variance-authority"
 export { default as Button } from "./Button.vue"

 export const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
    {
        variants: {
            variant: {
--- a/app/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/app/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@ -2,16 +2,21 @@
 import type { DropdownMenuTriggerProps } from "reka-ui"
 import { DropdownMenuTrigger, useForwardProps } from "reka-ui"

-const props = defineProps<DropdownMenuTriggerProps>()
+const props = defineProps<DropdownMenuTriggerProps & {
+    onTriggerClick?: (event: MouseEvent) => void
+}>()

 const forwardedProps = useForwardProps(props)
+
+const handleClick = (event: MouseEvent) => {
+    if (props.onTriggerClick) {
+        props.onTriggerClick(event)
+    }
+}
 </script>

 <template>
-  <DropdownMenuTrigger
-    data-slot="dropdown-menu-trigger"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </DropdownMenuTrigger>
+    <DropdownMenuTrigger data-slot="dropdown-menu-trigger" v-bind="forwardedProps" @click="handleClick">
+        <slot />
+    </DropdownMenuTrigger>
 </template>
--- a/app/components/ui/dropzone/Dropzone.vue
+++ b/app/components/ui/dropzone/Dropzone.vue
@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useDropZone } from '@vueuse/core'
+import { Button } from '@/components/ui/button'
+import { Upload } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+interface DropzoneProps {
+    accept?: Record<string, string[]>
+    maxFiles?: number
+    maxSize?: number
+    minSize?: number
+    disabled?: boolean
+    src?: File[]
+    class?: string
+}
+
+const props = withDefaults(defineProps<DropzoneProps>(), {
+    maxFiles: 1,
+    accept: () => ({}),
+    src: () => []
+})
+
+const emit = defineEmits<{
+    drop: [acceptedFiles: File[], event: DragEvent]
+    error: [error: Error]
+}>()
+
+const files = ref<File[]>(props.src || [])
+const error = ref<string>('')
+
+const renderBytes = (bytes: number): string => {
+    const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']
+    let size = bytes
+    let unitIndex = 0
+
+    while (size >= 1024 && unitIndex < units.length - 1) {
+        size /= 1024
+        unitIndex++
+    }
+
+    return `${size.toFixed(2)}${units[unitIndex]}`
+}
+
+const validateFile = (file: File): string => {
+    if (props.minSize && file.size < props.minSize) {
+        return `File must be at least ${renderBytes(props.minSize)}`
+    }
+
+    if (props.maxSize && file.size > props.maxSize) {
+        return `File must be less than ${renderBytes(props.maxSize)}`
+    }
+
+    if (props.accept && Object.keys(props.accept).length > 0) {
+        const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase()
+        const mimeType = file.type
+
+        const isAccepted = Object.entries(props.accept).some(([mime, extensions]) => {
+            return (
+                mimeType === mime ||
+                extensions.some((ext) => fileExtension === ext.toLowerCase())
+            )
+        })
+
+        if (!isAccepted) {
+            const acceptedTypes = Object.keys(props.accept).join(', ')
+            return `File type not accepted. Accepted types: ${acceptedTypes}`
+        }
+    }
+
+    return ''
+}
+
+const onDrop = (droppedFiles: File[] | null, event: DragEvent) => {
+    if (!droppedFiles || props.disabled) return
+
+    error.value = ''
+    const validFiles: File[] = []
+    const newFiles: File[] = []
+
+    droppedFiles.slice(0, props.maxFiles).forEach((file) => {
+        const validationError = validateFile(file)
+        if (validationError) {
+            error.value = validationError
+            emit('error', new Error(validationError))
+        } else {
+            validFiles.push(file)
+        }
+    })
+
+    if (validFiles.length > 0) {
+        newFiles.push(...validFiles)
+
+        if (props.maxFiles === 1) {
+            files.value = newFiles
+        } else {
+            const remainingSlots = props.maxFiles - files.value.length
+            files.value = [...files.value, ...newFiles.slice(0, remainingSlots)]
+        }
+
+        emit('drop', newFiles, event)
+    }
+}
+
+const dropZoneRef = ref<HTMLElement>()
+const { isOverDropZone } = useDropZone(dropZoneRef, {
+    onDrop,
+    dataTypes: props.accept ? Object.keys(props.accept) : []
+})
+
+const handleClick = () => {
+    if (props.disabled) return
+
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.multiple = props.maxFiles > 1
+    input.accept = props.accept ? Object.keys(props.accept).join(',') : '*/*'
+
+    input.onchange = (e: Event) => {
+        const target = e.target as HTMLInputElement
+        if (target.files) {
+            onDrop(Array.from(target.files), e as unknown as DragEvent)
+        }
+    }
+
+    input.click()
+}
+
+const maxLabelItems = 3
+const fileListLabel = computed(() => {
+    if (files.value.length === 0) return ''
+
+    if (files.value.length > maxLabelItems) {
+        const firstThree = files.value.slice(0, maxLabelItems).map(f => f.name)
+        const remaining = files.value.length - maxLabelItems
+        return `${new Intl.ListFormat('en').format(firstThree)} and ${remaining} more`
+    }
+
+    return new Intl.ListFormat('en').format(files.value.map(f => f.name))
+})
+
+const captionText = computed(() => {
+    let caption = ''
+
+    if (Object.keys(props.accept).length > 0) {
+        caption += 'Accepts '
+        caption += new Intl.ListFormat('en').format(Object.keys(props.accept))
+    }
+
+    if (props.minSize && props.maxSize) {
+        caption += ` between ${renderBytes(props.minSize)} and ${renderBytes(props.maxSize)}`
+    } else if (props.minSize) {
+        caption += ` at least ${renderBytes(props.minSize)}`
+    } else if (props.maxSize) {
+        caption += ` less than ${renderBytes(props.maxSize)}`
+    }
+
+    return caption
+})
+
+defineExpose({
+    files,
+    clearFiles: () => { files.value = [] },
+    addFiles: (newFiles: File[]) => {
+        const remainingSlots = props.maxFiles - files.value.length
+        files.value = [...files.value, ...newFiles.slice(0, remainingSlots)]
+    }
+})
+</script>
+
+<template>
+    <Button ref="dropZoneRef" :class="cn(
+        'relative h-auto w-full flex-col overflow-hidden p-8',
+        isOverDropZone && 'outline-none ring-1 ring-ring',
+        props.class
+    )
+        " :disabled="disabled" type="button" variant="outline" @click="handleClick">
+        <div v-if="files.length === 0" class="flex flex-col items-center justify-center">
+            <div class="flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
+                <Upload :size="16" />
+            </div>
+            <p class="my-2 w-full truncate text-wrap font-medium text-sm">
+                Upload {{ maxFiles === 1 ? 'a file' : 'files' }}
+            </p>
+            <p class="w-full truncate text-wrap text-muted-foreground text-xs">
+                Drag and drop or click to upload
+            </p>
+            <p v-if="captionText" class="text-wrap text-muted-foreground text-xs">
+                {{ captionText }}.
+            </p>
+        </div>
+
+        <div v-else class="flex flex-col items-center justify-center">
+            <div class="flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground">
+                <Upload :size="16" />
+            </div>
+            <p class="my-2 w-full truncate font-medium text-sm">
+                {{ fileListLabel }}
+            </p>
+            <p class="w-full text-wrap text-muted-foreground text-xs">
+                Drag and drop or click to replace
+            </p>
+        </div>
+
+        <p v-if="error" class="mt-2 text-sm text-destructive">{{ error }}</p>
+    </Button>
+</template>
--- a/app/components/ui/file-upload/FileUpload.vue
+++ b/app/components/ui/file-upload/FileUpload.vue
@ -0,0 +1,198 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+import { Motion } from "motion-v";
+import { ref } from "vue";
+import { X } from "lucide-vue-next";
+import Button from "../button/Button.vue";
+import Progress from "../progress/Progress.vue";
+
+interface FileUploadProps {
+    class?: HTMLAttributes["class"];
+    accept?: string;
+    modelValue?: File[];
+    ongoingUploads?: Map<string, { file: File; progress: number }>;
+}
+
+const props = defineProps<FileUploadProps>();
+
+const emit = defineEmits<{
+    (e: "onChange", files: File[]): void;
+    (e: "update:modelValue", files: File[]): void;
+}>();
+
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const files = ref<File[]>(props.modelValue || []);
+const isActive = ref<boolean>(false);
+
+function handleFileChange(newFiles: File[]) {
+    files.value = [...files.value, ...newFiles];
+    emit("onChange", files.value);
+    emit("update:modelValue", files.value);
+}
+
+function onFileChange(e: Event) {
+    const input = e.target as HTMLInputElement;
+    if (!input.files) return;
+    handleFileChange(Array.from(input.files));
+}
+
+function handleClick() {
+    fileInputRef.value?.click();
+}
+
+function handleEnter() {
+    isActive.value = true;
+}
+function handleLeave() {
+    isActive.value = false;
+}
+function handleDrop(e: DragEvent) {
+    isActive.value = false;
+    const droppedFiles = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
+    if (droppedFiles.length) handleFileChange(droppedFiles);
+}
+
+function removeFile(event: MouseEvent, index: number) {
+    files.value.splice(index, 1);
+    event.stopPropagation();
+    emit("update:modelValue", files.value);
+}
+
+function getUploadProgress(file: File): number {
+    if (!props.ongoingUploads) return 0;
+
+    for (const [_, upload] of props.ongoingUploads) {
+        if (
+            upload.file.name === file.name &&
+            upload.file.size === file.size &&
+            upload.file.lastModified === file.lastModified
+        ) {
+            return upload.progress;
+        }
+    }
+    return 0;
+}
+
+function isFileUploading(file: File): boolean {
+    if (!props.ongoingUploads) return false;
+
+    for (const [_, upload] of props.ongoingUploads) {
+        if (
+            upload.file.name === file.name &&
+            upload.file.size === file.size &&
+            upload.file.lastModified === file.lastModified
+        ) {
+            return true;
+        }
+    }
+    return false;
+}
+
+watch(() => props.modelValue, (newVal) => {
+    if (newVal) {
+        files.value = newVal;
+    }
+}, { deep: true });
+</script>
+
+<template>
+    <ClientOnly>
+        <div class="w-full" :class="[$props.class]" @dragover.prevent="handleEnter" @dragleave="handleLeave"
+            @drop.prevent="handleDrop" @mouseover="handleEnter" @mouseleave="handleLeave">
+            <div class="group/file relative block w-full cursor-pointer overflow-hidden rounded-lg p-10 bg-muted space-y-4"
+                @click="handleClick">
+                <input ref="fileInputRef" type="file" class="hidden" :accept="accept" @change="onFileChange" multiple />
+
+                <!-- Grid pattern -->
+                <div
+                    class="pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,white,transparent)]">
+                    <slot />
+                </div>
+
+                <div class="relative mx-auto w-full max-w-xl space-y-8">
+                    <Motion v-for="(file, idx) in files" :key="`file-${idx}`" :initial="{ opacity: 0, scaleX: 0 }"
+                        :animate="{ opacity: 1, scaleX: 1 }"
+                        class="relative z-40 mx-auto flex w-full flex-col items-start justify-start overflow-hidden rounded-md p-4 shadow-sm text-muted-foreground bg-background gap-2">
+                        <div class="flex w-full items-center justify-between gap-4">
+                            <Motion as="p" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }"
+                                class="max-w-xs truncate text-base">
+                                {{ file.name }}
+                            </Motion>
+                            <div class="flex items-center gap-2">
+                                <Motion as="p" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }"
+                                    class="shadow-input w-fit shrink-0 rounded-lg px-2 py-1 text-sm">
+                                    {{ (file.size / (1024 * 1024)).toFixed(2) }} MB
+                                </Motion>
+                                <Motion as="div" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }"
+                                    v-if="isFileUploading(file)">
+                                    <span class="text-xs px-2 py-1 rounded bg-blue-100 text-blue-800">
+                                        Uploading...
+                                    </span>
+                                </Motion>
+                            </div>
+                        </div>
+
+                        <div
+                            class="flex w-full flex-col items-start justify-between text-sm text-muted-foreground md:flex-row md:items-center">
+                            <Motion as="p" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }"
+                                class="rounded-md bg-muted px-1.5 py-1 text-sm">
+                                {{ file.type || "unknown type" }}
+                            </Motion>
+                            <Motion as="div" :initial="{ opacity: 0 }" :animate="{ opacity: 1 }"
+                                v-if="!isFileUploading(file)">
+                                <Button variant="ghost" @click="(e: MouseEvent) => removeFile(e, idx)"
+                                    :disabled="isFileUploading(file)">
+                                    <X />
+                                </Button>
+                            </Motion>
+                        </div>
+                        <div class="w-full" v-if="isFileUploading(file)">
+                            <Progress :modelValue="getUploadProgress(file)" class="w-full" />
+                        </div>
+                    </Motion>
+
+                    <template v-if="!files.length">
+                        <Motion as="div"
+                            class="relative z-40 mx-auto mt-4 flex h-32 w-full max-w-32 items-center justify-center rounded-md shadow-[0px_10px_50px_rgba(0,0,0,0.1)] bg-background group-hover/file:shadow-2xl"
+                            :initial="{
+                                x: 0,
+                                y: 0,
+                                opacity: 1,
+                            }" :transition="{
+                                type: 'spring',
+                                stiffness: 300,
+                                damping: 20,
+                            }" :animate="isActive
+                                ? {
+                                    x: 20,
+                                    y: -20,
+                                    opacity: 0.9,
+                                }
+                                : {}
+                                ">
+                            <Icon name="heroicons:arrow-up-tray-20-solid" size="20" />
+                        </Motion>
+
+                        <div class="absolute inset-0 z-30 mx-auto mt-4 flex h-32 w-full max-w-32 items-center justify-center rounded-md border border-dashed border-border bg-transparent transition-opacity"
+                            :class="{ 'opacity-100': isActive, 'opacity-0': !isActive }" />
+                    </template>
+                </div>
+
+                <!-- Content -->
+                <div class="flex flex-col items-center justify-center gap-2">
+                    <slot name="content" />
+                </div>
+            </div>
+        </div>
+    </ClientOnly>
+</template>
+
+<style scoped>
+.group-hover\/file\:shadow-2xl:hover {
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
+}
+
+.transition-opacity {
+    transition: opacity 0.3s ease;
+}
+</style>
--- a/app/components/ui/file-upload/FileUploadGrid.vue
+++ b/app/components/ui/file-upload/FileUploadGrid.vue
@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue";
+
+interface FileUploadGridProps {
+  class?: HTMLAttributes["class"];
+}
+
+defineProps<FileUploadGridProps>();
+
+const ROWS = 11;
+const COLUMNS = 41;
+</script>
+
+<template>
+  <div
+    class="flex shrink-0 scale-105 flex-wrap items-center justify-center gap-px bg-gray-100 dark:bg-neutral-900"
+    :class="[$props.class]"
+  >
+    <template v-for="row in ROWS">
+      <template
+        v-for="col in COLUMNS"
+        :key="`${row}-${col}`"
+      >
+        <div
+          class="flex h-10 w-10 flex-shrink-0 rounded-[2px]"
+          :class="[
+            ((row - 1) * COLUMNS + (col - 1)) % 2 === 0
+              ? 'bg-gray-50 dark:bg-neutral-950'
+              : 'bg-gray-50 shadow-[0px_0px_1px_3px_rgba(255,255,255,1)_inset] dark:bg-neutral-950 dark:shadow-[0px_0px_1px_3px_rgba(0,0,0,1)_inset]',
+          ]"
+        />
+      </template>
+    </template>
+  </div>
+</template>
--- a/app/components/ui/file-upload/index.ts
+++ b/app/components/ui/file-upload/index.ts
@ -0,0 +1,2 @@
+export { default as FileUpload } from "./FileUpload.vue";
+export { default as FileUploadGrid } from "./FileUploadGrid.vue";
--- a/app/composeables/api/axios-instance.ts
+++ b/app/composeables/api/axios-instance.ts
@ -1,7 +1,7 @@
 import Axios, { type AxiosRequestConfig, type AxiosResponse } from 'axios';
 export const AXIOS_INSTANCE = Axios.create();

-export const axiosInstance = <T>(
+const axiosInstance = <T>(
    config: AxiosRequestConfig,
    options?: AxiosRequestConfig,
 ): Promise<AxiosResponse<T, any>> => {
@ -13,7 +13,7 @@ export const axiosInstance = <T>(
            ...options,
            baseURL: baseURL,
            auth: {
-                username: 'user',
+                username: 'user1',
                password: 'password',
            }
        },
@ -23,3 +23,4 @@ export const axiosInstance = <T>(
    return promise;
 };

+export default axiosInstance;
--- a/app/composeables/api/event-source.ts
+++ b/app/composeables/api/event-source.ts
@ -0,0 +1,94 @@
+import type { AxiosRequestConfig } from "axios";
+import { ErrorEvent, EventSource } from 'eventsource'
+
+type Unarray<T> = T extends Array<infer U> ? U : T;
+
+export interface EventSourceListener<T> {
+    handle: (callback: (data: T) => void) => EventSourceListener<T>;
+    close: () => void;
+    onError: (callback: (error: ErrorEvent) => void) => EventSourceListener<T>;
+    onOpen: (callback: (event: Event) => void) => EventSourceListener<T>;
+}
+
+const eventSource = <T>(
+    config: AxiosRequestConfig,
+    options?: AxiosRequestConfig,
+): Promise<EventSourceListener<Unarray<T>>> => {
+    return new Promise((resolve, reject) => {
+        try {
+            const baseURL = useRuntimeConfig().public.apiBaseUrl;
+            const endpoint = config.url;
+            const eventSource = new EventSource(baseURL + endpoint, {
+                fetch: (input, init) => fetch(input, {
+                    ...init,
+                    headers: {
+                        ...init.headers,
+                        Authorization: 'Basic ' + btoa('user1' + ":" + 'password'),
+                    },
+                })
+            })
+
+            let messageCallback: ((data: Unarray<T>) => void) | null = null;
+            let errorCallback: ((error: ErrorEvent) => void) | null = null;
+            let openCallback: ((event: Event) => void) | null = null;
+
+            eventSource.addEventListener("message", (event: MessageEvent<any>) => {
+                if (messageCallback) {
+                    try {
+                        let data = JSON.parse(event.data) as Unarray<T>;
+                        messageCallback(data);
+                    } catch (error) {
+                        console.error('Error parsing EventSource data:', error);
+                    }
+                }
+            });
+
+            eventSource.addEventListener('error', (event) => {
+                if (errorCallback) {
+                    errorCallback(event);
+                }
+            });
+
+            eventSource.addEventListener('open', (event) => {
+                if (openCallback) {
+                    openCallback(event);
+                }
+            });
+
+            const listener: EventSourceListener<Unarray<T>> = {
+                handle: (callback: (data: Unarray<T>) => void) => {
+                    messageCallback = callback;
+                    return listener;
+                },
+
+                onError: (callback: (error: ErrorEvent) => void) => {
+                    errorCallback = callback;
+                    return listener;
+                },
+
+                onOpen: (callback: (event: Event) => void) => {
+                    openCallback = callback;
+                    return listener;
+                },
+
+                close: () => {
+                    eventSource.close();
+                    messageCallback = null;
+                    errorCallback = null;
+                    openCallback = null;
+                }
+            };
+
+            resolve(listener);
+            setTimeout(() => {
+                if (eventSource.readyState === EventSource.CLOSED && !errorCallback) {
+                    reject(new Error('EventSource connection failed'));
+                }
+            }, 5000);
+        } catch (error) {
+            reject(error);
+        }
+    });
+}
+
+export default eventSource;
--- a/app/composeables/api/models/baseTrackProgress.ts
+++ b/app/composeables/api/models/baseTrackProgress.ts
@ -0,0 +1,16 @@
+/**
+ * Generated by orval v7.16.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+import type { BaseTrackProgressType } from './baseTrackProgressType';
+
+export interface BaseTrackProgress {
+  id?: string;
+  playlistId?: number;
+  trackSourceId?: number;
+  userId?: number;
+  timestamp?: number;
+  type?: BaseTrackProgressType;
+}
--- a/app/composeables/api/models/baseTrackProgressType.ts
+++ b/app/composeables/api/models/baseTrackProgressType.ts
@ -0,0 +1,16 @@
+/**
+ * Generated by orval v7.16.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+export type BaseTrackProgressType = typeof BaseTrackProgressType[keyof typeof BaseTrackProgressType];
+
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const BaseTrackProgressType = {
+  PLAYLIST: 'PLAYLIST',
+  TRACK: 'TRACK',
+  EXTERNAL_TRACK: 'EXTERNAL_TRACK',
+} as const;
--- a/app/composeables/api/models/index.ts
+++ b/app/composeables/api/models/index.ts
@ -6,14 +6,19 @@
 */

 export * from './addLocalTrackRequest';
-export * from './playlistCreateDTO';
+export * from './baseTrackProgress';
+export * from './baseTrackProgressType';
 export * from './playlistCreateRequest';
-export * from './playlistReadDTO';
+export * from './playlistProgress';
+export * from './playlistProgressAllOf';
+export * from './playlistProgressAllOfStatus';
 export * from './playlistReadResponse';
 export * from './playlistTrackResponse';
 export * from './readParams';
+export * from './singleTrackProgress';
+export * from './singleTrackProgressAllOf';
+export * from './streamProgress200Item';
 export * from './trackBulkReorderRequest';
-export * from './trackReoderAfterRequest';
-export * from './trackReorderAfterRequest';
 export * from './trackResponse';
-export * from './uploadBody';
+export * from './uploadBody';
+export * from './youtubeTrackRequest';
--- a/app/composeables/api/models/playlistProgress.ts
+++ b/app/composeables/api/models/playlistProgress.ts
@ -0,0 +1,10 @@
+/**
+ * Generated by orval v7.16.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+import type { BaseTrackProgress } from './baseTrackProgress';
+import type { PlaylistProgressAllOf } from './playlistProgressAllOf';
+
+export type PlaylistProgress = BaseTrackProgress & PlaylistProgressAllOf;
--- a/app/composeables/api/models/playlistProgressAllOf.ts
+++ b/app/composeables/api/models/playlistProgressAllOf.ts
@ -0,0 +1,15 @@
+/**
+ * Generated by orval v7.16.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+import type { PlaylistProgressAllOfStatus } from './playlistProgressAllOfStatus';
+
+export type PlaylistProgressAllOf = {
+  ytdlnStdout?: string;
+  overallProgress?: number;
+  trackCount?: number;
+  playlistTitle?: string;
+  status?: PlaylistProgressAllOfStatus;
+};
--- a/app/composeables/api/models/playlistProgressAllOfStatus.ts
+++ b/app/composeables/api/models/playlistProgressAllOfStatus.ts
@ -0,0 +1,15 @@
+/**
+ * Generated by orval v7.16.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+
+export type PlaylistProgressAllOfStatus = typeof PlaylistProgressAllOfStatus[keyof typeof PlaylistProgressAllOfStatus];
+
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const PlaylistProgressAllOfStatus = {
+  LOADING: 'LOADING',
+  FINISHED: 'FINISHED',
+} as const;
--- a/app/composeables/api/models/playlistReadDTO.ts
+++ b/app/composeables/api/models/playlistReadDTO.ts
@ -1,14 +0,0 @@
-/**
- * Generated by orval v7.16.0 🍺
- * Do not edit manually.
- * OpenAPI definition
- * OpenAPI spec version: v0
- */
-
-export interface PlaylistReadDTO {
-  id?: number;
-  ownerId?: number;
-  title?: string;
-  createdAt?: string;
-  updatedAt?: string;
-}
--- a/app/composeables/api/models/singleTrackProgress.ts
+++ b/app/composeables/api/models/singleTrackProgress.ts
@ -0,0 +1,10 @@
+/**
+ * Generated by orval v7.16.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+import type { BaseTrackProgress } from './baseTrackProgress';
+import type { SingleTrackProgressAllOf } from './singleTrackProgressAllOf';
+
+export type SingleTrackProgress = BaseTrackProgress & SingleTrackProgressAllOf;
--- a/app/composeables/api/models/singleTrackProgressAllOf.ts
+++ b/app/composeables/api/models/singleTrackProgressAllOf.ts
@ -5,6 +5,7 @@
 * OpenAPI spec version: v0
 */

-export interface PlaylistCreateDTO {
+export type SingleTrackProgressAllOf = {
  title?: string;
-}
+  format?: string;
+};
--- a/app/composeables/api/models/streamProgress200Item.ts
+++ b/app/composeables/api/models/streamProgress200Item.ts
@ -0,0 +1,10 @@
+/**
+ * Generated by orval v7.16.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+import type { PlaylistProgress } from './playlistProgress';
+import type { SingleTrackProgress } from './singleTrackProgress';
+
+export type StreamProgress200Item = PlaylistProgress | SingleTrackProgress;
--- a/app/composeables/api/models/trackResponse.ts
+++ b/app/composeables/api/models/trackResponse.ts
@ -10,6 +10,7 @@ export interface TrackResponse {
  title?: string;
  artist?: string;
  audioPath?: string;
+  fileFormat?: string;
  durationSeconds?: number;
  fileName?: string;
 }
--- a/app/composeables/api/models/trackReorderAfterRequest.ts
+++ b/app/composeables/api/models/trackReorderAfterRequest.ts
@ -5,7 +5,6 @@
 * OpenAPI spec version: v0
 */

-export interface TrackReorderAfterRequest {
-  moveTrackId?: number;
-  targetTrackId?: number;
+export interface YoutubeTrackRequest {
+  youtubeUrl?: string;
 }
--- a/app/composeables/api/playlist-controller/playlist-controller.ts
+++ b/app/composeables/api/playlist-controller/playlist-controller.ts
@ -32,7 +32,8 @@ import type {
  PlaylistReadResponse
 } from '.././models';

-import { axiosInstance } from '.././axios-instance';
+import createPlaylistMutator from '.././axios-instance';
+import playlistsMutator from '.././axios-instance';


 type SecondParameter<T extends (...args: never) => unknown> = Parameters<T>[1];
@ -41,11 +42,11 @@ type SecondParameter<T extends (...args: never) => unknown> = Parameters<T>[1];

 export const createPlaylist = (
    playlistCreateRequest: MaybeRef<PlaylistCreateRequest>,
- options?: SecondParameter<typeof axiosInstance>,signal?: AbortSignal
+ options?: SecondParameter<typeof createPlaylistMutator>,signal?: AbortSignal
 ) => {
      playlistCreateRequest = unref(playlistCreateRequest);
      
-      return axiosInstance<PlaylistReadResponse>(
+      return createPlaylistMutator<PlaylistReadResponse>(
      {url: `/playlist`, method: 'POST',
      headers: {'Content-Type': 'application/json', },
      data: playlistCreateRequest, signal
@ -56,7 +57,7 @@ export const createPlaylist = (


 export const getCreatePlaylistMutationOptions = <TError = unknown,
-    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof createPlaylist>>, TError,{data: PlaylistCreateRequest}, TContext>, request?: SecondParameter<typeof axiosInstance>}
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof createPlaylist>>, TError,{data: PlaylistCreateRequest}, TContext>, request?: SecondParameter<typeof createPlaylistMutator>}
 ): UseMutationOptions<Awaited<ReturnType<typeof createPlaylist>>, TError,{data: PlaylistCreateRequest}, TContext> => {

 const mutationKey = ['createPlaylist'];
@ -85,7 +86,7 @@ const {mutation: mutationOptions, request: requestOptions} = options ?
    export type CreatePlaylistMutationError = unknown

    export const useCreatePlaylist = <TError = unknown,
-    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof createPlaylist>>, TError,{data: PlaylistCreateRequest}, TContext>, request?: SecondParameter<typeof axiosInstance>}
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof createPlaylist>>, TError,{data: PlaylistCreateRequest}, TContext>, request?: SecondParameter<typeof createPlaylistMutator>}
 , queryClient?: QueryClient): UseMutationReturnType<
        Awaited<ReturnType<typeof createPlaylist>>,
        TError,
@ -99,11 +100,11 @@ const {mutation: mutationOptions, request: requestOptions} = options ?
    }
    export const playlists = (
    
- options?: SecondParameter<typeof axiosInstance>,signal?: AbortSignal
+ options?: SecondParameter<typeof playlistsMutator>,signal?: AbortSignal
 ) => {
      
      
-      return axiosInstance<PlaylistReadResponse[]>(
+      return playlistsMutator<PlaylistReadResponse[]>(
      {url: `/playlists`, method: 'GET', signal
    },
      options);
@ -119,7 +120,7 @@ export const getPlaylistsQueryKey = () => {
    }

    
-export const getPlaylistsQueryOptions = <TData = Awaited<ReturnType<typeof playlists>>, TError = unknown>( options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof playlists>>, TError, TData>>, request?: SecondParameter<typeof axiosInstance>}
+export const getPlaylistsQueryOptions = <TData = Awaited<ReturnType<typeof playlists>>, TError = unknown>( options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof playlists>>, TError, TData>>, request?: SecondParameter<typeof playlistsMutator>}
 ) => {

 const {query: queryOptions, request: requestOptions} = options ?? {};
@ -143,7 +144,7 @@ export type PlaylistsQueryError = unknown


 export function usePlaylists<TData = Awaited<ReturnType<typeof playlists>>, TError = unknown>(
-  options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof playlists>>, TError, TData>>, request?: SecondParameter<typeof axiosInstance>}
+  options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof playlists>>, TError, TData>>, request?: SecondParameter<typeof playlistsMutator>}
 , queryClient?: QueryClient 
 ): UseQueryReturnType<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> } {

--- a/app/composeables/api/progress-sse-controller/progress-sse-controller.ts
+++ b/app/composeables/api/progress-sse-controller/progress-sse-controller.ts
@ -0,0 +1,99 @@
+/**
+ * Generated by orval v7.16.0 🍺
+ * Do not edit manually.
+ * OpenAPI definition
+ * OpenAPI spec version: v0
+ */
+import {
+  useQuery
+} from '@tanstack/vue-query';
+import type {
+  DataTag,
+  QueryClient,
+  QueryFunction,
+  QueryKey,
+  UseQueryOptions,
+  UseQueryReturnType
+} from '@tanstack/vue-query';
+
+import {
+  computed,
+  unref
+} from 'vue';
+import type {
+  MaybeRef
+} from 'vue';
+
+import type {
+  StreamProgress200Item
+} from '.././models';
+
+import streamProgressMutator from '.././event-source';
+
+
+type SecondParameter<T extends (...args: never) => unknown> = Parameters<T>[1];
+
+
+
+export const streamProgress = (
+    playlistId: MaybeRef<number>,
+ options?: SecondParameter<typeof streamProgressMutator>,signal?: AbortSignal
+) => {
+      playlistId = unref(playlistId);
+      
+      return streamProgressMutator<StreamProgress200Item[]>(
+      {url: `/importing/stream/${playlistId}`, method: 'GET', signal
+    },
+      options);
+    }
+  
+
+
+
+export const getStreamProgressQueryKey = (playlistId?: MaybeRef<number>,) => {
+    return [
+    'importing','stream',playlistId
+    ] as const;
+    }
+
+    
+export const getStreamProgressQueryOptions = <TData = Awaited<ReturnType<typeof streamProgress>>, TError = unknown>(playlistId: MaybeRef<number>, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof streamProgress>>, TError, TData>>, request?: SecondParameter<typeof streamProgressMutator>}
+) => {
+
+const {query: queryOptions, request: requestOptions} = options ?? {};
+
+  const queryKey =  getStreamProgressQueryKey(playlistId);
+
+  
+
+    const queryFn: QueryFunction<Awaited<ReturnType<typeof streamProgress>>> = ({ signal }) => streamProgress(playlistId, requestOptions, signal);
+
+      
+
+      
+
+   return  { queryKey, queryFn, enabled: computed(() => !!(unref(playlistId))), ...queryOptions} as UseQueryOptions<Awaited<ReturnType<typeof streamProgress>>, TError, TData> 
+}
+
+export type StreamProgressQueryResult = NonNullable<Awaited<ReturnType<typeof streamProgress>>>
+export type StreamProgressQueryError = unknown
+
+
+
+export function useStreamProgress<TData = Awaited<ReturnType<typeof streamProgress>>, TError = unknown>(
+ playlistId: MaybeRef<number>, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof streamProgress>>, TError, TData>>, request?: SecondParameter<typeof streamProgressMutator>}
+ , queryClient?: QueryClient 
+ ): UseQueryReturnType<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> } {
+
+  const queryOptions = getStreamProgressQueryOptions(playlistId,options)
+
+  const query = useQuery(queryOptions, queryClient) as UseQueryReturnType<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> };
+
+  query.queryKey = unref(queryOptions).queryKey as DataTag<QueryKey, TData, TError>;
+
+  return query;
+}
+
+
+
+
--- a/app/composeables/api/s-3-controller/s-3-controller.ts
+++ b/app/composeables/api/s-3-controller/s-3-controller.ts
@ -32,7 +32,8 @@ import type {
  UploadBody
 } from '.././models';

-import { axiosInstance } from '.././axios-instance';
+import uploadMutator from '.././axios-instance';
+import readMutator from '.././axios-instance';


 type SecondParameter<T extends (...args: never) => unknown> = Parameters<T>[1];
@ -41,13 +42,13 @@ type SecondParameter<T extends (...args: never) => unknown> = Parameters<T>[1];

 export const upload = (
    uploadBody: MaybeRef<UploadBody>,
- options?: SecondParameter<typeof axiosInstance>,signal?: AbortSignal
+ options?: SecondParameter<typeof uploadMutator>,signal?: AbortSignal
 ) => {
      uploadBody = unref(uploadBody);
      const formData = new FormData();
 formData.append(`document`, uploadBody.document)

-      return axiosInstance<string>(
+      return uploadMutator<string>(
      {url: `/upload`, method: 'POST',
      headers: {'Content-Type': 'multipart/form-data', },
       data: formData, signal
@ -58,7 +59,7 @@ formData.append(`document`, uploadBody.document)


 export const getUploadMutationOptions = <TError = unknown,
-    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof upload>>, TError,{data: UploadBody}, TContext>, request?: SecondParameter<typeof axiosInstance>}
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof upload>>, TError,{data: UploadBody}, TContext>, request?: SecondParameter<typeof uploadMutator>}
 ): UseMutationOptions<Awaited<ReturnType<typeof upload>>, TError,{data: UploadBody}, TContext> => {

 const mutationKey = ['upload'];
@ -87,7 +88,7 @@ const {mutation: mutationOptions, request: requestOptions} = options ?
    export type UploadMutationError = unknown

    export const useUpload = <TError = unknown,
-    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof upload>>, TError,{data: UploadBody}, TContext>, request?: SecondParameter<typeof axiosInstance>}
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof upload>>, TError,{data: UploadBody}, TContext>, request?: SecondParameter<typeof uploadMutator>}
 , queryClient?: QueryClient): UseMutationReturnType<
        Awaited<ReturnType<typeof upload>>,
        TError,
@ -101,11 +102,11 @@ const {mutation: mutationOptions, request: requestOptions} = options ?
    }
    export const read = (
    params: MaybeRef<ReadParams>,
- options?: SecondParameter<typeof axiosInstance>,signal?: AbortSignal
+ options?: SecondParameter<typeof readMutator>,signal?: AbortSignal
 ) => {
      params = unref(params);
      
-      return axiosInstance<string>(
+      return readMutator<string>(
      {url: `/read`, method: 'GET',
        params: unref(params), signal
    },
@ -122,7 +123,7 @@ export const getReadQueryKey = (params?: MaybeRef<ReadParams>,) => {
    }

    
-export const getReadQueryOptions = <TData = Awaited<ReturnType<typeof read>>, TError = unknown>(params: MaybeRef<ReadParams>, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof read>>, TError, TData>>, request?: SecondParameter<typeof axiosInstance>}
+export const getReadQueryOptions = <TData = Awaited<ReturnType<typeof read>>, TError = unknown>(params: MaybeRef<ReadParams>, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof read>>, TError, TData>>, request?: SecondParameter<typeof readMutator>}
 ) => {

 const {query: queryOptions, request: requestOptions} = options ?? {};
@ -146,7 +147,7 @@ export type ReadQueryError = unknown


 export function useRead<TData = Awaited<ReturnType<typeof read>>, TError = unknown>(
- params: MaybeRef<ReadParams>, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof read>>, TError, TData>>, request?: SecondParameter<typeof axiosInstance>}
+ params: MaybeRef<ReadParams>, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof read>>, TError, TData>>, request?: SecondParameter<typeof readMutator>}
 , queryClient?: QueryClient 
 ): UseQueryReturnType<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> } {

--- a/app/composeables/api/track-controller/track-controller.ts
+++ b/app/composeables/api/track-controller/track-controller.ts
@ -32,27 +32,150 @@ import type {
  AddLocalTrackRequest,
  PlaylistTrackResponse,
  TrackBulkReorderRequest,
-  TrackResponse
+  TrackResponse,
+  YoutubeTrackRequest
 } from '.././models';

-import { axiosInstance } from '.././axios-instance';
+import addYoutubeTrackMutator from '.././axios-instance';
+import addYoutubeTrack1Mutator from '.././axios-instance';
+import addLocalTrackMutator from '.././axios-instance';
+import bulkReorderMutator from '.././axios-instance';
+import getPlaylistTracksMutator from '.././axios-instance';


 type SecondParameter<T extends (...args: never) => unknown> = Parameters<T>[1];



-export const addLocalTrack = (
+export const addYoutubeTrack = (
+    playlistId: MaybeRef<number>,
+    youtubeTrackRequest: MaybeRef<YoutubeTrackRequest>,
+ options?: SecondParameter<typeof addYoutubeTrackMutator>,signal?: AbortSignal
+) => {
+      playlistId = unref(playlistId);
+youtubeTrackRequest = unref(youtubeTrackRequest);
+      
+      return addYoutubeTrackMutator<TrackResponse[]>(
+      {url: `/playlist/${playlistId}/track/youtube`, method: 'POST',
+      headers: {'Content-Type': 'application/json', },
+      data: youtubeTrackRequest, signal
+    },
+      options);
+    }
+  
+
+
+export const getAddYoutubeTrackMutationOptions = <TError = unknown,
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof addYoutubeTrack>>, TError,{playlistId: number;data: YoutubeTrackRequest}, TContext>, request?: SecondParameter<typeof addYoutubeTrackMutator>}
+): UseMutationOptions<Awaited<ReturnType<typeof addYoutubeTrack>>, TError,{playlistId: number;data: YoutubeTrackRequest}, TContext> => {
+
+const mutationKey = ['addYoutubeTrack'];
+const {mutation: mutationOptions, request: requestOptions} = options ?
+      options.mutation && 'mutationKey' in options.mutation && options.mutation.mutationKey ?
+      options
+      : {...options, mutation: {...options.mutation, mutationKey}}
+      : {mutation: { mutationKey, }, request: undefined};
+
+      
+
+
+      const mutationFn: MutationFunction<Awaited<ReturnType<typeof addYoutubeTrack>>, {playlistId: number;data: YoutubeTrackRequest}> = (props) => {
+          const {playlistId,data} = props ?? {};
+
+          return  addYoutubeTrack(playlistId,data,requestOptions)
+        }
+
+        
+
+
+  return  { mutationFn, ...mutationOptions }}
+
+    export type AddYoutubeTrackMutationResult = NonNullable<Awaited<ReturnType<typeof addYoutubeTrack>>>
+    export type AddYoutubeTrackMutationBody = YoutubeTrackRequest
+    export type AddYoutubeTrackMutationError = unknown
+
+    export const useAddYoutubeTrack = <TError = unknown,
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof addYoutubeTrack>>, TError,{playlistId: number;data: YoutubeTrackRequest}, TContext>, request?: SecondParameter<typeof addYoutubeTrackMutator>}
+ , queryClient?: QueryClient): UseMutationReturnType<
+        Awaited<ReturnType<typeof addYoutubeTrack>>,
+        TError,
+        {playlistId: number;data: YoutubeTrackRequest},
+        TContext
+      > => {
+
+      const mutationOptions = getAddYoutubeTrackMutationOptions(options);
+
+      return useMutation(mutationOptions, queryClient);
+    }
+    export const addYoutubeTrack1 = (
+    playlistId: MaybeRef<number>,
+    sourceId: MaybeRef<number>,
+ options?: SecondParameter<typeof addYoutubeTrack1Mutator>,signal?: AbortSignal
+) => {
+      playlistId = unref(playlistId);
+sourceId = unref(sourceId);
+      
+      return addYoutubeTrack1Mutator<TrackResponse[]>(
+      {url: `/playlist/${playlistId}/track/youtube/refresh/${sourceId}`, method: 'POST', signal
+    },
+      options);
+    }
+  
+
+
+export const getAddYoutubeTrack1MutationOptions = <TError = unknown,
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof addYoutubeTrack1>>, TError,{playlistId: number;sourceId: number}, TContext>, request?: SecondParameter<typeof addYoutubeTrack1Mutator>}
+): UseMutationOptions<Awaited<ReturnType<typeof addYoutubeTrack1>>, TError,{playlistId: number;sourceId: number}, TContext> => {
+
+const mutationKey = ['addYoutubeTrack1'];
+const {mutation: mutationOptions, request: requestOptions} = options ?
+      options.mutation && 'mutationKey' in options.mutation && options.mutation.mutationKey ?
+      options
+      : {...options, mutation: {...options.mutation, mutationKey}}
+      : {mutation: { mutationKey, }, request: undefined};
+
+      
+
+
+      const mutationFn: MutationFunction<Awaited<ReturnType<typeof addYoutubeTrack1>>, {playlistId: number;sourceId: number}> = (props) => {
+          const {playlistId,sourceId} = props ?? {};
+
+          return  addYoutubeTrack1(playlistId,sourceId,requestOptions)
+        }
+
+        
+
+
+  return  { mutationFn, ...mutationOptions }}
+
+    export type AddYoutubeTrack1MutationResult = NonNullable<Awaited<ReturnType<typeof addYoutubeTrack1>>>
+    
+    export type AddYoutubeTrack1MutationError = unknown
+
+    export const useAddYoutubeTrack1 = <TError = unknown,
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof addYoutubeTrack1>>, TError,{playlistId: number;sourceId: number}, TContext>, request?: SecondParameter<typeof addYoutubeTrack1Mutator>}
+ , queryClient?: QueryClient): UseMutationReturnType<
+        Awaited<ReturnType<typeof addYoutubeTrack1>>,
+        TError,
+        {playlistId: number;sourceId: number},
+        TContext
+      > => {
+
+      const mutationOptions = getAddYoutubeTrack1MutationOptions(options);
+
+      return useMutation(mutationOptions, queryClient);
+    }
+    export const addLocalTrack = (
    playlistId: MaybeRef<number>,
    addLocalTrackRequest: MaybeRef<AddLocalTrackRequest>,
- options?: SecondParameter<typeof axiosInstance>,signal?: AbortSignal
+ options?: SecondParameter<typeof addLocalTrackMutator>,signal?: AbortSignal
 ) => {
      playlistId = unref(playlistId);
 addLocalTrackRequest = unref(addLocalTrackRequest);
      const formData = new FormData();
 formData.append(`source`, addLocalTrackRequest.source)

-      return axiosInstance<TrackResponse>(
+      return addLocalTrackMutator<TrackResponse>(
      {url: `/playlist/${playlistId}/track/local`, method: 'POST',
      headers: {'Content-Type': 'multipart/form-data', },
       data: formData, signal
@ -63,7 +186,7 @@ formData.append(`source`, addLocalTrackRequest.source)


 export const getAddLocalTrackMutationOptions = <TError = unknown,
-    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof addLocalTrack>>, TError,{playlistId: number;data: AddLocalTrackRequest}, TContext>, request?: SecondParameter<typeof axiosInstance>}
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof addLocalTrack>>, TError,{playlistId: number;data: AddLocalTrackRequest}, TContext>, request?: SecondParameter<typeof addLocalTrackMutator>}
 ): UseMutationOptions<Awaited<ReturnType<typeof addLocalTrack>>, TError,{playlistId: number;data: AddLocalTrackRequest}, TContext> => {

 const mutationKey = ['addLocalTrack'];
@ -92,7 +215,7 @@ const {mutation: mutationOptions, request: requestOptions} = options ?
    export type AddLocalTrackMutationError = unknown

    export const useAddLocalTrack = <TError = unknown,
-    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof addLocalTrack>>, TError,{playlistId: number;data: AddLocalTrackRequest}, TContext>, request?: SecondParameter<typeof axiosInstance>}
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof addLocalTrack>>, TError,{playlistId: number;data: AddLocalTrackRequest}, TContext>, request?: SecondParameter<typeof addLocalTrackMutator>}
 , queryClient?: QueryClient): UseMutationReturnType<
        Awaited<ReturnType<typeof addLocalTrack>>,
        TError,
@ -107,12 +230,12 @@ const {mutation: mutationOptions, request: requestOptions} = options ?
    export const bulkReorder = (
    playlistId: MaybeRef<number>,
    trackBulkReorderRequest: MaybeRef<TrackBulkReorderRequest>,
- options?: SecondParameter<typeof axiosInstance>,signal?: AbortSignal
+ options?: SecondParameter<typeof bulkReorderMutator>,signal?: AbortSignal
 ) => {
      playlistId = unref(playlistId);
 trackBulkReorderRequest = unref(trackBulkReorderRequest);
      
-      return axiosInstance<void>(
+      return bulkReorderMutator<void>(
      {url: `/playlist/${playlistId}/bulk-reorder`, method: 'POST',
      headers: {'Content-Type': 'application/json', },
      data: trackBulkReorderRequest, signal
@ -123,7 +246,7 @@ trackBulkReorderRequest = unref(trackBulkReorderRequest);


 export const getBulkReorderMutationOptions = <TError = unknown,
-    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof bulkReorder>>, TError,{playlistId: number;data: TrackBulkReorderRequest}, TContext>, request?: SecondParameter<typeof axiosInstance>}
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof bulkReorder>>, TError,{playlistId: number;data: TrackBulkReorderRequest}, TContext>, request?: SecondParameter<typeof bulkReorderMutator>}
 ): UseMutationOptions<Awaited<ReturnType<typeof bulkReorder>>, TError,{playlistId: number;data: TrackBulkReorderRequest}, TContext> => {

 const mutationKey = ['bulkReorder'];
@ -152,7 +275,7 @@ const {mutation: mutationOptions, request: requestOptions} = options ?
    export type BulkReorderMutationError = unknown

    export const useBulkReorder = <TError = unknown,
-    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof bulkReorder>>, TError,{playlistId: number;data: TrackBulkReorderRequest}, TContext>, request?: SecondParameter<typeof axiosInstance>}
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof bulkReorder>>, TError,{playlistId: number;data: TrackBulkReorderRequest}, TContext>, request?: SecondParameter<typeof bulkReorderMutator>}
 , queryClient?: QueryClient): UseMutationReturnType<
        Awaited<ReturnType<typeof bulkReorder>>,
        TError,
@ -166,11 +289,11 @@ const {mutation: mutationOptions, request: requestOptions} = options ?
    }
    export const getPlaylistTracks = (
    playlistId: MaybeRef<number>,
- options?: SecondParameter<typeof axiosInstance>,signal?: AbortSignal
+ options?: SecondParameter<typeof getPlaylistTracksMutator>,signal?: AbortSignal
 ) => {
      playlistId = unref(playlistId);
      
-      return axiosInstance<PlaylistTrackResponse[]>(
+      return getPlaylistTracksMutator<PlaylistTrackResponse[]>(
      {url: `/playlist/${playlistId}/tracks`, method: 'GET', signal
    },
      options);
@ -186,7 +309,7 @@ export const getGetPlaylistTracksQueryKey = (playlistId?: MaybeRef<number>,) =>
    }

    
-export const getGetPlaylistTracksQueryOptions = <TData = Awaited<ReturnType<typeof getPlaylistTracks>>, TError = unknown>(playlistId: MaybeRef<number>, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getPlaylistTracks>>, TError, TData>>, request?: SecondParameter<typeof axiosInstance>}
+export const getGetPlaylistTracksQueryOptions = <TData = Awaited<ReturnType<typeof getPlaylistTracks>>, TError = unknown>(playlistId: MaybeRef<number>, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getPlaylistTracks>>, TError, TData>>, request?: SecondParameter<typeof getPlaylistTracksMutator>}
 ) => {

 const {query: queryOptions, request: requestOptions} = options ?? {};
@ -210,7 +333,7 @@ export type GetPlaylistTracksQueryError = unknown


 export function useGetPlaylistTracks<TData = Awaited<ReturnType<typeof getPlaylistTracks>>, TError = unknown>(
- playlistId: MaybeRef<number>, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getPlaylistTracks>>, TError, TData>>, request?: SecondParameter<typeof axiosInstance>}
+ playlistId: MaybeRef<number>, options?: { query?:Partial<UseQueryOptions<Awaited<ReturnType<typeof getPlaylistTracks>>, TError, TData>>, request?: SecondParameter<typeof getPlaylistTracksMutator>}
 , queryClient?: QueryClient 
 ): UseQueryReturnType<TData, TError> & { queryKey: DataTag<QueryKey, TData, TError> } {

--- a/app/layouts/clear.vue
+++ b/app/layouts/clear.vue
@ -16,8 +16,8 @@

 <script setup>
 import { useSlots } from 'vue'
-import Sonner from '~/components/ui/sonner/Sonner.vue';
 import 'vue-sonner/style.css'
+import Sonner from '~/components/ui/sonner/Sonner.vue';

 const slots = useSlots()
 </script>
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@ -1,6 +1,6 @@
 <template>
    <ClientOnly>
-        <Toaster />
+        <Sonner />
    </ClientOnly>
    <AppSidebar />
    <SidebarInset>
@ -22,10 +22,9 @@

 <script setup>
 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'
+import AppSidebar from '~/components/ui/sidebar/AppSidebar.vue';

+import Sonner from '~/components/ui/sonner/Sonner.vue';
 const slots = useSlots()
 </script>
--- a/app/pages/edit.vue
+++ b/app/pages/edit.vue
@ -1,16 +1,11 @@
 <script setup lang="ts">
-import { Search } from 'lucide-vue-next'
-import { Button } from '@/components/ui/button'
-import { InputWithIcon } from '@/components/ui/input'
-import { Outline } from '@/components/ui/outline'
-import { SidebarTrigger } from '@/components/ui/sidebar'
-import MusicCard from '~/components/internal/musiccard/MusicCard.vue'
-import { DnDOperations, useDroppable } from '@vue-dnd-kit/core'
-import Draggable from '~/components/action/Draggable.vue'
-import { useCurrentPlaylistStore } from '~/stores/use-current-playlist-store'
-import { bulkReorder, getGetPlaylistTracksQueryKey } from '~/composeables/api/track-controller/track-controller'
-import { useGetPlaylistTracks } from '~/composeables/api/track-controller/track-controller'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { Search } from 'lucide-vue-next'
+import { VueDraggableNext } from 'vue-draggable-next'
+import MusicCard from '@/components/internal/musiccard/MusicCard.vue'
+import type { TrackResponse } from '~/composeables/api/models'
+import { bulkReorder, getGetPlaylistTracksQueryKey, useGetPlaylistTracks } from '~/composeables/api/track-controller/track-controller'
+import { useCurrentPlaylistStore } from '~/stores/use-current-playlist-store'

 const searchValue = ref('')

@ -56,23 +51,33 @@ const { mutate: reorderTracks } = useMutation({
    },
 });

+interface MappedTrack {
+    id: number;
+    title: string;
+    author: string;
+    authorLabel: string;
+    badges: string[];
+    imageUrl: string | undefined;
+    date: string;
+}

-const trackCount = computed(() => playlistTracks.value?.data.length || 0)
+const mappedTracks = ref<MappedTrack[]>([])

-const mappedTracks = computed(() => {
+watchEffect(() => {
    if (!playlistTracks.value) return []
    const tracks = playlistTracks.value.data

-    return tracks.map((track: any, index: number) => ({
-        id: track.trackId || track.id,
-        title: track.track?.title || track.title || 'Unknown Track',
-        author: track.track?.artist?.name || track.artist || 'Unknown Artist',
-        authorLabel: "Artist",
-        badges: track.track?.format ? [track.track.format] : ['mp3'],
-        imageUrl: track.track?.coverUrl || track.coverUrl || getDefaultImage(index),
-        date: formatDate(track.addedDate || track.createdAt),
-        selected: false
-    }))
+    const result = tracks
+        .map((track: TrackResponse, index: number) => ({
+            id: track.trackId!,
+            title: track.title || 'Unknown Track',
+            author: track.artist || 'Unknown Artist',
+            authorLabel: "Artist",
+            badges: ['mp3'], // TODO: badges
+            imageUrl: getDefaultImage(index), // TODO: imageUrl
+            date: formatDate(''), // TODO: createdAt
+        }));
+    mappedTracks.value = result;
 })

 const getDefaultImage = (index: number) => {
@ -108,34 +113,16 @@ const filteredTracks = computed(() => {
        track.author.toLowerCase().includes(searchValue.value.toLowerCase()) ||
        track.badges.some(badge => badge.toLowerCase().includes(searchValue.value.toLowerCase()))
    )
-})
-
-const selectTrack = (trackId: number) => {
-    mappedTracks.value.forEach(track => {
-        track.selected = track.id === trackId
-    })
-}
-
-const { elementRef: tracksRef } = useDroppable({
-    data: {
-        source: mappedTracks.value,
-    },
-    events: {
-        onDrop: (store, payload) => {
-            DnDOperations.applyTransfer(store);
-            if (currentPlaylistStore.id === -1) return;
-            if (mappedTracks.value.length !== trackCount.value) return;
-            if (mappedTracks.value.some(t => !t)) return;
-
-            const trackIds = mappedTracks.value?.map(t => t.id);
-            reorderTracks({
-                playlistId: currentPlaylistStore.id,
-                trackIds,
-            });
-        },
-    },
 });

+function onTrackOrderChange() {
+    const trackIds = mappedTracks.value?.map(t => t.id);
+    reorderTracks({
+        playlistId: currentPlaylistStore.id,
+        trackIds,
+    });
+}
+
 watch(() => currentPlaylistStore.id, (newId) => {
    if (newId !== -1) {
        refetch()
@ -163,7 +150,7 @@ watch(() => currentPlaylistStore.id, (newId) => {
                <InputWithIcon v-model="searchValue" :icon="Search" placeholder="Search..." type="search" icon-size="5"
                    id="user-search" class="w-full" />

-                <div ref="tracksRef">
+                <div>
                    <div v-if="isLoading" class="flex justify-center items-center py-8">
                        <p>Loading tracks...</p>
                    </div>
@ -177,16 +164,14 @@ watch(() => currentPlaylistStore.id, (newId) => {
                        <p v-else>No tracks in this playlist</p>
                    </div>

-                    <div v-else ref="tracksRef" class="space-y-2">
-                        <TransitionGroup name="list" ref="tracksRef">
-                            <Draggable v-for="(track, index) in filteredTracks" :key="track.id" :index="index"
-                                :source="mappedTracks">
-                                <MusicCard :key="track.id" :title="track.title" :author="track.author"
-                                    :authorLabel="track.authorLabel" :badges="track.badges" :imageUrl="track.imageUrl"
-                                    :date="track.date" :selected="track.selected" @click="selectTrack(track.id)" />
-                            </Draggable>
-                        </TransitionGroup>
-                    </div>
+                    <VueDraggableNext v-model="mappedTracks" group="tracks" @change="onTrackOrderChange" item-key="id"
+                        class="space-y-2" v-else>
+                        <div v-for="track in mappedTracks" :key="track.id">
+                            <MusicCard :key="track.id" :title="track.title" :author="track.author"
+                                :authorLabel="track.authorLabel" :badges="track.badges" :imageUrl="track.imageUrl"
+                                :date="track.date" />
+                        </div>
+                    </VueDraggableNext>
                </div>
            </div>
            <template #sidebar>
--- a/app/pages/export.vue
+++ b/app/pages/export.vue
@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { Outline } from '@/components/ui/outline';
-import { SidebarTrigger } from '@/components/ui/sidebar';
-import Frame from '@/components/ui/frame/Frame.vue';
+import Outline from '@/components/ui/outline/Outline.vue';
+
 </script>

 <template>
--- a/app/pages/import.vue
+++ b/app/pages/import.vue
@ -1,8 +1,145 @@
 <script setup lang="ts">
-import { Outline } from '@/components/ui/outline';
-import { SidebarTrigger } from '@/components/ui/sidebar';
-import { Download, Play } from 'lucide-vue-next';
-import UploadEntry from '~/components/internal/import/uploadentry/UploadEntry.vue';
+import Outline from '@/components/ui/outline/Outline.vue';
+import SidebarTrigger from '@/components/ui/sidebar/SidebarTrigger.vue';
+import Empty from '@/components/ui/empty/Empty.vue';
+import UploadEntry from '@/components/internal/import/uploadentry/UploadEntry.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 EmptyDescription from '@/components/ui/empty/EmptyDescription.vue';
+
+import { MegaphoneOff, Play } from 'lucide-vue-next';
+import type { EventSourceListener } from '~/composeables/api/event-source';
+import type { StreamProgress200Item } from '~/composeables/api/models';
+import { streamProgress } from '~/composeables/api/progress-sse-controller/progress-sse-controller';
+import { useCurrentPlaylistStore } from '~/stores/use-current-playlist-store';
+import FileUpload from '@/components/ui/file-upload/FileUpload.vue';
+import FileUploadGrid from '@/components/ui/file-upload/FileUploadGrid.vue';
+import Button from '@/components/ui/button/Button.vue';
+import { addLocalTrack } from '~/composeables/api/track-controller/track-controller';
+
+const files = ref<File[]>([]);
+const currentPlaylistStore = useCurrentPlaylistStore();
+const progressEntries = ref<Map<string, StreamProgress200Item>>(new Map());
+let listener: EventSourceListener<StreamProgress200Item> | null = null;
+
+const ongoingUploads = ref<Map<string, { file: File; progress: number }>>(new Map());
+
+const sortedProgressEntries = computed(() => {
+    return Array.from(progressEntries.value.values())
+        .sort((a, b) => {
+            const timeA = a.timestamp || 0;
+            const timeB = b.timestamp || 0;
+            return timeB - timeA;
+        });
+});
+
+const unwatch = watch(() => currentPlaylistStore.id, (newId, oldId) => {
+    if (newId !== -1 && newId !== oldId) {
+        listenImports();
+    } else if (newId === -1) {
+        stopImports();
+    }
+}, { immediate: true });
+
+const updateEntryFromProgress = (data: StreamProgress200Item) => {
+    if (!data.trackSourceId)
+        return;
+    progressEntries.value = new Map(progressEntries.value);
+    progressEntries.value.set(data.id!.toString(), data);
+}
+
+async function listenImports() {
+    if (listener) {
+        listener.close();
+    }
+    streamProgress(currentPlaylistStore.id).then(listener => {
+        listener.handle(data => {
+            updateEntryFromProgress(data);
+        })
+    }).catch(err => {
+        console.error(err);
+    })
+}
+
+async function handleFileUpload(uploadedFiles: File[]) {
+    if (!currentPlaylistStore.id || currentPlaylistStore.id === -1) {
+        console.error('No playlist selected');
+        return;
+    }
+
+    for (const file of uploadedFiles) {
+        const uploadId = generateUploadId(file);
+
+        ongoingUploads.value.set(uploadId, { file, progress: 0 });
+
+        try {
+            const formData = new FormData();
+            formData.append('source', file);
+
+            await addLocalTrack(
+                currentPlaylistStore.id,
+                { source: file },
+                {
+                    onUploadProgress: (progressEvent) => {
+                        if (progressEvent.total) {
+                            const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+                            ongoingUploads.value.set(uploadId, {
+                                file,
+                                progress: Math.min(progress, 100)
+                            });
+
+                            ongoingUploads.value = new Map(ongoingUploads.value);
+                        }
+                    }
+                }
+            );
+
+            ongoingUploads.value.delete(uploadId);
+            ongoingUploads.value = new Map(ongoingUploads.value);
+
+            const index = files.value.findIndex(f =>
+                f.name === file.name &&
+                f.size === file.size &&
+                f.lastModified === file.lastModified
+            );
+            if (index !== -1) {
+                files.value.splice(index, 1);
+            }
+
+        } catch (error) {
+            console.error('Upload failed:', error);
+            ongoingUploads.value.delete(uploadId);
+            ongoingUploads.value = new Map(ongoingUploads.value);
+        }
+    }
+}
+
+function generateUploadId(file: File): string {
+    return `${file.name}-${file.size}-${file.lastModified}-${Date.now()}`;
+}
+
+function handleFileChange(changedFiles: File[]) {
+    files.value = changedFiles;
+
+    handleFileUpload(changedFiles);
+}
+
+function onYoutubeClick(e: MouseEvent) {
+    e.stopPropagation();
+}
+
+function stopImports() {
+    if (listener) {
+        listener.close();
+        listener = null;
+    }
+}
+
+onUnmounted(() => {
+    stopImports();
+    unwatch();
+});
 </script>

 <template>
@ -19,27 +156,45 @@ import UploadEntry from '~/components/internal/import/uploadentry/UploadEntry.vu
                </Outline>
            </template>
            <div class="w-full flex flex-col p-8">
-                <Outline class="rounded-xl bg-muted flex flex-col items-center justify-center gap-1">
-                    <Download />
-                    <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
-                        Drag and drop your audio files
-                    </h4>
-                    <p class="text-sm text-muted-foreground">
-                        or
-                    </p>
-                    <UiButton variant="destructive">
-                        <Play />
-                        From Youtube
-                    </UiButton>
-                </Outline>
+                <FileUpload v-model="files" class="rounded-lg border border-dashed border-muted"
+                    @onChange="handleFileChange" :ongoing-uploads="ongoingUploads">
+                    <template #default>
+                        <FileUploadGrid />
+                    </template>
+                    <template #content>
+                        <h4 class="z-20 scroll-m-20 text-xl font-semibold tracking-tight">
+                            Drag and drop your audio files
+                        </h4>
+                        <p class="z-20 font-normal text-muted-foreground">
+                            or
+                        </p>
+                        <Button class="z-20" variant="destructive" @click="onYoutubeClick">
+                            <Play />
+                            From Youtube
+                        </Button>
+                    </template>
+                </FileUpload>
                <div>
                    <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
                        Uploaded files
                    </h3>
-                    <div class="flex-row space-y-2">
-                        <UploadEntry title="Test" size="3.8 MB" format="mp4" />
-                        <UploadEntry title="Test" :progress="78" />
-                        <UploadEntry title="Test" error="Uploading failed, please check your internet" />
+                    <div class="space-y-2">
+
+
+                        <UploadEntry v-for="entry in sortedProgressEntries" :key="entry.id" :entry="entry" />
+
+                        <Empty class="border border-dashed"
+                            v-if="progressEntries.size === 0 && ongoingUploads.size === 0">
+                            <EmptyHeader>
+                                <EmptyMedia variant="icon">
+                                    <MegaphoneOff />
+                                </EmptyMedia>
+                                <EmptyTitle>No imports found</EmptyTitle>
+                                <EmptyDescription>
+                                    Upload any track to see their progress.
+                                </EmptyDescription>
+                            </EmptyHeader>
+                        </Empty>
                    </div>
                </div>
            </div>
--- a/app/pages/modify.vue
+++ b/app/pages/modify.vue
@ -1,7 +1,16 @@
 <script setup lang="ts">
-import { Outline } from '@/components/ui/outline';
-import { SidebarTrigger } from '@/components/ui/sidebar';
-import Frame from '@/components/ui/frame/Frame.vue';
+import { ref } from 'vue'
+import Dropzone from '~/components/ui/dropzone/Dropzone.vue'
+
+const files = ref<File[]>([])
+
+const handleDrop = (acceptedFiles: File[], event: DragEvent) => {
+    console.log('Files dropped:', acceptedFiles)
+}
+
+const handleError = (error: Error) => {
+    console.error('Dropzone error:', error.message)
+}
 </script>

 <template>
@ -18,9 +27,10 @@ import Frame from '@/components/ui/frame/Frame.vue';
                </Outline>
            </template>
            <div class="w-full">
-                <Frame>
-                    Hello
-                </Frame>
+                <Dropzone :src="files" :accept="{
+                    'image/*': ['.png', '.jpg', '.jpeg', '.gif']
+                }" :max-size="5 * 1024 * 1024" :min-size="1024" :max-files="3" @drop="handleDrop" @error="handleError"
+                    class="w-full max-w-md" />
            </div>
        </NuxtLayout>
    </div>
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@ -1,9 +1,3 @@
-<script setup lang="ts">
-import { Outline } from '@/components/ui/outline';
-import { SidebarTrigger } from '@/components/ui/sidebar';
-import Frame from '@/components/ui/frame/Frame.vue';
-</script>
-
 <template>
    <div class="flex-1">
        <NuxtLayout name="default">
--- a/app/pages/test.vue
+++ b/app/pages/test.vue
@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { Outline } from '@/components/ui/outline';
-import Frame from '@/components/ui/frame/Frame.vue';
-
-definePageMeta({
-    layout: false,
-})
-</script>
-
-<template>
-    <NuxtLayout name="clear">
-        <template #header>
-            <Outline side="bottom" padding="dense" class="w-full">
-                <div class="flex gap-8 w-full items-center">
-                    <h2 class="scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
-                        Tracks
-                    </h2>
-                </div>
-            </Outline>
-        </template>
-        <div class="w-full">
-            <Frame>
-                Hello
-            </Frame>
-        </div>
-    </NuxtLayout>
-</template>
--- a/app/plugins/vue-dnd-kit.client.ts
+++ b/app/plugins/vue-dnd-kit.client.ts
@ -1,5 +0,0 @@
-import VueDnDKitPlugin from '@vue-dnd-kit/core';
-
-export default defineNuxtPlugin((nuxtApp) => {
-    nuxtApp.vueApp.use(VueDnDKitPlugin);
-});
--- a/bun.lock
+++ b/bun.lock
@ -12,13 +12,14 @@
        "@tailwindcss/vite": "^4.1.16",
        "@tanstack/vue-query": "^5.90.7",
        "@vee-validate/zod": "^4.15.1",
-        "@vue-dnd-kit/core": "^1.7.0",
        "@vueuse/core": "^14.1.0",
        "axios": "^1.13.2",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "dotenv": "^17.2.3",
+        "eventsource": "^4.1.0",
        "lucide-vue-next": "^0.548.0",
+        "motion-v": "^1.8.1",
        "nuxt": "^4.2.0",
        "oidc-client-ts": "^3.3.0",
        "pinia": "^3.0.4",
@ -29,6 +30,7 @@
        "tw-animate-css": "^1.4.0",
        "vee-validate": "^4.15.1",
        "vue": "^3.5.22",
+        "vue-draggable-next": "^2.3.0",
        "vue-router": "^4.6.3",
        "vue-sonner": "^2.0.9",
        "zod": "^4.1.12",
@ -616,8 +618,6 @@

    "@volar/source-map": ["@volar/source-map@2.4.23", "", {}, "sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q=="],

-    "@vue-dnd-kit/core": ["@vue-dnd-kit/core@1.7.0", "", { "peerDependencies": { "@vueuse/core": "^13.1.0", "vue": "^3.5.13" } }, "sha512-6Otpo/9Fp/cX5EiUoN6XmIPtm/mOreAXi8clr9HgzVvDHD0sfkgVOFxCUiVbH46yAzr6KBU1Q1tjSWLBqua+5g=="],
-
    "@vue-macros/common": ["@vue-macros/common@3.1.1", "", { "dependencies": { "@vue/compiler-sfc": "^3.5.22", "ast-kit": "^2.1.2", "local-pkg": "^1.1.2", "magic-string-ast": "^1.0.2", "unplugin-utils": "^0.3.0" }, "peerDependencies": { "vue": "^2.7.0 || ^3.2.25" }, "optionalPeers": ["vue"] }, "sha512-afW2DMjgCBVs33mWRlz7YsGHzoEEupnl0DK5ZTKsgziAlLh5syc5m+GM7eqeYrgiQpwMaVxa1fk73caCvPxyAw=="],

    "@vue/babel-helper-vue-transform-on": ["@vue/babel-helper-vue-transform-on@1.5.0", "", {}, "sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA=="],
@ -1002,6 +1002,10 @@

    "events-universal": ["events-universal@1.0.1", "", { "dependencies": { "bare-events": "^2.7.0" } }, "sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw=="],

+    "eventsource": ["eventsource@4.1.0", "", { "dependencies": { "eventsource-parser": "^3.0.1" } }, "sha512-2GuF51iuHX6A9xdTccMTsNb7VO0lHZihApxhvQzJB5A03DvHDd2FQepodbMaztPBmBcE/ox7o2gqaxGhYB9LhQ=="],
+
+    "eventsource-parser": ["eventsource-parser@3.0.6", "", {}, "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg=="],
+
    "execa": ["execa@5.1.1", "", { "dependencies": { "cross-spawn": "^7.0.3", "get-stream": "^6.0.0", "human-signals": "^2.1.0", "is-stream": "^2.0.0", "merge-stream": "^2.0.0", "npm-run-path": "^4.0.1", "onetime": "^5.1.2", "signal-exit": "^3.0.3", "strip-final-newline": "^2.0.0" } }, "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg=="],

    "expand-template": ["expand-template@2.0.3", "", {}, "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg=="],
@ -1048,6 +1052,8 @@

    "fraction.js": ["fraction.js@4.3.7", "", {}, "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="],

+    "framer-motion": ["framer-motion@12.26.2", "", { "dependencies": { "motion-dom": "^12.26.2", "motion-utils": "^12.24.10", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-lflOQEdjquUi9sCg5Y1LrsZDlsjrHw7m0T9Yedvnk7Bnhqfkc89/Uha10J3CFhkL+TCZVCRw9eUGyM/lyYhXQA=="],
+
    "fresh": ["fresh@2.0.0", "", {}, "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A=="],

    "fs-constants": ["fs-constants@1.0.0", "", {}, "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="],
@ -1122,6 +1128,8 @@

    "hasown": ["hasown@2.0.2", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ=="],

+    "hey-listen": ["hey-listen@1.0.8", "", {}, "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="],
+
    "hookable": ["hookable@5.5.3", "", {}, "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="],

    "http-errors": ["http-errors@2.0.0", "", { "dependencies": { "depd": "2.0.0", "inherits": "2.0.4", "setprototypeof": "1.2.0", "statuses": "2.0.1", "toidentifier": "1.0.1" } }, "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ=="],
@ -1400,6 +1408,12 @@

    "mocked-exports": ["mocked-exports@0.1.1", "", {}, "sha512-aF7yRQr/Q0O2/4pIXm6PZ5G+jAd7QS4Yu8m+WEeEHGnbo+7mE36CbLSDQiXYV8bVL3NfmdeqPJct0tUlnjVSnA=="],

+    "motion-dom": ["motion-dom@12.26.2", "", { "dependencies": { "motion-utils": "^12.24.10" } }, "sha512-KLMT1BroY8oKNeliA3JMNJ+nbCIsTKg6hJpDb4jtRAJ7nCKnnpg/LTq/NGqG90Limitz3kdAnAVXecdFVGlWTw=="],
+
+    "motion-utils": ["motion-utils@12.24.10", "", {}, "sha512-x5TFgkCIP4pPsRLpKoI86jv/q8t8FQOiM/0E8QKBzfMozWHfkKap2gA1hOki+B5g3IsBNpxbUnfOum1+dgvYww=="],
+
+    "motion-v": ["motion-v@1.8.1", "", { "dependencies": { "framer-motion": "^12.25.0", "hey-listen": "^1.0.8", "motion-dom": "^12.23.23" }, "peerDependencies": { "@vueuse/core": ">=10.0.0", "vue": ">=3.0.0" } }, "sha512-OS6ve/vdNlrKTmCAHy+lxujIVTggjs9nbzl1auWiewy49FthkpCs5Wwpf40+55Ko3mbTajlKadkTlQYysrnL4A=="],
+
    "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],

    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
@ -1766,6 +1780,8 @@

    "smob": ["smob@1.5.0", "", {}, "sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig=="],

+    "sortablejs": ["sortablejs@1.15.6", "", {}, "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A=="],
+
    "source-map": ["source-map@0.7.6", "", {}, "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ=="],

    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
@ -1972,6 +1988,8 @@

    "vue-devtools-stub": ["vue-devtools-stub@0.1.0", "", {}, "sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ=="],

+    "vue-draggable-next": ["vue-draggable-next@2.3.0", "", { "peerDependencies": { "sortablejs": "^1.14.0", "vue": "^3.5.17" } }, "sha512-ymbY0UIwfSdg0iDN/iyNNwUrTqZ/6KbPryzsvTNXBLuDCuOBdNijSK8yynNtmiSj6RapTPQfjLGQdJrZkzBd2w=="],
+
    "vue-router": ["vue-router@4.6.3", "", { "dependencies": { "@vue/devtools-api": "^6.6.4" }, "peerDependencies": { "vue": "^3.5.0" } }, "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg=="],

    "vue-sonner": ["vue-sonner@2.0.9", "", { "peerDependencies": { "@nuxt/kit": "^4.0.3", "@nuxt/schema": "^4.0.3", "nuxt": "^4.0.3" }, "optionalPeers": ["@nuxt/kit", "@nuxt/schema", "nuxt"] }, "sha512-i6BokNlNDL93fpzNxN/LZSn6D6MzlO+i3qXt6iVZne3x1k7R46d5HlFB4P8tYydhgqOrRbIZEsnRd3kG7qGXyw=="],
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -5,10 +5,6 @@ export default defineNuxtConfig({
    compatibilityDate: '2025-07-15',
    devtools: { enabled: true },
    modules: ['@nuxt/fonts', '@nuxt/icon', '@nuxt/image', 'shadcn-nuxt', '@pinia/nuxt',],
-    shadcn: {
-        prefix: '',
-        componentDir: './components/ui'
-    },
    css: ['~/assets/css/tailwind.css'],
    vite: {
        plugins: [
@ -20,7 +16,11 @@ export default defineNuxtConfig({
            apiBaseUrl: process.env.API_BASE_URL
        }
    },
+    shadcn: {
+        prefix: '',
+        componentDir: '@/components/ui'
+    },
    pinia: {
        storesDirs: ['./app/stores/**'],
    },
-})
+})
--- a/orval.config.js
+++ b/orval.config.js
@ -26,8 +26,12 @@ export default defineConfig({
            override: {
                mutator: {
                    path: './app/composeables/api/axios-instance.ts',
-                    name: 'axiosInstance',
                },
+                operations: {
+                    streamProgress: {
+                        mutator: './app/composeables/api/event-source.ts',
+                    }
+                }
            },
        }
    },
--- a/package.json
+++ b/package.json
@ -1,45 +1,47 @@
 {
-  "name": "hello-world",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "build": "nuxt build",
-    "dev": "nuxt dev",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
-  },
-  "dependencies": {
-    "@nuxt/fonts": "0.11.4",
-    "@nuxt/icon": "2.1.0",
-    "@nuxt/image": "1.11.0",
-    "@pinia/nuxt": "0.11.3",
-    "@tailwindcss/vite": "^4.1.16",
-    "@tanstack/vue-query": "^5.90.7",
-    "@vee-validate/zod": "^4.15.1",
-    "@vue-dnd-kit/core": "^1.7.0",
-    "@vueuse/core": "^14.1.0",
-    "axios": "^1.13.2",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "dotenv": "^17.2.3",
-    "lucide-vue-next": "^0.548.0",
-    "nuxt": "^4.2.0",
-    "oidc-client-ts": "^3.3.0",
-    "pinia": "^3.0.4",
-    "reka-ui": "^2.7.0",
-    "shadcn-nuxt": "2.3.2",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.1.16",
-    "tw-animate-css": "^1.4.0",
-    "vee-validate": "^4.15.1",
-    "vue": "^3.5.22",
-    "vue-router": "^4.6.3",
-    "vue-sonner": "^2.0.9",
-    "zod": "^4.1.12"
-  },
-  "devDependencies": {
-    "orval": "^7.16.0",
-    "typescript": "^5.9.3"
-  }
+    "name": "hello-world",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare"
+    },
+    "dependencies": {
+        "@nuxt/fonts": "0.11.4",
+        "@nuxt/icon": "2.1.0",
+        "@nuxt/image": "1.11.0",
+        "@pinia/nuxt": "0.11.3",
+        "@tailwindcss/vite": "^4.1.16",
+        "@tanstack/vue-query": "^5.90.7",
+        "@vee-validate/zod": "^4.15.1",
+        "@vueuse/core": "^14.1.0",
+        "axios": "^1.13.2",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "dotenv": "^17.2.3",
+        "eventsource": "^4.1.0",
+        "lucide-vue-next": "^0.548.0",
+        "motion-v": "^1.8.1",
+        "nuxt": "^4.2.0",
+        "oidc-client-ts": "^3.3.0",
+        "pinia": "^3.0.4",
+        "reka-ui": "^2.7.0",
+        "shadcn-nuxt": "2.3.2",
+        "tailwind-merge": "^3.3.1",
+        "tailwindcss": "^4.1.16",
+        "tw-animate-css": "^1.4.0",
+        "vee-validate": "^4.15.1",
+        "vue": "^3.5.22",
+        "vue-draggable-next": "^2.3.0",
+        "vue-router": "^4.6.3",
+        "vue-sonner": "^2.0.9",
+        "zod": "^4.1.12"
+    },
+    "devDependencies": {
+        "orval": "^7.16.0",
+        "typescript": "^5.9.3"
+    }
 }
Author	SHA1	Message	Date
bivashy	5fd026c026	Implement local track upload	2026-01-14 00:28:19 +05:00
bivashy	df9fe970ab	Add `files` modal and `X` button	2026-01-13 23:06:14 +05:00
bivashy	327aff6208	Fix `PlaylistUploadEntry` dialog with dropdown	2026-01-13 22:32:56 +05:00
bivashy	eb6483c180	Add component and apply to import	2026-01-13 22:13:40 +05:00
bivashy	bd878fceab	Add `playlistTitle`	2026-01-08 19:59:00 +05:00
bivashy	9984bb804a	Implement "import history" in import page	2026-01-08 03:57:00 +05:00
bivashy	c29c12feec	Format imports, partial implementation of import upload entries	2026-01-06 02:37:03 +05:00
bivashy	16d284fe68	Cleanup dom tree	2026-01-05 22:24:42 +05:00
bivashy	ff2b41c2e7	Replace `vue-dnd-code` with `vue-draggable-next`	2026-01-05 22:22:42 +05:00
bivashy	627c9fda99	Add `PlaylistUploadEntry`	2026-01-05 01:32:55 +05:00